/* App CSS  */
:root {
  --theme-bg: #0f7a5a;
}
.dark {
  --background: var(--theme-bg);
  --popover: #136c51;
  --border: #0d8a65;
  --accent: #54cd89cc;
  /* --foreground: #ffffff; */
  /* --card: #dc4301; */
  /* --card-foreground: #ffffff; */
  /* --popover: color-mix(in oklab, var(--theme-bg) 50%, transparent); */
  /* --popover-foreground: #ffffff; */
  /* --primary: #3b82f6; */
  /* --primary-foreground: #ffffff; */
  /* --secondary: #0ae5d3; */
  /* --secondary-foreground: #ffffff; */
  /* --muted: #2ff408; */
  /* --muted-foreground: #94a3b8; */
  /* --accent-foreground: #ffffff; */
  /* --destructive: #ef4444; */
  /* --destructive-foreground: #ffffff; */
  /* --mono: #94a3b8; */
  /* --mono-foreground: #06d05a; */
  /* --input: #b2ac05; */
  /* --ring: #60a5fa; */
}

.required::after {
  content: " *";
  color: #ef4444;
}
/*
 * Page header keeps a responsive min-width so the top bar spans the content area.
 * NOTE: .kt-card-content was intentionally removed from these rules — forcing a
 * 900–1500px min-width on every card body broke cards inside multi-column grids
 * (their buttons/content overflowed the card). Data tables already scroll via their
 * own .kt-scrollable-x-auto wrapper, so the card min-width was redundant for them.
 */
.kt-page-header {
  min-width: 100%;
}

/* Card bodies must never force their own minimum width — let them fit the card
 * (grid track / flex column). This neutralizes any stray min-width from the theme. */
.kt-card-content {
  min-width: 0;
}

@media (min-width: 768px) {
  .kt-page-header { min-width: 900px; }
}
@media (min-width: 1024px) {
  .kt-page-header { min-width: 1100px; }
}
@media (min-width: 1280px) {
  .kt-page-header { min-width: 1200px; }
}
@media (min-width: 1800px) {
  .kt-page-header { min-width: 1500px; }
}

/* ===== Table Styling ===== */

/* Table header: navy blue background with white text */
.kt-table thead th {
  background-color: var(--theme-bg);
  color: #ffffff;
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.025em;
  text-transform: uppercase;
}

/* Table header label color override */
.kt-table thead th .kt-table-col-label {
  color: #ffffff;
}

/* Checkbox in header: lighter border for visibility */
.kt-table thead th .kt-checkbox {
  border-color: rgba(255, 255, 255, 0.5);
}

/* Table borders: matching navy tone */
.kt-table-border,
.kt-table-border th,
.kt-table-border td {
  border-color: #d1d9e6;
}

/* Table row hover */
.kt-table tbody tr:hover {
  background-color: #f0f4fa;
}

/* Alternating row background for readability */
.kt-table tbody tr:nth-child(even) {
  background-color: #f8fafc;
}
.kt-table tbody tr:nth-child(even):hover {
  background-color: #f0f4fa;
}

/* ===== Card Styling ===== */

/* Card shadow and border refinement */
.kt-card {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
}

/* Card header bottom border */
.kt-card-header {
  border-bottom: 2px solid #e2e8f0;
}

/* ===== Generic Layout Components ===== */

/* Sidebar + Main Content Layout */
.sidebar-layout { 
  display: grid; 
  grid-template-columns: 240px 1fr; 
  gap: 1.5rem; 
}
@media (max-width: 1023px) { 
  .sidebar-layout { 
    grid-template-columns: 1fr; 
  } 
}

/* Vertical Navigation Button */
.nav-btn-vertical { 
  display: flex; 
  align-items: center; 
  gap: .625rem; 
  width: 100%; 
  padding: .625rem .875rem; 
  border-radius: .5rem; 
  font-size: .875rem; 
  font-weight: 500; 
  color: #4b5563; 
  text-align: left; 
  transition: background .15s, color .15s; 
}
.nav-btn-vertical:hover { 
  background: #f3f4f6; 
  color: #111827; 
}
.nav-btn-vertical.active { 
  background: rgb(59 130 246 / 0.08); 
  color: #2563eb; 
}
.nav-btn-vertical i { 
  font-size: 1rem; 
  width: 1.25rem; 
  text-align: center; 
}

/* Content Pane (Tab/Section) */
.content-pane { 
  display: none; 
}
.content-pane.active { 
  display: block; 
}

/* ===== Form Components ===== */

/* Form Field Group */
.form-field { 
  display: flex; 
  flex-direction: column; 
  gap: .375rem; 
}
.form-field label { 
  font-size: .8125rem; 
  font-weight: 500; 
  color: #374151; 
}
.form-field .field-hint { 
  font-size: .75rem; 
  color: #6b7280; 
}
.form-field input[type="text"], 
.form-field input[type="number"], 
.form-field input[type="url"], 
.form-field input[type="email"], 
.form-field input[type="password"], 
.form-field select, 
.form-field textarea { 
  padding: .5rem .75rem; 
  border: 1px solid #e5e7eb; 
  border-radius: .5rem; 
  font-size: .875rem; 
  background: #fff; 
  transition: border-color .15s, box-shadow .15s; 
}
.form-field input:focus, 
.form-field select:focus, 
.form-field textarea:focus { 
  outline: none; 
  border-color: #3b82f6; 
  box-shadow: 0 0 0 3px rgb(59 130 246 / 0.1); 
}
.form-field textarea { 
  min-height: 80px; 
  resize: vertical; 
}

/* ===== Typography Components ===== */

/* Section Title */
.section-title { 
  font-size: 1.0625rem; 
  font-weight: 600; 
  color: #111827; 
  margin-bottom: .25rem; 
}

/* Section Description */
.section-desc { 
  font-size: .8125rem; 
  color: #6b7280; 
  margin-bottom: 1.5rem; 
}

/* ===== Input Components ===== */

/* Color Picker with Text Input */
.input-group-color { 
  display: flex; 
  align-items: center; 
  gap: .5rem; 
}
.input-group-color input[type="color"] { 
  width: 42px; 
  height: 38px; 
  padding: 2px; 
  border: 1px solid #e5e7eb; 
  border-radius: .5rem; 
  cursor: pointer; 
}
.input-group-color input[type="text"] { 
  flex: 1; 
}

/* ===== Two-column Layout (reusable) ===== */
/* Main workspace + sidebar panels. Used by Compose and similar screens. */
.compose-layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 1rem;
  align-items: start;
}
@media (max-width: 1199px) {
  .compose-layout { grid-template-columns: 1fr; }
}
.compose-main { min-width: 0; }
.compose-side { min-width: 0; }

/* ===== Step Label (numbered section heading) ===== */
.compose-step-label {
  font-size: .8125rem;
  font-weight: 700;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: .04em;
  /* reset when used as <button> */
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  width: 100%;
  text-align: left;
}

/* ===== Channel Tabs (large-pill style channel switcher) ===== */
.channel-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: .375rem;
}
.channel-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  padding: .5rem .875rem;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  background: #f9fafb;
  font-size: .8125rem;
  font-weight: 500;
  color: #4b5563;
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
}
.channel-tab:hover { background: #f3f4f6; border-color: #d1d5db; color: #111827; }
.channel-tab.active {
  background: #fff;
  border-color: #22c55e;
  color: #16a34a;
  box-shadow: 0 0 0 2px rgb(34 197 94 / 0.15);
  font-weight: 600;
}
.channel-tab i { font-size: 1rem; }

/* ===== Segmented Tabs (small pill switcher) ===== */
.segmented-tabs {
  display: flex;
  gap: .25rem;
  flex-wrap: wrap;
  background: #f3f4f6;
  padding: .25rem;
  border-radius: .625rem;
}
.segmented-tab {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .375rem .75rem;
  border: 0;
  border-radius: .45rem;
  background: transparent;
  font-size: .8125rem;
  color: #6b7280;
  cursor: pointer;
  transition: all .15s;
  font-weight: 500;
}
.segmented-tab:hover { background: rgba(255,255,255,.6); color: #374151; }
.segmented-tab.active {
  background: #fff;
  color: #2563eb;
  box-shadow: 0 1px 3px rgba(0,0,0,.1);
  font-weight: 600;
}

/* ===== Recipient chips ===== */
.recipient-input-row {
  display: grid;
  grid-template-columns: 140px 1fr auto;
  gap: .5rem;
}
.recipient-country { min-width: 0; }
.recipient-number-input { width: 100%; }
.recipient-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .375rem;
}
.recipient-chip {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  padding: .25rem .5rem .25rem .625rem;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 999px;
  font-size: .8125rem;
  color: #1e40af;
}
.recipient-chip.invalid {
  background: #fef2f2;
  border-color: #fecaca;
  color: #b91c1c;
}
.recipient-chip-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: rgba(0,0,0,.05);
  cursor: pointer;
  border: 0;
}
.recipient-chip-remove:hover { background: rgba(0,0,0,.12); }

/* ===== Compose textarea + toolbar ===== */
.compose-textarea {
  width: 100%;
  padding: .75rem .875rem;
  border: 1px solid #e5e7eb;
  border-top: 0;
  border-radius: 0 0 .5rem .5rem;
  font-size: .875rem;
  font-family: inherit;
  resize: vertical;
  min-height: 200px;
  background: #fff;
  transition: border-color .15s, box-shadow .15s;
  line-height: 1.6;
}
.compose-textarea:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgb(59 130 246 / 0.1);
}
.compose-format-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .25rem;
  padding: .4375rem .5rem;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-bottom: 0;
  border-radius: .5rem .5rem 0 0;
}
.compose-format-btn {
  width: 28px;
  height: 28px;
  border: 0;
  background: transparent;
  border-radius: .3125rem;
  cursor: pointer;
  font-size: .8125rem;
  color: #6b7280;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.compose-format-btn:hover { background: #e9eaec; color: #111827; }
.compose-toolbar-link {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  color: #2563eb;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-size: .8125rem;
}
.compose-toolbar-link:hover { text-decoration: underline; }

/* ===== Popovers (variables, shortcodes, emoji, templates) ===== */
.compose-popover {
  margin-top: .5rem;
  padding: .75rem;
  border: 1px solid #e5e7eb;
  border-radius: .5rem;
  background: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,.04);
}
.compose-popover-emoji .emoji-grid {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: .25rem;
}
.emoji-btn {
  width: 32px;
  height: 32px;
  border: 0;
  background: transparent;
  border-radius: .375rem;
  font-size: 1.125rem;
  cursor: pointer;
}
.emoji-btn:hover { background: #f3f4f6; }
.compose-var-chip {
  display: block;
  text-align: left;
  padding: .375rem .5rem;
  border: 1px solid #e5e7eb;
  border-radius: .375rem;
  background: #fff;
  font-size: .8125rem;
  font-family: ui-monospace, Menlo, monospace;
  color: #2563eb;
  cursor: pointer;
}
.compose-var-chip:hover { background: #eff6ff; border-color: #bfdbfe; }
.compose-template-row {
  display: flex;
  flex-direction: column;
  gap: .125rem;
  text-align: left;
  padding: .5rem .625rem;
  border: 1px solid #e5e7eb;
  border-radius: .5rem;
  background: #fff;
  cursor: pointer;
  transition: background .15s;
}
.compose-template-row:hover { background: #f9fafb; border-color: #d1d5db; }

/* ===== Toggle row & radio ===== */
.compose-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .5rem 0;
  font-size: .875rem;
  color: #374151;
  border-bottom: 1px dashed #f3f4f6;
}
.compose-toggle-row:last-child { border-bottom: 0; }
.compose-radio {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .875rem;
  color: #374151;
  cursor: pointer;
}

/* Kt-switch (generic mini switch when kt lib switch isn't available) */
.kt-switch {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
}
.kt-switch input { opacity: 0; width: 0; height: 0; }
.kt-switch-slider {
  position: absolute;
  inset: 0;
  cursor: pointer;
  background: #d1d5db;
  border-radius: 999px;
  transition: .2s;
}
.kt-switch-slider::before {
  position: absolute;
  content: "";
  height: 14px;
  width: 14px;
  left: 3px;
  top: 3px;
  background: #fff;
  border-radius: 50%;
  transition: .2s;
}
.kt-switch input:checked + .kt-switch-slider { background: #22c55e; }
.kt-switch input:checked + .kt-switch-slider::before { transform: translateX(16px); }

/* ===== Bottom action bar ===== */
.compose-action-bar {
  position: sticky;
  bottom: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .875rem 1.25rem;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: .75rem;
  box-shadow: 0 -2px 16px rgba(0,0,0,.06), 0 1px 0 #f1f5f9;
}

/* ===== Preview channel tabs (B1) ===== */
.preview-channel-tabs {
  display: flex;
  gap: .25rem;
  border-bottom: 1px solid #e5e7eb;
  padding-bottom: .5rem;
}
.preview-channel-tab {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .25rem .625rem;
  border: 0;
  background: transparent;
  border-radius: 999px;
  font-size: .8125rem;
  color: #6b7280;
  cursor: pointer;
  transition: background .12s, color .12s;
}
.preview-channel-tab:hover { background: #f3f4f6; color: #374151; }
.preview-channel-tab.active {
  background: #f0fdf4;
  color: #16a34a;
  font-weight: 500;
}

/* ===== Preview phone panel ===== */
.preview-phone {
  border: 1px solid #d1d5db;
  border-radius: 1.25rem;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 4px 20px rgba(0,0,0,.07);
}
.preview-phone-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .375rem .875rem;
  background: #111827;
  font-size: .6875rem;
  color: #9ca3af;
}
.preview-time { font-weight: 700; color: #f9fafb; }
.preview-signal { color: #d1d5db; }
.preview-phone-body {
  padding: 1rem;
  min-height: 200px;
  background: #ece5dd;
}
.preview-phone-body.channel-sms       { background: #eff6ff; }
.preview-phone-body.channel-instagram { background: linear-gradient(135deg, #fef3f2, #fdf4ff); }
.preview-phone-body.channel-telegram  { background: #e0f2fe; }
.preview-bubble {
  display: inline-block;
  max-width: 88%;
  padding: .625rem .8125rem .4rem;
  background: #fff;
  border-radius: .125rem .75rem .75rem .75rem;
  font-size: .875rem;
  color: #111827;
  white-space: pre-wrap;
  word-break: break-word;
  box-shadow: 0 1px 4px rgba(0,0,0,.10);
  line-height: 1.55;
}
/* B2: Sender identity bar inside phone mockup */
.preview-sender-bar {
  display: flex;
  align-items: center;
  gap: .625rem;
  padding: .5rem .875rem;
  background: #fff;
  border-bottom: 1px solid #f3f4f6;
}
.preview-sender-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #16a34a;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: .875rem;
  flex-shrink: 0;
}
.preview-sender-name {
  font-size: .8125rem;
  font-weight: 600;
  color: #111827;
  display: flex;
  align-items: center;
}
.preview-sender-sub {
  font-size: .6875rem;
  color: #6b7280;
}

/* B3: Today date separator */
.preview-date-sep {
  text-align: center;
  font-size: .6875rem;
  color: #6b7280;
  background: rgba(255,255,255,.65);
  border-radius: 999px;
  display: inline-block;
  padding: .125rem .625rem;
  margin: .5rem auto .75rem;
  display: flex;
  justify-content: center;
}

/* B3: Bubble meta (timestamp + ticks) */
.preview-bubble-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .25rem;
  margin-top: .25rem;
  font-size: .6875rem;
  color: #9ca3af;
}
.preview-ticks { color: #60a5fa; letter-spacing: -.1em; }

.preview-bubble-empty {
  font-size: .8125rem;
  color: #6b7280;
  font-style: italic;
}
.preview-meta {
  font-size: .6875rem;
  color: #6b7280;
}

/* ===== Insights grid ===== */
.insights-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .5rem;
}
.insight-cell {
  padding: .75rem .5rem;
  border: 1px solid #f1f5f9;
  border-radius: .625rem;
  background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
  text-align: center;
  transition: box-shadow .15s;
}
.insight-cell:hover { box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.insight-value {
  font-size: 1.125rem;
  font-weight: 700;
  color: #111827;
  line-height: 1.2;
}
.insight-label {
  font-size: .6875rem;
  color: #9ca3af;
  margin-top: .1875rem;
  text-transform: uppercase;
  letter-spacing: .03em;
}

/* ===== Pill dropdown (AI, Variables, Shortcodes, More) ===== */
.compose-pill-dropdown {
  position: relative;
  display: inline-flex;
}
.compose-pill-btn {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .25rem .625rem;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  background: #fff;
  font-size: .8125rem;
  font-weight: 500;
  color: #374151;
  cursor: pointer;
  white-space: nowrap;
  transition: all .12s;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.compose-pill-btn:hover { background: #f3f4f6; border-color: #d1d5db; box-shadow: 0 2px 4px rgba(0,0,0,.07); }
.compose-pill-btn:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }
.compose-pill-ai {
  background: linear-gradient(90deg, #eff6ff 0%, #f5f3ff 100%);
  border-color: #c7d2fe;
  color: #3730a3;
}
.compose-pill-ai:hover { background: linear-gradient(90deg, #dbeafe 0%, #ede9fe 100%); }

/* Dropdown menu panel */
.compose-pill-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 100;
  min-width: 180px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: .75rem;
  box-shadow: 0 12px 32px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.06);
  padding: .3125rem 0;
}
.compose-pill-menu-sm { min-width: 140px; }
.compose-pill-menu-item {
  display: flex;
  align-items: center;
  width: 100%;
  padding: .4375rem .75rem;
  border: 0;
  background: transparent;
  font-size: .8125rem;
  color: #374151;
  text-align: left;
  cursor: pointer;
  transition: background .1s;
}
.compose-pill-menu-item:hover { background: #f3f4f6; }
.compose-pill-menu-item:disabled { opacity: .45; cursor: not-allowed; }
.compose-pill-menu-mono { font-family: ui-monospace, Menlo, monospace; color: #2563eb; }
.compose-pill-menu-divider {
  height: 1px;
  background: #f3f4f6;
  margin: .25rem 0;
}
.compose-pill-badge {
  margin-left: auto;
  padding: .125rem .375rem;
  border-radius: 999px;
  background: #f3f4f6;
  font-size: .6875rem;
  color: #6b7280;
}

/* Toolbar separator */
.compose-toolbar-sep {
  width: 1px;
  height: 18px;
  background: #e5e7eb;
  margin: 0 .125rem;
  flex-shrink: 0;
}

/* ===== Link insert modal (inline above textarea) ===== */
.compose-link-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.25);
}
.compose-link-modal-box {
  background: #fff;
  border-radius: .75rem;
  box-shadow: 0 12px 40px rgba(0,0,0,.14);
  padding: 1.25rem;
  width: 100%;
  max-width: 360px;
}

/* ===== Emoji popover — emoji-picker-element wrapper, sits between toolbar and textarea ===== */
.compose-emoji-popover {
  position: relative;
  z-index: 50;
  border-left: 1px solid #e5e7eb;
  border-right: 1px solid #e5e7eb;
}
.compose-emoji-popover emoji-picker {
  --num-columns: 8;
  --emoji-size: 1.5rem;
  --emoji-padding: .25rem;
  width: 100%;
  height: 300px;
  border-radius: 0;
  border: none;
  border-top: 1px solid #e5e7eb;
}

/* ===== Emoji category tabs ===== */
.emoji-category-tabs {
  display: flex;
  gap: .125rem;
  margin-bottom: .5rem;
  border-bottom: 1px solid #f3f4f6;
  padding-bottom: .375rem;
}
.emoji-cat-btn {
  width: 28px;
  height: 28px;
  border: 0;
  background: transparent;
  border-radius: .375rem;
  font-size: 1rem;
  cursor: pointer;
  opacity: .55;
  transition: opacity .12s, background .12s;
}
.emoji-cat-btn:hover { background: #f3f4f6; opacity: 1; }
.emoji-cat-btn.active { background: #eff6ff; opacity: 1; }

/* ===== Split send button (A6) ===== */
.compose-split-btn {
  position: relative;
  display: inline-flex;
}
.compose-split-primary {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  padding: .5625rem 1.125rem;
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
  color: #fff;
  border: 0;
  border-radius: .5rem 0 0 .5rem;
  font-size: .875rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all .15s;
  box-shadow: 0 2px 8px rgb(22 163 74 / 0.35);
  letter-spacing: .01em;
}
.compose-split-primary:hover:not(:disabled) { background: linear-gradient(135deg, #16a34a 0%, #15803d 100%); box-shadow: 0 4px 12px rgb(22 163 74 / 0.45); }
.compose-split-primary:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }
.compose-split-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  background: #15803d;
  color: #fff;
  border: 0;
  border-left: 1px solid rgba(255,255,255,.2);
  border-radius: 0 .5rem .5rem 0;
  cursor: pointer;
  transition: background .12s;
  box-shadow: 0 2px 8px rgb(22 163 74 / 0.35);
}
.compose-split-arrow:hover:not(:disabled) { background: #166534; }
.compose-split-arrow:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }
.compose-split-menu {
  left: auto;
  right: 0;
  min-width: 160px;
}

/* ===== Contact browser (E1) ===== */
.contact-browser-table {
  border: 1px solid #e5e7eb;
  border-radius: .5rem;
  overflow: hidden;
  margin-top: .5rem;
}
.contact-browser-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .5rem .75rem;
  background: #f9fafb;
  border-bottom: 1px solid #e5e7eb;
}
.contact-browser-list {
  max-height: 260px;
  overflow-y: auto;
}
.contact-browser-row {
  display: flex;
  align-items: center;
  gap: .625rem;
  padding: .5rem .75rem;
  border-bottom: 1px solid #f3f4f6;
  cursor: pointer;
  transition: background .1s;
}
.contact-browser-row:last-child { border-bottom: 0; }
.contact-browser-row:hover { background: #f9fafb; }
.contact-browser-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #e0f2fe;
  color: #0284c7;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: .8125rem;
  flex-shrink: 0;
}
.contact-browser-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .5rem .75rem;
  background: #f9fafb;
  border-top: 1px solid #e5e7eb;
}

/* ===== Preview bubble formatting ===== */
.preview-bubble strong { font-weight: 700; }
.preview-bubble em { font-style: italic; }
.preview-bubble u { text-decoration: underline; }
.preview-bubble del { text-decoration: line-through; color: #6b7280; }
.preview-code {
  display: inline;
  font-family: ui-monospace, Menlo, monospace;
  font-size: .8125rem;
  background: #f3f4f6;
  border-radius: .25rem;
  padding: .1em .35em;
  color: #374151;
}
.preview-blockquote {
  border-left: 3px solid #22c55e;
  padding-left: .5rem;
  color: #6b7280;
  margin: .25rem 0;
  font-style: italic;
}
.preview-bullet,
.preview-numbered {
  display: block;
  padding-left: .125rem;
}

/* ===== Compliance rows ===== */
.compliance-row {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .4375rem 0;
  font-size: .8125rem;
  color: #374151;
  border-bottom: 1px solid #f9fafb;
}
.compliance-row:last-of-type { border-bottom: 0; }
.compliance-summary {
  margin-top: .625rem;
  padding: .5625rem .75rem;
  background: linear-gradient(90deg, rgb(34 197 94 / 0.07) 0%, rgb(34 197 94 / 0.03) 100%);
  color: #166534;
  border: 1px solid rgb(34 197 94 / 0.2);
  border-radius: .5rem;
  font-size: .8125rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: .375rem;
}