/* NG Коуч redesign: calm glass surfaces, readable hierarchy and one scroll owner. */
#mainApp:has(#coachPage) .app-header { display: none !important; }
#screenContent:has(#coachPage) {
  width: 100% !important;
  max-width: 860px !important;
  height: 100% !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: radial-gradient(circle at 80% 0%, rgba(164,255,0,.08), transparent 32%), #070b0f;
}
#screenContent:has(#coachPage) .coach-page {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 18px 18px calc(92px + env(safe-area-inset-bottom));
  color: #f2f7f8;
  box-sizing: border-box;
}
.coach-hero {
  display: flex;
  align-items: center;
  gap: 13px;
  flex: 0 0 auto;
  padding: 2px 0 16px;
  border-bottom: 1px solid rgba(214,238,241,.13);
}
.coach-avatar {
  position: relative;
  width: 54px;
  height: 54px;
  flex: 0 0 54px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(182,255,0,.32);
  border-radius: 20px;
  color: #c4ff00;
  background: linear-gradient(145deg, rgba(67,111,78,.5), rgba(9,32,31,.8));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 10px 28px rgba(0,0,0,.28);
  font-size: 25px;
}
.coach-avatar-dot { position: absolute; right: 3px; top: 3px; width: 10px; height: 10px; border: 2px solid #0b1115; border-radius: 50%; background: #b7ff00; }
.coach-hero-copy { min-width: 0; flex: 1 1 auto; }
.coach-eyebrow { color: #91a9ae; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.coach-title-row { display: flex; align-items: center; gap: 9px; min-width: 0; margin-top: 2px; }
.coach-title-row h1 { min-width: 0; margin: 0; overflow: hidden; color: #fff; font-size: clamp(21px, 5.8vw, 28px); font-weight: 900; letter-spacing: -.04em; text-overflow: ellipsis; white-space: nowrap; }
.coach-hero-copy > p { margin: 3px 0 0; overflow: hidden; color: #a9babd; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.coach-online { display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto; padding: 5px 8px; border: 1px solid rgba(183,255,0,.26); border-radius: 999px; color: #c4ff43; background: rgba(183,255,0,.08); font-size: 11px; font-weight: 800; white-space: nowrap; }
.coach-online span { width: 6px; height: 6px; border-radius: 50%; background: #b7ff00; box-shadow: 0 0 9px #b7ff00; }
.coach-reset { width: 44px; height: 44px; flex: 0 0 44px; display: grid; place-items: center; border: 1px solid rgba(183,255,0,.45); border-radius: 15px; color: #b7ff00; background: rgba(183,255,0,.06); font-size: 17px; transition: transform .2s ease, background .2s ease; }
.coach-reset:active { transform: scale(.94); background: rgba(183,255,0,.15); }
.coach-hero-note { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; margin: 14px 0; padding: 12px 13px; border: 1px solid rgba(184,229,235,.14); border-radius: 18px; background: linear-gradient(120deg, rgba(18,49,54,.78), rgba(13,27,34,.64)); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
.coach-hero-note-icon { width: 31px; height: 31px; flex: 0 0 31px; display: grid; place-items: center; border-radius: 11px; color: #b7ff00; background: rgba(183,255,0,.12); }
.coach-hero-note strong, .coach-hero-note span { display: block; }
.coach-hero-note strong { color: #f4fbfb; font-size: 13px; }
.coach-hero-note span { margin-top: 2px; color: #9eb5b9; font-size: 12px; line-height: 1.35; }
.coach-quick-section { flex: 0 0 auto; margin-bottom: 14px; }
.coach-section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.coach-section-heading span { color: #dce9ea; font-size: 13px; font-weight: 850; }
.coach-section-heading small { color: #789095; font-size: 11px; }
.coach-quick-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.coach-quick-card { min-width: 0; min-height: 52px; display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid rgba(192,226,230,.13); border-radius: 16px; color: #d8e6e8; background: rgba(255,255,255,.055); box-shadow: inset 0 1px 0 rgba(255,255,255,.06); text-align: left; transition: transform .18s ease, border-color .18s ease, background .18s ease; }
.coach-quick-card:active { transform: scale(.98); border-color: rgba(183,255,0,.52); background: rgba(183,255,0,.1); }
.coach-quick-card > span:not(.coach-quick-icon) { min-width: 0; overflow: hidden; font-size: 12px; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.coach-quick-icon { width: 31px; height: 31px; flex: 0 0 31px; display: grid; place-items: center; border-radius: 11px; color: #b7ff00; background: rgba(183,255,0,.1); }
.coach-quick-arrow { margin-left: auto; color: #779196; font-size: 10px; }
.coach-thread { flex: 1 1 0%; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 2px 2px 18px; scrollbar-width: thin; scrollbar-color: rgba(183,255,0,.3) transparent; overscroll-behavior: contain; touch-action: pan-y; -webkit-overflow-scrolling: touch; }
.coach-thread::-webkit-scrollbar { width: 4px; }
.coach-thread::-webkit-scrollbar-thumb { border-radius: 999px; background: rgba(183,255,0,.28); }
.coach-welcome-card { margin: 0 0 14px; padding: 20px 18px; border: 1px solid rgba(130,235,225,.25); border-radius: 25px; background: linear-gradient(145deg, rgba(19,61,65,.86), rgba(12,31,38,.82)); box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 16px 35px rgba(0,0,0,.24); }
.coach-welcome-kicker { display: flex; align-items: center; gap: 7px; color: #b7ff00; font-size: 12px; font-weight: 850; letter-spacing: .02em; }
.coach-welcome-kicker span { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 9px; background: rgba(183,255,0,.12); }
.coach-welcome-card h2 { margin: 13px 0 10px; color: #b7ff00; font-size: clamp(21px, 5.6vw, 29px); line-height: 1.14; letter-spacing: -.035em; }
.coach-welcome-body { margin: 0; color: #e0edee; font-size: 16px; line-height: 1.62; }
.coach-feature-list { display: grid; gap: 8px; margin: 18px 0; }
.coach-feature-list > div { display: flex; align-items: flex-start; gap: 9px; color: #c2d5d8; font-size: 13px; line-height: 1.42; }
.coach-feature-list i { width: 18px; flex: 0 0 18px; margin-top: 2px; color: #b7ff00; text-align: center; }
.coach-disclaimer { margin: 0; padding-top: 13px; border-top: 1px solid rgba(211,235,238,.12); color: #91aaae; font-size: 12px; line-height: 1.48; }
.coach-message { display: flex; gap: 8px; align-items: flex-end; margin-bottom: 12px; }
.coach-message-user { justify-content: flex-end; }
.coach-message-avatar { width: 30px; height: 30px; flex: 0 0 30px; display: grid; place-items: center; border-radius: 11px; color: #b7ff00; background: rgba(183,255,0,.1); }
.coach-bubble-ai, .coach-bubble-user { max-width: min(92%, 620px); padding: 13px 15px; border-radius: 19px; font-size: 15px; line-height: 1.52; overflow-wrap: anywhere; }
.coach-bubble-ai { border: 1px solid rgba(151,226,224,.18); color: #e2eff0; background: rgba(21,57,61,.78); box-shadow: inset 0 1px 0 rgba(255,255,255,.07); }
.coach-bubble-user { border: 1px solid rgba(183,255,0,.22); color: #09110b; background: linear-gradient(135deg, #d0ff20, #92ed00); box-shadow: 0 8px 20px rgba(183,255,0,.12); }
.coach-bubble-ai p { margin: 0 0 8px; }
.coach-bubble-ai p:last-child { margin-bottom: 0; }
.coach-bullet { display: block; margin-top: 4px; }
.coach-composer-wrap { flex: 0 0 auto; padding-top: 10px; }
.coach-composer { display: flex; align-items: flex-end; gap: 8px; padding: 8px; border: 1px solid rgba(194,235,236,.2); border-radius: 21px; background: rgba(19,37,43,.82); box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 12px 25px rgba(0,0,0,.23); backdrop-filter: blur(18px); }
.coach-input-shell { min-width: 0; flex: 1 1 auto; }
.coach-input { display: block; width: 100%; min-height: 42px; max-height: 120px; resize: none; padding: 9px 10px 2px; border: 0 !important; outline: 0 !important; color: #effafa; background: transparent !important; box-shadow: none !important; font-size: 15px; line-height: 1.4; }
.coach-input::placeholder { color: #91a8ac; }
.coach-input-hint { display: block; padding: 0 10px 2px; color: #70868b; font-size: 10px; }
.coach-send { width: 44px; height: 44px; flex: 0 0 44px; display: grid; place-items: center; border: 1px solid rgba(183,255,0,.48); border-radius: 15px; color: #09110b; background: #b7ff00; font-size: 16px; transition: transform .18s ease; }
.coach-send:active { transform: scale(.94); }
.coach-send.is-disabled { opacity: .45; cursor: not-allowed; }
.coach-safety-note { display: flex; align-items: center; justify-content: center; gap: 5px; margin: 7px 4px 0; color: #71878b; font-size: 10px; line-height: 1.3; text-align: center; }
.coach-safety-note i { color: #8bb19c; }
#screenContent:has(#coachPage) .modal-overlay { z-index: 100; }
@media (min-width: 600px) { #screenContent:has(#coachPage) .coach-page { padding-left: 28px; padding-right: 28px; } .coach-quick-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 370px) { #screenContent:has(#coachPage) .coach-page { padding-left: 12px; padding-right: 12px; } .coach-online { padding-left: 6px; padding-right: 6px; font-size: 10px; } .coach-hero-note span { font-size: 11px; } .coach-welcome-card { padding: 17px 15px; } }
@media (prefers-reduced-motion: reduce) { .coach-quick-card, .coach-reset, .coach-send { transition: none; } }

/* Coach mobile layout: keep every control in normal document flow. */
@media (max-width: 599px) {
  #mainApp:has(#coachPage) {
    position: static !important;
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  #screenContent:has(#coachPage) {
    position: static !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    padding-bottom: 18px !important;
  }

  #screenContent:has(#coachPage) .coach-page {
    position: static !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    padding-bottom: 24px !important;
  }

  #screenContent:has(#coachPage) .coach-thread {
    position: static !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    padding-bottom: 18px !important;
  }

  #mainApp:has(#coachPage) .bottom-nav {
    position: static !important;
    left: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: calc(100% - 24px) !important;
    max-width: 740px;
    min-height: 70px;
    margin: 0 auto 18px !important;
    z-index: auto !important;
  }
}

/* Messages appended by the existing sender keep their legacy wrapper classes;
   normalize them into the same readable glass language as the first render. */
#screenContent:has(#coachPage) #chatMessages .chat-bubble-ai { max-width: min(92%, 620px); padding: 13px 15px; border: 1px solid rgba(151,226,224,.18); border-radius: 19px; color: #e2eff0; background: rgba(21,57,61,.78); box-shadow: inset 0 1px 0 rgba(255,255,255,.07); font-size: 15px; line-height: 1.52; overflow-wrap: anywhere; }
#screenContent:has(#coachPage) #chatMessages .chat-bubble-user { max-width: min(92%, 620px); padding: 13px 15px; border: 1px solid rgba(183,255,0,.22); border-radius: 19px; color: #09110b; background: linear-gradient(135deg, #d0ff20, #92ed00); font-size: 15px; line-height: 1.52; overflow-wrap: anywhere; }
#screenContent:has(#coachPage) #chatMessages .chat-bubble-ai p { margin: 0 0 8px; }
#screenContent:has(#coachPage) #chatMessages .chat-bubble-ai p:last-child { margin-bottom: 0; }

/* Mobile Preview/WebView fallback: use the app content as the scroll owner.
   Some embedded Android browsers do not dispatch touch gestures reliably to
   a nested flex scroller. Keeping the coach content in normal document flow
   makes swiping anywhere on the page scroll the complete conversation. */
@media (max-width: 599px) {
  /* The app shell is normally a fixed 100dvh frame with an internal
     scroller. That works on desktop, but Android Preview can swallow touch
     gestures when the scroller is nested inside the fixed shell. For the
     coach screen, let the document grow naturally and make the browser page
     the only scroll owner. */
  #mainApp:has(#coachPage) {
    display: block !important;
    height: auto !important;
    min-height: 100dvh;
    overflow: visible !important;
  }

  #screenContent:has(#coachPage) {
    display: block !important;
    flex: none !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    -webkit-overflow-scrolling: auto;
    touch-action: auto;
  }

  #screenContent:has(#coachPage) .coach-page {
    display: block !important;
    height: auto !important;
    min-height: 100%;
    overflow: visible !important;
    padding-bottom: calc(148px + env(safe-area-inset-bottom));
  }

  #screenContent:has(#coachPage) .coach-thread {
    display: block !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    padding-bottom: 22px;
    touch-action: auto;
  }

  #screenContent:has(#coachPage) .coach-thread > * {
    flex: none !important;
  }

  #screenContent:has(#coachPage) .coach-composer-wrap {
    padding-bottom: 10px;
  }
}

/* Conversation stage: make the assistant's answer the primary surface.
   It stays in normal flow on mobile, so nothing is sticky or clipped. */
#screenContent:has(#coachPage) .coach-chat-panel {
  flex: 0 0 auto;
  min-width: 0;
  margin: 2px 0 16px;
  padding: 13px;
  border: 1px solid rgba(127, 225, 218, .22);
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(14, 44, 49, .86), rgba(10, 23, 31, .92));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 18px 38px rgba(0,0,0,.22);
}
.coach-chat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  padding: 2px 2px 12px;
  border-bottom: 1px solid rgba(211,235,238,.11);
}
.coach-chat-head > div:first-child { display: flex; align-items: center; gap: 9px; min-width: 0; }
.coach-chat-kicker { width: 34px; height: 34px; flex: 0 0 34px; display: grid; place-items: center; border-radius: 12px; color: #b7ff00; background: rgba(183,255,0,.12); }
.coach-chat-head h2 { margin: 0; color: #f4fbfb; font-size: 16px; line-height: 1.2; letter-spacing: -.02em; }
.coach-chat-head p { margin: 3px 0 0; color: #8fa9ad; font-size: 11px; line-height: 1.3; }
.coach-chat-live { display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto; padding: 5px 8px; border: 1px solid rgba(183,255,0,.22); border-radius: 999px; color: #b7ff00; background: rgba(183,255,0,.07); font-size: 10px; font-weight: 800; white-space: nowrap; }
.coach-chat-live i { width: 6px; height: 6px; border-radius: 50%; background: #b7ff00; box-shadow: 0 0 8px #b7ff00; }
#screenContent:has(#coachPage) .coach-chat-panel .coach-thread { min-height: 285px; padding: 14px 2px 4px; }
#screenContent:has(#coachPage) .coach-welcome-card { display: block !important; height: auto !important; max-height: none !important; overflow: visible !important; }
#screenContent:has(#coachPage) #chatMessages > .flex { display: flex; width: 100%; min-width: 0; align-items: flex-end; gap: 9px; margin: 0 0 14px; }
#screenContent:has(#coachPage) #chatMessages > .flex.justify-end { justify-content: flex-end; }
#screenContent:has(#coachPage) #chatMessages > .flex > .chat-bubble-ai { flex: 1 1 auto; width: auto; max-width: none; min-width: 0; font-size: 16px; line-height: 1.62; }
#screenContent:has(#coachPage) #chatMessages > .flex > .chat-bubble-user { max-width: 88%; font-size: 15px; line-height: 1.55; }
#screenContent:has(#coachPage) #chatMessages .chat-bubble-ai p { margin-bottom: 10px; }

@media (max-width: 599px) {
  #screenContent:has(#coachPage) .coach-chat-panel { margin-top: 6px; padding: 12px; border-radius: 22px; }
  #screenContent:has(#coachPage) .coach-chat-panel .coach-thread { display: block !important; min-height: 300px; height: auto !important; max-height: none !important; overflow: visible !important; padding: 14px 1px 3px; }
  .coach-chat-head { align-items: flex-start; }
  .coach-chat-head p { max-width: 210px; }
  .coach-chat-live { margin-top: 2px; }
  .coach-welcome-card { margin-bottom: 0; padding: 18px 16px; }
  .coach-welcome-card h2 { font-size: clamp(22px, 6.2vw, 28px); }
  .coach-welcome-body { font-size: 15px; line-height: 1.55; }
}

@media (max-width: 370px) {
  .coach-chat-live { padding-left: 6px; padding-right: 6px; font-size: 9px; }
  .coach-chat-head p { font-size: 10px; }
  #screenContent:has(#coachPage) .coach-chat-panel .coach-thread { min-height: 270px; }
}

/* v10: full-height conversation stage on mobile. The answer surface grows with
   the document instead of clipping the welcome state or long AI replies. */
@media (max-width: 599px) {
  #mainApp:has(#coachPage),
  #screenContent:has(#coachPage),
  #screenContent:has(#coachPage) .coach-page,
  #screenContent:has(#coachPage) .coach-hero,
  #screenContent:has(#coachPage) .coach-hero-note,
  #screenContent:has(#coachPage) .coach-quick-section,
  #screenContent:has(#coachPage) .coach-chat-panel,
  #screenContent:has(#coachPage) .coach-chat-head,
  #screenContent:has(#coachPage) .coach-thread,
  #screenContent:has(#coachPage) .coach-composer-wrap {
    position: static !important;
  }

  #mainApp:has(#coachPage) {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  #screenContent:has(#coachPage) {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-width: none !important;
    overflow: visible !important;
    padding: 0 !important;
  }

  #screenContent:has(#coachPage) .coach-page {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    padding: 16px 18px calc(32px + env(safe-area-inset-bottom)) !important;
  }

  /* This is the primary reading surface: nearly one mobile viewport tall,
     full width, and allowed to expand indefinitely for real answers. */
  #screenContent:has(#coachPage) .coach-chat-panel {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    min-height: max(560px, calc(100svh - 24px)) !important;
    height: auto !important;
    max-height: none !important;
    margin: 10px 0 18px !important;
    padding: 16px !important;
    overflow: visible !important;
    border-radius: 26px !important;
  }

  #screenContent:has(#coachPage) .coach-chat-head {
    flex: 0 0 auto !important;
    width: 100% !important;
  }

  #screenContent:has(#coachPage) .coach-chat-panel .coach-thread,
  #screenContent:has(#coachPage) #chatMessages {
    display: block !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 390px !important;
    max-height: none !important;
    overflow: visible !important;
    overflow-y: visible !important;
    padding: 18px 0 8px !important;
    scrollbar-width: none !important;
    touch-action: auto !important;
  }

  #screenContent:has(#coachPage) #chatMessages > *,
  #screenContent:has(#coachPage) #chatMessages > .flex {
    position: static !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  #screenContent:has(#coachPage) .coach-welcome-card {
    width: 100% !important;
    min-height: 330px !important;
    margin: 0 !important;
    padding: 24px 20px !important;
    overflow: visible !important;
  }

  #screenContent:has(#coachPage) .coach-welcome-card h2 {
    font-size: clamp(27px, 8vw, 36px) !important;
  }

  #screenContent:has(#coachPage) .coach-welcome-body {
    font-size: 17px !important;
    line-height: 1.65 !important;
  }

  #screenContent:has(#coachPage) .coach-composer-wrap {
    width: 100% !important;
    padding: 0 0 10px !important;
  }

  /* The app navigation stays in normal flow as requested; nothing on the
     coach page is fixed or sticky. */
  #mainApp:has(#coachPage) .bottom-nav {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    width: calc(100% - 36px) !important;
    margin: 0 auto 22px !important;
    z-index: auto !important;
  }
}