:root {
    --bg-0: #fafafa;
    --bg-1: #ffffff;
    --bg-2: #eef2f7;
    --ink-0: #1d2633;
    --ink-1: #2f3e53;
    --ink-2: #68758a;
    --line: #b8c6d8;
    --line-soft: #c9d5e4;
    --accent: #4f97d6;
    --accent-strong: #3f83c0;
    --sidebar-bg: #f2f4f8;
    --sidebar-ink: #243246;
    --sidebar-muted: #6a788f;
    --surface-0: #ffffff;
    --surface-1: #f6f8fb;
    --surface-2: #edf2f8;
    --input-bg: #ffffff;
    --overlay-scrim: rgba(10, 16, 26, 0.56);
    --hover-accent-bg: rgba(79, 151, 214, 0.14);
    --hover-accent-line: rgba(79, 151, 214, 0.46);
    --warn: #c2410c;
    --radius-lg: 18px;
    --radius-md: 12px;
    --radius-sm: 8px;
    --shadow-md: 0 20px 48px rgba(17, 18, 19, 0.12);
}

:root.theme-dark {
    --bg-0: #10151d;
    --bg-1: #161d27;
    --bg-2: #1d2733;
    --ink-0: #ecf2fb;
    --ink-1: #ced9e8;
    --ink-2: #9caec4;
    --line: #44536a;
    --line-soft: #3b495f;
    --accent: #78b5e6;
    --accent-strong: #5fa5df;
    --sidebar-bg: #161e29;
    --sidebar-ink: #e4edf9;
    --sidebar-muted: #99a9bf;
    --surface-0: #1a2330;
    --surface-1: #202b39;
    --surface-2: #273546;
    --input-bg: #1a2532;
    --overlay-scrim: rgba(3, 7, 12, 0.72);
    --hover-accent-bg: rgba(120, 181, 230, 0.2);
    --hover-accent-line: rgba(120, 181, 230, 0.5);
}

* {
    box-sizing: border-box;
}

html,
body {
    height: 100%;
    margin: 0;
    color: var(--ink-0);
    font-family: "IBM Plex Sans", sans-serif;
    background: var(--bg-0);
}

h1,
h2,
h3 {
    font-family: "IBM Plex Sans", sans-serif;
    font-weight: 600;
    margin: 0;
}

.hidden {
    display: none !important;
}

.sidebar-dropdown-menu,
.grid-control-menu,
.context-menu,
.column-editor-popover {
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.sidebar-dropdown-menu.is-open,
.grid-control-menu.is-open,
.context-menu.is-open,
.column-editor-popover.is-open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.picker-modal,
.overlay-modal {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.picker-modal.is-open,
.overlay-modal.is-open {
    opacity: 1;
    pointer-events: auto;
}

.picker-backdrop,
.overlay-backdrop {
    opacity: 0;
    transition: opacity 0.2s ease;
}

.picker-card,
.overlay-card {
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.picker-modal.is-open .picker-backdrop,
.overlay-modal.is-open .overlay-backdrop,
.picker-modal.is-open .picker-card,
.overlay-modal.is-open .overlay-card {
    opacity: 1;
}

.picker-modal.is-open .picker-card,
.overlay-modal.is-open .overlay-card {
    transform: translateY(0);
}

body.error-page {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.error-shell {
    display: grid;
    gap: 14px;
    justify-items: start;
    padding: 28px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--line);
    background: var(--surface-0);
}

.error-shell h1 {
    font-size: 2rem;
}

.error-shell p {
    margin: 0;
    color: var(--ink-2);
}

.auth-gate {
    min-height: 100%;
    display: flex;
    justify-content: center;
    padding: 34px 28px 46px;
    background:
        radial-gradient(circle at 6% -4%, rgba(221, 235, 251, 0.9), rgba(221, 235, 251, 0) 34%),
        radial-gradient(circle at 92% 6%, rgba(233, 241, 251, 0.88), rgba(233, 241, 251, 0) 36%),
        #f8fafc;
}

.landing-shell {
    width: min(1040px, 100%);
    display: grid;
    gap: 58px;
}

.landing-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.landing-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 1.08rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: #1b2b3e;
}

.landing-logo {
    width: 32px;
    height: 32px;
    border-radius: 7px;
}

.landing-login-link {
    color: #34495f;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.95rem;
    border-bottom: 1px solid transparent;
    transition: border-color 0.14s ease, color 0.14s ease;
}

.landing-login-link:hover {
    color: #15283c;
    border-color: rgba(21, 40, 60, 0.4);
}

.landing-main {
    display: grid;
    gap: 62px;
}

.landing-hero {
    width: min(740px, 100%);
    display: grid;
    gap: 16px;
}

.landing-kicker {
    margin: 0;
    color: #4f6178;
    font-size: 0.85rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    font-weight: 600;
}

.landing-hero h1 {
    font-size: clamp(2.2rem, 5.1vw, 4rem);
    line-height: 1.02;
    letter-spacing: -0.03em;
    color: #111f30;
}

.landing-subtitle {
    margin: 0;
    color: #42566d;
    font-size: clamp(1.05rem, 2vw, 1.25rem);
    line-height: 1.62;
    max-width: 62ch;
}

.landing-hero-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 8px;
}

.landing-cta-btn {
    border: 0;
    border-radius: 12px;
    background: #111f30;
    color: #f7f9fc;
    font: inherit;
    font-weight: 600;
    font-size: 0.97rem;
    padding: 12px 18px;
    cursor: pointer;
    transition: transform 0.14s ease, background 0.14s ease;
}

.landing-cta-btn:hover {
    background: #1c324a;
    transform: translateY(-1px);
}

.landing-note {
    margin: 0;
    font-size: 0.9rem;
    color: #607186;
}

.landing-features {
    display: grid;
    gap: 18px;
}

.landing-features h2 {
    font-size: clamp(1.25rem, 2.2vw, 1.8rem);
    letter-spacing: -0.01em;
    color: #16283c;
}

.landing-feature-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.landing-feature {
    border: 1px solid #d6dfeb;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.7);
    padding: 18px 18px 16px;
    box-shadow: 0 8px 24px rgba(18, 26, 36, 0.04);
}

.landing-feature h3 {
    margin-bottom: 8px;
    color: #182b40;
    font-size: 1.08rem;
    letter-spacing: -0.01em;
}

.landing-feature p {
    margin: 0;
    color: #50647a;
    line-height: 1.6;
}

.workspace-app {
    --sidebar-expanded-width: 280px;
    --sidebar-collapsed-width: 62px;
    min-height: 100%;
    display: grid;
    grid-template-columns: var(--sidebar-expanded-width) minmax(0, 1fr);
    transition: grid-template-columns 0.2s ease;
}

.workspace-sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    padding: 18px 16px;
    background: var(--sidebar-bg);
    border-right: 1px solid var(--line);
    color: var(--sidebar-ink);
    overflow: visible;
    z-index: 40;
    transition: padding 0.2s ease;
}

.mobile-sidebar-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1090;
    background: var(--overlay-scrim);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease;
    display: none;
}

.mobile-sidebar-backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
}

.workspace-app.sidebar-collapsed {
    grid-template-columns: var(--sidebar-collapsed-width) minmax(0, 1fr);
}

.workspace-app.sidebar-collapsed .workspace-sidebar {
    padding-left: 8px;
    padding-right: 8px;
}

.sidebar-rail-toggle {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    width: 20px;
    height: 34px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--sidebar-ink);
    font-size: 0.88rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 4;
    outline: none;
    box-shadow: none;
}

.sidebar-rail-toggle:hover {
    background: rgba(0, 0, 0, 0.05);
}

.sidebar-rail-toggle:focus,
.sidebar-rail-toggle:focus-visible {
    outline: none;
    box-shadow: none;
}

.workspace-app.sidebar-collapsed .sidebar-rail-toggle {
    left: 50%;
    right: auto;
    transform: translate(-50%, -50%);
}

.workspace-app.sidebar-collapsed .sidebar-user-row {
    grid-template-columns: 1fr;
    justify-items: center;
}

.workspace-app.sidebar-collapsed .user-menu-button,
.workspace-app.sidebar-collapsed .user-dropdown,
.workspace-app.sidebar-collapsed .recent-section,
.workspace-app.sidebar-collapsed .sidebar-divider,
.workspace-app.sidebar-collapsed .sidebar-foot {
    display: none !important;
}

.workspace-app.sidebar-collapsed .sidebar-head {
    justify-items: center;
}

.workspace-app.sidebar-collapsed .sidebar-new-wrap {
    width: 100%;
    display: flex;
    justify-content: center;
}

.workspace-app.sidebar-collapsed #newItemMenu.sidebar-dropdown-menu {
    left: calc(100% + 10px);
    right: auto;
    top: 0;
}

.workspace-app.sidebar-collapsed .primary-nav {
    justify-items: center;
}

.workspace-app.sidebar-collapsed .nav-item {
    width: 42px;
    min-width: 42px;
    justify-content: center;
    padding: 10px 0;
    gap: 0;
}

.workspace-app.sidebar-collapsed .nav-item > span:not(.sidebar-item-icon) {
    display: none;
}

.workspace-app.sidebar-collapsed .sidebar-item-icon {
    margin: 0;
}

.sidebar-head {
    position: relative;
    display: grid;
    gap: 10px;
}

.mobile-menu-btn {
    display: none;
}

.sidebar-user-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
}

.user-card {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
}

.user-menu-button {
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--sidebar-ink);
    padding: 4px;
    width: 100%;
    text-align: left;
    cursor: pointer;
}

.user-menu-button:hover {
    background: rgba(0, 0, 0, 0.05);
}

.sidebar-new-wrap {
    position: relative;
}

.new-plus-btn {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: 1px solid var(--line);
    background: var(--surface-1);
    color: var(--sidebar-ink);
    font-size: 1.3rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.new-plus-btn:hover {
    background: var(--surface-2);
}

.sidebar-dropdown-menu {
    margin-top: 6px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface-0);
    box-shadow: 0 14px 30px rgba(17, 18, 19, 0.14);
    padding: 6px;
    display: grid;
    gap: 4px;
}

.user-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    width: auto;
    z-index: 2300;
}

#newItemMenu.sidebar-dropdown-menu {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    min-width: 190px;
    z-index: 2300;
}

.sidebar-dropdown-title {
    font-size: 0.75rem;
    color: var(--sidebar-muted);
    padding: 3px 8px 5px;
    text-transform: none;
    letter-spacing: 0.01em;
}

.sidebar-menu-item {
    width: 100%;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--sidebar-ink);
    font: inherit;
    font-size: 0.9rem;
    text-align: left;
    padding: 8px 9px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.sidebar-menu-item:hover {
    background: rgba(0, 0, 0, 0.05);
}

.sidebar-menu-item.danger {
    color: #9f2d08;
}

.sidebar-item-icon {
    width: 16px;
    height: 16px;
    border: 1px solid var(--line);
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.58rem;
    font-weight: 700;
    line-height: 1;
    color: var(--ink-2);
    flex: 0 0 auto;
}

.icon-document::before {
    content: "D";
}

.icon-folder::before {
    content: "F";
}

.icon-collection::before {
    content: "C";
}

.icon-chat::before {
    content: "L";
}

.user-avatar {
    width: 44px;
    height: 44px;
    border-radius: 999px;
    object-fit: cover;
    border: 1px solid var(--line);
    background: var(--bg-2);
}

.user-name {
    font-size: 0.95rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-email {
    margin-top: 2px;
    font-size: 0.79rem;
    color: var(--sidebar-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.primary-nav {
    margin-top: 14px;
    display: grid;
    gap: 8px;
}

.sidebar-divider {
    margin: 16px 0 10px;
    border-bottom: 1px solid var(--line);
}

.recent-section h2 {
    font-size: 0.84rem;
    color: var(--sidebar-muted);
    text-transform: none;
    letter-spacing: 0.01em;
}

.recent-section {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1;
}

.recent-list {
    margin-top: 10px;
    display: grid;
    grid-auto-rows: max-content;
    align-content: start;
    gap: 6px;
    max-height: none;
    flex: 1;
    overflow: auto;
    padding-right: 0;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.recent-list::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

.recent-btn {
    width: 100%;
    display: block;
    flex: 0 0 auto;
    text-align: left;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--sidebar-ink);
    padding: 10px 11px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background 0.18s ease;
}

.recent-btn[draggable="true"] {
    cursor: grab;
}

.recent-btn:hover {
    background: rgba(0, 0, 0, 0.05);
}

.recent-btn .recent-meta {
    display: block;
    margin-top: 4px;
    font-size: 0.72rem;
    color: var(--sidebar-muted);
}

.sidebar-foot {
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid var(--line);
}

.theme-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--sidebar-ink);
    font-size: 0.82rem;
    cursor: pointer;
}

.theme-toggle input {
    appearance: none;
    width: 36px;
    height: 22px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--surface-2);
    position: relative;
    cursor: pointer;
    transition: background 0.15s ease;
}

.theme-toggle input::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--surface-0);
    transition: transform 0.15s ease;
}

.theme-toggle input:checked {
    background: var(--accent);
}

.theme-toggle input:checked::after {
    transform: translateX(14px);
}

.workspace-main {
    --main-inline-pad: 24px;
    padding: 24px var(--main-inline-pad) 20px;
    overflow: hidden;
    background: var(--bg-0);
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

.main-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 14px;
    margin-left: calc(-1 * var(--main-inline-pad));
    margin-right: calc(-1 * var(--main-inline-pad));
    padding-left: 8px;
    padding-right: var(--main-inline-pad);
}

.main-header h1 {
    font-size: 1.95rem;
    letter-spacing: -0.025em;
}

#pageTitle {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 38px;
}

#pageTitle.page-title-editable {
    cursor: text;
    padding-right: 1.2em;
}

#pageTitle.page-title-editable::after {
    content: "\270E";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.62em;
    color: var(--accent-strong);
    opacity: 0;
    transition: opacity 0.16s ease;
    pointer-events: none;
}

#pageTitle.page-title-editable:hover::after {
    opacity: 0.75;
}

#pageTitle.is-editing::after {
    opacity: 0;
}

.page-title-rename-input {
    border: 1px solid var(--line);
    border-radius: 9px;
    background: var(--input-bg);
    color: var(--ink-0);
    font: inherit;
    font-size: 1.95rem;
    letter-spacing: -0.025em;
    width: min(56vw, 720px);
    max-width: 100%;
    padding: 2px 10px;
}

.page-title-rename-input:focus {
    outline: none;
    border-color: var(--accent);
}

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

.sidebar-collapse-btn {
    width: 34px;
    min-width: 34px;
    height: 34px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    line-height: 1;
}

.sidebar-collapse-btn:disabled {
    opacity: 0.45;
    cursor: default;
}

.header-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

.panel {
    display: none;
    min-height: 0;
    flex: 1 1 auto;
}

.panel.is-active {
    display: block;
}

#chatPanel.panel.is-active {
    display: flex;
    flex-direction: column;
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
}

.document-viewer-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 14px;
    height: 100%;
    min-height: 0;
}

.document-viewer-main {
    min-width: 0;
    min-height: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 10px;
}

.document-viewer-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface-1);
    padding: 8px 10px;
}

.document-viewer-title {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--ink-1);
    font-size: 0.92rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.document-viewer-open-link {
    color: var(--accent-strong);
    text-decoration: none;
    font-size: 0.84rem;
    white-space: nowrap;
}

.document-viewer-open-link:hover {
    text-decoration: underline;
}

.document-viewer-frame-shell {
    position: relative;
    min-height: 0;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface-0);
    overflow: hidden;
}

.document-viewer-frame {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    min-height: calc(100vh - 240px);
    min-height: calc(100dvh - 240px);
    background: var(--surface-0);
}

.document-viewer-custom-preview {
    width: 100%;
    min-height: calc(100vh - 240px);
    min-height: calc(100dvh - 240px);
    max-height: calc(100vh - 240px);
    max-height: calc(100dvh - 240px);
    overflow: auto;
    padding: 12px;
    background: var(--surface-0);
    color: var(--ink-1);
}

.document-viewer-image-preview {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    border-radius: 10px;
}

.document-viewer-video-preview {
    display: block;
    width: min(100%, 980px);
    max-height: calc(100vh - 290px);
    max-height: calc(100dvh - 290px);
    margin: 0 auto;
    border-radius: 10px;
    background: #000;
}

.document-viewer-audio-shell {
    min-height: 100%;
    display: grid;
    place-items: center;
}

.document-viewer-audio-preview {
    width: min(100%, 720px);
}

.document-viewer-text-preview {
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.84rem;
    line-height: 1.5;
}

.document-viewer-preview-note {
    margin: 0 0 10px;
    color: var(--ink-2);
    font-size: 0.8rem;
}

.document-viewer-csv-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.document-viewer-csv-table th,
.document-viewer-csv-table td {
    border: 1px solid var(--line);
    padding: 6px 8px;
    text-align: left;
    vertical-align: top;
    font-size: 0.82rem;
    word-break: break-word;
    white-space: pre-wrap;
}

.document-viewer-csv-table th {
    position: sticky;
    top: 0;
    background: var(--surface-1);
    color: var(--ink-1);
    z-index: 1;
}

.document-viewer-unsupported {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 12px;
    padding: 18px;
    text-align: center;
    background: var(--surface-0);
}

.document-viewer-unsupported p {
    margin: 0;
    color: var(--ink-2);
}

.document-viewer-sidebar {
    min-height: 0;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface-1);
    padding: 12px;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 10px;
}

.document-viewer-sidebar h3 {
    font-size: 0.98rem;
    color: var(--ink-1);
}

.document-viewer-detail-body {
    min-height: 0;
    overflow: auto;
}

.table-shell {
    margin-top: 0;
    margin-left: calc(-1 * var(--main-inline-pad));
    margin-right: calc(-1 * var(--main-inline-pad));
    width: calc(100% + (var(--main-inline-pad) * 2));
    border-radius: 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.collection-grid-shell {
    position: relative;
    margin-top: 14px;
    overflow-y: auto;
    overflow-x: hidden;
    max-height: calc(100vh - 320px);
    max-height: calc(100dvh - 320px);
}

.collection-grid-shell.has-horizontal-overflow {
    overflow-x: auto;
}

.collection-grid-shell.is-drop-active {
    box-shadow: inset 0 0 0 2px var(--hover-accent-line);
    background: var(--hover-accent-bg);
}

.workspace-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
    background: transparent;
    border: 0;
}

.collection-table {
    table-layout: fixed;
    min-width: 100%;
    width: 100%;
}

.collection-table th {
    position: sticky;
    top: 0;
    z-index: 2;
    overflow: visible;
}

.collection-table th,
.collection-table td {
    min-width: 180px;
}

.collection-table th:nth-child(2),
.collection-table td:nth-child(2) {
    min-width: 280px;
}

.collection-table th.checkbox-col,
.collection-table td.checkbox-col {
    min-width: 44px;
    max-width: 44px;
}

.workspace-table th,
.workspace-table td {
    text-align: left;
    padding: 9px 12px;
    border-bottom: 1px solid var(--line);
    border-right: 1px solid var(--line);
    color: var(--ink-1);
    font-size: 0.93rem;
    vertical-align: middle;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background: transparent;
}

.workspace-table tbody td {
    padding-top: 9px;
    padding-bottom: 9px;
}

.workspace-table thead tr:first-child th {
    border-top: 1px solid var(--line);
}

.workspace-table th {
    font-size: 0.82rem;
    letter-spacing: 0.01em;
    text-transform: none;
    color: var(--ink-2);
    background: var(--bg-0);
}

.workspace-table tr > *:last-child {
    border-right: 0;
}

.workspace-table tbody tr:last-child td {
    border-bottom: 1px solid var(--line);
}

/* Non-collection tables: horizontal dividers only, with no top line. */
.workspace-table:not(.collection-table) thead tr:first-child th {
    border-top: 0;
}

.workspace-table:not(.collection-table) th,
.workspace-table:not(.collection-table) td {
    border-right: 0;
    border-bottom: 1px solid var(--line);
}

.workspace-table:not(.collection-table) tbody tr:last-child td {
    border-bottom: 1px solid var(--line);
}

/* Collection detail table: show top, internal, and bottom lines. */
.collection-table thead tr:first-child th {
    border-top: 1px solid var(--line);
}

.collection-table tbody tr:last-child td {
    border-bottom: 1px solid var(--line);
}

.workspace-table tr.item-row {
    transition: background 0.16s ease;
}

.workspace-table tr.item-row:hover {
    background: rgba(15, 18, 17, 0.04);
}

.workspace-table tr.is-active-chat {
    background: rgba(79, 151, 214, 0.12);
}

.workspace-table tr.drop-active {
    background: #e0f2f1;
}

.checkbox-col {
    width: 44px;
    max-width: 44px;
    min-width: 44px;
    text-align: center !important;
}

.workspace-table th.checkbox-col,
.workspace-table td.checkbox-col {
    padding-left: 8px;
    padding-right: 8px;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
}

.row-check {
    display: inline-flex;
    width: 15px;
    height: 15px;
}

.workspace-table th.checkbox-col input[type="checkbox"] {
    width: 15px;
    height: 15px;
    margin: 0;
    display: inline-flex;
}

.table-actions {
    margin-top: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.selection-label {
    color: var(--ink-2);
    font-size: 0.85rem;
}

.table-actions-right {
    display: flex;
    gap: 8px;
}

.selection-action-bar {
    position: fixed;
    left: 50%;
    bottom: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom));
    transform: translateX(-50%);
    z-index: 1500;
    width: min(760px, calc(100vw - 24px));
    pointer-events: none;
}

.selection-action-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.96);
    border-radius: 12px;
    padding: 10px 12px;
    box-shadow: 0 14px 30px rgba(17, 18, 19, 0.14);
    backdrop-filter: blur(6px);
    pointer-events: auto;
}

.selection-action-content.label-only {
    justify-content: center;
}

.selection-action-label {
    color: var(--ink-1);
    font-size: 0.88rem;
    white-space: nowrap;
}

.selection-action-buttons {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.context-menu {
    position: fixed;
    z-index: 2200;
    min-width: 180px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface-0);
    box-shadow: 0 14px 30px rgba(17, 18, 19, 0.14);
    padding: 6px;
    display: grid;
    gap: 4px;
}

.context-menu-item {
    border: 1px solid transparent;
    background: transparent;
    color: var(--ink-1);
    border-radius: 8px;
    padding: 8px 10px;
    text-align: left;
    font: inherit;
    cursor: pointer;
}

.context-menu-item:hover:not(:disabled) {
    background: var(--hover-accent-bg);
    border-color: transparent;
}

.context-menu-item:disabled {
    opacity: 0.45;
    cursor: default;
}

.context-menu-item.danger {
    color: #9f2d08;
}

.context-menu-item.confirm-armed {
    border-color: var(--hover-accent-line);
    background: var(--hover-accent-bg);
    font-weight: 600;
}

.context-menu-color-row {
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 8px 10px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 8px;
}

.context-menu-color-row.is-disabled {
    opacity: 0.5;
}

.context-menu-color-label {
    font-size: 0.8rem;
    color: var(--ink-2);
}

.context-menu-color-swatches {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.context-menu-color-swatch {
    width: 16px;
    height: 16px;
    border-radius: 999px;
    border: 1px solid rgba(15, 23, 42, 0.2);
    background: var(--swatch, #f59e0b);
    cursor: pointer;
    padding: 0;
}

.context-menu-color-swatch:hover:not(:disabled) {
    transform: scale(1.08);
}

.context-menu-color-swatch.is-selected {
    box-shadow: 0 0 0 2px rgba(79, 151, 214, 0.35);
}

.context-menu-color-wheel {
    width: 26px;
    height: 22px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--surface-0);
    cursor: pointer;
    padding: 1px;
}

.name-button,
.location-link {
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
    padding: 0;
}

.inline-rename-input {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--input-bg);
    color: var(--ink-1);
    font: inherit;
    font-size: 0.95rem;
    line-height: 1.3;
    padding: 5px 8px;
    min-width: 120px;
    max-width: 100%;
}

.inline-rename-input:focus {
    outline: none;
    border-color: var(--accent);
}

.name-inline-rename {
    width: min(100%, 460px);
}

.name-pill .name-inline-rename {
    width: min(100%, 320px);
}

.location-link {
    color: var(--accent-strong);
}

.location-link:hover,
.name-button:hover {
    text-decoration: underline;
}

.name-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    max-width: 100%;
    min-width: 0;
}

.name-pill .name-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 360px;
}

.name-cell-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-width: 0;
}

.name-button {
    min-width: 0;
    max-width: 100%;
    display: inline-flex;
    align-items: center;
}

.open-document-btn {
    border: 1px solid var(--line);
    background: var(--surface-1);
    border-radius: 7px;
    padding: 3px 7px;
    font-size: 0.74rem;
    color: #1d3a37;
    cursor: pointer;
}

.open-document-btn:hover {
    background: var(--surface-2);
}

.item-icon {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.item-icon-image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}

.item-icon-mask {
    background: var(--icon-color, #f59e0b);
    -webkit-mask-image: var(--icon-src);
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-image: var(--icon-src);
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: contain;
}

.status-pill {
    display: inline-flex;
    border-radius: 999px;
    padding: 5px 10px;
    font-size: 0.76rem;
    text-transform: none;
    letter-spacing: 0.01em;
    background: #edf0f1;
    color: #556;
}

.status-pill.ready {
    background: #dff3ef;
    color: #0f665e;
}

.status-pill.processing,
.status-pill.pending {
    background: #fff4df;
    color: #8f5d06;
}

.status-pill.failed {
    background: #ffe5df;
    color: #9f2a0a;
}

.cell-text {
    display: block;
    width: 100%;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cell-text.truncated-preview {
    cursor: pointer;
}

.cell-text.truncated-preview:hover {
    text-decoration: underline;
}

.collection-table.wrap-text .cell-text {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    word-break: break-word;
}

.cell-preview-btn {
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    width: 100%;
    text-align: left;
    cursor: pointer;
    padding: 0;
}

.documents-summary-head {
    min-width: 260px;
}

.document-summary-cell {
    width: 34%;
    max-width: 460px;
}

.document-summary-cell .cell-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
    margin-left: calc(-1 * var(--main-inline-pad));
    margin-right: calc(-1 * var(--main-inline-pad));
    padding-left: 8px;
    padding-right: var(--main-inline-pad);
}

.crumb-btn {
    border: 0;
    background: var(--surface-1);
    color: var(--ink-1);
    border-radius: 999px;
    font-size: 0.82rem;
    padding: 6px 10px;
    cursor: pointer;
}

.crumb-btn:hover {
    background: var(--surface-2);
}

.crumb-sep {
    color: #8f969f;
    font-size: 0.8rem;
}

.detail-header {
    display: flex;
    align-items: center;
    gap: 10px;
}

.detail-header h2 {
    font-size: 1.42rem;
    margin-right: auto;
}

.collection-grid-controls {
    margin-top: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: end;
    margin-left: calc(-1 * var(--main-inline-pad));
    margin-right: calc(-1 * var(--main-inline-pad));
    padding-left: 8px;
    padding-right: var(--main-inline-pad);
}

.grid-control {
    position: relative;
    display: grid;
    gap: 6px;
    flex: 1 1 200px;
    min-width: 180px;
}

.grid-control label {
    font-size: 0.8rem;
    text-transform: none;
    letter-spacing: 0.01em;
    color: var(--ink-2);
    font-family: "IBM Plex Sans", sans-serif;
}

.grid-control-btn {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 9px 11px;
    text-align: left;
    font: inherit;
    color: var(--ink-1);
    background: var(--surface-0);
    cursor: pointer;
}

.grid-control-btn:hover {
    background: var(--surface-1);
}

.grid-control.search-control input {
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 9px 11px;
    font: inherit;
    background: var(--input-bg);
    color: var(--ink-1);
}

.grid-control.search-control {
    flex: 1 1 260px;
}

.collection-inline-btn {
    align-self: end;
    white-space: nowrap;
}

.grid-toggle-control {
    align-self: end;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 39px;
    padding: 0 11px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface-0);
    color: var(--ink-1);
    font-size: 0.86rem;
    cursor: pointer;
}

.collection-grid-controls .grid-control.search-control {
    flex: 1 1 320px;
}

.grid-toggle-control input[type="checkbox"] {
    margin: 0;
}

.grid-control-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 220px;
    max-height: 320px;
    overflow: auto;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface-0);
    box-shadow: 0 14px 30px rgba(17, 18, 19, 0.14);
    z-index: 20;
    padding: 8px;
    display: grid;
    gap: 4px;
}

.grid-menu-actions {
    display: flex;
    gap: 6px;
    margin-bottom: 4px;
}

.menu-action-btn {
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface-1);
    padding: 4px 9px;
    font-size: 0.72rem;
    cursor: pointer;
}

.menu-action-btn:hover {
    background: var(--surface-2);
}

.grid-menu-option {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.84rem;
    color: var(--ink-1);
    padding: 5px 4px;
    border-radius: 7px;
}

.grid-menu-option:hover {
    background: var(--surface-1);
}

.grid-menu-empty {
    padding: 8px 6px;
    font-size: 0.84rem;
    color: var(--ink-2);
}

.grid-menu-section {
    display: grid;
    gap: 2px;
    padding-top: 4px;
}

.grid-menu-section-title {
    font-size: 0.73rem;
    text-transform: none;
    letter-spacing: 0.01em;
    color: var(--ink-2);
    padding: 4px 4px 2px;
}

.column-head-btn {
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
}

.column-head-btn:hover {
    text-decoration: underline;
}

.resizable-head-wrap {
    position: relative;
    display: block;
    padding-right: 8px;
}

.resizable-head-label {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.col-resize-handle {
    position: absolute;
    right: 0;
    top: -12px;
    bottom: -12px;
    width: 10px;
    cursor: col-resize;
    touch-action: none;
    z-index: 3;
}

.col-resize-handle::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-0.5px);
    top: 7px;
    bottom: 7px;
    width: 1px;
    background: transparent;
    transition: background 0.15s ease;
}

.collection-table th:hover .col-resize-handle::after {
    background: var(--line);
}

.col-resize-handle:hover::after {
    background: var(--accent);
}

.column-add-th {
    width: 56px;
    min-width: 56px;
    text-align: center !important;
    overflow: visible !important;
    text-overflow: clip !important;
}

.add-column-btn {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: 1px solid var(--line);
    background: var(--surface-1);
    color: var(--ink-1);
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
}

.add-column-btn:hover {
    background: var(--surface-2);
}

.column-add-placeholder-cell {
    width: 56px;
    min-width: 56px;
    background: var(--surface-1);
}

body.col-resizing,
body.col-resizing * {
    cursor: col-resize !important;
    user-select: none !important;
}

.collection-row.is-running td:not(:nth-child(1)):not(:nth-child(2)) {
    color: #8a8f96;
    background: #f3f4f5;
}

.collection-row.is-running td:not(:nth-child(1)):not(:nth-child(2)) .cell-text {
    color: #8a8f96;
    pointer-events: none;
}

.lili-shell {
    min-height: 0;
    height: 100%;
    width: 100%;
    flex: 1 1 auto;
    border: 0;
    border-radius: 0;
    background: transparent;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 0;
    transition: background 0.18s ease;
}

.lili-shell.is-drop-active {
    box-shadow: none;
    background: var(--hover-accent-bg);
}

.lili-center-prompt h2 {
    margin: 0;
    font-size: 2rem;
    letter-spacing: -0.02em;
    color: var(--ink-1);
    text-align: center;
}

.lili-center-prompt {
    margin: auto 0;
}

.chat-context-chips {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    min-height: 30px;
}

.chat-context-empty {
    font-size: 0.82rem;
    color: var(--ink-2);
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px dashed var(--line);
    background: var(--surface-1);
}

.chat-context-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 999px;
    padding: 5px 10px;
    border: 1px solid rgba(79, 151, 214, 0.32);
    background: rgba(79, 151, 214, 0.12);
    color: var(--ink-1);
    font-size: 0.78rem;
}

.chat-context-remove {
    border: 0;
    background: transparent;
    color: var(--ink-1);
    cursor: pointer;
    font-size: 0.72rem;
    padding: 0;
    line-height: 1;
}

.lili-chat-form {
    width: min(860px, 100%);
    align-self: center;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface-1);
    padding: 8px 10px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 8px;
}

.lili-plus-btn {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--surface-0);
    color: var(--ink-1);
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
}

.lili-plus-btn:hover {
    background: var(--surface-2);
}

.lili-chat-form input[type="text"] {
    border: 0;
    background: transparent;
    box-shadow: none;
    padding: 8px 6px;
}

.lili-chat-form input[type="text"]:focus {
    box-shadow: none;
}

.lili-send-btn {
    border: 0;
    border-radius: 999px;
    padding: 8px 14px;
    background: var(--accent);
    color: #fff;
    cursor: pointer;
}

.lili-send-btn:hover {
    background: var(--accent-strong);
}

.lili-send-btn:disabled {
    opacity: 0.6;
    cursor: default;
}

.lili-drop-hint {
    font-size: 0.8rem;
    color: var(--ink-2);
}

.chat-messages {
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 8px clamp(16px, calc((100% - 920px) / 2), 180px) 10px;
    display: grid;
    gap: 10px;
    justify-items: stretch;
    align-content: start;
}

.chat-bubble {
    width: fit-content;
    max-width: min(860px, 100%);
    border-radius: 14px;
    padding: 10px 12px;
    line-height: 1.45;
    white-space: normal;
    border: 1px solid transparent;
}

.chat-bubble.user {
    justify-self: end;
    background: var(--accent);
    color: #fff;
    white-space: pre-wrap;
}

.chat-bubble.assistant {
    justify-self: start;
    background: var(--surface-2);
    color: var(--ink-1);
    border-color: var(--line);
}

.chat-bubble.system {
    justify-self: center;
    background: transparent;
    border: 1px dashed var(--line);
    color: var(--ink-2);
    font-size: 0.82rem;
}

.chat-bubble.loading {
    opacity: 0.95;
}

.chat-loading-line {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.88rem;
}

.chat-streaming-text {
    margin-top: 8px;
}

.chat-stream-cursor {
    display: inline-block;
    margin-left: 2px;
    color: var(--accent);
    animation: chat-cursor-blink 0.9s steps(1, end) infinite;
}

@keyframes chat-cursor-blink {
    0%,
    45% {
        opacity: 1;
    }
    46%,
    100% {
        opacity: 0.1;
    }
}

.chat-action-list {
    margin-top: 8px;
    border-top: 1px solid var(--line);
    padding-top: 8px;
    display: grid;
    gap: 6px;
}

.chat-action-line {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    color: var(--ink-2);
}

.chat-action-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--line);
    flex: 0 0 auto;
}

.chat-action-line.running .chat-action-dot {
    background: #d08a14;
}

.chat-action-line.ok .chat-action-dot {
    background: #2f8b44;
}

.chat-action-line.error .chat-action-dot {
    background: #b1451a;
}

.chat-action-pending {
    margin-left: 4px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.65rem;
    color: var(--ink-2);
}

.chat-spinner {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid var(--line);
    border-top-color: var(--accent);
    animation: chat-spin 0.8s linear infinite;
}

@keyframes chat-spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.chat-bubble h1,
.chat-bubble h2,
.chat-bubble h3,
.chat-bubble h4,
.chat-bubble h5,
.chat-bubble h6 {
    margin: 0 0 8px;
    line-height: 1.3;
}

.chat-bubble h1 {
    font-size: 1.22rem;
}

.chat-bubble h2 {
    font-size: 1.12rem;
}

.chat-bubble h3 {
    font-size: 1.04rem;
}

.chat-bubble h4 {
    font-size: 0.98rem;
}

.chat-bubble h5 {
    font-size: 0.92rem;
}

.chat-bubble h6 {
    font-size: 0.88rem;
}

.chat-bubble p {
    margin: 0 0 8px;
}

.chat-bubble p:last-child {
    margin-bottom: 0;
}

.chat-bubble ul,
.chat-bubble ol {
    margin: 4px 0 8px 18px;
    padding: 0;
}

.chat-bubble li {
    margin: 0 0 4px;
}

.chat-bubble blockquote {
    margin: 6px 0;
    padding: 6px 10px;
    border-left: 3px solid var(--line);
    background: rgba(79, 151, 214, 0.08);
    border-radius: 6px;
}

.chat-bubble pre {
    margin: 8px 0;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid var(--line);
    background: var(--surface-0);
    overflow: auto;
    font-size: 0.82rem;
}

.chat-bubble code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.82em;
    background: var(--surface-0);
    border: 1px solid var(--line);
    border-radius: 5px;
    padding: 1px 4px;
}

.chat-bubble a {
    color: var(--accent-strong);
    text-decoration: underline;
}

.chat-meta {
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.chat-meta-tag {
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--surface-0);
    color: var(--ink-2);
    padding: 2px 8px;
    font-size: 0.72rem;
}

.chat-meta-tag.tool.ok {
    border-color: rgba(46, 125, 50, 0.45);
    background: rgba(46, 125, 50, 0.14);
    color: #256f2e;
}

.chat-meta-tag.tool.error {
    border-color: rgba(194, 65, 12, 0.5);
    background: rgba(194, 65, 12, 0.14);
    color: #8c360e;
}

.global-status {
    min-height: 20px;
    margin-top: 9px;
    color: var(--ink-2);
    font-size: 0.82rem;
}

.status-popup {
    position: fixed;
    left: 50%;
    bottom: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom));
    transform: translateX(-50%);
    z-index: 1490;
    width: min(760px, calc(100vw - 24px));
    pointer-events: none;
}

.status-popup-content {
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.96);
    border-radius: 12px;
    padding: 10px 12px;
    box-shadow: 0 14px 30px rgba(17, 18, 19, 0.14);
    color: var(--ink-1);
    font-size: 0.88rem;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: auto;
}

body.has-selection-bar .status-popup {
    bottom: 88px;
    bottom: calc(88px + env(safe-area-inset-bottom));
}

body.mobile-sidebar-open .selection-action-bar,
body.mobile-sidebar-open .status-popup {
    opacity: 0;
    pointer-events: none;
}

input[type="text"] {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--input-bg);
    color: var(--ink-0);
    padding: 10px 11px;
    font: inherit;
}

input[type="text"]:focus {
    border-color: var(--accent);
    outline: 0;
    box-shadow: 0 0 0 2px rgba(79, 151, 214, 0.25);
}

.btn,
.ghost-button,
.nav-item {
    font-family: "IBM Plex Sans", sans-serif;
}

.btn {
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    padding: 9px 12px;
    cursor: pointer;
    font-size: 0.86rem;
    line-height: 1.2;
}

.btn.primary {
    background: var(--accent);
    color: #fff;
}

.btn.primary:hover {
    background: var(--accent-strong);
}

.btn.subtle {
    background: var(--bg-2);
    color: var(--ink-1);
}

.btn.subtle:hover {
    background: var(--surface-2);
}

.btn.danger {
    background: #ffe5df;
    color: #8f2308;
    border: 1px solid #f6c8bb;
}

.btn.danger:hover {
    background: #ffd8cf;
}

.btn.confirm-armed {
    border-color: var(--hover-accent-line);
    background: var(--hover-accent-bg);
    color: var(--ink-1);
    font-weight: 600;
}

button,
.location-link,
.name-button {
    transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

.ghost-button {
    border: 0;
    background: rgba(0, 0, 0, 0.06);
    color: var(--sidebar-ink);
    border-radius: var(--radius-sm);
    padding: 8px 10px;
    cursor: pointer;
    font-size: 0.78rem;
}

.ghost-button:hover {
    background: rgba(0, 0, 0, 0.1);
}

.nav-item {
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--sidebar-ink);
    text-align: left;
    padding: 11px 12px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 0.95rem;
}

.nav-item:hover {
    background: rgba(0, 0, 0, 0.05);
}

.nav-item.is-active {
    background: rgba(79, 151, 214, 0.16);
    border: 1px solid rgba(79, 151, 214, 0.34);
}

.btn:hover:not(:disabled),
.ghost-button:hover,
.nav-item:hover,
.open-document-btn:hover,
.grid-control-btn:hover,
.menu-action-btn:hover,
.add-column-btn:hover,
.crumb-btn:hover,
.lili-plus-btn:hover,
.lili-send-btn:hover,
.recent-btn:hover {
    box-shadow: none;
}

.name-button:hover,
.location-link:hover,
.column-head-btn:hover,
.recent-btn:hover {
    color: var(--accent-strong);
}

.picker-modal {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: grid;
    place-items: center;
}

.picker-backdrop {
    position: absolute;
    inset: 0;
    background: var(--overlay-scrim);
}

.picker-card {
    position: relative;
    width: min(820px, 92vw);
    max-height: 80vh;
    background: var(--surface-0);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    display: grid;
    grid-template-rows: auto 1fr auto;
    overflow: hidden;
}

.picker-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--line);
    padding: 12px 14px;
}

.picker-head h3 {
    font-size: 1.1rem;
}

.picker-list {
    overflow: auto;
    padding: 10px 14px;
    display: grid;
    gap: 8px;
}

.picker-item {
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--line);
    padding: 8px 10px;
}

.picker-item label {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.picker-actions {
    border-top: 1px solid var(--line);
    padding: 12px 14px;
    display: flex;
    justify-content: flex-end;
}

.overlay-modal {
    position: fixed;
    inset: 0;
    z-index: 1300;
    display: grid;
    place-items: center;
}

.overlay-backdrop {
    position: absolute;
    inset: 0;
    background: var(--overlay-scrim);
}

.overlay-card {
    position: relative;
    width: min(940px, 94vw);
    max-height: 86vh;
    background: var(--surface-0);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    display: grid;
    grid-template-rows: auto 1fr;
    overflow: hidden;
}

.overlay-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border-bottom: 1px solid var(--line);
    padding: 12px 14px;
}

.overlay-head-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.overlay-body {
    overflow: auto;
    padding: 14px;
}

.detail-layout {
    display: grid;
    gap: 14px;
}

.detail-summary-card {
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface-1);
    padding: 12px 14px;
    display: grid;
    gap: 10px;
}

.detail-summary-card h4 {
    margin: 0;
    font-size: 1rem;
    color: var(--ink-1);
}

.detail-summary-meta {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.detail-summary-text {
    white-space: pre-wrap;
    word-break: break-word;
    color: var(--ink-1);
    line-height: 1.5;
}

.detail-summary-error {
    color: #9f2a0a;
    font-size: 0.82rem;
}

.detail-fields-grid {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.detail-field {
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 10px 11px;
    background: var(--surface-1);
}

.detail-field .field-label {
    font-family: "IBM Plex Sans", sans-serif;
    font-size: 0.8rem;
    color: var(--ink-2);
    margin-bottom: 5px;
    text-transform: none;
    letter-spacing: 0.01em;
}

.detail-field .field-value {
    color: var(--ink-1);
    white-space: pre-wrap;
    word-break: break-word;
}

.detail-collection-section {
    display: grid;
    gap: 10px;
}

.detail-collection-section h4 {
    margin: 0;
    font-size: 0.96rem;
    color: var(--ink-1);
}

.preview-card {
    width: min(860px, 94vw);
}

.share-card {
    width: min(760px, 94vw);
}

.share-body {
    display: grid;
    gap: 14px;
}

.share-input-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 120px auto;
    gap: 10px;
    align-items: center;
}

.share-input-row input,
.share-input-row select,
.share-role-select {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: var(--input-bg);
    color: var(--ink-1);
    font: inherit;
    padding: 9px 10px;
}

.share-permission-hint {
    font-size: 0.84rem;
    color: var(--ink-2);
}

.share-member-list {
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface-1);
    overflow: hidden;
}

.share-member-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 10px 12px;
    border-bottom: 1px solid var(--line-soft);
}

.share-member-row:last-child {
    border-bottom: 0;
}

.share-member-avatar {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    object-fit: cover;
    border: 1px solid var(--line);
    background: var(--surface-2);
}

.folder-style-card {
    width: min(560px, 94vw);
}

.folder-style-body {
    display: grid;
    gap: 14px;
}

.folder-style-name-row {
    display: grid;
    gap: 6px;
}

.folder-style-name-row label,
.folder-style-color-label {
    font-size: 0.8rem;
    color: var(--ink-2);
    text-transform: none;
}

.folder-style-name-row input {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: var(--input-bg);
    color: var(--ink-1);
    font: inherit;
    padding: 9px 10px;
}

.folder-style-preset-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.folder-color-swatch {
    width: 26px;
    height: 26px;
    border-radius: 999px;
    border: 2px solid #ffffff;
    box-shadow: 0 0 0 1px var(--line);
    background: var(--swatch);
    cursor: pointer;
    padding: 0;
    transition: transform 120ms ease, box-shadow 120ms ease;
}

.folder-color-swatch:hover {
    transform: translateY(-1px);
}

.folder-color-swatch.is-selected {
    box-shadow: 0 0 0 2px #0f766e;
}

#folderStyleColorWheel {
    width: 40px;
    height: 30px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-1);
    cursor: pointer;
    padding: 2px;
}

.folder-style-actions {
    display: flex;
    justify-content: flex-end;
}

.share-member-meta {
    min-width: 0;
}

.share-member-name {
    color: var(--ink-1);
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.share-member-email {
    color: var(--ink-2);
    font-size: 0.8rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.share-member-controls {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.share-role-tag {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 4px 9px;
    font-size: 0.76rem;
    color: var(--ink-2);
    background: var(--surface-0);
}

.share-role-tag.owner {
    color: var(--ink-1);
    border-color: var(--hover-accent-line);
    background: var(--hover-accent-bg);
    font-weight: 600;
}

.share-remove-btn {
    padding: 6px 10px;
    font-size: 0.78rem;
}

.preview-body {
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
    font-family: "IBM Plex Sans", sans-serif;
    font-size: 0.92rem;
    color: var(--ink-1);
}

.column-editor-popover {
    position: fixed;
    z-index: 1400;
    width: min(360px, calc(100vw - 20px));
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface-0);
    box-shadow: 0 18px 34px rgba(17, 18, 19, 0.2);
    padding: 12px;
    display: grid;
    gap: 8px;
}

.column-editor-title {
    font-family: "IBM Plex Sans", sans-serif;
    font-size: 0.95rem;
    color: var(--ink-1);
}

.column-editor-popover label {
    font-size: 0.72rem;
    text-transform: none;
    letter-spacing: 0.01em;
    color: var(--ink-2);
}

.column-editor-popover textarea,
.column-editor-popover input[type="text"],
.column-editor-popover select {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 8px 9px;
    font: inherit;
    color: var(--ink-1);
    background: var(--input-bg);
}

.column-editor-popover textarea {
    resize: vertical;
}

.column-editor-popover textarea {
    min-height: 96px;
}

.column-category-wrap {
    display: grid;
    gap: 6px;
}

.column-category-input-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
}

.column-category-options {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.column-category-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 8px;
    border-radius: 999px;
    border: 1px solid rgba(79, 151, 214, 0.35);
    background: rgba(79, 151, 214, 0.14);
    color: var(--ink-1);
    font-size: 0.78rem;
}

.column-category-remove {
    border: 0;
    background: transparent;
    color: var(--ink-1);
    cursor: pointer;
    font-size: 0.75rem;
    line-height: 1;
    padding: 0;
}

.column-category-empty {
    color: var(--ink-2);
    font-size: 0.8rem;
}

mark.search-hit {
    background: #ffef9f;
    color: inherit;
    border-radius: 3px;
    padding: 0 1px;
}

.column-editor-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.empty-state {
    text-align: center;
    color: var(--ink-2);
    padding: 20px;
}

:root.theme-dark .auth-gate {
    background:
        radial-gradient(circle at 10% 0%, rgba(36, 47, 62, 0.82), rgba(36, 47, 62, 0) 34%),
        radial-gradient(circle at 90% 2%, rgba(31, 44, 61, 0.82), rgba(31, 44, 61, 0) 36%),
        #10151d;
}

:root.theme-dark .landing-brand {
    color: #ecf2fb;
}

:root.theme-dark .landing-login-link {
    color: #cad7e7;
}

:root.theme-dark .landing-login-link:hover {
    color: #edf4fe;
    border-color: rgba(237, 244, 254, 0.42);
}

:root.theme-dark .landing-kicker {
    color: #95aac1;
}

:root.theme-dark .landing-hero h1 {
    color: #f1f5fb;
}

:root.theme-dark .landing-subtitle {
    color: #bdccde;
}

:root.theme-dark .landing-cta-btn {
    background: #eff4fb;
    color: #13263b;
}

:root.theme-dark .landing-cta-btn:hover {
    background: #d7e3f2;
}

:root.theme-dark .landing-note {
    color: #9cb1c8;
}

:root.theme-dark .landing-features h2,
:root.theme-dark .landing-feature h3 {
    color: #edf3fb;
}

:root.theme-dark .landing-feature {
    background: rgba(28, 38, 51, 0.8);
    border-color: #33475f;
    box-shadow: none;
}

:root.theme-dark .landing-feature p {
    color: #afc0d4;
}

:root.theme-dark .recent-btn:hover {
    background: rgba(255, 255, 255, 0.08);
}

:root.theme-dark .ghost-button {
    background: rgba(255, 255, 255, 0.08);
}

:root.theme-dark .ghost-button:hover {
    background: rgba(255, 255, 255, 0.14);
}

:root.theme-dark .nav-item:hover {
    background: rgba(255, 255, 255, 0.08);
}

:root.theme-dark .nav-item.is-active {
    background: rgba(120, 181, 230, 0.24);
    border-color: rgba(120, 181, 230, 0.42);
}

:root.theme-dark .btn.subtle {
    background: var(--surface-1);
    color: var(--ink-1);
}

:root.theme-dark .btn.subtle:hover {
    background: var(--surface-2);
}

:root.theme-dark .open-document-btn {
    border-color: var(--line);
    background: var(--surface-1);
    color: var(--ink-1);
}

:root.theme-dark .document-viewer-toolbar,
:root.theme-dark .document-viewer-sidebar {
    background: var(--surface-0);
    border-color: var(--line);
}

:root.theme-dark .document-viewer-frame-shell {
    border-color: var(--line);
    background: #0f1620;
}

:root.theme-dark .document-viewer-open-link {
    color: #9ec9eb;
}

:root.theme-dark .open-document-btn:hover {
    background: var(--surface-2);
}

:root.theme-dark .workspace-table tr.item-row:hover {
    background: rgba(255, 255, 255, 0.06);
}

:root.theme-dark .selection-action-content,
:root.theme-dark .grid-control-menu,
:root.theme-dark .column-editor-popover,
:root.theme-dark .picker-card,
:root.theme-dark .overlay-card,
:root.theme-dark .lili-chat-form,
:root.theme-dark .context-menu {
    background: var(--surface-0);
    border-color: var(--line);
}

:root.theme-dark .status-popup-content {
    background: var(--surface-0);
    border-color: var(--line);
}

:root.theme-dark .chat-bubble.assistant {
    background: var(--surface-1);
}

:root.theme-dark .chat-bubble.system {
    border-color: var(--line);
}

:root.theme-dark .chat-meta-tag.tool.ok {
    color: #9ee7a7;
}

:root.theme-dark .chat-meta-tag.tool.error {
    color: #ffb595;
}

:root.theme-dark .theme-toggle input {
    background: var(--surface-2);
    border-color: var(--line);
}

:root.theme-dark .theme-toggle input::after {
    background: var(--surface-0);
}

:root.theme-dark .mobile-menu-btn {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--line);
    color: var(--ink-1);
}

:root.theme-dark .user-menu-button:hover,
:root.theme-dark .sidebar-menu-item:hover {
    background: rgba(255, 255, 255, 0.08);
}

:root.theme-dark .sidebar-rail-toggle:hover {
    background: rgba(255, 255, 255, 0.08);
}

:root.theme-dark .new-plus-btn {
    background: var(--surface-1);
    border-color: var(--line);
    color: var(--sidebar-ink);
}

:root.theme-dark .new-plus-btn:hover {
    background: var(--surface-2);
}

:root.theme-dark .sidebar-item-icon {
    border-color: var(--line);
    color: var(--ink-1);
}

.reveal-item {
    animation: reveal-up 420ms ease both;
}

.reveal-item:nth-of-type(2) {
    animation-delay: 70ms;
}

.reveal-item:nth-of-type(3) {
    animation-delay: 120ms;
}

@keyframes reveal-up {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 1080px) {
    body.mobile-sidebar-open {
        overflow: hidden;
    }

    .auth-gate {
        padding: 26px 16px 34px;
    }

    .landing-shell {
        gap: 40px;
    }

    .landing-main {
        gap: 44px;
    }

    .landing-feature-grid {
        grid-template-columns: 1fr;
    }

    .document-viewer-layout {
        grid-template-columns: 1fr;
    }

    .document-viewer-frame {
        min-height: 60vh;
        min-height: 60dvh;
    }

    .workspace-app {
        grid-template-columns: 1fr;
    }

    .workspace-app.sidebar-collapsed {
        grid-template-columns: 1fr;
    }

    .workspace-sidebar {
        position: fixed;
        top: 0;
        bottom: 0;
        left: -290px;
        width: 280px;
        height: 100vh;
        height: 100dvh;
        transition: left 0.2s ease;
        z-index: 1100;
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2);
    }

    .workspace-sidebar.open {
        left: 0;
    }

    .mobile-sidebar-backdrop {
        display: block;
    }

    .workspace-app.sidebar-collapsed .workspace-sidebar {
        transform: none;
        opacity: 1;
        pointer-events: auto;
    }

    .workspace-app.sidebar-collapsed .sidebar-user-row {
        grid-template-columns: 1fr auto;
        justify-items: stretch;
    }

    .workspace-app.sidebar-collapsed .sidebar-head {
        justify-items: stretch;
    }

    .workspace-app.sidebar-collapsed .sidebar-new-wrap {
        width: auto;
        display: block;
    }

    .workspace-app.sidebar-collapsed .user-menu-button {
        display: grid !important;
    }

    .workspace-app.sidebar-collapsed .user-dropdown {
        display: grid !important;
    }

    .workspace-app.sidebar-collapsed .recent-section,
    .workspace-app.sidebar-collapsed .sidebar-divider,
    .workspace-app.sidebar-collapsed .sidebar-foot {
        display: initial !important;
    }

    .workspace-app.sidebar-collapsed .primary-nav {
        justify-items: stretch;
    }

    .workspace-app.sidebar-collapsed .nav-item {
        width: 100%;
        min-width: 0;
        justify-content: flex-start;
        padding: 11px 12px;
        gap: 8px;
    }

    .workspace-app.sidebar-collapsed .nav-item > span:not(.sidebar-item-icon) {
        display: inline;
    }

    .mobile-menu-btn {
        display: inline-flex;
        width: fit-content;
        border: 1px solid var(--line);
        border-radius: 8px;
        color: var(--ink-1);
        background: var(--surface-1);
        padding: 7px 10px;
        align-items: center;
        justify-content: center;
        line-height: 1;
    }

    .workspace-main {
        --main-inline-pad: 12px;
        padding: 18px var(--main-inline-pad) 14px;
    }

    .sidebar-user-row {
        grid-template-columns: 1fr auto;
    }

    #newItemMenu.sidebar-dropdown-menu {
        right: 0;
        left: auto;
    }

    .main-header {
        align-items: center;
        margin-left: calc(-1 * var(--main-inline-pad));
        margin-right: calc(-1 * var(--main-inline-pad));
        padding-left: 8px;
        padding-right: var(--main-inline-pad);
    }

    .sidebar-rail-toggle {
        display: none;
    }

    .main-header-title {
        width: 100%;
        justify-content: flex-start;
    }

    .collection-grid-controls {
        flex-direction: column;
        align-items: stretch;
    }

    .grid-control {
        min-width: 0;
        flex: 1 1 auto;
    }

    .collection-inline-btn,
    .grid-toggle-control {
        width: 100%;
        justify-content: flex-start;
    }

    #documentsPanel .workspace-table {
        min-width: 760px;
    }

    #collectionsListView .workspace-table {
        min-width: 620px;
    }

    #chatsPanel .workspace-table {
        min-width: 620px;
    }

    .collection-grid-shell {
        max-height: calc(100vh - 270px);
        max-height: calc(100dvh - 270px);
    }

    .lili-shell {
        height: 100%;
        min-height: 0;
        padding: 0;
    }

    .lili-center-prompt h2 {
        font-size: 1.5rem;
        text-align: center;
    }

    .lili-chat-form {
        border-radius: 20px;
        grid-template-columns: auto 1fr;
        grid-template-areas:
            "plus input"
            "send send";
    }

    .chat-messages {
        padding: 8px 10px 10px;
    }

    .lili-plus-btn {
        grid-area: plus;
    }

    .lili-chat-form input[type="text"] {
        grid-area: input;
    }

    .lili-send-btn {
        grid-area: send;
        width: 100%;
    }

    .selection-action-content {
        flex-direction: column;
        align-items: stretch;
    }

    .selection-action-buttons {
        justify-content: flex-start;
        flex-wrap: wrap;
    }
}

@media (max-width: 820px) {
    .landing-topbar {
        flex-wrap: wrap;
        gap: 10px;
    }

    .workspace-main {
        --main-inline-pad: 10px;
        padding: 15px var(--main-inline-pad) 12px;
    }

    .main-header h1,
    .page-title-rename-input {
        font-size: 1.55rem;
    }

    .selection-action-bar,
    .status-popup {
        width: calc(100vw - 16px);
    }

    .document-viewer-toolbar {
        flex-wrap: wrap;
    }

    .share-input-row {
        grid-template-columns: 1fr;
    }

    .share-member-row {
        grid-template-columns: auto minmax(0, 1fr);
        row-gap: 8px;
    }

    .share-member-controls {
        grid-column: 2;
        justify-self: start;
    }
}

@media (max-width: 600px) {
    .landing-topbar {
        align-items: flex-start;
    }

    .landing-hero-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .landing-cta-btn {
        width: 100%;
    }

    .main-header {
        gap: 10px;
        margin-bottom: 10px;
    }

    .main-header h1,
    .page-title-rename-input {
        font-size: 1.32rem;
    }

    .mobile-menu-btn {
        padding: 6px 9px;
        font-size: 0.85rem;
    }

    .sidebar-collapse-btn {
        width: 32px;
        min-width: 32px;
        height: 32px;
    }

    .chat-messages {
        padding: 6px 6px 8px;
    }

    .lili-chat-form {
        padding: 7px 8px;
        gap: 6px;
    }

    .lili-drop-hint {
        text-align: center;
    }

    #documentsPanel .workspace-table {
        min-width: 680px;
    }

    #sharedPanel .workspace-table {
        min-width: 760px;
    }

    #collectionsListView .workspace-table {
        min-width: 560px;
    }

    #chatsPanel .workspace-table {
        min-width: 560px;
    }
}