#agent-dock-root {
  position: fixed;
  bottom: 0;
  right: 1rem;
  /* Explicit width — NOT intrinsic (max-content). Intrinsic sizing measures text
     as if it never wraps, so a single unbreakable string (e.g. a base64 chat-link
     token) would blow the dock out to its max-width and pin the chat flush-left.
     Base is 420px (chat only); `.has-copilot` widens it to fit the co-pilot panel;
     JS drag-resize / `.maximized` override `width`/`height` inline. */
  width: 420px;
  max-width: calc(100vw - 2rem);
  background: var(--bg-card);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius) var(--radius) 0 0;
  box-shadow: 0 -4px 28px rgba(0, 0, 0, 0.28);
  display: flex;
  flex-direction: column;
  z-index: 100;
  transition: var(--transition);
}

#agent-dock-root[hidden] { display: none; }

/* Co-pilot visible → widen the dock to fit chat (≥280px, grows) + the 320px
   co-pilot panel + the 6px drag divider. Driven by a class so width never
   depends on intrinsic content sizing. */
#agent-dock-root.has-copilot { width: 748px; }

/* Maximized → fill (almost) the whole viewport. JS toggles this; an explicit
   drag-resize sets inline width/height which takes precedence over both. */
#agent-dock-root.maximized {
  width: calc(100vw - 2rem);
  right: 1rem;
}

/* While dragging the resize handle, suppress text selection + the width
   transition so the dock tracks the cursor 1:1. */
#agent-dock-root.dock-resizing {
  transition: none;
  user-select: none;
}

/* Drag-to-resize handle — top-left corner (the dock is anchored bottom-right, so
   the top-left is the free corner that grows the panel). */
.agent-dock-resize {
  position: absolute;
  top: 0;
  left: 0;
  width: 16px;
  height: 16px;
  cursor: nwse-resize;
  z-index: 2;
  /* subtle diagonal grip */
  background: linear-gradient(135deg, var(--text-muted) 0 2px, transparent 2px 4px,
              var(--text-muted) 4px 6px, transparent 6px);
  opacity: 0.5;
  border-top-left-radius: var(--radius);
}
.agent-dock-resize:hover { opacity: 0.9; }

/* ── Tab strip ─────────────────────────────────────────────────────────── */

.agent-dock-tabs {
  display: flex;
  gap: 4px;
  padding: 6px 8px 0;
  border-bottom: 1px solid var(--border);
  align-items: flex-end;
}

.agent-dock-tab {
  padding: 7px 14px;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  background: var(--bg-input);
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  border: 1px solid transparent;
  border-bottom: none;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: var(--transition);
}

.agent-dock-tab:hover { background: var(--bg-hover); color: var(--text-primary); }

.agent-dock-tab.active {
  background: var(--bg-card);
  color: var(--text-primary);
  border-color: var(--border);
}

.agent-dock-tab .unread { color: var(--accent, #8b5cf6); margin-left: 4px; font-weight: 700; }

/* ── Panel ─────────────────────────────────────────────────────────────── */

.agent-dock-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* ── Conversation header ──────────────────────────────────────────────── */

.agent-dock-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-card);
  flex-shrink: 0;
}

.agent-dock-header .adh-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  flex-shrink: 0;
  background: var(--blue-bg, rgba(0, 122, 255, 0.12));
  color: var(--blue, #007aff);
}

.agent-dock-header .adh-info { display: flex; flex-direction: column; min-width: 0; gap: 1px; }

.agent-dock-header .adh-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.agent-dock-header .adh-sub {
  font-size: 11.5px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.agent-dock-header .adh-status {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--success, var(--green, #34c759));
  flex-shrink: 0;
}

.agent-dock-header .adh-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--success, var(--green, #34c759));
  box-shadow: 0 0 0 3px rgba(52, 199, 89, 0.20);
}

/* Customer offline — muted grey badge, no green glow */
.agent-dock-header .adh-status--away { color: var(--text-muted); }

.agent-dock-header .adh-status--away .adh-dot {
  background: var(--text-muted);
  box-shadow: none;
}

/* ── Message transcript ───────────────────────────────────────────────── */

.agent-dock-messages {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--bg-body, var(--bg-input));
}

.adm-empty {
  margin: auto;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
  padding: 0 24px;
}

.adm-row { display: flex; gap: 8px; max-width: 100%; align-items: flex-end; }
.adm-row--in { justify-content: flex-start; }
.adm-row--out { justify-content: flex-end; }

.adm-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
  background: var(--bg-hover);
  color: var(--text-secondary);
  border: 1px solid var(--border);
}

.adm-col { display: flex; flex-direction: column; max-width: 80%; min-width: 0; }
.adm-row--out .adm-col { align-items: flex-end; }

.adm-meta {
  display: flex;
  gap: 6px;
  align-items: baseline;
  margin: 0 4px 3px;
  line-height: 1;
}
.adm-name { font-size: 11px; font-weight: 600; color: var(--text-secondary); }
.adm-time { font-size: 10px; color: var(--text-muted); }

.adm-bubble {
  padding: 9px 13px;
  border-radius: 16px;
  font-size: 13.5px;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  max-width: 100%;
}
.adm-bubble a { color: inherit; text-decoration: underline; }

/* Customer (incoming) — neutral card, anchored left */
.adm-bubble--in {
  background: var(--bg-card);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-bottom-left-radius: 4px;
}

/* Agent reply ("You") — solid accent, anchored right */
.adm-bubble--you {
  background: var(--blue, #007aff);
  color: var(--text-always-white, #ffffff);
  border-bottom-right-radius: 4px;
}
.adm-bubble--you a { color: var(--text-always-white, #ffffff); }

/* Bot reply — tinted outline, anchored right, distinct from agent */
.adm-bubble--bot {
  background: var(--blue-bg, rgba(0, 122, 255, 0.10));
  color: var(--text-primary);
  border: 1px solid var(--blue, #007aff);
  border-bottom-right-radius: 4px;
}

/* System events — centered pill */
.adm-system {
  align-self: center;
  text-align: center;
  font-size: 11.5px;
  color: var(--text-muted);
  background: var(--bg-input);
  border: 1px solid var(--border);
  padding: 4px 12px;
  border-radius: 12px;
  max-width: 90%;
}

/* ── Composer ─────────────────────────────────────────────────────────── */

.agent-dock-composer {
  border-top: 1px solid var(--border);
  padding: 10px;
  display: flex;
  gap: 8px;
  align-items: center;
  background: var(--bg-card);
  flex-shrink: 0;
}

.agent-dock-composer input {
  flex: 1;
  min-width: 0;
  background: var(--bg-input);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 9px 14px;
  font-size: 13.5px;
  outline: none;
  transition: var(--transition);
}

.agent-dock-composer input:focus { border-color: var(--blue, #007aff); }
.agent-dock-composer input::placeholder { color: var(--text-muted); }

.agent-dock-composer button {
  border: 1px solid transparent;
  border-radius: 18px;
  padding: 8px 15px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: var(--transition);
}

.agent-dock-composer .ad-send {
  background: var(--blue, #007aff);
  color: var(--text-always-white, #ffffff);
}
.agent-dock-composer .ad-send:hover { filter: brightness(1.06); }

.agent-dock-composer .ad-end {
  background: transparent;
  color: var(--danger, var(--red, #ff3b30));
  border-color: var(--border);
}
.agent-dock-composer .ad-end:hover {
  background: var(--danger, var(--red, #ff3b30));
  color: var(--text-always-white, #ffffff);
  border-color: var(--danger, var(--red, #ff3b30));
}

/* ── Toast ────────────────────────────────────────────────────────────── */

.agent-dock-toast {
  background: var(--bg-card);
  color: var(--text-primary);
  border-left: 3px solid var(--accent, #8b5cf6);
  padding: 8px 12px;
  margin: 8px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
}

/* ── End-chat disposition modal ───────────────────────────────────────── */

.add-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1100;
}

.add-modal {
  background: var(--bg-card);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
  width: 360px;
  max-width: calc(100vw - 2rem);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.add-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
}

.add-field { display: flex; flex-direction: column; gap: 5px; }

.add-field-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-secondary);
}

/* Browsers default select/textarea backgrounds to white — pin them to the
   theme so the modal stays dark-mode safe. */
.add-select,
.add-notes {
  background: var(--bg-input);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  font-size: 13.5px;
  outline: none;
  transition: var(--transition);
  width: 100%;
}

.add-select:focus,
.add-notes:focus { border-color: var(--blue, #007aff); }

.add-notes {
  resize: vertical;
  min-height: 56px;
  font-family: inherit;
}
.add-notes::placeholder { color: var(--text-muted); }

.add-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 4px;
}

.add-actions button {
  border: 1px solid transparent;
  border-radius: 18px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
}

.add-cancel {
  background: transparent;
  color: var(--text-secondary);
  border-color: var(--border);
}
.add-cancel:hover { background: var(--bg-hover); color: var(--text-primary); }

.add-confirm {
  background: var(--danger, var(--red, #ff3b30));
  color: var(--text-always-white, #ffffff);
}
.add-confirm:hover { filter: brightness(1.06); }

/* ── Collapse ─────────────────────────────────────────────────────────── */

#agent-dock-root.collapsed .agent-dock-panels-row { display: none; }

.agent-dock-collapse {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px 8px;
  font-size: 11px;
  flex-shrink: 0;
  transition: var(--transition);
}

.agent-dock-collapse:hover { color: var(--text-primary); }

/* Maximize / restore button — sits next to collapse at the right of the tab strip.
   `margin-left: auto` on the expand button pushes both controls to the right. */
.agent-dock-expand {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px 6px;
  font-size: 13px;
  line-height: 1;
  flex-shrink: 0;
  transition: var(--transition);
}

.agent-dock-expand:hover { color: var(--text-primary); }

/* ── Panels row (chat + co-pilot side by side) ────────────────────────── */

.agent-dock-panels-row {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  /* Definite height so the column-flex panels inside resolve their own heights.
     JS drag-resize / `.maximized` override this inline to grow the dock. */
  height: 480px;
}

/* Chat panel grows to fill whatever width the root has left after the (fixed-width)
   co-pilot panel — so drag-resizing the dock enlarges the conversation, and with
   co-pilot hidden the chat simply fills the 420px base. */
.agent-dock-panels-row .agent-dock-panel {
  flex: 1 1 auto;
  min-width: 280px;
}

/* ── Co-pilot panel ───────────────────────────────────────────────────── */

.agent-dock-copilot {
  /* Co-pilot sits to the LEFT of the customer chat; the chat stays pinned to the
     bottom-right corner while the co-pilot expands inward. The seam between them
     is the draggable `.agent-dock-copilot-divider` (which the agent can drag to
     rebalance the split), so the co-pilot itself carries no border. `flex-basis`
     is set inline by the divider drag and persisted; 320px is the default. */
  flex: 0 0 320px;
  order: -1;
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  color: var(--text-primary);
  height: 100%;
  min-width: 0;
}

/* Vertical drag-divider between co-pilot (left) and chat (right). A 6px grab
   strip with a centred accent line; only present when the co-pilot is shown.
   Dragging it rebalances the co-pilot/chat split WITHOUT changing the overall
   dock width (the chat flexes to absorb the difference). */
.agent-dock-copilot-divider {
  order: -1; /* same group as co-pilot; DOM order places it just to its right */
  flex: 0 0 6px;
  align-self: stretch;
  position: relative;
  cursor: col-resize;
  display: none;
}
#agent-dock-root.has-copilot .agent-dock-copilot-divider { display: block; }
.agent-dock-copilot-divider::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  background: var(--accent, #8b5cf6);
  opacity: 0.5;
  transition: opacity var(--transition), width var(--transition);
}
.agent-dock-copilot-divider:hover::before { opacity: 1; width: 3px; }
#agent-dock-root.dock-resizing .agent-dock-copilot-divider::before { transition: none; }

.agent-dock-copilot-header {
  display: flex;
  align-items: center;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-card);
  flex-shrink: 0;
}

.agent-dock-copilot-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--accent, #8b5cf6);
}

.agent-dock-copilot-messages {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--bg-body, var(--bg-input));
}

.agent-dock-copilot-composer {
  border-top: 1px solid var(--border);
  padding: 8px 10px;
  display: flex;
  gap: 6px;
  align-items: center;
  background: var(--bg-card);
  flex-shrink: 0;
}

.agent-dock-copilot-composer input {
  flex: 1;
  min-width: 0;
  background: var(--bg-input);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 8px 12px;
  font-size: 13px;
  outline: none;
  transition: var(--transition);
}

.agent-dock-copilot-composer input:focus {
  border-color: var(--accent, #8b5cf6);
}

.agent-dock-copilot-composer input::placeholder {
  color: var(--text-muted);
}

.agent-dock-copilot-composer input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.agent-dock-copilot-composer .adc-send {
  background: var(--accent, #8b5cf6);
  color: var(--text-always-white, #ffffff);
  border: 1px solid transparent;
  border-radius: 18px;
  padding: 7px 13px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: var(--transition);
}

.agent-dock-copilot-composer .adc-send:hover { filter: brightness(1.08); }

.agent-dock-copilot-composer .adc-send:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ── Co-pilot message bubbles ─────────────────────────────────────────── */

.adc-row {
  display: flex;
  max-width: 100%;
}

.adc-row--agent { justify-content: flex-end; }
.adc-row--copilot { justify-content: flex-start; }

.adc-col {
  display: flex;
  flex-direction: column;
  max-width: 85%;
  min-width: 0;
}

.adc-row--agent .adc-col { align-items: flex-end; }

.adc-meta {
  display: flex;
  gap: 5px;
  align-items: baseline;
  margin: 0 3px 2px;
  line-height: 1;
}

.adc-name {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
}

.adc-time {
  font-size: 10px;
  color: var(--text-muted);
}

.adc-bubble {
  padding: 7px 11px;
  border-radius: 14px;
  font-size: 13px;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  max-width: 100%;
}

/* Agent message — accent-tinted (mirrors "you" but uses accent not blue) */
.adc-bubble--agent {
  background: var(--accent, #8b5cf6);
  color: var(--text-always-white, #ffffff);
  border-bottom-right-radius: 4px;
}

/* Co-pilot reply — subtle hover-bg with accent border */
.adc-bubble--copilot {
  background: var(--bg-hover);
  color: var(--text-primary);
  border: 1px solid var(--accent, #8b5cf6);
  border-bottom-left-radius: 4px;
}

/* "Co-pilot is thinking…" placeholder — three pulsing dots while the LLM runs */
.adc-bubble--thinking {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 1em;
}

.adc-bubble--thinking .adc-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-muted);
  opacity: 0.4;
  animation: adc-dot-pulse 1.2s infinite ease-in-out both;
}

.adc-bubble--thinking .adc-dot:nth-child(2) {
  animation-delay: 0.2s;
}

.adc-bubble--thinking .adc-dot:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes adc-dot-pulse {
  0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
  40% { opacity: 1; transform: scale(1); }
}