#app { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }

/* ── Header ── */
header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 16px;
    height: var(--header-h);
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

header h1 {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 3px;
    color: var(--accent);
    flex-shrink: 0;
}

.status { font-size: 9px; transition: color 0.3s; flex-shrink: 0; }
.status.connected    { color: var(--success); }
.status.disconnected { color: var(--error); }

/* ── Desktop nav ── */
#desktop-nav { display: flex; gap: 1px; margin-left: auto; overflow-x: auto; }

.tab {
    background: none;
    border: 1px solid transparent;
    color: var(--text-dim);
    padding: 5px 11px;
    cursor: pointer;
    font-family: var(--font);
    font-size: 11px;
    border-radius: var(--radius);
    white-space: nowrap;
    transition: color 0.15s, background 0.15s;
}
.tab:hover              { color: var(--text); background: var(--surface2); }
.tab.active             { color: var(--accent); border-color: var(--border); background: var(--surface2); }
.tab.has-alert          { color: var(--warning); }
.tab.has-alert.active   { color: var(--warning); border-color: var(--warning-dim); }

/* ── Main / tabs ── */
main { flex: 1; overflow: hidden; position: relative; min-height: 0; }

.tab-content          { display: none; height: 100%; overflow: hidden; }
.tab-content.active   { display: flex; flex-direction: column; }

/* ── Mobile bottom nav (hidden on desktop) ── */
#mobile-nav  { display: none; }
.mobile-only { display: none; }

/* ── Split-pane containers ── */
.split-container { display: flex; height: 100%; overflow: hidden; }

/* Scroll wrapper inside detail panes that don't have a textarea */
.detail-scroll-inner { flex: 1; overflow-y: auto; padding: 16px; }

/* Detail-back-bar: shown only on mobile */
.detail-back-bar {
    display: none;
    align-items: center;
    padding: 6px 12px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

/* Apply sidebar-list styles to all list panes */
#identity-file-list,
#tools-list,
#agents-list,
#logs-date-list,
#logs-file-list {
    overflow-y: auto;
    padding: 6px;
    flex-shrink: 0;
    border-right: 1px solid var(--border);
}