/* Full-page shell, sidebar, and assistant header. Widget overrides follow the shared controls. */
.chat-page{height:100vh;overflow:hidden;background:#fff}
.chat-shell{display:grid;grid-template-columns:300px minmax(0,1fr);height:100vh}
.chat-sidebar{background:#1c1e20;color:white;border-right:1px solid #111;display:flex;flex-direction:column;padding:26px 22px}
.back-link{display:flex;align-items:center;gap:10px;color:white}
.back-link .wordmark{font-size:24px}
.sidebar-intro{font-size:9px;font-weight:800;letter-spacing:.18em;color:#f4a81b;margin:54px 0 10px}
.chat-sidebar h2{font-family:var(--display);font-size:30px;line-height:1.1;letter-spacing:-.06em;margin:0}
.sidebar-copy{font-size:11px;line-height:1.7;color:#aeb3b6;margin:15px 0 28px}
.new-conversation{width:100%;text-align:left;background:#f4aa1e;border:0;padding:11px 13px;font-size:11px;font-weight:800}
.new-conversation:hover{background:#ffc45a}
.new-conversation span{font-size:17px;margin-right:5px}
.sidebar-label{font-size:9px;font-weight:800;letter-spacing:.16em;color:#7f858a;margin:28px 0 10px}
.session-item{background:#303437;padding:11px 10px;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar-bottom{margin-top:auto;padding-top:15px;border-top:1px solid #3a3d3f;color:#adb2b5;font-size:10px}
.sidebar-bottom a{display:block;color:#f8b544;font-weight:700;margin-top:10px}
.status-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#f7b43c;margin-right:5px}
.chat-main{display:flex;flex-direction:column;min-width:0;background:#fff}
.chat-header{height:70px;flex:none;display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--line);padding:0 25px}
.seller-avatar,.message-avatar{display:grid;place-items:center;background:#f4aa19;color:#191b1e;border-radius:50%;font-weight:800}
.seller-avatar{width:38px;height:38px;font-size:23px}
.chat-header strong{display:block;font-size:16px}
.chat-header small{display:block;color:var(--muted);font-size:12px;margin-top:3px}
.chat-shop-link{margin-left:auto;font-size:11px;font-weight:800}
.widget-new{display:none}
.chat-scroll{flex:1;min-height:0;overflow-y:auto;padding:0 28px}
.chat-welcome{text-align:center;max-width:650px;margin:clamp(55px,10vh,110px) auto 25px}
.welcome-icon{font-size:49px;color:#e69a0a;line-height:1;margin-bottom:12px}
.chat-welcome>p:not(.section-eyebrow){color:var(--muted);font-size:14px;line-height:1.6}
.prompt-chips{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:22px}
.prompt-chips button{background:white;border:1px solid #d8d9d7;padding:10px 12px;font-size:12px;font-weight:800}
.prompt-chips button:hover{border-color:#f0a218;background:#fff8ea}
.prompt-chips span{color:#cc7a0d;margin-left:7px}
.chat-welcome .agent-note{font-size:11px!important;color:#a6a8a9!important;max-width:450px;margin:28px auto}
/* Messages and local product cards share these styles in both chat views. */
.messages{max-width:800px;margin:auto;padding:25px 0 42px}
.message{display:flex;gap:9px;align-items:flex-start;margin:0 0 24px}
.message.user{justify-content:flex-end}
.message-avatar{width:27px;height:27px;flex:none;font-size:17px}
.message-bubble{max-width:min(650px,85%);border:1px solid var(--line);background:#f8f8f6;padding:15px 18px;font-size:15px;line-height:1.6;white-space:pre-wrap;overflow-wrap:anywhere}
.message.user .message-bubble{background:#181a1c;color:white;border-color:#181a1c}
.message-bubble p{margin:0 0 10px}
.message-bubble p:last-child{margin-bottom:0}
.answer-label{display:block;font-weight:800;letter-spacing:.13em;color:#ab6c11;margin-bottom:7px}
.message-bubble .answer-label,.answer-label{font-size:11px}
.rec-list{display:grid;gap:7px;margin-top:12px}
.rec-card{display:flex;align-items:center;gap:10px;border:1px solid var(--line);background:white;padding:8px;color:var(--ink)}
.rec-card:hover{border-color:#c88a28}
.rec-icon{width:37px;height:37px;position:relative;overflow:hidden;flex:none;display:grid;place-items:center;background:white;font-size:22px}
.rec-photo{display:block;width:100%;height:100%;object-fit:contain}
.rec-card strong{display:block;font-size:13px}
.rec-card small{display:block;font-size:12px;color:var(--muted)}
.rec-arrow{margin-left:auto;color:#a86d12}
/* Fixed composer below the independently scrolling message area. */
.composer-wrap{flex:none;width:min(780px,calc(100% - 60px));margin:0 auto 17px}
.chat-composer{border:1px solid #cfcfcb;background:#fff;padding:11px 13px;box-shadow:0 6px 25px #1d23230c}
.chat-composer:focus-within{border-color:#e99d16}
.chat-composer textarea{display:block;width:100%;resize:none;outline:0;border:0;min-height:43px;max-height:140px;font-size:15px;line-height:1.5}
.composer-bottom{display:flex;align-items:center;justify-content:space-between}
.composer-bottom span{font-size:11px;color:#9a9da0}
.composer-bottom button{width:32px;height:32px;border:0;background:#f2a519;font-size:19px;font-weight:800}
.composer-bottom button:disabled{opacity:.5}
.composer-disclaimer{text-align:center;font-size:11px;color:#a2a4a4;margin:7px 0 0}
/* widget=1 hides the sidebar and reserves header space for the parent's window buttons. */
.widget-mode .chat-shell{display:block;height:100dvh}
.widget-mode .chat-sidebar{display:none}
.widget-mode .chat-main{height:100dvh}
.widget-mode .chat-header{height:61px;padding:0 88px 0 14px}
.widget-mode .chat-header strong{font-size:14px}
.widget-mode .chat-header small{font-size:11px}
.widget-mode .chat-shop-link{display:none}
.widget-mode .widget-new{display:inline-flex;margin-left:auto;background:white;border:1px solid #dededa;padding:7px 9px;font-size:10px;font-weight:800}
.widget-mode .chat-scroll{padding:0 11px}
.widget-mode .chat-welcome{margin:35px auto 15px}
.widget-mode .chat-welcome>p:not(.section-eyebrow){font-size:12px}
.widget-mode .prompt-chips{gap:7px;margin-top:17px}
.widget-mode .prompt-chips button{font-size:11px;padding:8px 9px}
.widget-mode .chat-welcome .agent-note{font-size:10px!important;margin-top:22px}
.widget-mode .messages{padding:18px 0 28px}
.widget-mode .message-bubble{max-width:calc(100% - 29px);font-size:14px;line-height:1.55;padding:12px 14px}
.widget-mode .message-bubble .answer-label,.widget-mode .answer-label{font-size:10px}
.widget-mode .message-avatar{width:23px;height:23px;font-size:14px}
.widget-mode .rec-card{padding:6px}
.widget-mode .rec-card strong{font-size:12px}
.widget-mode .rec-card small{font-size:11px}
.widget-mode .composer-wrap{width:calc(100% - 22px);margin-bottom:9px}
.widget-mode .chat-composer{padding:9px 10px}
.widget-mode .chat-composer textarea{min-height:36px;font-size:14px}
.widget-mode .composer-bottom span{font-size:10px}
.widget-mode .composer-disclaimer{font-size:10px}
/* Staggered dots are removed with the pending paragraph; reduced motion keeps them static. */
.typing-dots{display:inline-flex;align-items:baseline;gap:1px;margin-left:3px}
.typing-dots span{display:inline-block;opacity:.2;animation:typing-dot 1.1s ease-in-out infinite}
.typing-dots span:nth-child(2){animation-delay:.15s}
.typing-dots span:nth-child(3){animation-delay:.3s}
@keyframes typing-dot{0%,60%,100%{opacity:.2;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
@media(prefers-reduced-motion:reduce){.typing-dots span{animation:none;opacity:1}}