html {
    box-sizing: border-box;
    background: var(--bg-color, #000);
    /* clip, not hidden: hidden is a "scrollable overflow" value even with
       no visible scrollbar, and setting only one axis computes the other
       (overflow-y, left at its default visible) to auto too - both
       together turn html into its own scroll container, which breaks
       position: sticky on descendants (.topbar) since it then sticks
       relative to that inert box instead of the real page scroll. clip
       suppresses the horizontal overflow without creating a scroll
       container at all. */
    overflow-x: clip;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

html,
body {
    scrollbar-width: none;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

body {
    margin: 0;
    padding: 32px;
    background: var(--bg-color, #000);
    color: var(--fg-color, #fff);
    font-family:
        "IBM Plex Mono",
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas,
        "Liberation Mono",
        "Courier New",
        monospace;
    font-size: 28px;
    line-height: 1.65;
    /* clip, not hidden - see the matching note on html above. This one
       actually mattered more in practice: with body computing overflow-y
       to auto, body becomes its own internal scroll container, so the
       page scrolls inside body's box instead of the window/document -
       window.scrollY then never changes, which is why the topbar's
       scroll-hide listener (window's 'scroll' event) never fired at
       all. */
    overflow-x: clip;
}

:root {
    --input-font-size: 2.3rem;
    --input-line-height: 1.5;
    --section-gap: 48px;
    --row-font-size: 1.85rem;
}

.content {
    width: 100%;
    margin: 0;
}

a {
    color: inherit;
    text-decoration: underline;
}

a:hover {
    text-decoration: none;
}

.big-links a {
    display: block;
    margin-bottom: 20px;
    font-size: 2rem;
}

.authform {
    margin-top: var(--section-gap);
    max-width: 20em;
}

.authform label {
    display: block;
    margin-bottom: 28px;
}

.authform label span {
    display: block;
    color: var(--fg-muted, #888);
    font-style: italic;
    margin-bottom: 8px;
}

.authform input {
    display: block;
    width: 100%;
    border: none;
    border-bottom: 1px solid #333;
    padding: 4px 0;
    outline: none;
}

.authform input:focus {
    border-bottom-color: #fff;
}

.authform button {
    margin-top: 8px;
    border: none;
    border-bottom: 1px solid #666;
    padding: 4px 0;
    text-decoration: none;
}

.authform button:hover {
    border-bottom-color: #fff;
}

.reset-form {
    display: flex;
    flex: 0 0 auto;
    align-items: baseline;
    gap: 12px;
}

.reset-form input {
    width: 10em;
    border: none;
    border-bottom: 1px solid #333;
    padding: 0 0 2px;
}

.reset-form button {
    border: none;
    border-bottom: 1px solid #666;
    padding: 0 0 2px;
    background: none;
    color: inherit;
    font: inherit;
}

.reset-form button:hover {
    border-bottom-color: #fff;
}

h1,
h2,
h3 {
    font-weight: bold;
    line-height: 1.2;
}

pre {
    white-space: pre-wrap;
    font: inherit;
}

input,
button,
textarea,
select {
    font: inherit;
    background: var(--bg-color, #000);
    color: inherit;
}

button {
    cursor: pointer;
}

.error {
    color: #ff9999;
}

.notice {
    color: #99ff99;
}

.muted {
    color: var(--fg-muted, #777);
}

/* =======================================================
   Topbar
   ======================================================= */

.topbar {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: var(--section-gap);
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border-color, #222);
    font-size: 2rem;
    font-style: italic;
    position: sticky;
    top: 0;
    z-index: 40;
    background: var(--bg-color, #000);
    transition: transform 0.2s ease;
}

.topbar.topbar-hidden {
    transform: translateY(-100%);
}

.topbar-seg {
    border: none;
    background: none;
    padding: 0;
    font: inherit;
    font-size: inherit;
    font-style: italic;
    font-weight: bold;
    cursor: pointer;
}

.topbar-app {
    color: #7fe28a;
}

.topbar-switcher {
    color: var(--fg-color, #fff);
}

.topbar-seg:hover {
    text-decoration: underline;
}

/* Full-screen menu (app / group / workspace pickers) */

.menu-overlay {
    position: fixed;
    inset: 0;
    background: var(--bg-color, #000);
    z-index: 50;
    /* Matches body's own padding exactly (see body rule above) so the
       menu's left edge lines up with the page content behind it instead
       of appearing to shift when the menu opens. Only .menu-list (below)
       scrolls - the header and footer stay pinned in place. */
    padding: 32px;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
}

.menu-overlay.hidden {
    display: none;
}

.menu-header {
    flex: 0 0 auto;
}

.menu-title {
    font-size: var(--row-font-size, 1.4rem);
    font-style: italic;
    margin: 16px 0;
}

.menu-search {
    display: block;
    width: 100%;
    border: none;
    border-bottom: 1px solid #222;
    background: none;
    color: var(--fg-color, #fff);
    font: inherit;
    font-size: var(--row-font-size, 1.4rem);
    padding: 8px 0 16px;
}

.menu-search:focus {
    outline: none;
}

.menu-list {
    flex: 1 1 auto;
    /* Without this a flex child won't shrink below its content size, so
       overflow-y here would never actually kick in. */
    min-height: 0;
    overflow-y: auto;
    /* Setting only overflow-y computes overflow-x to auto too (CSS
       spec: an explicit non-visible value on one axis makes "visible"
       on the other compute to "auto" instead) - without this the menu
       became horizontally scrollable/pannable for no visible reason. */
    overflow-x: hidden;
}

.menu-footer {
    flex: 0 0 auto;
}

.menu-form {
    display: contents;
}

.menu-item {
    display: block;
    width: 100%;
    text-align: left;
    border: none;
    border-bottom: 1px solid #222;
    background: none;
    color: var(--fg-color, #fff);
    font: inherit;
    font-size: var(--row-font-size, 1.4rem);
    font-style: normal;
    text-decoration: none;
    padding: 16px 0;
    cursor: pointer;
}

.menu-item:hover {
    color: var(--fg-color, #fff);
    background: #111;
}

.menu-item.active {
    color: #7fa8e2;
}

.menu-item.hidden {
    display: none;
}

.menu-item.menu-home {
    font-style: italic;
    font-weight: 700;
}

.menu-logout {
    border-bottom: none;
}

.menu-group {
    border-bottom: 1px solid #222;
}

.menu-group.hidden {
    display: none;
}

.menu-group summary {
    list-style: none;
    cursor: pointer;
}

.menu-group summary::-webkit-details-marker {
    display: none;
}

.menu-group-summary {
    border-bottom: none;
    display: flex;
    align-items: baseline;
}

.menu-group-summary::before {
    /* A trailing space inside content wasn't enough on its own: making
       the summary a flex container blockifies this pseudo-element into
       a flex item, and a block-level box's own trailing whitespace is
       insignificant - it gets trimmed at the box edge instead of
       rendered. An explicit margin can't be trimmed away like that. */
    content: "+";
    margin-right: 0.5em;
    color: var(--fg-muted, #888);
}

.menu-group[open] .menu-group-summary::before {
    content: "−";
}

.menu-group-tick {
    margin-left: auto;
    color: #7fa8e2;
}

.menu-group-workspaces .menu-item {
    padding-left: 24px;
}

.menu-close {
    display: block;
    width: 100%;
    text-align: left;
    border: none;
    background: none;
    color: var(--fg-color, #fff);
    font: inherit;
    font-size: 1.8rem;
    line-height: 1;
    cursor: pointer;
    padding: 4px 0;
}

.menu-close:hover {
    background: #111;
}

.menu-checklist {
    display: flex;
    flex-direction: column;
}

.menu-toggle {
    display: flex;
    align-items: center;
    gap: 12px;
}

.menu-toggle input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.menu-toggle:has(input:not(:checked)) {
    text-decoration: line-through;
    opacity: 0.5;
}

/* =======================================================
   Settings
   ======================================================= */

.settings-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    margin-bottom: var(--section-gap);
    padding-bottom: 16px;
    border-bottom: 1px solid #222;
}

.settings-nav a {
    color: var(--fg-muted, #666);
    text-decoration: none;
}

.settings-nav a:hover {
    color: var(--fg-color, #fff);
}

.settings-nav a.active {
    color: var(--fg-color, #fff);
    text-decoration: underline;
}

.section-sep {
    border: none;
    border-top: 1px solid #222;
    margin: var(--section-gap) 0;
}

.choice-group {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin: var(--section-gap) 0;
}

.choice {
    flex: 1 1 220px;
}

.choice button {
    display: block;
    width: 100%;
    text-align: left;
    padding: 20px;
    border: 1px solid #333;
    background: none;
    color: var(--fg-color, #fff);
}

.choice button:hover {
    border-color: #666;
}

.choice button strong {
    display: block;
    margin-bottom: 6px;
}

.choice button .muted {
    display: block;
    font-size: 0.85em;
}

/* =======================================================
   Terminal
   ======================================================= */

#screen {
    width: 100%;
    margin: 0;
}

#prompt {
    position: relative;
}

#field {
    position: relative;
    border-left: 2px solid transparent;
    padding-left: 0;
    transition: padding-left 150ms ease, border-color 150ms ease;
}

body.editing #field {
    border-left-color: #333;
    padding-left: 16px;
}

#query {
    position: relative;
    z-index: 2;
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    border: none;
    box-shadow: none;
    resize: none;
    overflow: hidden;
    background: transparent;
    color: transparent;
    caret-color: transparent;
    outline: none;
    font: inherit;
    font-size: var(--input-font-size);
    line-height: var(--input-line-height);
    text-align: left;
    -webkit-appearance: none;
    appearance: none;
}

#query::placeholder {
    color: var(--fg-faint, #4a4a4a);
}

#mirror {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    white-space: pre-wrap;
    word-wrap: break-word;
    font-size: var(--input-font-size);
    line-height: var(--input-line-height);
    pointer-events: none;
}

#mBefore,
#mAfter {
    color: var(--fg-color, #fff);
}

#field.stale #mBefore,
#field.stale #mAfter {
    color: var(--fg-faint, #4a4a4a);
}

#mGhost {
    color: var(--fg-faint, #4a4a4a);
}

#mCursor {
    background: var(--fg-color, #d9d9d9);
    color: var(--bg-color, #000);
    border-radius: 1px;
}

#field:not(.focused) #mCursor,
#mCursor.hidden {
    background: transparent;
    color: transparent;
}

#selected {
    margin-top: var(--section-gap);
}

#selected a {
    margin-right: 20px;
    color: var(--fg-muted, #ccc);
}

#selected a:hover {
    color: var(--fg-color, #fff);
}

#results {
    margin-top: var(--section-gap);
    padding-bottom: 80px;
}

#applist {
    margin-top: var(--section-gap);
    padding-bottom: 80px;
}

#applist a.hidden {
    display: none;
}

#selected + #results {
    margin-top: 14px;
}

.record {
    display: flex;
    align-items: baseline;
    gap: 16px;
    margin-bottom: 14px;
    text-decoration: none;
    white-space: nowrap;
}

.record:hover .record-text {
    text-decoration: underline;
}

.record-type {
    flex: 0 0 auto;
    width: 4ch;
    text-transform: uppercase;
}

.record-type-todo {
    color: #6fb3ff;
}

.record-type-note {
    color: #7fe28a;
}

.record-type-evnt {
    color: #ff8f8f;
}

.record-title.record-type-dir {
    color: #f2d94e;
    font-weight: bold;
}

.record-title.record-type-file {
    color: var(--fg-color, #fff);
    font-weight: normal;
}


#breadcrumbs {
    margin-top: var(--section-gap);
    color: var(--fg-muted, #888);
    font-size: 0.9em;
}

#breadcrumbs .crumb {
    color: inherit;
    text-decoration: none;
}

#breadcrumbs .crumb:hover {
    text-decoration: underline;
}

#breadcrumbs .crumb:last-child {
    color: var(--fg-color, #fff);
}

#breadcrumbs .crumb-sep {
    margin: 0 6px;
    color: var(--fg-faint, #555);
}

.record-text {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.record-dots {
    flex: 1 1 0;
    min-width: 20px;
    align-self: center;
    overflow: hidden;
    white-space: nowrap;
    letter-spacing: .03em;
    color: var(--fg-faint, #3a3a3a);
    position: relative;
    top: .2em;
}

.record-dots::before {
    content: ". . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .";
}

.record-meta {
    flex: 0 1 auto;
    max-width: 45%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--fg-faint, #555);
    text-align: right;
}

.record-origin {
    color: #7fa8e2;
    margin-right: 10px;
}

/* Result cards - stacked layout (type + title/preview + wrapping
   metadata) instead of a single truncated line, so a title, tags, and
   metadata can all actually fit on a narrow screen. */

.record-card {
    display: block;
    padding: 14px 0;
    border-bottom: 1px solid #222;
    text-decoration: none;
    color: inherit;
}

.record-card:hover .record-title,
.record-card:hover .record-preview:not(.faint) {
    text-decoration: underline;
}

.record-head {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.record-title {
    font-weight: bold;
    font-size: var(--row-font-size);
    color: var(--fg-color, #fff);
}

.record-origin {
    /* Only present on a merged multiview result (several workspaces'
       results shown together) - marks which one this one came from, the
       same way the old Documents app labeled entries by origin
       workspace. */
    font-size: 0.7em;
    font-style: italic;
    color: var(--fg-muted, #888);
}

.record-preview {
    margin-top: 4px;
    color: var(--fg-muted, #aaa);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.record-preview.primary {
    /* No title above it, so this line IS the note's content, not a
       secondary preview snippet - render at full strength instead of
       the muted gray used when it's sitting under a bold title. */
    color: var(--fg-color, #fff);
    font-size: var(--row-font-size);
    -webkit-line-clamp: 3;
}

.record-preview.faint {
    color: var(--fg-faint, #555);
    font-style: italic;
}

.record-meta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    font-size: 0.8em;
    color: var(--fg-muted, #666);
}

.record-tag {
    color: #7fa8e2;
}

.record-id {
    /* One uniform color for the whole metadata blob, not a rainbow of
       per-item colors - distinct metadata items already read as distinct
       because they're semicolon-separated, they don't also need to be
       color-coded. */
    color: var(--fg-faint, #555);
}

.record-path {
    margin-top: 4px;
    font-size: 0.8em;
    color: var(--fg-faint, #555);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.message {
    margin: var(--section-gap) 0 0;
    font-style: italic;
    color: var(--fg-muted, #888);
    white-space: pre-wrap;
}

.message.error {
    color: #ff9999;
}

.message.error a {
    color: inherit;
}

.message.toast {
    animation: message-pop-in 200ms ease-out;
}

.message.toast.dismissing {
    opacity: 0;
    transition: opacity 600ms ease-in;
}

@keyframes message-pop-in {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

.help-card {
    margin: var(--section-gap) 0 0;
}

.help-intro {
    color: var(--fg-muted, #888);
    line-height: 1.5;
    margin: 0 0 16px;
}

.help-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 0;
    border-bottom: 1px solid #222;
}

.help-cmd {
    color: #f2d94e;
    font-weight: bold;
}

.help-desc {
    color: var(--fg-muted, #888);
}

/* =======================================================
   Chat - flat black/white log, no bubbles, ported from the
   user's legacy single-room chat design. Fixed to the viewport height
   (like the legacy design) - only the message log scrolls, the input
   stays pinned at the bottom of the screen.
   ======================================================= */

body.chat {
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

body.chat .topbar {
    flex: 0 0 auto;
}

#chat-page {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

#chat-messages {
    flex: 1 1 auto;
    overflow-y: auto;
    scrollbar-width: none;
    padding-bottom: 20px;
}

#chat-messages::-webkit-scrollbar {
    display: none;
}

.chat-message {
    margin-bottom: 26px;
}

.chat-meta {
    font-size: 0.7em;
    margin-bottom: 2px;
}

.chat-name {
    font-weight: bold;
}

.chat-time {
    color: var(--fg-muted, #666);
    margin-left: 0.7em;
}

.chat-body {
    color: var(--fg-color, #fff);
    white-space: pre-wrap;
    overflow-wrap: break-word;
}

#chat-form {
    flex: 0 0 auto;
    border-top: 1px solid var(--border-color, #222);
    padding: 12px 0;
}

#chat-input {
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    border: none;
    outline: none;
    resize: none;
    overflow: hidden;
    background: transparent;
    color: var(--fg-color, #fff);
    font: inherit;
    font-size: inherit;
    line-height: 1.65;
    min-height: 1.65em;
    max-height: 30vh;
}

/* =======================================================
   File view
   ======================================================= */

.editor-topbar {
    /* Matches the actual file text size (body's font-size) rather than
       the 1rem/16px root-relative size that made this look small next to
       the content - .topbar's own font-size (2rem, for the app/switcher
       labels) isn't right for editor either, so this can't just fall
       through to that. */
    font-size: inherit;
    font-style: normal;
    align-items: center;
}

.editor-action {
    /* Bare monospace letters, not a boxed button - the | dividers between
       each one (and before the filename) are what demarcate the click
       areas, not a background/border. Padding still gives each one a
       real tap target without drawing a visible box. */
    padding: 0.2em 0.3em;
    border: none;
    background: none;
    color: var(--fg-color, #fff);
    text-transform: uppercase;
    font: inherit;
    font-weight: bold;
    line-height: 1;
    cursor: pointer;
}

.editor-action:active {
    opacity: 0.6;
}

.editor-action.reading {
    color: #7fe28a;
}

.editor-action.writing {
    color: #ff8f8f;
}

.editor-action.locked {
    color: var(--fg-faint, #666);
    cursor: not-allowed;
}

.editor-divider {
    flex: 0 0 auto;
    color: var(--fg-muted, #888);
    user-select: none;
}

.editor-filename-wrap {
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none;
}

.editor-filename-wrap::-webkit-scrollbar {
    display: none;
}

.editor-filename {
    color: var(--fg-color, #fff);
}

.editor-save-status {
    flex: 0 0 auto;
    font-style: italic;
    font-size: 0.6em;
    color: var(--fg-muted, #888);
    margin-left: 8px;
}

.linkbtn {
    padding: 0;
    border: none;
    background: none;
    text-decoration: underline;
    color: var(--fg-color, #fff);
    font: inherit;
    font-size: inherit;
    cursor: pointer;
}

.linkbtn:hover {
    text-decoration: none;
}

#fileread {
    margin: 0;
    width: 100%;
    overflow-wrap: break-word;
    word-break: break-word;
    /* Disables double-tap-to-zoom so a double-tap here reaches our own
       dblclick handler (starts writing) instead of the browser zooming. */
    touch-action: manipulation;
}

.line.hl {
    /* Flashes twice (inverted from the current theme - fg becomes the
       highlight background, bg becomes the text - instead of a fixed
       yellow, so it's always readable against whatever background the
       user picked) then settles back to plain text. Just enough to catch
       your eye when landing here from a search result, not a permanent
       marker that sits there for as long as the file stays open. */
    display: inline-block;
    width: 100%;
    animation: hl-flash 1.4s ease-in-out 2;
}

@keyframes hl-flash {
    0%, 100% {
        background: transparent;
        color: inherit;
    }
    25%, 75% {
        background: var(--fg-color, #f2d94e);
        color: var(--bg-color, #000);
    }
}

#taWrap {
    position: relative;
}

#filecontent {
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    border: none;
    outline: none;
    resize: none;
    overflow: hidden;
    background: transparent;
    color: var(--fg-color, #fff);
    font: inherit;
    line-height: 1.65;
}

#cursormeasure {
    position: absolute;
    top: 0;
    left: 0;
    visibility: hidden;
    white-space: pre-wrap;
    word-wrap: break-word;
    margin: 0;
}

#blockcursor {
    position: absolute;
    display: none;
    background: #d9d9d9;
    mix-blend-mode: difference;
    pointer-events: none;
}

#helpview div {
    margin-bottom: 16px;
}

#helpview .key {
    color: #f2d94e;
    display: inline-block;
    min-width: 3em;
}

#editorpane {
    padding-bottom: 2.5em;
}

/* =======================================================
   Conflict resolution
   ======================================================= */

#conflicts h1 {
    font-size: 1.6rem;
    font-style: italic;
    margin: 0 0 12px;
}

.conflict-file {
    margin: var(--section-gap) 0 0;
    padding-bottom: var(--section-gap);
    border-bottom: 1px solid var(--border-color, #222);
}

.conflict-path {
    font-weight: bold;
    margin-bottom: 12px;
}

.conflict-choice {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 10px 0 6px;
    cursor: pointer;
}

.conflict-content {
    max-height: 220px;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-word;
    background: rgba(127, 127, 127, 0.08);
    border: 1px solid var(--border-color, #222);
    border-radius: 4px;
    padding: 10px;
    margin: 0;
    font-size: 0.9rem;
    color: var(--fg-muted, #aaa);
}

.conflict-resolve {
    margin-top: var(--section-gap);
    padding: 10px 24px;
    background: none;
    border: 1px solid var(--fg-color, #fff);
    color: var(--fg-color, #fff);
    font: inherit;
}

/* =======================================================
   Mobile
   ======================================================= */

@media (max-width: 640px) {

    body {
        padding: 16px;
        font-size: 19px;
    }

    :root {
        --input-font-size: 1.6rem;
        --row-font-size: 1.25rem;
        /* Every gap that uses --section-gap (topbar, results, applist,
           message, help-card, selected, section-sep, choice-group...)
           shrinks together on mobile - overriding it individually per
           element let them drift out of sync with each other. */
        --section-gap: 32px;
    }

    .topbar {
        gap: 8px;
        font-size: 1.3rem;
    }

    .editor-topbar {
        /* .topbar's own mobile font-size (above) would otherwise win here
           too (same specificity, declared later) - editor still wants to
           match body's mobile font-size, not that fixed 1.3rem. */
        font-size: inherit;
    }

    .menu-overlay {
        padding: 16px;
    }

    .record {
        gap: 10px;
    }

    .record-type {
        width: 3.4ch;
    }

    .record-meta {
        max-width: 38%;
    }

    .record-dots {
        letter-spacing: 0;
    }

    .record-card {
        padding: 10px 0;
    }

    .authform {
        max-width: 100%;
    }
}