/* Asistent Metoda Midlife — stiluri specifice aplicației */

.app-shell { max-width: 720px; margin: 0 auto; padding: 0 1rem 6rem; }

.app-hero { padding: 1.25rem 0 0.25rem; }
.app-hero h2 { margin-bottom: 0.25rem; }

/* Tab bar — fixed bottom on mobile, top-inline on wide screens */
.app-tabs {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 40;
  display: flex; justify-content: space-around;
  /* token, nu alb hard-codat — bara respectă toate cele 4 teme
     (tema „studio" are propria suprascriere în themes.css) */
  background: var(--card); backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
  padding: 0.35rem 0.25rem calc(0.35rem + env(safe-area-inset-bottom));
}
.app-tab {
  background: none; border: none; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 0.1rem;
  font: 600 0.7rem var(--font-body); color: var(--ink-faint);
  padding: 0.3rem 0.4rem; border-radius: 10px; min-width: 3.2rem;
}
.app-tab span.ico { font-size: 1.25rem; }
.app-tab.is-active { color: var(--plum-deep); background: var(--plum-tint); }

@media (min-width: 900px) {
  .app-tabs { position: sticky; top: 0; bottom: auto; border-top: none; border-bottom: 1px solid var(--line); }
  .app-shell { padding-bottom: 3rem; }
}

/* Action cards */
.action-card__row { display: grid; grid-template-columns: auto 1fr auto; gap: 1rem; align-items: center; }
.action-card__icon { font-size: 1.8rem; }
.action-card__check {
  width: 2.4rem; height: 2.4rem; border-radius: 50%;
  border: 2px solid var(--line); background: var(--card); cursor: pointer;
  font-size: 1.1rem; font-weight: 700; color: #fff;
  transition: background 0.15s, border-color 0.15s;
}
.action-card.is-done { opacity: 0.75; }
.action-card.is-done .action-card__check { background: var(--sage-deep); border-color: var(--sage-deep); }
.action-card.is-done h4 { text-decoration: line-through; text-decoration-color: var(--sage-deep); }

/* Range sliders */
input[type="range"] { width: 100%; accent-color: var(--plum); height: 2rem; }
.range-labels { display: flex; justify-content: space-between; font-size: 0.72rem; color: var(--ink-faint); }

/* Chat */
.chat-box {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 1rem; max-height: 55vh; min-height: 30vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: 0.75rem;
}
.chat-msg { max-width: 85%; padding: 0.7rem 1rem; border-radius: 14px; font-size: 0.92rem; line-height: 1.5; white-space: pre-wrap; }
.chat-msg--ai { background: var(--plum-tint); color: var(--ink); align-self: flex-start; border-bottom-left-radius: 4px; }
.chat-msg--user { background: var(--plum); color: #fff; align-self: flex-end; border-bottom-right-radius: 4px; }
/* Tema „studio": --plum e un mov deschis (#B58BE0) — alb pe el ar fi ilizibil.
   Un mov închis dedicat păstrează contrastul (app.css se încarcă după themes.css).
   În @media screen, ca și în themes.css: printul rămâne mereu pe tema implicită. */
@media screen {
  :root[data-theme="studio"] .chat-msg--user { background: #5C3F82; color: #fff; }
}
.chat-input { display: flex; gap: 0.5rem; margin-top: 0.75rem; }
.chat-input input { flex: 1; }

@media print {
  .app-tabs, .app-header-bar { display: none !important; }
}