:root { --brand:#c9001f; --brand-soft:#fff0f2; --line:#e9e5e6; --text:#282326; --muted:#7a7073; --safe-top:env(safe-area-inset-top,0px); --safe-bottom:env(safe-area-inset-bottom,0px); font-family:"Sarabun","Noto Sans Thai",system-ui,-apple-system,sans-serif; color:var(--text); background:#f1eff0; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
html,body { min-height:100%; margin:0; }
body { background:#f1eff0; }
button,textarea { font:inherit; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.chat-page { position:relative; width:min(100%,520px); height:100vh; height:100dvh; min-height:0; margin:0 auto; display:flex; flex-direction:column; overflow:hidden; background:#fff; box-shadow:0 0 30px rgba(0,0,0,.08); }
.chat-header { position:sticky; top:0; z-index:5; min-height:calc(74px + var(--safe-top)); display:grid; grid-template-columns:42px minmax(0,1fr) 42px; gap:10px; align-items:center; padding:calc(14px + var(--safe-top)) 18px 12px; background:rgba(255,255,255,.97); border-bottom:1px solid var(--line); text-align:left; backdrop-filter:blur(12px); }
.chat-header div { display:grid; gap:2px; }
.chat-header strong { font-size:1rem; }
.chat-header small { color:var(--muted); font-size:.69rem; font-weight:600; }
.chat-back { width:42px; height:42px; display:grid; place-items:center; color:#221e20; background:#fff; border:1px solid #ebe6e7; border-radius:14px; text-decoration:none; cursor:pointer; }
.chat-back svg { width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.chat-back:focus-visible { outline:3px solid rgba(201,0,31,.2); outline-offset:2px; }
.chat-back:active { background:#f5f2f3; }
.chat-content { flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; padding:14px 14px 20px; }
.chat-current-date,
.chat-date-separator { padding:5px 12px; color:#776d72; background:rgba(255,255,255,.92); border:1px solid rgba(116,104,110,.13); border-radius:999px; box-shadow:0 3px 10px rgba(47,32,37,.1); font-size:.7rem; font-weight:700; line-height:1.2; backdrop-filter:blur(7px); }
.chat-current-date { position:absolute; z-index:7; top:calc(82px + var(--safe-top)); left:50%; margin:0; pointer-events:none; transform:translateX(-50%); }
.chat-date-separator { justify-self:center; margin:3px auto 1px; }
.chat-date-separator.is-under-current-date { visibility:hidden; }
.chat-welcome { min-height:74px; display:flex; align-items:center; justify-content:space-between; overflow:hidden; padding:12px 10px 12px 15px; background:linear-gradient(105deg,#fff9e9,#fff5d9 68%,#ffe3e7); border-radius:12px; }
.chat-welcome__copy { display:grid; gap:1px; }
.chat-welcome__copy strong { font-size:1.02rem; }
.chat-welcome__copy span { color:#5f5659; font-size:.78rem; }
.chat-welcome__bot { width:68px; height:56px; display:grid; place-items:center; color:var(--brand); background:#fff; border:6px solid #ffcf28; border-radius:50%; transform:rotate(-5deg); }
.chat-welcome__bot svg { width:44px; height:44px; fill:none; stroke:currentColor; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; }
.chat-messages { display:grid; gap:10px; margin-top:18px; }
.chat-message { max-width:82%; display:grid; gap:3px; }
.chat-message--customer { justify-self:end; }
.chat-message--staff,.chat-message--system { justify-self:start; }
.chat-message__name { padding:0 5px; color:var(--muted); font-size:.64rem; }
.chat-message__bubble { position:relative; padding:10px 12px; background:#f3f1f2; border-radius:16px 16px 16px 4px; font-size:.84rem; line-height:1.5; white-space:pre-wrap; overflow-wrap:anywhere; }
.chat-message--customer .chat-message__bubble { color:#111; background:linear-gradient(180deg,#9bea62 0%,#8de055 58%,#83d64e 100%); border:1px solid #70c441; border-radius:15px 5px 15px 15px; box-shadow:inset 0 1px 0 rgba(255,255,255,.48),inset 0 -1px 0 rgba(52,124,25,.14),0 2px 3px rgba(30,73,19,.22); }
.chat-message--customer .chat-message__bubble::after { content:""; position:absolute; top:-1px; right:-8px; width:13px; height:15px; background:linear-gradient(135deg,#9bea62 0%,#8de055 70%); clip-path:polygon(0 0,100% 0,0 100%); filter:drop-shadow(1px 1px .4px rgba(48,106,28,.32)); }
.chat-message__bubble.has-image { padding:5px; overflow:visible; }
.chat-message__image { display:block; max-width:min(260px,65vw); max-height:320px; border-radius:11px; object-fit:cover; cursor:zoom-in; }
.chat-message__text { display:block; padding:5px 7px; }
.chat-message__time { padding:0 5px; color:#9a9294; font-size:.6rem; }
.chat-message--customer .chat-message__time { text-align:right; }
.chat-login { margin:42px auto 0; max-width:310px; display:grid; justify-items:center; gap:8px; padding:22px; text-align:center; }
.chat-login__icon { font-size:2rem; }
.chat-login p { margin:0; color:var(--muted); font-size:.78rem; line-height:1.55; }
.chat-login a { margin-top:5px; padding:10px 22px; color:#fff; background:var(--brand); border-radius:99px; text-decoration:none; font-weight:800; }
.chat-composer { position:relative; z-index:6; flex:0 0 auto; width:100%; display:grid; grid-template-columns:42px 1fr 42px; gap:8px; padding:10px 14px calc(12px + var(--safe-bottom)); background:#fff; border-top:1px solid var(--line); }
.chat-composer textarea { min-height:44px; max-height:112px; resize:none; padding:11px 14px; color:var(--text); background:#fff; border:1px solid #e4dfe1; border-radius:24px; box-shadow:0 4px 15px rgba(37,23,27,.12); outline:none; }
.chat-composer textarea:focus { border-color:#e57a8a; box-shadow:0 0 0 3px rgba(201,0,31,.09),0 4px 15px rgba(37,23,27,.1); }
.chat-composer button { width:42px; height:42px; align-self:end; display:grid; place-items:center; color:#fff; background:var(--brand); border:0; border-radius:50%; cursor:pointer; }
.chat-composer button:disabled { opacity:.45; cursor:default; }
.chat-composer svg { width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.chat-composer .chat-attach { color:#575052; background:#f3f1f2; border:1px solid #e1dcde; }
.chat-attachment-preview { grid-column:1/-1; position:relative; justify-self:start; padding:5px; background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:0 3px 12px rgba(0,0,0,.1); }
.chat-attachment-preview img { display:block; width:78px; height:78px; border-radius:8px; object-fit:cover; }
.chat-attachment-preview button { position:absolute; top:-7px; right:-7px; width:24px; height:24px; display:grid; place-items:center; padding:0; color:#fff; background:#252123; border:2px solid #fff; border-radius:50%; font-size:1rem; line-height:1; }
@media (min-width:521px) { .chat-page { border-left:1px solid var(--line); border-right:1px solid var(--line); } }