:root {
        color-scheme: light;
        --bg: #edf1ef;
        --surface: #ffffff;
        --surface-soft: #f6f8f7;
        --line: #d8dfdc;
        --line-strong: #bdc9c4;
        --text: #13201b;
        --muted: #66746e;
        --muted-strong: #46544f;
        --accent: #128c7e;
        --accent-soft: #dff2ee;
        --danger: #b42318;
        --danger-soft: #fff0ed;
        --warning: #a15c07;
        --warning-soft: #fff7e8;
        --ok: #14804a;
        --ok-soft: #e6f5ec;
        --bubble-in: #ffffff;
        --bubble-out: #d9fdd3;
        --chat-bg: #efe7dc;
        --tag-color: #8ca64c;
        --wa-blue: #53bdeb;
        --shadow: 0 18px 42px rgba(34, 48, 42, 0.12);
      }

      * {
        box-sizing: border-box;
      }

      html,
      body {
        height: 100%;
        overflow: hidden;
      }

      body {
        margin: 0;
        background:
          linear-gradient(135deg, rgba(18, 140, 126, 0.08), transparent 34%),
          linear-gradient(180deg, #f8fbfa 0%, var(--bg) 38%, #e9efec 100%);
        color: var(--text);
        font-family:
          Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      }

      button {
        font: inherit;
      }

      .mobile-only {
        display: none !important;
      }

      .app {
        display: grid;
        grid-template-rows: auto minmax(0, 1fr) auto;
        height: 100dvh;
        min-height: 0;
        overflow: hidden;
      }

      .app[data-view="workbench"] .layout,
      .app[data-view="workbench"] .customer-management,
      .app[data-view="workbench"] .customer-detail-view,
      .app[data-view="workbench"] .sales-management,
      .app[data-view="workbench"] .role-management,
      .app[data-view="workbench"] .user-management,
      .app[data-view="workbench"] .customer-field-management,
      .app[data-view="workbench"] .comments-inbox-view,
      .app[data-view="workbench"] .event-drawer,
      .app[data-view="customers"] .dashboard,
      .app[data-view="customers"] .layout,
      .app[data-view="customers"] .customer-detail-view,
      .app[data-view="customers"] .sales-management,
      .app[data-view="customers"] .role-management,
      .app[data-view="customers"] .user-management,
      .app[data-view="customers"] .customer-field-management,
      .app[data-view="customers"] .comments-inbox-view,
      .app[data-view="customers"] .event-drawer,
      .app[data-view="conversations"] .dashboard,
      .app[data-view="conversations"] .customer-management,
      .app[data-view="conversations"] .customer-detail-view,
      .app[data-view="conversations"] .sales-management,
      .app[data-view="conversations"] .role-management,
      .app[data-view="conversations"] .user-management,
      .app[data-view="conversations"] .customer-field-management,
      .app[data-view="conversations"] .comments-inbox-view,
      .app[data-view="customer-detail"] .dashboard,
      .app[data-view="customer-detail"] .customer-management,
      .app[data-view="customer-detail"] .layout,
      .app[data-view="customer-detail"] .sales-management,
      .app[data-view="customer-detail"] .role-management,
      .app[data-view="customer-detail"] .user-management,
      .app[data-view="customer-detail"] .customer-field-management,
      .app[data-view="customer-detail"] .comments-inbox-view,
      .app[data-view="customer-detail"] .event-drawer,
      .app[data-view="sales-management"] .dashboard,
      .app[data-view="sales-management"] .customer-management,
      .app[data-view="sales-management"] .customer-detail-view,
      .app[data-view="sales-management"] .layout,
      .app[data-view="sales-management"] .role-management,
      .app[data-view="sales-management"] .user-management,
      .app[data-view="sales-management"] .customer-field-management,
      .app[data-view="sales-management"] .comments-inbox-view,
      .app[data-view="sales-management"] .event-drawer,
      .app[data-view="role-management"] .dashboard,
      .app[data-view="role-management"] .customer-management,
      .app[data-view="role-management"] .customer-detail-view,
      .app[data-view="role-management"] .layout,
      .app[data-view="role-management"] .sales-management,
      .app[data-view="role-management"] .customer-field-management,
      .app[data-view="role-management"] .comments-inbox-view,
      .app[data-view="customer-fields"] .dashboard,
      .app[data-view="customer-fields"] .customer-management,
      .app[data-view="customer-fields"] .customer-detail-view,
      .app[data-view="customer-fields"] .layout,
      .app[data-view="customer-fields"] .sales-management,
      .app[data-view="customer-fields"] .role-management,
      .app[data-view="customer-fields"] .user-management,
      .app[data-view="customer-fields"] .comments-inbox-view,
      .app[data-view="customer-fields"] .event-drawer,
      .app[data-view="comments-inbox"] .dashboard,
      .app[data-view="comments-inbox"] .customer-management,
      .app[data-view="comments-inbox"] .customer-detail-view,
      .app[data-view="comments-inbox"] .layout,
      .app[data-view="comments-inbox"] .sales-management,
      .app[data-view="comments-inbox"] .role-management,
      .app[data-view="comments-inbox"] .user-management,
      .app[data-view="comments-inbox"] .customer-field-management,
      .app[data-view="comments-inbox"] .event-drawer,
      .app[data-view="role-management"] .event-drawer {
        display: none;
      }

      .app:not([data-role="admin"]) [data-admin-only] {
        display: none;
      }

      .app[data-role="admin"] [data-non-admin] {
        display: none;
      }

      .app[data-role="sales"] .event-drawer {
        display: none;
      }

      .login-overlay {
        align-items: center;
        background: rgba(237, 241, 239, 0.92);
        display: flex;
        inset: 0;
        justify-content: center;
        padding: 24px;
        position: fixed;
        z-index: 20;
      }

      .login-overlay[hidden] {
        display: none;
      }

      .login-panel {
        background: var(--surface);
        border: 1px solid var(--line);
        border-radius: 8px;
        box-shadow: var(--shadow);
        display: grid;
        gap: 14px;
        max-width: 420px;
        padding: 22px;
        width: min(420px, 100%);
      }

      .login-panel h2 {
        font-size: 20px;
        margin: 0;
      }

      .login-panel p {
        color: var(--muted);
        font-size: 13px;
        margin: 0;
      }

      .dashboard {
        background: var(--surface);
        border-bottom: 1px solid var(--line);
        display: grid;
        gap: 8px;
        padding: 8px 18px;
      }

      .app[data-view="workbench"] .dashboard {
        align-content: start;
        background: var(--bg);
        border-bottom: 0;
        overflow: auto;
        padding: 24px;
      }

      .dashboard-kpis {
        display: grid;
        gap: 8px;
        grid-template-columns: repeat(5, minmax(110px, 1fr));
        overflow-x: auto;
      }

      .app[data-view="workbench"] .dashboard-kpis {
        gap: 12px;
        margin: 0 auto;
        max-width: 1280px;
        width: 100%;
      }

      .admin-wa-alerts {
        background: #fff7ed;
        border: 1px solid #fed7aa;
        border-radius: 8px;
        color: #7c2d12;
        display: grid;
        gap: 8px;
        margin: 0 auto;
        max-width: 1280px;
        padding: 12px 14px;
        width: 100%;
      }

      .admin-wa-alerts[hidden] {
        display: none;
      }

      .admin-wa-alerts strong {
        color: #9a3412;
        font-size: 13px;
      }

      .admin-wa-alert-list {
        display: grid;
        gap: 6px;
      }

      .admin-wa-alert-row {
        align-items: center;
        display: grid;
        gap: 8px;
        grid-template-columns: minmax(120px, 1fr) minmax(140px, 1.3fr) auto;
      }

      .kpi {
        background: var(--surface-soft);
        border: 1px solid var(--line);
        border-radius: 8px;
        display: grid;
        gap: 3px;
        padding: 8px 10px;
        min-width: 0;
      }

      button.kpi {
        cursor: pointer;
        font: inherit;
        text-align: left;
        transition:
          border-color 120ms ease,
          box-shadow 120ms ease,
          transform 120ms ease;
      }

      button.kpi:hover {
        border-color: var(--accent);
        box-shadow: 0 10px 24px rgba(18, 140, 126, 0.12);
        transform: translateY(-1px);
      }

      .kpi-value.has-unread {
        color: var(--accent);
      }

      .app[data-view="workbench"] .kpi {
        background: var(--surface);
        min-height: 108px;
        padding: 18px;
      }

      .app[data-view="workbench"] .kpi-value {
        font-size: 28px;
      }

      .kpi-label {
        color: var(--muted);
        font-size: 11px;
        letter-spacing: 0.02em;
        text-transform: uppercase;
      }

      .kpi-value {
        color: var(--text);
        font-size: 19px;
        font-weight: 600;
        line-height: 1.1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .kpi-sub {
        color: var(--muted);
        font-size: 11px;
      }

      .app:not([data-role="admin"]) .dashboard-kpis {
        grid-template-columns: repeat(4, minmax(120px, 1fr));
      }

      .customer-management {
        background:
          linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(246, 250, 248, 0.96)),
          var(--surface-soft);
        display: grid;
        grid-template-rows: auto minmax(0, 1fr);
        min-height: 0;
        overflow: hidden;
      }

      .customer-management-body {
        display: grid;
        gap: 14px;
        grid-template-rows: auto minmax(0, 1fr);
        min-height: 0;
        overflow: hidden;
        padding: 16px 18px 18px;
      }

      .customer-filter-form {
        align-items: end;
        background: rgba(255, 255, 255, 0.94);
        border: 1px solid rgba(216, 223, 220, 0.86);
        border-radius: 14px;
        box-shadow: 0 10px 24px rgba(34, 48, 42, 0.06);
        display: grid;
        gap: 12px;
        grid-template-columns: minmax(180px, 1.3fr) repeat(4, minmax(130px, 1fr)) auto;
        padding: 14px;
      }

      .customer-filter-field {
        display: grid;
        gap: 6px;
        min-width: 0;
      }

      .customer-filter-field label {
        color: var(--muted);
        font-size: 11px;
        font-weight: 800;
      }

      .customer-filter-field input,
      .customer-filter-field select {
        background: #fff;
        border: 1px solid #d8e3df;
        border-radius: 8px;
        color: var(--text);
        font: inherit;
        min-height: 38px;
        min-width: 0;
        padding: 0 10px;
        width: 100%;
      }

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

      .customer-filter-button {
        align-items: center;
        background: var(--accent);
        border: 1px solid var(--accent);
        border-radius: 8px;
        color: #fff;
        cursor: pointer;
        display: inline-flex;
        font-weight: 800;
        justify-content: center;
        min-height: 38px;
        padding: 0 14px;
        white-space: nowrap;
      }

      .customer-filter-button.secondary {
        background: #fff;
        border-color: #d8e3df;
        color: var(--muted-strong);
      }

      .customer-management-head {
        align-items: center;
        background: rgba(255, 255, 255, 0.88);
        border-bottom: 1px solid rgba(216, 223, 220, 0.8);
        box-shadow: 0 10px 28px rgba(34, 48, 42, 0.06);
        display: flex;
        gap: 14px;
        justify-content: space-between;
        min-width: 0;
        padding: 16px 22px;
        position: relative;
        z-index: 2;
      }

      .customer-management-head h2 {
        font-size: 20px;
        font-weight: 800;
        line-height: 1.2;
        margin: 0;
      }

      .customer-management-head p {
        color: var(--muted);
        font-size: 13px;
        margin: 5px 0 0;
      }

      .customer-management-title {
        min-width: 0;
      }

      .customer-management-stat {
        align-items: center;
        background: #ffffff;
        border: 1px solid var(--line);
        border-radius: 12px;
        box-shadow: 0 10px 24px rgba(34, 48, 42, 0.08);
        color: var(--muted);
        display: inline-flex;
        flex: 0 0 auto;
        gap: 8px;
        min-height: 38px;
        padding: 6px 10px;
      }

      .customer-management-stat .count {
        background: var(--accent-soft);
        border-color: #b7ddd6;
        color: var(--accent);
        font-weight: 800;
        height: 26px;
        min-width: 32px;
        justify-content: center;
      }

      .customer-table-wrap {
        background: rgba(255, 255, 255, 0.94);
        border: 1px solid rgba(216, 223, 220, 0.86);
        border-radius: 14px;
        box-shadow: 0 14px 34px rgba(34, 48, 42, 0.08);
        min-height: 0;
        overflow: auto;
      }

      .customer-table {
        border-collapse: separate;
        border-spacing: 0;
        min-width: 1160px;
        width: 100%;
      }

      .customer-table th,
      .customer-table td {
        border-bottom: 1px solid rgba(216, 223, 220, 0.72);
        padding: 14px 14px;
        text-align: left;
        vertical-align: middle;
      }

      .customer-table th {
        background: rgba(248, 250, 249, 0.98);
        color: var(--muted);
        font-size: 11px;
        font-weight: 800;
        position: sticky;
        top: 0;
        z-index: 1;
      }

      .customer-table th:first-child {
        border-top-left-radius: 14px;
      }

      .customer-table th:last-child {
        border-top-right-radius: 14px;
      }

      .customer-table td {
        color: var(--muted-strong);
        font-size: 13px;
        transition: background 140ms ease, box-shadow 140ms ease;
      }

      .customer-table .primary-cell {
        color: var(--text);
        font-weight: 800;
      }

      .muted-line,
      .customer-table .muted-line {
        color: var(--muted);
        display: block;
        font-size: 12px;
        margin-top: 3px;
      }

      .customer-table button {
        align-items: center;
        background: transparent;
        border: 0;
        color: inherit;
        cursor: pointer;
        display: flex;
        font: inherit;
        gap: 10px;
        margin: 0;
        padding: 0;
        text-align: left;
        width: 100%;
      }

      .customer-table button:hover .primary-cell {
        color: var(--accent);
      }

      .customer-table tbody tr {
        position: relative;
      }

      .customer-table tbody tr:hover td {
        background: #fbfdfc;
      }

      .customer-table tr.active td {
        background: #e7f7f3;
      }

      .customer-table tr.active td:first-child {
        box-shadow: inset 4px 0 0 var(--accent);
      }

      .customer-table button .avatar,
      .customer-mobile-card .avatar {
        flex: 0 0 auto;
      }

      .customer-cell-main {
        display: grid;
        gap: 3px;
        min-width: 0;
      }

      .customer-owner,
      .customer-message,
      .customer-note-cell,
      .customer-time-cell {
        display: grid;
        gap: 3px;
        min-width: 0;
      }

      .customer-message {
        color: var(--text);
        line-height: 1.45;
        max-width: 520px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .customer-note-cell,
      .customer-time-cell {
        color: var(--muted-strong);
        line-height: 1.35;
      }

      .customer-note-cell {
        display: -webkit-box;
        max-width: 180px;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
      }

      .customer-row-actions {
        align-items: center;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
      }

      .customer-table .customer-action-button {
        background: #f8fbfa;
        border: 1px solid #d8e3df;
        border-radius: 8px;
        color: #0b5f55;
        display: inline-flex;
        font-size: 12px;
        font-weight: 800;
        justify-content: center;
        min-height: 32px;
        padding: 0 10px;
        width: auto;
      }

      .customer-table .customer-action-button.secondary {
        background: #fff;
        color: var(--muted-strong);
      }

      .customer-chip {
        align-items: center;
        background: var(--accent-soft);
        border-radius: 999px;
        color: var(--accent);
        display: inline-flex;
        gap: 6px;
        font-size: 12px;
        font-weight: 700;
        line-height: 1;
        min-height: 26px;
        padding: 5px 9px;
        white-space: nowrap;
      }

      .customer-chip.neutral {
        background: var(--surface-soft);
        color: var(--muted-strong);
      }

      .customer-chip.important {
        background: #fff4e7;
        color: #8a5a15;
      }

      .customer-chip.attention {
        background: #fff7e8;
        color: var(--warning);
      }

      .customer-chip.tag-status {
        background: #f8faf9;
        border: 1px solid #e1e6e3;
        color: var(--muted-strong);
      }

      .customer-chip.stage-chip {
        background: var(--stage-bg, var(--accent-soft));
        border: 1px solid var(--stage-border, transparent);
        color: var(--stage-strong, var(--accent));
      }

      .customer-empty {
        color: var(--muted);
        padding: 40px 18px;
        text-align: center;
      }

      .customer-mobile-list {
        min-width: 0;
      }

      .customer-mobile-card {
        background: #fff;
        border: 1px solid rgba(216, 223, 220, 0.9);
        border-radius: 8px;
        box-shadow: 0 10px 24px rgba(34, 48, 42, 0.08);
        display: grid;
        gap: 12px;
        min-width: 0;
        padding: 14px;
      }

      .customer-mobile-card.active {
        border-color: rgba(18, 140, 126, 0.36);
        box-shadow: inset 4px 0 0 var(--accent), 0 10px 24px rgba(34, 48, 42, 0.08);
      }

      .customer-card-head {
        align-items: flex-start;
        display: flex;
        gap: 10px;
        justify-content: space-between;
        min-width: 0;
      }

      .customer-card-title {
        display: grid;
        flex: 1 1 auto;
        gap: 6px;
        min-width: 0;
      }

      .customer-card-title strong {
        color: var(--text);
        font-size: 16px;
        line-height: 1.25;
        overflow-wrap: anywhere;
      }

      .customer-card-chips {
        align-items: center;
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
      }

      .customer-card-grid {
        display: grid;
        gap: 9px;
      }

      .customer-card-field {
        display: grid;
        gap: 3px;
        min-width: 0;
      }

      .customer-card-field span:first-child {
        color: var(--muted);
        font-size: 11px;
        font-weight: 800;
      }

      .customer-card-field span:last-child {
        color: var(--muted-strong);
        font-size: 13px;
        line-height: 1.42;
        overflow-wrap: anywhere;
      }

      .customer-card-actions {
        display: grid;
        gap: 8px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .customer-card-action {
        align-items: center;
        background: #f8fbfa;
        border: 1px solid #d8e3df;
        border-radius: 8px;
        color: #0b5f55;
        cursor: pointer;
        display: inline-flex;
        font-weight: 800;
        justify-content: center;
        min-height: 38px;
        padding: 0 10px;
      }

      .customer-card-action.secondary {
        background: #fff;
        color: var(--muted-strong);
      }

      .management-view {
        background: var(--surface);
        display: grid;
        grid-template-rows: auto minmax(0, 1fr);
        min-height: 0;
        overflow: hidden;
      }

      .customer-field-management {
        grid-template-rows: auto auto minmax(0, 1fr);
      }

      .customer-field-filter-bar {
        align-items: end;
        background: rgba(255, 255, 255, 0.94);
        border-bottom: 1px solid rgba(216, 223, 220, 0.8);
        display: grid;
        gap: 12px;
        grid-template-columns: repeat(3, minmax(150px, 1fr)) auto;
        padding: 14px 18px;
      }

      .customer-field-filter {
        display: grid;
        gap: 6px;
        min-width: 0;
      }

      .customer-field-filter span {
        color: var(--muted);
        font-size: 11px;
        font-weight: 800;
      }

      .customer-field-filter select {
        background: #fff;
        border: 1px solid #d8e3df;
        border-radius: 8px;
        color: var(--text);
        font: inherit;
        min-height: 38px;
        min-width: 0;
        padding: 0 10px;
        width: 100%;
      }

      .customer-field-group-chip,
      .customer-field-source-chip {
        align-items: center;
        background: #f3faf7;
        border: 1px solid #d8ece6;
        border-radius: 999px;
        color: #167966;
        display: inline-flex;
        font-size: 12px;
        gap: 4px;
        padding: 3px 8px;
        width: fit-content;
      }

      .customer-field-group-chip {
        background: #eef7f4;
        color: var(--accent);
      }

      .customer-field-source-chip.custom {
        background: #fff8e8;
        border-color: #ecd99f;
        color: #7a5b12;
      }

      .customer-field-source-chip.system {
        background: #eef7f4;
        color: var(--accent);
      }

      .management-body {
        display: grid;
        gap: 16px;
        grid-template-columns: minmax(0, 1.55fr) minmax(280px, 0.7fr);
        min-height: 0;
        overflow: hidden;
        padding: 16px 18px;
      }

      .management-table-wrap {
        border: 1px solid var(--line);
        border-radius: 8px;
        min-height: 0;
        overflow: auto;
      }

      .management-table {
        border-collapse: collapse;
        min-width: 980px;
        width: 100%;
      }

      .management-table th,
      .management-table td {
        border-bottom: 1px solid var(--line);
        padding: 11px 12px;
        text-align: left;
        vertical-align: top;
      }

      .management-table th {
        background: var(--surface-soft);
        color: var(--muted);
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.02em;
        position: sticky;
        text-transform: uppercase;
        top: 0;
        z-index: 1;
      }

      .management-table td {
        color: var(--muted-strong);
        font-size: 13px;
      }

      .management-table .primary-cell {
        color: var(--text);
        font-weight: 600;
      }

      .management-table button {
        background: transparent;
        border: 0;
        color: inherit;
        cursor: pointer;
        font: inherit;
        margin: 0;
        padding: 0;
        text-align: left;
      }

      .management-table tr.active td {
        background: var(--accent-soft);
      }

      .deleted-instance-section {
        border-top: 1px solid var(--line);
        display: grid;
        gap: 12px;
        min-width: 980px;
        padding: 14px;
      }

      .deleted-instance-head {
        align-items: center;
        display: flex;
        gap: 12px;
        justify-content: space-between;
      }

      .deleted-instance-head h3 {
        font-size: 15px;
        margin: 0;
      }

      .deleted-instance-head p {
        color: var(--muted);
        font-size: 12px;
        margin: 4px 0 0;
      }

      .deleted-instance-table {
        min-width: 940px;
      }

      .deleted-instance-restore-result {
        align-items: start;
        background: var(--surface-soft);
        border: 1px solid var(--line);
        border-radius: 8px;
        display: grid;
        gap: 14px;
        grid-template-columns: minmax(0, 1fr) 184px;
        padding: 14px;
      }

      .deleted-instance-restore-result h4 {
        font-size: 15px;
        margin: 0;
      }

      .deleted-instance-restore-result p {
        color: var(--muted);
        font-size: 13px;
        margin: 6px 0 0;
      }

      .deleted-instance-restore-result .sales-wa-qr {
        min-height: 164px;
        padding: 10px;
      }

      .deleted-instance-restore-result .sales-wa-qr img {
        height: 144px;
        width: 144px;
      }

      .management-detail {
        align-content: start;
        border: 1px solid var(--line);
        border-radius: 8px;
        display: grid;
        gap: 12px;
        min-height: 0;
        overflow: auto;
        padding: 14px;
      }

      .management-detail h3 {
        font-size: 16px;
        line-height: 1.2;
        margin: 0;
      }

      .management-detail p {
        color: var(--muted);
        font-size: 12px;
        margin: 0;
      }

      .role-management-body {
        display: grid;
        gap: 16px;
        grid-template-columns: minmax(260px, 0.42fr) minmax(0, 1fr);
        min-height: 0;
        overflow: hidden;
      }

      .role-management {
        grid-template-rows: auto auto minmax(0, 1fr);
      }

      .role-note {
        background: var(--warning-soft);
        border: 1px solid #eccb91;
        border-radius: 8px;
        color: var(--warning);
        font-size: 13px;
        margin-bottom: 14px;
        padding: 10px 12px;
      }

      .role-head-actions {
        align-items: center;
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        justify-content: flex-end;
      }

      .role-management-tabs {
        background: var(--surface);
        border-bottom: 1px solid var(--line);
        display: flex;
        gap: 6px;
        padding: 10px 18px 0;
      }

      .role-management-tab {
        background: transparent;
        border: 1px solid transparent;
        border-radius: 8px 8px 0 0;
        color: var(--muted-strong);
        cursor: pointer;
        min-height: 38px;
        padding: 8px 14px;
      }

      .role-management-tab.active {
        background: var(--surface-soft);
        border-color: var(--line);
        border-bottom-color: var(--surface-soft);
        color: var(--text);
        font-weight: 700;
      }

      .role-management-panels {
        display: grid;
        min-height: 0;
        overflow: hidden;
      }

      .role-management-panel {
        display: grid;
        min-height: 0;
        overflow: hidden;
      }

      .role-management-panel[hidden] {
        display: none;
      }

      .role-account-panel {
        display: grid;
        grid-template-rows: auto minmax(0, 1fr);
        min-height: 0;
      }

      .management-subhead {
        align-items: center;
        border-bottom: 1px solid var(--line);
        display: flex;
        gap: 14px;
        justify-content: space-between;
        min-width: 0;
        padding: 12px 18px;
      }

      .management-subhead h3 {
        font-size: 16px;
        line-height: 1.2;
        margin: 0;
      }

      .management-subhead p {
        color: var(--muted);
        font-size: 12px;
        margin: 4px 0 0;
      }

      .role-list-panel {
        border: 1px solid var(--line);
        border-radius: 8px;
        min-height: 0;
        overflow: auto;
      }

      .role-list-panel .role-note {
        border-left: 0;
        border-radius: 0;
        border-right: 0;
        border-top: 0;
        margin: 0;
      }

      .role-list {
        display: grid;
      }

      .role-list-button {
        min-height: 104px;
      }

      .role-list-button .row-top {
        align-items: flex-start;
      }

      .role-list-button .row-name {
        white-space: normal;
      }

      .role-type {
        border-radius: 999px;
        display: inline-flex;
        flex: 0 0 auto;
        font-size: 12px;
        line-height: 1;
        padding: 5px 8px;
      }

      .role-type.built-in {
        background: var(--accent-soft);
        color: var(--accent);
      }

      .role-type.custom {
        background: var(--surface-soft);
        border: 1px solid var(--line);
        color: var(--muted-strong);
      }

      .role-description {
        color: var(--muted-strong);
        font-size: 13px;
        line-height: 1.45;
        margin-top: 8px;
        overflow-wrap: anywhere;
        white-space: normal;
      }

      .role-detail {
        gap: 16px;
      }

      .role-detail-head {
        display: grid;
        gap: 6px;
      }

      .role-meta-grid {
        display: grid;
        gap: 10px;
        grid-template-columns: repeat(4, minmax(120px, 1fr));
      }

      .role-meta-item {
        background: var(--surface-soft);
        border: 1px solid var(--line);
        border-radius: 8px;
        display: grid;
        gap: 4px;
        padding: 10px;
      }

      .role-meta-item span {
        color: var(--muted);
        font-size: 11px;
      }

      .role-meta-item strong {
        color: var(--text);
        font-size: 13px;
        overflow-wrap: anywhere;
      }

      .permission-groups {
        display: grid;
        gap: 12px;
      }

      .permission-group {
        border: 1px solid var(--line);
        border-radius: 8px;
        display: grid;
        gap: 8px;
        padding: 12px;
      }

      .permission-group h4 {
        font-size: 14px;
        margin: 0;
      }

      .permission-options {
        display: grid;
        gap: 8px;
        grid-template-columns: repeat(2, minmax(220px, 1fr));
      }

      .permission-option {
        align-items: flex-start;
        background: var(--surface-soft);
        border: 1px solid var(--line);
        border-radius: 8px;
        color: var(--text);
        display: grid;
        gap: 8px;
        grid-template-columns: auto minmax(0, 1fr);
        line-height: 1.35;
        padding: 10px;
      }

      .permission-option input {
        margin-top: 2px;
      }

      .permission-option strong {
        display: block;
        font-size: 13px;
      }

      .permission-option code {
        color: var(--muted);
        display: block;
        font-size: 11px;
        margin-top: 3px;
        overflow-wrap: anywhere;
      }

      .permission-option.disabled {
        opacity: 0.58;
      }

      .danger-button {
        background: var(--danger);
      }

      .detail-button:disabled {
        cursor: not-allowed;
        opacity: 0.58;
      }

      .permission-chip {
        border-radius: 999px;
        display: inline-flex;
        font-size: 12px;
        padding: 3px 8px;
        white-space: nowrap;
      }

      .permission-chip.allow {
        background: var(--ok-soft);
        color: var(--ok);
      }

      .permission-chip.deny {
        background: var(--surface-soft);
        color: var(--muted);
      }

      .customer-detail-view {
        align-content: start;
        background: #ffffff;
        display: grid;
        min-height: 0;
        overflow: auto;
        padding: 22px 24px;
      }

      .customer-detail-shell {
        align-content: start;
        display: grid;
        gap: 16px;
        margin: 0;
        max-width: none;
        width: 100%;
      }

      .customer-detail-top {
        align-items: center;
        background: #ffffff;
        border: 1px solid #dfe8e4;
        border-radius: 12px;
        box-shadow: 0 10px 28px rgba(23, 74, 61, 0.07);
        display: flex;
        flex-wrap: wrap;
        gap: 18px;
        justify-content: space-between;
        min-width: 0;
        padding: 18px 20px;
      }

      .customer-detail-back {
        align-items: center;
        background: transparent;
        border: 0;
        color: var(--accent);
        cursor: pointer;
        display: inline-flex;
        font: inherit;
        font-weight: 650;
        gap: 6px;
        padding: 0;
        width: fit-content;
      }

      .customer-detail-back:hover {
        color: var(--accent-strong);
      }

      .customer-detail-identity {
        align-items: center;
        display: grid;
        flex: 1 1 340px;
        gap: 14px;
        grid-template-columns: auto minmax(0, 1fr);
        min-width: 0;
      }

      .customer-detail-avatar {
        align-items: center;
        background: linear-gradient(135deg, #19aa91, #07977f);
        border-radius: 999px;
        box-shadow: 0 10px 22px rgba(18, 140, 126, 0.2);
        color: #ffffff;
        display: inline-flex;
        flex: 0 0 auto;
        font-size: 21px;
        font-weight: 850;
        height: 58px;
        justify-content: center;
        overflow: hidden;
        width: 58px;
      }

      .customer-detail-avatar img {
        height: 100%;
        object-fit: cover;
        width: 100%;
      }

      .customer-detail-title {
        min-width: 0;
      }

      .customer-detail-title h2 {
        color: #17201c;
        font-size: 23px;
        font-weight: 850;
        line-height: 1.2;
        margin: 0;
        overflow-wrap: anywhere;
      }

      .customer-detail-title p {
        color: var(--muted);
        font-size: 14px;
        margin: 4px 0 0;
      }

      .customer-detail-title .customer-detail-owner-line {
        color: #3c4641;
        font-size: 12px;
        font-weight: 600;
        margin-top: 7px;
      }

      .customer-detail-owner-prefix {
        color: var(--muted-strong);
        font-weight: 500;
      }

      .customer-detail-actions {
        align-items: center;
        display: flex;
        flex: 0 0 auto;
        flex-wrap: wrap;
        gap: 9px;
        justify-content: flex-end;
      }

      .customer-detail-actions > .detail-button {
        min-height: 38px;
        padding: 8px 14px;
      }

      .detail-button.customer-whatsapp-button {
        align-items: center;
        background: #e7f8f2;
        border: 1px solid #9ad8c9;
        box-shadow: 0 10px 22px rgba(18, 140, 126, 0.14);
        color: #087a66;
        display: inline-flex;
        font-weight: 800;
        gap: 8px;
      }

      .detail-button.customer-whatsapp-button:hover {
        background: #d9f3eb;
        border-color: #6bc9b4;
        color: #046754;
      }

      .customer-whatsapp-button-icon {
        align-items: center;
        background: #0f9f86;
        border-radius: 999px;
        color: #ffffff;
        display: inline-flex;
        font-size: 11px;
        height: 18px;
        justify-content: center;
        line-height: 1;
        width: 18px;
      }

      .customer-detail-quick-form {
        align-items: center;
        display: flex;
        flex: 0 1 auto;
        flex-wrap: wrap;
        gap: 9px;
        justify-content: flex-end;
        min-width: 0;
      }

      .customer-detail-quick-field {
        display: grid;
        gap: 3px;
        min-width: 150px;
      }

      .customer-detail-quick-field label,
      .customer-tag-dropdown-label {
        color: var(--muted);
        font-size: 11px;
      }

      .customer-detail-quick-field select,
      .customer-tag-dropdown summary {
        background: #ffffff;
        border: 1px solid #dbe6e2;
        border-radius: 8px;
        color: var(--text);
        font: inherit;
        min-height: 38px;
        padding: 8px 10px;
      }

      .customer-tag-dropdown {
        position: relative;
      }

      .customer-tag-dropdown summary {
        cursor: pointer;
        display: flex;
        gap: 8px;
        justify-content: space-between;
        list-style: none;
        min-width: 0;
      }

      .customer-tag-dropdown summary::-webkit-details-marker {
        display: none;
      }

      .customer-tag-dropdown-menu {
        background: #ffffff;
        border: 1px solid #d9e7e2;
        border-radius: 8px;
        box-shadow: 0 18px 34px rgba(23, 74, 61, 0.14);
        display: grid;
        gap: 4px;
        left: 0;
        max-height: 280px;
        min-width: 220px;
        overflow: auto;
        padding: 8px;
        position: absolute;
        top: calc(100% + 6px);
        width: max-content;
        z-index: 30;
      }

      .customer-tag-dropdown-option {
        align-items: center;
        border-radius: 8px;
        color: var(--muted-strong);
        cursor: pointer;
        display: flex;
        gap: 7px;
        min-height: 30px;
        padding: 6px 8px;
        white-space: nowrap;
      }

      .customer-tag-dropdown-option:has(input:checked) {
        background: var(--accent-soft);
        color: var(--accent-strong);
      }

      .customer-tag-dropdown-option input {
        margin: 0;
      }

      .customer-detail-star {
        align-items: center;
        background: #ffffff;
        border: 1px solid #dfe6e3;
        border-radius: 8px;
        box-shadow: 0 6px 16px rgba(31, 43, 38, 0.04);
        color: #6b7671;
        cursor: pointer;
        display: inline-flex;
        font-weight: 750;
        gap: 7px;
        min-height: 38px;
        padding: 8px 12px;
        white-space: nowrap;
      }

      .customer-detail-star input {
        appearance: none;
        height: 0;
        margin: 0;
        opacity: 0;
        position: absolute;
        width: 0;
      }

      .customer-detail-star span:first-of-type {
        color: #a7b0ab;
        font-size: 17px;
        line-height: 1;
      }

      .customer-detail-star:has(input:checked) {
        background: #fff1ed;
        border-color: #f0a08c;
        box-shadow: 0 10px 22px rgba(222, 73, 43, 0.12);
        color: #af341c;
      }

      .customer-detail-star:has(input:checked) span:first-of-type {
        color: #e34f2f;
      }

      .customer-detail-quick-status {
        color: var(--muted);
        font-size: 12px;
        min-height: 16px;
        text-align: right;
        width: 100%;
      }

      .customer-detail-summary {
        background: #ffffff;
        border: 1px solid rgba(216, 223, 220, 0.86);
        border-radius: 14px;
        box-shadow: 0 12px 30px rgba(34, 48, 42, 0.06);
        display: grid;
        gap: 0;
        grid-template-columns: repeat(4, minmax(150px, 1fr));
        overflow: hidden;
        padding: 0;
      }

      .summary-item {
        border-bottom: 1px solid rgba(216, 223, 220, 0.72);
        border-right: 1px solid rgba(216, 223, 220, 0.72);
        display: grid;
        gap: 5px;
        min-width: 0;
        padding: 13px 14px;
      }

      .summary-item:nth-child(4n) {
        border-right: 0;
      }

      .summary-label {
        color: var(--muted);
        font-size: 11px;
      }

      .summary-value {
        color: var(--text);
        font-size: 13px;
        font-weight: 650;
        overflow-wrap: anywhere;
      }

      .customer-detail-sections {
        display: grid;
        gap: 18px;
      }

      .customer-detail-body {
        align-items: start;
        display: grid;
        gap: 20px;
        grid-template-columns: minmax(0, 1fr) 292px;
      }

      .customer-detail-tabs {
        background: #ffffff;
        border: 1px solid #dfe8e4;
        border-radius: 12px;
        box-shadow: 0 8px 22px rgba(23, 74, 61, 0.05);
        display: grid;
        gap: 6px;
        padding: 8px;
        position: sticky;
        top: 12px;
      }

      .detail-tab {
        background: transparent;
        border: 1px solid transparent;
        border-radius: 8px;
        color: var(--muted-strong);
        cursor: pointer;
        min-height: 38px;
        padding: 8px 10px;
        text-align: left;
        width: 100%;
      }

      .detail-tab.active {
        background: #eaf8f4;
        border-color: #a7dcd1;
        color: var(--accent);
        font-weight: 700;
      }

      .customer-detail-panel {
        display: grid;
        gap: 18px;
        min-width: 0;
      }

      .customer-detail-sidebar {
        display: grid;
        gap: 14px;
        min-width: 0;
        position: sticky;
        top: 12px;
      }

      .customer-detail-tab-panel {
        display: grid;
        min-height: 420px;
        min-width: 0;
      }

      .customer-detail-tab-panel.is-entering {
        animation: customer-tab-enter 140ms ease-out;
      }

      @keyframes customer-tab-enter {
        from {
          opacity: 0;
          transform: translateY(4px);
        }

        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      .detail-section {
        background: #ffffff;
        border: 1px solid #dfe8e4;
        border-radius: 12px;
        box-shadow: 0 12px 30px rgba(23, 74, 61, 0.06);
        display: grid;
        gap: 16px;
        padding: 18px;
      }

      .customer-overview-card {
        gap: 18px;
      }

      .customer-detail-panel .detail-section {
        border-top: 1px solid rgba(216, 223, 220, 0.86);
      }

      .detail-section-head {
        align-items: center;
        border-bottom: 1px solid #e6eeeb;
        display: flex;
        gap: 12px;
        justify-content: space-between;
        min-width: 0;
        padding-bottom: 14px;
      }

      .detail-section-head h3 {
        color: #101815;
        font-size: 18px;
        font-weight: 800;
        line-height: 1.25;
        margin: 0;
      }

      .detail-section-head p {
        color: var(--muted);
        font-size: 12px;
        margin: 5px 0 0;
      }

      .detail-section-body {
        display: grid;
        gap: 18px;
      }

      .customer-overview-group {
        display: grid;
        gap: 12px;
      }

      .customer-overview-group + .customer-overview-group {
        border-top: 1px solid #edf2ef;
        padding-top: 18px;
      }

      .customer-overview-group-title {
        align-items: center;
        color: var(--accent);
        display: flex;
        font-size: 14px;
        font-weight: 800;
        gap: 8px;
        margin: 0;
      }

      .customer-overview-group-title::before {
        background: linear-gradient(135deg, #14ad93, #0b8f7b);
        border-radius: 6px;
        box-shadow: 0 4px 10px rgba(18, 140, 126, 0.16);
        content: "";
        height: 14px;
        width: 4px;
      }

      .customer-overview-grid,
      .customer-overview-form-grid {
        display: grid;
        gap: 10px;
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }

      .customer-overview-field,
      .customer-overview-readonly-field {
        background: #ffffff;
        border: 1px solid #e0e8e5;
        border-radius: 8px;
        display: grid;
        gap: 7px;
        min-height: 70px;
        min-width: 0;
        padding: 10px 12px;
        position: relative;
        transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
      }

      .customer-overview-field:hover {
        border-color: #b7dcd3;
        box-shadow: 0 8px 20px rgba(23, 74, 61, 0.06);
      }

      .customer-overview-field.is-editing {
        background: #f3fbf7;
        border-color: #12a58d;
        box-shadow: 0 0 0 3px rgba(18, 140, 126, 0.12);
      }

      .customer-overview-field.is-wide,
      .customer-overview-readonly-field.is-wide,
      .customer-overview-form-grid .customer-profile-field-wide {
        grid-column: 1 / -1;
      }

      .customer-overview-label {
        color: var(--muted);
        font-size: 11px;
      }

      .customer-overview-value {
        color: #151d19;
        font-size: 14px;
        font-weight: 700;
        line-height: 1.45;
        overflow-wrap: anywhere;
      }

      .customer-overview-empty {
        color: var(--muted);
        font-weight: 500;
      }

      .customer-overview-chip-list {
        align-items: center;
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
      }

      .customer-overview-field-head {
        align-items: center;
        display: flex;
        gap: 8px;
        justify-content: space-between;
        min-width: 0;
      }

      .customer-overview-field-edit {
        align-items: center;
        background: transparent;
        border: 0;
        border-radius: 6px;
        color: var(--muted);
        cursor: pointer;
        display: inline-flex;
        flex: 0 0 auto;
        font: inherit;
        height: 24px;
        justify-content: center;
        padding: 0;
        width: 24px;
      }

      .customer-overview-field-edit:hover {
        background: #eaf8f4;
        color: var(--accent);
      }

      .customer-overview-inline-form {
        display: grid;
        gap: 10px;
      }

      .customer-overview-inline-form input,
      .customer-overview-inline-form select,
      .customer-overview-inline-form textarea {
        background: #ffffff;
        border: 1px solid #bdddd5;
        border-radius: 8px;
        color: var(--text);
        font: inherit;
        min-height: 34px;
        padding: 7px 9px;
        width: 100%;
      }

      .customer-overview-inline-form textarea {
        min-height: 88px;
        resize: vertical;
      }

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

      .customer-overview-inline-actions .detail-button {
        min-height: 30px;
        padding: 6px 10px;
      }

      .customer-overview-inline-status {
        color: var(--muted);
        font-size: 12px;
        margin-right: auto;
      }

      .customer-edit-focus-target {
        border-color: #12a58d !important;
        box-shadow: 0 0 0 3px rgba(18, 140, 126, 0.12), 0 10px 24px rgba(23, 74, 61, 0.08) !important;
      }

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

      .customer-overview-actions .detail-button {
        min-height: 36px;
        padding: 8px 14px;
      }

      .customer-sidebar-card {
        background: #ffffff;
        border: 1px solid #dfe8e4;
        border-radius: 12px;
        box-shadow: 0 10px 26px rgba(23, 74, 61, 0.05);
        display: grid;
        gap: 12px;
        padding: 15px;
      }

      .customer-sidebar-card.is-summary {
        background: linear-gradient(180deg, #f7fffc 0%, #ffffff 76%);
        border-color: #bfe2da;
      }

      .customer-sidebar-card.is-modules {
        gap: 10px;
      }

      .customer-sidebar-card h3 {
        border-bottom: 1px solid #e3ece8;
        color: #111a16;
        font-size: 16px;
        font-weight: 800;
        margin: 0;
        padding-bottom: 10px;
      }

      .customer-sidebar-list {
        display: grid;
        gap: 4px;
      }

      .customer-module-list {
        display: grid;
        gap: 6px;
      }

      .customer-module-button {
        align-items: center;
        background: #ffffff;
        border: 1px solid transparent;
        border-radius: 9px;
        color: var(--muted-strong);
        cursor: pointer;
        display: grid;
        font: inherit;
        gap: 8px;
        grid-template-columns: auto minmax(0, 1fr) auto;
        min-height: 40px;
        padding: 8px 9px;
        text-align: left;
        width: 100%;
      }

      .customer-module-button:hover {
        background: #f0faf6;
        border-color: #c8e8df;
        color: var(--accent);
      }

      .customer-module-button.active {
        background: #e6f7f1;
        border-color: #8bd4c3;
        color: #077b66;
        font-weight: 800;
      }

      .customer-module-button:disabled,
      .customer-module-button.is-disabled {
        background: #f7faf8;
        border-color: #edf1ef;
        color: var(--muted);
        cursor: not-allowed;
        opacity: 0.78;
      }

      .customer-module-icon {
        align-items: center;
        background: #eff8f5;
        border: 1px solid #d5ebe5;
        border-radius: 8px;
        color: var(--accent);
        display: inline-flex;
        font-size: 12px;
        height: 24px;
        justify-content: center;
        width: 24px;
      }

      .customer-module-button.active .customer-module-icon {
        background: #0f9f86;
        border-color: #0f9f86;
        color: #ffffff;
      }

      .customer-module-button:disabled .customer-module-icon,
      .customer-module-button.is-disabled .customer-module-icon {
        background: #f0f3f1;
        border-color: #e3e8e5;
        color: var(--muted);
      }

      .customer-module-label {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .customer-module-state {
        color: var(--muted);
        font-size: 12px;
      }

      .customer-sidebar-row {
        align-items: center;
        background: transparent;
        border: 0;
        border-radius: 8px;
        color: var(--text);
        display: grid;
        font: inherit;
        gap: 8px;
        grid-template-columns: auto minmax(0, 1fr) auto;
        min-height: 38px;
        padding: 7px 8px;
        text-align: left;
        width: 100%;
      }

      .customer-sidebar-row strong {
        color: var(--text);
        font-size: 13px;
      }

      .customer-sidebar-muted {
        color: var(--muted);
        font-size: 12px;
      }

      .customer-sidebar-icon {
        align-items: center;
        background: #eff8f5;
        border: 1px solid #d5ebe5;
        border-radius: 8px;
        color: var(--accent);
        display: inline-flex;
        font-size: 12px;
        height: 24px;
        justify-content: center;
        width: 24px;
      }

      .customer-sidebar-label {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .customer-detail-empty {
        color: var(--muted);
        padding: 20px 0;
      }

      .customer-files-panel {
        display: grid;
        gap: 14px;
      }

      .customer-file-upload-form {
        background: #f7fbf9;
        border: 1px solid #dce8e3;
        border-radius: 10px;
        display: grid;
        gap: 12px;
        padding: 14px;
      }

      .customer-file-upload-grid {
        display: grid;
        gap: 10px;
        grid-template-columns: minmax(220px, 1.2fr) minmax(160px, 0.8fr);
      }

      .customer-file-upload-grid .detail-field.wide {
        grid-column: 1 / -1;
      }

      .customer-file-upload-form input,
      .customer-file-upload-form select,
      .customer-file-upload-form textarea {
        background: #ffffff;
        border: 1px solid #ccd9d4;
        border-radius: 8px;
        color: var(--text);
        font: inherit;
        min-height: 38px;
        padding: 8px 10px;
        width: 100%;
      }

      .customer-file-upload-form textarea {
        min-height: 72px;
        resize: vertical;
      }

      .customer-file-list {
        display: grid;
        gap: 10px;
      }

      .customer-file-item {
        background: #ffffff;
        border: 1px solid #e0e8e5;
        border-radius: 10px;
        display: grid;
        gap: 10px;
        grid-template-columns: minmax(0, 1fr) auto;
        padding: 12px;
      }

      .customer-file-main {
        display: grid;
        gap: 7px;
        min-width: 0;
      }

      .customer-file-title {
        color: var(--text);
        font-size: 14px;
        font-weight: 800;
        overflow-wrap: anywhere;
      }

      .customer-file-meta {
        align-items: center;
        color: var(--muted);
        display: flex;
        flex-wrap: wrap;
        font-size: 12px;
        gap: 6px 10px;
      }

      .customer-file-note {
        color: var(--muted-strong);
        font-size: 13px;
        line-height: 1.45;
        overflow-wrap: anywhere;
      }

      .customer-file-actions {
        align-items: start;
        display: flex;
        flex-wrap: wrap;
        gap: 7px;
        justify-content: flex-end;
      }

      .customer-file-action {
        background: #f4faf7;
        border: 1px solid #cfe3dc;
        border-radius: 8px;
        color: #126d5f;
        cursor: pointer;
        font: inherit;
        min-height: 32px;
        padding: 6px 10px;
        text-decoration: none;
      }

      .customer-file-action:hover {
        background: #e7f6f1;
      }

      .customer-file-action.danger {
        background: var(--danger-soft);
        border-color: #ffd0c6;
        color: var(--danger);
      }

      .customer-file-status {
        color: var(--muted);
        font-size: 12px;
      }

      .detail-list {
        display: grid;
        gap: 12px;
        margin: 0;
      }

      .detail-list div {
        display: grid;
        gap: 4px;
      }

      .detail-list dt {
        color: var(--muted);
        font-size: 11px;
      }

      .detail-list dd {
        color: var(--text);
        font-size: 13px;
        margin: 0;
        overflow-wrap: anywhere;
      }

      .detail-actions {
        border-top: 1px solid var(--line);
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-top: 16px;
        padding-top: 16px;
      }

      .management-table .detail-actions {
        border-top: 0;
        margin: 0;
        padding-top: 0;
      }

      .inline-form {
        align-items: center;
        display: inline-flex;
        gap: 6px;
      }

      .inline-form input,
      .inline-form select {
        max-width: 180px;
      }

      .detail-button {
        background: var(--accent);
        border: 0;
        border-radius: 8px;
        box-shadow: 0 8px 18px rgba(18, 140, 126, 0.18);
        color: #fff;
        cursor: pointer;
        min-height: 36px;
        padding: 8px 12px;
      }

      .detail-button.secondary {
        background: var(--surface-soft);
        border: 1px solid var(--line);
        box-shadow: none;
        color: var(--text);
      }

      .detail-form {
        display: grid;
        gap: 12px;
      }

      .detail-field {
        display: grid;
        gap: 5px;
      }

      .detail-field label {
        color: var(--muted);
        font-size: 11px;
      }

      .detail-field input,
      .detail-field select,
      .detail-field textarea {
        background: var(--surface);
        border: 1px solid var(--line);
        border-radius: 8px;
        color: var(--text);
        font: inherit;
        min-height: 34px;
        padding: 7px 9px;
        width: 100%;
      }

      .detail-field textarea {
        min-height: 92px;
        resize: vertical;
      }

      .customer-custom-field-group-title {
        background: #f5fbf8 !important;
        border-style: dashed !important;
        min-height: auto !important;
      }

      .customer-custom-field-group-title label {
        color: var(--accent) !important;
        font-weight: 800;
      }

      .customer-custom-field-readonly-group {
        border-top: 1px solid var(--line);
        padding-top: 10px;
      }

      .customer-custom-field-readonly-group > dt {
        color: var(--accent);
        font-weight: 800;
      }

      #customer-metadata-form {
        grid-template-columns: 1fr;
      }

      #customer-metadata-form .detail-field:has(textarea),
      #customer-metadata-form .customer-profile-field-wide,
      #customer-metadata-form .detail-status,
      #customer-metadata-form .detail-actions {
        grid-column: 1 / -1;
      }

      #customer-metadata-form .detail-actions {
        justify-content: flex-end;
      }

      #customer-metadata-form .customer-overview-form-grid > .detail-field,
      #customer-metadata-form .customer-overview-form-grid > .important-toggle {
        background: #ffffff;
        border: 1px solid #e0e8e5;
        border-radius: 8px;
        display: grid;
        gap: 6px;
        min-height: 70px;
        padding: 10px 12px;
      }

      #customer-metadata-form .customer-overview-form-grid > .important-toggle {
        align-content: center;
        grid-template-columns: auto 1fr;
        min-height: 70px;
      }

      #customer-metadata-form .detail-field label {
        color: var(--muted);
        font-size: 11px;
      }

      #customer-metadata-form .detail-field input,
      #customer-metadata-form .detail-field select,
      #customer-metadata-form .detail-field textarea {
        background: #fbfdfc;
        border-color: #dce7e3;
      }

      #customer-metadata-form .detail-field input:focus,
      #customer-metadata-form .detail-field select:focus,
      #customer-metadata-form .detail-field textarea:focus {
        border-color: #8fd1c6;
        box-shadow: 0 0 0 3px rgba(18, 140, 126, 0.1);
        outline: none;
      }

      #customer-important-form {
        grid-template-columns: 1fr;
      }

      #customer-important-form .detail-status,
      #customer-important-form .detail-actions {
        grid-column: 1 / -1;
      }

      .important-toggle {
        align-items: center;
        display: flex;
        gap: 8px;
        color: var(--text);
        font-size: 13px;
      }

      .important-toggle input {
        width: auto;
      }

      .customer-important-card {
        align-items: center;
        background: #f8faf9;
        border: 1px solid #e1e6e3;
        border-radius: 999px;
        display: inline-flex;
        gap: 10px;
        min-height: 36px;
        padding: 5px 8px 5px 11px;
        width: fit-content;
      }

      .customer-important-card:has(input:checked) {
        background: #fff7e8;
        border-color: #eccb91;
      }

      .customer-important-main {
        display: inline-flex;
        gap: 6px;
      }

      .customer-important-main strong {
        color: var(--text);
        font-size: 13px;
      }

      .customer-important-main span {
        color: var(--muted);
        font-size: 12px;
      }

      .customer-important-switch {
        align-items: center;
        color: var(--muted-strong);
        cursor: pointer;
        display: inline-flex;
        flex: 0 0 auto;
        font-size: 13px;
        font-weight: 700;
        gap: 8px;
      }

      .customer-important-switch input {
        appearance: none;
        background: #dfe7e3;
        border: 1px solid #c8d3ce;
        border-radius: 999px;
        cursor: pointer;
        height: 20px;
        margin: 0;
        padding: 0;
        position: relative;
        transition: background 140ms ease, border-color 140ms ease;
        width: 36px;
      }

      .customer-important-switch input::before {
        background: #ffffff;
        border-radius: 50%;
        box-shadow: 0 2px 6px rgba(34, 48, 42, 0.2);
        content: "";
        height: 14px;
        left: 2px;
        position: absolute;
        top: 2px;
        transition: transform 140ms ease;
        width: 14px;
      }

      .customer-important-switch input:checked {
        background: #f6c766;
        border-color: #d99a2b;
      }

      .customer-important-switch input:checked::before {
        transform: translateX(16px);
      }

      .customer-important-state {
        background: rgba(255, 255, 255, 0.72);
        border-radius: 999px;
        color: var(--muted-strong);
        font-size: 12px;
        font-weight: 700;
        line-height: 1;
        padding: 4px 7px;
      }

      .customer-important-status {
        color: var(--muted);
        font-size: 12px;
        min-height: 0;
        padding-right: 2px;
      }

      .customer-label-picker {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
      }

      .customer-label-option {
        align-items: center;
        background: #f8faf9;
        border: 1px solid #e1e6e3;
        border-radius: 999px;
        color: var(--muted-strong);
        cursor: pointer;
        display: inline-flex;
        font-size: 12px;
        gap: 6px;
        min-height: 30px;
        padding: 6px 10px;
      }

      .customer-label-option:has(input:checked) {
        background: var(--accent-soft);
        border-color: var(--accent);
        color: var(--accent-strong);
      }

      .customer-label-option input {
        margin: 0;
        width: auto;
      }

      .detail-status {
        color: var(--muted);
        font-size: 12px;
        min-height: 18px;
      }

      .customer-comments {
        display: grid;
        gap: 12px;
      }

      .customer-followups {
        display: grid;
        gap: 12px;
      }

      .followup-form {
        display: grid;
        gap: 10px;
      }

      .followup-grid {
        display: grid;
        gap: 10px;
        grid-template-columns: minmax(150px, 0.32fr) minmax(180px, 0.68fr);
      }

      .comment-list {
        display: grid;
        gap: 12px;
      }

      .comment-item {
        --comment-accent: var(--accent);
        --comment-soft: var(--accent-soft);
        background: linear-gradient(90deg, var(--comment-soft), rgba(255, 255, 255, 0) 36px), var(--surface);
        border: 1px solid var(--line);
        border-left: 4px solid var(--comment-accent);
        border-radius: 8px;
        box-shadow: 0 8px 20px rgba(34, 48, 42, 0.06);
        display: grid;
        gap: 10px;
        padding: 12px 14px;
      }

      .comment-item.reply {
        background: var(--surface);
        border-left-width: 3px;
        box-shadow: none;
        margin-top: 8px;
      }

      .comment-tone-0 {
        --comment-accent: #128c7e;
        --comment-soft: #dff2ee;
      }

      .comment-tone-1 {
        --comment-accent: #2563eb;
        --comment-soft: #e7efff;
      }

      .comment-tone-2 {
        --comment-accent: #7c3aed;
        --comment-soft: #f0eaff;
      }

      .comment-tone-3 {
        --comment-accent: #c2410c;
        --comment-soft: #fff1e8;
      }

      .comment-tone-4 {
        --comment-accent: #0f766e;
        --comment-soft: #e2f5f2;
      }

      .comment-tone-5 {
        --comment-accent: #be123c;
        --comment-soft: #ffe7ee;
      }

      .comment-tone-6 {
        --comment-accent: #4d7c0f;
        --comment-soft: #edf7dc;
      }

      .comment-tone-7 {
        --comment-accent: #6d5d2e;
        --comment-soft: #f3efe4;
      }

      .comment-head {
        align-items: center;
        display: flex;
        gap: 10px;
        justify-content: space-between;
        min-width: 0;
      }

      .comment-author {
        align-items: center;
        display: flex;
        gap: 9px;
        min-width: 0;
      }

      .comment-avatar {
        align-items: center;
        background: var(--comment-accent);
        border-radius: 8px;
        color: #fff;
        display: inline-flex;
        flex: 0 0 auto;
        font-size: 12px;
        font-weight: 700;
        height: 32px;
        justify-content: center;
        width: 32px;
      }

      .comment-author-main {
        display: grid;
        gap: 3px;
        min-width: 0;
      }

      .comment-meta {
        color: var(--muted);
        display: flex;
        flex-wrap: wrap;
        font-size: 12px;
        gap: 8px;
      }

      .comment-user {
        color: var(--text);
        font-size: 13px;
        font-weight: 700;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .comment-role {
        background: var(--comment-soft);
        border-radius: 999px;
        color: var(--comment-accent);
        font-size: 11px;
        font-weight: 700;
        padding: 2px 8px;
      }

      .comment-content {
        color: var(--text);
        font-size: 13px;
        line-height: 1.5;
        overflow-wrap: anywhere;
        white-space: pre-wrap;
      }

      .comment-replies,
      .comment-reply-box {
        border-top: 1px solid var(--line);
        display: grid;
        gap: 8px;
        padding-top: 8px;
      }

      .comment-replies summary,
      .comment-reply-box summary {
        color: var(--comment-accent);
        cursor: pointer;
        font-size: 12px;
        font-weight: 700;
        list-style: none;
        width: max-content;
      }

      .comment-replies summary::-webkit-details-marker,
      .comment-reply-box summary::-webkit-details-marker {
        display: none;
      }

      .comment-replies summary::before,
      .comment-reply-box summary::before {
        content: '+';
        display: inline-block;
        margin-right: 6px;
      }

      .comment-replies[open] summary::before,
      .comment-reply-box[open] summary::before {
        content: '-';
      }

      .comment-reply-list {
        display: grid;
        gap: 8px;
        padding-left: 12px;
      }

      .comment-empty,
      .comment-permission {
        background: var(--surface-soft);
        border: 1px solid var(--line);
        border-radius: 8px;
        color: var(--muted);
        font-size: 12px;
        padding: 10px;
      }

      .comments-inbox-view {
        background: var(--surface);
        display: grid;
        grid-template-rows: auto minmax(0, 1fr);
        min-height: 0;
        overflow: hidden;
      }

      .comments-inbox-body {
        align-content: start;
        display: grid;
        gap: 12px;
        min-height: 0;
        overflow: auto;
        padding: 16px 18px;
      }

      .comments-inbox-list {
        align-content: start;
        align-items: start;
        display: grid;
        gap: 12px;
        margin: 0 auto;
        max-width: 1180px;
        width: 100%;
      }

      .comments-inbox-item {
        background: var(--surface);
        border: 1px solid var(--line);
        border-left: 4px solid var(--comment-accent, var(--accent));
        border-radius: 8px;
        box-shadow: 0 8px 20px rgba(34, 48, 42, 0.05);
        display: grid;
        gap: 10px;
        height: max-content;
        padding: 14px;
      }

      .comments-inbox-item.unread {
        background: linear-gradient(90deg, var(--comment-soft, var(--accent-soft)), rgba(255, 255, 255, 0) 42px),
          var(--surface);
      }

      .comments-inbox-head {
        align-items: start;
        display: flex;
        gap: 12px;
        justify-content: space-between;
        min-width: 0;
      }

      .comments-inbox-title {
        display: grid;
        gap: 4px;
        min-width: 0;
      }

      .comments-inbox-title strong {
        color: var(--text);
        font-size: 14px;
      }

      .comments-inbox-meta {
        color: var(--muted);
        display: flex;
        flex-wrap: wrap;
        font-size: 12px;
        gap: 8px;
      }

      .comments-inbox-content {
        color: var(--text);
        font-size: 13px;
        line-height: 1.5;
        overflow-wrap: anywhere;
        white-space: pre-wrap;
      }

      .comments-inbox-actions {
        align-items: center;
        border-top: 1px solid var(--line);
        display: flex;
        justify-content: space-between;
        padding-top: 10px;
      }

      .comment-read-dot {
        background: var(--accent);
        border-radius: 999px;
        display: inline-block;
        height: 8px;
        width: 8px;
      }

      .comment-form {
        display: grid;
        gap: 8px;
      }

      .comment-compose {
        background: var(--surface);
        border: 1px solid var(--line);
        border-radius: 8px;
        box-shadow: 0 8px 20px rgba(34, 48, 42, 0.05);
        padding: 12px;
      }

      .comment-reply-form {
        background: var(--surface-soft);
        border: 1px solid var(--line);
        border-radius: 8px;
        padding: 10px;
      }

      .comment-form textarea {
        background: var(--surface);
        border: 1px solid var(--line);
        border-radius: 8px;
        color: var(--text);
        font: inherit;
        min-height: 86px;
        padding: 7px 9px;
        resize: vertical;
        width: 100%;
      }

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

      .comment-status {
        color: var(--muted);
        font-size: 12px;
        min-height: 18px;
      }

      .topbar {
        align-items: center;
        background: rgba(255, 255, 255, 0.9);
        backdrop-filter: blur(16px);
        border-bottom: 1px solid rgba(198, 210, 204, 0.8);
        box-shadow: 0 10px 28px rgba(31, 46, 40, 0.06);
        display: flex;
        gap: 18px;
        justify-content: space-between;
        min-width: 0;
        overflow: visible;
        padding: 14px 18px;
        position: relative;
        z-index: 1000;
      }

      .topbar-main {
        align-items: center;
        display: flex;
        flex-wrap: wrap;
        gap: 18px;
        min-width: 0;
      }

      .brand {
        min-width: 0;
      }

      .brand h1 {
        font-size: 20px;
        line-height: 1.2;
        margin: 0;
      }

      .view-nav {
        align-items: center;
        background: rgba(246, 248, 247, 0.72);
        border: 1px solid rgba(198, 210, 204, 0.88);
        border-radius: 12px;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86);
        display: inline-flex;
        flex-wrap: wrap;
        gap: 4px;
        padding: 3px;
      }

      .view-button {
        background: transparent;
        border: 0;
        border-radius: 9px;
        color: var(--muted-strong);
        cursor: pointer;
        min-height: 30px;
        padding: 5px 12px;
        transition:
          background 160ms ease,
          box-shadow 160ms ease,
          color 160ms ease,
          transform 160ms ease;
        white-space: nowrap;
      }

      .view-button:hover {
        background: rgba(255, 255, 255, 0.74);
        color: var(--text);
      }

      .view-button.active {
        background: var(--surface);
        box-shadow: 0 8px 22px rgba(34, 48, 42, 0.1);
        color: var(--text);
        font-weight: 600;
        transform: translateY(-1px);
      }

      .nav-badge {
        align-items: center;
        background: var(--accent);
        border-radius: 999px;
        color: #fff;
        display: inline-flex;
        font-size: 11px;
        font-weight: 700;
        justify-content: center;
        line-height: 1;
        margin-left: 4px;
        min-width: 18px;
        padding: 3px 5px;
      }

      .brand-meta {
        color: var(--muted);
        font-size: 12px;
        margin-top: 4px;
      }

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

      .topbar-tools {
        align-items: center;
        display: flex;
        flex: 0 0 auto;
        gap: 10px;
        justify-content: flex-end;
        min-width: 0;
        position: relative;
        z-index: 1001;
      }

      .topbar-tools[hidden] {
        display: none;
      }

      #logout-button {
        display: none !important;
      }

      .notification-wrap,
      .account-menu-wrap {
        position: relative;
        z-index: 1002;
      }

      .topbar-icon-button {
        align-items: center;
        background: #fff;
        border: 1px solid rgba(198, 210, 204, 0.86);
        border-radius: 999px;
        box-shadow: 0 8px 20px rgba(34, 48, 42, 0.06);
        color: #26342f;
        cursor: pointer;
        display: inline-flex;
        height: 38px;
        justify-content: center;
        min-width: 38px;
        position: relative;
        transition:
          background 160ms ease,
          border-color 160ms ease,
          box-shadow 160ms ease,
          transform 160ms ease;
      }

      .topbar-icon-button:hover,
      .topbar-icon-button.active {
        background: #f4faf7;
        border-color: rgba(18, 140, 126, 0.34);
        box-shadow: 0 12px 24px rgba(18, 140, 126, 0.12);
        transform: translateY(-1px);
      }

      .bell-icon {
        border: 2px solid currentColor;
        border-bottom: 0;
        border-radius: 12px 12px 5px 5px;
        display: inline-block;
        height: 16px;
        position: relative;
        width: 15px;
      }

      .bell-icon::before {
        background: currentColor;
        border-radius: 999px;
        content: "";
        height: 4px;
        left: 50%;
        position: absolute;
        top: -5px;
        transform: translateX(-50%);
        width: 4px;
      }

      .bell-icon::after {
        background: currentColor;
        border-radius: 999px;
        bottom: -5px;
        content: "";
        height: 4px;
        left: 50%;
        position: absolute;
        transform: translateX(-50%);
        width: 7px;
      }

      .notification-badge {
        align-items: center;
        background: #e53935;
        border: 2px solid #fff;
        border-radius: 999px;
        color: #fff;
        display: inline-flex;
        font-size: 10px;
        font-weight: 800;
        height: 18px;
        justify-content: center;
        min-width: 18px;
        padding: 0 5px;
        position: absolute;
        right: -5px;
        top: -5px;
      }

      .notification-badge[hidden] {
        display: none;
      }

      .account-menu-button {
        align-items: center;
        background: #fff;
        border: 1px solid rgba(198, 210, 204, 0.86);
        border-radius: 999px;
        box-shadow: 0 8px 20px rgba(34, 48, 42, 0.06);
        color: #18241f;
        cursor: pointer;
        display: grid;
        gap: 9px;
        grid-template-columns: 34px minmax(88px, auto) 12px;
        min-height: 40px;
        min-width: 0;
        padding: 3px 11px 3px 3px;
        transition:
          background 160ms ease,
          border-color 160ms ease,
          box-shadow 160ms ease,
          transform 160ms ease;
      }

      .account-menu-button:hover,
      .account-menu-button.active {
        background: #f4faf7;
        border-color: rgba(18, 140, 126, 0.34);
        box-shadow: 0 12px 24px rgba(18, 140, 126, 0.12);
        transform: translateY(-1px);
      }

      .current-user-avatar,
      .notification-item-avatar {
        align-items: center;
        background: linear-gradient(135deg, #0f766e, #3f8f6b);
        border-radius: 50%;
        color: #fff;
        display: inline-flex;
        font-size: 12px;
        font-weight: 900;
        height: 34px;
        justify-content: center;
        width: 34px;
      }

      .current-user-meta {
        display: grid;
        gap: 1px;
        min-width: 0;
        text-align: left;
      }

      .current-user-name,
      .current-user-role {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .current-user-name {
        font-size: 13px;
        font-weight: 800;
        line-height: 1.2;
      }

      .current-user-role {
        color: #6b7973;
        font-size: 11px;
        line-height: 1.2;
      }

      .menu-caret {
        color: #6b7973;
        font-size: 12px;
      }

      .notification-panel,
      .account-menu {
        background: #fff;
        border: 1px solid rgba(198, 210, 204, 0.9);
        border-radius: 12px;
        box-shadow: 0 22px 56px rgba(21, 30, 26, 0.18);
        min-width: 280px;
        padding: 10px;
        position: absolute;
        right: 0;
        top: calc(100% + 10px);
        z-index: 1003;
      }

      .notification-panel[hidden],
      .account-menu[hidden] {
        display: none;
      }

      .notification-panel-head,
      .account-menu-head {
        border-bottom: 1px solid #edf2ef;
        display: grid;
        gap: 3px;
        padding: 8px 8px 10px;
      }

      .notification-panel-head strong,
      .account-menu-head strong {
        font-size: 14px;
        line-height: 1.25;
      }

      .notification-panel-head span,
      .account-menu-head span {
        color: var(--muted);
        font-size: 12px;
      }

      .notification-list {
        display: grid;
        gap: 6px;
        padding-top: 8px;
      }

      .notification-item {
        align-items: start;
        background: #f8fbfa;
        border: 1px solid #edf2ef;
        border-radius: 8px;
        display: grid;
        gap: 9px;
        grid-template-columns: 32px minmax(0, 1fr);
        min-width: 0;
        padding: 9px;
      }

      .notification-item.system-alert {
        background: #fff7f6;
        border-color: #f1c1bb;
      }

      .notification-item.system-alert .notification-item-avatar {
        background: #d6453d;
      }

      .notification-item.system-alert .notification-item-main span {
        white-space: normal;
      }

      .notification-item.is-read {
        background: #fbfcfb;
        border-color: #edf2ef;
        opacity: 0.68;
      }

      .notification-item-avatar {
        font-size: 11px;
        height: 32px;
        width: 32px;
      }

      .notification-item-main {
        display: grid;
        gap: 3px;
        min-width: 0;
      }

      .notification-item-main strong,
      .notification-item-main span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .notification-item-main strong {
        font-size: 12px;
      }

      .notification-item-main span {
        color: var(--muted);
        font-size: 11px;
      }

      .notification-item-head,
      .notification-item-actions {
        align-items: center;
        display: flex;
        gap: 8px;
        justify-content: space-between;
        min-width: 0;
      }

      .notification-source,
      .notification-read-state {
        color: var(--muted);
        font-size: 11px;
        font-weight: 700;
      }

      .notification-detail {
        color: var(--muted-strong);
        display: grid;
        font-size: 11px;
        gap: 2px;
        line-height: 1.45;
      }

      .notification-action-button,
      .notification-panel-action {
        background: transparent;
        border: 0;
        border-radius: 6px;
        color: #0b6f62;
        cursor: pointer;
        font: inherit;
        font-size: 11px;
        font-weight: 800;
        padding: 4px 0;
      }

      .notification-action-button:hover,
      .notification-panel-action:hover {
        color: #084f47;
        text-decoration: underline;
      }

      .notification-panel-action[hidden] {
        display: none;
      }

      .notification-empty {
        color: var(--muted);
        font-size: 13px;
        padding: 18px 8px;
        text-align: center;
      }

      .account-menu-row {
        align-items: center;
        background: transparent;
        border: 0;
        border-radius: 8px;
        color: #26342f;
        display: flex;
        font: inherit;
        font-size: 13px;
        justify-content: space-between;
        min-height: 36px;
        padding: 8px;
        text-align: left;
        width: 100%;
      }

      button.account-menu-row {
        cursor: pointer;
      }

      button.account-menu-row:hover {
        background: #f1f7f4;
        color: var(--accent);
      }

      .pill {
        align-items: center;
        background: var(--surface-soft);
        border: 1px solid var(--line);
        border-radius: 999px;
        color: var(--muted-strong);
        display: inline-flex;
        font-size: 12px;
        gap: 7px;
        min-height: 30px;
        padding: 6px 10px;
      }

      .pill.ok {
        background: var(--ok-soft);
        border-color: #a9d9bb;
        color: var(--ok);
      }

      .pill.warn {
        background: var(--warning-soft);
        border-color: #eccb91;
        color: var(--warning);
      }

      .pill.error {
        background: var(--danger-soft);
        border-color: #f1b7ad;
        color: var(--danger);
      }

      .dot {
        border-radius: 999px;
        display: inline-block;
        height: 8px;
        width: 8px;
      }

      .dot.ok {
        background: var(--ok);
      }

      .dot.warn {
        background: var(--warning);
      }

      .dot.error {
        background: var(--danger);
      }

      .layout {
        --account-column-width: 296px;
        --conversation-min-width: 320px;
        --conversation-width: clamp(360px, 30vw, 440px);
        --resizer-width: 10px;
        gap: 0;
        display: grid;
        grid-template-columns:
          var(--account-column-width)
          minmax(var(--conversation-min-width), var(--conversation-width))
          var(--resizer-width)
          minmax(0, 1fr);
        min-height: 0;
        overflow: hidden;
        position: relative;
        isolation: isolate;
        z-index: 1;
      }

      .layout.accounts-hidden {
        --account-column-width: 66px;
      }

      .app[data-role="sales"] .layout {
        --conversation-min-width: 320px;
        --conversation-width: clamp(360px, 30vw, 440px);
        grid-template-columns:
          var(--account-column-width)
          minmax(var(--conversation-min-width), var(--conversation-width))
          var(--resizer-width)
          minmax(0, 1fr);
      }

      .app[data-role="sales"] .account-panel {
        display: grid;
      }

      .app[data-role="sales"] .context-bar {
        display: none;
      }

      .layout.sales-only {
        --conversation-min-width: 380px;
        --conversation-width: clamp(430px, 34vw, 560px);
        grid-template-columns:
          minmax(var(--conversation-min-width), var(--conversation-width))
          var(--resizer-width)
          minmax(0, 1fr);
      }

      .layout.sales-only .account-panel,
      .layout.sales-only .context-bar {
        display: none;
      }

      .panel {
        background: rgba(255, 255, 255, 0.96);
        border-right: 1px solid var(--line);
        display: grid;
        grid-template-rows: auto minmax(0, 1fr);
        min-width: 0;
        min-height: 0;
      }

      .panel.chat-panel {
        border-right: 0;
        grid-template-rows: auto minmax(0, 1fr) auto;
        overflow: hidden;
        position: relative;
      }

      .conversation-panel {
        background: #ffffff;
        box-shadow: 10px 0 30px rgba(31, 46, 40, 0.07);
        grid-template-rows: auto auto auto minmax(0, 1fr);
        z-index: 2;
      }

      .conversation-resizer {
        align-items: center;
        background: linear-gradient(90deg, rgba(18, 140, 126, 0.04), rgba(255, 255, 255, 0.86));
        border-left: 1px solid rgba(205, 216, 211, 0.9);
        border-right: 1px solid rgba(205, 216, 211, 0.9);
        cursor: col-resize;
        display: flex;
        justify-content: center;
        min-height: 0;
        min-width: var(--resizer-width);
        outline: none;
        position: relative;
        touch-action: none;
        transition:
          background 160ms ease,
          box-shadow 160ms ease,
          border-color 160ms ease;
        z-index: 5;
      }

      .conversation-resizer::before {
        background: rgba(18, 140, 126, 0.34);
        border-radius: 999px;
        content: "";
        height: 54px;
        opacity: 0.55;
        width: 3px;
      }

      .conversation-resizer:hover,
      .conversation-resizer:focus-visible,
      .layout.is-resizing .conversation-resizer {
        background: linear-gradient(90deg, rgba(18, 140, 126, 0.1), rgba(255, 255, 255, 0.98));
        border-color: rgba(18, 140, 126, 0.28);
        box-shadow: 0 0 0 3px rgba(18, 140, 126, 0.08);
      }

      .conversation-resizer:hover::before,
      .conversation-resizer:focus-visible::before,
      .layout.is-resizing .conversation-resizer::before {
        opacity: 1;
      }

      .layout.is-resizing,
      .layout.is-resizing * {
        cursor: col-resize;
        user-select: none;
      }

      .panel-head {
        align-items: center;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(251, 252, 251, 0.94));
        border-bottom: 1px solid var(--line);
        display: flex;
        gap: 12px;
        justify-content: space-between;
        min-width: 0;
        padding: 14px 16px;
      }

      .panel-title {
        flex: 1 1 auto;
        min-width: 0;
      }

      .panel-title h2 {
        font-size: 14px;
        line-height: 1.25;
        margin: 0;
      }

      .panel-title p {
        color: var(--muted);
        font-size: 12px;
        margin: 4px 0 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .conversation-head {
        align-items: flex-start;
        background: #fff;
        display: flex;
        gap: 12px;
        min-height: 76px;
        padding: 12px 14px;
      }

      .conversation-head .panel-title h2 {
        font-size: 15px;
        letter-spacing: 0;
      }

      .conversation-head .panel-title p {
        color: #708078;
        font-size: 12px;
        margin-top: 4px;
      }

      .conversation-head .count {
        background: #f7faf9;
        height: 28px;
        min-width: 0;
        justify-content: center;
      }

      .conversation-instance-summary {
        align-items: center;
        display: grid;
        gap: 10px;
        grid-template-columns: 38px minmax(0, 1fr);
        min-width: 0;
      }

      .instance-mini-avatar {
        align-items: center;
        background: linear-gradient(135deg, #0f766e, #3f8f6b);
        border-radius: 12px;
        color: #fff;
        display: inline-flex;
        font-size: 12px;
        font-weight: 900;
        height: 38px;
        justify-content: center;
        width: 38px;
      }

      .conversation-summary-meta {
        align-items: flex-end;
        display: flex;
        flex: 0 0 auto;
        flex-wrap: wrap;
        gap: 6px;
        justify-content: flex-end;
        max-width: 150px;
      }

      .conversation-summary-meta .count {
        color: #50615a;
        font-size: 11px;
        height: 24px;
        padding: 0 8px;
      }

      .count {
        align-items: center;
        background: var(--surface-soft);
        border: 1px solid var(--line);
        border-radius: 999px;
        color: var(--muted-strong);
        display: inline-flex;
        flex: 0 0 auto;
        font-size: 12px;
        gap: 6px;
        height: 28px;
        padding: 0 10px;
      }

      .count.ok {
        background: var(--ok-soft);
        border-color: #a9d9bb;
        color: var(--ok);
      }

      .count.warn {
        background: var(--warning-soft);
        border-color: #eccb91;
        color: var(--warning);
      }

      .count.error {
        background: var(--danger-soft);
        border-color: #f1b7ad;
        color: var(--danger);
      }

      .panel-actions {
        align-items: center;
        display: flex;
        flex: 0 0 auto;
        gap: 8px;
      }

      .icon-button {
        align-items: center;
        background: var(--surface-soft);
        border: 1px solid var(--line);
        border-radius: 8px;
        color: var(--muted-strong);
        cursor: pointer;
        display: inline-flex;
        font-size: 13px;
        height: 30px;
        justify-content: center;
        min-width: 30px;
        padding: 0 9px;
        transition:
          background 160ms ease,
          border-color 160ms ease,
          box-shadow 160ms ease,
          color 160ms ease,
          transform 160ms ease;
      }

      .icon-button:hover {
        background: #fff;
        border-color: var(--line-strong);
        box-shadow: 0 8px 18px rgba(34, 48, 42, 0.09);
        color: var(--text);
        transform: translateY(-1px);
      }

      .icon-button.flat {
        background: transparent;
        border-color: transparent;
        border-radius: 999px;
        color: #26322e;
        font-size: 18px;
        height: 36px;
        min-width: 36px;
        padding: 0;
      }

      .icon-button.flat:hover,
      .icon-button.flat.active {
        background: #f0f2f1;
      }

      .conversation-search-wrap {
        background: rgba(255, 255, 255, 0.96);
        border-bottom: 1px solid rgba(216, 223, 220, 0.66);
        padding: 9px 14px;
      }

      .conversation-search {
        align-items: center;
        background: linear-gradient(180deg, #f4f7f6, #edf1ef);
        border-radius: 999px;
        color: var(--muted);
        display: grid;
        gap: 8px;
        grid-template-columns: 18px minmax(0, 1fr);
        min-height: 34px;
        padding: 0 13px;
        transition:
          background 180ms ease,
          box-shadow 180ms ease,
          transform 180ms ease;
      }

      .conversation-search:focus-within {
        background: #fff;
        box-shadow: 0 0 0 3px rgba(18, 140, 126, 0.12), 0 12px 28px rgba(34, 48, 42, 0.08);
        transform: translateY(-1px);
      }

      .conversation-search input {
        background: transparent;
        border: 0;
        color: var(--text);
        font: inherit;
        min-width: 0;
        outline: none;
      }

      .conversation-search input::placeholder {
        color: #8a9691;
      }

      .conversation-filters {
        align-items: center;
        background: rgba(255, 255, 255, 0.96);
        border-bottom: 1px solid var(--line);
        display: grid;
        gap: 8px;
        grid-template-columns: minmax(0, 1fr) auto;
        min-height: 48px;
        min-width: 0;
        overflow: visible;
        padding: 8px 14px 10px;
        position: relative;
      }

      .filter-chip-group {
        align-items: center;
        display: flex;
        flex-wrap: nowrap;
        gap: 6px;
        min-width: 0;
        overflow: hidden;
      }

      .filter-pill {
        align-items: center;
        background: #fff;
        border: 1px solid #d8e3df;
        border-radius: 999px;
        color: #66756f;
        cursor: pointer;
        display: inline-flex;
        flex: 0 0 auto;
        font-size: 11.5px;
        gap: 7px;
        height: 28px;
        padding: 0 10px;
        white-space: nowrap;
        transition:
          background 160ms ease,
          border-color 160ms ease,
          box-shadow 160ms ease,
          color 160ms ease,
          transform 160ms ease;
      }

      .filter-pill:hover {
        background: #f8fbfa;
        border-color: #b8c6c0;
        color: #30413a;
        transform: translateY(-1px);
      }

      .filter-pill.active {
        background: #e7f5ec;
        border-color: #128c7e;
        box-shadow: 0 6px 14px rgba(18, 140, 126, 0.1);
        color: #075e54;
        font-weight: 800;
        transform: translateY(-1px);
      }

      .filter-menu-wrap,
      .chat-menu-wrap {
        position: relative;
      }

      .filter-menu-wrap {
        align-items: center;
        background: transparent;
        display: inline-flex;
        flex: 0 0 auto;
        margin-left: 0;
        padding-left: 0;
        position: relative;
        justify-self: end;
        z-index: 4;
      }

      #conversation-more-filter {
        justify-content: center;
        min-width: 70px;
      }

      .wa-menu {
        background: #fff;
        border: 1px solid rgba(27, 39, 34, 0.1);
        border-radius: 8px;
        box-shadow: 0 16px 40px rgba(21, 30, 26, 0.18);
        display: grid;
        gap: 2px;
        padding: 8px;
        position: absolute;
        transform-origin: top right;
        animation: menu-pop 130ms ease-out;
        z-index: 15;
      }

      .wa-menu[hidden] {
        display: none;
      }

      .filter-menu {
        max-height: min(360px, calc(100vh - 32px));
        min-width: 216px;
        overflow-y: auto;
        position: fixed;
      }

      .wa-menu-button {
        align-items: center;
        background: transparent;
        border: 0;
        border-radius: 6px;
        color: var(--text);
        cursor: pointer;
        display: grid;
        font: inherit;
        font-size: 14px;
        gap: 10px;
        grid-template-columns: 18px minmax(0, 1fr) 18px;
        min-height: 34px;
        padding: 7px 10px;
        text-align: left;
        width: 100%;
      }

      .wa-menu-button:hover,
      .wa-menu-button.active {
        background: #f1f3f2;
      }

      .wa-menu-separator {
        border-top: 1px solid var(--line);
        margin: 6px 2px;
      }

      .context-bar {
        align-items: center;
        background: #fbfcfb;
        border-bottom: 1px solid var(--line);
        display: none;
        gap: 10px;
        min-height: 42px;
        padding: 8px 14px;
      }

      .layout.accounts-hidden .context-bar {
        display: none;
      }

      .app[data-role="sales"] .layout.accounts-hidden .context-bar {
        display: none;
      }

      .layout.accounts-hidden .account-panel .panel-head {
        justify-content: center;
        min-height: 58px;
        padding: 8px;
      }

      .layout.accounts-hidden .account-panel .panel-title,
      .layout.accounts-hidden .account-panel .count {
        display: none;
      }

      .layout.accounts-hidden .account-panel .panel-actions {
        justify-content: center;
      }

      .layout.accounts-hidden .account-panel .icon-button {
        border-radius: 999px;
        font-size: 17px;
        height: 34px;
        min-width: 34px;
        padding: 0;
        width: 34px;
      }

      .layout.accounts-hidden [data-sales-wa-create-panel] {
        display: none;
      }

      .context-name {
        font-size: 13px;
        font-weight: 800;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .context-meta {
        color: var(--muted);
        font-size: 12px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .scroll {
        min-height: 0;
        overflow-y: auto;
      }

      .scroll,
      .chat-body,
      .conversation-filters,
      .tag-menu {
        scrollbar-color: rgba(99, 116, 108, 0.38) transparent;
        scrollbar-width: thin;
      }

      .scroll::-webkit-scrollbar,
      .chat-body::-webkit-scrollbar,
      .conversation-filters::-webkit-scrollbar,
      .tag-menu::-webkit-scrollbar {
        height: 8px;
        width: 8px;
      }

      .scroll::-webkit-scrollbar-thumb,
      .chat-body::-webkit-scrollbar-thumb,
      .conversation-filters::-webkit-scrollbar-thumb,
      .tag-menu::-webkit-scrollbar-thumb {
        background: rgba(99, 116, 108, 0.32);
        border-radius: 999px;
      }

      .list-button {
        background: transparent;
        border: 0;
        border-bottom: 1px solid rgba(216, 223, 220, 0.76);
        color: inherit;
        cursor: pointer;
        display: block;
        min-width: 0;
        padding: 13px 14px;
        text-align: left;
        transition:
          background 160ms ease,
          box-shadow 160ms ease,
          transform 160ms ease;
        width: 100%;
      }

      .list-button:hover {
        background: linear-gradient(90deg, rgba(18, 140, 126, 0.08), rgba(246, 248, 247, 0.98));
        box-shadow: inset 3px 0 0 rgba(18, 140, 126, 0.25);
      }

      .list-button.active {
        background: var(--accent-soft);
        box-shadow: inset 3px 0 0 var(--accent);
      }

      .account-button {
        min-height: 104px;
        padding: 14px 13px;
        position: relative;
      }

      .sales-wa-create-panel {
        border-bottom: 1px solid rgba(216, 223, 220, 0.76);
        display: grid;
        gap: 10px;
        line-height: 1.35;
        padding: 14px;
      }

      .sales-wa-create-toggle {
        justify-self: start;
        max-width: 100%;
        white-space: normal;
      }

      .sales-wa-create-form {
        align-items: stretch;
        display: grid;
        gap: 10px;
        width: 100%;
      }

      .sales-wa-create-field > span {
        color: var(--muted);
        display: block;
        font-size: 12px;
        margin-bottom: 5px;
      }

      .sales-wa-create-form input {
        max-width: none;
        text-align: left;
      }

      .sales-wa-create-submit {
        justify-self: stretch;
        width: 100%;
      }

      .sales-wa-create-result {
        background: rgba(18, 140, 126, 0.07);
        border: 1px solid rgba(18, 140, 126, 0.16);
        border-radius: 8px;
        color: var(--text);
        display: grid;
        gap: 3px;
        min-width: 0;
        padding: 8px 10px;
      }

      .sales-wa-create-result-name,
      .sales-wa-create-result-instance {
        display: block;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .sales-wa-create-result-name {
        font-weight: 700;
      }

      .sales-wa-create-result-instance {
        color: var(--muted);
        font-size: 12px;
      }

      .account-main {
        display: grid;
        gap: 11px;
        grid-template-columns: 38px minmax(0, 1fr);
        padding-right: 38px;
      }

      .account-icon {
        align-items: center;
        background: linear-gradient(135deg, #0f766e, #4b8f73);
        border: 1px solid rgba(255, 255, 255, 0.8);
        border-radius: 12px;
        color: #fff;
        display: inline-flex;
        font-size: 13px;
        font-weight: 900;
        height: 38px;
        justify-content: center;
        width: 38px;
      }

      .account-details {
        min-width: 0;
      }

      .account-status-corner {
        align-items: center;
        background: rgba(255, 255, 255, 0.74);
        border: 1px solid var(--line);
        border-radius: 999px;
        bottom: 13px;
        color: var(--muted-strong);
        display: inline-flex;
        font-size: 12px;
        gap: 6px;
        min-height: 28px;
        padding: 5px 9px;
        position: absolute;
        right: 12px;
      }

      .account-status-corner.ok {
        background: rgba(230, 245, 236, 0.92);
        border-color: #a9d9bb;
        color: var(--ok);
      }

      .account-status-corner.warn {
        background: rgba(255, 247, 232, 0.94);
        border-color: #eccb91;
        color: var(--warning);
      }

      .account-status-corner.error {
        background: rgba(255, 240, 237, 0.94);
        border-color: #f1b7ad;
        color: var(--danger);
      }

      .layout.accounts-hidden .account-button {
        align-items: center;
        display: flex;
        justify-content: center;
        min-height: 68px;
        padding: 8px 6px;
      }

      .layout.accounts-hidden .account-main {
        display: block;
        padding-right: 0;
      }

      .layout.accounts-hidden .account-details {
        display: none;
      }

      .layout.accounts-hidden .account-icon {
        border-radius: 16px;
        height: 44px;
        width: 44px;
      }

      .layout.accounts-hidden .account-status-corner {
        border-radius: 999px;
        bottom: 13px;
        height: 12px;
        min-height: 12px;
        padding: 0;
        right: 13px;
        width: 12px;
      }

      .layout.accounts-hidden .account-status-corner span:not(.dot) {
        display: none;
      }

      .layout.accounts-hidden .account-status-corner .dot {
        height: 100%;
        width: 100%;
      }

      .conversation-button {
        background: #fff;
        border-bottom: 0;
        display: grid;
        gap: 9px;
        grid-template-columns: 48px minmax(0, 1fr) 54px;
        min-height: 86px;
        padding: 11px 12px;
        position: relative;
        animation: list-rise 220ms ease-out both;
      }

      .conversation-button::after {
        background: linear-gradient(90deg, transparent, rgba(216, 223, 220, 0.86), transparent);
        bottom: 0;
        content: '';
        height: 1px;
        left: 76px;
        position: absolute;
        right: 14px;
      }

      .conversation-button:hover .avatar {
        transform: translateY(-1px);
      }

      .conversation-button.active {
        background: linear-gradient(90deg, rgba(18, 140, 126, 0.13), #f5fbf8 42%, #ffffff);
        box-shadow: inset 4px 0 0 var(--accent);
      }

      .avatar {
        align-items: center;
        background: linear-gradient(135deg, #0f766e, #3f8f6b);
        border: 1px solid rgba(255, 255, 255, 0.72);
        border-radius: 50%;
        color: #fff;
        display: inline-flex;
        font-size: 14px;
        font-weight: 800;
        height: 46px;
        justify-content: center;
        overflow: hidden;
        transition:
          box-shadow 180ms ease,
          transform 180ms ease;
        width: 46px;
      }

      .conversation-button:hover .avatar,
      .chat-profile:hover .avatar {
        box-shadow: 0 10px 22px rgba(18, 140, 126, 0.2);
      }

      .avatar img {
        display: block;
        height: 100%;
        object-fit: cover;
        width: 100%;
      }

      .conversation-main {
        min-width: 0;
      }

      .conversation-side {
        align-items: flex-end;
        color: var(--muted);
        display: flex;
        flex-direction: column;
        gap: 8px;
        min-width: 54px;
      }

      .pin-slot {
        display: none;
      }

      .conversation-button .row-top {
        align-items: flex-start;
      }

      .conversation-button .row-name {
        overflow: hidden;
        overflow-wrap: normal;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .row-top {
        align-items: center;
        display: flex;
        gap: 8px;
        justify-content: space-between;
        min-width: 0;
      }

      .row-name {
        font-size: 14px;
        font-weight: 800;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .row-sub {
        color: var(--muted);
        font-size: 12px;
        margin-top: 5px;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .conversation-info {
        color: var(--muted);
        font-size: 11.5px;
        line-height: 1.35;
        margin-top: 2px;
        overflow: hidden;
        overflow-wrap: anywhere;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .conversation-preview {
        align-items: center;
        color: #66756f;
        display: flex;
        font-size: 13px;
        gap: 4px;
        line-height: 1.35;
        margin-top: 4px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .conversation-preview-text {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .conversation-stage,
      .conversation-tags,
      .chat-title-tags {
        align-items: center;
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
        margin-top: 7px;
        min-width: 0;
      }

      .conversation-stage:empty,
      .conversation-tags:empty,
      .chat-title-tags:empty {
        display: none;
        margin-top: 0;
      }

      .tag-chip {
        align-items: center;
        background: #f8faf9;
        border: 1px solid #e1e6e3;
        border-radius: 999px;
        color: var(--muted-strong);
        display: inline-flex;
        font-size: 11px;
        gap: 5px;
        line-height: 1;
        max-width: 100%;
        min-height: 22px;
        padding: 4px 7px;
      }

      .tag-chip.empty {
        color: #88948f;
      }

      .tag-dot {
        background: var(--tag-color);
        border-radius: 50%;
        display: inline-block;
        flex: 0 0 auto;
        height: 8px;
        width: 8px;
      }

      .pin-slot {
        color: #9aa39f;
        display: none;
        font-size: 14px;
        height: 16px;
        justify-content: center;
        opacity: 0.7;
        width: 16px;
      }

      .conversation-unread {
        align-items: center;
        background: #e53935;
        border-radius: 999px;
        color: #fff;
        display: inline-flex;
        font-size: 11px;
        font-weight: 800;
        height: 19px;
        justify-content: center;
        min-width: 19px;
        padding: 0 6px;
        animation: unread-pulse 1500ms ease-in-out infinite;
      }

      .wa-checks {
        align-items: center;
        color: #8b9691;
        display: inline-flex;
        flex: 0 0 auto;
        font-size: 13px;
        font-weight: 800;
        letter-spacing: -0.12em;
        line-height: 1;
        min-width: 13px;
      }

      .wa-checks.single {
        letter-spacing: 0;
      }

      .wa-checks.read {
        color: var(--wa-blue);
      }

      .wa-checks.failed {
        color: #d9463e;
        letter-spacing: 0;
      }

      .wa-checks.pending {
        color: #8b9691;
        letter-spacing: 0;
      }

      .wa-status-label {
        color: #7a837f;
        display: inline-flex;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0;
        line-height: 1;
        margin-left: 3px;
        white-space: nowrap;
      }

      .wa-status-label.failed,
      .wa-status-label.retrying {
        color: #c7433c;
      }

      .row-meta {
        align-items: center;
        color: var(--muted-strong);
        display: flex;
        flex-wrap: wrap;
        font-size: 12px;
        gap: 8px;
        margin-top: 8px;
      }

      .badge {
        align-items: center;
        background: var(--surface-soft);
        border: 1px solid var(--line);
        border-radius: 999px;
        display: inline-flex;
        gap: 6px;
        line-height: 1;
        padding: 5px 8px;
      }

      .badge.ok {
        background: var(--ok-soft);
        border-color: #a9d9bb;
        color: var(--ok);
      }

      .badge.warn {
        background: var(--warning-soft);
        border-color: #eccb91;
        color: var(--warning);
      }

      .badge.error {
        background: var(--danger-soft);
        border-color: #f1b7ad;
        color: var(--danger);
      }

      .direction {
        color: var(--muted);
        flex: 0 0 auto;
        font-size: 11px;
        text-transform: uppercase;
      }

      .time {
        color: var(--muted);
        flex: 0 0 auto;
        font-size: 12px;
        line-height: 1.15;
        text-align: right;
      }

      .empty,
      .error-state,
      .loading {
        color: var(--muted);
        font-size: 13px;
        line-height: 1.6;
        padding: 18px;
      }

      .error-state {
        background: var(--danger-soft);
        border-bottom: 1px solid #f1b7ad;
        color: var(--danger);
      }

      .chat-body {
        background:
          radial-gradient(circle at 18px 18px, rgba(18, 140, 126, 0.06) 1.4px, transparent 2px),
          radial-gradient(circle at 54px 48px, rgba(115, 132, 124, 0.06) 1px, transparent 2px),
          linear-gradient(#edf5f1, #edf5f1);
        background-size: 78px 78px, 96px 96px, auto;
        animation: chat-bg-drift 28s linear infinite;
        min-height: 0;
        overflow-y: auto;
        padding: 22px 28px;
        scroll-behavior: auto;
      }

      .chat-head {
        align-items: center;
        background: #ffffff;
        backdrop-filter: blur(12px);
        box-shadow: 0 10px 26px rgba(34, 48, 42, 0.05);
        display: grid;
        gap: 12px;
        grid-template-columns: minmax(0, 1fr) minmax(0, auto) max-content;
        min-height: 78px;
        padding: 12px 22px;
        z-index: 1;
      }

      .chat-profile {
        align-items: center;
        display: grid;
        gap: 11px;
        grid-template-columns: 44px minmax(0, 1fr);
        min-width: 0;
      }

      .chat-avatar {
        height: 44px;
        width: 44px;
      }

      .chat-identity {
        min-width: 0;
      }

      .chat-identity h2 {
        font-size: 16px;
        font-weight: 800;
        line-height: 1.25;
        margin: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .chat-identity p {
        color: var(--muted);
        font-size: 12px;
        line-height: 1.35;
        margin: 2px 0 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .chat-title-tags {
        align-content: center;
        display: flex;
        flex-wrap: nowrap;
        gap: 6px;
        justify-content: center;
        margin-top: 0;
        min-width: 0;
        overflow: hidden;
      }

      .chat-title-tags .tag-chip,
      .chat-title-tags .customer-chip {
        flex: 0 1 auto;
        font-size: 11px;
        max-width: 128px;
        min-height: 23px;
        overflow: hidden;
        padding: 4px 8px;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .chat-actions {
        align-items: center;
        display: flex;
        flex: 0 0 auto;
        flex-wrap: nowrap;
        gap: 6px;
        min-width: max-content;
        position: relative;
      }

      .chat-actions .add-list-button,
      .chat-actions .chat-menu-wrap,
      .chat-actions .icon-button {
        flex: 0 0 auto;
      }

      .add-list-button {
        align-items: center;
        background: #fff;
        border: 1px solid var(--line-strong);
        border-radius: 999px;
        color: var(--text);
        cursor: pointer;
        display: inline-flex;
        font-size: 12px;
        font-weight: 700;
        gap: 8px;
        min-height: 34px;
        padding: 0 13px;
        white-space: nowrap;
        transition:
          background 160ms ease,
          border-color 160ms ease,
          box-shadow 160ms ease,
          transform 160ms ease;
      }

      .filter-pill.stage-filter-pill {
        background: #fff;
        border-color: #d8e3df;
        color: #66756f;
      }

      .filter-pill.stage-filter-pill:hover {
        background: #f8fbfa;
        border-color: #b8c6c0;
        color: #30413a;
      }

      .filter-pill.stage-filter-pill.active {
        background: #e7f5ec;
        border-color: #128c7e;
        box-shadow: 0 6px 14px rgba(18, 140, 126, 0.1);
        color: #075e54;
        font-weight: 800;
      }

      .stage-menu-button.active {
        background: var(--stage-bg, #f1f3f2);
        color: var(--stage-strong, var(--text));
      }

      .add-list-button:hover,
      .add-list-button.active {
        background: #f0f2f1;
        border-color: #b8c6c0;
        box-shadow: 0 10px 22px rgba(34, 48, 42, 0.1);
        transform: translateY(-1px);
      }

      .tag-menu {
        max-height: min(440px, 72vh);
        min-width: 286px;
        overflow-y: auto;
        right: 0;
        top: 40px;
      }

      .tag-menu .wa-menu-button {
        grid-template-columns: 18px minmax(0, 1fr) 22px;
        min-height: 40px;
      }

      .tag-check {
        align-items: center;
        border: 2px solid #97a19c;
        border-radius: 4px;
        color: #128c7e;
        display: inline-flex;
        font-size: 13px;
        height: 18px;
        justify-content: center;
        width: 18px;
      }

      .tag-check.checked {
        background: #dff2ee;
        border-color: #128c7e;
      }

      .more-menu {
        min-width: 210px;
        right: 0;
        top: 40px;
      }

      .more-menu .wa-menu-button {
        grid-template-columns: 20px minmax(0, 1fr);
      }

      .chat-actions .count {
        display: none;
      }

      .profile-entry-button {
        background: #128c7e;
        border-color: #128c7e;
        box-shadow: 0 9px 20px rgba(18, 140, 126, 0.16);
        color: #fff;
        max-width: 160px;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .profile-entry-button:hover,
      .profile-entry-button.active {
        background: #08745f;
        border-color: #08745f;
        color: #fff;
      }

      .customer-profile-drawer {
        align-items: stretch;
        background: rgba(19, 32, 27, 0.22);
        display: flex;
        inset: 0;
        justify-content: flex-end;
        position: absolute;
        z-index: 14;
      }

      .customer-profile-drawer[hidden] {
        display: none;
      }

      .customer-profile-panel {
        background: var(--surface);
        border-left: 1px solid var(--line);
        box-shadow: -18px 0 42px rgba(34, 48, 42, 0.16);
        display: grid;
        grid-template-rows: minmax(0, 1fr);
        max-width: 100%;
        width: min(430px, 100%);
      }

      .customer-profile-head {
        align-items: center;
        border-bottom: 1px solid var(--line);
        display: flex;
        gap: 12px;
        justify-content: space-between;
        min-width: 0;
        padding: 15px 18px;
      }

      .customer-profile-title {
        display: grid;
        gap: 3px;
        min-width: 0;
      }

      .customer-profile-title strong {
        font-size: 15px;
        line-height: 1.25;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .customer-profile-title small {
        color: var(--muted);
        font-size: 12px;
      }

      .customer-profile-form {
        display: grid;
        gap: 12px;
        overflow: auto;
        padding: 18px;
      }

      .customer-profile-grid {
        display: grid;
        gap: 12px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .customer-profile-field-wide {
        grid-column: 1 / -1;
      }

      .customer-profile-actions {
        align-items: center;
        display: flex;
        gap: 10px;
        justify-content: flex-end;
      }

      .customer-profile-content {
        background: #f7faf8;
        display: grid;
        gap: 10px;
        min-width: 0;
        overflow: auto;
        overflow-x: hidden;
        padding: 12px;
      }

      .customer-profile-card {
        background: #ffffff;
        border: 1px solid #dce7e3;
        border-radius: 8px;
        box-sizing: border-box;
        box-shadow: 0 10px 26px rgba(34, 48, 42, 0.06);
        display: grid;
        gap: 10px;
        min-width: 0;
        padding: 12px;
      }

      .customer-profile-card.compact {
        gap: 10px;
      }

      .customer-profile-card.followup-focus {
        border-color: rgba(18, 140, 126, 0.35);
        box-shadow: 0 12px 30px rgba(18, 140, 126, 0.1);
      }

      .customer-profile-card.missing-fields {
        background: #fffdf8;
        border-color: #efe2cb;
        box-shadow: none;
      }

      .customer-profile-card.module-entry-card {
        background: #fbfdfc;
        box-shadow: none;
      }

      .customer-profile-modules {
        display: grid;
        gap: 8px;
      }

      .customer-profile-module-button {
        align-items: center;
        background: #f8fbfa;
        border: 1px solid #e0e9e5;
        border-radius: 8px;
        color: #26342f;
        cursor: pointer;
        display: grid;
        font: inherit;
        gap: 8px;
        grid-template-columns: 30px minmax(0, 1fr) auto;
        min-height: 42px;
        padding: 8px 10px;
        text-align: left;
        width: 100%;
      }

      .customer-profile-module-button:hover {
        background: #eef8f4;
        border-color: #bfe1d6;
      }

      .customer-profile-module-icon {
        align-items: center;
        background: #e7f4ef;
        border-radius: 8px;
        color: #0f6f60;
        display: inline-flex;
        font-size: 12px;
        font-weight: 900;
        height: 30px;
        justify-content: center;
        width: 30px;
      }

      .customer-profile-module-copy {
        display: grid;
        gap: 2px;
        min-width: 0;
      }

      .customer-profile-module-copy strong,
      .customer-profile-module-copy span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .customer-profile-module-copy strong {
        font-size: 13px;
      }

      .customer-profile-module-copy span,
      .customer-profile-module-state {
        color: var(--muted);
        font-size: 11px;
      }

      .customer-profile-card-head {
        align-items: flex-start;
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        justify-content: space-between;
        min-width: 0;
      }

      .customer-summary-actions {
        align-items: center;
        display: inline-flex;
        flex: 0 0 auto;
        flex-wrap: wrap;
        gap: 6px;
        justify-content: flex-end;
        min-width: 0;
      }

      .customer-summary-actions .icon-button.flat {
        height: 30px;
        min-width: 30px;
      }

      .customer-profile-card-title {
        display: grid;
        gap: 3px;
        min-width: 0;
      }

      .customer-profile-card-title h3 {
        color: #13201b;
        font-size: 16px;
        font-weight: 800;
        line-height: 1.25;
        margin: 0;
      }

      .customer-profile-card-title p {
        color: #7b8983;
        font-size: 11.5px;
        font-weight: 400;
        line-height: 1.5;
        margin: 0;
      }

      .customer-summary-card {
        border-color: rgba(18, 140, 126, 0.28);
        gap: 9px;
      }

      .customer-summary-main {
        align-items: center;
        display: grid;
        gap: 11px;
        grid-template-columns: auto minmax(0, 1fr);
      }

      .customer-summary-main .avatar {
        height: 42px;
        width: 42px;
      }

      .customer-summary-name {
        align-items: center;
        display: flex;
        gap: 6px;
        min-width: 0;
      }

      .customer-summary-name strong {
        color: #14201b;
        font-size: 15px;
        font-weight: 800;
        line-height: 1.25;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .customer-summary-name .star {
        color: #f08c00;
        flex: 0 0 auto;
        font-size: 13px;
      }

      .customer-summary-phone {
        color: #75837d;
        font-size: 12px;
        font-weight: 500;
        line-height: 1.35;
        margin-top: 3px;
      }

      .customer-summary-badges,
      .customer-summary-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
      }

      .customer-summary-badges .customer-chip,
      .customer-summary-tags .tag-chip {
        font-size: 11px;
        font-weight: 700;
        min-height: 22px;
        padding: 4px 8px;
      }

      .customer-summary-fields {
        border-top: 1px solid #edf2f0;
        display: grid;
        gap: 10px;
        padding-top: 12px;
      }

      .customer-summary-row {
        align-items: start;
        display: grid;
        gap: 10px;
        grid-template-columns: 96px minmax(0, 1fr);
      }

      .customer-summary-row dt {
        align-self: start;
        background: #eef8f4;
        border-left: 3px solid #128c7e;
        border-radius: 6px;
        box-sizing: border-box;
        color: #0f6f60;
        font-size: 11.5px;
        font-weight: 750;
        line-height: 1.35;
        min-width: 0;
        padding: 4px 7px 4px 8px;
      }

      .customer-summary-row dd {
        color: #22312b;
        font-size: 13px;
        font-weight: 500;
        line-height: 1.5;
        margin: 0;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .customer-summary-row dd.multiline,
      .customer-overview-text.multiline {
        line-height: 1.62;
        overflow-wrap: anywhere;
        white-space: pre-wrap;
        word-break: break-word;
      }

      .customer-summary-row dd.multiline {
        color: #1d2b25;
        font-size: 13px;
        font-weight: 500;
        max-height: 11.34em;
        overflow: auto;
        text-overflow: clip;
      }

      .customer-overview-text {
        display: inline-block;
        max-width: 100%;
      }

      .customer-profile-card .customer-overview-empty {
        color: #9aa7a1;
        font-weight: 400;
      }

      .profile-secondary-button {
        background: #ffffff;
        border: 1px solid #9ed8cf;
        border-radius: 8px;
        color: var(--accent);
        cursor: pointer;
        flex: 0 0 auto;
        font-size: 12px;
        font-weight: 700;
        min-height: 30px;
        padding: 6px 10px;
      }

      .profile-secondary-button:hover {
        background: var(--accent-soft);
      }

      .profile-primary-button {
        background: #128c7e;
        border: 1px solid #128c7e;
        border-radius: 999px;
        color: #ffffff;
        cursor: pointer;
        flex: 0 0 auto;
        font-size: 12px;
        font-weight: 800;
        min-height: 30px;
        padding: 6px 11px;
      }

      .profile-primary-button:hover {
        background: #08745f;
        border-color: #08745f;
      }

      .profile-missing-list {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        min-width: 0;
      }

      .profile-missing-chip {
        background: #fff6e6;
        border: 1px solid #efd8aa;
        border-radius: 999px;
        color: #8a5a00;
        font-size: 11px;
        line-height: 1.3;
        padding: 5px 8px;
      }

      .profile-field-groups {
        display: grid;
        gap: 12px;
      }

      .profile-field-group {
        display: grid;
        gap: 8px;
      }

      .profile-field-group h4 {
        color: #52615a;
        font-size: 12px;
        font-weight: 700;
        line-height: 1.35;
        margin: 0;
      }

      .profile-card-form {
        display: grid;
        gap: 12px;
      }

      .profile-form-grid {
        display: grid;
        gap: 10px;
        grid-template-columns: 1fr;
        min-width: 0;
      }

      .profile-form-grid.two-col {
        grid-template-columns: repeat(auto-fit, minmax(154px, 1fr));
      }

      .profile-form-grid .detail-field,
      .profile-form-grid .important-toggle {
        background: #fbfdfc;
        border: 1px solid #e2ebe7;
        border-radius: 8px;
        display: grid;
        gap: 6px;
        min-height: 68px;
        min-width: 0;
        padding: 10px;
      }

      .profile-form-grid .important-toggle {
        align-content: center;
        grid-template-columns: auto 1fr;
      }

      .profile-form-grid .customer-profile-field-wide,
      .profile-form-grid .customer-custom-field-group-title {
        grid-column: 1 / -1;
      }

      .profile-form-grid .detail-field label {
        color: #6f7e78;
        font-size: 11.5px;
        font-weight: 600;
        line-height: 1.35;
      }

      .profile-form-grid .detail-field input,
      .profile-form-grid .detail-field select,
      .profile-form-grid .detail-field textarea {
        background: #ffffff;
        border-color: #dce7e3;
        box-sizing: border-box;
        color: #1f2a24;
        font-size: 13px;
        line-height: 1.45;
        max-width: 100%;
        min-width: 0;
        width: 100%;
      }

      .profile-form-grid .customer-tag-dropdown {
        min-width: 0;
        width: 100%;
      }

      .profile-form-grid .customer-tag-dropdown summary {
        box-sizing: border-box;
        color: #1f2a24;
        font-size: 13px;
        font-weight: 600;
        line-height: 1.4;
        width: 100%;
      }

      .profile-form-grid .customer-tag-dropdown-menu {
        box-sizing: border-box;
        left: 0;
        max-width: 100%;
        min-width: 100%;
        right: 0;
        width: auto;
      }

      .profile-form-grid .detail-field .customer-tag-dropdown-option {
        box-sizing: border-box;
        color: #5f6f68;
        font-size: 12.5px;
        font-weight: 650;
        gap: 8px;
        min-height: 32px;
        white-space: normal;
      }

      .profile-form-grid .detail-field .customer-tag-dropdown-option input[type='checkbox'] {
        appearance: auto;
        flex: 0 0 auto;
        height: 14px;
        margin: 0;
        max-width: none;
        min-height: 0;
        min-width: 0;
        padding: 0;
        width: 14px;
      }

      .profile-form-grid .detail-field .customer-tag-dropdown-option .tag-dot {
        flex: 0 0 auto;
      }

      .profile-form-grid .detail-field textarea {
        line-height: 1.58;
        min-height: 82px;
        overflow-wrap: anywhere;
        word-break: break-word;
      }

      .profile-completion-form .profile-form-grid .detail-field {
        background: #fffdf8;
        border-color: #efe2cb;
      }

      .profile-followup-form textarea {
        min-height: 112px;
      }

      .profile-followup-form input,
      .profile-followup-form select,
      .profile-followup-form textarea {
        font-size: 13px;
        line-height: 1.5;
        min-width: 0;
      }

      .profile-followup-form .profile-form-grid.two-col {
        grid-template-columns: repeat(auto-fit, minmax(142px, 1fr));
      }

      .profile-form-actions {
        align-items: center;
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        justify-content: space-between;
      }

      .profile-form-actions .detail-status {
        color: #7b8983;
        font-size: 12px;
        line-height: 1.4;
        flex: 1 1 140px;
      }

      .profile-form-buttons {
        align-items: center;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        justify-content: flex-end;
        min-width: 0;
      }

      .customer-profile-card .detail-button {
        font-size: 12px;
        font-weight: 700;
        line-height: 1.25;
        min-height: 32px;
        padding: 7px 10px;
      }

      .message-row {
        display: flex;
        margin: 0 0 10px;
        animation: bubble-in 180ms ease-out both;
      }

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

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

      .message-row.center {
        justify-content: center;
      }

      .bubble {
        border-radius: 8px;
        box-shadow: 0 1px 1px rgba(18, 28, 24, 0.08), 0 10px 22px rgba(18, 28, 24, 0.045);
        max-width: min(640px, 64%);
        min-width: 132px;
        padding: 9px 10px 7px;
        transition:
          box-shadow 160ms ease,
          transform 160ms ease;
      }

      .bubble:hover {
        box-shadow: 0 1px 1px rgba(18, 28, 24, 0.08), 0 14px 28px rgba(18, 28, 24, 0.07);
        transform: translateY(-1px);
      }

      .message-row.inbound .bubble {
        background: var(--bubble-in);
      }

      .message-row.outbound .bubble {
        background: var(--bubble-out);
      }

      .message-row.center .bubble {
        background: rgba(255, 255, 255, 0.76);
        color: var(--muted);
        font-size: 12px;
        max-width: 82%;
        min-width: 0;
        text-align: center;
      }

      .message-row.audio .bubble {
        max-width: min(390px, 64%);
        min-width: 0;
        padding: 6px 8px 5px;
      }

      .message-row.video .bubble {
        background: #fff;
        max-width: min(450px, 65%);
        min-width: 0;
        padding: 10px 10px 6px;
      }

      .message-text {
        font-size: 14px;
        line-height: 1.48;
        overflow-wrap: anywhere;
        white-space: pre-wrap;
      }

      .message-text:empty {
        display: none;
      }

      .message-media {
        display: block;
        margin-bottom: 7px;
        max-width: min(420px, 100%);
      }

      .message-row.audio .message-media {
        margin-bottom: 0;
        max-width: 100%;
      }

      .message-row.video .message-media {
        margin-bottom: 3px;
        max-width: 100%;
      }

      .message-media img,
      .message-media video {
        border: 1px solid rgba(140, 154, 146, 0.22);
        border-radius: 8px;
        box-shadow: 0 8px 18px rgba(18, 28, 24, 0.08);
        display: block;
        max-height: 360px;
        max-width: 100%;
      }

      .media-preview-button {
        background: transparent;
        border: 0;
        border-radius: 7px;
        color: #fff;
        cursor: zoom-in;
        display: block;
        max-width: 100%;
        overflow: hidden;
        padding: 0;
        position: relative;
        text-align: left;
      }

      .message-row.video .media-preview-button {
        background: #000;
        border-radius: 10px;
        width: min(405px, 100%);
      }

      .message-row.video .media-preview-button.pending {
        cursor: wait;
      }

      .message-row.video .media-preview-button img,
      .message-row.video .message-media video {
        border-radius: 10px;
        max-height: min(70vh, 720px);
        min-height: 220px;
        object-fit: cover;
        width: 100%;
      }

      .message-row.video .media-preview-button img {
        height: min(58vh, 520px);
        max-height: none;
        min-height: 260px;
      }

      .media-preview-placeholder {
        align-items: center;
        background: linear-gradient(180deg, #ff7900 0 42%, #70c8ff 42% 56%, #747f83 56% 70%, #ff7900 70% 100%);
        color: #fff;
        display: flex;
        font-size: 18px;
        font-weight: 800;
        height: min(58vh, 520px);
        justify-content: center;
        min-height: 260px;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.32);
        width: 100%;
      }

      .media-preview-button:hover img,
      .media-preview-button:hover video {
        filter: brightness(0.92);
      }

      .media-open-hint {
        background: linear-gradient(0deg, rgba(17, 27, 33, 0.58), transparent);
        bottom: 0;
        display: flex;
        font-size: 12px;
        font-weight: 700;
        justify-content: flex-end;
        left: 0;
        padding: 24px 10px 8px;
        pointer-events: none;
        position: absolute;
        right: 0;
      }

      .message-row.video .media-open-hint {
        font-size: 16px;
        padding: 84px 16px 14px;
      }

      .wa-audio {
        --audio-progress: 0%;
        align-items: center;
        background: rgba(255, 255, 255, 0.58);
        border-radius: 999px;
        display: grid;
        gap: 8px;
        grid-template-columns: 34px minmax(150px, 1fr) 28px;
        min-height: 48px;
        padding: 6px 8px;
        width: min(330px, 100%);
      }

      .message-row.inbound .wa-audio {
        background: rgba(241, 244, 243, 0.92);
      }

      .message-row.outbound .wa-audio {
        background: rgba(255, 255, 255, 0.74);
      }

      .wa-audio-button,
      .wa-audio-more {
        align-items: center;
        background: transparent;
        border: 0;
        color: #111b21;
        cursor: pointer;
        display: inline-flex;
        justify-content: center;
      }

      .wa-audio-button {
        border-radius: 50%;
        height: 34px;
        width: 34px;
      }

      .wa-audio-button:hover,
      .wa-audio-more:hover {
        background: rgba(17, 27, 33, 0.07);
      }

      .wa-audio-play-icon {
        border-bottom: 9px solid transparent;
        border-left: 14px solid currentColor;
        border-top: 9px solid transparent;
        display: block;
        height: 0;
        margin-left: 3px;
        width: 0;
      }

      .wa-audio.playing .wa-audio-play-icon {
        border: 0;
        height: 18px;
        margin-left: 0;
        position: relative;
        width: 14px;
      }

      .wa-audio.playing .wa-audio-play-icon::before,
      .wa-audio.playing .wa-audio-play-icon::after {
        background: currentColor;
        border-radius: 2px;
        content: '';
        height: 18px;
        position: absolute;
        top: 0;
        width: 4px;
      }

      .wa-audio.playing .wa-audio-play-icon::before {
        left: 1px;
      }

      .wa-audio.playing .wa-audio-play-icon::after {
        right: 1px;
      }

      .wa-audio-body {
        display: grid;
        gap: 5px;
        min-width: 0;
      }

      .wa-audio-range {
        appearance: none;
        background:
          linear-gradient(90deg, #128c7e 0 var(--audio-progress), transparent var(--audio-progress) 100%),
          repeating-linear-gradient(90deg, #8a9691 0 3px, transparent 3px 8px);
        border-radius: 999px;
        cursor: pointer;
        height: 4px;
        margin: 0;
        outline: none;
        width: 100%;
      }

      .wa-audio-range::-webkit-slider-thumb {
        appearance: none;
        background: #128c7e;
        border: 0;
        border-radius: 50%;
        box-shadow: 0 1px 4px rgba(17, 27, 33, 0.2);
        height: 12px;
        width: 12px;
      }

      .wa-audio-range::-moz-range-thumb {
        background: #128c7e;
        border: 0;
        border-radius: 50%;
        box-shadow: 0 1px 4px rgba(17, 27, 33, 0.2);
        height: 12px;
        width: 12px;
      }

      .wa-audio-meta {
        align-items: center;
        color: #66736d;
        display: flex;
        font-size: 11px;
        justify-content: space-between;
        line-height: 1;
      }

      .wa-audio-more {
        border-radius: 50%;
        font-size: 22px;
        height: 28px;
        letter-spacing: 1px;
        line-height: 1;
        width: 28px;
      }

      .wa-audio audio {
        display: none;
      }

      .chat-media-viewer {
        background: rgba(17, 27, 33, 0.92);
        backdrop-filter: blur(12px);
        color: #fff;
        display: grid;
        grid-template-rows: auto minmax(0, 1fr);
        inset: 0;
        position: absolute;
        z-index: 40;
      }

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

      .chat-media-viewer-bar {
        align-items: center;
        background: rgba(17, 27, 33, 0.82);
        display: flex;
        gap: 14px;
        justify-content: space-between;
        min-height: 62px;
        padding: 10px 16px;
      }

      .chat-media-viewer-title {
        display: grid;
        gap: 3px;
        min-width: 0;
      }

      .chat-media-viewer-title strong,
      .chat-media-viewer-title small {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .chat-media-viewer-title strong {
        font-size: 15px;
      }

      .chat-media-viewer-title small {
        color: rgba(255, 255, 255, 0.68);
        font-size: 12px;
      }

      .chat-media-viewer-close {
        align-items: center;
        background: rgba(255, 255, 255, 0.12);
        border: 1px solid rgba(255, 255, 255, 0.16);
        border-radius: 50%;
        color: #fff;
        cursor: pointer;
        display: inline-flex;
        flex: 0 0 auto;
        font-size: 24px;
        height: 38px;
        justify-content: center;
        line-height: 1;
        width: 38px;
      }

      .chat-media-viewer-actions {
        align-items: center;
        display: inline-flex;
        flex: 0 0 auto;
        gap: 10px;
      }

      .chat-media-zoom-controls {
        align-items: center;
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.14);
        border-radius: 999px;
        display: inline-flex;
        gap: 4px;
        padding: 4px;
      }

      .chat-media-zoom-controls[hidden] {
        display: none;
      }

      .chat-media-zoom-button {
        align-items: center;
        background: transparent;
        border: 0;
        border-radius: 999px;
        color: #fff;
        cursor: pointer;
        display: inline-flex;
        font-size: 14px;
        font-weight: 800;
        height: 30px;
        justify-content: center;
        min-width: 30px;
        padding: 0 10px;
      }

      .chat-media-zoom-button:hover {
        background: rgba(255, 255, 255, 0.16);
      }

      .chat-media-zoom-button:disabled {
        cursor: default;
        opacity: 0.42;
      }

      .chat-media-zoom-value {
        color: rgba(255, 255, 255, 0.78);
        font-size: 12px;
        font-weight: 800;
        min-width: 48px;
        text-align: center;
      }

      .chat-media-viewer-close:hover {
        background: rgba(255, 255, 255, 0.2);
      }

      .chat-media-viewer-stage {
        align-items: center;
        display: flex;
        justify-content: center;
        min-height: 0;
        padding: 18px;
      }

      .chat-media-viewer-stage.zoomable {
        cursor: zoom-in;
        overflow: hidden;
        touch-action: none;
      }

      .chat-media-viewer-stage.zoomable.pannable {
        cursor: grab;
      }

      .chat-media-viewer-stage.zoomable.grabbing {
        cursor: grabbing;
      }

      .chat-media-viewer-stage.document {
        align-items: stretch;
        padding: 14px;
      }

      .chat-media-viewer-stage img,
      .chat-media-viewer-stage video {
        border-radius: 8px;
        box-shadow: 0 18px 70px rgba(0, 0, 0, 0.34);
        display: block;
        max-height: 100%;
        max-width: 100%;
        object-fit: contain;
      }

      .chat-media-viewer-stage video {
        background: #000;
        width: min(980px, 100%);
      }

      .viewer-zoom-image {
        transform: translate3d(var(--viewer-zoom-x, 0px), var(--viewer-zoom-y, 0px), 0) scale(var(--viewer-zoom-scale, 1));
        transform-origin: center center;
        transition: transform 0.12s ease;
        will-change: transform;
      }

      .chat-media-viewer-stage.grabbing .viewer-zoom-image {
        transition: none;
      }

      .document-preview-frame {
        background: #fff;
        border: 0;
        border-radius: 8px;
        box-shadow: 0 18px 70px rgba(0, 0, 0, 0.34);
        height: 100%;
        width: min(980px, 100%);
      }

      .document-viewer-card {
        align-self: center;
        background: #fff;
        border-radius: 10px;
        box-shadow: 0 18px 70px rgba(0, 0, 0, 0.34);
        color: var(--text);
        display: grid;
        gap: 12px;
        justify-items: center;
        margin: auto;
        max-width: min(390px, 100%);
        padding: 26px;
        text-align: center;
      }

      .document-viewer-card .file-type-icon {
        height: 72px;
        width: 72px;
      }

      .document-viewer-card .file-type-icon span {
        max-width: 58px;
      }

      .document-viewer-card strong {
        max-width: 100%;
        overflow-wrap: anywhere;
      }

      .document-viewer-card small,
      .document-viewer-card p {
        color: var(--muted);
        margin: 0;
      }

      .document-viewer-card p {
        font-size: 13px;
        line-height: 1.5;
      }

      .document-download-button {
        background: #128c7e;
        border-radius: 999px;
        color: #fff;
        display: inline-flex;
        font-weight: 800;
        justify-content: center;
        padding: 10px 18px;
        text-decoration: none;
      }

      .document-viewer-audio {
        align-self: center;
        background: #fff;
        border-radius: 10px;
        box-shadow: 0 18px 70px rgba(0, 0, 0, 0.34);
        display: grid;
        gap: 14px;
        margin: auto;
        max-width: min(430px, 100%);
        padding: 22px;
        width: 100%;
      }

      .document-viewer-audio audio {
        width: 100%;
      }

      .media-card {
        align-items: center;
        background: rgba(255, 255, 255, 0.66);
        border: 1px solid rgba(140, 154, 146, 0.28);
        border-radius: 7px;
        color: var(--text);
        cursor: pointer;
        display: grid;
        gap: 10px;
        grid-template-columns: 52px minmax(0, 1fr);
        min-height: 64px;
        padding: 8px;
        text-align: left;
        width: min(360px, 100%);
      }

      .media-card:disabled {
        cursor: wait;
        opacity: 0.75;
      }

      .media-thumb,
      .media-icon {
        align-items: center;
        background: #edf1ee;
        border-radius: 6px;
        color: var(--muted-strong);
        display: flex;
        font-weight: 800;
        height: 48px;
        justify-content: center;
        object-fit: cover;
        width: 52px;
      }

      .file-type-icon {
        --file-bg: #edf1ee;
        --file-fg: #54635d;
        align-items: center;
        background: var(--file-bg);
        border-radius: 8px;
        color: var(--file-fg);
        display: flex;
        flex: 0 0 auto;
        font-size: 13px;
        font-weight: 900;
        height: 48px;
        justify-content: center;
        letter-spacing: 0;
        line-height: 1;
        overflow: hidden;
        position: relative;
        width: 52px;
      }

      .file-type-icon::after {
        background: rgba(255, 255, 255, 0.78);
        border-bottom: 1px solid rgba(0, 0, 0, 0.08);
        border-left: 1px solid rgba(0, 0, 0, 0.08);
        border-bottom-left-radius: 4px;
        content: "";
        height: 14px;
        position: absolute;
        right: 0;
        top: 0;
        width: 14px;
      }

      .file-type-icon span {
        max-width: 42px;
        overflow: hidden;
        text-align: center;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .file-type-icon.pdf {
        --file-bg: #e94235;
        --file-fg: #fff;
      }

      .file-type-icon.word {
        --file-bg: #2f66d0;
        --file-fg: #fff;
      }

      .file-type-icon.excel {
        --file-bg: #168c45;
        --file-fg: #fff;
      }

      .file-type-icon.powerpoint {
        --file-bg: #d65f2a;
        --file-fg: #fff;
      }

      .file-type-icon.text {
        --file-bg: #eef2ef;
        --file-fg: #53625c;
      }

      .file-type-icon.archive {
        --file-bg: #7b5bd6;
        --file-fg: #fff;
      }

      .file-type-icon.cad {
        --file-bg: #0f8b8d;
        --file-fg: #fff;
      }

      .file-type-icon.image {
        --file-bg: #0b8cff;
        --file-fg: #fff;
      }

      .file-type-icon.video {
        --file-bg: #aa4d9c;
        --file-fg: #fff;
      }

      .file-type-icon.audio {
        --file-bg: #c57b00;
        --file-fg: #fff;
      }

      .file-type-icon.code {
        --file-bg: #28343f;
        --file-fg: #fff;
      }

      .file-type-icon.file {
        --file-bg: #edf1ee;
        --file-fg: #54635d;
      }

      .media-card strong,
      .media-card small,
      .media-file strong,
      .media-file small {
        display: block;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .media-card small,
      .media-file small {
        color: var(--muted);
        font-size: 12px;
        margin-top: 3px;
      }

      .media-file {
        align-items: center;
        background: rgba(255, 255, 255, 0.66);
        border: 1px solid rgba(140, 154, 146, 0.28);
        border-radius: 7px;
        color: var(--text);
        cursor: pointer;
        display: grid;
        font: inherit;
        gap: 12px;
        grid-template-columns: 58px minmax(0, 1fr);
        max-width: min(360px, 100%);
        min-height: 76px;
        padding: 9px 12px;
        text-align: left;
        text-decoration: none;
      }

      .media-file:hover {
        background: rgba(255, 255, 255, 0.88);
      }

      .media-file .file-type-icon {
        height: 58px;
        width: 58px;
      }

      .media-file .file-type-icon span {
        max-width: 48px;
      }

      .media-file-text {
        min-width: 0;
      }

      .message-meta {
        align-items: center;
        color: var(--muted);
        display: flex;
        flex-wrap: wrap;
        font-size: 11px;
        gap: 7px;
        justify-content: flex-end;
        margin-top: 6px;
      }

      .message-row.audio .message-meta {
        margin-top: 2px;
        padding-right: 4px;
      }

      .message-row.video .message-meta {
        font-size: 14px;
        margin-top: 6px;
        padding-right: 2px;
      }

      .message-meta .wa-checks {
        font-size: 14px;
      }

      .receive-status {
        align-items: center;
        border-radius: 999px;
        color: #6b7772;
        display: inline-flex;
        font-size: 11px;
        gap: 4px;
        line-height: 1;
      }

      .receive-status.read {
        color: var(--wa-blue);
        font-weight: 700;
      }

      .sales-wa-status-bar {
        align-items: center;
        background: #eef8f5;
        border: 1px solid #cce9e1;
        border-radius: 8px;
        color: #20534a;
        display: flex;
        gap: 8px;
        justify-content: space-between;
        margin: 10px 10px 8px;
        min-height: 38px;
        padding: 8px 10px;
      }

      .sales-wa-status-bar.warn {
        background: #fff7ed;
        border-color: #fed7aa;
        color: #7c2d12;
      }

      .sales-wa-status-bar.error {
        background: #fef2f2;
        border-color: #fecaca;
        color: #991b1b;
      }

      .sales-wa-status-main {
        display: grid;
        gap: 2px;
        min-width: 0;
      }

      .sales-wa-status-main strong,
      .sales-wa-status-main span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .sales-wa-status-main strong {
        font-size: 13px;
      }

      .sales-wa-status-main span {
        font-size: 12px;
        opacity: 0.82;
      }

      .sales-wa-card {
        align-self: center;
        background: #fff;
        border: 1px solid rgba(216, 223, 220, 0.92);
        border-radius: 8px;
        box-shadow: 0 18px 42px rgba(34, 48, 42, 0.1);
        display: grid;
        gap: 14px;
        justify-self: center;
        max-width: 420px;
        padding: 20px;
        width: min(420px, calc(100% - 36px));
      }

      .sales-wa-card h3 {
        font-size: 20px;
        margin: 0;
      }

      .sales-wa-card p {
        color: var(--muted);
        font-size: 13px;
        line-height: 1.5;
        margin: 0;
      }

      .sales-wa-qr {
        align-items: center;
        background: #f7faf8;
        border: 1px dashed #cfdad6;
        border-radius: 8px;
        color: var(--muted);
        display: grid;
        justify-items: center;
        min-height: 232px;
        padding: 16px;
        text-align: center;
      }

      .sales-wa-qr img {
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 6px;
        height: 208px;
        max-width: 100%;
        padding: 8px;
        width: 208px;
      }

      .sales-wa-qr-code {
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 6px;
        color: var(--text);
        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
        font-size: 12px;
        line-height: 1.4;
        max-height: 210px;
        overflow: auto;
        padding: 10px;
        text-align: left;
        white-space: pre-wrap;
        width: 100%;
      }

      .sales-wa-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
      }

      .chat-composer {
        align-items: center;
        background: rgba(240, 242, 241, 0.96);
        backdrop-filter: blur(10px);
        border-top: 1px solid rgba(216, 223, 220, 0.8);
        display: grid;
        gap: 10px;
        grid-template-columns: 38px minmax(0, 1fr) 38px;
        min-height: 62px;
        padding: 10px 14px;
      }

      .composer-attach {
        position: relative;
      }

      .composer-icon {
        align-items: center;
        background: transparent;
        border: 0;
        border-radius: 50%;
        color: #2f3c37;
        display: inline-flex;
        font-size: 25px;
        height: 38px;
        justify-content: center;
        width: 38px;
      }

      .composer-icon:not(:disabled) {
        cursor: pointer;
      }

      .composer-icon.active:not(:disabled) {
        background: rgba(18, 140, 126, 0.1);
        color: var(--green-dark);
      }

      .composer-icon.send:not(:disabled) {
        background: var(--green);
        box-shadow: 0 8px 18px rgba(18, 140, 126, 0.24);
        color: #fff;
        cursor: pointer;
        transform: translateY(0);
        transition:
          background 160ms ease,
          box-shadow 160ms ease,
          transform 160ms ease;
      }

      .composer-icon.send:not(:disabled):hover {
        background: #107d70;
        transform: translateY(-1px);
      }

      .composer-icon:disabled {
        cursor: not-allowed;
        opacity: 0.55;
      }

      .composer-input {
        background: #fff;
        border: 1px solid transparent;
        border-radius: 21px;
        box-shadow: inset 0 1px 0 rgba(34, 48, 42, 0.04), 0 8px 18px rgba(34, 48, 42, 0.05);
        box-sizing: border-box;
        color: #65716c;
        font: inherit;
        line-height: 20px;
        max-height: 160px;
        min-height: 42px;
        outline: none;
        overflow-y: hidden;
        padding: 10px 16px;
        resize: none;
        width: 100%;
      }

      .composer-input:disabled {
        cursor: not-allowed;
        opacity: 1;
      }

      .composer-input:not(:disabled):focus {
        border-color: rgba(18, 140, 126, 0.32);
        box-shadow:
          inset 0 1px 0 rgba(34, 48, 42, 0.04),
          0 0 0 4px rgba(18, 140, 126, 0.09);
      }

      .attachment-menu {
        background: #fff;
        border: 1px solid rgba(216, 223, 220, 0.92);
        border-radius: 8px;
        bottom: calc(100% + 10px);
        box-shadow: 0 18px 42px rgba(34, 48, 42, 0.16);
        display: grid;
        gap: 2px;
        left: 0;
        min-width: 178px;
        padding: 8px;
        position: absolute;
        z-index: 25;
      }

      .attachment-menu[hidden] {
        display: none;
      }

      .attachment-option {
        align-items: center;
        background: transparent;
        border: 0;
        border-radius: 8px;
        color: #263530;
        cursor: pointer;
        display: flex;
        font: inherit;
        gap: 10px;
        min-height: 38px;
        padding: 8px 10px;
        text-align: left;
      }

      .attachment-option:hover {
        background: #f2f7f5;
      }

      .attachment-option-icon {
        align-items: center;
        border-radius: 8px;
        color: #fff;
        display: inline-flex;
        font-size: 13px;
        font-weight: 800;
        height: 24px;
        justify-content: center;
        width: 24px;
      }

      .attachment-option-icon.document {
        background: #6c5ce7;
      }

      .attachment-option-icon.media {
        background: #0b8cff;
      }

      .toast {
        background: rgba(17, 27, 33, 0.92);
        border-radius: 999px;
        bottom: 82px;
        color: #fff;
        font-size: 13px;
        left: 50%;
        max-width: min(520px, calc(100vw - 48px));
        padding: 10px 16px;
        position: fixed;
        transform: translateX(-50%);
        animation: toast-in 160ms ease-out;
        z-index: 30;
      }

      .toast[hidden] {
        display: none;
      }

      @keyframes list-rise {
        from {
          opacity: 0;
          transform: translateY(8px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      @keyframes bubble-in {
        from {
          opacity: 0;
          transform: translateY(6px) scale(0.99);
        }
        to {
          opacity: 1;
          transform: translateY(0) scale(1);
        }
      }

      @keyframes menu-pop {
        from {
          opacity: 0;
          transform: translateY(-4px) scale(0.98);
        }
        to {
          opacity: 1;
          transform: translateY(0) scale(1);
        }
      }

      @keyframes unread-pulse {
        0%,
        100% {
          box-shadow: 0 0 0 0 rgba(229, 57, 53, 0);
        }
        45% {
          box-shadow: 0 0 0 5px rgba(229, 57, 53, 0.13);
        }
      }

      @keyframes chat-bg-drift {
        from {
          background-position: 0 0, 0 0, 0 0;
        }
        to {
          background-position: 76px 76px, -92px 92px, 0 0;
        }
      }

      @keyframes toast-in {
        from {
          opacity: 0;
          transform: translate(-50%, 8px);
        }
        to {
          opacity: 1;
          transform: translate(-50%, 0);
        }
      }

      @media (prefers-reduced-motion: reduce) {
        *,
        *::before,
        *::after {
          animation-duration: 1ms !important;
          animation-iteration-count: 1 !important;
          scroll-behavior: auto !important;
          transition-duration: 1ms !important;
        }
      }

      .event-drawer {
        background: rgba(255, 255, 255, 0.62);
        border-top: 1px solid rgba(216, 223, 220, 0.7);
        color: #87938e;
        max-height: 26vh;
        overflow: auto;
      }

      .event-drawer summary {
        cursor: pointer;
        font-size: 11px;
        font-weight: 600;
        line-height: 1.2;
        opacity: 0.72;
        padding: 7px 18px;
      }

      .event-drawer[open] summary {
        opacity: 1;
      }

      .event-tools {
        align-items: center;
        border-top: 1px solid var(--line);
        display: flex;
        justify-content: space-between;
        padding: 10px 18px;
      }

      .ghost-button {
        background: var(--surface-soft);
        border: 1px solid var(--line);
        border-radius: 8px;
        color: var(--muted-strong);
        cursor: pointer;
        min-height: 32px;
        padding: 0 10px;
      }

      .ghost-button:hover {
        border-color: var(--line-strong);
        color: var(--text);
      }

      .event-table-wrap {
        overflow-x: auto;
        padding: 0 18px 16px;
      }

      table {
        border-collapse: collapse;
        font-size: 12px;
        min-width: 900px;
        width: 100%;
      }

      th,
      td {
        border-bottom: 1px solid var(--line);
        padding: 9px 8px;
        text-align: left;
        vertical-align: top;
      }

      th {
        color: var(--muted);
        font-weight: 800;
      }

      td {
        color: var(--muted-strong);
      }

      @media (max-width: 1280px) {
        .customer-detail-body {
          grid-template-columns: minmax(0, 1fr) 270px;
        }

        .customer-detail-sidebar {
          grid-column: auto;
          position: static;
        }

        .customer-overview-grid,
        .customer-overview-form-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
      }

      @media (max-width: 1080px) {
        .layout,
        .layout.accounts-hidden {
          grid-template-columns: 1fr;
          grid-template-rows: minmax(160px, 0.7fr) minmax(220px, 1fr) minmax(0, 1.5fr);
        }

        .layout.sales-only,
        .app[data-role="sales"] .layout {
          grid-template-columns: 1fr;
          grid-template-rows: minmax(220px, 0.85fr) minmax(0, 1.5fr);
        }

        .conversation-resizer {
          display: none;
        }

        .panel {
          border-bottom: 1px solid var(--line);
          border-right: 0;
        }

        .scroll,
        .chat-body {
          max-height: none;
        }

        .customer-management-body {
          min-height: 0;
        }

        .customer-filter-form {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .customer-field-filter-bar {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .customer-detail-summary {
          grid-template-columns: repeat(2, minmax(150px, 1fr));
        }

        .customer-detail-body {
          grid-template-columns: 1fr;
        }

        .customer-detail-sidebar {
          grid-column: auto;
          position: static;
        }

        .summary-item:nth-child(4n) {
          border-right: 1px solid rgba(216, 223, 220, 0.72);
        }

        .summary-item:nth-child(2n) {
          border-right: 0;
        }

        .customer-profile-grid {
          grid-template-columns: 1fr;
        }

        .management-body {
          grid-template-columns: 1fr;
        }

        .role-management-body {
          grid-template-columns: 1fr;
        }

        .permission-options {
          grid-template-columns: 1fr;
        }

        .topbar {
          align-items: flex-start;
          flex-direction: column;
        }

        .topbar-main {
          align-items: flex-start;
          flex-direction: column;
          gap: 10px;
        }

        .health {
          justify-content: flex-start;
        }
      }

      @media (max-width: 640px) {
        .topbar {
          padding: 12px;
        }

        .panel-head {
          padding: 12px;
        }

        .chat-body {
          padding: 14px 12px;
        }

        .chat-head {
          align-items: flex-start;
          flex-direction: column;
        }

        .chat-actions {
          width: 100%;
        }

        .add-list-button {
          flex: 1 1 auto;
          justify-content: center;
        }

        .tag-menu,
        .more-menu {
          left: 0;
          right: auto;
        }

        .bubble {
          max-width: 88%;
        }

        .customer-detail-view {
          padding: 14px 12px;
        }

        .customer-detail-top {
          align-items: flex-start;
          flex-direction: column;
        }

        .customer-detail-identity {
          width: 100%;
        }

        .customer-detail-quick-form {
          grid-template-columns: 1fr;
          justify-content: flex-start;
          width: 100%;
        }

        .customer-tag-dropdown-menu {
          min-width: 100%;
          position: static;
          width: 100%;
        }

        .customer-detail-body {
          grid-template-columns: 1fr;
        }

        .customer-detail-sidebar {
          grid-column: 1;
          position: static;
        }

        .customer-detail-tabs {
          border-bottom: 1px solid var(--line);
          border-right: 0;
          display: flex;
          overflow-x: auto;
          padding: 0 0 10px;
          position: static;
        }

        .detail-tab {
          flex: 0 0 auto;
          min-width: 130px;
        }

        .customer-detail-summary {
          grid-template-columns: 1fr;
        }

        .customer-overview-grid,
        .customer-overview-form-grid {
          grid-template-columns: 1fr;
        }

        .customer-file-upload-grid,
        .customer-file-item {
          grid-template-columns: 1fr;
        }

        .customer-file-actions {
          justify-content: flex-start;
        }

        .summary-item,
        .summary-item:nth-child(2n),
        .summary-item:nth-child(4n) {
          border-right: 0;
        }

        #customer-metadata-form {
          grid-template-columns: 1fr;
        }

        .role-meta-grid {
          grid-template-columns: 1fr;
        }

        .followup-grid {
          grid-template-columns: 1fr;
        }

        .profile-form-grid.two-col,
        .customer-profile-modules {
          grid-template-columns: 1fr;
        }

        .customer-profile-content {
          padding: 12px;
        }

        .customer-summary-row {
          grid-template-columns: 88px minmax(0, 1fr);
        }
      }

      @media (max-width: 767px) {
        html,
        body,
        .app {
          max-width: 100%;
          overflow: hidden;
        }

        .desktop-only,
        .mobile-hidden-phone {
          display: none !important;
        }

        .mobile-only {
          display: block !important;
        }

        button.mobile-only,
        .mobile-chat-back.mobile-only {
          display: inline-flex !important;
        }

        .customer-mobile-list.mobile-only,
        .mobile-chat-stage.mobile-only {
          display: grid !important;
        }

        .mobile-readonly-note.mobile-only {
          align-items: center;
          background: #f4f7f6;
          border-top: 1px solid var(--line);
          color: var(--muted-strong);
          display: flex !important;
          font-size: 13px;
          font-weight: 800;
          justify-content: center;
          min-height: 46px;
          padding: 10px 14px;
        }

        .mobile-readonly-note.mobile-only[hidden] {
          display: none !important;
        }

        .topbar {
          align-items: flex-start;
          flex-direction: column;
          gap: 8px;
          overflow: visible;
          padding: 12px;
          position: relative;
        }

        .topbar-main {
          display: grid;
          gap: 10px;
          width: 100%;
        }

        .brand {
          padding-right: 104px;
        }

        .brand h1 {
          font-size: 17px;
          min-height: 32px;
          padding-top: 2px;
        }

        .topbar-tools {
          gap: 8px;
          position: absolute;
          right: 12px;
          top: 10px;
          z-index: 1200;
        }

        .topbar-tools[hidden] {
          display: none;
        }

        .topbar-icon-button {
          box-shadow: 0 6px 16px rgba(34, 48, 42, 0.08);
          height: 38px;
          min-width: 38px;
        }

        .account-menu-button {
          gap: 0;
          grid-template-columns: 34px;
          min-height: 38px;
          min-width: 38px;
          padding: 2px;
          width: 38px;
        }

        .account-menu-button .current-user-meta,
        .account-menu-button .menu-caret {
          display: none;
        }

        .notification-panel,
        .account-menu {
          max-height: calc(100vh - 72px);
          min-width: 0;
          overflow: auto;
          position: fixed;
          right: 12px;
          top: 56px;
          width: min(320px, calc(100vw - 24px));
          z-index: 2000;
        }

        .view-nav {
          flex-wrap: nowrap;
          overflow-x: auto;
          padding: 4px;
          scrollbar-width: none;
          width: 100%;
          max-width: 100%;
        }

        .view-nav::-webkit-scrollbar {
          display: none;
        }

        .view-button {
          flex: 0 0 auto;
          min-height: 32px;
          padding: 5px 9px;
        }

        #logout-button {
          background: rgba(255, 255, 255, 0.92);
          border-color: #d8e3df;
          border-radius: 999px;
          box-shadow: 0 6px 16px rgba(34, 48, 42, 0.08);
          color: #3f4e48;
          font-size: 12px;
          font-weight: 800;
          height: 32px;
          min-height: 32px;
          padding: 0 11px;
          position: absolute;
          right: 12px;
          top: 12px;
          z-index: 10;
        }

        #logout-button:hover {
          background: #fff;
          border-color: #c9d8d2;
          box-shadow: 0 8px 18px rgba(34, 48, 42, 0.12);
          color: var(--text);
          transform: none;
        }

        .health {
          display: none;
        }

        .event-drawer {
          display: none !important;
        }

        .app[data-view="workbench"] .dashboard {
          background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(236, 243, 240, 0.98)),
            #eef4f1;
          gap: 14px;
          padding: 14px 12px 18px;
        }

        .dashboard-kpis,
        .app:not([data-role="admin"]) .dashboard-kpis {
          gap: 10px;
          grid-template-columns: repeat(2, minmax(0, 1fr));
          overflow: visible;
        }

        .app[data-view="workbench"] .dashboard-kpis {
          gap: 10px;
        }

        .app[data-view="workbench"] .kpi {
          border-radius: 14px;
          box-shadow: 0 10px 24px rgba(34, 48, 42, 0.08);
          min-height: 118px;
          padding: 14px;
        }

        .app[data-view="workbench"] .kpi:first-child {
          grid-column: 1 / -1;
          min-height: 96px;
        }

        .app[data-view="workbench"] .kpi-value {
          font-size: 34px;
          overflow: visible;
          white-space: normal;
        }

        .kpi-label {
          font-size: 12px;
          letter-spacing: 0;
          text-transform: none;
        }

        .kpi-sub {
          font-size: 12px;
          line-height: 1.35;
          overflow-wrap: anywhere;
        }

        .app[data-view="customers"] .customer-management,
        .app[data-view="customer-detail"] .customer-detail-view,
        .app[data-view="conversations"] .layout {
          min-width: 0;
          overflow: hidden;
        }

        .app[data-view="customer-detail"] .customer-detail-view {
          overflow-x: hidden;
          overflow-y: auto;
          -webkit-overflow-scrolling: touch;
        }

        .customer-management-head {
          align-items: flex-start;
          gap: 10px;
          padding: 12px;
        }

        .customer-management-head h2 {
          font-size: 18px;
        }

        .customer-management-head p {
          display: none;
        }

        .customer-management-stat {
          border-radius: 8px;
          font-size: 12px;
          min-height: 34px;
          padding: 5px 8px;
        }

        .customer-management-body {
          overflow-y: auto;
          padding: 12px;
        }

        .customer-filter-form {
          grid-template-columns: 1fr;
          padding: 12px;
        }

        .customer-field-filter-bar {
          grid-template-columns: 1fr;
          padding: 12px;
        }

        .customer-filter-actions {
          display: grid;
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .customer-table-wrap {
          display: none;
        }

        .customer-mobile-list {
          gap: 10px;
        }

        .customer-card-actions {
          grid-template-columns: 1fr 1fr;
        }

        .app[data-view="conversations"] .layout,
        .app[data-view="conversations"] .layout.accounts-hidden,
        .app[data-view="conversations"] .layout.sales-only,
        .app[data-role="sales"][data-view="conversations"] .layout {
          grid-template-columns: 1fr;
          grid-template-rows: minmax(0, 1fr);
          min-width: 0;
        }

        .app[data-view="conversations"] .account-panel,
        .app[data-view="conversations"] .conversation-resizer {
          display: none;
        }

        .app[data-view="conversations"] .conversation-panel,
        .app[data-view="conversations"] .chat-panel {
          border: 0;
          min-width: 0;
          width: 100%;
        }

        .app[data-view="conversations"] .conversation-panel {
          box-shadow: none;
          grid-template-rows: auto auto auto minmax(0, 1fr);
        }

        .app[data-view="conversations"] .conversation-head {
          display: none;
        }

        .app[data-view="conversations"] .context-bar {
          display: none;
        }

        .app[data-view="conversations"] .layout[data-mobile-pane="detail"] .conversation-panel,
        .app[data-view="conversations"] .layout[data-mobile-pane="list"] .chat-panel {
          display: none;
        }

        .app[data-view="conversations"] .layout[data-mobile-pane="detail"] .chat-panel {
          display: grid;
          grid-template-rows: auto minmax(0, 1fr) auto;
        }

        .mobile-account-switch.mobile-only {
          background: #fff;
          display: block !important;
          padding: 8px 12px 4px;
        }

        .mobile-account-label {
          display: grid;
          gap: 4px;
        }

        .mobile-account-label span {
          color: var(--muted);
          font-size: 12px;
          font-weight: 800;
          padding-left: 4px;
        }

        .mobile-account-select {
          appearance: none;
          background:
            linear-gradient(45deg, transparent 50%, #52615b 50%) calc(100% - 18px) 50% / 6px 6px no-repeat,
            linear-gradient(135deg, #52615b 50%, transparent 50%) calc(100% - 13px) 50% / 6px 6px no-repeat,
            #f0f2f5;
          border: 0;
          border-radius: 999px;
          color: var(--text);
          font: inherit;
          font-size: 13px;
          min-height: 36px;
          overflow: hidden;
          padding: 0 34px 0 14px;
          text-overflow: ellipsis;
          width: 100%;
        }

        .conversation-search-wrap {
          background: #fff;
          border-bottom: 0;
          padding: 8px 12px 6px;
        }

        .conversation-search {
          background: #f0f2f5;
          box-shadow: none;
          color: #667781;
          gap: 8px;
          grid-template-columns: 34px minmax(0, 1fr);
          min-height: 44px;
          padding: 0 12px 0 6px;
          transform: none;
        }

        .conversation-search:focus-within {
          background: #f0f2f5;
          box-shadow: none;
          transform: none;
        }

        .conversation-search input {
          font-size: 15px;
        }

        .conversation-search span[aria-hidden="true"] {
          align-items: center;
          background: rgba(255, 255, 255, 0.78);
          border-radius: 50%;
          box-shadow: inset 0 0 0 1px rgba(102, 119, 129, 0.16);
          color: transparent;
          display: inline-flex;
          font-size: 0;
          height: 32px;
          justify-content: center;
          position: relative;
          width: 32px;
        }

        .conversation-search span[aria-hidden="true"]::before {
          border: 2.2px solid #687872;
          border-radius: 50%;
          box-sizing: border-box;
          content: '';
          height: 14px;
          left: 8px;
          position: absolute;
          top: 7px;
          width: 14px;
        }

        .conversation-search span[aria-hidden="true"]::after {
          background: #687872;
          border-radius: 999px;
          content: '';
          height: 2.2px;
          left: 20px;
          position: absolute;
          top: 21px;
          transform: rotate(45deg);
          transform-origin: left center;
          width: 8px;
        }

        .conversation-search:focus-within span[aria-hidden="true"] {
          background: #fff;
          box-shadow: inset 0 0 0 1px rgba(0, 128, 105, 0.18);
        }

        .conversation-search:focus-within span[aria-hidden="true"]::before {
          border-color: #008069;
        }

        .conversation-search:focus-within span[aria-hidden="true"]::after {
          background: #008069;
        }

        .conversation-search input::placeholder {
          color: #87938e;
        }

        .conversation-filters {
          background: #fff;
          border-bottom: 1px solid #edf1ef;
          display: flex;
          gap: 8px;
          min-height: 42px;
          overflow: visible;
          padding: 0 12px 8px;
          position: relative;
          z-index: 8;
        }

        .filter-chip-group {
          flex: 1 1 auto;
          min-width: 0;
          overflow-x: auto;
          padding: 1px 2px 1px 0;
          scrollbar-width: none;
        }

        .filter-chip-group::-webkit-scrollbar {
          display: none;
        }

        .conversation-filters .filter-pill {
          background: var(--stage-bg, #f0f2f5);
          border: 1px solid var(--stage-border, transparent);
          color: var(--stage-text, #41504a);
          font-size: 13px;
          height: 32px;
          padding: 0 12px;
          transform: none;
        }

        .conversation-filters .filter-pill.active {
          background: var(--stage-active-bg, #e7f5ec);
          border-color: var(--stage-color, #b6d8cf);
          box-shadow: none;
          color: var(--stage-strong, #008069);
        }

        .conversation-filters .filter-menu-wrap {
          background: #fff;
          box-shadow: -10px 0 16px rgba(255, 255, 255, 0.96);
          flex: 0 0 auto;
          margin-left: 0;
          padding-left: 2px;
          position: relative;
          z-index: 9;
        }

        #conversation-more-filter {
          min-width: 68px;
        }

        .conversation-filters .filter-menu {
          position: fixed;
          z-index: 40;
        }

        #conversation-list {
          background: #fff;
          display: block;
          padding: 0;
        }

        #conversation-list .empty,
        #conversation-list .error-state,
        #conversation-list .loading {
          background: #fff;
          border: 1px solid var(--line);
          border-radius: 8px;
        }

        .conversation-button {
          background: #fff;
          border: 0;
          border-bottom: 1px solid #edf1ef;
          border-radius: 0;
          box-shadow: none;
          column-gap: 12px;
          grid-template-columns: 54px minmax(0, 1fr) auto;
          min-height: 76px;
          padding: 10px 12px;
        }

        .conversation-button::after {
          display: none;
        }

        .conversation-button.active {
          background: #f5f8f7;
          box-shadow: none;
        }

        .conversation-button > .avatar {
          grid-row: 1 / span 2;
          height: 52px;
          width: 52px;
        }

        .conversation-main {
          grid-column: 2;
          min-width: 0;
        }

        .conversation-button .row-name {
          font-size: 16px;
          line-height: 1.25;
        }

        .conversation-button .row-top {
          display: block;
        }

        .conversation-preview {
          color: #68756f;
          font-size: 14px;
          line-height: 1.28;
          margin-top: 3px;
          white-space: normal;
        }

        .conversation-preview-text {
          display: -webkit-box;
          white-space: normal;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1;
        }

        .conversation-info {
          color: #7b8782;
          font-size: 11px;
          margin-top: 2px;
          white-space: normal;
        }

        .conversation-side {
          align-items: flex-end;
          flex-direction: column;
          grid-column: 3;
          grid-row: 1 / span 2;
          justify-content: flex-start;
          margin-top: 2px;
          min-width: 0;
        }

        .time {
          color: #77837e;
          font-size: 13px;
          text-align: left;
        }

        .conversation-stage {
          margin-top: 3px;
        }

        .conversation-stage .customer-chip {
          min-height: 20px;
          padding: 3px 7px;
        }

        .pin-slot {
          display: none;
        }

        .chat-head {
          align-items: center;
          background: #f7f8f8;
          border-bottom: 1px solid #d8dfdc;
          box-shadow: none;
          display: grid;
          gap: 10px;
          grid-template-columns: auto minmax(0, 1fr) auto;
          min-height: 64px;
          padding: 10px 12px;
        }

        .mobile-chat-back {
          border-radius: 8px;
          font-size: 24px;
          height: 38px;
          min-width: 38px;
          padding: 0;
        }

        .chat-profile {
          gap: 9px;
          grid-template-columns: 38px minmax(0, 1fr);
        }

        .chat-avatar {
          height: 38px;
          width: 38px;
        }

        .chat-identity h2 {
          font-size: 15px;
        }

        .mobile-chat-stage {
          gap: 5px;
          margin-top: 4px;
        }

        .chat-actions {
          justify-content: flex-end;
          width: auto;
        }

        .chat-actions .chat-menu-wrap,
        #chat-search-button,
        #chat-more-button,
        #chat-list-button,
        #chat-tag-menu,
        #chat-more-menu {
          display: none !important;
        }

        .profile-entry-button {
          max-width: 92px;
          min-height: 32px;
          padding: 0 10px;
        }

        .chat-title-tags {
          display: none;
        }

        .chat-body {
          background:
            radial-gradient(circle at 18px 18px, rgba(120, 108, 92, 0.08) 1.4px, transparent 2px),
            radial-gradient(circle at 52px 44px, rgba(120, 108, 92, 0.07) 1px, transparent 2px),
            #efeae2;
          padding: 12px 9px;
        }

        .bubble {
          border-radius: 8px;
          max-width: 84%;
          padding: 7px 8px 6px;
        }

        .message-row {
          margin-bottom: 7px;
        }

        .message-text {
          font-size: 14px;
          line-height: 1.42;
        }

        .message-meta {
          font-size: 10px;
          gap: 5px;
        }

        .chat-composer {
          display: grid;
        }

        .customer-profile-drawer {
          position: absolute;
        }

        .customer-profile-panel {
          border-left: 0;
          width: 100%;
        }

        .customer-profile-form {
          padding: 14px;
        }

        .customer-detail-view {
          overflow: auto;
          padding: 10px 12px 14px;
        }

        .customer-detail-shell {
          border-radius: 8px;
          gap: 10px;
          min-width: 0;
        }

        .customer-detail-back {
          font-size: 13px;
          min-height: 28px;
          padding: 2px 0;
        }

        .customer-detail-top {
          align-items: stretch;
          border-radius: 10px;
          box-shadow: 0 8px 18px rgba(23, 74, 61, 0.06);
          display: grid;
          gap: 10px;
          padding: 12px;
        }

        .customer-detail-identity {
          align-items: center;
          flex: none;
          gap: 10px;
          grid-template-columns: 42px minmax(0, 1fr);
          width: 100%;
        }

        .customer-detail-avatar {
          box-shadow: 0 6px 14px rgba(18, 140, 126, 0.16);
          font-size: 16px;
          height: 42px;
          width: 42px;
        }

        .customer-detail-title {
          min-width: 0;
        }

        .customer-detail-title h2 {
          display: -webkit-box;
          font-size: 18px;
          line-height: 1.25;
          max-width: 100%;
          overflow: hidden;
          overflow-wrap: anywhere;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
        }

        .customer-detail-title p {
          font-size: 12px;
          line-height: 1.35;
          margin-top: 2px;
          min-width: 0;
          overflow-wrap: anywhere;
        }

        .customer-detail-title .customer-detail-owner-line {
          font-size: 11.5px;
          line-height: 1.35;
          margin-top: 4px;
          overflow-wrap: anywhere;
          word-break: break-word;
        }

        .customer-detail-body {
          gap: 12px;
          grid-template-columns: 1fr;
        }

        .customer-detail-sidebar {
          grid-column: auto;
          position: static;
        }

        .customer-detail-panel[data-detail-tab="followups"] #customer-detail-summary,
        .customer-detail-panel[data-detail-tab="comments"] #customer-detail-summary {
          display: none;
        }

        .customer-detail-tab-panel {
          min-height: 0;
        }

        .customer-detail-tabs {
          background: #f7faf9;
          border-radius: 12px;
          box-shadow: none;
          display: grid;
          gap: 4px;
          grid-template-columns: repeat(3, minmax(0, 1fr));
          overflow: visible;
          padding: 4px;
          position: sticky;
          top: 0;
          z-index: 5;
        }

        .detail-tab {
          align-items: center;
          border-radius: 9px;
          display: inline-flex;
          font-size: 13px;
          justify-content: center;
          min-height: 38px;
          min-width: 0;
          padding: 6px 4px;
          text-align: center;
          white-space: normal;
        }

        .detail-section {
          border-radius: 8px;
          gap: 10px;
          padding: 12px;
        }

        .customer-detail-actions {
          display: grid;
          gap: 8px;
          grid-template-columns: minmax(0, 1.15fr) minmax(96px, 0.85fr);
          width: 100%;
        }

        .customer-detail-actions .detail-button {
          align-items: center;
          display: inline-flex;
          font-size: 12.5px;
          justify-content: center;
          line-height: 1.2;
          min-height: 34px;
          min-width: 0;
          padding: 7px 8px;
          white-space: normal;
        }

        .customer-detail-actions .customer-whatsapp-button {
          gap: 5px;
        }

        .customer-detail-actions .customer-whatsapp-button span:last-child,
        .customer-detail-actions [data-customer-more-actions] {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .customer-whatsapp-button-icon {
          font-size: 10px;
          height: 16px;
          width: 16px;
        }

        .customer-overview-card {
          gap: 10px;
        }

        .detail-section-head {
          align-items: flex-start;
          gap: 8px;
          padding-bottom: 8px;
        }

        .detail-section-head h3 {
          font-size: 16px;
        }

        .detail-section-head p {
          display: none;
        }

        .detail-section-body,
        .customer-overview-group {
          gap: 10px;
        }

        .customer-overview-group + .customer-overview-group {
          padding-top: 10px;
        }

        .customer-overview-group-title {
          font-size: 13px;
          line-height: 1.25;
        }

        .customer-overview-grid,
        .customer-overview-form-grid {
          gap: 8px;
        }

        .customer-overview-field,
        .customer-overview-readonly-field {
          gap: 5px;
          min-height: 0;
          padding: 9px 10px;
        }

        .customer-overview-field-head {
          align-items: flex-start;
          display: grid;
          gap: 6px;
          grid-template-columns: minmax(0, 1fr) auto;
        }

        .customer-overview-label {
          font-size: 10.5px;
          line-height: 1.25;
          min-width: 0;
          overflow-wrap: anywhere;
        }

        .customer-overview-value {
          font-size: 13px;
          line-height: 1.35;
        }

        .customer-overview-field-edit {
          height: 22px;
          width: 22px;
        }

        .comment-compose,
        .comment-reply-box,
        .followup-form,
        #customer-detail-quick-form,
        #customer-metadata-form,
        #customer-important-form {
          display: none !important;
        }
      }