/* ============================================================
 * Bzzip Inbox — Design tokens & layout
 *
 * Ported from Claude Design mockups in
 * /tmp/bzzip_design/bzzip-mvp-chats/project/{shared,inbox-desktop,inbox-mobile}.jsx
 *
 * Three-pane desktop layout:
 *   [ Sidebar 280 ]  [ List 340 ]  [ Thread flex ]  [ Customer 340 ]
 * Down to 1024px the right Customer pane hides behind a "Details" toggle.
 * Down to 768px the left Sidebar hides behind a hamburger toggle.
 * ============================================================ */

/* ---------- Tokens (T) from shared.jsx ----------------------- */
:root {
  --bz-primary: #0ea5e9;
  --bz-primary-hover: #0284c7;
  --bz-focus-ring: rgba(14, 165, 233, 0.15);

  --bz-bg0: #ffffff;
  --bz-bg1: #f8fafc;
  --bz-bg2: #f1f5f9;
  --bz-bg3: #e2e8f0;

  --bz-text0: #0f172a;
  --bz-text1: #334155;
  --bz-text2: #475569;
  --bz-text3: #64748b;
  --bz-text4: #94a3b8;

  /* Status pills */
  --bz-status-open-fg: #ef4444;
  --bz-status-open-bg: #fee2e2;
  --bz-status-assigned-fg: #f97316;
  --bz-status-assigned-bg: #ffedd5;
  --bz-status-in_progress-fg: #3b82f6;
  --bz-status-in_progress-bg: #dbeafe;
  --bz-status-waiting-fg: #eab308;
  --bz-status-waiting-bg: #fef9c3;
  --bz-status-closed-fg: #64748b;
  --bz-status-closed-bg: #f1f5f9;

  /* Platforms */
  --bz-wa-solid: #25d366;
  --bz-wa-soft: #dcfce7;
  --bz-fb-solid: #1877f2;
  --bz-fb-soft: #dbeafe;
  --bz-ig-soft: #fce7f3;
  --bz-ig-gradient: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
  --bz-tt-solid: #010101;
  --bz-tt-soft: #f1f5f9;

  /* SLA */
  --bz-sla-safe-bg: #dcfce7;
  --bz-sla-safe-fg: #166534;
  --bz-sla-warn-bg: #fef9c3;
  --bz-sla-warn-fg: #854d0e;
  --bz-sla-hot-bg: #ffedd5;
  --bz-sla-hot-fg: #c2410c;
  --bz-sla-danger-bg: #fee2e2;
  --bz-sla-danger-fg: #dc2626;
  --bz-sla-paused-bg: #f1f5f9;
  --bz-sla-paused-fg: #64748b;

  --bz-font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --bz-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

/* ---------- Layout shell ------------------------------------- */

.inbox-page {
  display: grid;
  grid-template-columns: 280px 340px 1fr;
  height: calc(100vh - 64px);
  background: var(--bz-bg1);
  font-family: var(--bz-font);
  color: var(--bz-text0);
  font-size: 14px;
}

.conversation-page {
  display: grid;
  grid-template-columns: 280px 1fr 340px;
  height: calc(100vh - 64px);
  background: var(--bz-bg1);
  font-family: var(--bz-font);
  color: var(--bz-text0);
  font-size: 14px;
}

/* ---------- Left sidebar (filters) --------------------------- */

.inbox-sidebar {
  background: var(--bz-bg0);
  border-inline-end: 1px solid var(--bz-bg3);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  min-height: 0;
}

.inbox-sidebar__header {
  padding: 20px 20px 12px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.inbox-sidebar__title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--bz-text0);
}

.inbox-sidebar__count {
  font-size: 13px;
  color: var(--bz-text3);
}

.inbox-sidebar__group {
  padding: 8px 12px 12px;
}

.inbox-sidebar__group-label {
  padding: 8px 8px 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--bz-text3);
  margin: 0;
}

.inbox-sidebar__list {
  display: flex;
  flex-direction: column;
}

.inbox-filter {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  color: var(--bz-text2);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: start;
  font-family: inherit;
  width: 100%;
  transition: background 0.15s;
}

.inbox-filter:hover {
  background: var(--bz-bg2);
}

.inbox-filter.is-active {
  background: #eff6ff;
  color: var(--bz-primary);
}

.inbox-filter__icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.inbox-filter__label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inbox-filter__count {
  font-size: 12px;
  color: var(--bz-text3);
}

.inbox-filter.is-active .inbox-filter__count {
  color: var(--bz-primary);
}

.inbox-filter__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.inbox-filter__dot--open { background: var(--bz-status-open-fg); }
.inbox-filter__dot--assigned { background: var(--bz-status-assigned-fg); }
.inbox-filter__dot--in_progress { background: var(--bz-status-in_progress-fg); }
.inbox-filter__dot--waiting { background: var(--bz-status-waiting-fg); }
.inbox-filter__dot--closed { background: var(--bz-status-closed-fg); }

.inbox-filter__swatch {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--ws-c1, #0ea5e9), var(--ws-c2, #06b6d4));
}

/* Workspace gradients deterministically by index */
.ws-c-0 { --ws-c1: #fb7185; --ws-c2: #f59e0b; }
.ws-c-1 { --ws-c1: #60a5fa; --ws-c2: #22d3ee; }
.ws-c-2 { --ws-c1: #34d399; --ws-c2: #14b8a6; }
.ws-c-3 { --ws-c1: #a78bfa; --ws-c2: #ec4899; }
.ws-c-4 { --ws-c1: #f472b6; --ws-c2: #f97316; }
.ws-c-5 { --ws-c1: #facc15; --ws-c2: #84cc16; }
.ws-c-6 { --ws-c1: #38bdf8; --ws-c2: #6366f1; }
.ws-c-7 { --ws-c1: #fb923c; --ws-c2: #ef4444; }

/* ---------- Conversation list (middle column) ---------------- */

.inbox-list {
  background: var(--bz-bg0);
  border-inline-end: 1px solid var(--bz-bg3);
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
}

.inbox-list__head {
  padding: 14px 16px;
  border-bottom: 1px solid var(--bz-bg3);
  flex-shrink: 0;
}

.inbox-list__search {
  position: relative;
  display: flex;
  align-items: center;
  background: var(--bz-bg2);
  border-radius: 12px;
  padding: 0 12px;
  height: 36px;
}

.inbox-list__search-icon {
  width: 14px;
  height: 14px;
  color: var(--bz-text3);
  flex-shrink: 0;
}

.inbox-list__search-input {
  border: none;
  background: transparent;
  outline: none;
  margin-inline-start: 8px;
  font-size: 13px;
  color: var(--bz-text1);
  width: 100%;
  font-family: var(--bz-font);
}

.inbox-list__body {
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  min-height: 0;
}

/* ---------- Conversation card -------------------------------- */

.conversation-card {
  background: var(--bz-bg0);
  border: 1px solid var(--bz-bg3);
  border-radius: 10px;
  padding: 12px;
  display: flex;
  gap: 12px;
  text-decoration: none;
  color: inherit;
  position: relative;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.conversation-card:hover {
  border-color: var(--bz-primary);
  box-shadow: 0 1px 0 rgba(14, 165, 233, 0.08), 0 4px 16px rgba(14, 165, 233, 0.1);
}

.conversation-card.is-active {
  border-color: var(--bz-primary);
  box-shadow: 0 1px 0 rgba(14, 165, 233, 0.08), 0 4px 16px rgba(14, 165, 233, 0.1);
}

.conversation-card__avatar {
  position: relative;
  flex-shrink: 0;
}

.bz-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.3px;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--av-c1, #0ea5e9), var(--av-c2, #0284c7));
  overflow: hidden;
}

.bz-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.bz-avatar--sm { width: 28px; height: 28px; font-size: 11px; }
.bz-avatar--md { width: 36px; height: 36px; font-size: 13px; }
.bz-avatar--lg { width: 48px; height: 48px; font-size: 18px; }

/* 8 avatar gradient palettes from shared.jsx */
.av-c-0 { --av-c1: #fb7185; --av-c2: #f59e0b; }
.av-c-1 { --av-c1: #60a5fa; --av-c2: #22d3ee; }
.av-c-2 { --av-c1: #34d399; --av-c2: #14b8a6; }
.av-c-3 { --av-c1: #a78bfa; --av-c2: #ec4899; }
.av-c-4 { --av-c1: #f472b6; --av-c2: #f97316; }
.av-c-5 { --av-c1: #facc15; --av-c2: #84cc16; }
.av-c-6 { --av-c1: #38bdf8; --av-c2: #6366f1; }
.av-c-7 { --av-c1: #fb923c; --av-c2: #ef4444; }

.platform-badge {
  position: absolute;
  inset-inline-end: -3px;
  bottom: -3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 2px var(--bz-bg0);
}

.platform-badge--sm { width: 14px; height: 14px; box-shadow: 0 0 0 1.5px var(--bz-bg0); }
.platform-badge--md { width: 18px; height: 18px; box-shadow: 0 0 0 1.5px var(--bz-bg0); }

.platform-badge--whatsapp { background: var(--bz-wa-solid); }
.platform-badge--facebook { background: var(--bz-fb-solid); }
.platform-badge--instagram { background: var(--bz-ig-gradient); }
.platform-badge--tiktok { background: var(--bz-tt-solid); }

.platform-badge svg,
.platform-badge svg.platform-icon {
  width: 60%;
  height: 60%;
  color: #fff;
  fill: currentColor;
  background: transparent !important;
  border-radius: 0;
  display: block;
}

/* Override landing.css .platform-icon sizing when used inside our badge */
.platform-badge .platform-icon { background: transparent; }
.conversation-card__avatar .platform-badge svg { width: 12px; height: 12px; }
.platform-indicator .platform-badge svg { width: 11px; height: 11px; }

.conversation-card__content {
  flex: 1;
  min-width: 0;
}

.conversation-card__row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.conversation-card__name {
  font-size: 14px;
  font-weight: 600;
  color: var(--bz-text0);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.conversation-card__workspace {
  font-size: 12px;
  color: var(--bz-text3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.conversation-card__workspace::before {
  content: "·  /";
  margin-inline-end: 2px;
  color: var(--bz-text4);
}

.conversation-card__time {
  margin-inline-start: auto;
  font-size: 12px;
  color: var(--bz-text3);
  flex-shrink: 0;
}

.conversation-card__preview {
  margin-top: 4px;
  font-size: 13px;
  color: var(--bz-text3);
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.conversation-card__preview-sender {
  font-weight: 600;
  color: var(--bz-text2);
}

.conversation-card__preview--empty {
  color: var(--bz-text4);
  font-style: italic;
}

.conversation-card__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.conversation-card__assignee {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--bz-text3);
}

.conversation-card__assignee-icon {
  width: 12px;
  height: 12px;
}

.conversation-card__unread {
  margin-inline-start: auto;
  background: #ef4444;
  color: #fff;
  font-weight: 700;
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 24px;
  min-width: 18px;
  text-align: center;
}

/* ---------- Status pill -------------------------------------- */

.bz-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 24px;
  line-height: 1.2;
  border: none;
  cursor: default;
}

.bz-status-pill--open { background: var(--bz-status-open-bg); color: var(--bz-status-open-fg); }
.bz-status-pill--assigned { background: var(--bz-status-assigned-bg); color: var(--bz-status-assigned-fg); }
.bz-status-pill--in_progress { background: var(--bz-status-in_progress-bg); color: var(--bz-status-in_progress-fg); }
.bz-status-pill--waiting { background: var(--bz-status-waiting-bg); color: var(--bz-status-waiting-fg); }
.bz-status-pill--closed { background: var(--bz-status-closed-bg); color: var(--bz-status-closed-fg); }

.bz-status-pill__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.bz-status-pill--button {
  cursor: pointer;
}

.bz-status-pill__chev {
  width: 10px;
  height: 10px;
}

/* ---------- SLA pill ----------------------------------------- */

.sla-timer {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 24px;
  line-height: 1.2;
}

.sla-timer__icon {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
}

.sla-timer--green { background: var(--bz-sla-safe-bg); color: var(--bz-sla-safe-fg); }
.sla-timer--yellow { background: var(--bz-sla-warn-bg); color: var(--bz-sla-warn-fg); }
.sla-timer--orange { background: var(--bz-sla-hot-bg); color: var(--bz-sla-hot-fg); }
.sla-timer--red { background: var(--bz-sla-danger-bg); color: var(--bz-sla-danger-fg); }
.sla-timer--gray { background: var(--bz-sla-paused-bg); color: var(--bz-sla-paused-fg); }

.sla-timer--breached {
  animation: bz-pulse 1.2s ease-in-out infinite;
  font-weight: 700;
}

@keyframes bz-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

/* ---------- Thread (center) ---------------------------------- */

.conversation-thread {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--bz-bg1);
  min-height: 0;
}

/* Thread header */
.thread-header {
  background: var(--bz-bg0);
  border-bottom: 1px solid var(--bz-bg3);
  padding: 12px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.thread-header__contact {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.thread-header__name {
  font-size: 16px;
  font-weight: 700;
  color: var(--bz-text0);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.thread-header__divider {
  width: 1px;
  height: 18px;
  background: var(--bz-bg3);
  flex-shrink: 0;
}

.thread-header__workspace {
  font-size: 13px;
  color: var(--bz-text3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.thread-header__workspace::before {
  content: "/";
  margin-inline-end: 2px;
}

.thread-header__actions {
  margin-inline-start: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}

.thread-header__details-toggle {
  display: none;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: var(--bz-bg2);
  border: none;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--bz-text1);
  cursor: pointer;
  font-family: inherit;
}

.thread-header__details-toggle:hover { background: var(--bz-bg3); }

.thread-header__menu-toggle {
  display: none;
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  border-radius: 8px;
  cursor: pointer;
  color: var(--bz-text1);
  align-items: center;
  justify-content: center;
  padding: 0;
}

.thread-header__menu-toggle:hover { background: var(--bz-bg2); }

.thread-header__menu-toggle svg { width: 18px; height: 18px; }

/* Status dropdown */
.status-dropdown {
  position: relative;
}

.status-dropdown__menu {
  position: absolute;
  top: 100%;
  inset-inline-end: 0;
  margin-top: 4px;
  background: #fff;
  border: 1px solid var(--bz-bg3);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.1);
  min-width: 180px;
  z-index: 100;
  overflow: hidden;
  padding: 4px;
}

.status-dropdown__option {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  border: none;
  background: transparent;
  font-size: 13px;
  text-align: start;
  cursor: pointer;
  border-radius: 6px;
  color: var(--bz-text1);
  font-family: inherit;
}

.status-dropdown__option:hover { background: var(--bz-bg2); }

.status-dropdown__option .bz-status-pill__dot { background: currentColor; }
.status-dropdown__option.status-open { color: var(--bz-status-open-fg); }
.status-dropdown__option.status-assigned { color: var(--bz-status-assigned-fg); }
.status-dropdown__option.status-in_progress { color: var(--bz-status-in_progress-fg); }
.status-dropdown__option.status-waiting { color: var(--bz-status-waiting-fg); }
.status-dropdown__option.status-closed { color: var(--bz-status-closed-fg); }

/* Platform indicator (in header) */
.platform-indicator {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px 4px 4px;
  border-radius: 24px;
  font-size: 12px;
  font-weight: 600;
}

.platform-indicator--whatsapp { background: var(--bz-wa-soft); color: #166534; }
.platform-indicator--facebook { background: var(--bz-fb-soft); color: #1e3a8a; }
.platform-indicator--instagram { background: var(--bz-ig-soft); color: #831843; }
.platform-indicator--tiktok { background: var(--bz-tt-soft); color: var(--bz-text1); }

.platform-indicator .platform-badge { position: static; box-shadow: none; }

/* ---------- Messages list & bubbles -------------------------- */

.messages-container {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
  position: relative;
}

.day-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 4px 0 16px;
  color: var(--bz-text3);
}

.day-divider::before,
.day-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--bz-bg3);
}

.day-divider__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

.message {
  display: flex;
  flex-direction: column;
  margin-bottom: 14px;
  position: relative;
}

.message-inbound { align-items: flex-start; }
.message-outbound { align-items: flex-end; }

.message-row {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  max-width: 100%;
}

.message-inbound .message-row { justify-content: flex-start; }
.message-outbound .message-row { justify-content: flex-end; }

.message-row__avatar {
  flex-shrink: 0;
}

.message-bubble {
  max-width: min(70%, 560px);
  padding: 10px 12px;
  font-size: 14px;
  line-height: 1.5;
  position: relative;
  border-radius: 16px;
  word-break: break-word;
}

.message-inbound .message-bubble {
  background: #fff;
  border: 1px solid var(--bz-bg3);
  color: var(--bz-text0);
  border-end-start-radius: 4px;
}

.message-outbound .message-bubble {
  background: var(--bz-primary);
  color: #fff;
  border-end-end-radius: 4px;
}

.message-content {
  margin: 0 0 4px 0;
  white-space: pre-wrap;
}

/* Meta below content */
.message-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  font-size: 11px;
  margin-top: 4px;
}

.message-inbound .message-meta { color: var(--bz-text3); }
.message-outbound .message-meta { color: rgba(255, 255, 255, 0.85); }

.message-meta__separator { opacity: 0.65; }

.message-status { display: inline-flex; align-items: center; }
.message-status svg { width: 14px; height: 8px; }

.message-status.sent { color: rgba(255, 255, 255, 0.5); }
.message-status.delivered { color: rgba(255, 255, 255, 0.75); }
.message-status.read { color: #ffffff; }

/* Reply quote inside bubble */
.message-reply-quote {
  display: block;
  padding-inline-start: 8px;
  border-inline-start: 3px solid var(--bz-primary);
  margin-bottom: 6px;
  cursor: pointer;
  background: transparent;
  border-radius: 0;
}

.message-outbound .message-reply-quote {
  border-inline-start-color: #fff;
  opacity: 0.92;
}

.reply-quote-bar { display: none; } /* legacy alias, suppress */

.reply-quote-content { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.reply-quote-sender {
  font-size: 11px;
  font-weight: 700;
  color: var(--bz-primary);
}

.message-outbound .reply-quote-sender { color: #fff; }

.reply-quote-text {
  font-size: 12px;
  color: var(--bz-text3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.message-outbound .reply-quote-text { color: rgba(255, 255, 255, 0.85); }

/* Media */
.message-media {
  margin-bottom: 4px;
  width: clamp(180px, 42vw, 380px);
  max-width: 100%;
}

.message-image {
  width: 100%;
  max-height: min(55vh, 420px);
  border-radius: 8px;
  display: block;
  object-fit: contain;
}

.message-image-button {
  border: none;
  background: none;
  padding: 0;
  width: 100%;
  cursor: zoom-in;
}

.message-video,
.message-audio {
  width: 100%;
  max-height: min(55vh, 420px);
  border-radius: 8px;
  display: block;
}

.message-document {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
}

.message-outbound .message-document { background: rgba(255, 255, 255, 0.15); }

.document-icon { width: 20px; height: 20px; flex-shrink: 0; }
.document-name { font-size: 13px; word-break: break-all; }

.message-sticker { max-width: 128px; max-height: 128px; display: block; }

.message-media-pending {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px;
  border-radius: 8px;
  font-size: 13px;
  margin-bottom: 4px;
}

.message-inbound .message-media-pending { background: var(--bz-bg2); color: var(--bz-text3); }
.message-outbound .message-media-pending { background: rgba(255, 255, 255, 0.15); color: rgba(255, 255, 255, 0.85); }

.message-media-pending svg { width: 20px; height: 20px; flex-shrink: 0; }

/* Location */
.message-location { display: flex; flex-direction: column; gap: 6px; }
.location-map-link { text-decoration: none; color: inherit; }

.location-map-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 20px;
  border-radius: 8px;
}

.message-inbound .location-map-placeholder { background: var(--bz-bg2); color: var(--bz-primary); }
.message-outbound .location-map-placeholder { background: rgba(255, 255, 255, 0.15); color: rgba(255, 255, 255, 0.9); }

.location-icon-lg { width: 28px; height: 28px; }
.location-coords { font-size: 11px; opacity: 0.7; }
.location-name { font-size: 14px; font-weight: 500; }

/* Contact card */
.message-contact-card {
  display: flex;
  gap: 12px;
  padding: 12px;
  border-radius: 8px;
  margin-bottom: 4px;
}

.message-inbound .message-contact-card { background: var(--bz-bg1); }
.message-outbound .message-contact-card { background: rgba(255, 255, 255, 0.12); }

.contact-card-icon { flex-shrink: 0; }
.contact-card-icon svg { width: 24px; height: 24px; }
.contact-card-info { display: flex; flex-direction: column; gap: 2px; }
.contact-card-name { font-weight: 600; font-size: 14px; }
.contact-card-phone, .contact-card-email, .contact-card-org { font-size: 12px; opacity: 0.8; }

/* Template label */
.message-template-label {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 6px;
  border-radius: 4px;
  margin-bottom: 6px;
  background: rgba(0, 0, 0, 0.08);
  color: var(--bz-text3);
}

.message-outbound .message-template-label {
  background: rgba(255, 255, 255, 0.22);
  color: rgba(255, 255, 255, 0.95);
}

/* Hover action bar */
.message-actions-bar {
  position: absolute;
  top: -28px;
  display: none;
  gap: 4px;
  background: #fff;
  border: 1px solid var(--bz-bg3);
  border-radius: 8px;
  padding: 2px;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
  z-index: 10;
}

.message-inbound .message-actions-bar { inset-inline-end: 6px; }
.message-outbound .message-actions-bar { inset-inline-start: 6px; opacity: 0.95; }

.message-bubble:hover .message-actions-bar { display: flex; }

.msg-action-btn {
  width: 24px;
  height: 24px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--bz-text3);
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.msg-action-btn:hover {
  background: #eff6ff;
  color: var(--bz-primary);
}

/* Reactions row */
.message-reactions {
  display: flex;
  gap: 4px;
  margin-top: 4px;
  flex-wrap: wrap;
}

.message-outbound .message-reactions { justify-content: flex-end; }

.reaction-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: #fff;
  border: 1px solid var(--bz-bg3);
  border-radius: 12px;
  font-size: 12px;
  color: var(--bz-text1);
  line-height: 1.4;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.reaction-count {
  font-size: 11px;
  color: var(--bz-text3);
  font-weight: 500;
}

/* Reaction picker is positioned by JS — keep existing rules */
.reaction-picker {
  display: none;
  position: absolute;
  z-index: 30;
  background: #fff;
  border: 1px solid var(--bz-bg3);
  border-radius: 24px;
  padding: 4px 6px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  top: -48px;
}

.message-inbound .reaction-picker { inset-inline-start: 0; }
.message-outbound .reaction-picker { inset-inline-end: 0; }

.reaction-picker.is-visible { display: block; }

.reaction-picker.reaction-picker--expanded {
  border-radius: 12px;
  padding: 0;
  width: 320px;
  top: auto;
  bottom: 100%;
  margin-bottom: 4px;
}

.reaction-quick-row { display: flex; align-items: center; gap: 2px; }

.reaction-emoji-btn {
  padding: 3px 4px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 20px;
  border-radius: 6px;
  line-height: 1;
}

.reaction-emoji-btn:hover { transform: scale(1.25); background: var(--bz-bg2); }

.reaction-emoji-btn--grid {
  font-size: 22px;
  padding: 4px;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.reaction-expand-btn {
  padding: 3px 5px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--bz-text4);
  border-radius: 6px;
  display: flex;
  align-items: center;
  line-height: 1;
}

.reaction-expand-btn:hover { background: var(--bz-bg2); color: var(--bz-primary); }

.emoji-search-wrap { padding: 8px 8px 4px; }
.emoji-search-input {
  width: 100%;
  padding: 6px 10px;
  border: 1px solid var(--bz-bg3);
  border-radius: 8px;
  font-size: 13px;
  outline: none;
  background: var(--bz-bg1);
  box-sizing: border-box;
}
.emoji-search-input:focus { border-color: var(--bz-primary); background: #fff; }

.emoji-category-tabs {
  display: flex;
  gap: 0;
  padding: 4px 6px;
  border-bottom: 1px solid var(--bz-bg2);
  overflow-x: auto;
}

.emoji-cat-tab {
  padding: 4px 6px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
  border-radius: 6px;
  opacity: 0.5;
  flex-shrink: 0;
  line-height: 1;
}

.emoji-cat-tab:hover { opacity: 0.8; background: var(--bz-bg1); }
.emoji-cat-tab.is-active { opacity: 1; background: var(--bz-bg2); }

.emoji-grid-container {
  display: flex;
  flex-wrap: wrap;
  padding: 4px 6px 8px;
  max-height: 220px;
  overflow-y: auto;
  gap: 1px;
}

/* Media lightbox */
.media-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(15, 23, 42, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.media-lightbox[hidden] { display: none; }

.media-lightbox__image {
  max-width: min(92vw, 1400px);
  max-height: 88vh;
  border-radius: 10px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
}

.media-lightbox__close {
  position: fixed;
  top: 18px;
  inset-inline-end: 18px;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.8);
  color: #fff;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}

/* Highlight flash when scrolling to quoted msg */
@keyframes message-flash {
  0% { background: transparent; }
  30% { background: #fef3c7; }
  100% { background: transparent; }
}

.message-highlight .message-bubble { animation: message-flash 2s ease; }

/* ---------- Composer ----------------------------------------- */

.reply-form-container {
  background: var(--bz-bg0);
  border-top: 1px solid var(--bz-bg3);
  padding: 16px;
  position: relative;
  flex-shrink: 0;
}

.reply-form { display: flex; flex-direction: column; }

.reply-input-wrapper {
  position: relative;
  display: flex;
  gap: 10px;
  align-items: flex-end;
}

.reply-toolbar {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.toolbar-btn {
  width: 36px;
  height: 36px;
  padding: 0;
  background: var(--bz-bg2);
  border: 1px solid transparent;
  border-radius: 10px;
  cursor: pointer;
  color: var(--bz-text2);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
}

.toolbar-btn:hover { background: var(--bz-bg3); color: var(--bz-primary); }
.toolbar-btn.is-active { background: #eff6ff; color: var(--bz-primary); }
.toolbar-btn svg { width: 18px; height: 18px; }

.reply-input-column {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.reply-input-row {
  display: flex;
  flex-direction: column;
}

.reply-input {
  width: 100%;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--bz-bg3);
  border-radius: 12px;
  font-size: 14px;
  resize: none;
  outline: none;
  font-family: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
  line-height: 1.5;
  min-height: 44px;
  background: #fff;
}

.reply-input:focus {
  border-color: var(--bz-primary);
  box-shadow: 0 0 0 3px var(--bz-focus-ring);
}

.reply-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
}

.btn-template {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: #fff;
  border: 1px solid var(--bz-bg3);
  border-radius: 10px;
  cursor: pointer;
  color: var(--bz-text1);
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.btn-template:hover { background: var(--bz-bg2); border-color: var(--bz-bg3); color: var(--bz-primary); }
.btn-template svg { width: 14px; height: 14px; }

.btn-send {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--bz-primary);
  color: #fff;
  border: 1px solid transparent;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s;
}

.btn-send:hover:not(:disabled) { background: var(--bz-primary-hover); }
.btn-send:disabled { background: var(--bz-text4); cursor: not-allowed; }
.btn-send svg { width: 14px; height: 14px; }

/* Template / reply / media preview banners */
.template-notice { display: none; margin-bottom: 12px; }
.template-notice.is-visible { display: block; }

.template-notice__content {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
  border: 1px solid #fcd34d;
  border-radius: 12px;
}

.template-notice .notice-icon-wrap {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fef3c7;
  border: 2px solid #fbbf24;
  border-radius: 50%;
}

.template-notice .notice-icon { width: 20px; height: 20px; color: #d97706; }
.template-notice .notice-text { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.template-notice .notice-text strong { font-size: 13px; font-weight: 600; color: #92400e; }
.template-notice .notice-text span { font-size: 12px; color: #a16207; line-height: 1.4; }

.template-notice .notice-btn {
  flex-shrink: 0;
  padding: 8px 16px;
  background: #f59e0b;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}

.template-notice .notice-btn:hover { background: #d97706; }

.modal-error-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  margin: 12px 24px 0;
  background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
  border: 1px solid #fca5a5;
  border-radius: 10px;
  font-size: 13px;
  color: #991b1b;
  line-height: 1.4;
}

.template-modal__error-slot:empty { display: none; }
.modal-error-icon { width: 20px; height: 20px; color: #dc2626; flex-shrink: 0; }
.modal-error-banner span { flex: 1; }

.modal-error-close {
  flex-shrink: 0;
  padding: 4px;
  background: none;
  border: none;
  cursor: pointer;
  color: #b91c1c;
  border-radius: 4px;
  opacity: 0.6;
}

.modal-error-close:hover { opacity: 1; background: rgba(185, 28, 28, 0.08); }

.reply-preview {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  margin-bottom: 8px;
  background: #f0f9ff;
  border: 1px solid #bae6fd;
  border-radius: 10px;
}

.reply-preview-bar {
  width: 3px;
  height: 32px;
  background: var(--bz-primary);
  border-radius: 2px;
  flex-shrink: 0;
}

.reply-preview-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.reply-preview-sender { font-size: 12px; font-weight: 600; color: var(--bz-primary); }
.reply-preview-text {
  font-size: 13px;
  color: var(--bz-text2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reply-preview-close {
  padding: 4px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--bz-text4);
  border-radius: 4px;
  flex-shrink: 0;
}

.reply-preview-close:hover { background: #e0f2fe; color: var(--bz-primary-hover); }

.media-preview-area { display: none; }
.media-preview-area.has-preview { display: block; margin-bottom: 8px; }

.media-preview {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--bz-bg2);
  border: 1px solid var(--bz-bg3);
  border-radius: 10px;
}

.media-preview--image img,
.media-preview--video video {
  max-width: 150px;
  max-height: 80px;
  border-radius: 6px;
  object-fit: cover;
}

.media-preview--audio { flex-direction: column; align-items: flex-start; }
.media-preview--audio audio { width: 100%; }

.media-preview .doc-icon { width: 24px; height: 24px; color: var(--bz-text3); }
.media-preview .doc-info { display: flex; flex-direction: column; min-width: 0; }
.media-preview .file-name { font-size: 13px; font-weight: 500; color: var(--bz-text1); word-break: break-word; }
.media-preview .file-size { font-size: 11px; color: var(--bz-text4); }

.preview-remove {
  padding: 4px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--bz-text4);
  border-radius: 4px;
  margin-inline-start: auto;
}

.preview-remove:hover { background: var(--bz-bg3); color: #ef4444; }
.preview-remove svg { width: 16px; height: 16px; }

.media-caption-input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--bz-bg3);
  border-radius: 8px;
  font-size: 13px;
  margin-top: 8px;
  outline: none;
}

.media-caption-input:focus { border-color: var(--bz-primary); }
.hidden-file-input { display: none; }

/* Quick reply dropdown */
.quick-reply-dropdown {
  position: absolute;
  bottom: calc(100% + 8px);
  inset-inline-start: 56px;
  width: 320px;
  max-height: 400px;
  background: #fff;
  border: 1px solid var(--bz-bg3);
  border-radius: 12px;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.14);
  display: none;
  flex-direction: column;
  z-index: 100;
}

.quick-reply-dropdown.is-open { display: flex; }
.quick-reply-dropdown__header { padding: 10px; border-bottom: 1px solid var(--bz-bg3); }

.quick-reply-search {
  width: 100%;
  padding: 6px 10px;
  border: 1px solid var(--bz-bg3);
  border-radius: 8px;
  font-size: 13px;
  outline: none;
  background: var(--bz-bg2);
  box-sizing: border-box;
}

.quick-reply-search:focus { border-color: var(--bz-primary); background: #fff; }

.quick-reply-dropdown__list { flex: 1; overflow-y: auto; padding: 6px; max-height: 280px; }
.quick-reply-category { margin-bottom: 6px; }

.quick-reply-category-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--bz-text3);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  padding: 8px 10px 4px;
}

.quick-reply-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  padding: 8px 10px;
  background: none;
  border: none;
  border-radius: 8px;
  text-align: start;
  cursor: pointer;
  font-family: inherit;
}

.quick-reply-item:hover { background: #eff6ff; }

.quick-reply-shortcut {
  font-family: var(--bz-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--bz-primary);
}

.quick-reply-preview {
  font-size: 13px;
  color: var(--bz-text2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quick-reply-dropdown__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  border-top: 1px solid var(--bz-bg3);
  background: var(--bz-bg1);
  border-radius: 0 0 12px 12px;
  font-size: 11px;
  color: var(--bz-text3);
}

.quick-reply-manage-link { font-size: 12px; color: var(--bz-primary); text-decoration: none; }
.quick-reply-manage-link:hover { text-decoration: underline; }

.quick-reply-empty,
.quick-reply-loading {
  padding: 20px;
  text-align: center;
  color: var(--bz-text4);
  font-size: 13px;
}

/* Template modal kept as-is (functional) */
.template-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.template-modal.is-open { display: flex; }
.template-modal__content {
  background: white;
  border-radius: 16px;
  width: 90%;
  max-width: 800px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.template-modal__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid var(--bz-bg3);
}

.template-modal__header h2 { margin: 0; font-size: 18px; font-weight: 600; }

.modal-close { padding: 8px; background: none; border: none; cursor: pointer; color: var(--bz-text3); border-radius: 8px; }
.modal-close:hover { background: var(--bz-bg2); }
.modal-close svg { width: 20px; height: 20px; }

.template-modal__body {
  display: grid;
  grid-template-columns: 1fr 300px;
  flex: 1;
  overflow: hidden;
}

.template-modal__list { overflow-y: auto; padding: 16px; border-inline-end: 1px solid var(--bz-bg3); }
.template-modal__sidebar { padding: 16px; overflow-y: auto; background: var(--bz-bg1); }

.template-category { margin-bottom: 16px; }
.template-category-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--bz-text4);
  text-transform: uppercase;
  margin-bottom: 8px;
  padding: 0 8px;
}

.template-items { display: flex; flex-direction: column; gap: 8px; }

.template-item {
  width: 100%;
  padding: 12px;
  background: white;
  border: 2px solid var(--bz-bg3);
  border-radius: 8px;
  text-align: start;
  cursor: pointer;
}

.template-item:hover { border-color: #cbd5e1; }
.template-item.is-selected { border-color: var(--bz-primary); background: #f0f9ff; }

.template-item__header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.template-name { font-weight: 600; color: var(--bz-text0); font-size: 14px; }

.template-language {
  font-size: 11px;
  color: var(--bz-text3);
  background: var(--bz-bg2);
  padding: 2px 6px;
  border-radius: 4px;
}

.template-item__body { font-size: 13px; color: var(--bz-text3); line-height: 1.4; }

.template-preview { margin-bottom: 16px; }
.template-preview h4 { font-size: 13px; font-weight: 600; color: var(--bz-text3); margin: 0 0 8px 0; }

.preview-bubble {
  background: white;
  border-radius: 8px;
  padding: 12px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--bz-text0);
  border-inline-start: 3px solid var(--bz-primary);
}

.variable-form h4 { font-size: 13px; font-weight: 600; color: var(--bz-text3); margin: 0 0 12px 0; }
.variable-form .form-group { margin-bottom: 12px; }

.variable-form .form-label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--bz-text2);
  margin-bottom: 4px;
}

.variable-form .form-control {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--bz-bg3);
  border-radius: 6px;
  font-size: 14px;
}

.template-loading,
.template-empty,
.template-error { padding: 40px 20px; text-align: center; color: var(--bz-text4); }

.template-modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 24px;
  border-top: 1px solid var(--bz-bg3);
}

body.modal-open { overflow: hidden; }

.template-item__badges { display: flex; gap: 4px; margin-top: 6px; }
.template-badge {
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--bz-bg2);
  color: var(--bz-text3);
}

.preview-header {
  padding: 10px;
  background: var(--bz-bg2);
  border-radius: 6px;
  margin-bottom: 8px;
  font-size: 12px;
  color: var(--bz-text4);
  text-align: center;
}

.preview-footer {
  font-size: 12px;
  color: var(--bz-text4);
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--bz-bg3);
}

.preview-buttons { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }

.preview-button {
  display: block;
  text-align: center;
  padding: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--bz-primary);
  border: 1px solid var(--bz-bg3);
  border-radius: 6px;
}

/* ---------- Right Customer panel ----------------------------- */

.customer-panel {
  background: var(--bz-bg0);
  border-inline-start: 1px solid var(--bz-bg3);
  overflow-y: auto;
  min-width: 0;
  flex-shrink: 0;
}

.customer-panel__section {
  padding: 20px;
  border-bottom: 1px solid var(--bz-bg3);
}

.customer-panel__section:last-child { border-bottom: none; }

.customer-panel__title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--bz-text3);
  margin: 0 0 12px 0;
}

.customer-panel__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.customer-panel__contact {
  display: flex;
  align-items: center;
  gap: 12px;
}

.customer-panel__contact-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--bz-text0);
}

.customer-panel__contact-platform {
  font-size: 13px;
  color: var(--bz-text3);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
}

.customer-panel__workspace {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--bz-text0);
}

.customer-panel__workspace-swatch {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: linear-gradient(135deg, var(--ws-c1, #0ea5e9), var(--ws-c2, #06b6d4));
}

.customer-panel__assignee {
  display: flex;
  align-items: center;
  gap: 10px;
}

.customer-panel__assignee-meta { display: flex; flex-direction: column; line-height: 1.2; }
.customer-panel__assignee-name { font-size: 14px; font-weight: 600; color: var(--bz-text0); }
.customer-panel__assignee-sub { font-size: 12px; color: var(--bz-text3); }

.btn-change,
.btn-assign {
  padding: 6px 12px;
  background: #fff;
  border: 1px solid var(--bz-bg3);
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--bz-text1);
  cursor: pointer;
  font-family: inherit;
}

.btn-change:hover,
.btn-assign:hover { background: var(--bz-bg2); color: var(--bz-text0); }

.assignment-dropdown-menu {
  margin-top: 12px;
  background: var(--bz-bg1);
  border-radius: 10px;
  border: 1px solid var(--bz-bg3);
  overflow: hidden;
}

.dropdown-search input {
  width: 100%;
  padding: 10px 12px;
  border: none;
  border-bottom: 1px solid var(--bz-bg3);
  font-size: 14px;
  outline: none;
  background: transparent;
}

.dropdown-options { max-height: 200px; overflow-y: auto; }

.dropdown-option {
  display: block;
  width: 100%;
  padding: 10px 12px;
  text-align: start;
  background: none;
  border: none;
  font-size: 14px;
  color: var(--bz-text0);
  cursor: pointer;
  font-family: inherit;
}

.dropdown-option:hover { background: var(--bz-bg2); }

.dropdown-footer { border-top: 1px solid var(--bz-bg3); padding: 8px; }

.btn-unassign {
  width: 100%;
  padding: 8px 12px;
  background: #fef2f2;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  color: #dc2626;
  cursor: pointer;
}

.btn-unassign:hover { background: #fee2e2; }

.status-history { display: flex; flex-direction: column; gap: 10px; }

.status-change {
  display: flex;
  align-items: center;
  gap: 10px;
}

.change-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.change-dot.status-open { background: var(--bz-status-open-fg); }
.change-dot.status-assigned { background: var(--bz-status-assigned-fg); }
.change-dot.status-in_progress { background: var(--bz-status-in_progress-fg); }
.change-dot.status-waiting { background: var(--bz-status-waiting-fg); }
.change-dot.status-closed { background: var(--bz-status-closed-fg); }

.change-content { flex: 1; display: flex; flex-direction: column; }
.change-text { font-size: 13px; color: var(--bz-text1); }
.change-time { font-size: 12px; color: var(--bz-text3); }

.notes-hint { font-size: 12px; color: var(--bz-text4); margin: 0 0 12px 0; }
.internal-notes-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }

/* ---------- Internal note card ------------------------------- */

.internal-note {
  background: var(--bz-bg1);
  border-radius: 8px;
  padding: 12px;
  border: 1px solid var(--bz-bg3);
}

.internal-note__content {
  font-size: 13px;
  color: var(--bz-text1);
  line-height: 1.5;
  white-space: pre-wrap;
}

.internal-note__content .mention {
  color: var(--bz-primary);
  background: transparent;
  padding: 0;
  font-weight: 600;
}

.internal-note__footer {
  margin-top: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.internal-note__author {
  display: flex;
  align-items: center;
  gap: 6px;
}

.internal-note__author-name { font-size: 12px; font-weight: 600; color: var(--bz-text2); }
.internal-note__time { font-size: 12px; color: var(--bz-text3); }

.internal-note__delete {
  padding: 4px;
  background: none;
  border: none;
  color: var(--bz-text4);
  cursor: pointer;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
}

.internal-note__delete:hover { background: #fee2e2; color: #dc2626; }
.internal-note__delete svg { width: 14px; height: 14px; }

/* Note composer */
.note-form { display: flex; flex-direction: column; gap: 10px; }
.note-input-wrapper { position: relative; }

.note-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--bz-bg3);
  border-radius: 10px;
  font-size: 13px;
  resize: none;
  outline: none;
  font-family: inherit;
  background: #fff;
}

.note-input:focus { border-color: var(--bz-primary); box-shadow: 0 0 0 3px var(--bz-focus-ring); }

.mention-dropdown {
  position: absolute;
  inset-inline-start: 0;
  inset-inline-end: 0;
  bottom: 100%;
  margin-bottom: 6px;
  background: white;
  border: 1px solid var(--bz-bg3);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
  max-height: 200px;
  overflow-y: auto;
  z-index: 100;
}

.mention-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  cursor: pointer;
}

.mention-option:hover,
.mention-option.active { background: #eff6ff; }

.mention-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--bz-primary), #06b6d4);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
}

.mention-info { display: flex; flex-direction: column; line-height: 1.2; }
.mention-name { font-weight: 600; font-size: 13px; color: var(--bz-text0); }
.mention-email { font-size: 11px; color: var(--bz-text3); }

.note-actions { display: flex; justify-content: flex-end; }

.btn-add-note {
  padding: 8px 14px;
  background: var(--bz-primary);
  color: white;
  border: none;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}

.btn-add-note:hover { background: var(--bz-primary-hover); }

/* ---------- Empty state -------------------------------------- */

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
  color: var(--bz-text3);
  padding: 40px;
}

.empty-icon {
  width: 64px;
  height: 64px;
  margin-bottom: 16px;
  color: var(--bz-bg3);
}

.empty-state h3 {
  font-size: 18px;
  font-weight: 600;
  color: var(--bz-text1);
  margin: 0 0 8px 0;
}

.empty-state p { font-size: 14px; margin: 0; }

/* ---------- Responsive --------------------------------------- */

@media (max-width: 1280px) {
  .conversation-page {
    grid-template-columns: 240px 1fr 320px;
  }
  .inbox-page {
    grid-template-columns: 240px 320px 1fr;
  }
}

@media (max-width: 1024px) {
  .conversation-page {
    grid-template-columns: 240px 1fr;
  }
  .inbox-page {
    grid-template-columns: 240px 1fr;
  }
  .customer-panel {
    position: fixed;
    inset-block: 64px 0;
    inset-inline-end: 0;
    width: 340px;
    max-width: 92vw;
    z-index: 200;
    transform: translateX(100%);
    transition: transform 0.2s ease;
    box-shadow: -8px 0 24px rgba(15, 23, 42, 0.08);
  }
  [dir="rtl"] .customer-panel {
    transform: translateX(-100%);
  }
  .customer-panel.is-open {
    transform: translateX(0);
  }
  .thread-header__details-toggle {
    display: inline-flex;
  }
  .inbox-list { display: none; }
  .inbox-page { grid-template-columns: 240px 1fr; }
}

@media (max-width: 768px) {
  .conversation-page,
  .inbox-page {
    grid-template-columns: 1fr;
  }
  .inbox-sidebar {
    position: fixed;
    inset-block: 64px 0;
    inset-inline-start: 0;
    width: 280px;
    max-width: 86vw;
    z-index: 200;
    transform: translateX(-100%);
    transition: transform 0.2s ease;
    box-shadow: 8px 0 24px rgba(15, 23, 42, 0.08);
  }
  [dir="rtl"] .inbox-sidebar {
    transform: translateX(100%);
  }
  .inbox-sidebar.is-open {
    transform: translateX(0);
  }
  .thread-header__menu-toggle { display: inline-flex; }
  .messages-container { padding: 14px 12px; }
  .reply-form-container { padding: 10px; }
  .message-bubble { max-width: 82%; }
  .thread-header__workspace { display: none; }
  .thread-header__divider { display: none; }
}

/* ---------- RTL flips ---------------------------------------- */

[dir="rtl"] .conversation-card__workspace::before { content: "·  \\"; }
[dir="rtl"] .thread-header__workspace::before { content: "\\"; }
[dir="rtl"] .quick-reply-dropdown { inset-inline-start: 56px; }

/* Mirror the reply quote bar via logical properties already covers it, but
   the inbound/outbound corner radii need to flip too. */
[dir="rtl"] .message-inbound .message-bubble {
  border-radius: 16px 16px 16px 4px; /* same — logical end-start works */
}
[dir="rtl"] .message-outbound .message-bubble {
  border-radius: 16px 16px 4px 16px;
}

/* Conversation card / thread / sidebar all use inset-inline properties so
   they flip automatically. Avatar status-dot uses right/bottom — flip: */
[dir="rtl"] .conversation-card__avatar .platform-badge { inset-inline-end: -3px; inset-inline-start: auto; }