.revi-grid { display: grid; grid-template-columns: 320px 1fr; gap: 0; height: calc(100vh - 120px); }
/* collapsed instances list */
.revi-grid.instances-collapsed { grid-template-columns: 0 1fr; }
.revi-grid.instances-collapsed aside { width: 0; padding: 0; overflow: hidden; border-right: none; }
/* Make the instances pane scroll independently */
.revi-grid aside { border-right: 1px solid var(--neutral-650); overflow: auto; background: var(--neutral-850); color: var(--neutral-100); }
/* Ensure the content column can host its own scrolling area below the toolbar */
.revi-grid section { display:flex; flex-direction:column; min-height: 0; overflow: hidden; background: var(--neutral-900); color: var(--neutral-100); }
.toolbar { display:flex; align-items:center; gap:12px; padding:8px; background: var(--neutral-900); }
.toolbar .search { flex:1; padding:8px 10px; border-radius:10px; border:1px solid var(--neutral-600); background: var(--neutral-800); color: var(--neutral-100); }
.toolbar .search::placeholder { color: var(--neutral-400); }
.toolbar .sort { margin-left:auto; background: var(--neutral-800); color: var(--neutral-100); border:1px solid var(--neutral-600); border-radius:8px; padding:6px 8px; }
.toolbar .chip { border:1px solid var(--neutral-600); border-radius:14px; padding:4px 8px; background: var(--neutral-925); color: var(--neutral-100); cursor:pointer; }
.toolbar .chip.active { background: var(--blue-600); color: var(--white); border-color: var(--blue-600); }
/* When a log level filter chip is active, match the color of the row glyphs */
.toolbar .levels .chip.active.level-info { background: var(--blue-500); border-color: var(--blue-500); color: var(--white); }
.toolbar .levels .chip.active.level-debug { background: var(--success-500); border-color: var(--success-500); color: var(--white); }
.toolbar .levels .chip.active.level-warning { background: var(--warning-400); border-color: var(--warning-400); color: var(--neutral-925); }
.toolbar .levels .chip.active.level-error { background: var(--error-400); border-color: var(--error-400); color: var(--white); }
.toolbar .levels .chip.active.level-fatal,
.toolbar .levels .chip.active.level-critical { background: var(--fatal-500); border-color: var(--fatal-500); color: var(--white); }

/* Scrolling container for the logs list so the toolbar stays visible */
.logs-scroll { flex: 1 1 auto; min-height: 0; overflow: auto; background: var(--neutral-900); position:relative; }

/* subtle loading overlay that doesn't change layout/scrollbar */
.loading-overlay { position:absolute; right:8px; top:8px; background:rgba(15,23,42,.85); color: var(--neutral-100); border:1px solid var(--neutral-600); border-radius:8px; padding:4px 8px; font-size:.85em; display:flex; align-items:center; gap:6px; pointer-events:none; }
.loading-overlay .dot { width:6px; height:6px; border-radius:50%; background: var(--blue-400); box-shadow:0 0 8px var(--blue-400); animation:pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 0%,100% { transform:scale(1); opacity:.8 } 50% { transform:scale(1.35); opacity:1 } }

/* Pagination bar for ReviLogFeed */
.pager { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 10px; border-bottom:1px solid var(--neutral-700); background: var(--neutral-900); color: var(--neutral-100); }
.pager .left { display:flex; align-items:center; gap:8px; }
.pager .right { display:flex; align-items:center; gap:10px; }
.pager .sep { opacity:0.6; }
.pager select { background: var(--neutral-800); color: var(--neutral-100); border:1px solid var(--neutral-600); border-radius:8px; padding:4px 6px; }
.pager .icon-btn { background:transparent; color: var(--neutral-400); border:1px solid var(--neutral-600); padding:4px 6px; border-radius:6px; cursor:pointer; font-size:14px; line-height:1; }
.pager .icon-btn:hover { background: var(--neutral-700); color: var(--neutral-100); }
.pager .icon-btn:disabled { opacity:0.5; cursor:not-allowed; }
.pager .toggle { background:transparent; color: var(--neutral-100); border:1px solid var(--neutral-600); padding:4px 8px; border-radius:14px; cursor:pointer; font-size:13px; }
.pager .toggle:hover { background: var(--neutral-700); }

.date-header { background: var(--neutral-700); color: var(--neutral-100); padding:6px 10px; font-weight:600; border-radius:8px; margin:6px 8px 3px; }
.log-row { display:grid; grid-template-columns: 20px 1fr minmax(0, 240px) auto auto; align-items:center; gap:6px; margin:4px 8px; padding:6px 10px; background: var(--neutral-925); border-radius:10px; box-shadow:0 1px 0 var(--shadow-alpha-35); position:relative; color: var(--neutral-100); transition: background-color .15s ease, box-shadow .15s ease; }
.log-row:hover { box-shadow:0 2px 8px var(--shadow-alpha-35); background-color: var(--neutral-950); }
.log-row .glyph { width:14px; height:14px; border-radius:50%; background: var(--blue-400); cursor:pointer; }
.log-row .title { font-weight:600; color: var(--neutral-50); line-height:1.2; }
.log-row .subtitle { color: var(--neutral-400); font-size:.85em; line-height:1.2; }
.log-row .time { color: var(--neutral-400); font-size:.85em; justify-self:end; text-align:right; white-space:nowrap; }
/* tags column sits between content and timestamp */
.log-row .tags { justify-self:end; max-width:240px; overflow:hidden; white-space:nowrap; }
.log-row .tags .tags-set { display:flex; gap:4px; overflow:hidden; }
/* compact chips; each chip already truncated to 10 chars in code */
.log-row .tags .tag-chip { --chip-bg: var(--neutral-700); background: var(--chip-bg); color: var(--neutral-100); border:1px solid var(--neutral-600); height:22px; padding:0 8px; font-size:.75em; }
/* prevent chip content from wrapping */
.log-row .tags .tag-chip * { white-space:nowrap; }
/* ReviLog level colors */
/* info → blue */
.log-row.level-info .glyph { background: var(--blue-500); }
/* debug → green */
.log-row.level-debug .glyph { background: var(--success-500); }
/* warning → yellow */
.log-row.level-warning .glyph { background: var(--warning-400); }
/* error → orange */
.log-row.level-error .glyph { background: var(--error-400); }
/* fatal → red (keep critical as alias just in case) */
.log-row.level-fatal .glyph, .log-row.level-critical .glyph { background: var(--fatal-500); }

/* subtle background tints by severity */
.log-row.level-warning { background: linear-gradient(0deg, color-mix(in srgb, var(--warning-400) 8%, transparent), color-mix(in srgb, var(--warning-400) 8%, transparent)) , var(--neutral-925); }
.log-row.level-error { background: linear-gradient(0deg, color-mix(in srgb, var(--error-400) 8%, transparent), color-mix(in srgb, var(--error-400) 8%, transparent)) , var(--neutral-925); }
.log-row.level-fatal, .log-row.level-critical { background: linear-gradient(0deg, color-mix(in srgb, var(--fatal-500) 10%, transparent), color-mix(in srgb, var(--fatal-500) 10%, transparent)) , var(--neutral-925); }

/* row actions menu */
.log-row .actions { position:relative; justify-self:end; }
.log-row .icon-btn { background:transparent; color: var(--neutral-400); border:none; padding:4px 6px; border-radius:6px; cursor:pointer; font-size:16px; line-height:1; }
.log-row .icon-btn:hover { background: var(--neutral-700); color: var(--neutral-100); }
.log-row .menu { position:absolute; right:0; top:100%; background: var(--neutral-800); border:1px solid var(--neutral-600); border-radius:8px; min-width:140px; box-shadow:0 6px 24px var(--shadow-alpha-35); z-index:20; padding:4px; }
.log-row .menu .menu-item { display:block; width:100%; text-align:left; background:transparent; color: var(--neutral-100); border:none; padding:8px 10px; border-radius:6px; cursor:pointer; }
.log-row .menu .menu-item:hover { background: var(--neutral-700); }

/* lightweight placeholders for virtualization */
.log-row.placeholder { opacity:0.6; }
.log-row.placeholder .title { height:14px; background:linear-gradient(90deg, var(--neutral-700), var(--neutral-750), var(--neutral-700)); border-radius:6px; width:40%; }

/* highlight mode: emphasize matching rows with bright blue background while keeping text readable */
.log-row.highlight-match {
  background: linear-gradient(0deg, color-mix(in srgb, var(--blue-600) 25%, transparent), color-mix(in srgb, var(--blue-600) 25%, transparent)), var(--neutral-800) !important;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--blue-600) 65%, transparent), 0 6px 18px color-mix(in srgb, var(--blue-600) 25%, transparent);
}
.log-row.highlight-match .title { color: var(--white); }
.log-row.highlight-match .subtitle, .log-row.highlight-match .time { color: var(--neutral-350); }
.log-row.highlight-match .tags .tag-chip { --chip-bg: var(--neutral-highlight-dark); background: var(--neutral-highlight-dark); border-color: var(--blue-700); color: var(--neutral-350); }

/* client-side filter: hide rows that don't match when wildcard filtering is active */
.log-row.client-filter-hidden { display: none !important; }

/* nesting connectors */
[class^="depth-"]::before { content:""; position:absolute; left:20px; top:0; bottom:0; width:1px; background: var(--neutral-600); }
.depth-0::before { display:none; }
.depth-1 { margin-left:28px; }
.depth-2 { margin-left:56px; }
.depth-3 { margin-left:84px; }

.instance { padding:10px 12px; border-bottom:1px solid var(--neutral-700); cursor:pointer; color: var(--neutral-100); }
.instance .row { display:grid; grid-template-columns: 1fr auto; align-items:center; gap:8px; }
.instance .row.small { font-size:.92em; color: var(--neutral-300); }
.instance .title { font-weight:700; color: var(--neutral-50); font-size:1.05rem; }
.instance .seen { color: var(--neutral-400); font-size:.9em; }
.instance .label { color: var(--neutral-400); }
.instance .value { color: var(--neutral-100); }
.instance .meta, .instance .ts { font-size:.85em; color: var(--neutral-400); }
/* selection + hover states for instances */
.instance:hover { background: color-mix(in srgb, var(--blue-600) 15%, transparent); }
.instance.selected { background: var(--blue-600); color: var(--white); }
.instance.selected .meta, .instance.selected .ts { color: var(--neutral-200); }
.instance.selected .title { font-weight:700; }

/* responsive: reduce tag width on tighter screens so timestamp stays visible */
@media (max-width: 1100px) {
  .log-row { grid-template-columns: 20px 1fr minmax(0, 180px) auto auto; }
  .log-row .tags { max-width:180px; }
}
@media (max-width: 800px) {
  .log-row { grid-template-columns: 20px 1fr minmax(0, 140px) auto auto; }
  .log-row .tags { max-width:140px; }
}

.modal-backdrop { position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:1000; }
/* modal follows dark theme */
.modal { position:fixed; inset:10% 15%; background: var(--neutral-800); color: var(--neutral-100); border-radius:10px; padding:16px; overflow:auto; border:1px solid var(--neutral-600); z-index:1001; }
.modal .tag { display:inline-block; background: var(--neutral-700); border:1px solid var(--neutral-600); color: var(--neutral-100); border-radius:12px; padding:2px 8px; margin:0 6px 6px 0; }
pre.stack { background: var(--neutral-900); color: var(--neutral-100); border-radius:6px; padding:12px; overflow:auto; }
/* Enhanced modal for details dialog */
.modal-details { display:flex; flex-direction:column; overflow:hidden; padding:0; }
.modal-header-details { display:flex; align-items:center; justify-content:space-between; padding:16px; border-bottom:1px solid var(--neutral-600); flex-shrink:0; }
.modal-header-details h3 { margin:0; }
.close-large { background:transparent; color: var(--neutral-400); border:1px solid var(--neutral-600); font-size:32px; line-height:1; width:48px; height:48px; border-radius:8px; cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0; transition:background-color .15s ease, color .15s ease; }
.close-large:hover { background: var(--neutral-700); color: var(--neutral-100); }
.modal-content-split { display:flex; flex:1; min-height:0; gap:1px; background: var(--neutral-600); }
.modal-left-panel { flex:1; background: var(--neutral-800); overflow:auto; padding:16px; }
.modal-right-panel { flex:1; background: var(--neutral-800); overflow:auto; padding:16px; }