/* Wendy's chat language -- ONE visual voice for her three surfaces
   (design wendy.md 9.4 p.1): the sign-in porch (its first consumer),
   the floating terminal window, and the cabinet tab. Moved here FROM
   services/terminal/css/terminal.css at step 3 so the porch bubble and
   the live chat bubble cannot drift apart. Colors ride the shared
   palette of base.css (:root variables), loaded on every host. */

.wchat {
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
}

.wchat-name {
  color: var(--text-mute);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 0 4px;
}

/* The message bubble: asymmetric corner on the sender's side, like any
   messenger. Wendy sits left; the client's replies sit right with the
   mirrored corner and a warmer tint. */
.wchat-bubble {
  align-self: flex-start;
  max-width: 85%;
  background: rgba(56, 56, 56, 0.97);
  border-radius: 14px 14px 14px 4px;
  padding: 11px 15px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.4);
}

.wchat-bubble.from-client {
  align-self: flex-end;
  background: rgba(66, 50, 49, 0.97);
  border-radius: 14px 14px 4px 14px;
}

.wchat-text {
  color: var(--text);
  font-size: 14px;
  line-height: 1.55;
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

/* "Wendy is typing" -- the dots bubble every messenger shows before the
   message. steps() through one-two-three dots; an engine that cannot
   animate `content` shows the static dots, which is still the truth. */
.wchat-bubble.thinking .wchat-text::after {
  content: '···';
  color: var(--text-mute);
  letter-spacing: 2px;
  animation: wchat-think 1.1s steps(1) infinite;
}
@keyframes wchat-think {
  0% { content: '·'; }
  33% { content: '··'; }
  66% { content: '···'; }
}

/* Typewriter caret (the porch greeting types itself out). */
.wchat-text.typing::after {
  content: '▍';
  color: var(--accent);
  animation: wchat-blink 1s steps(1) infinite;
}
@keyframes wchat-blink { 50% { opacity: 0; } }

/* The reply chip: an action styled as the visitor's side of the chat
   (the porch's Google link; any future one-tap reply). */
.wchat-reply {
  align-self: flex-end;
  border-radius: 999px;
  padding: 8px 18px;
  font-size: 13px;
}

/* -- live chat pieces (window + cabinet tab) ------------------------- */

.wchat-feed {
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.wchat-input {
  display: flex;
  gap: 8px;
  align-items: flex-end;
}

.wchat-input textarea {
  flex: 1 1 auto;
  resize: none;
  background: #262626;
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  font: inherit;
  font-size: 14px;
  line-height: 1.4;
  padding: 8px 10px;
  min-height: 38px;
  max-height: 120px;
}

.wchat-input textarea:focus { outline: none; border-color: #707070; }

.wchat-send {
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 13px;
  cursor: pointer;
}
.wchat-send:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--accent);
}
.wchat-send:disabled { opacity: 0.5; cursor: default; }

.wchat-note { color: var(--text-mute); font-size: 12px; margin: 0; }
.wchat-note.error { color: #ef5350; }

/* -- the floating terminal window (design 9.2) ----------------------- */
/* Initiative is an INDICATOR, never a modal: the pill sits in the
   corner, does not cover the canvas or the trading zones, and expands
   only on the client's click. Everything stays below the sign-in
   overlay (z-index 200). */

/* The project has no global [hidden] rule -- it is declared per
   element -- so an author's display:flex below would outrank the UA
   sheet and pill.hidden would hide nothing (campaign C11). */
.wendy-pill[hidden], .wendy-window[hidden] { display: none; }

/* Anchored to the STATUS BAR, not to the canvas: the pill sits in the
   chrome strip under the chart, clear of the price scale and of the
   level buttons that live at the pane's right edge (campaign C6 --
   the first version overlapped exactly the trading zones its own
   comment promised to avoid). */
.wendy-pill {
  position: fixed;
  right: 8px;
  bottom: 1px;
  z-index: 150;
  display: flex;
  align-items: center;
  gap: 8px;
  background: #2f2f2f;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 10px;
  color: var(--text);
  font-size: 12px;
  line-height: 17px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}
.wendy-pill:hover { border-color: var(--accent); }

.wendy-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
}
.wendy-badge:empty { display: none; }

.wendy-window {
  position: fixed;
  right: 8px;
  bottom: 26px;
  z-index: 150;
  width: min(360px, calc(100vw - 32px));
  height: min(480px, calc(100vh - 90px));
  display: flex;
  flex-direction: column;
  background: #2f2f2f;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}

.wendy-window-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-bottom: 1px solid #3a3a3a;
}

.wendy-window-close {
  background: none;
  border: 0;
  color: var(--text-mute);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 6px;
}
.wendy-window-close:hover { color: var(--text); }

.wendy-window .wchat-feed { flex: 1 1 auto; padding: 12px; }
.wendy-window .wchat-input { padding: 8px 12px 12px; }
.wendy-window .wchat-note { padding: 0 12px 8px; }