/* A quiet glass surface. No animated blur, video backgrounds or polling. */
.orb-studio { margin-top:12px; display:grid; gap:12px; }
.orb-studio canvas { display:block; width:200px; height:200px; margin:auto; border-radius:24px; background:radial-gradient(ellipse,#202c3b,#0c111a); }
.orb-studio.light canvas { background:#e6edf0; }
.orb-studio input[type="range"] { padding:0; accent-color:var(--teal); }
/* One-shot transitions, not a continuously composited background. */
@keyframes companion-arrive { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
.panel { margin:10px; border-radius:28px !important; max-height:calc(100% - var(--safe-top) - 20px); }
.sheet:not([hidden]) .panel { animation:companion-arrive 220ms cubic-bezier(.2,.8,.2,1); }
.msg { animation:companion-arrive 180ms ease-out; }
.chip, .btn, .icon-btn, .call-btn { transition:transform 140ms ease-out, border-color 140ms ease-out, box-shadow 140ms ease-out; }
.chip:active, .btn:active, .icon-btn:active, .call-btn:active { transform:scale(.96); }
.composer { position:relative; }
.composer::before { content:''; position:absolute; top:0; left:20%; width:60%; height:1px; background:linear-gradient(90deg,transparent,#fff7,transparent); pointer-events:none; }
@media (prefers-reduced-motion: reduce) { .panel, .msg { animation:none !important; } .chip, .btn, .icon-btn, .call-btn { transition:none; transform:none !important; } }
.app > header {
  margin-top: 8px;
  padding: 10px;
  border: 1px solid rgba(255,255,255,.17);
  border-radius: 24px;
  background: linear-gradient(125deg, rgba(255,255,255,.105), rgba(255,255,255,.025)), rgba(17,18,31,.6);
  box-shadow: inset 0 1px rgba(255,255,255,.2), 0 10px 32px rgba(0,0,0,.14);
}
.composer {
  border-color: rgba(255,255,255,.24);
  background: linear-gradient(160deg, rgba(255,255,255,.1), rgba(255,255,255,.025)), rgba(20,21,37,.86);
  box-shadow: inset 0 1px rgba(255,255,255,.22), 0 12px 32px rgba(0,0,0,.23);
}
.panel {
  background: linear-gradient(145deg, rgba(118,121,182,.18), transparent 40%), #151522;
  border-top-color: rgba(255,255,255,.28);
  box-shadow: inset 0 1px rgba(255,255,255,.16), 0 -20px 80px rgba(0,0,0,.3);
}
.panel section, .pulse-card, .idea, .izuki:not(.error) {
  background: linear-gradient(150deg, rgba(255,255,255,.075), rgba(255,255,255,.025));
  border-color: rgba(255,255,255,.14);
  box-shadow: inset 0 1px rgba(255,255,255,.09);
}
[data-platform="ios"] .app, [data-platform="android"] .app { max-width: 760px; }
[data-platform="ios"] .app > header, [data-platform="android"] .app > header { margin-bottom: 8px; }
#native-device { border-color: rgba(63,215,201,.3); }
#native-ios-limits { margin-top: 12px; }
/* Five controls plus a persona need a second line on a small phone. */
@media (max-width: 540px) {
  .app > header { flex-wrap: wrap; gap: 10px; }
  .app > header .who { flex: 1 1 100%; }
  .tools { width: 100%; justify-content: space-between; gap: 6px; }
  .icon-btn, .call-btn { min-height: 44px; min-width: 44px; }
  .compact-action { justify-content: center; }
  .compact-action span { display: inline; }
  .compact-action { padding-inline: 10px; }
}
@media (max-width: 430px) { .compact-action span { display: none; } .compact-action { padding-inline: 0; } }
/* Six controls: on the smallest phones they sit closer together. */
@media (max-width: 360px) { .call-btn { width:44px; padding:0; font-size:0; gap:0; justify-content:center; } .tools { gap: 2px; } }
@media (prefers-reduced-transparency: reduce) {
  .app > header, .composer, .panel, .sheet, #live { backdrop-filter: none; -webkit-backdrop-filter: none; background: #181825; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; } }

/* Recent chats on the home screen. */
.recent-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-top: 14px; }
.recent-clear { background: none; border: 0; color: var(--muted, #9aa0c8); font: inherit; font-size: 12px; cursor: pointer; padding: 4px 6px; }
.recent-list { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.recent-row { display: flex; align-items: stretch; gap: 6px; }
.recent-open { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; justify-content: space-between; text-align: left; padding: 11px 14px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.05); color: inherit; font: inherit; cursor: pointer; }
.recent-open:active { transform: scale(0.99); }
.recent-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.recent-open small { flex-shrink: 0; color: var(--muted, #9aa0c8); font-size: 11px; }
.recent-del { width: 40px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.04); color: var(--muted, #9aa0c8); font-size: 18px; cursor: pointer; }

/* A newer version of the app is ready. */
.update-bar { position: fixed; left: 12px; right: 12px; bottom: calc(env(safe-area-inset-bottom, 0px) + 84px); z-index: 50; padding: 12px 16px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.18); background: linear-gradient(135deg, rgba(124, 92, 255, 0.95), rgba(78, 205, 196, 0.9)); color: #fff; font: inherit; font-weight: 600; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); }
.tv-update { border-color: rgba(103, 232, 249, 0.7) !important; }

/* ---------------------------------------------------------------- notes
   Your PC's study notes on the phone: subjects that open, chapters in
   order, and the note itself in readable type. */
.notes-page { display: flex; flex-direction: column; gap: 10px; padding: 4px 2px 20px; }
.notes-head { display: flex; align-items: center; gap: 10px; }
.notes-head b { font-size: 16px; line-height: 1.25; min-width: 0; }
.notes-subject { border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 14px; padding: 8px 10px; }
.notes-subject > summary { cursor: pointer; font-weight: 700; font-size: 14px; list-style: none; }
.notes-subject > summary::-webkit-details-marker { display: none; }
.notes-subject > summary::before { content: "\25b8 "; display: inline-block; transition: transform 0.15s ease; }
.notes-subject[open] > summary::before { transform: rotate(90deg); }
.notes-tools { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.notes-item { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%;
  padding: 10px 12px; margin-top: 6px; border: 0; border-radius: 12px; text-align: left;
  background: rgba(255, 255, 255, 0.06); color: inherit; font: inherit; cursor: pointer; }
.notes-item b { font-size: 14px; }
.notes-item small { opacity: 0.6; font-size: 12px; }
.notes-body { white-space: pre-wrap; word-break: break-word; font: inherit; font-size: 14px;
  line-height: 1.55; margin: 0; padding: 12px; border-radius: 12px; background: rgba(255, 255, 255, 0.05); }

/* "Driving?" — offered once, big enough to answer without looking hard. */
.drive-offer {
  position: fixed; left: 12px; right: 12px; bottom: 18px; z-index: 60;
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding: 14px 16px; border-radius: 18px;
  background: rgba(10, 12, 20, 0.96); color: #fff;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
  animation: drive-offer-in 0.25s ease;
}
.drive-offer b { font-size: 17px; }
.drive-offer span { flex: 1 1 100%; opacity: 0.75; font-size: 13px; }
.drive-offer button {
  flex: 1 1 140px; min-height: 52px; border: 0; border-radius: 14px;
  background: #22d3ee; color: #04121a; font: 700 16px/1 system-ui, sans-serif; cursor: pointer;
}
.drive-offer button.ghost { background: rgba(255, 255, 255, 0.12); color: #fff; }
@keyframes drive-offer-in { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }