/* Baab v31 - phone clarity, sticky-note tour, simple language picker, contrast.
   Loaded LAST so it wins over glass-ios.css / baab-v26.css. */

/* 1) Blur was applied to EVERY full-screen layer (.fixed.inset-0), so the tour, menus and
      pop-ups smeared the page behind them. Full-screen layers are now plain dim, never blurred. */
.fixed.inset-0, #tourGuideOverlay, #tourGuideOverlay * { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }

/* 2) Phones: solid panels, a quiet background, no zoom-on-focus, nothing wider than the screen. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
img, video, canvas, svg { max-width: 100%; }
@media (max-width: 820px) {
  .glass-panel, .glass-sheet, #scopeWorkspace, header.glass-panel, nav.glass-panel {
    background-color: rgba(12, 17, 34, .97) !important;
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  }
  body::before { opacity: .22 !important; filter: none !important; }
  body::after { background: linear-gradient(180deg, rgba(5,6,13,.6), rgba(5,6,13,.88)) !important; }
  input, textarea, select { font-size: 16px !important; }            /* iOS zooms the page for smaller text */
  .fixed.inset-0 > .glass-panel, .fixed.inset-0 > div[class*="bg-slate-9"], .lp-card, .fixed.inset-0 > div.max-w-md {
    max-height: calc(100dvh - 1.5rem); overflow-y: auto; -webkit-overflow-scrolling: touch;
  }
  .glass-panel, .glass-sheet { min-width: 0; overflow-wrap: anywhere; }
  header.glass-panel { padding-left: .75rem !important; padding-right: .75rem !important; }
  nav.glass-panel { padding-left: .5rem !important; padding-right: .5rem !important; }
  button, [role="button"] { min-height: 40px; }                      /* easy to hit with a thumb */
}
body { min-height: 100vh; min-height: 100dvh; }

/* 3) Contrast (Lighthouse): small grey text and placeholders were too faint on dark panels. */
.text-slate-500 { color: #94a3b8 !important; }
.text-slate-400 { color: #a9b6ca !important; }
::placeholder { color: #94a3b8 !important; opacity: 1; }

/* 4) Sticky-note tour: a yellow note, no blur, a glow on the thing it points at,
      and it always fits the screen (bottom sheet on phones, re-placed on rotate/resize). */
#tourGuideBackdrop { background: rgba(2, 6, 23, .5) !important; }
#tourGuideCard {
  background: #fde68a !important; color: #1f2937 !important; border: 0 !important; border-radius: 6px 6px 18px 6px !important;
  box-shadow: 0 14px 34px rgba(0,0,0,.55), inset 0 -18px 24px -18px rgba(180,120,0,.35) !important;
  width: min(20rem, calc(100vw - 24px)); max-width: min(20rem, calc(100vw - 24px)) !important;
  transform: rotate(-.6deg); padding: 14px 16px !important;
}
#tourGuideCard h4 { color: #78350f !important; font-size: 1rem !important; }
#tourGuideCard p, #tourGuideCard span { color: #374151 !important; font-size: .9rem !important; line-height: 1.35; }
#tourGuideCard button { min-height: 40px; font-size: .85rem !important; }
#tourBackBtn { background: #fcd34d !important; color: #78350f !important; }
#tourNextBtn { background: #b45309 !important; color: #fff !important; }
#tourGuideCard button[onclick="tourSkip()"] { color: #78350f !important; }
.tour-spot { position: relative; z-index: 79 !important; box-shadow: 0 0 0 4px #fde68a, 0 0 22px 8px rgba(253,230,138,.75) !important; border-radius: 12px; }
@media (max-width: 640px) {
  #tourGuideCard { position: fixed !important; left: 12px !important; right: 12px !important; top: auto !important;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important; width: auto; max-width: none !important; transform: none; }
}

/* 5) Simple language picker */
.lp-card { width: 100%; max-width: 28rem; background: #0f1630; border: 1px solid rgba(129,140,248,.35); border-radius: 20px;
  padding: 18px 16px; text-align: center; display: flex; flex-direction: column; gap: 12px; }
.lp-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.lp-chip { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; min-width: 5.2rem; min-height: 3.2rem;
  padding: 6px 14px; border-radius: 14px; background: #1e293b; color: #f1f5f9; cursor: pointer; border: 1px solid rgba(148,163,184,.25); }
.lp-chip:hover, .lp-chip:focus-visible { background: #4f46e5; outline: none; }
.lp-chip.bg-indigo-600 { background: #4f46e5 !important; }
.lp-native { font-size: 1.1rem; font-weight: 600; line-height: 1.2; }
.lp-eng { font-size: .68rem; color: #cbd5e1; }
.lp-more { align-self: center; display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; min-height: 36px; border-radius: 999px;
  background: transparent; border: 1px dashed rgba(148,163,184,.55); color: #cbd5e1; font-size: .8rem; cursor: pointer; }
.lp-slider { display: flex; gap: 8px; overflow-x: auto; padding: 6px 2px 10px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
.lp-slider .lp-chip { flex: 0 0 auto; scroll-snap-align: start; min-width: 4.6rem; }
.lp-type { display: flex; gap: 8px; align-items: center; }
.lp-type input { flex: 1; min-width: 0; background: #020617; border: 1px solid #334155; color: #f1f5f9; border-radius: 14px; padding: 12px 14px; }
.lp-type input:focus { outline: none; border-color: #6366f1; }
.lp-send, .lp-mic { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 14px; border: 0; color: #fff; cursor: pointer; font-size: 1rem; }
.lp-send { background: #4f46e5; } .lp-mic { background: #0e7490; }

/* 6) Sign-up e-mail help box (shown on the verify screen) */
.mail-help { background: #1e293b; border: 1px solid #334155; border-radius: 12px; padding: 10px 12px; font-size: .8rem; color: #cbd5e1; text-align: left; }

.lp-mic.is-listening { background: #e11d48; animation: lpPulse 1.1s ease-in-out infinite; }
@keyframes lpPulse { 50% { box-shadow: 0 0 0 8px rgba(225,29,72,.25); } }

/* ===== v33: Design Studio ===== */
.ds-overlay { position: fixed; inset: 0; z-index: 85; display: flex; flex-direction: column; background: #05060d; color: #f1f5f9; }
.ds-overlay.hidden { display: none; }
body.ds-open { overflow: hidden; }
.ds-top { display: flex; align-items: center; gap: 8px; padding: 10px 12px; padding-top: calc(10px + env(safe-area-inset-top, 0px)); background: #0b1226; border-bottom: 1px solid rgba(148,163,184,.2); }
.ds-grow { flex: 1; min-width: 0; }
.ds-btn { min-height: 40px; min-width: 40px; padding: 0 12px; border-radius: 12px; border: 1px solid rgba(148,163,184,.3); background: #111a33; color: #e2e8f0; cursor: pointer; font-size: .85rem; }
.ds-btn.on { background: #0e7490; border-color: #22d3ee; }
.ds-stage { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.ds-stage canvas { display: block; }
#dsCanvas3d { position: absolute; left: 0; top: 0; }
.ds-cursor { display: none; position: absolute; left: 0; top: 0; width: 36px; height: 36px; border-radius: 50%; border: 3px solid #22d3ee; box-shadow: 0 0 18px #22d3ee; pointer-events: none; z-index: 6; }
.ds-cursor.pinch { border-color: #f97316; box-shadow: 0 0 18px #f97316; }
.ds-pip { position: absolute; right: 10px; bottom: 10px; width: 112px; border-radius: 12px; border: 2px solid rgba(34,211,238,.5); transform: scaleX(-1); display: none; z-index: 5; background: #000; }
.ds-stage.hands .ds-pip { display: block; }
.ds-toast { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); max-width: 92%; background: rgba(15,23,42,.96); border: 1px solid rgba(34,211,238,.5); border-radius: 999px; padding: 8px 16px; font-size: .88rem; opacity: 0; transition: opacity .25s; pointer-events: none; z-index: 7; text-align: center; }
.ds-toast.show { opacity: 1; pointer-events: auto; }
.ds-toast button { margin-left: 8px; padding: 2px 10px; border-radius: 999px; background: #22d3ee; color: #05060d; font-weight: 600; }
.ds-hint { position: absolute; left: 10px; top: 10px; right: 10px; font-size: .78rem; color: #a5f3fc; background: rgba(15,23,42,.8); border-radius: 12px; padding: 6px 10px; opacity: 0; transition: opacity .4s; pointer-events: none; z-index: 5; }
.ds-hint.show { opacity: 1; }
.ds-chips { display: flex; gap: 8px; overflow-x: auto; padding: 8px 12px; background: #0b1226; -webkit-overflow-scrolling: touch; }
.ds-chip { flex: 0 0 auto; white-space: nowrap; min-height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(148,163,184,.3); background: #111a33; color: #e2e8f0; font-size: .82rem; cursor: pointer; }
.ds-proposal { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: #16213f; border-top: 1px solid #6366f1; font-size: .88rem; }
.ds-proposal.hidden { display: none; }
.ds-bar { display: flex; gap: 8px; align-items: center; padding: 8px 12px; padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)); background: #0b1226; }
.ds-bar input { flex: 1; min-width: 0; background: #020617; border: 1px solid #334155; color: #f1f5f9; border-radius: 14px; padding: 12px 14px; font-size: 16px; }
.ds-bar input:focus { outline: none; border-color: #6366f1; }
.ds-mic, .ds-send { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 14px; border: 0; color: #fff; cursor: pointer; }
.ds-mic { background: #0e7490; } .ds-send { background: #4f46e5; }
.ds-mic.on { background: #e11d48; animation: lpPulse 1.1s ease-in-out infinite; }
@media (min-width: 900px) { .ds-top, .ds-bar { -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); background: rgba(11,18,38,.72); } }

/* ===== v33: Dev Mode hand signs ===== */
#devHandsUi { position: fixed; inset: 0; z-index: 95; pointer-events: none; }
#devHandsCursor { display: none; position: absolute; left: 0; top: 0; width: 36px; height: 36px; border-radius: 50%; border: 3px solid #22d3ee; box-shadow: 0 0 18px #22d3ee; }
#devHandsCursor.pinch { border-color: #f97316; box-shadow: 0 0 18px #f97316; }
#devHandsLabel { display: none; position: fixed; left: 12px; top: calc(12px + env(safe-area-inset-top, 0px)); max-width: 80vw; background: #0f172a; border: 1px solid #22d3ee; padding: 6px 10px; border-radius: 10px; font: 12px monospace; color: #a5f3fc; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#devHandsVideo { position: fixed; left: 10px; bottom: 10px; width: 100px; border-radius: 10px; transform: scaleX(-1); border: 2px solid rgba(34,211,238,.5); }
#devHandsToast { position: fixed; left: 50%; top: calc(56px + env(safe-area-inset-top, 0px)); transform: translateX(-50%); background: rgba(15,23,42,.96); border: 1px solid rgba(34,211,238,.5); border-radius: 999px; padding: 8px 16px; font-size: .85rem; opacity: 0; transition: opacity .25s; color: #e2e8f0; pointer-events: none; }
#devHandsToast.show { opacity: 1; pointer-events: auto; }
#devHandsToast button { margin-left: 8px; padding: 2px 10px; border-radius: 999px; background: #22d3ee; color: #05060d; font-weight: 600; }
.dev-pick { outline: 3px dashed #22d3ee !important; outline-offset: 2px; }
.dev-picked { outline: 3px solid #22d3ee !important; outline-offset: 2px; }
#codeAssistModal.dev-hands { background: transparent !important; align-items: flex-end !important; pointer-events: none; }
#codeAssistModal.dev-hands > div { pointer-events: auto; max-height: 42vh !important; }

/* ===== v33: calm glow when someone sounds low (soft, temporary, never blocks anything) ===== */
html.baab-calm::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 1; background: radial-gradient(ellipse at 50% 105%, rgba(20,184,166,.22), transparent 62%); animation: calmIn 1.2s ease both; }
@keyframes calmIn { from { opacity: 0; } to { opacity: 1; } }

/* ===== v36 mobile polish ===== */
#scopeCommandInput { min-width: 0; }
.scope-top > .flex.mt-3 { gap: 6px; flex-wrap: nowrap; align-items: center; }
.scope-top > .flex.mt-3 > #scopeVoiceBtn, .scope-top > .flex.mt-3 > .relative { flex: 0 0 auto; }
.scope-top div[class*="tracking-"] { white-space: nowrap; flex-shrink: 0; }
#baabscopeScopeView { overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
@media (max-width: 480px) {
  .scope-top { padding-left: 10px; padding-right: 10px; }
  #scopeCommandInput { font-size: 16px; padding-left: 12px; padding-right: 8px; }
  #scopeVoiceBtn, #scopeUploadPlusBtn { width: 40px; height: 40px; }
}