/* COACH, on top of the suite look. 091826.
   suite.css is copied from ~/Documents/CLAUDE/Projects/Website/_build/tool-look-091726/suite.css.
   That file is the source. Change it there first, then copy it here and redeploy,
   or this app stops matching its own screenshot on the site. */

:root{--error:var(--red);--error-bg:var(--redwash)}

body{padding:56px 24px 32px}
.wrap{max-width:880px;gap:0}

.tool{display:flex;flex-direction:column}
#chat-container{display:none;flex-direction:column;flex:1;min-height:0}
/* the chat state is the one that wants the window; the picker sizes to itself */
.tool.chatting{min-height:calc(100vh - 128px)}
#chat-container .body{display:flex;flex-direction:column;flex:1;min-height:0}

.bar h1{font-size:17px}

/* --- the opening statement --- */
.lede{margin-bottom:26px}
.lede h2{font-size:21px;line-height:1.25;max-width:26ch}
.lede p{font-size:13px;max-width:66ch;margin-top:8px}
.seatcap{display:block;margin-bottom:10px}

/* --- the seat picker --- */
.opts.three{grid-template-columns:repeat(3,1fr);gap:14px;margin-top:0}
button.opt{font:inherit;text-align:left;color:var(--ink);background:var(--card);cursor:pointer;
  padding:16px 16px 18px;border-left:2px solid var(--line);
  transition:border-left-color .12s,background .12s,border-color .12s}
button.opt b{font-size:14px;margin-bottom:6px}
button.opt span{font-size:12px;line-height:1.45;display:block}
button.opt:hover{border-color:var(--rule);border-left-color:var(--red);background:var(--wash)}
button.opt:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.foot-note{margin:22px 0 0;padding-top:14px;border-top:1px solid var(--line);max-width:74ch}

/* --- messages: labelled the way the suite labels an ask and an answer --- */
.msg.user::before,.msg.assistant::before{display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--mid);font-weight:500;margin-bottom:6px}
.msg.user::before{content:"You"}
.msg.assistant::before{content:"Coach"}

.messages{flex:1;min-height:0;overflow-y:auto;padding-right:6px;margin-bottom:16px}
.msg{margin-bottom:20px;max-width:74ch}
.msg.user{background:var(--wash);border-left:2px solid var(--ink);padding:12px 16px;font-size:14px;white-space:pre-wrap;word-wrap:break-word}
.msg.assistant{font-size:14px;line-height:1.6}
.msg.assistant p{margin-bottom:10px}
.msg.assistant p:last-child{margin-bottom:0}
.msg.assistant strong{font-weight:600}
.msg.assistant em{font-style:italic}
.msg.assistant code{background:var(--wash);padding:1px 5px;font-family:ui-monospace,Menlo,monospace;font-size:.9em}
.msg.assistant ul,.msg.assistant ol{margin:8px 0 12px;padding-left:22px}
.msg.assistant li{margin-bottom:5px}
.msg.assistant h2,.msg.assistant h3{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--mid);font-weight:500;margin:18px 0 8px}
.msg.error{border:1px solid var(--red);border-left:2px solid var(--red);background:var(--redwash);color:var(--red);padding:12px 16px;font-size:13px}
.msg.error button{display:block;margin-top:10px;font:inherit;font-size:13px;font-weight:500;padding:6px 13px;border:1px solid var(--red);background:var(--red);color:var(--paper);cursor:pointer}

.typing{display:inline-flex;gap:6px;align-items:center;padding:4px 0}
.typing span{width:6px;height:6px;background:var(--mid);animation:blink 1.4s infinite ease-in-out}
.typing span:nth-child(2){animation-delay:.2s}
.typing span:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,60%,100%{opacity:.25}30%{opacity:1}}
@media (prefers-reduced-motion:reduce){.typing span{animation:none;opacity:.5}}

/* --- the scenario chips --- */
.sample-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.sample-label{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--mid);font-weight:500;width:100%;padding-top:2px}
.sample-chip{font:inherit;font-size:12px;padding:6px 10px;border:1px solid var(--line);background:var(--wash);color:var(--mid);cursor:pointer;text-align:left;transition:border-color .12s,color .12s}
.sample-chip:hover{border-color:var(--ink);color:var(--ink)}

/* --- the box you type in --- */
textarea.draft{width:100%;font:inherit;font-size:14px;line-height:1.55;color:var(--ink);background:var(--card);resize:vertical;min-height:92px;max-height:240px;padding:13px 15px}
textarea.draft::placeholder{color:var(--mid)}
textarea.draft:focus{outline:none;border-color:var(--ink)}
.safe{margin:9px 0 0;font-size:12px}

.foot .btn{cursor:pointer}
.foot .btn:disabled{opacity:.4;cursor:not-allowed}
.credit{font-size:12px;color:var(--mid);margin-top:16px}
.credit a{color:var(--ink)}

.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

@media (max-width:760px){
  body{padding:18px 12px 22px}
  .tool.chatting{min-height:calc(100vh - 56px)}
  .lede h2{font-size:18px;max-width:none}
  .opts.three{grid-template-columns:1fr;gap:10px}
  button.opt{padding:14px 14px 15px}
  .sample-chip{white-space:normal}
  .foot{flex-direction:row}
  .foot .btn{width:auto;flex:1}
}

/* --- dark, so the app does not glare at a leader working at night --- */
@media (prefers-color-scheme:dark){
  :root{--paper:#191917;--card:#232321;--ink:#EDEDE8;--mid:#A6A6A0;--line:#3A3A36;--rule:#4A4A45;--wash:#2A2A27;
    --red:#E0685A;--redwash:#33201D;--blue:#7FB3CE;--bluewash:#1E2A31;--green:#8CBF9F;--greenwash:#20291F}
  .btn{background:var(--ink);color:#191917;border-color:var(--ink)}
  .btn.o{background:transparent;color:var(--ink)}
  .msg.error button{color:#191917}
}