/* Shared brand and face finish across the product tour and conversation. */
.logo { font-size:25px; gap:10px; letter-spacing:-1px; }



.robot-bezel,.page-index .face-panel .robot-bezel { background:linear-gradient(135deg,#fff,#d0cfdd); box-shadow:inset 0 2px 1px #fff; }
.robot-screen { background:radial-gradient(ellipse at 50% 40%,#273451,#10192c 80%); box-shadow:inset 0 0 30px #0007; }
.robot-screen::after { background:linear-gradient(135deg,#ffffff09,transparent 50%); }
.eye-fill { box-shadow:0 0 20px var(--eye-glow),0 0 55px color-mix(in srgb,var(--eye-glow) 50%,transparent); }
.eye::after { background:#fffa; filter:none; }

/* Give the transcript the full height beside a quiet companion rail. */
.page-index .body { flex-direction:row; min-height:0; }
.page-index .face-panel { display:flex; flex-direction:column; width:clamp(240px,24vw,320px); padding:32px 20px; gap:16px; justify-content:flex-start; border-bottom:0; border-right:1px solid var(--line); background:#eeedf6; overflow-y:auto; }
.page-index .face-panel .robot-screen { width:100%; height:auto; aspect-ratio:1.65; }
.page-index .face-panel .robot-bezel { width:100%; max-width:280px; }
.page-index .face-panel-title { margin:0; }
.page-index .voice-controls { gap:10px; }
.page-index .voice-hint { max-width:230px; }
.page-index .chat-area { min-height:0; padding:28px max(24px,calc((100% - 900px)/2)); }
.page-index .empty-state { flex:0 0 auto; margin-block:auto; padding:12px 0; gap:16px; }
.page-index .continuity-card { width:100%; }
.page-index .input-area { padding:12px max(24px,calc((100% - 900px)/2)) max(12px,env(safe-area-inset-bottom)); }


.page-index header { gap:16px; padding:12px 24px; }
@media(max-width:767px) {
  .page-index header { padding:10px 16px; align-items:flex-start; flex-wrap:wrap; }

  .page-index .body { flex-direction:column; }
  .page-index .face-panel { display:grid; grid-template-columns:112px minmax(0,1fr); grid-template-rows:auto auto; align-items:center; width:100%; padding:10px 16px; gap:4px 16px; border-right:0; border-bottom:1px solid var(--line); overflow:visible; }
  .page-index .face-panel-title { display:none; }
  .page-index .face-panel .robot-bezel { grid-column:1; grid-row:1 / 3; width:112px; padding:4px; }
  .page-index .face-panel .robot-screen { width:104px; height:63px; }
  .page-index #eyesRow { gap:18px; }
  .page-index .eye { width:24px; }
  .page-index .face-panel .status-text { grid-column:2; font-size:13px; max-width:none; }
  .page-index .voice-controls { grid-column:2; gap:4px; }
  .page-index .voice-hint { display:none; }
  .page-index .voice-toggle { min-height:40px; padding:6px 10px; }
  .page-index .chat-area { padding:20px 16px; }
  .page-index .input-area { padding:8px 16px max(10px,env(safe-area-inset-bottom)); }
  .page-index .starter-chips { grid-template-columns:1fr; }
}