/* Query ids in the chat, upload rejections, ingestion ids, and the Log tab. Uses the tokens of style.css. */

/* ---- Chat: session bar and query ids ---- */
.chat-session-bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.9rem;
    border-bottom: 1px solid var(--divider);
    font-size: 0.75rem;
    color: var(--text-secondary);
}
.chat-session-bar .btn { margin-left: auto; }
.chat-session-id { color: var(--text); }

.query-id-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-left: auto;
}
.turn-meta { display: flex; margin-top: 0.4rem; }
.turn-meta .query-id-chip { margin-left: 0; }
.query-id,
.query-id-open {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.7rem;
    color: var(--text-secondary);
    padding: 0.1rem 0;
}
.query-id {
    font-family: 'SF Mono', 'Fira Code', 'Consolas', ui-monospace, monospace;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0.05rem 0.4rem;
    background: var(--surface-alt);
    user-select: all;
}
.query-id:hover { border-color: var(--border-hover); color: var(--text); }
.query-id.copied { border-color: var(--success); color: var(--success); }
.query-id-open { opacity: 0.7; }
.query-id-open:hover { opacity: 1; color: var(--accent); }
.explain-buttons { align-items: center; }

/* ---- Documents: rejected uploads and ingestion ids ---- */
.queue-row-failed { background: var(--tint-red-bg-soft); }
.upload-error {
    margin-top: 0.25rem;
    font-size: 0.8rem;
    color: var(--error);
    white-space: normal;
}
.upload-error a { color: var(--error); font-weight: 500; }
.row-flash { animation: row-flash 2.4s ease-out; }
@keyframes row-flash {
    0%, 40% { background: rgba(251, 123, 52, 0.22); }
    100% { background: transparent; }
}
.doc-ingestion { margin-top: 0.2rem; }
.doc-ingestion-id {
    font-size: 0.7rem;
    color: var(--text-secondary);
    text-decoration: none;
}
.doc-ingestion-id:hover { color: var(--accent); text-decoration: underline; }

/* ---- Log tab layout ---- */
.log-layout {
    display: grid;
    grid-template-columns: minmax(300px, 400px) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}
.log-side {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    position: sticky;
    top: 1rem;
    max-height: calc(100vh - 7rem);
}
.log-filters { display: flex; flex-direction: column; gap: 0.5rem; }
.log-filters .filter-input { width: 100%; }
.log-filter-row { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.log-filter-row .filter-select { flex: 1; min-width: 0; }
.log-date { display: flex; align-items: center; gap: 0.3rem; font-size: 0.75rem; color: var(--text-secondary); flex: 1; }
.log-date input { flex: 1; min-width: 0; }
.log-filter-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.log-active-filter {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    background: var(--accent-subtle);
    border: 1px solid rgba(251, 123, 52, 0.3);
    border-radius: var(--radius-pill);
    padding: 0.2rem 0.4rem 0.2rem 0.75rem;
}
.log-chip-clear {
    margin-left: auto;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    color: var(--text-secondary);
}
.log-list-status { font-size: 0.75rem; color: var(--text-secondary); }
.log-list {
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-height: 120px;
}
.log-item {
    text-align: left;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0.5rem 0.6rem;
    cursor: pointer;
    font-family: inherit;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}
.log-item:hover { border-color: var(--border-hover); }
.log-item.selected { border-color: var(--accent); background: var(--accent-subtle); }
.log-item-error { border-left: 3px solid var(--error); }
.log-item-top { display: flex; align-items: center; gap: 0.35rem; font-size: 0.72rem; flex-wrap: wrap; }
.log-item-top .mono { font-size: 0.72rem; }
.log-item-time { margin-left: auto; color: var(--text-secondary); }
.log-item-question {
    font-size: 0.85rem;
    color: var(--text);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.log-item-meta { font-size: 0.72rem; color: var(--text-secondary); }
.log-pager { display: flex; align-items: center; gap: 0.4rem; }
.log-page-info { flex: 1; text-align: center; font-size: 0.75rem; color: var(--text-secondary); }

.log-detail {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem 1.25rem 1.5rem;
    min-height: 300px;
    min-width: 0;
}
.log-backbar { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.75rem; }
.log-crumbs { font-size: 0.75rem; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.log-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}
.log-title {
    font-size: 1.05rem;
    font-weight: 500;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
}
.log-title .mono { font-size: 1rem; }
.log-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-left: auto; }

.log-badge {
    display: inline-block;
    padding: 0.08rem 0.45rem;
    border-radius: 9999px;
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    white-space: nowrap;
}
.log-badge-ok { background: var(--tint-green-bg); color: var(--tint-green-text); }
.log-badge-error { background: var(--tint-red-bg); color: var(--tint-red-text); }
.log-badge-neutral { background: var(--surface-raised); color: var(--text-secondary); border: 1px solid var(--border); }
.log-badge-type { background: var(--tint-purple-bg); color: var(--tint-purple-text); }
.log-gone {
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--tint-red-text);
    text-transform: uppercase;
}

.log-facts {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 0.3rem 1rem;
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
}
.log-facts dt { color: var(--text-secondary); }
.log-facts dd { min-width: 0; overflow-wrap: anywhere; }

.log-section { margin-top: 1.1rem; }
.log-section h3 {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-secondary);
    margin-bottom: 0.45rem;
    border-bottom: 1px solid var(--divider);
    padding-bottom: 0.25rem;
}
.log-hint { font-size: 0.75rem; color: var(--text-secondary); font-weight: 400; text-transform: none; letter-spacing: 0; }
.log-sub { font-size: 0.72rem; color: var(--text-secondary); }
.log-question { font-size: 0.95rem; white-space: pre-wrap; }
.log-answer { font-size: 0.9rem; }
.log-error,
.log-notice {
    font-size: 0.85rem;
    padding: 0.6rem 0.75rem;
    border-radius: var(--radius-sm);
    white-space: pre-wrap;
}
.log-error { background: var(--tint-red-bg); color: var(--tint-red-text); }
.log-notice { background: var(--surface-raised); color: var(--text); margin-bottom: 0.6rem; }
.log-error-inline { color: var(--error); }
.log-list-plain { margin: 0; padding-left: 1.2rem; font-size: 0.85rem; display: flex; flex-direction: column; gap: 0.2rem; }
.log-link { color: var(--secondary); text-decoration: none; }
.log-link:hover { text-decoration: underline; color: var(--accent); }

.log-pre {
    font-family: 'SF Mono', 'Fira Code', 'Consolas', ui-monospace, monospace;
    font-size: 0.76rem;
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-word;
    background: var(--surface-alt);
    border: 1px solid var(--divider);
    border-radius: var(--radius-sm);
    padding: 0.55rem 0.7rem;
    margin: 0.25rem 0;
}
.log-pre.log-collapsible:not(.expanded) { max-height: 11rem; overflow: hidden; }
.log-pre.log-collapsible.expanded { max-height: none; }
.log-pre-json { white-space: pre; overflow-x: auto; }
.log-expand {
    background: none;
    border: none;
    color: var(--secondary);
    cursor: pointer;
    font-size: 0.75rem;
    padding: 0;
}
.log-raw { margin: 0.35rem 0; }
.log-raw > summary { cursor: pointer; font-size: 0.82rem; color: var(--text); padding: 0.2rem 0; }
.log-raw > summary:hover { color: var(--accent); }

.log-table th, .log-table td { padding: 0.4rem 0.5rem; font-size: 0.8rem; vertical-align: top; }
.log-table code { font-size: 0.72rem; word-break: break-word; }
.log-cell-text { min-width: 14rem; overflow-wrap: anywhere; }
.log-path { max-width: 16rem; overflow-wrap: anywhere; }
.log-evidence tr.log-cited > td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.log-evidence.log-cited-only tbody tr:not(.log-cited):not(.log-row-detail) { display: none; }
.log-evidence.log-cited-only tbody tr:not(.log-cited):not(.log-row-detail) + tr.log-row-detail { display: none !important; }
.log-row-detail > td { background: var(--surface-alt); }
.data-table tbody tr.log-row-detail:hover { background: var(--surface-alt); }
.log-row-error > td { background: var(--tint-red-bg-soft); }
.log-evidence-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-bottom: 0.35rem; }

.log-lineage-item {
    border-left: 2px solid var(--border);
    padding-left: 0.7rem;
    margin-bottom: 0.6rem;
}
.log-lineage-head { font-size: 0.8rem; }

@media (max-width: 900px) {
    .log-layout { grid-template-columns: minmax(0, 1fr); }
    .log-side { position: static; max-height: none; }
    .log-list { max-height: 50vh; }
}