/*
 * The hero's phone demo (templates/public/_phone_demo.html). The phones are
 * objects in the picture, not themed UI: their screens keep the apps' own
 * light colors in either site theme, so the colors here are literal.
 */

.phone-demo {
  position: relative;
  width: 100%;
  max-width: 420px;
  height: 600px;
  margin: 0 auto;
}

.phone {
  position: absolute;
  border-radius: 46px;
  background: #0b0b0d;
  padding: 11px;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.45), inset 0 0 0 1.5px #2a2b31;
}
.phone__screen {
  position: relative;
  height: 100%;
  overflow: hidden;
  border-radius: 36px;
  background: #fbfaf7;
  color: #121214;
  font: 13px/1.4 Inter, system-ui, sans-serif;
}

.phone--iphone { right: 0; top: 10px; width: 280px; height: 576px; z-index: 2; }
.phone__island {
  position: absolute; z-index: 3; top: 22px; left: 50%;
  width: 84px; height: 24px; margin-left: -42px;
  border-radius: 14px; background: #0b0b0d;
}
.phone--android {
  left: 0; top: 50px; width: 252px; height: 520px; z-index: 1;
  border-radius: 30px; padding: 8px;
  transform: rotate(-6deg); opacity: 0.85; filter: saturate(0.85);
}
.phone--android .phone__screen { border-radius: 23px; padding-top: 18px; }

/* Shared app pieces */
.app-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 50px 16px 10px; font-weight: 600;
}
.phone--android .app-bar { padding-top: 14px; }
.app-bar__icon { width: 28px; height: 28px; border-radius: 50%; background: #efece6; text-align: center; line-height: 28px; font-size: 13px; }
.app-bar__title { font-size: 14px; }
.app-filter { margin: 4px 14px 8px; padding: 7px 12px; border-radius: 10px; background: #efece6; color: #8a857f; font-size: 12px; }
.app-section { margin: 10px 18px 4px; color: #8a857f; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; }
.app-list { margin: 0 12px; padding: 0; list-style: none; border-radius: 12px; background: #fff; }
.app-list li { padding: 9px 12px; border-bottom: 1px solid #efece6; font-size: 12px; }

.screen { position: absolute; inset: 0; display: flex; flex-direction: column; transition: transform 0.55s cubic-bezier(.2,.7,.2,1), opacity 0.4s; }
.screen--claude { transform: translateX(100%); background: #faf8f4; }
.phone-demo[data-at="claude"] .screen--zm { transform: translateX(-30%); opacity: 0.6; }
.phone-demo[data-at="claude"] .screen--claude { transform: none; }

.convo { flex: 1; overflow: hidden; padding: 6px 14px; display: flex; flex-direction: column; gap: 10px; }
.bubble { align-self: flex-end; max-width: 82%; padding: 9px 12px; border-radius: 16px; background: #ece8e1; font-size: 12.5px; }
.bubble--prompt { max-height: 6.4em; overflow: hidden; -webkit-mask-image: linear-gradient(#000 65%, transparent); mask-image: linear-gradient(#000 65%, transparent); }

.answer { padding: 12px; border-radius: 14px; background: #fff; box-shadow: 0 1px 0 #e6e1d9, 0 4px 14px -8px rgba(0,0,0,.25); }
.answer__source { color: #287430; font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.answer__title { margin-top: 4px; font-weight: 700; font-size: 13.5px; }
.answer__body { margin-top: 4px; color: #4a4642; font-size: 12px; }
.answer__actions { display: flex; gap: 6px; margin-top: 10px; }
.answer__actions .pill { font-size: 11px; padding: 6px 10px; }
.pill { white-space: nowrap; padding: 6px 11px; border-radius: 999px; background: #efece6; font-size: 11.5px; font-weight: 600; transition: transform .15s, box-shadow .15s; }
.pill--primary { background: #121214; color: #fbfaf7; }
.phone-demo[data-tap] .pill--primary { transform: scale(0.94); box-shadow: 0 0 0 6px rgba(255, 60, 172, 0.35); }

.composer { display: flex; align-items: center; gap: 8px; margin: 8px 12px 22px; padding: 9px 9px 9px 14px; border-radius: 22px; background: #fff; box-shadow: inset 0 0 0 1px #e6e1d9; min-height: 40px; }
.composer__text { flex: 1; font-size: 12.5px; color: #8a857f; }
.composer__text.is-typing { color: #121214; }
.composer__send { width: 26px; height: 26px; border-radius: 50%; background: #121214; color: #fff; text-align: center; line-height: 26px; font-size: 13px; }

.reply { font-size: 12.5px; color: #2b2925; }
.reply p { margin-bottom: 6px; }

/* Steps appear as the script reaches them. */
[data-step], [data-line] { opacity: 0; transform: translateY(6px); transition: opacity .35s, transform .35s; }
[data-step].is-on, [data-line].is-on { opacity: 1; transform: none; }
.pill--primary[data-step] { opacity: 1; transform: none; }

.phone-demo[data-fade] .phone--iphone .phone__screen { opacity: 0; transition: opacity .6s; }
.phone--iphone .phone__screen { transition: opacity .6s; }

@media (max-width: 640px) {
  .phone-demo { height: 500px; max-width: 340px; }
  .phone--iphone { transform: scale(0.84); transform-origin: top right; }
  .phone--android { transform: rotate(-6deg) scale(0.8); transform-origin: top left; }
}

/* "Copied — paste it into the new chat", as the app says on the way out. */
.toast { position: absolute; left: 50%; bottom: 76px; transform: translate(-50%, 8px); padding: 7px 12px; border-radius: 999px; background: #121214; color: #fbfaf7; font-size: 11px; white-space: nowrap; opacity: 0; transition: opacity .25s, transform .25s; }
.phone-demo[data-toast] .toast { opacity: 1; transform: translate(-50%, 0); }
.composer__text.is-pasted { color: #121214; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Android: a punch-hole camera rather than an island. */
.phone--android .phone__screen::before { content: ""; position: absolute; top: 9px; left: 50%; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: #0b0b0d; }