* { margin: 0; padding: 0; box-sizing: border-box; }

/* CSS Variables for Finance components */
:root {
  --accent: #2563eb;
  --primary: #2563eb;
  --primary-dark: #1d4ed8;
  --bg-primary: #f5f5f7;
  --bg-secondary: #f8fafc;
  --bg-card: #fff;
  --bg-input: #fff;
  --border: #e2e8f0;
  --border-light: #f1f5f9;
  --text-primary: #1d1d1f;
  --text-secondary: #64748b;
  --text-muted: #64748b;
  --success: #059669;
  --warning: #d97706;
  --danger: #dc2626;
}

/* Fix for invisible finance form buttons */
.fin-add-submit-btn, .fin-type-btn, .fin-period-btn, .fin-tab {
  background: var(--accent, #2563eb) !important;
  color: #fff !important;
  border: 1px solid var(--accent, #2563eb) !important;
}

.fin-type-btn:not(.active), .fin-period-btn:not(.active) {
  background: var(--bg-primary, #f5f5f7) !important;
  color: var(--text-primary, #1d1d1f) !important;
  border: 1px solid var(--border, #e2e8f0) !important;
}

/* Ensure all buttons in finance forms are visible */
#page-finance button {
  background: var(--bg-primary, #f5f5f7) !important;
  border: 1px solid var(--border, #e2e8f0) !important;
  color: var(--text-primary, #1d1d1f) !important;
  padding: 8px 12px !important;
  border-radius: 6px !important;
  cursor: pointer !important;
}

#page-finance button[style*="background:var(--accent"],
#page-finance button[style*="background:var(--fin-accent"],
#page-finance .fin-add-submit-btn,
#page-finance .fin-tab.active {
  background: var(--accent, #2563eb) !important;
  color: #fff !important;
  border-color: var(--accent, #2563eb) !important;
}

/* Specific colors for income/expense buttons */
#page-finance button[style*="background:var(--fin-income"] {
  background: #16a34a !important;
  color: #fff !important;
  border-color: #16a34a !important;
}

#page-finance button[style*="background:var(--fin-expense"] {
  background: #dc2626 !important;
  color: #fff !important;
  border-color: #dc2626 !important;
}

/* Force override for all finance buttons with inline background styles */
#page-finance .modal-content button[style*="background:var("],
#page-finance .modal button[style*="background:var("],
#page-finance button[onclick*="save"],
#page-finance button[onclick*="Save"] {
  color: #fff !important;
}

/* Stronger selectors for specific save buttons */
#page-finance button[onclick="FinancePage.saveOperation('income')"] {
  background: #16a34a !important;
  color: #fff !important;
  border: 1px solid #16a34a !important;
}

#page-finance button[onclick="FinancePage.saveOperation('expense')"] {
  background: #dc2626 !important;
  color: #fff !important;
  border: 1px solid #dc2626 !important;
}

/* Fix for buttons with background:none inline style */
#page-finance button[style*="background:none"] {
  background: var(--bg-primary, #f5f5f7) !important;
  border: 1px solid var(--border, #e2e8f0) !important;
  color: var(--text-primary, #1d1d1f) !important;
}

/* Special handling for icon buttons */
#page-finance button[title="Редагувати"],
#page-finance button[title="Видалити"] {
  background: var(--bg-card, #fff) !important;
  border: 1px solid var(--border, #e2e8f0) !important;
  border-radius: 6px !important;
  padding: 6px !important;
}

body {
  font-family: var(--font-family);
  background: var(--bg-primary);
  color: var(--text-primary);
  padding-bottom: 100px;
  display: flex;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: var(--tracking-normal);
  /* Prevent layout breaks from very long URLs - use normal word-break to avoid mid-word breaks */
  word-break: normal;
  overflow-wrap: break-word;
}

/* ===== HEADER ===== */
.app-header {
  background: rgba(255,255,255,0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 10px 16px;
  padding-top: calc(10px + env(safe-area-inset-top, 0px));
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 0.5px solid var(--border);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 101;  /* above inbox-layout (100) so hamburger stays visible on iPhone X */
  transform: translateZ(0);
  will-change: transform;
}

@media (max-width: 1023px) {
  .icon-sidebar { display: none !important; }
  .app-header {
    left: 0;
    justify-content: center;
  }
  .app-header img {
    margin: 0 auto;
  }
}

.page {
  padding-top: calc(60px + env(safe-area-inset-top, 0px));
}

#page-ai {
  padding-top: 0 !important;
  height: calc(100vh - 80px - env(safe-area-inset-top, 0px));
  overflow: hidden;
  margin-top: calc(60px + env(safe-area-inset-top, 0px));
}

.app-header img {
  height: 34px;
}

.app-header .date {
  font-size: 12px;
  color: var(--text-muted);
}

/* ===== PAGE ===== */
.page { display: none; }
.page.active { display: block; }

/* ===== PERIOD SELECTOR ===== */
.period-selector {
  display: none;
  gap: 8px;
  padding: 8px 16px;
  background: rgba(255,255,255,0.92);
  overflow-x: auto;
  white-space: nowrap;
  border-bottom: 0.5px solid var(--border);
  position: fixed;
  transform: translateZ(0);
  top: calc(60px + env(safe-area-inset-top, 0px));
  left: 72px;
  right: 0;
  z-index: 99;
}

@media (max-width: 1023px) {
  .period-selector {
    left: 0;
    top: calc(60px + env(safe-area-inset-top, 0px));
  }
}

.page.has-period {
  padding-top: calc(116px + env(safe-area-inset-top, 0px));
}

.period-btn {
  padding: 8px 16px;
  min-height: 36px;
  border: 0.5px solid var(--border-md);
  border-radius: var(--radius-pill);
  background: var(--bg-card-solid);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  transition: all var(--duration-fast) var(--ease-default);
  white-space: nowrap;
  position: relative;
  outline: none;
  overflow: hidden;
}

.period-btn:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.period-btn:active {
  transform: translateY(0);
}

.period-btn:focus-visible {
  box-shadow: 0 0 0 2px var(--accent);
  outline: none;
}

.period-btn.active {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

.period-btn.active::before {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;   /* запас: inset зʼявився в Chrome 87 */
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.2), transparent);
  pointer-events: none;
}

/* ===== LOADING / ERROR ===== */
.loading {
  text-align: center;
  padding: 40px;
  color: var(--text-muted);
  font-size: 14px;
}

.stale-banner {
  background: var(--warning-bg);
  border-left: 3px solid var(--warning);
  padding: 8px 15px;
  font-size: 12px;
  color: var(--warning-text);
  display: flex;
  align-items: center;
  gap: 6px;
}

.error-msg {
  text-align: center;
  padding: 40px;
  color: var(--danger);
  font-size: 14px;
}

/* ===== METRICS GRID ===== */
.metrics-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  padding: 12px 15px;
}

/* Mobile improvements for metrics grid */
@media (max-width: 480px) {
  .metrics-grid {
    gap: 12px !important;
    padding: 8px 12px !important;
  }
}

/* ===== MOBILE TOUCH TARGETS & SAFE AREA ===== */
@media (max-width: 768px) {
  /* Safe area support for iOS */
  body {
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
  }

  /* Ensure all buttons meet 44px touch target minimum */
  button {
    min-height: 44px;
    touch-action: manipulation;
  }

  /* Improve click areas for metric cards */
  .metric-card {
    padding: 16px 12px !important;
    min-height: 60px !important;
  }

  /* Better spacing for mobile content */
  .page {
    padding-left: 8px !important;
    padding-right: 8px !important;
    padding-bottom: 8px !important;
    /* Зберігаємо top padding для фіксованої шапки */
  }

  /* Improve modal spacing on mobile */
  .modal {
    padding: 20px 8px !important;
  }
  .modal-content {
    margin: 0 auto !important;
    width: calc(100% - 0px) !important;
    padding: 16px !important;
  }

  /* Better section titles and refresh buttons */
  .section-title {
    font-size: 16px !important;
    padding: 12px 0 !important;
  }

  .section-title button {
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 12px !important;
  }

  /* Signal cards improvements */
  .signal-card {
    min-height: 64px !important;
    padding: 16px !important;
    touch-action: manipulation;
  }

  /* Для сторінки воронки прибрати зайвий top padding */
  #page-universal-funnel.page {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* Very small screens optimizations */
@media (max-width: 360px) {
  /* Better spacing for very small mobile screens */
  .page {
    padding-left: 4px !important;
    padding-right: 4px !important;
    padding-bottom: 4px !important;
    /* Зберігаємо top padding для фіксованої шапки */
  }

  /* Reduce font sizes slightly for better fit */
  .metric-card .value {
    font-size: 20px !important;
  }

  .metric-card .label {
    font-size: 11px !important;
  }
}

/* Admin quick-nav cards on Home. Default 6 cols (inline style in home.js),
   but on phones 6 cols = ~48px per card which squashes the 40px icon +
   labels below legibility. Collapse to 3 cols on mobile, 2 on very narrow. */
@media (max-width: 1023px) {
  #home-quick-cards {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    padding: 0 4px !important;
  }
  #home-quick-cards > div {
    padding: 14px 8px 12px !important;
    min-height: 80px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
  }
  #home-quick-cards > div > div:first-child {
    width: 32px !important;
    height: 32px !important;
    margin-bottom: 6px !important;
  }
  #home-quick-cards [id^="hqc-val-"] {
    font-size: 14px !important;
    line-height: 1.2 !important;
    font-weight: 600 !important;
    margin: 2px 0 !important;
  }
  #home-quick-cards .hqc-label {
    font-size: 11px !important;
    opacity: 0.8 !important;
    line-height: 1.1 !important;
  }

  /* Better dashboard layout */
  .dashboard-section {
    margin-bottom: 12px !important;
    padding: 0 4px !important;
  }

  .dashboard-section h3 {
    font-size: 16px !important;
    margin-bottom: 8px !important;
  }
}
@media (max-width: 360px) {
  #home-quick-cards {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* Team page — two 3-column stat grids squash under 360px. Keep 3 cols on
   larger phones where each cell still has room; collapse to a horizontal
   flex on very narrow screens so the numeric values don't truncate. */
@media (max-width: 1023px) {
  .team-summary-triplet { gap: 6px !important; }
  .team-summary-triplet > div { padding: 10px 6px !important; }
  .team-summary-triplet > div > div:first-child { font-size: 18px !important; }
}
@media (max-width: 400px) {
  .team-stat-triplet,
  .team-summary-triplet {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }
  .team-stat-triplet > div,
  .team-summary-triplet > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: left !important;
    padding: 10px 12px !important;
  }
  .team-stat-triplet > div > div:first-child,
  .team-summary-triplet > div > div:first-child {
    font-size: 18px !important;
  }
}

.metric-card {
  background: var(--bg-card);
  padding: 16px;
  border-radius: var(--radius-lg);
  border: 0.5px solid var(--border);
  box-shadow: var(--shadow-xs);
  transition: box-shadow var(--duration-fast) var(--ease-default);
}

.metric-card:hover {
  box-shadow: var(--shadow-sm);
}

.metric-card .label {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 6px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  word-break: normal;
  overflow-wrap: normal;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.metric-card .value {
  font-size: 28px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.1;
  letter-spacing: var(--tracking-tight);
  word-break: normal;
  overflow-wrap: normal;
}

.metric-card .subtext {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
  line-height: 1.4;
  word-break: normal;
  overflow-wrap: break-word;
}

.metric-card .subtext-amount {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 3px;
  font-weight: 500;
  word-break: normal;
}

/* ===== SECTION ===== */
.section {
  padding: 12px 15px;
}

.section-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  letter-spacing: var(--tracking-normal);
}

/* ===== SIGNAL CARDS ===== */
.signal-card {
  background: var(--bg-card);
  padding: 12px 15px;
  border-radius: var(--radius-lg);
  margin-bottom: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 0.5px solid var(--border);
  box-shadow: var(--shadow-xs);
  cursor: pointer;
  transition: box-shadow var(--duration-fast) var(--ease-default);
}

.signal-card:hover { box-shadow: var(--shadow-md); }
.signal-card.alert { background: var(--danger-bg); border-left: 3px solid var(--danger); }
.signal-card.warning { background: var(--warning-bg); border-left: 3px solid var(--warning); }

.signal-card .sig-title { font-size: 13px; color: var(--text-primary); font-weight: 500; }
.signal-card .sig-sub { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.signal-card .sig-count { font-size: 28px; font-weight: 600; color: var(--danger); letter-spacing: var(--tracking-tight); }
.signal-card.warning .sig-count { color: var(--warning); }

/* ===== PRODUCTION GRID ===== */
.production-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

/* Mobile improvements for production grid */
@media (max-width: 480px) {
  .production-grid {
    gap: 12px !important;
  }

  .production-card {
    padding: 16px 12px !important;
    min-height: 60px !important;
  }

  .production-card.clickable {
    min-height: 64px !important;
    touch-action: manipulation;
  }
}

.production-card {
  background: var(--bg-card);
  padding: 16px;
  border-radius: var(--radius-lg);
  border: 0.5px solid var(--border);
  box-shadow: var(--shadow-xs);
}

.production-card.clickable { cursor: pointer; transition: box-shadow var(--duration-fast) var(--ease-default); }
.production-card.clickable:hover { box-shadow: var(--shadow-md); }

.production-card .label { font-size: 11px; color: var(--text-muted); margin-bottom: 6px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.02em; }
.production-card .value { font-size: 30px; font-weight: 600; color: var(--text-primary); letter-spacing: var(--tracking-tight); }

/* ===== CHART SECTION ===== */
.chart-section {
  background: var(--bg-card);
  margin: 0 15px 15px;
  border-radius: var(--radius-lg);
  padding: 16px;
  border: 0.5px solid var(--border);
  box-shadow: var(--shadow-xs);
}

.chart-selector {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
  overflow-x: auto;
}

.chart-btn {
  padding: 6px 14px;
  border: 0.5px solid var(--border-md);
  border-radius: var(--radius-pill);
  background: var(--bg-card-solid);
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  white-space: nowrap;
  transition: background var(--duration-fast) var(--ease-default), color var(--duration-fast) var(--ease-default), border-color var(--duration-fast) var(--ease-default);
}

.chart-btn.active { background: var(--btn-primary-bg); color: var(--btn-primary-text); border-color: var(--btn-primary-bg); }

/* ===== ORDER LIST (modal) ===== */
.order-item {
  background: var(--bg-primary);
  padding: 12px;
  border-radius: var(--radius-md);
  margin-bottom: 10px;
  border-left: 3px solid var(--danger);
}

.order-item.warning { border-left-color: var(--warning); }

.order-item .order-id { font-weight: 600; color: var(--text-primary); margin-bottom: 4px; font-size: 13px; }
.order-item .order-detail { font-size: 12px; color: var(--text-secondary); margin-bottom: 3px; }

.order-link {
  display: inline-block;
  margin-top: 8px;
  padding: 5px 12px;
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  text-decoration: none;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 500;
}

/* ===== MODAL ===== */
.modal {
  display: none;
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;   /* запас: inset зʼявився в Chrome 87 */
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 1002;
  overflow-y: auto;
  padding: 40px 16px;
  box-sizing: border-box;
  scrollbar-gutter: stable;
}

.modal.active { display: block; }

.modal-content {
  background: var(--bg-card-solid);
  margin: 0 auto;
  padding: 24px;
  border-radius: var(--radius-xl);
  max-width: 640px;
  width: 100%;
  box-sizing: border-box;
  max-height: calc(100vh - 24px);   /* запас для Chrome < 108: dvh там невідомий */
  max-height: calc(100dvh - 24px);
  overflow-y: auto;
  box-shadow: var(--shadow-xl);
}

@media (max-width: 600px) {
  .modal-content {
    padding: 16px;
    border-radius: var(--radius-lg);
  }
}

/* TTN Modal - wider for better UX on desktop */
.modal-content:has(.ttn-modal-wrap) {
  max-width: 900px;
  width: 90vw;
}

.ttn-modal-wrap {
  max-width: 100%;
  width: 100%;
}

/* Campaign Wizard Modal - large */
.modal-content:has(.ac-wizard) {
  max-width: 1100px;
  width: 96vw;
  padding: 28px 32px;
  box-sizing: border-box;
}

.modal-content:has(.ac-wizard) .ac-wizard-content {
  min-height: 560px;
}

/* Category Settings Modal - wider for better UX with SKU rules */
.modal-content:has(#add-category-form),
.modal-content:has(#edit-category-form) {
  max-width: 800px;
  width: 85vw;
  padding: 20px 30px; /* Extra horizontal padding to prevent cutoff */
  box-sizing: border-box;
}

@media (max-width: 1000px) {
  .modal-content:has(.ttn-modal-wrap) {
    max-width: 800px;
  }

  .modal-content:has(#add-category-form),
  .modal-content:has(#edit-category-form) {
    max-width: 700px;
  }
}

@media (max-width: 900px) {
  .modal-content:has(.ttn-modal-wrap) {
    max-width: 700px;
  }

  .modal-content:has(#add-category-form),
  .modal-content:has(#edit-category-form) {
    max-width: 600px;
  }
}

@media (max-width: 768px) {
  .modal-content:has(.ttn-modal-wrap) {
    max-width: 500px;
  }

  .modal-content:has(#add-category-form),
  .modal-content:has(#edit-category-form) {
    max-width: 95vw;
    width: 95vw;
    margin: 10px auto;
    padding: 15px 20px; /* Adequate padding on mobile */
  }
}

/* SKU Rules Styling */
.sku-rule-item {
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 12px;
  margin-bottom: 8px;
  background: #f8fafc;
}

.sku-rule-item .sku-rule-type,
.sku-rule-item input {
  font-size: 12px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  padding: 6px 8px;
}

.sku-rule-item .sku-rule-inputs {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sku-rule-item .sku-rule-inputs input {
  width: 100%;
  box-sizing: border-box;
}

/* Ensure SKU rules container doesn't overflow */
#sku-rules-container {
  overflow: visible;
  margin-right: 0;
  padding-right: 0;
}

.sku-rule-item {
  margin-right: 0;
  box-sizing: border-box;
}

@media (min-width: 769px) {
  .sku-rule-item .sku-rule-inputs {
    flex-direction: row;
  }

  .sku-rule-item .sku-rule-inputs input:not(:first-child) {
    margin-left: 4px;
  }
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.modal-header h3 { font-size: 17px; font-weight: 600; color: var(--text-primary); letter-spacing: var(--tracking-normal); }

.modal-close {
  background: var(--bg-active);
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: var(--text-muted);
  line-height: 1;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-round);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--duration-fast) var(--ease-default);
}

.modal-close:hover { background: var(--border-strong); }

/* ===== TABLES ===== */
.orders-table-wrap {
  overflow-x: auto;
  border-radius: var(--radius-lg);
  border: 0.5px solid var(--border);
  box-shadow: var(--shadow-xs);
}

.orders-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--bg-card-solid);
  font-size: 13px;
}

.orders-table thead tr {
  border-bottom: 0.5px solid var(--border-md);
}

.orders-table thead th {
  position: sticky;
  top: 0;
  z-index: 10;
  box-shadow: 0 1px 0 var(--border-md), 0 2px 4px rgba(0, 0, 0, 0.04);
}

.orders-table th {
  padding: 10px 12px;
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
  background: var(--bg-primary);
}

.orders-table th.op-sortable {
  cursor: pointer;
  user-select: none;
}
.orders-table th.op-sortable:hover { color: var(--text-primary); }
.orders-table th .op-sort-arrow {
  display: inline-block;
  margin-left: 3px;
  font-size: 11px;
  opacity: 0.5;
}
.orders-table th.op-sort-active { color: var(--accent); }
.orders-table th.op-sort-active .op-sort-arrow { opacity: 1; }

.orders-table td {
  padding: 10px 12px;
  border-bottom: 0.5px solid var(--border);
  vertical-align: middle;
  color: var(--text-primary);
  position: relative;
}

.orders-table tr:hover td {
  background: var(--bg-hover);
}

/* Row hover quick actions */
.orders-table tr .op-row-actions {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  gap: 4px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease;
  background: var(--bg-card-solid);
  padding: 4px 6px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border: 0.5px solid var(--border);
  z-index: 5;
}
.orders-table tr:hover .op-row-actions {
  opacity: 1;
  pointer-events: auto;
}
.orders-table .op-row-actions button {
  background: transparent;
  border: none;
  border-radius: 6px;
  padding: 4px 6px;
  font-size: 13px;
  cursor: pointer;
  line-height: 1;
  color: var(--text-secondary);
}
.orders-table .op-row-actions button:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.orders-table tr:last-child td {
  border-bottom: none;
}

.orders-cards-mobile { display: none; }

/* ===== ORDERS FILTER PANEL ===== */
.op-filter-backdrop {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;   /* запас: inset зʼявився в Chrome 87 */
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  z-index: 1100;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
}
.op-filter-backdrop.op-open {
  opacity: 1;
  pointer-events: auto;
}
.op-filter-panel {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: 640px;
  max-width: 96vw;
  background: var(--bg-card-solid);
  border-left: 0.5px solid var(--border);
  box-shadow: -8px 0 24px rgba(0, 0, 0, 0.12);
  z-index: 1101;
  transform: translateX(100%);
  transition: transform 0.24s cubic-bezier(0.2, 0.8, 0.2, 1);
  display: flex;
  flex-direction: column;
}
.op-filter-panel.op-open {
  transform: translateX(0);
}
.op-filter-header {
  padding: 16px 20px;
  border-bottom: 0.5px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--bg-card-solid);
}
.op-filter-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
}
.op-filter-close {
  background: none;
  border: none;
  font-size: 22px;
  color: var(--text-muted);
  cursor: pointer;
  line-height: 1;
  padding: 0 6px;
}
.op-filter-body {
  flex: 1;
  overflow-y: auto;
  padding: 12px 20px;
}
.op-filter-section {
  border-bottom: 0.5px solid var(--border);
  padding: 8px 0;
}
.op-filter-section summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 13px;
  color: var(--text-primary);
  list-style: none;
  padding: 8px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  user-select: none;
}
.op-filter-section summary::-webkit-details-marker { display: none; }
.op-filter-section summary::after {
  content: '›';
  font-size: 18px;
  color: var(--text-muted);
  transform: rotate(90deg);
  transition: transform 0.15s ease;
}
.op-filter-section:not([open]) summary::after { transform: rotate(0deg); }
.op-filter-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 14px;
  padding: 6px 0 12px 0;
}
.op-filter-field { display: flex; flex-direction: column; gap: 4px; }
.op-filter-field.op-filter-span2 { grid-column: 1 / span 2; }
.op-filter-field label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.op-filter-field input,
.op-filter-field select,
.op-filter-field textarea {
  padding: 8px 10px;
  border: 0.5px solid var(--border-input);
  border-radius: 8px;
  font-size: 13px;
  background: var(--bg-primary);
  color: var(--text-primary);
  outline: none;
  width: 100%;
  box-sizing: border-box;
}
.op-filter-field input:focus,
.op-filter-field select:focus { border-color: var(--accent); }
.op-filter-range { display: grid; grid-template-columns: 1fr auto 1fr; gap: 6px; align-items: center; }
.op-filter-range .op-dash { color: var(--text-muted); font-weight: 600; }
.op-filter-footer {
  padding: 14px 20px;
  border-top: 0.5px solid var(--border);
  display: flex;
  gap: 8px;
  background: var(--bg-card-solid);
}
.op-filter-footer button {
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  border: 0.5px solid var(--border-input);
}
.op-filter-footer .op-filter-apply  { flex: 1; background: var(--btn-primary-bg); color: white; border-color: var(--btn-primary-bg); }
.op-filter-footer .op-filter-reset  { background: var(--bg-primary); color: var(--text-secondary); }
.op-filter-footer .op-filter-save   { background: var(--bg-primary); color: var(--text-secondary); }

/* Active filter chips (below toolbar) */
.op-chips-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.op-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--accent-light);
  color: var(--accent);
  border: 0.5px solid var(--accent);
  border-radius: 999px;
  padding: 3px 4px 3px 10px;
  font-size: 12px;
  font-weight: 500;
}
.op-chip button {
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0 4px;
}
.op-filter-badge {
  display: inline-block;
  background: var(--accent);
  color: white;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  padding: 1px 6px;
  margin-left: 4px;
  line-height: 1.4;
}

/* Saved searches dropdown */
.op-saved-menu {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 4px;
  background: var(--bg-card-solid);
  border: 0.5px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow-md);
  min-width: 240px;
  max-height: 320px;
  overflow-y: auto;
  z-index: 30;
  display: none;
  padding: 4px 0;
}
.op-saved-menu.op-open { display: block; }
.op-saved-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 13px;
}
.op-saved-item:hover { background: var(--bg-hover); }
.op-saved-item button {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 13px;
  padding: 2px 4px;
}
.op-saved-item button:hover { color: var(--danger-text); }
.op-saved-empty { padding: 10px 12px; font-size: 12px; color: var(--text-muted); text-align: center; }

/* ===== CUSTOM FIELD TOGGLE (order detail) ===== */
.cf-toggle {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 22px;
  flex-shrink: 0;
}
.cf-toggle input { opacity: 0; width: 0; height: 0; }
.cf-toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0; right: 0; bottom: 0; left: 0;   /* запас: inset зʼявився в Chrome 87 */
  inset: 0;
  background: var(--border);
  border-radius: 22px;
  transition: 0.2s;
}
.cf-toggle-slider::before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 3px;
  bottom: 3px;
  background: white;
  border-radius: 50%;
  transition: 0.2s;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.cf-toggle input:checked + .cf-toggle-slider { background: var(--accent); }
.cf-toggle input:checked + .cf-toggle-slider::before { transform: translateX(18px); }
.cf-toggle input:focus-visible + .cf-toggle-slider { box-shadow: 0 0 0 3px var(--accent-light); }

/* ===== RICH TASK MODAL (orders detail) ===== */
.tm-type-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
}
.tm-type-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 4px;
  border: 0.5px solid var(--border-input);
  border-radius: 10px;
  background: var(--bg-primary);
  cursor: pointer;
  font-size: 11px;
  color: var(--text-secondary);
  transition: all 0.12s ease;
}
.tm-type-btn .tm-type-emoji { font-size: 18px; line-height: 1; }
.tm-type-btn:hover { border-color: var(--accent); color: var(--text-primary); }
.tm-type-btn.tm-active {
  background: var(--accent-light);
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 700;
}
.tm-preset-row { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.tm-preset-btn {
  padding: 4px 10px;
  border: 0.5px solid var(--border-input);
  border-radius: 999px;
  background: var(--bg-card-solid);
  font-size: 11px;
  cursor: pointer;
  color: var(--text-secondary);
}
.tm-preset-btn:hover { border-color: var(--accent); color: var(--accent); }
.tm-priority-row { display: flex; gap: 6px; }
.tm-prio-btn {
  flex: 1;
  padding: 8px;
  border: 0.5px solid var(--border-input);
  border-radius: 10px;
  background: var(--bg-card-solid);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  color: var(--text-secondary);
}
.tm-prio-btn.tm-active { color: white; border-color: transparent; }
.tm-prio-btn[data-prio="normal"].tm-active    { background: #64748b; }
.tm-prio-btn[data-prio="important"].tm-active { background: #d97706; }
.tm-prio-btn[data-prio="critical"].tm-active  { background: #dc2626; }
.tm-assignee-list {
  max-height: 180px;
  overflow-y: auto;
  border: 0.5px solid var(--border-input);
  border-radius: 10px;
  margin-top: 4px;
}
.tm-assignee-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  cursor: pointer;
  font-size: 13px;
}
.tm-assignee-item:hover { background: var(--bg-hover); }
.tm-assignee-item.tm-active { background: var(--accent-light); color: var(--accent); font-weight: 600; }
.tm-avatar {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), #6366f1);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
  object-fit: cover;
}
.tm-checklist-item { display: flex; gap: 6px; margin-bottom: 4px; }
.tm-checklist-item input[type="text"] {
  flex: 1;
  padding: 6px 10px;
  border: 0.5px solid var(--border-input);
  border-radius: 8px;
  font-size: 12px;
  outline: none;
}
.tm-checklist-item button {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 16px;
}

@media (max-width: 1023px) {
  .orders-table-wrap { display: none; }
  .orders-cards-mobile { display: block; }
}

/* ===== MOBILE ORDER CARD ===== */
.order-card {
  background: var(--bg-card-solid);
  border-radius: var(--radius-lg);
  padding: 12px;
  margin-bottom: 10px;
  border: 0.5px solid var(--border);
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.order-card-selected {
  background: var(--accent-light);
  border-color: var(--accent);
}
.oc-top {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.oc-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  min-height: 24px;
}
.oc-check input {
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
  cursor: pointer;
}
.oc-id {
  font-size: 15px;
  font-weight: 700;
  color: #1a1a2e;
}
.oc-age { display: inline-flex; align-items: center; }
.oc-fu { display: inline-flex; align-items: center; }
.oc-status {
  margin-left: auto;
  border-radius: var(--radius-pill);
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.oc-buyer {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
}
.oc-buyer-name {
  font-weight: 600;
  color: var(--text-primary);
  font-size: 14px;
}
.oc-phone {
  color: var(--success-text);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
}
.oc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.oc-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-secondary);
  background: var(--bg-primary);
  white-space: nowrap;
}
.oc-chip-accent { color: var(--accent); background: var(--accent-light); }
.oc-chip-warn { color: #d97706; background: #fef3c7; font-weight: 600; }
.oc-chip-danger { color: #b91c1c; background: #fee2e2; font-weight: 700; }
.oc-product {
  display: flex;
  align-items: center;
  gap: 10px;
}
.oc-photo {
  width: 56px;
  height: 44px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
}
.oc-photo-empty {
  background: var(--bg-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}
.oc-product-name {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.oc-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}
.oc-total {
  font-weight: 700;
  color: var(--text-primary);
  font-size: 15px;
}
.oc-pay { font-weight: 600; font-size: 12px; }
.oc-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.oc-tag {
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
}
.oc-tag-more { background: var(--bg-primary); color: var(--text-muted); }
.oc-tag-ttn { background: #f0fdf4; color: #059669; display: inline-flex; align-items: center; gap: 3px; }
.oc-actions {
  display: flex;
  gap: 6px;
  margin-top: 2px;
  padding-top: 8px;
  border-top: 0.5px solid var(--border);
}
.oc-btn {
  flex: 1;
  min-height: 44px;
  border: 0.5px solid var(--border);
  border-radius: 10px;
  background: var(--bg-primary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-primary);
  text-decoration: none;
  padding: 0 8px;
}
.oc-btn:active { background: var(--bg-hover); transform: scale(0.97); }
.oc-btn-primary { background: var(--success-bg); color: var(--success-text); }
.oc-btn-disabled { opacity: 0.4; cursor: not-allowed; }

/* ===== MOBILE FILTER PANEL (bottom sheet) ===== */
@media (max-width: 1023px) {
  .op-filter-panel {
    width: 100% !important;
    max-width: 100% !important;
    height: 88vh !important;
    top: auto !important;
    right: 0 !important;
    bottom: 0 !important;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    border-left: none;
    transform: translateY(100%);
    box-shadow: 0 -8px 24px rgba(0,0,0,0.2);
  }
  .op-filter-panel.op-open { transform: translateY(0); }
  .op-filter-panel::before {
    content: '';
    display: block;
    width: 40px;
    height: 4px;
    background: var(--border-md);
    border-radius: 2px;
    margin: 8px auto 0;
  }
  .op-filter-header {
    padding: 10px 16px;
    position: sticky;
    top: 0;
    z-index: 2;
  }
  .op-filter-close {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .op-filter-body { padding: 8px 14px 14px; }
  .op-filter-fields { grid-template-columns: 1fr !important; gap: 8px; }
  .op-filter-field.op-filter-span2 { grid-column: auto !important; }
  .op-filter-footer {
    position: sticky;
    bottom: 0;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
  }
  .op-filter-footer button { min-height: 44px; }
}

/* ===== MOBILE BULK BAR ===== */
@media (max-width: 1023px) {
  #orders-bulk-bar {
    left: 8px !important;
    right: 8px !important;
    transform: none !important;
    max-width: none !important;
    width: auto !important;
    padding: 8px 10px !important;
    gap: 6px !important;
    flex-wrap: nowrap !important;
    border-radius: var(--radius-lg) !important;
  }
  .bulk-desktop-only { display: none !important; }
  .bulk-more-menu {
    position: absolute;
    bottom: 100%;
    right: 0;
    margin-bottom: 6px;
    background: var(--bg-card-solid);
    border: 0.5px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    min-width: 180px;
    padding: 6px 0;
    z-index: 1001;
  }
  .bulk-more-menu button {
    display: flex !important;
    width: 100%;
    border: none !important;
    border-radius: 0 !important;
    padding: 10px 14px !important;
    font-size: 13px !important;
    background: none !important;
    text-align: left;
    cursor: pointer;
    color: var(--text-primary);
    min-height: 44px;
  }
  .bulk-more-menu button:active { background: var(--bg-hover); }
}
.bulk-more-only { display: none; }
@media (min-width: 768px) {
  .bulk-more-toggle { display: none !important; }
}

/* ===== PAGINATION MOBILE ===== */
@media (max-width: 1023px) {
  #orders-pagination button {
    min-height: 44px;
    padding: 0 18px;
    font-size: 14px;
  }
}

/* ===== MOBILE TOOLBAR ===== */
.orders-toolbar-mobile-only { display: none !important; }
@media (max-width: 1023px) {
  .orders-toolbar-desktop-only { display: none !important; }
  .orders-toolbar-mobile-only { display: flex !important; }
  .orders-mobile-menu {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 6px;
    background: var(--bg-card-solid);
    border: 0.5px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    min-width: 220px;
    padding: 6px 0;
    z-index: 40;
  }
  .orders-mobile-menu button,
  .orders-mobile-menu label {
    display: flex !important;
    align-items: center;
    gap: 8px;
    width: 100%;
    border: none !important;
    border-radius: 0 !important;
    padding: 11px 14px !important;
    font-size: 13px !important;
    background: none !important;
    text-align: left;
    cursor: pointer;
    color: var(--text-primary);
    min-height: 44px;
  }
  .orders-mobile-menu button:active,
  .orders-mobile-menu label:active { background: var(--bg-hover); }
  .orders-mobile-menu-section {
    border-top: 0.5px solid var(--border);
    margin-top: 4px;
    padding-top: 4px;
  }
}

/* ===== MOBILE ORDER DETAIL (fullscreen) =====
   The wrap is its own scroll container (position:fixed + overflow-y:auto),
   so the body no longer needs overflow:hidden. Dropping the body lock
   prevents the "scroll dead" bug that appeared when body.order-detail-open
   was not cleared on error or on route change. */

/* Ховаємо шапку, поки відкрита картка замовлення — на мобільному картка
   розкривається на весь екран, а backdrop-filter шапки на iOS Safari
   промальовується поверх неї.
   Правило навмисно всередині медіазапиту: на десктопі картка не
   повноекранна, і шапка там зникала без причини. */
@media (max-width: 1023px) {
  body.order-detail-open .app-header { display: none !important; }
}

@media (max-width: 1023px) {
  .order-detail-wrap {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    background: var(--bg-primary);
    display: flex;
    flex-direction: column;
    /* overflow lives on .od-scroll-body — prevents iOS sticky bug */
  }
  .order-detail-wrap .od-hdr {
    flex-shrink: 0;
    z-index: 10;
    background: var(--bg-card-solid);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    /* Push content below notch / Dynamic Island */
    padding-top: calc(env(safe-area-inset-top, 0px) + 12px);
    padding-left: calc(env(safe-area-inset-left, 0px) + 12px);
    padding-right: calc(env(safe-area-inset-right, 0px) + 12px);
  }
  .od-scroll-body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
  }
  .order-detail-wrap {
    overflow-x: hidden;
  }
  .order-detail-bottombar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding:
      10px
      calc(env(safe-area-inset-right, 0px) + 10px)
      calc(env(safe-area-inset-bottom, 0px) + 10px)
      calc(env(safe-area-inset-left, 0px) + 10px);
    background: var(--bg-card-solid);
    border-top: 0.5px solid var(--border);
    z-index: 1001;
    box-shadow: 0 -4px 14px rgba(0,0,0,0.08);
  }
  .order-detail-bottombar a,
  .order-detail-bottombar button {
    min-height: 48px;
    border-radius: 12px;
    border: 0.5px solid var(--border);
    background: var(--bg-primary);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: var(--text-primary);
    text-decoration: none;
  }
  .order-detail-bottombar a.odb-primary,
  .order-detail-bottombar button.odb-primary {
    background: var(--success-bg);
    color: var(--success-text);
    border-color: var(--success-bg);
  }
}
@media (min-width: 768px) {
  .order-detail-bottombar { display: none !important; }
}

/* ===== ORDER DETAIL (extracted from inline <style>) ===== */
.od-back {
  background: none;
  border: none;
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
  cursor: pointer;
  padding: 8px 4px;
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  min-width: 44px;
}
.od-hdr {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 0.5px solid var(--border);
  flex-wrap: wrap;
  gap: 8px;
  background: var(--bg-card-solid);
}
.od-hdr-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  min-width: 0;
  flex: 1;
}
.od-title {
  font-size: 18px;
  font-weight: 800;
  color: var(--text-primary);
}
.od-meta {
  font-size: 12px;
  color: var(--text-muted);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Три колонки — три окремі блоки на спільному тлі. Після того як зникли
   роздільники між рядками, поділ на «основне / покупець / доставка» читався
   тільки за заголовками; тепер кожна група має власну підкладку, як панелі
   нижче. */
.od-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  padding: 12px 16px;
}
.od-col {
  padding: 14px 16px;
  min-width: 0;
  background: var(--bg-secondary, #f8fafc);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 12px;
}

/* Колонки картки замовлення тягнуться на однакову висоту: у сітки
   align-items за замовчуванням stretch, але роздільник праворуч малювався
   лише по висоті вмісту — на око колонки виглядали різними. */
.od-grid > .od-col { display: flex; flex-direction: column; }
/* Вкладені блоки всередині колонки (як «Джерело трафіку») були на тому ж
   сірому, що й сама колонка, і зливались із нею. Робимо їх світлішими —
   вкладеність читається без додаткових рамок. */
.od-col [style*="background:var(--bg-primary)"],
.od-col [style*="background: var(--bg-primary)"] {
  background: var(--bg-card, #fff) !important;
  border: 1px solid var(--border, #e2e8f0);
}

/* Панелі під сіткою: фіскалізація, документи, підрядники.
   Були трьома різними пастельними кольорами (жовтий, зелений, фіолетовий) —
   разом із десятком кольорів кнопок вони перекрикували те, заради чого
   картку відкривають: суму й статус. Тепер тло однакове, колір лишається
   тільки для стану і для однієї головної дії. */
.od-panel {
  background: var(--bg-secondary, #f8fafc);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 12px;
  padding: 16px;
}
.od-panel-title { font-weight: 700; font-size: 14px; color: var(--text-primary); margin-bottom: 8px; }
.od-panel-link { font-size: 11px; font-weight: 600; color: var(--text-muted); text-decoration: none; }
.od-panel-link:hover { color: var(--accent, #6366f1); }

.od-btn {
  padding: 6px 10px;
  min-height: 32px;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 8px;
  background: var(--bg-card, #fff);
  color: var(--text-primary);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}
.od-btn:hover { border-color: var(--accent, #6366f1); color: var(--accent, #6366f1); }
.od-btn-primary {
  background: var(--accent, #6366f1);
  border-color: var(--accent, #6366f1);
  color: #fff;
}
.od-btn-primary:hover { filter: brightness(1.08); color: #fff; }
.od-btn-wide { width: 100%; margin-top: 8px; }
.od-btn[disabled] { opacity: .5; cursor: not-allowed; }

/* Файли і фото обкладинки поруч у колонці замовлення */
.od-attach-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: start;
}
.od-attach-row > .od-field { border-bottom: none; padding-bottom: 0; }
@media (max-width: 600px) {
  /* У вузькій колонці два блоки стискаються до нечитабельного */
  .od-attach-row { grid-template-columns: 1fr; gap: 4px; }
}

/* Сума замовлення окремим рядком під ознаками */
.od-total-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 0.5px solid var(--border);
}
.od-total-label { font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .4px; font-weight: 600; }
.od-total-value { font-size: 24px; font-weight: 800; color: var(--text-primary); letter-spacing: -0.03em; }
.od-total-uah { font-size: 11px; color: var(--text-muted); margin-left: 8px; }

/* Ознаки замовлення одним рядком під колонками */
.od-flags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  padding: 12px 16px;
  border-bottom: 0.5px solid var(--border);
}
.od-flag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text-muted);
  user-select: none;
}
.od-flag-on .od-flag-label { color: var(--text-primary); font-weight: 600; }

@media (max-width: 768px) {
  /* На телефоні по два в ряд, щоб не розтягувати картку вниз */
  .od-flags { gap: 10px 14px; padding: 12px 14px; }
  .od-flag { flex: 0 0 calc(50% - 14px); min-height: 44px; }
}
.od-lbl {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 10px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.od-field {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* Роздільника між рядками більше немає: у картці їх набиралось під шість
     десятків і сторінка виглядала як зошит у клітинку. Групи розділяє
     пропуск — око поєднує близьке саме, лінії для цього не потрібні. */
  padding: 7px 0;
  font-size: 13px;
  min-height: 38px;
  gap: 8px;
}
.od-fk {
  color: var(--text-muted);
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.od-fv {
  color: var(--text-primary);
  font-weight: 500;
  text-align: right;
  max-width: 60%;
  word-break: break-word;
}

/* Випайка як значення рядка картки.
 *
 * Головне тут — appearance: none. Без нього iOS малює власний елемент: свою
 * рамку, свій фон і свій, значно більший шрифт. Через це поля «Виконавець» і
 * «Продавець» на телефоні виглядали як великі білі кнопки поряд із дрібним
 * текстом «Дарина» і «Часткова оплата» — розміри й шрифти в картці не збігались.
 * Стрілку малюємо самі, бо разом із системним виглядом зникає й вона. */
.od-fv-select {
  appearance: none;
  -webkit-appearance: none;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--text-primary);
  background-color: transparent;
  border: none;
  outline: none;
  cursor: pointer;
  text-align: right;
  max-width: 62%;
  min-height: 32px;
  padding: 4px 16px 4px 4px;
  /* Стрілка: та сама, що в поля статусу */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238e8e93' stroke-width='2.4' stroke-linecap='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 2px center;
  text-overflow: ellipsis;
}
.od-fv-select:disabled { cursor: default; opacity: 0.6; }
.od-add {
  color: var(--text-placeholder);
  font-size: 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.od-add:hover { color: var(--accent); }
/* Коментарі менеджера і клієнта — поруч у дві колонки: обидва короткі,
   а один під одним вони з'їдали пів екрана до списку товарів.
   На вузькому екрані повертаються в один стовпчик. */
.od-comments {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 0.5px solid var(--border);
}
.od-comments > .od-sec {
  border-bottom: none;
  min-width: 0;
}
.od-comments > .od-sec:first-child {
  border-right: 0.5px solid var(--border);
}
@media (max-width: 900px) {
  .od-comments { grid-template-columns: 1fr; }
  .od-comments > .od-sec:first-child {
    border-right: none;
    border-bottom: 0.5px solid var(--border);
  }
}

.od-sec {
  padding: 14px 16px;
  border-bottom: 0.5px solid var(--border);
  /* Establish a stacking context per section + guarantee pointer-events
     so a stray off-screen overlay (filter backdrop, bulk-bar, modal that
     missed its close) cannot eat clicks targeted at section buttons. */
  position: relative;
  z-index: 1;
  pointer-events: auto;
}
/* Status / pay badge variants. Both spans ship in HTML always; only the
   width-appropriate one is shown. The mobile rule lower in the file
   used to flip them only on <768px, which left BOTH inline by default
   on desktop → "ВиконаноВиконано". Hide short by default; show on
   mobile breakpoint. */
.od-badge-short { display: none; }
.od-sec button,
.od-sec a,
.od-sec [onclick],
.od-sec input,
.od-sec select,
.od-sec textarea {
  position: relative;
  z-index: 2;
  pointer-events: auto;
}
.od-badge {
  display: inline-block;
  padding: 5px 10px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 700;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.od-contact-btn {
  padding: 10px 14px;
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: none;
  cursor: pointer;
  min-height: 44px;
  min-width: 44px;
}
.od-icon-btn {
  /* Нейтральна за замовчуванням: колір рамки задавався інлайном під тон
     секції, і кожна кнопка редагування була іншого кольору. */
  background: none;
  border: 1px solid var(--border, #e2e8f0);
  color: var(--text-muted);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 14px;
  cursor: pointer;
  min-height: 44px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.od-prod-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}

/* Desktop: treat <details> like plain sections (always expanded, no arrow) */
@media (min-width: 768px) {
  .od-collapse > summary {
    list-style: none;
    cursor: default;
    pointer-events: none;
  }
  .od-collapse > summary::-webkit-details-marker { display: none; }
  .od-collapse > summary .od-collapse-arrow { display: none; }
  .od-collapse > summary .od-lbl { margin-bottom: 0; }
  /* Force body visible regardless of [open] — but skip the mobile-only
     card blocks, otherwise this !important rule wins over the hide rule
     below and products/payments render twice (table + cards). */
  details.od-collapse > *:not(summary):not(.od-products-mobile):not(.od-payments-mobile) {
    display: block !important;
  }
  /* Hide mobile-only card blocks on desktop */
  .od-products-mobile, .od-payments-mobile { display: none !important; }
}

/* Mobile — the real collapse + compact layout */
@media (max-width: 1023px) {
  /* Flex column lets us re-order sections on mobile without touching HTML.
     Header + 3-col grid pinned on top, then CF + Docs (quickly needed),
     then the remaining sections fall into source order. */
  .order-detail-wrap { display: flex; flex-direction: column; }
  .od-hdr { order: -10; }
  .od-grid { order: -9; }
  .od-cf-section { order: -2; }
  .od-docs-section { order: -1; }
  .od-back-label { display: none; }
  .od-grid { grid-template-columns: 1fr !important; gap: 10px; padding: 10px 12px; }
  .od-col { border-right: none !important; }
  .od-title { font-size: 16px; }
  .od-sec { padding: 12px 14px; }
  .od-hdr { padding: 10px 12px; gap: 6px; }
  .od-hdr-row { gap: 6px; }
  .od-status-badge, .od-pay-badge { max-width: 140px; }
  .od-badge-full { display: none; }
  .od-badge-short { display: inline; }
  .od-meta {
    font-size: 11px;
    white-space: normal;
    width: 100%;
    overflow: visible;
    text-overflow: clip;
  }
  .od-prod-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px;
  }
  /* Collapsible summary look */
  .od-collapse > summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    user-select: none;
    min-height: 44px;
  }
  .od-collapse > summary::-webkit-details-marker { display: none; }
  .od-collapse > summary .od-lbl { margin-bottom: 0; }
  .od-collapse-arrow {
    font-size: 20px;
    color: var(--text-muted);
    transform: rotate(90deg);
    transition: transform 0.15s ease;
  }
  .od-collapse:not([open]) > summary .od-collapse-arrow {
    transform: rotate(0deg);
  }
  /* Рядки картки замовлення: однакові розміри в усіх полях.
     На телефоні ярлик був 12px, текстове значення 13px, а випайка — 16px
     (її нав'язував mobile-fixes.css). Через це поля виглядали різнокаліберно.
     Тут задаємо єдиний масштаб: ярлик 13, значення 14, і всі значення стоять
     на одній вертикалі праворуч. */
  .od-field { font-size: 14px; min-height: 40px; gap: 10px; }
  .od-fk { font-size: 13px; }
  .od-fv,
  .od-fv-select,
  .od-field > input[type="text"],
  .od-field > input[type="number"] {
    font-size: 14px;
    font-weight: 500;
    text-align: right;
  }
  .od-fv-select { max-width: 58%; min-height: 34px; }
  /* Поле-значення, яке редагується текстом, не має стрибати по ширині */
  .od-field > input[type="text"],
  .od-field > input[type="number"] { max-width: 58%; min-height: 34px; }

  /* Mobile product / payment cards */
  .od-products-desktop, .od-payments-desktop { display: none; }
  .od-products-mobile { display: flex; flex-direction: column; gap: 8px; }
  .od-prod-card {
    display: flex;
    gap: 10px;
    padding: 10px;
    background: var(--bg-primary);
    border-radius: 10px;
    border: 0.5px solid var(--border);
  }
  .od-prod-photo {
    width: 56px;
    height: 56px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
  }
  .od-prod-photo-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-card-solid);
    font-size: 22px;
  }
  .od-prod-body { flex: 1; min-width: 0; }
  .od-prod-name {
    font-weight: 700;
    font-size: 13px;
    color: var(--text-primary);
    word-break: break-word;
  }
  .od-prod-sku { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
  .od-prod-comment {
    font-size: 11px;
    color: var(--text-secondary);
    margin-top: 4px;
    word-break: break-word;
  }
  .od-prod-pricing {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-top: 6px;
    font-size: 13px;
  }
  .od-prod-pricing b { font-weight: 700; color: var(--text-primary); }
  .od-payments-mobile { display: flex; flex-direction: column; gap: 8px; }
  .od-pay-card {
    padding: 10px;
    background: var(--bg-primary);
    border-radius: 10px;
    border: 0.5px solid var(--border);
  }
  .od-pay-top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
  }
  .od-pay-method { font-size: 12px; color: var(--text-secondary); }
  .od-pay-amount { font-size: 15px; font-weight: 700; color: var(--text-primary); }
  .od-pay-bot {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-top: 4px;
    font-size: 11px;
  }
  .od-pay-date { color: var(--text-muted); }
  /* Follow-up form stacks vertically */
  .od-fu-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 6px;
  }
  .od-fu-form .od-fu-text,
  .od-fu-form .od-fu-due { width: 100%; }
  .od-fu-form .od-fu-add { width: 100%; min-height: 44px; }
  /* Bottom bar: adjust to 4 columns (Back + 3 actions) */
  .order-detail-bottombar {
    grid-template-columns: 1.2fr 1fr 1fr !important;
  }
  .order-detail-bottombar .odb-back {
    background: var(--bg-primary);
    color: var(--text-primary);
    font-weight: 600;
  }

  /* 1. Action row (Фіскалізація / Документи / Теги) → 1 колонка на мобільному */
  .od-action-row { grid-template-columns: 1fr !important; }

  /* 2. Приховати дубльовану кнопку "До списку" внизу (bottom bar вже є) */
  .od-back-section { display: none; }

  /* 3. Кнопка редагування завжди впирається в правий край (не переноситься разом з бейджами) */
  .od-edit-btn { margin-left: auto; flex-shrink: 0; }

  /* 4. Нижній рядок картки товару.
        Раніше поля «Нормо-год», «Знижка», «Допродаж», випайка наявності і три
        кнопки стояли одним нерозривним рядком: на телефоні він не вміщався, і
        поле знижки виїжджало за правий край екрана. Тепер рядок переноситься,
        поля стають на два стовпці, а кнопки завжди притиснуті праворуч. */
  .od-prod-footer {
    margin-top: 6px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
  }
  .od-prod-controls {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
    gap: 6px 10px;
    flex: 1 1 100%;
    min-width: 0;
  }
  .od-prod-controls > select {
    max-width: 100%;
    min-height: 32px;
  }
  .od-prod-ctl {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    font-size: 11px;
    color: var(--text-muted);
    min-width: 0;
  }
  .od-prod-ctl > span { white-space: nowrap; }
  .od-prod-ctl > input[type="text"] {
    width: 100%;
    max-width: 72px;
    min-height: 32px;
  }
  .od-prod-ctl-check {
    justify-content: flex-start;
    cursor: pointer;
  }
  .od-prod-ctl-check > input[type="checkbox"] {
    accent-color: var(--accent, var(--ord-accent));
    width: 18px;
    height: 18px;
    cursor: pointer;
    flex-shrink: 0;
  }
  .od-prod-actions {
    display: flex;
    gap: 4px;
    margin-left: auto;
    flex-shrink: 0;
  }
  /* Довга назва товару не має розтягувати картку за межі екрана */
  .od-prod-card { overflow: hidden; }

  /* 5. Кнопки у секції Документи — переноситись при потребі */
  .od-docs-buttons { flex-wrap: wrap !important; gap: 4px !important; }
}

/* Follow-up form — desktop inline */
@media (min-width: 768px) {
  .od-fu-form {
    display: flex;
    gap: 6px;
    margin-top: 6px;
  }
  .od-fu-form .od-fu-text {
    flex: 1;
    padding: 6px 8px;
    border: 0.5px solid var(--border-input);
    border-radius: 6px;
    font-size: 12px;
    box-sizing: border-box;
  }
  .od-fu-form .od-fu-due {
    padding: 6px 8px;
    border: 0.5px solid var(--border-input);
    border-radius: 6px;
    font-size: 12px;
  }
  .od-fu-form .od-fu-add {
    padding: 6px 10px;
    font-size: 11px;
    white-space: nowrap;
    border: 0.5px solid var(--border-input);
    border-radius: 6px;
    background: var(--bg-card-solid);
    color: var(--text-placeholder);
    cursor: pointer;
  }
}
@media (max-width: 1023px) {
  .od-fu-form .od-fu-text,
  .od-fu-form .od-fu-due {
    padding: 10px 12px;
    border: 0.5px solid var(--border-input);
    border-radius: 8px;
    font-size: 13px;
    box-sizing: border-box;
    min-height: 44px;
  }
  .od-fu-form .od-fu-add {
    padding: 10px 14px;
    border: 0.5px solid var(--accent);
    border-radius: 8px;
    background: var(--accent-light);
    color: var(--accent);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
  }
}

/* ===== ORDER PAYMENTS (linked bank tx + suggestions) ===== */
.od-pay-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  padding: 10px 12px;
  background: var(--bg-primary);
  border-radius: 10px;
  margin-bottom: 10px;
}
.od-pay-sum-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 110px;
}
.od-pay-sum-lbl {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.od-pay-actions-row {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 10px;
}
.od-pay-add-btn {
  padding: 9px 14px;
  border-radius: 10px;
  border: 0.5px solid var(--accent);
  background: var(--accent-light);
  color: var(--accent);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  min-height: 40px;
}
.od-pay-linked {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}
.od-pay-item,
.od-pay-suggest-item {
  padding: 10px 12px;
  background: var(--bg-card-solid);
  border: 0.5px solid var(--border);
  border-radius: 10px;
}
.od-pay-item-top,
.od-pay-suggest-top {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.od-pay-date { font-size: 12px; color: var(--text-muted); min-width: 58px; }
.od-pay-account { font-size: 12px; color: var(--text-secondary); font-weight: 500; }
.od-pay-amount { margin-left: auto; font-size: 14px; color: var(--success-text); white-space: nowrap; }
.od-pay-src {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
}
.od-pay-src-bank { background: #dbeafe; color: #1d4ed8; }
.od-pay-src-manual { background: #fef3c7; color: #92400e; }
.od-pay-unlink {
  background: none;
  border: 0.5px solid var(--border);
  border-radius: 6px;
  color: var(--danger-text);
  cursor: pointer;
  font-size: 14px;
  padding: 4px 8px;
  min-width: 32px;
  min-height: 32px;
}
.od-pay-unlink:hover { background: var(--danger-bg); }
.od-pay-comment {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 4px;
  word-break: break-word;
}

.od-pay-suggest-section { margin-top: 14px; }
.od-pay-suggest-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}
.od-pay-suggest-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.od-pay-suggest-item {
  background: #fafafa;
}
.od-pay-suggest-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
}
.od-pay-link-btn {
  padding: 9px 14px;
  border-radius: 8px;
  border: none;
  background: var(--accent);
  color: white;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  min-height: 40px;
}
.od-pay-link-btn:disabled { opacity: 0.5; cursor: wait; }
.od-pay-score {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
}
.od-pay-score-high { background: #dcfce7; color: #15803d; }
.od-pay-score-mid  { background: #fef3c7; color: #92400e; }
.od-pay-score-low  { background: #f1f5f9; color: #64748b; }

/* Payment modal (manual entry + bank search tabs) */
.od-pay-modal { padding: 4px; }
.od-pay-tabs {
  display: flex;
  gap: 6px;
  border-bottom: 0.5px solid var(--border);
  margin-bottom: 12px;
}
.od-pay-tab {
  flex: 1;
  padding: 10px 12px;
  border: none;
  background: transparent;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  min-height: 44px;
}
.od-pay-tab-active { color: var(--accent); border-bottom-color: var(--accent); }
.od-pay-tab-body { max-height: 60vh; overflow-y: auto; }
.od-pay-fop-note {
  padding: 8px 10px;
  background: #f0fdf4;
  color: #065f46;
  border: 0.5px solid #10b98140;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  margin-bottom: 10px;
}
.od-pay-fop-chip {
  display: inline-block;
  background: #d1fae5;
  color: #065f46;
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  margin-left: 6px;
  vertical-align: middle;
}
.od-pay-search-input {
  width: 100%;
  padding: 10px 12px;
  border: 0.5px solid var(--border-input);
  border-radius: 10px;
  font-size: 14px;
  box-sizing: border-box;
  margin-bottom: 10px;
  min-height: 44px;
}
.od-pay-modal-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.od-pay-label {
  display: block;
  font-size: 11px;
  color: var(--text-secondary);
  font-weight: 600;
  margin-bottom: 10px;
}
.od-pay-label input,
.od-pay-label select {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 10px 12px;
  border: 0.5px solid var(--border-input);
  border-radius: 8px;
  font-size: 14px;
  box-sizing: border-box;
  min-height: 44px;
  background: var(--bg-input, var(--bg-primary));
}
.od-pay-save-btn {
  flex: 1;
  padding: 12px;
  background: var(--btn-primary-bg);
  color: white;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  min-height: 48px;
}
.od-pay-cancel-btn {
  padding: 12px 16px;
  background: var(--bg-primary);
  border: 0.5px solid var(--border);
  border-radius: 10px;
  font-size: 14px;
  cursor: pointer;
  color: var(--text-secondary);
  min-height: 48px;
}

@media (max-width: 1023px) {
  .od-pay-item-top,
  .od-pay-suggest-top { gap: 6px; }
  .od-pay-date { min-width: auto; }
  .od-pay-amount { font-size: 13px; }
  .od-pay-suggest-actions .od-pay-link-btn { width: 100%; }
}

/* ===== BADGES ===== */
.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.badge-overdue { background: var(--badge-red-bg); color: var(--badge-red-text); }
.badge-today { background: var(--badge-gold-bg); color: var(--badge-gold-text); }
.badge-ok { background: var(--badge-green-bg); color: var(--badge-green-text); }
.badge-new { background: var(--badge-blue-bg); color: var(--badge-blue-text); }
.badge-production { background: var(--badge-gold-bg); color: var(--badge-gold-text); }
.badge-done { background: var(--badge-green-bg); color: var(--badge-green-text); }
.badge-shipped { background: var(--badge-gray-bg); color: var(--badge-gray-text); }

/* ===== PLACEHOLDER ===== */
.placeholder {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-placeholder);
}

.placeholder .icon { font-size: 60px; margin-bottom: 16px; }
.placeholder p { font-size: 14px; }

/* ===== MOBILE SIDEBAR (hamburger) ===== */
.sidebar-overlay {
  display: none;
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;   /* запас: inset зʼявився в Chrome 87 */
  inset: 0;
  background: rgba(0,0,0,0.3);
  z-index: 300;
}
.sidebar-overlay.open { display: block; }

.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: min(320px, calc(100vw - 40px));
  height: 100%;
  background: var(--bg-card-solid);
  z-index: 301;
  transform: translateX(-100%);
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-xl);
  will-change: transform;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  padding-left: env(safe-area-inset-left, 0px);
  border-radius: 0 var(--radius-xl) var(--radius-xl) 0;
}
.sidebar.open { transform: translateX(0); }

.sidebar-header {
  padding: 16px 20px 12px;
  border-bottom: 0.5px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 64px;
}

.sidebar-user {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sidebar-avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-round);
  background: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 16px;
  font-weight: 600;
}

.sidebar-name { font-size: 15px; font-weight: 600; color: var(--text-primary); }
.sidebar-role { font-size: 11px; color: var(--text-muted); }

.sidebar-close {
  width: 44px; height: 44px;
  border: none; background: var(--bg-active);
  border-radius: var(--radius-round); cursor: pointer;
  font-size: 16px; color: var(--text-muted);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: all var(--duration-fast) var(--ease-default);
  outline: none;
}
.sidebar-close:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
  transform: scale(1.05);
}
.sidebar-close:active {
  background: var(--bg-active);
  transform: scale(0.95);
}
.sidebar-close:focus-visible {
  background: var(--bg-hover);
  box-shadow: 0 0 0 2px var(--accent);
  outline: none;
}

.sidebar-nav { flex: 1; padding: 12px 0; overflow-y: auto; }

.sidebar-section {
  padding: 12px 16px 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ===== SIDEBAR ACCORDION GROUPS ===== */
.sb-group { }

.sb-group-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 14px 20px;
  min-height: 48px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  text-align: left;
  transition: all var(--duration-fast) var(--ease-default);
  gap: 8px;
  outline: none;
  border-radius: 0;
  margin: 2px 0;
}
.sb-group-hdr:hover {
  color: var(--text-primary);
  background: var(--bg-hover);
  transform: translateX(2px);
}
.sb-group-hdr:hover .mob-icon { background: var(--accent); color: #fff; }
.sb-group-hdr:focus-visible {
  background: var(--bg-hover);
  box-shadow: inset 3px 0 0 var(--accent);
  outline: none;
}
.sb-group.open .sb-group-hdr {
  color: var(--accent);
}
.sb-group.open .sb-group-hdr .mob-icon { background: var(--accent); color: #fff; }

.sb-group-hdr > span:first-child {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sb-arrow {
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  transition: transform 0.2s ease;
  display: inline-block;
  color: var(--text-muted);
}
.sb-group.open .sb-arrow { transform: rotate(90deg); color: var(--accent); }

.sb-group-body {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.25s ease;
}
.sb-group.open .sb-group-body { max-height: 600px; }

/* Improved hover feedback for mobile */
@media (hover: hover) {
  .sb-group-hdr:hover {
    background: var(--bg-hover);
    transform: translateX(2px);
  }
  .sb-group-hdr:hover .sb-arrow {
    color: var(--accent);
    transform: scale(1.1);
  }
}

/* Focus ring for better accessibility */
.sb-group-hdr:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Sub-items in accordion are slightly indented */
.sb-group-body .sidebar-item {
  padding-left: 64px;
  font-size: 13.5px;
}

.sidebar-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  text-decoration: none;
  min-height: 48px;
  cursor: pointer;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  border-radius: 0;
  margin: 2px 0;
  transition: all var(--duration-fast) var(--ease-default);
  /* Accessibility improvements */
  outline: none;
  position: relative;
}
.sidebar-item:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
  transform: translateX(2px);
}
.sidebar-item:active {
  background: var(--bg-active);
  transform: translateX(1px);
}
.sidebar-item:focus-visible {
  background: var(--bg-hover);
  box-shadow: inset 3px 0 0 var(--accent);
  outline: none;
}
.sidebar-item.active {
  color: var(--accent);
  background: var(--accent-light);
  box-shadow: inset 3px 0 0 var(--accent);
}
.sidebar-item.active .mob-icon { background: var(--accent); color: white; }
.sidebar-item .s-icon { font-size: 20px; width: 28px; text-align: center; }

/* Flat-list items (manager / production) use a larger hit area + slight tint when active */
.sidebar-item-flat {
  padding: 16px 20px;
  min-height: 52px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  border-radius: var(--radius-sm);
  margin: 3px 8px;
}
.sidebar-item-flat:hover {
  background: var(--bg-hover);
  transform: translateX(2px);
}
.sidebar-item-flat:focus-visible {
  background: var(--bg-hover);
  box-shadow: 0 0 0 2px var(--accent);
  outline: none;
}
.sidebar-item-flat .sidebar-item-label { flex: 1; min-width: 0; }

.mob-icon {
  width: 32px;
  height: 32px;
  background: var(--accent-light);
  color: var(--accent);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background var(--duration-fast) var(--ease-default), color var(--duration-fast) var(--ease-default);
}
.mob-icon svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  flex-shrink: 0;
}
.sidebar-item.active .mob-icon svg { stroke: #fff; }
.sidebar-logout .mob-icon svg { width: 16px; height: 16px; stroke: currentColor; }

.sidebar-footer {
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  border-top: 0.5px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sidebar-logout {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  background: var(--bg-primary);
  border: 0.5px solid var(--border);
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--danger-text);
  cursor: pointer;
}
.sidebar-logout:active { background: var(--danger-bg); }
.sidebar-logout .mob-icon {
  background: var(--danger-bg);
  color: var(--danger-text);
  font-size: 14px;
}
.sidebar-version {
  font-size: 11px;
  color: var(--text-muted);
  text-align: center;
  letter-spacing: 0.03em;
}

/* ===== ICON SIDEBAR (desktop) ===== */
.icon-sidebar {
  width: 72px !important;
  min-width: 72px !important;
  height: 100vh;
  background: rgba(255,255,255,0.94);
  border-right: 0.5px solid var(--border);
  display: flex !important;
  flex-direction: column;
  align-items: center;
  padding: 0;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 200;
  flex-shrink: 0;
  overflow: visible;
  transform: translateZ(0);
}

.icon-sidebar-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 8px 0;
  overflow-y: auto;
  gap: 2px;
}

.isb-logo {
  padding: 12px 0 8px;
  display: flex;
  justify-content: center;
  width: 100%;
}

.isb-logo img {
  width: 36px;
  height: 36px;
  object-fit: contain;
}

.isb-item {
  width: 100%;
  position: relative;
}

.isb-btn {
  width: calc(100% - 12px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 10px 4px;
  background: none;
  border: none;
  cursor: pointer;
  border-radius: var(--radius-lg);
  transition: background var(--duration-fast) var(--ease-default);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 500;
  text-decoration: none;
  margin: 0 6px;
}

.isb-btn:hover {
  background: var(--bg-hover);
  color: var(--accent);
}

.isb-btn.active {
  background: var(--accent-light);
  color: var(--accent);
}

.isb-icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: transparent;
  transition: background var(--duration-fast) var(--ease-default);
}

.isb-btn.active .isb-icon {
  background: var(--accent-light);
}

.isb-btn:hover .isb-icon {
  background: var(--bg-hover);
}

.isb-label {
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  display: block !important;
  color: inherit;
}

.isb-submenu { display: none !important; }
.isb-spacer { flex: 1; }

.isb-user-info {
  padding: 8px 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 100%;
}

.isb-user-avatar {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-round);
  background: var(--accent-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  cursor: pointer;
  border: 1.5px solid var(--border-md);
}

/* ===== DESKTOP LAYOUT ===== */
@media (min-width: 1024px) {
  .sidebar-overlay { display: none !important; }

  /* Show icon sidebar by default on desktop */
  .icon-sidebar {
    display: flex !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 72px !important;
    height: 100vh !important;
    z-index: 150 !important;
  }

  /* Hide desktop toggle button */
  .desktop-sidebar-toggle { display: none !important; }

  /* Hide full sidebar on desktop - only show icon sidebar */
  .sidebar {
    display: none !important;
  }

  .sidebar.open {
    display: none !important;
  }

  /* Hide mobile close button */
  .sidebar-close { display: none !important; }

  /* Desktop sidebar styling improvements */
  .sidebar-header {
    padding: 20px 24px 16px !important;
    border-bottom: 1px solid var(--border-light) !important;
    background: rgba(248, 250, 252, 0.8) !important;
  }

  .sidebar-user {
    gap: 12px !important;
  }

  .sidebar-avatar {
    width: 44px !important;
    height: 44px !important;
    font-size: 18px !important;
  }

  .sidebar-name {
    font-size: 16px !important;
    font-weight: 600 !important;
  }

  .sidebar-role {
    font-size: 12px !important;
    opacity: 0.8 !important;
  }

  /* Desktop navigation styling */
  .sidebar-nav {
    padding: 16px 0 !important;
  }

  .sb-group-hdr {
    padding: 16px 24px !important;
    min-height: 56px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    border-radius: 0 !important;
  }

  .sb-group-hdr:hover {
    background: rgba(37, 99, 235, 0.08) !important;
    transform: none !important;
    border-left: 3px solid var(--accent) !important;
    padding-left: 21px !important;
  }

  .sb-group.open .sb-group-hdr {
    background: rgba(37, 99, 235, 0.12) !important;
    border-left: 3px solid var(--accent) !important;
    padding-left: 21px !important;
  }

  .sb-group-body .sidebar-item {
    padding-left: 56px !important;
    font-size: 14px !important;
    min-height: 48px !important;
  }

  .sidebar-item {
    padding: 14px 24px !important;
    min-height: 52px !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    margin: 1px 8px !important;
    border-radius: 8px !important;
  }

  .sidebar-item:hover {
    background: rgba(37, 99, 235, 0.08) !important;
    transform: none !important;
    color: var(--accent) !important;
  }

  .sidebar-item.active {
    background: rgba(37, 99, 235, 0.15) !important;
    color: var(--accent) !important;
    font-weight: 600 !important;
    box-shadow: none !important;
    border-left: 3px solid var(--accent) !important;
    margin-left: 5px !important;
    padding-left: 21px !important;
  }

  .mob-icon {
    width: 36px !important;
    height: 36px !important;
    border-radius: 8px !important;
  }

  .mob-icon svg {
    width: 20px !important;
    height: 20px !important;
  }

  /* Desktop footer */
  .sidebar-footer {
    padding: 16px 24px calc(16px + env(safe-area-inset-bottom, 0px)) !important;
    border-top: 1px solid var(--border-light) !important;
    background: rgba(248, 250, 252, 0.6) !important;
  }

  .sidebar-logout {
    padding: 12px 16px !important;
    font-size: 15px !important;
    border-radius: 8px !important;
    margin: 0 !important;
  }

  /* Layout with icon sidebar only (72px) */
  .app-header {
    left: 72px !important;
    padding-left: 20px !important;
  }

  .page {
    margin-left: 72px !important;
  }

  .period-selector {
    left: 72px !important;
  }

  /* Hide desktop sidebar overlay */
  .desktop-sidebar-overlay {
    display: none !important;
  }

  /* Icon sidebar styling improvements */
  .icon-sidebar {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-right: 1px solid var(--border) !important;
  }

  /* Make icon buttons clickable for expansion */
  .isb-btn {
    transition: all 0.2s ease !important;
  }

  .isb-btn:hover {
    background: var(--bg-hover) !important;
    color: var(--accent) !important;
    transform: scale(1.05) !important;
  }
}

@media (max-width: 1023px) {
  .icon-sidebar { display: none !important; }
  .app-header { left: 0 !important; }
  .main-content { margin-left: 0 !important; }
  .page { margin-left: 0 !important; }

  /* Ensure sidebar is visible on mobile and positioned correctly */
  .sidebar {
    display: flex !important;
    transform: translateX(-100%) !important;
    z-index: 1000 !important;
  }
  .sidebar.open {
    transform: translateX(0) !important;
    z-index: 1000 !important;
  }
  .sidebar-toggle {
    display: flex !important;
  }
  .sidebar-overlay {
    display: none; /* Hidden by default, shown with .open class */
  }
  .sidebar-overlay.open {
    display: block !important;
  }
  #page-ai { height: calc(100vh - 80px - env(safe-area-inset-top, 0px)) !important; margin-top: calc(60px + env(safe-area-inset-top, 0px)) !important; }

  .sidebar-header {
    padding: 16px 20px;
    justify-content: space-between;
  }
  .sidebar-user { gap: 10px; }
  .sidebar-name, .sidebar-role, .sidebar-section { opacity: 1 !important; white-space: normal; }
  .sidebar-item {
    padding: 11px 20px;
    justify-content: flex-start;
  }
  .sidebar-item span { opacity: 1 !important; width: auto !important; overflow: visible !important; }
  .sidebar-icon { font-size: 22px; flex-shrink: 0; }
  .app-header {
    padding-left: 16px !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(255,255,255,0.96);
  }
}

/* Sidebar toggle */
.sidebar-toggle {
  position: relative;
  width: 44px;
  height: 44px;
  background: var(--bg-card);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-lg);
  cursor: pointer;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
  color: var(--text-primary);
  transition: all var(--duration-fast) var(--ease-default);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  outline: none;
  box-shadow: var(--shadow-xs);
}

.sidebar-toggle:hover {
  background: var(--bg-hover);
  transform: scale(1.05);
  box-shadow: var(--shadow-sm);
}

.sidebar-toggle:active {
  transform: scale(0.95);
  background: var(--bg-active);
}

.sidebar-toggle:focus-visible {
  box-shadow: 0 0 0 2px var(--accent);
  outline: none;
}

/* Hamburger menu animation */
.hamburger-icon {
  transition: transform var(--duration-fast) var(--ease-default);
}

.hamburger-icon line {
  transition: all var(--duration-normal) var(--ease-default);
  transform-origin: center;
}

/* Hamburger icon animation when sidebar is open */
.sidebar-toggle.open .hamburger-icon .line-1 {
  transform: translate(0, 6px) rotate(45deg);
}

.sidebar-toggle.open .hamburger-icon .line-2 {
  opacity: 0;
}

.sidebar-toggle.open .hamburger-icon .line-3 {
  transform: translate(0, -6px) rotate(-45deg);
}
.sidebar-toggle.visible { display: flex; }

@media (max-width: 1023px) {
  .sidebar-toggle { display: flex !important; }
}

/* ===== ISB FLOATING POPUP ===== */
.isb-dropdown {
  display: none;
  position: fixed;
  left: 72px;
  top: 0;
  z-index: 9999;
  background: var(--bg-card-solid);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  min-width: 180px;
  padding: 8px 0;
  flex-direction: column;
}
.isb-dropdown.open {
  display: flex;
}
.isb-dropdown-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 6px 16px 8px;
  border-bottom: 0.5px solid var(--border);
  margin-bottom: 4px;
}
.isb-drop-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 16px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  text-align: left;
  width: 100%;
  text-decoration: none;
  border-radius: 0;
  transition: background var(--duration-fast) var(--ease-default), color var(--duration-fast) var(--ease-default);
}
.isb-drop-item:hover {
  background: var(--bg-hover);
  color: var(--accent);
}
.isb-drop-item svg {
  flex-shrink: 0;
  opacity: 0.6;
}

/* ===== MOBILE BOTTOM NAV ===== */
.mobile-bottom-nav {
  display: none;
}
@media (max-width: 1023px) {
  .mobile-bottom-nav {
    display: flex;
    position: fixed;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    left: 12px;
    right: 12px;
    background: rgba(255,255,255,0.96);
    border: 0.5px solid var(--border);
    border-radius: var(--radius-pill);
    z-index: 300;
    box-shadow: var(--shadow-lg);
    padding: 4px 0;
    transform: translateZ(0);
  }
  .mbn-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 8px 4px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 500;
    border-radius: var(--radius-xl);
    transition: color var(--duration-fast) var(--ease-default);
  }
  .mbn-item.active, .mbn-item:active {
    color: var(--accent);
  }
  .mbn-item svg { stroke: currentColor; }
  .mbn-popup {
    display: none;
    position: fixed;
    bottom: 80px;
    left: 12px;
    right: 12px;
    background: var(--bg-card-solid);
    border: 0.5px solid var(--border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    z-index: 400;
    padding: 8px 0;
    flex-direction: column;
  }
  .mbn-popup.open { display: flex; }
  .mbn-popup-title {
    font-size: 11px;
    font-weight: 600;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 6px 16px 8px;
    border-bottom: 0.5px solid var(--border);
    margin-bottom: 4px;
  }
  .mbn-popup-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 16px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
    text-align: left;
    width: 100%;
    transition: background var(--duration-fast) var(--ease-default);
  }
  .mbn-popup-item:hover { background: var(--bg-hover); color: var(--accent); }
  .mbn-overlay {
    display: none;
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;   /* запас: inset зʼявився в Chrome 87 */
  inset: 0;
    z-index: 350;
    background: rgba(0,0,0,0.15);
  }
  .mbn-overlay.open { display: block; }
  .main-content { padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
}

.main-content {
  flex: 1;
  min-width: 0;
  overflow-x: clip;
  -webkit-overflow-scrolling: touch;
  padding-top: 0;
}

/* ===== TRAINING MOBILE ===== */
@media (max-width: 1023px) {
  .training-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ===== AI streaming cursor ===== */
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }
.ai-cursor::after {
  content: '\25CB';
  display: inline-block;
  animation: blink 0.8s infinite;
  color: var(--accent);
  font-size: 12px;
  margin-left: 2px;
}

/* ===== Utility classes ===== */
.u-label { font-size: 11px; color: var(--text-muted); margin-bottom: 2px; font-weight: 500 }
.u-label-sm { font-size: 11px; color: var(--text-muted) }
.u-label-dark { font-size: 11px; color: var(--text-secondary); margin-bottom: 4px }
.u-section-title { font-size: 12px; font-weight: 600; color: var(--text-muted); margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.03em }
.u-section-title-sm { font-size: 12px; font-weight: 600; color: var(--text-muted); margin-bottom: 4px }
.u-empty { text-align: center; padding: 20px; color: var(--text-muted) }
.u-empty-sm { text-align: center; color: var(--text-muted); padding: 16px }
.u-card { background: var(--bg-card); border-radius: var(--radius-lg); padding: 12px; border: 0.5px solid var(--border); box-shadow: var(--shadow-xs) }
.u-card-lg { background: var(--bg-card); border-radius: var(--radius-lg); padding: 12px; margin-bottom: 14px; border: 0.5px solid var(--border); box-shadow: var(--shadow-xs) }
.u-card-center { background: var(--bg-card); border-radius: var(--radius-lg); padding: 10px; text-align: center; border: 0.5px solid var(--border); box-shadow: var(--shadow-xs) }
.u-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px }
.u-row-between { display: flex; justify-content: space-between }
.u-input { width: 100%; padding: 10px 12px; border: 0.5px solid var(--border-input); border-radius: var(--radius-md); font-size: 14px; outline: none; background: var(--bg-input); color: var(--text-primary); transition: border-color var(--duration-fast) var(--ease-default) }
.u-input:focus { border-color: var(--accent) }
.u-input-sm { width: 100%; border: 0.5px solid var(--border-input); border-radius: var(--radius-md); padding: 8px 10px; font-size: 14px; font-weight: 500; box-sizing: border-box; background: var(--bg-input) }
.u-btn-primary { width: 100%; padding: 12px; background: var(--btn-primary-bg); color: var(--btn-primary-text); border: none; border-radius: var(--radius-md); font-size: 14px; font-weight: 600; cursor: pointer; transition: opacity var(--duration-fast) var(--ease-default) }
.u-btn-primary:hover { opacity: 0.85 }
.u-btn-close { border: none; background: none; color: var(--text-muted); cursor: pointer; font-size: 16px; padding: 0 }
.u-success { text-align: center; background: var(--success-bg); border-radius: var(--radius-md); padding: 10px }
.u-warning { text-align: center; background: var(--warning-bg); border-radius: var(--radius-md); padding: 10px }
.u-danger { text-align: center; background: var(--danger-bg); border-radius: var(--radius-md); padding: 10px }
.u-danger-row { background: var(--danger-bg); border-radius: var(--radius-md); padding: 10px; margin-bottom: 6px; border: 0.5px solid #fecaca }
.u-value-green { font-size: 22px; font-weight: 600; color: var(--success-text); letter-spacing: var(--tracking-tight) }
.u-page-wrap { padding: 16px; max-width: 900px; margin: 0 auto }
.u-p4 { padding: 4px }
.u-mb6 { margin-bottom: 6px }
.u-mb8 { margin-bottom: 8px }
.u-mb12 { margin-bottom: 12px }
.u-mb16 { margin-bottom: 16px }
.u-right { text-align: right }
.u-center { text-align: center }

/* Kanban board — desktop */
@media (min-width: 768px) {
  .kanban-board {
    overflow-x: auto !important;
    overflow-y: visible !important;
    scrollbar-width: none !important;
  }
  .kanban-board::-webkit-scrollbar {
    display: none !important;
  }
  .kanban-col {
    overflow-y: visible;
    overflow-x: hidden;
    height: auto;
  }
}

/* Kanban board — mobile. The mobile bottom-nav is cleared globally by
   .main-content { padding-bottom: 80px + safe-area }, so the per-column
   padding only needs a small amount of breathing room under the last card.
   Previous 100px rule doubled up with .main-content and left a ~180px gap. */
@media (max-width: 1023px) {
  .kanban-drop-zone {
    padding-bottom: 16px !important;
  }
}

/* Kanban filter button — show text on desktop, icon only on mobile
   (saves ~70px so it fits beside the search input on 360px screens). */
.kanban-filter-icon { display: inline; }
.kanban-filter-label { display: inline; }
@media (max-width: 1023px) {
  .kanban-filter-btn { min-width: 44px; padding: 0 10px !important; }
  .kanban-filter-label { display: none; }
  .kanban-filter-icon { font-size: 16px; }
}

/* Kanban stage-jump dropdown — mobile-only. On desktop all columns are
   visible via horizontal scroll; on mobile each column is 86vw so users
   would have to swipe ~10x to reach the rightmost column otherwise. */
.kanban-stage-select {
  display: none;
  flex-shrink: 0;
  max-width: 140px;
  min-height: 44px;
  padding: 0 28px 0 10px;
  border-radius: 12px;
  border: 1.5px solid #e2e8f0;
  background: white;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23808080' stroke-width='2'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px 12px;
  outline: none;
}
.kanban-stage-select:focus { border-color: var(--accent); }
@media (max-width: 1023px) {
  .kanban-stage-select { display: inline-block; }
}

/* Desktop column width restored via CSS (the old inline
   width:min(calc(100vw - 56px), 300px) doesn't apply on mobile because the
   icon-sidebar isn't there). Mobile gets a wider column + less next-column
   peek so cards don't feel cropped. */
.kanban-col {
  width: 300px;
}
@media (max-width: 1023px) {
  .kanban-col {
    width: 86vw;
    min-width: 86vw;
    max-width: 86vw;
  }
  /* Board padding tightened on mobile so the first column isn't hiding
     behind a 20px left gutter. */
  .kanban-board {
    padding-left: 12px !important;
    padding-right: 12px !important;
    /* Scroll-snap each column into view — one column per swipe */
    scroll-snap-type: x mandatory;
  }
  .kanban-col { scroll-snap-align: start; }
}

/* Kanban card: allow content wrapping, reserve right padding for the
   absolute ⋮ button so the deadline text never collides with it. */
.kanban-card {
  position: relative;
  word-break: break-word;
  overflow-wrap: anywhere;
}
@media (max-width: 1023px) {
  .kanban-card { padding-right: 40px !important; }
}

/* Kanban card "⋮" move button — tap-to-move fallback for mobile.
   Hidden on desktop (drag-and-drop is reliable there). */
.kanban-move-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  border-radius: 8px;
  font-size: 18px;
  line-height: 1;
  color: var(--text-muted);
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0;
  z-index: 2;
}
.kanban-move-btn:active { background: var(--bg-hover); }
@media (max-width: 1023px) {
  .kanban-move-btn { display: inline-flex; }
}

/* Move-stage modal */
.kanban-move-modal { padding: 4px; }
.kanban-move-current {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 10px;
  padding: 0 4px;
}
.kanban-move-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 60vh;
  overflow-y: auto;
}
.kanban-move-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 14px;
  min-height: 48px;
  background: var(--bg-primary);
  border: 0.5px solid var(--border);
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  cursor: pointer;
  text-align: left;
}
.kanban-move-row:active { background: var(--bg-hover); }
.kanban-move-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}
.kanban-move-name { flex: 1; min-width: 0; }
.kanban-move-count {
  font-size: 11px;
  color: var(--text-muted);
  background: var(--bg-card-solid);
  border-radius: 10px;
  padding: 2px 8px;
}

/* ===== Apple-style global overrides ===== */
input, select, textarea, button {
  font-family: var(--font-family);
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-light);
}

/* Scrollbar styling */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.15);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(0,0,0,0.25);
}

/* Selection color */
::selection {
  background: var(--accent-light);
  color: var(--text-primary);
}

/* ===== Blog page responsive ===== */
.blog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  gap: 10px;
}
.blog-gen-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}
.blog-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.blog-main-grid {
  display: grid;
  grid-template-columns: 1fr 460px;
  gap: 20px;
  align-items: start;
}
.blog-main-grid.blog-seo {
  grid-template-columns: 1fr;
}
.blog-article-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.blog-article-row .blog-article-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

@media (max-width: 1023px) {
  .blog-header { flex-wrap: wrap; }
  .blog-header button { width: 100%; justify-content: center; }
  .blog-gen-grid { grid-template-columns: 1fr !important; }
  .blog-gen-grid > div[style*="grid-column:span 2"],
  .blog-gen-grid > div[style*="grid-column: span 2"] { grid-column: span 1 !important; }
  .blog-main-grid { grid-template-columns: 1fr !important; }
  .blog-article-row { flex-wrap: wrap; }
  .blog-article-row .blog-article-actions { width: 100%; justify-content: flex-end; }
}


/* ============================================================
   Grants Module
   ============================================================ */
.grants-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin: 12px 0 20px; }
.grants-stat-card { background: var(--bg-card); border-radius: 12px; padding: 16px; text-align: center; border: 1px solid var(--border); }
.grants-stat-value { font-size: 28px; font-weight: 700; color: var(--accent); }
.grants-stat-label { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
.grants-stat-new .grants-stat-value { color: #fd7e14; }
.grants-stat-urgent .grants-stat-value { color: #dc3545; }
.grants-stat-won .grants-stat-value { color: #198754; }

.grants-toolbar { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; align-items: center; padding: 0 12px; }
.grants-search { flex: 1; min-width: 200px; padding: 8px 12px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--bg-card-solid, #fff); color: var(--text-primary, #1d1d1f); }
.grants-filter-select { padding: 8px 12px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--bg-card-solid, #fff); color: var(--text-primary, #1d1d1f); }
.grants-btn { padding: 8px 16px; border-radius: 8px; border: none; cursor: pointer; font-size: 14px; font-weight: 600; }
.grants-btn-primary { background: var(--accent); color: #fff; }
.grants-btn-secondary { background: var(--bg-card); color: var(--text-primary, #1d1d1f); border: 1px solid var(--border); }

.grants-table { width: 100%; border-collapse: collapse; background: var(--bg-card); border-radius: 12px; overflow: hidden; }
.grants-table th { padding: 10px 12px; text-align: left; font-size: 12px;
  color: var(--text-muted); border-bottom: 1px solid var(--border); }
.grants-table td { padding: 12px; border-bottom: 1px solid var(--border); font-size: 13px; }
.grants-row { cursor: pointer; transition: background 0.15s; }
.grants-row:hover { background: var(--accent-light); }
.grants-row-new { background: rgba(160,140,100,0.04); }
.grants-title-cell { max-width: 300px; font-weight: 500; }
.grant-new-dot { display: inline-block; width: 8px; height: 8px;
  border-radius: 50%; background: var(--accent); margin-right: 6px; vertical-align: middle; }

.grant-badge { padding: 2px 8px; border-radius: 12px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.grant-badge-urgent { background: #dc354520; color: #dc3545; }
.grant-badge-soon { background: #fd7e1420; color: #fd7e14; }
.grant-badge-ok { background: #19875420; color: #198754; }
.grant-badge-expired { background: #6c757d20; color: #6c757d; }
.grant-status-badge { padding: 3px 10px; border-radius: 12px; font-size: 11px; font-weight: 600; white-space: nowrap; }

/* Grant cards (mobile) */
.grant-card { background: var(--bg-card); border-radius: 12px; padding: 14px;
  margin: 0 12px 10px; cursor: pointer; border: 1px solid var(--border); }
.grant-card-new { border-left: 3px solid var(--accent); }
.grant-card-header { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; flex-wrap: wrap; }
.grant-card-title { font-weight: 600; font-size: 14px; margin-bottom: 8px; line-height: 1.4; }
.grant-card-meta { display: flex; gap: 16px; font-size: 12px; color: var(--text-muted); margin-bottom: 4px; flex-wrap: wrap; }

.grants-loading, .grants-empty { padding: 40px 20px; text-align: center; color: var(--text-muted); }

/* Detail panel */
.grants-detail { position: fixed; top: 0; right: -100%; width: min(480px, 100vw); height: 100vh;
  background: var(--bg-card-solid, #fff); z-index: 1001; overflow-y: auto; transition: right 0.3s ease;
  box-shadow: -4px 0 24px rgba(0,0,0,0.2); padding: 20px; }
.grants-detail-open { right: 0 !important; }
.grants-detail-header { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
.grants-detail-close { background: none; border: none; font-size: 20px; cursor: pointer;
  color: var(--text-muted); padding: 4px; min-width: 32px; }
.grants-detail-header h2 { flex: 1; font-size: 16px; line-height: 1.4; margin: 0; }
.grants-detail-section { background: var(--bg-card); border-radius: 12px; padding: 16px; margin-bottom: 12px; border: 1px solid var(--border); }
.grants-detail-section h4 { margin: 0 0 10px; font-size: 13px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }
.grants-detail-row { display: flex; justify-content: space-between; padding: 8px 0;
  border-bottom: 1px solid var(--border); font-size: 13px; gap: 12px; }
.grants-detail-row:last-child { border-bottom: none; }
.grants-detail-label { color: var(--text-muted); }
.grants-link { color: var(--accent); text-decoration: none; }
.grants-description { font-size: 13px; line-height: 1.6; color: var(--text-primary, #1d1d1f); white-space: pre-wrap; margin: 0; }
.grants-status-buttons { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.grants-status-btn { padding: 6px 12px; border-radius: 20px; border: 1px solid var(--border);
  cursor: pointer; font-size: 12px; background: var(--bg-card-solid, #fff); color: var(--text-primary, #1d1d1f); transition: all 0.2s; }
.grants-status-btn.active { font-weight: 600; }
.grants-note-input { width: 100%; min-height: 80px; padding: 10px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--bg-card-solid, #fff); color: var(--text-primary, #1d1d1f);
  font-size: 13px; resize: vertical; box-sizing: border-box; }
.grants-reminder-input { padding: 8px 12px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--bg-card-solid, #fff); color: var(--text-primary, #1d1d1f); }

#grants-new-badge { display: inline-block; background: var(--accent); color: #fff;
  border-radius: 10px; padding: 1px 7px; font-size: 11px; font-weight: 600; margin-left: 6px; }

@media (max-width: 768px) {
  .grants-stats { grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 0 12px; }
  .grants-table { display: none; }
}
@media (max-width: 480px) {
  .grants-stats { grid-template-columns: repeat(2, 1fr); }
}

.grants-delete-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 18px;
  padding: 4px 8px;
  border-radius: 6px;
  color: var(--text-muted);
  transition: all 0.2s;
}
.grants-delete-btn:hover {
  background: #dc354520;
  color: #dc3545;
}

/* ── Delivery status dots (replaced emoji in getDeliveryIcon) ── */
.del-dot { display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:4px;flex-shrink:0;vertical-align:middle; }
.del-dot-received  { background:#16a34a; }
.del-dot-paid      { background:#2563eb; }
.del-dot-transit   { background:#f97316; }
.del-dot-waiting   { background:#f59e0b; }
.del-dot-returned  { background:#dc2626; }
.del-dot-tracking  { background:#94a3b8; }

/* ── Social Media Module (Marketing → Соцмережі) ── */
.social-tabs { display:flex; gap:4px; padding:4px 0 12px; border-bottom:1px solid var(--border); margin-bottom:16px; }
.social-tab { padding:8px 16px; border-radius:8px; border:none; background:none; cursor:pointer; font-size:13px; color:var(--text-muted); }
.social-tab.active { background:var(--accent, #2563eb); color:#fff; font-weight:500; }

.social-accounts-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:12px; margin-bottom:24px; }
.social-account-card { background:var(--bg-card, #fff); border:1px solid var(--border); border-radius:12px; padding:16px; }
.social-account-header { margin-bottom:12px; }
.social-platform-badge { display:inline-block; padding:2px 10px; border-radius:10px; font-size:11px; font-weight:600; text-transform:uppercase; }
.social-platform-badge.instagram { background:#E1306C20; color:#E1306C; }
.social-platform-badge.facebook  { background:#1877F220; color:#1877F2; }
.social-platform-badge.tiktok    { background:#00000020; color:#000; }
.social-account-name { font-weight:600; font-size:14px; margin-top:6px; }
.social-username { font-size:12px; color:var(--text-muted); }
.social-stats-row { display:flex; gap:16px; margin-top:8px; }
.social-stat-value { font-size:20px; font-weight:700; color:var(--accent, #2563eb); }
.social-stat-label { font-size:11px; color:var(--text-muted); }

.social-posts-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:10px; }
.social-post-card { background:var(--bg-card, #fff); border-radius:10px; overflow:hidden; cursor:pointer; border:1px solid var(--border); transition:transform 0.15s; text-decoration:none; color:inherit; display:block; position:relative; }
.social-post-card:hover { transform:translateY(-2px); }
.social-post-media { aspect-ratio:1; overflow:hidden; background:var(--bg-primary, #f5f5f7); position:relative; }
.social-post-media img { width:100%; height:100%; object-fit:cover; }
.social-post-info { padding:8px; }
.social-post-caption { font-size:12px; line-height:1.4; margin-bottom:6px; }
.social-post-meta { font-size:11px; color:var(--text-muted); display:flex; gap:8px; flex-wrap:wrap; }
.social-post-video-badge { position:absolute; top:6px; right:6px; background:rgba(0,0,0,0.6); color:#fff; padding:2px 6px; border-radius:4px; font-size: 11px; }

.social-create-form { max-width:600px; }
.social-form-field { margin-bottom:16px; }
.social-form-field label { display:block; font-size:13px; font-weight:500; margin-bottom:6px; }
.social-accounts-select { display:flex; flex-direction:column; gap:8px; }
.social-acc-checkbox { display:flex; align-items:center; gap:8px; font-size:13px; cursor:pointer; }
.social-media-upload { display:flex; gap:8px; align-items:center; }
.social-btn-primary { background:var(--accent, #2563eb); color:#fff; border:none; border-radius:8px; padding:8px 20px; cursor:pointer; font-size:13px; font-weight:500; }
.social-btn-secondary { background:var(--bg-card, #fff); color:var(--text-primary, #1d1d1f); border:1px solid var(--border); border-radius:8px; padding:8px 20px; cursor:pointer; font-size:13px; }

.social-scheduled-list { display:flex; flex-direction:column; gap:8px; }
.social-scheduled-item { display:flex; align-items:center; gap:12px; padding:12px; background:var(--bg-card, #fff); border-radius:10px; border:1px solid var(--border); }
.social-scheduled-content { flex:1; min-width:0; }
.social-scheduled-text { font-size:13px; margin-bottom:4px; word-break:break-word; }
.social-scheduled-time { font-size:11px; color:var(--text-muted); }
.social-status-badge { padding:2px 8px; border-radius:10px; font-size:11px; font-weight:500; white-space:nowrap; }
.social-status-badge.scheduled { background:#0d6efd20; color:#0d6efd; }
.social-status-badge.draft     { background:#6c757d20; color:#6c757d; }
.social-status-badge.published { background:#19875420; color:#198754; }
.social-status-badge.failed    { background:#dc354520; color:#dc3545; }
.social-status-badge.cancelled { background:#9ca3af20; color:#9ca3af; }

.social-cal-header { font-size:15px; font-weight:600; margin-bottom:12px; text-transform:capitalize; }
.social-cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }
.social-cal-dow { text-align:center; font-size:11px; color:var(--text-muted); padding:4px; font-weight:600; }
.social-cal-day { min-height:60px; border:1px solid var(--border); border-radius:6px; padding:4px; font-size:12px; }
.social-cal-day.today { border-color:var(--accent, #2563eb); background:rgba(37,99,235,0.05); }
.social-cal-date { font-weight:500; display:block; margin-bottom:2px; }
.social-cal-post { font-size: 11px; padding:2px 4px; border-radius:4px; margin-bottom:2px; text-transform:uppercase; }
.social-cal-post.instagram { background:#E1306C20; color:#E1306C; }
.social-cal-post.facebook  { background:#1877F220; color:#1877F2; }

@media (max-width:768px) {
  .social-accounts-grid { grid-template-columns:1fr 1fr; }
  .social-posts-grid { grid-template-columns:1fr 1fr 1fr; }
  .social-cal-day { min-height:40px; }
  .social-tabs { overflow-x:auto; }
  .social-tab { white-space:nowrap; }
}

/* ── Social file upload (drop zone, tabs, preview) ── */
.social-media-upload-wrap { display:flex; flex-direction:column; gap:8px; }
.social-upload-tabs { display:flex; gap:6px; align-items:center; }
.social-upload-tab { padding:6px 14px; border-radius:6px; border:1px solid var(--border); background:var(--bg-card, #fff); cursor:pointer; font-size:12px; color:var(--text-muted); }
.social-upload-tab.active { background:var(--accent, #2563eb); color:#fff; border-color:var(--accent, #2563eb); }
.social-drop-zone {
  border:2px dashed var(--border); border-radius:10px; padding:24px;
  text-align:center; cursor:pointer; transition:all 0.15s ease;
  min-height:140px; display:flex; align-items:center; justify-content:center;
  position:relative; background:var(--bg-card, #fff);
}
.social-drop-zone:hover, .social-drop-zone.dragover { border-color:var(--accent, #2563eb); background:rgba(37,99,235,0.04); }
.social-drop-zone p { margin:8px 0 0; font-size:13px; color:var(--text-muted); }
.social-drop-zone svg { color:var(--text-muted); }
.social-clear-media {
  display:inline-block; margin:8px auto 0; background:none;
  border:1px solid var(--border); border-radius:6px; padding:4px 12px;
  cursor:pointer; font-size:12px; color:var(--text-muted);
}
.social-clear-media:hover { background:#dc354515; color:#dc3545; border-color:#dc3545; }

/* ── Per-account language settings + multi-lang captions + post type ── */
.social-account-settings { margin-top:12px; border-top:1px solid var(--border); padding-top:10px; display:flex; flex-direction:column; gap:8px; }
.social-account-setting label { font-size:11px; color:var(--text-muted); display:block; margin-bottom:3px; }
.social-account-setting select {
  width:100%; padding:5px 8px; border:1px solid var(--border); border-radius:6px;
  background:var(--bg-input, #fff); color:var(--text-primary, #1d1d1f); font-size:12px;
}
.social-lang-caption { margin-bottom:12px; }
.social-lang-label { display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.social-lang-badge {
  background:var(--accent, #2563eb); color:#fff;
  border-radius:4px; padding:2px 8px; font-size:11px; font-weight:700;
}
.social-caption-textarea {
  width:100%; padding:10px; border:1px solid var(--border); border-radius:8px;
  background:var(--bg-input, #fff); color:var(--text-primary, #1d1d1f);
  font-size:13px; resize:vertical; box-sizing:border-box;
}
.social-post-type-selector { display:flex; gap:6px; flex-wrap:wrap; }
.social-post-type-btn {
  padding:6px 14px; border-radius:6px; border:1px solid var(--border);
  background:var(--bg-card, #fff); cursor:pointer; font-size:12px; color:var(--text-muted);
}
.social-post-type-btn.active { background:var(--accent, #2563eb); color:#fff; border-color:var(--accent, #2563eb); }

/* ===== GENERAL MOBILE IMPROVEMENTS ===== */
@media (max-width: 1023px) {
  /* Prevent horizontal overflow */
  html { overflow-x: visible; }
  body { overflow-x: hidden; max-width: 100vw; }

  /* Improve text readability */
  * {
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  /* Make tables responsive */
  .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Improve button sizing on mobile */
  .btn, button {
    min-height: 44px; /* Apple's recommended touch target size */
    touch-action: manipulation;
  }

  /* Improve form inputs */
  input, select, textarea {
    font-size: 16px; /* Prevent zoom on iOS */
    box-sizing: border-box;
    max-width: 100%;
  }

  /* Hide desktop-only elements */
  .desktop-only {
    display: none !important;
  }

  /* Show mobile-only elements */
  .mobile-only {
    display: block !important;
  }

  /* Improve spacing for small screens */
  .page {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  /* Prevent cards from being too wide */
  .card, .modal-content {
    max-width: 100%;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Better overflow handling for tables */
  table {
    table-layout: auto;
    width: 100%;
  }

  /* Improve modal sizing */
  .modal-dialog {
    margin: 8px !important;
    max-width: calc(100vw - 16px) !important;
  }
}

/* ===== Finance mobile (Finmap-style) — < 768px ===== */
@media (max-width: 1023px) {
  /* When mobile shell renders, hide any leftover desktop layout */
  #page-finance .fin-layout { display:none !important; }
}

.fin-mobile-shell { display:flex; flex-direction:column; min-height:100vh; background:var(--bg-primary, #f5f5f7); }
.fin-mobile-header {
  background:#0a0a0a; color:#fff;
  padding:36px 20px 56px; text-align:center; flex-shrink:0;
}
.fin-mobile-total-amount { font-size:38px; font-weight:700; letter-spacing:-1px; }
.fin-mobile-total-label  { font-size:13px; opacity:.6; margin-top:4px; }

.fin-mobile-card {
  background:var(--bg-card, #fff);
  border-radius:20px 20px 0 0;
  margin-top:-24px; padding:18px 16px;
  padding-bottom:calc(96px + env(safe-area-inset-bottom));
  flex:1; min-height:60vh;
  position:relative; z-index:1;
}
.fin-mobile-card.fin-mobile-card-flat { margin-top:0; border-radius:0; min-height:100vh; padding-top:14px; }

.fin-mobile-section-header {
  display:flex; justify-content:space-between; align-items:center;
  margin:14px 0 10px; font-size:14px; font-weight:600; color:var(--text-primary, #1d1d1f);
}
.fin-mobile-section-header:first-child { margin-top:0; }
.fin-mobile-add-btn {
  width:30px; height:30px; border-radius:50%;
  border:1.5px solid var(--border, #e2e8f0); background:none;
  font-size:18px; line-height:1; cursor:pointer; color:var(--text-muted);
  display:flex; align-items:center; justify-content:center;
}

.fin-mobile-accounts-list { margin-bottom:6px; }
.fin-mobile-account-row {
  display:flex; align-items:center; gap:14px;
  padding:12px 0; border-bottom:1px solid rgba(0,0,0,0.06); cursor:pointer;
}
.fin-mobile-account-row:last-child { border-bottom:none; }
.fin-account-icon {
  width:42px; height:42px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:13px; font-weight:700; flex-shrink:0;
}
.fin-account-name    { font-size:15px; font-weight:400; color:var(--text-primary, #1d1d1f); }
.fin-account-balance { font-size:15px; font-weight:500; color:var(--text-primary, #1d1d1f); white-space:nowrap; }
.fin-account-balance.negative { color:#dc3545; }

/* Bottom tab bar */
.fin-mobile-tabs {
  position:fixed; bottom:0; left:0; right:0;
  background:var(--bg-card, #fff);
  border-top:1px solid var(--border, #e2e8f0);
  display:flex; align-items:center;
  padding:8px 0 calc(8px + env(safe-area-inset-bottom));
  z-index:100;
}
.fin-tab {
  flex:1; display:flex; flex-direction:column; align-items:center; gap:3px;
  background:none; border:none; cursor:pointer;
  color:var(--text-muted, #64748b); font-size: 11px; padding:4px 0;
}
.fin-tab.active { color:var(--accent, #2563eb); }
.fin-tab svg    { width:22px; height:22px; }
.fin-tab-add {
  width:52px; height:52px; border-radius:50% !important;
  background:var(--accent, #2563eb) !important; color:#fff !important;
  margin-top:-16px; flex:none !important;
  box-shadow:0 4px 12px rgba(0,0,0,0.2);
  align-items:center; justify-content:center;
}
.fin-tab-add svg { width:24px; height:24px; }

/* Journal */
.fin-journal-date-group  { margin-bottom:16px; }
.fin-journal-date-header {
  display:flex; justify-content:space-between;
  padding:10px 0 6px; font-size:12px; color:var(--text-muted); font-weight:500;
}
.fin-journal-day-total.income  { color:#16a34a; font-weight:600; }
.fin-journal-day-total.expense { color:#dc3545; font-weight:600; }
.fin-journal-tx-row {
  display:flex; align-items:center; gap:12px;
  padding:10px 0; border-bottom:1px solid rgba(0,0,0,0.05);
}
.fin-tx-category-icon {
  width:38px; height:38px; border-radius:11px;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; color:#fff; font-size:14px; font-weight:700;
}
.fin-tx-info { flex:1; min-width:0; }
.fin-tx-name { font-size:14px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--text-primary, #1d1d1f); }
.fin-tx-meta { font-size:11px; color:var(--text-muted); margin-top:2px; }
.fin-tx-amount { font-size:14px; font-weight:600; white-space:nowrap; }
.fin-tx-amount.income   { color:#16a34a; }
.fin-tx-amount.expense  { color:var(--text-primary, #1d1d1f); }
.fin-tx-amount.transfer { color:#64748b; }

/* Quick-add modal */
.fin-add-backdrop {
  position:fixed; inset:0; background:rgba(0,0,0,0.4);
  z-index:199; opacity:0; pointer-events:none; transition:opacity 0.2s;
}
.fin-add-backdrop.open { opacity:1; pointer-events:auto; }
.fin-add-modal {
  position:fixed; bottom:0; left:0; right:0;
  background:var(--bg-card, #fff);
  border-radius:20px 20px 0 0;
  padding:12px 20px calc(20px + env(safe-area-inset-bottom));
  z-index:200;
  transform:translateY(100%); transition:transform 0.3s ease;
  box-shadow:0 -4px 24px rgba(0,0,0,0.15);
  max-height:90vh; overflow-y:auto;
}
.fin-add-modal.open { transform:translateY(0); }
.fin-add-modal-handle {
  width:36px; height:4px; background:var(--border, #cbd5e1);
  border-radius:2px; margin:0 auto 16px;
}
.fin-add-type-selector { display:flex; gap:8px; margin-bottom:18px; }
.fin-type-btn {
  flex:1; padding:8px; border-radius:8px;
  border:1px solid var(--border, #e2e8f0); background:var(--bg-primary, #f5f5f7);
  cursor:pointer; font-size:13px; color:var(--text-muted);
}
.fin-type-btn.active { background:var(--accent, #2563eb); color:#fff; border-color:var(--accent, #2563eb); }
.fin-add-amount-wrap {
  display:flex; align-items:center; gap:8px; margin-bottom:14px;
  padding:0 4px;
}
.fin-add-currency { font-size:30px; font-weight:300; color:var(--text-muted); }
.fin-add-amount-input {
  flex:1; font-size:36px; font-weight:600;
  border:none; background:none; color:var(--text-primary, #1d1d1f); outline:none;
  width:100%;
}
.fin-add-select, .fin-add-input {
  width:100%; padding:11px 14px;
  border:1px solid var(--border, #e2e8f0); border-radius:10px;
  background:var(--bg-input, #fff); color:var(--text-primary, #1d1d1f);
  font-size:14px; margin-bottom:8px; box-sizing:border-box;
}
.fin-add-submit-btn {
  width:100%; padding:13px;
  background:var(--accent, #2563eb); color:#fff;
  border:none; border-radius:12px;
  font-size:15px; font-weight:600; cursor:pointer; margin-top:6px;
}

/* Analytics mobile */
.fin-analytics-period-selector { display:flex; gap:6px; margin-bottom:16px; }
.fin-period-btn {
  flex:1; padding:8px; border-radius:8px;
  border:1px solid var(--border, #e2e8f0); background:var(--bg-primary, #f5f5f7);
  cursor:pointer; font-size:12px; color:var(--text-muted);
}
.fin-period-btn.active { background:var(--accent, #2563eb); color:#fff; border-color:var(--accent, #2563eb); }
.fin-analytics-summary { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:8px; }
.fin-summary-card { padding:14px; border-radius:12px; }
.fin-summary-card.income  { background:#19875410; }
.fin-summary-card.expense { background:#dc354510; }
.fin-summary-label  { font-size:12px; color:var(--text-muted); margin-bottom:4px; }
.fin-summary-amount { font-size:16px; font-weight:700; }
.fin-summary-card.income  .fin-summary-amount { color:#198754; }
.fin-summary-card.expense .fin-summary-amount { color:#dc3545; }
.fin-categories-list { margin-top:6px; }
.fin-category-row { display:flex; align-items:center; gap:10px; padding:8px 0; }
.fin-cat-icon { width:10px; height:10px; border-radius:50%; flex-shrink:0; }
.fin-cat-info { flex:1; }
.fin-cat-name { font-size:13px; display:block; margin-bottom:4px; color:var(--text-primary, #1d1d1f); }
.fin-cat-bar { height:3px; background:rgba(0,0,0,0.06); border-radius:2px; overflow:hidden; }
.fin-cat-bar-fill { height:100%; border-radius:2px; }
.fin-cat-amount { font-size:13px; font-weight:500; white-space:nowrap; }

/* Calendar mobile (grid) */
.fin-mobile-cal-nav {
  display:flex; align-items:center; justify-content:space-between;
  margin:6px 0 10px; gap:10px;
}
.fin-cal-nav-btn {
  width:34px; height:34px; border-radius:50%;
  border:1px solid var(--border, #e2e8f0); background:var(--bg-card, #fff);
  cursor:pointer; font-size:18px; line-height:1; color:var(--text-primary, #1d1d1f);
  display:flex; align-items:center; justify-content:center;
}
.fin-cal-month-label {
  flex:1; text-align:center; font-size:15px; font-weight:600;
  text-transform:capitalize; color:var(--text-primary, #1d1d1f);
}
.fin-cal-dow-row {
  display:grid; grid-template-columns:repeat(7, 1fr);
  gap:2px; margin-bottom:4px;
}
.fin-cal-dow {
  text-align:center; font-size: 11px; color:var(--text-muted);
  text-transform:uppercase; font-weight:600; padding:2px 0;
}
.fin-cal-grid-mobile {
  display:grid; grid-template-columns:repeat(7, 1fr);
  gap:3px;
}
.fin-cal-cell {
  background:var(--bg-primary, #f5f5f7); border-radius:6px;
  padding:4px 3px; min-height:54px;
  display:flex; flex-direction:column; gap:1px;
  cursor:pointer; transition:transform 0.1s, background 0.15s;
  border:1px solid transparent;
}
.fin-cal-cell:hover { background:var(--bg-card, #fff); }
.fin-cal-cell.empty { background:transparent; cursor:default; }
.fin-cal-cell.today { border-color:var(--accent, #2563eb); background:rgba(37,99,235,0.06); }
.fin-cal-cell.future { opacity:0.65; }
.fin-cal-cell-num {
  font-size:11px; font-weight:600; color:var(--text-primary, #1d1d1f);
  display:flex; align-items:center; justify-content:space-between;
  line-height:1.1;
}
.fin-cal-cell-dot {
  width:5px; height:5px; border-radius:50%;
  background:var(--accent, #2563eb); display:inline-block;
}
.fin-cal-cell-line { font-size: 11px; line-height:1.1; font-weight:600; }
.fin-cal-cell-line.inc { color:#16a34a; }
.fin-cal-cell-line.exp { color:#dc2626; }
.fin-cal-cell-bal {
  font-size: 11px; font-weight:500; color:var(--text-muted);
  margin-top:auto; line-height:1.1;
}
.fin-cal-cell.neg .fin-cal-cell-bal { color:#dc2626; }

.fin-cal-day-detail {
  margin-top:18px; padding:14px;
  background:var(--bg-primary, #f5f5f7); border-radius:12px;
}

/* ===== Finance AI Agent ===== */
.fin-ai-layout {
  display:grid; grid-template-columns:190px 1fr 240px;
  height:calc(100vh - 200px); min-height:520px;
  border:1px solid var(--border); border-radius:12px;
  overflow:hidden; background:var(--bg-card, #fff);
}
.fin-ai-sidebar { display:flex; flex-direction:column; background:var(--bg-card, #fff); border-right:1px solid var(--border); min-width:0; }
.fin-ai-sidebar-header {
  padding:14px 12px; font-size:13px; font-weight:600;
  border-bottom:1px solid var(--border);
  display:flex; justify-content:space-between; align-items:center; gap:8px;
}
.fin-ai-new-chat-btn {
  width:26px; height:26px; border-radius:6px;
  border:1px solid var(--border); background:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center; color:var(--text-muted);
}
.fin-ai-new-chat-btn:hover { background:var(--accent, #2563eb); color:#fff; border-color:var(--accent, #2563eb); }
.fin-ai-chat-list { flex:1; overflow-y:auto; padding:8px; }
.fin-ai-chat-item {
  display:flex; align-items:center; gap:8px;
  padding:8px 10px; border-radius:8px; cursor:pointer;
  font-size:13px; color:var(--text-muted);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.fin-ai-chat-item:hover { background:var(--bg-primary, #f5f5f7); }
.fin-ai-chat-item.active { background:var(--accent, #2563eb); color:#fff; }
.fin-ai-chat-item.active svg { stroke:#fff; }

.fin-ai-main { display:flex; flex-direction:column; background:var(--bg-primary, #f5f5f7); overflow:hidden; min-width:0; }
.fin-ai-chat-header {
  padding:12px 16px; border-bottom:1px solid var(--border);
  display:flex; justify-content:space-between; align-items:center; gap:8px;
  background:var(--bg-card, #fff);
}
.fin-ai-chat-title { font-size:14px; font-weight:600; color:var(--text-primary, #1d1d1f); }
.fin-ai-header-btn {
  padding:5px 12px; border-radius:6px;
  border:1px solid var(--border); background:none; cursor:pointer;
  font-size:12px; color:var(--text-muted);
  display:flex; align-items:center; gap:6px;
}
.fin-ai-badge {
  background:var(--accent, #2563eb); color:#fff;
  border-radius:10px; padding:1px 6px; font-size: 11px; font-weight:700;
}

.fin-ai-messages {
  flex:1; overflow-y:auto; padding:16px;
  display:flex; flex-direction:column; gap:12px;
}
.fin-ai-welcome { text-align:center; padding:40px 20px; color:var(--text-muted); }
.fin-ai-welcome-icon {
  width:56px; height:56px; border-radius:50%;
  background:var(--bg-card, #fff); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center; margin:0 auto 12px;
}
.fin-ai-welcome h3 { font-size:16px; color:var(--text-primary, #1d1d1f); margin:0 0 6px; }
.fin-ai-welcome p { font-size:13px; margin:0; }

.fin-ai-message { display:flex; align-items:flex-start; gap:10px; }
.fin-ai-message.user { flex-direction:row-reverse; }
.fin-ai-avatar {
  width:30px; height:30px; border-radius:50%;
  background:var(--accent, #2563eb); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:700; flex-shrink:0;
}
.fin-ai-bubble {
  max-width:78%; padding:10px 14px; border-radius:12px;
  font-size:13px; line-height:1.6;
  background:var(--bg-card, #fff); border:1px solid var(--border);
  color:var(--text-primary, #1d1d1f); word-wrap:break-word;
}
.fin-ai-message.user .fin-ai-bubble {
  background:var(--accent, #2563eb); color:#fff; border-color:var(--accent, #2563eb);
}

.fin-ai-typing { display:flex; gap:4px; align-items:center; padding:4px 0; }
.fin-ai-typing span {
  width:6px; height:6px; border-radius:50%; background:var(--text-muted);
  animation:fin-ai-typing 1.2s infinite;
}
.fin-ai-typing span:nth-child(2) { animation-delay:0.2s; }
.fin-ai-typing span:nth-child(3) { animation-delay:0.4s; }
@keyframes fin-ai-typing { 0%,60%,100% { opacity:0.3; } 30% { opacity:1; } }

.fin-ai-input-wrap {
  padding:12px 16px; border-top:1px solid var(--border);
  display:flex; gap:8px; align-items:flex-end; background:var(--bg-card, #fff);
}
.fin-ai-input {
  flex:1; border:1px solid var(--border); border-radius:10px;
  padding:10px 14px; background:var(--bg-input, #fff);
  color:var(--text-primary, #1d1d1f); font-size:13px;
  resize:none; outline:none; font-family:inherit; line-height:1.5; max-height:120px;
}
.fin-ai-input:focus { border-color:var(--accent, #2563eb); }
.fin-ai-send-btn {
  width:38px; height:38px; border-radius:10px;
  background:var(--accent, #2563eb); color:#fff;
  border:none; cursor:pointer; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}
.fin-ai-send-btn:disabled { opacity:0.5; cursor:not-allowed; }

.fin-ai-quick-prompts {
  padding:8px 16px 12px; border-top:1px solid var(--border);
  background:var(--bg-card, #fff);
}
.fin-ai-quick-label {
  font-size: 11px; color:var(--text-muted); text-transform:uppercase;
  letter-spacing:0.05em; margin-bottom:6px; font-weight:600;
}
.fin-ai-quick-list { display:flex; flex-wrap:wrap; gap:6px; }
.fin-ai-quick-btn {
  padding:4px 12px; border-radius:20px;
  border:1px solid var(--border); background:var(--bg-primary, #f5f5f7);
  cursor:pointer; font-size:12px; color:var(--text-muted);
  white-space:nowrap; transition:all 0.15s;
}
.fin-ai-quick-btn:hover { border-color:var(--accent, #2563eb); color:var(--accent, #2563eb); background:rgba(37,99,235,0.05); }

.fin-ai-info-panel { background:var(--bg-card, #fff); border-left:1px solid var(--border); padding:16px; overflow-y:auto; }
.fin-ai-info-header { font-size:13px; font-weight:600; margin-bottom:16px; display:flex; justify-content:space-between; align-items:center; }
.fin-ai-info-items { display:flex; flex-direction:column; gap:14px; }
.fin-ai-info-item { display:flex; gap:10px; align-items:flex-start; }
.fin-ai-info-icon { width:32px; height:32px; border-radius:8px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.fin-ai-info-icon.security { background:#0d6efd20; color:#0d6efd; }
.fin-ai-info-icon.shield   { background:#19875420; color:#198754; }
.fin-ai-info-icon.ai       { background:#dc354520; color:#dc3545; }
.fin-ai-info-icon.person   { background:#6f42c120; color:#6f42c1; }
.fin-ai-info-title { font-size:12px; font-weight:600; margin-bottom:3px; color:var(--text-primary, #1d1d1f); }
.fin-ai-info-desc  { font-size:11px; color:var(--text-muted); line-height:1.5; }

.fin-ai-modal { position:fixed; inset:0; background:rgba(0,0,0,0.5); display:flex; align-items:center; justify-content:center; z-index:1000; }
.fin-ai-modal-content { background:var(--bg-card, #fff); border-radius:12px; width:560px; max-width:95vw; max-height:80vh; overflow-y:auto; }
.fin-ai-modal-header { padding:14px 18px; font-size:15px; font-weight:600; border-bottom:1px solid var(--border); display:flex; justify-content:space-between; align-items:center; }

.fin-suggestion-item { padding:14px 18px; border-bottom:1px solid var(--border); display:flex; align-items:flex-start; gap:12px; }
.fin-suggestion-info { flex:1; min-width:0; }
.fin-suggestion-pattern { font-size:14px; font-weight:600; margin-bottom:4px; word-break:break-word; }
.fin-suggestion-meta { font-size:12px; color:var(--text-muted); margin-bottom:3px; }
.fin-suggestion-samples { font-size:11px; color:var(--text-muted); }
.fin-suggestion-actions { display:flex; flex-direction:column; gap:6px; }
.fin-suggestion-accept { padding:5px 14px; border-radius:6px; background:var(--accent, #2563eb); color:#fff; border:none; cursor:pointer; font-size:12px; white-space:nowrap; }
.fin-suggestion-reject { padding:5px 14px; border-radius:6px; background:none; color:var(--text-muted); border:1px solid var(--border); cursor:pointer; font-size:12px; }

@media (max-width: 900px) {
  .fin-ai-layout { grid-template-columns:1fr; height:auto; min-height:70vh; }
  .fin-ai-sidebar, .fin-ai-info-panel, .fin-ai-smart-panel { display:none; }
}

/* ── Smart panel ── */
.fin-ai-smart-panel { background:var(--bg-card,#fff); border-left:1px solid var(--border); overflow-y:auto; display:flex; flex-direction:column; min-width:0; }
.fin-smart-block { padding:14px 16px; border-bottom:1px solid var(--border); }
.fin-smart-block:last-child { border-bottom:none; flex:1; }
.fin-smart-block-title { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--text-muted); margin-bottom:10px; display:flex; align-items:center; gap:6px; }
.fin-smart-alert { background:#fef3cd; border:1px solid #fdd835; border-radius:8px; padding:10px 12px; font-size:13px; display:flex; flex-direction:column; gap:8px; }
.fin-smart-alert-num { font-size:22px; font-weight:700; color:#e65100; display:block; }
.fin-smart-run-btn { padding:6px 14px; background:#e65100; color:#fff; border:none; border-radius:6px; font-size:12px; font-weight:600; cursor:pointer; align-self:flex-start; }
.fin-smart-run-btn:hover { background:#bf360c; }
.fin-smart-ok { background:#e8f5e9; border:1px solid #a5d6a7; border-radius:8px; padding:10px 12px; font-size:13px; color:#2e7d32; }
.fin-smart-rule { padding:10px 0; border-bottom:1px solid var(--border); }
.fin-smart-rule:last-child { border-bottom:none; }
.fin-smart-rule-pattern { font-size:13px; font-weight:600; color:var(--text-primary,#1d1d1f); margin-bottom:3px; word-break:break-all; }
.fin-smart-rule-meta { font-size:12px; color:var(--text-muted); margin-bottom:2px; }
.fin-smart-rule-sample { font-size:11px; color:var(--text-muted); margin-bottom:6px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fin-smart-rule-btns { display:flex; gap:6px; }
.fin-smart-accept { padding:4px 10px; background:var(--accent,#2563eb); color:#fff; border:none; border-radius:5px; font-size:11px; cursor:pointer; white-space:nowrap; }
.fin-smart-reject { padding:4px 10px; background:none; color:var(--text-muted); border:1px solid var(--border); border-radius:5px; font-size:11px; cursor:pointer; }
.fin-smart-accept:hover { background:#1d4ed8; }
.fin-smart-reject:hover { border-color:#dc3545; color:#dc3545; }
.fin-smart-empty { font-size:12px; color:var(--text-muted); line-height:1.5; }
.fin-smart-add-btn { display:flex; align-items:center; gap:7px; padding:8px 12px; background:var(--bg-primary,#f5f5f7); border:1px dashed var(--border); border-radius:7px; font-size:13px; color:var(--text-muted); cursor:pointer; width:100%; justify-content:center; }
.fin-smart-add-btn:hover { border-color:var(--accent,#2563eb); color:var(--accent,#2563eb); }
.fin-form-row { margin-bottom:8px; }
.fin-form-row label { display:block; font-size:11px; color:var(--text-muted); margin-bottom:4px; font-weight:500; }
.fin-form-row input, .fin-form-row select { width:100%; padding:7px 10px; border:1px solid var(--border); border-radius:6px; font-size:13px; background:#fff; box-sizing:border-box; }
.fin-form-row input:focus, .fin-form-row select:focus { border-color:var(--accent,#2563eb); outline:none; }
.fin-form-save { width:100%; padding:8px; background:var(--accent,#2563eb); color:#fff; border:none; border-radius:7px; font-size:13px; font-weight:600; cursor:pointer; margin-top:4px; }
.fin-form-save:hover { background:#1d4ed8; }

/* ── Welcome screen cards ── */
.fin-welcome-stats { display:flex; gap:10px; justify-content:center; margin:16px 0; flex-wrap:wrap; }
.fin-welcome-stat { background:var(--bg-card,#fff); border:1px solid var(--border); border-radius:10px; padding:10px 16px; text-align:center; min-width:80px; }
.fin-welcome-stat-val { font-size:18px; font-weight:700; color:var(--text-primary,#1d1d1f); }
.fin-welcome-stat-lbl { font-size:11px; color:var(--text-muted); margin-top:2px; }
.fin-welcome-stat-warn { border-color:#fdd835; background:#fffde7; }
.fin-welcome-stat-warn .fin-welcome-stat-val { color:#e65100; }
.fin-welcome-stat-accent { border-color:#bfdbfe; background:#eff6ff; }
.fin-welcome-stat-accent .fin-welcome-stat-val { color:var(--accent,#2563eb); }
.fin-welcome-cards { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:16px; }
.fin-welcome-card { background:var(--bg-card,#fff); border:1px solid var(--border); border-radius:12px; padding:14px; cursor:pointer; text-align:left; transition:all .15s; }
.fin-welcome-card:hover { border-color:var(--accent,#2563eb); box-shadow:0 2px 8px rgba(37,99,235,.1); transform:translateY(-1px); }
.fin-welcome-card-icon { font-size:22px; margin-bottom:8px; }
.fin-welcome-card-label { font-size:13px; font-weight:600; color:var(--text-primary,#1d1d1f); margin-bottom:3px; }
.fin-welcome-card-desc { font-size:11px; color:var(--text-muted); }

/* ===== INBOX (chat module) ===== */
.inbox-layout {
  display: grid;
  grid-template-columns: 320px 1fr minmax(260px, 300px);
  will-change: transform; /* GPU layer — prevents iOS repaint flicker */
  /* svh = small viewport height — equals the viewport WITH the mobile URL
     bar visible. Using svh (instead of vh/dvh) keeps the chat input above
     the fold from the first paint, regardless of whether the URL bar is
     currently collapsed. Slight empty strip at the bottom when the URL bar
     does collapse is acceptable; jumping input is not. */
  height: calc(100vh - 56px);
  overflow: hidden;
}
.inbox-sidebar { border-right: 1px solid var(--border); display: flex; flex-direction: column; overflow: hidden; background: var(--bg-card-solid); }
.inbox-sidebar-header { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.inbox-sidebar-header h2 { font-size: 16px; font-weight: 600; margin: 0; color: var(--text-primary); }
.inbox-new-chat-btn { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--border); background: none; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text-muted); }
.inbox-new-chat-btn:hover { background: var(--accent); color: white; border-color: var(--accent); }

.inbox-search { padding: 8px 12px; }
.inbox-search input { width: 100%; padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-primary); color: var(--text-primary); font-size: 13px; outline: none; box-sizing: border-box; }
.inbox-search input:focus { border-color: var(--accent); }

.inbox-filters { display: flex; gap: 4px; padding: 4px 12px 8px; flex-wrap: wrap; align-items: center; }
.inbox-filter-btn { padding: 4px 10px; border-radius: 6px; border: 1px solid transparent; background: none; cursor: pointer; font-size: 12px; color: var(--text-muted); }
.inbox-filter-btn.active { background: var(--accent); color: white; }
.inbox-count-badge { background: #dc2626; color: white; border-radius: 10px; padding: 0 6px; font-size: 11px; font-weight: 700; margin-left: 4px; display: none; }

.inbox-sync-btn {
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid var(--border-color);
  background: var(--bg-secondary);
  cursor: pointer;
  font-size: 12px;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  white-space: nowrap;
}
.inbox-sync-btn:hover { background: var(--bg-hover); }
.inbox-sync-btn:disabled { opacity: 0.6; cursor: not-allowed; }

.inbox-chat-list { flex: 1; overflow-y: auto; }
.inbox-empty-list { padding: 40px 16px; text-align: center; color: var(--text-muted); font-size: 13px; }

.inbox-chat-item { display: flex; gap: 10px; padding: 12px 16px; cursor: pointer; border-bottom: 1px solid var(--border); transition: background 0.1s; }
.inbox-chat-item:hover { background: rgba(0,0,0,0.03); }
.inbox-chat-item.active { background: rgba(99,102,241,0.08); border-left: 3px solid var(--accent); padding-left: 13px; }
.inbox-chat-item.unread .inbox-chat-name { font-weight: 700; color: var(--text-primary); }

.inbox-chat-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--bg-primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; position: relative; font-size: 16px; font-weight: 600; color: var(--text-muted); }
.inbox-platform-dot { position: absolute; bottom: -2px; right: -2px; width: 16px; height: 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: white; border: 2px solid var(--bg-card-solid); z-index: 1; }
/* Знак каналу всередині кружечка: білий на фірмовому кольорі. */
.inbox-platform-dot svg { width: 10px; height: 10px; display: block; color: #fff; }
/* Плоский варіант — у рядку з назвою каналу, кольором самого каналу. */
.inbox-platform-inline { display: inline-flex; align-items: center; vertical-align: -2px; margin-right: 4px; }
.inbox-platform-inline svg { width: 12px; height: 12px; display: block; }
.inbox-avatar-letter { z-index: 1; }

.inbox-chat-info { flex: 1; min-width: 0; }
.inbox-chat-top { display: flex; justify-content: space-between; gap: 6px; margin-bottom: 2px; }
.inbox-chat-name { font-size: 13px; font-weight: 500; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inbox-chat-time { font-size: 11px; color: var(--text-muted); flex-shrink: 0; }
.inbox-chat-preview { display: flex; align-items: center; gap: 6px; }
.inbox-preview-text { font-size: 12px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inbox-unread-badge { background: var(--accent); color: white; border-radius: 10px; padding: 1px 7px; font-size: 11px; font-weight: 700; flex-shrink: 0; }
.inbox-chat-assigned { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--text-muted); margin-top: 2px; }

.inbox-main { display: flex; flex-direction: column; overflow: hidden; background: var(--bg-primary); height: 100%; max-height: 100%; }
.inbox-empty-state { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--text-muted); gap: 12px; }

.inbox-conv-header { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--border); background: var(--bg-card-solid); }
.inbox-back-btn { display: none; background: none; border: none; cursor: pointer; color: var(--text-muted); padding: 4px; }
.inbox-conv-header-info { flex: 1; cursor: pointer; min-width: 0; }
.inbox-conv-name { font-size: 14px; font-weight: 600; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inbox-conv-meta { font-size: 11px; color: var(--text-muted); }
.inbox-conv-actions { display: flex; gap: 6px; }
.inbox-conv-actions button { width: 32px; height: 32px; border-radius: 6px; border: 1px solid var(--border); background: none; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text-muted); }
.inbox-conv-actions button:hover { background: var(--bg-primary); color: var(--accent); }

.inbox-messages { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 6px; min-height: 0; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; touch-action: pan-y; overflow-anchor: none; }
.inbox-no-messages { text-align: center; padding: 40px; color: var(--text-muted); }

.inbox-message { display: flex; position: relative; }
.inbox-message.out { justify-content: flex-end; }
.inbox-msg-bubble { max-width: 70%; min-width: 0; overflow: hidden; padding: 8px 12px; border-radius: 12px; font-size: 13px; line-height: 1.5; background: var(--bg-card-solid); border: 1px solid var(--border); color: var(--text-primary); }
/* height:auto тут перебивало фіксовану висоту прев'ю (селектор специфічніший),
   і фото знову задавали висоту самі — стрічка смикалась. Виняток для медіа
   чату нижче. */
.inbox-msg-bubble img { max-width: 100%; height: auto; display: block; }
.inbox-msg-bubble img.inbox-msg-image { height: 180px; }
.inbox-message.out .inbox-msg-bubble { background: var(--accent); color: white; border-color: var(--accent); }
.inbox-msg-text a { color: inherit; text-decoration: underline; }
/* Мінімальні розміри до завантаження: без них картинка має нульову висоту,
   і браузер не рахує її видимою — з loading="lazy" вона не вантажилась
   узагалі, найпомітніше в діалогах Direct, де медіа основне. */
/* Розмір картинки задано заздалегідь, до завантаження. Раніше було
   min-height:90px, а після завантаження висота ставала до 240px — стрічка
   росла під кожним фото, і чат «пригав» саме в момент появи медіа. Тепер
   бульбашка займає стабільне місце, а зображення заповнює його. */
.inbox-msg-image {
  width: 240px;
  height: 180px;
  max-width: 100%;
  object-fit: cover;
  border-radius: 8px;
  cursor: zoom-in;
  display: block;
  transition: opacity 0.15s;
  background: var(--bg-muted, #f1f5f9);
}
.inbox-msg-image:hover { opacity: 0.85; }

/* Те саме для відео: до підвантаження метаданих браузер не знає розмірів,
   і рамка стрибала з нуля до 200px. */
.inbox-msg-video {
  width: 300px;
  height: 200px;
  max-width: 100%;
  object-fit: cover;
  border-radius: 8px;
  display: block;
  background: var(--bg-secondary);
}
.inbox-msg-audio { display: block; width: 260px; max-width: 100%; border-radius: 8px; background: var(--bg-secondary); }
.inbox-msg-file { display: inline-flex; align-items: center; padding: 8px 12px; background: var(--bg-secondary); border-radius: 6px; text-decoration: none; color: var(--text-primary); font-size: 13px; border: 1px solid var(--border); }
.inbox-msg-file:hover { background: var(--bg-hover); }

/* Custom voice player — waveform + speed */
.inbox-voice-player { display: flex; align-items: center; gap: 8px; min-width: 220px; max-width: 300px; padding: 2px 0; }
.inbox-voice-play-btn { width: 34px; height: 34px; border-radius: 50%; border: none; background: rgba(15,23,42,0.08); color: var(--text-primary, #1e293b); display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; transition: background 0.15s; padding: 0; }
.inbox-voice-play-btn:hover { background: rgba(15,23,42,0.15); }
.inbox-message.out .inbox-voice-play-btn { background: rgba(255,255,255,0.22); color: white; }
.inbox-message.out .inbox-voice-play-btn:hover { background: rgba(255,255,255,0.35); }
.inbox-voice-wave-wrap { flex: 1; height: 32px; position: relative; cursor: pointer; border-radius: 4px; overflow: hidden; }
.inbox-voice-canvas { width: 100%; height: 100%; display: block; }
.inbox-voice-progress { position: absolute; top: 0; left: 0; height: 100%; width: 0%; background: rgba(160,140,100,0.30); pointer-events: none; transition: width 0.1s linear; }
.inbox-message.out .inbox-voice-progress { background: rgba(255,255,255,0.28); }
.inbox-voice-time { font-size: 11px; color: var(--text-muted, #64748b); min-width: 30px; text-align: center; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.inbox-message.out .inbox-voice-time { color: rgba(255,255,255,0.78); }
.inbox-voice-speed { font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 10px; border: 1px solid rgba(15,23,42,0.12); background: none; color: var(--text-muted, #64748b); cursor: pointer; flex-shrink: 0; transition: all 0.15s; }
.inbox-voice-speed:hover { background: rgba(15,23,42,0.06); }
.inbox-message.out .inbox-voice-speed { border-color: rgba(255,255,255,0.32); color: rgba(255,255,255,0.85); }
.inbox-message.out .inbox-voice-speed:hover { background: rgba(255,255,255,0.15); }

/* Video circle bubble (Telegram-style) — inline playback + expand-on-play */
.inbox-video-bubble { width: 180px; height: 180px; border-radius: 50%; overflow: hidden; position: relative; cursor: pointer; background: #000; flex-shrink: 0; transition: width 0.3s ease, height 0.3s ease; }
.inbox-video-bubble.playing { width: 260px; height: 260px; }
.inbox-video-round { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; }
.inbox-video-play-icon { position: absolute; top: 0; right: 0; bottom: 0; left: 0;   /* запас: inset зʼявився в Chrome 87 */
  inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.28); border-radius: 50%; transition: background 0.15s; pointer-events: none; }
.inbox-video-bubble:hover .inbox-video-play-icon { background: rgba(0,0,0,0.15); }
@media (max-width: 768px) {
  .inbox-video-bubble { width: 150px; height: 150px; }
  .inbox-video-bubble.playing { width: 220px; height: 220px; }
}

/* Media-only bubbles: strip the rounded-card padding/border so circles
   and image thumbnails render cleanly without the wrap. */
.inbox-msg-bubble.naked { background: transparent !important; border: none !important; padding: 0 !important; }
.inbox-msg-bubble.naked .inbox-msg-meta { padding: 4px 4px 0; }

/* Flash highlight when scrolling to a message from media library */
.inbox-msg-flash .inbox-msg-bubble { box-shadow: 0 0 0 3px rgba(160,140,100,0.45); transition: box-shadow 0.4s ease; }

/* Reply quote (banner above content inside a bubble) */
.inbox-msg-reply { display: flex; gap: 8px; padding: 6px 8px; margin-bottom: 6px; cursor: pointer; border-radius: 6px; background: rgba(15,23,42,0.05); max-width: 100%; }
.inbox-message.out .inbox-msg-reply { background: rgba(255,255,255,0.14); }
.inbox-msg-reply-bar  { width: 3px; border-radius: 2px; background: var(--accent, #A08C64); flex-shrink: 0; }
.inbox-msg-reply-text { font-size: 12px; color: var(--text-muted, #64748b); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.4; }
.inbox-message.out .inbox-msg-reply-text { color: rgba(255,255,255,0.75); }

/* Hover action button (reply) */
.inbox-message { position: relative; }
/* Овальну кнопку «Відповісти» прибрано — вона перекривала текст.
   Відповідь: свайп повідомлення вбік (мобільний) або праворуч кнопка миші. */
.inbox-message { transform: translateX(var(--swipe-x, 0px)); transition: transform .2s cubic-bezier(.2,.8,.3,1); }
.inbox-message.swiping { transition: none; }
.inbox-swipe-hint {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(51, 144, 236, .12); color: #3390EC;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; z-index: 1;
}

/* Create-order form (KeyCRM-style sections, line items, totals) */
.co-form { padding: 4px 4px 0; max-width: 760px; }
.co-form .co-row { display: flex; gap: 16px; margin-bottom: 14px; flex-wrap: wrap; }
.co-form .co-section { flex: 1 1 200px; min-width: 0; }
.co-form .co-full { width: 100%; flex-basis: 100%; }
.co-form .co-section-title { font-size: 11px; font-weight: 700; color: var(--text-muted, #64748b); text-transform: uppercase; letter-spacing: 0.04em; margin: 0 0 8px; padding-bottom: 5px; border-bottom: 1px solid var(--border, #e2e8f0); }
.co-form .co-field { margin-bottom: 8px; }
.co-form .co-field label { display: block; font-size: 11px; color: var(--text-muted, #64748b); margin-bottom: 3px; }
.co-form .co-field input,
.co-form .co-field select,
.co-form .co-field textarea { width: 100%; padding: 7px 10px; border: 1px solid var(--border, #e2e8f0); border-radius: 6px; font-size: 13px; background: var(--bg-card-solid, #fff); color: var(--text-primary, #1e293b); box-sizing: border-box; }
.co-product-row { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; }
.co-product-row .co-prod-name  { flex: 3; min-width: 0; }
.co-product-row .co-prod-qty   { width: 70px; }
.co-product-row .co-prod-price { width: 100px; }
.co-product-row input { padding: 7px 9px; border: 1px solid var(--border, #e2e8f0); border-radius: 6px; font-size: 13px; background: var(--bg-card-solid, #fff); box-sizing: border-box; }
.co-prod-remove { background: none; border: none; color: var(--text-muted, #64748b); cursor: pointer; font-size: 16px; padding: 4px 8px; flex-shrink: 0; }
.co-prod-remove:hover { color: #dc2626; }
.co-add-product { background: none; border: 1px dashed var(--accent, #A08C64); border-radius: 6px; padding: 7px 12px; font-size: 12px; color: var(--accent, #A08C64); cursor: pointer; margin-top: 4px; flex: 2; }
.co-add-product:hover { background: rgba(160,140,100,0.08); }
.co-add-row { display: flex; gap: 8px; margin-top: 4px; }
.co-add-manual { background: none; border: 1px dashed var(--border, #e2e8f0); border-radius: 6px; padding: 7px 12px; font-size: 12px; color: var(--text-muted, #64748b); cursor: pointer; flex: 1; }
.co-add-manual:hover { background: rgba(15,23,42,0.04); }
.co-catalog-btn { background: none; border: 1px solid var(--accent, #A08C64); border-radius: 6px; padding: 3px 9px; font-size: 11px; color: var(--accent, #A08C64); cursor: pointer; display: inline-flex; align-items: center; gap: 4px; text-transform: none; letter-spacing: 0; font-weight: 600; }
.co-catalog-btn:hover { background: var(--accent, #A08C64); color: #fff; }
.co-prod-thumb { width: 38px; height: 38px; border-radius: 6px; object-fit: cover; flex-shrink: 0; border: 1px solid var(--border, #e2e8f0); }
.co-prod-sku { font-size: 11px; color: var(--text-muted, #94a3b8); margin-top: 2px; }

/* Catalog slide-in panel */
.co-catalog-panel { position: fixed; top: 0; right: 0; width: 480px; max-width: 92vw; height: 100vh; background: var(--bg-card-solid, #fff); box-shadow: -4px 0 20px rgba(0,0,0,0.18); z-index: 10001; display: flex; flex-direction: column; animation: coCatalogIn 0.18s ease; }
@keyframes coCatalogIn { from { transform: translateX(100%); } to { transform: translateX(0); } }
.co-catalog-header { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--border, #e2e8f0); }
.co-catalog-header h3 { font-size: 15px; font-weight: 700; margin: 0; color: var(--text-primary, #1e293b); }
.co-catalog-close { background: none; border: none; cursor: pointer; color: var(--text-muted, #64748b); padding: 4px; }
.co-catalog-close:hover { color: var(--text-primary, #1e293b); }
.co-catalog-search { display: flex; gap: 8px; padding: 12px 18px; border-bottom: 1px solid var(--border, #e2e8f0); }
.co-catalog-search input { flex: 1; padding: 8px 11px; border: 1px solid var(--border, #e2e8f0); border-radius: 8px; font-size: 13px; }
.co-catalog-search select { padding: 8px 10px; border: 1px solid var(--border, #e2e8f0); border-radius: 8px; font-size: 12px; min-width: 130px; background: #fff; }
.co-catalog-results { flex: 1; overflow-y: auto; padding: 8px 12px; }
.co-catalog-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--border, #e2e8f0); border-radius: 8px; margin-bottom: 6px; cursor: pointer; transition: all 0.12s; }
.co-catalog-item:hover { border-color: var(--accent, #A08C64); background: rgba(160,140,100,0.04); }
.co-catalog-item-img { width: 48px; height: 48px; border-radius: 6px; object-fit: cover; flex-shrink: 0; background: var(--bg, #f8fafc); border: 1px solid var(--border, #e2e8f0); }
.co-catalog-no-img { border-style: dashed; }
.co-catalog-item-info { flex: 1; min-width: 0; }
.co-catalog-item-title { font-size: 12px; font-weight: 600; line-height: 1.3; color: var(--text-primary, #1e293b); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.co-catalog-item-meta { display: flex; gap: 6px; margin-top: 3px; }
.co-catalog-item-variant { font-size: 11px; color: var(--accent, #A08C64); background: rgba(160,140,100,0.10); padding: 1px 6px; border-radius: 8px; }
.co-catalog-item-sku { font-size: 11px; color: var(--text-muted, #94a3b8); }
.co-catalog-item-price { font-size: 12px; font-weight: 700; white-space: nowrap; flex-shrink: 0; color: var(--text-primary, #1e293b); }
@media (max-width: 768px) {
  .co-catalog-panel { width: 100vw; }
}
.co-totals { display: flex; flex-direction: column; justify-content: flex-end; }
.co-total-row { display: flex; justify-content: space-between; padding: 3px 0; font-size: 13px; color: var(--text-muted, #64748b); }
.co-total-main { font-weight: 700; font-size: 15px; color: var(--text-primary, #1e293b); border-top: 1px solid var(--border, #e2e8f0); padding-top: 7px; margin-top: 4px; }
@media (max-width: 768px) { .co-form .co-row { flex-direction: column; gap: 10px; } .co-product-row { flex-wrap: wrap; } .co-product-row .co-prod-qty, .co-product-row .co-prod-price { width: 90px; } }

/* Contact panel — manager select + orders + action buttons */
.inbox-cp-manager-select { width: 100%; padding: 7px 10px; border: 1px solid var(--border, #e2e8f0); border-radius: 8px; background: var(--bg-card-solid, #fff); font-size: 13px; color: var(--text-primary, #1e293b); cursor: pointer; }
.inbox-cp-manager-select:hover { border-color: var(--accent, #A08C64); }

.inbox-cp-order-card { padding: 9px 10px; border: 1px solid var(--border, #e2e8f0); border-radius: 8px; margin-bottom: 6px; background: var(--bg-card-solid, #fff); }
.inbox-cp-order-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; gap: 8px; }
.inbox-cp-order-id { font-size: 13px; font-weight: 600; color: var(--accent, #A08C64); text-decoration: none; }
.inbox-cp-order-id:hover { text-decoration: underline; }
.inbox-cp-order-status { font-size: 11px; padding: 2px 8px; border-radius: 10px; background: rgba(160,140,100,0.12); color: var(--accent, #A08C64); font-weight: 600; white-space: nowrap; }
.inbox-cp-order-details { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-muted, #64748b); }
.inbox-cp-order-price { font-size: 13px; font-weight: 700; margin-top: 4px; color: var(--text-primary, #1e293b); }

.inbox-cp-actions { display: flex; flex-direction: column; gap: 6px; margin: 14px 0 16px; }
.inbox-cp-action-btn { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 12px; border: 1px solid var(--accent, #A08C64); border-radius: 8px; background: none; color: var(--accent, #A08C64); font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.15s; }
.inbox-cp-action-btn:hover { background: var(--accent, #A08C64); color: #fff; }

/* Assigned-manager badge in conversation header */
.inbox-header-assigned { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--text-muted, #64748b); padding: 1px 8px; background: rgba(160,140,100,0.12); border-radius: 10px; margin-left: 8px; }

/* Reply preview row above the input */
#inbox-reply-bar { padding: 0 16px; }
/* Панель відповіді над полем вводу, як у Telegram: смужка, два рядки, хрестик.
   Раніше розмітка і стилі розʼїхались — заголовок і текст ставали двома
   колонками флексу, тому рядок виглядав розсипаним. */
.inbox-reply-preview {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 14px 7px 12px;
  background: #fff;
  border: none; border-top: 1px solid #E4E9ED;
  border-radius: 0; margin: 0;
}
.inbox-reply-preview-bar { width: 2px; align-self: stretch; min-height: 30px; border-radius: 2px; background: #3390EC; flex-shrink: 0; }
.inbox-reply-preview-content { flex: 1; min-width: 0; }
/* Режим правки: та сама панель, але іншим кольором, щоб не сплутати
   з відповіддю, і саме повідомлення підсвічене у стрічці. */
.inbox-edit-preview .inbox-reply-preview-bar { background: #f59e0b; }
.inbox-edit-preview .inbox-reply-preview-sender { color: #f59e0b; }
.inbox-message.editing .inbox-msg-bubble { outline: 2px solid #f59e0b; outline-offset: 1px; }
.inbox-reply-preview-sender { font-size: 13px; font-weight: 600; color: #3390EC; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inbox-reply-preview-text   { font-size: 13px; color: #707579; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inbox-reply-close {
  background: none; border: none; cursor: pointer; color: #8E9296;
  width: 30px; height: 30px; min-height: 30px; padding: 0; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; border-radius: 50%;
}
.inbox-reply-close:hover { background: rgba(0,0,0,.05); color: #dc2626; }

/* File upload — attach button + preview */
.inbox-attach-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 8px; cursor: pointer; color: var(--text-muted, #64748b); transition: all 0.15s; flex-shrink: 0; }
.inbox-attach-btn:hover { color: var(--accent, #A08C64); background: rgba(160,140,100,0.10); }
.inbox-file-preview { padding: 6px 16px 0; }
.inbox-file-preview-inner { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; background: rgba(160,140,100,0.08); border: 1px solid var(--border, #e2e8f0); border-radius: 10px; }
.inbox-file-badge { font-size: 12px; color: var(--text-primary, #1e293b); max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inbox-file-remove { background: none; border: none; cursor: pointer; color: var(--text-muted, #64748b); font-size: 14px; padding: 2px 6px; border-radius: 4px; }
.inbox-file-remove:hover { background: rgba(0,0,0,0.05); color: #dc2626; }

/* Contact-panel tabs + media library */
.inbox-cp-tabs { display: flex; gap: 2px; margin: 0 0 12px; border-bottom: 1px solid var(--border, #e2e8f0); }
.inbox-cp-tab { padding: 7px 14px; border: none; background: none; cursor: pointer; font-size: 12px; color: var(--text-muted, #64748b); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.inbox-cp-tab.active { color: var(--accent, #A08C64); border-bottom-color: var(--accent, #A08C64); font-weight: 600; }
.inbox-cp-empty { color: var(--text-muted, #94a3b8); font-size: 12px; padding: 12px; text-align: center; }
.inbox-media-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; }
.inbox-media-thumb { aspect-ratio: 1; overflow: hidden; border-radius: 4px; cursor: pointer; position: relative; background: #000; transition: opacity 0.15s; }
.inbox-media-thumb img, .inbox-media-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
.inbox-media-thumb:hover { opacity: 0.85; }
.inbox-media-video-badge { position: absolute; bottom: 4px; left: 4px; background: rgba(0,0,0,0.6); color: white; font-size: 11px; padding: 1px 6px; border-radius: 4px; }
.inbox-files-section { margin-bottom: 14px; }
.inbox-files-title { font-size: 11px; font-weight: 700; color: var(--text-muted, #64748b); text-transform: uppercase; margin-bottom: 6px; letter-spacing: 0.04em; }
.inbox-file-item { display: flex; justify-content: space-between; align-items: center; padding: 8px 6px; border-bottom: 1px solid rgba(0,0,0,0.04); font-size: 12px; cursor: pointer; text-decoration: none; color: inherit; gap: 8px; }
.inbox-file-item:hover { background: rgba(0,0,0,0.02); }
.inbox-file-dir { color: var(--text-muted, #94a3b8); font-size: 11px; white-space: nowrap; }

/* Lightbox overlay for image/video preview */
.inbox-lightbox-overlay { position: fixed; top: 0; right: 0; bottom: 0; left: 0;   /* запас: inset зʼявився в Chrome 87 */
  inset: 0; background: rgba(0,0,0,0.92); z-index: 15001; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 14px; cursor: zoom-out; padding: 24px; box-sizing: border-box; }
.inbox-lightbox-content { cursor: default; display: flex; align-items: center; justify-content: center; }
.inbox-lightbox-close { position: absolute; top: 14px; right: 14px; background: rgba(255,255,255,0.18); border: none; border-radius: 50%; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.2s; }
.inbox-lightbox-close:hover { background: rgba(255,255,255,0.32); }
.inbox-lightbox-download { display: inline-flex; align-items: center; gap: 6px; color: white; text-decoration: none; font-size: 12px; padding: 7px 14px; border-radius: 8px; background: rgba(255,255,255,0.15); transition: background 0.2s; }
.inbox-lightbox-download:hover { background: rgba(255,255,255,0.32); }

.inbox-lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.6);
  border: none;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s, opacity 0.2s;
  z-index: 15002;
}

.inbox-lightbox-nav:hover {
  background: rgba(0,0,0,0.8);
}

.inbox-lightbox-prev {
  left: 24px;
}

.inbox-lightbox-next {
  right: 24px;
}

.inbox-lightbox-info {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 8px;
}

.inbox-lightbox-counter {
  color: rgba(255,255,255,0.7);
  font-size: 13px;
}

.inbox-lightbox-caption {
  color: white;
  font-size: 14px;
  text-align: center;
  max-width: 600px;
  margin: 8px 0;
  padding: 0 16px;
  line-height: 1.4;
}

.inbox-msg-file { display: inline-block; padding: 6px 10px; background: rgba(0,0,0,0.05); border-radius: 6px; text-decoration: none; color: inherit; font-size: 12px; }
.inbox-message.out .inbox-msg-file { background: rgba(255,255,255,0.15); }
.inbox-msg-meta { font-size: 11px; opacity: 0.7; margin-top: 4px; text-align: right; }
.inbox-message.in .inbox-msg-meta { color: var(--text-muted); opacity: 1; }
.inbox-msg-sender { font-weight: 600; }

.inbox-input-wrap { padding: 10px 16px; border-top: 1px solid var(--border); display: flex; gap: 8px; align-items: flex-end; background: var(--bg-card-solid); }
.inbox-input { flex: 1; padding: 8px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-primary); color: var(--text-primary); font-size: 13px; resize: none; outline: none; max-height: 160px; font-family: inherit; box-sizing: border-box;
  /* Без явного overflow-y довгий текст не прокручувався: поле впиралось у
     max-height, а прихована частина лишалась недоступною для редагування. */
  overflow-y: auto; -webkit-overflow-scrolling: touch; }
.inbox-input:focus { border-color: var(--accent); }
.inbox-send-btn { width: 36px; height: 36px; border-radius: 8px; background: var(--accent); color: white; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.inbox-send-btn:hover { opacity: 0.9; }
.inbox-send-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.inbox-send-btn.sending svg { animation: sending-spin 1s linear infinite; }

/* Actions dropdown */
.inbox-actions-dropdown { position: relative; }
.inbox-actions-btn { width: 36px; height: 36px; border-radius: 8px; background: var(--bg-secondary); color: var(--text-primary); border: 1px solid var(--border); cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.inbox-actions-btn:hover { background: var(--bg-hover); }
.inbox-actions-menu { position: absolute; bottom: 100%; left: 0; background: var(--bg-card-solid); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); min-width: 160px; z-index: 1000; margin-bottom: 4px; }
.inbox-action-item { display: flex; align-items: center; gap: 8px; padding: 10px 12px; color: var(--text-primary); background: none; border: none; width: 100%; text-align: left; cursor: pointer; font-size: 13px; transition: background-color 0.15s; }
.inbox-action-item:hover { background: var(--bg-hover); }
.inbox-action-item:first-child { border-radius: 7px 7px 0 0; }
.inbox-action-item:last-child { border-radius: 0 0 7px 7px; }

@keyframes sending-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Upload progress styles */
.inbox-upload-progress { padding: 12px; background: var(--bg-primary); border-radius: 8px; border: 1px solid var(--border); }
.inbox-upload-info { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.inbox-upload-filename { font-weight: 500; font-size: 13px; color: var(--text-primary); }
.inbox-upload-status { font-size: 12px; color: var(--text-muted); }
.inbox-upload-bar { height: 4px; background: var(--border); border-radius: 2px; overflow: hidden; }
.inbox-upload-progress-fill { height: 100%; background: var(--accent); border-radius: 2px; width: 0%; animation: upload-pulse 1.5s ease-in-out infinite; }

@keyframes upload-pulse {
  0% { width: 0%; }
  50% { width: 70%; }
  100% { width: 0%; }
}

.inbox-contact-panel {
  border-left: 1px solid var(--border);
  padding: 16px;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--bg-card-solid);
  box-sizing: border-box;
  min-width: 0;
}
.inbox-cp-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.inbox-cp-header h3 { font-size: 14px; font-weight: 600; margin: 0; color: var(--text-primary); }
.inbox-cp-header button { background: none; border: none; cursor: pointer; color: var(--text-muted); }
.inbox-cp-avatar { width: 56px; height: 56px; border-radius: 50%; background: var(--accent); color: white; display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 700; margin: 0 auto 10px; }
.inbox-cp-name { text-align: center; font-size: 15px; font-weight: 600; color: var(--text-primary); }
.inbox-cp-phone { text-align: center; font-size: 13px; color: var(--text-muted); margin: 4px 0; }
.inbox-cp-platform { text-align: center; font-size: 12px; color: var(--text-muted); margin-bottom: 16px; }
.inbox-cp-link { display: block; text-align: center; color: var(--accent); font-size: 13px; text-decoration: none; padding: 8px; border: 1px solid var(--accent); border-radius: 8px; margin-bottom: 8px; }
.inbox-cp-btn { display: block; width: 100%; padding: 8px; border: 1px solid var(--border); border-radius: 8px; background: none; cursor: pointer; font-size: 12px; color: var(--text-muted); margin-bottom: 6px; }
.inbox-cp-btn:hover { background: var(--bg-primary); }
.inbox-cp-link-search { margin-bottom: 6px; }
.inbox-cp-link-input { display: block; width: 100%; box-sizing: border-box; padding: 7px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-secondary); color: var(--text-primary); font-size: 13px; outline: none; margin-bottom: 6px; }
.inbox-cp-link-input:focus { border-color: var(--accent); }
.inbox-cp-link-results { max-height: 200px; overflow-y: auto; border-radius: 8px; }
.inbox-cp-link-result { padding: 7px 10px; border-radius: 8px; cursor: pointer; transition: background 0.1s; }
.inbox-cp-link-result:hover { background: var(--bg-primary); }
.inbox-cp-link-result-name { font-size: 13px; font-weight: 500; color: var(--text-primary); }
.inbox-cp-link-result-phone { font-size: 11px; color: var(--text-muted); margin-top: 1px; }
.inbox-cp-link-empty { font-size: 12px; color: var(--text-muted); padding: 6px 4px; }
.inbox-cp-link-error { color: #ef4444 !important; }
.inbox-cp-link-cancel { display: block; width: 100%; padding: 6px; border: none; border-radius: 8px; background: none; cursor: pointer; font-size: 11px; color: var(--text-muted); margin-top: 4px; text-align: center; }
.inbox-cp-link-cancel:hover { color: var(--text-primary); background: var(--bg-primary); }
.inbox-cp-section { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border); }
.inbox-cp-section-title { font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 6px; }
.inbox-cp-section div { font-size: 13px; margin-bottom: 3px; color: var(--text-primary); }

.inbox-platform-btn { padding: 6px 16px; border-radius: 6px; border: 1px solid var(--border); background: var(--bg-card-solid); cursor: pointer; font-size: 13px; color: var(--text-muted); }
.inbox-platform-btn.active { background: var(--accent); color: white; border-color: var(--accent); }

/* Chat highlight animation for existing chat updates */
@keyframes highlight-chat {
  0% { background-color: var(--accent-soft, rgba(168, 140, 100, 0.1)); }
  50% { background-color: var(--accent-soft, rgba(168, 140, 100, 0.2)); }
  100% { background-color: transparent; }
}

/* The inbox needs to reach the actual viewport bottom — global
   body { padding-bottom: 100px } and the mobile-only
   .main-content { padding-bottom: 80px + safe-area } reserve space for
   the bottom-nav and otherwise push the chat input ~80–100px above the
   real bottom edge. Cancel both while #page-inbox is the active page. */
body:has(#page-inbox.active) { padding-bottom: 0; overflow: hidden; }
body:has(#page-inbox.active) .main-content { padding-bottom: 0 !important; overflow: hidden; }
/* iOS notch / home indicator — keep the input row above the gesture bar. */
.inbox-input-wrap { padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }

/* На телефоні поле може займати до 40% екрана: 100px це лише чотири рядки,
   а довгі повідомлення з реквізитами не вміщались і не прокручувались.
   16px — щоб iOS не збільшував масштаб сторінки при фокусі. */
@media (max-width: 768px) {
  .inbox-input { max-height: 40vh; font-size: 16px; }
}


/* ════════════════════════════════════════════════════════════════════════
   Чат у стилі Telegram (світла тема)
   Свої повідомлення — світло-зелені справа, чужі — білі зліва.
   Кольори взяті з Telegram Desktop/iOS: #EFFDDE, #4FAE4E, тло #E7EBF0.
   Блок нижче йде після базових правил і навмисно їх перекриває.
   ════════════════════════════════════════════════════════════════════════ */
.inbox-messages {
  background: #E7EBF0;
  padding: 12px 12px 16px;
  gap: 2px;                      /* щільно, як у Telegram */
}

/* ── Бульбашка ───────────────────────────────────────────────────────── */
.inbox-msg-bubble {
  max-width: min(78%, 520px);
  padding: 6px 10px 6px 12px;
  border-radius: 14px;
  font-size: 15px;
  line-height: 1.32;
  border: none;
  background: #fff;
  color: #000;
  box-shadow: 0 1px 1px rgba(16, 35, 47, .08);
}
.inbox-message.out .inbox-msg-bubble {
  background: #EFFDDE;
  color: #000;
  border: none;
}

/* Хвостик: у крайнього повідомлення групи кут біля краю майже прямий */
.inbox-message.in  .inbox-msg-bubble { border-bottom-left-radius: 6px; }
.inbox-message.out .inbox-msg-bubble { border-bottom-right-radius: 6px; }

/* ── Групування: підряд від одного відправника ───────────────────────── */
/* Не останнє в групі — кути однакові, хвостика немає */
.inbox-message.in:has(+ .inbox-message.in)   .inbox-msg-bubble { border-bottom-left-radius: 14px; }
.inbox-message.out:has(+ .inbox-message.out) .inbox-msg-bubble { border-bottom-right-radius: 14px; }
/* Не перше в групі — верхній кут біля краю теж підтискаємо */
.inbox-message.in  + .inbox-message.in  .inbox-msg-bubble { border-top-left-radius: 6px; }
.inbox-message.out + .inbox-message.out .inbox-msg-bubble { border-top-right-radius: 6px; }
/* Між групами повітря більше */
.inbox-message.in  + .inbox-message.out,
.inbox-message.out + .inbox-message.in { margin-top: 8px; }

/* ── Час і галочки всередині бульбашки ───────────────────────────────── */
.inbox-msg-bubble { position: relative; }
.inbox-message.in  .inbox-msg-meta { color: #A1A6AA; }
.inbox-message.out .inbox-msg-meta { color: #4FAE4E; }
.inbox-message.out .inbox-msg-meta svg { stroke: #4FAE4E; }
/* Час — звичайний інлайновий елемент у кінці тексту. Короткі повідомлення
   тримають його в тому ж рядку, довгі — у кінці останнього, як у Telegram. */
.inbox-msg-content { display: inline; }

/* Цитата у відповіді */
.inbox-msg-reply { background: rgba(79, 174, 78, .10); border-radius: 6px; }
.inbox-message.in .inbox-msg-reply { background: rgba(0, 122, 255, .08); }
.inbox-msg-reply-bar { background: #4FAE4E; width: 2px; }
.inbox-message.in .inbox-msg-reply-bar { background: #3390EC; }
.inbox-message.out .inbox-msg-reply-text { color: #5B8C58; }

/* Роздільник дати — напівпрозора пігулка поверх тла, як у Telegram */
.inbox-sticky-date {
  background: transparent;
  backdrop-filter: none;
  border-bottom: none;
  padding: 6px 16px;
  margin-bottom: 2px;
}
.inbox-sticky-date span {
  background: rgba(0, 0, 0, .30);
  color: #fff;
  border-radius: 14px;
  padding: 4px 12px;
  font-size: 13px;
  font-weight: 500;
  box-shadow: none;
}

/* Роздільник дня між повідомленнями. До цього переписка йшла суцільною
   стрічкою: липневі й серпневі бульбашки стояли впритул, і єдиною підказкою
   була плаваюча плашка згори, яка часто показувала дату сусіда. */
.inbox-date-sep {
  display: flex;
  justify-content: center;
  margin: 14px 0 10px;
  pointer-events: none;
}
.inbox-date-sep span {
  background: rgba(0, 0, 0, .30);
  color: #fff;
  border-radius: 14px;
  padding: 4px 12px;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}

/* ── Список чатів ────────────────────────────────────────────────────── */
.inbox-chat-item { padding: 9px 14px; border-bottom: none; gap: 12px; }
.inbox-chat-item:hover { background: rgba(0, 0, 0, .04); }
.inbox-chat-item.active {
  background: #3390EC; border-left: none; padding-left: 14px;
}
.inbox-chat-item.active .inbox-chat-name,
.inbox-chat-item.active .inbox-chat-preview,
.inbox-chat-item.active .inbox-chat-time { color: #fff; }
.inbox-chat-avatar { width: 50px; height: 50px; font-size: 19px; }
.inbox-chat-name { font-size: 15px; font-weight: 500; }
.inbox-chat-item.unread .inbox-chat-name { font-weight: 600; }
.inbox-chat-preview { font-size: 14px; color: #707579; }
.inbox-unread-badge {
  background: #3390EC; border-radius: 12px; padding: 1px 7px;
  font-size: 12px; font-weight: 500; min-width: 22px; text-align: center;
}
.inbox-chat-item.active .inbox-unread-badge { background: #fff; color: #3390EC; }

/* ── Поле вводу ──────────────────────────────────────────────────────── */
/* Рамка охоплює весь рядок: вкладення, текст і кнопку надсилання.
   Раніше підсвічувався лише textarea, і поле губилось на білому тлі. */
.inbox-input-wrap {
  background: #fff;
  border-top: 1px solid #E4E9ED;
  align-items: flex-end;
  gap: 6px;
  /* Праворуч більше відступу, щоб кругла кнопка не торкалась рамки */
  padding: 12px 18px calc(12px + env(safe-area-inset-bottom, 0px));
}
.inbox-input-wrap > :is(.inbox-actions-wrap, .inbox-input, .inbox-send-btn, .inbox-mic-btn) {
  position: relative;
  z-index: 1;
}
/* Сама «коробка» — фон і рамка навколо всього рядка */
.inbox-input-wrap::before {
  content: '';
  position: absolute;
  inset: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px));
  border-radius: 22px;
  background: #F1F3F5;
  border: 1.5px solid transparent;
  transition: border-color .15s, background .15s, box-shadow .15s;
  pointer-events: none;
}
.inbox-input-wrap { position: relative; }
.inbox-input-wrap:focus-within::before {
  background: #fff;
  border-color: #3390EC;
  box-shadow: 0 0 0 3px rgba(51, 144, 236, .12);
}
/* Поле всередині коробки — без власного фону і рамки */
.inbox-input {
  border-radius: 0;
  background: transparent;
  border: none;
  font-size: 15px;
  padding: 9px 4px;
}
.inbox-input:focus { background: transparent; box-shadow: none; }
/* Кнопки всередині коробки */
.inbox-send-btn {
  background: #3390EC;
  border-radius: 50%;
  width: 38px; height: 38px;
  margin-bottom: 1px;
}
.inbox-send-btn:hover { background: #2b7fd4; }
.inbox-actions-btn, .inbox-mic-btn {
  background: transparent;
  border: none;
  color: #707579;
}
.inbox-actions-btn:hover, .inbox-mic-btn:hover { color: #3390EC; background: transparent; }

/* Ensure inbox page has full height for proper scrolling */
#page-inbox { display: flex; flex-direction: column; height: 100%; overflow: hidden; }
#page-inbox .inbox-main { flex: 1; min-height: 0; }

/* Inbox chat container layout for MessageSystem */
.inbox-chat-container { display: flex; flex: 1; min-height: 0; height: 100%; }

/* Inbox thread layout for MessageSystem */
.inbox-thread { display: flex; flex-direction: column; height: 100%; flex: 1; min-width: 0; min-height: 0; overflow: hidden; }
.inbox-thread-header { flex-shrink: 0; padding: 12px 16px; border-bottom: 1px solid var(--border); background: var(--bg-card-solid); display: flex; align-items: center; gap: 12px; }
.inbox-thread-info { flex: 1; min-width: 0; }
.inbox-thread-info h3 { margin: 0; font-size: 16px; font-weight: 600; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inbox-thread-meta { margin-top: 2px; font-size: 12px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inbox-back-btn { background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 8px; border-radius: 6px; display: none; align-items: center; justify-content: center; }
.inbox-back-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
.inbox-input-area { flex-shrink: 0; }

/* Sticky date header like Telegram */
.inbox-sticky-date {
  position: sticky;
  top: 60px; /* Below the inbox-thread-header */
  z-index: 100;
  background: rgba(248, 250, 252, 0.95);
  backdrop-filter: blur(8px);
  padding: 8px 16px;
  text-align: center;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 8px;
  transition: opacity 0.2s ease;
}

.inbox-sticky-date span {
  background: var(--bg-card-solid);
  padding: 4px 12px;
  border-radius: 12px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Contact panel - shown on desktop, hidden on mobile */
.inbox-contact-panel { flex-shrink: 0; width: 300px; }

/* Desktop: show contact panel by default as part of grid layout */
@media (min-width: 1025px) {
  .inbox-contact-panel {
    display: block !important;
    margin-right: 12px;
  }

  /* Hide close button on desktop - panel should stay visible as part of layout */
  .inbox-cp-header button[title="Закрити"] {
    display: none;
  }
}

@media (max-width: 768px) {
  .inbox-contact-panel {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    z-index: 500;
    box-shadow: none;
    transform: translateX(100%);
    transition: transform 0.28s ease;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
  }
  .inbox-contact-panel.cp-open {
    display: block;
    transform: translateX(0);
  }
}

/* Reaction badges under message bubble (Viber 👍 / ❤ from customers) */
.inbox-msg-reactions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.inbox-msg-reaction { display: inline-flex; align-items: center; gap: 2px; font-size: 12px; padding: 1px 6px; background: rgba(15,23,42,0.06); border-radius: 10px; line-height: 18px; }
.inbox-message.out .inbox-msg-reaction { background: rgba(255,255,255,0.22); }

/* Mic button + recording bar */
.inbox-mic-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 8px; cursor: pointer; color: var(--text-muted, #64748b); border: none; background: none; transition: all 0.15s; flex-shrink: 0; }
.inbox-mic-btn:hover { color: var(--accent, #A08C64); background: rgba(160,140,100,0.10); }
.inbox-mic-btn.recording { color: #dc2626; background: rgba(220,38,38,0.10); }
.inbox-record-bar { display: none; align-items: center; gap: 10px; padding: 8px 16px; border-top: 1px solid var(--border, #e2e8f0); background: var(--bg-card-solid, #fff); }
.inbox-rec-dot { width: 10px; height: 10px; border-radius: 50%; background: #dc2626; animation: inboxRecPulse 1s ease infinite; flex-shrink: 0; }
@keyframes inboxRecPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.inbox-rec-time { font-size: 13px; font-weight: 600; color: var(--text-primary, #1e293b); font-variant-numeric: tabular-nums; min-width: 36px; }
.inbox-rec-hint { font-size: 12px; color: var(--text-muted, #94a3b8); flex: 1; }
.inbox-rec-cancel, .inbox-rec-send { width: 32px; height: 32px; border-radius: 50%; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.inbox-rec-cancel { background: rgba(15,23,42,0.06); color: var(--text-muted, #64748b); }
.inbox-rec-cancel:hover { background: rgba(220,38,38,0.10); color: #dc2626; }
.inbox-rec-send { background: var(--accent, #A08C64); color: #fff; }
.inbox-rec-send:hover { filter: brightness(1.1); }

@media (max-width: 768px) {
  /* Fixed positioning breaks out of the document flow entirely so the
     height chain (body → main-content → page-inbox → inbox-layout) no
     longer matters.  The layout is pinned to the viewport, which means
     the flex/grid children get a real constrained height and the header +
     input area stay sticky without any scrolling hacks. */
  .inbox-layout {
    position: fixed;
    /* Низ підіймаємо на висоту клавіатури (--kb-inset рахує JS через
       visualViewport). Без цього на iOS layout-viewport не стискається,
       і поле вводу з панеллю відповіді лишаються під клавіатурою. */
    /* Розкладка чатів на мобільному тримається саме на цьому правилі. inset
       зʼявився в Chrome 87 — без запасу на старішому Android список і розмова
       просто злипались. */
    top: calc(56px + env(safe-area-inset-top, 0px));
    right: 0;
    bottom: var(--kb-inset, 0px);
    left: 0;
    inset: calc(56px + env(safe-area-inset-top, 0px)) 0 var(--kb-inset, 0px) 0;
    transition: bottom .18s ease;
    height: auto;        /* override the calc(100vh - 56px) desktop value */
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    overflow: visible;   /* must NOT clip children — panel is positioned inside here */
    z-index: 100;        /* above normal page content */
  }
  /* Clip the actual scrollable areas, not the layout root */
  .inbox-thread, .inbox-main, .inbox-sidebar { overflow: hidden; }
  /* inbox-main must fill the fixed grid cell */
  .inbox-main { display: none; height: 100%; } /* hidden until openChat() */
  .inbox-back-btn { display: flex !important; }
  /* Contact panel becomes a full-screen slide-in overlay on mobile.
     Hidden by default; toggleContactPanel() flips display via JS — no
     !important so the inline override works. */
  .inbox-contact-panel {
    display: none;
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;   /* запас: inset зʼявився в Chrome 87 */
  inset: 0;
    z-index: 950;
    background: var(--bg-card-solid, #fff);
    overflow-y: auto;
    padding: 14px;
    width: auto;
    border-left: none;
  }
  /* Header gets sticky on mobile so the back button stays accessible
     while scrolling long threads. */
  .inbox-conv-header { position: sticky; top: 0; z-index: 5; }
  /* Also make the thread-header (used in MessageSystem rendering) sticky */
  .inbox-thread-header { position: sticky; top: 0; z-index: 5; flex-shrink: 0; }
  /* Ensure input area never shrinks — stays at bottom */
  .inbox-input-area { flex-shrink: 0; position: relative; z-index: 4; }

  /* Покращення поля введення повідомлень на мобільному */
  body #page-inbox.active .inbox-input-wrap .inbox-input {
    font-size: 16px !important; /* Більший шрифт для легшого читання та введення */
    /* Поле сидить усередині рамки .inbox-input-wrap::before, тож власні
       великі відступи і 44px мінімуму зміщували текст і ламали вигляд. */
    padding: 9px 4px !important;
    min-height: 22px !important; /* висота рядка; тач-таргет дає сама рамка */
    /* Було 120px !important — це перебивало і базове правило, і висоту, яку
       рахує JS. Поле візуально обрізалось до 120px, текст виходив за межі,
       а прокрутка не вмикалась, бо скрипт вважав що все вмістилось. */
    max-height: 40vh !important;
    line-height: 1.4 !important; /* Кращий міжрядковий інтервал */
    box-sizing: border-box !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  body #page-inbox.active .inbox-input-wrap {
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px)) !important;
  }

  body #page-inbox.active .inbox-send-btn {
    width: 44px !important; /* Більша кнопка відправлення */
    height: 44px !important;
    min-height: 44px !important;
  }

  /* Покращення лайтбоксу для фото на мобільному */
  .inbox-lightbox-overlay {
    padding: 12px !important; /* Менше відступів на мобільному */
    z-index: 15001 !important; /* Максимальний z-index для перекриття всього */
  }

  .inbox-lightbox-content img,
  .inbox-lightbox-content video {
    max-width: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
  }

  .inbox-lightbox-close {
    width: 44px !important; /* Більша кнопка закриття на мобільному */
    height: 44px !important;
    /* Відступ від системної панелі: без нього хрестик тонув під «чубчиком». */
    top: calc(12px + env(safe-area-inset-top, 0px)) !important;
    right: 12px !important;
    background: rgba(0,0,0,0.6) !important; /* Темніший фон для кращої видимості */
    z-index: 2;
  }



  .inbox-lightbox-download {
    padding: 12px 16px !important; /* Більша кнопка завантаження */
    font-size: 14px !important;
  }

  .inbox-lightbox-nav {
    width: 56px !important; /* Більші кнопки навігації на мобільному */
    height: 56px !important;
    background: rgba(0,0,0,0.8) !important; /* Темніший фон для кращої видимості */
  }

  .inbox-lightbox-prev {
    left: 12px !important;
  }

  .inbox-lightbox-next {
    right: 12px !important;
  }

  .inbox-lightbox-info {
    flex-direction: column !important;
    gap: 8px !important;
    text-align: center !important;
  }

  .inbox-lightbox-caption {
    font-size: 16px !important;
    max-width: 100% !important;
  }

  /* === INBOX MOBILE TOUCH FIXES === */

  /* Кнопки дій більше немає: відповідь — свайпом убік, решта — затисканням. */
  .inbox-message.long-pressed .inbox-msg-bubble {
    box-shadow: 0 0 0 2px var(--accent, #A08C64);
  }

  /* 3. Wider bubbles on narrow screens (70% is too tight on 375px) */
  .inbox-msg-bubble {
    max-width: 82% !important;
  }

  /* 4. Voice player: shrink min-width so it fits inside narrower bubbles */
  .inbox-voice-player {
    min-width: 160px !important;
  }
}
@media (min-width: 769px) and (max-width: 1024px) {
  .inbox-layout { grid-template-columns: 280px 1fr; }
  .inbox-contact-panel {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 340px;
    z-index: 500;
    box-shadow: -2px 0 8px rgba(0,0,0,0.15);
    transform: translateX(100%);
    transition: transform 0.28s ease;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
  }
  .inbox-contact-panel.cp-open {
    display: block;
    transform: translateX(0);
  }
}

#sidebar-inbox-badge { background:#dc2626; color:white; border-radius:10px; padding:0 6px; font-size: 11px; font-weight:700; margin-left:6px; display:none; vertical-align:middle; }

/* ===== E-chat channels (Settings → Інтеграції → Комунікації → E-chat) ===== */
.echat-channels-section { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); }
.echat-channels-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.echat-add-channel-btn { padding: 4px 12px; border-radius: 6px; border: 1px solid var(--accent); background: none; color: var(--accent); cursor: pointer; font-size: 12px; font-weight: 500; }
.echat-add-channel-btn:hover { background: var(--accent); color: white; }

.echat-channel-item { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid #f1f5f9; }
.echat-channel-item:last-child { border-bottom: none; }
.echat-channel-icon { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; flex-shrink: 0; }
.echat-channel-info { flex: 1; min-width: 0; }
.echat-channel-name { font-size: 13px; font-weight: 500; color: var(--text-primary); }
.echat-channel-phone { font-size: 11px; color: #94a3b8; }

.echat-channel-form { min-width: 360px; max-width: 520px; }
.echat-channel-tabs { display: flex; gap: 4px; border-bottom: 2px solid var(--border); margin-bottom: 16px; }
.echat-tab { padding: 8px 16px; border: none; background: none; cursor: pointer; font-size: 13px; color: #64748b; border-bottom: 2px solid transparent; margin-bottom: -2px; font-weight: 500; }
.echat-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.echat-field { margin-bottom: 14px; }
.echat-field label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 6px; color: #64748b; }

.echat-auth-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 24px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-card-solid); cursor: pointer; font-size: 14px; color: var(--text-primary); font-weight: 500; }
.echat-auth-btn:hover { background: var(--bg-primary); }
.echat-auth-btn:disabled { opacity: .6; cursor: not-allowed; }

/* ===== Google Ads Campaign Management page ===== */
.ac-page { padding: 18px 24px 40px; max-width: 1600px; margin: 0 auto; }
.ac-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.ac-title { font-size: 22px; font-weight: 700; margin: 0 0 4px; color: var(--text-primary, #1e293b); }
.ac-sub { font-size: 13px; color: var(--text-muted, #64748b); }
.ac-header-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.ac-input { padding: 8px 12px; border: 1px solid var(--border, #e2e8f0); border-radius: 8px; font-size: 13px; background: var(--bg-card-solid, #fff); color: var(--text-primary, #1e293b); cursor: pointer; }
.ac-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 8px; border: 1px solid var(--border, #e2e8f0); background: var(--bg-card-solid, #fff); color: var(--text-primary, #1e293b); font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.15s; }
.ac-btn:hover { background: var(--bg, #f8fafc); }
.ac-btn-primary { background: var(--accent, #A08C64); color: #fff; border-color: var(--accent, #A08C64); }
.ac-btn-primary:hover { filter: brightness(1.1); }
.ac-btn-ghost { background: none; border: 1px solid var(--border, #e2e8f0); }
.ac-loading, .ac-empty, .ac-error { padding: 40px; text-align: center; color: var(--text-muted, #64748b); font-size: 14px; background: var(--bg-card-solid, #fff); border-radius: 10px; border: 1px solid var(--border, #e2e8f0); }
.ac-error { color: #dc2626; }

.ac-table { background: var(--bg-card-solid, #fff); border: 1px solid var(--border, #e2e8f0); border-radius: 10px; overflow: hidden; }
.ac-thead { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 0.7fr 0.8fr 0.7fr 1fr 1.2fr; gap: 10px; padding: 10px 14px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted, #64748b); background: var(--bg, #f8fafc); border-bottom: 1px solid var(--border, #e2e8f0); }
.ac-row { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 0.7fr 0.8fr 0.7fr 1fr 1.2fr; gap: 10px; padding: 12px 14px; align-items: center; font-size: 13px; border-bottom: 1px solid var(--border, #e2e8f0); transition: background 0.12s; }
.ac-row:hover { background: rgba(160,140,100,0.04); }
.ac-row:last-child { border-bottom: none; }
.ac-row .num { font-variant-numeric: tabular-nums; }
.ac-cname { min-width: 0; }
.ac-cname b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-primary, #1e293b); }
.ac-cid { font-size: 11px; color: var(--text-muted, #94a3b8); }

.ac-badge { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 10px; text-transform: uppercase; letter-spacing: 0.02em; }
.ac-badge-green { background: rgba(22,163,74,0.12); color: #15803d; }
.ac-badge-amber { background: rgba(202,138,4,0.14); color: #a16207; }
.ac-badge-red   { background: rgba(220,38,38,0.12); color: #b91c1c; }
.ac-badge-gray  { background: rgba(100,116,139,0.12); color: #475569; }

.ac-actions { display: flex; gap: 4px; justify-content: flex-end; }
.ac-act { width: 28px; height: 28px; border-radius: 6px; border: 1px solid var(--border, #e2e8f0); background: var(--bg-card-solid, #fff); color: var(--text-muted, #64748b); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; transition: all 0.12s; }
.ac-act:hover { background: var(--accent, #A08C64); color: #fff; border-color: var(--accent, #A08C64); }
.ac-act-danger:hover { background: #dc2626; border-color: #dc2626; color: #fff; }

.ac-form { padding: 6px 4px 0; max-width: 520px; }
.ac-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ac-form-grid label { display: block; font-size: 11px; font-weight: 600; color: var(--text-muted, #64748b); }
.ac-form-grid label input, .ac-form-grid label select { width: 100%; margin-top: 4px; padding: 9px 11px; border: 1px solid var(--border, #e2e8f0); border-radius: 8px; font-size: 13px; box-sizing: border-box; }
.ac-hint { font-size: 12px; color: var(--text-muted, #94a3b8); margin: 12px 0 0; }
.ac-form-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }

@media (max-width: 900px) {
  .ac-thead, .ac-row { grid-template-columns: 1.6fr 0.8fr 0.7fr 0.7fr 0.6fr 1fr; }
  .ac-thead > :nth-child(5), .ac-row > :nth-child(5),
  .ac-thead > :nth-child(6), .ac-row > :nth-child(6),
  .ac-thead > :nth-child(7), .ac-row > :nth-child(7) { display: none; }
  .ac-form-grid { grid-template-columns: 1fr; }
}

/* Ads campaigns — drilldown (ad groups) */
.ac-link { color: var(--accent, #A08C64); text-decoration: none; cursor: pointer; }
.ac-link:hover { text-decoration: underline; }
.ac-drill { background: var(--bg-card-solid, #fff); border: 1px solid var(--border, #e2e8f0); border-radius: 12px; padding: 24px; min-height: 600px; }
.ac-drill-top { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; flex-wrap: wrap; }
.ac-drill-info { flex: 1; min-width: 0; }
.ac-drill-name { font-size: 18px; font-weight: 700; color: var(--text-primary, #1e293b); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-drill-sub { font-size: 12px; color: var(--text-muted, #64748b); margin-top: 2px; }
.ac-pmax-note { font-size: 12px; color: #a16207; background: rgba(202,138,4,0.10); padding: 6px 10px; border-radius: 6px; }
.ac-adgroups { }
.ac-adg-table .ac-thead, .ac-adg-table .ac-row { grid-template-columns: 2fr 1fr 1fr 1fr 0.7fr 0.7fr 0.8fr 1fr 1.2fr; }
@media (max-width: 900px) {
  .ac-adg-table .ac-thead, .ac-adg-table .ac-row { grid-template-columns: 1.6fr 0.8fr 0.8fr 1fr 1fr; }
  .ac-adg-table .ac-thead > :nth-child(5), .ac-adg-table .ac-row > :nth-child(5),
  .ac-adg-table .ac-thead > :nth-child(6), .ac-adg-table .ac-row > :nth-child(6),
  .ac-adg-table .ac-thead > :nth-child(7), .ac-adg-table .ac-row > :nth-child(7) { display: none; }
}

/* Level-2 drilldown: ads + keywords side by side */
.ac-l2-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 1100px) { .ac-l2-grid { grid-template-columns: 1fr; } }
.ac-l2-section { background: var(--bg-card-solid, #fff); border: 1px solid var(--border, #e2e8f0); border-radius: 10px; padding: 14px; }
.ac-l2-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.ac-l2-head h3 { margin: 0; font-size: 14px; font-weight: 700; color: var(--text-primary, #1e293b); }
.ac-l2-actions { display: flex; gap: 6px; }
.ac-muted { color: var(--text-muted, #64748b); }

/* Ads list cards */
.ac-ads-box { display: flex; flex-direction: column; gap: 10px; }
.ac-ad-card { border: 1px solid var(--border, #e2e8f0); border-radius: 8px; padding: 10px 12px; position: relative; background: #fafbfc; }
.ac-ad-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.ac-ad-title { font-size: 13px; font-weight: 600; color: #1a73e8; line-height: 1.3; overflow: hidden; }
.ac-ad-desc { font-size: 12px; color: var(--text-secondary, #4b5563); line-height: 1.4; margin-bottom: 4px; }
.ac-ad-meta { font-size: 11px; display: flex; gap: 6px; flex-wrap: wrap; }
.ac-ad-actions { position: absolute; top: 8px; right: 8px; display: flex; gap: 4px; opacity: 0; transition: opacity .15s; }
.ac-ad-card:hover .ac-ad-actions { opacity: 1; }

/* Keywords */
.ac-kw-box { display: flex; flex-direction: column; gap: 14px; }
.ac-kw-group { }
.ac-kw-title { font-size: 12px; font-weight: 600; color: var(--text-muted, #64748b); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px; }
.ac-kw-list { display: flex; flex-direction: column; gap: 4px; }
.ac-kw-item { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border: 1px solid var(--border, #e2e8f0); border-radius: 6px; background: #fafbfc; }
.ac-kw-item.ac-kw-neg { background: #fef2f2; border-color: #fecaca; }
.ac-kw-text { flex: 1; font-size: 13px; display: flex; align-items: center; gap: 6px; min-width: 0; }
.ac-kw-text .ac-kw-match { color: var(--text-muted, #64748b); font-family: monospace; font-size: 11px; }
.ac-kw-badge { font-size: 11px; font-weight: 700; padding: 1px 5px; border-radius: 3px; background: #e2e8f0; color: #475569; }
.ac-kw-metrics { display: flex; gap: 10px; font-size: 11px; color: var(--text-muted, #64748b); }
.ac-kw-item .ac-act { padding: 2px 6px; }

/* Campaign drill tabs */
.ac-tabs { display: flex; align-items: center; gap: 6px; border-bottom: 1px solid var(--border, #e2e8f0); margin-bottom: 14px; padding-bottom: 0; }
.ac-tab { background: none; border: none; padding: 8px 14px; font-size: 13px; font-weight: 600; color: var(--text-muted, #64748b); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.ac-tab:hover { color: var(--text-primary, #1e293b); }
.ac-tab.is-active { color: #1a73e8; border-bottom-color: #1a73e8; }
.ac-tabs-spacer { flex: 1; }
.ac-tab-action { margin-bottom: 6px; }

/* Criteria (targeting) grid */
.ac-crit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 900px) { .ac-crit-grid { grid-template-columns: 1fr; } }
.ac-crit-list { display: flex; flex-direction: column; gap: 4px; margin-bottom: 6px; }
.ac-crit-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 10px; border: 1px solid var(--border, #e2e8f0); border-radius: 6px; background: #fafbfc; font-size: 13px; }
.ac-crit-item.ac-kw-neg { background: #fef2f2; border-color: #fecaca; }
.ac-crit-name { display: flex; align-items: center; gap: 8px; }
.ac-bid-mod { font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 3px; background: #dbeafe; color: #1d4ed8; }

/* Geo picker */
.ac-geo-results { max-height: 240px; overflow-y: auto; border: 1px solid var(--border, #e2e8f0); border-radius: 6px; margin-bottom: 10px; }
.ac-geo-results:empty { display: none; }
.ac-geo-row { padding: 8px 12px; cursor: pointer; border-bottom: 1px solid var(--border, #e2e8f0); font-size: 13px; }
.ac-geo-row:last-child { border-bottom: 0; }
.ac-geo-row:hover { background: #eff6ff; }
.ac-geo-picked-title { font-size: 12px; font-weight: 600; color: var(--text-muted, #64748b); margin: 8px 0 4px; }
.ac-geo-picked-row { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border: 1px solid var(--border, #e2e8f0); border-radius: 6px; background: #f8fafc; font-size: 13px; margin-bottom: 4px; }
.ac-geo-picked-row > span:first-child { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-inline { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--text-secondary, #4b5563); white-space: nowrap; }

/* Language chips */
.ac-lang-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 6px; }
.ac-lang-chip { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border: 1px solid var(--border, #e2e8f0); border-radius: 6px; font-size: 13px; cursor: pointer; background: #fafbfc; }
.ac-lang-chip:has(input:checked) { background: #eff6ff; border-color: #93c5fd; }

/* Schedule grid */
.ac-sched-grid { display: flex; flex-direction: column; gap: 4px; }
.ac-sched-head { display: grid; grid-template-columns: 1.4fr 0.8fr 0.8fr 1fr; gap: 6px; font-size: 11px; font-weight: 600; color: var(--text-muted, #64748b); text-transform: uppercase; letter-spacing: .04em; padding: 0 8px; }
.ac-sched-row { display: grid; grid-template-columns: 1.4fr 0.8fr 0.8fr 1fr; gap: 6px; align-items: center; padding: 4px 8px; border: 1px solid var(--border, #e2e8f0); border-radius: 6px; }
.ac-sched-row input[type=number] { width: 100%; padding: 5px 6px; border: 1px solid var(--border, #e2e8f0); border-radius: 4px; font-size: 13px; }
.ac-sched-row label { display: flex; align-items: center; gap: 6px; font-size: 13px; }

/* Ads inline-SVG icons — align with text baseline, gentle muted color
   unless overridden by parent (buttons / badges inherit accent color). */
.ac-ic { display: inline-block; vertical-align: -2px; flex-shrink: 0; margin-right: 4px; opacity: 0.85; }
.ac-btn .ac-ic, .ac-tab .ac-ic, h3 .ac-ic, h4 .ac-ic { opacity: 1; }
.ac-act .ac-ic { margin-right: 0; opacity: 1; }
.ac-tile-label .ac-ic { vertical-align: -2px; margin-right: 4px; }

/* Campaigns table — extra leading column for bulk-select checkbox */
.ac-camp-table .ac-thead, .ac-camp-table .ac-row { grid-template-columns: 36px 2fr 1fr 1fr 1fr 0.7fr 0.8fr 0.8fr 0.7fr 1fr 1.2fr; }
.ac-row.is-selected { background: rgba(26,115,232,0.06); }
.ac-row-cb, #ac-sel-all { width: 16px; height: 16px; cursor: pointer; }

/* Bulk action bar */
.ac-bulk-bar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: #1e293b; color: #fff; border-radius: 8px; margin-bottom: 10px; box-shadow: 0 4px 12px rgba(0,0,0,.15); }
.ac-bulk-count { font-size: 13px; }
.ac-bulk-spacer { flex: 1; }
.ac-bulk-bar .ac-btn-ghost { background: rgba(255,255,255,0.10); color: #fff; border: 1px solid rgba(255,255,255,0.20); }
.ac-bulk-bar .ac-btn-ghost:hover { background: rgba(255,255,255,0.20); }
.ac-bulk-bar .ac-bulk-danger { color: #fca5a5; }
.ac-bulk-bar .ac-bulk-danger:hover { background: #b91c1c; color: #fff; border-color: #b91c1c; }
@media (max-width: 900px) {
  .ac-camp-table .ac-thead, .ac-camp-table .ac-row { grid-template-columns: 32px 1.6fr 0.8fr 0.7fr 0.7fr 0.6fr 0.6fr 1fr; }
  .ac-camp-table .ac-thead > :nth-child(4), .ac-camp-table .ac-row > :nth-child(4) { display: none; } /* Hide budget column */
}

/* Competitive insights (Impression Share) */
.ac-comp-accts { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.ac-comp-summary { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.ac-comp-list { display: flex; flex-direction: column; gap: 10px; }
.ac-comp-card { background: var(--bg-card-solid, #fff); border: 1px solid var(--border, #e2e8f0); border-radius: 10px; padding: 14px 16px; border-left-width: 4px; }
.ac-comp-card.ac-comp-WINNING     { border-left-color: #16a34a; }
.ac-comp-card.ac-comp-RANK_LOSS   { border-left-color: #dc2626; }
.ac-comp-card.ac-comp-BUDGET_LOSS { border-left-color: #f59e0b; background: #fffbeb; }
.ac-comp-card.ac-comp-MIXED       { border-left-color: #94a3b8; }
.ac-comp-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.ac-comp-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 900px) { .ac-comp-grid { grid-template-columns: repeat(2, 1fr); } }
.ac-comp-metric { display: flex; flex-direction: column; gap: 4px; }
.ac-comp-label { font-size: 11px; font-weight: 600; color: var(--text-muted, #64748b); text-transform: uppercase; letter-spacing: .03em; }
.ac-comp-value { font-size: 13px; font-variant-numeric: tabular-nums; }
.ac-comp-value b { font-size: 14px; }
.ac-comp-action { margin-top: 10px; font-size: 12px; }
.ac-comp-hint { color: #1e40af; font-weight: 600; }
.ac-comp-card.ac-comp-BUDGET_LOSS .ac-comp-hint { color: #92400e; }
.ac-comp-card.ac-comp-RANK_LOSS .ac-comp-hint   { color: #991b1b; }

/* Generic progress bar */
.ac-bar { width: 100%; height: 6px; background: #e2e8f0; border-radius: 3px; overflow: hidden; }
.ac-bar-fill { height: 100%; transition: width .25s; }

/* A/B Experiments */
.ac-exp-table .ac-thead, .ac-exp-table .ac-row { grid-template-columns: 2fr 0.8fr 1.4fr 1fr 1fr 1.2fr; }
.ac-exp-lifecycle { display: flex; gap: 6px; flex-shrink: 0; }
.ac-exp-compare {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 0;
  background: var(--bg-card-solid, #fff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 10px;
  overflow: hidden;
}
.ac-exp-arm { padding: 14px 16px; border-bottom: 1px solid var(--border, #e2e8f0); background: var(--bg, #f8fafc); }
.ac-exp-arm:first-of-type { grid-column: 1 / span 1; visibility: hidden; }
.ac-exp-arm-title { font-size: 14px; font-weight: 700; color: var(--text-primary, #1e293b); }
.ac-exp-arm-meta { font-size: 12px; color: var(--text-muted, #64748b); margin-top: 2px; }
.ac-exp-control { border-right: 2px solid #cbd5e1; }
.ac-exp-trial { background: #eff6ff; }
.ac-exp-row-label { padding: 10px 16px; border-bottom: 1px solid var(--border, #e2e8f0); font-size: 12px; font-weight: 600; color: var(--text-muted, #64748b); text-transform: uppercase; letter-spacing: .04em; background: var(--bg, #f8fafc); }
.ac-exp-cell { padding: 10px 16px; border-bottom: 1px solid var(--border, #e2e8f0); font-size: 14px; font-variant-numeric: tabular-nums; }
.ac-exp-cell:nth-of-type(3n + 2) { border-right: 2px solid #cbd5e1; }
.ac-exp-cell .is-pos { color: #16a34a; font-weight: 600; }
.ac-exp-cell .is-neg { color: #dc2626; font-weight: 600; }

/* Anomaly alerts */
.ac-anom-list { display: flex; flex-direction: column; gap: 6px; }
.ac-anom-item { display: flex; align-items: flex-start; gap: 10px; padding: 8px 12px; border-radius: 8px; background: var(--bg-card-solid, #fff); border: 1px solid var(--border, #e2e8f0); font-size: 13px; }
.ac-anom-item.ac-anom-high   { background: #fef2f2; border-color: #fecaca; }
.ac-anom-item.ac-anom-medium { background: #fffbeb; border-color: #fde68a; }
.ac-anom-body { flex: 1; min-width: 0; }

/* Audit log */
.ac-audit-list { display: flex; flex-direction: column; gap: 6px; }
.ac-audit-item { background: var(--bg-card-solid, #fff); border: 1px solid var(--border, #e2e8f0); border-radius: 8px; padding: 10px 12px; }
.ac-audit-item.is-err { background: #fef2f2; border-color: #fecaca; }
.ac-audit-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12px; }
.ac-audit-time { color: var(--text-muted, #64748b); white-space: nowrap; min-width: 80px; }
.ac-audit-user { font-weight: 600; }
.ac-audit-rtype { color: var(--text-muted, #64748b); font-family: monospace; }
.ac-audit-rn { font-family: monospace; font-size: 11px; color: var(--text-muted, #64748b); margin-top: 4px; word-break: break-all; }
.ac-audit-details { font-size: 12px; margin-top: 4px; color: var(--text-secondary, #4b5563); }

/* Sortable column headers */
.ac-thead .ac-sortable { cursor: pointer; user-select: none; display: flex; align-items: center; gap: 4px; transition: color .12s; }
.ac-thead .ac-sortable:hover { color: var(--text-primary, #1e293b); }
.ac-thead .ac-sortable.is-active { color: #1a73e8; }
.ac-sort-arrow { font-size: 11px; opacity: 0.7; min-width: 8px; }
.ac-sortable.is-active .ac-sort-arrow { opacity: 1; }

/* Dashboard */
.ac-dash-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin-bottom: 20px; }
.ac-tile { background: var(--bg-card-solid, #fff); border: 1px solid var(--border, #e2e8f0); border-radius: 10px; padding: 14px 16px; }
.ac-tile-label { font-size: 11px; font-weight: 600; color: var(--text-muted, #64748b); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px; }
.ac-tile-value { font-size: 24px; font-weight: 700; color: var(--text-primary, #1e293b); }
.ac-dash-section { margin-bottom: 20px; }
.ac-dash-section h3 { font-size: 14px; font-weight: 700; margin: 0 0 8px; color: var(--text-primary, #1e293b); }
.ac-dash-acct-table .ac-thead, .ac-dash-acct-table .ac-row { grid-template-columns: 2fr 1.2fr 0.9fr 0.9fr 1.2fr 0.7fr; }
.ac-dash-chan-table .ac-thead, .ac-dash-chan-table .ac-row { grid-template-columns: 1.8fr 1fr 0.9fr 0.9fr 1.2fr; }
.ac-dash-top-table .ac-thead, .ac-dash-top-table .ac-row { grid-template-columns: 2.2fr 1.1fr 0.9fr 0.9fr 0.7fr; }
.ac-row-error { background: #fef2f2; }
@media (max-width: 900px) {
  .ac-dash-acct-table .ac-thead, .ac-dash-acct-table .ac-row { grid-template-columns: 1.6fr 1fr 0.8fr 0.6fr; }
  .ac-dash-acct-table .ac-thead > :nth-child(5), .ac-dash-acct-table .ac-row > :nth-child(5),
  .ac-dash-acct-table .ac-thead > :nth-child(3), .ac-dash-acct-table .ac-row > :nth-child(3) { display: none; }
}

/* Recommendations cards */
.ac-rec-list { display: flex; flex-direction: column; gap: 10px; }
.ac-rec-card { background: var(--bg-card-solid, #fff); border: 1px solid var(--border, #e2e8f0); border-radius: 10px; padding: 14px 16px; position: relative; }
.ac-rec-card.is-positive { border-left: 3px solid #16a34a; }
.ac-rec-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ac-rec-title { flex: 1; min-width: 0; }
.ac-rec-scope { font-size: 12px; margin-top: 3px; }
.ac-rec-actions { display: flex; gap: 6px; flex-shrink: 0; }
.ac-rec-detail { margin-top: 10px; padding: 8px 10px; background: #f8fafc; border-radius: 6px; font-size: 13px; }
.ac-rec-impact { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; }
.ac-rec-metric { font-size: 12px; font-weight: 700; padding: 3px 8px; border-radius: 4px; background: #e2e8f0; color: #475569; }
.ac-rec-metric.is-pos { background: #dcfce7; color: #166534; }
.ac-rec-metric.is-neg { background: #fee2e2; color: #991b1b; }
.ac-rec-metric.is-warn { background: #fef3c7; color: #92400e; }

/* Headline (marginal ROAS) — single big number in the header row */
.ac-rec-headline { font-size: 14px; font-weight: 800; padding: 4px 10px; border-radius: 6px; white-space: nowrap; align-self: center; }
.ac-rec-headline.is-pos  { background: #dcfce7; color: #14532d; }
.ac-rec-headline.is-warn { background: #fef3c7; color: #78350f; }
.ac-rec-headline.is-neg  { background: #fee2e2; color: #7f1d1d; }

/* Details disclosure */
.ac-rec-details { margin-top: 12px; border-top: 1px solid var(--border, #e2e8f0); padding-top: 10px; }
.ac-rec-details > summary { cursor: pointer; font-size: 12px; font-weight: 700; color: var(--text-muted, #64748b); list-style: none; padding: 4px 0; user-select: none; }
.ac-rec-details > summary::-webkit-details-marker { display: none; }
.ac-rec-details > summary::before { content: '▸ '; transition: transform .15s; display: inline-block; margin-right: 4px; }
.ac-rec-details[open] > summary::before { content: '▾ '; }
.ac-rec-details[open] > summary { color: var(--text-primary, #1e293b); margin-bottom: 8px; }
.ac-rec-section { margin: 10px 0; font-size: 13px; line-height: 1.5; color: var(--text-secondary, #475569); }
.ac-rec-section-h { font-size: 11px; font-weight: 700; color: var(--text-muted, #64748b); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px; }
.ac-rec-disclaimer { margin-top: 8px; font-size: 11px; color: var(--text-muted, #94a3b8); font-style: italic; }
.ac-rec-risks ul { margin: 4px 0 0 18px; padding: 0; }
.ac-rec-risks li { font-size: 12px; color: #b45309; margin-bottom: 2px; }

/* Scenario grid */
.ac-rec-scenarios { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 6px; }
@media (max-width: 700px) { .ac-rec-scenarios { grid-template-columns: 1fr; } }
.ac-rec-sc { padding: 10px 12px; border-radius: 8px; border: 1px solid var(--border, #e2e8f0); }
.ac-rec-sc-cons { background: #f8fafc; }
.ac-rec-sc-base { background: #eff6ff; border-color: #bfdbfe; }
.ac-rec-sc-opt  { background: #f0fdf4; border-color: #bbf7d0; }
.ac-rec-sc-label { font-size: 11px; font-weight: 700; color: var(--text-muted, #64748b); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px; }
.ac-rec-sc-row { display: flex; justify-content: space-between; font-size: 12px; padding: 2px 0; }
.ac-rec-sc-row span { color: var(--text-muted, #64748b); }
.ac-rec-sc-row b { font-variant-numeric: tabular-nums; }
.ac-rec-sc-roas { border-top: 1px solid rgba(0,0,0,0.06); margin-top: 4px; padding-top: 4px; }
.ac-rec-sc-roas b { font-size: 14px; }

/* Period picker */
.ac-period-btn { white-space: nowrap; }
.ac-period-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 14px; }
.ac-period-opt { padding: 8px 12px; border: 1px solid var(--border, #e2e8f0); border-radius: 6px; background: #fff; font-size: 13px; cursor: pointer; text-align: center; transition: .15s; }
.ac-period-opt:hover { background: #f1f5f9; }
.ac-period-opt.is-active { background: #1a73e8; color: #fff; border-color: #1a73e8; }
.ac-period-custom { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; align-items: end; padding-top: 12px; border-top: 1px solid var(--border, #e2e8f0); }
.ac-period-custom label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--text-muted, #64748b); }
.ac-period-custom input[type=date] { padding: 7px 10px; border: 1px solid var(--border, #e2e8f0); border-radius: 6px; font-size: 13px; }

/* Conversions table */
.ac-conv-header { margin-bottom: 14px; }
.ac-conv-header h3 { margin: 0 0 4px; font-size: 16px; }
.ac-conv-table .ac-thead, .ac-conv-table .ac-row {
  grid-template-columns: 2fr 1.2fr 1.2fr 0.9fr 0.7fr 0.7fr 0.9fr 0.5fr;
}
@media (max-width: 900px) {
  .ac-conv-table .ac-thead, .ac-conv-table .ac-row { grid-template-columns: 1.6fr 0.8fr 0.7fr 0.6fr 0.5fr; }
  .ac-conv-table .ac-thead > :nth-child(2), .ac-conv-table .ac-row > :nth-child(2),
  .ac-conv-table .ac-thead > :nth-child(3), .ac-conv-table .ac-row > :nth-child(3),
  .ac-conv-table .ac-thead > :nth-child(4), .ac-conv-table .ac-row > :nth-child(4) { display: none; }
}

/* iOS-style toggle switch */
.ac-switch { position: relative; display: inline-block; width: 38px; height: 22px; }
.ac-switch input { opacity: 0; width: 0; height: 0; }
.ac-switch span { position: absolute; cursor: pointer; top: 0; right: 0; bottom: 0; left: 0;   /* запас: inset зʼявився в Chrome 87 */
  inset: 0; background: #cbd5e1; transition: .2s; border-radius: 22px; }
.ac-switch span::before { position: absolute; content: ''; height: 16px; width: 16px; left: 3px; top: 3px; background: #fff; transition: .2s; border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,.15); }
.ac-switch input:checked + span { background: #16a34a; }
.ac-switch input:checked + span::before { transform: translateX(16px); }

/* PMax asset groups */
.ac-ag-table .ac-thead, .ac-ag-table .ac-row { grid-template-columns: 2fr 1fr 2fr 0.5fr; }
.ac-pmax-section { background: var(--bg-card-solid, #fff); border: 1px solid var(--border, #e2e8f0); border-radius: 8px; padding: 12px 14px; margin-bottom: 10px; }
.ac-pmax-section-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.ac-pmax-section-head h4 { margin: 0; font-size: 13px; font-weight: 700; }
.ac-pmax-sections { margin-top: 14px; }

/* Search terms table */
.ac-st-section { margin-top: 14px; }
.ac-st-table .ac-thead, .ac-st-table .ac-row { grid-template-columns: 2.6fr 0.8fr 0.8fr 1fr 0.8fr 1fr 0.6fr; }
@media (max-width: 900px) {
  .ac-st-table .ac-thead, .ac-st-table .ac-row { grid-template-columns: 1.8fr 0.7fr 1fr 0.7fr 0.6fr; }
  .ac-st-table .ac-thead > :nth-child(3), .ac-st-table .ac-row > :nth-child(3),
  .ac-st-table .ac-thead > :nth-child(6), .ac-st-table .ac-row > :nth-child(6) { display: none; }
}

/* AI-negatives results */
.ac-aineg-summary { padding: 10px 12px; background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 6px; font-size: 13px; color: #1e3a8a; margin-bottom: 12px; }
.ac-aineg-section { margin-bottom: 16px; }
.ac-aineg-title { font-size: 13px; font-weight: 700; color: var(--text-primary, #1e293b); margin-bottom: 6px; }
.ac-aineg-list { display: flex; flex-direction: column; gap: 4px; }
.ac-aineg-item { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid var(--border, #e2e8f0); border-radius: 6px; background: #fafbfc; font-size: 13px; flex-wrap: wrap; }
.ac-aineg-item.ac-aineg-keep { background: #f0fdf4; border-color: #bbf7d0; }
.ac-aineg-text { font-weight: 600; }
.ac-aineg-reason { font-size: 12px; }

/* RSA form */
.ac-rsa-form { display: flex; flex-direction: column; gap: 14px; }
.ac-rsa-section { }
.ac-rsa-label { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; font-weight: 600; color: var(--text-secondary, #4b5563); margin-bottom: 6px; }
.ac-rsa-fields { display: flex; flex-direction: column; gap: 6px; }
.ac-rsa-h, .ac-rsa-d { width: 100%; padding: 7px 10px; border: 1px solid var(--border, #e2e8f0); border-radius: 6px; font-size: 13px; font-family: inherit; }
.ac-rsa-d { resize: vertical; min-height: 50px; }
.ac-rsa-add { font-size: 11px; padding: 3px 8px; }

/* ── UNIVERSAL FUNNEL ────────────────────── */
.uf-page { display:flex; flex-direction:column; height:100%; overflow:hidden; }
.uf-header { display:flex; justify-content:space-between; align-items:center; padding:12px 20px; border-bottom:1px solid var(--border); gap:12px; flex-wrap:wrap; }
.uf-header-left { display:flex; align-items:center; gap:12px; flex:1; }
.uf-header-right { display:flex; align-items:center; gap:8px; }
.uf-funnel-badge { padding:4px 12px; border-radius:20px; font-size:13px; font-weight:600; }
.uf-total-count { font-size:12px; color:var(--text-muted); }
.uf-search { padding:6px 12px; border:1px solid var(--border); border-radius:8px; font-size:13px; background:var(--bg); min-width:160px; }
.uf-view-toggle { display:flex; border:1px solid var(--border); border-radius:8px; overflow:hidden; }
.uf-view-btn { width:32px; height:32px; display:flex; align-items:center; justify-content:center; border:none; background:none; cursor:pointer; color:var(--text-muted); }
.uf-view-btn.active { background:var(--accent); color:white; }
.uf-btn-primary { padding:7px 16px; background:var(--accent); color:white; border:none; border-radius:8px; font-size:13px; font-weight:500; cursor:pointer; }
.uf-content { flex:1; overflow:visible; }
.uf-kanban {
  display: flex;
  gap: 12px;
  padding: 16px 20px;
  overflow-x: auto;
  overflow-y: hidden;
  height: calc(100vh - 180px);
  align-items: flex-start;
  scroll-snap-type: x proximity;
  scrollbar-color: var(--border) transparent;
}
.uf-kanban::-webkit-scrollbar {
  height: 8px;
}
.uf-kanban::-webkit-scrollbar-track {
  background: transparent;
}
.uf-kanban::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 4px;
}
.uf-kanban::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}
.uf-col {
  max-height: calc(100vh - 220px);
  overflow-y: auto;
}
@media (max-width: 768px) {
  .uf-kanban {
    height: calc(100vh - 160px);
  }
  .uf-col {
    max-height: calc(100vh - 200px);
  }
}
.uf-column { flex:0 0 270px; background:var(--bg); border-radius:10px; border:1px solid var(--border); max-height:100%; display:flex; flex-direction:column; transition:border-color 0.15s; }
.uf-column.drag-over { border-color:var(--accent); background:rgba(var(--accent-rgb,99,102,241),0.03); }
.uf-col-header { display:flex; align-items:center; gap:8px; padding:10px 12px; border-bottom:1px solid var(--border); position:sticky; top:0; background:var(--bg); border-radius:10px 10px 0 0; }
.uf-col-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; }
.uf-col-name { flex:1; font-size:13px; font-weight:600; }
.uf-col-count { font-size:11px; background:var(--bg-card); padding:2px 7px; border-radius:10px; color:var(--text-muted); }
.uf-col-add { width:22px; height:22px; border:1px solid var(--border); border-radius:6px; background:none; cursor:pointer; font-size:14px; color:var(--text-muted); display:flex; align-items:center; justify-content:center; line-height:1; }
.uf-col-add:hover { background:var(--accent); color:white; border-color:var(--accent); }
.uf-col-items { padding:8px; overflow-y:auto; display:flex; flex-direction:column; gap:6px; }
.uf-card { background:var(--bg-card); border:1px solid var(--border); border-radius:8px; padding:10px 12px; cursor:pointer; transition:all 0.15s; user-select:none; -webkit-user-select:none; touch-action: manipulation; }
.uf-card:hover { border-color:var(--accent); box-shadow:0 2px 8px rgba(0,0,0,0.08); }
.uf-card.dragging { opacity:0.4; }
.uf-card-header { display:flex; justify-content:space-between; align-items:flex-start; gap:8px; margin-bottom:6px; }
.uf-card-name { font-size:13px; font-weight:500; line-height:1.3; }
.uf-prio-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; display:inline-block; }
.uf-card-row { display:flex; align-items:center; gap:5px; font-size:12px; color:var(--text-muted); margin-bottom:3px; }
.uf-card-footer { display:flex; justify-content:space-between; align-items:center; margin-top:8px; padding-top:6px; border-top:1px solid rgba(0,0,0,0.06); }
.uf-card-manager { font-size:11px; color:var(--text-muted); }
.uf-card-manager.unassigned { opacity:0.6; }
.uf-card-time { font-size: 11px; color:var(--text-muted); }
.uf-card-notes { font-size:11px; color:var(--text-muted); margin-top:5px; font-style:italic; }
.uf-list { padding:16px 20px; overflow-y:auto; height:100%; }
.uf-list-header { display:grid; grid-template-columns:2fr 1fr 1fr 1fr 1fr 0.5fr 0.5fr; gap:8px; padding:8px 12px; font-size:11px; font-weight:600; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.04em; border-bottom:1px solid var(--border); }
.uf-list-row { display:grid; grid-template-columns:2fr 1fr 1fr 1fr 1fr 0.5fr 0.5fr; gap:8px; padding:10px 12px; border-bottom:1px solid var(--border-light,rgba(0,0,0,0.04)); cursor:pointer; font-size:13px; transition:background 0.1s; touch-action: manipulation; }
.uf-list-row:hover { background:var(--bg); }
.uf-list-name { font-weight:500; }
.uf-list-muted { color:var(--text-muted); font-size:12px; }
.uf-stage-pill { padding:2px 8px; border-radius:10px; font-size:11px; font-weight:500; }
.uf-empty { text-align:center; padding:60px; color:var(--text-muted); }
.uf-modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.4); z-index:9999; display:flex; align-items:center; justify-content:center; padding:20px; }
.uf-modal { background:var(--bg-card); border-radius:12px; width:100%; max-width:520px; max-height:90vh; display:flex; flex-direction:column; overflow:hidden; box-shadow:0 20px 60px rgba(0,0,0,0.15); }
.uf-modal-header { display:flex; justify-content:space-between; align-items:center; padding:16px 20px; border-bottom:1px solid var(--border); }
.uf-modal-title { font-size:16px; font-weight:600; }
.uf-modal-close { background:none; border:none; cursor:pointer; font-size:18px; color:var(--text-muted); }
.uf-modal-body { padding:20px; overflow-y:auto; }

/* Вибір успішного етапу при завершенні ліда */
/* Номер ліда на мінікартці — щоб його можна було назвати вголос і знайти
   пошуком, не відкриваючи картку */
/* Кнопка переходу в переписку з покупцем із картки замовлення */
/* Кнопка чату з покупцем.

   Була сірою плашкою на сірому тлі з тонкою рамкою — на кнопку не схожа, і її
   просто не помічали серед полів картки. Робимо явною дією: акцентний колір,
   помітна рамка, підйом під курсором. Не суцільна заливка, щоб не сперечатися
   за увагу з головними діями картки. */
.od-chat-btn {
  display:inline-flex; align-items:center; gap:7px; margin-top:10px;
  padding:9px 16px; font-size:13px; font-weight:600; cursor:pointer;
  color:var(--primary); background:var(--primary-soft, rgba(99,102,241,.10));
  border:1px solid var(--primary); border-radius:10px;
  transition:background .15s, box-shadow .15s, transform .05s;
}
.od-chat-btn:hover:not(:disabled) {
  background:var(--primary); color:#fff;
  box-shadow:0 2px 8px rgba(99,102,241,.28);
}
.od-chat-btn:active:not(:disabled) { transform:translateY(1px); }
.od-chat-btn:disabled {
  opacity:1; cursor:default;
  color:var(--text-muted); background:transparent; border-color:var(--border);
}
.od-chat-btn svg { flex-shrink:0; }

.uf-card-num {
  display:inline-block; font-size:11px; font-weight:600; color:#64748b;
  background:#f1f5f9; border-radius:8px; padding:1px 6px; margin-right:2px;
  vertical-align:middle;
}

.uf-won-pick { display:flex; flex-direction:column; gap:10px; }
.uf-won-pick-hint { margin:0 0 4px; color:var(--text-secondary); font-size:14px; }
.uf-won-pick-btn {
  display:flex; flex-direction:column; align-items:flex-start; gap:2px;
  width:100%; padding:12px 14px; text-align:left; cursor:pointer;
  background:var(--bg-secondary); border:1px solid var(--border-color);
  border-radius:8px; transition:border-color .15s, background .15s;
}
.uf-won-pick-btn:hover { border-color:var(--success); background:var(--bg-hover, var(--bg-secondary)); }
.uf-won-pick-name { font-weight:600; font-size:15px; color:var(--text-primary); }
.uf-won-pick-note { font-size:12px; color:var(--text-secondary); }

.uf-form-row { margin-bottom:14px; }
.uf-form-row.two-col { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.uf-form-row label { display:block; font-size:12px; color:var(--text-muted); margin-bottom:4px; font-weight:500; }
.uf-form-row input,.uf-form-row select,.uf-form-row textarea { width:100%; padding:8px 10px; border:1px solid var(--border); border-radius:6px; font-size:13px; background:var(--bg); color:var(--text); }
.uf-form-footer { display:flex; justify-content:flex-end; gap:8px; padding-top:16px; margin-top:8px; border-top:1px solid var(--border); }
.uf-btn-submit { padding:8px 18px; background:var(--accent); color:white; border:none; border-radius:8px; font-size:13px; cursor:pointer; }
.uf-btn-cancel { padding:8px 18px; background:none; border:1px solid var(--border); border-radius:8px; font-size:13px; cursor:pointer; }
.uf-btn-danger { padding:8px 18px; background:#ef4444; color:white; border:none; border-radius:8px; font-size:13px; cursor:pointer; margin-right:auto; }
/* ── UNIVERSAL FUNNEL INLINE CHAT (KeyCRM style) ─── */
.uf-contact-actions-advanced {
  display: flex;
  gap: 4px;
  margin-top: 8px;
  border-top: 1px solid rgba(0,0,0,0.06);
  padding-top: 6px;
}

.uf-contact-btn {
  width: 24px;
  height: 24px;
  border: 1px solid var(--border);
  background: var(--bg);
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  transition: all 0.15s;
}

.uf-contact-btn:hover {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}

.uf-inline-chat, .uf-inline-history {
  margin-top: 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  overflow: hidden;
  animation: slideDown 0.2s ease;
}

@keyframes slideDown {
  from { opacity: 0; max-height: 0; }
  to { opacity: 1; max-height: 300px; }
}

.uf-chat-header, .uf-history-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 10px;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  font-weight: 500;
}

.uf-chat-close, .uf-history-close {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  color: var(--text-muted);
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
}

.uf-chat-close:hover, .uf-history-close:hover {
  background: var(--border);
}

.uf-chat-platforms {
  display: flex;
  gap: 4px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
}

.uf-platform-btn {
  width: 24px;
  height: 24px;
  border: 1px solid var(--border);
  background: var(--bg);
  border-radius: 4px;
  cursor: pointer;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}

.uf-platform-btn.active {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}

.uf-message-area {
  padding: 8px 10px;
}

.uf-message-input {
  width: 100%;
  min-height: 50px;
  resize: vertical;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 6px 8px;
  font-size: 12px;
  background: var(--bg-card);
  margin-bottom: 6px;
}

.uf-send-btn {
  padding: 4px 12px;
  background: var(--accent);
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
  height: 26px;
}

.uf-send-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.uf-history-content {
  padding: 10px;
  max-height: 150px;
  overflow-y: auto;
}

.uf-history-item {
  margin-bottom: 8px;
  padding: 6px 8px;
  background: var(--bg-card);
  border-radius: 4px;
  border-left: 3px solid var(--accent);
}

.uf-history-date {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 2px;
}

.uf-history-message {
  font-size: 12px;
  line-height: 1.3;
}

.uf-loading {
  text-align: center;
  padding: 20px;
  color: var(--text-muted);
  font-size: 12px;
}

.uf-error {
  text-align: center;
  padding: 20px;
  color: var(--danger);
  font-size: 12px;
}

/* Мобільна оптимізація воронки */
@media (max-width: 768px) {
  /* Прибрати зайві відступи зверху */
  .uf-page { padding: 0; }

  /* Header компактніший */
  .uf-header {
    padding: 8px 12px;
    gap: 8px;
  }

  /* Фільтри — горизонтальний скрол */
  .uf-filters {
    padding: 8px 12px;
    gap: 6px;
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
  }

  .uf-filter-select {
    flex-shrink: 0;
    font-size: 13px;
    padding: 6px 10px;
  }

  /* Статистика компактніша */
  .uf-stats-bar {
    padding: 6px 12px;
    font-size: 12px;
  }

  /* Канбан — горизонтальний скрол */
  .uf-kanban {
    padding: 8px 12px;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .uf-column {
    flex: 0 0 82vw;
    max-width: 82vw;
  }

  /* Картка ліда */
  .uf-card {
    padding: 10px 30px 10px 11px;
    border-radius: 10px;
  }

  .uf-card-title {
    font-size: 14px;
  }

  .uf-card-phone {
    font-size: 12.5px;
  }

  /* Кнопки дій на картці — більші */
  .uf-card-actions {
    gap: 6px;
    margin-top: 8px;
  }

  .uf-card-action-btn {
    width: 36px;
    height: 36px;
    border-radius: 10px;
  }

  /* Заголовок колонки */
  .uf-column-header {
    padding: 10px 12px;
    font-size: 13px;
  }

  /* Existing styles preserved */
  .uf-form-row.two-col { grid-template-columns:1fr; }
  .uf-list-header,.uf-list-row { grid-template-columns:2fr 1fr 1fr; }
  .uf-list-header span:nth-child(n+4),.uf-list-row span:nth-child(n+4) { display:none; }

  .uf-inline-chat, .uf-inline-history {
    font-size: 11px;
  }

  .uf-message-input {
    min-height: 40px;
  }
}

/* ── FUNNEL SWITCHER ─────────────────────── */
.uf-switcher {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 20px;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  background: var(--bg-card);
  flex-shrink: 0;
}
.uf-sw-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 20px;
  border: 1.5px solid transparent;
  background: var(--bg);
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
  color: var(--text-muted);
  transition: all 0.15s;
}
.uf-sw-btn:hover {
  background: var(--bg-card);
  color: var(--text);
}
.uf-sw-btn.active {
  border-color: var(--sw-color, var(--accent));
  color: var(--sw-color, var(--accent));
  background: var(--bg-card);
  font-weight: 500;
}
.uf-sw-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.uf-sw-count {
  font-size: 11px;
  background: var(--bg);
  padding: 1px 6px;
  border-radius: 10px;
  min-width: 18px;
  text-align: center;
}
.uf-sw-new {
  padding: 5px 12px;
  border-radius: 20px;
  border: 1px dashed var(--border);
  background: none;
  font-size: 12px;
  color: var(--text-muted);
  cursor: pointer;
  white-space: nowrap;
  margin-left: 4px;
}
.uf-sw-new:hover { border-color: var(--accent); color: var(--accent); border-style: solid; }

@media (max-width: 768px) {
  /* Switcher — компактний горизонтальний скрол */
  .uf-switcher {
    padding: 6px 12px;
    gap: 6px;
    min-height: unset;
  }

  .uf-sw-btn {
    padding: 5px 10px;
    font-size: 12px;
    border-radius: 20px;
    white-space: nowrap;
    flex-shrink: 0;
  }

  .uf-sw-btn .uf-sw-count {
    font-size: 11px;
    padding: 1px 5px;
  }

  /* Header — приховати другорядні елементи */
  .uf-header {
    padding: 6px 12px;
    flex-wrap: nowrap;
  }

  .uf-header-right .uf-btn:not(.uf-btn-primary) {
    display: none;
  }

  /* Фільтри — одним рядком зі скролом */
  .uf-filters {
    padding: 6px 12px;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 6px;
  }

  .uf-filter-select {
    flex-shrink: 0;
    font-size: 12px;
    padding: 5px 8px;
    min-width: unset;
  }

  /* Статистика — менший шрифт */
  .uf-stats-bar {
    padding: 4px 12px;
    font-size: 11px;
    gap: 8px;
  }

  .uf-sw-settings {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    flex-shrink: 0;
  }

  /* Відновити показ шапки та правильний padding */
  body.page-universal-funnel #page-universal-funnel.page {
    padding-top: calc(60px + env(safe-area-inset-top, 0px)) !important;
  }

  body.page-universal-funnel .uf-page {
    height: calc(100vh - 60px - env(safe-area-inset-top, 0px));
    overflow: hidden;
  }

  /* Сховати лічильник карток на мобільному */
  body.page-universal-funnel .uf-header-left > *:first-child {
    display: none;
  }

  /* Header компактний */
  body.page-universal-funnel .uf-header {
    padding: 4px 8px;
    min-height: unset;
  }

  /* Сховати зайві кнопки в header-right */
  body.page-universal-funnel .uf-header-right .uf-sw-new {
    display: none;
  }

  /* Switcher dropdown більший і помітніший */
  body.page-universal-funnel .uf-switcher {
    padding: 6px 8px;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
  }

  body.page-universal-funnel .uf-sw-select {
    font-size: 15px;
    font-weight: 600;
    padding: 8px 12px;
    border: 1.5px solid var(--accent, #6366f1);
    color: var(--accent, #6366f1);
  }

  /* Фільтри компактніші */
  body.page-universal-funnel .uf-filters {
    padding: 4px 8px;
  }

  body.page-universal-funnel .uf-switcher {
    display: flex !important;
    min-height: 52px !important;
    overflow: visible !important;
  }

  body.page-universal-funnel .uf-sw-select-wrap {
    display: block !important;
    width: 100% !important;
  }

  body.page-universal-funnel .uf-sw-select {
    display: block !important;
    width: 100% !important;
    min-height: 40px !important;
  }

  /* Фільтри — більші і видимі */
  body.page-universal-funnel .uf-filters {
    padding: 6px 8px;
    gap: 6px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    min-height: 44px;
  }

  body.page-universal-funnel .uf-filter-select,
  body.page-universal-funnel .uf-filters select {
    height: 36px;
    min-width: 110px;
    font-size: 13px;
    padding: 0 10px;
    border-radius: 20px;
    flex-shrink: 0;
    border: 1.5px solid var(--border);
    background: var(--bg-card);
  }

  /* Пошук компактніший */
  body.page-universal-funnel .uf-header {
    padding: 4px 8px;
    gap: 6px;
  }

  body.page-universal-funnel .uf-search-input {
    height: 36px;
    font-size: 13px;
  }
}

/* ── MOBILE DROPDOWN SWITCHER (outside media query) ─────── */
.uf-sw-select-wrap {
  flex: 1;
}

.uf-sw-select {
  width: 100%;
  padding: 6px 12px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  background: var(--bg-card);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

/* ── UNIVERSAL FUNNEL BULK OPERATIONS ─────── */


.uf-bulk-cb:hover {
  border-color: var(--accent);
}

.uf-bulk-cb-on {
  background: var(--accent);
  border-color: var(--accent);
}

.uf-bulk-cb-on::after {
  content: '✓';
  color: white;
  font-size: 11px;
  font-weight: bold;
}

.uf-col-bulk-cb {
  margin-right: 8px;
}

/* Select-all button in stage header */
.uf-col-select-all {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 1.5px solid var(--border);
  background: var(--bg-card);
  color: var(--text-secondary);
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.15s;
  padding: 0;
  margin-right: 2px;
}
.uf-col-select-all:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-light, #eef2ff);
}
.uf-col-select-all.active {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}

.uf-card-selected {
  background: var(--accent) !important;
  color: white !important;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3) !important;
}

.uf-card-selected * {
  color: white !important;
}

.uf-card-selected .uf-prio-dot {
  background: rgba(255, 255, 255, 0.7) !important;
}

/* ── UNIVERSAL FUNNEL FILTERS ─────────────── */
.uf-filters {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.uf-filter {
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-card-solid);
  font-size: 12px;
  color: var(--text-secondary);
  cursor: pointer;
  min-width: 120px;
  outline: none;
  transition: all 0.2s;
}

.uf-toggle-switch {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
  flex-shrink: 0;
}
.uf-toggle-switch input { opacity: 0; width: 0; height: 0; }
.uf-toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0; right: 0; bottom: 0; left: 0;   /* запас: inset зʼявився в Chrome 87 */
  inset: 0;
  background: #e2e8f0;
  border-radius: 20px;
  transition: .2s;
}
.uf-toggle-slider:before {
  position: absolute;
  content: '';
  height: 14px;
  width: 14px;
  left: 3px;
  bottom: 3px;
  background: white;
  border-radius: 50%;
  transition: .2s;
}
.uf-toggle-switch input:checked + .uf-toggle-slider { background: var(--accent, #6366f1); }
.uf-toggle-switch input:checked + .uf-toggle-slider:before { transform: translateX(16px); }

.uf-filter-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  background: var(--bg-card);
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  transition: all 0.15s;
}
.uf-filter-btn.active {
  border-color: var(--accent, #6366f1);
  color: var(--accent, #6366f1);
  background: var(--accent-light, #eef2ff);
}
.uf-filters-panel {
  position: fixed;
  top: 110px;
  left: 0;
  right: 0;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-top: none;
  padding: 16px 20px;
  z-index: 500;
  box-shadow: 0 8px 32px rgba(0,0,0,0.15);
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 768px) {
  .uf-filters-panel {
    left: 0;
    top: 100px;
  }
}
.uf-filter-select {
  width: 100%;
  padding: 7px 10px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  background: var(--bg-secondary);
  font-size: 13px;
  color: var(--text-primary);
  outline: none;
  cursor: pointer;
}

.uf-filter:hover,
.uf-filter:focus {
  border-color: var(--accent);
  background: var(--bg-hover);
}

.uf-filter-clear {
  padding: 6px 10px;
  background: var(--danger);
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  transition: all 0.2s;
}

.uf-filter-clear:hover {
  background: var(--danger-hover);
}

/* ── UNIVERSAL FUNNEL HEADER ───────────────── */
.uf-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 12px;
}

.uf-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.uf-btn,
.uf-btn-primary,
.uf-btn-secondary {
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  transition: all 0.2s;
  white-space: nowrap;
}

.uf-btn-primary {
  background: var(--primary);
  color: white;
}

.uf-btn-primary:hover {
  background: var(--primary-hover);
}

.uf-btn-secondary {
  background: var(--bg-secondary);
  color: var(--text-primary);
  border: 1px solid var(--border);
}

.uf-btn-secondary:hover {
  background: var(--bg-hover);
  border-color: var(--accent);
}

.uf-selected-count {
  color: var(--accent);
  font-weight: 600;
}

/* ── UNIVERSAL FUNNEL MODAL ENHANCEMENTS ──── */
.uf-modal-overlay {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;   /* запас: inset зʼявився в Chrome 87 */
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 1300;
  display: flex;
  align-items: center;
  justify-content: center;
}

.uf-modal {
  background: var(--bg-card-solid);
  border-radius: 12px;
  max-width: 900px;
  max-height: 85vh;
  width: 90%;
  display: flex;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}

@media (max-width: 768px) {
  .uf-modal-overlay {
    align-items: end;
  }
  .uf-modal {
    width: 100%;
    max-height: 85vh;
    border-radius: 20px 20px 0 0;
    flex-direction: column;
  }
}

/* ===== AUTOMATION ===== */
.automation-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.automation-header {
  background: var(--bg-card-solid);
  border-radius: var(--radius-lg);
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
}

.automation-title h1 {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 4px;
  color: var(--text-primary);
}

.automation-title p {
  font-size: 14px;
  color: var(--text-muted);
  margin: 0;
}

.automation-stats {
  display: flex;
  gap: 24px;
}

.stat-item {
  text-align: center;
  min-width: 80px;
}

.stat-number {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.stat-label {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.automation-actions button {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
}

/* Automation List */
.automation-list {
  background: var(--bg-card-solid);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.automation-list-header {
  padding: 16px 20px;
  background: var(--bg-primary);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.automation-list-header h3 {
  font-size: 16px;
  font-weight: 600;
  margin: 0;
  color: var(--text-primary);
}

.automation-list-header button {
  font-size: 12px;
  padding: 6px 12px;
}

.triggers-table {
  width: 100%;
  border-collapse: collapse;
}

.triggers-table th,
.triggers-table td {
  padding: 12px 20px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}

.triggers-table th {
  background: var(--bg-secondary);
  font-weight: 600;
  font-size: 12px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.triggers-table tbody tr:hover {
  background: var(--bg-hover);
}

.trigger-name {
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 2px;
}

.trigger-event {
  font-size: 12px;
  color: var(--text-muted);
}

.trigger-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 12px;
}

.trigger-status.active {
  background: rgba(34, 197, 94, 0.1);
  color: rgb(34, 197, 94);
}

.trigger-status.inactive {
  background: rgba(156, 163, 175, 0.1);
  color: rgb(156, 163, 175);
}

.trigger-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.trigger-actions button {
  padding: 4px 8px;
  font-size: 11px;
  min-width: auto;
}

.trigger-actions .u-btn-danger {
  background: rgba(239, 68, 68, 0.1);
  color: rgb(239, 68, 68);
  border: 1px solid rgba(239, 68, 68, 0.2);
}

.trigger-actions .u-btn-danger:hover {
  background: rgba(239, 68, 68, 0.2);
}

/* Empty State */
.automation-empty {
  background: var(--bg-card-solid);
  border-radius: var(--radius-lg);
  padding: 60px 40px;
  text-align: center;
  box-shadow: var(--shadow-sm);
}

.automation-empty svg {
  width: 64px;
  height: 64px;
  color: var(--text-muted);
  margin-bottom: 16px;
  opacity: 0.6;
}

.automation-empty h3 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--text-primary);
}

.automation-empty p {
  font-size: 14px;
  color: var(--text-muted);
  margin-bottom: 24px;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

/* Modal Overlay */
.modal-overlay {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;   /* запас: inset зʼявився в Chrome 87 */
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.modal-container {
  background: var(--bg-card-solid);
  border-radius: 12px;
  max-width: 500px;
  width: 100%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

.modal-container.large {
  max-width: 800px;
}

.modal-container.trigger-modal {
  max-width: 800px;
  max-height: 90vh;
  position: relative;
}

@media (max-width: 768px) {
  .modal-container.trigger-modal {
    max-width: 100%;
    width: 100%;
    height: 100%;
    max-height: 100vh;
    margin: 0;
    border-radius: 0;
  }
}

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

.modal-header h2 {
  font-size: 18px;
  font-weight: 700;
  margin: 0;
  color: var(--text-primary);
}

.modal-close {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 24px;
  color: var(--text-muted);
  padding: 4px;
  border-radius: 6px;
  transition: all 0.2s;
}

.modal-close:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
}

/* Trigger Editor */
.trigger-editor {
  display: flex;
  flex-direction: column;
  min-height: 500px;
}

.step-nav {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 32px;
  padding: 0 20px;
}

.step {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  padding: 12px;
  border-radius: 8px;
  transition: all 0.2s;
  min-width: 80px;
}

.step:hover {
  background: var(--bg-hover);
}

.step.active {
  background: rgba(59, 130, 246, 0.1);
}

.step-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--border);
  color: var(--text-muted);
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 8px;
  transition: all 0.2s;
}

.step.active .step-number {
  background: rgb(59, 130, 246);
  color: white;
}

.step-title {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  text-align: center;
}

.step.active .step-title {
  color: rgb(59, 130, 246);
}

.step-content {
  flex: 1;
  margin-bottom: 24px;
}

.step-section h3 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--text-primary);
}

.step-section p {
  font-size: 14px;
  color: var(--text-muted);
  margin-bottom: 24px;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 6px;
}

.form-group small {
  display: block;
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
}

.form-control {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  background: var(--bg);
  color: var(--text);
  transition: all 0.2s;
}

.form-control:focus {
  outline: none;
  border-color: rgb(59, 130, 246);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-weight: 500;
}

.checkbox-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
}

/* Conditions Builder */
.conditions-builder {
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

#conditions-list {
  background: var(--bg);
}

.condition-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-card-solid);
}

.condition-item:last-child {
  border-bottom: none;
}

.condition-operator,
.condition-field,
.condition-comparison {
  min-width: 120px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
  background: var(--bg);
}

.condition-value {
  flex: 1;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
  background: var(--bg);
}

.condition-remove {
  padding: 8px;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: 6px;
  color: rgb(239, 68, 68);
  cursor: pointer;
  transition: all 0.2s;
}

.condition-remove:hover {
  background: rgba(239, 68, 68, 0.2);
}

/* Actions Builder */
.actions-builder {
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

#actions-list {
  background: var(--bg);
}

.action-item {
  border-bottom: 1px solid var(--border);
  background: var(--bg-card-solid);
}

.action-item:last-child {
  border-bottom: none;
}

.action-item > .action-type {
  padding: 16px;
  margin: 0;
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--border);
  background: var(--bg-secondary);
  font-size: 14px;
  font-weight: 600;
}

.action-config {
  padding: 16px;
}

.action-fields {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.action-remove {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 6px;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: 4px;
  color: rgb(239, 68, 68);
  cursor: pointer;
  transition: all 0.2s;
  font-size: 12px;
}

.action-item {
  position: relative;
}

.action-remove:hover {
  background: rgba(239, 68, 68, 0.2);
}

/* Step Actions */
.step-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.step-actions .spacer {
  flex: 1;
}

/* Logs */
.logs-container {
  max-height: 500px;
  overflow-y: auto;
}

.logs-table table {
  width: 100%;
  border-collapse: collapse;
}

.logs-table th,
.logs-table td {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}

.logs-table th {
  background: var(--bg-secondary);
  font-weight: 600;
  color: var(--text-muted);
  position: sticky;
  top: 0;
}

.logs-table tr.success {
  background: rgba(34, 197, 94, 0.05);
}

.logs-table tr.error {
  background: rgba(239, 68, 68, 0.05);
}

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 12px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.status-badge.status-success {
  background: rgba(34, 197, 94, 0.1);
  color: rgb(34, 197, 94);
}

.status-badge.status-error {
  background: rgba(239, 68, 68, 0.1);
  color: rgb(239, 68, 68);
}

.status-badge.status-pending {
  background: rgba(249, 115, 22, 0.1);
  color: rgb(249, 115, 22);
}

/* Wide Trigger Editor */
.trigger-editor-wide {
  padding: 0;
}

.trigger-section {
  margin-bottom: 0;
}

.section-divider {
  height: 1px;
  background: var(--border);
  margin: 24px 0;
}

.section-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.section-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: white;
  font-weight: 600;
}

.section-icon-event {
  background: #3b82f6;
}

.section-icon-timing {
  background: #6b7280;
}

.section-icon-conditions {
  background: #8b5cf6;
}

.section-icon-actions {
  background: #f59e0b;
}

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

.section-content {
  padding-left: 44px;
}

.form-control-lg {
  font-size: 16px;
  font-weight: 600;
  padding: 14px 16px;
}

.timing-selector {
  max-width: 400px;
}

.timing-options {
  display: flex;
  gap: 16px;
  margin-bottom: 16px;
}

.radio-option {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-weight: 500;
}

.radio-option input[type="radio"] {
  margin: 0;
}

.delay-input {
  display: flex;
  gap: 12px;
  align-items: center;
  max-width: 300px;
}

.delay-input input {
  flex: 1;
  min-width: 80px;
}

.delay-input select {
  flex: 1;
  min-width: 100px;
}

/* Condition Groups */
.conditions-section {
  max-width: 600px;
}

.condition-group {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-card);
  margin-bottom: 16px;
  overflow: hidden;
}

.group-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: var(--bg-secondary);
  font-weight: 600;
  font-size: 14px;
}

.group-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.group-operator {
  padding: 4px 8px;
  font-size: 12px;
  min-width: 80px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg);
}

.btn-icon {
  padding: 4px 6px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  transition: all 0.2s;
}

.btn-danger {
  background: rgba(239, 68, 68, 0.1);
  color: rgb(239, 68, 68);
}

.btn-danger:hover {
  background: rgba(239, 68, 68, 0.2);
}

.group-conditions {
  padding: 16px;
}

.condition-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #e0e7ff;
  color: #3730a3;
  padding: 4px 8px;
  border-radius: 16px;
  font-size: 13px;
  margin: 4px 6px 4px 0;
}

.chip-remove {
  background: none;
  border: none;
  color: #6b21a8;
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  padding: 0;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chip-remove:hover {
  background: rgba(107, 33, 168, 0.1);
  border-radius: 50%;
}

.u-btn-add-condition {
  background: var(--bg-secondary);
  border: 1px dashed var(--border-strong);
  color: var(--text-muted);
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  transition: all 0.2s;
}

.u-btn-add-condition:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

/* Actions Section */
.actions-section {
  max-width: 600px;
}

.action-block {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-card);
  margin-bottom: 16px;
  overflow: hidden;
}

.action-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: var(--bg-secondary);
  font-weight: 600;
  font-size: 14px;
}

.action-content {
  padding: 16px;
}

.add-action-dropdown {
  position: relative;
}

.dropdown-toggle {
  position: relative;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--bg-card-solid);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: var(--shadow-lg);
  z-index: 1000;
  min-width: 200px;
}

.dropdown-item {
  display: block;
  padding: 8px 12px;
  color: var(--text-primary);
  text-decoration: none;
  font-size: 13px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
}

.dropdown-item:last-child {
  border-bottom: none;
}

.dropdown-item:hover {
  background: var(--bg-hover);
}

.trigger-editor-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding-top: 24px;
  margin-top: 24px;
  border-top: 1px solid var(--border);
}

/* Condition Drawer */
.condition-drawer {
  position: fixed;
  top: 0;
  right: -400px;
  width: 380px;
  height: 100vh;
  background: var(--bg-card-solid);
  border-left: 1px solid var(--border);
  z-index: 1100;
  display: flex;
  flex-direction: column;
  transition: right 0.3s ease;
  box-shadow: -2px 0 12px rgba(0, 0, 0, 0.1);
}

.condition-drawer.open {
  right: 0;
}

.drawer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-primary);
}

.drawer-header h3 {
  font-size: 16px;
  font-weight: 700;
  margin: 0;
  color: var(--text-primary);
}

.drawer-close {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: var(--text-muted);
  padding: 4px;
}

.drawer-close:hover {
  background: var(--bg-hover);
  border-radius: 4px;
}

.drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
}

.drawer-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 20px 24px;
  border-top: 1px solid var(--border);
  background: var(--bg-primary);
}

.condition-options {
  margin-bottom: 24px;
}

.condition-option {
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: all 0.2s;
}

.condition-option:hover {
  background: var(--bg-hover);
  border-color: var(--border-strong);
}

.condition-option.selected {
  background: rgba(59, 130, 246, 0.1);
  border-color: rgb(59, 130, 246);
}

.condition-option-name {
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.condition-option-desc {
  font-size: 12px;
  color: var(--text-muted);
}

.condition-form-section h4 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 16px;
  color: var(--text-primary);
}

.radio-group {
  display: flex;
  gap: 16px;
  margin-bottom: 16px;
}

/* Responsive */
@media (max-width: 768px) {
  .automation-header {
    flex-direction: column;
    text-align: center;
  }

  .automation-stats {
    justify-content: center;
  }

  .step-nav {
    flex-wrap: wrap;
    gap: 4px;
  }

  .step {
    min-width: 60px;
    padding: 8px;
  }

  .condition-item,
  .action-fields {
    flex-direction: column;
  }

  .modal-container {
    margin: 10px;
    max-height: calc(100vh - 20px);
  }

  .logs-table {
    font-size: 12px;
  }

  .logs-table th,
  .logs-table td {
    padding: 8px;
  }

  .condition-drawer {
    width: 100%;
    right: -100%;
  }

  .section-content {
    padding-left: 0;
  }

  .section-header {
    margin-bottom: 12px;
  }

  .timing-options {
    flex-direction: column;
    gap: 8px;
  }

  .delay-input {
    flex-direction: column;
    align-items: stretch;
  }
}

/* ========== FUNNEL MANAGEMENT ========== */

/* Enhanced Funnel Switcher */
.uf-switcher .uf-sw-new {
  background: var(--accent, #2563eb);
  color: white;
  border: none;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  margin-left: 8px;
}

.uf-switcher .uf-sw-new:hover {
  background: var(--primary-dark, #1d4ed8);
}

.uf-switcher .uf-sw-settings {
  background: var(--bg-card, #fff);
  color: var(--text-primary, #1d1d1f);
  border: 1px solid var(--border, #e2e8f0);
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  margin-left: 8px;
}

.uf-switcher .uf-sw-settings:hover {
  background: var(--bg-secondary, #f8fafc);
}

/* Create Funnel Modal */
.uf-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}

.uf-modal-content {
  background: var(--bg-card, #fff);
  border-radius: 12px;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  max-width: 500px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
}

.uf-modal-content.large {
  max-width: 800px;
}

.uf-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--border, #e2e8f0);
}

.uf-modal-header h3 {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary, #1d1d1f);
  margin: 0;
}

.uf-modal-content .uf-modal-close {
  background: none;
  border: none;
  font-size: 24px;
  color: var(--text-secondary, #64748b);
  cursor: pointer;
  padding: 4px;
  line-height: 1;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
}

.uf-modal-content .uf-modal-close:hover {
  background: var(--bg-secondary, #f8fafc);
  color: var(--text-primary, #1d1d1f);
}

.uf-modal-footer {
  padding: 16px 24px 20px;
  border-top: 1px solid var(--border, #e2e8f0);
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

/* Form Styles */
.uf-create-form {
  padding: 0;
}

.uf-form-section {
  padding: 20px 24px;
  border-bottom: 1px solid var(--border-light, #f1f5f9);
}

.uf-form-section:last-of-type {
  border-bottom: none;
}

.uf-form-section h4 {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary, #1d1d1f);
  margin: 0 0 16px 0;
}

.uf-form-group {
  margin-bottom: 16px;
}

.uf-form-group:last-child {
  margin-bottom: 0;
}

.uf-form-group label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary, #1d1d1f);
  margin-bottom: 6px;
}

.uf-form-group input,
.uf-form-group textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 6px;
  background: var(--bg-input, #fff);
  font-family: inherit;
  font-size: 14px;
  color: var(--text-primary, #1d1d1f);
  transition: border-color 0.2s;
}

.uf-form-group input:focus,
.uf-form-group textarea:focus {
  outline: none;
  border-color: var(--accent, #2563eb);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

/* Funnel Type Selection */
.uf-type-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.uf-type-card {
  border: 2px solid var(--border, #e2e8f0);
  border-radius: 8px;
  padding: 0;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
}

.uf-type-card:hover {
  border-color: var(--accent, #2563eb);
  background: rgba(37, 99, 235, 0.02);
}

.uf-type-card input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.uf-type-card input[type="radio"]:checked + label,
.uf-type-card.selected {
  background: rgba(37, 99, 235, 0.05);
  border-color: var(--accent, #2563eb);
}

.uf-type-card input[type="radio"]:checked + label::before {
  content: '✓';
  position: absolute;
  top: 8px;
  right: 8px;
  width: 20px;
  height: 20px;
  background: var(--accent, #2563eb);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
}

.uf-type-card label {
  display: flex;
  flex-direction: column;
  padding: 16px;
  margin: 0;
  cursor: pointer;
  height: 100%;
  position: relative;
}

.uf-type-icon {
  font-size: 28px;
  margin-bottom: 8px;
}

.uf-type-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary, #1d1d1f);
  margin-bottom: 4px;
}

.uf-type-desc {
  font-size: 12px;
  color: var(--text-secondary, #64748b);
  margin-bottom: 8px;
  line-height: 1.4;
  flex-grow: 1;
}

.uf-type-stages {
  font-size: 11px;
  color: var(--text-muted, #64748b);
  font-weight: 500;
  padding: 4px 8px;
  background: var(--bg-secondary, #f8fafc);
  border-radius: 4px;
  align-self: flex-start;
}

/* Stage Preview */
.uf-stage-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.uf-stage-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: var(--bg-secondary, #f8fafc);
  border-radius: 6px;
  font-size: 12px;
  color: var(--text-primary, #1d1d1f);
}

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

.uf-stage-name {
  font-weight: 500;
}

.uf-note {
  font-size: 12px;
  color: var(--text-muted, #64748b);
  margin: 0;
  font-style: italic;
}

/* Settings Modal */
.uf-settings-tabs {
  display: flex;
  border-bottom: 1px solid var(--border, #e2e8f0);
  background: var(--bg-secondary, #f8fafc);
}

.uf-tab {
  flex: 1;
  padding: 12px 16px;
  background: none !important;
  border: none !important;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary, #64748b) !important;
  cursor: pointer !important;
  transition: all 0.2s;
  border-bottom: 2px solid transparent !important;
}

.uf-tab.active {
  color: var(--accent, #2563eb) !important;
  border-bottom-color: var(--accent, #2563eb) !important;
  background: var(--bg-card, #fff) !important;
}

.uf-tab:hover:not(.active) {
  color: var(--text-primary, #1d1d1f) !important;
  background: rgba(37, 99, 235, 0.05) !important;
}

.uf-tab-content {
  min-height: 300px;
}

.uf-tab-panel {
  display: none;
  padding: 24px;
}

.uf-tab-panel.active {
  display: block;
}

/* Settings Page Tabs */
.settings-tabs {
  display: flex;
  border-bottom: 1px solid var(--border, #e2e8f0);
  background: var(--bg-secondary, #f8fafc);
  margin: 20px 0;
  border-radius: 8px 8px 0 0;
}

.settings-tab {
  flex: 1;
  padding: 12px 16px;
  background: none !important;
  border: none !important;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary, #64748b) !important;
  cursor: pointer !important;
  transition: all 0.2s;
  border-bottom: 2px solid transparent !important;
  border-radius: 8px 8px 0 0;
}

.settings-tab.active {
  color: var(--accent, #2563eb) !important;
  border-bottom-color: var(--accent, #2563eb) !important;
  background: var(--bg-primary, #ffffff) !important;
  font-weight: 600;
}

.settings-tab:hover:not(.active) {
  color: var(--text-primary, #1e293b) !important;
  background: var(--bg-hover, #f1f5f9) !important;
}

.uf-settings-form {
  max-width: none;
}

/* Stage Settings */
.uf-stages-list {
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 6px;
  margin-bottom: 16px;
}

.uf-stage-setting-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-bottom: 1px solid var(--border-light, #f1f5f9);
}

.uf-stage-setting-item:last-child {
  border-bottom: none;
}

.uf-drag-handle {
  color: var(--text-muted, #64748b);
  cursor: grab;
  font-size: 12px;
  width: 16px;
}

.uf-stage-color {
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

.uf-stage-name-input {
  flex: 1;
  padding: 8px 12px !important;
  border: 1px solid var(--border, #e2e8f0) !important;
  border-radius: 6px !important;
  font-size: 14px !important;
}

.uf-btn-small {
  padding: 6px 8px !important;
  font-size: 12px !important;
  border-radius: 4px !important;
  border: 1px solid var(--border, #e2e8f0) !important;
  background: var(--bg-card, #fff) !important;
  color: var(--text-primary, #1d1d1f) !important;
  cursor: pointer !important;
}

.uf-btn-small.danger {
  color: var(--danger, #dc2626) !important;
  border-color: var(--danger, #dc2626) !important;
}

.uf-btn-small.danger:hover {
  background: var(--danger, #dc2626) !important;
  color: white !important;
}

/* Placeholder for Coming Soon */
.uf-placeholder {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-secondary, #64748b);
}

.uf-placeholder-icon {
  font-size: 48px;
  margin-bottom: 16px;
}

.uf-placeholder-text h4 {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary, #1d1d1f);
  margin-bottom: 8px;
}

.uf-placeholder-text p {
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 4px;
}

/* Universal Button Styles */
.uf-btn {
  padding: 10px 16px !important;
  border-radius: 6px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
  border: 1px solid transparent !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
}

.uf-btn.primary {
  background: var(--accent, #2563eb) !important;
  color: white !important;
  border-color: var(--accent, #2563eb) !important;
}

.uf-btn.primary:hover {
  background: var(--primary-dark, #1d4ed8) !important;
  border-color: var(--primary-dark, #1d4ed8) !important;
}

.uf-btn.secondary {
  background: var(--bg-card, #fff) !important;
  color: var(--text-primary, #1d1d1f) !important;
  border-color: var(--border, #e2e8f0) !important;
}

.uf-btn.secondary:hover {
  background: var(--bg-secondary, #f8fafc) !important;
}

.uf-btn.danger {
  background: var(--bg-card, #fff) !important;
  color: var(--danger, #dc2626) !important;
  border-color: var(--danger, #dc2626) !important;
}

.uf-btn.danger:hover {
  background: var(--danger, #dc2626) !important;
  color: white !important;
}

.uf-btn:disabled {
  opacity: 0.6 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.uf-info {
  font-size: 14px;
  color: var(--text-secondary, #64748b);
  margin: 0 0 16px 0;
  padding: 12px;
  background: var(--bg-secondary, #f8fafc);
  border-radius: 6px;
  border-left: 3px solid var(--accent, #2563eb);
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
  .uf-modal-content {
    margin: 10px;
    max-width: none;
    max-height: 95vh;
  }

  .uf-modal-content.large {
    max-width: none;
  }

  .uf-type-grid {
    grid-template-columns: 1fr;
  }

  .uf-modal-footer {
    flex-direction: column;
  }

  .uf-settings-tabs {
    flex-direction: row;
    overflow-x: auto;
  }

  .uf-tab {
    flex: none;
    white-space: nowrap;
    min-width: 120px;
  }

  .uf-stage-setting-item {
    flex-wrap: wrap;
    gap: 8px;
  }

  .uf-stage-name-input {
    min-width: 200px;
  }
}
/* Advanced Contact Integration Styles */

/* ===== ENHANCED CONTACT ACTIONS ===== */

.uf-contact-actions-advanced {
  display: flex;
  gap: 3px;
  margin-top: 8px;
  justify-content: flex-start;
}

.uf-quick-chat-btn {
  color: #059669;
  border-color: #d1fae5;
  background: #ecfdf5;
}

.uf-quick-chat-btn:hover {
  background: #dcfce7;
  transform: translateY(-1px);
}

.uf-chat-history-btn {
  color: #0369a1;
  border-color: #bae6fd;
}

.uf-chat-history-btn:hover {
  background: #e0f2fe;
}

.uf-audio-timeline-btn {
  color: #7c2d12;
  border-color: #fed7aa;
  background: #fef3c7;
}

.uf-audio-timeline-btn:hover {
  background: #fde68a;
}

/* ===== QUICK CHAT MODAL ===== */

.uf-quick-chat-modal {
  z-index: 15000;
}

.uf-quick-chat-content {
  max-width: 600px;
  max-height: 80vh;
}

.uf-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid #e5e7eb;
}

.uf-chat-platforms {
  display: flex;
  gap: 4px;
}

.uf-platform-btn {
  width: 32px;
  height: 32px;
  border: 2px solid #e5e7eb;
  border-radius: 6px;
  background: white;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

.uf-platform-btn:hover {
  border-color: #3b82f6;
  transform: scale(1.05);
}

.uf-platform-btn.active {
  border-color: #3b82f6;
  background: #eff6ff;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.uf-quick-templates {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 16px 20px;
  border-bottom: 1px solid #f3f4f6;
}

.uf-template-btn {
  padding: 6px 12px;
  border: 1px solid #d1d5db;
  border-radius: 20px;
  background: #f9fafb;
  color: #374151;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.uf-template-btn:hover {
  background: #e5e7eb;
  border-color: #9ca3af;
}

.uf-message-container {
  padding: 20px;
}

.uf-message-input {
  width: 100%;
  min-height: 100px;
  padding: 12px;
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  font-family: inherit;
  font-size: 14px;
  resize: vertical;
  transition: border-color 0.2s ease;
}

.uf-message-input:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.uf-char-count {
  text-align: right;
  font-size: 12px;
  color: #6b7280;
  margin-top: 4px;
}

.uf-char-count.uf-over-limit {
  color: #dc2626;
}

.uf-quick-chat-actions {
  padding: 16px 20px;
  border-top: 1px solid #e5e7eb;
  text-align: right;
}

.uf-send-btn {
  background: #059669;
  color: white;
  padding: 8px 24px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 500;
}

.uf-send-btn:hover {
  background: #047857;
}

.uf-send-btn:disabled {
  background: #9ca3af;
  cursor: not-allowed;
}

/* ===== CHAT TIMELINE MODAL ===== */

.uf-chat-timeline-modal {
  z-index: 15000;
}

.uf-chat-timeline-content {
  max-width: 700px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
}

.uf-chat-meta {
  display: flex;
  gap: 12px;
  align-items: center;
  font-size: 12px;
  color: #6b7280;
}

.uf-message-count {
  background: #f3f4f6;
  padding: 2px 8px;
  border-radius: 12px;
}

.uf-chat-messages {
  flex: 1;
  padding: 16px;
  overflow-y: auto;
  max-height: 400px;
  background: #f9fafb;
}

.uf-chat-message {
  margin-bottom: 12px;
  max-width: 80%;
}

.uf-chat-message.uf-chat-in {
  align-self: flex-start;
}

.uf-chat-message.uf-chat-out {
  align-self: flex-end;
  margin-left: auto;
}

.uf-message-content {
  padding: 8px 12px;
  border-radius: 12px;
  margin-bottom: 4px;
  word-wrap: break-word;
}

.uf-chat-in .uf-message-content {
  background: white;
  border: 1px solid #e5e7eb;
  border-bottom-left-radius: 4px;
}

.uf-chat-out .uf-message-content {
  background: #3b82f6;
  color: white;
  border-bottom-right-radius: 4px;
}

.uf-message-meta {
  font-size: 11px;
  color: #9ca3af;
  padding: 0 4px;
}

.uf-chat-out .uf-message-meta {
  text-align: right;
}

.uf-message-time {
  margin-left: 4px;
}

.uf-chat-image {
  max-width: 200px;
  border-radius: 8px;
}

.uf-chat-file {
  color: #3b82f6;
  text-decoration: none;
}

.uf-chat-file:hover {
  text-decoration: underline;
}

.uf-quick-reply-container {
  display: flex;
  gap: 8px;
  padding: 16px;
  border-top: 1px solid #e5e7eb;
}

.uf-quick-reply-input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 20px;
  font-size: 14px;
}

.uf-quick-reply-input:focus {
  outline: none;
  border-color: #3b82f6;
}

.uf-reply-btn {
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 18px;
  background: #3b82f6;
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.uf-reply-btn:hover {
  background: #2563eb;
}

.uf-chat-footer-actions {
  padding: 16px;
  border-top: 1px solid #e5e7eb;
  text-align: center;
}

/* ===== AUDIO TIMELINE MODAL ===== */

.uf-audio-timeline-modal {
  z-index: 15000;
}

.uf-audio-timeline-content {
  max-width: 800px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
}

.uf-audio-stats {
  display: flex;
  gap: 16px;
  font-size: 12px;
  color: #6b7280;
}

.uf-audio-stats span {
  background: #f3f4f6;
  padding: 4px 8px;
  border-radius: 8px;
}

.uf-audio-player-container {
  padding: 20px;
  border-bottom: 1px solid #e5e7eb;
  background: #f9fafb;
}

.uf-player-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.uf-now-playing {
  flex: 1;
}

.uf-playing-title {
  font-weight: 600;
  color: #111827;
}

.uf-playing-meta {
  font-size: 12px;
  color: #6b7280;
}

.uf-player-controls {
  display: flex;
  gap: 8px;
}

.uf-player-btn {
  padding: 6px 12px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background: white;
  cursor: pointer;
  font-size: 12px;
}

.uf-player-btn:hover:not(:disabled) {
  background: #f3f4f6;
}

.uf-player-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.uf-audio-player {
  width: 100%;
  height: 40px;
}

.uf-audio-timeline-list {
  flex: 1;
  padding: 16px;
  overflow-y: auto;
  max-height: 300px;
}

.uf-timeline-call-item {
  padding: 12px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  margin-bottom: 8px;
  background: white;
  transition: all 0.2s ease;
  position: relative;
}

.uf-timeline-call-item.uf-has-audio {
  cursor: pointer;
}

.uf-timeline-call-item.uf-has-audio:hover {
  border-color: #3b82f6;
  box-shadow: 0 2px 4px rgba(59, 130, 246, 0.1);
}

.uf-timeline-call-item.uf-playing {
  border-color: #059669;
  background: #ecfdf5;
  box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.1);
}

.uf-timeline-call-item.uf-needs-attention {
  border-color: #f59e0b;
  background: #fefbf2;
}

.uf-call-item-header {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 6px;
}

.uf-call-direction {
  font-size: 16px;
}

.uf-call-date {
  font-weight: 500;
  color: #374151;
  flex: 1;
}

.uf-call-duration {
  color: #059669;
  font-weight: 500;
  font-family: monospace;
}

.uf-call-score {
  font-weight: 600;
  font-size: 12px;
  background: rgba(0, 0, 0, 0.05);
  padding: 2px 6px;
  border-radius: 4px;
}

.uf-call-item-content {
  font-size: 13px;
  color: #6b7280;
}

.uf-call-result {
  margin-bottom: 4px;
}

.uf-call-topic {
  font-style: italic;
  margin-bottom: 4px;
}

.uf-call-manager {
  font-size: 11px;
}

.uf-audio-indicator {
  position: absolute;
  top: 8px;
  right: 8px;
  background: #059669;
  color: white;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 11px;
}

.uf-key-moments-count {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: #7c3aed;
  color: white;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 11px;
}

/* ===== KEY MOMENTS PANEL ===== */

.uf-key-moments-panel {
  padding: 16px;
  border-top: 1px solid #e5e7eb;
  background: #f9fafb;
  display: none;
}

.uf-key-moments-panel h4 {
  margin: 0 0 8px 0;
  color: #374151;
  font-size: 14px;
}

.uf-moments-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.uf-moment-item {
  display: flex;
  gap: 8px;
  padding: 6px 8px;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.uf-moment-item:hover {
  border-color: #3b82f6;
  background: #eff6ff;
}

.uf-moment-time {
  font-family: monospace;
  font-weight: 600;
  color: #3b82f6;
  min-width: 50px;
}

.uf-moment-desc {
  flex: 1;
  color: #374151;
  font-size: 13px;
}

/* ===== RESPONSIVE DESIGN ===== */

@media (max-width: 768px) {
  .uf-quick-chat-content,
  .uf-chat-timeline-content,
  .uf-audio-timeline-content {
    width: 95vw;
    max-width: none;
    max-height: 90vh;
  }

  .uf-chat-platforms {
    gap: 2px;
  }

  .uf-platform-btn {
    width: 28px;
    height: 28px;
    font-size: 12px;
  }

  .uf-quick-templates {
    flex-direction: column;
    gap: 4px;
  }

  .uf-template-btn {
    text-align: left;
  }

  .uf-audio-stats {
    flex-direction: column;
    gap: 4px;
  }

  .uf-player-info {
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
  }

  .uf-call-item-header {
    flex-wrap: wrap;
    gap: 6px;
  }

  .uf-moment-item {
    flex-direction: column;
    gap: 4px;
  }
}

/* ===== ANIMATIONS ===== */

@keyframes uf-fade-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.uf-quick-chat-modal,
.uf-chat-timeline-modal,
.uf-audio-timeline-modal {
  animation: uf-fade-in 0.3s ease;
}

.uf-timeline-call-item.uf-playing {
  animation: uf-playing-pulse 2s ease-in-out infinite alternate;
}

@keyframes uf-playing-pulse {
  from { box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.1); }
  to { box-shadow: 0 0 0 6px rgba(5, 150, 105, 0.05); }
}

/* Assignment Settings Styles */
.uf-assignment-stats {
  background: var(--bg-primary, #f5f5f7);
  border-radius: 12px;
  padding: 16px;
  margin: 8px 0;
}

.uf-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 16px;
}

.uf-stat-card {
  background: var(--bg-card, #fff);
  border-radius: 8px;
  padding: 12px;
  text-align: center;
  border: 1px solid var(--border, #e2e8f0);
}

.uf-stat-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--primary, #007aff);
  line-height: 1;
  margin-bottom: 4px;
}

.uf-stat-label {
  font-size: 12px;
  color: var(--text-muted, #8e8e93);
  text-transform: uppercase;
  font-weight: 500;
}

.uf-assignment-users {
  margin: 8px 0;
}

.uf-user-config-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-card, #fff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 8px;
  transition: border-color 0.2s;
}

.uf-user-config-card:hover {
  border-color: var(--primary, #007aff);
}

.uf-user-info {
  flex: 1;
}

.uf-user-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--text-primary, #1d1d1f);
  margin-bottom: 4px;
}

.uf-user-details {
  font-size: 12px;
  color: var(--text-muted, #8e8e93);
}

.uf-user-actions {
  display: flex;
  gap: 8px;
}

.uf-btn.small {
  padding: 4px 8px;
  font-size: 12px;
  border-radius: 4px;
}

/* User Card Action Buttons */
.user-card {
  position: relative;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 8px;
  background: var(--bg-card, #fff);
}

.user-card.configured {
  background: rgba(34, 197, 94, 0.05);
  border-color: var(--success, #22c55e);
}

.user-actions {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  gap: 4px;
}

.btn-edit, .btn-delete {
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 4px;
  font-size: 14px;
  opacity: 0.7;
  transition: all 0.2s;
}

.btn-edit:hover {
  background: var(--primary, #007aff);
  opacity: 1;
  transform: scale(1.1);
}

.btn-delete:hover {
  background: var(--danger, #ef4444);
  opacity: 1;
  transform: scale(1.1);
}

.user-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-right: 60px;
}

.user-name {
  font-weight: 500;
  color: var(--text-primary, #1d1d1f);
}

.user-workload, .user-skills {
  font-size: 12px;
  color: var(--text-muted, #8e8e93);
}

.user-status {
  margin-top: 8px;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 10px;
  display: inline-block;
  font-weight: 500;
}

.user-status.available {
  background: var(--success, #22c55e);
  color: white;
}

.user-status.unavailable {
  background: var(--text-muted, #8e8e93);
  color: white;
}

.users-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.uf-form-group {
  margin-bottom: 16px;
}

.uf-form-group label {
  display: block;
  margin-bottom: 4px;
  font-weight: 500;
  font-size: 13px;
  color: var(--text-primary, #1d1d1f);
}

.uf-form-select,
.uf-form-input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 6px;
  font-size: 14px;
  background: var(--bg-card, #fff);
  color: var(--text-primary, #1d1d1f);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.uf-form-select:focus,
.uf-form-input:focus {
  outline: none;
  border-color: var(--primary, #007aff);
  box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.1);
}

.uf-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border, #e2e8f0);
}

.uf-empty-state {
  text-align: center;
  padding: 24px;
  color: var(--text-muted, #8e8e93);
  font-style: italic;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .uf-stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .uf-user-config-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .uf-user-actions {
    align-self: flex-end;
  }

  .uf-modal-actions {
    flex-direction: column-reverse;
  }
}


/* ── UNIVERSAL FUNNEL DETAIL PANEL (KeyCRM-style) ─── */
.uf-detail-backdrop {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0;   /* запас: inset зʼявився в Chrome 87 */
  inset: 0; background: rgba(0,0,0,0.3);
  z-index: 1000; opacity: 0; transition: opacity 0.3s;
  pointer-events: none;
}
.uf-detail-backdrop.visible { opacity: 1; pointer-events: auto; }

.uf-detail-panel {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(1100px, 95vw);
  background: var(--bg-card);
  z-index: 1001;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.32,0.72,0,1);
  display: flex; flex-direction: column;
  box-shadow: -4px 0 32px rgba(0,0,0,0.15);
}
.uf-detail-panel.open { transform: translateX(0); }

.uf-dp-wrap {
  display: flex; flex: 1; overflow: hidden; height: 100%;
}

/* LEFT panel */
.uf-dp-left { width: 52%; border-right: 1px solid var(--border);
  display: flex; flex-direction: column; overflow: hidden;
}
.uf-dp-header {
  padding: 16px 20px; border-bottom: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 10px;
}
.uf-dp-title-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.uf-dp-stage-badge {
  padding: 3px 10px; border-radius: 12px; font-size: 12px; font-weight: 500;
}
.uf-dp-name {
  font-size: 15px; font-weight: 600; flex: 1; outline: none;
  border-radius: 4px; padding: 2px 4px;
}
.uf-dp-name:hover { background: var(--bg); }
.uf-dp-name:focus { background: var(--bg); box-shadow: 0 0 0 2px var(--accent); }
.uf-dp-header-actions {
  display: flex; align-items: center; gap: 8px;
}
.uf-dp-stage-select {
  flex: 1; padding: 6px 10px; border: 1px solid var(--border);
  border-radius: 8px; font-size: 13px; background: var(--bg); color: var(--text);
}
.uf-dp-close-btn {
  width: 40px; height: 40px; background: var(--bg-secondary); border: 1px solid var(--border);
  border-radius: 10px; cursor: pointer; font-size: 18px; color: var(--text);
  display: flex; align-items: center; justify-content: center;
  z-index: 10; position: relative; font-weight: 600;
  transition: all 0.2s ease; margin-right: 12px; flex-shrink: 0;
}
.uf-dp-close-btn:hover {
  background: var(--bg); color: var(--text);
  border-color: var(--accent); transform: scale(1.05);
}

.uf-dp-body { flex: 1; overflow-y: auto; padding: 16px 20px; }

.uf-dp-section { margin-bottom: 20px; }
.uf-dp-section-title {
  font-size: 11px; font-weight: 600; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 10px;
}
.uf-dp-section-title-row {
  display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;
}
.uf-dp-section-title-row .uf-dp-section-title { margin-bottom: 0; }

.uf-dp-contact-card {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px; background: var(--bg); border-radius: 10px; border: 1px solid var(--border);
}
.uf-dp-contact-avatar {
  width: 40px; height: 40px; border-radius: 50%; background: var(--accent);
  color: white; display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 600; flex-shrink: 0;
}
.uf-dp-contact-info { flex: 1; }
.uf-dp-contact-name { font-size: 14px; font-weight: 500; }
.uf-dp-contact-phone { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.uf-dp-contact-btns { display: flex; gap: 6px; flex-direction: column; }
.uf-dp-action-btn {
  padding: 5px 10px; border-radius: 6px; border: none; cursor: pointer;
  font-size: 12px; font-weight: 500; white-space: nowrap;
}
.uf-dp-call-btn { background: #dcfce7; color: #16a34a; }
.uf-dp-call-btn:hover { background: #bbf7d0; }
.uf-dp-msg-btn { background: var(--accent); color: white; }
.uf-dp-msg-btn:hover { opacity: 0.85; }

.uf-dp-meta-grid { display: flex; flex-direction: column; gap: 0; }
.uf-dp-meta-row {
  display: flex; align-items: flex-start; padding: 8px 0;
  border-bottom: 1px solid var(--border-light, rgba(0,0,0,0.05));
}
.uf-dp-meta-row:last-child { border-bottom: none; }
.uf-dp-meta-label { width: 140px; font-size: 13px; color: var(--text-muted); flex-shrink: 0; }
.uf-dp-meta-value { font-size: 13px; display: flex; align-items: center; gap: 6px; }
.uf-dp-prio-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.uf-dp-overdue { color: #ef4444; font-weight: 500; }

.uf-dp-notes {
  width: 100%; padding: 8px 10px; border: 1px solid var(--border);
  border-radius: 8px; font-size: 13px; background: var(--bg); color: var(--text);
  resize: vertical; font-family: inherit;
}

.uf-dp-products-empty { font-size: 13px; color: var(--text-muted); text-align: center; padding: 16px; }
.uf-dp-products-total { text-align: right; font-size: 13px; padding: 4px 0; }
.uf-dp-add-product-btn {
  padding: 4px 10px; background: var(--accent); color: white; border: none;
  border-radius: 6px; font-size: 12px; cursor: pointer;
}

.uf-dp-footer {
  padding: 12px 20px; border-top: 1px solid var(--border);
  display: flex; gap: 10px;
}
.uf-dp-btn-reject {
  flex: 1; padding: 10px; background: #fee2e2; color: #dc2626;
  border: none; border-radius: 8px; font-size: 13px; font-weight: 500; cursor: pointer;
}
.uf-dp-btn-reject:hover { background: #fecaca; }
.uf-dp-btn-success {
  flex: 2; padding: 10px; background: var(--accent); color: white;
  border: none; border-radius: 8px; font-size: 13px; font-weight: 500; cursor: pointer;
}
.uf-dp-btn-success:hover { opacity: 0.85; }

/* RIGHT panel */
.uf-dp-right {
  flex: 1; display: flex; flex-direction: column; overflow: hidden;
}
.uf-dp-tabs {
  display: flex; border-bottom: 1px solid var(--border); padding: 0 16px; gap: 4px;
}
.uf-dp-tab {
  width: 40px; height: 44px; display: flex; align-items: center; justify-content: center;
  border: none; background: none; cursor: pointer; color: var(--text-muted);
  border-bottom: 2px solid transparent; margin-bottom: -1px; transition: all 0.15s;
}
.uf-dp-tab:hover { color: var(--text); }
.uf-dp-tab.active { color: var(--accent); border-bottom-color: var(--accent); }

.uf-dp-tab-content { flex: 1; overflow: hidden; display: flex; flex-direction: column; }
.uf-dp-tab-pane { flex: 1; display: flex; flex-direction: column; overflow: hidden; }

/* Comments */
.uf-dp-comments-list { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.uf-dp-comment-item { background: var(--bg); border-radius: 8px; padding: 10px 12px; }
.uf-dp-comment-header { display: flex; justify-content: space-between; margin-bottom: 4px; font-size: 12px; }
.uf-dp-comment-header strong { font-weight: 600; }
.uf-dp-comment-header span { color: var(--text-muted); }
.uf-dp-comment-body { font-size: 13px; }
.uf-dp-comment-input {
  display: flex; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--border);
  align-items: flex-end;
}
.uf-dp-comment-input textarea {
  flex: 1; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px;
  font-size: 13px; background: var(--bg); color: var(--text); resize: none; font-family: inherit;
}
.uf-dp-send-btn {
  width: 36px; height: 36px; background: var(--accent); color: white;
  border: none; border-radius: 8px; cursor: pointer; display: flex;
  align-items: center; justify-content: center; flex-shrink: 0;
}
.uf-dp-send-btn:hover { opacity: 0.85; }

/* Chat */
.uf-dp-chat-platforms { display: flex; gap: 6px; padding: 10px 16px; border-bottom: 1px solid var(--border); }
.uf-dp-platform-btn {
  padding: 4px 12px; border-radius: 14px; border: 1px solid var(--border);
  background: none; font-size: 12px; cursor: pointer; color: var(--text-muted);
}
.uf-dp-platform-btn.active { background: var(--accent); color: white; border-color: var(--accent); }
.uf-dp-chat-history { flex: 1; overflow-y: auto; padding: 16px; }
.uf-dp-chat-input {
  display: flex; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--border); align-items: flex-end;
}
.uf-dp-chat-input textarea {
  flex: 1; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px;
  font-size: 13px; background: var(--bg); color: var(--text); resize: none; font-family: inherit;
}

/* History */
.uf-dp-history-list { padding: 16px; display: flex; flex-direction: column; gap: 0; }
.uf-dp-history-item { display: flex; gap: 12px; padding: 8px 0; position: relative; }
.uf-dp-history-item:not(:last-child)::before {
  content: ''; position: absolute; left: 7px; top: 22px; bottom: -8px;
  width: 2px; background: var(--border);
}
.uf-dp-history-dot {
  width: 16px; height: 16px; border-radius: 50%; background: var(--accent);
  flex-shrink: 0; margin-top: 2px; border: 2px solid var(--bg-card);
}
.uf-dp-history-content { flex: 1; }
.uf-dp-history-action { font-size: 13px; font-weight: 500; }
.uf-dp-history-meta { font-size: 11px; color: var(--text-muted); margin-top: 2px; }

/* Shared */
.uf-dp-loading { padding: 20px; text-align: center; color: var(--text-muted); font-size: 13px; }
.uf-dp-empty-state { padding: 40px; text-align: center; color: var(--text-muted); font-size: 13px; }

/* На десктопі приховати мобільні елементи */
.uf-mobile-header { display: none; }
.uf-mobile-tabs { display: none; }
.uf-mobile-stage-select { display: none; }

@media (max-width: 768px) {
  .uf-detail-panel {
    width: 100vw;
  }

  /* Головний контейнер — вертикально */
  .uf-dp-wrap {
    flex-direction: column;
    overflow: hidden;
  }

  /* Таби після покупця — стилізовані */
  .uf-mobile-tabs {
    display: flex !important;
    flex-direction: row;
    background: var(--bg-secondary, #f1f5f9);
    border-radius: 16px;
    margin: 12px 16px;
    padding: 4px;
    gap: 2px;
  }

  /* Ліва панель — flex-колонка, тільки body скролиться */
  .uf-dp-left {
    width: 100%;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-right: none;
  }

  /* Body скролиться всередині */
  .uf-dp-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Footer залишається знизу */
  .uf-dp-footer {
    flex-shrink: 0;
    padding: 10px 16px;
  }

  /* Права панель прихована */
  .uf-dp-right {
    display: none !important;
  }

  /* Сховати header на мобільному */
  .uf-dp-header {
    display: none;
  }

  /* Телефон не розбивається */
  .uf-dp-contact-phone {
    word-break: keep-all !important;
    white-space: nowrap !important;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Кнопки контакту — переносимо під інфо */
  .uf-dp-contact-card {
    flex-wrap: wrap;
    gap: 10px;
  }

  .uf-dp-contact-btns {
    flex-basis: 100%;
    flex-shrink: 0;
    flex-direction: row;
    gap: 8px;
  }

  .uf-dp-contact-btns button {
    flex: 1;
    min-width: 0;
    font-size: 12px;
    padding: 7px 8px;
    white-space: nowrap;
  }

  .uf-mobile-tab-btn {
    flex: 1;
    padding: 8px 4px;
    border: none;
    background: transparent;
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: var(--text-muted, #94a3b8);
  }

  .uf-mobile-tab-btn span {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.2px;
  }

  .uf-mobile-tab-btn.active {
    background: var(--bg-card, #fff);
    color: var(--accent, #6366f1);
    box-shadow: 0 1px 6px rgba(0,0,0,0.08);
  }

  .uf-mobile-tab-btn:active {
    transform: scale(0.94);
  }

  /* Панель що виїжджає */
  .uf-mobile-tab-panel {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: var(--bg-card);
    z-index: 1100;
    transform: translateX(100%);
    transition: transform 0.28s cubic-bezier(0.32,0.72,0,1);
  }

  .uf-mobile-tab-panel.open {
    transform: translateX(0);
  }

  /* Панель займає весь екран, тож заголовок опинявся під системним рядком
     і вирізом — кнопка «назад» фізично не натискалась. Такий самий відступ
     уже стоїть у заголовка картки ліда. */
  .uf-mobile-tab-panel-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: calc(14px + env(safe-area-inset-top, 0px)) 16px 14px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-card);
    flex-shrink: 0;
    min-height: 54px;
  }

  .uf-mobile-back-btn {
    background: none;
    border: none;
    font-size: 22px;
    cursor: pointer;
    color: var(--accent, #6366f1);
    padding: 0;
    line-height: 1;
    font-weight: 300;
    /* Ціль дотику не менша за 44px, інакше в кнопку важко влучити */
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }

  .uf-mobile-tab-panel-title {
    font-size: 15px;
    font-weight: 600;
  }

  .uf-mobile-tab-panel-body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .uf-dp-meta-label {
    width: 130px !important;
    flex-shrink: 0;
    white-space: nowrap;
  }

  .uf-mobile-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: calc(10px + env(safe-area-inset-top, 0px)) 16px 10px;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    min-height: 54px;
  }

  .uf-mobile-close-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    color: var(--accent, #6366f1);
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    padding: 4px 0;
  }

  .uf-mobile-header-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    max-width: 55%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
.uf-mobile-tab-panel {
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: var(--bg-card);
  z-index: 1100;
  transform: translateX(100%);
  transition: transform 0.28s cubic-bezier(0.32,0.72,0,1);
  pointer-events: none;
}

.uf-mobile-tab-panel.open {
  transform: translateX(0);
  pointer-events: auto;
}

/* ── UF CARD (спрощена, у стилі KeyCRM) ─────────────── */
.uf-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 3px solid var(--uf-card-stripe, var(--accent, #6366f1));
  border-radius: 8px;
  padding: 10px 30px 10px 11px;
  cursor: pointer;
  transition: box-shadow .15s, border-color .15s;
  user-select: none;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.uf-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.uf-card.dragging { opacity: 0.4; }
.uf-card.uf-card-selected { border-color: var(--accent); background: rgba(var(--accent-rgb,99,102,241),0.04); }

.uf-card-created { font-size: 11px; color: var(--text-muted); letter-spacing: .2px; }
.uf-card-title {
  font-size: 13px; font-weight: 600; color: var(--text); line-height: 1.35;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.uf-card-phone { font-size: 11px; color: var(--text-muted); }

.uf-card-mgr { display: flex; align-items: center; gap: 6px; min-width: 0; }
.uf-card-mgr-avatar {
  width: 17px; height: 17px; border-radius: 50%;
  background: var(--bg); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600; color: var(--text-muted); flex-shrink: 0;
}
.uf-card-mgr-name {
  font-size: 11px; color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.uf-card-due {
  align-self: flex-start;
  font-size: 11px; font-weight: 500;
  color: var(--text-muted); background: var(--bg);
  border-radius: 5px; padding: 2px 7px;
}
.uf-card-due.overdue { color: #fff; background: #ef4444; }
/* Контакт, який треба зробити сьогодні. Раніше він виглядав так само, як той,
   що аж наступного тижня — обидва сірі, і черга дня не читалась з дошки. */
.uf-card-due.today { color: #7c4a03; background: #fde68a; }

/* Відмітка контакту в деталях картки. У колонці вона з'їдала місце і тягнула
   увагу на себе на кожній картці — там лишився тільки колір терміну. */
.uf-dp-contact-done {
  border: 1px solid var(--border-input, #e2e8f0);
  background: var(--bg-card-solid, #fff);
  color: var(--text-secondary, #475569);
  border-radius: 8px; padding: 5px 12px;
  font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap;
  transition: border-color .15s, color .15s, background .15s;
}
.uf-dp-contact-done:hover {
  border-color: var(--accent, #6366f1);
  color: var(--accent, #6366f1);
  background: var(--bg-primary, #f8fafc);
}

.uf-contact-pop {
  position: absolute; z-index: 10000; width: 228px;
  background: var(--bg-card-solid, #fff);
  border: 1px solid var(--border-input, #e2e8f0);
  border-radius: 12px; padding: 10px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .16);
}
.uf-contact-pop-title {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--text-muted, #64748b); margin-bottom: 8px;
}
.uf-contact-pop-opts { display: flex; flex-direction: column; gap: 4px; }
.uf-contact-pop-opts button {
  text-align: left; border: none; background: none; cursor: pointer;
  padding: 6px 8px; border-radius: 8px;
  font-size: 13px; color: var(--text-primary, #0f172a);
}
.uf-contact-pop-opts button:hover { background: var(--bg-primary, #f1f5f9); }
.uf-contact-pop-exact {
  display: flex; gap: 6px; margin-top: 8px;
  padding-top: 8px; border-top: 1px solid var(--border-input, #e2e8f0);
}
.uf-contact-pop-dt {
  flex: 1; min-width: 0; font-size: 12px; padding: 5px 6px;
  border: 1px solid var(--border-input, #e2e8f0); border-radius: 7px;
  background: var(--bg-card-solid, #fff); color: var(--text-primary, #0f172a);
}
.uf-contact-pop-set {
  border: none; background: var(--accent, #6366f1); color: #fff;
  border-radius: 7px; padding: 5px 9px; font-size: 12px; cursor: pointer;
}

.uf-card-sum { font-size: 13px; font-weight: 600; color: var(--text); }
.uf-card-sum span { font-weight: 400; color: var(--text-muted); font-size: 11px; }

.uf-card-bottom {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-size: 11px; color: var(--text-muted);
}
.uf-card-src { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.uf-card-time { white-space: nowrap; flex-shrink: 0; }

/* ── UF BULK SELECTION ENHANCED ───────────────────── */
.uf-bulk-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 20px; background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  gap: 12px; flex-wrap: wrap; flex-shrink: 0;
  border-top: 1px solid var(--border);
  background: rgba(var(--accent-rgb,99,102,241),0.02);
}
.uf-bulk-left { display: flex; align-items: center; gap: 10px; }
.uf-bulk-select-all { width: 16px; height: 16px; cursor: pointer; accent-color: var(--accent); }
.uf-bulk-count { font-size: 13px; font-weight: 500; color: var(--text); }
.uf-bulk-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

.uf-bulk-action-btn {
  display: flex; align-items: center; gap: 5px;
  padding: 6px 12px; border: 1px solid var(--border);
  border-radius: 8px; background: var(--bg); font-size: 12px;
  font-weight: 500; cursor: pointer; color: var(--text);
  transition: all 0.15s; white-space: nowrap;
}
.uf-bulk-action-btn:hover:not(:disabled) {
  background: var(--accent); color: white; border-color: var(--accent);
}
.uf-bulk-action-btn:disabled { 
  cursor: not-allowed; opacity: 0.5;
}
.uf-bulk-action-btn.uf-bulk-delete:hover:not(:disabled) {
  background: #ef4444; border-color: #ef4444;
}

/* Show checkboxes in bulk mode */
.uf-bulk-active 
.uf-bulk-active .uf-card { padding-left: 32px !important; }
.uf-bulk-active .uf-card-top { padding-left: 0; }

.uf-btn-secondary {
  padding: 7px 14px; background: none; border: 1px solid var(--border);
  border-radius: 8px; font-size: 13px; cursor: pointer; color: var(--text);
  transition: all 0.15s; white-space: nowrap;
}
.uf-btn-secondary:hover { background: var(--bg-card); }
.uf-btn-secondary.active {
  background: var(--accent); color: white; border-color: var(--accent);
}

/* Bulk checkbox styling */


/* Card positioning for bulk mode */
.uf-card { position: relative; }

/* Modal overlay for bulk prompts */
.uf-modal-overlay {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0;   /* запас: inset зʼявився в Chrome 87 */
  inset: 0; background: rgba(0,0,0,0.4); z-index: 10000;
  display: flex; align-items: center; justify-content: center; padding: 20px;
}

/* Bulk checkboxes - hidden by default, shown in bulk mode */

.uf-bulk-active 
.uf-bulk-active .uf-card { padding-left: 30px !important; }





/* ── BULK CHECKBOXES ───── */

.uf-card {
  padding-left: 30px;
}


/* ── BULK CHECKBOXES - hover to show ── */
.uf-bulk-cb {
  display: none;
  position: absolute;
  top: 8px;
  left: 8px;
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: #6366f1;
  z-index: 10;
}
.uf-card:hover .uf-bulk-cb,
.uf-card.uf-card-selected .uf-bulk-cb {
  display: block;
}
.uf-card:has(.uf-bulk-cb:checked) {
  padding-left: 28px;
}
.uf-card:hover {
  padding-left: 28px;
}

/* Toggle Components for Funnel Settings */
.uf-toggle-group {
  display: flex;
  flex-direction: column;
  margin-bottom: 16px;
}

.uf-toggle-label {
  font-weight: 500;
  color: var(--text);
  margin-bottom: 8px;
}

.uf-toggle-wrapper {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 24px;
  margin-bottom: 4px;
}

.uf-toggle-wrapper input {
  opacity: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  cursor: pointer;
  z-index: 2;
}

.uf-toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  border-radius: 24px;
  transition: .4s;
}

.uf-toggle-slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  border-radius: 50%;
  transition: .4s;
}

.uf-toggle-wrapper input:checked + .uf-toggle-slider {
  background-color: var(--accent, #6366f1);
}

.uf-toggle-wrapper input:checked + .uf-toggle-slider:before {
  transform: translateX(26px);
}

.uf-toggle-wrapper input:focus + .uf-toggle-slider {
  box-shadow: 0 0 1px var(--accent, #6366f1);
}

/* Form Section Styling */
.uf-form-section {
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

.uf-form-section:last-of-type {
  border-bottom: none;
}

.uf-form-section h4 {
  margin: 0 0 16px 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
}

.uf-form-group {
  margin-bottom: 16px;
}

.uf-form-group:last-child {
  margin-bottom: 0;
}

.uf-form-group label {
  display: block;
  margin-bottom: 6px;
  font-weight: 500;
  color: var(--text);
}

.uf-form-group select[multiple] {
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
}

.uf-form-group select {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
}

/* Products and Payments Sections */
.uf-dp-add-product-btn,
.uf-dp-add-payment-btn {
  padding: 4px 8px;
  background: var(--accent, #6366f1);
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.uf-dp-add-product-btn:hover,
.uf-dp-add-payment-btn:hover {
  background: var(--accent-dark, #4f46e5);
  transform: translateY(-1px);
}

.uf-dp-products-list,
.uf-dp-payments-list {
  margin: 8px 0;
  min-height: 40px;
}

.uf-dp-products-empty,
.uf-dp-payments-empty {
  color: var(--text-muted);
  font-style: italic;
  text-align: center;
  padding: 12px;
  background: var(--bg-secondary);
  border-radius: 6px;
  font-size: 13px;
}

.uf-dp-products-total,
.uf-dp-payments-total {
  text-align: right;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  margin-top: 8px;
  font-size: 14px;
  color: var(--text);
}

.uf-dp-section-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

/* ── INBOX FILE MESSAGES ENHANCED ── */
.inbox-msg-file {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  text-decoration: none;
  color: var(--text);
  min-width: 180px;
  max-width: 260px;
  transition: background 0.15s;
}
.inbox-msg-file:hover { background: var(--bg-card); }
/* Іконка тепер SVG, а не емодзі — розмір задає сам малюнок. */
.inbox-msg-file-icon { flex-shrink: 0; display: inline-flex; align-items: center; opacity: 0.7; }
/* Формат файлу окремою міткою: видно тип, навіть коли довга назва обрізана. */
.inbox-msg-file-ext {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.4px;
  padding: 2px 5px;
  border-radius: 4px;
  background: var(--accent, #3b82f6);
  color: #fff;
}
.inbox-msg-file-name {
  font-size: 13px; font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  flex: 1;
}
.inbox-msg-file-dl {
  font-size: 16px; color: var(--accent); flex-shrink: 0;
}

/* ── FUNNEL ARCHIVE TOGGLE ── */
#uf-archive-btn.active {
  background: var(--accent) !important;
  color: white !important;
  border-color: var(--accent) !important;
}
.uf-archive-badge {
  font-size: 11px;
  background: rgba(255,255,255,0.3);
  padding: 1px 4px;
  border-radius: 4px;
  margin-left: 2px;
}

/* Form inputs for settings/trigger modal */
.form-input {
  width: 100%;
  padding: 8px 12px;
  border: 1.5px solid #e2e8f0;
  border-radius: 8px;
  font-size: 14px;
  background: #fff;
  color: #1d1d1f;
  transition: border-color .2s, box-shadow .2s;
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  font-family: inherit;
}
.form-input:focus {
  outline: none;
  border-color: var(--accent, #6366f1);
  box-shadow: 0 0 0 3px rgba(99,102,241,.1);
}
.form-input:hover {
  border-color: #c7d2fe;
}
select.form-input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2364748b' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 32px;
  cursor: pointer;
}
.form-input::placeholder {
  color: #94a3b8;
}

/* Disable pull-to-refresh on mobile */
html, body {
  overscroll-behavior-y: contain;
}

/* Inbox resolve button */
.inbox-resolve-btn {
  transition: all 0.2s;
}
.inbox-resolve-btn:hover {
  background: #16a34a !important;
  transform: scale(1.02);
}

/* Platform icon in header */
.inbox-conv-meta {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Message grouping - remove top margin for consecutive messages */
.inbox-msg.grouped {
  margin-top: 2px !important;
}
.inbox-msg.grouped .inbox-msg-time {
  display: none;
}
.inbox-msg.grouped:last-in-group .inbox-msg-time {
  display: inline;
}

/* Inbox Settings Panel */
.inbox-settings-panel {
  position: fixed;
  top: 0; right: 0;
  width: 320px;
  height: 100vh;
  background: var(--bg-primary, #fff);
  z-index: 500;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: -4px 0 24px rgba(0,0,0,0.12);
  border-left: 1px solid var(--border-color, #e2e8f0);
  transform: translateX(100%);
  transition: transform 0.25s ease;
}
.inbox-settings-panel.open {
  transform: translateX(0);
}
.inbox-settings-backdrop {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;   /* запас: inset зʼявився в Chrome 87 */
  inset: 0;
  background: rgba(0,0,0,0.2);
  z-index: 499;
  display: none;
}
.inbox-settings-backdrop.open { display: block; }
.inbox-settings-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  border-bottom: 1px solid var(--border-color, #e2e8f0);
  font-weight: 600;
}
.inbox-settings-panel-header h3 { margin: 0; font-size: 15px; }
.inbox-settings-close {
  background: none; border: none; font-size: 20px;
  cursor: pointer; color: var(--text-muted, #64748b);
  width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
  border-radius: 6px;
}
.inbox-settings-close:hover { background: var(--bg-hover, #f1f5f9); }
.inbox-settings-body {
  flex: 1; overflow-y: auto; padding: 0 16px 16px;
}
.inbox-settings-section {
  padding: 14px 0;
  border-bottom: 1px solid var(--border-color, #e2e8f0);
}
.inbox-settings-section:last-child { border-bottom: none; }
.inbox-settings-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted, #64748b);
  margin-bottom: 10px;
}
.inbox-settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 13px;
}
.inbox-settings-select {
  font-size: 12px;
  padding: 4px 8px;
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 6px;
  background: var(--bg-primary, #fff);
  color: var(--text-primary, #1e293b);
}
.inbox-settings-textarea {
  width: 100%;
  margin-top: 8px;
  padding: 8px;
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 6px;
  font-size: 12px;
  resize: vertical;
  min-height: 60px;
  box-sizing: border-box;
  background: var(--bg-primary, #fff);
  color: var(--text-primary, #1e293b);
}
/* Availability buttons */
.inbox-availability-btns {
  display: flex; gap: 6px; flex-wrap: wrap;
}
.inbox-avail-btn {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 8px;
  border: 1px solid var(--border-color, #e2e8f0);
  background: var(--bg-secondary, #f8fafc);
  font-size: 12px; cursor: pointer;
  transition: all 0.15s;
}
.inbox-avail-btn.active {
  border-color: var(--accent, #6366f1);
  background: var(--accent-light, #ede9fe);
  color: var(--accent, #6366f1);
  font-weight: 600;
}
.inbox-avail-dot {
  width: 8px; height: 8px; border-radius: 50%;
}
.inbox-avail-dot.online { background: #22c55e; }
.inbox-avail-dot.busy { background: #f59e0b; }
.inbox-avail-dot.offline { background: #94a3b8; }
/* Toggle switch */
.inbox-toggle {
  position: relative; display: inline-block;
  width: 36px; height: 20px; flex-shrink: 0;
}
.inbox-toggle input { opacity: 0; width: 0; height: 0; }
.inbox-toggle-slider {
  position: absolute; cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background: #cbd5e1; border-radius: 20px;
  transition: 0.2s;
}
.inbox-toggle-slider:before {
  position: absolute; content: '';
  height: 14px; width: 14px; left: 3px; bottom: 3px;
  background: white; border-radius: 50%; transition: 0.2s;
}
.inbox-toggle input:checked + .inbox-toggle-slider { background: #6366f1; }
.inbox-toggle input:checked + .inbox-toggle-slider:before { transform: translateX(16px); }
/* Business hours */
.inbox-bh-row {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 6px; font-size: 12px;
}
.inbox-time-input {
  padding: 3px 6px; border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 4px; font-size: 11px; width: 80px;
  background: var(--bg-primary, #fff);
}
/* Compact mode */
#inbox-messages.compact .inbox-msg { margin-bottom: 2px; }
#inbox-messages.compact .inbox-msg-bubble { padding: 4px 10px; }

/* Archive cards mobile layout */
@media (max-width: 768px) {
  .uf-archive-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px;
  }

  .uf-archive-item * {
    white-space: normal !important;
    word-break: break-word;
  }

  .uf-archive-item-header {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
  }

  .uf-archive-item-phone,
  .uf-archive-item-name {
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap !important;
  }
}

/* Resolved/closed chats in sidebar */
.inbox-chat-item.resolved {
  opacity: 0.6;
}
.inbox-chat-item.resolved .inbox-chat-name {
  text-decoration: line-through;
  color: var(--text-muted, #94a3b8);
}
.inbox-chat-item.resolved::after {
  content: '✓';
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 11px;
  color: #22c55e;
  font-weight: 700;
}
.inbox-chat-item {
  position: relative;
}

[data-placeholder]:empty:before {
  content: attr(data-placeholder);
  color: #94a3b8;
  font-style: italic;
  pointer-events: none;
}

.editable-stage { transition: transform 0.2s ease; }
.stage-ghost { opacity: 0.3; background: var(--accent-light, #eef2ff); }
.stage-chosen { box-shadow: 0 4px 16px rgba(0,0,0,0.12); transform: scale(1.02); }
.stage-drag { opacity: 0; }
.stage-handle { cursor: grab; user-select: none; }


/* ── UF Mobile fixes ────────────────────────── */
@media (max-width: 768px) {
  /* 1. Hide filter button — not enough space in header */
  .uf-filter-btn {
    display: none !important;
  }

  /* 2. Stage select in mobile header */
  .uf-mobile-stage-select {
    display: block !important;
    flex-shrink: 0;
    max-width: 130px;
    padding: 6px 8px;
    border: 1.5px solid var(--border);
    border-radius: 8px;
    background: var(--bg-secondary, #f1f5f9);
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    outline: none;
  }

  /* 3. Bigger touch targets for card action buttons (was 24×24) */
  .uf-card-icon-btn {
    width: 44px !important;
    height: 44px !important;
    border-radius: 8px !important;
  }

  /* 4. Bigger touch target for mobile back button */
  .uf-mobile-close-btn {
    min-height: 44px;
    min-width: 44px;
    padding: 8px 4px;
  }

  /* 5. Bulk bar mobile improvements */
  .uf-bulk-bar {
    padding: 8px 12px;
  }

  .uf-bulk-action-btn {
    padding: 8px 12px;
    font-size: 12px;
  }

  /* 6. Bigger checkbox in bulk mode */
  .uf-bulk-select-all {
    width: 20px !important;
    height: 20px !important;
  }

  /* 7. Readable card timestamp */
  .uf-card-time {
    font-size: 11px;
  }

  /* 8. Search input flexible on small screens */
  .uf-search {
    min-width: 0 !important;
    flex: 1;
  }
}

/* Embedded script player — hide irrelevant UI */
.uf-script-embed .sc-header-bar,
.uf-script-embed .sc-contact-header { display: none !important; }
.uf-script-embed .sc-edit-btn { display: none !important; }


/* ══════════════════════════════════════════════════════════
   DESKTOP LOW-RESOLUTION FIXES (min-width: 769px)
   ══════════════════════════════════════════════════════════ */

/* Fix 1: Filters panel offset — icon sidebar is 72px, not 60px */
@media (min-width: 1024px) {
  .uf-filters-panel {
    left: 72px;
  }
}

/* Fix 2: Detail panel — don't overlap icon sidebar */
@media (min-width: 1024px) {
  .uf-detail-panel {
    max-width: calc(100vw - 72px);
  }
}

/* Fix 3: Kanban full-viewport height — body.page-universal-funnel approach */
body.page-universal-funnel {
  overflow: hidden !important;
  height: 100vh !important;
  padding-bottom: 0 !important; /* скасовуємо 100px padding для мобільного nav */
}
body.page-universal-funnel .main-content {
  overflow: hidden !important; /* забороняємо scroll всередині .main-content */
  padding-bottom: 0 !important; /* прибираємо відступ для мобільного nav */
}
body.page-universal-funnel .sidebar { flex-shrink: 0; }
body.page-universal-funnel #page-universal-funnel {
  height: 100vh !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}
/* #page-content — єдиний дочірній flex-item #page-universal-funnel */
body.page-universal-funnel #page-content {
  flex: 1 !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}
/* Безіменний wrapper всередині .uf-page (без класу/id) */
body.page-universal-funnel .uf-page > div:last-child {
  flex: 1 !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}
body.page-universal-funnel .uf-page > div:last-child > div:last-child {
  flex: 1 !important;
  min-height: 0 !important;
  overflow: hidden !important;
}
body.page-universal-funnel .uf-page {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  min-height: 0 !important;
}
body.page-universal-funnel .uf-header {
  flex-shrink: 0 !important;
}
body.page-universal-funnel .uf-content {
  flex: 1 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}
body.page-universal-funnel .uf-kanban {
  flex: 1 !important;
  min-height: 0 !important;
  height: auto !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  align-items: stretch !important;
  scrollbar-width: thin !important;
  scrollbar-color: var(--border) transparent !important;
  padding-bottom: 14px !important;
}
body.page-universal-funnel .uf-kanban::-webkit-scrollbar {
  height: 12px !important;
  display: block !important;
}
body.page-universal-funnel .uf-kanban::-webkit-scrollbar-track {
  background: var(--bg-secondary) !important;
  border-radius: 6px !important;
}
body.page-universal-funnel .uf-kanban::-webkit-scrollbar-thumb {
  background: #b0b0b0 !important;
  border-radius: 6px !important;
  border: 2px solid var(--bg-secondary) !important;
}
body.page-universal-funnel .uf-kanban::-webkit-scrollbar-thumb:hover {
  background: #888 !important;
}
/* Колонки розтягуються на повну висоту канбану */
body.page-universal-funnel .uf-column {
  height: 100% !important;
  max-height: none !important;
  display: flex !important;
  flex-direction: column !important;
}
/* Список карток скролиться всередині колонки */
body.page-universal-funnel .uf-col-items {
  flex: 1 !important;
  min-height: 0 !important;
  overflow-y: auto !important;
}
@media (min-width: 769px) {
  body.page-universal-funnel .uf-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
  }
}

@media (max-width: 768px) {
  /* List view: explicit height for old iOS (flex:1 + height:auto breaks scroll) */
  body.page-universal-funnel .uf-list {
    flex: 1;
    min-height: 0;
    height: calc(100vh - 200px) !important;
    max-height: calc(100vh - 200px) !important;
    overflow-y: scroll !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain;
  }
  /* Kanban: explicit height overrides height:auto so old iOS can scroll horizontally */
  body.page-universal-funnel .uf-kanban {
    height: calc(100vh - 200px) !important;
    max-height: calc(100vh - 200px) !important;
    -webkit-overflow-scrolling: touch !important;
    overflow-x: scroll !important;
    overscroll-behavior-x: contain;
  }
  /* Column items: bounded height so overflow-y:auto actually scrolls on old iOS */
  body.page-universal-funnel .uf-col-items {
    max-height: calc(100vh - 260px) !important;
    overflow-y: scroll !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-y: contain;
  }
}

/* Fix 4: Production analytics — intermediate breakpoint 541–900px */
@media (max-width: 900px) {
  .pa-grid-2 {
    grid-template-columns: 1fr !important;
  }
  .pa-donut-wrap {
    flex-direction: column;
    align-items: center;
  }
  .pa-donut-legend {
    width: 100%;
  }
}

body.page-universal-funnel {
  background: var(--bg-primary, #f5f5f7) !important;
}

/* ═══════════════════════════════════════════════════════════════
   Google Ads — Mobile fixes (≤768px)
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  /* ── Page & header ── */
  .ac-page { padding: 12px 12px 80px; }
  .ac-header { flex-direction: column; gap: 10px; margin-bottom: 12px; }
  .ac-header > div:first-child { width: 100%; }
  .ac-title { font-size: 15px !important; }
  .ac-header-actions { flex-wrap: wrap; gap: 6px; width: 100%; }
  .ac-header-actions select.ac-input { width: 100%; order: -1; flex: 1 1 100%; }
  .ac-header-actions .ac-btn-ghost > span:not(.ac-ic),
  .ac-header-actions .ac-btn-ghost > span:last-child { display: none; }
  .ac-header-actions .ac-btn-ghost { padding: 7px 10px; flex: 0 0 auto; }
  #ac-period-btn #ac-period-label { display: none; }
  .ac-btn-primary { flex: 1 1 auto; justify-content: center; }

  /* ── Period picker: stack date inputs on mobile ── */
  .ac-period-custom { grid-template-columns: 1fr 1fr !important; }
  .ac-period-custom > button { grid-column: 1 / -1; }

  /* ── Card tables: remove overflow, hide thead ── */
  .ac-camp-table,
  .ac-conv-table,
  .ac-dash-acct-table,
  .ac-dash-chan-table,
  .ac-dash-top-table { display: block !important; overflow: visible !important; }
  .ac-camp-table .ac-thead,
  .ac-conv-table .ac-thead,
  .ac-dash-acct-table .ac-thead,
  .ac-dash-chan-table .ac-thead,
  .ac-dash-top-table .ac-thead { display: none !important; }

  /* ── Base card style ── */
  .ac-camp-table .ac-row,
  .ac-conv-table .ac-row,
  .ac-dash-acct-table .ac-row,
  .ac-dash-chan-table .ac-row,
  .ac-dash-top-table .ac-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 6px 10px !important;
    background: var(--bg-card, #fff);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 10px;
    padding: 12px !important;
    margin-bottom: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
    font-size: 13px !important;
  }

  /* ══ CAMPAIGNS TABLE — 11 children: cb/name/type/budget/spend/clicks/conv/value/roas/status/actions ══ */
  .ac-camp-table .ac-row > :nth-child(1)  { display: none !important; }
  .ac-camp-table .ac-row > :nth-child(2)  { grid-column: 1 / 3 !important; grid-row: 1 !important; }
  .ac-camp-table .ac-row > :nth-child(11) { grid-column: 3 !important; grid-row: 1 !important; justify-self: end; align-self: start; }
  .ac-camp-table .ac-row > :nth-child(3)  { grid-column: 1 !important; grid-row: 2 !important; }
  .ac-camp-table .ac-row > :nth-child(4)  { grid-column: 2 !important; grid-row: 2 !important; }
  .ac-camp-table .ac-row > :nth-child(5)  { grid-column: 3 !important; grid-row: 2 !important; }
  .ac-camp-table .ac-row > :nth-child(6)  { grid-column: 1 !important; grid-row: 3 !important; }
  .ac-camp-table .ac-row > :nth-child(7)  { grid-column: 2 !important; grid-row: 3 !important; }
  .ac-camp-table .ac-row > :nth-child(8)  { grid-column: 3 !important; grid-row: 3 !important; }
  .ac-camp-table .ac-row > :nth-child(9)  { grid-column: 1 !important; grid-row: 4 !important; }
  .ac-camp-table .ac-row > :nth-child(10) { grid-column: 2 / 4 !important; grid-row: 4 !important; }
  .ac-camp-table .ac-row > :nth-child(3)::before  { content: "Тип";        display: block; font-size: 11px; color: #9ca3af; margin-bottom: 1px; }
  .ac-camp-table .ac-row > :nth-child(4)::before  { content: "Бюджет/д";   display: block; font-size: 11px; color: #9ca3af; margin-bottom: 1px; }
  .ac-camp-table .ac-row > :nth-child(5)::before  { content: "Витрати 30д"; display: block; font-size: 11px; color: #9ca3af; margin-bottom: 1px; }
  .ac-camp-table .ac-row > :nth-child(6)::before  { content: "Кліки";       display: block; font-size: 11px; color: #9ca3af; margin-bottom: 1px; }
  .ac-camp-table .ac-row > :nth-child(7)::before  { content: "Конверсії";   display: block; font-size: 11px; color: #9ca3af; margin-bottom: 1px; }
  .ac-camp-table .ac-row > :nth-child(8)::before  { content: "Дохід";       display: block; font-size: 11px; color: #9ca3af; margin-bottom: 1px; }
  .ac-camp-table .ac-row > :nth-child(9)::before  { content: "ROAS";        display: block; font-size: 11px; color: #9ca3af; margin-bottom: 1px; }
  .ac-camp-table .ac-row > :nth-child(10)::before { content: "Статус";      display: block; font-size: 11px; color: #9ca3af; margin-bottom: 1px; }

  /* ══ CONVERSIONS TABLE — 8 children: name/type/category/value/conv30d/include/status/actions
     Note: rows have inline display:grid → !important needed                                    ══ */
  .ac-conv-table .ac-row > :nth-child(1) { grid-column: 1 / 3 !important; grid-row: 1 !important; }
  .ac-conv-table .ac-row > :nth-child(8) { grid-column: 3 !important; grid-row: 1 !important; justify-self: end; align-self: start; }
  .ac-conv-table .ac-row > :nth-child(2) { grid-column: 1 !important; grid-row: 2 !important; }
  .ac-conv-table .ac-row > :nth-child(3) { grid-column: 2 !important; grid-row: 2 !important; }
  .ac-conv-table .ac-row > :nth-child(7) { grid-column: 3 !important; grid-row: 2 !important; }
  .ac-conv-table .ac-row > :nth-child(4) { grid-column: 1 !important; grid-row: 3 !important; }
  .ac-conv-table .ac-row > :nth-child(5) { grid-column: 2 !important; grid-row: 3 !important; }
  .ac-conv-table .ac-row > :nth-child(6) { grid-column: 3 !important; grid-row: 3 !important; }
  .ac-conv-table .ac-row > :nth-child(2)::before { content: "Тип";         display: block; font-size: 11px; color: #9ca3af; margin-bottom: 1px; }
  .ac-conv-table .ac-row > :nth-child(3)::before { content: "Категорія";   display: block; font-size: 11px; color: #9ca3af; margin-bottom: 1px; }
  .ac-conv-table .ac-row > :nth-child(4)::before { content: "Значення";    display: block; font-size: 11px; color: #9ca3af; margin-bottom: 1px; }
  .ac-conv-table .ac-row > :nth-child(5)::before { content: "Конв. 30д";   display: block; font-size: 11px; color: #9ca3af; margin-bottom: 1px; }
  .ac-conv-table .ac-row > :nth-child(6)::before { content: "В конверсії"; display: block; font-size: 11px; color: #9ca3af; margin-bottom: 1px; }
  .ac-conv-table .ac-row > :nth-child(7)::before { content: "Статус";      display: block; font-size: 11px; color: #9ca3af; margin-bottom: 1px; }

  /* ══ DASHBOARD — Accounts: name/spend/clicks/conv/value/ROAS ══ */
  .ac-dash-acct-table .ac-row > :nth-child(1) { grid-column: 1 / 4 !important; grid-row: 1 !important; }
  .ac-dash-acct-table .ac-row > :nth-child(2) { grid-column: 1 !important;     grid-row: 2 !important; }
  .ac-dash-acct-table .ac-row > :nth-child(3) { grid-column: 2 !important;     grid-row: 2 !important; }
  .ac-dash-acct-table .ac-row > :nth-child(4) { grid-column: 3 !important;     grid-row: 2 !important; }
  .ac-dash-acct-table .ac-row > :nth-child(5) { grid-column: 1 !important;     grid-row: 3 !important; }
  .ac-dash-acct-table .ac-row > :nth-child(6) { grid-column: 2 !important;     grid-row: 3 !important; }
  .ac-dash-acct-table .ac-row > :nth-child(2)::before { content: "Витрати";  display: block; font-size: 11px; color: #9ca3af; margin-bottom: 1px; }
  .ac-dash-acct-table .ac-row > :nth-child(3)::before { content: "Кліки";    display: block; font-size: 11px; color: #9ca3af; margin-bottom: 1px; }
  .ac-dash-acct-table .ac-row > :nth-child(4)::before { content: "Конв.";    display: block; font-size: 11px; color: #9ca3af; margin-bottom: 1px; }
  .ac-dash-acct-table .ac-row > :nth-child(5)::before { content: "Цінність"; display: block; font-size: 11px; color: #9ca3af; margin-bottom: 1px; }
  .ac-dash-acct-table .ac-row > :nth-child(6)::before { content: "ROAS";     display: block; font-size: 11px; color: #9ca3af; margin-bottom: 1px; }

  /* ══ DASHBOARD — Channels: channel/spend/clicks/conv/value ══ */
  .ac-dash-chan-table .ac-row > :nth-child(1) { grid-column: 1 / 4 !important; grid-row: 1 !important; }
  .ac-dash-chan-table .ac-row > :nth-child(2) { grid-column: 1 !important;     grid-row: 2 !important; }
  .ac-dash-chan-table .ac-row > :nth-child(3) { grid-column: 2 !important;     grid-row: 2 !important; }
  .ac-dash-chan-table .ac-row > :nth-child(4) { grid-column: 3 !important;     grid-row: 2 !important; }
  .ac-dash-chan-table .ac-row > :nth-child(5) { grid-column: 1 / 3 !important; grid-row: 3 !important; }
  .ac-dash-chan-table .ac-row > :nth-child(2)::before { content: "Витрати";  display: block; font-size: 11px; color: #9ca3af; margin-bottom: 1px; }
  .ac-dash-chan-table .ac-row > :nth-child(3)::before { content: "Кліки";    display: block; font-size: 11px; color: #9ca3af; margin-bottom: 1px; }
  .ac-dash-chan-table .ac-row > :nth-child(4)::before { content: "Конв.";    display: block; font-size: 11px; color: #9ca3af; margin-bottom: 1px; }
  .ac-dash-chan-table .ac-row > :nth-child(5)::before { content: "Цінність"; display: block; font-size: 11px; color: #9ca3af; margin-bottom: 1px; }

  /* ══ DASHBOARD — Top campaigns: name/spend/clicks/conv/ROAS ══ */
  .ac-dash-top-table .ac-row > :nth-child(1) { grid-column: 1 / 4 !important; grid-row: 1 !important; }
  .ac-dash-top-table .ac-row > :nth-child(2) { grid-column: 1 !important;     grid-row: 2 !important; }
  .ac-dash-top-table .ac-row > :nth-child(3) { grid-column: 2 !important;     grid-row: 2 !important; }
  .ac-dash-top-table .ac-row > :nth-child(4) { grid-column: 3 !important;     grid-row: 2 !important; }
  .ac-dash-top-table .ac-row > :nth-child(5) { grid-column: 1 !important;     grid-row: 3 !important; }
  .ac-dash-top-table .ac-row > :nth-child(2)::before { content: "Витрати"; display: block; font-size: 11px; color: #9ca3af; margin-bottom: 1px; }
  .ac-dash-top-table .ac-row > :nth-child(3)::before { content: "Кліки";   display: block; font-size: 11px; color: #9ca3af; margin-bottom: 1px; }
  .ac-dash-top-table .ac-row > :nth-child(4)::before { content: "Конв.";   display: block; font-size: 11px; color: #9ca3af; margin-bottom: 1px; }
  .ac-dash-top-table .ac-row > :nth-child(5)::before { content: "ROAS";    display: block; font-size: 11px; color: #9ca3af; margin-bottom: 1px; }

  /* ── Ad groups table: keep 3-column compact ── */
  .ac-adg-table .ac-thead, .ac-adg-table .ac-row { grid-template-columns: 2fr 1fr 1fr !important; }
  .ac-adg-table .ac-thead > *:nth-child(n+4),
  .ac-adg-table .ac-row > *:nth-child(n+4) { display: none; }

  /* ── Generic ac-row fallback (not a card table) ── */
  .ac-row:not(.ac-camp-table .ac-row):not(.ac-adg-table .ac-row):not(.ac-conv-table .ac-row):not(.ac-dash-acct-table .ac-row):not(.ac-dash-chan-table .ac-row):not(.ac-dash-top-table .ac-row) {
    grid-template-columns: 2fr 1fr 1fr !important;
  }

  /* ── Drill-down section ── */
  .ac-drill-top { flex-direction: column; align-items: flex-start; }
  .ac-drill-name { font-size: 14px; white-space: normal; }

  /* ── Competitive grid ── */
  .ac-comp-grid { grid-template-columns: repeat(2,1fr) !important; gap: 8px; }

  /* ── Campaign create form ── */
  .ac-form { min-width: unset !important; width: 100%; }
  .ac-adgroup-form { grid-template-columns: 1fr !important; }

  /* ── Bulk action bar ── */
  .ac-bulk-bar { flex-direction: column; gap: 8px; align-items: stretch; }

  /* ── Recommendations ── */
  .ac-rec-scenarios { grid-template-columns: 1fr !important; }

  /* ── Non-card tables: allow horizontal scroll ── */
  .ac-table:not(.ac-camp-table):not(.ac-conv-table):not(.ac-dash-acct-table):not(.ac-dash-chan-table):not(.ac-dash-top-table) {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .ac-row { font-size: 12px; }
  h2.ac-title, .ac-title { font-size: 14px !important; }
}

/* ── Very small screens (≤480px) ── */
@media (max-width: 480px) {
  .ac-page { padding: 8px 8px 80px; }
  .ac-header-actions .ac-btn { font-size: 12px; padding: 6px 8px; }
}

/* Info button in chat header — opens contact panel on mobile */
.inbox-contact-info-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: none;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  flex-shrink: 0;
  transition: color 0.15s, background 0.15s;
}
.inbox-contact-info-btn:hover { color: var(--accent); background: rgba(37,99,235,0.08); }
@media (max-width: 1024px) {
  .inbox-contact-info-btn { display: flex; }
}



/* ===== INBOX: message delivery status ===== */
.inbox-msg-meta { display: flex; align-items: center; justify-content: flex-end; gap: 3px; }
.inbox-msg-status { font-size: 11px; line-height: 1; }
.inbox-message.out .inbox-msg-status { color: rgba(255,255,255,0.65); }
.inbox-message.out .inbox-msg-status.delivered { color: rgba(255,255,255,0.9); }
.inbox-message.out .inbox-msg-status.read { color: #7ee8a2; }
.inbox-message.in .inbox-msg-status { color: var(--text-muted); }

/* ===== INBOX: scroll-to-bottom FAB ===== */
#inbox-scroll-fab {
  /* Відступ рахуємо від реальної висоти блоку вводу: коли зверху відкрилась
     панель відповіді, кнопка піднімається разом з нею, а не наїжджає на неї. */
  position: absolute;
  bottom: calc(var(--inbox-input-h, 64px) + 10px);
  right: 14px;
  z-index: 20;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  background: var(--bg-card-solid);
  box-shadow: 0 2px 10px rgba(0,0,0,0.18);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-primary);
  transition: opacity 0.2s, transform 0.2s;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
}
#inbox-scroll-fab.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
#inbox-scroll-fab:hover { box-shadow: 0 4px 14px rgba(0,0,0,0.24); }
#inbox-scroll-fab .fab-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  box-sizing: border-box;
}
#inbox-scroll-fab .fab-badge.has-count { display: flex; }
@media (max-width: 768px) {
  #inbox-scroll-fab { right: 10px; }
}

/* Product prices tab layout */
#page-catalog.active { display: flex; flex-direction: column; }
#page-catalog #catalog-tabs { flex-shrink: 0; }
#page-catalog #catalog-content { flex: 1; overflow: auto; }

/* ── Orders toolbar: one consistent control size ──────────────────────────────
   The selects had no min-height and the buttons used 12px vs 14px horizontal
   padding, so "20", "Успішні", "Фільтри", "+ Нове", "Збережені", "CSV" and
   "Колонки" all rendered at slightly different heights and widths.
   Size lives here; colour stays inline because it varies per control. */
.ord-tb {
  min-height: 40px;
  height: 40px;
  padding: 0 14px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
  cursor: pointer;
}
/* native selects need the arrow room and can't use inline-flex reliably */
select.ord-tb {
  display: inline-block;
  padding: 0 30px 0 12px;
  line-height: 38px;
}

/* ТТН: габарити місця на вузькому екрані.
   The row is a 6-column grid (#, вага, довж, шир, вис, ×). `1fr` resolves to
   minmax(auto, 1fr), and an <input type="number"> has a large intrinsic
   min-content width, so the columns refused to shrink and the row overflowed
   the modal on a phone — only the first two fields were reachable.
   Below 600px the row folds into two columns so all four fit. */
@media (max-width: 600px) {
  .ttn-seat-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    align-items: start !important;
  }
  .ttn-seat-row > div:first-child {
    grid-column: 1 / -1;
    text-align: left !important;
    padding-bottom: 0 !important;
    font-weight: 600;
  }
  .ttn-seat-row > div:last-child {
    grid-column: 1 / -1;
    justify-content: flex-end !important;
    padding-bottom: 0 !important;
  }
}


/* ── Чат Telegram: перекриття правил, що йдуть нижче за файлом ──────────
   Ці селектори повторюються далі у main.css, тому фінальні значення
   виносимо в кінець — інакше старі правила перемагають за порядком. */
.inbox-msg-meta {
  display: inline-flex !important;
  align-items: center;
  vertical-align: baseline;
  font-size: 12px;
  line-height: 1;
  margin-left: 6px;
  gap: 2px;
  position: relative;
  top: 3px;
  opacity: 1;
}
.inbox-message.in  .inbox-msg-meta { color: #A1A6AA; }
.inbox-message.out .inbox-msg-meta { color: #4FAE4E; }
.inbox-message.out .inbox-msg-meta svg { stroke: #4FAE4E; }

.inbox-sticky-date {
  background: transparent !important;
  backdrop-filter: none !important;
  border-bottom: none !important;
  padding: 6px 16px !important;
  margin-bottom: 2px !important;
}
.inbox-sticky-date span {
  background: rgba(0, 0, 0, .30) !important;
  color: #fff !important;
  border-radius: 14px !important;
  padding: 4px 12px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  box-shadow: none !important;
}
.inbox-sticky-date span:empty { display: none; }

/* ── Контекстне меню повідомлення (затиснути / права кнопка) ─────────────
   Оформлення за зразком Telegram: затемнення, картка з діями знизу. */
#imenu-overlay, #imenu-forward {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0;   /* запас: inset зʼявився в Chrome 87 */
  inset: 0; z-index: 10000;
  background: rgba(15, 23, 42, .35);
  display: flex; align-items: flex-end; justify-content: center;
  animation: imenu-fade .12s ease-out;
}
@keyframes imenu-fade { from { opacity: 0 } to { opacity: 1 } }
@media (min-width: 769px) {
  #imenu-overlay, #imenu-forward { align-items: center; }
}
.imenu-sheet {
  background: #fff; width: 100%; max-width: 380px;
  border-radius: 16px 16px 0 0;
  padding: 6px 0 calc(6px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -4px 24px rgba(0, 0, 0, .18);
  animation: imenu-up .16s ease-out;
}
@keyframes imenu-up { from { transform: translateY(12px) } to { transform: none } }
@media (min-width: 769px) {
  .imenu-sheet { border-radius: 14px; padding-bottom: 6px; box-shadow: 0 8px 32px rgba(0,0,0,.2); }
}
.imenu-item {
  display: flex; align-items: center; gap: 14px;
  width: 100%; padding: 13px 20px;
  background: none; border: none; cursor: pointer;
  font-size: 16px; color: #0f172a; text-align: left;
}
.imenu-item:hover { background: #F1F3F5; }
.imenu-item.danger { color: #E53935; }
.imenu-item svg { flex-shrink: 0; opacity: .85; }
.imenu-sep { height: 1px; background: #E4E9ED; margin: 4px 16px; }

/* Вибір чату для пересилання */
.imenu-forward-sheet { max-width: 420px; padding-bottom: 10px; }
.imenu-title { font-size: 15px; font-weight: 600; padding: 12px 20px 6px; color: #0f172a; }
.imenu-search {
  width: calc(100% - 32px); margin: 0 16px 8px;
  padding: 9px 12px; font-size: 15px;
  border: 1.5px solid #E4E9ED; border-radius: 10px; outline: none;
}
.imenu-search:focus { border-color: #3390EC; }
.imenu-list { max-height: 46vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.imenu-chat {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  width: 100%; padding: 11px 20px; background: none; border: none;
  cursor: pointer; font-size: 15px; text-align: left; color: #0f172a;
}
.imenu-chat:hover { background: #F1F3F5; }
.imenu-chat-platform { font-size: 12px; color: #A1A6AA; flex-shrink: 0; }
.imenu-empty { padding: 18px 20px; color: #A1A6AA; font-size: 14px; text-align: center; }
.imenu-cancel {
  width: calc(100% - 32px); margin: 8px 16px 0; padding: 11px;
  background: #F1F3F5; border: none; border-radius: 10px;
  font-size: 15px; color: #0f172a; cursor: pointer;
}

/* Позначка закріпленого повідомлення */
.inbox-msg-pin { font-size: 11px; opacity: .75; margin-right: 2px; }

/* Довге натискання не має виділяти текст повідомлення і викликати
   системне меню iOS — інакше під час затискання підсвічується текст,
   а поверх нашого меню зʼявляється чужа панель копіювання. */
@media (max-width: 1023px) {
  .inbox-messages .inbox-msg-bubble,
  .inbox-messages .inbox-msg-content,
  .inbox-messages .inbox-msg-meta {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
  }
}
#imenu-overlay, #imenu-forward, .imenu-sheet {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
/* Поле пошуку в пересиланні лишається придатним для вводу */
.imenu-search { -webkit-user-select: text; user-select: text; }


/* ── Плашка з датою над стрічкою ──────────────────────────────────────────
   Раніше вона жила у флекс-колонці і показувалась через display:block.
   Кожен показ/сховок міняв висоту стрічки повідомлень, і екран сіпався
   по вертикалі просто під час гортання. Тепер плашка виведена з потоку:
   вона плаває над повідомленнями і змінює лише прозорість. */
.inbox-thread { position: relative; }
.inbox-sticky-date {
  position: absolute !important;
  left: 0; right: 0;
  z-index: 6;
  display: block !important;   /* ніколи не ховаємо через display */
  opacity: 0;
  transition: opacity .18s ease;
  pointer-events: none;
  margin: 0 !important;
  text-align: center;
}
.inbox-sticky-date.visible { opacity: 1; }


/* Кнопка «три крапки» в рядку чату і меню дій. Замінили окрему галочку
   «прочитано»: одна дія не варта постійного місця в кожному рядку. */
.inbox-chat-menu-btn {
  flex-shrink: 0;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  margin-left: 2px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--text-muted, #94a3b8);
  cursor: pointer;
  padding: 0;
  opacity: 0;
  transition: opacity .12s ease, background .12s ease;
  -webkit-tap-highlight-color: transparent;
}
.inbox-chat-item:hover .inbox-chat-menu-btn { opacity: 1; }
.inbox-chat-menu-btn:hover { background: var(--bg-hover, #f1f5f9); color: var(--text, #0f172a); }

.inbox-chat-menu {
  position: fixed;
  z-index: 1200;
  min-width: 240px;
  padding: 6px;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 10px;
  background: var(--bg-card, #fff);
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
}
.inbox-chat-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border: none;
  border-radius: 7px;
  background: transparent;
  color: var(--text, #0f172a);
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}
.inbox-chat-menu-item:hover { background: var(--bg-hover, #f1f5f9); }
.inbox-chat-menu-item svg { flex-shrink: 0; color: var(--text-muted, #94a3b8); }
.inbox-chat-menu-sep { height: 1px; margin: 5px 6px; background: var(--border, #e2e8f0); }

/* Вікно привʼязки чату до ліда */
.link-lead-chat { font-size: 13px; color: var(--text-muted, #94a3b8); margin-bottom: 10px; }
.link-lead-results { max-height: 320px; overflow-y: auto; margin-top: 10px; display: flex; flex-direction: column; gap: 4px; }
.link-lead-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 8px;
  width: 100%;
  padding: 9px 10px;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 8px;
  background: var(--bg-card, #fff);
  text-align: left;
  cursor: pointer;
}
.link-lead-item:hover { background: var(--bg-hover, #f1f5f9); }
.link-lead-num { font-weight: 700; color: var(--accent, #6366f1); font-size: 13px; }
.link-lead-name { font-size: 14px; color: var(--text, #0f172a); }
.link-lead-meta { grid-column: 1 / -1; font-size: 12px; color: var(--text-muted, #94a3b8); }
.link-lead-empty { padding: 14px; text-align: center; color: var(--text-muted, #94a3b8); font-size: 13px; }

@media (max-width: 768px) {
  /* На дотику ховера немає — кнопка має бути видимою завжди і більшою. */
  .inbox-chat-menu-btn { opacity: 1; width: 32px; height: 32px; }
  .inbox-chat-menu { min-width: 260px; }
  .inbox-chat-menu-item { padding: 12px 10px; font-size: 15px; }
}

/* ── Медіа в чаті на телефоні ─────────────────────────────────────────────
   240px на екрані 390px — це третина ширини, скрін неможливо роздивитись.
   Даємо бульбашці з медіа майже всю ширину, як у Telegram. */
@media (max-width: 1023px) {
  .inbox-messages .inbox-msg-bubble:has(> .inbox-msg-image),
  .inbox-messages .inbox-msg-bubble:has(> .inbox-msg-video),
  .inbox-messages .inbox-msg-bubble:has(.inbox-msg-image),
  .inbox-messages .inbox-msg-bubble:has(video) {
    max-width: 92% !important;
    padding: 4px !important;
  }
  .inbox-msg-image,
  .inbox-messages .inbox-msg-bubble video {
    max-width: 100% !important;
    width: 100% !important;
    /* Висота в vw, а не aspect-ratio і не auto. Причина: height:auto означає,
       що висоту видно лише після завантаження — стрічка росла під кожним фото,
       і чат відкривався не в самому низу. aspect-ratio теоретично це вирішує,
       але його перебивали інші правила з !important, і на телефоні картинка
       все одно розкривалась у власних пропорціях. Явна висота однозначна і
       працює навіть на старих Android. 62vw ≈ 267px на екрані 430px. */
    height: 62vw !important;
    max-height: 62vh !important;
    object-fit: cover;
    border-radius: 10px;
  }
}


/* ── Повноекранний перегляд медіа ─────────────────────────────────────────
   inset:0 бере layout-viewport, який на телефоні вищий за видиму частину:
   фото вилазило за екран, а хрестик ховався під смугою браузера і вирізом.
   Рахуємо висоту в dvh і додаємо безпечні зони. */
.inbox-lightbox-overlay {
  /* Спершу vh — його розуміють усі, зокрема Chrome 106 на Android 5–6, де
     оновлення браузера вже не приходять. Далі dvh для сучасних. */
  height: 100vh;
  max-height: 100vh;
  height: 100dvh;
  max-height: 100dvh;
  padding: calc(10px + env(safe-area-inset-top, 0px)) 12px
           calc(10px + env(safe-area-inset-bottom, 0px)) !important;
  gap: 10px;
  overflow: hidden;
}
.inbox-lightbox-content {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  max-width: 100%;
}
.inbox-lightbox-content img,
.inbox-lightbox-content video {
  max-width: 100% !important;
  max-height: 100% !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
}
/* Область зі сторінками PDF. touch-action обовʼязковий: без нього браузер на
   телефоні не віддає ні гортання, ні щипок. overscroll-behavior не дає
   «протягнути» сторінку під шаром, коли документ догортали до кінця. */
.inbox-pdf-scroll {
  touch-action: pan-x pan-y pinch-zoom;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.inbox-lightbox-caption,
.inbox-lightbox-info { flex: 0 0 auto; }

.inbox-lightbox-close {
  top: calc(10px + env(safe-area-inset-top, 0px)) !important;
  right: 12px !important;
  z-index: 15003 !important;   /* вище за фото і стрілки */
}

@media (max-width: 1023px) {
  /* Хрестик під великий палець, з запасом навколо */
  .inbox-lightbox-close { width: 46px !important; height: 46px !important; }
  .inbox-lightbox-nav   { width: 48px !important; height: 48px !important; }
  /* Заголовок і рядок з лічильником не мають зʼїдати висоту фото */
  .inbox-lightbox-caption { max-height: 3.2em; overflow: hidden; }
}


/* ── Створення замовлення і каталог товарів на телефоні ───────────────────
   Форма з чату і форма зі сторінки «Замовлення» — це дві різні реалізації,
   тож і правила потрібні для обох. Сітки в формі замовлень задані інлайном,
   тому перебиваємо через !important. */

/* Бічна панель каталогу */
@media (max-width: 768px) {
  .co-catalog-panel {
    width: 100vw !important;
    max-width: 100vw !important;
    /* 100vh на телефоні вище за видиму частину — низ списку ховався під
       смугою браузера. dvh дає рівно видиму висоту. */
    height: 100vh !important;
    height: 100dvh !important;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .co-catalog-search { flex-wrap: wrap; padding: 10px 12px; }
  .co-catalog-search input { flex: 1 1 100%; min-width: 0; }
  .co-catalog-search select { flex: 1 1 auto; min-width: 0 !important; }
  .co-catalog-results { padding: 8px; }
  .co-catalog-item { padding: 8px; gap: 8px; }
  .co-catalog-item-img { width: 44px; height: 44px; }
}
/* Рядок з артикулом і варіацією вилазив за межі картки на кожному товарі */
.co-catalog-item-info { min-width: 0; }
.co-catalog-item-meta { flex-wrap: wrap; min-width: 0; }
.co-catalog-item-variant,
.co-catalog-item-sku {
  /* min-width:0 обовʼязковий: без нього флекс-елемент не стискається нижче
     довжини свого тексту і плашка з варіацією вилазить за картку. */
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Форма замовлення з чату */
@media (max-width: 768px) {
  .co-form { max-width: 100%; padding: 0; }
  .co-product-row { flex-wrap: wrap; gap: 6px; }
  .co-product-row .co-prod-name { flex: 1 1 100%; }
  .co-product-row .co-prod-qty { width: 72px; }
  .co-product-row .co-prod-price { width: 96px; }
  .co-add-row { display: flex; flex-wrap: wrap; gap: 6px; }
  .co-add-row button { flex: 1 1 auto; }
}

/* Форма замовлення зі сторінки «Замовлення» (сітки задані інлайном) */
@media (max-width: 640px) {
  #modal-body [style*="grid-template-columns:1fr 1fr"],
  #modal-body [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  /* Рядок товару: назва окремим рядком, під нею кількість, ціна, сума і хрестик */
  #modal-body [id^="prow-"] {
    grid-template-columns: 64px 88px 1fr 24px !important;
    gap: 6px !important;
  }
  #modal-body [id^="prow-"] > *:first-child { grid-column: 1 / -1; }
  #modal-body [id^="prow-"] input { min-width: 0; }
  /* Шапка колонок над товарами має ті самі частки, інакше підписи розʼїжджаються */
  #modal-body [style*="grid-template-columns:1fr 60px 80px auto 24px"] {
    grid-template-columns: 64px 88px 1fr 24px !important;
  }
  #modal-body select,
  #modal-body input,
  #modal-body textarea { max-width: 100%; min-width: 0; box-sizing: border-box; }
}


/* Блок «Форма замовлення на телефоні» перенесено в кінець mobile-fixes.css:
   той файл підключається пізніше і перебивав ці правила своїм
   .modal-content { max-height: calc(100vh - 16px) !important }. */

/* ===== Вікно спілкування у воронці: зона написання повідомлення =====
   На мобільному панель займає весь екран, тож поле вводу і кнопки треба
   тримати в межах безпечних відступів, а цілі дотику — не меншими за 44px. */
.uf-comm-compose {
  border-top: 1px solid #f1f5f9;
  padding: 10px 12px calc(8px + env(safe-area-inset-bottom, 0px));
  flex-shrink: 0;
  background: var(--bg-card-solid, #fff);
}

.uf-comm-platforms {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.uf-comm-platform-btn {
  padding: 6px 14px;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  background: #fff;
  color: #64748b;
  cursor: pointer;
  font-size: 12px;
  line-height: 1.2;
  min-height: 32px;
}

.uf-comm-platform-btn.is-active {
  border-color: var(--accent, #6366f1);
  background: var(--accent, #6366f1);
  color: #fff;
}

.uf-comm-row {
  display: flex;
  gap: 8px;
  align-items: flex-end;
}

.uf-comm-input {
  flex: 1;
  min-width: 0;               /* інакше textarea не дає рядку стискатись */
  padding: 10px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-size: 14px;            /* менший розмір змушує iOS зумити при фокусі */
  font-family: inherit;
  resize: none;
  box-sizing: border-box;
}

.uf-comm-send {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent, #6366f1);
  color: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}

.uf-comm-send:disabled { background: #cbd5e1; cursor: not-allowed; }

/* Нативний аудіоплеєр у стрічці розтягувався під самі краї панелі */
.uf-mobile-tab-panel audio,
.uf-dp-tab-pane audio {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .uf-mobile-tab-panel .uf-comm-compose { padding-left: 16px; padding-right: 16px; }
  .uf-comm-platform-btn { min-height: 36px; padding: 8px 14px; }
  .uf-comm-input { font-size: 16px; }   /* 16px — iOS не зумить поле при фокусі */
}

/* Стрічка дзвінків і повідомлень — вміст не повинен упиратись у краї екрана */
.uf-comm-timeline {
  padding: 4px 12px;
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .uf-mobile-tab-panel .uf-comm-timeline { padding-left: 16px; padding-right: 16px; }
}

/* ===== Панель каталогу товарів (додавання до замовлення чи ліда) ===== */
.product-catalog-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 480px;
  height: 100%;
  background: #fff;
  box-shadow: -4px 0 24px rgba(0,0,0,.15);
  z-index: 1300;
  display: flex;
  flex-direction: column;
}

.pcd-header {
  padding: 20px 24px;
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}

.pcd-close {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #64748b;
  line-height: 1;
  /* Ціль дотику не менша за 44px */
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

@media (max-width: 768px) {
  /* На телефоні 480px не влазять — панель займає весь екран, а заголовок
     відсувається з-під системного рядка й вирізу. */
  .product-catalog-drawer {
    width: 100vw;
    max-width: 100vw;
    left: 0;
    right: 0;
  }

  .pcd-header {
    padding: calc(16px + env(safe-area-inset-top, 0px)) 16px 16px;
  }

  /* Кнопки кількості були 22px — у них важко влучити пальцем */
  .product-catalog-drawer button[onclick*="_catalogQty"] {
    width: 34px !important;
    height: 34px !important;
    font-size: 18px !important;
  }
}

/* Рядок товару в панелі каталогу */
.pcd-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 24px;
  cursor: pointer;
  background: #fff;
}
.pcd-item.is-selected { background: #eff6ff; }

.pcd-check { width: 16px; height: 16px; cursor: pointer; flex-shrink: 0; }

.pcd-thumb {
  width: 48px; height: 48px;
  object-fit: cover;
  border-radius: 6px;
  flex-shrink: 0;
  background: #f1f5f9;
}

.pcd-main { flex: 1; min-width: 0; }

.pcd-title {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.pcd-sku { font-size: 11px; color: #94a3b8; margin-top: 1px; }

.pcd-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 6px;
}

.pcd-price {
  font-size: 14px;
  font-weight: 600;
  color: #1e293b;
  white-space: nowrap;
}

.pcd-qty { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }

.pcd-qty-btn {
  width: 28px; height: 28px;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
}

.pcd-qty-val { min-width: 26px; text-align: center; font-size: 13px; }

@media (max-width: 768px) {
  .pcd-item { padding: 12px 16px; align-items: flex-start; }
  .pcd-title { font-size: 14px; -webkit-line-clamp: 3; }
  /* Пальцем у 28px влучити важко */
  .pcd-qty-btn { width: 36px; height: 36px; font-size: 18px; }
  .pcd-qty-val { min-width: 30px; font-size: 15px; }
  .pcd-check { width: 20px; height: 20px; margin-top: 4px; }
}

/* ===== Рядок товару в картці ліда: ціна і кількість редагуються на місці ===== */
.uf-lead-product {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid #f8fafc;
}

.uf-lead-product-main { min-width: 0; flex: 1; }

.uf-price-hint {
  display: inline-block;
  font-size: 11px;
  color: #b45309;
  background: #fff7ed;
  border-radius: 4px;
  padding: 1px 6px;
  margin-top: 2px;
}

.uf-lead-product-edit {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.uf-lead-qty, .uf-lead-price {
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 5px 6px;
  font-size: 13px;
  text-align: right;
  background: #fff;
  color: inherit;
}
.uf-lead-qty { width: 52px; }
.uf-lead-price { width: 88px; }

/* Змінена вручну ціна помітно відрізняється від каталожної */
.uf-lead-price.is-custom {
  border-color: #f59e0b;
  background: #fffbeb;
  font-weight: 600;
}

.uf-lead-qty:focus, .uf-lead-price:focus {
  outline: none;
  border-color: var(--accent, #6366f1);
}

.uf-lead-mult, .uf-lead-cur { font-size: 12px; color: #64748b; }
.uf-lead-total { font-weight: 600; white-space: nowrap; min-width: 86px; text-align: right; }

.uf-lead-del {
  background: none;
  border: none;
  cursor: pointer;
  color: #94a3b8;
  font-size: 16px;
  padding: 0;
  min-width: 32px;
  min-height: 32px;
}

@media (max-width: 768px) {
  /* На телефоні поля не влазять в один рядок з назвою */
  .uf-lead-product { flex-direction: column; align-items: stretch; gap: 8px; }
  .uf-lead-product-edit { justify-content: flex-end; flex-wrap: wrap; }
  .uf-lead-qty  { width: 60px; font-size: 16px; padding: 8px 6px; }
  .uf-lead-price { width: 100px; font-size: 16px; padding: 8px 6px; }
  .uf-lead-del { min-width: 44px; min-height: 44px; }
}

/* ===== Цифри однакової ширини по всьому додатку =====
   Пропорційні цифри робили будь-яку колонку чисел нерівною: «1» вужча за
   «8», тож суми різної довжини візуально стрибали одна відносно одної.
   Це стосується не лише воронки, а й фінансів, складу, замовлень і
   зарплат, тому вмикаємо табличні цифри глобально, а не за списком
   класів — інакше кожен новий розділ довелось би додавати руками. */
body {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* Від'ємний трекінг карток на цифрах призводив до злипання розрядів */
.uf-card-sum,
.uf-lead-total,
.uf-lead-price,
.uf-lead-qty,
.uf-dp-products-total,
.pcd-price,
.uf-dp-amount,
.uf-stage-sum {
  letter-spacing: normal;
}

/* Дробовий розмір шрифту на Android дає розмиті контури */
.uf-card-sum span { font-size: 11px; }

/* ===== Читабельність дрібного тексту на телефоні =====
   Підписи по 9–10px на щільних екранах Android читаються погано, особливо
   цифри. На десктопі вони доречні — тому піднімаємо тільки на мобільному. */
@media (max-width: 768px) {
  .isb-label,
  .fin-group-title,
  .fin-acc-uah,
  .fin-acc-bal,
  .fin-sum-income,
  .fin-sum-expense,
  .fin-sum-transfer,
  .fin-cal-cell-line,
  .wh-mini-qty,
  .wh-mini-price,
  .uf-card-src,
  .uf-card-time,
  .uf-card-created {
    font-size: 11px;
  }

  /* Лічильники непрочитаного: 9px на цифрах — межа розбірливості */
  .isb-badge,
  .inbox-msg-pin {
    font-size: 11px;
  }
}

/* ===== Індикатор доступності в шапці — мобільна адаптація ===== */
@media (max-width: 1023px) {
  .app-header { justify-content: flex-start; }
  .app-header img { margin: 0; }
  /* Логотип посередині, індикатор притиснутий праворуч */
  .app-header #currentDate { margin-left: auto; }
  #availability-selector { margin-left: 8px; }
  /* Меню статусу не має виходити за правий край екрана */
  #avail-dropdown { right: 0 !important; max-width: calc(100vw - 24px); }
}

@media (max-width: 480px) {
  /* На вузьких екранах дата зайва — місце потрібне індикатору */
  .app-header #currentDate { display: none; }
  #availability-selector { margin-left: auto; }
  #avail-label { font-size: 12px; }
}

/* ── Пошук у виробництві: результати під полем ────────────────────────────
   Раніше вони відкривались модальним вікном, яке перекривало саме поле:
   дописати запит, дивлячись на список, було неможливо. Тепер це випадайка,
   як пошук у воронці продажів. */
.prod-search-results {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 60;
  max-height: 60vh;
  overflow-y: auto;
  background: var(--bg-card, #fff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .14);
}
.prod-search-head {
  position: sticky;
  top: 0;
  background: var(--bg-card, #fff);
  border-bottom: 1px solid var(--border, #e2e8f0);
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
}
.prod-search-list { padding: 8px; }
.prod-search-more { text-align: center; padding: 8px; font-size: 12px; color: var(--text-muted); }
@media (max-width: 768px) {
  .prod-search-results { max-height: 70vh; }
}

/* Рядок умови в тригері автоматизації */
.cond-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 130px minmax(0, 1fr) 32px;
  gap: 8px;
  align-items: start;
  margin-bottom: 8px;
}
.cond-row > * { min-width: 0; }
@media (max-width: 700px) {
  .cond-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .cond-row > *:nth-child(3) { grid-column: 1 / -1; }
  .cond-row > *:last-child { grid-column: 2 / 3; justify-self: end; }
}