/* =====================================================
   AXIOS - Split View Layout Styles
   ===================================================== */

/* CSS Variables */
:root {
    --bg-primary: #0a0a0b;
    --bg-secondary: #111113;
    --bg-tertiary: #1a1a1d;
    --bg-hover: #222225;
    --border: #2a2a2e;
    --border-light: #3a3a3e;
    --text-primary: #e8e8ed;
    --text-secondary: #a0a0a8;
    --text-muted: #6a6a72;
    --accent: #6366f1;
    --accent-hover: #818cf8;

    /* Type colors */
    --type-law: #f59e0b;
    --type-principle: #10b981;
    --type-theory: #6366f1;
    --type-effect: #ec4899;
    --type-bias: #f43f5e;
    --type-paradox: #8b5cf6;
    --type-theorem: #84cc16;
    --type-rule: #06b6d4;
    --type-heuristic: #f97316;
    --type-fallacy: #ef4444;
    --type-finding: #0ea5e9;

    /* Layout */
    --header-height: 56px;
    --filters-height: 44px;
    --panel-toc-width: 240px;
    --panel-detail-width: 380px;
    --panel-min-width: 200px;
}

[data-theme="light"] {
    --bg-primary: #ffffff;
    --bg-secondary: #f8f9fa;
    --bg-tertiary: #f0f1f3;
    --bg-hover: #e8e9eb;
    --border: #e0e0e4;
    --border-light: #d0d0d4;
    --text-primary: #1a1a1d;
    --text-secondary: #4a4a52;
    --text-muted: #8a8a92;
}

/* Reset & Base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    background: var(--bg-primary);
    color: var(--text-primary);
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

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

.header-left {
    display: flex;
    align-items: center;
    gap: 20px;
}

/* Role Tabs */
.role-tabs {
    display: flex;
    gap: 4px;
    margin-left: 8px;
}

.role-tab {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-secondary);
    font-family: inherit;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.role-tab:hover {
    background: var(--bg-hover);
    border-color: var(--accent);
    color: var(--text-primary);
}

.role-tab.active {
    background: var(--accent);
    border-color: var(--accent);
    color: white;
}

.role-tab-icon {
    font-size: 1rem;
}

.role-tab[data-role="health-systems-pm"] {
    background: linear-gradient(135deg, transparent 0%, rgba(16, 185, 129, 0.1) 100%);
    border-color: rgba(16, 185, 129, 0.3);
}

.role-tab[data-role="health-systems-pm"]:hover {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(16, 185, 129, 0.25) 100%);
    border-color: #10b981;
}

.role-tab[data-role="health-systems-pm"].active {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border-color: #10b981;
    color: white;
}

.logo {
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: 2px;
}

.logo-accent {
    color: var(--accent);
}

.header-center {
    flex: 1;
    max-width: 600px;
    margin: 0 auto;
}

.search-container {
    display: flex;
    align-items: center;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0 12px;
    transition: border-color 0.2s;
}

.search-container:focus-within {
    border-color: var(--accent);
}

.search-icon {
    color: var(--text-muted);
    font-size: 1rem;
}

#search-input {
    flex: 1;
    background: none;
    border: none;
    padding: 10px 12px;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.9rem;
    outline: none;
}

#search-input::placeholder {
    color: var(--text-muted);
}

.analyze-toggle {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 6px;
    border-radius: 4px;
    transition: all 0.2s;
}

.analyze-toggle:hover,
.analyze-toggle.active {
    background: var(--accent);
    color: white;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.view-toggles {
    display: flex;
    gap: 4px;
}

.view-btn,
.theme-toggle {
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    padding: 8px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
}

.view-btn:hover,
.theme-toggle:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.view-btn.active {
    background: var(--accent);
    border-color: var(--accent);
    color: white;
}

/* Analyzer Panel */
.analyzer-panel {
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
    overflow: hidden;
    transition: max-height 0.3s ease;
    max-height: 200px;
}

.analyzer-panel.collapsed {
    max-height: 0;
    border-bottom: none;
}

.analyzer-content {
    padding: 12px 16px;
}

#context-input {
    width: 100%;
    height: 60px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 10px 12px;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.85rem;
    resize: none;
    outline: none;
}

#context-input:focus {
    border-color: var(--accent);
}

.analyzer-actions {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

#analysis-depth {
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 6px 10px;
    color: var(--text-primary);
    font-family: inherit;
}

.btn-primary {
    background: var(--accent);
    border: none;
    border-radius: 4px;
    padding: 6px 16px;
    color: white;
    font-family: inherit;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
}

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

.detected-themes {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

.theme-tag {
    background: var(--accent);
    color: white;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 500;
}

/* Type Filters */
.type-filters {
    height: var(--filters-height);
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    padding: 0 16px;
    gap: 6px;
    overflow-x: auto;
    flex-shrink: 0;
}

.type-filter {
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 5px 12px;
    color: var(--text-secondary);
    font-family: inherit;
    font-size: 0.75rem;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s;
}

.type-filter:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.type-filter.active {
    background: var(--accent);
    border-color: var(--accent);
    color: white;
}

.type-filter[data-type="law"].active { background: var(--type-law); border-color: var(--type-law); }
.type-filter[data-type="principle"].active { background: var(--type-principle); border-color: var(--type-principle); }
.type-filter[data-type="theory"].active { background: var(--type-theory); border-color: var(--type-theory); }
.type-filter[data-type="effect"].active { background: var(--type-effect); border-color: var(--type-effect); }
.type-filter[data-type="bias"].active { background: var(--type-bias); border-color: var(--type-bias); }
.type-filter[data-type="paradox"].active { background: var(--type-paradox); border-color: var(--type-paradox); }
.type-filter[data-type="theorem"].active { background: var(--type-theorem); border-color: var(--type-theorem); }
.type-filter[data-type="rule"].active { background: var(--type-rule); border-color: var(--type-rule); }
.type-filter[data-type="finding"].active { background: var(--type-finding); border-color: var(--type-finding); }

/* Split Container */
.split-container {
    display: flex;
    flex: 1;
    overflow: hidden;
    position: relative;
}

/* Panels */
.panel {
    display: flex;
    flex-direction: column;
    background: var(--bg-primary);
    border-right: 1px solid var(--border);
    overflow: hidden;
}

.panel:last-child {
    border-right: none;
}

.panel-toc {
    width: var(--panel-toc-width);
    min-width: var(--panel-min-width);
    flex-shrink: 0;
}

.panel-results {
    flex: 1;
    min-width: 300px;
}

.panel-detail {
    width: var(--panel-detail-width);
    min-width: var(--panel-min-width);
    flex-shrink: 0;
}

.panel.collapsed {
    width: 0 !important;
    min-width: 0 !important;
    border: none;
    overflow: hidden;
}

/* Expand tabs for collapsed panels */
.expand-tab {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 80px;
    background: var(--accent);
    border: 1px solid var(--accent);
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 14px;
    z-index: 1000;
    transition: all 0.2s;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.expand-tab:hover {
    background: var(--accent-hover);
    color: white;
    transform: translateY(-50%) scale(1.05);
}

.expand-tab.left {
    left: 0;
    border-left: none;
    border-radius: 0 4px 4px 0;
}

.expand-tab.right {
    right: 0;
    border-right: none;
    border-radius: 4px 0 0 4px;
}

#panel-toc.collapsed ~ .expand-tab.left,
.panel.collapsed + .resize-handle + .expand-tab {
    display: flex;
}

.panel-header {
    height: 40px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    padding: 0 12px;
    gap: 8px;
    flex-shrink: 0;
}

.panel-title {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.panel-collapse {
    margin-left: auto;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.2s;
}

.panel-collapse:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.results-count {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.btn-icon {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: all 0.2s;
}

.btn-icon:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.panel-content {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
}

/* Resize Handle */
.resize-handle {
    width: 4px;
    background: var(--border);
    cursor: col-resize;
    transition: background 0.2s;
    flex-shrink: 0;
}

.resize-handle:hover,
.resize-handle.active {
    background: var(--accent);
}

/* TOC Tree */
.toc-tree {
    font-size: 0.85rem;
}

.toc-category {
    margin-bottom: 4px;
}

.toc-category-header {
    display: flex;
    align-items: center;
    padding: 8px 10px;
    cursor: pointer;
    border-radius: 6px;
    transition: background 0.15s;
    user-select: none;
}

.toc-category-header:hover {
    background: var(--bg-hover);
}

.toc-toggle {
    width: 16px;
    color: var(--text-muted);
    font-size: 0.7rem;
    transition: transform 0.2s;
}

.toc-category.expanded .toc-toggle {
    transform: rotate(90deg);
}

.toc-category-name {
    flex: 1;
    font-weight: 500;
    color: var(--text-primary);
}

.toc-category-count {
    font-size: 0.7rem;
    color: var(--text-muted);
    background: var(--bg-tertiary);
    padding: 2px 6px;
    border-radius: 10px;
}

.toc-fields {
    display: none;
    margin-left: 16px;
    border-left: 1px solid var(--border);
    padding-left: 8px;
}

.toc-category.expanded .toc-fields {
    display: block;
}

.toc-field {
    display: flex;
    align-items: center;
    padding: 6px 10px;
    cursor: pointer;
    border-radius: 4px;
    font-size: 0.8rem;
    color: var(--text-secondary);
    transition: all 0.15s;
}

.toc-field:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.toc-field.active {
    background: var(--accent);
    color: white;
}

.toc-field-name {
    flex: 1;
}

.toc-field-count {
    font-size: 0.7rem;
    opacity: 0.7;
}

.toc-footer {
    padding: 12px;
    border-top: 1px solid var(--border);
    margin-top: auto;
}

.active-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 8px;
}

.active-filter {
    display: flex;
    align-items: center;
    gap: 4px;
    background: var(--accent);
    color: white;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.7rem;
}

.active-filter-remove {
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s;
}

.active-filter-remove:hover {
    opacity: 1;
}

.entry-count {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* Results List */
.results-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.result-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px;
    cursor: pointer;
    transition: all 0.15s;
    min-height: 100px;
    display: flex;
    flex-direction: column;
}

.result-card:hover {
    border-color: var(--border-light);
    background: var(--bg-tertiary);
}

.result-card.selected {
    border-color: var(--accent);
    background: var(--bg-tertiary);
}

.result-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 6px;
}

.result-card-name {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-primary);
    line-height: 1.3;
}

.result-card-badge {
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    flex-shrink: 0;
    margin-left: 8px;
}

.result-card-badge.law { background: var(--type-law); color: #000; }
.result-card-badge.principle { background: var(--type-principle); color: #000; }
.result-card-badge.theory { background: var(--type-theory); color: #fff; }
.result-card-badge.effect { background: var(--type-effect); color: #fff; }
.result-card-badge.bias { background: var(--type-bias); color: #fff; }
.result-card-badge.paradox { background: var(--type-paradox); color: #fff; }
.result-card-badge.theorem { background: var(--type-theorem); color: #000; }
.result-card-badge.rule { background: var(--type-rule); color: #000; }
.result-card-badge.heuristic { background: var(--type-heuristic); color: #000; }
.result-card-badge.fallacy { background: var(--type-fallacy); color: #fff; }
.result-card-badge.finding { background: var(--type-finding); color: #fff; }

.result-card-meta {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.result-card-statement {
    font-size: 0.8rem;
    color: var(--text-secondary);
    line-height: 1.4;
    margin-top: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex: 1;
    min-height: 2.8em;
}

/* Mobile Back Button - hidden on desktop */
.mobile-back-btn {
    display: none;
    width: 100%;
    padding: 12px 16px;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    margin-bottom: 16px;
    text-align: center;
}

.mobile-back-btn:hover {
    opacity: 0.9;
}

@media (max-width: 768px) {
    .mobile-back-btn {
        display: none; /* Hidden - detail is always at top */
    }
}

/* Detail Panel */
.detail-content {
    padding: 8px;
}

.detail-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--text-muted);
    text-align: center;
    padding: 40px 20px;
}

.detail-empty-icon {
    font-size: 3rem;
    margin-bottom: 12px;
    opacity: 0.5;
}

.detail-header {
    margin-bottom: 20px;
}

.detail-name {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 8px;
    line-height: 1.3;
}

.detail-badges {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.detail-badge {
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
}

.detail-badge.type {
    text-transform: uppercase;
}

.detail-badge.field {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
}

.detail-section {
    margin-bottom: 20px;
}

.detail-section-title {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.detail-statement {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--text-primary);
}

.detail-formula {
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 12px 16px;
    font-family: 'SF Mono', monospace;
    font-size: 0.9rem;
    color: var(--accent);
}

.detail-meta-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.detail-meta-item {
    background: var(--bg-secondary);
    border-radius: 6px;
    padding: 10px 12px;
}

.detail-meta-label {
    font-size: 0.65rem;
    color: var(--text-muted);
    text-transform: uppercase;
    margin-bottom: 4px;
}

.detail-meta-value {
    font-size: 0.85rem;
    color: var(--text-primary);
}

.detail-significance {
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--text-secondary);
    font-style: italic;
}

.detail-related-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.detail-related-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--bg-secondary);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.detail-related-item:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.detail-related-arrow {
    color: var(--text-muted);
}

.detail-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.detail-tag {
    background: var(--bg-tertiary);
    color: var(--text-muted);
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 0.7rem;
}

/* Application to Role (role-specific entries) */
.detail-application {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(16, 185, 129, 0.15) 100%);
    border: 1px solid rgba(16, 185, 129, 0.25);
    border-radius: 8px;
    padding: 14px 16px;
    margin-top: 16px;
}

.detail-application .detail-section-title {
    color: #10b981;
    margin-bottom: 10px;
}

.detail-application-text {
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--text-primary);
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-primary);
}

::-webkit-scrollbar-thumb {
    background: var(--bg-tertiary);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--border);
}

/* Mobile Responsive */
@media (max-width: 1024px) {
    .panel-toc {
        width: 200px;
    }
    .panel-detail {
        width: 320px;
    }
}

@media (max-width: 768px) {
    .split-container {
        flex-direction: column;
    }

    .panel-toc,
    .panel-detail {
        width: 100% !important;
        height: 40vh;
        border-right: none;
        border-bottom: 1px solid var(--border);
    }

    .resize-handle {
        display: none;
    }

    .panel-results {
        flex: 1;
    }
}

/* =====================================================
   NO-FAIL DESIGN COMPONENTS
   ===================================================== */

/* Collection Button */
.btn-collection {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
    margin-right: 12px;
}

.btn-collection:hover {
    background: var(--bg-hover);
    border-color: var(--accent);
    color: var(--accent);
}

.collection-icon {
    font-size: 1rem;
}

.collection-count {
    font-size: 0.75rem;
    background: var(--bg-tertiary);
    padding: 2px 6px;
    border-radius: 10px;
    min-width: 20px;
    text-align: center;
}

.collection-count.has-favorites {
    background: var(--accent);
    color: white;
}

/* Type Filter Dropdown */
.type-filter-dropdown {
    padding: 6px 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-secondary);
    font-size: 0.8rem;
    cursor: pointer;
    outline: none;
}

.type-filter-dropdown:hover {
    background: var(--bg-hover);
}

.type-filter-dropdown:focus {
    border-color: var(--accent);
}

/* Welcome Card (North Star) */
.welcome-card {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 32px 40px;
    text-align: center;
    z-index: 1000;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
    max-width: 440px;
}

.welcome-card.visible {
    display: block;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translate(-50%, -50%) scale(0.95); }
    to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.welcome-close {
    position: absolute;
    top: 12px;
    right: 16px;
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 1.5rem;
    cursor: pointer;
    line-height: 1;
}

.welcome-close:hover {
    color: var(--text-primary);
}

.welcome-card h2 {
    font-size: 1.5rem;
    margin-bottom: 12px;
    color: var(--text-primary);
}

.welcome-card p {
    color: var(--text-secondary);
    margin-bottom: 24px;
    line-height: 1.5;
}

.welcome-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}

.welcome-btn {
    padding: 10px 20px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-primary);
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.2s;
}

.welcome-btn:hover {
    background: var(--bg-hover);
    border-color: var(--accent);
}

.welcome-btn.primary {
    background: var(--accent);
    border-color: var(--accent);
    color: white;
}

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

/* Recently Viewed Section */
.toc-section {
    padding: 12px;
}

.toc-section-header {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.recently-viewed {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.recent-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 8px;
    background: var(--bg-tertiary);
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.15s;
}

.recent-item:hover {
    background: var(--bg-hover);
}

.recent-name {
    font-size: 0.8rem;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

.recent-type {
    font-size: 0.65rem;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
    background: var(--bg-hover);
    color: var(--text-muted);
}

.recent-type.law { background: rgba(245, 158, 11, 0.15); color: var(--type-law); }
.recent-type.principle { background: rgba(16, 185, 129, 0.15); color: var(--type-principle); }
.recent-type.bias { background: rgba(244, 63, 94, 0.15); color: var(--type-bias); }
.recent-type.effect { background: rgba(236, 72, 153, 0.15); color: var(--type-effect); }

.recent-empty {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-style: italic;
    padding: 8px;
}

.toc-divider {
    height: 1px;
    background: var(--border);
    margin: 8px 12px;
}

/* Favorite Button */
.detail-header-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

.btn-favorite {
    background: none;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 1.2rem;
    cursor: pointer;
    color: var(--text-muted);
    transition: all 0.2s;
    flex-shrink: 0;
}

.btn-favorite:hover {
    color: #fbbf24;
    border-color: #fbbf24;
    background: rgba(251, 191, 36, 0.1);
}

.btn-favorite.active {
    color: #fbbf24;
    border-color: #fbbf24;
    background: rgba(251, 191, 36, 0.15);
}

/* Empty State */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
}

.empty-icon {
    font-size: 3rem;
    margin-bottom: 16px;
    opacity: 0.6;
}

.empty-title {
    font-size: 1.1rem;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.empty-hint {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 16px;
}

.empty-suggestions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 20px;
}

.suggestion-btn {
    padding: 6px 14px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 20px;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.85rem;
    transition: all 0.2s;
}

.suggestion-btn:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: white;
}

.btn-secondary {
    padding: 10px 20px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.2s;
}

.btn-secondary:hover {
    background: var(--bg-hover);
    border-color: var(--accent);
    color: var(--accent);
}

/* PDF Save Button */
#save-pdf-btn {
    display: none;
    align-items: center;
    justify-content: center;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    padding: 4px 8px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 1rem;
    margin-left: auto;
    margin-right: 8px;
}

#save-pdf-btn:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: white;
}

/* Mobile responsive for new components */
@media (max-width: 768px) {
    .welcome-card {
        width: 90%;
        padding: 24px;
    }

    .welcome-actions {
        flex-direction: column;
    }

    .btn-collection {
        padding: 6px 8px;
    }

    .collection-count {
        display: none;
    }

    .role-tabs {
        display: none;
    }
}

@media (max-width: 1200px) {
    .role-tab span:not(.role-tab-icon) {
        display: none;
    }

    .role-tab[data-role="all"] {
        display: none;
    }

    .role-tab {
        padding: 8px 10px;
    }

    .role-tab-icon {
        margin: 0;
    }
}

/* =====================================================
   ENHANCED MOBILE RESPONSIVE STYLES
   ===================================================== */

/* Tablet */
@media (max-width: 1024px) {
    :root {
        --header-height: 50px;
        --filters-height: 40px;
    }

    .header {
        padding: 0 12px;
        gap: 10px;
    }

    .logo {
        font-size: 1.2rem;
    }

    .header-center {
        max-width: 400px;
    }

    #search-input {
        font-size: 0.85rem;
        padding: 8px 10px;
    }
}

/* Mobile landscape / small tablet */
@media (max-width: 768px) {
    :root {
        --header-height: auto;
        --filters-height: 36px;
    }

    body {
        overflow-y: auto;
        height: auto;
        min-height: 100vh;
    }

    .header {
        flex-wrap: wrap;
        height: auto;
        padding: 10px 12px;
        gap: 8px;
    }

    .header-left {
        gap: 10px;
    }

    .logo {
        font-size: 1.1rem;
    }

    .header-center {
        order: 3;
        width: 100%;
        max-width: none;
        margin: 0;
    }

    .search-container {
        width: 100%;
    }

    #search-input {
        font-size: 16px; /* Prevents zoom on iOS */
        padding: 10px 12px;
    }

    .header-right {
        gap: 4px;
    }

    .view-btn, .theme-toggle {
        padding: 6px 8px;
        font-size: 0.9rem;
    }

    .type-filters {
        padding: 0 10px;
        gap: 4px;
        -webkit-overflow-scrolling: touch;
    }

    .type-filter {
        padding: 4px 10px;
        font-size: 0.7rem;
    }

    .split-container {
        flex-direction: column;
        height: calc(100vh - 150px);
        overflow: hidden;
        display: grid;
        grid-template-rows: auto 45vh 1fr;
        grid-template-areas:
            "results-header"
            "detail"
            "entries";
    }

    .panel {
        border-right: none !important;
    }

    .panel-toc {
        display: none; /* Hide TOC on mobile by default */
    }

    .panel-toc.mobile-visible {
        display: flex;
        position: fixed;
        top: 0;
        left: 0;
        width: 85%;
        max-width: 300px;
        height: 100vh;
        z-index: 2000;
        box-shadow: 4px 0 20px rgba(0,0,0,0.3);
    }

    /* Mobile layout: Results header -> Detail -> Entries list */
    .panel-results {
        display: contents; /* Let children participate in parent grid */
    }

    .panel-results .panel-header {
        grid-area: results-header;
        background: var(--bg-secondary);
        border-bottom: 1px solid var(--border);
        position: sticky;
        top: 0;
        z-index: 10;
    }

    .panel-results .panel-content {
        grid-area: entries;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        background: var(--bg-primary);
    }

    .panel-detail {
        grid-area: detail;
        width: 100% !important;
        min-width: 0;
        overflow-y: auto;
        border-bottom: 2px solid var(--accent);
        display: flex;
        flex-direction: column;
    }

    .panel-detail .panel-header {
        display: none; /* Hide detail header on mobile */
    }

    .panel-detail .panel-content {
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .panel-detail .detail-content {
        padding: 12px;
    }

    .panel-detail.collapsed {
        display: flex;
    }

    .panel-header {
        height: 36px;
        padding: 0 10px;
    }

    .panel-title {
        font-size: 0.75rem;
    }

    .panel-content {
        padding: 6px;
    }

    .resize-handle {
        display: none;
    }

    .expand-tab {
        display: none !important;
    }

    /* Results cards - 3 clear sections: Name, Category/Author, Definition */
    .result-card {
        padding: 12px;
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
    }

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

    .result-card-name {
        font-size: 0.9rem;
        font-weight: 700;
        flex: 1;
        min-width: 0;
    }

    .result-card-badge {
        font-size: 0.6rem;
        padding: 3px 8px;
        flex-shrink: 0;
    }

    .result-card-meta {
        font-size: 0.75rem;
        color: var(--text-secondary);
        padding: 4px 0;
        border-top: 1px solid var(--border);
        border-bottom: 1px solid var(--border);
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
    }

    .result-card-statement {
        font-size: 0.8rem;
        -webkit-line-clamp: 4;
        line-height: 1.5;
        color: var(--text-secondary);
    }

    /* Detail panel mobile */
    .detail-content {
        padding: 12px;
    }

    .detail-name {
        font-size: 1.1rem;
        word-wrap: break-word;
    }

    .detail-statement {
        font-size: 0.9rem;
    }

    .detail-meta-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .detail-badges {
        flex-wrap: wrap;
    }

    .detail-badge {
        font-size: 0.65rem;
        padding: 2px 8px;
    }

    .detail-section {
        margin-bottom: 16px;
    }

    .detail-significance {
        font-size: 0.8rem;
    }

    .detail-tags {
        gap: 4px;
    }

    .detail-tag {
        font-size: 0.65rem;
        padding: 2px 8px;
    }

    /* Analyzer panel mobile */
    .analyzer-panel {
        max-height: 150px;
    }

    .analyzer-content {
        padding: 8px 12px;
    }

    #context-input {
        height: 50px;
        font-size: 16px; /* Prevents zoom on iOS */
    }

    .analyzer-actions {
        flex-wrap: wrap;
    }
}

/* Mobile portrait */
@media (max-width: 480px) {
    .header {
        padding: 8px 10px;
    }

    .logo {
        font-size: 1rem;
    }

    .view-toggles {
        gap: 2px;
    }

    .view-btn, .theme-toggle {
        padding: 5px 6px;
        font-size: 0.85rem;
    }

    .type-filters {
        padding: 0 8px;
    }

    .type-filter {
        padding: 3px 8px;
        font-size: 0.65rem;
    }

    .result-card {
        padding: 10px;
        gap: 6px;
    }

    .result-card-name {
        font-size: 0.85rem;
        font-weight: 700;
    }

    .result-card-header {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 6px;
    }

    .result-card-badge {
        margin-left: 0;
        font-size: 0.55rem;
        padding: 2px 6px;
    }

    .result-card-meta {
        font-size: 0.7rem;
        padding: 3px 0;
    }

    .result-card-statement {
        font-size: 0.75rem;
        -webkit-line-clamp: 3;
    }

    .detail-name {
        font-size: 1rem;
    }

    .detail-header-top {
        flex-direction: column;
        gap: 8px;
    }

    .btn-favorite {
        align-self: flex-end;
    }

    .welcome-card {
        padding: 20px 16px;
    }

    .welcome-card h2 {
        font-size: 1.2rem;
    }

    .welcome-card p {
        font-size: 0.9rem;
    }
}

/* Ensure text doesn't overflow */
* {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.result-card-name,
.detail-name,
.toc-category-name,
.toc-field-name {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Fix horizontal scroll issues */
html, body {
    max-width: 100%;
    overflow-x: hidden;
}

.split-container,
.panel,
.panel-content,
.results-list {
    max-width: 100%;
}

/* Mobile menu toggle button */
.mobile-menu-btn {
    display: none;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    padding: 8px 10px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 1.1rem;
}

@media (max-width: 768px) {
    .mobile-menu-btn {
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* Mobile overlay for TOC */
.mobile-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 1999;
}

.mobile-overlay.visible {
    display: block;
}

/* Mobile category button - hidden on desktop */
.mobile-category-btn {
    display: none;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.mobile-category-btn:hover {
    opacity: 0.9;
}

@media (max-width: 768px) {
    .mobile-category-btn {
        display: flex;
        align-items: center;
        gap: 4px;
    }

    /* Hide some header elements on mobile to make room */
    .role-tabs {
        display: none;
    }

    .view-toggles {
        display: none;
    }
}

/* Touch-friendly tap targets */
@media (max-width: 768px) {
    .toc-category-header,
    .toc-field,
    .result-card,
    .detail-related-item,
    button {
        min-height: 44px;
        display: flex;
        align-items: center;
    }
}