/* calebschallert.com — "Caleb's assistant" chat widget.
   Built to the site's "Garden & Grit" tokens (site.css: --paper/--ink/--green/
   --gold/--clay). Mobile stacks the stage above the chat panel. */
#chatapp{max-width:1120px;margin:0 auto;padding:0 24px}
.chat-widget{display:grid;grid-template-columns:.95fr 1.05fr;gap:0;align-items:stretch;background:var(--cloud);border:1px solid var(--line);border-radius:22px;overflow:hidden;box-shadow:var(--shadow-lg)}
@media(max-width:860px){.chat-widget{grid-template-columns:1fr}}

/* ---- stage: dark panel, 16:9 avatar video, gold accent ---- */
/* Caleb 2026-09-06: the 3D figure fills the stage top to bottom — the stage stretches to the chat
   panel's full height on desktop (portrait, not a short 16:9 band). */
.chat-stage{position:relative;min-height:100%;overflow:hidden;
  background:radial-gradient(120% 90% at 50% 0%,color-mix(in srgb,var(--gold) 26%,transparent),transparent 55%),
    linear-gradient(160deg,#1f5c39 0%,#0e3a24 55%,#a8421a 140%)}
@media(max-width:860px){.chat-stage{aspect-ratio:4/5;min-height:0}}
.chat-stage-bg{position:absolute;inset:0;z-index:0}
.chat-video{position:relative;z-index:1;width:100%;height:100%;object-fit:cover;display:block;background:transparent}
.chat-stage.novideo .chat-video{display:none}
.chat-video.avatar{object-fit:cover;object-position:center top;padding:0;box-sizing:border-box}  /* cover, not contain (2026-10-07): the poster carries its own dark backdrop, and bottom-anchored contain left the
   stage's green gradient showing above it whenever a conversation made the panel taller than the image */
.chat-media{position:absolute;inset:0;z-index:1}
.chat-video.avatar3d{--poster-color:transparent;background:transparent;width:100%;height:100%;display:block}
.chat-stage-cap{position:absolute;left:0;right:0;bottom:0;z-index:2;margin:0;padding:16px 20px;
  background:linear-gradient(0deg,rgba(8,6,3,.82),transparent);color:#F3ECDC;font-size:13px;font-weight:700;letter-spacing:.02em}

/* ---- panel ---- */
.chat-panel{display:flex;flex-direction:column;min-height:640px;background:var(--cloud)}
.chat-head{padding:26px 26px 14px}
.chat-head .eyebrow{margin:0 0 8px}
.chat-head .chat-title{margin:0;font-size:clamp(19px,2.4vw,24px);color:var(--ink)}

.chat-log{flex:1;overflow-y:auto;padding:6px 22px;display:flex;flex-direction:column;gap:12px;min-height:220px;max-height:420px;scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){.chat-log{scroll-behavior:auto}}
.chat-msg{display:flex}
.chat-msg.user{justify-content:flex-end}
.chat-msg.bot{justify-content:flex-start}
.chat-bubble{max-width:86%;padding:12px 16px;border-radius:16px;font-size:15px;line-height:1.55;box-shadow:var(--shadow)}
.chat-bubble p{margin:0 0 8px}
.chat-bubble p:last-child{margin-bottom:0}
.chat-msg.bot .chat-bubble{background:var(--paper);color:var(--ink);border:1px solid var(--line);border-bottom-left-radius:6px}
.chat-msg.user .chat-bubble{background:var(--clay);color:#fff;border-bottom-right-radius:6px}
.chat-sources{font-size:12.5px;color:var(--soft)!important;margin-top:6px!important;padding-top:8px;border-top:1px solid var(--line)}
.chat-msg.bot .chat-sources a{color:var(--green);font-weight:700;text-decoration:none}
.chat-msg.bot .chat-sources a:hover{text-decoration:underline}

.chat-typing{display:flex;gap:5px;align-items:center;padding:0 22px 4px}
.chat-typing span{width:7px;height:7px;border-radius:50%;background:var(--faint);display:inline-block;animation:chatTyping 1.1s ease-in-out infinite}
.chat-typing span:nth-child(2){animation-delay:.15s}
.chat-typing span:nth-child(3){animation-delay:.3s}
@keyframes chatTyping{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
@media(prefers-reduced-motion:reduce){.chat-typing span{animation:none;opacity:.7}}

.chat-chips{display:flex;flex-wrap:wrap;gap:8px;padding:10px 22px 4px}
.chat-chip{font:inherit;font-size:13px;font-weight:600;color:var(--blue,var(--green));background:color-mix(in srgb,var(--green) 10%,transparent);border:1px solid color-mix(in srgb,var(--blue,var(--green)) 24%,transparent);border-radius:999px;padding:10px 14px;cursor:pointer;min-height:44px;transition:background .15s,transform .1s}
.chat-chip:hover{background:color-mix(in srgb,var(--green) 18%,transparent);transform:translateY(-1px)}
.chat-chip:focus-visible{outline:none;box-shadow:var(--ring)}

.chat-form{display:flex;gap:10px;align-items:center;padding:16px 22px 22px;border-top:1px solid var(--line);margin-top:8px}
.chat-form input{flex:1;font:inherit;font-size:16px;padding:12px 16px;border:1px solid var(--line-2);border-radius:12px;background:var(--paper);color:var(--ink);min-height:48px}
.chat-form input:focus{outline:none;box-shadow:var(--ring);border-color:var(--gold)}
.chat-form input:disabled{opacity:.6}
.chat-send{flex:none;width:44px;height:44px;border-radius:12px;border:none;background:var(--clay);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:var(--shadow);transition:background .15s,transform .1s}
.chat-send svg{width:20px;height:20px}
.chat-send:hover:not(:disabled){background:var(--clay-2);transform:translateY(-1px)}
.chat-send:disabled{opacity:.5;cursor:not-allowed}
.chat-send:focus-visible{outline:none;box-shadow:var(--ring)}

/* ---- capture mini-form (mirrors plan.js's capture step) ---- */
.chat-capture{width:100%;background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:18px}
.chat-capture-form{display:flex;flex-direction:column;gap:11px}
.chat-f{display:flex;flex-direction:column;gap:5px;font-size:12.5px;font-weight:700;color:var(--soft)}
.chat-f input{font:inherit;font-size:15px;padding:11px 13px;border:1px solid var(--line-2);border-radius:9px;background:var(--cloud);color:var(--ink);min-height:44px}
.chat-f input:focus{outline:none;box-shadow:var(--ring);border-color:var(--gold)}
.chat-opt{color:var(--faint);font-weight:500;text-transform:none;letter-spacing:0}
.chat-check{display:flex;gap:9px;align-items:center;font-size:13px;color:var(--soft);font-weight:500;min-height:40px}
.chat-check input{width:18px;height:18px;flex:none;accent-color:var(--green)}
.chat-err{color:var(--clay);font-size:13px;font-weight:600;margin:0}
.chat-capture .btn{align-self:flex-start;font-size:15px;padding:12px 20px;min-height:44px}

/* scrollbar polish (progressive — no effect where unsupported) */
.chat-log::-webkit-scrollbar{width:8px}
.chat-log::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:99px}