/* chat.css — shared landing / chat-card layer for the unissasi planning chats.
   Linked by every page that runs chat-core.js. Holds the landing empty-state,
   the persistent .chat-wrap card, and the pill chip radius (landing <-> chat). */

/* Chat wrapper — single persistent container around landing + chatZone */
.chat-wrap{background:var(--convo-bg);border:1px solid rgba(var(--gold-rgb),.35);border-radius:22px;box-shadow:0 12px 30px -8px rgba(var(--gold-rgb),.16);padding:16px;margin:0 6px;}

/* Landing (empty state, before the first message) */
[hidden]{display:none !important;}
.landing{display:flex;flex-direction:column;justify-content:center;gap:20px;min-height:400px;padding:24px 16px;}
/* Heading — real heading scale, larger than .plan-head__name */
.landing__title{font-family:"Rajdhani",sans-serif;font-weight:700;font-size:clamp(1.9rem,4.5vw,2.8rem);letter-spacing:.02em;color:var(--txt-bright);line-height:1.08;margin:0;}
/* Subtitle — Share Tech Mono, small, sits just under the heading */
.landing__sub{font-family:"Share Tech Mono",monospace;font-size:.72rem;letter-spacing:.06em;line-height:1.7;color:var(--desc-text);margin:-8px 0 0;max-width:64ch;}
/* Big input + circular send button (no bordered bar; each element stands alone) */
.landing__foot{display:flex;align-items:center;gap:10px;max-width:620px;}
.landing__input{flex:1;min-width:0;background:var(--surface);border:2px solid rgba(var(--teal-rgb),.55);border-radius:30px;padding:18px 24px;font-size:.92rem;color:var(--desc-text);outline:none;transition:border-color .15s;}
.landing__input:focus{border-color:var(--teal);}
.landing__send{flex-shrink:0;width:52px;height:52px;border-radius:50%;background:var(--teal);border:none;color:var(--on-teal);display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;transition:background .15s,transform .15s;}
.landing__send:hover{background:var(--teal-dim);transform:translateY(-1px);}
.landing__send svg{width:20px;height:20px;}
/* Chips — pill shape, teal outline, fill teal on hover */
.landing__chips{display:flex;flex-wrap:wrap;gap:9px;}
.landing__chips .chip{border-radius:999px;border:1px solid rgba(var(--teal-rgb),.45);background:transparent;padding:9px 17px;}
.landing__chips .chip:hover{background:var(--teal);border-color:var(--teal);color:var(--on-teal);transform:translateY(-1px);}
@media(max-height:800px){.landing{min-height:320px;}}
@media(max-height:700px){.landing{min-height:250px;}}
/* Mobile: hard-contain every chat layer to the viewport so nothing pushes a
   horizontal scroll. overflow-x:clip contains stray overflow WITHOUT creating a
   scroll container (so it never breaks the sticky region tabs). */
@media(max-width:768px){
  .chat-shell,.chat-main{overflow-x:hidden;max-width:100vw;}
  .plan-area,.chat-wrap,.landing,.convo,.plan-foot,.intel,.carousel{max-width:100%;min-width:0;}
  .convo{width:100%;}
  .cmsg{max-width:100%;}
  .cmsg__bubble{overflow-wrap:anywhere;word-break:break-word;}
  .landing__foot,.landing__chips,.chips{max-width:100%;}
  .intel,.carousel{grid-template-columns:1fr;}
}
/* Mobile: keep the landing inside the viewport (no horizontal overflow) */
@media(max-width:560px){
  .landing{padding:18px 6px;gap:16px;}
  .landing__title{font-size:clamp(1.55rem,7vw,2.1rem);overflow-wrap:break-word;}
  .landing__sub{font-size:.68rem;}
  .landing__foot{max-width:100%;gap:8px;}
  .landing__input{padding:14px 18px;font-size:.85rem;}
  .landing__send{width:46px;height:46px;}
}

/* .chat-wrap theme transition (moved out of each page's inline grouped transition rule) */
.chat-wrap{transition:background-color .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease);}

/* Region photo lives INSIDE the gold frame — clipped to its rounded border, sits
   behind the content. Fed via --region-img (set per region by chat-core.js). */
.chat-wrap{position:relative;}
.chat-wrap::before{
  content:"";position:absolute;inset:0;z-index:0;border-radius:inherit;pointer-events:none;
  background-image:var(--region-img,none);background-size:cover;background-position:center;
  opacity:.22;transition:opacity .3s var(--ease);
}
[data-theme="light"] .chat-wrap::before{opacity:.26;}
.chat-wrap > *{position:relative;z-index:1;}

/* Conversation chips share the landing pill radius */
.chip{border-radius:999px;}

/* Offline banner — shown by chat-core.js when the homelab health-check fails,
   so a visitor isn't greeted by a chat that silently can't answer. */
.chat-offline-banner{display:flex;align-items:center;gap:10px;margin:0 0 14px;padding:11px 14px;
  background:rgba(224,83,61,.10);border:1px solid rgba(224,83,61,.35);border-radius:12px;
  font-family:"Share Tech Mono",monospace;font-size:.72rem;line-height:1.5;color:var(--desc-text);}
.chat-offline-banner__ico{flex-shrink:0;font-size:.9rem;}
.chat-offline-banner__x{margin-left:auto;flex-shrink:0;background:none;border:none;color:var(--desc-text);
  font-size:1rem;line-height:1;cursor:pointer;opacity:.6;padding:0 2px;}
.chat-offline-banner__x:hover{opacity:1;}

/* 'How this works' accordion (toggle wired by chat-core.js) */
.how-toggle{font-family:"Share Tech Mono",monospace;font-size:.6rem;letter-spacing:.2em;color:rgba(var(--teal-rgb),.45);background:none;border:none;padding:0;cursor:pointer;text-transform:uppercase;transition:color .15s;line-height:1;}
.how-toggle:hover,.how-toggle[aria-expanded="true"]{color:var(--teal);}
.how-toggle::after{content:" ▾";font-size:.48rem;}
.how-toggle[aria-expanded="true"]::after{content:" ▴";}
.how-accord{display:none;border-left:2px solid var(--teal);padding:14px 18px;background:rgba(var(--teal-rgb),.05);}
.how-accord.is-open{display:block;}
.how-accord__line{font-family:"Share Tech Mono",monospace;font-size:.6rem;letter-spacing:.05em;color:var(--desc-text);line-height:1.8;margin:0;}
.how-accord__line+.how-accord__line{margin-top:6px;}
.how-accord__line::before{content:"// ";color:var(--teal);}

/* Field note — a quiet handwritten aside under Quick Intel (recycled travel notes) */
.field-note{font-family:"Caveat",cursive;font-size:1.18rem;line-height:1.5;color:var(--desc-text);border-left:2px solid var(--gold);padding:4px 0 4px 14px;margin:0;max-width:60ch;}

/* ════════════════════════════════════════════════════════════════
   MOBILE APP-STYLE CHAT (≤768px)
   The chat fills the viewport like a messaging app: fixed header (region
   tabs + guide head), messages scroll in the middle, input pinned at the
   bottom. The keyboard pushes the input up (via --app-vh from chat-core.js)
   instead of covering it. Secondary content is hidden for focus.
   Desktop is untouched (this whole block is mobile-only).
   ════════════════════════════════════════════════════════════════ */
@media(max-width:768px){
  /* Focus mode: hide everything that isn't the chat (the region photo stays
     as the gold-frame backdrop). */
  .chat-main > section,.lang-ticker-block,.footer{display:none!important;}

  /* Regions (NOA, NEA, Cuyo…) now live inside the burger menu, not as a
     horizontal tab strip — frees the top of the chat for the conversation. */
  .rgn-tabs{display:none!important;}

  /* No tab strip reserving nav space anymore → pad the chat clear of the fixed nav. */
  .chat-main{padding:64px 10px 20px;gap:10px;}
  .plan-area{gap:10px;}
  .chat-wrap{margin:0;padding:12px;}
  .landing{min-height:auto;}

  /* Pin every chat layer to the real viewport width (vw, NOT % — % inherits a
     too-wide parent) and clip horizontal overflow. Nothing can push the page
     sideways: not the region tabs, not long messages, not the inputs. */
  .chat-shell,.chat-main,.plan-area,.chat-wrap,#chatZone,.convo{max-width:100vw;overflow-x:hidden;}
  .rgn-tabs{max-width:100vw;}

  /* Messages: tall internal scroll; bubbles capped to the viewport and wrapped.
     NATURAL FLOW (no fixed-height lock — that's what iOS mishandles). */
  .convo{height:auto;max-height:56dvh;width:100%;}
  .cmsg,.cmsg--nikola,.cmsg--user{max-width:86vw !important;}
  .cmsg__bubble{max-width:100% !important;overflow-wrap:anywhere;word-break:break-word;}
  .plan-foot,.landing__foot,.chips,.landing__chips{max-width:100%;}

  /* iOS Safari auto-zooms (and never zooms back) when you focus an input whose
     font-size is < 16px. 16px is the magic floor that disables that zoom. */
  .plan-input,.landing__input{font-size:16px !important;padding-left:16px;padding-right:16px;}
  /* The placeholder ("Ask CACHO anything — in any language…") is long; shrink it
     so the whole phrase fits and reads. This is the ::placeholder only — the input's
     own font stays 16px, so it does NOT re-trigger the iOS zoom. */
  .plan-input::placeholder,.landing__input::placeholder{font-size:12px;letter-spacing:0;}
}