/* RoHub Console — per-view layout. */

/* ---------- Event log (Overview) ---------- */
.log { height: 360px; overflow-y: auto; font-family: var(--mono); font-size: var(--fs-sm); padding: var(--s2) 0; }
.log .ev { display: flex; gap: var(--s3); padding: 3px var(--s5); border-bottom: 1px solid var(--border-soft); align-items: baseline; }
.log .ev:hover { background: var(--surface-hover); }
.log .ev .t { color: var(--text-faint); flex: 0 0 60px; }
.log .ev .who { color: var(--text-dim); flex: 0 0 110px; overflow: hidden; text-overflow: ellipsis; }
.log .ev .msg { flex: 1; word-break: break-word; color: var(--text); }
.log .ev.lvl-connect .msg { color: var(--good); }
.log .ev.lvl-disconnect .msg { color: var(--warn); }
.log .ev.lvl-route .msg, .log .ev.lvl-hermes .msg { color: var(--info); }
.log .ev.lvl-tts .msg { color: var(--accent); }
.log .ev.lvl-error .msg { color: var(--bad); }
.filter-chips { display: flex; gap: var(--s2); flex-wrap: wrap; }
.filter-chips .chip-tag { cursor: pointer; }
.filter-chips .chip-tag.on { background: var(--accent-soft); color: var(--accent); border-color: transparent; }

/* ---------- Control view ---------- */
.dpad { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); max-width: 300px; margin: 0 auto; }
.dpad .btn { aspect-ratio: 1.6 / 1; }
.media-out { display: grid; gap: var(--s3); }
.media-out img, .media-out video, .media-out audio { max-width: 100%; border: 1px solid var(--border); border-radius: var(--radius-sm); }
pre.json { background: var(--bg-3); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); padding: var(--s3);
  font-family: var(--mono); font-size: var(--fs-sm); white-space: pre-wrap; word-break: break-word; max-height: 380px; overflow: auto; margin: 0; color: var(--text-dim); }
.json-view { font-family: var(--mono); font-size: var(--fs-sm); }
.json-view .k { color: var(--accent); } .json-view .s { color: var(--good); } .json-view .n { color: var(--info); } .json-view .b { color: var(--warn); }

/* ---------- HUD replica ---------- */
.hud-screen { background: radial-gradient(120% 120% at 50% 0%, color-mix(in srgb, var(--accent) 8%, var(--bg-2)) 0%, var(--bg-2) 70%);
  border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--s5); min-height: 380px; position: relative; }
.hud-statusline { display: flex; gap: var(--s3); align-items: center; color: var(--text-dim); font-size: var(--fs-sm);
  border-bottom: 1px solid var(--border-soft); padding-bottom: var(--s3); margin-bottom: var(--s3); flex-wrap: wrap; }
.hud-statusline .svc { margin-left: auto; font-weight: 600; }
.hud-statusline .svc.listening { color: var(--info); } .hud-statusline .svc.responding { color: var(--warn); } .hud-statusline .svc.idle { color: var(--text-faint); }
.hud-tabs { display: flex; gap: var(--s2); flex-wrap: wrap; margin-bottom: var(--s4); }
.hud-tab { padding: 3px var(--s3); border-radius: var(--radius-pill); font-size: var(--fs-sm); border: 1px solid var(--border-soft); color: var(--text-dim); }
.hud-tab.cur { background: var(--accent); color: var(--accent-ink); border-color: transparent; font-weight: 600; }
.hud-content { font-size: var(--fs-base); min-height: 160px; }
.hud-content .k { color: var(--text-faint); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .5px; margin: var(--s3) 0 var(--s2); }
.hud-content .big { font-size: var(--fs-xl); color: var(--accent); }
.hud-msg { padding: var(--s2) 0; border-bottom: 1px solid var(--border-soft); }
.hud-msg .who { color: var(--accent); margin-right: var(--s2); font-weight: 600; }
.hud-focus { color: var(--text-faint); font-size: var(--fs-sm); margin-bottom: var(--s3); }

/* ---------- Chats ---------- */
.chats-layout { display: grid; grid-template-columns: 300px 1fr; gap: var(--s4); align-items: start; }
.chat-list { display: flex; flex-direction: column; gap: 2px; max-height: 72vh; overflow-y: auto; }
.chat-item { padding: var(--s3); border-radius: var(--radius-sm); cursor: pointer; border: 1px solid transparent; }
.chat-item:hover { background: var(--surface-hover); }
.chat-item.active { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 30%, transparent); }
.chat-item .title { font-weight: 600; font-size: var(--fs-md); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-item .meta { color: var(--text-faint); font-size: var(--fs-xs); margin-top: 2px; }
.chat-thread { display: flex; flex-direction: column; height: 72vh; }
.chat-scroll { flex: 1; overflow-y: auto; padding: var(--s2) var(--s2) var(--s4); display: flex; flex-direction: column; gap: var(--s3); }
.bubble { max-width: 76%; padding: var(--s3) var(--s4); border-radius: var(--radius); font-size: var(--fs-md); white-space: pre-wrap; word-break: break-word; }
.bubble.user { align-self: flex-end; background: var(--accent); color: var(--accent-ink); border-bottom-right-radius: 4px; }
.bubble.assistant { align-self: flex-start; background: var(--bg-3); border: 1px solid var(--border); border-bottom-left-radius: 4px; }
.bubble.pending { opacity: .7; }
.bubble .ts { display: block; font-size: 10px; opacity: .6; margin-top: 4px; }
.chat-compose { display: flex; gap: var(--s2); padding-top: var(--s3); border-top: 1px solid var(--border-soft); }
.chat-compose textarea { flex: 1; min-height: 44px; max-height: 160px; }

/* ---------- Todos ---------- */
.todo-list { display: flex; flex-direction: column; gap: var(--s2); }
.todo { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4); background: var(--bg-2);
  border: 1px solid var(--border); border-radius: var(--radius-sm); }
.todo.done .txt { text-decoration: line-through; color: var(--text-faint); }
.todo .check { width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--border); cursor: pointer; flex: 0 0 auto; display: grid; place-items: center; }
.todo .check.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.todo .check svg { width: 13px; height: 13px; }
.todo .txt { flex: 1; }
.todo .handle { cursor: grab; color: var(--text-faint); }
.todo.dragging { opacity: .5; }
.todo.dragover { border-color: var(--accent); }

/* ---------- Jobs ---------- */
.jobs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--s4); }
.job { background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--s4); display: flex; flex-direction: column; gap: var(--s2); }
.job .name { font-weight: 600; }
.job .prompt { color: var(--text-dim); font-size: var(--fs-sm); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.job .when { color: var(--text-faint); font-size: var(--fs-xs); }
.job .result { font-family: var(--mono); font-size: var(--fs-xs); background: var(--bg-3); border-radius: var(--radius-sm); padding: var(--s2); white-space: pre-wrap; max-height: 160px; overflow: auto; }

/* ---------- ReID ---------- */
.persons-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--s4); }
.person { background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.person .ph { aspect-ratio: 1; background: var(--bg-3); display: grid; place-items: center; color: var(--text-faint); overflow: hidden; }
.person .ph img { width: 100%; height: 100%; object-fit: cover; }
.person .info { padding: var(--s3); }
.person .info .n { font-weight: 600; font-size: var(--fs-md); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.person .info .c { color: var(--text-faint); font-size: var(--fs-xs); margin-top: 2px; }