/* ChatUser.app — public site and workspace styles.
   Palette: deep green ink on warm paper, with one vermilion accent used sparingly
   (links underlines, emphasis, the "human" mark). Display type is a book serif;
   UI and body copy use the platform sans so the site loads with no web fonts. */

:root {
    --ink: #173b34;
    --ink-deep: #0f2823;
    --ink-soft: #3f5f57;
    --text: #22312d;
    --muted: #5a6662;
    --paper: #f7f3ec;
    --paper-2: #efe8dc;
    --card: #fffdf9;
    --line: #ddd3c3;
    --line-strong: #c9bca8;
    --accent: #d4471c;
    --accent-text: #b33a14;
    --accent-soft: #f8dfd2;
    --white: #fff;
    /* kept for older workspace rules */
    --cream: var(--paper);
    --lime: var(--accent-soft);

    --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
    --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --mono: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, monospace;

    --gutter: clamp(16px, 5vw, 64px);
    --measure: 1120px;
    --radius: 6px;
}

/* ---------- Base ---------- */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    background: var(--paper);
    color: var(--text);
    font: 16px/1.6 var(--sans);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
button, a, input, textarea, select { outline-offset: 3px; }
:focus-visible { outline: 2px solid var(--accent); }
button { cursor: pointer; }
button:disabled { cursor: default; opacity: .5; }
h1, h2, h3 { color: var(--ink); }
::selection { background: var(--accent-soft); }
.icon { width: 20px; height: 20px; flex-shrink: 0; }

.site-shell { min-height: 100vh; display: flex; flex-direction: column; }
.site-shell > main { flex: 1; }
/* auto-margined mains would otherwise shrink to fit inside the flex column */
.auth-layout, .guides-page, .guide-page, .desk { width: 100%; }
.wrap { width: min(calc(100% - 2 * var(--gutter)), var(--measure)); margin-inline: auto; }

/* Small label above a heading. Sentence case, not shouted. */
.kicker {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--accent-text);
}

/* ---------- Header ---------- */

.site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    width: min(calc(100% - 2 * var(--gutter)), var(--measure));
    margin-inline: auto;
    padding-block: 22px;
}
.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 20px;
    font-weight: 650;
    letter-spacing: -.02em;
    color: var(--ink);
}
.brand-mark { width: 32px; height: 32px; }
.cu-domain { color: var(--muted); font-weight: 450; }
.site-header nav { display: flex; align-items: center; gap: 28px; font-size: 15px; }
.site-header nav > a:not(.button) { color: var(--text); }
.site-header nav > a:not(.button):hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.header-account { display: flex; align-items: center; gap: 14px; min-width: 0; }
.header-email { font-size: 14px; color: var(--muted); overflow-wrap: anywhere; }
.header-account form { margin: 0; flex-shrink: 0; }

/* ---------- Buttons and links ---------- */

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 1px solid var(--ink);
    border-radius: var(--radius);
    background: var(--ink);
    color: var(--paper);
    padding: 13px 20px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    transition: background-color .15s;
}
.button:hover { background: var(--ink-deep); }
.button .icon { width: 18px; height: 18px; transition: transform .15s; }
.button:hover .icon { transform: translateX(2px); }
.button-small { padding: 9px 14px; font-size: 14px; }
.button-light { background: var(--paper); border-color: var(--paper); color: var(--ink); }
.button-light:hover { background: var(--white); }
.quiet-button {
    background: var(--card);
    color: var(--ink);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    padding: 9px 14px;
    font-size: 14px;
}
.quiet-button:hover:not(:disabled) { border-color: var(--ink); }
.text-link {
    font-weight: 600;
    color: var(--ink);
    text-decoration: underline;
    text-decoration-color: var(--accent);
    text-decoration-thickness: 2px;
    text-underline-offset: 5px;
}
.text-link:hover { color: var(--accent-text); }

/* ---------- Home: hero ---------- */

.hero {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: clamp(32px, 6vw, 88px);
    align-items: center;
    padding-block: clamp(32px, 6vw, 72px) clamp(56px, 8vw, 104px);
}
.hero h1 {
    font-family: var(--serif);
    font-weight: 600;
    font-size: clamp(40px, 5vw, 66px);
    line-height: 1.04;
    letter-spacing: -.02em;
    margin: 0 0 28px;
}
.hero h1 em { font-style: italic; color: var(--accent-text); }
.lede { font-size: clamp(17px, 1.4vw, 19px); line-height: 1.65; margin: 0 0 32px; max-width: 34em; }
.hero-actions { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.hero-note { margin: 22px 0 0; font-size: 14px; color: var(--muted); }

/* Product illustration: a plain page with the chat window docked bottom-right,
   the way it actually appears on a customer's site. */
.hero-demo { margin: 0; }
.demo-site {
    position: relative;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 0 0 24px;
    min-height: 470px;
    overflow: hidden;
    box-shadow: 0 1px 0 var(--line), 0 30px 60px -30px #173b3433;
}
.demo-site-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--line);
    background: var(--paper);
    font: 12px var(--mono);
    color: var(--muted);
}
.demo-site-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--line-strong); }
.demo-site-bar span { margin-left: 10px; }
.demo-page { padding: 26px 28px; }
.demo-page strong { font: italic 600 20px var(--serif); color: var(--ink); }
.demo-page b { display: block; width: min(46%, 230px);aspect-ratio: 4 / 3; margin: 18px 0 16px; border-radius: 4px; background: linear-gradient(160deg, var(--paper-2), #e4d9c6); }
.demo-page span { display: block; height: 9px; border-radius: 2px; background: var(--paper-2); margin-top: 12px; width: 38%; }
.demo-page span:last-child { width: 24%; }
.demo-chat {
    position: absolute;
    right: 20px;
    bottom: 20px;
    width: min(330px, calc(100% - 40px));
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: 0 18px 40px -12px #0f282340;
    overflow: hidden;
    font-size: 14px;
}
.demo-chat-header { display: flex; align-items: center; gap: 10px; padding: 14px 16px; background: var(--ink); color: var(--paper); }
.demo-chat-header strong { display: block; font-size: 14px; }
.demo-chat-header small { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #c9d8d2; }
.demo-chat-header small::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #5fd08a; }
.avatar {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent-text);
    font-weight: 700;
    flex-shrink: 0;
}
.demo-messages { display: flex; flex-direction: column; gap: 10px; padding: 16px; }
.bubble { max-width: 85%; padding: 9px 12px; border-radius: 10px; line-height: 1.45; }
.bubble.visitor { align-self: flex-end; background: var(--ink); color: var(--paper); border-bottom-right-radius: 3px; }
.bubble.support { align-self: flex-start; background: var(--paper-2); color: var(--text); border-bottom-left-radius: 3px; }
.bubble-meta { align-self: flex-start; margin-top: -4px; font-size: 12px; color: var(--muted); }
.typing { align-self: flex-start; display: inline-flex; gap: 4px; padding: 11px 12px; border-radius: 10px; background: var(--paper-2); }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: typing 1.2s infinite ease-in-out; }
.typing i:nth-child(2) { animation-delay: .15s; }
.typing i:nth-child(3) { animation-delay: .3s; }
@keyframes typing { 0%, 60%, 100% { opacity: .3; } 30% { opacity: 1; } }
.demo-input { display: flex; justify-content: space-between; border-top: 1px solid var(--line); padding: 12px 16px; color: #8b938f; }
.hero-demo figcaption { margin-top: 14px; font-size: 14px; color: var(--muted); }

/* ---------- Home: sections ---------- */

.section { padding-block: clamp(56px, 8vw, 104px); border-top: 1px solid var(--line); }
.section h2, .stance h2, .closing h2 {
    font-family: var(--serif);
    font-weight: 600;
    font-size: clamp(30px, 3.4vw, 44px);
    line-height: 1.1;
    letter-spacing: -.015em;
    margin: 0 0 18px;
}
.section-intro { max-width: 36em; color: var(--muted); margin: 0; }
.split { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: start; }

.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.steps li {
    counter-increment: step;
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    padding: 26px 0;
    border-top: 1px solid var(--line);
}
.steps li:first-child { border-top: 0; padding-top: 0; }
.steps li::before { content: counter(step); font: 600 28px/1 var(--serif); color: var(--accent-text); }
.steps h3 { font-size: 19px; line-height: 1.35; margin: 0 0 6px; }
.steps p { margin: 0; color: var(--muted); }
.snippet {
    display: block;
    margin-top: 14px;
    padding: 12px 14px;
    overflow-x: auto;
    white-space: nowrap;
    background: var(--ink);
    color: #e9efe9;
    border-radius: var(--radius);
    font: 13px/1.5 var(--mono);
}
.snippet b { color: #ffb08f; font-weight: 400; }

/* The point of view: a full-width ink band. */
.stance { background: var(--ink); color: #dfe8e3; padding-block: clamp(64px, 9vw, 120px); }
.stance h2 { color: var(--paper); max-width: 18em; font-size: clamp(32px, 4vw, 54px); }
.stance h2 em { font-style: italic; color: #ffb08f; }
.stance .section-intro { color: #bccbc5; font-size: 18px; max-width: 38em; }
.stance-lists { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); margin-top: 56px; }
.stance-lists h3 { color: var(--paper); font-size: 15px; font-weight: 600; margin: 0 0 6px; }
.stance-lists ul { list-style: none; margin: 0; padding: 0; }
.stance-lists li { display: flex; gap: 12px; padding: 14px 0; border-top: 1px solid #ffffff21; }
.stance-lists .icon { width: 18px; height: 18px; margin-top: 3px; color: #8fd1a8; }
.stance-lists .wont .icon { color: #ffb08f; }

.free .split { align-items: center; }
.free p { margin: 0 0 18px; font-size: 18px; max-width: 34em; }

.faq-list details { border-top: 1px solid var(--line); }
.faq-list details:last-child { border-bottom: 1px solid var(--line); }
.faq-list summary {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    padding: 20px 0;
    cursor: pointer;
    list-style: none;
    font-size: 17px;
    font-weight: 600;
    color: var(--ink);
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; font: 400 24px/1 var(--sans); color: var(--accent-text); transition: transform .2s; }
.faq-list details[open] summary::after { transform: rotate(45deg); }
.faq-list p { margin: -4px 0 22px; max-width: 40em; color: var(--muted); }
.faq-list a { text-decoration: underline; color: var(--ink); }

.closing { padding-block: clamp(56px, 8vw, 104px); border-top: 1px solid var(--line); display: flex; align-items: end; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.closing h2 { font-size: clamp(32px, 4.4vw, 60px); max-width: 13em; margin: 0; }
.closing p { margin: 12px 0 0; color: var(--muted); }

/* ---------- Footer ---------- */

.site-footer { border-top: 1px solid var(--line); background: var(--paper-2); }
.site-footer > .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap; padding-block: 28px; }
.site-footer .brand { font-size: 17px; }
.site-footer .brand-mark { width: 26px; height: 26px; }
.site-footer p { margin: 0; font-size: 14px; color: var(--muted); }
.footer-links { display: flex; gap: 24px; font-size: 14px; }
.footer-links a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- Forms, alerts ---------- */

label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 600; color: var(--ink); margin: 18px 0; }
input, textarea, select {
    padding: 11px 12px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: var(--white);
    color: var(--text);
    font-size: 15px;
    font-weight: 400;
    min-width: 0;
}
input:focus, textarea:focus, select:focus { border-color: var(--ink); outline: 2px solid #173b3426; outline-offset: 0; }
textarea { resize: vertical; }
.field-hint { display: block; margin-top: -10px; font-size: 13px; line-height: 1.5; color: var(--muted); }
.alert, .success { font-size: 14px; line-height: 1.6; border-radius: var(--radius); padding: 12px 14px; margin: 16px 0; }
.alert { background: #fbe9e3; color: #8f2f12; border: 1px solid #efc4b4; }
.success { background: #e5efe8; color: #24543c; border: 1px solid #bcd6c5; }
.empty-state { color: var(--muted); font-size: 15px; padding: 20px 0; }
.bot-trap { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }
.captcha-image { display: flex; gap: 12px; align-items: center; }
.captcha-image img { width: calc(100% - 40px); max-width: 260px; height: auto; border-radius: var(--radius); border: 1px solid var(--line); }
.captcha-image a { font-size: 22px; color: var(--ink); }

/* ---------- Auth pages ---------- */

.auth-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
    gap: clamp(32px, 8vw, 120px);
    align-items: start;
    max-width: 1040px;
    margin: 0 auto;
    padding: clamp(24px, 6vw, 72px) var(--gutter) 96px;
}
.auth-aside { padding-top: 24px; }
.auth-aside h1 { font: 600 clamp(34px, 4vw, 50px)/1.08 var(--serif); letter-spacing: -.015em; margin: 0 0 18px; }
.auth-aside p { color: var(--muted); max-width: 26em; margin: 0; }
.auth-checks { list-style: none; padding: 0; margin: 32px 0 0; }
.auth-checks li { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); }
.auth-checks .icon { width: 18px; height: 18px; color: var(--accent-text); }
.auth-card { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 32px; }
.auth-card h2 { font-size: 22px; margin: 0 0 4px; }
.auth-card > p { margin: 0 0 8px; color: var(--muted); font-size: 15px; }
.auth-card .button { width: 100%; margin-top: 8px; }
.forgot-link { display: block; margin-top: -8px; text-align: right; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; }
.auth-card .auth-switch { text-align: center; margin: 22px 0 0; font-size: 14px; }
.auth-switch a { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Simple pages (not found, errors) ---------- */

.simple-page { padding-block: clamp(56px, 10vw, 140px); }
.simple-page h1 { font: 600 clamp(36px, 5vw, 60px)/1.05 var(--serif); margin: 0 0 16px; }
.simple-page p { color: var(--muted); margin: 0 0 28px; max-width: 32em; }

/* ---------- Responsive ---------- */

@media (max-width: 960px) {
    .hero { grid-template-columns: minmax(0, 1fr); }
    .demo-site { min-height: 430px; }
    .split, .stance-lists { grid-template-columns: minmax(0, 1fr); }
    .site-header nav { gap: 20px; }
}
@media (max-width: 760px) {
    .site-header { padding-block: 16px; flex-wrap: wrap; }
    .site-header nav { gap: 16px; }
    .site-header nav > a[href^='/#'], .site-header nav > a[href='/guides'] { display: none; }
    .brand { font-size: 18px; }
    .brand-mark { width: 28px; height: 28px; }
    .header-account { flex-wrap: wrap; justify-content: flex-end; }
    .header-email { display: none; }
    .auth-layout { grid-template-columns: minmax(0, 1fr); padding-bottom: 56px; }
    .auth-aside { padding-top: 0; }
    .auth-aside p, .auth-checks { display: none; }
    .auth-card { padding: 22px; }
    .steps li { grid-template-columns: 40px minmax(0, 1fr); }
    .steps li::before { font-size: 22px; }
}
@media (max-width: 420px) {
    .site-header { gap: 12px; }
    .site-header nav { gap: 12px; font-size: 14px; }
    .brand { font-size: 17px; gap: 8px; }
    .site-header .button-small { padding: 8px 11px; font-size: 13px; }
    .site-header .button-small .icon { display: none; }
    .demo-site { min-height: 470px; }
    .demo-page { padding: 20px; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .button, .button .icon { transition: none; }
    .typing i { animation: none; opacity: .6; }
}

/* ---------- Workspace (dashboard) ---------- */

.desk{padding:25px 6% 60px}.desk-heading{display:flex;justify-content:space-between;gap:20px;align-items:center;margin-bottom:25px}.desk-heading h1{font-size:30px;letter-spacing:-1px;margin:6px 0}.desk-heading p{color:var(--muted);font-size:13px}.quiet-button{background:white;color:var(--ink);border:1px solid var(--line);border-radius:7px;padding:10px 15px;font-size:12px}.desk-grid{display:grid;grid-template-columns:260px minmax(0,1fr);gap:20px}.panel{background:white;border:1px solid var(--line);border-radius:13px;padding:22px}.panel h2{font-size:18px;margin:0 0 15px}.website-button,.conversation-button{display:flex;flex-direction:column;gap:7px;width:100%;text-align:left;border:1px solid var(--line);border-radius:8px;padding:13px;background:#fff;color:var(--ink);margin:10px 0;overflow-wrap:anywhere}.website-button strong{font-size:13px}.website-button small,.conversation-button small{font-size:10px;color:var(--muted)}.website-button.selected,.conversation-button.selected{border-color:var(--ink-soft);background:var(--paper-2)}.website-status{font-size:10px;color:var(--ink-soft)}.add-website{margin-top:25px;border-top:1px solid var(--line);padding-top:20px}.add-website summary{font-size:13px;font-weight:650;cursor:pointer}.add-website .button{width:100%;padding:12px;font-size:12px}.desk-toolbar{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:20px}.desk-toolbar small{color:var(--muted);font-size:11px}.desk-actions{display:flex;gap:8px}.desk-actions .button{font-size:12px;padding:10px 14px}.installation-box{background:var(--paper-2);padding:18px;border:1px solid var(--line);border-radius:9px;margin-bottom:20px}.installation-box h3{font-size:13px;margin:0 0 8px}.installation-box p{font-size:12px;color:var(--muted);line-height:1.7}.installation-box textarea{width:100%;font:13px var(--mono);line-height:1.7;background:white}.installation-box button{margin-top:10px}.workspace-chat{display:grid;grid-template-columns:230px minmax(0,1fr);gap:20px;margin-top:20px}.chat-list{max-height:580px;overflow:auto}.chat-list h3{font-size:13px}.conversation-button strong{font-size:11px}.conversation-button span{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.thread-messages{height:420px;overflow:auto;display:flex;flex-direction:column;gap:13px;padding:20px;border-radius:10px;background:var(--paper);border:1px solid var(--line)}.thread-message{align-self:flex-start;max-width:90%;padding:12px 15px;border-radius:10px;background:white;border:1px solid var(--line)}.thread-message.admin{align-self:flex-end;background:#e6eee9}.thread-message small{color:var(--muted);font-size:10px}.thread-message p{font-size:13px;line-height:1.7;white-space:pre-wrap;overflow-wrap:anywhere;margin:6px 0 0}.response-form{display:flex;gap:10px;align-items:flex-end;margin-top:12px}.response-form textarea{flex:1;width:100%}.response-form .button{font-size:12px;padding:13px}.empty-state{color:var(--muted);font-size:13px;line-height:1.8;padding:20px 0}.appearance summary{font-size:12px;cursor:pointer;font-weight:650}.appearance-fields{display:grid;grid-template-columns:1fr 1fr;gap:10px}.appearance-fields .check{flex-direction:row;align-items:center}.appearance-fields input[type=color]{height:43px;padding:4px}.desk-user{display:flex;align-items:center;gap:15px;font-size:12px}
@media(max-width:1100px){.workspace-chat{grid-template-columns:1fr}.chat-list{max-height:170px}.desk-toolbar{flex-wrap:wrap}}
@media(max-width:760px){.desk{padding:20px 5% 45px}.desk-heading{flex-wrap:wrap}.desk-grid{grid-template-columns:1fr}.desk-websites{max-height:none}.appearance-fields{grid-template-columns:1fr}.response-form{flex-wrap:wrap}}
.inactivity-notice { color: #92400e; background: #fffbeb; border: 1px solid #fde68a; border-radius: 6px; padding: 6px 8px; }
.shared-ip-notice { color: #1e40af; background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 6px; padding: 6px 8px; }
.visitor-details { overflow-wrap: anywhere; }
.website-switcher{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));gap:12px;margin-bottom:24px}.website-switcher .website-button{margin:0;cursor:pointer;font:inherit;min-width:0}.website-switcher .website-button.is-online{background:#e7f6eb;border-color:#7ebf91}.website-switcher .website-button.is-offline{background:#fff0ec;border-color:#e6b4aa}.website-switcher .website-button.selected{outline:2px solid var(--ink);outline-offset:2px}.website-switcher .website-button:focus-visible{outline:3px solid #2563eb;outline-offset:3px}.website-switcher .website-button:disabled{cursor:wait}.website-attention{display:flex;align-items:center;flex-wrap:wrap;gap:6px;font-size:11px;font-weight:700;color:#8a3900;background:#fff3d6;border:1px solid #e6b85c;border-radius:6px;padding:6px 8px}.website-attention .icon{width:18px;height:18px;flex-shrink:0}
.website-tools{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.presence-button{display:inline-flex;align-items:center;gap:9px}
.presence-light{width:11px;height:11px;border-radius:50%;background:#7b8178;border:1px solid #62695f;flex-shrink:0}
.presence-button.is-online{background:#e7f6eb;color:#185b30;border:1px solid #7ebf91}
.is-online .presence-light{background:#22c55e;border-color:#15803d;box-shadow:0 0 0 3px #22c55e26,0 0 9px #22c55e80}
.website-dialog{box-sizing:border-box;width:min(620px,calc(100% - 32px));max-height:85dvh;overflow:auto;padding:24px;border:1px solid var(--line);border-radius:13px;background:white;color:var(--ink);box-shadow:0 24px 80px #14251d40}
.website-dialog::backdrop{background:#14251d80}
.dialog-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px}
.dialog-heading h2{font-size:20px;margin:0}
.website-dialog .installation-box{margin-bottom:0}
@media(max-width:760px){.website-dialog{padding:18px}.website-dialog .appearance-fields{grid-template-columns:1fr}}
.unanswered-notice{display:flex;align-items:center;gap:7px;font-weight:700;color:#a64200}.unanswered-notice .unanswered-icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:22px;height:22px;border-radius:50%;background:#ff7900;color:#171717;font-size:16px;font-weight:900}
.website-picker{display:flex;align-items:center;gap:14px;margin-bottom:20px}.website-picker label{font-weight:700;margin:0;white-space:nowrap}.website-picker select{width:min(620px,100%);min-width:0;padding:12px;border:1px solid var(--line);border-radius:8px;background:white;color:var(--ink);font:inherit}.chat-desk-grid{grid-template-columns:300px minmax(0,1fr);align-items:start}.chat-sidebar{min-width:0}.chat-sidebar .chat-list{max-height:580px;overflow:auto}.sidebar-tools{border-top:1px solid var(--line);padding-top:18px;margin:18px 0 0;display:flex;flex-direction:column}.sidebar-tools button{width:100%}.conversation-panel{min-width:0}.visitor-details{overflow-wrap:anywhere}.chat-list .quiet-button{margin-bottom:8px}
@media(max-width:760px){.website-picker{align-items:stretch;flex-direction:column}.website-picker select{width:100%}.chat-desk-grid{grid-template-columns:1fr}.chat-sidebar .chat-list{max-height:300px}}
.desk-heading>.website-picker{margin:0 0 0 auto;max-width:540px;flex:0 1 540px;justify-content:flex-end}.desk-heading>.website-picker select{flex:1;min-width:0;width:auto}.desk-heading>div:first-child{min-width:0}
@media(max-width:760px){.desk-heading>.website-picker{flex-basis:100%;max-width:none;margin-left:0;align-items:stretch}.desk-heading>.website-picker select{width:100%}}