@font-face{font-family:Garet;src:url('assets/Garet-Book.otf') format('opentype');font-display:swap;font-style:normal;font-weight:400}
:root{font-family:Garet,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:#292a35;background:#f6f6f9;font-synthesis:weight;--accent:#5b62b4;--ink:#2b2b2b;--muted:#858591;--line:#eaeaf0;--lavender:#eff0f9}
*{box-sizing:border-box}body{margin:0}button,textarea{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:default}button{color:inherit}button:focus-visible,a:focus-visible{outline:3px solid #a3a9d7;outline-offset:3px}button{border:0}a{color:inherit;text-decoration:none}svg{width:20px;height:20px;display:block;flex-shrink:0}button svg{pointer-events:none}[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.messenger{height:clamp(480px,calc(100dvh - 300px),820px);display:grid;grid-template-columns:294px minmax(0,1fr);background:#fff;border:1px solid #e2e2eb;border-radius:20px;overflow:hidden;box-shadow:0 10px 40px #34345204}.sidebar{padding:27px 15px 18px;background:#fcfcfe;border-right:1px solid var(--line);display:flex;flex-direction:column;min-width:0}.sidebar-heading{display:flex;justify-content:space-between;align-items:center;padding:0 11px 22px}.sidebar-title{font-size:16px;font-weight:700;letter-spacing:-.3px}.topic-count{font-size:10px;color:#9797a1;background:#f0f0f5;padding:5px 7px;border-radius:5px}.topic-list{display:flex;flex-direction:column;gap:7px}.topic-item{display:flex;text-align:left;align-items:flex-start;gap:12px;background:transparent;width:100%;padding:15px 11px;border-radius:12px;transition:background .16s}.topic-item:hover{background:#f1f1f8}.topic-item.active{background:#ebedf8}.topic-icon{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--lavender);color:var(--accent);flex-shrink:0}.topic-item.active .topic-icon{background:#fff}.topic-item-copy{min-width:0;flex:1;padding-top:2px}.topic-item-title{display:block;font-size:11px;font-weight:700;line-height:1.65;white-space:nowrap}.topic-preview{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#92929f;font-size:10px;margin-top:5px;line-height:1.5}.topic-item.active .topic-item-title{color:#424a8e}.unread-count{display:grid;place-items:center;min-width:17px;height:17px;font-size:9px;border-radius:50%;background:var(--accent);color:#fff;margin-top:7px}.sidebar-bottom{margin-top:auto;padding:22px 10px 0;display:flex;align-items:flex-start;gap:9px;color:#a2a2ad}.sidebar-bottom svg{width:15px;height:15px;margin-top:3px}.sidebar-bottom p{font-size:9px;line-height:1.9}.conversation{min-width:0;min-height:0;position:relative}.welcome{height:100%;overflow:auto;padding:30px 38px 24px;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center}.welcome-visual{position:relative;width:150px;height:96px;margin-bottom:18px;display:grid;place-items:center}.welcome-visual:before{content:'';width:113px;height:83px;border-radius:50%;background:radial-gradient(ellipse,#e6e8f8,transparent 70%);position:absolute}.welcome-main-icon{display:grid;place-items:center;width:68px;height:68px;color:var(--accent);background:#eceef9;border:5px solid #f8f9ff;border-radius:23px;transform:rotate(-7deg);box-shadow:0 7px 20px #5b62b415}.welcome-main-icon svg{width:31px;height:31px}.floating-icon{position:absolute;display:grid;place-items:center;background:#fff;border:1px solid var(--line);box-shadow:0 4px 10px #292a3506;color:#9298c7;width:32px;height:32px;border-radius:10px;left:0;top:14px;transform:rotate(-12deg)}.floating-icon svg{width:16px;height:16px}.floating-icon.right{left:auto;right:0;top:53px;transform:rotate(9deg);background:#f3f7f5;color:#74a88d}.welcome h2{font-size:25px;letter-spacing:-.9px;margin:12px 0}.welcome-description{color:#8c8c98;font-size:11px;line-height:1.9}.welcome-topics{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-top:25px;width:100%;max-width:544px}.welcome-topic{display:flex;align-items:center;gap:13px;text-align:left;border:1px solid #e7e7ef;border-radius:12px;padding:15px;background:#fff;transition:border-color .16s,transform .16s,box-shadow .16s;min-width:0}.welcome-topic:hover{border-color:#a3a9d7;box-shadow:0 4px 12px #5b62b408;transform:translateY(-2px)}.welcome-topic .topic-icon{width:35px;height:35px;border-radius:10px}.welcome-topic .topic-icon svg{width:18px;height:18px}.welcome-topic-copy{flex:1;min-width:0}.welcome-topic strong{display:block;font-size:10px;line-height:1.6}.welcome-topic small{display:block;font-size:9px;color:#9999a5;line-height:1.6;margin-top:4px}.welcome-topic>svg{width:14px;height:14px;color:#b6b6c1;flex-shrink:0}.welcome-footnote{display:flex;align-items:center;gap:7px;color:#a3a3af;font-size:9px;margin-top:22px}.welcome-footnote svg{width:13px;height:13px}

.page { max-width:1312px; margin:auto; padding:32px; }
.eyebrow { color:var(--accent); font-size:10px; letter-spacing:1.8px; font-weight:700; }
.messenger { height:calc(100dvh - 64px); min-height:480px; }
.icon-button { display:grid; place-items:center; border-radius:10px; background:transparent; flex-shrink:0; }

/* Chat UI ported from SZ.F/src/components/ChatWindow.tsx.
   Rem values preserve the original Tailwind sizes and desktop scaling. */
.chat { height:100%; display:flex; flex-direction:column; background:#fff; }
.chat svg { stroke-width:2; }
.chat-header { display:flex; align-items:center; gap:.5rem; flex-shrink:0; padding:.75rem 1rem; border-bottom:1px solid #f3f4f6; background:#2b2b2b; color:#fff; }
.chat-header-icon svg { width:1.25rem; height:1.25rem; }
.chat-heading { flex:1; min-width:0; }
.chat-heading h2 { font-size:1rem; font-weight:600; line-height:1.5; margin:0; }
.change-topic { display:flex; align-items:center; justify-content:center; gap:.375rem; padding:.25rem; background:transparent; color:#ffffffcc; font-size:.75rem; line-height:1.5; }
.change-topic:hover { color:#fff; }
.change-topic svg { width:1rem; height:1rem; }
.mobile-back { display:none; }
.messages { flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; touch-action:pan-y; padding:.75rem 1rem; -webkit-overflow-scrolling:touch; scrollbar-width:thin; scrollbar-color:#d1d5db transparent; }
.messages>*+* { margin-top:.25rem; }
.date-divider { display:flex; justify-content:center; margin:.75rem 0; }
.date-divider span { color:#9ca3af; background:#f3f4f6; border-radius:9999px; padding:.25rem .75rem; font-size:.75rem; line-height:1.333333; }
.intro-message { height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.5rem; color:#9ca3af; }
.intro-message svg { width:2.5rem; height:2.5rem; }
.intro-message p { font-size:.875rem; line-height:1.428571; }
.message { display:flex; justify-content:flex-start; margin-bottom:.25rem; }
.message.outgoing { justify-content:flex-end; }
.bubble { max-width:82%; border-radius:1rem; border-bottom-left-radius:.125rem; padding:.5rem .75rem; background:#f3f4f6; color:#1f2937; }
.outgoing .bubble { background:#2b2b2b; color:#fff; border-radius:1rem; border-bottom-right-radius:.125rem; }
.message-text { font-size:.875rem; line-height:1.428571; white-space:pre-wrap; overflow-wrap:break-word; }
.message-meta { display:flex; align-items:center; justify-content:flex-start; gap:.25rem; margin-top:.25rem; font-size:.75rem; line-height:1.333333; color:#9ca3af; }
.outgoing .message-meta { justify-content:flex-end; color:#c7cbe8; }
.message-images { display:grid; grid-template-columns:1fr 1fr; gap:.5rem; }
.message-images.single { display:flex; }
.message-images.with-text, .message-files.with-text { margin-top:.5rem; }
.image-attachment { position:relative; display:block; overflow:hidden; padding:0; border:1px solid #0000001a; background:#0000000d; border-radius:.5rem; }
.image-attachment img { display:block; width:100%; height:7rem; object-fit:cover; }
.single .image-attachment img { width:15rem; max-width:100%; height:11rem; }
.message-files>*+* { margin-top:.5rem; }
.attachment-link { display:block; width:100%; text-align:left; border:1px solid #e5e7eb; border-radius:.5rem; background:#fff; color:inherit; padding:.5rem .75rem; transition:border-color .15s; }
.outgoing .attachment-link { border-color:#ffffff4d; background:#ffffff1a; }
.attachment-link:hover { border-color:#a3a9d7; }
.attachment-link:disabled { opacity:.7; cursor:not-allowed; }
.attachment-name { display:flex; align-items:center; gap:.5rem; min-width:0; }
.attachment-name svg { width:1rem; height:1rem; }
.attachment-name span { font-size:.875rem; line-height:1.428571; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.attachment-link small { display:block; font-size:.75rem; line-height:1.333333; color:#6b7280; margin-top:.25rem; }
.outgoing .attachment-link small { color:#c7cbe8; }
.typing-label { font-size:.75rem; line-height:1.5; color:#9ca3af; padding:.25rem .5rem; }
.composer { border-top:1px solid #f3f4f6; padding:.75rem .75rem calc(env(safe-area-inset-bottom) + .75rem); background:#fff; }
.composer-row { display:flex; align-items:flex-end; gap:.5rem; touch-action:pan-y; }
.attach-button, .send-button { display:grid; place-items:center; padding:.625rem; border-radius:.75rem; flex-shrink:0; transition:background .15s,border-color .15s; }
.attach-button { border:1px solid #e5e7eb; background:#fff; color:#4b5563; }
.attach-button:hover { border-color:#a3a9d7; }
.attach-button:disabled { opacity:.5; cursor:not-allowed; }
.attach-button svg, .send-button svg { width:1rem; height:1rem; }
.send-button { background:#2b2b2b; color:#fff; }
.send-button:hover { background:#1a1a1a; }
.send-button:disabled { background:#d1d5db; }
.composer textarea { flex:1; min-width:0; max-height:8rem; resize:none; border:1px solid #e5e7eb; border-radius:.75rem; padding:.5rem .75rem; background:#fff; font-size:.875rem; line-height:1.5; color:#111827; outline:none; overflow-y:auto; }
.composer textarea:focus { border-color:#7f86c4; }
.composer textarea::placeholder { color:#9ca3af; }
.draft-attachments { display:flex; align-items:center; gap:.5rem; overflow-x:auto; padding-bottom:.5rem; }
.draft-file { display:flex; align-items:center; gap:.5rem; border:1px solid #e5e7eb; border-radius:.5rem; background:#f9fafb; padding:.375rem .625rem; flex-shrink:0; }
.draft-file-copy { min-width:0; }
.draft-file-name { display:block; max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#374151; font-size:.75rem; line-height:1.333333; }
.draft-file-size { display:block; color:#6b7280; font-size:11px; line-height:1.5; }
.draft-file button { background:transparent; padding:0; color:#9ca3af; font-size:.875rem; line-height:1; }
.draft-file button:hover { color:#374151; }
.draft-file button svg { width:.875rem; height:.875rem; }

/* Full-screen file viewer, matching the existing SZ chat. */
.attachment-viewer { position:fixed; inset:0; margin:0; padding:0; width:100%; height:100dvh; max-width:none; max-height:none; border:0; color:#fff; background:#000000d9; }
.attachment-viewer[open] { display:flex; flex-direction:column; }
.attachment-viewer::backdrop { background:#000000d9; }
.viewer-header { display:flex; justify-content:space-between; align-items:center; gap:.75rem; padding:.75rem 1rem; }
#viewer-name { font-size:.875rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.viewer-actions { display:flex; align-items:center; gap:1rem; flex-shrink:0; }
.viewer-actions a { font-size:.875rem; text-decoration:underline; }
.viewer-actions button { background:transparent; color:#fff; padding:0; }
#viewer-zoom { display:flex; align-items:center; gap:.25rem; }
#viewer-zoom button { width:1.75rem; height:1.75rem; border-radius:50%; background:#ffffff26; font-size:1.125rem; }
#zoom-label { width:2.5rem; text-align:center; font-size:.75rem; font-variant-numeric:tabular-nums; }
.viewer-body { position:relative; flex:1; min-height:0; padding:1rem; overflow:auto; display:flex; align-items:center; justify-content:center; }
.viewer-image { max-width:100%; max-height:100%; object-fit:contain; transition:transform .15s; }
.viewer-body iframe { border:0; width:100%; height:100%; background:#fff; border-radius:.25rem; }
.viewer-body pre { align-self:stretch; width:100%; overflow:auto; margin:0; padding:1rem; background:#fff; color:#111827; border-radius:.25rem; white-space:pre-wrap; overflow-wrap:anywhere; font-size:.875rem; }
.viewer-fallback { text-align:center; font-size:.875rem; line-height:1.7; color:#ffffffcc; }
.viewer-fallback svg { width:2.5rem; height:2.5rem; margin:0 auto .5rem; }
.toast { position:fixed; bottom:26px; left:50%; transform:translateX(-50%); max-width:calc(100vw - 32px); width:max-content; background:#2b2b35; color:#fff; font-size:11px; line-height:1.7; padding:13px 20px; border-radius:12px; box-shadow:0 8px 32px #292a3520; z-index:10; }
.noscript { padding:32px; text-align:center; }
@media(min-width:1024px) {
  /* SZ.F/src/index.css desktop scaling. */
  html { font-size:clamp(13px,calc(7px + .46875vw),16px); }
}
@media(max-width:1100px) {
  .messenger { grid-template-columns:264px minmax(0,1fr); }
  .welcome { padding:25px; }
  .welcome-topic { padding:12px; gap:9px; }
  .welcome-topic strong { font-size:9px; }
  .welcome-topic small { font-size:8px; }
  .welcome-topic .topic-icon { width:31px; height:31px; }
}
@media(max-width:760px) {
  .page { padding:16px; }
  .eyebrow { font-size:8px; letter-spacing:1.5px; }
  .messenger { display:block; height:calc(100dvh - 32px); min-height:440px; border-radius:17px; }
  .sidebar { display:none; }
  .conversation { height:100%; }
  .welcome { padding:30px 20px 24px; }
  .welcome-visual { margin-bottom:18px; }
  .welcome h2 { font-size:22px; }
  .welcome-topics { margin-top:24px; gap:9px; }
  .welcome-topic { padding:13px 11px; min-height:106px; flex-wrap:wrap; position:relative; align-content:flex-start; gap:9px; }
  .welcome-topic-copy { flex:0 0 100%; }
  .welcome-topic>svg { position:absolute; right:12px; top:21px; }
  .welcome-topic strong { font-size:9px; }
  .welcome-topic small { font-size:8px; }
  .welcome-topic .topic-icon { width:31px; height:31px; }
  .mobile-back { display:grid; width:1.25rem; height:1.5rem; color:#ffffffcc; }
  .chat-header { padding-left:.75rem; }
  .chat-header-icon { display:none; }
  .chat-heading h2 { font-size:.875rem; }
  .change-topic { padding:.25rem; }
  .change-topic>span:last-child { display:none; }
  .page.chat-open { padding:0; }
  .chat-open .messenger { height:100dvh; min-height:0; border:0; border-radius:0; }
  .chat-open .welcome { display:none; }
  .viewer-actions { gap:.75rem; }
  #viewer-zoom { display:none; }
}
@media(prefers-reduced-motion:reduce) {
  *,*:before,*:after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
}