html {
    box-sizing: border-box;
    background: var(--bg-color, #000);
    overflow-x: hidden;
}

*,
*::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;
    overflow-x: hidden;
}

: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: flex-start;
    gap: 10px;
    margin-bottom: var(--section-gap);
    font-size: 2rem;
    font-style: italic;
}

.topbar-sep {
    color: var(--fg-faint, #555);
    font-style: normal;
}

body.editor .topbar {
    display: none;
}

.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-group {
    color: var(--fg-color, #fff);
}

.topbar-workspace {
    color: #ffb347;
}

.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;
}

.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;
}

.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-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-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-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
   ======================================================= */

#editorbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 16px 32px;
    background: var(--bg-color, #000);
    border-bottom: 1px solid #222;
    font-size: 1rem;
    /* Hidden above the viewport by default - the immersive editor shows
       only the text itself. Pulling up while already at the top of the
       page (or scrolling back down) slides this in/out - see the
       pull-to-reveal JS in file.html. */
    transform: translateY(-100%);
    transition: transform 0.2s ease;
}

#editorbar.shown {
    transform: translateY(0);
}

#saveStatus {
    font-style: italic;
    color: var(--fg-muted, #888);
    margin-left: 8px;
}

#toggleEdit,
.linkbtn {
    padding: 0;
    border: none;
    background: none;
    text-decoration: underline;
    font: inherit;
    font-size: inherit;
    cursor: pointer;
}

#toggleEdit.reading {
    color: #7fe28a;
}

#toggleEdit.writing {
    color: #ff8f8f;
}

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

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

.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;
    }

    #editorbar {
        padding: 16px;
        gap: 16px;
    }

    :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;
    }

    .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%;
    }
}