/* ============================================================
   Weatmood — дополнения интерфейса:
   однострочное имя с блюром, меню профиля, увеличенные настройки.
   ============================================================ */

/* ── Имя пользователя: ровно одна строка, край растворяется ── */
.user__name {
  display: block;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  /* правый край мягко уходит в прозрачность — видно, что текст продолжается */
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 26px), transparent 100%);
  mask-image: linear-gradient(90deg, #000 calc(100% - 26px), transparent 100%);
}

.user__meta {
  overflow: hidden;
  min-width: 0;
}

.user__plan {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* ── Меню профиля (компактное, над карточкой, внутри сайдбара) ── */
.user-menu {
  position: fixed;
  left: 10px;
  bottom: 66px;
  width: calc(var(--sidebar-w) - 20px);
  max-width: 230px;
  z-index: 60;
  padding: 5px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--bg-elev);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .55);
  animation: userMenuIn .16s ease both;
}

.user-menu.is-hidden { display: none; }

/* при свёрнутом сайдбаре меню прячем — карточки профиля не видно */
body.is-collapsed .user-menu { display: none; }

@keyframes userMenuIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

.user-menu__item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 7px 9px;
  border-radius: 8px;
  color: var(--text);
  font-size: 14.5px;
  text-align: left;
  transition: background .12s ease;
}

.user-menu__item:hover { background: var(--bg-hover); }
.user-menu__item svg { width: 17px; height: 17px; flex: 0 0 17px; color: var(--text-dim); }
.user-menu__item:hover svg { color: var(--text); }
.user-menu__item span { font-size: 14px; }

.user-menu__sep {
  height: 1px;
  margin: 4px 3px;
  background: var(--border);
}

.user-menu__item--danger { color: #ff8f8f; }
.user-menu__item--danger svg { color: #ff8f8f; }
.user-menu__item--danger:hover { background: rgba(255, 86, 86, .10); }

/* ── Настройки: крупнее и с лёгким блюром фона (чат просвечивает) ── */
.settings {
  width: min(100%, 900px);
  max-height: min(90vh, 760px);
}

.settings-modal__backdrop {
  background: rgba(0, 0, 0, .30);
  -webkit-backdrop-filter: blur(7px) saturate(115%);
  backdrop-filter: blur(7px) saturate(115%);
}

html[data-theme="light"] .settings-modal__backdrop {
  background: rgba(255, 255, 255, .32);
}

.settings__body { min-height: 420px; }

/* ── Затемнение под модалками: максимум 20% + лёгкий блюр фона ── */
.modal__backdrop,
.auth-modal__backdrop,
.settings-modal__backdrop,
#exportModal .modal__backdrop,
#profileModal .modal__backdrop {
  background: rgba(0, 0, 0, .20);
  -webkit-backdrop-filter: blur(6px) saturate(115%);
  backdrop-filter: blur(6px) saturate(115%);
}

html[data-theme="light"] .modal__backdrop,
html[data-theme="light"] .auth-modal__backdrop,
html[data-theme="light"] .settings-modal__backdrop {
  background: rgba(255, 255, 255, .28);
}

/* подложка настроек — тот же мягкий уровень, чат просвечивает */
.settings-modal__backdrop {
  background: rgba(0, 0, 0, .20);
}

/* ============================================================
   Безопасность и вход: почта, сеансы
   ============================================================ */

.sec-email {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--bg-elev);
}

.sec-email__value {
  font-size: 14.5px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sec-email .btn-ghost { padding: 7px 14px; font-size: 13.5px; flex: 0 0 auto; }

.sessions { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }

.session {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--bg-elev);
}

.session__main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.session__title { font-size: 14.5px; color: var(--text); }
.session__meta { font-size: 12.5px; color: var(--text-faint); }

.session__badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(52, 199, 123, .4);
  color: #6ee7a8;
  font-size: 11px;
  vertical-align: middle;
}

.session__kill {
  flex: 0 0 auto;
  padding: 7px 14px;
  border: 1px solid rgba(255, 120, 120, .3);
  border-radius: 9px;
  background: rgba(255, 86, 86, .08);
  color: #ff9d9d;
  font-size: 13px;
  cursor: pointer;
  transition: background .14s ease;
}
.session__kill:hover { background: rgba(255, 86, 86, .16); }
.session__kill:disabled { opacity: .5; cursor: not-allowed; }

/* ============================================================
   Лимиты в «Управлении данными»
   ============================================================ */

.limit-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}
.limit-row:last-child { border-bottom: none; }
.limit-row__label { color: var(--text-dim); }
.limit-row__value { color: var(--text); font-variant-numeric: tabular-nums; }

/* ============================================================
   Память: заголовок, цветная шкала, легенда
   ============================================================ */

.memory-head { margin-bottom: 14px; }
.memory-head__row {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.memory-head__used {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--text);
}
.memory-head__of { font-size: 14px; color: var(--text-faint); }
.memory-head__hint {
  display: block;
  margin-top: 3px;
  font-size: 13px;
  color: var(--text-dim);
}
.memory-head__hint.is-warn { color: #ffb072; }
.memory-head__hint.is-full { color: #ff8f8f; }

/* Шкала: сегменты по категориям */
.mem-bar {
  display: flex;
  width: 100%;
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--bg-hover);
  margin-bottom: 16px;
}

.mem-bar__seg {
  display: block;
  height: 100%;
  transition: width .35s ease;
}

.mem-bar__seg--chats  { background: #5b8cff; }
.mem-bar__seg--files  { background: #34c77b; }
.mem-bar__seg--images { background: #b06cff; }
.mem-bar__seg--other  { background: #7a7a85; }

/* Легенда */
.mem-legend {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 14px 16px;
  margin-bottom: 18px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-elev);
}

.mem-legend__row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
}

.mem-legend__dot {
  width: 11px;
  height: 11px;
  flex: 0 0 11px;
  border-radius: 3px;
}
.mem-legend__dot--chats  { background: #5b8cff; }
.mem-legend__dot--files  { background: #34c77b; }
.mem-legend__dot--images { background: #b06cff; }
.mem-legend__dot--other  { background: #7a7a85; }

.mem-legend__name { flex: 1 1 auto; color: var(--text-dim); }
.mem-legend__val { color: var(--text); font-variant-numeric: tabular-nums; }

/* ============================================================
   Экспорт данных
   ============================================================ */

.export-list { margin-top: 18px; }
.export-list__items { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }

.export-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 13px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--bg-elev);
  font-size: 13.5px;
}

.export-item__state { color: var(--text-dim); }
.export-item__state--ready { color: #6ee7a8; }
.export-item__state--failed { color: #ff8f8f; }

.export-item__link {
  color: #9fb4ff;
  text-decoration: none;
  font-weight: 500;
}
.export-item__link:hover { text-decoration: underline; }

/* Выбор данных в модалке экспорта */
.modal__note {
  margin: -6px 0 14px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-dim);
}

.modal__hint {
  margin: 12px 0 0;
  font-size: 12.5px;
  color: var(--text-faint);
}

.exp-item {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 11px 13px;
  margin-bottom: 8px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--bg-elev);
  cursor: pointer;
  transition: border-color .14s ease;
}
.exp-item:hover { border-color: rgba(255, 255, 255, .16); }

.exp-item__check {
  width: 17px;
  height: 17px;
  margin-top: 2px;
  accent-color: #5b8cff;
  cursor: pointer;
  flex: 0 0 auto;
}

.exp-item__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.exp-item__name { font-size: 14.5px; color: var(--text); }
.exp-item__meta { font-size: 12.5px; color: var(--text-faint); }

/* ============================================================
   Плашка о заполненной памяти над полем ввода
   ============================================================ */

.storage-notice {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: min(100%, 780px);
  margin: 0 auto 12px;
  padding: 10px 16px;
  border: 1px solid rgba(255, 120, 120, .35);
  border-radius: 12px;
  background: rgba(255, 86, 86, .10);
  color: #ffb0b0;
  font-size: 13.5px;
  line-height: 1.4;
  text-align: center;
  animation: noticeIn .22s ease both;
}

.storage-notice.is-hidden { display: none; }
.storage-notice svg { width: 17px; height: 17px; flex: 0 0 17px; }

/* мягкое предупреждение, когда памяти много занято, но место есть */
.storage-notice.is-warn {
  border-color: rgba(255, 176, 114, .35);
  background: rgba(255, 176, 114, .10);
  color: #ffcf9e;
}

@keyframes noticeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

html[data-theme="light"] .storage-notice {
  background: rgba(255, 86, 86, .08);
  color: #b4362f;
}
html[data-theme="light"] .storage-notice.is-warn {
  background: rgba(255, 158, 74, .10);
  color: #9a5a12;
}
html[data-theme="light"] .mem-legend,
html[data-theme="light"] .export-item,
html[data-theme="light"] .exp-item {
  background: #fff;
}

/* ── Модалка профиля ── */
#profileModal .modal__panel { width: min(100%, 460px); }