/* V32 — PHASE 1 / COACH FINAL
   Full-viewport conversation, landscape-safe, natural scroll, compact chrome.
*/

/* The Coach owns the viewport: no parent width, margin or page scroll may constrain it. */
html:has(body.coach-mode),
body.coach-mode{width:100%;height:100%;min-height:100dvh;overflow:hidden}
body.coach-mode #s-app{width:100vw!important;max-width:none!important;margin:0!important;padding:0!important;overflow:hidden!important}
body.coach-mode #s-app>.wrap,
body.coach-mode>.wrap{width:100vw!important;max-width:none!important;margin:0!important;padding:0!important}
body.coach-mode .coach-shell{display:block!important;width:100vw!important;max-width:none!important;height:100dvh!important;min-height:100dvh!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;box-shadow:none!important;overflow:hidden!important}
body.coach-mode .coach-main{display:flex!important;flex-direction:column!important;width:100%!important;height:100dvh!important;min-height:0!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;overflow:hidden!important}

/* Compact, stable top chrome. */
body.coach-mode .coach-topbar{height:62px;min-height:62px;flex:0 0 62px;padding:9px 16px;gap:12px}
body.coach-mode .coach-topbar-leading{display:flex;align-items:center;gap:10px;min-width:0;flex:1}
body.coach-mode .coach-back-btn,
body.coach-mode .coach-menu-btn{width:42px;height:42px;flex:0 0 42px;border:1px solid var(--line);border-radius:12px;background:var(--surface);display:grid;place-items:center;color:var(--t2)}
body.coach-mode .coach-back-btn:hover,
body.coach-mode .coach-menu-btn:hover{color:var(--rose);border-color:rgba(122,62,70,.38);background:var(--surface-2);transform:none}
body.coach-mode .coach-topbar-copy{min-width:0;overflow:hidden}
body.coach-mode .coach-topbar-copy h2{font-size:21px;line-height:1.08;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.coach-mode .coach-topbar-copy p{margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.coach-mode #coach-mem{display:none!important}


/* Only the conversation scrolls. The scrollbar belongs to the right edge of the viewport. */
body.coach-mode .coach-chat-area{display:flex!important;flex-direction:column!important;flex:1 1 auto!important;min-height:0!important;width:100%!important;overflow:hidden!important}
body.coach-mode .coach-main .chat{display:flex!important;flex:1 1 auto!important;flex-direction:column!important;min-height:0!important;width:100%!important;height:auto!important;margin:0!important;padding:0!important;overflow:hidden!important}
body.coach-mode .coach-main .thread{display:flex;flex-direction:column;width:100%!important;max-width:none!important;min-width:0;min-height:0;flex:1 1 auto;overflow-y:auto!important;overflow-x:hidden!important;margin:0!important;padding:14px 16px 24px!important;scrollbar-gutter:auto!important;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
body.coach-mode .coach-main .thread::-webkit-scrollbar{width:8px}
body.coach-mode .coach-main .thread::-webkit-scrollbar-track{background:transparent}
body.coach-mode .coach-main .thread::-webkit-scrollbar-thumb{background:rgba(112,105,95,.28);border-radius:999px;border:2px solid transparent;background-clip:padding-box}
body.coach-mode .coach-main .thread{scrollbar-width:thin;scrollbar-color:rgba(112,105,95,.28) transparent}

/* Empty state and configuration gate start at the real top of the conversation. */
body.coach-mode .coach-main .empty,
body.coach-mode .coach-main .gate-full{width:min(920px,100%);max-width:920px;margin:0 auto;padding:26px 0 34px;box-sizing:border-box}
body.coach-mode .coach-main .empty{color:var(--t2);text-align:center}
body.coach-mode .coach-main .gate-full{text-align:left}
body.coach-mode .coach-main .gate-full .gate-h{margin-top:0}
body.coach-mode .coach-main .gate-full .gate-p{max-width:820px}
body.coach-mode .coach-main .gate-paths{width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:18px}
body.coach-mode .coach-main .gate-card{min-width:0;padding:17px;border:1px solid var(--line);border-radius:16px;background:var(--surface-2)}
body.coach-mode .coach-main .gate-card p{color:var(--t2);font-size:12px;line-height:1.55;margin-top:8px}
body.coach-mode .coach-main .gate-card .gate-price{display:block;margin-top:8px;font-weight:700;color:var(--rose)}
body.coach-mode .coach-main .gate-card .gate-price+.gate-price{margin-top:0}

/* Messages use the whole width while keeping a readable line length. */
body.coach-mode .coach-main .bub{width:fit-content;max-width:min(900px,92%);overflow-wrap:anywhere;word-break:break-word}
body.coach-mode .coach-main .bub.me{align-self:flex-end}
body.coach-mode .coach-main .bub.co{align-self:flex-start}

/* Composer is anchored to the conversation, never to a fake fixed page width. */
body.coach-mode .coach-main .composer{display:grid!important;grid-template-columns:auto minmax(0,1fr) auto!important;align-items:end;gap:10px;width:100%!important;max-width:none!important;flex:0 0 auto;margin:0!important;padding:10px 16px calc(12px + env(safe-area-inset-bottom))!important;border-top:1px solid var(--line);border-left:0!important;border-right:0!important;border-radius:0!important;background:var(--surface);position:relative!important}
body.coach-mode .coach-main .composer-tools{display:flex;gap:7px;align-items:end}
body.coach-mode .coach-main .composer-tool{width:44px;height:44px;flex:0 0 44px;border:1px solid var(--line);border-radius:13px;background:var(--surface-2);display:grid;place-items:center;color:var(--t2)}
body.coach-mode .coach-main .composer textarea{width:100%!important;min-width:0!important;min-height:46px;height:46px;max-height:150px;resize:none;padding:11px 14px;border-radius:14px;background:var(--surface)!important;color:var(--t1)!important;border:1px solid var(--line)!important;overflow-y:auto}
body.coach-mode .coach-main .send{width:46px;height:46px;flex:0 0 46px;border-radius:14px}
body.coach-mode .coach-main .coach-attachment-preview{width:100%;flex:0 0 auto;padding:0 16px 8px!important;background:var(--surface)}

/* Attachment preview stays local and never pushes the composer outside the viewport. */
body.coach-mode .coach-main .coach-attachment{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;min-width:0;padding:8px 10px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2)}
body.coach-mode .coach-main .coach-attachment img{width:42px;height:42px;object-fit:cover;border-radius:9px;border:1px solid var(--line)}
body.coach-mode .coach-main .coach-attachment div{min-width:0}
body.coach-mode .coach-main .coach-attachment b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}
body.coach-mode .coach-main .coach-attachment span{display:block;color:var(--t3);font-size:10px;line-height:1.4;margin-top:2px}
body.coach-mode .coach-main .coach-attachment>button{width:30px;height:30px;border:1px solid var(--line);border-radius:9px;color:var(--t2);background:var(--surface)}

/* Drawer remains an application-level overlay. */
body.coach-mode .drawer-backdrop{z-index:200}
body.coach-mode .drawer{z-index:201}

/* Landscape: maximize horizontal space; never recreate the narrow desktop card. */
@media (orientation:landscape) and (max-height:700px){
  body.coach-mode .coach-topbar{height:56px;min-height:56px;flex-basis:56px;padding:7px 12px}
  body.coach-mode .coach-back-btn,body.coach-mode .coach-menu-btn{width:38px;height:38px;flex-basis:38px;border-radius:10px}
  body.coach-mode .coach-topbar-copy h2{font-size:19px}
  body.coach-mode .coach-topbar-copy p{display:none}
  body.coach-mode .coach-main .thread{padding:10px 14px 16px!important}
  body.coach-mode .coach-main .composer{padding:7px 12px calc(8px + env(safe-area-inset-bottom))!important;gap:7px}
  body.coach-mode .coach-main .composer-tool{width:40px;height:40px;flex-basis:40px}
  body.coach-mode .coach-main .composer textarea{height:40px;min-height:40px;padding:9px 12px}
  body.coach-mode .coach-main .send{width:40px;height:40px;flex-basis:40px}
}

@media(max-width:700px){
  body.coach-mode .coach-topbar{height:58px;min-height:58px;flex-basis:58px;padding:8px 16px}
  body.coach-mode .coach-back-btn,body.coach-mode .coach-menu-btn{width:38px;height:38px;flex-basis:38px;border-radius:11px}
  body.coach-mode .coach-topbar-copy h2{font-size:19px}
  body.coach-mode .coach-topbar-copy p{display:none}
  body.coach-mode .coach-main .thread{padding:10px 10px 16px!important}
  body.coach-mode .coach-main .composer{grid-template-columns:auto minmax(0,1fr) auto!important;gap:5px;padding:8px 10px calc(9px + env(safe-area-inset-bottom))!important}
  body.coach-mode .coach-main .composer-tools{gap:4px}
  body.coach-mode .coach-main .composer-tool{width:38px;height:38px;flex-basis:38px;border-radius:11px}
  body.coach-mode .coach-main .composer textarea{height:40px;min-height:40px;padding:9px 11px;font-size:14px}
  body.coach-mode .coach-main .send{width:40px;height:40px;flex-basis:40px;border-radius:12px}
  body.coach-mode .coach-main .coach-attachment-preview{padding:0 10px 7px!important}
  body.coach-mode .coach-main .empty{width:100%;padding:20px 16px 28px;box-sizing:border-box}
  body.coach-mode .coach-main .gate-full{width:100%;padding:20px 16px 28px;box-sizing:border-box}
  body.coach-mode .coach-main .gate-paths{grid-template-columns:1fr;gap:9px}
}

@media(max-width:380px){
  body.coach-mode .coach-main .composer-tool{width:36px;height:36px;flex-basis:36px}
  body.coach-mode .coach-main .send{width:38px;height:38px;flex-basis:38px}
  body.coach-mode .coach-main .composer textarea{font-size:13.5px}
}

html[data-theme="dark"] body.coach-mode .coach-main .thread::-webkit-scrollbar-thumb{background:rgba(201,190,176,.28);background-clip:padding-box}
html[data-theme="dark"] body.coach-mode .coach-main .thread{scrollbar-color:rgba(201,190,176,.28) transparent}
html[data-theme="dark"] body.coach-mode .coach-main .gate-card{background:#24211E}