/* =====================================================================
   theme-overrides.css  —  SAFE global override layer (loaded LAST)
   ---------------------------------------------------------------------
   Every site-wide visual tweak lives here so the fragile 36k-line
   dashboard-new.css monolith is never touched. To fully revert any of
   this, just remove the <link> to this file from dashboard.html.
   Created 2026-05-29 during the UI/logic review.
   ===================================================================== */

/* ---- Design tokens referenced by markup/JS but never defined --------
   (their absence made the delete button grey, org name muted, etc.) */
:root,
[data-theme="light"] {
  --error: #ef4444;
  --error-strong: #dc2626;
  --error-soft: rgba(239, 68, 68, .12);
  --text: #1f2430;
  --text-danger: #dc2626;
  --ok: #22c55e;
  --ok-soft: rgba(34, 197, 94, .14);
  --warn: #f59e0b;
  --tg-accent: #29a9eb;
  --max-accent: #8b5cf6;
}

/* =====================================================================
   BOTS VIEW
   ===================================================================== */

/* Destructive delete button now reads as destructive (was inheriting grey) */
#botsView .btn-bot-action.delete-bot-btn {
  width: 32px;
  height: 32px;
  color: #aab0bd;
  border: 1px solid transparent;
  background: transparent;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
#botsView .btn-bot-action.delete-bot-btn:hover {
  background: rgba(239, 68, 68, .10);
  color: var(--error);
  border-color: rgba(239, 68, 68, .22);
}

/* Provider-tinted left accent — scan Telegram vs MAX at a glance */
.bot-card-glass { border-left: 3px solid transparent; }
.bot-card-glass.provider-telegram { border-left-color: var(--tg-accent); }
.bot-card-glass.provider-max { border-left-color: var(--max-accent); }

/* Real per-bot health indicator (added by renderBots from polling_status) */
.bot-health-dot {
  display: inline-block;
  width: 9px; height: 9px;
  border-radius: 50%;
  margin-left: 8px;
  vertical-align: middle;
  flex: 0 0 auto;
  background: #9ca3af;
}
.bot-health-dot.is-running  { background: var(--ok);    box-shadow: 0 0 0 3px var(--ok-soft); }
.bot-health-dot.is-error    { background: var(--error); box-shadow: 0 0 0 3px var(--error-soft); animation: bot-health-pulse 1.5s ease-in-out infinite; }
.bot-health-dot.is-starting { background: var(--warn);  box-shadow: 0 0 0 3px rgba(245, 158, 11, .18); animation: bot-health-pulse 1.5s ease-in-out infinite; }
.bot-health-dot.is-stopped  { background: #c2c7d0; }
@keyframes bot-health-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }

/* A thin error line under the title when the bot is failing */
.bot-card-error-line {
  margin: 2px 0 6px;
  font-size: 11.5px;
  line-height: 1.35;
  color: var(--error-strong);
  display: flex;
  align-items: center;
  gap: 5px;
}

/* Visible "X из Y" result counter (logic already existed; element was missing) */
.bots-result-count {
  font-size: 12.5px;
  color: #8a8fa3;
  font-weight: 500;
  margin-left: 10px;
  white-space: nowrap;
}

/* Skeleton cards while bots load (replaces the layout-collapsing 'Загрузка…') */
.bot-card-skeleton {
  border-radius: 18px;
  min-height: 188px;
  background: linear-gradient(110deg, rgba(124, 58, 237, .04) 30%, rgba(124, 58, 237, .10) 50%, rgba(124, 58, 237, .04) 70%);
  background-size: 220% 100%;
  animation: bot-skeleton-shimmer 1.25s linear infinite;
  border: 1px solid rgba(124, 58, 237, .08);
}
@keyframes bot-skeleton-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -120% 0; } }

/* =====================================================================
   ADMIN FEEDBACK VIEW  (.afv-* design system)
   ===================================================================== */

/* The monolith dashboard-new.css sets `.afv-toolbar { justify-content: space-between }`
   (a leftover embedded copy of the .afv-* component). That spread the tabs hard
   to the left and the search hard to the right, leaving a big empty gap that
   read as broken. Group the tabs + search together on the left instead. */
#adminFeedbackView .afv-toolbar {
  justify-content: flex-start !important;
}

/* Left status accent: new = brand purple, replied = green.
   Wires up .afv-card--replied which the JS already emits but was unstyled. */
#adminFeedbackView .afv-card {
  border-left: 3px solid var(--primary, #7c3aed);
  transition: transform .14s ease, box-shadow .18s ease, border-color .18s ease;
}
#adminFeedbackView .afv-card.afv-card--replied {
  border-left-color: var(--ok);
}
#adminFeedbackView .afv-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px -12px rgba(31, 36, 48, .22);
}

/* Card header becomes: [avatar] [name + relative time] ......... [reply/status] */
#adminFeedbackView .afv-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
}
#adminFeedbackView .afv-head-left {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}
#adminFeedbackView .afv-card-head .afv-reply-link,
#adminFeedbackView .afv-card-head .afv-status {
  margin-left: auto;
  flex: 0 0 auto;
}

/* Initials avatar (added by renderFeedbackList) */
.afv-avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 14px; color: #fff;
  flex: 0 0 auto;
  user-select: none;
  box-shadow: 0 2px 6px -2px rgba(0, 0, 0, .25);
}

/* Relative time: subtle, with absolute date available on hover (title attr) */
#adminFeedbackView .afv-user-sub { cursor: default; }

/* Source chip (web / telegram / max) next to the name */
.afv-source {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .02em;
  padding: 1px 7px;
  border-radius: 999px;
  margin-left: 0;
  vertical-align: middle;
  flex: 0 0 auto;
  background: rgba(124, 58, 237, .10);
  color: #7c3aed;
}
.afv-source.is-telegram { background: rgba(41, 169, 235, .12); color: #1c84bd; }
.afv-source.is-max { background: rgba(139, 92, 246, .14); color: #6d28d9; }

/* Polished empty state to match the .afv-* aesthetic */
#adminFeedbackView .afv-empty,
#adminFeedbackView .afv-state--empty {
  text-align: center;
  padding: 56px 24px;
  color: #9197a8;
}
#adminFeedbackView .afv-empty .afv-empty-icon {
  width: 56px; height: 56px;
  margin: 0 auto 14px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(124, 58, 237, .08);
  color: #7c3aed;
}

/* =====================================================================
   BALANCE TOP-UP MODAL  (#topupModal)
   The monolith styled this with the legacy WB-magenta (#cb11ab), which
   clashed with the purple the rest of the app now uses. Re-tint every
   accent to the brand purple so the modal speaks one colour, and make
   the price the focal accent. Specificity matches the monolith's
   `[data-theme="light"] #topupModal …` rules; loaded last + !important.
   ===================================================================== */
#topupModal .pkg-price,
[data-theme="light"] #topupModal .pkg-price {
  color: #7c3aed !important;
  font-weight: 700 !important;
}
#topupModal .topup-amount-btn:hover,
[data-theme="light"] #topupModal .topup-amount-btn:hover {
  border-color: rgba(124, 58, 237, .35) !important;
  box-shadow: 0 8px 20px rgba(124, 58, 237, .10) !important;
  background: #fefcff !important;
}
#topupModal .topup-package-wrapper.popular .topup-amount-btn,
#topupModal .topup-amount-btn.popular,
[data-theme="light"] #topupModal .topup-package-wrapper.popular .topup-amount-btn,
[data-theme="light"] #topupModal .topup-amount-btn.popular {
  background: rgba(124, 58, 237, .05) !important;
  border-color: rgba(124, 58, 237, .35) !important;
  box-shadow: 0 8px 22px rgba(124, 58, 237, .10) !important;
}
#topupModal .topup-amount-btn.active,
#topupModal .topup-amount-btn.selected,
[data-theme="light"] #topupModal .topup-amount-btn.active,
[data-theme="light"] #topupModal .topup-amount-btn.selected {
  border-color: #7c3aed !important;
  background: rgba(124, 58, 237, .07) !important;
  box-shadow: 0 0 0 1px rgba(124, 58, 237, .45) !important;
}
[data-theme="light"] #topupModal .topup-amount-btn.active .pkg-price,
[data-theme="light"] #topupModal .topup-amount-btn.selected .pkg-price {
  color: #7c3aed !important;
}
/* selection check + popular badge + footer kicker → purple */
#topupModal .topup-amount-btn.active .topup-card-check,
#topupModal .topup-amount-btn.selected .topup-card-check {
  background: #7c3aed !important;
  border-color: #7c3aed !important;
}
[data-theme="light"] #topupModal .topup-card-check {
  border-color: rgba(124, 58, 237, .30) !important;
}
#topupModal .topup-kicker,
[data-theme="light"] #topupModal .topup-kicker {
  border-color: rgba(124, 58, 237, .28) !important;
  background: rgba(124, 58, 237, .10) !important;
  color: #7c3aed !important;
}
/* "К пополнению" total — purple accent */
#topupModal #topupAmountDisplay {
  color: #7c3aed !important;
}
/* requests subtitle (when shown): muted, tidy */
#topupModal .pkg-requests {
  color: #94a3b8 !important;
  font-size: 12px !important;
}

/* ==========================================================================
   APPLE-LEVEL GLOBAL POLISH (2026-06-15)
   Layout-safe, site-wide refinements: crisper text rendering, brand-tinted
   selection, clean keyboard-focus rings. No geometry changes.
   ========================================================================== */
html, body,
button, input, select, textarea, optgroup {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Brand-tinted text selection (a small Apple-tier detail). */
::selection { background: rgba(124, 58, 237, 0.18); }
::-moz-selection { background: rgba(124, 58, 237, 0.18); }

/* Clean, accessible focus ring — only for keyboard navigation (not mouse),
   so it adds polish without flashing rings on every click. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid rgba(124, 58, 237, 0.55) !important;
  outline-offset: 2px !important;
}

/* ==========================================================================
   MOBILE FIXES (2026-06-30)
   Fixes: bot username wrapping, category tabs clipping, owners bar overflow,
   touch targets, header compactness on ≤768px.
   ========================================================================== */

/* ── 1. Top header: single compact row on mobile ─────────────────────────── */
@media (max-width: 768px) {
  .top-header {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    padding: 10px 12px !important;
    gap: 8px !important;
  }
  .header-left {
    flex-shrink: 0;
    gap: 8px !important;
  }
  .brand-logo-header { display: none !important; }  /* hide wordmark — shown in content */
  .header-right {
    flex: 1 1 0;
    min-width: 0;
    flex-direction: row !important;
    align-items: center !important;
    gap: 6px !important;
    overflow: hidden;
  }
  .tabs {
    flex: 1 1 0;
    min-width: 0;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    flex-wrap: nowrap !important;
    scrollbar-width: none !important;
    gap: 2px !important;
    padding: 4px !important;
    justify-content: flex-start !important;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tab {
    flex-shrink: 0 !important;
    padding: 8px 10px !important;
    gap: 5px !important;
    font-size: 12px !important;
    border-radius: 10px !important;
  }
  /* Active tab: icon + short label. All others: icon only */
  .tab .tab-text { display: none !important; }
  .tab.active .tab-text { display: inline !important; }
  .tab svg { width: 17px !important; height: 17px !important; }
  /* User avatar pill stays compact */
  .user-info, .sp-btn-upgrade, .btn-profile,
  #balanceDisplay, .header-avatar {
    flex-shrink: 0 !important;
  }
}

/* ── 2. Bot card — fix username wrapping mid-word ────────────────────────── */
@media (max-width: 768px) {
  /* Keep title + toggle on same row; don't wrap */
  #botsView .bot-card-header {
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 8px !important;
  }
  /* Truncate the title text; never break word mid-character */
  #botsView .bot-card-title {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    word-break: keep-all !important;
    min-width: 0 !important;
    max-width: calc(100% - 56px) !important;
    font-size: 14px !important;
  }
  /* Info rows: make the text span fill available width and truncate */
  #botsView .bot-info-item {
    overflow: hidden !important;
  }
  /* Direct child span (e.g. "Организация: [name]") — fill + truncate */
  #botsView .bot-info-item > span {
    min-width: 0 !important;
    flex: 1 1 0 !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
  }
  /* Inner spans/links inside the label — inherit truncation, don't re-clip */
  #botsView .bot-info-item > span span,
  #botsView .bot-info-item > span a {
    white-space: nowrap !important;
    overflow: visible !important;
  }
  /* Token/key pills — allow shrink, show partial value */
  #botsView .bot-pill {
    max-width: 100px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    display: inline-block !important;
    vertical-align: bottom !important;
  }
}

/* ── 3. Bots owner filter bar — horizontal scroll ───────────────────────── */
@media (max-width: 768px) {
  .bots-owners-bar {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }
  .bots-owners-bar::-webkit-scrollbar { display: none; }
}

/* ── 4. Hero cases filter tabs — scroll instead of clipping ─────────────── */
@media (max-width: 768px) {
  .hero-cases-section {
    overflow: hidden;         /* contain the scroll child */
  }
  .hero-cases-tabs {
    display: flex !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    flex-wrap: nowrap !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    gap: 6px !important;
    padding-bottom: 2px !important;
  }
  .hero-cases-tabs::-webkit-scrollbar { display: none; }
  .hero-cases-tab {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    padding: 7px 12px !important;
    font-size: 13px !important;
  }
}

/* ── 5. Bots provider filter + search bar — mobile spacing ──────────────── */
@media (max-width: 600px) {
  .bots-provider-filter {
    gap: 6px !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
  }
  .bots-provider-filter::-webkit-scrollbar { display: none; }
  .bots-pfilter {
    flex-shrink: 0 !important;
    padding: 6px 10px !important;
    font-size: 12px !important;
  }
  /* Give cards slightly less padding on phones */
  #botsView .bot-card-glass {
    padding: 14px !important;
  }
  #botsView .bot-info-grid {
    gap: 6px !important;
  }
}

/* ── 6. General touch targets — min 44px height for tappable elements ────── */
@media (max-width: 768px) {
  .btn-menu {
    min-width: 44px !important;
    min-height: 44px !important;
  }
  .hero-cases-tab,
  .bots-pfilter,
  .bots-owners-bar button {
    min-height: 36px !important;
  }
}


/* ===== ADMIN FEEDBACK — APPLE-LEVEL REDESIGN (2026-06-16) =====
   Appended at the END so it supersedes BOTH admin-feedback.css and the
   earlier #adminFeedbackView afv-* rules in this file. Scoped to
   #adminFeedbackView only — the user-facing #feedbackView is untouched. */
/* =====================================================================
   ADMIN FEEDBACK — FINAL APPLE-RESTRAINED CONSOLE  (light only)
   Scoped under #adminFeedbackView. Appends after admin-feedback.css.
   Written to win cleanly even though theme-overrides.css loads last:
   - the loud border-left rail is neutralised with a full-border reset
   - is-web / avatar are scoped to out-specify the unscoped base rules
   - the dead .afv-card-actions rule is removed (never emitted by JS)
   - .afv-textarea is guarded against minimal.css input{…!important}
   Message-led, neutral hairlines, purple rationed to dot + reply +
   primary + focus ring. Linear/Superhuman scannability, Apple calm.
   ===================================================================== */

#adminFeedbackView .afv-shell {
  /* Warm-neutral paper so the view never reads cold */
  --afv-paper:        #ffffff;          /* card / control surface (slightly warm white) */
  --afv-canvas:       #f6f6f9;          /* page behind cards */
  --afv-sunken:       #f3f3f7;          /* tabs track / reply fields */

  /* Neutral hairlines — NOT purple-tinted */
  --afv-line:         #ececf1;
  --afv-line-strong:  #e0e0e8;
  --afv-wash:         #faf9fd;          /* whole-card hover wash */

  /* Type ramp */
  --afv-ink:          #14141f;          /* message + primary heading */
  --afv-ink-soft:     #41415a;          /* reply body */
  --afv-meta:         #6b6b80;          /* username (demoted metadata) */
  --afv-muted:        #8a8a9e;          /* time / placeholders */
  --afv-faint:        #aeaebf;          /* counter / deemphasised */

  /* Brand — rationed */
  --afv-accent:       #7c3aed;
  --afv-accent-deep:  #6d28d9;
  --afv-accent-wash:  rgba(124, 58, 237, 0.07);
  --afv-ring:         rgba(124, 58, 237, 0.18);

  /* Answered (green lives in the thread, not on a rail) */
  --afv-ok:           #0f9d6f;
  --afv-ok-edge:      #34c08a;
  --afv-ok-panel:     rgba(16, 185, 129, 0.06);
  --afv-ok-eyebrow:   #0b8a62;
  --afv-ok-pill-bg:   rgba(16, 185, 129, 0.11);

  max-width: 760px;
  margin: 0 auto;
  padding: 44px 24px 96px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  color: var(--afv-ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Forced-light token override: a stray dark attribute must not leak in.
   Re-pin the same light tokens so [data-theme="dark"] cannot win. */
[data-theme="dark"] #adminFeedbackView .afv-shell,
html:not([data-theme="light"]) #adminFeedbackView .afv-shell {
  --afv-paper:#ffffff; --afv-canvas:#f6f6f9; --afv-sunken:#f3f3f7;
  --afv-line:#ececf1; --afv-line-strong:#e0e0e8; --afv-wash:#faf9fd;
  --afv-ink:#14141f; --afv-ink-soft:#41415a; --afv-meta:#6b6b80;
  --afv-muted:#8a8a9e; --afv-faint:#aeaebf;
  --afv-accent:#7c3aed; --afv-accent-deep:#6d28d9;
  --afv-accent-wash:rgba(124,58,237,0.07); --afv-ring:rgba(124,58,237,0.18);
  --afv-ok:#0f9d6f; --afv-ok-edge:#34c08a; --afv-ok-panel:rgba(16,185,129,0.06);
  --afv-ok-eyebrow:#0b8a62; --afv-ok-pill-bg:rgba(16,185,129,0.11);
  color: var(--afv-ink);
}

/* ============ HEAD ============ */
#adminFeedbackView .afv-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 0;
}

#adminFeedbackView .afv-title {
  font-size: 23px;
  line-height: 1.15;
  letter-spacing: -0.022em;
  font-weight: 680;
  margin: 0;
  color: var(--afv-ink);
  display: inline-flex;
  align-items: baseline;
  gap: 9px;
}

#adminFeedbackView .afv-counter {
  font-size: 14px;
  font-weight: 500;
  color: var(--afv-faint);
  letter-spacing: 0;
  margin-left: 0;
  font-variant-numeric: tabular-nums;
}
#adminFeedbackView .afv-counter:empty { display: none; }

#adminFeedbackView .afv-icon-btn {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--afv-paper);
  border: 1px solid var(--afv-line);
  color: var(--afv-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: color .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .12s ease;
}
#adminFeedbackView .afv-icon-btn:hover {
  color: var(--afv-accent);
  border-color: var(--afv-line-strong);
  box-shadow: 0 1px 2px rgba(20, 20, 31, 0.05);
}
#adminFeedbackView .afv-icon-btn:active { transform: scale(0.94); }
#adminFeedbackView .afv-icon-btn.is-loading svg { animation: afv-spin .85s linear infinite; }

/* ============ TOOLBAR — sticky filter cluster (tabs + search) ============
   .main/.view are overflow:visible, so sticky engages on the window.
   Saturated blur with a solid translucent fallback so it degrades cleanly. */
#adminFeedbackView .afv-toolbar {
  position: sticky;
  top: 8px;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: flex-start !important;   /* defeat dashboard-new.css space-between */
  gap: 10px;
  flex-wrap: wrap;
  padding: 7px;
  margin: -7px;                              /* let the padded fill hug the controls */
  border-radius: 15px;
  background: rgba(246, 246, 249, 0.86);     /* solid-ish fallback */
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  #adminFeedbackView .afv-toolbar {
    background: rgba(246, 246, 249, 0.72);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    backdrop-filter: saturate(180%) blur(14px);
  }
}

/* Segmented tabs */
#adminFeedbackView .afv-tabs {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  background: var(--afv-sunken);
  border: 1px solid var(--afv-line);
  border-radius: 11px;
}
#adminFeedbackView .afv-tab {
  appearance: none;
  border: none;
  background: transparent;
  padding: 6px 13px;
  border-radius: 8px;
  font: inherit;
  font-size: 13px;
  font-weight: 550;
  color: var(--afv-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  letter-spacing: -0.01em;
  transition: color .15s ease, background .15s ease, box-shadow .15s ease;
}
#adminFeedbackView .afv-tab:hover { color: var(--afv-ink); }
#adminFeedbackView .afv-tab.is-active {
  color: var(--afv-ink);
  background: var(--afv-paper);
  box-shadow: 0 1px 2px rgba(20, 20, 31, 0.06), 0 0 0 0.5px var(--afv-line-strong);
  font-weight: 600;
}
#adminFeedbackView .afv-tab-count {
  font-size: 11px;
  font-weight: 600;
  color: var(--afv-faint);
  font-variant-numeric: tabular-nums;
  padding: 1px 6px;
  border-radius: 99px;
  background: rgba(20, 20, 31, 0.05);
  border: none;
  min-width: 20px;
  text-align: center;
  line-height: 1.5;
}
#adminFeedbackView .afv-tab.is-active .afv-tab-count {
  color: var(--afv-accent);
  background: var(--afv-accent-wash);
  border: none;
}
#adminFeedbackView .afv-tab-count:empty { display: none; }

/* Search — neutral grey, joins the tabs as one cluster */
#adminFeedbackView .afv-search {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 1 auto;
  width: 260px;
  min-width: 160px;
  max-width: 100%;
  padding: 8px 13px;
  background: var(--afv-paper);
  border: 1px solid var(--afv-line);
  border-radius: 11px;
  color: var(--afv-muted);
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease, color .16s ease;
}
#adminFeedbackView .afv-search:hover { border-color: var(--afv-line-strong); }
#adminFeedbackView .afv-search:focus-within {
  border-color: var(--afv-accent);
  background: var(--afv-paper);
  box-shadow: 0 0 0 3px var(--afv-ring);
  color: var(--afv-ink);
}
#adminFeedbackView .afv-search svg {
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  opacity: 0.5;
  transition: opacity .16s ease, color .16s ease;
}
#adminFeedbackView .afv-search:focus-within svg { opacity: 1; color: var(--afv-accent); }
#adminFeedbackView .afv-search input {
  flex: 1;
  /* Defeat minimal.css `input{ border/background/box-shadow !important }` */
  border: none !important;
  outline: none !important;
  background: transparent !important;
  box-shadow: none !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 0 !important;
  font: inherit;
  font-size: 13px;
  letter-spacing: 0.01em;
  color: var(--afv-ink) !important;
  min-width: 0;
}
#adminFeedbackView .afv-search input::placeholder {
  color: var(--afv-muted) !important;
  opacity: 0.9 !important;
}

/* ============ LIST ============ */
#adminFeedbackView .afv-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ============ CARD ============
   SUBTRACT the loud full-height rail. The `border` shorthand resets the
   `border-left:3px` injected by theme-overrides.css. Restrained 2-layer
   depth (contact + ambient) on a 16px radius. */
#adminFeedbackView .afv-card {
  position: relative;
  padding: 18px 20px 18px 22px;
  border-radius: 16px;
  background: var(--afv-paper);
  border: 1px solid var(--afv-line);
  border-left: 1px solid var(--afv-line);   /* explicit: kills the 3px rail */
  box-shadow:
    0 1px 2px rgba(20, 20, 40, 0.05),
    0 8px 24px -14px rgba(31, 36, 48, 0.12);
  animation: afv-fade-in 0.25s ease;
  transition: background .16s ease, border-color .18s ease, box-shadow .2s ease, transform .18s ease;
}

/* Whole-card hover WASH (Apple Mail) — the primary affordance */
#adminFeedbackView .afv-card:hover {
  background: var(--afv-wash);
  border-color: var(--afv-line-strong);
  box-shadow:
    0 1px 2px rgba(20, 20, 40, 0.06),
    0 12px 30px -16px rgba(31, 36, 48, 0.16);
  transform: translateY(-1px);
}

/* Status DOT — unreplied only. A single 5px brand dot + soft halo at the
   left edge. Replied cards (.afv-card--replied) get nothing (no ::before). */
#adminFeedbackView .afv-card:not(.afv-card--replied)::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 25px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--afv-accent);
  box-shadow: 0 0 0 3px var(--afv-accent-wash);
}
#adminFeedbackView .afv-card--replied { border-left: 1px solid var(--afv-line); }
#adminFeedbackView .afv-card--replied::before { content: none; }

/* Header: [avatar] [name+chip / time] .......... [reply-link | status] */
#adminFeedbackView .afv-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 11px;
}
#adminFeedbackView .afv-head-left {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}
#adminFeedbackView .afv-card-head .afv-reply-link,
#adminFeedbackView .afv-card-head .afv-status {
  margin-left: auto;
  flex: 0 0 auto;
}

/* Avatar — keep 38px but tame the shouting initials: white inner ring,
   soft drop shadow, and a subtle inset overlay that desaturates/darkens.
   Scoped #adminFeedbackView wins over the unscoped .afv-avatar base. */
#adminFeedbackView .afv-avatar {
  position: relative;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 13.5px;
  letter-spacing: -0.01em;
  color: #fff;
  flex: 0 0 auto;
  user-select: none;
  overflow: hidden;
  box-shadow:
    0 0 0 1.5px #fff inset,
    0 2px 6px -2px rgba(20, 20, 40, 0.28);
}
#adminFeedbackView .afv-avatar::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  /* gentle inset darken + slight neutralising veil over the bright gradient */
  background:
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(15,15,30,0.12)),
    rgba(40, 36, 56, 0.10);
  pointer-events: none;
}

/* Identity — restacked: (name + chip) on top, relative time beneath.
   Username demoted to calm neutral metadata (NOT the bright purple it was). */
#adminFeedbackView .afv-user {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  min-width: 0;
}
#adminFeedbackView .afv-user-name {
  order: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--afv-meta);
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  max-width: 100%;
  letter-spacing: -0.005em;
  line-height: 1.25;
}
#adminFeedbackView .afv-user-sub {
  order: 2;
  font-size: 12px;
  color: var(--afv-muted);
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  cursor: default;
  line-height: 1.2;
}

/* Source chips — channel-coded; scoped to beat the unscoped base.
   Web finally neutral (was purple via the base .afv-source). */
#adminFeedbackView .afv-source {
  order: 1;
  display: inline-flex;
  align-items: center;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .02em;
  padding: 1px 7px;
  border-radius: 999px;
  margin-left: 0;
  vertical-align: middle;
  flex: 0 0 auto;
  line-height: 1.45;
}
#adminFeedbackView .afv-source.is-web {
  background: #f1f1f4;
  color: #6b7280;
}
#adminFeedbackView .afv-source.is-telegram {
  background: rgba(34, 158, 217, 0.12);
  color: #1c84bd;
}
#adminFeedbackView .afv-source.is-max {
  background: rgba(139, 92, 246, 0.14);
  color: #6d28d9;
}
/* Optional tiny leading dot — quiet channel cue */
#adminFeedbackView .afv-source::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  margin-right: 5px;
  background: currentColor;
  opacity: 0.85;
}

/* Status pill (archive only) — calm green */
#adminFeedbackView .afv-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 11px;
  border-radius: 99px;
  white-space: nowrap;
  letter-spacing: 0.01em;
  flex-shrink: 0;
  background: var(--afv-ok-pill-bg);
  color: var(--afv-ok);
}
#adminFeedbackView .afv-status::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}
#adminFeedbackView .afv-status--replied {
  background: var(--afv-ok-pill-bg);
  color: var(--afv-ok);
}

/* ============ MESSAGE — THE LEAD ============
   Largest, darkest element. Indented 49px (38 avatar + 11 gap) so it sits
   cleanly under the USERNAME, not the avatar. */
#adminFeedbackView .afv-message {
  margin-left: 49px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--afv-ink);
  font-weight: 400;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
  letter-spacing: -0.006em;
}

/* ============ REPLY THREAD (archive) ============
   Clearly-quoted answer: indented 49px under the message, uppercase
   'ОТВЕТ' eyebrow, faint green panel, 3px green LEFT edge. */
#adminFeedbackView .afv-reply {
  margin-top: 14px;
  margin-left: 49px;
  padding: 11px 15px 12px;
  border-radius: 12px;
  background: var(--afv-ok-panel);
  border: 1px solid rgba(16, 185, 129, 0.14);
  border-left: 3px solid var(--afv-ok-edge);
}
#adminFeedbackView .afv-reply-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 5px;
}
#adminFeedbackView .afv-reply-title {
  font-size: 10px;
  font-weight: 700;
  color: var(--afv-ok-eyebrow);
  text-transform: uppercase;
  letter-spacing: 0.09em;
}
/* 'Изменить' — calm, reveals on card hover (Superhuman restraint) */
#adminFeedbackView .afv-reply-edit {
  appearance: none;
  background: transparent;
  border: none;
  color: var(--afv-muted);
  font: inherit;
  font-size: 11.5px;
  cursor: pointer;
  padding: 0;
  opacity: 0;
  transition: color .15s ease, opacity .18s ease;
}
#adminFeedbackView .afv-card:hover .afv-reply-edit,
#adminFeedbackView .afv-reply:hover .afv-reply-edit { opacity: 0.8; }
#adminFeedbackView .afv-reply-edit:hover { color: var(--afv-accent); opacity: 1; }
#adminFeedbackView .afv-reply-edit:focus-visible {
  opacity: 1;
  outline: 2px solid var(--afv-ring);
  outline-offset: 2px;
  border-radius: 4px;
}
#adminFeedbackView .afv-reply-text {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--afv-ink-soft);
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* Dead rule — never emitted by dashboard.js. Removed entirely. */
#adminFeedbackView .afv-card-actions { display: none; }

/* ============ "ОТВЕТИТЬ" — two-stage Apple-Mail reveal ============
   muted grey at rest -> ink-soft on whole-card hover -> purple + faint
   wash on direct hover. (Replaces a static ghost / plain opacity reveal.) */
#adminFeedbackView .afv-reply-link {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--afv-muted);
  font: inherit;
  font-size: 12.5px;
  font-weight: 550;
  cursor: pointer;
  padding: 5px 11px;
  border-radius: 8px;
  letter-spacing: -0.005em;
  transition: color .15s ease, background .15s ease;
}
#adminFeedbackView .afv-card:hover .afv-reply-link { color: var(--afv-ink-soft); }
#adminFeedbackView .afv-reply-link:hover {
  color: var(--afv-accent);
  background: var(--afv-accent-wash);
}
#adminFeedbackView .afv-reply-link:focus-visible {
  color: var(--afv-accent);
  outline: 2px solid var(--afv-ring);
  outline-offset: 1px;
}

/* ============ BUTTONS ============ */
#adminFeedbackView .afv-btn {
  appearance: none;
  border: none;
  cursor: pointer;
  font: inherit;
  font-size: 12.5px;
  font-weight: 550;
  padding: 7px 16px;
  border-radius: 9px;
  line-height: 1.2;
  letter-spacing: -0.005em;
  transition: color .15s ease, background .15s ease, box-shadow .15s ease, transform .12s ease;
}
#adminFeedbackView .afv-btn--ghost {
  background: transparent;
  color: var(--afv-muted);
}
#adminFeedbackView .afv-btn--ghost:hover {
  color: var(--afv-ink);
  background: rgba(20, 20, 31, 0.05);
}
/* Primary — soften the heavy purple shadow to a single subtle layer + gentle lift */
#adminFeedbackView .afv-btn--primary {
  color: #fff;
  background: var(--afv-accent);
  box-shadow: 0 1px 2px rgba(124, 58, 237, 0.18);
}
#adminFeedbackView .afv-btn--primary:hover {
  background: var(--afv-accent-deep);
  box-shadow: 0 2px 8px -1px rgba(124, 58, 237, 0.26);
  transform: translateY(-1px);
}
#adminFeedbackView .afv-btn--primary:active { transform: translateY(0); }
#adminFeedbackView .afv-btn--primary:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* ============ INLINE REPLY / EDIT FORM ============ */
#adminFeedbackView .afv-reply-form {
  margin-top: 12px;
  margin-left: 49px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  animation: afv-fade-in 0.15s ease;
}
/* The edit form lives INSIDE .afv-reply (already indented) — don't double-indent */
#adminFeedbackView .afv-reply .afv-reply-form {
  margin-left: 0;
}

#adminFeedbackView .afv-textarea {
  width: 100%;
  min-height: 76px;
  padding: 11px 13px;
  border-radius: 10px;
  /* Guard against minimal.css input/textarea{…!important}; re-assert our box */
  border: 1px solid var(--afv-line-strong) !important;
  background: var(--afv-paper) !important;
  box-shadow: none !important;
  color: var(--afv-ink) !important;
  font: inherit;
  font-size: 13.5px;
  line-height: 1.5;
  resize: vertical;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
#adminFeedbackView .afv-textarea:focus {
  outline: none;
  border-color: var(--afv-accent) !important;
  box-shadow: 0 0 0 3px var(--afv-ring) !important;
  background: var(--afv-paper) !important;
}
#adminFeedbackView .afv-textarea::placeholder {
  color: var(--afv-muted) !important;
  opacity: 0.9 !important;
}
#adminFeedbackView .afv-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* ============ STATES / SKELETON ============ */
#adminFeedbackView .afv-state,
#adminFeedbackView .afv-empty,
#adminFeedbackView .afv-state--empty {
  padding: 60px 24px;
  text-align: center;
  color: var(--afv-muted);
  font-size: 14px;
}
#adminFeedbackView .afv-empty .afv-empty-icon {
  width: 56px; height: 56px;
  margin: 0 auto 14px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--afv-accent-wash);
  color: var(--afv-accent);
}

#adminFeedbackView .afv-skeleton {
  position: relative;
  padding: 18px 20px;
  border-radius: 16px;
  background: var(--afv-paper);
  border: 1px solid var(--afv-line);
  box-shadow: 0 1px 2px rgba(20, 20, 40, 0.05), 0 8px 24px -14px rgba(31, 36, 48, 0.12);
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px;
}
#adminFeedbackView .afv-skeleton-row {
  height: 10px;
  border-radius: 5px;
  background: linear-gradient(90deg, var(--afv-sunken) 0%, #ececf1 50%, var(--afv-sunken) 100%);
  background-size: 200% 100%;
  animation: afv-shimmer 1.4s ease-in-out infinite;
}
#adminFeedbackView .afv-skeleton-row:nth-child(1) { width: 35%; }
#adminFeedbackView .afv-skeleton-row:nth-child(2) { width: 88%; }
#adminFeedbackView .afv-skeleton-row:nth-child(3) { width: 60%; }

/* ============ ANIMATIONS ============ */
@keyframes afv-spin { to { transform: rotate(360deg); } }
@keyframes afv-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes afv-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  #adminFeedbackView .afv-card,
  #adminFeedbackView .afv-card:hover { transform: none; }
  #adminFeedbackView * { animation-duration: 0.001ms !important; }
}

/* Hide legacy markup (kept from base) */
#adminFeedbackView #adminFeedbackTabs { display: none !important; }

/* ============ MOBILE (<=700px) ============
   Indent resets to 0; the reply keeps a slim purple->magenta left-rail so
   the thread stays distinct without indentation. 16px textarea kills iOS
   zoom-on-focus. Non-sticky toolbar to avoid the fixed-header overlap. */
@media (max-width: 700px) {
  #adminFeedbackView .afv-shell {
    padding: 26px 14px 64px;
    gap: 18px;
  }
  #adminFeedbackView .afv-title { font-size: 21px; }

  #adminFeedbackView .afv-toolbar {
    position: static;
    margin: 0;
    padding: 0;
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    gap: 10px;
  }
  #adminFeedbackView .afv-tabs { flex: 1 1 auto; }
  #adminFeedbackView .afv-search {
    width: 100%;
    max-width: none;
    flex: 1 1 100%;
  }

  #adminFeedbackView .afv-card {
    padding: 15px 16px;
  }
  #adminFeedbackView .afv-card:not(.afv-card--replied)::before {
    left: 8px;
    top: 21px;
  }
  #adminFeedbackView .afv-card-head { flex-wrap: wrap; }

  /* Collapse the indent */
  #adminFeedbackView .afv-message,
  #adminFeedbackView .afv-reply,
  #adminFeedbackView .afv-reply-form {
    margin-left: 0;
  }
  #adminFeedbackView .afv-message { font-size: 15px; }

  /* Reply keeps a slim gradient left-rail in place of indentation */
  #adminFeedbackView .afv-reply {
    border-left: 3px solid transparent;
    border-image: linear-gradient(180deg, var(--afv-ok-edge), #34c08a) 1;
    border-radius: 0 12px 12px 0;
  }

  /* 16px textarea -> no iOS zoom-on-focus */
  #adminFeedbackView .afv-textarea {
    font-size: 16px;
    min-height: 84px;
  }
  #adminFeedbackView .afv-reply-edit { opacity: 0.8; }  /* always visible (no hover on touch) */
}

/* ============================================================
   EXTRA POLISH (2026-06-16) — «сделай красивее»
   Appended last → wins. Builds on the Apple-Mail redesign above:
   vivid avatars, a real "Ответить" pill, a brand counter pill,
   and a touch more paper depth. Avatar stays 38px so the 49px
   message indent keeps its alignment.
   ============================================================ */

/* Counter → soft brand pill (was a bare "· N") */
#adminFeedbackView .afv-title .afv-counter {
  display: inline-flex;
  align-items: center;
  margin-left: 11px;
  padding: 3px 11px;
  font-size: 12.5px;
  font-weight: 650;
  line-height: 1;
  color: var(--afv-accent);
  background: var(--afv-accent-wash);
  border: 1px solid var(--afv-ring);
  border-radius: 999px;
  letter-spacing: 0;
  position: relative;
  top: -3px;
}
/* Пустой счётчик (0 активных) не должен показывать пустую пилюлю-блоб —
   мой inline-flex выше по каскаду перебивал .afv-counter:empty{display:none}. */
#adminFeedbackView .afv-title .afv-counter:empty { display: none; }

/* Avatars — let the gradient sing: drop the grey desaturating veil (keep only
   a faint top sheen), crisp white ring + brand halo + soft drop. */
#adminFeedbackView .afv-avatar {
  box-shadow:
    0 0 0 2px var(--afv-paper),
    0 0 0 3.5px rgba(124, 58, 237, 0.12),
    0 5px 12px -4px rgba(31, 36, 48, 0.34);
}
#adminFeedbackView .afv-avatar::after {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 58%);
}

/* Card — softer corners, a 1px top inner highlight (paper), more ambient float,
   stronger lift on hover. */
#adminFeedbackView .afv-card {
  border-radius: 18px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 1px 2px rgba(20, 20, 40, 0.05),
    0 10px 28px -16px rgba(31, 36, 48, 0.16);
}
#adminFeedbackView .afv-card:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 2px 4px rgba(20, 20, 40, 0.06),
    0 16px 36px -18px rgba(31, 36, 48, 0.22);
}

/* "ОТВЕТИТЬ" — a real, always-present pill (outlined brand → solid on hover).
   Far higher affordance than the muted text reveal. */
#adminFeedbackView .afv-card-head .afv-reply-link {
  align-self: center;
  color: var(--afv-accent);
  background: var(--afv-accent-wash);
  border: 1px solid var(--afv-ring);
  padding: 6px 15px;
  border-radius: 999px;
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(124, 58, 237, 0.05);
  transition: color .15s ease, background .15s ease, border-color .15s ease, box-shadow .18s ease, transform .12s ease;
}
#adminFeedbackView .afv-card:hover .afv-reply-link { color: var(--afv-accent); }
#adminFeedbackView .afv-reply-link:hover {
  color: #fff;
  background: var(--afv-accent);
  border-color: var(--afv-accent);
  box-shadow: 0 4px 12px -2px rgba(124, 58, 237, 0.36);
  transform: translateY(-1px);
}
#adminFeedbackView .afv-reply-link:active { transform: translateY(0); }

/* =====================================================================
   LIGHT THEME FLAT MINIMAL REDESIGN (Sidebar & Header)
   ===================================================================== */

/* 1. Sidebar (Панель истории) */
[data-theme="light"] .sidebar {
  background: #ffffff !important;
  border-right: 1px solid #e5e7eb !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

[data-theme="light"] .sidebar-header {
  border-bottom: 1px solid #f3f4f6 !important;
  background: #ffffff !important;
}

[data-theme="light"] .sidebar-header h2 {
  color: #4b5563 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
}

[data-theme="light"] .sidebar-footer {
  border-top: 1px solid #f3f4f6 !important;
  background: #ffffff !important;
}

[data-theme="light"] .sidebar-logout-btn {
  background: transparent !important;
  border: 1px solid #e5e7eb !important;
  color: #4b5563 !important;
  box-shadow: none !important;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease !important;
}

[data-theme="light"] .sidebar-logout-btn:hover {
  background: #fef2f2 !important;
  color: #ef4444 !important;
  border-color: #fca5a5 !important;
}

/* 2. New Chat Button (Кнопка создания нового чата) */
[data-theme="light"] .btn-new-chat,
[data-theme="light"] .new-chat-btn {
  height: 42px !important;
  background: #7c3aed !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 8px !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  box-shadow: none !important;
  transition: background 0.15s ease, transform 0.1s ease !important;
}

[data-theme="light"] .btn-new-chat::before,
[data-theme="light"] .btn-new-chat::after,
[data-theme="light"] .new-chat-btn::before,
[data-theme="light"] .new-chat-btn::after {
  display: none !important;
}

[data-theme="light"] .btn-new-chat:hover,
[data-theme="light"] .new-chat-btn:hover {
  background: #6d28d9 !important;
  transform: none !important;
  box-shadow: none !important;
}

[data-theme="light"] .btn-new-chat:active,
[data-theme="light"] .new-chat-btn:active {
  background: #5b21b6 !important;
  transform: scale(0.98) !important;
  box-shadow: none !important;
}

/* 3. Chat List (Список чатов) */
[data-theme="light"] .chat-list {
  padding: 12px 8px !important;
  gap: 2px !important;
  scrollbar-width: thin !important;
  scrollbar-color: #e5e7eb transparent !important;
}

[data-theme="light"] .chat-list::-webkit-scrollbar {
  width: 5px !important;
}

[data-theme="light"] .chat-list::-webkit-scrollbar-track {
  background: transparent !important;
}

[data-theme="light"] .chat-list::-webkit-scrollbar-thumb {
  background: #e5e7eb !important;
  border-radius: 99px !important;
  border: none !important;
}

[data-theme="light"] .chat-list::-webkit-scrollbar-thumb:hover {
  background: #d1d5db !important;
}

/* 4. Chat Item (Элемент списка чатов) */
[data-theme="light"] .chat-item {
  height: 38px !important;
  padding: 0 12px !important;
  margin: 0 !important;
  border-radius: 6px !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  transition: background 0.15s ease, color 0.15s ease !important;
}

[data-theme="light"] .chat-item::before {
  display: none !important; /* Убираем старый левый маркер */
}

/* Создаем аккуратный минималистичный левый маркер фиолетового цвета для активного состояния */
[data-theme="light"] .chat-item.active::after {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  top: 8px !important;
  bottom: 8px !important;
  width: 3px !important;
  background: #7c3aed !important;
  border-radius: 0 2px 2px 0 !important;
}

[data-theme="light"] .chat-item:hover {
  background: #f3f4f6 !important;
}

[data-theme="light"] .chat-item.active {
  background: #f5f3ff !important;
}

[data-theme="light"] .chat-item-title {
  color: #374151 !important;
  font-size: 13.5px !important;
  font-weight: 400 !important;
}

[data-theme="light"] .chat-item.active .chat-item-title {
  color: #1f2937 !important;
  font-weight: 500 !important;
}

[data-theme="light"] .chat-item-actions {
  background: transparent !important;
}

[data-theme="light"] .chat-item-edit,
[data-theme="light"] .chat-item-delete {
  background: transparent !important;
  color: #9ca3af !important;
  border-radius: 4px !important;
}

[data-theme="light"] .chat-item-edit:hover {
  background: #e5e7eb !important;
  color: #4b5563 !important;
}

[data-theme="light"] .chat-item-delete:hover {
  background: #fef2f2 !important;
  color: #ef4444 !important;
}

/* 5. Chat Group Label (Метки групп дат) */
[data-theme="light"] .sidebar .chat-group-label {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #9ca3af !important;
  letter-spacing: 0.05em !important;
  padding: 14px 12px 6px !important;
  text-transform: uppercase !important;
  opacity: 1 !important;
}

/* 6. Status Pill (Панель баланса и тарифов в шапке) */
[data-theme="light"] .status-pill {
  background: #f3f4f6 !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  padding: 3px 3px 3px 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  height: 38px !important;
}

/* 7. Balance & Free Requests Display (Отображение чисел баланса) */
[data-theme="light"] .sp-balance,
[data-theme="light"] .sp-free {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #374151 !important;
  margin: 0 !important;
}

[data-theme="light"] .sp-balance span,
[data-theme="light"] .sp-free span {
  color: #1f2937 !important;
  font-weight: 600 !important;
}

/* 8. Tariffs Button (Кнопка улучшения тарифа) */
[data-theme="light"] .sp-btn-upgrade {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 6px !important;
  color: #7c3aed !important;
  height: 30px !important;
  padding: 0 10px !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  box-shadow: none !important;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease !important;
}

[data-theme="light"] .sp-btn-upgrade:hover {
  background: #f5f3ff !important;
  border-color: #ddd6fe !important;
  color: #6d28d9 !important;
  transform: none !important;
  box-shadow: none !important;
}

/* 9. User Badge Container (Блок профиля в шапке) */
[data-theme="light"] .user-badge-container {
  border: 1px solid #e5e7eb !important;
  background: #ffffff !important;
  border-radius: 8px !important;
  padding: 4px 10px !important;
  height: 38px !important;
  box-shadow: none !important;
  transition: background 0.15s ease, border-color 0.15s ease !important;
}

[data-theme="light"] .user-badge-container:hover {
  background: #f9fafb !important;
  border-color: #d1d5db !important;
  opacity: 1 !important;
}

[data-theme="light"] .user-initials {
  width: 24px !important;
  height: 24px !important;
  font-size: 11px !important;
  background: #f3f4f6 !important;
  color: #4b5563 !important;
  border: 1px solid #e5e7eb !important;
}

[data-theme="light"] #userBadge {
  font-size: 13px !important;
  color: #1f2937 !important;
  font-weight: 500 !important;
}

[data-theme="light"] #profileEmail {
  font-size: 10px !important;
  color: #9ca3af !important;
}

[data-theme="light"] .user-badge-container .chevron-down {
  color: #9ca3af !important;
  opacity: 1 !important;
}
/* ============================================================
   Боты (#botsView) — минималистичная плоская полировка.
   Грузится последним → безопасные оверрайды. Только светлая тема.
   ============================================================ */
/* Карточки: плоские, чистый hover (ФИКС: раньше hover красил карточку тёмной) */
#botsView .bot-card-glass {
  background: #ffffff !important;
  border: 1px solid #e6e8ee !important;
  box-shadow: none !important;
  border-radius: 14px !important;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease !important;
}
#botsView .bot-card-glass:hover {
  transform: none !important;
  background: #ffffff !important;
  border-color: rgba(124, 58, 237, 0.30) !important;
  box-shadow: 0 6px 22px -10px rgba(124, 58, 237, 0.22) !important;
}
/* убрать декоративную градиентную полосу сверху карточки */
#botsView .bot-card-glass::before { display: none !important; }

/* инфо-строки: мягче иконки, ровный ритм */
#botsView .bot-info-item { font-size: 13.5px; gap: 10px; }
#botsView .bot-info-item svg { opacity: .6; width: 16px; height: 16px; }

/* футер карточки — тонкий разделитель */
#botsView .bot-stats-row { border-top: 1px solid #eef0f4 !important; padding-top: 14px !important; }

/* шапка раздела — плоская, без тяжёлого градиента */
#botsView .bots-page-header {
  background: #ffffff !important;
  border: 1px solid #e6e8ee !important;
  box-shadow: none !important;
}

/* Промпты — плоская шапка раздела (консистентно с Ботами) */
#promptsView .prompts-header {
  background: #ffffff !important;
  border-bottom: 1px solid #e9eaf0 !important;
  box-shadow: none !important;
}

/* ============================================================
   Пополнение баланса (#topupModal) — красивые тарифы.
   Loaded last → безопасные оверрайды. Светлая тема.
   ============================================================ */
#topupModal .modal-content { max-width: 520px !important; border-radius: 20px !important; }
#topupModal .topup-amounts { gap: 12px !important; margin: 6px 0 18px !important; }
#topupModal .topup-package-wrapper { overflow: visible; }

/* карточка тарифа — крупнее, чистая иерархия */
#topupModal .topup-amount-btn {
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  padding: 18px 14px !important;
  min-height: 96px;
  background: #ffffff !important;
  border: 1.5px solid #e6e8ee !important;
  border-radius: 16px !important;
  box-shadow: none !important;
  transition: border-color .15s ease, box-shadow .15s ease !important;
  overflow: visible !important;
}
#topupModal .topup-amount-btn::before { display: none !important; }
#topupModal .topup-amount-btn:hover {
  transform: none !important;
  background: #ffffff !important;
  border-color: rgba(124, 58, 237, .35) !important;
  box-shadow: 0 8px 22px -10px rgba(124, 58, 237, .25) !important;
}
/* имя — мелкая мьютед-метка; цена — крупное жирное число */
#topupModal .pkg-name {
  font-size: 11px !important; font-weight: 600 !important;
  letter-spacing: .04em; text-transform: uppercase;
  color: #8b909e !important; text-shadow: none !important;
}
#topupModal .pkg-price {
  font-size: 21px !important; font-weight: 800 !important;
  color: #1c1f2a !important; text-shadow: none !important; line-height: 1;
}

/* выбранный тариф — чистый фиолетовый акцент */
#topupModal .topup-amount-btn.selected,
#topupModal .topup-amount-btn.active {
  background: rgba(139, 92, 246, .06) !important;
  border-color: #7c3aed !important;
  box-shadow: 0 0 0 1px #7c3aed inset, 0 8px 22px -10px rgba(124, 58, 237, .3) !important;
}
#topupModal .topup-amount-btn.selected .pkg-name,
#topupModal .topup-amount-btn.active .pkg-name { color: #7c3aed !important; text-shadow: none !important; }
#topupModal .topup-amount-btn.selected .pkg-price,
#topupModal .topup-amount-btn.active .pkg-price { color: #6d28d9 !important; }

/* популярный тариф — акцент + бейдж «Популярный» */
#topupModal .topup-amount-btn.popular {
  border: 1.5px solid #7c3aed !important;
  background: linear-gradient(135deg, rgba(139, 92, 246, .08), rgba(139, 92, 246, .03)) !important;
  box-shadow: 0 10px 26px -12px rgba(124, 58, 237, .35) !important;
}
#topupModal .topup-amount-btn.popular .pkg-price { color: #6d28d9 !important; }
#topupModal .topup-package-wrapper.popular { position: relative; }
#topupModal .topup-package-wrapper.popular::before {
  content: 'Популярный';
  position: absolute; top: -9px; left: 50%; transform: translateX(-50%);
  background: #7c3aed; color: #fff;
  font-size: 10px; font-weight: 700; letter-spacing: .03em;
  padding: 3px 10px; border-radius: 999px; white-space: nowrap; z-index: 3;
  box-shadow: 0 4px 10px -3px rgba(124, 58, 237, .5);
}

/* строка «К пополнению» */
#topupModal .topup-info {
  background: #f6f7f9 !important; border: 1px solid #eceef3 !important;
  border-radius: 12px !important; padding: 14px 16px !important;
}
#topupModal #topupAmountDisplay { color: #1c1f2a !important; }

/* Пополнение баланса — мобильная раскладка тарифов (1 колонка на всю ширину) */
@media (max-width: 560px) {
  #topupModal .topup-amounts { grid-template-columns: 1fr !important; gap: 10px !important; }
  #topupModal .topup-amount-btn {
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    min-height: 0 !important;
    padding: 16px 18px !important;
    gap: 12px !important;
  }
  #topupModal .pkg-name { font-size: 12px !important; }
  #topupModal .pkg-price { font-size: 19px !important; }
  #topupModal .topup-package-wrapper.popular::before { left: auto; right: 14px; transform: none; top: -8px; }
}

/* Пополнение баланса — мобайл: пересилить существующий redesign (спецификация 1,2,0) */
@media (max-width: 560px) {
  #topupModal .topup-amounts { grid-template-columns: 1fr !important; gap: 10px !important; }
  #topupModal .topup-amounts .topup-package-wrapper {
    width: 100% !important; max-width: none !important; flex-direction: column !important; align-items: stretch !important;
  }
  #topupModal .topup-package-wrapper .topup-amount-btn {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    min-height: 0 !important;
    padding: 16px 18px !important;
    text-align: left !important;
  }
  #topupModal .topup-package-wrapper.popular::before { left: auto; right: 14px; transform: none; top: -8px; }
}

/* Пополнение баланса — мобайл: выровнять высоту популярной/безлимитной карточки */
@media (max-width: 560px) {
  #topupModal .topup-package-wrapper.popular .topup-amount-btn,
  #topupModal .topup-package-wrapper.unlimited .topup-amount-btn {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: 0 !important;
    padding: 16px 18px !important;
  }
}

/* ============================================================
   Настройки → «Пакеты запросов» (#settingsView .package-card-mini)
   Чистые плоские карточки, фиолетовый акцент, бейдж «Хит».
   ============================================================ */
#settingsView #packagesListSettings { gap: 10px !important; }
#settingsView .package-card-mini {
  background: #ffffff !important;
  border: 1px solid #e6e8ee !important;
  border-radius: 14px !important;
  padding: 16px 12px !important;
  gap: 5px !important;
  box-shadow: none !important;
  transition: border-color .15s ease, box-shadow .15s ease !important;
  overflow: visible !important;
}
#settingsView .package-card-mini:hover {
  transform: none !important;
  background: #ffffff !important;
  border-color: rgba(124, 58, 237, .35) !important;
  box-shadow: 0 6px 18px -8px rgba(124, 58, 237, .22) !important;
}
#settingsView .pkg-name-mini {
  font-size: 11px !important; font-weight: 600 !important; opacity: 1 !important;
  color: #8b909e !important; text-transform: uppercase; letter-spacing: .03em;
  white-space: normal !important; line-height: 1.25;
}
#settingsView .pkg-price-mini { font-size: 18px !important; font-weight: 800 !important; color: #1c1f2a !important; }
#settingsView .pkg-requests-badge {
  font-size: 11px !important; opacity: 1 !important; color: #8b909e !important; margin-top: 1px !important;
}
/* популярный тариф — фиолетовый акцент + видимый бейдж «Хит» */
#settingsView .package-card-mini.popular {
  border-color: #7c3aed !important;
  background: rgba(139, 92, 246, .05) !important;
}
#settingsView .package-card-mini.popular .pkg-price-mini { color: #6d28d9 !important; }
#settingsView .package-card-mini .popular-badge {
  display: inline-block !important;
  position: absolute; top: -8px; left: 50%; transform: translateX(-50%);
  background: #7c3aed; color: #fff;
  font-size: 9.5px; font-weight: 700; letter-spacing: .04em;
  padding: 2px 9px; border-radius: 999px; white-space: nowrap; z-index: 2;
  box-shadow: 0 3px 8px -2px rgba(124, 58, 237, .5);
}

/* Боты — тумблер: состояние «сохраняю…» (оптимистичный отклик на вкл/выкл) */
#botsView .bot-status-toggle.is-pending {
  pointer-events: none;
  cursor: wait;
  animation: botTogglePulse 0.9s ease-in-out infinite;
}
@keyframes botTogglePulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 0.9; } }
@media (prefers-reduced-motion: reduce) {
  #botsView .bot-status-toggle.is-pending { animation: none; opacity: 0.6; }
}

/* Боты — тумблер: центрируем кнопку (была top/left=2px → смещена вверх и асимметрична).
   Трек 38×22, кнопка 16×16 → 3px со всех сторон; active translateX(16px) даёт симметричные 3px. */
#botsView .bot-status-toggle::after { top: 3px !important; left: 3px !important; }

/* =====================================================================
   MOBILE — исправления для экранов ≤768px
   ===================================================================== */

/* 1. Имя бота — запрет переноса посередине слова
      overflow-wrap:anywhere вызывал разрыв «@AssistMax15_bo» + «t».
      flex-wrap:nowrap держит значок провайдера и точку здоровья в одной строке;
      white-space:nowrap + overflow:hidden обрезает длинные имена вместо переноса. */
#botsView .bot-card-title {
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}

/* 2. Showcase-карточки — КРИТИЧНО: dashboard-mobile.css:1271 делал из них
   ГОРИЗОНТАЛЬНУЮ КАРУСЕЛЬ (display:flex + overflow-x:auto + scroll-snap:x +
   карточки flex:0 0 220px). На реальном телефоне свайп по большой области
   карточек крутил их вбок → «контент уехал вбок, видна полоса». Убиваем
   карусель и делаем чистый 2-колоночный grid (специфичность html[data-page]
   = 1,2,0 перебивает карусельные 0,2,0). */
@media (max-width: 640px) {
  html[data-page="dashboard"] .hero-cases-section {
    padding: 0 10px !important;
    margin-top: 16px !important;
    overflow: hidden !important;
  }
  html[data-page="dashboard"] .hero-cases-tabs {
    margin-bottom: 12px !important;
    padding-bottom: 10px !important;
  }
  html[data-page="dashboard"] .hero-cases-tab {
    font-size: 12px !important;
    padding: 6px 12px !important;
  }
  /* карусель → grid: убираем горизонтальный скролл и snap полностью */
  html[data-page="dashboard"] .hero-cases-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    scroll-snap-type: none !important;
    -webkit-overflow-scrolling: auto !important;
  }
  html[data-page="dashboard"] .hero-case-card {
    flex: unset !important;            /* отменяем flex:0 0 220px */
    width: auto !important;            /* ширину задаёт грид-ячейка */
    min-width: 0 !important;
    scroll-snap-align: none !important;
  }
  html[data-page="dashboard"] .hero-case-card-img {
    height: 90px !important;
  }
  html[data-page="dashboard"] .hero-case-card-body {
    padding: 10px !important;
  }
  html[data-page="dashboard"] .hero-case-card-title {
    font-size: 12px !important;
    margin-bottom: 6px !important;
    line-height: 1.3 !important;
  }
  html[data-page="dashboard"] .hero-case-sub {
    font-size: 11px !important;
  }
  html[data-page="dashboard"] .hero-case-card-tag {
    font-size: 11px !important;
  }
}

/* 3. Hero-секция чата: меньше вертикального отступа на мобильном */
@media (max-width: 640px) {
  .hero-container {
    padding: 18px 12px 14px !important;
  }
  .hero-subtitle {
    font-size: 14px !important;
  }
}

/* 4. Боты — мобильные улучшения */
@media (max-width: 640px) {
  #botsView .bots-page-wrapper {
    width: 100% !important;
    padding: 12px 0 !important;
  }
  #botsView .bots-page-header {
    padding: 10px 12px !important;
    border-radius: 12px !important;
  }
  #botsView .bots-page-title {
    font-size: 18px !important;
  }
  #botsView .bots-page-subtitle {
    font-size: 12px !important;
  }
  #botsView .bots-add-btn {
    padding: 8px 12px !important;
    font-size: 12px !important;
  }
  /* Карточка бота — компактнее */
  #botsView .bot-card-glass {
    padding: 10px 12px !important;
  }
  /* Счётчик запросов и корзина */
  #botsView .bot-card-footer {
    padding-top: 8px !important;
    font-size: 11px !important;
  }
}

/* 5. Фильтр-пилюли на странице ботов */
@media (max-width: 640px) {
  #botsView .bots-filter-pills,
  #botsView .bot-provider-filter {
    gap: 4px !important;
  }
  #botsView .bots-filter-pills button,
  #botsView .bot-provider-filter button {
    font-size: 11px !important;
    padding: 4px 10px !important;
  }
}

/* 6. Action-pills: ровный 2-колоночный грид на ≤480px */
@media (max-width: 480px) {
  .action-pills-grid,
  .action-cards-row-top,
  .action-cards-row-bottom {
    gap: 6px !important;
  }
  .action-pill {
    min-height: 40px !important;
    font-size: 11px !important;
  }
}

/* 7. Модалка настроек / пакетов: полная ширина на мобильном */
@media (max-width: 640px) {
  .modal-content,
  .settings-modal-content {
    padding: 16px !important;
    border-radius: 12px !important;
  }
}

/* 8. Общая таблица: горизонтальный скролл вместо выхода за экран.
      min-width только для таблиц ВНУТРИ скролл-обёртки — иначе глобальное
      table{min-width} ширит мелкие/служебные таблицы за пределы экрана. */
@media (max-width: 768px) {
  .table-container,
  .response-table-wrapper {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .table-container table,
  .response-table-wrapper table {
    min-width: 480px;
  }
}

/* =====================================================================
   9. КРИТИЧНО — единый скролл страницы на мобильном (≤900px)
   ---------------------------------------------------------------------
   На десктопе админ-вью — это контейнеры с фиксированной высотой
   (#settingsView: height:calc(100vh-65px)+overflow:auto; #usersView:
   min-height:calc(100vh-85px)+overflow:auto; #knowledgeView аналогично).
   На мобильном это запирает контент во внутренней панели: body короткий,
   тач-скролл не работает, а 100vh глючит с адресной строкой браузера.
   Решение: на мобильном делаем эти вью height:auto/overflow:visible —
   скроллится естественно вся страница одним скроллером (body), как чат.
   ===================================================================== */
@media (max-width: 900px) {
  html[data-page="dashboard"] #settingsView.view,
  html[data-page="dashboard"] #settingsView.view.active,
  html[data-page="dashboard"] #usersView.view,
  html[data-page="dashboard"] #usersView.view.active,
  html[data-page="dashboard"] #knowledgeView.view,
  html[data-page="dashboard"] #knowledgeView.view.active,
  html[data-page="dashboard"] #promptsView.view,
  html[data-page="dashboard"] #promptsView.view.active {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  /* старая структура #usersSection (если где-то используется) */
  html[data-page="dashboard"] #usersSection > div {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  /* #usersView: внутренняя .uv-page обрезала 2101px контента до ~704px
     (overflow:hidden из flex-контекста). Разворачиваем по контенту.
     ВАЖНО: display:block ТОЛЬКО для .active — иначе неактивный usersView
     перестаёт прятаться и лезет поверх других вкладок. */
  html[data-page="dashboard"] #usersView.view.active {
    display: block !important;
  }
  html[data-page="dashboard"] #usersView .uv-page {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    flex: none !important;
  }

  /* единственный вертикальный скроллер — сама страница (overflow-x:hidden,
     чтобы случайный вылет не давал горизонтальный сдвиг). Высоту html/body
     НЕ трогаем — иначе на реальных мобильных браузерах сдвигает контент. */
  html[data-page="dashboard"] body {
    overflow-x: hidden !important;
  }
}

/* =====================================================================
   10. ЧАТ — панель ввода (центральный фикс) + композер + сообщения
   ---------------------------------------------------------------------
   Источник «уродства»: #chatView .hero-input-bottom — это 3-колоночный
   grid (dashboard-mobile.css:362 и :1463) с display:contents на обёртках
   .hero-bottom-left/right. Это «расплющивает» 5 контролов (📎, переключатель
   режима, ⓘ, 💡, →) в 3 колонки → перенос на 2 кривых ряда.
   Решение (вариант 1): один flex-ряд, переключатель режима тянется (flex:1),
   иконки фикс-размера. theme-overrides грузится последним → перебивает оба
   grid-правила.
   ===================================================================== */
@media (max-width: 900px) {
  html[data-page="dashboard"] #chatView .hero-input-bottom {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 6px !important;
    grid-template-columns: none !important;
  }
  /* обёртки прозрачны — их дети становятся flex-элементами ряда */
  html[data-page="dashboard"] #chatView .hero-bottom-left,
  html[data-page="dashboard"] #chatView .hero-bottom-right {
    display: contents !important;
  }
  /* сегментированный переключатель Стандартный|Профи поглощает свободное место */
  html[data-page="dashboard"] #chatView .family-switch {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    width: auto !important;
  }
  html[data-page="dashboard"] #chatView .family-opt {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    min-width: 0 !important;
    flex-shrink: 1 !important;
  }
  /* иконки — фиксированного размера, не сжимаются */
  html[data-page="dashboard"] #chatView .btn-attach-simple,
  html[data-page="dashboard"] #chatView .input-submit-btn-grey,
  html[data-page="dashboard"] #chatView #heroSendBtn,
  html[data-page="dashboard"] #chatView .model-toggle-wrapper {
    flex: 0 0 auto !important;
  }
  /* ⓘ-подсказка режимов на мобильном лишняя — забирала ~32px у переключателя,
     из-за чего «Стандартный/Профи» сжимались в «Стан…/П…». Описание режимов
     остаётся на десктопе; на телефоне режимы самоочевидны. */
  html[data-page="dashboard"] #chatView .hero-input-bottom .mode-info {
    display: none !important;
  }
}
/* на мобильном уменьшаем паддинг/шрифт пилюль режима, чтобы «Стандартный»
   помещался целиком без многоточия */
@media (max-width: 900px) {
  html[data-page="dashboard"] #chatView .family-opt {
    padding-left: 9px !important;
    padding-right: 9px !important;
    font-size: 11.5px !important;
  }
}
@media (max-width: 375px) {
  /* очень узкие экраны: уменьшаем gap и вторичные иконки (📎, 💡),
     чтобы переключатель режима показывал ярлыки целиком; → остаётся крупной */
  html[data-page="dashboard"] #chatView .hero-input-bottom { gap: 4px !important; }
  html[data-page="dashboard"] #chatView .btn-attach-simple,
  html[data-page="dashboard"] #chatView .model-toggle-wrapper {
    width: 38px !important; min-width: 38px !important;
    height: 38px !important; min-height: 38px !important;
  }
  html[data-page="dashboard"] #chatView .family-opt {
    padding-left: 7px !important;
    padding-right: 7px !important;
    font-size: 11px !important;
  }
}

/* --- Активный композер (#composer.composer-v2): кнопка отправки вылазила
       за правый край (x=392 > 390). Убираем margin-left:auto, фикс-иконки 44px,
       прячем текст «Быстрый/Вдумчивый» (раздувал кнопку до 108px). --- */
@media (max-width: 900px) {
  html[data-page="dashboard"] #composer.composer-v2 .c-bottom-row {
    flex-wrap: nowrap !important;
    gap: 6px !important;
    overflow: visible !important;
  }
  html[data-page="dashboard"] #composer.composer-v2 .c-bottom-row #send,
  html[data-page="dashboard"] #composer.composer-v2 .c-bottom-row .c-send {
    margin-left: 0 !important;
  }
  html[data-page="dashboard"] #composer.composer-v2 .family-switch {
    flex: 1 1 0 !important;
    min-width: 0 !important;
  }
  html[data-page="dashboard"] #composer.composer-v2 .c-model .model-name {
    display: none !important;
  }
  html[data-page="dashboard"] #composer.composer-v2 .c-attach,
  html[data-page="dashboard"] #composer.composer-v2 .c-model,
  html[data-page="dashboard"] #composer.composer-v2 .c-send {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    border-radius: 12px !important;
    flex: 0 0 auto !important;
  }
}

/* --- Сообщения чата: таблицы внутри пузырей НЕ растягивать до 640px
       (глобальное [data-page] table{min-width:640px} в dashboard-mobile.css:860
       заставляло даже мелкие таблицы вылезать за пузырь). --- */
html[data-page="dashboard"] #chatView .bubble table,
html[data-page="dashboard"] .msg .bubble table,
html[data-page="dashboard"] .message-content table {
  min-width: 0 !important;
  max-width: 100% !important;
}

/* мелкая полировка читабельности на мобильном */
@media (max-width: 900px) {
  html[data-page="dashboard"] #chatView #messages { padding-top: 8px !important; }
  html[data-page="dashboard"] #chatView .bubble { line-height: 1.5 !important; }
}
/* на тач-устройствах не дёргать пузырь при тапе (hover-эффект) */
@media (hover: none), (pointer: coarse) {
  html[data-page="dashboard"] #chatView .bubble:hover { transform: none !important; }
}