/* The direct-channel dialog: the bench's visual system in a modal console.
   Same near-solid ground, drafting-line borders, mono type, square corners
   and amber focus treatment. Roughly 420px on desktop; a near-full-height
   sheet on small screens with the composer above the keyboard. */

.chat{
  --panel-ink:#E7EBEF;
  --panel-dim:#AFB7BE;
  --panel-line:rgba(140,150,160,.55);
  --panel-ground:#101215;
  width:min(420px,calc(100vw - 24px));
  max-height:min(640px,calc(100dvh - 24px));
  padding:0;border:1px solid var(--panel-line);border-radius:0;
  background:rgba(16,18,21,.985);color:var(--panel-ink);
  font-family:'Berkeley Mono','SF Mono',ui-monospace,monospace;
  font-size:11px;line-height:1.5;letter-spacing:.02em;
  display:none;flex-direction:column;
}
.chat[open]{display:flex}
.chat::backdrop{background:rgba(0,0,0,.55)}

/* `hidden` is only display:none in the UA stylesheet, so any author rule that
   sets display silently beats it, and the panels below are toggled by the
   controller while setting display:flex. `!important` rather than ordering or
   specificity: the controller's intent must win wherever this rule sits. */
.chat [hidden]{display:none !important}

.chat .chat-head{display:flex;justify-content:space-between;align-items:center;
  border-bottom:1px solid var(--panel-line);padding:7px 9px}
.chat h2{font-size:11px;font-weight:400;letter-spacing:.12em;color:var(--amber,#FF4766)}
.chat .chat-x{font:inherit;color:var(--panel-dim);background:transparent;border:0;
  cursor:pointer;padding:2px 4px}
.chat .chat-x:hover{color:var(--amber,#FF4766)}

.chat form{padding:9px}
.chat label{display:block;color:var(--panel-dim);letter-spacing:.1em;padding-bottom:2px}
.chat input[type=email],.chat input[type=text],.chat textarea{
  display:block;width:100%;font:inherit;color:var(--panel-ink);background:rgba(0,0,0,.35);
  border:1px solid var(--panel-line);padding:5px 6px;margin-bottom:7px;border-radius:0}
.chat textarea{resize:vertical;min-height:44px}
.chat input:focus-visible,.chat textarea:focus-visible,.chat button:focus-visible,
.chat a:focus-visible{outline:1px solid var(--amber,#FF4766);outline-offset:1px}
.chat [aria-invalid=true]{border-color:var(--amber,#FF4766)}
.chat .err{color:var(--amber,#FF4766);margin:-5px 0 7px}
.chat .err:empty{display:none}
.chat .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.chat .cf:not(:empty){margin:2px 0 8px}
.chat .send{width:100%;font:inherit;color:var(--panel-ink);background:transparent;
  border:1px solid var(--panel-line);padding:5px 0;margin-top:2px;cursor:pointer;
  letter-spacing:.08em}
.chat .send:hover:not(:disabled){border-color:var(--amber,#FF4766);color:var(--amber,#FF4766)}
.chat .send:disabled{opacity:.55;cursor:default}

.chat .chat-privacy{color:var(--panel-dim);padding:2px 0 4px}
.chat .chat-privacy a{color:var(--panel-ink)}
.chat .chat-note{color:var(--panel-dim);letter-spacing:.1em;padding-bottom:6px}

.chat .chat-active{display:flex;flex-direction:column;min-height:0;flex:1}
.chat .chat-meta{color:var(--panel-dim);padding:4px 9px 0}
.chat .chat-transcript{list-style:none;margin:6px 0 0;padding:0 9px;
  overflow-y:auto;flex:1;min-height:80px}
.chat .chat-transcript li{padding:4px 0;border-top:1px solid rgba(140,150,160,.2)}
.chat .chat-transcript li:first-child{border-top:0}
.chat .msg-head{color:var(--panel-dim);letter-spacing:.08em}
.chat .msg-head .msg-actor-operator{color:var(--amber,#FF4766)}
.chat .msg-state{color:var(--panel-dim)}
.chat .msg-state.is-bad{color:var(--amber,#FF4766)}
.chat .msg-body{white-space:pre-wrap;word-break:break-word}
.chat .chat-composer-form{border-top:1px solid var(--panel-line);margin-top:6px}

.chat .chat-expired-panel{padding:9px}
.chat .chat-expired-panel p{letter-spacing:.12em;color:var(--amber,#FF4766);padding-bottom:6px}

.chat .chat-foot{display:flex;justify-content:space-between;align-items:center;gap:8px;
  border-top:1px solid var(--panel-line);padding:5px 9px}
.chat .chat-status{color:var(--panel-dim);word-break:break-word;min-height:1em}
.chat .chat-status.is-bad{color:var(--amber,#FF4766)}
.chat .chat-sound{font:inherit;color:var(--panel-dim);background:transparent;
  border:1px solid var(--panel-line);padding:2px 6px;cursor:pointer;white-space:nowrap}
.chat .chat-sound:hover{color:var(--amber,#FF4766);border-color:var(--amber,#FF4766)}

.chat-now{margin-top:0}
/* The divider between routes. A rule, not the word OR: the routes are not
   competing answers to one question, and JOIN in particular is a way in
   rather than another way to send us something. */
.route-rule{color:var(--panel-dim);text-align:center;letter-spacing:.1em;padding:7px 0 5px}

/* small screens: a near-full-height sheet, composer above the keyboard */
@media (max-width:480px){
  .chat{width:calc(100vw - 12px);max-height:calc(100dvh - 12px);
    margin:6px auto auto}
}

@media (prefers-reduced-motion:reduce){
  .chat,.chat *{animation:none;transition:none}
}