:root{--blue:#0c5f9f;--blue2:#0a4d83;--green:#11c86b;--ink:#17324a;--muted:#718096;--bg:#eef4f8;--line:#dce6ee;--bot:#fff;--user:#dff7eb;--shadow:0 24px 70px rgba(14,54,86,.18)}*{box-sizing:border-box}html,body{height:100%;margin:0;font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;background:linear-gradient(145deg,#edf4f8,#f8fbfd);color:var(--ink)}body{overflow:hidden}.page-shell{height:100%;display:grid;place-items:center;padding:18px}.chat-card{width:min(100%,760px);height:min(94vh,850px);background:#fff;border-radius:24px;overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--shadow);border:1px solid rgba(17,83,128,.08)}.chat-header{min-height:84px;padding:14px 18px;background:linear-gradient(135deg,var(--blue),var(--blue2));color:#fff;display:flex;align-items:center;gap:13px;box-shadow:0 2px 12px rgba(0,0,0,.12);z-index:3}.back-site,.header-menu{color:#fff;background:transparent;border:0;cursor:pointer}.back-site{width:38px;height:38px;border-radius:50%;display:grid;place-items:center}.back-site:hover{background:rgba(255,255,255,.12)}.back-site svg{width:24px;fill:none;stroke:currentColor;stroke-width:2.2}.brand-mark{width:40px;height:40px;position:relative;transform:rotate(45deg);flex:0 0 auto}.brand-mark span{position:absolute;border:4px solid #fff;width:25px;height:25px;border-radius:2px}.brand-mark span:first-child{left:0;top:0;border-right-color:#35d883;border-bottom-color:#35d883}.brand-mark span:last-child{right:0;bottom:0;border-left-color:#94d9ff;border-top-color:#94d9ff}.brand-mark.large{width:54px;height:54px}.brand-mark.large span{width:34px;height:34px;border-width:5px;border-color:var(--blue)}.brand-mark.large span:first-child{border-right-color:var(--green);border-bottom-color:var(--green)}.brand-mark.large span:last-child{border-left-color:#57aee2;border-top-color:#57aee2}.brand-copy{display:flex;flex-direction:column;min-width:0;flex:1}.brand-copy strong{font-size:19px;line-height:1.15}.brand-copy small{display:flex;align-items:center;gap:7px;margin-top:6px;color:#d9efff}.online-dot{width:9px;height:9px;border-radius:50%;background:#2fe37f;box-shadow:0 0 0 3px rgba(47,227,127,.18)}.header-menu{font-weight:800;letter-spacing:.05em;font-size:12px;border:1px solid rgba(255,255,255,.32);border-radius:999px;padding:9px 11px}.privacy-strip{display:flex;align-items:center;justify-content:center;gap:7px;padding:8px 12px;font-size:11px;color:#647a8d;background:#f6fafc;border-bottom:1px solid #edf2f6}.privacy-strip svg{width:14px;fill:none;stroke:#5f7d91;stroke-width:1.7}.chat-messages{flex:1;overflow:auto;padding:18px 18px 24px;background:radial-gradient(circle at 18px 18px,rgba(21,91,136,.035) 1px,transparent 1.5px);background-size:24px 24px;scroll-behavior:smooth}.day-chip{width:max-content;margin:0 auto 18px;background:#e7eef3;color:#6c8190;font-size:11px;font-weight:700;padding:6px 11px;border-radius:999px}.msg-row{display:flex;margin:8px 0;gap:8px;align-items:flex-end}.msg-row.user{justify-content:flex-end}.msg-bubble{max-width:min(82%,560px);padding:11px 13px;border-radius:16px;font-size:14.5px;line-height:1.46;box-shadow:0 1px 2px rgba(18,51,73,.08);white-space:pre-wrap;word-break:break-word;position:relative}.msg-row.bot .msg-bubble{background:var(--bot);border:1px solid #e5edf2;border-bottom-left-radius:5px}.msg-row.user .msg-bubble{background:var(--user);border:1px solid #c6ecd9;border-bottom-right-radius:5px}.msg-row.agent .msg-bubble{background:#fff7db;border:1px solid #f3e2a8;border-bottom-left-radius:5px}.msg-label{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;margin-bottom:4px;color:#6d8392}.msg-row.agent .msg-label{color:#94721a}.msg-time{font-size:9px;color:#8aa0ae;text-align:right;margin-top:5px}.msg-bubble a{color:#075f9f;font-weight:700}.msg-file{display:flex;gap:10px;align-items:center;min-width:210px}.msg-file .file-icon{font-size:26px}.msg-image{display:block;max-width:100%;max-height:290px;border-radius:11px;margin-top:5px;cursor:pointer}.quick-replies{display:flex;gap:7px;overflow-x:auto;padding:9px 14px 10px;border-top:1px solid #edf2f6;background:#fff;scrollbar-width:none}.quick-replies::-webkit-scrollbar{display:none}.quick-replies button{white-space:nowrap;border:1px solid #8bc7ed;color:#0b609e;background:#f7fcff;border-radius:999px;padding:9px 12px;font-weight:700;font-size:12px;cursor:pointer}.quick-replies button:hover{background:#eaf7ff}.handoff-banner{display:flex;align-items:center;gap:9px;padding:10px 15px;background:#fff8da;border-top:1px solid #f4e8b8;color:#765c16}.handoff-banner strong,.handoff-banner small{display:block}.handoff-banner strong{font-size:12px}.handoff-banner small{font-size:11px;margin-top:2px}.agent-icon{font-size:20px}.composer{display:flex;align-items:flex-end;gap:8px;padding:10px 12px 8px;background:#fff;border-top:1px solid var(--line)}.attach-btn,.send-btn{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;cursor:pointer;flex:0 0 auto}.attach-btn{color:#537184}.attach-btn:hover{background:#eff5f8}.attach-btn svg,.send-btn svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.send-btn{border:0;background:var(--green);color:#fff;box-shadow:0 5px 13px rgba(17,200,107,.28)}.send-btn:disabled{opacity:.55;cursor:not-allowed}.composer textarea{flex:1;resize:none;max-height:120px;min-height:42px;border:1px solid #dfe8ed;background:#f7fafb;border-radius:22px;padding:10px 15px;font:inherit;outline:none;line-height:1.35}.composer textarea:focus{border-color:#8bc7ed;background:#fff;box-shadow:0 0 0 3px rgba(79,168,224,.1)}.file-hint{text-align:center;background:#fff;color:#91a0aa;font-size:9px;padding:0 8px 7px}.upload-preview{display:flex;align-items:center;justify-content:space-between;margin:0 12px 4px;padding:9px 12px;border:1px solid #dfe8ed;border-radius:12px;background:#f7fafb}.preview-meta{display:flex;align-items:center;gap:9px;min-width:0}.preview-meta strong,.preview-meta small{display:block;max-width:420px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.preview-meta strong{font-size:12px}.preview-meta small{font-size:10px;color:#8295a2;margin-top:2px}.upload-preview button{border:0;background:#eaf0f4;color:#5d7483;width:28px;height:28px;border-radius:50%;font-size:20px;cursor:pointer}.typing{display:flex;align-items:center;gap:4px;padding:6px 20px;color:#8196a4;font-size:10px;background:#fff}.typing span{width:6px;height:6px;border-radius:50%;background:#80a5bc;animation:bounce 1.15s infinite}.typing span:nth-child(2){animation-delay:.15s}.typing span:nth-child(3){animation-delay:.3s}.typing em{font-style:normal;margin-left:3px}@keyframes bounce{0%,60%,100%{transform:translateY(0);opacity:.55}30%{transform:translateY(-5px);opacity:1}}.hidden{display:none!important}.identity-overlay{position:fixed;inset:0;background:rgba(9,45,72,.55);backdrop-filter:blur(6px);display:grid;place-items:center;padding:18px;z-index:20}.identity-card{width:min(100%,430px);background:#fff;border-radius:22px;padding:28px;box-shadow:0 30px 90px rgba(0,0,0,.24)}.identity-logo{display:flex;justify-content:center;margin:4px 0 20px}.identity-card h1{text-align:center;margin:0 0 8px;color:#0d5f9d}.identity-card>p{text-align:center;color:#687f8e;font-size:13px;line-height:1.45;margin:0 0 22px}.identity-card label{display:block;font-size:12px;font-weight:800;color:#415c6d;margin:12px 0}.identity-card input{width:100%;margin-top:7px;border:1px solid #d8e5ec;border-radius:12px;padding:13px 14px;font:inherit;outline:none}.identity-card input:focus{border-color:#5eb0e3;box-shadow:0 0 0 3px rgba(94,176,227,.12)}.identity-card button{width:100%;margin-top:12px;border:0;border-radius:12px;background:linear-gradient(135deg,#0d66a8,#0a568f);color:#fff;font-weight:800;padding:14px;cursor:pointer;font-size:14px}.identity-card>small{display:block;text-align:center;color:#93a1aa;font-size:9px;margin-top:12px}@media(max-width:700px){body{background:#fff}.page-shell{padding:0}.chat-card{width:100%;height:100dvh;max-height:none;border-radius:0;border:0;box-shadow:none}.chat-header{min-height:76px;padding-top:max(12px,env(safe-area-inset-top))}.privacy-strip{padding:7px 10px}.chat-messages{padding:14px 11px 18px}.msg-bubble{max-width:88%;font-size:14px}.composer{padding-bottom:max(8px,env(safe-area-inset-bottom))}.identity-card{padding:24px 20px;border-radius:18px}.preview-meta strong,.preview-meta small{max-width:250px}}@media(max-width:390px){.brand-copy strong{font-size:17px}.header-menu{padding:8px 9px;font-size:10px}.brand-mark{width:34px;height:34px}.brand-mark span{width:22px;height:22px}.msg-bubble{max-width:92%}}