/* ═══════════════════════════════════════════════════════════════════
   FeedbackOS — Material Design 3
   https://m3.material.io
   ═══════════════════════════════════════════════════════════════════ */

/* ── Self-hosted Roboto ─────────────────────────────────────────── */
@font-face {
  font-family: "Roboto";
  src: url("/static/fonts/Roboto-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Roboto";
  src: url("/static/fonts/Roboto-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Roboto";
  src: url("/static/fonts/Roboto-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ── MD3 Design Tokens ──────────────────────────────────────────── */
:root {
  /* Primary */
  --md-primary:              #6750A4;
  --md-on-primary:           #FFFFFF;
  --md-primary-container:    #EADDFF;
  --md-on-primary-container: #21005D;

  /* Secondary */
  --md-secondary:              #625B71;
  --md-on-secondary:           #FFFFFF;
  --md-secondary-container:    #E8DEF8;
  --md-on-secondary-container: #1D192B;

  /* Tertiary */
  --md-tertiary:              #7D5260;
  --md-on-tertiary:           #FFFFFF;
  --md-tertiary-container:    #FFD8E4;
  --md-on-tertiary-container: #31111D;

  /* Error */
  --md-error:              #B3261E;
  --md-on-error:           #FFFFFF;
  --md-error-container:    #F9DEDC;
  --md-on-error-container: #410E0B;

  /* Surface & Background */
  --md-background:         #FFFBFE;
  --md-on-background:      #1C1B1F;
  --md-surface:            #FFFBFE;
  --md-on-surface:         #1C1B1F;
  --md-surface-variant:    #E7E0EC;
  --md-on-surface-variant: #49454F;
  --md-surface-container-lowest:  #FFFFFF;
  --md-surface-container-low:     #F7F2FA;
  --md-surface-container:         #F3EDF7;
  --md-surface-container-high:    #ECE6F0;
  --md-surface-container-highest: #E6E0E9;

  /* Outline */
  --md-outline:         #79747E;
  --md-outline-variant: #CAC4D0;

  /* MD3 Shape scale */
  --md-shape-none:        0px;
  --md-shape-xs:          4px;
  --md-shape-s:           8px;
  --md-shape-m:           12px;
  --md-shape-l:           16px;
  --md-shape-xl:          28px;
  --md-shape-full:        9999px;

  /* MD3 Elevation shadows */
  --md-elevation-1: 0px 1px 2px rgba(0,0,0,0.30), 0px 1px 3px 1px rgba(0,0,0,0.15);
  --md-elevation-2: 0px 1px 2px rgba(0,0,0,0.30), 0px 2px 6px 2px rgba(0,0,0,0.15);
  --md-elevation-3: 0px 4px 8px 3px rgba(0,0,0,0.15), 0px 1px 3px rgba(0,0,0,0.30);

  /* State layer opacities */
  --md-state-hover:   0.08;
  --md-state-pressed: 0.12;
  --md-state-focused: 0.12;
}

/* ── Reset ──────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; }

body {
  font-family: "Roboto", system-ui, sans-serif;
  font-size: 1rem;          /* Body Large — 16sp */
  line-height: 1.5;         /* 24sp */
  letter-spacing: 0.031em;  /* 0.5px */
  background: var(--md-background);
  color: var(--md-on-background);
  min-height: 100vh;
  padding: 24px 16px;
  -webkit-font-smoothing: antialiased;
}

.container { max-width: 740px; margin: 0 auto; }

/* ── Top app bar (simplified) ───────────────────────────────────── */
.top-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  gap: 8px;
}
.top-nav-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* User chip — MD3 Assist chip */
.user-email-display {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border-radius: var(--md-shape-s);
  border: 1px solid var(--md-outline-variant);
  background: var(--md-surface-container-low);
  font-size: 0.875rem;      /* Label Large 14sp */
  font-weight: 500;
  letter-spacing: 0.006em;
  color: var(--md-on-surface-variant);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.user-email-display:hover {
  border-color: var(--md-primary);
  background: var(--md-primary-container);
  color: var(--md-on-surface);
}
.edit-pencil {
  font-size: 0.75rem;
  opacity: 0.5;
  flex-shrink: 0;
}

/* Chip button — My Reviews / Logout */
.digest-btn,
.logout-btn {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 12px;
  border-radius: var(--md-shape-s);
  border: 1px solid var(--md-outline-variant);
  background: var(--md-surface-container-low);
  color: var(--md-on-surface-variant);
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.006em;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.15s, background 0.15s;
}
.digest-btn:hover,
.logout-btn:hover {
  border-color: var(--md-primary);
  background: var(--md-primary-container);
  color: var(--md-on-surface);
}

/* Email status chip */
.email-status {
  font-size: 0.75rem;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: var(--md-shape-full);
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.email-connected    { color: #2E7D32; background: #E8F5E9; }
.email-disconnected { color: #79747E; background: var(--md-surface-container); }

/* First-run placeholder text inside smart cards */
.first-run-hint {
  color: var(--md-outline);
  font-size: 0.85rem;
  font-style: italic;
  margin: 4px 0 0;
}

/* ── Header ─────────────────────────────────────────────────────── */
.header { text-align: center; margin-bottom: 28px; }
.header h1 {
  font-size: 2rem;            /* Headline Large — 32sp */
  font-weight: 400;           /* MD3 headlines are regular weight */
  line-height: 1.25;          /* 40sp */
  letter-spacing: 0;
  color: var(--md-on-background);
}
.header p {
  font-size: 0.875rem;        /* Body Medium — 14sp */
  line-height: 1.428;         /* 20sp */
  letter-spacing: 0.016em;
  color: var(--md-on-surface-variant);
  margin-top: 8px;
}

/* ── MD3 Card (Elevated) ────────────────────────────────────────── */
.card {
  background: var(--md-surface-container-low);
  border-radius: var(--md-shape-m);
  box-shadow: var(--md-elevation-1);
  padding: 20px 24px;
  margin-bottom: 12px;
  transition: box-shadow 0.2s;
  position: relative;
}
.card:hover { box-shadow: var(--md-elevation-2); }

/* ── Usage notes — MD3 Filled card ──────────────────────────────── */
.usage-notes {
  background: var(--md-surface-container);
  border-radius: var(--md-shape-m);
  padding: 12px 20px;
  font-size: 0.875rem;
  line-height: 1.428;
  letter-spacing: 0.016em;
  color: var(--md-on-surface-variant);
  margin-bottom: 12px;
}

/* ── Filter chips — Source selector ─────────────────────────────── */
.source-selector {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.source-label {
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.006em;
  color: var(--md-on-surface-variant);
  white-space: nowrap;
}
.source-select {
  flex: 1;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--md-outline);
  border-radius: var(--md-shape-xs);
  background: var(--md-surface);
  color: var(--md-on-surface);
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.006em;
  cursor: pointer;
  outline: none;
  transition: border-color 0.2s;
}
.source-select:focus {
  border-color: var(--md-primary);
  border-width: 2px;
}

/* ── Reviewer metadata fields ────────────────────────────────────── */
.metadata-fields {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.meta-input {
  flex: 1;
  min-width: 120px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--md-outline);
  border-radius: var(--md-shape-xs);
  background: var(--md-surface);
  color: var(--md-on-surface);
  font-family: inherit;
  font-size: 0.875rem;
  outline: none;
  transition: border-color 0.2s;
}
.meta-input:focus {
  border-color: var(--md-primary);
  border-width: 2px;
}
select.meta-input,
select.source-select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  color-scheme: light;
  background-color: #FFFBFE;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2379747E' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
}

input.meta-input {
  color-scheme: light;
  background-color: #FFFBFE;
}
.meta-input::placeholder {
  color: var(--md-on-surface-variant);
}

/* ── Results lead-in ─────────────────────────────────────────────── */
.results-leadin {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--md-on-surface-variant);
  margin: 4px 0 8px 2px;
}

/* ── Recurring issues lead-in ────────────────────────────────────── */
.recurring-leadin {
  font-size: 0.875rem;
  color: var(--md-on-surface-variant);
  margin: 0 0 8px 0;
}

/* ── Outlined text field ─────────────────────────────────────────── */
textarea {
  width: 100%;
  min-height: 213px;
  padding: 16px;
  border: 1px solid var(--md-outline);
  border-radius: var(--md-shape-xs);
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0.031em;
  resize: vertical;
  background: transparent;
  color: var(--md-on-surface);
  transition: border-color 0.2s, border-width 0.1s;
  outline: none;
}
textarea:focus {
  border-color: var(--md-primary);
  border-width: 2px;
}
textarea::placeholder {
  color: var(--md-on-surface-variant);
  opacity: 1;
}

/* ── Input actions ───────────────────────────────────────────────── */
.input-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 16px;
  gap: 8px;
  flex-wrap: wrap;
}

/* ── Buttons — MD3 ───────────────────────────────────────────────── */

/* Base button — chip style */
button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 32px;
  padding: 0 12px;
  border-radius: var(--md-shape-s);
  border: 1px solid var(--md-outline-variant);
  background: var(--md-surface-container-low);
  color: var(--md-on-surface-variant);
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.006em;
  cursor: pointer;
  touch-action: manipulation;
  white-space: nowrap;
  transition: border-color 0.15s, background 0.15s;
}
button:hover {
  border-color: var(--md-primary);
  background: var(--md-primary-container);
  color: var(--md-on-surface);
}
button:disabled {
  opacity: 0.38;
  cursor: not-allowed;
}

/* .paste-btn and .reset-btn inherit base — no overrides needed */

@media (max-width: 480px) {
  .input-actions { flex-direction: row; }
  button, .paste-btn { flex: 1; }
}

/* ── History Drawer ────────────────────────────────────────────────────────── */

.history-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.32);
  z-index: 200;
}

.history-drawer {
  position: fixed;
  top: 0;
  right: -420px;
  width: 420px;
  max-width: 100vw;
  height: 100%;
  background: var(--md-surface);
  box-shadow: -4px 0 24px rgba(0,0,0,0.18);
  z-index: 201;
  display: flex;
  flex-direction: column;
  transition: right 0.28s cubic-bezier(.4,0,.2,1);
}

.history-drawer-open {
  right: 0;
}

.history-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 20px 14px;
  border-bottom: 1px solid var(--md-outline-variant);
  flex-shrink: 0;
}

.history-drawer-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--md-on-surface);
  letter-spacing: 0.01em;
}

.history-close-btn {
  background: none;
  border: none;
  font-size: 1.1rem;
  color: var(--md-on-surface-variant);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  line-height: 1;
  box-shadow: none;
  min-width: unset;
}
.history-close-btn:hover {
  background: var(--md-surface-variant);
  box-shadow: none;
}

.drawer-tabs {
  display: flex;
  gap: 4px;
  flex: 1;
}

.drawer-tab {
  background: none;
  border: none;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--md-on-surface-variant);
  padding: 6px 14px;
  border-radius: 20px;
  cursor: pointer;
  box-shadow: none;
  min-width: unset;
  transition: background 0.15s, color 0.15s;
}
.drawer-tab:hover { background: var(--md-surface-variant); box-shadow: none; }
.drawer-tab.active {
  background: var(--md-primary-container, #EADDFF);
  color: var(--md-on-primary-container, #21005D);
  box-shadow: none;
}

.drawer-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.history-week-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  border-bottom: 1px solid var(--md-outline-variant);
  flex-shrink: 0;
  gap: 8px;
}

.history-week-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--md-on-surface);
  text-align: center;
  flex: 1;
}

/* .history-week-btn inherits base chip style */
.history-week-btn { font-size: 0.75rem; }
.history-week-btn:disabled { color: var(--md-on-surface-variant); border-color: transparent; cursor: default; }
.history-week-btn:disabled:hover { background: var(--md-surface-container-low); border-color: transparent; color: var(--md-on-surface-variant); }

.history-list {
  flex: 1;
  overflow-y: auto;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.history-loading,
.history-empty {
  color: var(--md-on-surface-variant);
  font-size: 0.875rem;
  text-align: center;
  padding: 32px 0;
}

.history-entry {
  background: var(--md-surface-variant);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.history-entry-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.history-source-badge {
  background: var(--md-primary);
  color: var(--md-on-primary);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 8px;
  border-radius: 20px;
}

.history-count {
  font-size: 0.78rem;
  color: var(--md-on-surface-variant);
}

.history-date {
  font-size: 0.75rem;
  color: var(--md-on-surface-variant);
  margin-left: auto;
}

.history-summary {
  font-size: 0.82rem;
  color: var(--md-on-surface);
  line-height: 1.45;
  margin: 0;
}

.history-remove-btn {
  background: none;
  border: 1px solid var(--md-outline-variant);
  color: var(--md-error, #B3261E);
  font-size: 0.75rem;
  padding: 0 10px;
  height: 26px;
  border-radius: 6px;
  cursor: pointer;
  box-shadow: none;
  min-width: unset;
}
.history-remove-btn:hover {
  background: rgba(179,38,30,0.08);
  box-shadow: none;
}

.history-review-text {
  font-size: 0.82rem;
  color: var(--md-on-surface);
  line-height: 1.5;
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 120px;
  overflow-y: auto;
}

.history-reviewer-meta {
  font-size: 0.75rem;
  color: var(--md-on-surface-variant);
  margin-bottom: 2px;
}

.history-edit-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.history-edit-meta-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.history-meta-input {
  flex: 1;
  min-width: 0;
  font-size: 0.78rem;
  font-family: inherit;
  color: var(--md-on-surface);
  background: var(--md-surface);
  border: 1px solid var(--md-outline-variant);
  border-radius: 6px;
  padding: 5px 8px;
  box-sizing: border-box;
}
.history-meta-input:focus { outline: 2px solid var(--md-primary); border-color: transparent; }

.history-edit-area {
  width: 100%;
  box-sizing: border-box;
  font-size: 0.82rem;
  font-family: inherit;
  color: var(--md-on-surface);
  background: var(--md-surface);
  border: 1px solid var(--md-outline-variant);
  border-radius: 6px;
  padding: 8px 10px;
  resize: vertical;
  line-height: 1.5;
}

.history-entry-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 2px;
}

/* history inline buttons inherit base chip style */
.history-edit-btn,
.history-save-btn,
.history-cancel-btn {
  font-size: 0.75rem;
  padding: 0 10px;
  height: 26px;
}

/* ── Digest Panel Content ─────────────────────────────────────────────────── */

.digest-period {
  font-size: 0.78rem;
  color: var(--md-on-surface-variant);
  text-align: center;
  margin: 0 0 12px;
}

.digest-section {
  background: var(--md-surface-variant);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
}

.digest-section-title {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--md-on-surface);
  letter-spacing: 0.01em;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--md-outline-variant);
}

.digest-focus-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.digest-focus-num {
  background: var(--md-primary);
  color: var(--md-on-primary);
  font-size: 0.7rem;
  font-weight: 700;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}
.digest-focus-topic { font-size: 0.85rem; font-weight: 600; color: var(--md-on-surface); }
.digest-focus-reason { font-size: 0.78rem; color: var(--md-on-surface-variant); margin-top: 2px; }
.digest-focus-action { font-size: 0.78rem; color: var(--md-primary); margin-top: 2px; }

.digest-outcome { display: flex; flex-direction: column; gap: 2px; }
.digest-outcome-topic { font-size: 0.85rem; font-weight: 600; color: var(--md-on-surface); }
.digest-outcome-stats { font-size: 0.78rem; color: var(--md-on-surface-variant); }
.digest-outcome-verdict { font-size: 0.78rem; color: var(--md-primary); }

.digest-change {
  font-size: 0.8rem;
  padding: 3px 0;
}
.digest-worse   { color: #B3261E; }
.digest-new     { color: var(--md-primary); }
.digest-better  { color: #386A1F; }
.digest-resolved{ color: var(--md-on-surface-variant); }

.digest-stat-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.82rem;
  color: var(--md-on-surface);
  padding: 2px 0;
}
.digest-stat-row span:last-child { font-weight: 600; }

.digest-issue-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.82rem;
  color: var(--md-on-surface);
  padding: 2px 0;
}
.digest-issue-count {
  font-size: 0.75rem;
  color: var(--md-on-surface-variant);
  background: var(--md-surface);
  padding: 2px 8px;
  border-radius: 20px;
}

/* ── Spinner ─────────────────────────────────────────────────────── */
.spinner {
  width: 16px; height: 16px;
  border: 2px solid rgba(255,255,255,0.4);
  border-top-color: var(--md-on-primary);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Section title ───────────────────────────────────────────────── */
.section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;      /* Title Small — 14sp */
  font-weight: 500;
  letter-spacing: 0.006em;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--md-outline-variant);
  color: var(--md-on-surface);
}
.section-icon { font-size: 1.125rem; line-height: 1; }
.section-subtitle {
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.031em;
  color: var(--md-on-surface-variant);
  margin-left: 4px;
}

/* ── Summary ─────────────────────────────────────────────────────── */
.summary-text {
  font-size: 1rem;           /* Body Large */
  line-height: 1.5;
  letter-spacing: 0.031em;
  color: var(--md-on-surface-variant);
}

/* ── Urgency badge ───────────────────────────────────────────────── */
.urgency-badge {
  margin-left: auto;
  padding: 2px 12px;
  border-radius: var(--md-shape-full);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.urgency-high   { background: var(--md-error-container);               color: var(--md-on-error-container); }
.urgency-medium { background: #FDEBD0;                                  color: #7B4F12; }
.urgency-low    { background: #E8F5E9;                                  color: #1B5E20; }
.urgency-reason {
  margin-top: 10px;
  font-size: 0.75rem;        /* Body Small */
  line-height: 1.33;
  letter-spacing: 0.025em;
  color: var(--md-on-surface-variant);
  font-style: italic;
}

/* ── Issues ──────────────────────────────────────────────────────── */
.issue-list { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.issue-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.875rem;       /* Body Medium */
  line-height: 1.428;
  letter-spacing: 0.016em;
  color: var(--md-on-surface);
}
.issue-badge {
  background: var(--md-error-container);
  color: var(--md-on-error-container);
  border-radius: 50%;
  width: 28px; height: 28px;
  font-size: 0.75rem;
  font-weight: 500;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.recurring-tag {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  background: #FFF3E0;
  color: #7B4F12;
  border-radius: var(--md-shape-full);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.031em;
  margin-left: 6px;
  vertical-align: middle;
  text-transform: uppercase;
}

/* ── Sentiment bars ──────────────────────────────────────────────── */
.sentiment-row { margin-bottom: 14px; }
.sentiment-label {
  display: flex;
  justify-content: space-between;
  font-size: 0.875rem;
  line-height: 1.428;
  letter-spacing: 0.016em;
  margin-bottom: 6px;
  color: var(--md-on-surface-variant);
}
.sentiment-label span:last-child {
  font-weight: 500;
  color: var(--md-on-surface);
}
.bar-track {
  background: var(--md-surface-container-highest);
  border-radius: var(--md-shape-full);
  height: 8px;
  overflow: hidden;
}
.bar-fill { height: 100%; border-radius: var(--md-shape-full); transition: width 0.6s cubic-bezier(0.2,0,0,1); }
.bar-positive { background: #388E3C; }
.bar-negative { background: var(--md-error); }
.bar-neutral  { background: var(--md-outline); }

/* ── Recommendations ─────────────────────────────────────────────── */
.rec-list { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.rec-item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  font-size: 0.875rem;
  line-height: 1.428;
  letter-spacing: 0.016em;
  color: var(--md-on-surface-variant);
}
.rec-num {
  color: var(--md-primary);
  font-weight: 500;
  font-size: 0.875rem;
  min-width: 20px;
  flex-shrink: 0;
  margin-top: 1px;
}

/* ── Reply textarea ──────────────────────────────────────────────── */
.reply-text {
  width: 100%;
  font-family: inherit;
  font-size: 0.875rem;
  line-height: 1.428;
  letter-spacing: 0.016em;
  color: var(--md-on-surface-variant);
  border: 1px solid var(--md-outline);
  border-radius: var(--md-shape-xs);
  padding: 16px;
  resize: vertical;
  background: transparent;
  outline: none;
  transition: border-color 0.2s, border-width 0.1s;
}
.reply-text:focus {
  border-color: var(--md-primary);
  border-width: 2px;
}

/* Reply actions row (tone tabs + copy button) */
.reply-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 8px;
}

/* Copy button — smaller than base button, right-aligned in the actions row */
.copy-btn {
  margin-left: auto;
  height: 24px;
  padding: 0 8px;
  font-size: 0.75rem;
  line-height: 24px;
  min-width: 0;
}
.copy-btn-success { color: #2E7D32; border-color: #2E7D32; }

.tone-tab {
  padding: 0 8px;
  font-size: 0.8125rem;
  color: var(--md-on-surface-variant);
  cursor: pointer;
  transition: color 0.15s;
  user-select: none;
}
.tone-tab.active {
  color: var(--md-on-surface);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.tone-tab:not(.active):hover {
  color: var(--md-on-surface);
}

/* ── Error banner ────────────────────────────────────────────────── */
.alert {
  background: var(--md-error-container);
  color: var(--md-on-error-container);
  border-radius: var(--md-shape-xs);
  padding: 14px 20px;
  margin-bottom: 12px;
  font-size: 0.875rem;
  line-height: 1.428;
  letter-spacing: 0.016em;
}

/* ── Toast notification ──────────────────────────────────────────── */
#toastNotification {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  min-width: 260px;
  max-width: 480px;
  padding: 14px 22px;
  border-radius: var(--md-shape-xs);
  font-size: 0.875rem;
  line-height: 1.428;
  letter-spacing: 0.016em;
  font-weight: 500;
  box-shadow: 0 4px 16px rgba(0,0,0,.18);
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
}
#toastNotification.toast-show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}
#toastNotification.toast-success {
  background: #1B5E20;
  color: #fff;
}
#toastNotification.toast-error {
  background: var(--md-error-container);
  color: var(--md-on-error-container);
}
#toastNotification.toast-info {
  background: #1a237e;
  color: #fff;
}

.hidden { display: none; }

/* ── Change report ───────────────────────────────────────────────── */
.change-worsened { font-size: 0.875rem; line-height: 1.6; margin-bottom: 8px; color: var(--md-error);   font-weight: 500; }
.change-new      { font-size: 0.875rem; line-height: 1.6; margin-bottom: 8px; color: #E65100;           font-weight: 500; }
.change-improved { font-size: 0.875rem; line-height: 1.6; margin-bottom: 8px; color: #2E7D32;           font-weight: 500; }
.change-resolved { font-size: 0.875rem; line-height: 1.6; margin-bottom: 8px; color: var(--md-outline); font-weight: 500; }

/* ── Persistent issues ───────────────────────────────────────────── */
.persistent-badge {
  background: var(--md-secondary-container);
  color: var(--md-on-secondary-container);
  border-radius: 50%;
  width: 28px; height: 28px;
  font-size: 0.75rem;
  font-weight: 500;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.persistent-tag {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  background: var(--md-secondary-container);
  color: var(--md-on-secondary-container);
  border-radius: var(--md-shape-full);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.031em;
  margin-left: 6px;
  vertical-align: middle;
  text-transform: uppercase;
}

/* ── This Week's Focus ───────────────────────────────────────────── */
.focus-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.focus-item {
  border-left: 3px solid var(--md-primary);
  padding-left: 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.focus-topic {
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0.009em;
  color: var(--md-on-surface);
}
.focus-reason {
  font-size: 0.8125rem;
  line-height: 1.5;
  letter-spacing: 0.025em;
  color: var(--md-on-surface-variant);
}
.focus-action {
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.025em;
  color: var(--md-primary);
  margin-top: 2px;
}

/* ── Focus action buttons ────────────────────────────────────────── */
.focus-item-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 10px;
}
/* focus action buttons inherit base chip style */
.focus-action-btn { font-size: 0.75rem; }
.resolve-btn { border-color: #2E7D32; color: #2E7D32; }
.resolve-btn:hover { border-color: #2E7D32; background: #E8F5E9; color: #2E7D32; }
.focus-done-label     { font-size: 0.75rem; color: var(--md-outline); font-style: italic; }
.focus-resolved       { opacity: 0.5; }
.focus-dismissed      { opacity: 0.4; }
.focus-followup-label {
  display: block;
  font-size: 0.75rem;
  color: var(--md-error, #B3261E);
  font-style: italic;
  margin-top: 8px;
}

/* ── Draft mode ──────────────────────────────────────────────────── */
/* .reply-mode-toggle inherits base chip style */
.reply-mode-toggle { font-size: 0.75rem; user-select: none; }

.draft-badge {
  font-size: 0.75rem;
  font-weight: 600;
  background: var(--md-error, #B3261E);
  color: #fff;
  padding: 2px 10px;
  border-radius: var(--md-shape-full);
  cursor: pointer;
  white-space: nowrap;
}
.draft-badge:hover { opacity: 0.85; }

.drafts-panel { margin-bottom: 16px; }
.draft-item {
  border-bottom: 1px solid var(--md-outline-variant);
  padding: 14px 0;
}
.draft-item:last-child { border-bottom: none; }
.draft-meta {
  font-size: 0.8rem;
  color: var(--md-on-surface-variant);
  margin-bottom: 8px;
}
.draft-original,
.draft-reply { font-size: 0.85rem; margin-bottom: 8px; }
.draft-pre {
  font-family: inherit;
  font-size: 0.82rem;
  white-space: pre-wrap;
  word-break: break-word;
  background: var(--md-surface-container);
  padding: 8px;
  border-radius: 6px;
  margin: 4px 0 0;
}
.draft-edit {
  width: 100%;
  min-height: 80px;
  font-size: 0.85rem;
  font-family: inherit;
  border: 1px solid var(--md-outline);
  border-radius: 8px;
  padding: 8px;
  resize: vertical;
  box-sizing: border-box;
}
.draft-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 10px;
}
.draft-send-btn {
  background: #2E7D32;
  color: #fff;
  border: none;
  padding: 6px 16px;
  border-radius: var(--md-shape-full);
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 500;
}
.draft-send-btn:hover { background: #1B5E20; }
/* .draft-dismiss-btn inherits base chip style */
.draft-dismiss-btn { font-size: 0.8rem; }
.stale-warning {
  font-size: 0.75rem;
  color: var(--md-error, #B3261E);
  background: #FDECEA;
  padding: 4px 10px;
  border-radius: 4px;
  margin-bottom: 8px;
}
.no-drafts {
  font-size: 0.85rem;
  color: var(--md-on-surface-variant);
  text-align: center;
  padding: 16px 0;
}

/* ── Business profile setup card ─────────────────────────────────── */
.profile-setup-card {
  border: 2px dashed var(--md-primary-container);
  background: var(--md-surface-container-low);
}
.profile-hint {
  font-size: 0.875rem;
  color: var(--md-on-surface-variant);
  margin: 0 0 16px;
  line-height: 1.5;
}
.profile-fields {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}
.profile-input {
  height: 44px;
  padding: 0 14px;
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--md-shape-sm);
  background: var(--md-surface);
  color: var(--md-on-surface);
  font-family: inherit;
  font-size: 0.9375rem;
  outline: none;
  transition: border-color 0.15s;
}
.profile-input:focus {
  border-color: var(--md-primary);
  box-shadow: 0 0 0 2px var(--md-primary-container);
}
.priority-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--md-on-surface);
  margin: 0 0 10px;
}
.priority-checkboxes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-bottom: 20px;
}
.priority-checkboxes label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.875rem;
  color: var(--md-on-surface);
  cursor: pointer;
}
/* .profile-save-btn inherits base chip style */

/* ── Edit Profile Modal ──────────────────────────────────────────── */
.edit-profile-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 300;
  padding: 16px;
}
.edit-profile-overlay.hidden { display: none; }
.edit-profile-card {
  max-width: 480px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  margin: 0;
  border: none;
}
.edit-profile-actions {
  display: flex;
  gap: 10px;
  margin-top: 4px;
  justify-content: center;
}

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 560px) {
  body { padding: 12px 10px; }

  /* Top nav — business name left, actions right */
  .top-nav { margin-bottom: 16px; flex-wrap: nowrap; }
  .user-email-display { max-width: 140px; font-size: 0.8rem; padding: 0 8px; }
  .email-status { display: none; }
  .top-nav-actions { flex-wrap: nowrap; gap: 6px; }
  .digest-btn, .logout-btn { padding: 0 10px; font-size: 0.8rem; white-space: nowrap; }

  /* Header — tighter */
  .header { margin-bottom: 16px; }
  .header h1 { font-size: 1.5rem; }
  .header p { display: none; }

  /* Usage notes — hidden on mobile */
  .usage-notes { display: none; }

  /* Cards — less padding */
  .card { padding: 14px 14px; margin-bottom: 8px; }

  /* Input actions — stack Paste+Clear, full-width Analyze */
  .input-actions { flex-wrap: wrap; }
  .paste-btn { flex: 1; }
  .reset-btn { flex: 1; }
  #analyzeBtn { width: 100%; margin-top: 4px; }
  #reportBtn { width: 100%; }

  /* Textarea — taller touch target (1.5× desktop) */
  textarea { min-height: 195px; }
  .review-input { min-height: 195px; }

  /* Result cards — force vertical stacking, no horizontal scroll */
  .results-grid { display: flex; flex-direction: column; }
  .result-card  { width: 100%; box-sizing: border-box; }

  /* Done/Skip — WCAG 2.5.5 minimum tap target (44×44px) */
  .focus-action-btn {
    min-height: 44px;
    min-width: 44px;
    padding: 10px 18px;
  }

  /* Copy Reply button — slightly smaller than tap-target default */
  #copyBtn {
    min-height: 37px !important;
    padding: 8px 13px !important;
  }

  /* History items — stack meta below content */
  .history-item { flex-direction: column; gap: 4px; }
  .history-meta { flex-wrap: wrap; font-size: 0.75rem; }

  /* History drawer — full width on mobile */
  .history-drawer { width: 100%; right: -100%; }
  .history-drawer-open { right: 0; }

  /* Reply mode toggle + draft badge — visible on mobile */
  .reply-mode-toggle { display: inline-block; }
  .draft-badge       { display: inline-block; }

  /* Section titles — smaller */
  .section-title { font-size: 0.8rem; margin-bottom: 12px; padding-bottom: 10px; }
}