/* 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;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;}}

/* .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;}

/* '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;}