/*
 * ============================================================
 * OPERA DESIGN SYSTEM v1
 * Foundation layer
 *
 * Regra:
 * - Este arquivo inicia apenas com design tokens.
 * - Nenhum componente existente e sobrescrito nesta etapa.
 * - Migracao visual sera progressiva por modulo.
 * ============================================================
 */

:root {

  /* ==========================================================
   * COLOR — BRAND
   * ========================================================== */

  --opera-color-primary: #15636f;
  --opera-color-primary-strong: #0f4f59;
  --opera-color-primary-soft: #edf7f7;


  /* ==========================================================
   * COLOR — TEXT
   * ========================================================== */

  --opera-color-text: #1e293b;
  --opera-color-text-secondary: #475569;
  --opera-color-text-muted: #64748b;
  --opera-color-text-subtle: #94a3b8;
  --opera-color-text-inverse: #ffffff;


  /* ==========================================================
   * COLOR — SURFACE
   * ========================================================== */

  --opera-color-surface: #ffffff;
  --opera-color-surface-subtle: #f8fafc;
  --opera-color-surface-muted: #f1f5f9;


  /* ==========================================================
   * COLOR — BORDER
   * ========================================================== */

  --opera-color-border: #e2e8f0;
  --opera-color-border-strong: #cbd5e1;


  /* ==========================================================
   * COLOR — SEMANTIC
   * ========================================================== */

  --opera-color-success: #16a34a;
  --opera-color-warning: #f59e0b;
  --opera-color-danger: #dc2626;
  --opera-color-info: #2563eb;


  /* ==========================================================
   * TYPOGRAPHY
   * ========================================================== */

  --opera-font-family:
    "DM Sans",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  --opera-font-size-xs: 11px;
  --opera-font-size-sm: 12px;
  --opera-font-size-md: 13px;
  --opera-font-size-base: 14px;
  --opera-font-size-lg: 16px;
  --opera-font-size-xl: 18px;
  --opera-font-size-2xl: 20px;
  --opera-font-size-3xl: 24px;

  --opera-font-weight-regular: 400;
  --opera-font-weight-medium: 500;
  --opera-font-weight-semibold: 600;
  --opera-font-weight-bold: 700;


  /* ==========================================================
   * SPACING
   * ========================================================== */

  --opera-space-1: 4px;
  --opera-space-2: 6px;
  --opera-space-3: 8px;
  --opera-space-4: 12px;
  --opera-space-5: 16px;
  --opera-space-6: 20px;
  --opera-space-7: 24px;
  --opera-space-8: 32px;


  /* ==========================================================
   * RADIUS
   * ========================================================== */

  --opera-radius-xs: 6px;
  --opera-radius-sm: 8px;
  --opera-radius-md: 10px;
  --opera-radius-lg: 12px;
  --opera-radius-xl: 16px;
  --opera-radius-pill: 999px;


  /* ==========================================================
   * SHADOW
   * ========================================================== */

  --opera-shadow-xs:
    0 1px 4px rgba(15, 23, 42, 0.08);

  --opera-shadow-sm:
    0 2px 8px rgba(15, 23, 42, 0.06);

  --opera-shadow-md:
    0 8px 24px rgba(15, 23, 42, 0.08);

  --opera-shadow-overlay:
    0 20px 70px rgba(15, 23, 42, 0.22);


  /* ==========================================================
   * FOCUS
   * ========================================================== */

  --opera-focus-ring:
    0 0 0 3px rgba(21, 99, 111, 0.14);


  /* ==========================================================
   * MOTION
   * ========================================================== */

  --opera-motion-fast: 120ms;
  --opera-motion-normal: 180ms;
  --opera-motion-slow: 240ms;

  --opera-ease-standard:
    cubic-bezier(0.2, 0, 0, 1);


  /* ==========================================================
   * LAYOUT
   * ========================================================== */

  --opera-layout-sidebar-open: 248px;
  --opera-layout-sidebar-closed: 72px;

  --opera-layout-page-padding:
    clamp(16px, 1.45vw, 24px);

  --opera-layout-topbar-height: 76px;


  /* ==========================================================
   * Z-INDEX
   * ========================================================== */

  --opera-z-dropdown: 100;
  --opera-z-sticky: 200;
  --opera-z-overlay: 900;
  --opera-z-modal: 1000;
  --opera-z-toast: 1100;
}


/*
 * ============================================================
 * BUTTONS
 * ============================================================
 */

.opera-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--opera-space-2);

  min-height: 36px;
  padding: 8px 12px;

  border: 1px solid transparent;
  border-radius: var(--opera-radius-md);

  font-family: var(--opera-font-family);
  font-size: var(--opera-font-size-md);
  font-weight: var(--opera-font-weight-semibold);
  line-height: 1;

  cursor: pointer;
  user-select: none;
  text-decoration: none;
  white-space: nowrap;

  transition:
    background-color var(--opera-motion-normal) var(--opera-ease-standard),
    border-color var(--opera-motion-normal) var(--opera-ease-standard),
    color var(--opera-motion-normal) var(--opera-ease-standard),
    box-shadow var(--opera-motion-normal) var(--opera-ease-standard),
    opacity var(--opera-motion-normal) var(--opera-ease-standard);
}

.opera-btn:focus-visible {
  outline: none;
  box-shadow: var(--opera-focus-ring);
}

.opera-btn:disabled,
.opera-btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}


/* PRIMARY */

.opera-btn--primary {
  background: var(--opera-color-primary);
  border-color: var(--opera-color-primary);
  color: var(--opera-color-text-inverse);
}

.opera-btn--primary:hover {
  background: var(--opera-color-primary-strong);
  border-color: var(--opera-color-primary-strong);
}


/* SECONDARY */

.opera-btn--secondary {
  background: var(--opera-color-surface);
  border-color: var(--opera-color-border);
  color: var(--opera-color-text);
}

.opera-btn--secondary:hover {
  background: var(--opera-color-surface-subtle);
  border-color: var(--opera-color-border-strong);
}


/* GHOST */

.opera-btn--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--opera-color-text-secondary);
}

.opera-btn--ghost:hover {
  background: var(--opera-color-surface-muted);
  color: var(--opera-color-text);
}


/* DANGER */

.opera-btn--danger {
  background: var(--opera-color-surface);
  border-color: #fecaca;
  color: var(--opera-color-danger);
}

.opera-btn--danger:hover {
  background: #fef2f2;
  border-color: #fca5a5;
}


/* SIZES */

.opera-btn--sm {
  min-height: 30px;
  padding: 6px 10px;
  font-size: var(--opera-font-size-sm);
}

.opera-btn--lg {
  min-height: 40px;
  padding: 10px 16px;
  font-size: var(--opera-font-size-base);
}


/*
 * ============================================================
 * ICON BUTTON
 * ============================================================
 */

.opera-icon-btn {
  appearance: none;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 0;

  border: 1px solid var(--opera-color-border);
  border-radius: var(--opera-radius-md);

  background: var(--opera-color-surface);
  color: var(--opera-color-text-muted);

  cursor: pointer;

  transition:
    background-color var(--opera-motion-normal) var(--opera-ease-standard),
    border-color var(--opera-motion-normal) var(--opera-ease-standard),
    color var(--opera-motion-normal) var(--opera-ease-standard),
    box-shadow var(--opera-motion-normal) var(--opera-ease-standard);
}

.opera-icon-btn:hover {
  background: var(--opera-color-surface-subtle);
  border-color: var(--opera-color-border-strong);
  color: var(--opera-color-text);
}

.opera-icon-btn:focus-visible {
  outline: none;
  box-shadow: var(--opera-focus-ring);
}

.opera-icon-btn:disabled,
.opera-icon-btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.opera-icon-btn--danger {
  border-color: #fecaca;
  color: var(--opera-color-danger);
}

.opera-icon-btn--danger:hover {
  background: #fef2f2;
  border-color: #fca5a5;
}


/*
 * Icon normalization
 */

.opera-btn > svg,
.opera-btn > i,
.opera-icon-btn > svg,
.opera-icon-btn > i {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}


/*
 * ============================================================
 * CRM — DESIGN SYSTEM PILOT
 * Card action menu button
 *
 * A classe legada crm-card-menu-btn permanece por compatibilidade
 * com eventos, drag-and-drop e posicionamento do menu.
 * ============================================================
 */

#page-crm .crm-card-menu-btn.opera-icon-btn {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  max-width: 30px !important;
  flex: 0 0 30px !important;

  border-radius: var(--opera-radius-sm) !important;
  border-color: var(--opera-color-border) !important;

  background: var(--opera-color-surface) !important;
  color: var(--opera-color-text-secondary) !important;
}

#page-crm .crm-card-menu-btn.opera-icon-btn:hover,
#page-crm .crm-card-menu-btn.opera-icon-btn[aria-expanded="true"] {
  background: var(--opera-color-surface-subtle) !important;
  border-color: var(--opera-color-border-strong) !important;
  color: var(--opera-color-primary) !important;
}

#page-crm .crm-card-menu-btn.opera-icon-btn:focus-visible {
  outline: none !important;
  box-shadow: var(--opera-focus-ring) !important;
}


/*
 * ============================================================
 * MENU / POPOVER
 * ============================================================
 */

.opera-menu {
  padding: var(--opera-space-1);

  border: 1px solid var(--opera-color-border);
  border-radius: var(--opera-radius-md);

  background: var(--opera-color-surface);
  color: var(--opera-color-text);

  box-shadow: var(--opera-shadow-md);
}

.opera-menu__item {
  appearance: none;

  width: 100%;
  min-height: 34px;

  display: flex;
  align-items: center;
  gap: var(--opera-space-3);

  padding: 7px 9px;

  border: 0;
  border-radius: var(--opera-radius-xs);

  background: transparent;
  color: var(--opera-color-text-secondary);

  font-family: var(--opera-font-family);
  font-size: var(--opera-font-size-md);
  font-weight: var(--opera-font-weight-medium);
  line-height: 1.25;

  text-align: left;
  cursor: pointer;

  transition:
    background-color var(--opera-motion-fast) var(--opera-ease-standard),
    color var(--opera-motion-fast) var(--opera-ease-standard);
}

.opera-menu__item:hover {
  background: var(--opera-color-surface-muted);
  color: var(--opera-color-text);
}

.opera-menu__item:focus-visible {
  outline: none;
  box-shadow: var(--opera-focus-ring);
}

.opera-menu__item--danger {
  color: var(--opera-color-danger);
}

.opera-menu__item--danger:hover {
  background: #fef2f2;
  color: var(--opera-color-danger);
}

.opera-menu__separator {
  height: 1px;
  margin: var(--opera-space-1) 0;

  background: var(--opera-color-border);
}

.opera-menu__item > svg,
.opera-menu__item > i {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
}


/*
 * ============================================================
 * CRM — MENU COMPATIBILITY
 *
 * Posicionamento, largura e z-index permanecem sob controle
 * do componente CRM nesta etapa.
 * ============================================================
 */

#page-crm .crm-card-action-menu.opera-menu {
  padding: var(--opera-space-1) !important;

  border-color: var(--opera-color-border) !important;
  border-radius: var(--opera-radius-md) !important;

  background: var(--opera-color-surface) !important;

  box-shadow: var(--opera-shadow-md) !important;
}

#page-crm .crm-card-action-menu-item.opera-menu__item {
  min-height: 34px !important;
  padding: 7px 9px !important;

  border-radius: var(--opera-radius-xs) !important;

  background: transparent !important;
  color: var(--opera-color-text-secondary) !important;
}

#page-crm .crm-card-action-menu-item.opera-menu__item:hover {
  background: var(--opera-color-surface-muted) !important;
  color: var(--opera-color-text) !important;
}

#page-crm .crm-card-action-menu-item.opera-menu__item--danger {
  color: var(--opera-color-danger) !important;
}

#page-crm .crm-card-action-menu-item.opera-menu__item--danger:hover {
  background: #fef2f2 !important;
  color: var(--opera-color-danger) !important;
}

#page-crm .crm-card-action-menu-item.opera-menu__item:focus-visible {
  outline: none !important;
  box-shadow: var(--opera-focus-ring) !important;
}

#page-crm .crm-card-action-menu-separator.opera-menu__separator {
  background: var(--opera-color-border) !important;
}


/*
 * ============================================================
 * SEGMENTED CONTROL
 * ============================================================
 */

.opera-segmented {
  display: inline-flex;
  align-items: center;
  gap: 2px;

  padding: 3px;

  border: 1px solid var(--opera-color-border);
  border-radius: var(--opera-radius-md);

  background: var(--opera-color-surface-subtle);
}

.opera-segmented__item {
  appearance: none;

  min-height: 30px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--opera-space-2);

  padding: 6px 10px;

  border: 0;
  border-radius: var(--opera-radius-sm);

  background: transparent;
  color: var(--opera-color-text-muted);

  font-family: var(--opera-font-family);
  font-size: var(--opera-font-size-sm);
  font-weight: var(--opera-font-weight-semibold);

  cursor: pointer;

  transition:
    background-color var(--opera-motion-fast) var(--opera-ease-standard),
    color var(--opera-motion-fast) var(--opera-ease-standard),
    box-shadow var(--opera-motion-fast) var(--opera-ease-standard);
}

.opera-segmented__item:hover {
  color: var(--opera-color-text);
}

.opera-segmented__item.active,
.opera-segmented__item[aria-selected="true"] {
  background: var(--opera-color-surface);
  color: var(--opera-color-primary);
  box-shadow: var(--opera-shadow-xs);
}

.opera-segmented__item:focus-visible {
  outline: none;
  box-shadow: var(--opera-focus-ring);
}


/*
 * ============================================================
 * CRM — HEADER DESIGN SYSTEM
 * ============================================================
 */

#page-crm .crm-page-header h1 {
  color: var(--opera-color-text) !important;
  font-family: var(--opera-font-family);
}

#page-crm .crm-page-header p {
  color: var(--opera-color-text-muted) !important;
}

#page-crm #crmViewSwitcher.opera-segmented {
  border-color: var(--opera-color-border) !important;
  background: var(--opera-color-surface-subtle) !important;
}

#page-crm #crmViewSwitcher .opera-segmented__item {
  min-height: 30px !important;
  padding: 6px 10px !important;

  border-radius: var(--opera-radius-sm) !important;

  background: transparent !important;
  color: var(--opera-color-text-muted) !important;
}

#page-crm #crmViewSwitcher .opera-segmented__item:hover {
  background: transparent !important;
  color: var(--opera-color-text) !important;
}

#page-crm #crmViewSwitcher .opera-segmented__item.active {
  background: var(--opera-color-surface) !important;
  color: var(--opera-color-primary) !important;
  box-shadow: var(--opera-shadow-xs) !important;
}

#page-crm .crm-kanban-global-toggle.opera-btn {
  min-height: 36px !important;

  padding: 8px 12px !important;

  border-color: var(--opera-color-border) !important;
  border-radius: var(--opera-radius-md) !important;

  background: var(--opera-color-surface) !important;
  color: var(--opera-color-text-secondary) !important;

  font-size: var(--opera-font-size-md) !important;
  font-weight: var(--opera-font-weight-semibold) !important;
}

#page-crm .crm-kanban-global-toggle.opera-btn:hover {
  background: var(--opera-color-surface-subtle) !important;
  border-color: var(--opera-color-border-strong) !important;
  color: var(--opera-color-text) !important;
}

#page-crm #crmNewOpportunityBtn.opera-btn {
  min-height: 38px !important;

  padding: 9px 14px !important;

  border-radius: var(--opera-radius-md) !important;

  background: var(--opera-color-primary) !important;
  border-color: var(--opera-color-primary) !important;

  color: var(--opera-color-text-inverse) !important;

  font-size: var(--opera-font-size-md) !important;
  font-weight: var(--opera-font-weight-semibold) !important;
}

#page-crm #crmNewOpportunityBtn.opera-btn:hover {
  background: var(--opera-color-primary-strong) !important;
  border-color: var(--opera-color-primary-strong) !important;
}


/*
 * ============================================================
 * CARD
 * ============================================================
 */

.opera-card {
  position: relative;

  background: var(--opera-color-surface);
  border: 1px solid var(--opera-color-border);
  border-radius: var(--opera-radius-lg);

  box-shadow: var(--opera-shadow-sm);

  transition:
    border-color var(--opera-motion-normal) var(--opera-ease-standard),
    box-shadow var(--opera-motion-normal) var(--opera-ease-standard),
    transform var(--opera-motion-normal) var(--opera-ease-standard);
}

.opera-card:hover {
  border-color: var(--opera-color-border-strong);
  box-shadow: var(--opera-shadow-md);
}

.opera-card:focus-visible {
  outline: none;
  box-shadow:
    var(--opera-focus-ring),
    var(--opera-shadow-sm);
}


/*
 * ============================================================
 * CRM — CARD v1
 *
 * Esta camada padroniza apenas hierarquia visual.
 * Conteudo, dados, eventos e regras continuam legados.
 * ============================================================
 */

#page-crm .kanban-card.opera-card {
  background: var(--opera-color-surface) !important;

  border-color: var(--opera-color-border) !important;
  border-radius: var(--opera-radius-lg) !important;

  padding: 10px !important;
  margin-bottom: var(--opera-space-3) !important;

  box-shadow: var(--opera-shadow-sm) !important;

  gap: var(--opera-space-3) !important;
}

#page-crm .kanban-card.opera-card:hover {
  transform: translateY(-1px) !important;

  border-color: var(--opera-color-border-strong) !important;

  box-shadow: var(--opera-shadow-md) !important;
}

#page-crm .kanban-card.opera-card:focus-visible {
  outline: none !important;

  box-shadow:
    var(--opera-focus-ring),
    var(--opera-shadow-sm) !important;
}


/*
 * Header / identity
 */

#page-crm .kanban-card.opera-card .crm-card-top {
  gap: var(--opera-space-3) !important;
}

#page-crm .kanban-card.opera-card .crm-card-identity {
  gap: var(--opera-space-3) !important;
}


/*
 * Avatar
 */

#page-crm .kanban-card.opera-card .crm-card-avatar {
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;

  border-radius: var(--opera-radius-pill) !important;

  font-size: 9px !important;
  font-weight: var(--opera-font-weight-bold) !important;

  box-shadow: var(--opera-shadow-xs) !important;
}


/*
 * Primary identity
 */

#page-crm .kanban-card.opera-card .crm-card-title {
  color: var(--opera-color-text) !important;

  font-size: var(--opera-font-size-md) !important;
  font-weight: var(--opera-font-weight-bold) !important;
  line-height: 1.2 !important;
}

#page-crm .kanban-card.opera-card .crm-card-subtitle {
  margin-top: 2px !important;

  color: var(--opera-color-text-muted) !important;

  font-size: var(--opera-font-size-xs) !important;
  line-height: 1.25 !important;
}


/*
 * Compact operational information
 */

#page-crm .kanban-card.opera-card .crm-card-compact-fields {
  gap: var(--opera-space-1) !important;
}

#page-crm .kanban-card.opera-card .crm-card-compact-line {
  gap: var(--opera-space-2) !important;

  color: var(--opera-color-text-muted) !important;

  font-size: var(--opera-font-size-xs) !important;
  line-height: 1.3 !important;
}

#page-crm .kanban-card.opera-card .crm-card-compact-label {
  color: var(--opera-color-text-secondary) !important;

  font-weight: var(--opera-font-weight-semibold) !important;
}


/*
 * Dynamic field pills
 */

#page-crm .kanban-card.opera-card .crm-card-field-pill {
  padding: 3px 7px !important;

  border-color: var(--opera-color-border) !important;
  border-radius: var(--opera-radius-pill) !important;

  background: var(--opera-color-surface-subtle) !important;
  color: var(--opera-color-text-secondary) !important;
}


/*
 * Probability
 */

#page-crm .kanban-card.opera-card .crm-card-probability-head {
  color: var(--opera-color-text-muted) !important;

  font-size: var(--opera-font-size-xs) !important;
  font-weight: var(--opera-font-weight-semibold) !important;
}

#page-crm .kanban-card.opera-card .crm-card-probability-head strong {
  color: var(--opera-color-text) !important;

  font-size: var(--opera-font-size-xs) !important;
  font-weight: var(--opera-font-weight-bold) !important;
}

#page-crm .kanban-card.opera-card .crm-prob-bar {
  height: 3px !important;

  background: var(--opera-color-border) !important;
}


/*
 * Footer
 */

#page-crm .kanban-card.opera-card .crm-card-footer {
  gap: var(--opera-space-2) !important;

  color: var(--opera-color-text-muted) !important;
}


/*
 * ============================================================
 * CRM — CARD v2
 * Urgency + activity + stage timer
 * ============================================================
 */


/*
 * ------------------------------------------------------------
 * URGENCY
 *
 * A urgencia deixa de pintar o card inteiro.
 * Mantemos somente o accent lateral.
 * ------------------------------------------------------------
 */

#page-crm .kanban-card.opera-card[class*="crm-card-urgency-"] {
  background: var(--opera-color-surface) !important;
  border-color: var(--opera-color-border) !important;
}

#page-crm .kanban-card.opera-card[class*="crm-card-urgency-"]::before {
  width: 3px !important;

  top: 8px !important;
  bottom: 8px !important;
  left: 0 !important;

  border-radius: 0 var(--opera-radius-xs) var(--opera-radius-xs) 0 !important;
}


/* BAIXA */

#page-crm .kanban-card.opera-card.crm-card-urgency-baixa {
  background: var(--opera-color-surface) !important;
  border-color: var(--opera-color-border) !important;
}

#page-crm .kanban-card.opera-card.crm-card-urgency-baixa::before {
  background: #22c55e !important;
}


/* MEDIA */

#page-crm .kanban-card.opera-card.crm-card-urgency-media {
  background: var(--opera-color-surface) !important;
  border-color: var(--opera-color-border) !important;
}

#page-crm .kanban-card.opera-card.crm-card-urgency-media::before {
  background: #eab308 !important;
}


/* ALTA */

#page-crm .kanban-card.opera-card.crm-card-urgency-alta {
  background: var(--opera-color-surface) !important;
  border-color: var(--opera-color-border) !important;
}

#page-crm .kanban-card.opera-card.crm-card-urgency-alta::before {
  background: #f97316 !important;
}


/* URGENTE */

#page-crm .kanban-card.opera-card.crm-card-urgency-urgente {
  background: var(--opera-color-surface) !important;
  border-color: var(--opera-color-border) !important;
}

#page-crm .kanban-card.opera-card.crm-card-urgency-urgente::before {
  background: var(--opera-color-danger) !important;
}


/*
 * O CSS legado deslocava o avatar 4px quando havia urgencia.
 * Com o novo accent fino isso nao e mais necessario.
 */

#page-crm .kanban-card.opera-card.crm-card-urgency-baixa .crm-card-avatar,
#page-crm .kanban-card.opera-card.crm-card-urgency-media .crm-card-avatar,
#page-crm .kanban-card.opera-card.crm-card-urgency-alta .crm-card-avatar,
#page-crm .kanban-card.opera-card.crm-card-urgency-urgente .crm-card-avatar {
  margin-left: 0 !important;
}


/*
 * ------------------------------------------------------------
 * NEXT ACTIVITY
 * ------------------------------------------------------------
 */

#page-crm .kanban-card.opera-card .crm-card-activity {
  margin-top: var(--opera-space-3) !important;

  padding: 7px 8px !important;

  border: 1px solid var(--opera-color-border) !important;
  border-radius: var(--opera-radius-sm) !important;

  background: var(--opera-color-surface-subtle) !important;
}

#page-crm .kanban-card.opera-card .crm-card-activity-head {
  gap: var(--opera-space-2) !important;
}

#page-crm .kanban-card.opera-card .crm-card-activity-status {
  gap: var(--opera-space-1) !important;

  font-size: var(--opera-font-size-xs) !important;
  font-weight: var(--opera-font-weight-semibold) !important;
}

#page-crm .kanban-card.opera-card .crm-card-activity-date {
  color: var(--opera-color-text-muted) !important;

  font-size: var(--opera-font-size-xs) !important;
  font-weight: var(--opera-font-weight-semibold) !important;
}

#page-crm .kanban-card.opera-card .crm-card-activity-text {
  margin-top: var(--opera-space-2) !important;

  color: var(--opera-color-text-secondary) !important;

  font-size: var(--opera-font-size-xs) !important;
  font-weight: var(--opera-font-weight-medium) !important;
  line-height: 1.3 !important;
}


/*
 * Overdue
 */

#page-crm .kanban-card.opera-card .crm-card-activity-overdue {
  background: #fffafa !important;
  border-color: #fecaca !important;
}

#page-crm
  .kanban-card.opera-card
  .crm-card-activity-overdue
  .crm-card-activity-status {
  color: #b91c1c !important;
}


/*
 * Today
 */

#page-crm .kanban-card.opera-card .crm-card-activity-today {
  background: #fffdf5 !important;
  border-color: #fde68a !important;
}

#page-crm
  .kanban-card.opera-card
  .crm-card-activity-today
  .crm-card-activity-status {
  color: #b45309 !important;
}


/*
 * Scheduled
 */

#page-crm .kanban-card.opera-card .crm-card-activity-scheduled {
  background: #f8fbff !important;
  border-color: #bfdbfe !important;
}

#page-crm
  .kanban-card.opera-card
  .crm-card-activity-scheduled
  .crm-card-activity-status {
  color: #1d4ed8 !important;
}


/*
 * None
 */

#page-crm .kanban-card.opera-card .crm-card-activity-none {
  background: var(--opera-color-surface-subtle) !important;
  border-color: var(--opera-color-border) !important;
}

#page-crm
  .kanban-card.opera-card
  .crm-card-activity-none
  .crm-card-activity-status {
  color: var(--opera-color-text-muted) !important;
}


/*
 * ------------------------------------------------------------
 * STAGE TIMER
 * ------------------------------------------------------------
 */

#page-crm .kanban-card.opera-card [data-crm-stage-timer] {
  margin-top: var(--opera-space-3) !important;

  padding-top: var(--opera-space-3) !important;

  border-top: 1px solid var(--opera-color-border) !important;

  color: var(--opera-color-text-subtle) !important;

  font-size: var(--opera-font-size-xs) !important;
  line-height: 1.2 !important;
}

#page-crm .kanban-card.opera-card [data-crm-stage-timer] > i,
#page-crm .kanban-card.opera-card [data-crm-stage-timer] > svg {
  color: var(--opera-color-text-subtle) !important;
}

#page-crm
  .kanban-card.opera-card
  [data-crm-stage-timer-value] {
  color: var(--opera-color-text-muted) !important;

  font-weight: var(--opera-font-weight-semibold) !important;
}


/*
 * ------------------------------------------------------------
 * MOBILE
 *
 * O CSS mobile legado aumenta tipografia para toque/leitura.
 * Mantemos essa prioridade.
 * ------------------------------------------------------------
 */

@media (max-width: 768px) {

  #page-crm .kanban-card.opera-card .crm-card-title {
    font-size: 14px !important;
    line-height: 1.3 !important;
  }

  #page-crm .kanban-card.opera-card .crm-card-subtitle,
  #page-crm .kanban-card.opera-card .crm-card-compact-line,
  #page-crm .kanban-card.opera-card .crm-card-activity-text {
    font-size: 12px !important;
  }

  #page-crm .kanban-card.opera-card [data-crm-stage-timer] {
    font-size: 11px !important;
  }
}


/*
 * ============================================================
 * FORM CONTROLS
 * ============================================================
 */

.opera-input,
.opera-select,
.opera-textarea {
  width: 100%;

  border: 1px solid var(--opera-color-border);
  border-radius: var(--opera-radius-md);

  background: var(--opera-color-surface);
  color: var(--opera-color-text);

  font-family: var(--opera-font-family);
  font-size: var(--opera-font-size-base);
  font-weight: var(--opera-font-weight-regular);

  transition:
    border-color var(--opera-motion-fast) var(--opera-ease-standard),
    box-shadow var(--opera-motion-fast) var(--opera-ease-standard),
    background-color var(--opera-motion-fast) var(--opera-ease-standard);
}

.opera-input,
.opera-select {
  min-height: 38px;
  padding: 8px 10px;
}

.opera-textarea {
  min-height: 96px;
  padding: 9px 10px;

  line-height: 1.45;
  resize: vertical;
}

.opera-input::placeholder,
.opera-textarea::placeholder {
  color: var(--opera-color-text-subtle);
}

.opera-input:hover,
.opera-select:hover,
.opera-textarea:hover {
  border-color: var(--opera-color-border-strong);
}

.opera-input:focus,
.opera-select:focus,
.opera-textarea:focus {
  outline: none;

  border-color: var(--opera-color-primary);

  box-shadow: var(--opera-focus-ring);
}

.opera-input:disabled,
.opera-select:disabled,
.opera-textarea:disabled {
  cursor: not-allowed;

  background: var(--opera-color-surface-muted);
  color: var(--opera-color-text-muted);

  opacity: 0.72;
}

.opera-input[aria-invalid="true"],
.opera-select[aria-invalid="true"],
.opera-textarea[aria-invalid="true"] {
  border-color: var(--opera-color-danger);
}

.opera-field-hint {
  margin-top: var(--opera-space-1);

  color: var(--opera-color-text-muted);

  font-size: var(--opera-font-size-xs);
  line-height: 1.35;
}


/*
 * ============================================================
 * CRM — NOVA OPORTUNIDADE FORM
 * ============================================================
 */

#crmOpportunityModal .opera-input,
#crmOpportunityModal .opera-select,
#crmOpportunityModal .opera-textarea {
  border-color: var(--opera-color-border) !important;
  border-radius: var(--opera-radius-md) !important;

  background: var(--opera-color-surface) !important;
  color: var(--opera-color-text) !important;

  font-family: var(--opera-font-family) !important;
  font-size: var(--opera-font-size-base) !important;
}

#crmOpportunityModal .opera-input,
#crmOpportunityModal .opera-select {
  min-height: 38px !important;
  padding: 8px 10px !important;
}

#crmOpportunityModal .opera-textarea {
  min-height: 104px !important;
  padding: 9px 10px !important;
}

#crmOpportunityModal .opera-input:hover,
#crmOpportunityModal .opera-select:hover,
#crmOpportunityModal .opera-textarea:hover {
  border-color: var(--opera-color-border-strong) !important;
}

#crmOpportunityModal .opera-input:focus,
#crmOpportunityModal .opera-select:focus,
#crmOpportunityModal .opera-textarea:focus {
  outline: none !important;

  border-color: var(--opera-color-primary) !important;

  box-shadow: var(--opera-focus-ring) !important;
}

#crmOpportunityModal .opera-field-hint {
  color: var(--opera-color-text-muted) !important;

  font-size: var(--opera-font-size-xs) !important;
}


/*
 * Mobile accessibility
 */

@media (max-width: 768px) {

  #crmOpportunityModal .opera-input,
  #crmOpportunityModal .opera-select,
  #crmOpportunityModal .opera-textarea {
    min-height: 44px !important;
    font-size: 16px !important;
  }

  #crmOpportunityModal .opera-textarea {
    min-height: 100px !important;
  }
}


/*
 * ============================================================
 * FORM STRUCTURE
 * ============================================================
 */

.opera-field {
  display: flex;
  flex-direction: column;
  gap: var(--opera-space-2);
}

.opera-field__label {
  color: var(--opera-color-text-secondary);

  font-family: var(--opera-font-family);
  font-size: var(--opera-font-size-md);
  font-weight: var(--opera-font-weight-medium);
  line-height: 1.3;
}


/*
 * ============================================================
 * CHOICE CARD
 * ============================================================
 */

.opera-choice-card {
  position: relative;

  border: 1px solid var(--opera-color-border);
  border-radius: var(--opera-radius-lg);

  background: var(--opera-color-surface);

  transition:
    border-color var(--opera-motion-fast) var(--opera-ease-standard),
    background-color var(--opera-motion-fast) var(--opera-ease-standard),
    box-shadow var(--opera-motion-fast) var(--opera-ease-standard);
}

.opera-choice-card:hover {
  border-color: var(--opera-color-border-strong);
  background: var(--opera-color-surface-subtle);
}

.opera-choice-card:has(.opera-choice-card__control:checked) {
  border-color: var(--opera-color-primary);

  background: var(--opera-color-primary-soft);

  box-shadow: 0 0 0 1px var(--opera-color-primary);
}

.opera-choice-card__control {
  accent-color: var(--opera-color-primary);
}


/*
 * ============================================================
 * CHECK CARD
 * ============================================================
 */

.opera-check-card {
  min-height: 38px;

  border: 1px solid var(--opera-color-border);
  border-radius: var(--opera-radius-md);

  background: var(--opera-color-surface);
  color: var(--opera-color-text-secondary);

  cursor: pointer;

  transition:
    border-color var(--opera-motion-fast) var(--opera-ease-standard),
    background-color var(--opera-motion-fast) var(--opera-ease-standard),
    color var(--opera-motion-fast) var(--opera-ease-standard);
}

.opera-check-card:hover {
  border-color: var(--opera-color-border-strong);

  background: var(--opera-color-surface-subtle);
}

.opera-check-card:has(input:checked) {
  border-color: rgba(21, 99, 111, .38);

  background: var(--opera-color-primary-soft);

  color: var(--opera-color-primary-strong);
}

.opera-check-card input[type="checkbox"] {
  accent-color: var(--opera-color-primary);
}


/*
 * ============================================================
 * CRM — NOVA OPORTUNIDADE CHOICES
 * ============================================================
 */

#crmOpportunityModal .opera-field__label {
  color: var(--opera-color-text-secondary) !important;
}

#crmOpportunityModal .opera-choice-card {
  padding: 14px !important;

  border-color: var(--opera-color-border) !important;
  border-radius: var(--opera-radius-lg) !important;

  background: var(--opera-color-surface) !important;
}

#crmOpportunityModal .opera-choice-card:hover {
  border-color: var(--opera-color-border-strong) !important;
  background: var(--opera-color-surface-subtle) !important;
}

#crmOpportunityModal
.opera-choice-card:has(.opera-choice-card__control:checked) {
  border-color: var(--opera-color-primary) !important;

  background: var(--opera-color-primary-soft) !important;

  box-shadow:
    0 0 0 1px var(--opera-color-primary) !important;
}

#crmOpportunityModal .opera-check-card {
  min-height: 40px !important;

  padding: 8px 10px !important;

  border-color: var(--opera-color-border) !important;
  border-radius: var(--opera-radius-md) !important;

  background: var(--opera-color-surface) !important;
  color: var(--opera-color-text-secondary) !important;
}

#crmOpportunityModal .opera-check-card:hover {
  border-color: var(--opera-color-border-strong) !important;
  background: var(--opera-color-surface-subtle) !important;
}

#crmOpportunityModal .opera-check-card:has(input:checked) {
  border-color: rgba(21,99,111,.38) !important;
  background: var(--opera-color-primary-soft) !important;
  color: var(--opera-color-primary-strong) !important;
}


/*
 * Mobile
 */

@media (max-width: 768px) {

  #crmOpportunityModal .opera-choice-card {
    padding: 14px !important;
  }

  #crmOpportunityModal .opera-check-card {
    min-height: 44px !important;
  }
}


/*
 * ============================================================
 * MODAL SYSTEM
 * ============================================================
 */

.opera-modal {
  font-family: var(--opera-font-family);
}

.opera-modal__dialog {
  background: var(--opera-color-surface);

  border: 1px solid var(--opera-color-border);
  border-radius: var(--opera-radius-xl);

  box-shadow: var(--opera-shadow-overlay);
}

.opera-modal__header {
  background: var(--opera-color-surface);

  border-bottom: 1px solid var(--opera-color-border);
}

.opera-modal__title {
  margin: 0;

  color: var(--opera-color-text);

  font-family: var(--opera-font-family);
  font-size: var(--opera-font-size-xl);
  font-weight: var(--opera-font-weight-bold);
  line-height: 1.2;
}

.opera-modal__description {
  color: var(--opera-color-text-muted);

  font-size: var(--opera-font-size-md);
  line-height: 1.4;
}

.opera-modal__body {
  background: var(--opera-color-surface);
}

.opera-modal__footer {
  background: var(--opera-color-surface);

  border-top: 1px solid var(--opera-color-border);
}

.opera-modal__close {
  flex: 0 0 auto;
}


/*
 * ============================================================
 * CRM — NOVA OPORTUNIDADE MODAL
 * ============================================================
 */

#crmOpportunityModal.opera-modal .opera-modal__dialog {
  width: min(
    760px,
    calc(100vw - 32px)
  ) !important;

  max-width: 760px !important;
  max-height: 90vh !important;

  padding: 0 !important;

  overflow: hidden !important;

  border-color: var(--opera-color-border) !important;
  border-radius: var(--opera-radius-xl) !important;

  background: var(--opera-color-surface) !important;

  box-shadow: var(--opera-shadow-overlay) !important;
}

#crmOpportunityModal .opera-modal__header {
  padding: 18px 20px !important;

  border-bottom-color: var(--opera-color-border) !important;

  background: var(--opera-color-surface) !important;
}

#crmOpportunityModal .opera-modal__title {
  color: var(--opera-color-text) !important;

  font-size: 20px !important;
  font-weight: var(--opera-font-weight-bold) !important;
}

#crmOpportunityModal .opera-modal__description {
  margin-top: 4px !important;

  color: var(--opera-color-text-muted) !important;

  font-size: 13px !important;
}

#crmOpportunityModal .opera-modal__close {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;

  border-radius: var(--opera-radius-md) !important;

  border-color: transparent !important;
  background: transparent !important;

  color: var(--opera-color-text-muted) !important;
}

#crmOpportunityModal .opera-modal__close:hover {
  border-color: var(--opera-color-border) !important;

  background: var(--opera-color-surface-subtle) !important;

  color: var(--opera-color-text) !important;
}

#crmOpportunityModal .opera-modal__body {
  padding: 20px !important;

  background: var(--opera-color-surface) !important;
}

#crmOpportunityModal .opera-modal__footer {
  padding: 14px 20px !important;

  border-top-color: var(--opera-color-border) !important;

  background: var(--opera-color-surface) !important;
}


/*
 * Mobile
 */

@media (max-width: 768px) {

  #crmOpportunityModal.opera-modal {
    align-items: stretch !important;
    justify-content: stretch !important;

    padding: 0 !important;
  }

  #crmOpportunityModal.opera-modal .opera-modal__dialog {
    width: 100vw !important;
    max-width: 100vw !important;

    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;

    margin: 0 !important;

    border: 0 !important;
    border-radius: 0 !important;
  }

  #crmOpportunityModal .opera-modal__header {
    padding:
      max(14px, env(safe-area-inset-top))
      14px
      14px
      !important;
  }

  #crmOpportunityModal .opera-modal__body {
    padding:
      16px
      14px
      110px
      !important;

    flex: 1 1 auto !important;
    min-height: 0 !important;

    overflow-y: auto !important;

    -webkit-overflow-scrolling: touch;
  }

  #crmOpportunityModal .opera-modal__footer {
    padding:
      12px
      14px
      max(
        12px,
        env(safe-area-inset-bottom)
      )
      !important;
  }

  #crmOpportunityModal .opera-modal__title {
    font-size: 18px !important;
  }

  #crmOpportunityModal .opera-modal__description {
    font-size: 12px !important;
  }
}


/*
 * ============================================================
 * CRM — STAGE PANEL
 * ============================================================
 */

#crmCardStagePanelModal.opera-modal .opera-modal__dialog {
  width: min(
    920px,
    calc(100vw - 32px)
  ) !important;

  max-width: 920px !important;
  max-height: 90vh !important;

  padding: 0 !important;

  overflow: hidden !important;

  display: flex !important;
  flex-direction: column !important;

  border: 1px solid var(--opera-color-border) !important;
  border-radius: var(--opera-radius-xl) !important;

  background: var(--opera-color-surface) !important;

  box-shadow: var(--opera-shadow-overlay) !important;
}


/*
 * Header
 */

#crmCardStagePanelModal .opera-modal__header {
  margin: 0 !important;

  padding: 18px 20px !important;

  border-bottom:
    1px solid var(--opera-color-border) !important;

  background: var(--opera-color-surface) !important;

  flex: 0 0 auto;
}

#crmCardStagePanelModal .opera-modal__title {
  margin: 0 !important;

  color: var(--opera-color-text) !important;

  font-size: 20px !important;
  font-weight: var(--opera-font-weight-bold) !important;
  line-height: 1.2 !important;
}

#crmCardStagePanelModal .opera-modal__description {
  margin-top: 4px !important;

  color: var(--opera-color-text-muted) !important;

  font-size: 13px !important;
  line-height: 1.4 !important;
}


/*
 * Close
 */

#crmCardStagePanelModal .opera-modal__close {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;

  padding: 0 !important;

  border-color: transparent !important;
  border-radius: var(--opera-radius-md) !important;

  background: transparent !important;

  color: var(--opera-color-text-muted) !important;
}

#crmCardStagePanelModal .opera-modal__close:hover {
  border-color: var(--opera-color-border) !important;

  background: var(--opera-color-surface-subtle) !important;

  color: var(--opera-color-text) !important;
}


/*
 * Body
 */

#crmCardStagePanelModal .opera-modal__body {
  flex: 1 1 auto;

  min-height: 0;

  padding: 20px !important;

  overflow-y: auto !important;
  overflow-x: hidden !important;

  background: var(--opera-color-surface) !important;

  -webkit-overflow-scrolling: touch;
}


/*
 * Sections
 */

#crmCardStagePanelModal
.opera-modal__body
> section {
  padding-bottom: 18px;

  border-bottom:
    1px solid var(--opera-color-border);
}

#crmCardStagePanelModal
.opera-modal__body
> section:last-child {
  padding-bottom: 0;

  border-bottom: 0;
}

#crmCardStagePanelModal
.opera-modal__body
> section
> .text-sm.font-semibold,
#crmCardStagePanelModal
.opera-modal__body
> section
> div
> .text-sm.font-semibold {
  color: var(--opera-color-text-secondary) !important;

  font-size: 13px !important;
  font-weight: var(--opera-font-weight-semibold) !important;
}


/*
 * Summary
 */

#crmCardStagePanelSummary {
  margin-top: 10px;
}


/*
 * Fields
 */

#crmCardStagePanelFields {
  margin-top: 10px;
}

#crmCardStagePanelFeedback {
  margin-top: 10px;
}


/*
 * Timeline
 */

#crmCardStagePanelModal #crmCardStageTimelineToggle.opera-btn {
  min-height: 32px !important;

  padding: 6px 10px !important;

  font-size: 12px !important;
}

#crmCardStageTimelineBody {
  margin-top: 10px;
}


/*
 * Transfer
 */

#crmCardStagePanelModal #crmCardStageTransferSelect.opera-select {
  min-height: 38px !important;
}

#crmCardStagePanelModal #crmCardStageTransferBtn.opera-btn {
  min-height: 38px !important;
}


/*
 * Footer
 */

#crmCardStagePanelModal .opera-modal__footer {
  flex: 0 0 auto;

  margin: 0 !important;

  padding: 14px 20px !important;

  border-top:
    1px solid var(--opera-color-border) !important;

  background: var(--opera-color-surface) !important;
}

#crmCardStagePanelModal .opera-modal__footer .opera-btn {
  min-height: 40px !important;
}


/*
 * ============================================================
 * MOBILE
 * ============================================================
 */

@media (max-width: 768px) {

  #crmCardStagePanelModal.opera-modal {
    align-items: stretch !important;
    justify-content: stretch !important;

    padding: 0 !important;
  }

  #crmCardStagePanelModal.opera-modal .opera-modal__dialog {
    width: 100vw !important;
    max-width: 100vw !important;

    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;

    margin: 0 !important;

    border: 0 !important;
    border-radius: 0 !important;

    display: flex !important;
    flex-direction: column !important;
  }

  #crmCardStagePanelModal .opera-modal__header {
    padding:
      max(
        14px,
        env(safe-area-inset-top)
      )
      14px
      14px
      !important;
  }

  #crmCardStagePanelModal .opera-modal__title {
    font-size: 18px !important;
  }

  #crmCardStagePanelModal .opera-modal__description {
    font-size: 12px !important;
  }

  #crmCardStagePanelModal .opera-modal__body {
    flex: 1 1 auto !important;

    min-height: 0 !important;

    padding:
      16px
      14px
      20px
      !important;

    overflow-y: auto !important;

    -webkit-overflow-scrolling: touch;
  }

  #crmCardStagePanelModal
  .opera-modal__body
  > section {
    margin-bottom: 18px !important;

    padding-bottom: 16px;
  }

  #crmCardStagePanelModal .opera-modal__footer {
    grid-template-columns: 1fr !important;

    gap: 8px !important;

    padding:
      12px
      14px
      max(
        12px,
        env(safe-area-inset-bottom)
      )
      !important;
  }

  #crmCardStagePanelModal .opera-modal__footer .opera-btn {
    width: 100% !important;

    min-height: 44px !important;
  }

  #crmCardStagePanelModal #crmCardStageTransferSelect,
  #crmCardStagePanelModal #crmCardStageTransferBtn {
    min-height: 44px !important;
  }

  #crmCardStagePanelModal #crmCardStageTimelineToggle {
    min-height: 36px !important;
  }
}


/*
 * ============================================================
 * KANBAN STAGE SYSTEM
 * ============================================================
 */

.opera-kanban-stage {
  display: flex;
  flex-direction: column;

  min-width: 0;

  background: var(--opera-color-surface-subtle);

  border:
    1px solid var(--opera-color-border);

  border-radius: var(--opera-radius-xl);

  overflow: hidden;
}

.opera-kanban-stage__header {
  flex: 0 0 auto;
}

.opera-kanban-stage__title {
  min-width: 0;
}

.opera-kanban-stage__title-text {
  min-width: 0;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.opera-kanban-stage__count {
  flex: 0 0 auto;
}

.opera-kanban-stage__actions {
  display: flex;
  align-items: center;

  flex: 0 0 auto;
}

.opera-kanban-stage__body {
  flex: 1 1 auto;
  min-height: 0;
}


/*
 * ============================================================
 * CRM — KANBAN STAGES
 * ============================================================
 */

#page-crm
#kanbanBoard.crm-commercial-board
> .opera-kanban-stage:not(.kanban-fase-vazia):not(.kanban-fase-recolhida) {
  width: 248px !important;
  min-width: 230px !important;
  max-width: 260px !important;

  flex: 0 0 248px !important;

  padding: 10px !important;

  border:
    1px solid var(--opera-color-border) !important;

  border-radius:
    var(--opera-radius-xl) !important;

  background:
    var(--opera-color-surface-subtle) !important;

  box-shadow: none !important;
}


/*
 * Header
 */

#page-crm
.opera-kanban-stage__header {
  display: flex !important;
  flex-direction: column !important;

  gap: 7px !important;

  margin: 0 0 8px !important;

  padding:
    2px
    2px
    10px
    !important;

  position: sticky !important;
  top: 0 !important;
  z-index: 2 !important;

  border-bottom:
    1px solid var(--opera-color-border) !important;

  background:
    var(--opera-color-surface-subtle) !important;
}


/*
 * Titulo
 */

#page-crm
.opera-kanban-stage__header-top {
  display: flex !important;
  align-items: center !important;

  min-width: 0 !important;
}

#page-crm
.opera-kanban-stage__title {
  display: flex !important;
  align-items: center !important;

  flex: 1 1 auto !important;

  min-width: 0 !important;

  gap: 7px !important;

  color:
    var(--opera-color-text) !important;

  font-size: 13px !important;
  font-weight:
    var(--opera-font-weight-semibold) !important;

  line-height: 1.25 !important;
}

#page-crm
.opera-kanban-stage__title
> span:first-child {
  width: 8px !important;
  height: 8px !important;

  min-width: 8px !important;

  flex: 0 0 8px !important;
}


/*
 * Meta + actions
 */

#page-crm
.opera-kanban-stage__header-bottom {
  display: flex !important;

  align-items: center !important;
  justify-content: flex-end !important;

  gap: 6px !important;

  min-width: 0 !important;
}

#page-crm
.opera-kanban-stage__count {
  min-width: 26px !important;
  height: 22px !important;

  padding: 0 7px !important;

  display: inline-flex !important;

  align-items: center !important;
  justify-content: center !important;

  border:
    1px solid rgba(21, 99, 111, .10) !important;

  border-radius:
    var(--opera-radius-pill) !important;

  background:
    var(--opera-color-primary-soft) !important;

  color:
    var(--opera-color-primary-strong) !important;

  font-size: 11px !important;
  font-weight:
    var(--opera-font-weight-semibold) !important;
}

#page-crm
.opera-kanban-stage__actions {
  gap: 4px !important;

  margin-left: 0 !important;
}


/*
 * Toggle
 */

#page-crm
.opera-kanban-stage__toggle {
  width: 30px !important;
  height: 30px !important;

  min-width: 30px !important;
  min-height: 30px !important;

  padding: 0 !important;

  flex: 0 0 30px !important;

  border:
    1px solid var(--opera-color-border) !important;

  border-radius:
    var(--opera-radius-md) !important;

  background:
    var(--opera-color-surface) !important;

  color:
    var(--opera-color-text-muted) !important;
}

#page-crm
.opera-kanban-stage__toggle:hover {
  border-color:
    var(--opera-color-border-strong) !important;

  background:
    var(--opera-color-surface) !important;

  color:
    var(--opera-color-primary) !important;
}


/*
 * Body
 */

#page-crm
#kanbanBoard.crm-commercial-board
.opera-kanban-stage__body {
  flex: 1 1 auto !important;

  min-height: 0 !important;

  padding:
    2px
    1px
    4px
    !important;

  overflow-y: auto !important;
  overflow-x: hidden !important;

  overscroll-behavior-y:
    contain !important;

  scrollbar-gutter:
    stable !important;
}


/*
 * Empty state interno
 */

#page-crm
.opera-kanban-stage__body
.crm-empty-stage {
  padding: 24px 12px !important;

  border:
    1px dashed var(--opera-color-border) !important;

  border-radius:
    var(--opera-radius-lg) !important;

  background:
    rgba(255, 255, 255, .58) !important;

  color:
    var(--opera-color-text-muted) !important;

  text-align: center !important;

  font-size: 12px !important;
  line-height: 1.4 !important;
}


/*
 * ============================================================
 * RECOLHIDA / VAZIA
 *
 * Mantemos o comportamento legado:
 * largura de 44px, titulo vertical e body oculto.
 * ============================================================
 */

#page-crm
#kanbanBoard.crm-commercial-board
> .opera-kanban-stage.kanban-fase-recolhida,

#page-crm
#kanbanBoard.crm-commercial-board
> .opera-kanban-stage.kanban-fase-vazia {
  flex: 0 0 44px !important;

  width: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;

  padding:
    10px
    6px
    !important;

  border-radius:
    var(--opera-radius-lg) !important;

  align-self:
    flex-start !important;
}

#page-crm
.opera-kanban-stage.kanban-fase-recolhida
.opera-kanban-stage__header,

#page-crm
.opera-kanban-stage.kanban-fase-vazia
.opera-kanban-stage__header {
  margin: 0 !important;

  padding:
    2px
    0
    !important;

  border-bottom: 0 !important;

  align-items:
    center !important;
}

#page-crm
.opera-kanban-stage.kanban-fase-recolhida
.opera-kanban-stage__title,

#page-crm
.opera-kanban-stage.kanban-fase-vazia
.opera-kanban-stage__title {
  writing-mode:
    vertical-rl !important;

  transform:
    rotate(180deg) !important;

  text-orientation:
    mixed !important;

  white-space:
    nowrap !important;

  align-items:
    center !important;

  justify-content:
    center !important;

  min-height:
    160px !important;
}

#page-crm
.opera-kanban-stage.kanban-fase-recolhida
.opera-kanban-stage__title
> span:first-child,

#page-crm
.opera-kanban-stage.kanban-fase-vazia
.opera-kanban-stage__title
> span:first-child {
  display:
    none !important;
}

#page-crm
.opera-kanban-stage.kanban-fase-recolhida
.opera-kanban-stage__body,

#page-crm
.opera-kanban-stage.kanban-fase-vazia
.opera-kanban-stage__body {
  display:
    none !important;
}

#page-crm
.opera-kanban-stage.kanban-fase-recolhida
.opera-kanban-stage__actions {
  flex-direction:
    column !important;

  align-items:
    center !important;
}


/*
 * ============================================================
 * MOBILE
 * ============================================================
 */

@media (max-width: 768px) {

  #page-crm
  #kanbanBoard.crm-commercial-board
  > .opera-kanban-stage:not(.kanban-fase-vazia):not(.kanban-fase-recolhida) {
    flex:
      0 0
      calc(88vw - 16px)
      !important;

    width:
      calc(88vw - 16px)
      !important;

    min-width:
      calc(88vw - 16px)
      !important;

    max-width:
      calc(88vw - 16px)
      !important;
  }

  #page-crm
  .opera-kanban-stage__header {
    padding-bottom:
      9px !important;
  }

  #page-crm
  .opera-kanban-stage__title {
    font-size:
      13px !important;
  }

  #page-crm
  .opera-kanban-stage__toggle {
    width:
      34px !important;

    height:
      34px !important;

    min-width:
      34px !important;

    min-height:
      34px !important;
  }
}


/*
 * ============================================================
 * INBOX — SHELL SYSTEM V1
 * ============================================================
 */

#page-inbox.opera-inbox {
  min-width: 0;
}

#page-inbox.opera-inbox .inbox-layout {
  gap: 12px !important;
}


/*
 * Search
 */

#page-inbox .opera-inbox__search.opera-input {
  height: 38px !important;

  border:
    1px solid var(--opera-color-border) !important;

  border-radius:
    var(--opera-radius-lg) !important;

  background-color:
    var(--opera-color-surface-subtle) !important;

  color:
    var(--opera-color-text) !important;
}

#page-inbox .opera-inbox__search.opera-input:focus {
  border-color:
    var(--opera-color-primary) !important;

  background-color:
    var(--opera-color-surface) !important;
}


/*
 * Main shell cards
 */

#page-inbox .opera-inbox__sidebar,
#page-inbox .opera-inbox__details,
#page-inbox .inbox-layout > .chart-box:nth-child(2) {
  border:
    1px solid var(--opera-color-border) !important;

  border-radius:
    var(--opera-radius-xl) !important;

  background:
    var(--opera-color-surface) !important;

  box-shadow:
    var(--opera-shadow-xs) !important;
}


/*
 * Left navigation
 */

#page-inbox .opera-inbox__tabs {
  padding: 4px !important;

  gap: 2px;

  background:
    var(--opera-color-surface) !important;
}

#page-inbox .opera-inbox__tabs .inbox-tab {
  min-height: 34px;

  padding:
    7px
    8px
    !important;

  border-radius:
    var(--opera-radius-md) !important;

  color:
    var(--opera-color-text-muted) !important;

  font-size: 12px !important;
  font-weight:
    var(--opera-font-weight-semibold) !important;
}

#page-inbox .opera-inbox__tabs .inbox-tab:hover {
  background:
    var(--opera-color-surface-subtle) !important;

  color:
    var(--opera-color-text-secondary) !important;
}

#page-inbox .opera-inbox__tabs .inbox-tab.active {
  background:
    var(--opera-color-primary-soft) !important;

  color:
    var(--opera-color-primary-strong) !important;
}


/*
 * Conversation list shell
 */

#page-inbox .opera-inbox__conversation-list {
  min-width: 0;

  padding: 4px;

  background:
    var(--opera-color-surface) !important;
}


/*
 * Main conversation header
 */

#page-inbox
.inbox-layout
> .chart-box:nth-child(2)
> .px-5.py-4.border-b {
  min-height: 66px;

  padding:
    12px
    16px
    !important;

  border-color:
    var(--opera-color-border) !important;

  background:
    var(--opera-color-surface) !important;
}

#page-inbox #chatAvatar {
  width: 38px !important;
  height: 38px !important;

  min-width: 38px;

  font-size: 12px;

  box-shadow: none !important;
}

#page-inbox #chatTitle {
  color:
    var(--opera-color-text) !important;

  font-size: 15px !important;
  font-weight:
    var(--opera-font-weight-semibold) !important;

  line-height: 1.25;
}

#page-inbox #chatSubtitle {
  margin-top: 2px;

  color:
    var(--opera-color-text-muted) !important;

  font-size: 12px !important;
}


/*
 * Conversation action menu
 */

#page-inbox #btnConversationActions.opera-icon-btn {
  width: 32px !important;
  height: 32px !important;

  min-width: 32px !important;
  min-height: 32px !important;
}

#page-inbox #conversationActionsMenu.opera-menu {
  width: 260px !important;

  padding: 6px !important;

  border:
    1px solid var(--opera-color-border) !important;

  border-radius:
    var(--opera-radius-lg) !important;

  background:
    var(--opera-color-surface) !important;

  box-shadow:
    var(--opera-shadow-overlay) !important;
}

#page-inbox #conversationActionsMenu.opera-menu button {
  min-height: 36px;

  border-radius:
    var(--opera-radius-md) !important;

  color:
    var(--opera-color-text-secondary);

  font-size: 13px;
  font-weight:
    var(--opera-font-weight-medium);
}


/*
 * ============================================================
 * CHAT PANELS
 * ============================================================
 */

#page-inbox .opera-inbox__chat-grid {
  gap: 10px !important;

  padding: 12px !important;
}

#page-inbox .opera-chat-panel {
  min-width: 0;

  border:
    1px solid var(--opera-color-border) !important;

  border-radius:
    var(--opera-radius-lg) !important;

  background:
    var(--opera-color-surface-subtle) !important;

  box-shadow: none !important;

  overflow: hidden;
}

#page-inbox
.opera-chat-panel
> .px-4.py-3.border-b {
  min-height: 46px;

  padding:
    10px
    12px
    !important;

  border-color:
    var(--opera-color-border) !important;

  background:
    var(--opera-color-surface) !important;
}

#page-inbox
.opera-chat-panel
.inbox-panel-title-wrap
.font-semibold {
  color:
    var(--opera-color-text-secondary) !important;

  font-size: 13px !important;
  font-weight:
    var(--opera-font-weight-semibold) !important;
}

#page-inbox
.opera-chat-panel
.inbox-panel-title-wrap
.text-xs {
  margin-top: 1px;

  color:
    var(--opera-color-text-muted) !important;

  font-size: 11px !important;
}


/*
 * Message viewport
 */

#page-inbox .opera-chat-panel__messages {
  min-height: 0 !important;

  padding: 14px !important;

  background:
    var(--opera-color-surface-subtle) !important;

  scrollbar-gutter: stable;
}


/*
 * ============================================================
 * COMPOSERS
 * ============================================================
 */

#page-inbox
.opera-chat-panel
> div
> .p-3.border-t {
  min-height: 58px;

  padding:
    9px
    10px
    !important;

  gap: 7px !important;

  border-color:
    var(--opera-color-border) !important;

  background:
    var(--opera-color-surface) !important;
}

#page-inbox .opera-chat-composer__input {
  min-width: 0;

  height: 40px !important;
  min-height: 40px !important;

  padding:
    8px
    11px
    !important;

  border:
    1px solid var(--opera-color-border) !important;

  border-radius:
    var(--opera-radius-lg) !important;

  background:
    var(--opera-color-surface) !important;

  color:
    var(--opera-color-text) !important;

  font-size: 13px !important;
}

#page-inbox .opera-chat-composer__input::placeholder {
  color:
    var(--opera-color-text-subtle) !important;
}

#page-inbox .opera-chat-composer__input:focus {
  border-color:
    var(--opera-color-primary) !important;

  box-shadow:
    var(--opera-focus-ring) !important;
}


/*
 * Attachment buttons
 */

#page-inbox
.opera-chat-panel
.p-3.border-t
button:not(.opera-chat-composer__send) {
  width: 40px !important;
  height: 40px !important;

  min-width: 40px !important;

  padding: 0 !important;

  border:
    1px solid var(--opera-color-border) !important;

  border-radius:
    var(--opera-radius-lg) !important;

  background:
    var(--opera-color-surface) !important;

  color:
    var(--opera-color-text-muted) !important;
}

#page-inbox
.opera-chat-panel
.p-3.border-t
button:not(.opera-chat-composer__send):hover {
  border-color:
    var(--opera-color-border-strong) !important;

  background:
    var(--opera-color-surface-subtle) !important;

  color:
    var(--opera-color-primary) !important;
}


/*
 * Client send
 */

#page-inbox .opera-chat-composer__send {
  width: 40px !important;
  height: 40px !important;

  min-width: 40px !important;
  min-height: 40px !important;

  padding: 0 !important;

  border:
    1px solid var(--opera-color-primary) !important;

  border-radius:
    var(--opera-radius-lg) !important;

  background:
    var(--opera-color-primary) !important;

  color: #fff !important;
}

#page-inbox .opera-chat-composer__send:hover {
  background:
    var(--opera-color-primary-strong) !important;
}


/*
 * Internal send button retains its semantic dark appearance,
 * but uses the same dimensions as the client composer.
 */

#page-inbox
.opera-chat-panel--internal
.p-3.border-t
button:last-child {
  width: 40px !important;
  height: 40px !important;

  min-width: 40px !important;

  padding: 0 !important;

  border-radius:
    var(--opera-radius-lg) !important;
}


/*
 * ============================================================
 * RIGHT DETAILS
 * ============================================================
 */

#page-inbox .opera-inbox__details {
  overflow: hidden;
}

#page-inbox .opera-inbox__details > .px-3.py-2.border-b {
  min-height: 48px;

  padding:
    9px
    12px
    !important;

  border-color:
    var(--opera-color-border) !important;

  background:
    var(--opera-color-surface) !important;
}


/*
 * ============================================================
 * MOBILE
 *
 * Mantemos o controlador mobile existente.
 * Aqui somente harmonizamos superficies e controles.
 * ============================================================
 */

@media (max-width: 640px) {

  #page-inbox.opera-inbox .inbox-layout {
    gap: 0 !important;
  }

  #page-inbox .opera-inbox__sidebar,
  #page-inbox .opera-inbox__details,
  #page-inbox .inbox-layout > .chart-box:nth-child(2) {
    border-radius: 0 !important;

    box-shadow: none !important;
  }

  #page-inbox .opera-inbox__chat-grid {
    padding: 0 !important;

    gap: 0 !important;
  }

  #page-inbox .opera-chat-panel {
    border-radius: 0 !important;
  }

  #page-inbox .opera-chat-panel__messages {
    padding:
      12px
      10px
      !important;
  }

  #page-inbox
  .opera-chat-panel
  > div
  > .p-3.border-t {
    padding:
      8px
      10px
      max(
        8px,
        env(safe-area-inset-bottom)
      )
      !important;
  }

  #page-inbox .opera-chat-composer__input {
    min-height: 44px !important;
    height: 44px !important;

    font-size: 16px !important;
  }

  #page-inbox
  .opera-chat-panel
  .p-3.border-t
  button {
    width: 44px !important;
    height: 44px !important;

    min-width: 44px !important;
    min-height: 44px !important;
  }
}


/*
 * ============================================================
 * MOBILE INBOX DESIGN SYSTEM V1
 * ============================================================
 */

@media (max-width: 640px) {

  /*
   * Página
   */

  body.opera-mobile-inbox-list-open
  #page-inbox.opera-inbox {
    background:
      var(--opera-color-surface) !important;
  }


  /*
   * Header da lista
   */

  body.opera-mobile-inbox-list-open
  #page-inbox
  .opera-inbox-page-header {
    display: grid !important;

    grid-template-columns:
      minmax(0, 1fr)
      auto
      !important;

    align-items:
      center !important;

    gap: 8px !important;

    margin: 0 !important;

    padding:
      14px
      14px
      10px
      !important;

    background:
      var(--opera-color-surface) !important;
  }

  body.opera-mobile-inbox-list-open
  #page-inbox
  .opera-inbox-page-header h1 {
    margin: 0 !important;

    padding: 0 !important;

    color:
      var(--opera-color-text) !important;

    font-size:
      24px !important;

    font-weight:
      var(--opera-font-weight-bold) !important;

    line-height:
      1.15 !important;

    letter-spacing:
      -0.02em;
  }


  /*
   * @ Nova conversa
   */

  body.opera-mobile-inbox-list-open
  #operaMobilePeopleButton {
    position:
      static !important;

    grid-column:
      2 !important;

    grid-row:
      1 !important;

    width:
      40px !important;

    height:
      40px !important;

    min-width:
      40px !important;

    margin:
      0 !important;

    border:
      1px solid
      rgba(21, 99, 111, .14)
      !important;

    border-radius:
      12px !important;

    background:
      var(--opera-color-primary-soft) !important;

    color:
      var(--opera-color-primary-strong) !important;

    font-size:
      21px !important;

    font-weight:
      700 !important;

    box-shadow:
      none !important;
  }

  body.opera-mobile-inbox-list-open
  #operaMobilePeopleButton:active {
    background:
      rgba(21, 99, 111, .14) !important;

    transform:
      scale(.97);
  }


  /*
   * Busca
   */

  body.opera-mobile-inbox-list-open
  #page-inbox
  .opera-inbox-page-header
  > .flex {
    grid-column:
      1 / -1 !important;

    width:
      100% !important;

    margin:
      2px 0 0 !important;
  }

  body.opera-mobile-inbox-list-open
  #page-inbox
  #inboxSearch.opera-inbox__search {
    width:
      100% !important;

    height:
      42px !important;

    min-height:
      42px !important;

    border:
      1px solid
      var(--opera-color-border) !important;

    border-radius:
      10px !important;

    background-color:
      var(--opera-color-surface-subtle) !important;

    color:
      var(--opera-color-text) !important;

    font-size:
      16px !important;

    box-shadow:
      none !important;
  }

  body.opera-mobile-inbox-list-open
  #page-inbox
  #inboxSearch:focus {
    border-color:
      var(--opera-color-primary) !important;

    background:
      var(--opera-color-surface) !important;
  }


  /*
   * Esconde o botão de filtro legado no mobile.
   */

  body.opera-mobile-inbox-list-open
  #page-inbox
  .opera-inbox-page-header
  > .flex
  > button {
    display:
      none !important;
  }


  /*
   * Painel da lista
   */

  body.opera-mobile-inbox-list-open
  #page-inbox
  #inboxLeftPanel {
    width:
      100% !important;

    max-width:
      100% !important;

    margin:
      0 !important;

    border:
      0 !important;

    border-radius:
      0 !important;

    background:
      var(--opera-color-surface) !important;

    box-shadow:
      none !important;
  }


  /*
   * Lista mobile criada pelo JS
   */

  #page-inbox
  .opera-mobile-internal-list {
    width:
      100% !important;

    margin:
      0 !important;

    padding:
      0
      14px
      20px
      !important;

    background:
      var(--opera-color-surface) !important;
  }


  /*
   * Linha da conversa
   */

  #page-inbox
  .opera-mobile-chat-row {
    display:
      flex !important;

    align-items:
      center !important;

    width:
      100% !important;

    min-height:
      68px !important;

    gap:
      11px !important;

    margin:
      0 !important;

    padding:
      10px
      0
      !important;

    border:
      0 !important;

    border-bottom:
      1px solid
      var(--opera-color-border) !important;

    border-radius:
      0 !important;

    background:
      transparent !important;

    text-align:
      left !important;

    box-shadow:
      none !important;
  }

  #page-inbox
  .opera-mobile-chat-row:active {
    background:
      var(--opera-color-surface-subtle) !important;
  }


  /*
   * Avatar
   */

  #page-inbox
  .opera-mobile-chat-row-avatar {
    position:
      relative;

    display:
      inline-flex !important;

    align-items:
      center !important;

    justify-content:
      center !important;

    flex:
      0 0
      46px !important;

    width:
      46px !important;

    height:
      46px !important;

    border:
      1px solid
      rgba(21, 99, 111, .08);

    border-radius:
      50% !important;

    background:
      var(--opera-color-primary-soft) !important;

    color:
      var(--opera-color-primary-strong) !important;

    font-size:
      14px !important;

    font-weight:
      700 !important;
  }

  /*
   * Indicador online
   */

  #page-inbox
  .opera-mobile-chat-row-avatar
  > i {
    position:
      absolute;

    right:
      0;

    bottom:
      1px;

    width:
      10px;

    height:
      10px;

    border:
      2px solid
      var(--opera-color-surface);

    border-radius:
      50%;

    background:
      var(--opera-color-success);
  }


  /*
   * Conteúdo da conversa
   */

  #page-inbox
  .opera-mobile-chat-row-body {
    display:
      block !important;

    flex:
      1 1 auto !important;

    min-width:
      0 !important;
  }

  #page-inbox
  .opera-mobile-chat-row-top {
    display:
      flex !important;

    align-items:
      center !important;

    justify-content:
      space-between !important;

    gap:
      10px !important;

    min-width:
      0 !important;
  }

  #page-inbox
  .opera-mobile-chat-row-top
  strong {
    min-width:
      0 !important;

    overflow:
      hidden;

    text-overflow:
      ellipsis;

    white-space:
      nowrap;

    color:
      var(--opera-color-text) !important;

    font-size:
      15px !important;

    font-weight:
      var(--opera-font-weight-semibold) !important;

    line-height:
      1.25;
  }

  #page-inbox
  .opera-mobile-chat-row-top
  time {
    flex:
      0 0 auto;

    color:
      var(--opera-color-text-muted) !important;

    font-size:
      11px !important;

    font-weight:
      500;
  }


  /*
   * Preview
   */

  #page-inbox
  .opera-mobile-chat-row-bottom {
    display:
      flex !important;

    align-items:
      center !important;

    justify-content:
      space-between !important;

    gap:
      8px !important;

    margin-top:
      3px;
  }

  #page-inbox
  .opera-mobile-chat-row-bottom
  > span {
    min-width:
      0;

    overflow:
      hidden;

    text-overflow:
      ellipsis;

    white-space:
      nowrap;

    color:
      var(--opera-color-text-muted) !important;

    font-size:
      13px !important;

    line-height:
      1.3;
  }


  /*
   * Não lidas
   */

  #page-inbox
  .opera-mobile-chat-row-bottom
  > b {
    display:
      inline-flex !important;

    align-items:
      center !important;

    justify-content:
      center !important;

    flex:
      0 0 auto;

    min-width:
      19px;

    height:
      19px;

    padding:
      0 5px;

    border-radius:
      999px;

    background:
      var(--opera-color-primary) !important;

    color:
      #fff !important;

    font-size:
      10px !important;

    font-weight:
      700 !important;
  }


  /*
   * Estado vazio
   */

  #page-inbox
  .opera-mobile-inbox-empty {
    display:
      flex;

    flex-direction:
      column;

    align-items:
      center;

    justify-content:
      center;

    min-height:
      180px;

    padding:
      28px
      20px;

    color:
      var(--opera-color-text-muted);

    text-align:
      center;

    font-size:
      13px;
  }

  #page-inbox
  .opera-mobile-inbox-empty
  strong {
    color:
      var(--opera-color-text-secondary);

    font-size:
      14px;

    font-weight:
      600;
  }

  #page-inbox
  .opera-mobile-inbox-empty
  span {
    margin-top:
      4px;
  }


  /*
   * ============================================================
   * MOBILE CHAT HEADER
   * ============================================================
   */

  #page-inbox
  .opera-mobile-stable-chat-header {
    min-height:
      58px !important;

    padding:
      8px
      10px
      !important;

    gap:
      9px !important;

    border-bottom:
      1px solid
      var(--opera-color-border) !important;

    background:
      var(--opera-color-surface) !important;
  }

  #page-inbox
  .opera-mobile-inbox-back-button {
    min-height:
      38px;

    padding:
      0
      8px;

    border:
      0;

    border-radius:
      9px;

    background:
      transparent;

    color:
      var(--opera-color-primary-strong);

    font-size:
      12px;

    font-weight:
      600;
  }

  #page-inbox
  .opera-mobile-chat-header-avatar {
    display:
      inline-flex;

    align-items:
      center;

    justify-content:
      center;

    flex:
      0 0
      36px;

    width:
      36px;

    height:
      36px;

    border-radius:
      50%;

    background:
      var(--opera-color-primary-soft);

    color:
      var(--opera-color-primary-strong);

    font-size:
      12px;

    font-weight:
      700;
  }

  #page-inbox
  .opera-mobile-chat-header-copy {
    min-width:
      0;

    flex:
      1 1 auto;
  }

  #page-inbox
  .opera-mobile-chat-header-copy
  strong {
    display:
      block;

    overflow:
      hidden;

    text-overflow:
      ellipsis;

    white-space:
      nowrap;

    color:
      var(--opera-color-text);

    font-size:
      14px;

    font-weight:
      600;
  }

  #page-inbox
  .opera-mobile-chat-header-copy
  small {
    display:
      block;

    margin-top:
      1px;

    color:
      var(--opera-color-text-muted);

    font-size:
      11px;
  }
}


/*
 * ============================================================
 * INBOX VISUAL CONSOLIDATION V2
 * Esta camada e propositalmente final.
 * ============================================================
 */


/*
 * ============================================================
 * DESKTOP
 * ============================================================
 */

@media (min-width: 641px) {

  /*
   * Página
   */

  #page-inbox.opera-inbox {
    background:
      transparent !important;
  }

  #page-inbox.opera-inbox
  .opera-inbox-page-header {
    min-height:
      48px !important;

    margin-bottom:
      8px !important;
  }

  #page-inbox.opera-inbox
  .opera-inbox-page-header h1 {
    color:
      var(--opera-color-text) !important;

    font-size:
      18px !important;

    font-weight:
      700 !important;
  }


  /*
   * Shell principal mais unido
   */

  #page-inbox
  .inbox-layout {
    gap:
      0 !important;

    border:
      1px solid
      var(--opera-color-border) !important;

    border-radius:
      12px !important;

    background:
      var(--opera-color-surface) !important;

    overflow:
      hidden !important;
  }

  #page-inbox
  .inbox-layout
  > .chart-box {
    border:
      0 !important;

    border-radius:
      0 !important;

    box-shadow:
      none !important;
  }


  /*
   * Coluna esquerda
   */

  #page-inbox
  #inboxLeftPanel {
    border-right:
      1px solid
      var(--opera-color-border) !important;
  }

  #page-inbox
  #inboxLeftPanel
  > div:first-child {
    min-height:
      46px !important;

    border-bottom:
      1px solid
      var(--opera-color-border) !important;
  }


  /*
   * Tabs menos "pill soup"
   */

  #page-inbox
  .opera-inbox__tabs {
    padding:
      6px
      8px
      !important;

    background:
      var(--opera-color-surface) !important;
  }

  #page-inbox
  .opera-inbox__tabs
  .inbox-tab {
    min-height:
      30px !important;

    padding:
      5px
      9px
      !important;

    border:
      0 !important;

    border-radius:
      7px !important;

    background:
      transparent !important;

    color:
      var(--opera-color-text-muted) !important;

    font-size:
      12px !important;
  }

  #page-inbox
  .opera-inbox__tabs
  .inbox-tab.active {
    background:
      var(--opera-color-primary-soft) !important;

    color:
      var(--opera-color-primary-strong) !important;
  }


  /*
   * Lista: deixa de parecer vários cards soltos.
   */

  #page-inbox
  #conversationList {
    padding:
      0 !important;

    background:
      var(--opera-color-surface) !important;
  }

  #page-inbox
  #conversationList
  .conv-item,

  #page-inbox
  #conversationList
  [data-internal-conversation-id],

  #page-inbox
  #conversationList
  .opera-inbox-all-item {
    min-height:
      64px !important;

    margin:
      0 !important;

    padding:
      9px
      12px
      !important;

    border:
      0 !important;

    border-bottom:
      1px solid
      var(--opera-color-border) !important;

    border-radius:
      0 !important;

    background:
      var(--opera-color-surface) !important;

    box-shadow:
      none !important;
  }

  #page-inbox
  #conversationList
  .conv-item:hover,

  #page-inbox
  #conversationList
  [data-internal-conversation-id]:hover,

  #page-inbox
  #conversationList
  .opera-inbox-all-item:hover {
    background:
      var(--opera-color-surface-subtle) !important;
  }

  #page-inbox
  #conversationList
  .active,

  #page-inbox
  #conversationList
  [aria-selected="true"] {
    background:
      var(--opera-color-primary-soft) !important;

    box-shadow:
      inset
      3px
      0
      0
      var(--opera-color-primary)
      !important;
  }


  /*
   * Avatares da lista
   */

  #page-inbox
  #conversationList
  [class*="avatar"] {
    width:
      36px !important;

    height:
      36px !important;

    min-width:
      36px !important;

    flex:
      0 0
      36px !important;

    font-size:
      11px !important;
  }


  /*
   * Centro
   */

  #page-inbox
  .inbox-layout
  > .chart-box:nth-child(2) {
    min-width:
      0 !important;

    border-right:
      1px solid
      var(--opera-color-border) !important;

    background:
      var(--opera-color-surface) !important;
  }


  /*
   * Header central
   */

  #page-inbox
  .inbox-layout
  > .chart-box:nth-child(2)
  > .px-5.py-4.border-b {
    min-height:
      58px !important;

    padding:
      9px
      14px
      !important;

    background:
      var(--opera-color-surface) !important;
  }

  #page-inbox
  #chatAvatar {
    width:
      36px !important;

    height:
      36px !important;

    min-width:
      36px !important;
  }

  #page-inbox
  #chatTitle {
    font-size:
      14px !important;
  }

  #page-inbox
  #chatSubtitle {
    font-size:
      11px !important;
  }


  /*
   * Área dos chats
   */

  #page-inbox
  #inboxChatPanels {
    gap:
      0 !important;

    padding:
      0 !important;

    background:
      var(--opera-color-surface) !important;
  }

  #page-inbox
  .opera-chat-panel {
    border:
      0 !important;

    border-right:
      1px solid
      var(--opera-color-border) !important;

    border-radius:
      0 !important;

    background:
      var(--opera-color-surface) !important;
  }

  #page-inbox
  .opera-chat-panel:last-child {
    border-right:
      0 !important;
  }


  /*
   * Remove o bege.
   */

  #page-inbox
  .opera-chat-panel__messages,

  #page-inbox
  #clientMessages,

  #page-inbox
  #internalMessages {
    background:
      #f8fafc !important;

    padding:
      16px !important;
  }


  /*
   * Header interno dos dois chats
   */

  #page-inbox
  .opera-chat-panel
  > .px-4.py-3.border-b {
    min-height:
      44px !important;

    padding:
      8px
      12px
      !important;

    background:
      var(--opera-color-surface) !important;
  }


  /*
   * Composers
   */

  #page-inbox
  .opera-chat-panel
  .p-3.border-t {
    min-height:
      54px !important;

    padding:
      7px
      10px
      !important;

    background:
      var(--opera-color-surface) !important;
  }

  #page-inbox
  .opera-chat-composer__input {
    height:
      38px !important;

    min-height:
      38px !important;

    border-radius:
      9px !important;

    background:
      var(--opera-color-surface-subtle) !important;
  }

  #page-inbox
  .opera-chat-panel
  .p-3.border-t
  button {
    width:
      38px !important;

    height:
      38px !important;

    min-width:
      38px !important;

    min-height:
      38px !important;

    border-radius:
      9px !important;
  }


  /*
   * Painel direito
   */

  #page-inbox
  #clientInfoPanel {
    background:
      var(--opera-color-surface) !important;
  }

  #page-inbox
  #clientInfoPanel
  > div {
    border-color:
      var(--opera-color-border) !important;
  }


  /*
   * Projetos:
   * mantém uma única superfície central limpa.
   */

  #page-inbox.opera-project-communication-active
  #inboxChatPanels {
    background:
      #f8fafc !important;
  }


  /*
   * Chat interno direto ocupa tudo.
   */

  #page-inbox.opera-inbox-internal-direct
  #inboxChatPanels {
    grid-template-columns:
      minmax(0, 1fr)
      !important;
  }

  #page-inbox.opera-inbox-internal-direct
  #internalChatPanel {
    width:
      100% !important;

    max-width:
      none !important;

    border-right:
      0 !important;
  }


  /*
   * Botão flutuante da Assistente:
   * não pode ficar em cima do composer.
   */

  #page-inbox
  ~ * {
    --opera-inbox-composer-safe-zone:
      76px;
  }
}


/*
 * ============================================================
 * MOBILE - OVERRIDE FINAL DO LEGADO
 * ============================================================
 */

@media (max-width: 640px) {

  /*
   * Lista ocupa a superfície toda sem "card interno".
   */

  body.opera-mobile-inbox-list-open
  #page-inbox {
    background:
      #fff !important;
  }

  body.opera-mobile-inbox-list-open
  #page-inbox
  .opera-inbox-page-header {
    padding:
      12px
      14px
      8px
      !important;
  }

  body.opera-mobile-inbox-list-open
  #page-inbox
  .opera-inbox-page-header h1 {
    font-size:
      24px !important;

    line-height:
      1.15 !important;

    font-weight:
      700 !important;
  }

  body.opera-mobile-inbox-list-open
  #page-inbox
  #inboxSearch {
    height:
      42px !important;

    min-height:
      42px !important;

    border:
      1px solid
      var(--opera-color-border) !important;

    border-radius:
      10px !important;

    background:
      #f8fafc !important;
  }

  body.opera-mobile-inbox-list-open
  #operaMobilePeopleButton {
    width:
      40px !important;

    height:
      40px !important;

    min-width:
      40px !important;

    border:
      1px solid
      rgba(21, 99, 111, .18)
      !important;

    border-radius:
      11px !important;

    background:
      var(--opera-color-primary-soft) !important;

    color:
      var(--opera-color-primary-strong) !important;

    font-size:
      21px !important;

    box-shadow:
      none !important;
  }


  /*
   * Lista mobile real.
   */

  #page-inbox
  .opera-mobile-internal-list {
    padding:
      0
      14px
      12px
      !important;
  }

  #page-inbox
  .opera-mobile-chat-row {
    min-height:
      64px !important;

    padding:
      9px
      0
      !important;

    gap:
      10px !important;

    border-bottom:
      1px solid
      var(--opera-color-border) !important;
  }

  #page-inbox
  .opera-mobile-chat-row-avatar {
    width:
      44px !important;

    height:
      44px !important;

    min-width:
      44px !important;

    flex:
      0 0
      44px !important;
  }

  #page-inbox
  .opera-mobile-chat-row-top
  strong {
    font-size:
      15px !important;
  }

  #page-inbox
  .opera-mobile-chat-row-bottom
  > span {
    font-size:
      13px !important;
  }


  /*
   * Chat mobile
   */

  body.opera-mobile-inbox-chat-open
  #page-inbox
  #internalChatPanel {
    background:
      #fff !important;
  }

  body.opera-mobile-inbox-chat-open
  #page-inbox
  #internalMessages {
    padding:
      14px
      12px
      !important;

    background:
      #f8fafc !important;
  }

  body.opera-mobile-inbox-chat-open
  #page-inbox
  #internalChatBody
  > .p-3.border-t {
    min-height:
      58px !important;

    padding:
      7px
      10px
      max(
        7px,
        env(safe-area-inset-bottom)
      )
      !important;

    background:
      #fff !important;
  }

  body.opera-mobile-inbox-chat-open
  #page-inbox
  #internalMessageInput {
    height:
      42px !important;

    min-height:
      42px !important;

    padding:
      0
      13px
      !important;

    border-radius:
      10px !important;

    background:
      #f8fafc !important;
  }

  body.opera-mobile-inbox-chat-open
  #page-inbox
  #internalChatBody
  > .p-3.border-t
  button {
    width:
      42px !important;

    height:
      42px !important;

    min-width:
      42px !important;

    flex:
      0 0
      42px !important;

    border-radius:
      10px !important;
  }


  /*
   * Deixa espaço para bottom nav.
   */

  body.opera-mobile-inbox-chat-open
  #page-inbox {
    padding-bottom:
      env(safe-area-inset-bottom)
      !important;
  }
}


/*
 * ============================================================
 * INBOX FINISH V1
 * ============================================================
 */

@media (min-width: 641px) {

  /*
   * Lista lateral mais densa.
   */

  #page-inbox #conversationList,
  #page-inbox #inboxProjectList {
    padding: 0 !important;
  }

  #page-inbox #conversationList > *,
  #page-inbox #inboxProjectList > * {
    box-sizing: border-box;
  }


  /*
   * Conversas internas:
   * vence os cards legados e deixa formato de lista.
   */

  #page-inbox
  #conversationList
  [data-internal-conversation-id] {
    width: 100% !important;

    min-height: 64px !important;

    margin: 0 !important;

    padding:
      9px
      12px
      !important;

    border:
      0 !important;

    border-bottom:
      1px solid
      var(--opera-color-border)
      !important;

    border-radius:
      0 !important;

    background:
      var(--opera-color-surface)
      !important;

    box-shadow:
      none !important;
  }

  #page-inbox
  #conversationList
  [data-internal-conversation-id]:hover {
    background:
      var(--opera-color-surface-subtle)
      !important;
  }

  #page-inbox
  #conversationList
  [data-internal-conversation-id].active,
  #page-inbox
  #conversationList
  [data-internal-conversation-id][aria-selected="true"] {
    background:
      var(--opera-color-primary-soft)
      !important;

    box-shadow:
      inset
      3px
      0
      0
      var(--opera-color-primary)
      !important;
  }


  /*
   * Projetos:
   * de cards grandes para lista operacional.
   */

  #page-inbox
  .inbox-project-item {
    width:
      100% !important;

    min-height:
      62px !important;

    margin:
      0 !important;

    padding:
      9px
      12px
      !important;

    border:
      0 !important;

    border-bottom:
      1px solid
      var(--opera-color-border)
      !important;

    border-radius:
      0 !important;

    background:
      var(--opera-color-surface)
      !important;

    box-shadow:
      none !important;
  }

  #page-inbox
  .inbox-project-item:hover {
    background:
      var(--opera-color-surface-subtle)
      !important;
  }

  #page-inbox
  .inbox-project-item.active,
  #page-inbox
  .inbox-project-item[aria-selected="true"] {
    background:
      var(--opera-color-primary-soft)
      !important;

    box-shadow:
      inset
      3px
      0
      0
      var(--opera-color-primary)
      !important;
  }


  /*
   * Status ABERTO menos chamativo.
   */

  #page-inbox
  .inbox-project-item
  .rounded-full {
    padding:
      2px
      6px
      !important;

    border-radius:
      6px !important;

    background:
      var(--opera-color-surface-subtle)
      !important;

    color:
      var(--opera-color-text-muted)
      !important;

    font-size:
      9px !important;

    letter-spacing:
      .03em !important;
  }


  /*
   * Painel direito mais compacto.
   */

  #page-inbox
  #clientInfoPanel {
    flex:
      0 0
      280px !important;

    width:
      280px !important;

    min-width:
      260px !important;

    max-width:
      300px !important;
  }


  /*
   * No modo sem conversa selecionada,
   * reduz ruído visual.
   */

  #page-inbox
  #clientMessages:empty,
  #page-inbox
  #internalMessages:empty {
    background:
      var(--opera-color-surface-subtle)
      !important;
  }


  /*
   * Composer sempre acima do launcher.
   */

  #page-inbox
  .opera-chat-panel
  .p-3.border-t {
    position:
      relative;

    z-index:
      2;
  }
}


/*
 * ============================================================
 * ASSISTENTE DURANTE O INBOX
 * ============================================================
 */

/*
 * Chrome/Safari modernos suportam :has().
 * Durante o Inbox movemos o launcher para o canto direito,
 * fora do composer central.
 */

@media (min-width: 641px) {

  body:has(#page-inbox:not(.hidden))
  .opera-assistant-launcher {
    right:
      22px !important;

    bottom:
      92px !important;

    width:
      50px !important;

    height:
      50px !important;

    border-radius:
      15px !important;

    box-shadow:
      0
      10px
      24px
      rgba(15,23,42,.16)
      !important;
  }

  body:has(#page-inbox:not(.hidden))
  .opera-assistant-float {
    right:
      22px !important;

    bottom:
      154px !important;
  }
}


/*
 * Mobile:
 * sobe o launcher acima do composer e da bottom nav.
 */

@media (max-width: 640px) {

  body:has(#page-inbox:not(.hidden))
  .opera-assistant-launcher {
    right:
      14px !important;

    bottom:
      calc(
        154px
        + env(safe-area-inset-bottom)
      )
      !important;

    width:
      48px !important;

    height:
      48px !important;

    border-radius:
      14px !important;
  }
}


/*
 * ============================================================
 * INBOX LIST PRIMITIVES V1
 * ============================================================
 */

@media (min-width: 641px) {

  /*
   * ==========================================================
   * PROJETOS
   * ==========================================================
   */

  #page-inbox
  .opera-inbox-project-list {
    display:
      block !important;

    width:
      100% !important;

    padding:
      0 !important;

    margin:
      0 !important;
  }

  #page-inbox
  .opera-inbox-project-item {
    display:
      block !important;

    width:
      100% !important;

    min-height:
      64px !important;

    margin:
      0 !important;

    padding:
      10px
      12px
      !important;

    border:
      0 !important;

    border-bottom:
      1px solid
      var(--opera-color-border)
      !important;

    border-radius:
      0 !important;

    background:
      var(--opera-color-surface)
      !important;

    box-shadow:
      none !important;

    transition:
      background
      var(--opera-motion-fast)
      ease !important;
  }

  #page-inbox
  .opera-inbox-project-item:hover {
    background:
      var(--opera-color-surface-subtle)
      !important;
  }

  #page-inbox
  .opera-inbox-project-item.border-ocean {
    background:
      var(--opera-color-primary-soft)
      !important;

    border-bottom-color:
      var(--opera-color-border)
      !important;

    box-shadow:
      inset
      3px
      0
      0
      var(--opera-color-primary)
      !important;
  }

  #page-inbox
  .opera-inbox-project-item
  .font-semibold {
    color:
      var(--opera-color-text)
      !important;

    font-size:
      13px !important;

    font-weight:
      var(--opera-font-weight-semibold)
      !important;
  }

  #page-inbox
  .opera-inbox-project-item
  .text-xs {
    color:
      var(--opera-color-text-muted)
      !important;

    font-size:
      11px !important;
  }

  #page-inbox
  .opera-inbox-project-item
  .rounded-full {
    padding:
      2px
      6px
      !important;

    border-radius:
      6px !important;

    background:
      var(--opera-color-surface-subtle)
      !important;

    color:
      var(--opera-color-text-muted)
      !important;

    font-size:
      9px !important;
  }


  /*
   * ==========================================================
   * INTERNO
   * ==========================================================
   */

  #page-inbox
  .opera-inbox-internal-card {
    width:
      100% !important;

    min-width:
      0 !important;

    max-width:
      none !important;

    margin:
      0 !important;

    padding:
      0 !important;

    border:
      0 !important;

    border-bottom:
      1px solid
      var(--opera-color-border)
      !important;

    border-radius:
      0 !important;

    background:
      var(--opera-color-surface)
      !important;

    box-shadow:
      none !important;

    overflow:
      hidden !important;
  }

  #page-inbox
  .opera-inbox-internal-card:hover {
    background:
      var(--opera-color-surface-subtle)
      !important;
  }

  #page-inbox
  .opera-inbox-internal-card
  > .conv-item {
    min-height:
      64px !important;

    width:
      100% !important;

    margin:
      0 !important;

    padding:
      9px
      12px
      !important;

    border:
      0 !important;

    border-radius:
      0 !important;

    background:
      transparent !important;

    box-shadow:
      none !important;
  }

  /*
   * O estado selecionado hoje ainda vem nas classes
   * do wrapper original. Neutralizamos ring/radius,
   * mas preservamos a indicação com barra lateral.
   */

  #page-inbox
  .opera-inbox-internal-card.border-ocean\/30 {
    background:
      var(--opera-color-primary-soft)
      !important;

    box-shadow:
      inset
      3px
      0
      0
      var(--opera-color-primary)
      !important;
  }


  /*
   * Avatares menores e densidade operacional.
   */

  #page-inbox
  .opera-inbox-internal-card
  .h-7.w-7 {
    width:
      34px !important;

    height:
      34px !important;

    min-width:
      34px !important;

    font-size:
      10px !important;
  }

  #page-inbox
  .opera-inbox-internal-card
  .text-sm.font-semibold {
    font-size:
      13px !important;

    line-height:
      1.25 !important;
  }

  #page-inbox
  .opera-inbox-internal-card
  .text-\[11px\] {
    font-size:
      11px !important;
  }
}


/*
 * ============================================================
 * INBOX — EMPTY WORKSPACE V1
 * ============================================================
 */

@media (min-width: 641px) {

  #page-inbox
  .opera-inbox-workspace-empty {
    display: flex;

    flex: 1 1 auto;

    min-width: 0;
    min-height: 0;

    align-items: center;
    justify-content: center;

    flex-direction: column;

    padding: 32px;

    background:
      var(--opera-color-surface-subtle);

    color:
      var(--opera-color-text-muted);

    text-align: center;
  }

  #page-inbox
  .opera-inbox-workspace-empty.hidden {
    display: none !important;
  }

  #page-inbox
  .opera-inbox-workspace-empty__icon {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 44px;
    height: 44px;

    margin-bottom: 12px;

    border:
      1px solid
      var(--opera-color-border);

    border-radius:
      12px;

    background:
      var(--opera-color-surface);

    color:
      var(--opera-color-primary);
  }

  #page-inbox
  .opera-inbox-workspace-empty__icon svg {
    width: 20px;
    height: 20px;
  }

  #page-inbox
  .opera-inbox-workspace-empty__title {
    color:
      var(--opera-color-text-secondary);

    font-size: 14px;

    font-weight:
      var(--opera-font-weight-semibold);

    line-height: 1.35;
  }

  #page-inbox
  .opera-inbox-workspace-empty__description {
    max-width: 320px;

    margin-top: 4px;

    color:
      var(--opera-color-text-muted);

    font-size: 12px;

    line-height: 1.5;
  }


  /*
   * Quando não existe contexto de conversa,
   * o centro ocupa todo o espaço disponível.
   */

  #page-inbox.opera-inbox-workspace-empty-active
  #inboxChatPanels {
    display: flex !important;

    grid-template-columns:
      none !important;

    padding: 0 !important;

    background:
      var(--opera-color-surface-subtle) !important;
  }

  #page-inbox.opera-inbox-workspace-empty-active
  #clientInfoPanel {
    display: none !important;
  }
}


/*
 * ============================================================
 * INBOX — EMPTY WORKSPACE V2
 * Corrige sobra de colunas / paineis legados.
 * ============================================================
 */

@media (min-width: 641px) {

  /*
   * A coluna central precisa absorver o espaço
   * deixado pelo painel de detalhes.
   */

  #page-inbox.opera-inbox-workspace-empty-active
  .inbox-layout
  > .chart-box:nth-child(2) {
    flex:
      1 1 auto !important;

    width:
      auto !important;

    min-width:
      0 !important;

    max-width:
      none !important;
  }


  /*
   * Remove de forma absoluta os dois chats antigos
   * enquanto o empty workspace estiver ativo.
   */

  #page-inbox.opera-inbox-workspace-empty-active
  #clientChatPanel,

  #page-inbox.opera-inbox-workspace-empty-active
  #internalChatPanel {
    display:
      none !important;

    flex:
      0 0 0 !important;

    width:
      0 !important;

    min-width:
      0 !important;

    max-width:
      0 !important;
  }


  /*
   * Painel de detalhes também não pode continuar
   * reservando espaço no flex principal.
   */

  #page-inbox.opera-inbox-workspace-empty-active
  #clientInfoPanel {
    display:
      none !important;

    flex:
      0 0 0 !important;

    width:
      0 !important;

    min-width:
      0 !important;

    max-width:
      0 !important;

    overflow:
      hidden !important;
  }


  /*
   * O grid central vira uma superfície única.
   */

  #page-inbox.opera-inbox-workspace-empty-active
  #inboxChatPanels {
    display:
      flex !important;

    flex:
      1 1 auto !important;

    width:
      100% !important;

    max-width:
      none !important;

    min-width:
      0 !important;

    padding:
      0 !important;

    gap:
      0 !important;
  }


  #page-inbox.opera-inbox-workspace-empty-active
  .opera-inbox-workspace-empty {
    flex:
      1 1 100% !important;

    width:
      100% !important;

    min-width:
      0 !important;

    max-width:
      none !important;
  }
}


/*
 * ============================================================
 * INBOX — EMPTY WORKSPACE GRID FIX
 *
 * O layout desktop possui 3 colunas fixadas no CSS legado:
 * lista | workspace | detalhes.
 *
 * Quando não existe contexto, removemos de fato a terceira
 * coluna do GRID, em vez de apenas esconder seu conteúdo.
 * ============================================================
 */

@media (min-width: 641px) {

  #page-inbox.opera-inbox-workspace-empty-active
  .inbox-layout {
    grid-template-columns:
      var(--opera-wa-list-width, 300px)
      minmax(0, 1fr)
      !important;
  }


  /*
   * Garante que o workspace central ocupe integralmente
   * a segunda coluna.
   */

  #page-inbox.opera-inbox-workspace-empty-active
  .inbox-layout
  > .chart-box:nth-child(2) {
    grid-column:
      2 !important;

    width:
      100% !important;

    min-width:
      0 !important;

    max-width:
      none !important;
  }


  /*
   * O painel de detalhes não participa do grid
   * enquanto o empty state estiver ativo.
   */

  #page-inbox.opera-inbox-workspace-empty-active
  #clientInfoPanel {
    display:
      none !important;
  }


  /*
   * Left sidebar recolhida:
   * preserva os 58px existentes e remove
   * somente a coluna Cliente.
   */

  body.opera-inbox-left-collapsed
  #page-inbox.opera-inbox-workspace-empty-active
  .inbox-layout {
    grid-template-columns:
      58px
      minmax(0, 1fr)
      !important;
  }


  /*
   * Se o estado antigo "right-collapsed" estiver presente,
   * o empty workspace continua sem terceira coluna.
   */

  body.opera-inbox-right-collapsed
  #page-inbox.opera-inbox-workspace-empty-active
  .inbox-layout {
    grid-template-columns:
      var(--opera-wa-list-width, 300px)
      minmax(0, 1fr)
      !important;
  }


  body.opera-inbox-left-collapsed.opera-inbox-right-collapsed
  #page-inbox.opera-inbox-workspace-empty-active
  .inbox-layout {
    grid-template-columns:
      58px
      minmax(0, 1fr)
      !important;
  }
}


/*
 * ============================================================
 * MOBILE INBOX VIEW STATE V1
 * ============================================================
 */

@media (max-width: 640px) {

  body.opera-mobile-inbox-list-open
  #page-inbox
  .inbox-layout {
    display: block !important;
  }

  body.opera-mobile-inbox-list-open
  #page-inbox
  #inboxLeftPanel {
    display: flex !important;

    width: 100% !important;
    max-width: none !important;

    height: 100% !important;
  }

  body.opera-mobile-inbox-list-open
  #page-inbox
  .inbox-layout
  > .chart-box:nth-child(2),

  body.opera-mobile-inbox-list-open
  #page-inbox
  #clientInfoPanel {
    display: none !important;
  }


  body.opera-mobile-inbox-chat-open
  #page-inbox
  .opera-inbox-page-header,

  body.opera-mobile-inbox-chat-open
  #page-inbox
  #inboxLeftPanel,

  body.opera-mobile-inbox-chat-open
  #page-inbox
  #clientInfoPanel {
    display: none !important;
  }

  body.opera-mobile-inbox-chat-open
  #page-inbox
  .inbox-layout {
    display: block !important;

    width: 100% !important;
    height: 100% !important;
  }

  body.opera-mobile-inbox-chat-open
  #page-inbox
  .inbox-layout
  > .chart-box:nth-child(2) {
    display: flex !important;

    width: 100% !important;
    max-width: none !important;

    height: 100% !important;

    border: 0 !important;
    border-radius: 0 !important;
  }


  #page-inbox
  .opera-mobile-inbox-back-button {
    display: none;
  }

  body.opera-mobile-inbox-chat-open
  #page-inbox
  .opera-mobile-inbox-back-button {
    display: inline-flex;

    align-items: center;

    gap: 3px;

    flex: 0 0 auto;
  }

  body.opera-mobile-inbox-chat-open
  #page-inbox
  .opera-mobile-inbox-back-button
  svg {
    width: 18px;
    height: 18px;
  }


  /*
   * A Assistente nao pode ficar sobre o botao Enviar.
   */

  body.opera-mobile-inbox-chat-open
  .opera-assistant-launcher {
    right: 14px !important;

    bottom:
      calc(
        220px
        + env(safe-area-inset-bottom)
      )
      !important;
  }

  body.opera-mobile-inbox-list-open
  .opera-assistant-launcher {
    right: 14px !important;

    bottom:
      calc(
        92px
        + env(safe-area-inset-bottom)
      )
      !important;
  }
}


/*
 * ============================================================
 * MOBILE INBOX — CHAT FINISH V1
 *
 * Corrige:
 * - espaco excessivo acima da bottom nav
 * - Assistente sobre o botao Enviar
 * - alinhamento do composer
 * ============================================================
 */

@media (max-width: 640px) {

  /*
   * A bottom navigation ja reserva sua propria area.
   * Nao precisamos criar uma segunda faixa vazia no Inbox.
   */

  body.opera-mobile-inbox-chat-open
  #page-inbox {
    padding-bottom:
      0 !important;
  }


  /*
   * Workspace usa integralmente a area disponivel
   * acima da bottom navigation.
   */

  body.opera-mobile-inbox-chat-open
  #page-inbox
  .inbox-layout {
    height:
      100% !important;

    min-height:
      0 !important;

    padding-bottom:
      0 !important;
  }

  body.opera-mobile-inbox-chat-open
  #page-inbox
  .inbox-layout
  > .chart-box:nth-child(2) {
    height:
      100% !important;

    min-height:
      0 !important;

    padding-bottom:
      0 !important;
  }


  /*
   * Chat interno ocupa a altura restante.
   */

  body.opera-mobile-inbox-chat-open
  #page-inbox
  #internalChatPanel,

  body.opera-mobile-inbox-chat-open
  #page-inbox
  #internalChatBody {
    min-height:
      0 !important;

    height:
      100% !important;
  }


  /*
   * Area das mensagens termina imediatamente
   * antes do composer.
   */

  body.opera-mobile-inbox-chat-open
  #page-inbox
  #internalMessages {
    min-height:
      0 !important;

    padding-bottom:
      16px !important;
  }


  /*
   * Composer compacto e colado ao final do chat.
   */

  body.opera-mobile-inbox-chat-open
  #page-inbox
  #internalChatBody
  > .p-3.border-t {
    position:
      relative !important;

    bottom:
      auto !important;

    min-height:
      58px !important;

    margin:
      0 !important;

    padding:
      7px
      10px
      !important;

    background:
      #fff !important;

    border-top:
      1px solid
      var(--opera-color-border)
      !important;

    z-index:
      20 !important;
  }


  /*
   * Campo de texto ocupa o espaco disponivel.
   */

  body.opera-mobile-inbox-chat-open
  #page-inbox
  #internalMessageInput {
    min-width:
      0 !important;

    height:
      44px !important;

    min-height:
      44px !important;

    margin:
      0 !important;
  }


  /*
   * Emoji, anexo e enviar com mesma dimensao.
   */

  body.opera-mobile-inbox-chat-open
  #page-inbox
  #internalChatBody
  > .p-3.border-t
  button {
    width:
      44px !important;

    height:
      44px !important;

    min-width:
      44px !important;

    min-height:
      44px !important;

    flex:
      0 0 44px !important;
  }


  /*
   * Durante uma conversa o foco deve ser o chat.
   * A Assistente continua disponivel na tela de lista.
   */

  body.opera-mobile-inbox-chat-open
  .opera-assistant-launcher {
    display:
      none !important;
  }


  /*
   * Na lista a Assistente permanece visivel,
   * acima da bottom navigation.
   */

  body.opera-mobile-inbox-list-open
  .opera-assistant-launcher {
    display:
      flex !important;

    right:
      14px !important;

    bottom:
      calc(
        92px
        + env(safe-area-inset-bottom)
      )
      !important;
  }
}


/*
 * ============================================================
 * MOBILE INBOX — CHAT COMPACT V1
 * Ajuste fino do rodape.
 * ============================================================
 */

@media (max-width: 640px) {

  /*
   * Mantem o workspace colado ao topo da bottom nav.
   */

  body.opera-mobile-inbox-chat-open
  #page-inbox {
    margin-bottom:
      0 !important;

    padding-bottom:
      0 !important;
  }


  /*
   * Evita qualquer altura extra herdada no container central.
   */

  body.opera-mobile-inbox-chat-open
  #page-inbox
  .inbox-layout,

  body.opera-mobile-inbox-chat-open
  #page-inbox
  .inbox-layout
  > .chart-box:nth-child(2),

  body.opera-mobile-inbox-chat-open
  #page-inbox
  #internalChatPanel,

  body.opera-mobile-inbox-chat-open
  #page-inbox
  #internalChatBody {
    margin-bottom:
      0 !important;

    padding-bottom:
      0 !important;
  }


  /*
   * Mensagens terminam perto do composer.
   */

  body.opera-mobile-inbox-chat-open
  #page-inbox
  #internalMessages {
    padding-bottom:
      8px !important;
  }


  /*
   * Composer final mais compacto.
   */

  body.opera-mobile-inbox-chat-open
  #page-inbox
  #internalChatBody
  > .p-3.border-t {
    min-height:
      54px !important;

    padding:
      5px
      8px
      !important;

    gap:
      6px !important;
  }


  /*
   * Campo principal.
   */

  body.opera-mobile-inbox-chat-open
  #page-inbox
  #internalMessageInput {
    height:
      42px !important;

    min-height:
      42px !important;

    padding-left:
      12px !important;

    padding-right:
      12px !important;

    border-radius:
      10px !important;
  }


  /*
   * Acoes ligeiramente menores para ganhar largura.
   */

  body.opera-mobile-inbox-chat-open
  #page-inbox
  #internalChatBody
  > .p-3.border-t
  button {
    width:
      42px !important;

    height:
      42px !important;

    min-width:
      42px !important;

    min-height:
      42px !important;

    flex:
      0 0 42px !important;
  }


  /*
   * Remove qualquer reserva inferior criada
   * por safe-area dentro do proprio composer.
   * A bottom nav ja trata essa area.
   */

  body.opera-mobile-inbox-chat-open
  #page-inbox
  #internalChatBody
  > .p-3.border-t {
    padding-bottom:
      5px !important;
  }
}


/*
 * ============================================================
 * PROJECTS — SHELL DESIGN SYSTEM V1
 * ============================================================
 */

#page-projetos.opera-projects {
  color:
    var(--opera-color-text);
}


/*
 * Header
 */

#page-projetos
.opera-projects__header {
  min-height:
    48px;

  margin-bottom:
    var(--opera-space-4) !important;

  gap:
    var(--opera-space-4);
}

#page-projetos
.opera-projects__title {
  color:
    var(--opera-color-text);

  font-size:
    var(--opera-font-size-20);

  font-weight:
    var(--opera-font-weight-bold);

  line-height:
    1.2;
}

#page-projetos
.opera-projects__subtitle {
  color:
    var(--opera-color-text-muted);

  font-size:
    var(--opera-font-size-12);

  line-height:
    1.4;
}


/*
 * Actions / view selector
 */

#page-projetos
.opera-projects__actions {
  justify-content:
    flex-end;

  gap:
    var(--opera-space-2);
}

#page-projetos
.opera-projects__view-btn {
  min-height:
    36px;

  white-space:
    nowrap;
}

#page-projetos
.opera-projects__view-btn.active {
  border-color:
    rgba(21, 99, 111, .20) !important;

  background:
    var(--opera-color-primary-soft) !important;

  color:
    var(--opera-color-primary) !important;

  box-shadow:
    none !important;
}

#page-projetos
.opera-projects__new-btn {
  min-height:
    36px;

  white-space:
    nowrap;
}


/*
 * Main list panel
 */

#page-projetos
.opera-projects__list-panel {
  padding:
    0 !important;

  overflow:
    hidden;

  border:
    1px solid
    var(--opera-color-border);

  border-radius:
    var(--opera-radius-lg);

  background:
    var(--opera-color-surface);

  box-shadow:
    var(--opera-shadow-xs);
}

#page-projetos
.opera-projects__list-head {
  min-height:
    38px;

  align-items:
    center;

  padding:
    0
    14px !important;

  border-bottom:
    1px solid
    var(--opera-color-border);

  background:
    var(--opera-color-surface-subtle);

  color:
    var(--opera-color-text-muted) !important;

  font-size:
    10px !important;

  font-weight:
    var(--opera-font-weight-semibold) !important;

  letter-spacing:
    .045em;
}

#page-projetos
.opera-projects__list {
  width:
    100%;
}


/*
 * Secondary operational panels
 */

#page-projetos
.opera-projects__insights {
  gap:
    var(--opera-space-3);
}

#page-projetos
.opera-projects__insights
> .chart-box,

#page-projetos
.opera-projects__list-view
> .chart-box:not(.opera-projects__list-panel),

#page-projetos
.opera-projects__template-view
> .chart-box {
  border:
    1px solid
    var(--opera-color-border);

  border-radius:
    var(--opera-radius-lg);

  background:
    var(--opera-color-surface);

  box-shadow:
    var(--opera-shadow-xs);
}

#page-projetos
.opera-projects__section-title {
  color:
    var(--opera-color-text-secondary) !important;

  font-size:
    var(--opera-font-size-14);

  font-weight:
    var(--opera-font-weight-semibold);
}


/*
 * Template board
 */

#page-projetos
.opera-projects__template-view {
  width:
    100%;
}

#page-projetos
#processoTemplateBoardTabs {
  gap:
    var(--opera-space-2);
}


/*
 * Mobile shell only.
 * The project rows themselves will be migrated separately.
 */

@media (max-width: 768px) {

  #page-projetos
  .opera-projects__header {
    display:
      flex;

    flex-direction:
      column;

    align-items:
      stretch;

    gap:
      12px;

    margin-bottom:
      14px !important;
  }

  #page-projetos
  .opera-projects__actions {
    display:
      grid;

    grid-template-columns:
      minmax(0, 1fr)
      minmax(0, 1fr);

    width:
      100%;

    gap:
      8px;
  }

  #page-projetos
  .opera-projects__view-btn {
    width:
      100%;

    justify-content:
      center;

    min-width:
      0;
  }

  #page-projetos
  .opera-projects__new-btn {
    grid-column:
      1 / -1;

    width:
      100%;

    justify-content:
      center;

    margin-left:
      0 !important;
  }

  #page-projetos
  .opera-projects__list-panel {
    border-radius:
      10px;
  }

  #page-projetos
  .opera-projects__insights {
    display:
      grid;

    grid-template-columns:
      1fr;

    gap:
      12px;
  }
}


/*
 * ============================================================
 * PROJECTS — PROJECT ROW V1
 *
 * Lista operacional densa.
 * Neutraliza o card legado sem alterar renderer/logica.
 * ============================================================
 */


/*
 * A lista principal vira uma superficie continua.
 */

#page-projetos
.opera-projects__list
.projeto-row {
  width:
    100%;

  margin:
    0 !important;

  border:
    0 !important;

  border-bottom:
    1px solid
    var(--opera-color-border)
    !important;

  border-radius:
    0 !important;

  background:
    var(--opera-color-surface)
    !important;

  box-shadow:
    none !important;

  overflow:
    visible;

  transition:
    background-color
    120ms ease;
}

#page-projetos
.opera-projects__list
.projeto-row:last-child {
  border-bottom:
    0 !important;
}

#page-projetos
.opera-projects__list
.projeto-row:hover {
  border-color:
    var(--opera-color-border)
    !important;

  background:
    var(--opera-color-surface-subtle)
    !important;

  box-shadow:
    none !important;
}


/*
 * Linha principal.
 */

#page-projetos
.opera-projects__list
.projeto-row-main {
  min-width:
    0;

  min-height:
    70px;

  padding:
    10px
    14px
    !important;

  gap:
    12px;

  cursor:
    pointer;
}


/*
 * Avatar do projeto.
 */

#page-projetos
.opera-projects__list
.projeto-row-main
> div:first-child
> .flex.h-10.w-10 {
  width:
    36px !important;

  height:
    36px !important;

  border:
    0 !important;

  border-radius:
    8px !important;

  background:
    var(--opera-color-primary-soft)
    !important;

  color:
    var(--opera-color-primary)
    !important;

  font-size:
    10px !important;

  font-weight:
    700 !important;

  box-shadow:
    none !important;
}


/*
 * Nome principal.
 */

#page-projetos
.opera-projects__list
.projeto-row-main
.font-semibold.text-slate700 {
  color:
    var(--opera-color-text-secondary)
    !important;

  font-size:
    13px;

  font-weight:
    650;
}


/*
 * Metadados abaixo do nome.
 */

#page-projetos
.opera-projects__list
.opera-card-meta-item {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    4px;

  min-width:
    0;

  color:
    var(--opera-color-text-muted);

  font-size:
    11px;
}

#page-projetos
.opera-projects__list
.opera-card-meta-item
strong {
  color:
    var(--opera-color-text-secondary);

  font-weight:
    600;
}


/*
 * Badges da linha.
 */

#page-projetos
.opera-projects__list
.projeto-row-main
.badge {
  min-height:
    22px;

  padding:
    2px
    7px;

  border:
    1px solid
    var(--opera-color-border);

  border-radius:
    6px;

  background:
    var(--opera-color-surface-subtle)
    !important;

  color:
    var(--opera-color-text-secondary)
    !important;

  font-size:
    10px;

  font-weight:
    600;

  line-height:
    1.2;
}


/*
 * Progresso.
 */

#page-projetos
.opera-projects__list
.progress-bar {
  height:
    4px;

  border-radius:
    999px;

  background:
    var(--opera-color-border);

  overflow:
    hidden;
}

#page-projetos
.opera-projects__list
.progress-fill {
  height:
    100%;

  border-radius:
    inherit;

  transition:
    width
    180ms ease;
}


/*
 * Acoes da linha.
 */

#page-projetos
.opera-projects__list
.kanban-icon-btn {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    30px;

  height:
    30px;

  min-width:
    30px;

  padding:
    0;

  border:
    1px solid
    transparent;

  border-radius:
    7px;

  background:
    transparent;

  color:
    var(--opera-color-text-muted);

  box-shadow:
    none;

  transition:
    background-color
    120ms ease,
    color
    120ms ease,
    border-color
    120ms ease;
}

#page-projetos
.opera-projects__list
.kanban-icon-btn:hover {
  border-color:
    var(--opera-color-border);

  background:
    var(--opera-color-surface);

  color:
    var(--opera-color-text);
}

#page-projetos
.opera-projects__list
.kanban-icon-btn.danger {
  color:
    var(--opera-color-danger);
}

#page-projetos
.opera-projects__list
.kanban-icon-btn.danger:hover {
  border-color:
    rgba(220, 38, 38, .16);

  background:
    rgba(220, 38, 38, .05);
}


/*
 * Area expandida.
 */

#page-projetos
.opera-projects__list
.projeto-row-details {
  padding:
    14px !important;

  border-top:
    1px solid
    var(--opera-color-border)
    !important;

  background:
    var(--opera-color-surface-subtle)
    !important;
}

#page-projetos
.opera-projects__list
.projeto-row-details
.bg-white.rounded-xl {
  border:
    1px solid
    var(--opera-color-border)
    !important;

  border-radius:
    8px !important;

  background:
    var(--opera-color-surface)
    !important;

  box-shadow:
    none !important;
}

#page-projetos
.opera-projects__list
.projeto-row.open {
  background:
    var(--opera-color-surface)
    !important;
}

#page-projetos
.opera-projects__list
.projeto-row.open
.expand-icon {
  transform:
    rotate(180deg);
}


/*
 * Desktop:
 * preserva a composicao rica do renderer mais novo.
 */

@media (min-width: 1101px) {

  #page-projetos
  .opera-projects__list
  .projeto-row-main {
    align-items:
      center;

    flex-direction:
      row;
  }

  #page-projetos
  .opera-projects__list
  .projeto-row-main
  > div:first-child {
    min-width:
      0;

    flex:
      1 1 auto;
  }

  #page-projetos
  .opera-projects__list
  .projeto-row-main
  > div:last-child {
    flex:
      0 0 auto;

    white-space:
      nowrap;
  }
}


/*
 * Tablet / mobile.
 */

@media (max-width: 1100px) {

  #page-projetos
  .opera-projects__list
  .projeto-row-main {
    align-items:
      stretch !important;

    flex-direction:
      column !important;

    min-height:
      0;

    padding:
      12px !important;

    gap:
      10px !important;
  }

  #page-projetos
  .opera-projects__list
  .projeto-row-main
  > div:last-child {
    display:
      flex;

    justify-content:
      flex-end;

    align-items:
      center;

    gap:
      3px;

    padding-top:
      8px;

    border-top:
      1px solid
      var(--opera-color-border);
  }
}


@media (max-width: 640px) {

  #page-projetos
  .opera-projects__list-panel {
    overflow:
      hidden;
  }

  #page-projetos
  .opera-projects__list
  .projeto-row-main {
    padding:
      11px
      10px
      !important;
  }

  #page-projetos
  .opera-projects__list
  .projeto-row-main
  > div:first-child
  > .flex.h-10.w-10 {
    width:
      34px !important;

    height:
      34px !important;
  }

  #page-projetos
  .opera-projects__list
  .opera-card-meta-item {
    width:
      auto;

    max-width:
      100%;
  }

  #page-projetos
  .opera-projects__list
  .projeto-row-details {
    padding:
      10px !important;
  }

  #page-projetos
  .opera-projects__list
  .projeto-row-details
  .grid {
    gap:
      10px !important;
  }
}