/* View-specific styles for the Tenant Dashboard. */

/* Message feed */
.msg-row { display: flex; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--border-subtle); }
.msg-row:last-child { border-bottom: none; }
.msg-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.msg-meta .mono { white-space: nowrap; }
.msg-name { font-size: 13px; font-weight: 600; color: var(--fg); cursor: pointer; }
.msg-name:hover { color: var(--primary); }
.msg-text { font-size: 14px; color: var(--fg); line-height: 1.5; }
.msg-foot { display: flex; gap: 8px; margin-top: 7px; }
.chiplet { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--fg-subtle); background: var(--surface-subtle); border: 1px solid var(--border); padding: 2px 8px; border-radius: var(--radius-full); }
.chiplet.topic { color: var(--primary-subtle-fg); background: var(--primary-subtle-bg); border-color: var(--blue-200); }
.chiplet .sub { opacity: .7; }
.chiplet.pending { color: var(--warning-fg); background: var(--warning-bg); border-color: var(--warning-border); }
.chiplet.pending .dotpulse { width: 6px; height: 6px; }
.chiplet.trivial { color: var(--fg-faint); }
.chiplet.failed { color: var(--danger-fg); background: var(--danger-bg); border-color: var(--danger-border); }
.feed-end { display: flex; justify-content: center; padding: 16px; font-size: 12px; color: var(--fg-faint); font-family: var(--font-mono); }

/* Conversations */
.topic-chip { font-size: 12px; font-weight: 500; padding: 5px 11px; border-radius: var(--radius-full); border: 1px solid var(--border-strong); background: var(--surface); color: var(--fg-muted); cursor: pointer; transition: all .12s; }
.topic-chip:hover { background: var(--surface-hover); }
.topic-chip.on { background: var(--primary); border-color: var(--primary); color: #fff; }

/* Searchable topic/subtopic filter dropdowns */
.facet-select { position: relative; display: inline-flex; align-items: center; gap: 8px; }
.facet-select.disabled { opacity: .55; }
.facet-trigger { display: inline-flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 200px; max-width: 320px; height: 34px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); padding: 0 11px; font-size: 13px; color: var(--fg); cursor: pointer; transition: background .12s; }
.facet-trigger:hover:not(:disabled) { background: var(--surface-hover); }
.facet-trigger:disabled { cursor: default; }
.facet-trigger.on { border-color: var(--primary); color: var(--primary); font-weight: 500; }
.facet-trigger-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.facet-pop { position: absolute; top: 38px; left: 0; z-index: 31; width: 320px; max-width: 90vw; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-md); animation: fade .12s ease; overflow: hidden; }
.facet-search { position: relative; display: flex; align-items: center; padding: 8px; border-bottom: 1px solid var(--border-subtle); }
.facet-search svg { position: absolute; left: 18px; color: var(--fg-faint); pointer-events: none; }
.facet-search .input { width: 100%; padding-left: 32px; }
.facet-options { max-height: 320px; overflow-y: auto; padding: 5px; }
.facet-opt { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; text-align: left; padding: 7px 9px; border: none; border-radius: var(--radius-sm); background: transparent; font-size: 13px; color: var(--fg); cursor: pointer; }
.facet-opt:hover { background: var(--surface-hover); }
.facet-opt.on { background: var(--primary-subtle-bg); color: var(--primary-subtle-fg); font-weight: 500; }
.facet-opt-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.facet-count { flex: none; font-size: 11px; font-family: var(--font-mono); color: var(--fg-faint); }
.facet-empty { padding: 14px 9px; text-align: center; font-size: 12px; color: var(--fg-faint); }
.conv-list { display: flex; flex-direction: column; gap: 10px; }
.conv { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-xs); overflow: hidden; transition: border-color .12s; }
.conv.open { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.conv-head { display: flex; align-items: center; gap: 12px; padding: 13px 16px; cursor: pointer; }
.conv-head:hover { background: var(--surface-hover); }
.conv-titles { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.conv-topic { font-size: 14px; font-weight: 600; color: var(--fg); }
.conv-sub { font-size: 12px; color: var(--fg-subtle); }
.conv-count { font-size: 12px; color: var(--fg-muted); width: 70px; }
.conv-body { padding: 4px 16px 16px 44px; border-top: 1px solid var(--border-subtle); }
.conv-summary { font-size: 13.5px; color: var(--fg-muted); line-height: 1.55; margin: 14px 0 12px; }
.conv-entities { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.entity { font-size: 11px; font-family: var(--font-mono); color: var(--fg-muted); background: var(--surface-sunken); padding: 2px 8px; border-radius: var(--radius-xs); }
.conv-msgs { display: flex; flex-direction: column; gap: 9px; }
.conv-msg { display: flex; gap: 9px; align-items: flex-start; }
.cm-name { font-size: 13px; font-weight: 600; color: var(--fg); cursor: pointer; }
.cm-name:hover { color: var(--primary); }
.cm-text { font-size: 13px; color: var(--fg-muted); }

/* Inline message attachments */
.att-list { display: flex; flex-direction: column; gap: 8px; margin-top: 9px; }
.att { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-subtle); overflow: hidden; }
.att-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; }
.att-thumb { width: 34px; height: 34px; border-radius: var(--radius-xs); background: var(--surface); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.att-thumb.voice { background: var(--primary-subtle-bg); border-color: var(--blue-200); }
.att-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.att-label { font-size: 12.5px; font-weight: 500; color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.att-meta { font-size: 11px; color: var(--fg-faint); }
.att-btn { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 500; color: var(--fg-muted); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: 4px 9px; cursor: pointer; white-space: nowrap; transition: all .12s; }
.att-btn:hover { background: var(--surface-hover); color: var(--fg); }
.att-btn.on { background: var(--primary-subtle-bg); border-color: var(--blue-200); color: var(--primary-subtle-fg); }
.att-pending { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--fg-subtle); font-family: var(--font-mono); white-space: nowrap; }

/* Clickable image/video thumbnail */
.thumb-btn { position: relative; width: 56px; height: 56px; border-radius: var(--radius-xs); border: 1px solid var(--border); overflow: hidden; cursor: pointer; padding: 0; flex: 0 0 auto; background: var(--surface-sunken); }
.thumb-btn:hover .thumb-zoom { opacity: 1; }
.thumb-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb-ph { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, color-mix(in srgb, var(--tone) 88%, white), var(--tone)); }
.thumb-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(16,16,19,.28); }
.thumb-zoom { position: absolute; bottom: 3px; right: 3px; width: 18px; height: 18px; border-radius: 4px; background: rgba(16,16,19,.6); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .12s; }

/* Audio player */
.aud { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.aud-play { width: 32px; height: 32px; border-radius: 50%; background: var(--primary); border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; flex: 0 0 auto; transition: background .12s; }
.aud-play:hover { background: var(--primary-hover); }
.aud-wave { display: flex; align-items: center; gap: 2px; height: 30px; flex: 1; min-width: 60px; }
.aud-bar { flex: 1; min-width: 2px; max-width: 4px; border-radius: 2px; background: var(--neutral-300); transition: background .08s; }
.aud-bar.on { background: var(--primary); }
.aud-time { font-size: 11px; color: var(--fg-subtle); white-space: nowrap; flex: 0 0 auto; }

/* Lightbox */
.lb { position: fixed; inset: 0; z-index: 70; background: rgba(16,16,19,.78); display: flex; align-items: center; justify-content: center; padding: 32px; animation: fade .16s ease; }
.lb-close { position: absolute; top: 18px; right: 18px; width: 38px; height: 38px; border-radius: var(--radius-sm); border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.08); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.lb-close:hover { background: rgba(255,255,255,.16); }
.lb-card { display: flex; background: var(--surface); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); max-width: 880px; width: 100%; max-height: 80vh; animation: pop .18s ease; }
@keyframes pop { from { transform: scale(.97); } to { transform: scale(1); } }
.lb-stage { flex: 1; min-width: 0; background: var(--neutral-950); display: flex; align-items: center; justify-content: center; }
.lb-media { max-width: 100%; max-height: 80vh; display: block; object-fit: contain; }
.lb-ph { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; width: 100%; aspect-ratio: 4/3; background: linear-gradient(135deg, color-mix(in srgb, var(--tone) 86%, white), var(--tone)); color: #fff; }
.lb-ph .mono { font-size: 12px; color: rgba(255,255,255,.85); }
.lb-ph-note { font-size: 11px; color: rgba(255,255,255,.6); }
.lb-side { width: 280px; flex: 0 0 280px; padding: 20px; border-left: 1px solid var(--border); overflow-y: auto; }
.lb-label { font-size: 15px; font-weight: 600; color: var(--fg); }
.lb-meta { font-size: 12px; color: var(--fg-faint); margin-top: 3px; }
.att-ai { padding: 10px 12px; border-top: 1px dashed var(--border-strong); background: var(--surface); }
.att-ai-head { display: flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--primary-subtle-fg); margin-bottom: 5px; white-space: nowrap; }
.att-ai-head > span:first-of-type { overflow: hidden; text-overflow: ellipsis; }
.att-ai-tag { margin-left: auto; font-family: var(--font-mono); font-size: 9px; font-weight: 600; letter-spacing: .04em; color: var(--fg-subtle); background: var(--surface-subtle); border: 1px solid var(--border); padding: 0 5px; border-radius: var(--radius-xs); }
.att-ai-text { font-size: 13px; line-height: 1.55; color: var(--fg-muted); margin: 0; }
.dotpulse { width: 7px; height: 7px; border-radius: 50%; background: var(--warning-solid); animation: dotpulse 1s ease-in-out infinite; }
@keyframes dotpulse { 0%,100% { opacity: .35; } 50% { opacity: 1; } }

/* Profile drawer */
.avatar-hist { width: 46px; height: 46px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 600; font-size: 15px; border: 1px solid var(--border); }
.avatar-hist.ghost { background: var(--surface); border-style: dashed; }