/**
 * mesh.css — Sovereigns Console Mesh Dev Chat styling.
 * Obsidian dark glassmorphism with warm gold & cyan status accents.
 * Ultra space-efficient, responsive for Desktop, Tablet, and Mobile.
 */

.mesh-container {
    display: flex;
    flex-direction: row;
    height: calc(100vh - var(--nav-app-switcher-h, 53px));
    background: var(--ground, #07090e);
    color: var(--ink, #ffffff);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    border-top: 1px solid var(--line, rgba(255, 255, 255, 0.08));
    position: relative;
    overflow: hidden;
}

/* ── Desktop Sidebar (Flat single-room mode: hidden for streamlined 1-room chat) ── */
.mesh-sidebar {
    display: none;
}

/* ── Header Participant Roster ── */
.mesh-header-roster {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    overflow-x: auto;
    scrollbar-width: none;
}

.mesh-header-roster::-webkit-scrollbar {
    display: none;
}

.mesh-roster-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 9px;
    background: rgba(22, 28, 42, 0.70);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    color: var(--ink-secondary, #a0aec0);
    white-space: nowrap;
    transition: all 0.15s ease;
}

.mesh-roster-badge:hover {
    background: rgba(30, 38, 56, 0.90);
    border-color: var(--gold-dim, #997b24);
    color: var(--ink, #ffffff);
}

.mesh-roster-avatar {
    font-size: 13px;
}

.mesh-roster-name {
    font-size: 11px;
}

.mesh-sidebar-inner {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.mesh-sidebar-section {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.mesh-sidebar-title {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--gold-dim, #997b24);
    text-transform: uppercase;
    padding: 0 6px;
}

.mesh-channel-list {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.mesh-channel-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    color: var(--ink-secondary, #a0aec0);
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    text-align: left;
    transition: all 0.15s ease;
}

.mesh-channel-item:hover {
    background: var(--surface-glass, rgba(18, 24, 38, 0.60));
    color: var(--ink, #ffffff);
    border-color: var(--line, rgba(255, 255, 255, 0.08));
}

.mesh-channel-item.active {
    background: var(--surface-raised, rgba(22, 28, 42, 0.90));
    color: var(--gold-bright, #f3d068);
    border-color: var(--gold, #d4af37);
    box-shadow: 0 0 10px var(--gold-glow, rgba(212, 175, 55, 0.20));
}

.mesh-channel-icon {
    font-size: 14px;
}

.mesh-channel-name {
    font-weight: 600;
}

.mesh-participant-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mesh-participant-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 8px;
    background: var(--surface-glass, rgba(18, 24, 38, 0.35));
    border-radius: 6px;
    border: 1px solid var(--line, rgba(255, 255, 255, 0.04));
}

.mesh-participant-avatar {
    font-size: 15px;
}

.mesh-participant-info {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.mesh-participant-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--ink, #ffffff);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mesh-participant-title {
    font-size: 10px;
    color: var(--ink-dim, #718096);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mesh-presence-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.mesh-presence-dot.online {
    background: #48bb78;
    box-shadow: 0 0 5px #48bb78;
}

/* ── Main Area ── */
.mesh-main-area {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--ground, #07090e);
    position: relative;
    overflow: hidden;
}

/* ── Header ── */
.mesh-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 16px;
    min-height: 48px;
    background: var(--surface, rgba(12, 16, 26, 0.85));
    border-bottom: 1px solid var(--line, rgba(255, 255, 255, 0.08));
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    z-index: 10;
    flex-shrink: 0;
}

.mesh-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1 1 auto;
}

.mesh-header-icon {
    font-size: 20px;
    flex-shrink: 0;
}

.mesh-header-text-block {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.mesh-header-title {
    font-family: 'Outfit', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: var(--gold-bright, #f3d068);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mesh-header-desc {
    font-size: 11px;
    color: var(--ink-secondary, #a0aec0);
    margin: 1px 0 0 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 450px;
}

.mesh-header-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

/* SPECIFICITY, NOT SIZE, WAS THE BUG.
   index.html loads mesh.css (line 21) BEFORE styles.css (line 22), and the
   generic `.btn` in styles.css has the same specificity as `.mesh-header-btn`
   here — so the later sheet won and these compact header buttons rendered at
   the full desktop size: padding 16px and font-size 15px instead of 4px/10px
   and 11.5px. MEASURED 2026-09-06: 54px tall each, which made the mesh header
   127px on a 375px-wide screen — a third of the viewport showing only chrome.
   It looked like the labels were wrapping. They were not; the buttons were
   simply four times too big.

   `.mesh-header-actions > .mesh-header-btn` (0,2,0) beats `.btn` (0,1,0), so
   the intended size wins regardless of sheet order.

   ⚠️ The same trap applies to every other mesh.css rule that shares a class
   name with a generic in styles.css. The systemic fix is to load mesh.css AFTER
   styles.css, matching index.html's own stated intent that the last sheet wins
   "so nothing here needs !important" — deliberately NOT done in this change,
   because reordering a 7,700-line stylesheet under a 1,200-line one needs its
   own pass and its own screenshots. */
.mesh-header-actions > .mesh-header-btn {
    padding: 4px 10px;
    font-size: 11.5px;
    border-radius: 6px;
}

.mesh-header-btn {
    padding: 4px 10px;
    font-size: 11.5px;
    font-weight: 600;
    border-radius: 6px;
    white-space: nowrap;
    background: rgba(22, 28, 42, 0.85);
    border: 1px solid var(--line, rgba(255, 255, 255, 0.12));
    color: var(--ink, #ffffff);
    cursor: pointer;
    transition: all 0.15s ease;
}

.mesh-header-btn:hover {
    border-color: var(--gold, #d4af37);
    color: var(--gold-bright, #f3d068);
}

.mesh-mobile-drawer-btn {
    display: none;
}

/* ── Mobile Horizontal Channel Bar ── */
.mesh-mobile-channel-bar {
    display: none;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    background: rgba(10, 14, 22, 0.95);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
    z-index: 9;
}

.mesh-mobile-channel-bar::-webkit-scrollbar {
    display: none;
}

.mesh-mobile-tab-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    background: rgba(22, 28, 42, 0.70);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--ink-secondary, #a0aec0);
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.15s ease;
}

.mesh-mobile-tab-pill.active {
    background: rgba(212, 175, 55, 0.20);
    border-color: var(--gold, #d4af37);
    color: var(--gold-bright, #f3d068);
    box-shadow: 0 0 8px rgba(212, 175, 55, 0.25);
}

/* ── Active Locks Banner ── */
.mesh-lock-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 14px;
    background: rgba(212, 175, 55, 0.08);
    border-bottom: 1px solid rgba(212, 175, 55, 0.20);
    font-size: 11.5px;
    flex-shrink: 0;
}

.mesh-lock-banner-title {
    font-weight: 700;
    color: var(--gold, #d4af37);
    font-size: 10.5px;
    letter-spacing: 0.05em;
}

.mesh-lock-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* A lock chip holds a REPO PATH, and paths are long: 280px for
   "ark/desk/pkg/tape/columnar_v4.go (jorel)" against a 343px column. It used to
   push 9px past the main area, which clips. Paths wrap rather than overflow --
   the whole path stays readable, which is the point of naming the file. */
.mesh-lock-chip {
    max-width: 100%;
    min-width: 0;
    overflow-wrap: anywhere;
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    background: var(--surface-raised, rgba(22, 28, 42, 0.90));
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid var(--gold-dim, #997b24);
    font-family: 'JetBrains Mono', monospace;
    font-size: 10.5px;
}

.mesh-lock-release-btn {
    background: none;
    border: none;
    color: #e53e3e;
    cursor: pointer;
    font-weight: bold;
    font-size: 13px;
    line-height: 1;
    padding: 0 2px;
}

/* ── Feed ── */
.mesh-feed {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}

.mesh-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--ink-dim, #718096);
    gap: 10px;
    text-align: center;
    padding: 20px;
}

.mesh-empty-icon {
    font-size: 32px;
}

/* ── High-Density Chat Card ── */
.mesh-card {
    background: var(--surface-glass, rgba(14, 19, 30, 0.65));
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--line, rgba(255, 255, 255, 0.06));
    border-radius: 8px;
    padding: 8px 12px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
    animation: fadeIn 0.15s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

.mesh-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.mesh-card-author {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
    min-width: 0;
}

.mesh-card-avatar {
    font-size: 15px;
    flex-shrink: 0;
}

.mesh-card-name {
    font-weight: 700;
    color: var(--gold, #d4af37);
    font-size: 13px;
    white-space: nowrap;
}

.mesh-card-role {
    font-size: 10.5px;
    color: var(--ink-dim, #718096);
    white-space: nowrap;
}

.mesh-card-time {
    font-size: 10.5px;
    color: var(--ink-dim, #718096);
    margin-left: 4px;
    white-space: nowrap;
}

.mesh-card-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
}

.mesh-badge-chip {
    font-size: 9.5px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.badge-verified { background: rgba(72, 187, 120, 0.15); color: #48bb78; border: 1px solid rgba(72, 187, 120, 0.3); }
.badge-failed { background: rgba(245, 101, 101, 0.15); color: #f56565; border: 1px solid rgba(245, 101, 101, 0.3); }
.badge-measured { background: rgba(66, 153, 225, 0.15); color: #4299e1; border: 1px solid rgba(66, 153, 225, 0.3); }
.badge-published { background: rgba(237, 137, 54, 0.15); color: #ed8936; border: 1px solid rgba(237, 137, 54, 0.3); }
.badge-modeled { background: rgba(159, 122, 234, 0.15); color: #9f7aea; border: 1px solid rgba(159, 122, 234, 0.3); }
.badge-landed { background: rgba(212, 175, 55, 0.20); color: var(--gold-bright, #f3d068); border: 1px solid var(--gold, #d4af37); }
.badge-running { background: rgba(56, 178, 172, 0.15); color: #38b2ac; border: 1px solid rgba(56, 178, 172, 0.3); }
.badge-blocked { background: rgba(229, 62, 62, 0.15); color: #e53e3e; border: 1px solid rgba(229, 62, 62, 0.3); }

.mesh-card-text {
    font-size: 13.5px;
    line-height: 1.45;
    color: var(--ink, #f0f4f8);
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
}

.mesh-card-blobs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}

.mesh-blob-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: var(--surface-raised, rgba(22, 28, 42, 0.85));
    border: 1px solid var(--line, rgba(255, 255, 255, 0.12));
    border-radius: 6px;
    padding: 6px 8px;
    max-width: 340px;
    transition: all 0.15s ease;
}

.mesh-blob-card:hover {
    border-color: var(--gold, #d4af37);
}

.mesh-blob-image-thumb {
    max-width: 100%;
    max-height: 220px;
    border-radius: 4px;
    object-fit: cover;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: transform 0.15s ease, border-color 0.15s ease;
}

.mesh-blob-image-thumb:hover {
    transform: scale(1.01);
    border-color: var(--gold-bright, #f3d068);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
}

.mesh-blob-attachment {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    cursor: pointer;
}

.mesh-blob-icon {
    font-size: 14px;
}

.mesh-blob-name {
    font-weight: 600;
    color: var(--ink, #ffffff);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
}

.mesh-blob-size {
    color: var(--ink-dim, #718096);
    font-size: 10px;
}

.mesh-blob-hash {
    color: var(--gold-dim, #997b24);
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
}

.mesh-lock-notice {
    font-size: 11px;
    font-family: 'JetBrains Mono', monospace;
    color: var(--gold-bright, #f3d068);
    background: rgba(212, 175, 55, 0.08);
    padding: 3px 6px;
    border-radius: 4px;
}

/* ── Composer ── */
.mesh-composer {
    background: var(--surface, rgba(12, 16, 26, 0.90));
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid var(--line, rgba(255, 255, 255, 0.08));
    padding: 6px 14px 10px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex-shrink: 0;
    z-index: 10;
}

.mesh-badge-bar {
    display: flex;
    align-items: center;
    gap: 4px;
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
}

.mesh-badge-bar::-webkit-scrollbar {
    display: none;
}

.mesh-badge-bar-label {
    font-size: 10px;
    font-weight: 700;
    color: var(--gold-dim, #997b24);
    letter-spacing: 0.06em;
    flex-shrink: 0;
    margin-right: 2px;
}

.mesh-badge-toggle {
    background: var(--surface-glass, rgba(18, 24, 38, 0.60));
    border: 1px solid var(--line, rgba(255, 255, 255, 0.10));
    color: var(--ink-secondary, #a0aec0);
    padding: 2px 7px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 500;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.15s ease;
}

.mesh-badge-toggle:hover {
    border-color: var(--gold-dim, #997b24);
    color: var(--ink, #ffffff);
}

.mesh-badge-toggle.selected {
    background: rgba(212, 175, 55, 0.20);
    border-color: var(--gold, #d4af37);
    color: var(--gold-bright, #f3d068);
    box-shadow: 0 0 6px rgba(212, 175, 55, 0.2);
}

/* Staged Attachments in Composer */
.mesh-staged-blobs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 2px 0;
}

.mesh-staged-blob-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--surface-raised, rgba(22, 28, 42, 0.90));
    border: 1px solid var(--gold-dim, #997b24);
    border-radius: 6px;
    padding: 3px 8px;
    font-size: 11.5px;
    color: var(--ink, #ffffff);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.mesh-staged-blob-thumb {
    width: 20px;
    height: 20px;
    border-radius: 3px;
    object-fit: cover;
}

.mesh-staged-blob-name {
    font-weight: 600;
    max-width: 160px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mesh-staged-blob-size {
    color: var(--ink-dim, #718096);
    font-size: 10px;
}

.mesh-staged-blob-remove {
    background: none;
    border: none;
    color: #e53e3e;
    cursor: pointer;
    font-weight: bold;
    font-size: 14px;
    line-height: 1;
    padding: 0 2px;
}

/* ── Floating Jump to Bottom Button ── */
.mesh-jump-bottom {
    position: absolute;
    bottom: 96px;
    right: 28px;
    z-index: 25;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    border-radius: 999px;
    background: rgba(18, 24, 38, 0.92);
    border: 1px solid var(--gold-dim, rgba(212, 175, 55, 0.45));
    color: var(--gold-bright, #f3d068);
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6), 0 0 12px rgba(212, 175, 55, 0.25);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    animation: meshJumpFadeIn 0.25s ease-out;
}

.mesh-jump-bottom:hover {
    background: rgba(26, 35, 56, 0.98);
    border-color: var(--gold, #d4af37);
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.7), 0 0 18px rgba(212, 175, 55, 0.4);
}

.mesh-jump-bottom:active {
    transform: translateY(0);
}

.mesh-jump-bottom-icon {
    font-size: 14px;
    animation: meshBounceDown 1.5s infinite ease-in-out;
}

@keyframes meshJumpFadeIn {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes meshBounceDown {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(3px); }
}

.mesh-composer-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 0 2px 2px 2px;
}

.mesh-format-tools {
    display: flex;
    align-items: center;
    gap: 4px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.mesh-format-tools::-webkit-scrollbar {
    display: none;
}

.mesh-format-btn {
    background: var(--surface-glass, rgba(18, 24, 38, 0.60));
    border: 1px solid var(--line, rgba(255, 255, 255, 0.08));
    color: var(--ink-secondary, #a0aec0);
    padding: 2px 7px;
    border-radius: 5px;
    font-family: inherit;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.mesh-format-btn:hover {
    background: var(--surface-raised, rgba(22, 28, 42, 0.90));
    border-color: var(--gold-dim, #997b24);
    color: var(--gold-bright, #f3d068);
}

.mesh-format-btn code {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
}

.mesh-composer-hint {
    font-size: 10.5px;
    color: var(--ink-dim, #718096);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mesh-composer-input-row {
    display: flex;
    gap: 6px;
    align-items: flex-end;
}

.mesh-attach-btn {
    background: var(--surface-glass, rgba(18, 24, 38, 0.70));
    border: 1px solid var(--line, rgba(255, 255, 255, 0.12));
    border-radius: 8px;
    color: var(--ink-secondary, #a0aec0);
    font-size: 16px;
    width: 42px;
    height: 42px;
    cursor: pointer;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.mesh-attach-btn:hover {
    border-color: var(--gold, #d4af37);
    color: var(--gold-bright, #f3d068);
    background: var(--surface-raised, rgba(22, 28, 42, 0.90));
}

.mesh-composer-textarea {
    flex: 1;
    background: var(--ground, #07090e);
    border: 1px solid var(--line, rgba(255, 255, 255, 0.12));
    border-radius: 8px;
    padding: 8px 12px;
    color: var(--ink, #ffffff);
    font-size: 13.5px;
    font-family: inherit;
    resize: vertical;
    height: 44px;
    min-height: 40px;
    max-height: 180px;
    line-height: 1.45;
    scrollbar-width: thin;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.mesh-composer-textarea:focus {
    outline: none;
    border-color: var(--gold, #d4af37);
    box-shadow: 0 0 8px var(--gold-glow, rgba(212, 175, 55, 0.15));
}

.mesh-send-btn {
    background: var(--gold, #d4af37);
    color: #07090e;
    font-weight: 700;
    font-size: 13px;
    padding: 0 16px;
    height: 42px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Image Preview Modal */
.mesh-image-modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: fadeIn 0.15s ease-out;
}

.mesh-image-modal-dialog {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.mesh-image-modal-img {
    max-width: 100%;
    max-height: 85vh;
    border-radius: 8px;
    border: 1px solid var(--gold-dim, #997b24);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.8);
    object-fit: contain;
}

.mesh-image-modal-close {
    position: absolute;
    top: -14px;
    right: -14px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #e53e3e;
    color: #ffffff;
    border: 2px solid #ffffff;
    font-weight: bold;
    font-size: 18px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    transition: transform 0.15s ease;
}

.mesh-image-modal-close:hover {
    transform: scale(1.1);
}

.mesh-send-btn:hover:not(:disabled) {
    background: var(--gold-bright, #f3d068);
    box-shadow: 0 0 14px var(--gold-glow, rgba(212, 175, 55, 0.35));
}

.mesh-send-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.mesh-composer-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2px 4px 0 4px;
    font-size: 11px;
    color: var(--ink-dim, #718096);
    flex-wrap: wrap;
    gap: 6px;
}

.mesh-composer-quick-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

.mesh-quick-btn {
    background: rgba(22, 28, 42, 0.60);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 4px;
    color: var(--ink-secondary, #a0aec0);
    font-size: 10.5px;
    padding: 2px 6px;
    cursor: pointer;
    font-family: 'JetBrains Mono', monospace;
    transition: all 0.15s ease;
}

.mesh-quick-btn:hover {
    background: rgba(35, 45, 66, 0.90);
    border-color: var(--gold-dim, #997b24);
    color: var(--gold-bright, #f3d068);
}

/* ── Role Card Accents ── */
.mesh-card.role-sovereign {
    border-left: 3px solid #d4af37;
}

.mesh-card.role-vision {
    border-left: 3px solid #9f7aea;
}

.mesh-card.role-jorel {
    border-left: 3px solid #00d2ff;
}

.mesh-card.role-desk {
    border-left: 3px solid #38a169;
}

.mesh-card.role-scribe {
    border-left: 3px solid #718096;
}

/* ── Typing Indicator Card ── */
.mesh-card-typing {
    border-left: 3px solid var(--gold, #d4af37) !important;
    background: rgba(16, 22, 34, 0.75) !important;
    padding: 6px 12px;
    animation: pulseTypingCard 2s infinite ease-in-out;
}

@keyframes pulseTypingCard {
    0%, 100% {
        border-color: rgba(212, 175, 55, 0.4);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    }
    50% {
        border-color: rgba(212, 175, 55, 1.0);
        box-shadow: 0 2px 14px rgba(212, 175, 55, 0.2);
    }
}

.mesh-typing-dots {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 0 2px 0;
}

.mesh-dot {
    width: 6px;
    height: 6px;
    background-color: var(--gold, #d4af37);
    border-radius: 50%;
    display: inline-block;
    animation: meshDotBounce 1.4s infinite ease-in-out both;
}

.mesh-dot.dot-1 {
    animation-delay: -0.32s;
}

.mesh-dot.dot-2 {
    animation-delay: -0.16s;
}

.mesh-dot.dot-3 {
    animation-delay: 0s;
}

@keyframes meshDotBounce {
    0%, 80%, 100% {
        transform: scale(0.6);
        opacity: 0.35;
    }
    40% {
        transform: scale(1.25) translateY(-3px);
        opacity: 1.0;
        background-color: var(--gold-bright, #f3d068);
        box-shadow: 0 0 6px var(--gold, #d4af37);
    }
}

/* ── Mobile Slide-Over Drawer ── */
.mesh-drawer-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.70);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 100;
    display: flex;
    justify-content: flex-end;
    animation: fadeInBackdrop 0.2s ease-out;
}

@keyframes fadeInBackdrop {
    from { opacity: 0; }
    to { opacity: 1; }
}

.mesh-drawer-content {
    width: 280px;
    max-width: 85vw;
    height: 100%;
    background: #0b0f1a;
    border-left: 1px solid var(--line, rgba(255, 255, 255, 0.10));
    padding: 16px 14px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow-y: auto;
    box-shadow: -6px 0 30px rgba(0, 0, 0, 0.6);
    animation: slideDrawerRight 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes slideDrawerRight {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

.mesh-drawer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 10px;
}

.mesh-drawer-title {
    font-family: 'Outfit', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: var(--gold-bright, #f3d068);
    margin: 0;
}

/* ── Responsive Breakpoints (Tablet & Mobile) ── */
@media (max-width: 860px) {
    .mesh-sidebar {
        display: none !important;
    }

    .mesh-mobile-channel-bar {
        display: flex !important;
    }

    .mesh-mobile-drawer-btn {
        display: inline-flex !important;
    }

    .mesh-header-desc {
        display: none !important;
    }

    .mesh-header {
        padding: 6px 12px;
    }

    /* THE HEADER WRAPS ON A PHONE, IT DOES NOT SQUASH.
       MEASURED 2026-09-06 at 375x812: this row holds 387px of natural content
       -- a relay pill, a 140px search box, and two ~100px buttons -- inside a
       263px box, next to a channel title crushed to "#...". With nowrap it
       clipped 161px; letting the children shrink instead made it worse, folding
       "3 Relays - Ollama 8b" into a 67px-tall four-line blob and both buttons
       into two lines each.

       Neither squashing nor side-scrolling suits a header. It wraps:
         row 1  channel name + Locks + Agents   (~270px, fits)
         row 2  search, full width
       and the relay pill is hidden, for the same reason .mesh-header-desc is
       hidden here -- it is status to read, not a control to reach, and it is
       also what blobbed worst. */
    .mesh-header {
        flex-wrap: wrap;
        row-gap: 6px;
    }

    .mesh-header-actions {
        flex-wrap: wrap;
        row-gap: 6px;
        min-width: 0;
    }

    .mesh-telemetry-pill {
        display: none !important;
    }

    .mesh-header-search-wrap {
        flex: 1 0 100%;
        order: 3;
    }

    .mesh-header-actions > .btn {
        flex-shrink: 0;
    }

    /* flex-basis 100% plus the row's own padding overshot the box by 9px, which
       .mesh-main-area then clipped. border-box keeps it inside. */
    .mesh-header-search-wrap,
    .mesh-header-search-wrap input {
        box-sizing: border-box;
        max-width: 100%;
    }

    /* The title gets the leftover space and ellipsises rather than shrinking to
       "#..." — a channel you cannot read is a header that does nothing. */
    .mesh-header-left {
        min-width: 0;
        flex: 1 1 auto;
    }

    .mesh-header-title {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mesh-feed {
        padding: 8px 10px;
        gap: 6px;
    }

    .mesh-card {
        padding: 7px 10px;
    }

    .mesh-composer {
        padding: 6px 10px 8px 10px;
    }
}

/* The feed renders only the newest messages; this is how the rest are reached.
   Full width and at the TOP of the feed, because that is where older content
   lives and where a reader scrolling up arrives. */
.mesh-show-older {
    display: block;
    width: 100%;
    padding: 8px 12px;
    margin-bottom: 6px;
    background: var(--surface, rgba(12, 16, 26, 0.85));
    border: 1px dashed var(--line, rgba(255, 255, 255, 0.14));
    border-radius: var(--radius-sm, 8px);
    color: var(--ink-muted, #93a1b5);
    font-family: var(--sans, sans-serif);
    font-size: 12px;
    cursor: pointer;
}

.mesh-show-older:hover {
    color: var(--ink, #ffffff);
    border-color: var(--line, rgba(255, 255, 255, 0.28));
}

/* ── Autocomplete Trigger Popup (@, /, #) ── */
.mesh-autocomplete-popup {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 14px;
    right: 14px;
    max-width: 480px;
    max-height: 240px;
    background: #0d121d;
    border: 1px solid var(--gold-dim, #997b24);
    border-radius: 8px;
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.7);
    overflow-y: auto;
    z-index: 100;
    display: flex;
    flex-direction: column;
    padding: 4px;
    animation: fadeIn 0.1s ease-out;
}

.mesh-autocomplete-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    border-radius: 5px;
    background: transparent;
    border: none;
    color: var(--ink, #ffffff);
    cursor: pointer;
    text-align: left;
    transition: background 0.1s ease;
}

.mesh-autocomplete-item:hover,
.mesh-autocomplete-item.selected {
    background: rgba(212, 175, 55, 0.18);
}

.mesh-autocomplete-icon {
    font-size: 16px;
    flex-shrink: 0;
}

.mesh-autocomplete-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.mesh-autocomplete-title {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--gold-bright, #f3d068);
}

.mesh-autocomplete-desc {
    font-size: 10.5px;
    color: var(--ink-secondary, #a0aec0);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Code Blocks & Syntax Formatting ── */
.mesh-code-block-wrap {
    margin: 6px 0;
    background: #06080e;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 6px;
    overflow: hidden;
}

.mesh-code-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 10px;
    background: rgba(255, 255, 255, 0.04);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.mesh-code-lang {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--gold-dim, #997b24);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-family: 'JetBrains Mono', monospace;
}

.mesh-code-copy-btn {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 4px;
    color: var(--ink-secondary, #a0aec0);
    font-size: 10px;
    padding: 2px 6px;
    cursor: pointer;
    transition: all 0.12s ease;
}

.mesh-code-copy-btn:hover {
    border-color: var(--gold, #d4af37);
    color: var(--gold-bright, #f3d068);
    background: rgba(212, 175, 55, 0.12);
}

.mesh-code-pre {
    margin: 0;
    padding: 8px 10px;
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 12px;
    line-height: 1.45;
    color: #e2e8f0;
    overflow-x: auto;
    scrollbar-width: thin;
}

/* Inline Code */
.mesh-inline-code {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11.5px;
    background: rgba(212, 175, 55, 0.10);
    color: var(--gold-bright, #f3d068);
    padding: 1px 5px;
    border-radius: 4px;
    border: 1px solid rgba(212, 175, 55, 0.20);
}

/* Quote Block */
.mesh-quote-block {
    margin: 4px 0;
    padding: 4px 10px;
    border-left: 3px solid var(--gold, #d4af37);
    background: rgba(212, 175, 55, 0.06);
    border-radius: 0 4px 4px 0;
    font-style: italic;
    color: var(--ink-secondary, #cbd5e0);
    font-size: 12.5px;
}

.mesh-quote-line {
    margin: 2px 0;
    font-size: 12.5px;
    line-height: 1.4;
}

/* ── Rich Markdown Elements ── */
.mesh-md-h1 {
    font-family: 'Outfit', sans-serif;
    font-size: 16.5px;
    font-weight: 700;
    color: var(--gold-bright, #f3d068);
    margin: 10px 0 4px 0;
    border-bottom: 1px solid rgba(212, 175, 55, 0.20);
    padding-bottom: 3px;
    letter-spacing: -0.01em;
}

.mesh-md-h2 {
    font-family: 'Outfit', sans-serif;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--gold-bright, #f3d068);
    margin: 8px 0 3px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 2px;
}

.mesh-md-h3 {
    font-family: 'Outfit', sans-serif;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink, #ffffff);
    margin: 6px 0 2px 0;
}

.mesh-md-h4 {
    font-family: 'Outfit', sans-serif;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink-secondary, #cbd5e0);
    margin: 4px 0 2px 0;
}

.mesh-md-hr {
    border: none;
    height: 1px;
    background: linear-gradient(90deg, rgba(212, 175, 55, 0.45), rgba(255, 255, 255, 0.08), transparent);
    margin: 8px 0;
}

.mesh-md-ul {
    margin: 4px 0 6px 0;
    padding-left: 20px;
    list-style-type: disc;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mesh-md-ol {
    margin: 4px 0 6px 0;
    padding-left: 20px;
    list-style-type: decimal;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mesh-md-li {
    font-size: 13px;
    line-height: 1.45;
    color: var(--ink, #f0f4f8);
}

.mesh-table-wrap {
    overflow-x: auto;
    margin: 6px 0;
    border-radius: 6px;
    border: 1px solid var(--line, rgba(255, 255, 255, 0.12));
    background: var(--surface-glass, rgba(14, 18, 30, 0.75));
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
    scrollbar-width: thin;
}

.mesh-md-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    font-family: 'JetBrains Mono', 'Inter', monospace;
}

.mesh-md-table th {
    background: rgba(22, 28, 44, 0.95);
    color: var(--gold-bright, #f3d068);
    font-weight: 600;
    padding: 6px 10px;
    border-bottom: 1px solid var(--gold-dim, #997b24);
    white-space: nowrap;
    letter-spacing: 0.02em;
}

.mesh-md-table td {
    padding: 5px 10px;
    border-bottom: 1px solid var(--line, rgba(255, 255, 255, 0.06));
    color: var(--ink, #f0f4f8);
    white-space: nowrap;
}

.mesh-md-table tbody tr:hover {
    background: rgba(212, 175, 55, 0.08);
}

.mesh-align-left {
    text-align: left;
}

.mesh-align-center {
    text-align: center;
}

.mesh-align-right {
    text-align: right;
}

.mesh-md-bold {
    font-weight: 700;
    color: #ffffff;
}

.mesh-md-italic {
    font-style: italic;
    color: var(--ink-secondary, #cbd5e0);
}

.mesh-md-link {
    color: #63b3ed;
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color 0.12s ease;
    cursor: pointer;
}

.mesh-md-link:hover {
    color: var(--gold-bright, #f3d068);
}

.mesh-md-spacer {
    height: 4px;
}

/* Mention Pill */
.mesh-mention-pill {
    display: inline-block;
    background: rgba(212, 175, 55, 0.20);
    color: var(--gold-bright, #f3d068);
    font-weight: 700;
    padding: 0 5px;
    border-radius: 4px;
    font-size: 12px;
    border: 1px solid var(--gold-dim, #997b24);
}

/* Channel Pill */
.mesh-channel-pill {
    display: inline-block;
    background: rgba(66, 153, 225, 0.15);
    color: #63b3ed;
    font-weight: 600;
    padding: 0 5px;
    border-radius: 4px;
    font-size: 12px;
    border: 1px solid rgba(66, 153, 225, 0.30);
    cursor: pointer;
    transition: background 0.12s ease;
}

.mesh-channel-pill:hover {
    background: rgba(66, 153, 225, 0.30);
}

/* Reply Action Button on Cards */
.mesh-card-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.mesh-card-reply-btn {
    background: transparent;
    border: none;
    color: var(--ink-dim, #718096);
    font-size: 11px;
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 3px;
    transition: color 0.12s ease;
}

.mesh-card-reply-btn:hover {
    color: var(--gold-bright, #f3d068);
}

/* Search Bar in Header */
.mesh-header-search-wrap {
    display: flex;
    align-items: center;
    position: relative;
}

.mesh-search-input {
    background: rgba(0, 0, 0, 0.40);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    padding: 3px 8px;
    font-size: 11.5px;
    color: var(--ink, #ffffff);
    width: 140px;
    transition: all 0.15s ease;
}

.mesh-search-input:focus {
    outline: none;
    width: 200px;
    border-color: var(--gold, #d4af37);
    box-shadow: 0 0 8px rgba(212, 175, 55, 0.2);
}

/* Telemetry Pill in Header */
.mesh-telemetry-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(72, 187, 120, 0.12);
    border: 1px solid rgba(72, 187, 120, 0.30);
    color: #48bb78;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 600;
}

/* Jump to Bottom Floating Button */
.mesh-jump-bottom-btn {
    position: absolute;
    bottom: 70px;
    right: 20px;
    background: var(--surface-raised, rgba(22, 28, 42, 0.95));
    border: 1px solid var(--gold, #d4af37);
    color: var(--gold-bright, #f3d068);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    z-index: 50;
    display: flex;
    align-items: center;
    gap: 4px;
    animation: fadeIn 0.15s ease-out;
}

.mesh-jump-bottom-btn:hover {
    background: var(--gold, #d4af37);
    color: #07090e;
}

/* Drag-and-Drop Active Overlay */
.mesh-drag-active::after {
    content: "📥 Drop files or screenshots to attach to channel";
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    background: rgba(7, 9, 14, 0.88);
    border: 2px dashed var(--gold, #d4af37);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 700;
    color: var(--gold-bright, #f3d068);
    z-index: 100;
    pointer-events: none;
}

/* A COMPACT LINE FOR MACHINE CHATTER.
   Task locks and grant announcements ride the same Kind 24150 frame as human
   coordination and were rendered as full cards — avatar, role, timestamp, reply
   button — so "Task lock acquire for redeploy:dev" took the same room as a reviewed
   finding. MEASURED on a phone 2026-09-08: two consecutive lock notices held a third
   of the viewport directly beneath the newest real message. */
.mesh-card-notice {
    display: flex;
    gap: 8px;
    align-items: baseline;
    padding: 4px 10px;
    background: transparent;
    border: none;
    border-left: 2px solid var(--border-subtle, rgba(255, 255, 255, 0.10));
    border-radius: 0;
    opacity: 0.55;
    font-size: 11.5px;
}

.mesh-card-notice .mesh-notice-text {
    color: var(--text-muted, rgba(255, 255, 255, 0.55));
    overflow-wrap: anywhere;
}

/* "Show more" on a long post. A chat is read newest-first, and one 3,000-character
   message filled about four phone screens — so three of them put the newest line
   twelve screens down. The card renders ~700 characters (about one screen at 390px)
   and this reveals the rest, with the full length named so the reader can decide. */
.mesh-card-expand {
    display: block;
    width: 100%;
    margin-top: 6px;
    padding: 5px 10px;
    background: var(--surface-raised, rgba(22, 28, 42, 0.90));
    color: var(--text-muted, rgba(255, 255, 255, 0.65));
    border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.10));
    border-radius: 6px;
    font-size: 11.5px;
    cursor: pointer;
    text-align: left;
}

.mesh-card-expand:hover {
    color: var(--text-primary, #fff);
    border-color: var(--border-strong, rgba(255, 255, 255, 0.22));
}