/* ============================================================
   Orthologik — App-UI (Phone-Frame + Screens)
   Wird von der Website (statische Mockups) und vom
   Klickdummy (prototyp/index.html) gemeinsam genutzt.
   Basis: tokens.css
   ============================================================ */

/* ---------- Phone-Frame ---------- */

.phone {
  width: 262px;
  background: var(--o-navy-900);
  border-radius: 38px;
  padding: 10px;
  box-shadow: var(--o-shadow-lg);
  flex: none;
}
.phone--lg { width: 300px; border-radius: 44px; padding: 11px; }

.phone__screen {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 540px;
  background: var(--o-bg);
  border-radius: 29px;
  overflow: hidden;
}
.phone--lg .phone__screen { height: 620px; border-radius: 34px; }

.phone__notch {
  position: absolute;
  top: 9px; left: 50%;
  transform: translateX(-50%);
  width: 72px; height: 20px;
  border-radius: 11px;
  background: var(--o-navy-900);
  z-index: 3;
  pointer-events: none;
}

.statusbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 11px 20px 4px;
  font-size: 12px;
  font-weight: var(--o-weight-semibold);
  color: var(--o-navy-900);
  flex: none;
}
.statusbar--onDark { color: #fff; }

/* ---------- App-Inhalt ---------- */

.app-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.app-body::-webkit-scrollbar { display: none; }

.app-head { padding: 12px 16px 0; flex: none; }
.app-head__kicker { font-size: 13px; color: var(--o-slate-500); }
.app-head__title {
  font-size: 21px;
  font-weight: var(--o-weight-bold);
  color: var(--o-navy-900);
  letter-spacing: -.01em;
}
.app-head__sub { font-size: 12px; color: var(--o-slate-500); }

.app-card {
  background: #fff;
  border-radius: var(--o-radius-md);
  box-shadow: var(--o-shadow-sm);
  padding: 12px 16px;
  margin: 10px 16px 0;
}
.app-card--hero { display: flex; align-items: center; gap: 16px; padding: 14px 16px; }

.app-label {
  font-size: 11px;
  font-weight: var(--o-weight-semibold);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--o-slate-500);
}

/* Fortschrittsring */
.ring { position: relative; flex: none; }
.ring svg { display: block; transform: rotate(-90deg); }
.ring__label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: var(--o-weight-bold);
  color: var(--o-navy-900);
}

/* Übungs-Zeile */
.ex-row {
  background: #fff;
  border-radius: var(--o-radius-md);
  box-shadow: var(--o-shadow-sm);
  border: 1.5px solid transparent;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.ex-row--done { }
.ex-row--current { box-shadow: var(--o-shadow-md); border-color: var(--o-blue-600); }
.ex-row--locked { opacity: .75; cursor: default; }
.ex-row__icon {
  width: 30px; height: 30px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  font-size: 11px;
  font-weight: var(--o-weight-semibold);
  background: var(--o-slate-100);
  color: var(--o-slate-500);
}
.ex-row--done .ex-row__icon { background: var(--o-teal-100); color: var(--o-teal-700); }
.ex-row--current .ex-row__icon { background: var(--o-blue-600); color: #fff; }
.ex-row__text { min-width: 0; flex: 1; }
.ex-row__name { font-size: 13px; font-weight: var(--o-weight-semibold); color: var(--o-ink); }
.ex-row--current .ex-row__name { color: var(--o-navy-900); }
.ex-row__meta { font-size: 11px; color: var(--o-slate-500); }
.ex-row__state { font-size: 10.5px; font-weight: var(--o-weight-semibold); color: var(--o-teal-700); flex: none; }
.ex-row--current .ex-row__state { color: var(--o-blue-600); font-weight: var(--o-weight-bold); }

.ex-list { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px 0; }

/* Wochenstreifen */
.weekstrip { display: flex; justify-content: space-between; padding: 12px 16px 0; }
.weekstrip__day { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.weekstrip__name { font-size: 9px; color: var(--o-slate-500); }
.weekstrip__pill {
  width: 26px; height: 26px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  background: #fff;
  border: 1px solid var(--o-slate-200);
  color: var(--o-slate-500);
}
.weekstrip__day--done .weekstrip__pill {
  background: var(--o-teal-100);
  border-color: transparent;
  color: var(--o-teal-700);
}
.weekstrip__day--today .weekstrip__name { font-weight: var(--o-weight-bold); color: var(--o-blue-600); }
.weekstrip__day--today .weekstrip__pill {
  background: var(--o-blue-600);
  border-color: transparent;
  color: #fff;
  font-weight: var(--o-weight-semibold);
}

/* CTA-Zone unten */
.app-cta { margin: auto 16px 12px; padding-top: 12px; flex: none; }

.app-note {
  display: flex;
  gap: 6px;
  align-items: center;
  margin: 10px 16px 0;
  font-size: 10.5px;
  line-height: 1.4;
  color: var(--o-slate-500);
}
.app-note svg { flex: none; color: var(--o-teal-700); }

/* ---------- Tab-Bar ---------- */

.tabbar {
  display: flex;
  justify-content: space-around;
  border-top: 1px solid var(--o-slate-100);
  padding: 8px 6px 14px;
  background: #fff;
  flex: none;
}
.tabbar__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  color: var(--o-slate-500);
  background: none;
  border: 0;
  font: inherit;
  padding: 4px 10px;
  cursor: pointer;
  border-radius: var(--o-radius-sm);
}
.tabbar__item span { font-size: 9.5px; }
.tabbar__item[aria-current="true"] { color: var(--o-blue-600); }
.tabbar__item[aria-current="true"] span { font-weight: var(--o-weight-semibold); }

/* ---------- Live-Analyse-Screen ---------- */

.live {
  background: linear-gradient(180deg, #16354F, #0A2540);
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.live__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px 0;
  color: #fff;
  flex: none;
}
.live__title { font-size: 14px; font-weight: var(--o-weight-semibold); }
.live__meta { font-size: 11px; color: var(--o-blue-300); }
.live__chip {
  font-size: 11px;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: var(--o-radius-pill);
  padding: 3px 9px;
}
.live__chip--rec::before {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #FF5A52;
  margin-right: 5px;
  vertical-align: middle;
  animation: o-pulse 1.4s ease-in-out infinite;
}
@keyframes o-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

.live__stage { width: 100%; flex: 1; min-height: 0; display: block; }

.coachcard {
  margin: 0 12px 12px;
  background: #fff;
  border-radius: var(--o-radius-md);
  padding: 10px 12px;
  display: flex;
  gap: 10px;
  align-items: center;
  box-shadow: var(--o-shadow-md);
  flex: none;
}
.coachcard__icon {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--o-teal-50);
  color: var(--o-teal-700);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.coachcard__title { font-size: 13px; font-weight: var(--o-weight-semibold); color: var(--o-navy-900); }
.coachcard__sub { font-size: 11px; color: var(--o-slate-500); }

.repbar { background: #fff; padding: 12px 16px 10px; flex: none; }
.repbar__row { display: flex; justify-content: space-between; align-items: baseline; }
.repbar__label { font-size: 12px; color: var(--o-slate-500); }
.repbar__value { font-size: 15px; font-weight: var(--o-weight-bold); color: var(--o-navy-900); }
.repbar__track {
  margin-top: 7px;
  height: 8px;
  border-radius: 4px;
  background: var(--o-slate-100);
  overflow: hidden;
}
.repbar__fill {
  height: 100%;
  border-radius: 4px;
  background: var(--o-teal-500);
  width: 0%;
  transition: width .35s ease;
}

/* ---------- Coach-Chat ---------- */

.chat-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: #fff;
  border-bottom: 1px solid var(--o-slate-100);
  flex: none;
}
.chat-head__avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--o-blue-600);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.chat-head__name { font-size: 13.5px; font-weight: var(--o-weight-semibold); color: var(--o-navy-900); }
.chat-head__badge {
  font-size: 10.5px;
  color: var(--o-teal-700);
  display: flex;
  align-items: center;
  gap: 4px;
}

.chat {
  flex: 1;
  min-height: 0;
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  scrollbar-width: none;
}
.chat::-webkit-scrollbar { display: none; }

.chat__stamp {
  align-self: center;
  font-size: 10px;
  color: var(--o-slate-500);
  background: var(--o-slate-100);
  border-radius: var(--o-radius-pill);
  padding: 2px 10px;
}
.bubble {
  max-width: 88%;
  font-size: 13px;
  line-height: 1.5;
  padding: 10px 13px;
}
.bubble--user {
  align-self: flex-end;
  max-width: 85%;
  background: var(--o-blue-600);
  color: #fff;
  border-radius: 14px 14px 4px 14px;
  line-height: 1.45;
}
.bubble--bot {
  align-self: flex-start;
  background: #fff;
  border: 1px solid var(--o-slate-200);
  border-radius: 14px 14px 14px 4px;
  color: var(--o-ink);
}
.bubble__source {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--o-slate-100);
  font-size: 10px;
  color: var(--o-teal-700);
}
.chat__disclaimer {
  align-self: flex-start;
  font-size: 10.5px;
  color: var(--o-slate-500);
  padding-left: 4px;
}
.typing { display: inline-flex; gap: 4px; align-items: center; padding: 2px 0; }
.typing i {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--o-slate-300);
  animation: o-typing 1.1s ease-in-out infinite;
}
.typing i:nth-child(2) { animation-delay: .15s; }
.typing i:nth-child(3) { animation-delay: .3s; }
@keyframes o-typing { 0%, 60%, 100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

.chat-suggest { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 12px 8px; flex: none; }
.chat-suggest button {
  font: inherit;
  font-size: 11px;
  background: #fff;
  border: 1px solid var(--o-blue-200);
  color: var(--o-blue-700);
  border-radius: var(--o-radius-pill);
  padding: 7px 11px;
  cursor: pointer;
}
.chat-suggest button:hover { background: var(--o-blue-100); }

.chat-input {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 10px 12px;
  background: #fff;
  border-top: 1px solid var(--o-slate-100);
  flex: none;
}
.chat-input__field {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--o-slate-200);
  border-radius: var(--o-radius-pill);
  padding: 9px 14px;
  font: inherit;
  font-size: 12px;
  color: var(--o-ink);
}
.chat-input__field::placeholder { color: var(--o-slate-500); }
.chat-input__field:focus { outline: none; border-color: var(--o-blue-600); }
.chat-input__send {
  width: 38px; height: 38px;
  border: 0;
  border-radius: 50%;
  background: var(--o-blue-600);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  cursor: pointer;
}

/* ---------- Verlauf ---------- */

.metric-row { display: flex; gap: 8px; margin: 10px 16px 0; }
.metric {
  flex: 1;
  background: #fff;
  border-radius: var(--o-radius-md);
  box-shadow: var(--o-shadow-sm);
  padding: 10px 12px;
}
.metric__value { font-size: 15px; font-weight: var(--o-weight-bold); color: var(--o-teal-700); }
.metric__label { font-size: 10.5px; line-height: 1.35; color: var(--o-slate-500); }

/* ---------- Schmerz-Feedback ---------- */

.scale { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.scale button {
  flex: 1 0 30px;
  min-height: 42px;
  border: 1.5px solid var(--o-slate-200);
  background: #fff;
  border-radius: var(--o-radius-sm);
  font: inherit;
  font-size: 14px;
  font-weight: var(--o-weight-semibold);
  color: var(--o-slate-700);
  cursor: pointer;
}
.scale button[aria-pressed="true"] {
  background: var(--o-blue-600);
  border-color: var(--o-blue-600);
  color: #fff;
}
.scale__legend {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-size: 10px;
  color: var(--o-slate-500);
}

.success-mark {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--o-teal-100);
  color: var(--o-teal-700);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}