/* ============================================================================
 * leo-chat.desktop.css — DESKTOP version of Leo AI Chat (>=768px, media-gated link)
 * ----------------------------------------------------------------------------
 * Mobile (the page's inline CSS) is the Source-of-Truth and is NOT touched.
 * On desktop this OVERRIDES the pf360 phone-frame shim (body{max-width:430px})
 * and turns the full-bleed mobile chat into a centred desktop chat window:
 * a neutral backdrop + one rounded card (.leo-win) holding header · สายเป meter ·
 * context bar · scrolling messages · tools · input. The chat scrolls inside the
 * card; the card is vertically+horizontally centred. .leo-win is display:contents
 * on mobile (set in the page), so phone view stays byte-equal.
 * ========================================================================== */
/* break out of the 430px phone frame (pf360 uses !important) */
html{ background:#E7DFD4 !important; }
body{
  max-width:none !important; margin:0 !important; box-shadow:none !important;
  background:#E7DFD4; padding:24px; min-height:100dvh;
  align-items:center; justify-content:center;   /* body is flex-column → centre the window */
}

/* the chat window card */
.leo-win{
  display:flex; flex-direction:column;
  width:100%; max-width:940px; height:min(calc(100dvh - 48px), 900px);
  background:var(--cream); border:1px solid var(--line); border-radius:24px;
  overflow:hidden; box-shadow:0 44px 100px -46px rgba(80,40,10,.55);
}

/* header a touch roomier inside the window */
header{ padding:14px 20px; }
.leoav{ width:42px; height:42px; }
.htxt .nm{ font-size:16px; }
.htxt .st{ font-size:12px; }

/* messages: comfortable width + padding on wide screens */
.chat{ padding:22px 26px 14px; gap:13px; }
.row{ max-width:68%; }
.bub{ font-size:14px; }
.chips{ margin-left:36px; }

/* tools + input roomier, aligned to the wider card */
.tools{ padding:10px 16px 0; flex-wrap:wrap; overflow:visible; }
.inbar{ padding:12px 16px 16px; }
.inbar textarea{ font-size:14.5px; padding:11px 16px; }
.emojip{ grid-template-columns:repeat(12,1fr); }

/* bottom-sheet dialogs → centred dialogs on desktop */
.ov{ align-items:center; background:rgba(40,25,10,.34); }
.sheet{ border-radius:22px; max-width:460px; box-shadow:0 30px 70px -30px rgba(80,40,10,.5); }