/* ===== Admin Management Page Styles ===== */

/* Stats cards row */
.admin-stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
.admin-stat-card {
  background: var(--md-surface);
  border: 1px solid var(--md-surface-3);
  border-radius: var(--radius-sm);
  padding: var(--space-4) var(--space-5);
  text-align: center;
}
.admin-stat-value {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  color: var(--md-primary);
  margin-bottom: 2px;
}
.admin-stat-label {
  font-size: var(--text-sm);
  color: var(--md-on-surface-variant);
}

/* Toolbar */
.admin-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
}
.admin-toolbar input[type="text"] {
  flex: 1;
  min-width: 200px;
  padding: 8px 12px;
  border: 1px solid var(--md-surface-3);
  border-radius: var(--radius-xs);
  font-size: var(--text-base);
  background: var(--md-surface);
  color: var(--md-on-surface);
  outline: none;
  transition: border-color var(--duration-fast);
}
.admin-toolbar input[type="text"]:focus {
  border-color: var(--md-primary);
}
.admin-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 16px;
  border-radius: var(--radius-xs);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  cursor: pointer;
  border: 1px solid transparent;
  transition: all var(--duration-fast);
  white-space: nowrap;
}
.admin-btn-primary {
  background: var(--md-primary);
  color: var(--md-on-primary);
}
.admin-btn-primary:hover {
  opacity: 0.9;
}
.admin-btn-outline {
  background: var(--md-surface);
  color: var(--md-on-surface);
  border-color: var(--md-surface-3);
}
.admin-btn-outline:hover {
  background: var(--md-surface-1);
}
.admin-btn-danger {
  background: var(--md-error);
  color: #fff;
}
.admin-btn-danger:hover {
  opacity: 0.9;
}
.admin-btn-sm {
  padding: 4px 10px;
  font-size: var(--text-xs);
}

/* Users table */
.admin-table-wrap {
  background: var(--md-surface);
  border: 1px solid var(--md-surface-3);
  border-radius: var(--radius-sm);
  overflow-x: auto;
}
.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}
.admin-table th,
.admin-table td {
  padding: 10px 14px;
  text-align: left;
  border-bottom: 1px solid var(--md-surface-3);
  white-space: nowrap;
}
.admin-table th {
  background: var(--md-surface-1);
  font-weight: var(--font-medium);
  color: var(--md-on-surface-variant);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.admin-table tr:last-child td {
  border-bottom: none;
}
.admin-table tr:hover td {
  background: var(--md-surface-1);
}

/* Status badge */
.admin-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
}
.admin-badge-active {
  background: var(--md-success-container);
  color: var(--md-success);
}
.admin-badge-blocked {
  background: var(--md-error-container);
  color: var(--md-error);
}
.admin-badge-autohost-active {
  background: rgba(255, 152, 0, .15);
  color: #f57c00;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.admin-badge-autohost-paused {
  background: var(--md-surface-variant);
  color: var(--md-on-surface-variant);
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.admin-badge-admin {
  background: var(--md-primary-container);
  color: var(--md-on-primary-container);
}
.admin-badge-internal {
  background: var(--md-tertiary-container, #e8def8);
  color: var(--md-on-tertiary-container, #4a148c);
}
.admin-badge-data {
  background: var(--md-secondary-container, #d4e3ff);
  color: var(--md-on-secondary-container, #001c3a);
}
.admin-badge-operator {
  background: var(--md-surface-2);
  color: var(--md-on-surface-variant);
}

/* Action buttons in table */
.admin-actions {
  display: flex;
  gap: 4px;
  align-items: center;
}
.admin-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-xs);
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--md-on-surface-variant);
  transition: all var(--duration-fast);
}
.admin-action-btn:hover {
  background: var(--md-surface-2);
  color: var(--md-on-surface);
}
.admin-action-btn.danger:hover {
  background: var(--md-error-container);
  color: var(--md-error);
}
.admin-action-btn .material-symbols-outlined {
  font-size: 18px;
}

/* Section headers */
.admin-section-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}
.admin-section-header h3 {
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  color: var(--md-on-surface);
  margin: 0;
}
.admin-section-header .material-symbols-outlined {
  font-size: 22px;
  color: var(--md-primary);
}

/* Audit log */
.admin-audit-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: var(--md-surface);
  border: 1px solid var(--md-surface-3);
  border-radius: var(--radius-sm);
  max-height: 400px;
  overflow-y: auto;
}
.admin-audit-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: 10px 14px;
  border-bottom: 1px solid var(--md-surface-3);
  font-size: var(--text-sm);
}
.admin-audit-item:last-child {
  border-bottom: none;
}
.admin-audit-time {
  color: var(--md-on-surface-variant);
  font-size: var(--text-xs);
  white-space: nowrap;
  min-width: 130px;
}
.admin-audit-action {
  font-weight: var(--font-medium);
  color: var(--md-on-surface);
}
.admin-audit-detail {
  color: var(--md-on-surface-variant);
  font-size: var(--text-xs);
}

/* Chat history viewer */
.admin-chat-viewer {
  background: var(--md-surface);
  border: 1px solid var(--md-surface-3);
  border-radius: var(--radius-sm);
  max-height: 500px;
  overflow-y: auto;
  padding: var(--space-4);
}
.admin-chat-msg {
  margin-bottom: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-xs);
  font-size: var(--text-sm);
  line-height: var(--line-height-relaxed);
  max-width: 85%;
  word-break: break-word;
}
.admin-chat-msg.user {
  background: var(--md-primary-container);
  color: var(--md-on-primary-container);
  margin-left: auto;
}
.admin-chat-msg.assistant {
  background: var(--md-surface-2);
  color: var(--md-on-surface);
}
.admin-chat-msg-role {
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  color: var(--md-on-surface-variant);
  margin-bottom: 4px;
}

/* Modal overlay */
.admin-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: var(--z-modal-backdrop);
  display: none;
  align-items: center;
  justify-content: center;
}
.admin-modal-backdrop.active {
  display: flex;
}
.admin-modal {
  background: var(--md-surface);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  width: 90%;
  max-width: 480px;
  box-shadow: var(--shadow-4);
}
.admin-modal h3 {
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  margin: 0 0 var(--space-4) 0;
}
.admin-modal-field {
  margin-bottom: var(--space-3);
}
.admin-modal-field label {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--md-on-surface-variant);
  margin-bottom: 4px;
}
.admin-modal-field input,
.admin-modal-field select {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--md-surface-3);
  border-radius: var(--radius-xs);
  font-size: var(--text-base);
  background: var(--md-surface);
  color: var(--md-on-surface);
  outline: none;
  box-sizing: border-box;
}
.admin-modal-field input:focus,
.admin-modal-field select:focus {
  border-color: var(--md-primary);
}
.admin-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  margin-top: var(--space-5);
}

/* Non-admin placeholder */
.admin-no-access {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  text-align: center;
}
.admin-no-access-inner {
  max-width: 360px;
}
.admin-no-access .material-symbols-outlined {
  font-size: 64px;
  color: var(--md-outline);
  display: block;
  margin: 0 auto 20px;
}

/* Detail panel (drawer-like) */
.admin-detail-panel {
  background: var(--md-surface);
  border: 1px solid var(--md-surface-3);
  border-radius: var(--radius-sm);
  padding: var(--space-5);
  margin-top: var(--space-4);
}
.admin-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.admin-detail-field-label {
  font-size: var(--text-xs);
  color: var(--md-on-surface-variant);
  margin-bottom: 2px;
}
.admin-detail-field-value {
  font-size: var(--text-base);
  color: var(--md-on-surface);
  font-weight: var(--font-medium);
}

/* Account chips (paginated display in user detail) */
.admin-account-chips-container {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-height: 200px;
  overflow-y: auto;
  padding: 4px 0;
}
.admin-acct-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: default;
  transition: opacity var(--duration-fast);
}
.admin-acct-chip:hover {
  opacity: .8;
}
.admin-acct-chip-authed {
  background: color-mix(in srgb, var(--md-primary) 12%, transparent);
  color: var(--md-primary);
  border: 1px solid color-mix(in srgb, var(--md-primary) 30%, transparent);
}
.admin-acct-chip-unauthed {
  background: var(--md-surface-1);
  color: var(--md-on-surface-variant);
  border: 1px solid var(--md-surface-3);
}
.admin-acct-chip-name {
  font-size: 10px;
  opacity: .7;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ═══ User Detail Panel (redesigned) ═══ */

.ud-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--md-surface-3);
  margin-bottom: 16px;
}
.ud-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.ud-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--md-primary), #7B61FF);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ud-avatar .material-symbols-outlined {
  color: #fff;
  font-size: 22px;
}
.ud-header-info {
  min-width: 0;
}
.ud-header-name {
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  color: var(--md-on-surface);
  line-height: 1.3;
}
.ud-header-email {
  font-size: var(--text-sm);
  color: var(--md-on-surface-variant);
}
.ud-header-badges {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.ud-stats-row {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.ud-stat-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--md-surface-1);
  border: 1px solid var(--md-surface-3);
  border-radius: 10px;
  flex: 1;
  min-width: 130px;
  transition: border-color var(--duration-fast);
}
.ud-stat-card:hover {
  border-color: var(--md-primary);
}
.ud-stat-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--md-primary) 10%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ud-stat-icon .material-symbols-outlined {
  font-size: 18px;
  color: var(--md-primary);
}
.ud-stat-body {
  min-width: 0;
}
.ud-stat-value {
  font-size: var(--text-base);
  font-weight: var(--font-bold);
  color: var(--md-on-surface);
  white-space: nowrap;
}
.ud-stat-label {
  font-size: 11px;
  color: var(--md-on-surface-variant);
}

.ud-sections {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
@media (max-width: 800px) {
  .ud-sections { grid-template-columns: 1fr; }
}

.ud-section {
  background: var(--md-surface-1);
  border: 1px solid var(--md-surface-3);
  border-radius: 10px;
  padding: 14px 16px;
}
.ud-section-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
}
.ud-section-head .material-symbols-outlined {
  font-size: 16px;
  color: var(--md-primary);
}
.ud-section-title {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--md-on-surface);
}
.ud-section-count {
  background: var(--md-primary);
  color: var(--md-on-primary);
  font-size: 10px;
  font-weight: var(--font-bold);
  padding: 1px 7px;
  border-radius: var(--radius-full);
}
.ud-section-meta {
  margin-left: auto;
  font-size: 11px;
  color: var(--md-on-surface-variant);
}

/* Autohost task cards */
.ud-autohost-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ud-autohost-empty {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px;
  font-size: var(--text-sm);
  color: var(--md-on-surface-variant);
  justify-content: center;
}
.ud-autohost-empty .material-symbols-outlined {
  font-size: 16px;
}
.ud-autohost-loading {
  text-align: center;
  padding: 12px;
  font-size: 12px;
  color: var(--md-on-surface-variant);
}

.ud-task-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--md-surface-3);
  background: var(--md-surface);
  transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
}
.ud-task-card:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.ud-task-card.ud-task-running {
  border-left: 3px solid #f57c00;
}
.ud-task-card.ud-task-paused {
  border-left: 3px solid var(--md-outline);
  opacity: .7;
}
.ud-task-status {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: var(--font-medium);
  white-space: nowrap;
  padding: 3px 8px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
}
.ud-task-running .ud-task-status {
  background: rgba(255, 152, 0, .12);
  color: #f57c00;
}
.ud-task-paused .ud-task-status {
  background: var(--md-surface-2);
  color: var(--md-on-surface-variant);
}
.ud-task-status .material-symbols-outlined {
  font-size: 14px;
}
.ud-task-info {
  flex: 1;
  min-width: 0;
}
.ud-task-name {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--md-on-surface);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ud-task-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  color: var(--md-on-surface-variant);
  margin-top: 3px;
  flex-wrap: wrap;
}
.ud-task-meta span {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
}
.ud-task-meta .material-symbols-outlined {
  font-size: 12px;
  opacity: .5;
}
.ud-task-actions {
  flex-shrink: 0;
}
.ud-task-stop-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border: 1px solid var(--md-error-container);
  border-radius: var(--radius-full);
  background: var(--md-error-container);
  color: var(--md-error);
  font-size: 11px;
  font-weight: var(--font-medium);
  cursor: pointer;
  transition: all var(--duration-fast);
  white-space: nowrap;
}
.ud-task-stop-btn:hover {
  background: var(--md-error);
  color: #fff;
  border-color: var(--md-error);
}
.ud-task-stop-btn .material-symbols-outlined {
  font-size: 14px;
}

/* Chat trend chart container */
.ud-section-trend {
  margin-bottom: 0;
}
.admin-chat-trend-container {
  background: var(--md-surface);
  border-radius: 8px;
  padding: 8px 4px;
  min-height: 200px;
  position: relative;
}
.admin-chat-trend-empty {
  text-align: center;
  padding: 24px;
  color: var(--md-on-surface-variant);
  font-size: 12px;
}

/* Tabs within admin page */
.admin-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--md-surface-3);
  margin-bottom: var(--space-5);
}
.admin-tab {
  padding: 10px 20px;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--md-on-surface-variant);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all var(--duration-fast);
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
}
.admin-tab:hover {
  color: var(--md-on-surface);
  background: var(--md-surface-1);
}
.admin-tab.active {
  color: var(--md-primary);
  border-bottom-color: var(--md-primary);
}
.admin-tab .material-symbols-outlined {
  font-size: 18px;
}
.admin-tab-content {
  display: none;
}
.admin-tab-content.active {
  display: block;
}

/* Empty state */
.admin-empty {
  text-align: center;
  padding: var(--space-10) var(--space-6);
  color: var(--md-on-surface-variant);
}
.admin-empty .material-symbols-outlined {
  font-size: 48px;
  color: var(--md-outline);
  display: block;
  margin: 0 auto 12px;
}

/* ===== Chat Review (admin read-only) =====
 * Three-column layout: users (left) / instances (middle) / messages (right).
 * The right column re-uses the user-side `.acl-msg` / `.acl-bubble` /
 * `.acl-date-divider` styles from chat.css for visual parity, while the
 * interactive affordances (copy button, typing dots, avatar icon) are
 * intentionally stripped away in the admin renderer.
 */
.admin-review {
  display: flex;
  gap: 6px;
  height: calc(100vh - 200px);
  min-height: 480px;
  align-items: stretch;
  margin: 0 -16px;
  padding: 0 8px;
}
.admin-review-col {
  display: flex;
  flex-direction: column;
  background: var(--md-surface);
  border: 1px solid var(--md-surface-3);
  border-radius: var(--radius-sm);
  overflow: hidden;
  min-width: 0;
}
.admin-review-users     { flex: 0 0 170px; }
.admin-review-instances { flex: 0 0 220px; }
.admin-review-messages  { flex: 1 1 auto; min-width: 300px; }

.admin-review-col-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--md-surface-3);
  background: var(--md-surface-1);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--md-on-surface);
  flex-shrink: 0;
}
.admin-review-col-head .material-symbols-outlined {
  color: var(--md-primary);
}

.admin-review-search {
  padding: 8px 10px;
  border-bottom: 1px solid var(--md-surface-3);
  flex-shrink: 0;
}
.admin-review-search input {
  width: 100%;
  padding: 6px 10px;
  border: 1px solid var(--md-surface-3);
  border-radius: var(--radius-xs);
  font-size: var(--text-sm);
  background: var(--md-surface);
  color: var(--md-on-surface);
  outline: none;
  box-sizing: border-box;
  transition: border-color var(--duration-fast);
}
.admin-review-search input:focus {
  border-color: var(--md-primary);
}

.admin-review-list {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 4px 0;
}
.admin-review-placeholder {
  padding: 24px 14px;
  text-align: center;
  color: var(--md-on-surface-variant);
  font-size: var(--text-sm);
}

/* List item (shared between user list and instance list) */
.admin-review-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  cursor: pointer;
  border-left: 3px solid transparent;
  transition: background var(--duration-fast);
  min-width: 0;
}
.admin-review-item:hover {
  background: var(--md-surface-1);
}
.admin-review-item.active {
  background: var(--md-primary-container);
  border-left-color: var(--md-primary);
}
.admin-review-item.active .admin-review-item-title,
.admin-review-item.active .admin-review-item-sub,
.admin-review-item.active .admin-review-item-recent {
  color: var(--md-on-primary-container);
}
.admin-review-item-main {
  flex: 1 1 auto;
  min-width: 0;
}
.admin-review-item-title {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--md-on-surface);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.admin-review-item-sub {
  font-size: var(--text-xs);
  color: var(--md-on-surface-variant);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}
.admin-review-item-recent {
  font-size: var(--text-xs);
  color: var(--md-on-surface-variant);
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Circular avatar placeholder for instance items.
 * Re-uses the `aia-*` gradient classes from instances.css; here we
 * only define the frame (size, shape, border). */
.admin-review-item-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1px solid rgba(0, 0, 0, 0.06);
  background: var(--md-surface-2);
}

/* Role badge (A / O) shown in the user list */
.admin-review-role-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-full);
  font-size: 10px;
  font-weight: var(--font-bold);
  flex-shrink: 0;
  letter-spacing: 0;
}
.admin-review-role-admin {
  background: var(--md-primary-container);
  color: var(--md-on-primary-container);
}
.admin-review-role-internal {
  background: var(--md-tertiary-container, #e8def8);
  color: var(--md-on-tertiary-container, #4a148c);
}
.admin-review-role-op {
  background: var(--md-surface-2);
  color: var(--md-on-surface-variant);
}

/* Inline blocked indicator next to the user title */
.admin-review-blocked {
  display: inline-flex;
  align-items: center;
  color: var(--md-error);
  margin-left: 4px;
}

/* Channel tabs above the instance list (hidden when ≤1 channel) */
.admin-review-channel-tabs {
  display: flex;
  gap: 4px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--md-surface-3);
  flex-wrap: wrap;
  flex-shrink: 0;
}
.admin-review-channel-tab {
  padding: 4px 10px;
  border: 1px solid var(--md-surface-3);
  border-radius: var(--radius-full);
  background: var(--md-surface);
  color: var(--md-on-surface-variant);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  cursor: pointer;
  transition: all var(--duration-fast);
  white-space: nowrap;
}
.admin-review-channel-tab:hover {
  background: var(--md-surface-1);
  color: var(--md-on-surface);
}
.admin-review-channel-tab.active {
  background: var(--md-primary);
  color: var(--md-on-primary);
  border-color: var(--md-primary);
}

/* Topic selector (dropdown) within the messages column */
.admin-review-topic-tabs {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--md-surface-3);
  flex-shrink: 0;
}
.admin-review-topic-select {
  flex: 1;
  min-width: 0;
  padding: 5px 10px;
  border: 1px solid var(--md-surface-3);
  border-radius: var(--radius-xs);
  background: var(--md-surface);
  color: var(--md-on-surface);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  cursor: pointer;
  appearance: auto;
}
.admin-review-topic-select:focus {
  outline: 2px solid var(--md-primary);
  outline-offset: -1px;
}
.admin-review-topic-count {
  flex-shrink: 0;
  font-size: var(--text-xs);
  color: var(--md-on-surface-variant);
  white-space: nowrap;
}

/* Read-only badge in the right-column header */
.admin-review-readonly-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 8px;
  border-radius: var(--radius-full);
  background: var(--md-surface-2);
  color: var(--md-on-surface-variant);
  font-size: 10px;
  font-weight: var(--font-medium);
  letter-spacing: 0.5px;
  margin-left: 6px;
}
.admin-review-msg-meta {
  margin-left: auto;
  font-size: var(--text-xs);
  font-weight: var(--font-normal);
  color: var(--md-on-surface-variant);
  font-variant-numeric: tabular-nums;
}

/* Message viewer — hosts the `.acl-msg` bubbles + `.acl-date-divider` */
.admin-review-viewer {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 14px 18px 20px;
  background: var(--md-surface);
}
/* The admin viewer never shows copy buttons nor live typing dots even
 * if the markup accidentally leaks in — enforce at the CSS layer. */
.admin-review-viewer .acl-copy-btn,
.admin-review-viewer .acl-typing-dot {
  display: none !important;
}
/* Smart Card buttons are read-only in review context */
.admin-review-viewer .acl-card-btn {
  pointer-events: none;
  opacity: 0.5;
  cursor: default;
}
/* Messages take full width of the narrow right column without the
 * regular chat layout's avatar offset. */
.admin-review-viewer .acl-msg {
  margin-bottom: 8px;
}

/* ===== Responsive: stack columns on narrow viewports ===== */
@media (max-width: 960px) {
  .admin-review {
    flex-direction: column;
    height: auto;
    min-height: 0;
  }
  .admin-review-users,
  .admin-review-instances {
    flex: 0 0 auto;
    max-height: 220px;
  }
  .admin-review-messages {
    min-height: 320px;
  }
}



/* ═══ 4th Column: Step Metrics Panel (admin review) ═══ */
.admin-review-metrics {
  flex: 0 0 300px;
}
.admin-metrics-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 14px 16px;
}

/* Clickable AI bubbles in admin review */
.admin-review-viewer .acl-msg.acl-ai .acl-bubble {
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color var(--duration-fast), background var(--duration-fast);
}
.admin-review-viewer .acl-msg.acl-ai .acl-bubble:hover {
  border-color: var(--md-primary-container);
}
.admin-review-viewer .acl-msg.acl-ai.admin-msg-selected .acl-bubble {
  border-color: var(--md-primary);
  background: #EDF4FF;
}

/* ── Model metadata row in admin review bubbles ── */
.acl-msg-model {
  display: flex;
  align-items: center;
  gap: 4px 12px;
  flex-wrap: wrap;
  margin-top: 5px;
  font-size: 10.5px;
  color: var(--md-outline);
  line-height: 1.45;
}
.admin-model-name {
  font-weight: 600;
  font-family: var(--font-mono);
  color: var(--md-on-surface-variant);
  background: var(--md-surface-2);
  padding: 1px 6px;
  border-radius: var(--radius-xs);
  white-space: nowrap;
}
.admin-model-stat {
  font-family: var(--font-mono);
  white-space: nowrap;
}
.admin-fallback { color: var(--md-warning); background: var(--md-warning-container); }
.admin-fallback-arrow { display: inline-block; margin: 0 3px; color: var(--md-outline); font-weight: 400; }

/* ── Model info row in metrics panel ── */
.admin-metrics-model-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  margin-bottom: 10px;
  border-radius: var(--radius-sm);
  background: var(--md-surface-1);
  border: 1px solid var(--md-surface-3);
  font-size: var(--text-sm);
}

/* ── Metrics Mode Indicator ── */
.admin-metrics-mode {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  margin-bottom: 12px;
  border-radius: var(--radius-xs);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
}
.admin-metrics-mode-summary {
  background: var(--md-surface-2);
  color: var(--md-on-surface-variant);
}
.admin-metrics-mode-detail {
  background: var(--md-primary-container);
  color: var(--md-on-primary-container);
}
.admin-metrics-mode .material-symbols-outlined { font-size: 16px; }
.admin-metrics-mode .admin-metrics-clear {
  margin-left: auto;
  background: none;
  border: none;
  cursor: pointer;
  font-size: var(--text-xs);
  color: var(--md-primary);
  text-decoration: underline;
}

/* ── Metrics Summary Cards ── */
.admin-metrics-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 14px;
}
.admin-metrics-card {
  background: var(--md-surface-1);
  border: 1px solid var(--md-surface-3);
  border-radius: var(--radius-xs);
  padding: 10px 12px;
  text-align: center;
}
.admin-metrics-card-value {
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  color: var(--md-primary);
}
.admin-metrics-card-label {
  font-size: var(--text-xs);
  color: var(--md-on-surface-variant);
  margin-top: 2px;
}

/* ── Step List ── */
.admin-metrics-steps-title {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--md-on-surface);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.admin-metrics-steps-title .material-symbols-outlined { font-size: 16px; color: var(--md-primary); }

.admin-metrics-step {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 6px;
  margin-bottom: 4px;
  transition: background var(--duration-fast);
}
.admin-metrics-step:hover { background: var(--md-surface-1); }
.admin-metrics-step-icon {
  width: 24px; height: 24px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; font-size: 12px;
}
.admin-metrics-step-icon.success { background: var(--md-success-container, #CEEAD6); color: var(--md-success, #1E8E3E); }
.admin-metrics-step-icon.failed  { background: var(--md-error-container, #FFDAD6); color: var(--md-error); }
.admin-metrics-step-icon.minor   { background: var(--md-surface-2); color: var(--md-on-surface-variant); }

.admin-metrics-step-body { flex: 1; min-width: 0; }
.admin-metrics-step-name {
  font-size: var(--text-sm); font-weight: var(--font-medium);
  color: var(--md-on-surface);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.admin-metrics-step-detail {
  font-size: var(--text-xs); color: var(--md-on-surface-variant);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.admin-metrics-step-dur {
  flex-shrink: 0;
  font-size: var(--text-xs); font-weight: var(--font-medium);
  font-variant-numeric: tabular-nums;
  padding: 2px 8px; border-radius: var(--radius-full);
  background: var(--md-surface-2); color: var(--md-on-surface-variant);
}
.admin-metrics-step-dur.slow { background: var(--md-warning-container, #FEF7CD); color: var(--md-warning, #E37400); }
.admin-metrics-step-dur.fast { background: var(--md-success-container, #CEEAD6); color: var(--md-success, #1E8E3E); }

/* ── Bar Chart ── */
.admin-metrics-bar-chart {
  margin-top: 14px;
  border-top: 1px solid var(--md-surface-3);
  padding-top: 14px;
}
.admin-metrics-bar-title {
  font-size: var(--text-sm); font-weight: 500; margin-bottom: 10px; color: var(--md-on-surface);
}
.admin-metrics-bar-row {
  display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
}
.admin-metrics-bar-label {
  flex: 0 0 100px; font-size: var(--text-xs); color: var(--md-on-surface-variant);
  text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.admin-metrics-bar-track {
  flex: 1; height: 18px; background: var(--md-surface-2);
  border-radius: 4px; overflow: hidden; position: relative;
}
.admin-metrics-bar-fill {
  height: 100%; border-radius: 4px; transition: width 0.4s ease;
}
.admin-metrics-bar-fill.color-1 { background: #0052D9; }
.admin-metrics-bar-fill.color-2 { background: #1E8E3E; }
.admin-metrics-bar-fill.color-3 { background: #E37400; }
.admin-metrics-bar-fill.color-4 { background: #9334E6; }
.admin-metrics-bar-fill.color-5 { background: #D93025; }
.admin-metrics-bar-value {
  flex: 0 0 50px; font-size: var(--text-xs); font-weight: var(--font-medium);
  color: var(--md-on-surface); font-variant-numeric: tabular-nums;
}

/* ── Total row ── */
.admin-metrics-total {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px; background: var(--md-primary-container);
  border-radius: var(--radius-xs); margin-top: 12px;
}
.admin-metrics-total-label { font-size: var(--text-sm); font-weight: var(--font-medium); color: var(--md-on-primary-container, #003185); }
.admin-metrics-total-value { font-size: var(--text-lg); font-weight: var(--font-bold); color: var(--md-primary); }

/* ── Conversation Summary (aggregate) ── */
.admin-metrics-conv-section {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--md-surface-3);
}
.admin-metrics-conv-title {
  font-size: var(--text-sm); font-weight: var(--font-medium); color: var(--md-on-surface);
  margin-bottom: 10px; display: flex; align-items: center; gap: 4px;
}
.admin-metrics-conv-title .material-symbols-outlined { font-size: 16px; color: var(--md-primary); }
.admin-metrics-conv-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px; border-radius: 6px; font-size: var(--text-sm);
  background: var(--md-surface-1); cursor: pointer;
  transition: background var(--duration-fast); margin-bottom: 4px;
}
.admin-metrics-conv-row:hover { background: var(--md-surface-2); }
.admin-metrics-conv-row .conv-idx {
  font-size: var(--text-xs); color: var(--md-on-surface-variant); width: 18px; text-align: center; flex-shrink: 0;
}
.admin-metrics-conv-row .conv-label {
  flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--md-on-surface);
}
.admin-metrics-conv-row .conv-stats {
  flex-shrink: 0; font-size: var(--text-xs); color: var(--md-on-surface-variant); font-variant-numeric: tabular-nums;
}
.admin-metrics-conv-row .conv-dur {
  flex-shrink: 0; font-size: var(--text-xs); font-weight: var(--font-medium);
  padding: 2px 8px; border-radius: var(--radius-full);
  background: var(--md-surface-2); color: var(--md-on-surface-variant);
}

/* Skill usage tags */
.admin-metrics-skill-usage { margin-top: 10px; }
.admin-metrics-skill-title {
  font-size: var(--text-xs); font-weight: var(--font-medium); color: var(--md-on-surface-variant); margin-bottom: 6px;
}
.admin-metrics-skill-tag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px; margin: 2px 4px 2px 0;
  border-radius: var(--radius-full);
  font-size: 10px; font-weight: var(--font-medium);
  background: var(--md-surface-2); color: var(--md-on-surface-variant);
}
.admin-metrics-skill-tag .count {
  background: var(--md-primary-container); color: var(--md-primary);
  padding: 0 5px; border-radius: var(--radius-full); font-size: 10px; font-weight: var(--font-bold);
}

/* ── Card value color variants ── */
.admin-metrics-card-value.tertiary { color: #7B2FF7; }
.admin-metrics-card-value.success  { color: var(--md-success, #1E8E3E); }
.admin-metrics-card-value.error    { color: var(--md-error); }
.admin-metrics-card-value.warning  { color: var(--md-warning, #E37400); }
.admin-metrics-card-value.secondary { color: var(--md-secondary, #5F6368); }

/* ── Status card (full-width) ── */
.admin-metrics-status-card {
  background: var(--md-surface-1);
  border: 1px solid var(--md-surface-3);
  border-radius: var(--radius-xs);
  padding: 10px 14px;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.admin-metrics-status-info {
  margin-left: auto;
  font-size: var(--text-xs);
  color: var(--md-on-surface-variant);
}
.admin-metrics-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
}
.admin-metrics-status-badge .material-symbols-outlined { font-size: 14px; }
.admin-metrics-status-badge.st-normal { background: var(--md-success-container, #CEEAD6); color: var(--md-success, #1E8E3E); }
.admin-metrics-status-badge.st-interrupted { background: var(--md-error-container, #FFDAD6); color: var(--md-error); }
.admin-metrics-status-badge.st-timeout { background: var(--md-warning-container, #FEF7CD); color: var(--md-warning, #E37400); }
.admin-metrics-status-badge.st-cancelled { background: var(--md-surface-3); color: var(--md-secondary, #5F6368); }

/* ── LLM step icon ── */
.admin-metrics-step-icon.llm { background: #EADDFF; color: #7B2FF7; }
.admin-metrics-step-dur.llm  { background: #EADDFF; color: #7B2FF7; }

/* ── Bar chart: LLM and tool color types ── */
.admin-metrics-bar-fill.color-llm  { background: linear-gradient(90deg, #7B2FF7, #A855F7); }
.admin-metrics-bar-fill.color-tool { background: #0052D9; }
.admin-bar-type-icon {
  font-size: 11px;
  margin-right: 3px;
  vertical-align: middle;
}
.admin-bar-type-icon.type-llm  { color: #7B2FF7; }
.admin-bar-type-icon.type-tool { color: var(--md-primary); }

/* ── Time Proportion Stacked Bar ── */
.admin-metrics-proportion {
  margin-top: 14px;
  border-top: 1px solid var(--md-surface-3);
  padding-top: 14px;
}
.admin-metrics-proportion-title {
  font-size: var(--text-sm); font-weight: 500; margin-bottom: 10px; color: var(--md-on-surface);
  display: flex; align-items: center; gap: 4px;
}
.admin-metrics-proportion-title .material-symbols-outlined { font-size: 16px; color: var(--md-primary); }
.admin-metrics-stacked-bar {
  display: flex;
  height: 26px;
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 8px;
}
.admin-stacked-seg {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: var(--font-medium);
  color: #fff;
  transition: width 0.5s ease;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}
.admin-stacked-seg.seg-llm     { background: linear-gradient(90deg, #7B2FF7, #A855F7); }
.admin-stacked-seg.seg-tool    { background: #0052D9; }
.admin-stacked-seg.seg-overhead { background: var(--md-surface-4); color: var(--md-on-surface-variant); }
.admin-stacked-legend {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.admin-stacked-legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: var(--text-xs);
  color: var(--md-on-surface-variant);
}
.admin-stacked-dot {
  width: 10px;
  height: 10px;
  border-radius: 3px;
}
.admin-stacked-dot.dot-llm      { background: linear-gradient(135deg, #7B2FF7, #A855F7); }
.admin-stacked-dot.dot-tool     { background: #0052D9; }
.admin-stacked-dot.dot-overhead { background: var(--md-surface-4); }

/* ── Conversation breakdown: finish reason icons ── */
.admin-conv-fi {
  font-size: 14px;
  flex-shrink: 0;
}
.admin-conv-fi.fi-normal      { color: var(--md-success, #1E8E3E); }
.admin-conv-fi.fi-interrupted { color: var(--md-error); }
.admin-conv-fi.fi-timeout     { color: var(--md-warning, #E37400); }
.admin-conv-fi.fi-user_cancelled { color: var(--md-secondary, #5F6368); }
.admin-metrics-conv-breakdown {
  display: flex; flex-direction: column; gap: 4px;
}

/* ── Role dropdown menu ── */
.admin-role-menu {
  position: fixed;
  z-index: 9999;
  width: 170px;
  background: var(--md-surface, #fff);
  border: 1px solid var(--md-outline-variant, #ddd);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.15);
  padding: 6px 0;
  animation: adminRoleMenuIn .15s ease-out;
}
@keyframes adminRoleMenuIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.admin-role-menu-title {
  font-size: var(--text-xs, 11px);
  color: var(--md-on-surface-variant, #666);
  padding: 6px 14px 4px;
  font-weight: 500;
  letter-spacing: .3px;
}
.admin-role-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  font-size: var(--text-sm, 13px);
  cursor: pointer;
  color: var(--md-on-surface, #333);
  transition: background .12s;
}
.admin-role-menu-item:hover {
  background: var(--md-surface-2, #f5f5f5);
}
.admin-role-menu-item.active {
  color: var(--md-primary, #0052D9);
  font-weight: 600;
  background: var(--md-primary-container, #e8f0fe);
}
.admin-role-menu-item.active:hover {
  background: var(--md-primary-container, #e8f0fe);
  cursor: default;
}

/* ── Responsive: hide metrics panel on small screens ── */
@media (max-width: 1100px) {
  .admin-review-metrics { flex: 0 0 260px; }
}
@media (max-width: 960px) {
  .admin-review-metrics { display: none; }
}

/* ── Integration API Tab ── */
.admin-integration-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}
.admin-int-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: var(--md-surface-container-low, #f8f9fa);
  border: 1px solid var(--md-outline-variant, #dadce0);
  border-radius: 12px;
  padding: 18px;
}
.admin-int-card-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.admin-int-card-body strong {
  font-size: 14px;
  color: var(--md-on-surface);
}
.admin-int-card-body span {
  font-size: 12px;
  color: var(--md-on-surface-variant);
  line-height: 1.5;
}
.admin-int-card-body a {
  font-size: 13px;
  font-weight: 600;
  color: var(--brand);
  text-decoration: none;
  margin-top: 4px;
}
.admin-int-card-body a:hover { text-decoration: underline; }

.admin-int-urls {
  border: 1px solid var(--md-outline-variant, #dadce0);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 20px;
}
.admin-int-url-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  font-size: 13px;
  border-bottom: 1px solid var(--md-outline-variant, #dadce0);
}
.admin-int-url-item:last-child { border-bottom: none; }
.admin-int-url-item code {
  background: var(--md-surface-container-high, #eef0f2);
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 12px;
  flex: 1;
}

.admin-int-endpoints { margin-bottom: 12px; }

.method-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
}
.method-badge.post { background: #d4edda; color: #155724; }

.new-badge {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 700;
  background: #e8f0fe;
  color: #1a73e8;
  margin-left: 4px;
  vertical-align: middle;
}

.admin-btn-sm {
  padding: 4px 10px;
  font-size: 12px;
}