/* ============================================================================
 * 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.
 * ========================================================================== */
@media (min-width:768px){
  /* 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); }
}