/* ==========================================
   Feedback Page — профессиональный аналитический инструмент
   ========================================== */

/* ── Top bar ──────────────────────────────── */
.fb-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.fb-title-block { display: flex; align-items: baseline; gap: 10px; }
.fb-title { font-size: 18px; font-weight: 700; color: var(--color-text-primary, #111827); margin: 0; line-height: 1; }
.fb-subtitle { font-size: 12px; color: var(--color-text-tertiary, #9ca3af); }
.fb-filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ── Period buttons ──────────────────────── */
.fb-period-group { display: flex; gap: 2px; background: var(--color-bg-secondary, #f3f4f6); border-radius: 6px; padding: 3px; }
.fb-period-btn { height: 28px; padding: 0 10px; font-size: 12px; font-weight: 500; border: none; border-radius: 4px; cursor: pointer; background: transparent; color: var(--color-text-secondary, #6b7280); transition: background 0.15s, color 0.15s; white-space: nowrap; }
.fb-period-btn:hover { background: var(--color-bg-elevated, #fff); color: var(--color-text-primary, #111827); }
.fb-period-btn.active { background: var(--color-bg-elevated, #fff); color: var(--color-text-primary, #111827); box-shadow: 0 1px 3px rgba(0,0,0,.1); }

/* ── Selects ─────────────────────────────── */
.fb-select { height: 34px; padding: 0 8px; font-size: 12px; color: var(--color-text-primary, #111827); background: var(--color-bg-elevated, #fff); border: 1px solid var(--color-border, #e5e7eb); border-radius: 6px; outline: none; cursor: pointer; min-width: 120px; }
.fb-select:focus { border-color: var(--color-primary, #8b5cf6); }

/* ── KPI strip ───────────────────────────── */
.fb-kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 16px; }
.fb-kpi-card { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--color-bg-elevated, #fff); border: 1px solid var(--color-border, #e5e7eb); border-radius: 8px; }
.fb-kpi-up    { border-left: 3px solid #22c55e; }
.fb-kpi-down  { border-left: 3px solid #ef4444; }
.fb-kpi-ratio { border-left: 3px solid #8b5cf6; }
.fb-kpi-icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 36px; height: 36px; border-radius: 8px; background: var(--color-bg-secondary, #f3f4f6); }
.fb-kpi-up .fb-kpi-icon { color: #16a34a; background: #dcfce7; }
.fb-kpi-down .fb-kpi-icon { color: #dc2626; background: #fee2e2; }
.fb-kpi-ratio .fb-kpi-icon { color: #7c3aed; background: #ede9fe; }
.fb-kpi-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fb-kpi-val { font-size: 22px; font-weight: 700; color: var(--color-text-primary, #111827); line-height: 1; }
.fb-kpi-label { font-size: 11px; color: var(--color-text-tertiary, #9ca3af); }

/* ── Reasons card ────────────────────────── */
.fb-reasons-card { background: var(--color-bg-elevated, #fff); border: 1px solid var(--color-border, #e5e7eb); border-radius: 8px; padding: 14px 16px; margin-bottom: 16px; }
.fb-section-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--color-text-tertiary, #9ca3af); margin-bottom: 12px; }
.fb-reasons-list { display: flex; flex-direction: column; gap: 7px; }
.fb-reason-row { display: grid; grid-template-columns: 180px 1fr 64px; align-items: center; gap: 10px; }
.fb-reason-label { font-size: 12px; color: var(--color-text-secondary, #6b7280); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fb-reason-bar-wrap { height: 6px; background: var(--color-bg-secondary, #f3f4f6); border-radius: 3px; overflow: hidden; }
.fb-reason-bar { height: 100%; background: #ef4444; border-radius: 3px; transition: width 0.3s; }
.fb-reason-count { font-size: 11px; color: var(--color-text-secondary, #6b7280); text-align: right; white-space: nowrap; }

/* ── Table ───────────────────────────────── */
.fb-table-wrap { background: var(--color-bg-elevated, #fff); border: 1px solid var(--color-border, #e5e7eb); border-radius: 8px; overflow: hidden; margin-bottom: 12px; }
.fb-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.fb-table thead tr { background: var(--color-bg-secondary, #f9fafb); border-bottom: 1px solid var(--color-border, #e5e7eb); }
.fb-table th { padding: 9px 12px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; color: var(--color-text-tertiary, #9ca3af); text-align: left; white-space: nowrap; }
.fb-table td { padding: 8px 12px; color: var(--color-text-primary, #111827); border-bottom: 1px solid var(--color-border-subtle, #f3f4f6); vertical-align: middle; }
.fb-table tbody tr:last-child td { border-bottom: none; }
.fb-row:hover td { background: var(--color-bg-secondary, #f9fafb) !important; }
.fb-cell-date { font-size: 12px; color: var(--color-text-secondary, #6b7280); white-space: nowrap; }
.fb-cell-tokens { font-size: 12px; color: var(--color-text-secondary, #6b7280); white-space: nowrap; font-variant-numeric: tabular-nums; }
.fb-cell-reason { max-width: 160px; }
.fb-cell-context { min-width: 100px; }
.fb-empty-row { text-align: center; padding: 32px !important; color: var(--color-text-tertiary, #9ca3af); font-size: 13px; }

/* Table badges */
.fb-model-name { font-size: 12px; font-weight: 500; }
.fb-user-name { font-size: 12px; }
.fb-cell-center { text-align: center; }
.fb-rating-up { display: inline-flex; align-items: center; justify-content: center; color: #16a34a; }
.fb-rating-down { display: inline-flex; align-items: center; justify-content: center; color: #dc2626; }
.fb-no-reason { color: var(--color-text-tertiary, #9ca3af); }
.fb-reason-tag { display: inline-block; padding: 2px 6px; background: #fef3c7; color: #92400e; border-radius: 4px; font-size: 11px; font-weight: 500; }
.fb-plan-badge { display: inline-block; padding: 1px 5px; border-radius: 3px; font-size: 10px; font-weight: 600; text-transform: uppercase; margin-left: 4px; }
.fb-plan-free { background: #f3f4f6; color: #6b7280; }
.fb-plan-pro { background: #ede9fe; color: #7c3aed; }
.fb-plan-pro_plus { background: #dbeafe; color: #1d4ed8; }
.fb-plan-max { background: #fef9c3; color: #a16207; }
.fb-plan-business { background: #dcfce7; color: #15803d; }
.fb-plan-admin { background: #fee2e2; color: #dc2626; }
.fb-mode-badge { display: inline-flex; align-items: center; gap: 3px; padding: 1px 5px; background: #f3f4f6; color: #6b7280; border-radius: 3px; font-size: 10px; margin-left: 4px; }
.fb-mode-thinking { background: #ede9fe; color: #7c3aed; }
.fb-mono { font-family: monospace; font-size: 11px; color: var(--color-text-tertiary, #9ca3af); }

/* Context bar in table */
.fb-ctx-bar-wrap { display: flex; align-items: center; gap: 6px; min-width: 80px; }
.fb-ctx-bar { height: 6px; flex: 1; border-radius: 3px; background: #22c55e; }
.fb-ctx-pct { font-size: 11px; color: var(--color-text-secondary, #6b7280); white-space: nowrap; }

/* ── Pagination ──────────────────────────── */
.fb-pagination { display: flex; align-items: center; gap: 10px; }
.fb-page-btn { height: 30px; padding: 0 14px; font-size: 12px; font-weight: 500; border: 1px solid var(--color-border, #e5e7eb); border-radius: 6px; background: var(--color-bg-elevated, #fff); color: var(--color-text-secondary, #6b7280); cursor: pointer; transition: background 0.15s; }
.fb-page-btn:hover:not(:disabled) { background: var(--color-bg-secondary, #f9fafb); color: var(--color-text-primary, #111827); }
.fb-page-btn:disabled { opacity: 0.4; cursor: default; }
.fb-page-info { font-size: 12px; color: var(--color-text-tertiary, #9ca3af); }

/* ── Detail Modal ────────────────────────── */
.fb-modal-dialog {
  position: relative;
  background: var(--color-bg-elevated, #fff);
  border-radius: 12px;
  box-shadow: 0 24px 48px rgba(0,0,0,.2);
  width: 100%;
  max-width: 820px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 28px;
}
.fb-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  border: none;
  background: var(--color-bg-secondary, #f3f4f6);
  border-radius: 50%;
  cursor: pointer;
  color: var(--color-text-secondary, #6b7280);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.fb-modal-close:hover { background: var(--color-border, #e5e7eb); }
.fb-modal-header { margin-bottom: 20px; padding-right: 40px; }
.fb-modal-title { font-size: 18px; font-weight: 700; color: var(--color-text-primary, #111827); margin-bottom: 8px; }
.fb-modal-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fb-modal-rating-up { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; color: #15803d; background: #dcfce7; padding: 3px 10px; border-radius: 20px; }
.fb-modal-rating-down { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; color: #dc2626; background: #fee2e2; padding: 3px 10px; border-radius: 20px; }
.fb-modal-date { font-size: 12px; color: var(--color-text-tertiary, #9ca3af); margin-left: auto; }
.fb-modal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px; }
.fb-modal-section { background: var(--color-bg-secondary, #f9fafb); border: 1px solid var(--color-border, #e5e7eb); border-radius: 8px; padding: 14px 16px; }
.fb-modal-section-wide { grid-column: 1 / -1; }
.fb-modal-section-title { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--color-text-tertiary, #9ca3af); margin-bottom: 12px; }
.fb-modal-fields { display: flex; flex-direction: column; gap: 7px; }
.fb-tokens-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 7px 16px; }
.fb-modal-field { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 13px; }
.fb-field-label { color: var(--color-text-secondary, #6b7280); font-size: 12px; flex-shrink: 0; }
.fb-reqid { font-size: 10px; word-break: break-all; }

/* Context detail */
.fb-ctx-detail { display: flex; flex-direction: column; gap: 12px; }
.fb-ctx-progress-wrap { display: flex; flex-direction: column; gap: 6px; }
.fb-ctx-progress-label { display: flex; justify-content: space-between; font-size: 13px; color: var(--color-text-secondary, #6b7280); }
.fb-ctx-progress-bar { height: 8px; background: var(--color-bg-secondary, #f3f4f6); border-radius: 4px; overflow: hidden; }
.fb-ctx-progress-fill { height: 100%; border-radius: 4px; transition: width 0.4s; }
.fb-modal-warn { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: #dc2626; font-weight: 500; }
.fb-modal-notice { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: #d97706; font-weight: 500; }

/* Chat history */
.fb-modal-history { border-top: 1px solid var(--color-border, #e5e7eb); padding-top: 20px; }
.fb-history-list { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; max-height: 360px; overflow-y: auto; }
.fb-msg { border-radius: 8px; padding: 10px 14px; }
.fb-msg-user { background: #ede9fe; }
.fb-msg-assistant { background: var(--color-bg-secondary, #f9fafb); border: 1px solid var(--color-border, #e5e7eb); }
.fb-msg-role { display: flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; color: var(--color-text-tertiary, #9ca3af); margin-bottom: 5px; }
.fb-msg-text { font-size: 13px; color: var(--color-text-primary, #111827); line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.fb-no-history { font-size: 13px; color: var(--color-text-tertiary, #9ca3af); padding: 16px 0; }

/* ── Responsive ──────────────────────────── */
@media (max-width: 900px) {
  .fb-kpi-row { grid-template-columns: repeat(2, 1fr); }
  .fb-topbar { flex-direction: column; align-items: flex-start; }
  .fb-modal-grid { grid-template-columns: 1fr; }
  .fb-modal-section-wide { grid-column: auto; }
  .fb-tokens-grid { grid-template-columns: 1fr 1fr; }
}