:root {
    color-scheme:dark;
    --bg:#0b141a;
    --surface:#111b21;
    --surface-2:#202c33;
    --surface-3:#2a3942;
    --text:#e9edef;
    --muted:#8696a0;
    --subtle:#667781;
    --line:#26343c;
    --accent:#00a884;
    --accent-text:#061f1a;
    --accent-soft:#123b35;
    --bubble:#202c33;
    --outgoing:#005c4b;
    --outgoing-line:#0b6b59;
    --wall:#0b141a;
    --danger:#f15c6d;
    --shadow:0 18px 70px #0005;
    --body:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
    --head:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
    --mono:ui-monospace,SFMono-Regular,Consolas,monospace
}

:root[data-theme=light] {
    color-scheme:light;
    --bg:#efeae2;
    --surface:#fff;
    --surface-2:#f0f2f5;
    --surface-3:#d9e0e3;
    --text:#111b21;
    --muted:#667781;
    --subtle:#8696a0;
    --line:#e9edef;
    --accent:#008069;
    --accent-text:#fff;
    --accent-soft:#d9fdd3;
    --bubble:#fff;
    --outgoing:#d9fdd3;
    --outgoing-line:#c6e9c0;
    --wall:#efeae2;
    --danger:#ad3429;
    --shadow:0 18px 70px #2233
}

* {
    box-sizing:border-box
}

body {
    margin:0;
    background:var(--bg);
    color:var(--text);
    font:14px/1.5 var(--body);
    height:100vh;
    height:100dvh;
    overflow:hidden
}

button,input,select,textarea {
    font:inherit;
    color:inherit
}

button,a,input,select,textarea {
    -webkit-tap-highlight-color:transparent
}

button {
    cursor:pointer
}

button:disabled {
    cursor:default;
    opacity:.48
}

a {
    color:var(--accent)
}

button {
    border:0;
    background:none
}

button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible {
    outline:2px solid var(--accent);
    outline-offset:3px
}

input,select,textarea {
    min-width:0
}

input[type=search]::-webkit-search-cancel-button {
    cursor:pointer
}

h1,h2,h3,p {
    margin:0
}

h1,h2,h3 {
    font-family:var(--head);
    font-weight:600
}

svg {
    width:20px;
    height:20px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.65;
    stroke-linecap:round;
    stroke-linejoin:round;
    flex:none
}

button svg {
    pointer-events:none
}

[hidden] {
    display:none!important
}

.shell {
    display:grid;
    grid-template-columns:350px minmax(0,1fr);
    height:100vh;
    height:100dvh;
    max-height:100dvh;
    overflow:hidden;
    max-width:1920px;
    margin:auto;
    border-right:1px solid var(--line)
}

.shell.with-drawer {
    padding-right:380px
}

.icon-button {
    width:40px;
    height:40px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:11px;
    color:var(--muted);
    flex-shrink:0
}

.icon-button:hover {
    background:var(--surface-3);
    color:var(--text)
}

.icon-button.selected {
    background:var(--accent-soft);
    color:var(--accent)
}

.icon-button.small {
    width:34px;
    height:34px
}

.icon-button.small svg {
    width:18px;
    height:18px
}

.library {
    background:var(--surface);
    display:flex;
    flex-direction:column;
    min-height:0;
    min-width:0;
    border-right:1px solid var(--line)
}

.library-header {
    padding:10px 13px 10px 16px;
    display:flex;
    justify-content:space-between;
    gap:12px;
    align-items:center;
    min-height:64px;
    background:var(--surface-2);
    border-bottom:1px solid var(--line)
}

.library-header h1 {
    font-size:18px;
    letter-spacing:-.3px;
    line-height:1.2
}

.library-title {
    display:flex;
    align-items:center;
    gap:10px;
    min-width:0
}

.brand-icon {
    width:38px;
    height:38px;
    display:grid;
    place-items:center;
    border-radius:50%;
    color:#fff;
    background:var(--accent);
    flex:none
}

.brand-icon svg {
    width:22px;
    height:22px
}

.library-header-actions {
    display:flex;
    align-items:center;
    gap:1px
}

.library-header-actions .icon-button {
    width:34px;
    height:34px;
    border-radius:50%
}

#showChats {
    display:none
}

.eyebrow {
    font:500 9px/1.6 var(--mono);
    letter-spacing:1.5px;
    color:var(--muted)
}

.library-header .eyebrow {
    display:block;
    font-size:9px;
    letter-spacing:.2px;
    margin-top:2px;
    text-transform:none
}

.library-controls {
    padding:8px 12px 0
}

.search-field {
    display:flex;
    align-items:center;
    gap:10px;
    background:var(--surface-2);
    border:1px solid transparent;
    border-radius:8px;
    padding:0 12px
}

.search-field:focus-within {
    border-color:var(--accent)
}

.search-field span {
    display:flex;
    color:var(--muted)
}

.search-field svg {
    width:17px;
    height:17px
}

.search-field input {
    border:0;
    background:transparent;
    height:43px;
    width:100%;
    font-size:13px;
    outline:none
}

.search-field input:focus-visible {
    outline:none
}

.search-field input::placeholder {
    color:var(--muted)
}

.library-actions {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:10px 1px;
    font-size:11px;
    color:var(--muted)
}

.text-button {
    color:var(--accent);
    padding:5px 2px;
    font-size:12px
}

.text-button:hover {
    text-decoration:underline
}

.chat-list {
    flex:1;
    min-height:0;
    overflow:auto;
    padding:0;
    scrollbar-width:thin;
    scrollbar-color:var(--surface-3) transparent
}

.chat-item {
    display:flex;
    gap:12px;
    width:100%;
    text-align:left;
    padding:12px 14px;
    border-radius:0;
    align-items:center;
    position:relative;
    margin:0;
    min-height:72px;
    border-bottom:1px solid var(--line)
}

.chat-item:hover {
    background:var(--surface-2)
}

.chat-item.active {
    background:var(--accent-soft)
}

.chat-item.active::before {
    content:none
}

.avatar {
    height:43px;
    width:43px;
    border-radius:50%;
    flex:none;
    display:grid;
    place-items:center;
    background:var(--surface-3);
    font-size:14px;
    font-weight:500;
    letter-spacing:-.3px;
    color:var(--muted);
    border:1px solid var(--line)
}

.avatar.tone-1 {
    background:#2d3541;
    color:#c0d8f0
}

.avatar.tone-2 {
    background:#363a34;
    color:#c9d6b7
}

.avatar.tone-3 {
    background:#3b333a;
    color:#e1c7dd
}

.avatar.tone-4 {
    background:#3d3730;
    color:#e6d5b9
}

:root[data-theme=light] .avatar {
    background:#dfe5e7;
    color:#54656f;
    border-color:transparent
}

:root[data-theme=light] .avatar.tone-1 {
    background:#dbe8f6;
    color:#2b4d73
}

:root[data-theme=light] .avatar.tone-2 {
    background:#e2eed8;
    color:#3f5a26
}

:root[data-theme=light] .avatar.tone-3 {
    background:#f0e1f0;
    color:#6e3f66
}

:root[data-theme=light] .avatar.tone-4 {
    background:#f4e8d6;
    color:#6e4f22
}

:root[data-theme=light] .reader {
    background-image:url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3z' fill='%23000000' fill-opacity='.035'/%3E%3C/svg%3E")
}

:root[data-theme=light] .reader-notice {
    background:#fff8e1;
    color:#6b5a1e;
    border-bottom-color:#f0e2b0
}

:root[data-theme=light] .heatmap .level-1 {
    background:#c9eee0
}

:root[data-theme=light] .heatmap .level-2 {
    background:#8bd9bf
}

:root[data-theme=light] .heatmap .level-3 {
    background:#2fb994
}

:root[data-theme=light] .modal::backdrop, :root[data-theme=light] .drawer::backdrop {
    background:#0b141a66
}

.chat-summary {
    min-width:0;
    flex:1
}

.chat-top {
    display:flex;
    justify-content:space-between;
    gap:8px;
    align-items:baseline
}

.chat-top strong {
    font-weight:550;
    font-size:13px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap
}

.chat-top time {
    font-size:9px;
    color:var(--muted);
    flex-shrink:0;
    font-family:var(--mono)
}

.chat-preview {
    display:block;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:var(--muted);
    font-size:11px;
    margin-top:5px
}

.chat-flags {
    display:block;
    color:var(--accent);
    font:10px var(--mono);
    margin-top:5px
}

.library-footer {
    display:flex;
    align-items:center;
    gap:7px;
    padding:12px 15px;
    border-top:1px solid var(--line);
    font-size:10px;
    color:var(--muted)
}

.library-footer .icon-button {
    margin-left:auto
}

.status-dot {
    width:5px;
    height:5px;
    border-radius:50%;
    background:var(--accent);
    flex:none
}

.reader {
    min-width:0;
    display:flex;
    flex-direction:column;
    position:relative;
    min-height:0;
    background-color:var(--wall);
    background-image:url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3z' fill='%23ffffff' fill-opacity='.025'/%3E%3C/svg%3E")
}

.welcome {
    flex:1;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    padding:36px
}

.welcome-icon {
    width:78px;
    height:78px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:var(--surface-2);
    color:var(--accent);
    margin-bottom:22px
}

.welcome-icon svg {
    width:42px;
    height:42px
}

.welcome h2 {
    font-size:clamp(25px,3vw,34px);
    line-height:1.2;
    letter-spacing:-.7px;
    margin:0 0 12px
}

.welcome>p:not(.eyebrow) {
    font-size:14px;
    line-height:1.8;
    color:var(--muted)
}

.welcome-actions {
    display:flex;
    gap:10px;
    margin:32px 0 25px;
    align-items:center;
    flex-wrap:wrap;
    justify-content:center
}

.primary-button {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:15px;
    padding:12px 18px;
    min-height:44px;
    background:var(--accent);
    color:var(--accent-text);
    border-radius:9px;
    font-weight:600;
    font-size:12px;
    text-decoration:none
}

.primary-button:hover {
    filter:brightness(1.1)
}

.quiet-button {
    padding:11px 15px;
    border:1px solid var(--line);
    border-radius:9px;
    background:var(--surface-2);
    font-size:12px;
    min-height:42px
}

.quiet-button:hover {
    border-color:var(--muted)
}

.welcome .welcome-note {
    max-width:440px;
    font-size:11px!important;
    margin-bottom:13px
}

.conversation-header {
    display:flex;
    align-items:center;
    gap:14px;
    min-height:64px;
    border-bottom:1px solid var(--line);
    background:var(--surface-2);
    padding:9px 16px
}

.conversation-avatar {
    height:44px;
    width:44px;
    border-radius:50%;
    color:var(--accent);
    background:var(--accent-soft);
    font-size:15px
}

.conversation-heading {
    min-width:0;
    flex:1
}

.conversation-heading h2 {
    font-size:16px;
    letter-spacing:-.35px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap
}

.conversation-heading p {
    font-size:10px;
    color:var(--muted);
    margin-top:4px
}

.conversation-actions {
    display:flex;
    gap:5px
}

.mobile-back {
    display:none
}

.conversation-strip {
    display:flex;
    align-items:center;
    justify-content:space-between;
    min-height:42px;
    padding:4px 18px;
    font-size:10px;
    color:var(--muted);
    gap:10px
}

.conversation-strip .text-button {
    font-size:10px
}

.message-region {
    position:relative;
    flex:1;
    min-height:0
}

.messages {
    height:100%;
    overflow:auto;
    padding:8px clamp(18px,4.3vw,72px) 24px;
    scrollbar-width:thin;
    scrollbar-color:var(--surface-3) transparent;
    overscroll-behavior:contain;
    scroll-behavior:auto
}

.day-divider {
    text-align:center;
    margin:22px 0 26px;
    color:var(--muted);
    font:10px/1.5 var(--mono);
    letter-spacing:.3px
}

.day-divider span {
    padding:7px 12px;
    background:var(--surface-2);
    border-radius:7px;
    border:1px solid var(--line)
}

.message {
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    margin:6px 0;
    position:relative;
    scroll-margin:30px
}

.message.sent {
    align-items:flex-end
}

.message-bubble {
    background:var(--bubble);
    border:0;
    border-radius:11px 11px 11px 3px;
    max-width:min(81%,670px);
    min-width:125px;
    padding:7px 9px 5px;
    position:relative;
    overflow-wrap:anywhere
}

.sent .message-bubble {
    background:var(--outgoing);
    border-radius:11px 11px 3px 11px
}

.message-sender {
    font-weight:600;
    color:var(--accent);
    font-size:10px;
    margin-bottom:4px;
    display:block
}

.sent .message-sender {
    color:#7ee0cb
}

.sender-colour-1 {
    color:#b9cfee
}

.sender-colour-2 {
    color:#c9d6b7
}

.sender-colour-3 {
    color:#e1bed8
}

:root[data-theme=light] .message-sender {
    color:#116d98
}

:root[data-theme=light] .sent .message-sender {
    color:#006b55
}

:root[data-theme=light] .sender-colour-1 {
    color:#365779
}

:root[data-theme=light] .sender-colour-2 {
    color:#43572a
}

:root[data-theme=light] .sender-colour-3 {
    color:#75486b
}

.message-text {
    font-size:13px;
    line-height:1.65;
    white-space:pre-wrap;
    unicode-bidi:plaintext
}

.message-meta {
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:8px;
    font-size:9px;
    color:var(--muted);
    margin-top:3px;
    min-height:20px
}

.message-actions {
    display:flex;
    gap:2px;
    opacity:0;
    transition:opacity .12s
}

.message:hover .message-actions,.message:focus-within .message-actions {
    opacity:1
}

.message-action {
    height:24px;
    width:26px;
    display:grid;
    place-items:center;
    border-radius:5px;
    color:var(--muted)
}

.message-action:hover {
    background:var(--surface-3);
    color:var(--text)
}

.message-action svg {
    width:13px;
    height:13px
}

.message-action.saved {
    color:var(--accent);
    opacity:1
}

.saved-indicator {
    color:var(--accent);
    font-size:9px
}

.origin-count {
    font:9px var(--mono);
    color:var(--muted);
    padding:2px 5px;
    border-radius:4px;
    border:1px solid var(--line)
}

.system-message {
    text-align:center;
    color:var(--muted);
    font-size:10px;
    padding:8px 22px;
    margin:12px auto;
    max-width:80%;
    white-space:pre-wrap;
    overflow-wrap:anywhere
}

.system-message button {
    color:var(--muted);
    text-decoration:underline;
    font-size:9px;
    display:inline;
    margin-left:9px
}

.message.focused .message-bubble {
    outline:2px solid var(--accent);
    outline-offset:4px;
    animation:focus-message 1.5s ease-out
}

.message.focused .system-message {
    outline:2px solid var(--accent)
}

@keyframes focus-message {
    from {
        box-shadow:0 0 0 7px #38bdf829
    }

    to {
        box-shadow:none
    }

}

.history-button {
    display:block;
    padding:11px 18px;
    border:1px solid var(--line);
    border-radius:8px;
    margin:14px auto;
    color:var(--muted);
    background:var(--surface);
    font-size:11px;
    min-height:40px
}

.history-button:hover {
    color:var(--accent)
}

.latest-button {
    position:absolute;
    right:23px;
    bottom:20px;
    width:40px;
    height:40px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:var(--surface-3);
    border:1px solid var(--line);
    color:var(--text);
    box-shadow:0 3px 14px #0003
}

.latest-button svg {
    width:19px;
    height:19px
}

.reader-footer {
    background:var(--surface-2);
    padding:8px 18px 9px;
    border-top:1px solid var(--line)
}

.reader-status {
    display:flex;
    gap:8px;
    align-items:center;
    font-size:10px;
    color:var(--muted)
}

.reader-status>span:first-child {
    display:flex
}

.reader-status svg {
    width:13px;
    height:13px
}

.reader-status .text-button {
    font-size:10px;
    margin-left:auto
}

.time-controls {
    display:flex;
    align-items:center;
    gap:8px;
    margin-top:3px
}

input[type=range] {
    accent-color:var(--accent);
    width:100%;
    height:22px;
    cursor:pointer
}

.reader-notice {
    padding:10px 24px;
    font-size:12px;
    border-bottom:1px solid var(--line);
    background:var(--surface-2);
    color:var(--muted)
}

.reader-notice button {
    color:var(--accent);
    text-decoration:underline;
    margin-left:10px
}

.drawer {
    position:fixed;
    left:auto;
    right:max(0px,calc((100vw - 1920px)/2));
    top:0;
    margin:0;
    width:380px;
    height:100vh;
    height:100dvh;
    max-height:100dvh;
    max-width:100vw;
    border:0;
    border-left:1px solid var(--line);
    background:var(--surface);
    color:var(--text);
    padding:0;
    overflow:hidden
}

.drawer[open] {
    display:flex;
    flex-direction:column
}

.drawer-header {
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:25px 22px 19px;
    min-height:92px;
    border-bottom:1px solid var(--line);
    gap:12px
}

.drawer-header .eyebrow {
    font-size:8px
}

.drawer-header h2 {
    font-size:18px;
    letter-spacing:-.4px;
    margin-top:3px
}

.drawer-tabs {
    display:flex;
    padding:0 18px;
    gap:13px;
    border-bottom:1px solid var(--line);
    min-height:47px
}

.drawer-tabs button {
    color:var(--muted);
    font-size:11px;
    border-bottom:2px solid transparent;
    padding:12px 0 11px;
    flex:1
}

.drawer-tabs button[aria-selected=true] {
    color:var(--accent);
    border-color:var(--accent)
}

.drawer-body {
    flex:1;
    min-height:0;
    overflow:auto;
    overscroll-behavior:contain;
    padding:22px;
    scrollbar-width:thin;
    scrollbar-color:var(--surface-3) transparent
}

.drawer-body h3 {
    font-size:12px;
    margin:24px 0 13px
}

.drawer-body h3:first-child {
    margin-top:0
}

.drawer-body p {
    font-size:11px;
    color:var(--muted);
    line-height:1.75
}

.form-stack {
    display:grid;
    gap:14px
}

.form-label {
    display:grid;
    gap:6px;
    font-size:11px;
    color:var(--muted)
}

.form-label input,.form-label select,.form-label textarea {
    width:100%;
    border:1px solid var(--line);
    border-radius:7px;
    background:var(--surface-2);
    padding:10px 11px;
    color:var(--text);
    font-size:12px;
    min-height:42px
}

.form-label textarea {
    resize:vertical;
    min-height:85px
}

.filter-row {
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    margin:12px 0 18px
}

.filter-chip {
    padding:6px 9px;
    border:1px solid var(--line);
    border-radius:6px;
    font-size:10px;
    color:var(--muted);
    min-height:32px
}

.filter-chip.active {
    background:var(--accent-soft);
    border-color:var(--accent);
    color:var(--accent)
}

.search-summary {
    font:10px/1.6 var(--mono);
    color:var(--muted);
    margin:18px 0 10px
}

.search-result {
    display:block;
    padding:14px 0;
    border-bottom:1px solid var(--line);
    width:100%;
    text-align:left
}

.search-result:hover {
    background:var(--surface-2)
}

.search-result strong {
    font-size:11px;
    color:var(--accent);
    font-weight:500
}

.search-result time {
    font:9px var(--mono);
    float:right;
    color:var(--muted)
}

.search-result p {
    margin-top:6px;
    color:var(--text);
    white-space:pre-wrap;
    overflow-wrap:anywhere;
    font-size:11px;
    line-height:1.6
}

.search-result small {
    display:block;
    color:var(--muted);
    font-size:9px;
    margin-top:6px
}

mark {
    background:var(--accent-soft);
    color:var(--text);
    border-radius:2px;
    text-decoration:underline;
    text-decoration-color:var(--accent);
    text-underline-offset:3px
}

.pager {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    margin:18px 0
}

.pager span {
    font-size:10px;
    color:var(--muted)
}

.pager button {
    border:1px solid var(--line);
    padding:8px 12px;
    border-radius:7px;
    font-size:11px;
    min-height:36px
}

.section-note {
    padding:12px;
    border-left:2px solid var(--accent);
    background:var(--surface-2);
    font-size:11px!important;
    margin:15px 0
}

.metric-hero {
    display:flex;
    align-items:baseline;
    gap:8px;
    margin:2px 0 14px;
    color:var(--text)
}

.metric-hero strong {
    font:500 34px/1.2 var(--head);
    letter-spacing:-1px
}

.metric-hero span {
    color:var(--muted);
    font-size:13px
}

.metric-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px 12px;
    padding:21px 0;
    border-block:1px solid var(--line);
    margin:22px 0
}

.metric-grid strong {
    display:block;
    font:400 25px/1.4 var(--head);
    letter-spacing:-.8px
}

.metric-grid span {
    font-size:10px;
    color:var(--muted)
}

.activity-bars {
    height:90px;
    display:flex;
    align-items:flex-end;
    gap:3px;
    border-bottom:1px solid var(--line);
    padding-top:5px
}

.activity-bars button {
    flex:1;
    min-width:2px;
    background:var(--accent);
    opacity:.6;
    height:var(--height,2px);
    border-radius:2px 2px 0 0;
    min-height:2px;
    padding:0
}

.activity-bars button:hover,.activity-bars button:focus {
    opacity:1
}

.chart-axis {
    display:flex;
    justify-content:space-between;
    font:8px var(--mono);
    color:var(--muted);
    margin:8px 0 12px
}

.participant {
    display:grid;
    grid-template-columns:1fr auto;
    gap:5px 10px;
    margin:15px 0;
    font-size:11px
}

.participant .bar-track {
    grid-column:1/-1;
    height:3px;
    background:var(--surface-3);
    border-radius:3px
}

.participant .bar-fill {
    height:3px;
    width:var(--width,0);
    background:var(--accent);
    opacity:.7
}

.participant span:last-of-type {
    color:var(--muted);
    font-family:var(--mono);
    font-size:9px
}

.heatmap-wrapper {
    overflow:auto
}

.heatmap {
    width:100%;
    border-spacing:2px;
    table-layout:fixed;
    font:8px var(--mono);
    color:var(--muted)
}

.heatmap th {
    font-weight:400;
    width:20px
}

.heatmap td {
    height:8px;
    background:var(--surface-3);
    border-radius:1px
}

.heatmap .level-1 {
    background:#17493f
}

.heatmap .level-2 {
    background:#087362
}

.heatmap .level-3 {
    background:#00a884
}

.heatmap .level-4 {
    background:var(--accent)
}

.source-card {
    border-bottom:1px solid var(--line);
    padding:16px 0
}

.source-card:first-of-type {
    padding-top:4px
}

.source-card summary {
    cursor:pointer;
    font-size:12px;
    overflow-wrap:anywhere;
    line-height:1.6
}

.source-card .source-meta {
    font-size:10px;
    color:var(--muted);
    margin:5px 0 10px
}

.source-card code {
    display:block;
    font:9px/1.8 var(--mono);
    color:var(--accent);
    overflow-wrap:anywhere;
    padding:10px;
    background:var(--surface-2);
    border-radius:6px
}

.source-card dl {
    display:grid;
    grid-template-columns:1fr auto;
    gap:7px;
    font-size:10px;
    margin:12px 0
}

.source-card dt {
    color:var(--muted)
}

.source-card dd {
    margin:0
}

.source-card .text-button {
    display:block;
    font-size:10px
}

.button-row {
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    margin:15px 0
}

.button-row .quiet-button {
    flex:1
}

.warning {
    color:var(--danger)!important
}

.media-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:11px
}

.media-card {
    display:flex;
    flex-direction:column;
    background:var(--surface-2);
    border:1px solid var(--line);
    border-radius:8px;
    overflow:hidden;
    text-align:left;
    min-width:0;
    padding:0
}

.media-thumb {
    height:100px;
    display:grid;
    place-items:center;
    width:100%;
    color:var(--accent);
    overflow:hidden;
    background:var(--surface-3)
}

.media-thumb img {
    height:100%;
    width:100%;
    object-fit:cover
}

.video-thumb {
    position:relative
}

.video-thumb video {
    height:100%;
    width:100%;
    object-fit:cover;
    pointer-events:none
}

.video-thumb svg {
    position:absolute;
    width:28px;
    height:28px;
    fill:none;
    stroke:#fff;
    stroke-width:1.6;
    filter:drop-shadow(0 1px 2px rgba(0,0,0,.6))
}

.media-card span.media-name {
    font-size:9px;
    padding:9px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    display:block;
    width:100%
}

.media-card small {
    font-size:8px;
    color:var(--muted);
    padding:0 9px 9px
}

.attachment {
    display:block;
    padding:11px;
    border-radius:7px;
    background:var(--surface-2);
    border:1px solid var(--line);
    margin:5px 0 8px;
    text-align:left;
    max-width:100%;
    font-size:11px;
    color:var(--accent);
    overflow-wrap:anywhere
}

.audio-attachment {
    display:flex;
    flex-direction:column;
    padding:8px 10px;
    gap:4px;
}

.inline-audio {
    width:100%;
    min-width:240px;
    height:38px;
    outline:none;
}

.attachment-image {
    display:block;
    max-width:100%;
    width:310px;
    max-height:230px;
    object-fit:cover;
    border-radius:6px
}

.attachment .attachment-caption {
    display:block;
    margin-top:7px;
    font-size:9px;
    color:var(--muted)
}

.attachment-missing {
    font-size:11px;
    color:var(--muted);
    padding:12px;
    border:1px dashed var(--line);
    margin:6px 0;
    border-radius:6px
}

.media-preview {
    max-width:100%;
    max-height:60vh;
    object-fit:contain;
    display:block;
    margin:14px auto;
    border-radius:8px
}

.media-player {
    width:100%;
    margin:15px 0
}

.modal {
    padding:24px;
    background:var(--surface);
    color:var(--text);
    border:1px solid var(--line);
    border-radius:15px;
    width:590px;
    max-width:calc(100vw - 28px);
    max-height:calc(100dvh - 40px);
    box-shadow:var(--shadow);
    overflow:auto
}

.modal::backdrop,.drawer::backdrop {
    background:#080a0cb8
}

.modal>header {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    margin-bottom:20px
}

.modal h2 {
    font-size:20px;
    letter-spacing:-.45px
}

.modal p {
    font-size:12px;
    color:var(--muted);
    margin:11px 0;
    line-height:1.8
}

.modal h3 {
    font-size:13px;
    margin:24px 0 11px
}

.modal pre {
    font:11px/1.75 var(--mono);
    white-space:pre-wrap;
    overflow-wrap:anywhere;
    padding:15px;
    background:var(--wall);
    border:1px solid var(--line);
    border-radius:7px;
    max-height:40vh;
    overflow:auto
}

.modal .message-full {
    font:13px/1.8 var(--body);
    unicode-bidi:plaintext
}

.modal details summary {
    font-size:11px;
    cursor:pointer;
    color:var(--accent);
    margin:14px 0
}

.modal .button-row {
    margin-bottom:0
}

.modal .about {
    margin-top:22px;
    padding:14px 16px;
    border:1px solid var(--line);
    border-radius:12px;
    background:var(--surface-2)
}

.modal .about h3.eyebrow {
    margin:0 0 4px
}

.modal .about .about-credit {
    margin:0 0 11px;
    font-size:13px;
    color:var(--text);
    line-height:1.5
}

.about-links {
    display:flex;
    flex-wrap:wrap;
    gap:7px
}

.about-link {
    padding:5px 11px;
    border:1px solid var(--line);
    border-radius:999px;
    background:var(--surface);
    color:var(--text);
    font-size:11px;
    font-weight:600;
    text-decoration:none
}

.about-link:hover {
    background:var(--surface-3);
    text-decoration:none
}

.about-link:focus-visible {
    outline:2px solid var(--accent);
    outline-offset:2px
}

.about-link.support {
    color:var(--accent);
    border-color:var(--accent);
    background:var(--accent-soft)
}

.checkbox-line {
    display:flex;
    align-items:flex-start;
    gap:9px;
    font-size:12px;
    margin:13px 0;
    line-height:1.7
}

.checkbox-line input {
    accent-color:var(--accent);
    margin-top:4px
}

.source-picker {
    max-height:290px;
    overflow:auto;
    border-block:1px solid var(--line);
    padding:9px 0;
    margin:14px 0
}

.empty-state {
    padding:30px 8px;
    text-align:center;
    color:var(--muted);
    font-size:12px;
    line-height:1.8
}

.empty-state strong {
    display:block;
    color:var(--text);
    font-size:13px;
    margin-bottom:8px
}

.toast {
    position:fixed;
    z-index:1000;
    bottom:20px;
    left:50%;
    transform:translateX(-50%);
    padding:11px 18px;
    border:1px solid var(--line);
    border-radius:9px;
    background:var(--surface-3);
    box-shadow:var(--shadow);
    font-size:12px;
    max-width:calc(100vw - 30px)
}

.progress-status {
    position:fixed;
    z-index:1100;
    top:12px;
    left:50%;
    transform:translateX(-50%);
    padding:10px 18px;
    background:var(--surface-3);
    border:1px solid var(--accent);
    border-radius:9px;
    font-size:12px;
    max-width:calc(100vw - 30px)
}

.skip-link {
    position:fixed;
    top:-100px;
    left:10px;
    z-index:2000;
    background:var(--surface);
    padding:12px
}

.skip-link:focus {
    top:10px
}

.noscript {
    position:fixed;
    bottom:0;
    left:0;
    right:0;
    background:var(--surface);
    padding:20px;
    color:var(--danger)
}

.muted {
    color:var(--muted)
}

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

.row-between p {
    margin:0
}

@media(min-width:1700px) {
    .shell {
        grid-template-columns:390px minmax(0,1fr)
    }

    .message-text {
        font-size:14px
    }

    .conversation-header {
        padding-block:20px
    }

    .messages {
        padding-inline:8%
    }

    .chat-item {
        min-height:97px
    }

}

@media(max-width:1250px) {
    .shell {
        grid-template-columns:315px minmax(0,1fr)
    }

    .shell.with-drawer {
        padding-right:350px
    }

    .drawer {
        width:350px
    }

    .conversation-header {
        padding:15px 18px;
        gap:10px
    }

    .conversation-actions {
        gap:0
    }

    .conversation-actions .icon-button {
        width:34px
    }

    .messages {
        padding-inline:22px
    }

    .message-bubble {
        max-width:89%
    }

    .library-header {
        padding-inline:16px
    }

    .conversation-heading p {
        max-width:180px;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap
    }

}

@media(max-width:1099px) {
    .shell.with-drawer {
        padding-right:0
    }

    .drawer {
        width:390px;
        box-shadow:var(--shadow)
    }

    .drawer[open] {
        height:100dvh;
        max-height:100dvh
    }

    .drawer-body {
        padding:22px
    }

    .conversation-heading p {
        max-width:none
    }

    .message-bubble {
        max-width:84%
    }

}

@media(max-width:720px) {
    .shell {
        grid-template-columns:minmax(0,1fr)
    }

    .library {
        grid-column:1
    }

    .reader {
        display:none
    }

    .shell.reading {
        display:block;
        border:0
    }

    .shell.reading .library {
        display:none
    }

    .shell.reading .reader {
        display:flex;
        height:100dvh
    }

    .library-header {
        padding:9px 10px 9px 14px
    }

    .library-header h1 {
        font-size:18px
    }

    .chat-item {
        padding:18px 14px;
        min-height:91px
    }

    .chat-top strong {
        font-size:14px
    }

    .chat-preview {
        font-size:12px
    }

    .chat-top time {
        font-size:10px
    }

    .mobile-back {
        display:inline-flex;
        width:29px
    }

    .conversation-header {
        min-height:76px;
        padding:12px 10px;
        gap:8px
    }

    .conversation-avatar {
        width:36px;
        height:36px;
        border-radius:12px;
        font-size:12px
    }

    .conversation-heading h2 {
        font-size:14px
    }

    .conversation-heading p {
        font-size:9px;
        max-width:160px;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap
    }

    .conversation-actions {
        gap:0
    }

    .conversation-actions .icon-button {
        width:31px;
        height:36px
    }

    .conversation-actions svg {
        width:18px;
        height:18px
    }

    .conversation-strip {
        padding:5px 18px;
        min-height:38px
    }

    .messages {
        padding:3px 17px 24px
    }

    .message-bubble {
        max-width:91%;
        padding:8px 11px 6px
    }

    .message-text {
        font-size:13px
    }

    .message-actions {
        opacity:1
    }

    .message-action {
        width:28px;
        height:26px
    }

    .message-meta {
        font-size:9px
    }

    .reader-footer {
        padding:8px 15px 10px
    }

    .time-controls {
        margin-top:0
    }

    .reader-status {
        font-size:9px
    }

    .reader-status .text-button {
        font-size:10px
    }

    .drawer {
        width:100%;
        max-width:100vw;
        border:0
    }

    .drawer-header {
        min-height:84px;
        padding:20px
    }

    .drawer-tabs button {
        font-size:12px;
        min-height:47px
    }

    .drawer-tabs {
        gap:18px
    }

    .drawer-body {
        padding:22px
    }

    .modal {
        padding:20px;
        max-height:calc(100dvh - 24px);
        border-radius:12px
    }

    .welcome {
        padding:25px
    }

    .welcome h2 {
        font-size:38px
    }

    .welcome-actions {
        margin-top:24px
    }

    .latest-button {
        right:15px;
        bottom:14px
    }

    .media-thumb {
        height:130px
    }

    .conversation-strip .text-button {
        max-width:55%;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap
    }

    .system-message {
        max-width:95%;
        font-size:10px
    }

}

@media(max-width:375px) {
    .conversation-avatar {
        display:none
    }

    .conversation-heading p {
        max-width:125px
    }

    .reader-status>span:first-child {
        display:none
    }

    .reader-status {
        font-size:8px
    }

    .message-bubble {
        max-width:94%
    }

}

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

}

@media print {
    .library,.drawer,.reader-footer,.conversation-actions,.message-actions,.latest-button,.conversation-strip {
        display:none!important
    }

    .shell,.reader,.message-region,.messages {
        display:block;
        height:auto;
        overflow:visible
    }

    .shell {
        padding:0!important
    }

    .message-bubble {
        break-inside:avoid
    }

    .reader::before {
        content:"Chronicle: only the currently rendered message window is printed. Export JSONL or CSV for the complete conversation.";
        display:block;
        padding:15px;
        font-size:12px
    }

    .message-text {
        color:#000
    }

    .message-bubble {
        background:#fff!important;
        border:1px solid #aaa
    }

}

/* Accessible metric layout and native file thumbnails. */ .heatmap {
    display:grid;
    grid-template-columns:repeat(24,minmax(5px,1fr));
    gap:3px;
    min-width:240px
}

.heatmap>span {
    height:11px;
    background:var(--surface-3);
    border-radius:2px
}

.participant>.row-between {
    grid-column:1/-1
}

.bar-fill {
    display:block
}

.media-card>img.media-thumb {
    object-fit:cover
}

.media-card>.small {
    padding:0 9px 9px;
    font-size:10px
}

.small {
    font-size:11px
}

.chat-top>.small {
    font-size:9px;
    white-space:nowrap
}

.search-result>span {
    display:block;
    margin:5px 0
}

.search-result>.row-between {
    display:flex
}

.search-result {
    overflow-wrap:anywhere
}

.form-stack form {
    display:grid;
    gap:12px
}

/* Reading type stays comfortable; metadata remains subordinate. */ .message-text {
    font-size:14px;
    line-height:1.65
}

.message-sender {
    font-size:11px
}

.message-bubble {
    padding:10px 14px 7px
}

.chat-preview {
    font-size:12px
}

.chat-flags:empty {
    display:none
}

.chat-item {
    min-height:91px
}

.chat-top strong {
    font-size:14px
}

.chat-flags {
    font-size:9px
}

.drawer-body {
    font-size:13px
}

.drawer-body .section-note {
    font-size:12px
}

.form-label {
    font-size:12px
}

.drawer-tabs button {
    font-size:12px
}

.source-card .source-meta {
    font-size:11px
}

.source-card .text-button {
    font-size:12px
}

.source-card code {
    font-size:10px
}

.modal p {
    font-size:13px
}

.metric-grid span {
    font-size:12px
}

.participant {
    font-size:12px
}