/* ───────────────────────────────────────────────────────────────────────────
   The chat and voice widget - the shell only.

   This file styles the container the real widget lives in. Task 15 replaces
   what is inside .sdw__body and .sdw__voice; it does not touch this file.

   The widget deliberately carries its own small mark. When a bank sees this
   page they should be able to tell which part is their website and which part
   is ours.
   ─────────────────────────────────────────────────────────────────────────── */

.sdw {
  position: fixed; right: 22px; bottom: 22px; z-index: 90;
  font-family: var(--sans);
}
@media (max-width: 520px) { .sdw { right: 14px; bottom: 14px; left: 14px; } }

/* ── launcher ────────────────────────────────────────────────────────────── */

.sdw__launch {
  display: flex; align-items: center; gap: 11px;
  padding: 13px 20px 13px 15px; border-radius: 100px;
  background: linear-gradient(135deg, var(--brand), var(--brand-900));
  color: #fff; font-weight: 570; font-size: .93rem;
  box-shadow: 0 10px 30px -8px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.22);
  transition: transform .26s var(--ease), box-shadow .26s var(--ease);
  margin-left: auto;
}
.sdw__launch:hover { transform: translateY(-3px); box-shadow: 0 18px 44px -10px rgba(0,0,0,.5); }
.sdw.is-open .sdw__launch { display: none; }

.sdw__pulse {
  position: relative; width: 26px; height: 26px; flex-shrink: 0;
  display: grid; place-items: center;
}
.sdw__pulse::before {
  content: ""; position: absolute; inset: -6px; border-radius: 100px;
  background: rgba(255,255,255,.28);
  animation: sdw-pulse 2.4s var(--ease) infinite;
}
@keyframes sdw-pulse {
  0%   { transform: scale(.7); opacity: .8; }
  70%  { transform: scale(1.5); opacity: 0; }
  100% { transform: scale(1.5); opacity: 0; }
}

/* ── panel ───────────────────────────────────────────────────────────────── */

.sdw__panel {
  width: min(392px, calc(100vw - 28px));
  height: min(620px, calc(100vh - 110px));
  display: none; flex-direction: column;
  background: var(--paper); border-radius: 22px; overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: 0 30px 70px -18px rgba(15,34,51,.42), 0 4px 12px rgba(15,34,51,.08);
  transform-origin: bottom right;
  animation: sdw-in .3s var(--ease);
}
.sdw.is-open .sdw__panel { display: flex; }
@keyframes sdw-in {
  from { opacity: 0; transform: translateY(14px) scale(.97); }
  to   { opacity: 1; transform: none; }
}

.sdw__head {
  padding: 16px 16px 0;
  background: linear-gradient(150deg, var(--brand-900), var(--brand-800));
  color: #fff; flex-shrink: 0;
}
.sdw__headrow { display: flex; align-items: center; gap: 11px; }
.sdw__avatar {
  width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0;
  display: grid; place-items: center;
  background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.22);
}
.sdw__who { flex: 1; min-width: 0; }
.sdw__name { font-weight: 620; font-size: .95rem; letter-spacing: -.015em; }
.sdw__state {
  font-size: .74rem; color: rgba(255,255,255,.68);
  display: flex; align-items: center; gap: 6px;
}
.sdw__dot {
  width: 6px; height: 6px; border-radius: 100px; background: #38d18b;
  box-shadow: 0 0 0 3px rgba(56,209,139,.22);
}
.sdw__x { padding: 7px; border-radius: 9px; color: rgba(255,255,255,.72); }
.sdw__x:hover { background: rgba(255,255,255,.12); color: #fff; }

.sdw__tabs { display: flex; gap: 4px; margin-top: 14px; }
.sdw__tab {
  flex: 1; padding: 10px; border-radius: 10px 10px 0 0;
  font-size: .85rem; font-weight: 560; color: rgba(255,255,255,.66);
  display: flex; align-items: center; justify-content: center; gap: 7px;
  transition: background-color .2s, color .2s;
}
.sdw__tab:hover { color: #fff; background: rgba(255,255,255,.08); }
.sdw__tab.is-on { background: var(--paper); color: var(--brand-900); font-weight: 620; }

/* ── chat ────────────────────────────────────────────────────────────────── */

.sdw__body {
  flex: 1; overflow-y: auto; padding: 18px 16px;
  display: flex; flex-direction: column; gap: 12px;
  background: var(--mist);
  scrollbar-width: thin;
}
.sdw__body::-webkit-scrollbar { width: 6px; }
.sdw__body::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 100px; }

.sdw__msg {
  max-width: 84%; padding: 11px 15px; border-radius: 16px;
  font-size: .9rem; line-height: 1.55;
  animation: sdw-msg .28s var(--ease);
}
@keyframes sdw-msg { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
.sdw__msg--bot  { background: var(--paper); border: 1px solid var(--line); border-bottom-left-radius: 5px; align-self: flex-start; }
.sdw__msg--me   { background: var(--brand); color: #fff; border-bottom-right-radius: 5px; align-self: flex-end; }
.sdw__msg--sys  {
  align-self: center; text-align: center; max-width: 100%;
  background: none; border: 0; color: var(--text-3);
  font-size: .76rem; letter-spacing: .01em;
}
.sdw__cite {
  margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line);
  font-size: .74rem; color: var(--text-3);
}
.sdw__cite a { color: var(--brand); }

.sdw__typing { display: flex; gap: 4px; padding: 13px 15px; }
.sdw__typing i {
  width: 6px; height: 6px; border-radius: 100px; background: var(--text-3);
  animation: sdw-bounce 1.3s infinite;
}
.sdw__typing i:nth-child(2) { animation-delay: .18s; }
.sdw__typing i:nth-child(3) { animation-delay: .36s; }
@keyframes sdw-bounce { 0%,60%,100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-4px); } }

.sdw__sugs { display: flex; flex-wrap: wrap; gap: 7px; padding: 0 16px 12px; background: var(--mist); }
.sdw__sug {
  padding: 7px 13px; border-radius: 100px; font-size: .8rem;
  background: var(--paper); border: 1px solid var(--line-2); color: var(--text-2);
  transition: all .2s var(--ease);
}
.sdw__sug:hover { border-color: var(--brand); color: var(--brand); }

/* The one place the widget asks for something other than a sentence: a mobile
   number, when somebody in a chat queue wants ringing back and we have no way
   to reach them. It sits in the suggestion row, so it appears where the chip
   they just pressed was, rather than as a new kind of thing on the screen. */
.sdw__cbnum { display: flex; gap: 7px; width: 100%; }
.sdw__cbnum input {
  flex: 1; min-width: 0;
  padding: 7px 13px; border-radius: 100px; font-size: .8rem;
  background: var(--paper); border: 1px solid var(--line-2); color: var(--text);
  transition: border-color .2s var(--ease);
}
.sdw__cbnum input:focus { outline: none; border-color: var(--brand); }
.sdw__cbnum input[aria-invalid="true"] { border-color: #c0392b; }
.sdw__cbnum input[aria-invalid="true"]::placeholder { color: #c0392b; }

.sdw__compose {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 14px; border-top: 1px solid var(--line);
  background: var(--paper); flex-shrink: 0;
}
.sdw__compose input {
  flex: 1; border: 1px solid var(--line-2); border-radius: 100px;
  padding: 11px 16px; font-size: .9rem; outline: 0; min-width: 0;
  transition: border-color .2s;
}
.sdw__compose input:focus { border-color: var(--brand); }
.sdw__send {
  width: 40px; height: 40px; border-radius: 100px; flex-shrink: 0;
  display: grid; place-items: center;
  background: var(--brand); color: #fff;
  transition: background-color .2s, transform .2s;
}
.sdw__send:hover { background: var(--brand-800); transform: scale(1.05); }

/* ── voice ───────────────────────────────────────────────────────────────── */

.sdw__voice {
  flex: 1; display: none; flex-direction: column;
  align-items: center; justify-content: center; gap: 22px;
  padding: 30px 24px; text-align: center; background: var(--mist);
}
.sdw[data-mode="voice"] .sdw__voice { display: flex; }
.sdw[data-mode="voice"] .sdw__body,
.sdw[data-mode="voice"] .sdw__sugs,
.sdw[data-mode="voice"] .sdw__compose { display: none; }
/* THE IVR OPTIONS ARE THE ONE THING A CALLER MAY PRESS · B53, 27 September.
   The menu carries `sdw__sugs` for its look, and the rule above hides every
   `sdw__sugs` on a call. Inside the voice panel it has to stay visible, or the
   caller is told to choose and given nothing to choose with. */
.sdw[data-mode="voice"] .sdw__voice .sdw__menu { display: flex; }

/* ── the bank's menu ──────────────────────────────────────────────────────
   Ten options as wrapped pills read as a pile of chips, which is what Rafiul
   saw on 27 September. A telephone menu is a numbered list, so it is drawn as
   one: a keypad-style badge, the option beside it, one per line, in a card of
   its own so it does not look like part of the sentence above it. */
.sdw__menu {
  display: flex; flex-direction: column; gap: 2px; box-sizing: border-box;
  /* Never squeezed by the thread it sits in, and never wider than it: without
     these two the card was crushed to one visible option with a sideways
     scrollbar under it. */
  flex: 0 0 auto; width: auto; align-self: stretch;
  margin: 4px 16px 12px; padding: 10px 0 6px;
  background: var(--paper); border: 1px solid var(--line-2); border-radius: 14px;
  box-shadow: 0 6px 18px -14px rgba(0,0,0,.35);
  max-height: 300px; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
}
.sdw__menuh { padding: 0 14px 8px; display: flex; flex-direction: column; gap: 2px; text-align: left; }
.sdw__menuh b { font-size: .82rem; font-weight: 600; color: var(--text); }
.sdw__menuh span { font-size: .72rem; color: var(--text-2); }

/* Each option. `sdw__sug` is kept for the shared hover and focus behaviour;
   everything about the shape is overridden here. */
.sdw__mopt {
  display: flex; align-items: center; gap: 11px; width: 100%; box-sizing: border-box;
  padding: 9px 14px; border: 0; border-radius: 0; background: none;
  font-size: .84rem; text-align: left; color: var(--text);
  transition: background .15s var(--ease);
}
.sdw__mopt:hover { background: var(--mist); border-color: transparent; color: var(--text); }
.sdw__mopt:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.sdw__mkey {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 8px;
  display: grid; place-items: center;
  font: 600 .78rem/1 var(--mono, ui-monospace, monospace);
  background: var(--mist); border: 1px solid var(--line-2); color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
.sdw__mopt:hover .sdw__mkey { background: var(--brand); border-color: var(--brand); color: #fff; }
.sdw__mlab { flex: 1; min-width: 0; }

/* On a call the panel is the whole window, so the list uses it: full width,
   and it scrolls rather than pushing the microphone off the screen. */
.sdw[data-mode="voice"] .sdw__voice .sdw__menu {
  flex-direction: column; width: 100%; max-width: 330px;
  margin: 0 0 4px; max-height: none; text-align: left;
}

/* A CALL WITH A MENU IS A DIFFERENT SCREEN. Without this the microphone keeps
   the middle of the panel and the list is pushed against the bottom edge, half
   of it out of sight. The list is what the caller has to act on, so it gets the
   room and the microphone becomes a small badge that says the line is open. */
.sdw[data-mode="voice"].has-menu .sdw__voice {
  justify-content: flex-start; gap: 12px; padding: 18px 16px 16px;
}
.sdw[data-mode="voice"].has-menu .sdw__orb { width: 56px; height: 56px; box-shadow: 0 8px 18px -10px rgba(0,0,0,.4); }
.sdw[data-mode="voice"].has-menu .sdw__orb svg { width: 24px; height: 24px; }
.sdw[data-mode="voice"].has-menu .sdw__wave { display: none; }
.sdw[data-mode="voice"].has-menu .sdw__vtext { font-size: .84rem; }

/* THE CODE BOX ON A CALL · B63. A code cannot be said aloud - the bridge
   refuses one on purpose - so on a web call this box is the ONLY way in, and
   every operation that needs authentication stops here. It sat in the chat
   body, which is hidden behind the voice panel, so a caller was told to type
   into a box that was not on the screen. It goes on the panel they are looking
   at, wide enough to be obvious and tall enough to hit on a phone. */
.sdw[data-mode="voice"] .sdw__codebox--call {
  width: 100%; max-width: 330px; margin: 10px 0 0;
  display: flex; gap: 8px; align-items: center;
}
.sdw[data-mode="voice"] .sdw__codebox--call .sdw__codein {
  flex: 1 1 auto; min-width: 0; text-align: center;
  font-size: 1.05rem; letter-spacing: .18em; padding: 11px 12px;
}
.sdw[data-mode="voice"] .sdw__codebox--call .sdw__sug { flex: 0 0 auto; padding: 11px 16px; }

.sdw__orb {
  width: 116px; height: 116px; border-radius: 100px;
  display: grid; place-items: center; position: relative;
  background: linear-gradient(140deg, var(--brand), var(--brand-900));
  color: #fff;
  box-shadow: 0 18px 40px -12px rgba(0,0,0,.4);
  transition: transform .3s var(--ease);
}
.sdw__orb:hover { transform: scale(1.04); }
.sdw__orb::before, .sdw__orb::after {
  content: ""; position: absolute; inset: 0; border-radius: 100px;
  border: 2px solid var(--brand); opacity: 0;
}
.sdw.is-listening .sdw__orb::before { animation: sdw-ring 2s var(--ease) infinite; }
.sdw.is-listening .sdw__orb::after  { animation: sdw-ring 2s var(--ease) .7s infinite; }
@keyframes sdw-ring {
  0%   { transform: scale(1); opacity: .55; }
  100% { transform: scale(1.75); opacity: 0; }
}

.sdw__wave { display: flex; align-items: center; gap: 4px; height: 34px; }
.sdw__wave i {
  width: 3px; border-radius: 100px; background: var(--brand-100); height: 7px;
  transition: height .12s linear, background-color .2s;
}
.sdw.is-listening .sdw__wave i { background: var(--brand); }

.sdw__vtext { font-size: .92rem; color: var(--text-2); min-height: 3.2em; line-height: 1.6; }
.sdw__vtext b { color: var(--text); font-weight: 600; }

/* ── footer mark ─────────────────────────────────────────────────────────── */

.sdw__mark {
  padding: 9px 14px; background: var(--paper);
  border-top: 1px solid var(--line);
  font-size: .68rem; color: var(--text-3); text-align: center;
  letter-spacing: .04em; flex-shrink: 0;
}
.sdw__mark b { color: var(--text-2); font-weight: 600; }