/* =====================================================================
   Treeni — Agentti E: AI-valmentaja (#/coach), viikkoanalyysi, AI-asetukset.
   Vain tokeneita (tokens.css). Valmentajan aksentti = magenta.
   ===================================================================== */

/* ---------- orb (valmentajan avatar) ---------- */
.e-orb {
  --orb: 40px;
  flex: none; display: inline-grid; place-items: center;
  width: var(--orb); height: var(--orb); border-radius: 50%;
  color: var(--text);
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,.35), transparent 40%),
    conic-gradient(from 210deg, var(--magenta), var(--violet), var(--cyan), var(--magenta));
  box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 6px 22px -6px var(--magenta);
}
.e-orb .icon { --icon-size: calc(var(--orb) * .48); filter: drop-shadow(0 1px 2px rgba(0,0,0,.35)); }
.e-orb--sm { --orb: 30px; box-shadow: 0 0 0 1px rgba(255,255,255,.08); }
.e-orb--lg { --orb: 68px; animation: e-orb-breathe 4.5s var(--ease-in-out) infinite; }
@keyframes e-orb-breathe { 50% { box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 10px 36px -4px var(--magenta); transform: scale(1.03); } }

/* ---------- lukittu tila ---------- */
.e-locked { display: flex; flex-direction: column; gap: var(--sp-4); align-items: flex-start; }
.e-locked__art { position: relative; margin-bottom: var(--sp-1); }
.e-locked__lock {
  position: absolute; right: -6px; bottom: -4px; width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center; background: var(--surface-3); color: var(--text); border: 1px solid var(--line-strong);
}
.e-locked__title { margin-top: calc(-1 * var(--sp-1)); }
.e-locked .btn--lg { margin-top: var(--sp-1); }
.e-locked__how { margin-top: calc(-1 * var(--sp-1)); }
.e-feats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-3); width: 100%; }
.e-feats li { display: flex; align-items: center; gap: var(--sp-3); color: var(--text-2); font-size: var(--fs-sm); }
.e-feats .list-row__lead { width: 36px; height: 36px; flex: none; }
.e-privacy {
  display: flex; gap: var(--sp-3); align-items: flex-start; width: 100%;
  padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md);
  background: var(--surface-1); border: 1px solid var(--line);
  color: var(--text-muted); font-size: var(--fs-xs); line-height: var(--lh-body);
}
.e-privacy .icon { --icon-size: 16px; flex: none; margin-top: 1px; color: var(--cyan); }

/* ---------- chat-näkymä ---------- */
.e-coach { gap: var(--sp-3); padding-bottom: 0; }
.e-coach__head {
  position: sticky; top: 0; z-index: var(--z-sticky);
  display: flex; align-items: center; gap: var(--sp-2);
  margin: calc(-1 * (var(--safe-top) + var(--sp-4))) calc(-1 * var(--gutter)) 0;
  padding: calc(var(--safe-top) + var(--sp-3)) var(--gutter) var(--sp-3);
  background: var(--bg); box-shadow: 0 12px 14px -2px var(--bg);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.e-coach__titles { flex: 1; min-width: 0; text-align: center; }
.e-coach__titles .eyebrow { font-size: var(--fs-micro); justify-content: center; }
.e-coach__title { font-size: var(--fs-lg); font-weight: var(--fw-heavy); letter-spacing: -.02em; }
.e-head-spacer { width: var(--touch-min); flex: none; }

.e-chat { display: flex; flex-direction: column; gap: var(--sp-4); flex: 1; padding-bottom: var(--sp-4); }
.e-intro { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--sp-3); padding: var(--sp-6) var(--sp-2) var(--sp-2); }
.e-intro .t-dim { max-width: 32ch; }
.e-chips-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); width: 100%; margin-top: var(--sp-3); }
.e-chip--big {
  flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: var(--sp-2);
  min-height: 92px; padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md);
  text-align: left; white-space: normal; line-height: 1.3; font-size: var(--fs-sm);
  background: linear-gradient(180deg, var(--surface-2), var(--surface-1));
}
.e-chip--big:hover { border-color: rgba(255,61,154,.45); }
.e-chip__ic { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; background: var(--magenta-a10); color: #FF7DBA; }
.e-chip:disabled { opacity: .45; pointer-events: none; }

.e-msg { display: flex; gap: var(--sp-2); align-items: flex-end; max-width: 100%; animation: e-msg-in var(--dur-base) var(--ease-spring) both; }
@keyframes e-msg-in { from { opacity: 0; transform: translateY(8px) scale(.98); } }
.e-msg--user { justify-content: flex-end; }
.e-bubble {
  max-width: 84%; min-width: 0; padding: var(--sp-3) var(--sp-4);
  border-radius: 20px; font-size: var(--fs-md); line-height: var(--lh-body);
  overflow-wrap: anywhere;
}
.e-msg--assistant .e-bubble { background: var(--surface-2); border: 1px solid var(--line); border-bottom-left-radius: 6px; color: var(--text); }
.e-msg--user .e-bubble {
  background: linear-gradient(160deg, var(--lime), var(--lime-2));
  color: var(--text-on-accent); border-bottom-right-radius: 6px; font-weight: var(--fw-medium);
  box-shadow: 0 6px 20px -10px rgba(182,255,59,.6);
}
.e-msg--error .e-bubble { background: var(--orange-a10); border-color: rgba(255,138,61,.3); }
.e-bubble .e-bubble__body > * + * { margin-top: var(--sp-2); }
.e-bubble__body p { margin: 0; }
.e-bubble__body strong { font-weight: var(--fw-bold); color: var(--text); }
.e-msg--user .e-bubble__body strong { color: inherit; }
.e-bubble__meta { margin-top: var(--sp-2); font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--text-muted); letter-spacing: .04em; }
.e-md-list { margin: 0; padding-left: 1.2em; display: flex; flex-direction: column; gap: 4px; }
.e-md-list li::marker { color: var(--magenta); }
ol.e-md-list li::marker { font-family: var(--font-mono); font-size: .85em; }

.e-typing { display: inline-flex; gap: 5px; padding: 6px 2px; }
.e-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--text-muted); animation: e-dot 1.1s infinite ease-in-out; }
.e-typing i:nth-child(2) { animation-delay: .15s; }
.e-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes e-dot { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-4px); background: var(--magenta); } }
.e-caret { display: inline-block; width: 7px; height: 1.05em; margin-left: 2px; vertical-align: -0.15em; border-radius: 2px; background: var(--magenta); animation: e-blink .9s steps(2) infinite; }
@keyframes e-blink { 50% { opacity: 0; } }
.e-err { display: flex; gap: var(--sp-2); align-items: flex-start; color: var(--text-2); font-size: var(--fs-sm); }
.e-err .icon { --icon-size: 16px; flex: none; margin-top: 3px; color: var(--orange); }
.e-err__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

/* kirjoituskenttä */
.e-composer {
  position: sticky; bottom: 0; z-index: var(--z-sticky);
  margin: auto calc(-1 * var(--gutter)) 0;
  padding: var(--sp-3) var(--gutter) calc(var(--safe-bottom) + var(--sp-3));
  background: linear-gradient(180deg, rgba(10,11,16,0), rgba(10,11,16,.96) 22%);
  display: flex; flex-direction: column; gap: var(--sp-2);
}
.e-chips-row { display: flex; gap: var(--sp-2); overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--gutter)); padding: 2px var(--gutter); scroll-snap-type: x proximity; }
.e-chips-row::-webkit-scrollbar { display: none; }
.e-chips-row[hidden] { display: none; }
.e-chips-row .chip { flex: none; min-height: 36px; padding: 0 var(--sp-3); font-size: var(--fs-xs); white-space: nowrap; scroll-snap-align: start; }
.e-composer__bar {
  display: flex; align-items: flex-end; gap: var(--sp-2);
  padding: 6px 6px 6px var(--sp-4); border-radius: 26px;
  background: var(--surface-2); border: 1px solid var(--line-strong);
  transition: border-color var(--dur-fast), box-shadow var(--dur-base);
}
.e-composer__bar:focus-within { border-color: var(--magenta); box-shadow: 0 0 0 4px var(--magenta-a10); }
.e-input {
  flex: 1; min-width: 0; resize: none; border: 0; outline: 0; background: transparent; color: var(--text);
  font: inherit; font-size: var(--fs-md); line-height: 1.4; padding: 10px 0; max-height: 140px; min-height: 24px;
}
.e-input:focus, .e-input:focus-visible { outline: 0; box-shadow: none; background: transparent; border: 0; }
.e-input::placeholder { color: var(--text-faint); }
.e-send { flex: none; }
.e-send .icon { --icon-size: 20px; }
.e-composer__note { text-align: center; font-size: var(--fs-micro); color: var(--text-muted); }

/* ---------- Tänään-kortti ---------- */
.e-today {
  display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4); color: inherit; text-decoration: none;
  background:
    radial-gradient(120% 140% at 0% 0%, var(--magenta-a10), transparent 60%),
    var(--surface-1);
  border-color: rgba(255,61,154,.2);
}
.e-today .e-orb { --orb: 44px; }
.e-today__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.e-today__title { display: flex; align-items: center; gap: var(--sp-2); font-weight: var(--fw-bold); font-size: var(--fs-md); flex-wrap: wrap; }
.e-today__text { color: var(--text-muted); font-size: var(--fs-sm); }
.e-today__badge { height: 20px; padding: 0 8px; }
.e-today__badge .icon, .e-weekly .badge .icon, .e-aiset .badge .icon { --icon-size: 12px; }
.e-today.is-locked .e-orb { filter: saturate(.55); }

/* ---------- viikkoanalyysi ---------- */
.e-weekly {
  background:
    radial-gradient(130% 80% at 100% 0%, var(--magenta-a10), transparent 55%),
    linear-gradient(180deg, var(--surface-2), var(--surface-1));
  border-color: rgba(255,61,154,.2);
}
.e-weekly .card__header { margin-bottom: var(--sp-3); }
.e-weekly__body { display: flex; flex-direction: column; gap: var(--sp-3); }
.e-wsec { padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); background: var(--surface-1); border: 1px solid var(--line); animation: e-msg-in var(--dur-slow) var(--ease-spring) both; }
.e-wsec:nth-child(2) { animation-delay: 60ms; }
.e-wsec:nth-child(3) { animation-delay: 120ms; }
.e-wsec--lime { border-left: 3px solid var(--lime); }
.e-wsec--orange { border-left: 3px solid var(--orange); }
.e-wsec--cyan { border-left: 3px solid var(--cyan); }
.e-wsec__head { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.e-wsec__head .list-row__lead { width: 28px; height: 28px; }
.e-wsec__head h3 { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--text-2); font-weight: var(--fw-semi); }
.e-wsec__list { margin: 0; padding-left: 1.2em; display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-sm); color: var(--text); line-height: var(--lh-body); }
.e-wsec--lime li::marker { color: var(--lime); }
.e-wsec--orange li::marker { color: var(--orange); }
.e-wsec--cyan li::marker { color: var(--cyan); font-family: var(--font-mono); font-weight: var(--fw-bold); }
.e-weekly__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-1); }
.e-weekly__meta { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: .04em; }
.e-weekly__live { font-size: var(--fs-sm); color: var(--text-2); line-height: var(--lh-body); min-height: 28px; }
.e-weekly__live > * + * { margin-top: var(--sp-2); }
.e-weekly__free { font-size: var(--fs-sm); line-height: var(--lh-body); }
.e-weekly__free > * + * { margin-top: var(--sp-2); }
.e-shimmer { display: flex; flex-direction: column; gap: 8px; margin-top: var(--sp-3); }
.e-shimmer i { height: 10px; border-radius: 6px; background: linear-gradient(90deg, var(--surface-3), rgba(255,61,154,.18), var(--surface-3)); background-size: 200% 100%; animation: e-sh 1.4s linear infinite; }
.e-shimmer i:nth-child(2) { width: 82%; }
.e-shimmer i:nth-child(3) { width: 64%; }
@keyframes e-sh { to { background-position: -200% 0; } }

/* ---------- Profiilin AI-osio ---------- */
.e-aiset { border-color: rgba(255,61,154,.18); }
.e-key-group .input { padding-right: 84px; letter-spacing: .02em; }
.e-key-show { position: absolute; right: 6px; min-height: 36px; }
.e-aiset .btn-row > .btn { flex: 1; }
.e-aiset__foot:empty { display: none; }
.e-aiset__clear { align-self: flex-start; color: var(--text-muted); }
.e-danger { color: #FF7DBA; }
.e-flash { animation: e-flash 1.6s var(--ease-out) 1; }
@keyframes e-flash { 0%, 40% { box-shadow: 0 0 0 2px var(--magenta), 0 0 30px -6px var(--magenta); } 100% { box-shadow: none; } }
.e-pop { animation: bump var(--dur-slow) var(--ease-spring); }

@media (prefers-reduced-motion: reduce) {
  .e-orb--lg, .e-typing i, .e-caret, .e-shimmer i, .e-msg, .e-wsec, .e-flash { animation: none !important; }
}

/* ---------- G: jaettu AI-valmentaja (palvelimen avain) ---------- */
.g-shared-note {
  display: flex; gap: var(--sp-2); align-items: flex-start;
  margin: 0 0 var(--sp-3); padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md); font-size: var(--fs-xs, 12px); line-height: 1.45; color: var(--text-muted);
  background: color-mix(in srgb, var(--cyan) 6%, var(--surface-1));
  border: 1px solid color-mix(in srgb, var(--cyan) 18%, transparent);
}
.g-shared-note .icon { color: var(--cyan); flex: none; margin-top: 1px; }
.g-shared-note__link { color: var(--cyan); text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; font-weight: var(--fw-semibold, 600); }
.g-shared-alert { font-size: var(--fs-xs, 12px); }