/* Layer order: reset < tokens < base < components < desktop */
@layer reset, tokens, base, components, desktop;

@layer reset {
  *, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  html, body {
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
  }

  body {
    display: flex;
    flex-direction: column;
  }

  ::-webkit-scrollbar { width: 6px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: var(--scrollbar); border-radius: 3px; }
  ::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-hover); }
}

@layer tokens {
  :root {
    color-scheme: light dark;

    /* Responsive horizontal padding */
    --pad-x: 14px;

    /* Core palette — light-dark(light, dark) */
    --bg:           light-dark(hsl(240 10% 97%), hsl(240 33% 4%));
    --bg-card:      light-dark(hsl(0 0% 100%), hsl(240 20% 8%));
    --bg-hover:     light-dark(hsl(240 10% 93%), hsl(240 20% 12%));
    --bg-input:     light-dark(hsl(240 10% 95%), hsl(240 25% 10%));
    --border:       light-dark(hsl(240 6% 85%), hsl(240 17% 18%));
    --border-focus: light-dark(hsl(239 84% 64%), hsl(239 84% 64%));
    --text:         light-dark(hsl(240 6% 10%), hsl(240 5% 90%));
    --text-dim:     light-dark(hsl(240 4% 46%), hsl(240 4% 46%));
    --text-muted:   light-dark(hsl(240 4% 56%), hsl(240 5% 34%));
    --accent:       light-dark(hsl(239 84% 64%), hsl(239 84% 64%));
    --accent-dim:   light-dark(hsl(239 84% 54%), hsl(243 75% 59%));

    /* Tag colors */
    --tag-bg:       light-dark(hsl(244 47% 92%), hsl(244 47% 15%));
    --tag-text:     light-dark(hsl(239 70% 50%), hsl(230 94% 82%));
    --venue-bg:     light-dark(hsl(217 71% 92%), hsl(217 71% 18%));
    --venue-text:   light-dark(hsl(217 60% 42%), hsl(213 94% 78%));
    --time-bg:      light-dark(hsl(30 40% 92%), hsl(20 14% 10%));
    --time-text:    light-dark(hsl(38 80% 40%), hsl(44 92% 56%));

    /* Chat panel */
    --chat-bg:      light-dark(hsl(240 10% 96%), hsl(240 33% 5%));
    --chat-user:    light-dark(hsl(244 47% 92%), hsl(244 47% 15%));
    --chat-ai:      light-dark(hsl(0 0% 98%), hsl(240 6% 10%));

    /* Scrollbar */
    --scrollbar:       light-dark(hsl(240 6% 82%), hsl(240 17% 18%));
    --scrollbar-hover: light-dark(hsl(240 6% 72%), hsl(240 12% 24%));

    /* Board venue colors */
    --v-bharat:    hsl(239 84% 64%);
    --v-bharat-bg: light-dark(hsl(239 84% 64% / 0.10), hsl(239 84% 64% / 0.18));
    --v-expo:      light-dark(hsl(160 60% 38%), hsl(160 84% 40%));
    --v-expo-bg:   light-dark(hsl(160 60% 38% / 0.10), hsl(160 84% 40% / 0.18));
    --v-sushma:    light-dark(hsl(38 92% 44%), hsl(44 92% 56%));
    --v-sushma-bg: light-dark(hsl(38 92% 44% / 0.10), hsl(44 92% 56% / 0.18));
    --v-now:       light-dark(hsl(350 80% 50%), hsl(350 90% 70%));
    --v-now-bg:    light-dark(hsl(350 80% 96%), hsl(350 60% 8%));
    --board-time-col: 48px;

    --radius: 8px;
    --radius-lg: 12px;
    --font-display: 'Instrument Serif', serif;
    --font-body: 'Outfit', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    --font-mono: 'IBM Plex Mono', 'SF Mono', 'Menlo', monospace;
    font-family: var(--font-body);
  }

  /* Manual theme overrides */
  [data-theme="light"] { color-scheme: light; }
  [data-theme="dark"]  { color-scheme: dark; }
}

@layer base {
  html, body {
    background: var(--bg);
    color: var(--text);
  }

  @keyframes blink {
    0%, 80%, 100% { opacity: 0.2; }
    40% { opacity: 1; }
  }
}

@layer components {
  /* ===== Layout ===== */
  .app {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    flex: 1;
    min-height: 0;
    position: relative;
  }

  /* ===== Main panel ===== */
  .main {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
  }

  /* ===== Header / Search ===== */
  .header {
    padding: 12px var(--pad-x) 10px;
    border-bottom: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-shrink: 0;
  }

  .header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }

  .session-count {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    color: var(--text-muted);
    letter-spacing: 0.02em;
  }

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

  .search-row {
    display: flex;
    gap: 8px;
    align-items: center;
  }

  .search-box {
    flex: 1;
    position: relative;
  }

  .search-box svg {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    width: 16px;
    height: 16px;
    pointer-events: none;
  }

  .search-box input {
    width: 100%;
    padding: 10px 12px 10px 34px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 0.82rem;
    outline: none;
    transition: border-color 0.15s;
  }

  .search-box input:focus {
    border-color: var(--border-focus);
  }

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

  /* ===== Filters — horizontal scroll on mobile ===== */
  .filters {
    display: flex;
    gap: 6px;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    mask-image: linear-gradient(to right, black calc(100% - 32px), transparent);
    -webkit-mask-image: linear-gradient(to right, black calc(100% - 32px), transparent);
    padding-bottom: 2px;
  }

  .filters::-webkit-scrollbar {
    display: none;
  }

  .filters.scrolled-end {
    mask-image: none;
    -webkit-mask-image: none;
  }

  .filter-btn {
    padding: 5px 12px;
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    border-radius: 20px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-dim);
    font-family: var(--font-mono);
    font-size: 0.65rem;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
  }

  .filter-btn:hover {
    border-color: var(--text-muted);
    color: var(--text);
  }

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

  /* ===== Theme toggle ===== */
  .theme-toggle {
    padding: 6px;
    min-height: 36px;
    min-width: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--bg-input);
    color: var(--text-dim);
    cursor: pointer;
    transition: all 0.15s;
    flex-shrink: 0;
  }

  .theme-toggle:hover {
    border-color: var(--accent);
    color: var(--text);
  }

  /* ===== Chat toggle ===== */
  .chat-toggle {
    padding: 8px 14px;
    min-height: 36px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--bg-input);
    color: var(--text-dim);
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    flex-shrink: 0;
  }

  .chat-toggle:hover {
    border-color: var(--accent);
    color: var(--text);
  }

  .chat-toggle.active {
    background: var(--accent-dim);
    border-color: var(--accent);
    color: white;
  }

  /* ===== Session list (hidden, kept for test compat) ===== */
  .session-list {
    display: none;
  }

  .session-card {
    padding: 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all 0.15s;
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
    content-visibility: auto;
    contain-intrinsic-size: auto 80px;
  }

  .session-card:hover {
    background: var(--bg-hover);
    border-color: var(--accent);
  }

  .session-title {
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.4;
  }

  .session-meta {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
  }

  .tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
  }

  .tag.time {
    background: var(--time-bg);
    color: var(--time-text);
  }

  .tag.venue {
    background: var(--venue-bg);
    color: var(--venue-text);
  }

  .tag.date {
    background: var(--tag-bg);
    color: var(--tag-text);
  }

  .tag.flagship {
    background: light-dark(hsl(270 50% 92%), hsl(271 81% 14%));
    color: light-dark(hsl(270 60% 50%), hsl(270 95% 85%));
  }

  .session-speakers {
    font-size: 0.75rem;
    color: var(--text-dim);
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Expanded card */
  .session-card.expanded {
    border-color: var(--accent);
  }

  .session-detail {
    display: none;
    padding-top: 8px;
    border-top: 1px solid var(--border);
    font-size: 0.8rem;
    line-height: 1.6;
    color: var(--text-dim);
  }

  .session-card.expanded .session-detail {
    display: block;
  }

  .session-detail h4 {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 10px;
    margin-bottom: 4px;
  }

  .session-detail h4:first-child {
    margin-top: 0;
  }

  .speaker-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .speaker-item {
    font-size: 0.8rem;
    color: var(--text);
  }

  .watch-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 8px;
    padding: 4px 10px;
    background: light-dark(hsl(0 63% 92%), hsl(0 63% 16%));
    color: light-dark(hsl(0 50% 45%), hsl(0 90% 80%));
    border-radius: 4px;
    font-size: 0.75rem;
    text-decoration: none;
    transition: background 0.15s;
  }

  .watch-link:hover {
    background: light-dark(hsl(0 63% 86%), hsl(0 63% 20%));
  }

  .detail-dhwani-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 8px;
    padding: 4px 10px;
    background: light-dark(hsl(260 50% 94%), hsl(260 30% 16%));
    color: light-dark(hsl(260 45% 45%), hsl(260 60% 75%));
    border-radius: 4px;
    font-size: 0.75rem;
    text-decoration: none;
    transition: background 0.15s;
  }

  .detail-dhwani-link:hover {
    background: light-dark(hsl(260 50% 88%), hsl(260 30% 22%));
  }

  /* No results */
  .no-results {
    padding: 60px 20px;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.875rem;
  }

  /* Count bar */
  .count-bar {
    padding: 6px var(--pad-x);
    font-family: var(--font-mono);
    font-size: 0.65rem;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
  }

  /* ===== Day Switcher ===== */
  .day-switcher {
    display: flex;
    gap: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
  }

  .day-tab {
    flex: 1;
    padding: 6px 4px;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 500;
    text-align: center;
    border: none;
    border-right: 1px solid var(--border);
    background: transparent;
    color: var(--text-dim);
    cursor: pointer;
    transition: all 0.15s;
  }

  .day-tab:last-child { border-right: none; }
  .day-tab:hover { background: var(--bg-hover); color: var(--text); }

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

  /* "All" tab — slightly narrower than day tabs */
  .day-tab-all {
    flex: 0 0 auto;
    padding: 6px 10px;
  }

  /* Badge counts on day tabs */
  .day-tab-badge {
    display: inline-block;
    font-size: 0.52rem;
    padding: 0 4px;
    min-width: 16px;
    background: var(--accent);
    color: white;
    border-radius: 8px;
    margin-left: 3px;
    line-height: 1.5;
    font-weight: 600;
    vertical-align: middle;
    text-align: center;
  }

  .day-tab.active .day-tab-badge {
    background: rgba(255,255,255,0.25);
  }

  .day-tab.dim-badge {
    opacity: 0.35;
  }

  /* ===== All-Days List View ===== */
  .all-days-list {
    flex: 1;
    overflow-y: auto;
    padding: 0 0 8px;
  }

  .date-group-header {
    padding: 10px var(--pad-x) 5px;
    font-family: var(--font-mono);
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    display: flex;
    align-items: center;
    gap: 8px;
    position: sticky;
    top: 0;
    background: var(--bg);
    z-index: 2;
  }

  .date-group-header::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, var(--border), transparent);
  }

  .date-group-count {
    font-weight: 400;
    color: var(--text-muted);
    font-size: 0.6rem;
  }

  .all-days-list .session-card {
    margin: 3px var(--pad-x);
    display: grid;
  }

  /* Hidden when in all-days mode */
  .main.all-days-mode .board-venues,
  .main.all-days-mode .board-scroll {
    display: none;
  }

  .main:not(.all-days-mode) .all-days-list {
    display: none;
  }

  /* Exhibits-mode visibility toggles are in exhibits.css (unlayered) */

  /* ===== Board ===== */
  .board-venues {
    display: grid;
    grid-template-columns: var(--board-time-col) 1fr 1fr 1fr;
    border-bottom: 2px solid var(--border);
    background: var(--bg-card);
    flex-shrink: 0;
  }

  .board-venue-time {
    border-right: 1px solid var(--border);
  }

  .board-venue-label {
    padding: 6px 4px;
    font-family: var(--font-mono);
    font-size: 0.58rem;
    font-weight: 600;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-right: 1px solid var(--border);
  }

  .board-venue-label:last-child { border-right: none; }
  .board-venue-label.v-bharat { color: var(--v-bharat); }
  .board-venue-label.v-expo { color: var(--v-expo); }
  .board-venue-label.v-sushma { color: var(--v-sushma); }

  .board-scroll {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
  }

  /* Board row: 4-column grid (time + 3 venues) */
  .board-row {
    display: grid;
    grid-template-columns: var(--board-time-col) 1fr 1fr 1fr;
    border-bottom: 1px solid var(--border);
    transition: background 0.15s, opacity 0.2s;
    min-height: 48px;
  }

  .board-row-time {
    padding: 6px 4px 6px 6px;
    font-family: var(--font-mono);
    font-size: 0.62rem;
    font-weight: 500;
    color: var(--text-muted);
    border-right: 1px solid var(--border);
    display: flex;
    align-items: flex-start;
    font-variant-numeric: tabular-nums;
  }

  /* Venue cells — grid items, one per column */
  .board-venue-cell {
    padding: 4px 5px;
    font-family: var(--font-mono);
    font-size: 0.58rem;
    line-height: 1.3;
    border-right: 1px solid var(--border);
    cursor: pointer;
    transition: all 0.15s;
    display: flex;
    flex-direction: column;
    gap: 1px;
  }

  .board-venue-cell:last-of-type { border-right: none; }
  .board-venue-cell:hover { background: var(--bg-hover); }

  .board-venue-cell .cell-count {
    font-weight: 600;
    font-size: 0.58rem;
    margin-bottom: 1px;
  }

  .board-venue-cell .cell-venue-label {
    opacity: 0.6;
    font-weight: 400;
    margin-right: 1px;
    display: none;
  }

  .board-venue-cell.v-bharat .cell-count { color: var(--v-bharat); }
  .board-venue-cell.v-expo .cell-count { color: var(--v-expo); }
  .board-venue-cell.v-sushma .cell-count { color: var(--v-sushma); }

  .board-venue-cell .cell-preview {
    font-size: 0.48rem;
    font-weight: 400;
    color: var(--text-dim);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.3;
  }

  .board-venue-cell .cell-flagship {
    font-size: 0.42rem;
    color: light-dark(hsl(270 60% 50%), hsl(270 95% 85%));
    margin-top: 1px;
  }

  .board-venue-cell.empty {
    color: var(--text-muted);
    font-size: 0.48rem;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.3;
    cursor: default;
  }

  /* Expanded cell highlight */
  .board-venue-cell.expanded {
    background: light-dark(hsl(239 84% 64% / 0.06), hsl(239 84% 64% / 0.08));
    box-shadow: inset 0 0 0 1px light-dark(hsl(239 84% 64% / 0.25), hsl(239 84% 64% / 0.3));
  }

  /* Expansion row: full-width sibling row between board-rows */
  .expansion-row {
    border-bottom: 1px solid var(--border);
    background: var(--bg-card);
    padding: 8px 12px;
  }

  .cell-detail-head {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-mono);
    font-size: 0.6rem;
    color: var(--text-muted);
    margin-bottom: 6px;
  }

  .cell-detail-label {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  .expansion-row.v-bharat .cell-detail-label { color: var(--v-bharat); }
  .expansion-row.v-expo .cell-detail-label { color: var(--v-expo); }
  .expansion-row.v-sushma .cell-detail-label { color: var(--v-sushma); }

  .cell-detail-count {
    font-size: 0.55rem;
  }

  .cell-detail-close {
    margin-left: auto;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.9rem;
    padding: 0 4px;
    line-height: 1;
  }

  .cell-detail-close:hover { color: var(--text); }

  .cell-detail-list {
    display: flex;
    flex-direction: column;
    gap: 3px;
    max-height: 300px;
    overflow-y: auto;
  }

  .cell-detail-list .session-card {
    padding: 7px 9px;
    gap: 3px;
    border-radius: 6px;
    contain-intrinsic-size: auto 55px;
  }

  .cell-detail-list .session-title { font-size: 0.78rem; font-weight: 500; }
  .cell-detail-list .session-meta .tag {
    font-family: var(--font-mono);
    font-size: 0.58rem;
    padding: 1px 5px;
  }
  .cell-detail-list .session-speakers {
    font-size: 0.68rem;
  }

  /* NOW row */
  .board-row.now { background: var(--v-now-bg); }
  .board-row.now .board-row-time { color: var(--v-now); }

  /* Filtered state */
  .board.filtered .board-row { opacity: 0.08; }
  .board.filtered .board-row.has-match { opacity: 1; }
  .board.filtered .board-row.has-match .board-venue-cell.has-match {
    box-shadow: inset 0 0 0 1.5px currentColor;
  }
  .board.filtered .expansion-row { opacity: 1; }

  /* Session matched by search within expanded cell */
  .cell-detail-list .session-card.matched {
    border-color: var(--accent);
    background: var(--bg-hover);
  }

  /* Board footer */
  .board-footer {
    position: sticky;
    bottom: 0;
    padding: 6px var(--pad-x);
    font-family: var(--font-mono);
    font-size: 0.65rem;
    color: var(--text-muted);
    border-top: 1px solid var(--border);
    background: var(--bg);
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .board-footer button {
    background: none;
    border: none;
    font-family: var(--font-mono);
    color: var(--text-dim);
    cursor: pointer;
    font-size: 0.65rem;
    padding: 2px 6px;
    transition: color 0.15s;
  }

  .board-footer button:hover { color: var(--accent); }
  .board-footer button:disabled { opacity: 0.3; cursor: default; }

  /* Detail panel (bottom sheet) — fixed shell, scroll inside */
  .detail-panel {
    display: none;
    flex-direction: column;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--bg-card);
    border-top: 2px solid var(--accent);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    z-index: 20;
    height: 55%;
    box-shadow: 0 -16px 40px light-dark(hsl(0 0% 0% / 0.08), hsl(0 0% 0% / 0.3));
  }

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

  /* Pinned header — never scrolls */
  .detail-header {
    flex-shrink: 0;
    padding: 8px var(--pad-x) 10px;
    border-bottom: 1px solid var(--border);
  }

  .detail-drag {
    width: 32px;
    height: 3px;
    background: var(--text-muted);
    border-radius: 2px;
    margin: 0 auto 8px;
    opacity: 0.5;
    cursor: pointer;
  }

  .detail-title-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
  }

  .detail-title-text {
    flex: 1;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.25;
    min-width: 0;
  }

  .detail-title-text .tag.flagship {
    font-size: 0.6rem;
    vertical-align: middle;
    margin-right: 2px;
  }

  .detail-close {
    flex-shrink: 0;
    background: none;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-muted);
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
    padding: 4px 8px;
    transition: all 0.15s;
  }

  .detail-close:hover {
    border-color: var(--accent);
    color: var(--text);
  }

  .detail-meta {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 6px;
  }

  .detail-meta .tag {
    font-family: var(--font-mono);
    font-size: 0.6rem;
  }

  /* Scrollable body */
  .detail-body {
    flex: 1;
    overflow-y: auto;
    padding: 10px var(--pad-x) 20px;
    font-size: 0.78rem;
    line-height: 1.6;
    color: var(--text-dim);
    font-weight: 300;
  }

  .detail-body h4 {
    font-family: var(--font-mono);
    font-size: 0.55rem;
    font-weight: 500;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 10px;
    margin-bottom: 4px;
  }

  .detail-body h4:first-child {
    margin-top: 0;
  }

  .detail-body .speaker-item {
    font-size: 0.75rem;
    color: var(--text);
  }

  .detail-body .speaker-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  /* ===== Chat Sidebar ===== */
  .chat-panel {
    display: none;
    flex-direction: column;
    background: var(--chat-bg);
    overflow: hidden;
    /* Mobile: full-screen overlay */
    position: absolute;
    inset: 0;
    z-index: 10;
    border-left: none;
  }

  .app.chat-open .chat-panel {
    display: flex;
  }

  .chat-header {
    padding: 12px var(--pad-x);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
  }

  .chat-header h2 {
    font-size: 0.9rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .chat-header h2::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: hsl(142 71% 45%);
    display: inline-block;
  }

  .chat-header-left {
    display: flex;
    align-items: center;
  }

  .chat-header-actions {
    display: flex;
    align-items: center;
    gap: 4px;
  }

  .chat-history-btn, .chat-new-btn {
    background: none;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-muted);
    cursor: pointer;
    padding: 5px 7px;
    display: flex;
    align-items: center;
    transition: all 0.15s;
  }

  .chat-history-btn:hover, .chat-new-btn:hover {
    border-color: var(--text-muted);
    color: var(--text);
  }

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

  .chat-close {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px;
    font-size: 1.1rem;
    line-height: 1;
  }

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

  /* History panel */
  .chat-history-panel {
    display: none;
    border-bottom: 1px solid var(--border);
    max-height: 240px;
    overflow-y: auto;
    flex-shrink: 0;
  }

  .chat-history-panel.open {
    display: block;
  }

  .history-list {
    display: flex;
    flex-direction: column;
  }

  .history-item {
    padding: 10px 16px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: background 0.1s;
  }

  .history-item:last-child {
    border-bottom: none;
  }

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

  .history-item.active {
    background: var(--bg-hover);
    border-left: 3px solid var(--accent);
  }

  .history-item-title {
    font-size: 0.8rem;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .history-item-meta {
    font-size: 0.65rem;
    color: var(--text-muted);
    margin-top: 2px;
  }

  .history-empty {
    padding: 16px;
    text-align: center;
    font-size: 0.75rem;
    color: var(--text-muted);
  }

  .chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .chat-msg {
    padding: 10px 14px;
    border-radius: var(--radius-lg);
    font-size: 0.825rem;
    line-height: 1.6;
    max-width: 95%;
    white-space: pre-wrap;
    word-wrap: break-word;
  }

  .chat-msg.user {
    background: var(--chat-user);
    color: var(--tag-text);
    align-self: flex-end;
  }

  .chat-msg.ai {
    background: var(--chat-ai);
    color: var(--text);
    align-self: flex-start;
    border: 1px solid var(--border);
  }

  .chat-msg.ai.streaming {
    border-color: var(--accent);
  }

  .chat-msg.system {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-align: center;
    align-self: center;
    background: none;
  }

  .chat-input-area {
    padding: 12px var(--pad-x);
    border-top: 1px solid var(--border);
    display: flex;
    gap: 8px;
    flex-shrink: 0;
  }

  .chat-input-area textarea {
    flex: 1;
    padding: 10px 12px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font-size: 0.825rem;
    font-family: inherit;
    resize: none;
    outline: none;
    min-height: 40px;
    max-height: 120px;
    line-height: 1.4;
  }

  .chat-input-area textarea:focus {
    border-color: var(--border-focus);
  }

  .chat-input-area textarea::placeholder {
    color: var(--text-muted);
  }

  .chat-send {
    padding: 8px 14px;
    background: var(--accent);
    color: white;
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 500;
    align-self: flex-end;
    transition: background 0.15s;
  }

  .chat-send:hover {
    background: var(--accent-dim);
  }

  .chat-send:disabled {
    opacity: 0.4;
    cursor: not-allowed;
  }

  /* Typing indicator */
  .typing-dots {
    display: inline-flex;
    gap: 3px;
    padding: 4px 0;
  }

  .typing-dots span {
    width: 5px;
    height: 5px;
    background: var(--text-muted);
    border-radius: 50%;
    animation: blink 1.4s infinite both;
  }

  .typing-dots span:nth-child(2) { animation-delay: 0.2s; }
  .typing-dots span:nth-child(3) { animation-delay: 0.4s; }

  /* Message wrapper + meta */
  .chat-msg-wrapper {
    display: flex;
    flex-direction: column;
    align-self: flex-start;
    max-width: 95%;
    gap: 3px;
  }

  .chat-msg-meta {
    font-size: 0.65rem;
    color: var(--text-muted);
    padding: 0 4px;
    font-variant-numeric: tabular-nums;
  }

  /* History delete */
  .history-delete {
    float: right;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s;
    padding: 0 4px;
    color: var(--text-muted);
  }

  .history-item:hover .history-delete {
    opacity: 1;
  }

  .history-delete:hover {
    color: hsl(0 84% 60%);
  }
}

/* ===== Desktop (min-width: 768px) ===== */
@layer desktop {
  @media (min-width: 768px) {
    :root {
      --pad-x: 24px;
    }

    .app {
      transition: grid-template-columns 0.3s ease;
    }

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

    .header {
      padding: 20px var(--pad-x) 16px;
      gap: 12px;
    }

    .search-box input {
      padding: 10px 12px 10px 36px;
    }

    .filters {
      flex-wrap: wrap;
      overflow-x: visible;
      mask-image: none;
      -webkit-mask-image: none;
    }

    .filter-btn {
      padding: 5px 12px;
      min-height: unset;
      font-size: 0.75rem;
    }

    .theme-toggle {
      min-height: unset;
      min-width: unset;
      padding: 6px 8px;
    }

    .chat-toggle {
      padding: 8px 14px;
      min-height: unset;
    }

    .session-list { display: none; }

    .session-card {
      padding: 14px 16px;
      gap: 8px;
    }

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

    .count-bar {
      padding: 8px var(--pad-x);
    }

    /* Desktop: slightly larger board type */
    .board-row-time {
      padding: 10px 6px;
    }

    .board-venue-cell {
      padding: 6px 8px;
      gap: 2px;
    }

    .board-venue-cell .cell-count {
      font-size: 0.65rem;
    }

    .board-venue-cell .cell-preview {
      font-size: 0.68rem;
    }

    .board-venue-cell.empty {
      font-size: 0.68rem;
    }

    .cell-detail-list {
      max-height: 400px;
    }

    .detail-panel {
      max-height: 50%;
    }

    .chat-panel {
      position: static;
      inset: auto;
      z-index: auto;
      border-left: 1px solid var(--border);
    }

    .chat-header {
      padding: 16px;
    }
  }
}