/* ============================================
   Iris Chat — styles.css
   iris.whisoul.ru
   Palette: Cream + Sage + Lavender
   Fonts: Outfit (body) · Montserrat (display) · Lora (Iris)
   ============================================ */

/* === VARIABLES === */
:root {
  --cream: #F0EFE9;
  --oat: #DDD5C2;
  --oat-soft: #E6DFD1;
  --sage: #8FAF8B;
  --sage-deep: #7A9B76;
  --sage-pale: #D4E4D2;
  --sage-ghost: #E6F0E4;
  --graphite: #2A2B26;
  --graphite-soft: rgba(42,43,38,0.5);
  --graphite-faint: rgba(42,43,38,0.08);
  --white: #FFFFFF;
  --lavender: #8B7DB5;
  --lavender-soft: #A899BF;
  --lavender-pale: #D5CDE6;
  --lavender-ghost: #ECE6F5;
  --font-display: 'Montserrat', sans-serif;
  --font-body: 'Outfit', sans-serif;
  --font-iris: 'Lora', Georgia, serif;
}

/* ============================================
   ТЕМА: Воздушная WhiSoul (Air)
   ============================================ */
[data-theme="air"] {
  --cream: #FCFAF8;
  --oat: #E8E1DB;
  --oat-soft: #F2EDE8;
  --sage: #8FB5F0;
  --sage-deep: #6F9EDE;
  --sage-pale: #C8DEFF;
  --sage-ghost: #EEF5FF;
  --graphite: #2F3A45;
  --graphite-soft: rgba(47,58,69,0.5);
  --graphite-faint: rgba(47,58,69,0.08);
  --white: #FFFFFF;
  --lavender: #A9C9FF;
  --lavender-soft: #BFCFFF;
  --lavender-pale: #DCEBFF;
  --lavender-ghost: #DCEBFF;
  --iris-icon-stroke: #8FB5F0;
  --header-bg: rgba(255, 253, 251, 0.92);
  --header-border: #E8E1DB;
}

[data-theme="air"] .header-logo svg,
[data-theme="air"] .sb-header svg,
[data-theme="air"] .sidebar .sb-header svg {
  stroke: #8FB5F0;
}

[data-theme="air"] .app-header {
  background: rgba(255, 253, 251, 0.92);
  border-bottom-color: #E8E1DB;
}

/* ============================================
   ТЕМА: Тёплая WhiSoul (Warm)
   Слоновая кость · Пудровая роза · Тёплая глина · Мокко
   ============================================ */
[data-theme="warm"] {
  --cream: #FDFBF7;
  --oat: #EDE5DC;
  --oat-soft: #F4F0EB;
  --sage: #D8A48F;
  --sage-deep: #C08870;
  --sage-pale: #F0D5CB;
  --sage-ghost: #FAF0EC;
  --graphite: #4A3B32;
  --graphite-soft: rgba(74,59,50,0.5);
  --graphite-faint: rgba(74,59,50,0.08);
  --white: #FDFBF7;
  --lavender: #D8A48F;
  --lavender-soft: #E0B8A8;
  --lavender-pale: #F4DDD6;
  --lavender-ghost: #FAF0EC;
}

[data-theme="warm"] .header-logo svg,
[data-theme="warm"] .sb-header svg,
[data-theme="warm"] .sidebar .sb-header svg {
  stroke: #D8A48F;
}

[data-theme="warm"] .app-header {
  background: rgba(253, 251, 247, 0.92);
  border-bottom-color: #EDE5DC;
}

[data-theme="warm"] .send-btn { background: #D8A48F; }
[data-theme="warm"] .send-btn:hover { background: #C08870; }

[data-theme="warm"] .flow-btn-primary { background: #D8A48F; }
[data-theme="warm"] .flow-btn-primary:hover { background: #C08870; }

[data-theme="warm"] .sb-item.active {
  background: #FAF0EC;
  color: #D8A48F;
}

[data-theme="warm"] .status-dot { background: #D8A48F; }
[data-theme="warm"] .sb-footer .sb-item { color: #D8A48F; }

/* ============================================
   ТЕМА: Soft Air
   ============================================ */
[data-theme="soft-air"] {
  --cream: #F3EFEA;
  --oat: #E8DDCF;
  --oat-soft: #F5EBDD;
  --sage: #84BEDA;
  --sage-deep: #6FA9C8;
  --sage-pale: #9FD2EA;
  --sage-ghost: #D6EEF7;
  --graphite: #6F473A;
  --graphite-soft: rgba(111,71,58,0.5);
  --graphite-faint: rgba(111,71,58,0.08);
  --white: #FFFFFF;
  --lavender: #84BEDA;
  --lavender-soft: #9FD2EA;
  --lavender-pale: #B8E0F0;
  --lavender-ghost: #D6EEF7;
}

[data-theme="soft-air"] .header-logo svg,
[data-theme="soft-air"] .sb-header svg,
[data-theme="soft-air"] .sidebar .sb-header svg {
  stroke: #84BEDA;
}

/* === RESET === */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html, body {
  height: 100%;
  min-height: 100dvh;
}

body {
  font-family: var(--font-body);
  background: var(--cream);
  color: var(--graphite);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}
button { font-family: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }
input, textarea { font-family: inherit; }

/* === ANIMATIONS === */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes pulse {
  0%, 100% { opacity: 0.4; }
  50%       { opacity: 1; }
}
@keyframes breathe {
  0%, 100% { transform: scale(0.7); opacity: 0.4; }
  50%      { transform: scale(1.15); opacity: 1; }
}
@keyframes thinkPulse {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 1; }
}
@keyframes modalSlide {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes highlightPulse {
  0%, 100% { box-shadow: 0 0 0 3px var(--lavender-pale), 0 4px 16px rgba(139,125,181,0.10); }
  50%       { box-shadow: 0 0 0 5px var(--lavender-pale), 0 4px 20px rgba(139,125,181,0.25); }
}

/* ============================================
   LAYOUT
   ============================================ */
.app {
  display: flex;
  flex: 1;
  min-height: 0;
  position: relative;
  overflow: hidden;
}
.app-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  position: relative;
  overflow: hidden;
  min-height: 0;
}

.app-body {
  flex: 1;
  display: flex;
  flex-direction: row;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

/* ============================================
   SIDEBAR
   ============================================ */
.sidebar {
  width: 240px;
  background: var(--white);
  border-right: 1px solid var(--oat);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  /* Desktop: always visible, part of flow */
  position: relative;
  transform: none;
  z-index: auto;
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
}

/* Десктоп: скрытый sidebar */
@media (min-width: 900px) {
  .sidebar.collapsed {
    width: 0;
    opacity: 0;
    overflow: hidden;
    border-right: none;
  }
   .flow-btn-secondary { white-space: nowrap; }
}

/* Кнопка-стрелка toggle на десктопе */
.sidebar-toggle-btn {
  display: none;
}
@media (min-width: 900px) {
  .sidebar-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 50%;
    left: 240px;
    transform: translateY(-50%);
    width: 20px;
    height: 48px;
    background: var(--white);
    border: 1px solid var(--oat);
    border-left: none;
    border-radius: 0 8px 8px 0;
    cursor: pointer;
    z-index: 10;
    transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    color: var(--graphite-soft);
    font-size: 12px;
    box-shadow: 2px 0 6px rgba(0,0,0,0.06);
  }
  .sidebar-toggle-btn:hover {
    color: var(--lavender);
    background: var(--lavender-ghost);
  }
  .sidebar-toggle-btn.collapsed {
    left: 0;
  }
}

/* Mobile: slide-in overlay */
@media (max-width: 899px) {
  .sidebar {
    width: 260px;
    position: fixed;
    top: 0; left: 0; bottom: 0;
    z-index: 80;
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .sidebar.open { transform: translateX(0); }
}

.sidebar-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(42, 43, 38, 0.3);
  z-index: 79;
  display: none;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
/* Backdrop only relevant on mobile */
@media (max-width: 899px) {
  .sidebar-backdrop.open { display: block; }
  .app-body {
    flex-direction: column; /* Ставим чат и нижнее меню друг под друга */
  }
}

.sb-header {
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--oat);
}
.sb-header svg { width: 24px; height: 24px; flex-shrink: 0; }
.sb-brand {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  color: var(--graphite);
}
.sb-close {
  background: none;
  border: none;
  font-size: 20px;
  color: var(--graphite-soft);
  cursor: pointer;
  margin-left: auto;
  padding: 4px 6px;
  line-height: 1;
  transition: color 0.2s;
}
.sb-close:hover { color: var(--graphite); }

.sb-nav {
  flex: 1;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
}
.sb-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-radius: 12px;
  font-size: 14px;
  color: var(--graphite);
  cursor: pointer;
  transition: all 0.15s;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  font-family: var(--font-body);
}
.sb-item:hover { background: var(--oat-soft); }
.sb-item.active {
  background: var(--lavender-ghost);
  color: var(--lavender);
  font-weight: 500;
}
.sb-item .sb-icon { font-size: 18px; width: 24px; text-align: center; }
.sb-item .sb-label { flex: 1; }
.sb-item .sb-badge {
  font-size: 10px;
  background: var(--sage);
  color: white;
  padding: 2px 7px;
  border-radius: 100px;
  font-weight: 600;
}
.sb-item.future { opacity: 0.35; pointer-events: none; }
.sb-item.future .sb-badge { background: var(--oat); color: var(--graphite-soft); }

.sb-divider { height: 1px; background: var(--oat); margin: 8px 14px; }

.sb-footer { padding: 12px 14px; border-top: 1px solid var(--oat); }
.sb-footer .sb-item { color: var(--graphite-soft); font-size: 13px; }

/* ============================================
   APP HEADER
   ============================================ */
.app-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px;
  border-bottom: 1px solid var(--oat);
  background: rgba(255, 253, 251, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  position: sticky;
  top: 0;
  z-index: 50;
  flex-shrink: 0;
}
.header-left { display: flex; align-items: center; gap: 12px; }

.burger-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  -webkit-tap-highlight-color: transparent;
}
.burger-btn span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--graphite);
  border-radius: 1px;
  transition: all 0.3s;
}

.header-logo { display: flex; align-items: center; gap: 8px; }
.header-logo svg { width: 22px; height: 22px; }
.header-logo .name {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--graphite);
}

.header-status {
  font-size: 10px;
  color: var(--lavender);
  display: flex;
  align-items: center;
  gap: 4px;
}
.status-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--lavender);
  animation: pulse 2s ease-in-out infinite;
}
.status-dot.offline { background: var(--graphite-soft); animation: none; }

.header-right { display: flex; align-items: center; gap: 6px; }

.header-btn {
  background: none;
  border: 1px solid var(--oat);
  border-radius: 10px;
  padding: 7px 12px;
  font-size: 12px;
  color: var(--graphite);
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-body);
}
.header-btn:hover { background: var(--white); border-color: var(--sage-pale); }

/* ============================================
   CHAT AREA & MESSAGES
   ============================================ */
.chat-area {
  flex: 1;
  overflow-y: scroll;;
  display: flex;
  flex-direction: column;
  scroll-behavior: smooth;
}
.chat-area::-webkit-scrollbar { width: 4px; }
.chat-area::-webkit-scrollbar-track { background: transparent; }
.chat-area::-webkit-scrollbar-thumb { background: var(--oat); border-radius: 2px; }

.messages {
  flex: 1;
  padding: 24px 40px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  margin: 0 auto;
  overflow-x: hidden;
  box-sizing: border-box;
}

.messages > * {
  max-width: 100%;
  box-sizing: border-box;
}

.msg-date {
  text-align: center;
  font-size: 11px;
  color: var(--graphite-soft);
  padding: 12px 0 8px;
}

/* User message — дневниковая запись */
.diary-user {
  font-size: 15.5px;
  color: var(--graphite);
  line-height: 1.65;
  padding: 8px 0 8px 16px;
  border-left: 2.5px solid var(--oat);
  margin-bottom: 4px;
  animation: fadeUp 0.3s ease both;
}

/* Iris message */
.diary-iris {
  font-family: var(--font-iris);
  font-size: 15.5px;
  color: var(--graphite);
  line-height: 1.7;
  font-style: normal;
  padding: 14px 18px;
  margin: 4px 0 8px;
  background: var(--lavender-ghost);
  border-radius: 14px;
  animation: fadeUp 0.3s ease both;
}
.diary-iris .sig {
  display: block;
  font-style: normal;
  font-size: 10px;
  color: var(--lavender);
  margin-top: 8px;
  font-family: var(--font-body);
  font-weight: 500;
}

/* Practice step (sage, no signature) */
.diary-practice {
  font-family: var(--font-iris);
  font-size: 14.5px;
  color: var(--graphite);
  line-height: 1.7;
  font-style: normal;
  padding: 14px 18px;
  margin: 4px 0 8px;
  background: var(--lavender-ghost);
  border-left: 3px solid var(--lavender-pale);
  border-radius: 0 14px 14px 0;
  animation: fadeUp 0.3s ease both;
  max-width: 78%;
  box-sizing: border-box;
}

.diary-iris.diary-success {
    background: linear-gradient(135deg, #fdf6e3, #faebd7) !important;
    border-left: none !important;
}
.diary-iris b, .diary-iris strong { font-style: normal; font-weight: 600; }

/* System message */
.msg-system {
  text-align: center;
  font-size: 12px;
  color: var(--graphite-soft);
  padding: 8px 0;
  animation: fadeUp 0.3s ease both;
  width: 100%;
  align-self: center;
}

.sb-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background-color: var(--red);
    color: white;
    font-size: 10px;
    font-weight: bold;
    min-width: 16px;
    height: 16px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    border: 2px solid var(--white);
}

/* ============================================
   THINKING INDICATOR
   ============================================ */
.thinking {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  background: var(--lavender-ghost);
  border-radius: 14px;
  margin: 4px 0 8px;
  animation: fadeUp 0.3s ease both;
  max-width: 78%;
}
.breath-dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  flex-shrink: 0;
  background: radial-gradient(circle, var(--lavender-pale) 30%, var(--lavender) 100%);
  animation: breathe 4s ease-in-out infinite;
}
.thinking-text {
  font-family: var(--font-iris);
  font-size: 15px;
  color: var(--graphite);
  font-style: italic;
  animation: thinkPulse 2s ease-in-out infinite;
}

/* ============================================
   FLOW BUTTONS
   ============================================ */
.flow-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 8px 0 4px;
  animation: fadeUp 0.3s ease both;
  width: 100%;
}

.flow-btn-primary {
  background: var(--sage);
  color: white;
  border: none;
  padding: 14px 24px;
  border-radius: 14px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.25s;
  text-align: center;
  width: 100%;
}
.flow-btn-primary:hover {
  background: var(--sage-deep);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(143, 175, 139, 0.25);
}
.flow-btn-primary:active { transform: scale(0.98); }

.flow-btn-row {
  display: flex;
  gap: 8px;
}
.flow-btn-secondary {
  flex: 1;
  background: var(--white);
  color: var(--graphite);
  border: 1.5px solid var(--oat);
  padding: 11px 16px;
  border-radius: 12px;
  font-family: var(--font-body);
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
}
.flow-btn-secondary:hover {
  border-color: var(--sage);
  background: var(--sage-ghost);
}
.flow-btn-secondary:active { transform: scale(0.98); }

/* ============================================
   PRACTICE CARD
   ============================================ */
.practice-card {
  background: var(--white);
  border: 1.5px solid var(--sage-pale);
  border-radius: 16px;
  max-width: 78%;
  padding: 20px;
  margin: 8px 0;
  animation: fadeUp 0.3s ease both;
}
.practice-card.highlight-active {
  border-color: var(--lavender);
  box-shadow: 0 0 0 3px var(--lavender-pale), 0 4px 16px rgba(139, 125, 181, 0.15);
  animation: highlightPulse 2s ease-in-out infinite;
}
.practice-card .p-emoji { font-size: 24px; margin-bottom: 8px; }
.practice-card .p-title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  color: var(--graphite);
  margin-bottom: 4px;
}
.practice-card .p-desc {
  font-size: 13px;
  color: var(--graphite-soft);
  line-height: 1.5;
  margin-bottom: 12px;
}
.practice-card .p-meta {
  display: flex;
  gap: 12px;
  font-size: 11px;
  color: var(--sage-deep);
  font-weight: 500;
}
.practice-card .p-bar {
  height: 4px;
  border-radius: 2px;
  background: var(--oat);
  margin-top: 12px;
  overflow: hidden;
}
.practice-card .p-bar-fill {
  height: 100%;
  border-radius: 2px;
  background: var(--sage);
  width: 0%;
  transition: width 0.4s ease;
  max-width: 100%;
}

/* ============================================
   INPUT BAR
   ============================================ */
.input-bar {
  padding: 12px 40px 16px;
  border-top: 1px solid var(--oat);
  background: var(--cream);
  flex-shrink: 0;
  width: 100%;
  box-sizing: border-box;
  scrollbar-gutter: stable;
}

.input-group { display: flex; align-items: center; gap: 10px; position: relative; }

.input-field {
  flex: 1;
  border: 1.5px solid var(--oat);
  border-radius: 14px;
  padding: 13px 18px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--graphite);
  background: var(--white);
  outline: none;
  transition: border-color 0.2s;
  resize: none;
  overflow: hidden;
  line-height: 1.5;
  max-height: 120px;
  overflow-y: auto;
}
.input-field:focus { border-color: var(--sage); }
.input-field::placeholder { color: var(--graphite); opacity: 0.3; }
.input-field.iris-typing {
  pointer-events: none;
  user-select: none;
  border-color: var(--lavender-pale);
}
.input-field.iris-typing::placeholder { color: transparent; }

/* Typing overlay inside input */
.typing-overlay {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  pointer-events: none;
  z-index: 2;
}
.typing-overlay .breath-dot { width: 12px; height: 12px; }
.typing-overlay-text {
  font-family: var(--font-iris);
  font-size: 13px;
  color: var(--lavender);
  font-style: italic;
  animation: thinkPulse 2s ease-in-out infinite;
}

.send-btn {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--sage);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  flex-shrink: 0;
}
.send-btn:hover { background: var(--sage-deep); transform: scale(1.04); }
.send-btn:active { transform: scale(0.96); }
.send-btn svg { width: 16px; height: 16px; fill: white; margin-left: 2px; }
.send-btn:disabled { opacity: 0.4; pointer-events: none; }

.mic-btn {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--graphite);
  opacity: 0.5;
  transition: all 0.2s;
}
.mic-btn:hover { opacity: 1; }
.mic-btn.recording { 
    color: white;
    opacity: 1; 
    background: #e55;
}
.mic-btn:disabled { opacity: 0.2; pointer-events: none; }
.mic-btn svg { width: 18px; height: 18px; stroke: currentColor; }
[data-theme="warm"] .mic-btn { color: #C08870; }

.chat-privacy-note {
  max-width: 78%;
  margin: 0;
  padding: 6px 0 10px;
  text-align: center;
  font-size: 12px;
  color: var(--graphite-soft);
  flex-shrink: 0;
}

@media (max-width: 899px) {
  .chat-privacy-note {
    max-width: 100%;
    margin: 0;
  }
}

/* ============================================
   SLIDE-IN PANELS (Archive, Pharmacy, Profile)
   ============================================ */
.slide-panel {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 420px;
  max-width: 100%;
  background: var(--white);
  border-left: 1px solid var(--oat);
  z-index: 90;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  box-shadow: -8px 0 32px rgba(42, 43, 38, 0.06);
}
.slide-panel.open { transform: translateX(0); }

.slide-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(42, 43, 38, 0.2);
  z-index: 89;
  display: none;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.slide-backdrop.open { display: block; }

.sp-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 20px;
  border-bottom: 1px solid var(--oat);
  flex-shrink: 0;
}
.sp-header h3 {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  color: var(--graphite);
}
.sp-close {
  background: none;
  border: none;
  font-size: 22px;
  color: var(--graphite-soft);
  cursor: pointer;
  padding: 4px 8px;
  transition: color 0.2s;
}
.sp-close:hover { color: var(--graphite); }

.sp-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
}
#panel-profile .sp-body { background: var(--oat-soft); }
.sp-body::-webkit-scrollbar { width: 4px; }
.sp-body::-webkit-scrollbar-track { background: transparent; }
.sp-body::-webkit-scrollbar-thumb { background: var(--oat); border-radius: 2px; }

/* ============================================
   ARCHIVE ITEMS
   ============================================ */
.archive-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--oat);
  border-radius: 12px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: all 0.2s;
  background: var(--white);
}
.archive-item:hover {
  border-color: var(--lavender-pale);
  background: var(--lavender-ghost);
  transform: translateX(-2px);
}
.archive-date {
  font-size: 12px;
  color: var(--graphite-soft);
  font-family: monospace;
  min-width: 40px;
}
.archive-title {
  flex: 1;
  font-size: 14px;
  color: var(--graphite);
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.archive-arrow { color: var(--oat); font-size: 16px; }

.sp-pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  margin-top: 8px;
  border-top: 1px solid var(--oat);
}
.sp-pagination button {
  background: var(--sage-ghost);
  color: var(--graphite);
  border: 1px solid var(--oat);
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 12px;
  cursor: pointer;
  font-family: var(--font-body);
  transition: background 0.2s;
}
.sp-pagination button:hover { background: var(--sage-pale); }
.sp-pagination button:disabled { opacity: 0.4; cursor: not-allowed; }
.sp-pagination .count { font-size: 11px; color: var(--graphite-soft); }

/* Session detail card */
.session-detail-card {
  background: var(--cream);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 12px;
  border: 1px solid var(--oat);
  animation: fadeUp 0.3s ease both;
}
.detail-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--graphite-soft);
  margin-bottom: 5px;
  display: block;
  font-weight: 600;
}
.detail-text {
  color: var(--graphite);
  line-height: 1.6;
  margin-bottom: 16px;
  white-space: pre-wrap;
  font-size: 13.5px;
}
.detail-text.user-request {
  font-style: italic;
  opacity: 0.8;
  border-left: 2px solid var(--lavender-pale);
  padding-left: 10px;
}

/* ============================================
   PHARMACY CARDS
   ============================================ */
.pharm-card {
  background: var(--white);
  border: 1.5px solid var(--oat);
  border-radius: 14px;
  padding: 16px 18px;
  margin-bottom: 10px;
  transition: all 0.2s;
}
.pharm-card:hover { border-color: var(--sage-pale); }
.pharm-card.highlight-active {
  border-color: var(--lavender);
  box-shadow: 0 0 0 3px var(--lavender-pale), 0 4px 16px rgba(139, 125, 181, 0.15);
  animation: highlightPulse 2s ease-in-out infinite;
}

.pharm-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.pharm-title {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  color: var(--graphite);
  display: flex;
  align-items: center;
  gap: 6px;
}
.pharm-title .icon { font-size: 16px; }

/* iOS Toggle */
.toggle { position: relative; display: inline-block; width: 42px; height: 24px; }
.toggle input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: var(--oat);
  border-radius: 24px;
  transition: 0.3s;
}
.toggle-slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background: white;
  border-radius: 50%;
  transition: 0.3s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.toggle input:checked + .toggle-slider { background: var(--sage); }
.toggle input:checked + .toggle-slider:before { transform: translateX(18px); }
.toggle input:disabled + .toggle-slider { opacity: 0.5; cursor: not-allowed; }

.pharm-time {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--graphite-soft);
}
.pharm-time .time-icon { font-size: 14px; }

.time-picker { display: flex; align-items: center; gap: 2px; }
.time-btn {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 1px solid var(--oat);
  background: var(--white);
  color: var(--graphite);
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}
.time-btn:hover { background: var(--sage-ghost); border-color: var(--sage-pale); }
.time-val {
  font-family: monospace;
  font-size: 14px;
  font-weight: 600;
  color: var(--graphite);
  min-width: 28px;
  text-align: center;
}
.time-sep { color: var(--graphite-soft); font-weight: 600; }

.pharm-actions { display: flex; gap: 6px; margin-top: 10px; }
.pharm-btn {
  padding: 8px 14px;
  border-radius: 10px;
  font-size: 12px;
  font-family: var(--font-body);
  border: 1px solid var(--oat);
  background: var(--white);
  color: var(--graphite);
  cursor: pointer;
  transition: all 0.2s;
}
.pharm-btn:hover { border-color: var(--sage); background: var(--sage-ghost); }
.pharm-btn.primary { background: var(--sage); color: white; border-color: var(--sage); }
.pharm-btn.primary:hover { background: var(--sage-deep); }

/* ============================================
   LOGIN MODAL
   ============================================ */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(42, 43, 38, 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 100;
}
.modal-overlay.open { display: flex; }

.modal-card {
  background: var(--white);
  border-radius: 20px;
  padding: 32px;
  max-width: 400px;
  width: 90%;
  box-shadow: 0 16px 48px rgba(42, 43, 38, 0.12);
  text-align: center;
  animation: modalSlide 0.3s ease both;
}
.modal-card .modal-icon { margin-bottom: 16px; }
.modal-card .modal-icon svg { width: 40px; height: 40px; }
.modal-card h2 {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  color: var(--graphite);
  margin-bottom: 8px;
}
.modal-card p {
  font-size: 14px;
  color: var(--graphite-soft);
  margin-bottom: 24px;
  font-weight: 300;
  line-height: 1.5;
}

.oauth-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 13px;
  border-radius: 12px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
  margin-bottom: 8px;
  border: 1.5px solid var(--oat);
  color: var(--graphite);
  background: var(--white);
}
.oauth-btn:hover { border-color: var(--sage); background: var(--sage-ghost); }
.oauth-btn.yandex { background: #FFCC00; border-color: #FFCC00; color: #000; }
.oauth-btn.yandex:hover { background: #E6B800; }
.oauth-btn.mailru { background: #005FF9; border-color: #005FF9; color: white; }
.oauth-btn.mailru:hover { background: #004BD6; }

.otp-divider {
  text-align: center;
  margin: 8px 0;
  font-size: 12px;
  color: var(--graphite-soft);
}
.otp-divider a {
  color: var(--graphite-soft);
  text-decoration: underline;
  cursor: pointer;
  transition: color 0.2s;
}
.otp-divider a:hover { color: var(--graphite); }

.otp-form {
  display: none;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}
.otp-form.open { display: flex; }

.otp-input {
  width: 100%;
  padding: 12px 16px;
  border: 1.5px solid var(--oat);
  border-radius: 12px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--graphite);
  background: var(--white);
  outline: none;
  transition: border-color 0.2s;
}
.otp-input:focus { border-color: var(--sage); }
.otp-input::placeholder { color: var(--graphite); opacity: 0.35; }
.otp-input.code-input { text-align: center; letter-spacing: 6px; font-weight: 600; }

.otp-btn {
  width: 100%;
  padding: 13px;
  border-radius: 12px;
  border: none;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}
.otp-btn.request { background: var(--sage); color: white; }
.otp-btn.request:hover { background: var(--sage-deep); }
.otp-btn.verify { background: var(--lavender); color: white; }
.otp-btn.verify:hover { background: #7A6FA5; }

.login-error {
  font-size: 12px;
  text-align: center;
  margin-top: 8px;
  min-height: 18px;
}

/* ============================================
   REPORT MODAL
   ============================================ */
.report-card {
  background: var(--white);
  border-radius: 20px;
  padding: 28px;
  max-width: 420px;
  width: 90%;
  box-shadow: 0 16px 48px rgba(42, 43, 38, 0.12);
  animation: modalSlide 0.3s ease both;
  position: relative;
}
.report-card h3 {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  color: var(--graphite);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.report-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1.5px solid var(--oat);
  border-radius: 12px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 14px;
  color: var(--graphite);
}
.report-option:hover { border-color: var(--lavender-pale); background: var(--lavender-ghost); }
.report-option.selected { border-color: var(--lavender); background: var(--lavender-ghost); }
.report-option .ro-icon { font-size: 16px; }

.report-textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--oat);
  border-radius: 12px;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--graphite);
  background: var(--white);
  outline: none;
  min-height: 80px;
  resize: vertical;
  margin: 8px 0 16px;
  transition: border-color 0.2s;
}
.report-textarea:focus { border-color: var(--lavender); }
.report-textarea::placeholder { color: var(--graphite); opacity: 0.3; }

.report-submit {
  width: 100%;
  padding: 14px;
  border-radius: 12px;
  background: var(--sage);
  color: white;
  border: none;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}
.report-submit:hover { background: var(--sage-deep); }

/* ============================================
   NAME MODAL (первый вход)
   ============================================ */
.name-modal-card {
  background: var(--white);
  border-radius: 20px;
  padding: 32px;
  max-width: 380px;
  width: 90%;
  box-shadow: 0 16px 48px rgba(42, 43, 38, 0.12);
  text-align: center;
  animation: modalSlide 0.3s ease both;
}
.name-modal-card h3 {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  color: var(--graphite);
  margin-bottom: 8px;
}
.name-modal-card p { font-size: 14px; color: var(--graphite-soft); margin-bottom: 20px; }

/* ============================================
   PROFILE PANEL (inside slide-panel)
   ============================================ */
.profile-info-block {
  background: var(--cream);
  padding: 16px;
  border-radius: 12px;
  margin-bottom: 12px;
  border: 1px solid var(--oat);
}
.profile-info-block p { margin-bottom: 6px; font-size: 14px; line-height: 1.6; }
.profile-info-block b { font-weight: 600; }
.profile-info-block hr { border: none; border-top: 1px solid var(--oat); margin: 10px 0; }

.profile-btn-edit {
  width: 100%;
  padding: 12px;
  border: 1.5px solid var(--oat);
  border-radius: 12px;
  background: var(--white);
  color: var(--graphite);
  font-family: var(--font-body);
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
  margin-bottom: 8px;
}
.profile-btn-edit:hover { border-color: var(--sage); background: var(--sage-ghost); }

.profile-btn-delete {
  width: 100%;
  background: none;
  border: none;
  color: var(--graphite-soft);
  font-size: 12px;
  cursor: pointer;
  padding: 10px;
  font-family: var(--font-body);
  transition: opacity 0.2s;
}
.profile-btn-delete:hover { opacity: 0.7; }

/* Profile wizard options */
.profile-option-btn {
  display: block;
  width: 100%;
  padding: 12px 16px;
  margin-bottom: 8px;
  border: 1.5px solid var(--oat);
  border-radius: 12px;
  background: var(--white);
  color: var(--graphite);
  font-family: var(--font-body);
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
  text-align: left;
}
.profile-option-btn:hover { border-color: var(--sage); background: var(--sage-ghost); }

/* ============================================
   DEBUG PANEL
   ============================================ */
.debug-panel {
  width: 380px;
  background: #0F172A;
  padding: 20px;
  overflow-y: auto;
  font-family: 'Courier New', monospace;
  font-size: 12px;
  color: #4ADE80;
  display: none;
  border-left: 1px solid #334155;
  flex-shrink: 0;
}
.debug-panel.active { display: block; }
.debug-panel h3 { color: #93C5FD; margin-bottom: 8px; font-size: 12px; }
.debug-panel hr { border-color: #334155; margin: 16px 0; }
.debug-panel pre { white-space: pre-wrap; word-wrap: break-word; margin: 0; }

@media (min-width: 900px) {
  .debug-panel.active { display: block; }
}

/* ============================================
   DESKTOP (≥ 900px) — sidebar always visible
   ============================================ */
@media (min-width: 900px) {
  #burger-btn { display: none; }
  .sb-close { display: none; }
  .app-header { padding: 12px 32px; }
  .messages { padding: 28px 48px; }
  .input-bar { padding: 12px 48px 16px; }
  .input-group { max-width: 78%; }
  .diary-user { max-width: 68%; }
  .diary-iris { max-width: 78%; }
  #tests-content .diary-iris { max-width: 78%; }
  .tests-menu { max-width: 78%; }
  .flow-actions {
    flex-direction: row;
    max-width: 620px;
    margin-left: 0;
  }
  .flow-btn-row {
    flex-direction: row;
    flex: 1;
  }
  .flow-btn-primary {
    flex: 1;
  }
}

/* ============================================
   MOBILE (≤ 899px)
   ============================================ */
@media (max-width: 899px) {
  .app-header { padding: 10px 14px; }
  .header-btn .lbl { display: none; }
  .messages { padding: 16px 16px; }
  .input-bar { padding: 10px 16px 14px; }
  .input-field { padding: 12px 14px; font-size: 13px; }
  .diary-user, .diary-iris { font-size: 15px; }
  .slide-panel { width: 100%; }
  .flow-btn-row { flex-direction: column; }
  .flow-btn-secondary { flex: unset; }
  .diary-practice, .practice-card { max-width: 100%; }
  .burger-btn { display: none !important; }
  
  #tests-content { padding: 16px !important; }
  #tests-content .diary-iris { max-width: 100% !important; }
  
  #iris-toast {
    width: calc(100vw - 24px);
    max-width: 420px;
    border-radius: 16px;
    text-align: center;

  }
  
  /* Сайдбар */
  .sb-nav { padding: 4px 8px; gap: 0; }
  .sb-item { font-size: 16px; padding: 10px 14px; gap: 14px; }
  .sb-item .sb-icon { font-size: 20px; width: 26px; }
  .sb-divider { margin: 3px 10px; }
}

/* ============================================
   UPDATE TOAST (PWA обновление)
   Светлая нейтральная плашка, подстраивается под тему
   ============================================ */
.update-toast {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--white);
    color: var(--graphite);
    border: 1.5px solid var(--lavender-pale);
    padding: 14px 20px;
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(139, 125, 181, 0.18);
    z-index: 9999;
    max-width: 90%;
    animation: toastSlideUp 0.4s ease-out;
    font-family: var(--font-display);
    font-size: 14px;
}

.update-toast .update-content {
    display: flex;
    align-items: center;
    gap: 16px;
}

.update-toast .update-btn {
    background: var(--lavender);
    color: var(--cream);
    border: none;
    padding: 8px 16px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    font-size: 13px;
    transition: background 0.2s, transform 0.1s;
    font-family: inherit;
}

.update-toast .update-btn:hover {
    background: var(--lavender-soft);
}

.update-toast .update-btn:active {
    transform: scale(0.96);
}

@keyframes toastSlideUp {
    from {
        opacity: 0;
        transform: translate(-50%, 20px);
    }
    to {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}
/* ============================================
   SAFE AREA (notch)
   ============================================ */
@supports (padding: env(safe-area-inset-bottom)) {
  @media (max-width: 899px) {
    .bottom-nav { padding-bottom: max(10px, env(safe-area-inset-bottom)); }
  }
  @media (min-width: 900px) {
    .input-bar { padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
  }
}

/* ============================================
   REDUCED MOTION
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  .diary-user, .diary-iris, .flow-actions,
  .thinking, .practice-card { animation: none; }
  .breath-dot { animation: none; opacity: 0.7; }
  .thinking-text { animation: none; opacity: 0.7; }
  .status-dot { animation: none; }
}
/* ============================================
   ONBOARDING TOUR
   ============================================ */

/* Overlay — блюр + затемнение */
.onboarding-overlay {
  position: fixed;
  inset: 0;
  background: rgba(42, 43, 38, 0.35);
  z-index: 900;
  animation: ob-fade-in 0.25s ease;
}

/* Подсвеченный элемент */
.onboarding-highlight {
  position: relative;
  z-index: 901 !important;
  box-shadow: 0 0 0 4px var(--lavender-pale), 0 0 0 6px var(--lavender);
  border-radius: 10px;
  pointer-events: none;
}

/* Tooltip карточка */
.onboarding-tooltip {
  position: fixed;
  z-index: 902;
  background: var(--white);
  border: 1.5px solid var(--lavender-pale);
  border-radius: 14px;
  padding: 14px 16px 12px;
  box-shadow: 0 8px 24px rgba(139, 125, 181, 0.18);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: auto;
}
.onboarding-tooltip.visible {
  opacity: 1;
  transform: translateY(0);
}

.onboarding-tooltip__text {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--graphite);
  line-height: 1.5;
  margin: 0 0 12px;
}

.onboarding-tooltip__btn {
  background: var(--sage);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 8px 16px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: opacity 0.15s;
  width: 100%;
}
.onboarding-tooltip__btn:hover { opacity: 0.88; }

/* CSS-стрелка */
.onboarding-tooltip::before {
  content: '';
  position: absolute;
  width: 0; height: 0;
}
.onboarding-tooltip[data-arrow="right"]::before {
  left: -8px; top: 50%; transform: translateY(-50%);
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-right: 8px solid var(--lavender-pale);
}
.onboarding-tooltip[data-arrow="top"]::before {
  bottom: -8px; left: 50%; transform: translateX(-50%);
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 8px solid var(--lavender-pale);
}
.onboarding-tooltip[data-arrow="bottom"]::before {
  top: -8px; left: 50%; transform: translateX(-50%);
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 8px solid var(--lavender-pale);
}

/* Кнопки-примеры тем — вертикальный столбик */
.onboarding-topic-row {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  align-items: stretch !important;
}
.onboarding-topic-row .flow-btn-primary,
.onboarding-topic-row .flow-btn-secondary {
  width: 100%;
  text-align: left;
}

@keyframes ob-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .onboarding-overlay, .onboarding-tooltip { animation: none; transition: none; }
}

/* ============================================
   ПСИХОЛОГИЧЕСКИЕ ТЕСТЫ
   ============================================ */

/* Виджет-напоминание в профиле */
.test-reminder-block {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--lavender-ghost);
  border: 1.5px solid var(--lavender-pale);
  border-radius: 14px;
  padding: 14px 16px;
  position: relative;
}
.test-reminder-icon { font-size: 24px; flex-shrink: 0; }
.test-reminder-text { flex: 1; }
.test-reminder-title {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  color: var(--graphite);
  margin-bottom: 2px;
}
.test-reminder-sub { font-size: 12px; color: var(--graphite-soft); }
.test-reminder-close {
  background: none;
  border: none;
  font-size: 14px;
  color: var(--graphite-soft);
  cursor: pointer;
  padding: 4px;
  flex-shrink: 0;
  align-self: flex-start;
}

/* Список тестов */
.tests-menu { display: flex; flex-direction: column; gap: 10px; margin: 8px 0; }

.test-header {
  max-width: 78%;
}

@media (max-width: 899px) {
  .tests-menu { max-width: 100%; }
  .test-question-card { max-width: 100% !important; width: 100% !important; }
  .test-result-card { max-width: 100% !important; width: 100% !important; }
}

/* Mobile tests */
@media (max-width: 899px) {
  #tests-content { padding: 16px !important; }
  #tests-content .diary-iris { max-width: 100% !important; }
}
.test-card {
  background: var(--white); border: 1.5px solid var(--oat);
  border-radius: 14px; padding: 14px 16px; cursor: pointer; transition: all 0.2s;
  animation: fadeUp 0.3s ease both;
}
.test-card:hover { border-color: var(--sage); background: var(--sage-ghost); }
.test-card-title {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  color: var(--graphite);
  margin-bottom: 3px;
}
.test-card-meta { font-size: 12px; color: var(--graphite-soft); margin-bottom: 6px; }
.test-card-desc { font-size: 13px; color: var(--graphite); line-height: 1.5; }

/* Карточка вопроса */
.test-question-card {
  background: var(--white);
  border: 1.5px solid var(--oat);
  border-radius: 16px;
  padding: 18px 16px;
  margin: 8px 0;
  max-width: 78%;
  animation: fadeUp 0.3s ease both;
}
.test-progress-bar {
  height: 4px;
  background: var(--oat);
  border-radius: 2px;
  margin-bottom: 14px;
  overflow: hidden;
}
.test-progress-fill {
  height: 100%;
  background: var(--sage);
  border-radius: 2px;
  transition: width 0.3s ease;
}
.test-counter { font-size: 11px; color: var(--graphite-soft); margin-bottom: 10px; }
.test-question-text {
  font-size: 15px;
  font-weight: 400;
  color: var(--graphite);
  line-height: 1.6;
  margin-bottom: 16px;
  font-family: var(--font-iris);
  padding: 12px 14px;
  background: var(--oat-soft);
  border-radius: 10px;
}
.test-options { display: flex; flex-direction: column; gap: 8px; }
.test-option-btn {
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid var(--oat);
  border-radius: 12px;
  background: var(--white);
  color: var(--graphite);
  font-family: var(--font-body);
  font-size: 13px;
  cursor: pointer;
  text-align: left;
  transition: all 0.15s;
}
.test-option-btn:hover:not(:disabled) { border-color: var(--sage); background: var(--sage-ghost); }
.test-option-btn:disabled { opacity: 0.5; cursor: default; }
.test-option-selected { border-color: var(--sage) !important; background: var(--sage-pale) !important; opacity: 1 !important; }

/* Результат теста */
.test-result-card {
  background: var(--white);
  border: 1.5px solid var(--oat);
  border-radius: 16px;
  padding: 20px 16px;
  margin: 8px 0;
  max-width: 78%; /* Добавили это ограничение */
}
.test-result-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.test-result-name { font-size: 13px; color: var(--graphite-soft); }
.test-result-score { font-family: var(--font-display); font-size: 20px; font-weight: 700; }
.test-result-level {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 10px;
}
.test-result-message {
  font-size: 14px;
  color: var(--graphite);
  line-height: 1.6;
  margin-bottom: 12px;
  font-family: var(--font-iris);
}
.test-result-recommendations { margin-bottom: 12px; }
.test-rec-item { font-size: 13px; color: var(--graphite-soft); padding: 3px 0; }
.test-crisis-contacts {
  background: #FFF3F3;
  border: 1px solid #FFCCCC;
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 13px;
  color: var(--graphite);
  line-height: 1.8;
}
.test-crisis-contacts a { color: #E53E3E; }

/* График динамики */
.test-chart-svg { width: 100%; height: auto; display: block; }
.test-chart-trend {
  font-size: 12px;
  color: var(--graphite-soft);
  text-align: center;
  margin-top: 6px;
}
.test-chart-empty {
  font-size: 13px;
  color: var(--graphite-soft);
  text-align: center;
  padding: 20px 0;
}
.test-context-line {
  font-size: 14px;
  font-weight: 600;
  color: var(--graphite);
  padding: 8px 4px;
  max-width: 78%;
}
.test-card-last {
  font-size: 12px;
  color: var(--graphite-soft);
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--oat);
}
.test-card-cooldown {
  font-size: 12px;
  color: var(--graphite-soft);
  margin-top: 4px;
}

.test-global-progress {
  width: 100%; 
  max-width: 78%;
  height: 6px !important;
  min-height: 6px !important;
  background: var(--oat);
  border-radius: 3px;
  margin: 4px 0 8px;
  overflow: hidden;
  display: block !important;
}

.test-inner-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.test-inner-tab {
  padding: 6px 12px;
  border: 1.5px solid var(--oat);
  border-radius: 20px;
  background: var(--white);
  color: var(--graphite-soft);
  font-family: var(--font-body);
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s;
}
.test-inner-tab.active {
  border-color: var(--sage);
  background: var(--sage-ghost);
  color: var(--graphite);
  font-weight: 500;
}

#tests-content {
  padding: 28px 48px;
}
#tests-content .diary-iris {
  margin: 0 0 16px 0;
}

/* === ТЕСТЫ: цветовые темы (фиксированные цвета, независимо от темы) === */
.test-card--gad7 {
  background: #F0EBF5;
  border-color: #D5CDE6;
}
.test-card--gad7:hover {
  background: #E6DFF2;
  border-color: #8B7DB5;
}

.test-card--phq9 {
  background: #E6F0E4;
  border-color: #D4E4D2;
}
.test-card--phq9:hover {
  background: #DCEAD8;
  border-color: #8FAF8B;
}

.test-card--pss10 {
  background: #FBEFE3;
  border-color: #F0DDC8;
}
.test-card--pss10:hover {
  background: #F5E4D0;
  border-color: #E8B59A;
}

.test-card--shs {
  background: #FBF4E0;
  border-color: #F0E1B8;
}
.test-card--shs:hover {
  background: #F5EBC8;
  border-color: #D4B272;
}

.archive-test-items { margin-top: 12px; }

.test-global-progress-fill {
  height: 6px !important;
  background: #8FAF8B !important;
  border-radius: 3px !important;
  transition: width 0.4s ease !important;
  display: block !important;
}
@media (max-width: 899px) {
  .test-global-progress { max-width: 100%; }
}

/* Вкладки архива */
.archive-tabs {
  display: flex;
  gap: 4px;
  padding: 0 16px 12px;
  border-bottom: 1px solid var(--oat);
}
.archive-tab {
  flex: 1;
  padding: 9px 8px;
  border: 1.5px solid var(--oat);
  border-radius: 10px;
  background: var(--white);
  color: var(--graphite-soft);
  font-family: var(--font-body);
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s;
}
.archive-tab.active {
  border-color: var(--sage);
  background: var(--sage-ghost);
  color: var(--graphite);
  font-weight: 500;
}

/* Тесты в архиве */
.archive-test-group { margin-bottom: 20px; }
.archive-test-group-title {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  color: var(--graphite-soft);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.archive-test-item {
  background: var(--white);
  border: 1.5px solid var(--oat);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 8px;
}
.archive-test-item-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}
.archive-test-score {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
}
.archive-test-level { font-size: 13px; font-weight: 500; }

.archive-test-chart {
  margin-bottom: 12px;
  background: var(--oat-soft);
  border-radius: 10px;
  padding: 8px;
  min-height: 40px;
}

#panel-archive .sp-header { margin-bottom: 0; }
#panel-archive .archive-tabs { margin-top: 12px; }

/* ============================================
   SVG ICONS IN SIDEBAR
   ============================================ */
.sb-item .sb-svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  stroke: var(--graphite-soft);
  transition: stroke 0.15s;
}
.sb-item.active .sb-svg { stroke: var(--lavender); }
.sb-item:hover .sb-svg { stroke: var(--graphite); }

/* ============================================
   BOTTOM NAV (mobile only)
   ============================================ */
.bottom-nav {
  display: none;
}

@media (max-width: 899px) {
  .bottom-nav {
    display: flex;
    justify-content: space-around;
    align-items: center;
    background: var(--white);
    border-top: 0.5px solid var(--oat);
    padding: 7px 0 max(10px, env(safe-area-inset-bottom));
    flex-shrink: 0;
    position: relative;
    z-index: 50;
  }
  .bn-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 10px;
    font-family: var(--font-body);
    color: var(--graphite-soft);
    transition: color 0.15s;
    min-width: 48px;
  }
  .bn-item svg {
    width: 22px;
    height: 22px;
    stroke: var(--graphite-soft);
    transition: stroke 0.15s;
  }
  .bn-item span {
    font-size: 10px;
    line-height: 1;
  }
  .bn-item.active svg { stroke: var(--lavender); }
  .bn-item.active span { color: var(--lavender); font-weight: 500; }
}

/* ============================================
   HOME AREA
   ============================================ */
.home-area {
  flex: 1;
  overflow-y: auto;
  padding: 24px 24px 16px;
  background: var(--oat-soft);
}
@media (max-width: 899px) {
  .home-area {
    padding: 16px 14px 12px;
  }
}
#home-content {
  max-width: 960px;
  margin: 0 auto;
}

/* ============================================
   HOME PAGE COMPONENTS
   ============================================ */
.home-greeting { margin-bottom: 20px; }
.home-greeting h1 { font-family: var(--font-display); font-size: 22px; font-weight: 600; margin-bottom: 4px; }
.home-greeting p { font-size: 14px; color: var(--graphite-soft); }

.home-hero {
  background: linear-gradient(135deg, var(--sage) 0%, var(--lavender) 100%);
  border-radius: 14px;
  padding: 22px 20px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
}
.home-hero-text h2 { font-size: 17px; font-weight: 500; color: #fff; margin-bottom: 4px; }
.home-hero-text p { font-size: 12px; color: rgba(255,255,255,0.8); }
.home-hero-btn {
  background: #fff;
  color: var(--graphite);
  border: none;
  border-radius: 10px;
  padding: 11px 18px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  font-family: var(--font-body);
  white-space: nowrap;
  flex-shrink: 0;
}

.home-banner {
  border: 0.5px solid var(--sage-pale);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--sage-ghost);
}
.home-banner-title { font-size: 13px; font-weight: 500; color: var(--sage-deep); margin-bottom: 2px; }
.home-banner-sub { font-size: 11px; color: var(--graphite-soft); }
.home-banner-btn {
  font-size: 11px; color: var(--sage-deep);
  border: 0.5px solid var(--sage-pale); border-radius: 7px;
  padding: 6px 10px; background: none; cursor: pointer;
  font-family: var(--font-body); white-space: nowrap;
}
.home-banner-close { font-size: 18px; color: var(--graphite-soft); cursor: pointer; background: none; border: none; padding: 0 2px; }
.home-banner-text { flex: 1; }

.home-progress-banner {
  border: 0.5px solid var(--sage-pale);
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 14px;
  background: var(--sage-ghost);
  display: flex;
  align-items: center;
}
.home-pb-stat { text-align: center; flex: 1; }
.home-pb-num { font-size: 22px; font-weight: 600; color: var(--sage-deep); }
.home-pb-label { font-size: 10px; color: var(--graphite-soft); margin-top: 2px; }
.home-pb-div { width: 1px; height: 32px; background: var(--sage-pale); margin: 0 6px; }

.home-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }

@media (max-width: 600px) {
  .home-grid { grid-template-columns: 1fr; }
  .home-hero { flex-direction: column; align-items: flex-start; }
  .home-hero-btn { width: 100%; text-align: center; }
  .home-greeting h1 { font-size: 18px; }
  .home-mini-cards { gap: 6px; }
  .home-mini-card { flex: 0 0 calc(50% - 3px); min-width: calc(50% - 3px); }
}

.home-card {
  background: var(--white);
  border: 0.5px solid var(--oat);
  border-radius: 12px;
  padding: 14px 16px;
}
.home-card-hdr {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 12px;
}
.home-card-title { font-size: 13px; font-weight: 500; }
.home-card-count { font-size: 10px; color: var(--graphite-soft); margin-left: auto; }
.home-card-footer { text-align: center; padding-top: 8px; border-top: 0.5px solid var(--oat-soft); margin-top: 10px; }

.home-mini-cards { display: flex; flex-wrap: wrap; gap: 6px; }
.home-mini-card { flex: 0 0 calc(50% - 3px); background: var(--oat-soft); border-radius: 7px; padding: 8px 6px; text-align: center; cursor: pointer; box-sizing: border-box; min-height: 56px; }


.home-mc-t { font-size: 11px; color: var(--graphite-soft); margin-bottom: 2px; }
.home-mc-s { font-size: 9px; color: var(--graphite-soft); opacity: 0.7; }

.home-empty { text-align: center; padding: 12px 4px; }
.home-empty-icon {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--sage-ghost);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 8px;
}
.home-empty-t { font-size: 12px; color: var(--graphite-soft); margin-bottom: 3px; }
.home-empty-d { font-size: 11px; color: var(--graphite-soft); opacity: 0.7; line-height: 1.4; margin-bottom: 10px; }
.home-link { font-size: 11px; color: var(--sage-deep); background: none; border: none; cursor: pointer; font-family: var(--font-body); }

.home-result-row { margin-bottom: 10px; }
.home-result-top { display: flex; justify-content: space-between; font-size: 12px; color: var(--graphite-soft); margin-bottom: 3px; }
.home-result-top span:last-child { font-weight: 500; color: var(--graphite); }
.home-result-meta { font-size: 10px; color: var(--graphite-soft); margin-top: 3px; }
.home-pbar { height: 5px; background: var(--oat-soft); border-radius: 3px; overflow: hidden; }
.home-pbar-fill { height: 100%; border-radius: 3px; transition: width 0.5s; }

.home-footer { text-align: center; font-size: 11px; color: var(--graphite-soft); padding: 4px 0 8px; }

/* ============================================
   PROFILE PANEL COMPONENTS
   ============================================ */
.prof-header { display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.prof-avatar { width:44px; height:44px; border-radius:50%; background:var(--sage-ghost); display:flex; align-items:center; justify-content:center; font-size:17px; font-weight:600; color:var(--sage-deep); flex-shrink:0; }
.prof-name { font-family:var(--font-display); font-size:15px; font-weight:600; margin-bottom:2px; }
.prof-meta { font-size:12px; color:var(--graphite-soft); }
.prof-edit-btn { font-size:11px; color:var(--sage-deep); border:0.5px solid var(--sage-pale); border-radius:7px; padding:5px 10px; background:none; cursor:pointer; font-family:var(--font-body); margin-left:auto; flex-shrink:0; }

.prof-card { background:var(--white); border:none; border-radius:12px; padding:14px 16px; margin-bottom:16px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
.prof-card-hdr { display:flex; align-items:center; gap:7px; margin-bottom:12px; border-left:3px solid var(--sage); padding-left:8px; margin-left:-4px; }
.prof-card-title { font-size:13px; font-weight:500; }
.prof-card-badge { font-size:10px; color:#fff; background:var(--sage); border-radius:5px; padding:1px 7px; margin-left:auto; }

.prof-sub-box { background:var(--oat-soft); border-radius:8px; padding:10px 12px; margin-bottom:10px; }
.prof-sub-row { display:flex; justify-content:space-between; font-size:12px; margin-bottom:4px; color:var(--graphite-soft); }
.prof-sub-row:last-child { margin-bottom:0; }

.prof-s-row { display:flex; justify-content:space-between; align-items:center; padding:8px 0; }
.prof-s-row + .prof-s-row { border-top:0.5px solid var(--oat-soft); }
.prof-s-label { font-size:12px; color:var(--graphite); }
.prof-s-hint { font-size:10px; color:var(--graphite-soft); margin-top:1px; }

.prof-founder-badge { font-size:10px; color:var(--graphite-soft); background:var(--sage-ghost); border-radius:6px; padding:5px 10px; margin-top:8px; line-height:1.4; }

.prof-tariff-offer { text-align:center; background:var(--sage-ghost); border-color:var(--sage-pale); }
.prof-tariff-btn { background:var(--sage); color:#fff; border:none; border-radius:10px; padding:10px 20px; font-size:13px; font-weight:500; cursor:pointer; font-family:var(--font-body); width:100%; }

.prof-pbar-row { display:flex; justify-content:space-between; font-size:12px; color:var(--graphite-soft); margin-bottom:4px; }
.prof-pbar { height:5px; background:var(--oat-soft); border-radius:3px; overflow:hidden; margin-bottom:0; }
.prof-pbar-fill { height:100%; border-radius:3px; transition:width 0.5s; }

.prof-ticket { display:flex; align-items:center; gap:8px; padding:8px 0; border-bottom:0.5px solid var(--oat-soft); cursor:pointer; }
.prof-ticket:last-child { border-bottom:none; }
.prof-ticket-title { font-size:12px; color:var(--graphite); }
.prof-ticket-meta { font-size:10px; color:var(--graphite-soft); margin-top:1px; }

.prof-back-btn { background:none; border:none; color:var(--graphite-soft); font-size:12px; cursor:pointer; padding:0 0 12px 0; display:flex; align-items:center; gap:4px; font-family:var(--font-body); }

.prof-logout-btn { font-size:13px; color:var(--graphite-soft); background:none; border:0.5px solid var(--oat); border-radius:8px; padding:8px 20px; cursor:pointer; font-family:var(--font-body); }
.prof-delete-btn { font-size:11px; color:var(--oat); background:none; border:none; cursor:pointer; font-family:var(--font-body); }
.prof-delete-btn:hover { color:#ef4444; }


/* ============================================
   SVG ICONS IN SIDEBAR
   ============================================ */
.sb-item .sb-svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  stroke: var(--graphite-soft);
  transition: stroke 0.15s;
}
.sb-item.active .sb-svg { stroke: var(--lavender); }
.sb-item:hover .sb-svg { stroke: var(--graphite); }

/* ============================================
   BOTTOM NAV (mobile only)
   ============================================ */
.bottom-nav { display: none; }
@media (max-width: 899px) {
  .bottom-nav {
    display: flex;
    justify-content: space-around;
    align-items: center;
    background: var(--white);
    border-top: 0.5px solid var(--oat);
    padding: 7px 0 max(10px, env(safe-area-inset-bottom));
    flex-shrink: 0;
    position: relative;
    z-index: 50;
  }
  .bn-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 10px;
    font-family: var(--font-body);
    color: var(--graphite-soft);
    transition: color 0.15s;
    min-width: 48px;
  }
  .bn-item svg { width: 22px; height: 22px; stroke: var(--graphite-soft); transition: stroke 0.15s; }
  .bn-item span { font-size: 10px; line-height: 1; }
  .bn-item.active svg { stroke: var(--lavender); }
  .bn-item.active span { color: var(--lavender); font-weight: 500; }
  .app-body { flex-direction: column; }
}

/* ============================================
   HOME AREA
   ============================================ */
.home-area {
  flex: 1;
  overflow-y: auto;
  padding: 24px 24px 16px;
  background: var(--oat-soft);
}
@media (max-width: 899px) {
  .home-area { padding: 16px 14px 12px; }
}
#home-content { max-width: 960px; margin: 0 auto; }

/* ============================================
   HOME PAGE COMPONENTS
   ============================================ */
.home-greeting { margin-bottom: 20px; }
.home-greeting h1 { font-family: var(--font-display); font-size: 22px; font-weight: 600; margin-bottom: 4px; }
.home-greeting p { font-size: 14px; color: var(--graphite-soft); }
.home-hero {
  background: linear-gradient(135deg, var(--sage) 0%, var(--lavender) 100%);
  border-radius: 14px; padding: 22px 20px; margin-bottom: 12px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer;
}
.home-hero-text h2 { font-size: 17px; font-weight: 500; color: #fff; margin-bottom: 4px; }
.home-hero-text p { font-size: 12px; color: rgba(255,255,255,0.8); }
.home-hero-btn {
  background: #fff; color: var(--graphite); border: none; border-radius: 10px;
  padding: 11px 18px; font-size: 13px; font-weight: 500; cursor: pointer;
  font-family: var(--font-body); white-space: nowrap; flex-shrink: 0;
}
.home-banner {
  border: 0.5px solid var(--sage-pale); border-radius: 10px; padding: 12px 14px;
  margin-bottom: 14px; display: flex; align-items: center; gap: 10px; background: var(--sage-ghost);
}
.home-banner-title { font-size: 13px; font-weight: 500; color: var(--sage-deep); margin-bottom: 2px; }
.home-banner-sub { font-size: 11px; color: var(--graphite-soft); }
.home-banner-btn { font-size: 11px; color: var(--sage-deep); border: 0.5px solid var(--sage-pale); border-radius: 7px; padding: 6px 10px; background: none; cursor: pointer; font-family: var(--font-body); white-space: nowrap; }
.home-banner-close { font-size: 18px; color: var(--graphite-soft); cursor: pointer; background: none; border: none; padding: 0 2px; }
.home-banner-text { flex: 1; }
.home-progress-banner {
  border: 0.5px solid var(--sage-pale); border-radius: 10px; padding: 14px;
  margin-bottom: 14px; background: var(--sage-ghost); display: flex; align-items: center;
}
.home-pb-stat { text-align: center; flex: 1; }
.home-pb-num { font-size: 22px; font-weight: 600; color: var(--sage-deep); }
.home-pb-label { font-size: 10px; color: var(--graphite-soft); margin-top: 2px; }
.home-pb-div { width: 1px; height: 32px; background: var(--sage-pale); margin: 0 6px; }
.home-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
@media (max-width: 600px) {
  .home-grid { grid-template-columns: 1fr; }
  .home-hero { flex-direction: column; align-items: flex-start; }
  .home-hero-btn { width: 100%; text-align: center; }
  .home-greeting h1 { font-size: 18px; }
  .home-mini-card { flex: 0 0 calc(50% - 3px); min-width: calc(50% - 3px); }
}
.home-card { background: var(--white); border: 0.5px solid var(--oat); border-radius: 12px; padding: 14px 16px; }
.home-card-hdr { display: flex; align-items: center; gap: 7px; margin-bottom: 12px; }
.home-card-title { font-size: 13px; font-weight: 500; }
.home-card-count { font-size: 10px; color: var(--graphite-soft); margin-left: auto; }
.home-card-footer { text-align: center; padding-top: 8px; border-top: 0.5px solid var(--oat-soft); margin-top: 10px; }
.home-mini-cards { display: flex; flex-wrap: wrap; gap: 6px; }
.home-mini-card { flex: 0 0 calc(50% - 3px); background: var(--oat-soft); border-radius: 7px; padding: 8px 6px; text-align: center; cursor: pointer; box-sizing: border-box; min-height: 56px; }
.home-mc-t { font-size: 11px; color: var(--graphite-soft); margin-bottom: 2px; }
.home-mc-s { font-size: 9px; color: var(--graphite-soft); opacity: 0.7; }
.home-empty { text-align: center; padding: 12px 4px; }
.home-empty-icon { width: 40px; height: 40px; border-radius: 50%; background: var(--sage-ghost); display: flex; align-items: center; justify-content: center; margin: 0 auto 8px; }
.home-empty-t { font-size: 12px; color: var(--graphite-soft); margin-bottom: 3px; }
.home-empty-d { font-size: 11px; color: var(--graphite-soft); opacity: 0.7; line-height: 1.4; margin-bottom: 10px; }
.home-link { font-size: 11px; color: var(--sage-deep); background: none; border: none; cursor: pointer; font-family: var(--font-body); }
.home-result-row { margin-bottom: 10px; }
.home-result-top { display: flex; justify-content: space-between; font-size: 12px; color: var(--graphite-soft); margin-bottom: 3px; }
.home-result-top span:last-child { font-weight: 500; color: var(--graphite); }
.home-result-meta { font-size: 10px; color: var(--graphite-soft); margin-top: 3px; }
.home-pbar { height: 5px; background: var(--oat-soft); border-radius: 3px; overflow: hidden; }
.home-pbar-fill { height: 100%; border-radius: 3px; transition: width 0.5s; }
.home-footer { text-align: center; font-size: 11px; color: var(--graphite-soft); padding: 4px 0 8px; }

/* ============================================
   PROFILE PANEL COMPONENTS
   ============================================ */
.prof-header { display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.prof-avatar { width:44px; height:44px; border-radius:50%; background:var(--sage-ghost); display:flex; align-items:center; justify-content:center; font-size:17px; font-weight:600; color:var(--sage-deep); flex-shrink:0; }
.prof-name { font-family:var(--font-display); font-size:15px; font-weight:600; margin-bottom:2px; }
.prof-meta { font-size:12px; color:var(--graphite-soft); }
.prof-edit-btn { font-size:11px; color:var(--sage-deep); border:0.5px solid var(--sage-pale); border-radius:7px; padding:5px 10px; background:none; cursor:pointer; font-family:var(--font-body); margin-left:auto; flex-shrink:0; }
.prof-card { background:var(--white); border:none; border-radius:12px; padding:14px 16px; margin-bottom:16px; box-shadow:0 1px 4px rgba(0,0,0,0.06); }
.prof-card-hdr { display:flex; align-items:center; gap:7px; margin-bottom:12px; border-left:3px solid var(--sage); padding-left:8px; margin-left:-4px; }
.prof-card-title { font-size:13px; font-weight:500; }
.prof-card-badge { font-size:10px; color:#fff; background:var(--sage); border-radius:5px; padding:1px 7px; margin-left:auto; }
.prof-sub-box { background:var(--oat-soft); border-radius:8px; padding:10px 12px; margin-bottom:10px; }
.prof-sub-row { display:flex; justify-content:space-between; font-size:12px; margin-bottom:4px; color:var(--graphite-soft); }
.prof-sub-row:last-child { margin-bottom:0; }
.prof-s-row { display:flex; justify-content:space-between; align-items:center; padding:8px 0; }
.prof-s-row + .prof-s-row { border-top:0.5px solid var(--oat-soft); }
.prof-s-label { font-size:12px; color:var(--graphite); }
.prof-s-hint { font-size:10px; color:var(--graphite-soft); margin-top:1px; }
.prof-founder-badge { font-size:10px; color:var(--graphite-soft); background:var(--sage-ghost); border-radius:6px; padding:5px 10px; margin-top:8px; line-height:1.4; }
.prof-tariff-offer { text-align:center; background:var(--sage-ghost); border-color:var(--sage-pale); }
.prof-tariff-btn { background:var(--sage); color:#fff; border:none; border-radius:10px; padding:10px 20px; font-size:13px; font-weight:500; cursor:pointer; font-family:var(--font-body); width:100%; }
.prof-pbar-row { display:flex; justify-content:space-between; font-size:12px; color:var(--graphite-soft); margin-bottom:4px; }
.prof-pbar { height:5px; background:var(--oat-soft); border-radius:3px; overflow:hidden; }
.prof-pbar-fill { height:100%; border-radius:3px; transition:width 0.5s; }
.prof-ticket { display:flex; align-items:center; gap:8px; padding:8px 0; border-bottom:0.5px solid var(--oat-soft); cursor:pointer; }
.prof-ticket:last-child { border-bottom:none; }
.prof-ticket-title { font-size:12px; color:var(--graphite); }
.prof-ticket-meta { font-size:10px; color:var(--graphite-soft); margin-top:1px; }
.prof-back-btn { background:none; border:none; color:var(--graphite-soft); font-size:12px; cursor:pointer; padding:0 0 12px 0; display:flex; align-items:center; gap:4px; font-family:var(--font-body); }
.prof-logout-btn { font-size:13px; color:var(--graphite-soft); background:none; border:0.5px solid var(--oat); border-radius:8px; padding:8px 20px; cursor:pointer; font-family:var(--font-body); }
.prof-delete-btn { font-size:11px; color:var(--oat); background:none; border:none; cursor:pointer; font-family:var(--font-body); }
.prof-delete-btn:hover { color:#ef4444; }

/* Profile tabs */
.prof-tabs { display:flex; gap:6px; margin-bottom:16px; }
.prof-tab { flex:1; padding:9px 8px; border:1.5px solid var(--oat); border-radius:10px; background:var(--white); color:var(--graphite-soft); font-family:var(--font-body); font-size:13px; cursor:pointer; transition:all 0.2s; position:relative; white-space:nowrap; }
.prof-tab.active { border-color:var(--sage); background:var(--sage-ghost); color:var(--graphite); font-weight:500; }
.prof-tab-dot { position:absolute; top:6px; right:8px; width:7px; height:7px; background:var(--sage); border-radius:50%; }
.prof-ticket-card { display:flex; align-items:center; gap:10px; padding:11px 14px; background:var(--white); border:0.5px solid var(--oat); border-radius:10px; margin-bottom:8px; cursor:pointer; transition:all 0.15s; }
.prof-ticket-card:hover { border-color:var(--sage-pale); background:var(--sage-ghost); }

/* Panel profile background */
#panel-profile .sp-body { background: var(--oat-soft); }