:root {
    --navy: #050912;
    --navy-2: #090f19;
    --navy-3: #111b2a;
    --ink: #eef4fc;
    --muted: #8c9bad;
    --line: #253044;
    --wash: #080d15;
    --paper: #101823;
    --blue: #4b9fff;
    --blue-soft: #122942;
    --teal: #2bd0b3;
    --teal-soft: #102c2a;
    --amber: #f0b653;
    --danger: #ff728b;
    --shadow: 0 22px 65px rgba(0, 0, 0, .32);
    color-scheme: dark;
}

html,
body,
form {
    color: var(--ink);
    background: var(--wash);
}

body {
    accent-color: var(--blue);
}

[hidden] {
    display: none !important;
}

::selection {
    color: #fff;
    background: rgba(75, 159, 255, .5);
}

* {
    scrollbar-color: #34445b #0b111b;
    scrollbar-width: thin;
}

*::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

*::-webkit-scrollbar-track {
    background: #0b111b;
}

*::-webkit-scrollbar-thumb {
    border: 2px solid #0b111b;
    border-radius: 999px;
    background: #34445b;
}

.skip-link {
    position: fixed;
    z-index: 10001;
    top: 10px;
    left: 10px;
    padding: 10px 14px;
    border: 1px solid #446487;
    border-radius: 10px;
    color: #fff;
    background: #101d2e;
    box-shadow: var(--shadow);
    transform: translateY(-150%);
}

.skip-link:focus {
    transform: translateY(0);
}

.workspace-anchor {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

:focus-visible {
    outline-color: rgba(91, 174, 255, .85);
}

.eyebrow {
    color: #79a7d5;
}

.form-error {
    color: #ff879b;
}

.server-notice {
    color: #55dbc2;
}

/* Controls */
.primary-button,
.send-button {
    color: #fff;
    background: linear-gradient(135deg, #2585ed, #5069ed);
    box-shadow: 0 10px 28px rgba(37, 133, 237, .22);
}

.primary-button:hover,
.send-button:hover {
    background: linear-gradient(135deg, #3194ff, #617aff);
}

.secondary-button {
    border: 1px solid #314058;
    color: #d9e6f5;
    background: #172233;
}

.secondary-button:hover {
    border-color: #415574;
    background: #1d2c41;
}

.danger-button {
    border: 1px solid rgba(255, 114, 139, .25);
    color: #ff93a6;
    background: rgba(199, 52, 82, .13);
}

.danger-button:hover {
    background: rgba(219, 59, 91, .22);
}

.icon-button:hover {
    background: rgba(135, 166, 204, .14);
}

input,
textarea,
select {
    caret-color: #7ab8ff;
}

button:disabled,
input:disabled,
textarea:disabled,
select:disabled,
.attach-button:has(input:disabled) {
    cursor: not-allowed;
    opacity: .48;
}

input::placeholder,
textarea::placeholder {
    color: #637287;
}

/* Login */
.login-view {
    background: #080d15;
}

.login-card {
    position: relative;
}

.login-card::before {
    position: absolute;
    z-index: -1;
    inset: -15% -5%;
    content: "";
    pointer-events: none;
    background: radial-gradient(circle at 30% 38%, rgba(45, 128, 228, .12), transparent 45%);
}

.login-card .brand img {
    filter: brightness(0) invert(1);
}

.login-product {
    border-color: #28364a;
    background: linear-gradient(135deg, rgba(31, 47, 70, .82), rgba(14, 52, 54, .75));
    box-shadow: 0 18px 50px rgba(0, 0, 0, .22);
}

.login-product span,
.login-card > p,
.login-card small {
    color: var(--muted);
}

.login-kicker {
    color: #7db9f1;
}

.login-form label,
.site-form label,
.identity-fields label,
.admin-card label,
.space-form label {
    color: #b5c4d7;
}

.login-form input,
.site-form input,
.site-form textarea,
.site-form select,
.identity-fields input,
.identity-fields select,
.admin-card input,
.admin-card textarea,
.admin-card select,
.space-form input,
.space-form textarea {
    border-color: #2d3a4d;
    color: #edf4fd;
    background: #0c131e;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .018);
}

.login-form input:focus,
.site-form input:focus,
.site-form textarea:focus,
.site-form select:focus,
.identity-fields input:focus,
.identity-fields select:focus,
.admin-card input:focus,
.admin-card textarea:focus,
.space-form input:focus {
    border-color: #4b9fff;
    outline: 0;
    box-shadow: 0 0 0 4px rgba(75, 159, 255, .12);
}

.login-visual {
    border-left: 1px solid #1c2838;
    background: radial-gradient(circle at 65% 25%, rgba(43, 208, 179, .22), transparent 30%), linear-gradient(145deg, #03070d, #09223c 64%, #07434d);
}

.demo-chat {
    border-color: rgba(147, 184, 221, .18);
    background: rgba(5, 13, 23, .8);
    backdrop-filter: blur(20px);
}

.demo-message.visitor {
    color: #eaf2fc;
    background: #162235;
}

/* Application shell */
.app-view {
    background: #080d15;
}

.sidebar {
    border-right: 1px solid #1c2635;
    background: linear-gradient(180deg, #050912, #070d16);
}

.sidebar-product {
    border-color: #253347;
    background: linear-gradient(135deg, rgba(40, 66, 98, .52), rgba(21, 102, 91, .24));
}

.nav-item {
    color: #8597ac;
}

.nav-item:hover {
    color: #e9f2fc;
    background: #101c2c;
}

.nav-item.active {
    color: #fff;
    background: linear-gradient(135deg, #173555, #142a48);
    box-shadow: inset 3px 0 #4ba4ff;
}

.sidebar-bottom {
    border-color: #1e2a3a;
}

.operator-chip small,
.sidebar .icon-button {
    color: #7f91a7;
}

/* Inbox */
.chat-workspace {
    background: #0a1019;
}

.chat-categories {
    border-right: 1px solid #1e2938;
    background: #080e18;
}

.chat-search input {
    border-color: #263448;
    background: #111b2a;
}

.chat-search input[type=submit] {
    background: #246fbd;
}

.category-button:hover {
    background: #111d2c;
}

.category-button.active {
    background: linear-gradient(135deg, #173758, #122b47);
    box-shadow: inset 3px 0 #4ba4ff;
}

.category-help {
    border-color: #223044;
    background: #0d1724;
}

.conversation-rail {
    border-color: #253044;
    background: #101721;
}

.rail-header {
    border-color: #253044;
    background: rgba(16, 23, 33, .96);
    backdrop-filter: blur(14px);
}

.rail-header p,
.toggle-row,
.conversation-copy p,
.thread-choice small,
.conversation-copy small,
.conversation-meta time,
.rail-empty,
.directory-heading small,
.team-row small {
    color: #8291a5;
}

.toggle-row span {
    background: #354155;
}

.conversation-item,
.team-row,
.thread-choice {
    border-color: #222d3c;
    color: #e9f1fb;
    background: #101721;
}

.conversation-item:hover,
.conversation-item.active,
.team-row:hover,
.thread-choice:hover {
    background: #152131;
}

.conversation-item.active {
    box-shadow: inset 3px 0 #4b9fff;
}

.conversation-avatar,
.visitor-avatar {
    color: #a9d8ff;
    background: linear-gradient(135deg, #1c3855, #153b39);
}

.directory-heading > span,
.directory-heading div > span {
    color: #9cafc5;
}

.space-form {
    border-color: #2a374a;
    background: #0d1622;
}

.space-mark {
    color: #c7a9ff;
    background: #2b2341;
}

.thread-panel {
    background: radial-gradient(circle at 70% 15%, rgba(43, 102, 165, .08), transparent 34%), #0b1119;
}

.thread-header {
    border-color: #253044;
    background: #101721;
}

.visitor-heading span,
.visitor-heading small,
.thread-placeholder p,
.message-row time,
.sender-name {
    color: #8090a5;
}

.thread-header select,
.page-header select {
    border-color: #304057;
    color: #dce8f7;
    background: #111b29;
}

.thread-placeholder img,
.site-blank img {
    filter: drop-shadow(0 18px 28px rgba(0, 0, 0, .35));
}

.message-bubble {
    border-color: #29364a;
    color: #e7eef8;
    background: #151f2d;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
}

.message-row.mine .message-bubble {
    border-color: #2787e8;
    background: linear-gradient(135deg, #2585ed, #3d6ee8);
}

.message-row.system .message-bubble {
    border-color: #214a47;
    color: #9ce4d8;
    background: #102825;
}

.attachment-image,
.attachment-file {
    border-color: #2d3b50;
    background: #121b28;
    box-shadow: 0 8px 25px rgba(0, 0, 0, .25);
}

.attachment-file {
    color: #77baff;
}

.reply-box {
    border-color: #253044;
    background: #0e1621;
    box-shadow: 0 -12px 30px rgba(0, 0, 0, .12);
}

.reply-box > textarea {
    color: #eef4fc;
    background: transparent;
}

.attach-button {
    border: 1px solid #2b394d;
    color: #b6c6da;
    background: #172231;
}

/* The global disabled-input treatment must never reveal the browser's native
   file chooser inside our custom attachment button. */
.attach-button input[type="file"],
.attach-button input[type="file"]:disabled {
    color: transparent !important;
    opacity: 0 !important;
}

.attach-button input[type="file"]::file-selector-button,
.attach-button input[type="file"]::-webkit-file-upload-button {
    color: transparent;
    opacity: 0;
}

.attach-button:hover,
.attach-button.drag-over {
    border-color: #4b9fff;
    color: #dcecff;
    background: #1a2b40;
}

.attach-button.has-file {
    border-color: #2f756b;
    color: #79dfcd;
    background: #112925;
}

/* Administrative workspaces */
.page-workspace {
    background: radial-gradient(circle at 78% -10%, rgba(58, 122, 196, .1), transparent 28%), #0a1019;
}

.page-header h1,
.editor-heading h2,
.card-heading h2,
.identity-card strong {
    color: #f1f6fd;
}

.page-header p,
.card-heading p,
.site-blank p,
.file-field small {
    color: #8998aa;
}

.site-list,
.site-editor,
.admin-card,
.identity-card {
    border-color: #273448;
    background: rgba(16, 24, 35, .97);
    box-shadow: 0 18px 50px rgba(0, 0, 0, .18);
}

.site-choice {
    border-color: #253044;
    color: #e8f0fa;
    background: #101823;
}

.site-choice:hover,
.site-choice.active {
    background: #172334;
}

.site-choice.active {
    box-shadow: inset 3px 0 #4b9fff;
}

.site-choice i {
    color: #91c8ff;
    background: #172c44;
}

.site-choice small {
    color: #7f8fa4;
}

.editor-heading,
.identity-card .form-actions {
    border-color: #28364a;
}

.site-form fieldset {
    border-color: #2c394c;
    background: rgba(7, 13, 22, .26);
}

.site-form legend {
    color: #9cafc5;
}

.compact-checklist label,
.agent-access-grid label {
    color: #c6d3e3;
}

.compact-checklist td,
.agent-access-grid td {
    color: #dce7f4;
}

.agent-access-grid td {
    border-color: #293649;
    background: #0d1520;
    transition: border-color .16s ease, background .16s ease, transform .16s ease;
}

.agent-access-grid td:hover {
    border-color: #3b506c;
    background: #121e2c;
    transform: translateY(-1px);
}

.agent-access-grid td:has(input:checked) {
    border-color: #2f6da8;
    background: #11253a;
}

.embed-panel {
    border-color: #2d4560;
    background: #0b1623;
}

.embed-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.embed-panel textarea {
    border-color: #23364c;
    color: #a8c9e9;
    background: #080f18;
}

.list-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px 12px;
    padding: 12px;
    border-bottom: 1px solid #253044;
    background: #0d1520;
}

.list-toolbar label {
    grid-column: 1 / -1;
    color: #8fa2b8;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.list-toolbar input {
    min-width: 0;
    width: 100%;
    border: 1px solid #2b3a4e;
    border-radius: 10px;
    padding: 9px 10px;
    color: #eaf2fc;
    background: #080f18;
}

.list-toolbar span {
    align-self: center;
    min-width: 50px;
    color: #718299;
    font-size: 9px;
    text-align: right;
}

.agent-toolbar {
    margin: 4px 0 10px;
    border: 1px solid #29374a;
    border-radius: 12px;
}

.client-filter-empty {
    padding: 24px 14px;
    color: #78889c;
    font-size: 10px;
    text-align: center;
}

.sticky-actions {
    position: sticky;
    z-index: 3;
    bottom: -1px;
    margin: 13px -20px -20px;
    padding: 13px 20px;
    border-top: 1px solid #293649;
    border-radius: 0 0 16px 16px;
    background: rgba(16, 24, 35, .94);
    backdrop-filter: blur(14px);
}

.ticket-row {
    border-color: #253044;
    color: #e8f0fb;
    background: transparent;
}

.ticket-row:hover {
    background: #152131;
}

.ticket-row span,
.ticket-notes small {
    color: #8090a5;
}

.ticket-notes article {
    border-color: var(--teal);
    background: #0d1822;
}

.identity-preview {
    border: 1px solid #28415b;
    background: radial-gradient(circle at 50% 14%, rgba(74, 159, 255, .22), transparent 45%), linear-gradient(145deg, #071426, #0d354d);
}

.profile-avatar {
    border: 1px solid rgba(255, 255, 255, .12);
    background: #1b2737;
    box-shadow: 0 16px 40px rgba(0, 0, 0, .24);
}

/* Readable workspace typography */
.nav-item { font-size: 13px; }
.sidebar-product small,
.operator-chip small { font-size: 10px; }
.operator-chip strong { font-size: 12px; }
.chat-search input { font-size: 12px; }
.chat-search input[type=submit] { font-size: 10px; }
.category-heading { font-size: 10px; }
.category-button { font-size: 12px; }
.category-button > span + span { font-size: 10px; }
.category-help strong { font-size: 11px; }
.category-help p { font-size: 10px; }
.rail-header p,
.toggle-row { font-size: 10px; }
.conversation-copy strong { font-size: 13px; }
.conversation-copy p,
.thread-choice small { font-size: 12px; }
.conversation-copy small,
.conversation-meta time,
.team-row small,
.directory-heading small,
.message-row time,
.sender-name { font-size: 10px; }
.unread-pill { font-size: 10px; }
.directory-heading > span,
.directory-heading div > span { font-size: 11px; }
.team-row strong,
.thread-choice strong { font-size: 12px; }
.visitor-heading strong { font-size: 14px; }
.visitor-heading span { font-size: 11px; }
.visitor-heading small { font-size: 10px; }
.thread-header select,
.page-header select { font-size: 12px; }
.message-bubble { font-size: 13px; }
.reply-box > textarea { font-size: 13px; }
.attach-button { font-size: 10px; }
.send-button { font-size: 12px; }
.page-header p { font-size: 12px; }
.login-form label,
.site-form label,
.identity-fields label,
.admin-card label,
.space-form label { font-size: 12px; }
.login-form input,
.site-form input,
.site-form textarea,
.site-form select,
.identity-fields input,
.identity-fields select,
.admin-card input,
.admin-card textarea,
.admin-card select,
.space-form input,
.space-form textarea { font-size: 13px; }
.site-choice strong { font-size: 13px; }
.site-choice small { font-size: 10px; }
.card-heading p,
.site-blank p,
.file-field small { font-size: 11px; }
.compact-checklist label,
.agent-access-grid label { font-size: 11px; }
.ticket-row strong { font-size: 13px; }
.ticket-row span { font-size: 11px; }
.ticket-notes p { font-size: 12px; }
.ticket-notes small { font-size: 10px; }

/* Interaction feedback */
body.is-posting {
    cursor: progress;
}

body.is-posting::after {
    position: fixed;
    z-index: 9998;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    content: "";
    background: linear-gradient(90deg, transparent, #58aaff, #43d8bb, transparent);
    background-size: 240% 100%;
    animation: console-progress 1.15s linear infinite;
}

@keyframes console-progress {
    to { background-position: -240% 0; }
}

.mobile-thread-back {
    display: none;
}

@media (max-width: 900px) {
    .thread-panel {
        display: none;
    }

    body.mobile-thread-open .chat-workspace {
        grid-template-columns: 1fr;
    }

    body.mobile-thread-open .chat-categories,
    body.mobile-thread-open .conversation-rail {
        display: none;
    }

    body.mobile-thread-open .thread-panel {
        display: block;
        min-width: 0;
        height: 100%;
    }

    .mobile-thread-back {
        display: inline-flex;
        flex: none;
        align-items: center;
        gap: 5px;
        min-height: 34px;
        padding: 0 10px;
        border: 1px solid #304158;
        border-radius: 9px;
        color: #d9e8f8;
        background: #162234;
        font-size: 10px;
        font-weight: 800;
    }
}

@media (max-width: 650px) {
    .app-view {
        display: block;
        height: 100%;
        padding-bottom: calc(62px + env(safe-area-inset-bottom));
    }

    .sidebar {
        position: fixed;
        z-index: 5000;
        inset: auto 0 0;
        display: block;
        min-height: calc(62px + env(safe-area-inset-bottom));
        padding: 6px 7px env(safe-area-inset-bottom);
        border-top: 1px solid #28364a;
        border-right: 0;
        background: rgba(6, 11, 18, .96);
        box-shadow: 0 -14px 35px rgba(0, 0, 0, .28);
        backdrop-filter: blur(18px);
    }

    .sidebar-brand,
    .sidebar-product,
    .sidebar-bottom {
        display: none;
    }

    .sidebar nav {
        display: flex;
        height: 50px;
        gap: 4px;
    }

    .nav-item {
        position: relative;
        flex: 1;
        min-width: 0;
        justify-content: center;
        padding: 5px;
        border-radius: 11px;
    }

    .nav-item.active {
        box-shadow: inset 0 2px #4ba4ff;
    }

    .nav-item > span:not(.nav-glyph):not(.nav-count) {
        display: none;
    }

    .nav-glyph {
        width: auto;
        font-size: 17px;
    }

    .nav-count {
        position: absolute;
        top: 2px;
        right: calc(50% - 24px);
        margin: 0;
    }

    .workspace {
        height: calc(100vh - 62px - env(safe-area-inset-bottom));
        height: calc(100dvh - 62px - env(safe-area-inset-bottom));
    }

    .chat-workspace {
        grid-template-rows: minmax(145px, 31vh) minmax(0, 1fr);
        overflow: hidden;
    }

    .chat-categories {
        max-height: none;
        padding: 16px 10px 10px;
    }

    .chat-categories header,
    .category-help {
        display: none;
    }

    .chat-categories nav {
        grid-template-columns: 1fr 1fr;
    }

    .category-heading {
        grid-column: 1 / -1;
        padding: 8px 8px 3px;
    }

    .chat-search {
        margin-bottom: 3px;
    }

    .conversation-rail {
        min-height: 0;
    }

    .rail-header {
        min-height: 82px;
        padding: 13px;
    }

    body.mobile-thread-open .chat-workspace {
        grid-template-rows: minmax(0, 1fr);
    }

    .thread-header {
        flex-wrap: wrap;
        padding: 10px 12px;
    }

    .visitor-heading {
        flex-basis: calc(100% - 98px);
    }

    .message-list {
        padding: 18px 13px;
    }

    .message-row {
        max-width: 88%;
    }

    .reply-box {
        padding: 9px 10px;
    }

    .page-workspace {
        overflow: auto;
        padding: 18px 11px 28px;
    }

    .sites-layout,
    .tickets-grid,
    .admin-card,
    .identity-card {
        margin-top: 15px;
    }

    .site-editor,
    .admin-card,
    .identity-card {
        padding: 15px;
    }

    .sticky-actions {
        margin: 13px -15px -15px;
        padding: 12px 15px;
    }

    .form-actions {
        flex-wrap: wrap;
    }

    .form-actions .primary-button,
    .form-actions .danger-button {
        flex: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition: none !important;
        animation: none !important;
    }
}

/* Selected public-thread live activity and private agent whispers. */
.visitor-typing {
    border-color: #274963;
    color: #b9dcf5;
    background: linear-gradient(135deg, #10283a, #112231);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .16);
}
.visitor-typing-mark i { background: #57aef4; }
.visitor-typing-copy strong { color: #d9efff; }
.visitor-typing-copy > span { color: #86a9c4; }

.whisper-meta { color: #d7ae6c; }
.whisper-badge {
    border-color: #785a2c;
    color: #f0c77f;
    background: #332713;
}
.message-row.whisper .message-bubble {
    border-color: #8b672f;
    color: #f2d9aa;
    background: linear-gradient(135deg, #2b2214, #241d13);
    box-shadow: 0 9px 25px rgba(0, 0, 0, .2);
}
.message-row.whisper time { color: #a88a5c; }

.whisper-compose { border-color: #283447; }
.whisper-compose summary { color: #afbdcf; }
.whisper-compose summary:hover { color: #e0e9f5; }
.whisper-compose summary::after,
.whisper-compose summary small { color: #b08d55; }
.whisper-compose-body {
    border-color: #72562d;
    background: linear-gradient(145deg, #211b13, #191714);
}
.whisper-compose textarea { color: #f0dfc0; }
.whisper-compose textarea::placeholder { color: #917b58; }
.whisper-compose-actions { border-color: rgba(209, 162, 87, .18); }
.whisper-compose-actions small { color: #a78d64; }
.whisper-button {
    border-color: #9a7131;
    color: #201607;
    background: linear-gradient(180deg, #f0c36f, #d99a3e);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .2);
}
.whisper-button:hover {
    border-color: #c08a38;
    background: linear-gradient(180deg, #f7d58c, #e3a64e);
}

@media (max-width: 650px) {
    .visitor-typing { padding: 9px 10px; }
    .whisper-compose-body { padding: 9px; }
}

/* Operator-only visitor page timeline. */
.page-visit-card {
    border-color: #29455b;
    color: #c5d9e9;
    background: linear-gradient(135deg, #102332, #102923);
    box-shadow: 0 9px 25px rgba(0, 0, 0, .18);
}
.page-visit-mark {
    color: #83c5ff;
    background: #173650;
}
.page-visit-copy > small { color: #7ea0b8; }
.page-visit-link { color: #9ed0fa; }
.page-visit-link span { color: #7892a8; }
.page-visit-link.unavailable { color: #8296a8; }

.team-agent-entry,
.team-thread-entry { border-color: #263348; background: #101925; }
.team-current-page {
    border-color: #29455b;
    color: #a9c8df;
    background: #112534;
}
.team-current-page:hover {
    border-color: #3f7094;
    color: #a8d7ff;
    background: #153044;
}
.team-current-page small { color: #738ea4; }
.internal-current-page {
    border-color: #29455b;
    color: #c5d9e9;
    background: linear-gradient(135deg, #102332, #102923);
}
.internal-current-page-mark { color: #83c5ff; background: #173650; }
.internal-current-page small,
.internal-current-page a > span { color: #7892a8; }