:root {
        color-scheme: light;
        --bg: #f6f8fb;
        --surface: #ffffff;
        --surface-soft: #f2f6f8;
        --line: #d8e3e8;
        --line-strong: #b9c9d1;
        --text: #17232e;
        --muted: #5a6875;
        --muted-strong: #344754;
        --accent: #1f7a7a;
        --accent-strong: #176363;
        --accent-soft: #e6f3f2;
        --danger: #c0392b;
        --danger-soft: #fdecea;
        --warning: #b7791f;
        --warning-soft: #fff4df;
        --ok: #168a55;
        --ok-soft: #e8f6ef;
        --bubble-in: #ffffff;
        --bubble-out: #d9fdd3;
        --chat-bg: #efe7dc;
        --tag-color: #8ca64c;
        --wa-blue: #53bdeb;
        --shadow: 0 12px 30px rgba(20, 42, 52, 0.08);
      }

      .translate-all-button {
        align-items: center;
        border-color: rgba(20, 184, 166, 0.35);
        color: #0f766e;
        display: inline-flex;
        gap: 6px;
      }

      .translate-all-button:hover,
      .translate-all-button.active {
        background: rgba(20, 184, 166, 0.1);
        border-color: rgba(20, 184, 166, 0.5);
      }

      .translate-all-button:disabled {
        cursor: not-allowed;
        opacity: 0.55;
      }

      .translate-all-button.loading {
        color: #0f766e;
      }

      .message-translation-slot:empty {
        display: none;
      }

      .message-translation {
        background: rgba(15, 118, 110, 0.08);
        border: 1px solid rgba(15, 118, 110, 0.18);
        border-radius: 8px;
        color: #0f3f3a;
        font-size: 13px;
        line-height: 1.45;
        margin-top: 8px;
        padding: 8px 10px;
        white-space: pre-wrap;
      }

      .message-translation.loading {
        color: #64748b;
      }

      .message-translation.error {
        background: rgba(192, 57, 43, 0.08);
        border-color: rgba(192, 57, 43, 0.2);
        color: #c0392b;
      }

      .message-translation-label {
        color: #0f766e;
        font-weight: 700;
      }

      .message-translate-btn {
        align-items: center;
        background: rgba(255, 255, 255, 0.8);
        border: 1px solid rgba(15, 118, 110, 0.22);
        border-radius: 999px;
        color: #0f766e;
        cursor: pointer;
        display: inline-flex;
        font-size: 12px;
        font-weight: 700;
        height: 24px;
        justify-content: center;
        line-height: 1;
        min-width: 24px;
        padding: 0 7px;
      }

      .message-row.outbound .message-translate-btn {
        background: rgba(255, 255, 255, 0.9);
      }

      .message-translate-btn:hover {
        background: rgba(20, 184, 166, 0.12);
        border-color: rgba(15, 118, 110, 0.42);
      }

      .message-translate-btn:disabled {
        cursor: wait;
        opacity: 0.7;
      }

      .message-translate-btn.loading {
        min-width: 52px;
      }

      .message-ai-reply-btn {
        align-items: center;
        background: rgba(236, 253, 245, 0.9);
        border: 1px solid rgba(20, 184, 166, 0.24);
        border-radius: 999px;
        color: #0f766e;
        cursor: pointer;
        display: inline-flex;
        font-size: 12px;
        font-weight: 800;
        height: 24px;
        justify-content: center;
        line-height: 1;
        min-width: 28px;
        padding: 0 8px;
      }

      .message-ai-reply-btn:hover {
        background: rgba(204, 251, 241, 0.95);
        border-color: rgba(15, 118, 110, 0.38);
      }

      .message-ai-reply-btn:disabled {
        cursor: wait;
        opacity: 0.72;
      }

      .message-ai-reply-btn.loading {
        min-width: 62px;
      }

      .message-ai-reply-slot {
        margin-top: 8px;
        width: 100%;
      }

      .message-ai-reply-card,
      .message-ai-reply-loading,
      .message-ai-reply-error {
        border-radius: 8px;
        box-shadow: 0 8px 22px rgba(15, 118, 110, 0.08);
        font-size: 12px;
        line-height: 1.45;
        padding: 8px;
      }

      .message-ai-reply-card {
        background: rgba(240, 253, 250, 0.96);
        border: 1px solid rgba(20, 184, 166, 0.28);
        box-sizing: border-box;
        color: #0f172a;
        display: grid;
        gap: 6px;
        max-width: 100%;
        width: 100%;
      }

      .message-ai-reply-loading {
        background: rgba(240, 253, 250, 0.92);
        border: 1px solid rgba(20, 184, 166, 0.18);
        color: #0f766e;
        max-width: 360px;
      }

      .message-ai-reply-loading-head {
        align-items: center;
        display: flex;
        gap: 8px;
        justify-content: space-between;
      }

      .message-ai-reply-loading-title {
        font-weight: 800;
      }

      .message-ai-reply-dots {
        align-items: center;
        display: inline-flex;
        gap: 3px;
      }

      .message-ai-reply-dots i {
        animation: message-ai-dot 880ms ease-in-out infinite;
        background: #0f766e;
        border-radius: 999px;
        display: block;
        height: 5px;
        opacity: 0.55;
        width: 5px;
      }

      .message-ai-reply-dots i:nth-child(2) {
        animation-delay: 120ms;
      }

      .message-ai-reply-dots i:nth-child(3) {
        animation-delay: 240ms;
      }

      .message-ai-reply-steps {
        color: #47615d;
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        margin-top: 7px;
      }

      .message-ai-reply-steps span {
        background: rgba(255, 255, 255, 0.72);
        border-radius: 999px;
        padding: 2px 7px;
      }

      .message-ai-reply-error {
        background: rgba(253, 236, 234, 0.88);
        border: 1px solid rgba(248, 113, 113, 0.22);
        color: #c0392b;
      }

      .message-ai-reply-header {
        align-items: center;
        display: flex;
        gap: 8px;
        justify-content: space-between;
      }

      .message-ai-reply-title,
      .message-ai-reply-label {
        color: #0f766e;
        font-weight: 800;
      }

      .message-ai-reply-badge {
        background: rgba(15, 118, 110, 0.1);
        border-radius: 999px;
        color: #0f766e;
        font-size: 11px;
        font-weight: 800;
        padding: 2px 7px;
        white-space: nowrap;
      }

      .message-ai-reply-answer {
        background: rgba(255, 255, 255, 0.92);
        border: 1px solid rgba(20, 184, 166, 0.18);
        border-radius: 8px;
        overflow-wrap: anywhere;
        padding: 8px;
      }

      .message-ai-reply-text {
        font-size: 12px;
        white-space: pre-wrap;
      }

      .message-ai-reply-editor {
        background: rgba(255, 255, 255, 0.94);
        border: 1px solid rgba(20, 184, 166, 0.28);
        border-radius: 8px;
        box-sizing: border-box;
        color: #0f172a;
        font: inherit;
        font-size: 12px;
        line-height: 1.5;
        min-height: 52px;
        max-height: min(56vh, 520px);
        outline: 0;
        padding: 7px 8px;
        resize: vertical;
        overflow-y: auto;
        width: 100%;
      }

      .message-ai-reply-note {
        color: #47615d;
        font-size: 11px;
      }

      .message-ai-reply-basis {
        border-top: 1px solid rgba(20, 184, 166, 0.16);
        margin-top: 2px;
        padding-top: 7px;
      }

      .message-ai-reply-basis summary {
        color: #0f766e;
        cursor: pointer;
        font-size: 11px;
        font-weight: 800;
      }

      .message-ai-source-list {
        display: grid;
        gap: 6px;
        list-style: none;
        margin: 7px 0 0;
        padding: 0;
      }

      .message-ai-source-item {
        align-items: start;
        background: rgba(255, 255, 255, 0.78);
        border: 1px solid rgba(148, 163, 184, 0.2);
        border-radius: 8px;
        display: grid;
        gap: 2px 8px;
        grid-template-columns: minmax(0, 1fr) auto;
        padding: 7px 8px;
      }

      .message-ai-source-item.hit {
        border-color: rgba(20, 184, 166, 0.22);
      }

      .message-ai-source-item.skipped {
        border-color: rgba(14, 165, 233, 0.22);
        background: rgba(240, 249, 255, 0.68);
      }

      .message-ai-source-item.unavailable {
        border-color: rgba(100, 116, 139, 0.26);
        background: rgba(248, 250, 252, 0.82);
      }

      .message-ai-source-item.error {
        border-color: rgba(192, 57, 43, 0.28);
        background: rgba(253, 236, 234, 0.72);
      }

      .message-ai-source-item.not-run {
        border-color: rgba(203, 213, 225, 0.42);
        opacity: 0.86;
      }

      .message-ai-source-name {
        color: #134e4a;
        font-weight: 800;
      }

      .message-ai-source-status {
        color: #047857;
        font-size: 11px;
        font-weight: 800;
        justify-self: end;
        text-align: right;
        white-space: nowrap;
      }

      .message-ai-source-item.miss .message-ai-source-status {
        color: #b7791f;
      }

      .message-ai-source-item.skipped .message-ai-source-status {
        color: #0369a1;
      }

      .message-ai-source-item.unavailable .message-ai-source-status {
        color: #475569;
      }

      .message-ai-source-item.error .message-ai-source-status {
        color: #c0392b;
      }

      .message-ai-source-item.not-run .message-ai-source-status {
        color: #94a3b8;
      }

      .message-ai-source-summary {
        color: #475569;
        grid-column: 1 / -1;
        overflow-wrap: anywhere;
      }

      .message-ai-reply-save-error {
        color: #c0392b;
        font-size: 11px;
        font-weight: 700;
      }

      .message-ai-reply-actions {
        align-items: center;
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
      }

      .message-ai-reply-training-tip {
        align-self: center;
        color: #4b635f;
        flex: 1 1 220px;
        font-size: 11px;
        font-weight: 500;
        line-height: 1.35;
        min-width: 180px;
      }

      .message-ai-reply-action {
        background: #0f766e;
        border: 0;
        border-radius: 999px;
        color: #fff;
        cursor: pointer;
        font: inherit;
        font-size: 12px;
        font-weight: 800;
        min-height: 28px;
        padding: 0 10px;
      }

      .message-ai-reply-action:not(.primary) {
        background: rgba(15, 118, 110, 0.1);
        color: #0f766e;
      }

      .message-ai-reply-action:disabled {
        cursor: wait;
        opacity: 0.68;
      }

      @keyframes message-ai-dot {
        0%,
        80%,
        100% {
          opacity: 0.38;
          transform: translateY(0);
        }

        40% {
          opacity: 1;
          transform: translateY(-2px);
        }
      }

      .mobile-chat-stage-actions {
        align-items: center;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
      }

      * {
        box-sizing: border-box;
      }

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

      body {
        margin: 0;
        background:
          linear-gradient(135deg, rgba(31, 122, 122, 0.08), transparent 34%),
          linear-gradient(180deg, #f7f9fb 0%, var(--bg) 38%, #e7ecf1 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"] .ai-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"] .ai-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"] .ai-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"] .ai-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"] .ai-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"] .ai-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"] .ai-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"] .ai-management,
      .app[data-view="comments-inbox"] .event-drawer,
      .app[data-view="role-management"] .event-drawer {
        display: none !important;
      }

      .app:not([data-view="sales-customer-analytics"]) .sales-customer-analytics,
      .app[data-view="sales-customer-analytics"] .dashboard,
      .app[data-view="sales-customer-analytics"] .customer-management,
      .app[data-view="sales-customer-analytics"] .customer-detail-view,
      .app[data-view="sales-customer-analytics"] .layout,
      .app[data-view="sales-customer-analytics"] .role-management,
      .app[data-view="sales-customer-analytics"] .customer-field-management,
      .app[data-view="sales-customer-analytics"] .ai-management,
      .app[data-view="sales-customer-analytics"] .comments-inbox-view,
      .app[data-view="sales-customer-analytics"] .event-drawer {
        display: none !important;
      }

      .app:not([data-view="customer-forms"]) .customer-form-view,
      .app[data-view="customer-forms"] .dashboard,
      .app[data-view="customer-forms"] .customer-management,
      .app[data-view="customer-forms"] .customer-detail-view,
      .app[data-view="customer-forms"] .layout,
      .app[data-view="customer-forms"] .sales-management,
      .app[data-view="customer-forms"] .role-management,
      .app[data-view="customer-forms"] .user-management,
      .app[data-view="customer-forms"] .customer-field-management,
      .app[data-view="customer-forms"] .ai-management,
      .app[data-view="customer-forms"] .comments-inbox-view,
      .app[data-view="customer-forms"] .sales-customer-analytics,
      .app[data-view="customer-forms"] .event-drawer {
        display: none !important;
      }

      .app:not([data-view="ai-management"]) > .ai-management,
      .app[data-view="ai-management"] .dashboard,
      .app[data-view="ai-management"] .customer-management,
      .app[data-view="ai-management"] .customer-detail-view,
      .app[data-view="ai-management"] .layout,
      .app[data-view="ai-management"] .sales-management,
      .app[data-view="ai-management"] .role-management,
      .app[data-view="ai-management"] .user-management,
      .app[data-view="ai-management"] .customer-field-management,
      .app[data-view="ai-management"] .comments-inbox-view,
      .app[data-view="ai-management"] .customer-form-view,
      .app[data-view="ai-management"] .sales-customer-analytics,
      .app[data-view="ai-management"] .event-drawer {
        display: none !important;
      }

      .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(246, 248, 251, 0.92);
        display: flex;
        flex-direction: column;
        inset: 0;
        justify-content: center;
        padding: 24px 24px 64px;
        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;
      }

      .login-icp-footer {
        bottom: 18px;
        color: var(--muted-strong);
        font-size: 12px;
        left: 24px;
        line-height: 1.5;
        position: absolute;
        right: 24px;
        text-align: center;
      }

      .login-icp-footer a {
        color: inherit;
        text-decoration: none;
      }

      .login-icp-footer a:hover {
        color: var(--accent-strong);
        text-decoration: underline;
        text-underline-offset: 3px;
      }

      .login-icp-footer a:focus-visible {
        border-radius: 4px;
        outline: 2px solid var(--accent);
        outline-offset: 3px;
      }

      @media (max-height: 520px) {
        .login-overlay {
          justify-content: flex-start;
          overflow-y: auto;
          padding: 16px;
        }

        .login-icp-footer {
          flex: none;
          margin-top: 14px;
          position: static;
          width: 100%;
        }
      }

      .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(3, minmax(140px, 1fr));
        overflow-x: auto;
      }

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

      .dashboard-panel {
        display: grid;
        gap: 12px;
        margin: 0 auto;
        max-width: 1280px;
        width: 100%;
      }

      .dashboard-panel + .dashboard-panel {
        border-top: 1px solid rgba(18, 140, 126, 0.18);
        border-top-color: rgba(31, 122, 122, 0.18);
        margin-top: 4px;
        padding-top: 16px;
      }

      .dashboard-panel-head {
        align-items: end;
        display: flex;
        gap: 12px;
        justify-content: space-between;
      }

      .dashboard-panel-head h2 {
        color: var(--text);
        font-size: 15px;
        line-height: 1.2;
        margin: 0;
      }

      .dashboard-panel-head p {
        color: var(--muted);
        font-size: 12px;
        line-height: 1.4;
        margin: 3px 0 0;
      }

      .dashboard-scope-chip {
        background: rgba(31, 122, 122, 0.1);
        border: 1px solid rgba(18, 140, 126, 0.18);
        border-color: rgba(31, 122, 122, 0.18);
        border-radius: 999px;
        color: var(--accent-strong);
        flex: 0 0 auto;
        font-size: 12px;
        font-weight: 700;
        padding: 5px 10px;
      }

      .dashboard-scope-chip.neutral {
        background: #f6f8fa;
        border-color: var(--line);
        color: #5c6b78;
      }

      .dashboard-customer-kpis {
        grid-template-columns: repeat(3, minmax(160px, 1fr));
      }

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

      .dashboard-instance-kpis {
        grid-template-columns: repeat(2, minmax(180px, 280px));
        justify-content: start;
        overflow-x: visible;
      }

      .dashboard-instance-panel .kpi {
        background: linear-gradient(180deg, #ffffff, #f7f9fb);
      }

      .dashboard-controls {
        align-items: center;
        display: flex;
        gap: 10px;
        justify-content: space-between;
        width: 100%;
      }

      .dashboard-range-tabs {
        background: var(--surface);
        border: 1px solid var(--line);
        border-radius: 8px;
        display: inline-grid;
        gap: 2px;
        grid-auto-flow: column;
        padding: 3px;
      }

      .dashboard-range-button {
        background: transparent;
        border: 0;
        border-radius: 6px;
        color: var(--muted);
        cursor: pointer;
        font: inherit;
        font-size: 13px;
        min-height: 30px;
        padding: 0 12px;
        white-space: nowrap;
      }

      .dashboard-range-button.active {
        background: var(--accent-soft);
        color: var(--accent-strong);
        font-weight: 700;
      }

      .dashboard-custom-toggle {
        display: none;
      }

      .dashboard-custom-range {
        align-items: center;
        display: flex;
        gap: 8px;
        min-width: 0;
      }

      .dashboard-custom-range label {
        align-items: center;
        color: var(--muted);
        display: flex;
        font-size: 12px;
        gap: 6px;
        white-space: nowrap;
      }

      .dashboard-custom-range input {
        background: var(--surface);
        border: 1px solid var(--line);
        border-radius: 8px;
        color: var(--text);
        font: inherit;
        font-size: 13px;
        height: 32px;
        max-width: 190px;
        padding: 0 8px;
      }

      .admin-wa-alerts {
        background: #fff4df;
        border: 1px solid #fed7aa;
        border-color: #eccb91;
        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(31, 122, 122, 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;
      }

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

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

      .customer-filter-panel {
        display: block;
      }

      .customer-filter-summary {
        align-items: center;
        cursor: pointer;
        display: none;
        gap: 12px;
        justify-content: space-between;
        list-style: none;
        min-height: 44px;
        padding: 9px 12px;
        user-select: none;
      }

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

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

      .customer-filter-summary-copy strong {
        color: var(--text);
        font-size: 13px;
        font-weight: 800;
        line-height: 1.2;
      }

      .customer-filter-summary-copy small {
        color: var(--muted);
        font-size: 11px;
        font-weight: 700;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .customer-filter-summary-state {
        align-items: center;
        background: #e6f3f2;
        border: 1px solid #cfe2dc;
        border-color: #b7d8d8;
        border-radius: 999px;
        color: #176363;
        display: inline-flex;
        flex: 0 0 auto;
        font-size: 12px;
        font-weight: 800;
        gap: 6px;
        min-height: 28px;
        padding: 0 10px;
      }

      .customer-filter-summary-state::before {
        content: '⌄';
        display: inline-block;
        font-size: 13px;
        line-height: 1;
        transition: transform 160ms ease;
      }

      .customer-filter-summary-state::after {
        content: '展开';
      }

      .customer-filter-panel[open] .customer-filter-summary {
        border-bottom: 1px solid rgba(216, 223, 220, 0.72);
        border-bottom-color: rgba(216, 227, 232, 0.72);
      }

      .customer-filter-panel[open] .customer-filter-summary-state::before {
        transform: rotate(180deg);
      }

      .customer-filter-panel[open] .customer-filter-summary-state::after {
        content: '收起';
      }

      .customer-filter-panel .customer-filter-form {
        display: grid;
      }

      .customer-filter-form {
        align-items: end;
        background: rgba(255, 255, 255, 0.94);
        border: 1px solid rgba(216, 223, 220, 0.86);
        border-color: rgba(216, 227, 232, 0.86);
        border-radius: 12px;
        box-shadow: 0 8px 18px rgba(20, 42, 52, 0.05);
        display: grid;
        gap: 8px;
        grid-template-columns: minmax(220px, 1.25fr) minmax(150px, 0.9fr) minmax(150px, 0.9fr) minmax(140px, 0.85fr) minmax(120px, 0.7fr) minmax(120px, 0.7fr) minmax(120px, 0.7fr) auto;
        padding: 10px 12px;
      }

      .customer-filter-field {
        display: grid;
        gap: 4px;
        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-color: #d8e3e8;
        border-radius: 8px;
        color: var(--text);
        font: inherit;
        font-size: 13px;
        min-height: 34px;
        min-width: 0;
        padding: 0 9px;
        width: 100%;
      }

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

      .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-size: 13px;
        font-weight: 800;
        justify-content: center;
        min-height: 34px;
        padding: 0 12px;
        white-space: nowrap;
      }

      .customer-filter-button.secondary {
        background: #fff;
        border-color: #d8e3e8;
        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);
        border-bottom-color: rgba(216, 227, 232, 0.8);
        box-shadow: 0 10px 28px rgba(20, 42, 52, 0.06);
        display: flex;
        gap: 14px;
        justify-content: space-between;
        min-width: 0;
        padding: 12px 18px;
        position: relative;
        z-index: 2;
      }

      .customer-management-head h2 {
        font-size: 19px;
        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(20, 42, 52, 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: #b9cfd4;
        color: var(--accent);
        font-weight: 800;
        height: 26px;
        min-width: 32px;
        justify-content: center;
      }

      .customer-pagination {
        background: rgba(255, 255, 255, 0.96);
        border: 1px solid rgba(216, 223, 220, 0.86);
        border-color: rgba(216, 227, 232, 0.86);
        border-top: 0;
        border-radius: 0 0 14px 14px;
        box-shadow: 0 14px 34px rgba(20, 42, 52, 0.08);
        display: flex;
        align-items: center;
        gap: 14px;
        justify-content: space-between;
        margin-top: -1px;
        min-height: 52px;
        padding: 8px 14px;
        font-size: 13px;
        color: var(--muted);
      }

      .customer-table-wrap:has(+ .customer-pagination:not([hidden])) {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
      }

      .pagination-total {
        align-items: center;
        color: var(--muted-strong);
        display: inline-flex;
        flex: 0 0 160px;
        gap: 8px;
        font-weight: 700;
        white-space: nowrap;
      }

      .pagination-total-count {
        align-items: center;
        background: var(--accent-soft);
        border: 1px solid #b7ddd6;
        border-color: #b9cfd4;
        border-radius: 999px;
        color: var(--accent);
        display: inline-flex;
        font-weight: 800;
        justify-content: center;
        min-height: 26px;
        min-width: 34px;
        padding: 0 10px;
      }

      .pagination-pages,
      .pagination-controls,
      .pagination-jump {
        align-items: center;
        display: flex;
      }

      .pagination-pages {
        flex: 1 1 auto;
        gap: 8px;
        justify-content: center;
        min-width: 0;
      }

      .pagination-controls {
        flex: 0 0 auto;
        gap: 12px;
      }

      .customer-pagination .pagination-btn {
        background: #fff;
        border: 1px solid rgba(205, 214, 210, 0.95);
        border-radius: 6px;
        color: var(--text);
        cursor: pointer;
        font-size: 13px;
        font-weight: 600;
        line-height: 1;
        min-height: 32px;
        min-width: 34px;
        padding: 0 11px;
        transition: background .16s ease, border-color .16s ease, color .16s ease, opacity .16s ease;
      }

      .customer-pagination .pagination-btn.active {
        background: var(--accent);
        border-color: var(--accent);
        color: #fff;
        box-shadow: 0 8px 18px rgba(31, 122, 122, 0.22);
      }

      .customer-pagination .pagination-prev,
      .customer-pagination .pagination-next {
        min-width: 62px;
      }

      .customer-pagination .pagination-btn:disabled {
        opacity: .35;
        cursor: default;
      }

      .pagination-ellipsis {
        color: var(--muted);
        min-width: 22px;
        text-align: center;
      }

      .pagination-size select,
      .pagination-jump input {
        background: #fff;
        border: 1px solid rgba(205, 214, 210, 0.95);
        border-radius: 6px;
        color: var(--text);
        font: inherit;
        height: 32px;
      }

      .pagination-size select {
        min-width: 104px;
        padding: 0 28px 0 10px;
      }

      .pagination-jump {
        color: var(--muted);
        gap: 7px;
        white-space: nowrap;
      }

      .pagination-jump input {
        text-align: center;
        width: 66px;
      }

      .customer-pagination .pagination-go {
        min-width: 48px;
      }

      @media (max-width: 1080px) {
        .customer-pagination {
          align-items: stretch;
          flex-wrap: wrap;
        }

        .pagination-total {
          flex: 1 1 100%;
        }

        .pagination-pages {
          justify-content: flex-start;
        }
      }

      @media (max-width: 640px) {
        .customer-pagination {
          border-radius: 0 0 12px 12px;
          gap: 8px;
          min-height: 44px;
          padding: 8px 10px;
        }

        .pagination-total {
          flex: 1 1 100%;
        }

        .pagination-pages {
          flex: 1 1 auto;
          gap: 6px;
          justify-content: space-between;
        }

        .customer-pagination .pagination-prev,
        .customer-pagination .pagination-next {
          min-width: 70px;
        }

        .customer-pagination .page-number:not(.active),
        .customer-pagination .pagination-ellipsis,
        .customer-pagination .pagination-controls {
          display: none;
        }
      }

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

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

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

      .customer-table th {
        background: rgba(242, 246, 248, 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;
        height: 66px;
        transition: background 140ms ease, box-shadow 140ms ease;
      }

      .customer-table .primary-cell {
        color: var(--text);
        display: block;
        font-weight: 800;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .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;
        min-width: 0;
        padding: 0;
        text-align: left;
        width: 100%;
      }

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

      .customer-table .customer-owner-cell {
        text-align: center;
        vertical-align: middle;
      }

      .customer-table .customer-name-cell {
        text-align: left;
        vertical-align: middle;
      }

      .customer-table .customer-name-cell button {
        gap: 12px;
        justify-content: flex-start;
        min-height: 46px;
        text-align: left;
      }

      .customer-cell-main-single {
        justify-items: start;
        text-align: left;
      }

      .customer-owner-single {
        justify-items: center;
        text-align: center;
      }

      .customer-table .customer-name-cell .primary-cell {
        display: -webkit-box;
        line-height: 1.35;
        max-width: 100%;
        overflow-wrap: anywhere;
        white-space: normal;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
      }

      .customer-table .customer-owner-cell .primary-cell {
        max-width: 100%;
        white-space: nowrap;
      }

      .customer-table th:nth-child(3),
      .customer-table th:nth-child(4),
      .customer-table th:nth-child(5),
      .customer-table th:nth-child(6),
      .customer-table th:nth-child(9),
      .customer-table th:nth-child(10),
      .customer-table td:nth-child(3),
      .customer-table td:nth-child(4),
      .customer-table td:nth-child(5),
      .customer-table td:nth-child(6),
      .customer-table td:nth-child(9),
      .customer-table td:nth-child(10) {
        text-align: center;
      }

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

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

      .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-table .customer-name-cell .avatar {
        height: 44px;
        width: 44px;
      }

      .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);
        display: -webkit-box;
        line-height: 1.45;
        max-width: 100%;
        overflow: hidden;
        overflow-wrap: anywhere;
        white-space: normal;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
      }

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

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

      .customer-row-actions {
        align-items: center;
        display: flex;
        flex-wrap: nowrap;
        gap: 6px;
        justify-content: center;
        white-space: nowrap;
      }

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

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

      .customer-table .customer-action-button.danger {
        background: var(--danger-soft);
        border-color: #f1c5c1;
        color: var(--danger);
      }

      .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: #fff4df;
        color: #b7791f;
      }

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

      .customer-chip.tag-status {
        background: #f7f9fb;
        border: 1px solid #e1e6e3;
        border-color: #e2e8ec;
        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-chip.grade-chip {
        border: 1px solid #d8e3df;
        border-color: #d8e3e8;
      }

      .customer-chip.grade-unrated {
        background: #f7f9fb;
        border-color: #d8e3e8;
        color: #5c6b78;
      }

      .customer-chip.grade-a {
        background: #FFF4D8;
        border-color: #E7C96C;
        color: #7A5208;
      }

      .customer-chip.grade-b {
        background: #E8F7EF;
        border-color: #B7DFC7;
        color: #1F6B3A;
      }

      .customer-chip.grade-c {
        background: #EAF3FF;
        border-color: #BFD7F5;
        color: #245D9C;
      }

      .customer-chip.grade-d {
        background: #F1F3F6;
        border-color: #D3D8E0;
        color: #4B5563;
      }

      .customer-grade-select.grade-unrated,
      .grade-filter-pill.grade-unrated {
        background: #f7f9fb;
        border-color: #d8e3e8;
        color: #5c6b78;
      }

      .customer-grade-select.grade-a,
      .grade-filter-pill.grade-a {
        background: #FFF4D8;
        border-color: #E7C96C;
        color: #7A5208;
      }

      .customer-grade-select.grade-b,
      .grade-filter-pill.grade-b {
        background: #E8F7EF;
        border-color: #B7DFC7;
        color: #1F6B3A;
      }

      .customer-grade-select.grade-c,
      .grade-filter-pill.grade-c {
        background: #EAF3FF;
        border-color: #BFD7F5;
        color: #245D9C;
      }

      .customer-grade-select.grade-d,
      .grade-filter-pill.grade-d {
        background: #F1F3F6;
        border-color: #D3D8E0;
        color: #4B5563;
      }

      .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-color: rgba(216, 227, 232, 0.9);
        border-radius: 8px;
        box-shadow: 0 10px 24px rgba(20, 42, 52, 0.08);
        display: grid;
        gap: 12px;
        min-width: 0;
        padding: 14px;
      }

      .customer-mobile-card.active {
        border-color: rgba(31, 122, 122, 0.36);
        box-shadow: inset 4px 0 0 var(--accent), 0 10px 24px rgba(20, 42, 52, 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: #f7f9fb;
        border: 1px solid #d8e3df;
        border-color: #d8e3e8;
        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);
      }

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

      .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);
        border-bottom-color: rgba(216, 227, 232, 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-color: #d8e3e8;
        border-radius: 8px;
        color: var(--text);
        font: inherit;
        min-height: 38px;
        min-width: 0;
        padding: 0 10px;
        width: 100%;
      }

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

      .ai-management-head {
        align-items: center;
        grid-template-columns: minmax(0, 1fr) auto;
      }

      .ai-management-head-main {
        align-items: center;
        display: grid;
        gap: 14px;
        grid-template-columns: auto minmax(260px, 1fr);
        min-width: 0;
      }

      .ai-management-copy {
        min-width: 260px;
      }

      .ai-management-copy h2 {
        font-size: 20px;
        letter-spacing: 0;
      }

      .ai-management-copy p {
        max-width: 620px;
      }

      .ai-management-actions {
        align-items: center;
        display: flex;
        gap: 12px;
        position: relative;
      }

      .ai-template-download-menu {
        position: relative;
      }

      .ai-template-download-menu summary {
        list-style: none;
      }

      .ai-template-download-menu summary::-webkit-details-marker {
        display: none;
      }

      .ai-template-download-trigger {
        align-items: center;
        cursor: pointer;
        display: inline-flex;
        gap: 6px;
        user-select: none;
      }

      .ai-template-download-trigger::after {
        border-left: 4px solid transparent;
        border-right: 4px solid transparent;
        border-top: 5px solid currentColor;
        content: "";
        display: inline-block;
        height: 0;
        width: 0;
      }

      .ai-template-download-panel {
        background: var(--surface);
        border: 1px solid rgba(199, 218, 211, 0.95);
        border-radius: 8px;
        box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
        display: grid;
        gap: 4px;
        min-width: 150px;
        padding: 8px;
        position: absolute;
        right: 0;
        top: calc(100% + 8px);
        z-index: 20;
      }

      .ai-template-download-panel a {
        border-radius: 6px;
        color: #174a40;
        font-size: 13px;
        padding: 7px 9px;
        text-decoration: none;
        white-space: nowrap;
      }

      .ai-template-download-panel a:hover {
        background: #e8f6f2;
        color: #0b7f69;
      }

      .ai-management[data-ai-management-tab="knowledge"] [data-ai-management-copy="model-config"],
      .ai-management[data-ai-management-tab="model-config"] [data-ai-management-copy="knowledge"],
      .ai-management[data-ai-management-tab="knowledge"] [data-ai-management-actions="model-config"],
      .ai-management[data-ai-management-tab="model-config"] [data-ai-management-actions="knowledge"],
      .ai-management[data-ai-management-tab="knowledge"] > .ai-model-config-management,
      .ai-management[data-ai-management-tab="model-config"] > .ai-knowledge-management {
        display: none;
      }

      .ai-knowledge-management,
      .ai-model-config-management {
        align-content: start;
        overflow: auto;
        position: relative;
      }

      .management-body.ai-management-list-body {
        grid-template-columns: minmax(0, 1fr);
        min-height: auto;
        overflow: visible;
        padding-top: 14px;
      }

      .ai-knowledge-management .customer-field-filter-bar {
        align-items: end;
        grid-template-columns: minmax(180px, 260px) minmax(160px, 220px);
        justify-content: start;
        padding: 14px 20px;
      }

      .ai-management .management-table-wrap {
        background: var(--surface);
        border-color: rgba(216, 227, 232, 0.95);
      }

      .ai-management .management-table {
        min-width: 980px;
        table-layout: fixed;
      }

      .ai-management .management-table th {
        background: #f6f8fa;
        color: #5c6b78;
        height: 38px;
        text-transform: none;
      }

      .ai-management .management-table td {
        padding: 13px 14px;
        vertical-align: middle;
      }

      .ai-table-row {
        cursor: pointer;
      }

      .ai-table-row:hover td {
        background: #fbfcfd;
      }

      .ai-title-cell strong,
      .ai-title-cell span {
        display: block;
        max-width: 320px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .ai-title-cell strong {
        color: var(--text);
        font-size: 13px;
      }

      .ai-title-cell span {
        color: var(--muted);
        font-size: 12px;
        margin-top: 4px;
      }

      .ai-pill,
      .ai-status-pill {
        align-items: center;
        border: 1px solid transparent;
        border-radius: 999px;
        display: inline-flex;
        font-size: 12px;
        font-weight: 800;
        min-height: 24px;
        padding: 2px 8px;
        white-space: nowrap;
      }

      .ai-pill.region,
      .ai-status-pill.active {
        background: #edf8f3;
        border-color: #cde7dc;
        color: #16745f;
      }

      .ai-pill.product {
        background: #f4f7fb;
        border-color: #dce6f3;
        color: #385c86;
      }

      .ai-pill.playbook {
        background: #f7f4ee;
        border-color: #e8dcc9;
        color: #6d5738;
      }

      .ai-pill.policy,
      .ai-status-pill.draft,
      .ai-status-pill.archived {
        background: #f3f4f4;
        border-color: #d6dddd;
        color: #5d6964;
      }

      .ai-time-cell {
        color: #4d5b56;
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
      }

      .ai-table-actions {
        align-items: center;
        display: flex;
        gap: 8px;
        justify-content: flex-end;
        white-space: nowrap;
      }

      .management-table .ai-table-actions .detail-button {
        border: 1px solid #cfded8;
        border-color: #d8e3e8;
        border-radius: 8px;
        box-shadow: none;
        font-size: 12px;
        min-height: 28px;
        padding: 4px 10px;
        text-align: center;
      }

      .management-table .ai-table-actions .detail-button:not(.ghost) {
        background: #eef2f5;
        border-color: #b9c9d1;
        color: #176363;
      }

      .management-table .ai-table-actions .detail-button.ghost {
        background: #f6f8fa;
      }

      .ai-model-config-list-body {
        display: grid;
        gap: 12px;
        grid-template-rows: minmax(0, 1fr);
        min-height: 0;
        overflow: auto;
        padding: 14px 20px;
      }

      .ai-model-config-switch {
        align-items: center;
        background: rgba(255, 255, 255, 0.94);
        border-bottom: 1px solid rgba(216, 223, 220, 0.8);
        border-bottom-color: rgba(216, 227, 232, 0.8);
        display: flex;
        justify-content: space-between;
        padding: 12px 20px;
      }

      .ai-model-config-counts {
        align-items: center;
        border-top: 1px solid rgba(216, 223, 220, 0.8);
        border-top-color: rgba(216, 227, 232, 0.8);
        color: var(--muted);
        display: flex;
        flex-wrap: wrap;
        gap: 14px;
        padding: 0 20px 16px;
      }

      .ai-model-config-counts strong {
        color: var(--text);
        font-variant-numeric: tabular-nums;
      }

      .ai-secondary-page {
        background: var(--surface);
        border: 0;
        border-radius: 0;
        inset: 0;
        overflow: auto;
        position: absolute;
        z-index: 8;
      }

      .ai-secondary-page[hidden] {
        display: none;
      }

      .ai-secondary-page > div {
        margin: 0 auto;
        max-width: 860px;
      }

      .ai-form-shell {
        display: grid;
        gap: 14px;
        padding: 18px 20px 22px;
      }

      .ai-form-head {
        align-items: center;
        border-bottom: 1px solid rgba(216, 223, 220, 0.85);
        border-bottom-color: rgba(216, 227, 232, 0.85);
        display: flex;
        gap: 12px;
        justify-content: space-between;
        padding-bottom: 12px;
      }

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

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

      .ai-field-input.readonly,
      .ai-field-textarea.readonly {
        background: var(--surface-soft);
        color: var(--muted-strong);
        cursor: default;
      }

      .ai-field-textarea {
        font-size: 13px;
        line-height: 1.55;
        min-height: 220px;
        resize: vertical;
      }

      .ai-toggle-row,
      .ai-form-actions {
        align-items: center;
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
      }

      .ai-form-note {
        color: var(--muted);
        font-size: 12px;
        min-height: 16px;
      }

      .ai-form-note-strong {
        background: #e6f3f2;
        border: 1px solid #d9ebe4;
        border-color: #b7d8d8;
        border-radius: 8px;
        color: #176363;
        font-size: 12px;
        line-height: 1.5;
        padding: 8px 10px;
      }

      .ai-form-error {
        color: #b9473f;
        font-size: 12px;
        min-height: 14px;
      }

      .ai-knowledge-field-hidden {
        display: none !important;
      }

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

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

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

      .customer-field-source-chip.system {
        background: #eef2f5;
        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 .account-name-cell,
      .user-management .management-table tbody > tr > td:nth-child(3) {
        text-align: center;
        vertical-align: middle;
      }

      .management-table .account-name-cell .primary-cell {
        display: block;
      }

      .user-management .management-table tbody > tr > td:first-child button {
        text-align: center;
        width: 100%;
      }

      .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);
      }

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

      .customer-form-view {
        grid-template-rows: minmax(0, 1fr);
        justify-self: stretch;
        width: 100%;
      }

      .customer-form-workbench {
        box-sizing: border-box;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        min-height: 0;
        overflow: hidden;
        padding: 16px 18px;
        width: 100%;
      }

      .customer-form-list-panel {
        border: 1px solid var(--line);
        border-radius: 8px;
        display: grid;
        min-height: 0;
        min-width: 0;
        overflow: hidden;
        width: 100%;
        justify-self: stretch;
      }

      .customer-form-import-modal {
        align-items: center;
        background: rgba(15, 23, 42, 0.32);
        display: flex;
        inset: 0;
        justify-content: center;
        padding: 24px;
        position: fixed;
        z-index: 60;
      }

      .customer-form-import-modal[hidden] {
        display: none;
      }

      .customer-form-import-dialog {
        background: var(--surface);
        border: 1px solid var(--line);
        border-radius: 8px;
        box-shadow: 0 24px 70px rgba(15, 23, 42, 0.22);
        display: grid;
        gap: 12px;
        grid-template-rows: auto minmax(220px, 0.8fr) auto auto minmax(180px, 1fr);
        max-height: min(840px, calc(100dvh - 48px));
        max-width: 960px;
        min-height: 560px;
        overflow: hidden;
        padding: 16px;
        width: min(960px, calc(100vw - 48px));
      }

      .customer-form-import-head {
        align-items: start;
        display: flex;
        justify-content: space-between;
        gap: 10px;
      }

      .customer-form-import-head h3 {
        font-size: 18px;
        margin: 0 0 4px;
      }

      .customer-form-import-head span {
        color: var(--muted);
        font-size: 12px;
      }

      .customer-form-import-dialog textarea {
        border: 1px solid #d8e3df;
        border-color: #d8e3e8;
        border-radius: 8px;
        font: inherit;
        min-height: 0;
        padding: 10px;
        resize: none;
      }

      .customer-form-import-summary {
        align-items: center;
        background: #f6fbf9;
        border: 1px solid #d8e8e2;
        border-radius: 8px;
        color: var(--muted-strong);
        display: flex;
        flex-wrap: wrap;
        font-size: 13px;
        font-weight: 800;
        gap: 10px;
        min-height: 42px;
        padding: 8px 10px;
      }

      .customer-form-import-summary span {
        align-items: baseline;
        display: inline-flex;
        gap: 4px;
        white-space: nowrap;
      }

      .customer-form-import-summary strong {
        color: var(--accent);
        font-size: 18px;
        line-height: 1;
      }

      .customer-form-preview {
        border-top: 1px solid var(--line);
        min-height: 0;
        overflow: auto;
        padding-top: 12px;
      }

      .customer-form-preview-item {
        border: 1px solid var(--line);
        border-radius: 8px;
        margin-bottom: 10px;
        padding: 10px;
      }

      .customer-form-row-head,
      .customer-form-meta {
        color: var(--muted);
        display: flex;
        flex-wrap: wrap;
        font-size: 12px;
        gap: 8px;
        margin: 6px 0;
      }

      .customer-form-preview pre,
      .customer-form-raw {
        background: var(--surface-soft);
        border-radius: 8px;
        color: var(--text);
        font: 12px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
        margin: 0;
        max-height: 180px;
        overflow: auto;
        padding: 8px;
        white-space: pre-wrap;
        word-break: break-word;
      }

      .customer-form-list-panel {
        grid-template-rows: auto minmax(0, 1fr);
      }

      /* P2 修按钮堆叠 + 修加载抖动：桌面原为 2 列 grid + 日期控件贪婪 1fr 撑爆重叠。改为【单行 flex nowrap】：
         筛选项紧凑不虚胖(不 grow)、日期填中间、筛选块 grow 把操作按钮顶到最右，整排一行不重叠。
         nowrap = 永不换行，故点日期快捷按钮时命令行里"加载中"文本瞬时出现也不会触发 wrap/unwrap 纵向抖动
         ("功能栏跳一下再恢复")；窄屏筛选项可收缩(min-width 收窄)保持一行，手机 ≤767px 另有堆叠规则。 */
      .customer-form-toolbar {
        align-items: flex-end;
        border-bottom: 1px solid var(--line);
        display: flex;
        flex-wrap: nowrap;
        gap: 12px;
        min-width: 0;
        padding: 12px 14px 14px;
        width: 100%;
      }

      .customer-form-filter-toggle {
        align-items: center;
        background: var(--surface);
        border: 1px solid var(--line);
        border-radius: 8px;
        color: var(--accent-strong);
        cursor: pointer;
        display: none;
        font: inherit;
        font-size: 13px;
        font-weight: 800;
        justify-content: center;
        min-height: 38px;
        padding: 0 12px;
        white-space: nowrap;
      }

      .customer-form-filter-toggle.has-active-filters {
        background: var(--accent-soft);
        border-color: rgba(18, 128, 111, 0.28);
      }

      .customer-form-filter-toggle::after {
        content: '⌄';
        font-size: 14px;
        line-height: 1;
        margin-left: 6px;
        transition: transform 160ms ease;
      }

      .customer-form-filter-toggle[aria-expanded="true"]::after {
        transform: rotate(180deg);
      }

      .customer-form-controls-panel {
        display: contents;
      }

      .customer-form-filters {
        align-items: flex-end;
        display: flex;
        flex: 0 1 auto;
        flex-wrap: nowrap;
        gap: 10px;
        min-width: 0;
      }

      .customer-form-toolbar .customer-field-filter {
        flex: 0 1 160px;
        min-width: 120px;
      }

      .customer-form-date-controls {
        align-items: flex-end;
        display: flex;
        flex: 0 0 auto;
        flex-wrap: nowrap;
        gap: 8px;
        justify-content: flex-start;
        min-width: 0;
      }

      .customer-form-date-controls .dashboard-range-tabs {
        flex: 0 0 auto;
        height: 38px;
        padding: 2px;
      }

      .customer-form-date-controls .dashboard-range-button {
        font-size: 13px;
        min-height: 34px;
        padding: 0 12px;
      }

      .customer-form-date-controls .dashboard-custom-range {
        align-items: end;
        display: flex;
        flex-wrap: nowrap;
        gap: 8px;
        min-width: 0;
      }

      .customer-form-date-controls .dashboard-custom-range label {
        font-size: 11px;
        gap: 5px;
      }

      .customer-form-date-controls .dashboard-custom-range input {
        font-size: 12px;
        height: 38px;
        max-width: 180px;
        min-width: 140px;
        padding: 0 7px;
      }

      .customer-form-date-controls .detail-button {
        align-items: center;
        display: inline-flex;
        font-size: 13px;
        justify-content: center;
        min-height: 38px;
        padding: 0 14px;
      }

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

      /* P2 运营管理工具栏 UI 统一（纯展示）：动作按钮与筛选控件(select/input/日期)统一 38px 高、
         统一字号/内边距/圆角，视觉整齐；不改任何 handler/结构/接口。只统尺寸不改配色——危险(删除选中)红、
         主按钮(导入表单/分发销售)accent 背景与阴影各自保留(仍突出)、次按钮 secondary 各自保留。 */
      .customer-form-actions .detail-button {
        align-items: center;
        display: inline-flex;
        font-size: 13px;
        justify-content: center;
        min-height: 38px;
        padding: 0 14px;
        white-space: nowrap;
      }

      .customer-form-command-row {
        align-items: center;
        align-self: flex-end;
        display: flex;
        flex: 0 0 auto;
        flex-wrap: nowrap;
        gap: 10px;
        justify-content: flex-end;
        margin-left: auto;
        min-height: 38px;
        min-width: 0;
      }

      /* 预留"加载中"文本的稳定宽度：点日期快捷按钮时加载态出现/消失不改变命令行宽度，避免筛选项被挤动
         （配合工具栏 nowrap，横向纵向都不抖）。空态就是一小段固定间距，视觉无妨。 */
      .customer-form-command-row .detail-status {
        flex: 0 0 auto;
        min-width: 3.4em;
        white-space: nowrap;
      }

      .customer-form-sales-mode [data-customer-form-operator-only] {
        display: none !important;
      }

      .customer-form-sales-mode .customer-form-toolbar {
        grid-template-columns: minmax(0, 1fr) max-content;
      }

      .customer-form-sales-mode .customer-form-filters {
        grid-template-columns: minmax(150px, 220px) minmax(150px, 220px) minmax(620px, 1fr);
      }

      .customer-form-sales-mode .customer-form-actions {
        justify-content: flex-end;
      }

      .customer-form-selection-count {
        color: var(--muted);
        font-size: 13px;
        line-height: 38px;
        white-space: nowrap;
      }

      .customer-form-time {
        color: var(--muted-strong);
        display: inline-flex;
        font-size: 12px;
        font-weight: 700;
        white-space: nowrap;
      }

      .customer-form-table-wrap {
        box-sizing: border-box;
        min-width: 0;
        width: 100%;
      }

      .customer-form-status {
        border-radius: 999px;
        display: inline-flex;
        font-size: 12px;
        font-weight: 700;
        padding: 4px 8px;
        width: fit-content;
      }

      .customer-form-add-status {
        border-radius: 999px;
        display: inline-flex;
        font-size: 12px;
        font-weight: 700;
        padding: 4px 8px;
        width: fit-content;
      }

      .customer-form-add-status.not_added {
        background: #f4f7f6;
        color: var(--muted-strong);
      }

      .customer-form-add-status.added {
        background: #eef2f5;
        color: var(--accent);
      }

      .customer-form-status.pending,
      .customer-form-status.assigned {
        background: #eef2f5;
        color: var(--accent);
      }

      .customer-form-status.matched_existing,
      .customer-form-status.added {
        background: #edf7ff;
        color: #1d5f91;
      }

      .customer-form-status.duplicate_existing {
        background: #fff3f0;
        color: #a23a2a;
      }

      .customer-form-status.invalid {
        background: var(--danger-soft);
        color: var(--danger);
      }

      .customer-form-status.needs_review {
        background: #fff4df;
        color: #7a5b12;
      }

      .customer-form-table {
        min-width: 1260px;
        width: 100%;
      }

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

      .customer-form-detail-row td {
        background: #fbfcfc;
        padding: 0;
      }

      .customer-form-detail-panel {
        border-top: 1px solid var(--line);
        padding: 14px 18px 18px;
      }

      .customer-form-detail-panel .customer-form-raw {
        max-height: 320px;
      }

      .customer-form-translation-grid {
        display: grid;
        gap: 14px;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      }

      .customer-form-source-panel,
      .customer-form-translated-panel {
        border: 1px solid var(--line);
        border-radius: 8px;
        min-width: 0;
        overflow: hidden;
      }

      .customer-form-source-panel {
        background: #f7f9fb;
      }

      .customer-form-translated-panel {
        background: #f3fbf8;
        border-color: rgba(31, 122, 122, 0.22);
      }

      .customer-form-panel-title {
        border-bottom: 1px solid var(--line);
        color: var(--muted);
        font-size: 12px;
        font-weight: 800;
        padding: 10px 12px;
      }

      .customer-form-translated-panel .customer-form-panel-title {
        color: var(--accent);
      }

      .customer-form-source-panel .customer-form-raw,
      .customer-form-translation-text {
        border-radius: 0;
        margin: 0;
        max-height: 320px;
        overflow: auto;
        padding: 12px;
      }

      .customer-form-translation-text {
        background: transparent;
        color: var(--text);
        font-family: inherit;
        line-height: 1.65;
        white-space: pre-wrap;
      }

      .customer-form-translation-empty {
        color: var(--muted);
        min-height: 120px;
        padding: 14px 12px;
      }

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

      .customer-form-edit-textarea {
        background: #fff;
        border: 1px solid #b9d8ce;
        border-radius: 8px;
        color: var(--text);
        font: 12px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
        min-height: 260px;
        outline: none;
        padding: 10px;
        resize: vertical;
        width: 100%;
      }

      .customer-form-edit-textarea:focus {
        border-color: var(--primary);
        box-shadow: 0 0 0 3px rgba(17, 148, 132, 0.12);
      }

      .customer-form-edit-status {
        color: var(--muted-strong);
        font-size: 12px;
        font-weight: 700;
      }

      .customer-form-distribute-dialog {
        max-width: 760px;
      }

      .customer-form-result-dialog {
        gap: 18px;
        grid-template-rows: auto auto auto;
        max-width: 920px;
        min-height: 0;
        width: min(920px, calc(100vw - 48px));
      }

      .customer-form-dialog {
        gap: 14px;
        grid-template-rows: auto auto auto;
        max-height: min(520px, calc(100dvh - 48px));
        max-width: 520px;
        min-height: 0;
        padding: 20px;
        width: min(520px, calc(100vw - 48px));
      }

      .customer-form-dialog textarea {
        min-height: 120px;
        resize: vertical;
      }

      .customer-form-dialog #customer-form-dialog-message {
        white-space: pre-line;
      }

      .customer-form-dialog.input-hidden textarea {
        display: none;
      }

      .customer-form-dialog-footer {
        align-items: center;
        border-top: 1px solid var(--line);
        display: flex;
        gap: 10px;
        justify-content: flex-end;
        padding-top: 14px;
      }

      .customer-form-dialog-footer .detail-status {
        margin-right: auto;
        min-width: 0;
      }

      .customer-form-result-body {
        display: grid;
        gap: 12px;
        min-height: 0;
        overflow: hidden;
      }

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

      .customer-form-result-card {
        background: #f7f9fb;
        border: 1px solid var(--line);
        border-radius: 8px;
        display: grid;
        gap: 8px;
        min-height: 92px;
        padding: 12px;
      }

      .customer-form-result-card span {
        color: var(--muted);
        font-size: 12px;
        font-weight: 800;
        line-height: 1.3;
      }

      .customer-form-result-card strong {
        color: var(--text);
        font-size: 24px;
        line-height: 1;
      }

      .customer-form-result-card.success {
        background: #eef8f4;
        border-color: rgba(31, 122, 122, 0.2);
      }

      .customer-form-result-card.existing {
        background: #edf7ff;
        border-color: rgba(29, 95, 145, 0.2);
      }

      .customer-form-result-card.warning {
        background: #fff4df;
        border-color: rgba(122, 91, 18, 0.24);
      }

      .customer-form-result-note {
        color: var(--muted);
        font-size: 13px;
      }

      .customer-form-result-detail {
        border: 1px solid var(--line);
        border-radius: 8px;
        display: grid;
        min-height: 0;
        overflow: hidden;
      }

      .customer-form-result-detail-title {
        background: #fbfcfc;
        border-bottom: 1px solid var(--line);
        color: var(--muted);
        font-size: 12px;
        font-weight: 800;
        padding: 10px 12px;
      }

      .customer-form-result-detail-list {
        display: grid;
        gap: 8px;
        max-height: min(42vh, 420px);
        overflow: auto;
        padding: 10px;
      }

      .customer-form-result-item {
        align-items: center;
        border: 1px solid var(--line);
        border-radius: 8px;
        display: grid;
        gap: 12px;
        grid-template-columns: minmax(0, 1fr) minmax(180px, auto);
        padding: 10px 12px;
      }

      .customer-form-result-item.pending {
        border-color: rgba(31, 122, 122, 0.18);
      }

      .customer-form-result-item.matched_existing {
        border-color: rgba(29, 95, 145, 0.18);
      }

      .customer-form-result-item.duplicate_existing {
        border-color: rgba(162, 58, 42, 0.22);
      }

      .customer-form-result-item.needs_review {
        border-color: rgba(122, 91, 18, 0.24);
      }

      .customer-form-result-item-main,
      .customer-form-result-item-status {
        display: grid;
        gap: 4px;
        min-width: 0;
      }

      .customer-form-result-item-main strong,
      .customer-form-result-item-main span,
      .customer-form-result-item-main small {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .customer-form-result-item-main span,
      .customer-form-result-item-main small,
      .customer-form-result-item-status em {
        color: var(--muted);
        font-size: 12px;
        font-style: normal;
      }

      .customer-form-result-footer {
        border-top: 1px solid var(--line);
        display: flex;
        justify-content: flex-end;
        padding-top: 12px;
      }

      #customer-forms-import-result-back {
        align-self: center;
      }

      @media (max-width: 900px) {
        .customer-form-result-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
      }

      .customer-form-distribute-list {
        display: grid;
        gap: 10px;
        max-height: min(54vh, 520px);
        overflow: auto;
        padding-right: 2px;
      }

      .customer-form-distribute-row {
        align-items: center;
        border: 1px solid var(--line);
        border-radius: 8px;
        display: grid;
        gap: 12px;
        grid-template-columns: minmax(0, 1fr) 132px;
        padding: 12px;
      }

      .customer-form-distribute-sales {
        display: grid;
        gap: 4px;
        min-width: 0;
      }

      .customer-form-distribute-sales strong,
      .customer-form-distribute-sales span,
      .customer-form-distribute-sales small {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .customer-form-distribute-sales span,
      .customer-form-distribute-sales small {
        color: var(--muted);
        font-size: 12px;
      }

      .customer-form-count-control {
        display: grid;
        gap: 6px;
      }

      .customer-form-count-control span {
        color: var(--muted);
        font-size: 12px;
        font-weight: 700;
      }

      .customer-form-count-control input {
        border: 1px solid var(--line);
        border-radius: 8px;
        font: inherit;
        min-height: 36px;
        padding: 0 10px;
        width: 100%;
      }

      .customer-form-distribute-footer {
        align-items: center;
        border-top: 1px solid var(--line);
        display: flex;
        gap: 12px;
        justify-content: space-between;
        padding-top: 12px;
      }

      .detail-button.compact {
        min-height: 32px;
        padding: 0 10px;
      }

      .detail-button.danger {
        background: var(--danger);
        border-color: var(--danger);
        color: #fff;
      }

      .detail-help {
        color: var(--muted);
        font-size: 13px;
        line-height: 1.45;
        margin-top: 6px;
      }

      .sales-analytics-filter-bar {
        gap: 10px;
        grid-template-columns: repeat(3, minmax(150px, 1fr)) auto;
        padding: 8px 18px 10px;
      }

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

      .sales-analytics-filter-bar .customer-field-filter {
        gap: 4px;
      }

      .sales-analytics-filter-bar .customer-field-filter span {
        font-size: 10px;
      }

      .sales-analytics-filter-bar .customer-field-filter select {
        font-size: 13px;
        min-height: 30px;
        padding: 0 9px;
      }

      .sales-analytics-filter-bar .detail-button {
        font-size: 13px;
        min-height: 30px;
        padding: 5px 10px;
        white-space: nowrap;
      }

      .sales-analytics-date-controls {
        background: rgba(255, 255, 255, 0.94);
        border-bottom: 1px solid rgba(216, 223, 220, 0.8);
        border-bottom-color: rgba(216, 227, 232, 0.8);
        padding: 8px 18px;
      }

      .sales-analytics-date-controls .dashboard-range-tabs {
        max-width: 460px;
        padding: 2px;
      }

      .sales-analytics-date-controls .dashboard-range-button {
        font-size: 12px;
        min-height: 26px;
        padding: 0 10px;
      }

      .sales-analytics-date-controls .dashboard-custom-range {
        flex: 1 1 480px;
        gap: 6px;
      }

      .sales-analytics-date-controls .dashboard-custom-range label {
        font-size: 11px;
        gap: 5px;
      }

      .sales-analytics-date-controls .dashboard-custom-range input {
        font-size: 12px;
        height: 28px;
        max-width: 170px;
        padding: 0 7px;
      }

      .sales-analytics-date-controls .detail-button {
        font-size: 13px;
        min-height: 30px;
        padding: 5px 10px;
      }

      .sales-analytics-table-wrap {
        border-radius: 0;
        border-width: 0;
        padding: 16px 18px;
      }

      .sales-analytics-table {
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 8px;
        min-width: 1040px;
        overflow: hidden;
      }

      .sales-analytics-table th {
        color: var(--muted-strong);
        font-size: 13px;
        font-weight: 800;
        padding: 13px 12px;
      }

      .sales-analytics-toggle {
        align-items: center;
        display: grid;
        gap: 2px 8px;
        grid-template-columns: 18px minmax(0, 1fr);
      }

      .sales-analytics-toggle span {
        color: var(--accent);
        font-size: 20px;
        grid-row: span 2;
        line-height: 1;
      }

      .sales-analytics-toggle strong {
        color: var(--text);
        font-size: 15px;
        font-weight: 800;
      }

      .sales-analytics-toggle small {
        color: var(--muted);
        font-size: 11px;
      }

      .sales-analytics-sales-row td {
        background: #ffffff;
        font-size: 15px;
        font-weight: 700;
        padding: 14px 12px;
      }

      .sales-analytics-sales-row td:first-child {
        box-shadow: inset 3px 0 0 var(--accent);
      }

      .sales-analytics-account-row td {
        background: #f3f6f9;
        font-size: 14px;
        padding: 10px 12px;
        vertical-align: middle;
      }

      .sales-analytics-account-row td:first-child {
        box-shadow: inset 3px 0 0 #d8e3e8;
        padding-left: 36px;
      }

      .sales-analytics-account-row + .sales-analytics-account-row td {
        border-top-color: rgba(216, 227, 232, 0.65);
      }

      .sales-analytics-account-name {
        align-items: center;
        display: flex;
        gap: 8px;
        min-width: 0;
      }

      .sales-analytics-account-name strong {
        color: var(--text);
        font-weight: 800;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .sales-analytics-account-name span {
        color: var(--muted-strong);
        font-size: 12px;
        min-width: 0;
      }

      .sales-analytics-account-status-dot {
        flex: 0 0 auto;
        border-radius: 999px;
        box-shadow: 0 0 0 3px rgba(238, 242, 245, 0.95);
        display: inline-block;
        height: 9px;
        width: 9px;
      }

      .sales-analytics-account-status-dot.ok {
        background: var(--ok);
      }

      .sales-analytics-account-status-dot.error {
        background: var(--danger);
      }

      .sales-management .management-table th,
      .sales-management .management-table td {
        text-align: center;
        vertical-align: middle;
      }

      .sales-management .management-table button {
        text-align: center;
        width: 100%;
      }

      .sales-management .management-table .primary-cell {
        display: block;
      }

      .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-color: #dfe7ec;
        border-radius: 12px;
        box-shadow: 0 10px 28px rgba(20, 42, 52, 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, #1f8a8a, #176363);
        border-radius: 999px;
        box-shadow: 0 10px 22px rgba(31, 122, 122, 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(31, 122, 122, 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(20, 42, 52, 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-color: rgba(216, 227, 232, 0.86);
        border-radius: 14px;
        box-shadow: 0 12px 30px rgba(20, 42, 52, 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-bottom-color: rgba(216, 227, 232, 0.72);
        border-right: 1px solid rgba(216, 223, 220, 0.72);
        border-right-color: rgba(216, 227, 232, 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-color: #dfe7ec;
        border-radius: 12px;
        box-shadow: 0 8px 22px rgba(20, 42, 52, 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-color: #dfe7ec;
        border-radius: 12px;
        box-shadow: 0 12px 30px rgba(20, 42, 52, 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);
        border-top-color: rgba(216, 227, 232, 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;
        border-top-color: #eef2f5;
        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, #1f8a8a, #176363);
        border-radius: 6px;
        box-shadow: 0 4px 10px rgba(31, 122, 122, 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-color: #dfe7ec;
        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(20, 42, 52, 0.06);
      }

      .customer-overview-field.is-editing {
        background: #f3fbf7;
        border-color: #12a58d;
        box-shadow: 0 0 0 3px rgba(31, 122, 122, 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(31, 122, 122, 0.12), 0 10px 24px rgba(20, 42, 52, 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-color: #dfe7ec;
        border-radius: 12px;
        box-shadow: 0 10px 26px rgba(20, 42, 52, 0.05);
        display: grid;
        gap: 12px;
        padding: 15px;
      }

      .customer-sidebar-card.is-summary {
        background: linear-gradient(180deg, #f6fafb 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: #f6f8fa;
        border-color: #f6f8fb;
        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-color: #dfe7ec;
        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(31, 122, 122, 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[hidden] {
        display: none;
      }

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

      .detail-field small,
      .field-hint {
        color: var(--muted);
        font-size: 12px;
        line-height: 1.5;
        margin: 0;
      }

      .detail-field small.error-text {
        color: var(--danger);
      }

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

      .field-readonly {
        background: var(--surface-soft);
        border: 1px solid var(--line);
        border-radius: 8px;
        color: var(--text);
        min-height: 34px;
        padding: 7px 9px;
      }

      .official-whatsapp-list-panel {
        display: grid;
        gap: 12px;
        align-content: start;
      }

      .official-whatsapp-head-actions {
        align-items: center;
        display: flex;
        flex: 0 0 auto;
        gap: 10px;
      }

      .official-whatsapp-webhook-open-button {
        white-space: nowrap;
      }

      .official-whatsapp-credential-box {
        background: #f0fdfa;
        border: 1px solid #99f6e4;
        border-radius: 8px;
        display: grid;
        gap: 12px;
        padding: 12px;
      }

      .official-whatsapp-credential-box[hidden] {
        display: none;
      }

      .official-whatsapp-webhook-drawer[hidden] {
        display: none;
      }

      .official-whatsapp-webhook-drawer {
        display: grid;
        inset: 0;
        justify-content: end;
        position: fixed;
        z-index: 70;
      }

      .official-whatsapp-webhook-backdrop {
        background: rgba(15, 23, 42, 0.28);
        inset: 0;
        position: absolute;
      }

      .official-whatsapp-webhook-panel {
        background: var(--surface);
        border-left: 1px solid var(--line);
        box-shadow: -18px 0 34px rgba(15, 23, 42, 0.16);
        display: grid;
        grid-template-rows: auto minmax(0, 1fr);
        height: 100vh;
        max-width: calc(100vw - 28px);
        position: relative;
        width: 560px;
      }

      .official-whatsapp-webhook-panel.warning {
        border-left-color: #e2a93b;
      }

      .official-whatsapp-webhook-panel.danger {
        border-left-color: var(--danger);
      }

      .official-whatsapp-webhook-panel-head,
      .official-whatsapp-webhook-summary,
      .official-whatsapp-webhook-actions,
      .official-whatsapp-webhook-row {
        align-items: flex-start;
        display: flex;
        gap: 12px;
        justify-content: space-between;
      }

      .official-whatsapp-webhook-panel-head {
        border-bottom: 1px solid var(--line);
        padding: 18px;
      }

      .official-whatsapp-webhook-panel-head h4 {
        margin: 0 0 4px;
      }

      .official-whatsapp-webhook-panel-head p,
      .official-whatsapp-webhook-hints p,
      .official-whatsapp-webhook-loading,
      .official-whatsapp-webhook-copy-status,
      .official-whatsapp-webhook-health-status,
      .official-whatsapp-webhook-security span,
      .official-whatsapp-webhook-recent p {
        color: var(--muted);
        font-size: 12px;
        line-height: 1.5;
        margin: 0;
      }

      .official-whatsapp-webhook-content {
        display: grid;
        gap: 12px;
        min-height: 0;
        overflow: auto;
        padding: 18px;
      }

      .official-whatsapp-webhook-pill {
        border: 1px solid var(--line);
        border-radius: 999px;
        color: var(--muted);
        flex: 0 0 auto;
        font-size: 12px;
        padding: 4px 9px;
        white-space: nowrap;
      }

      .official-whatsapp-webhook-pill.ok {
        background: #e6f3f2;
        border-color: rgba(31, 122, 122, 0.28);
        color: var(--accent);
      }

      .official-whatsapp-webhook-pill.warning {
        background: #fff3d6;
        border-color: #e2a93b;
        color: #7a5200;
      }

      .official-whatsapp-webhook-pill.danger {
        background: #ffecec;
        border-color: rgba(197, 48, 48, 0.35);
        color: var(--danger);
      }

      .official-whatsapp-webhook-risk {
        color: var(--muted);
        flex: 0 0 auto;
        font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
        font-size: 12px;
        padding-top: 4px;
      }

      .official-whatsapp-webhook-warning {
        border-radius: 8px;
        font-size: 12px;
        line-height: 1.55;
        padding: 9px 10px;
      }

      .official-whatsapp-webhook-warning.warning {
        background: #fff3d6;
        color: #7a5200;
      }

      .official-whatsapp-webhook-warning.danger {
        background: #ffecec;
        color: var(--danger);
      }

      .official-whatsapp-webhook-security {
        border: 1px solid var(--line);
        border-radius: 8px;
        display: grid;
        gap: 6px;
        padding: 10px;
      }

      .official-whatsapp-webhook-recent {
        border: 1px solid var(--line);
        border-radius: 8px;
        display: grid;
        gap: 8px;
        padding: 10px;
      }

      .official-whatsapp-webhook-security.ok {
        background: #f4f9f9;
        border-color: rgba(31, 122, 122, 0.2);
      }

      .official-whatsapp-webhook-recent.ok {
        background: #f4f9f9;
        border-color: rgba(31, 122, 122, 0.2);
      }

      .official-whatsapp-webhook-security.warning {
        background: #fffaf0;
        border-color: rgba(226, 169, 59, 0.45);
      }

      .official-whatsapp-webhook-recent.warning {
        background: #fffaf0;
        border-color: rgba(226, 169, 59, 0.45);
      }

      .official-whatsapp-webhook-recent.danger {
        background: #fff6f6;
        border-color: rgba(197, 48, 48, 0.32);
      }

      .official-whatsapp-webhook-security strong {
        color: var(--text);
        font-size: 13px;
      }

      .official-whatsapp-webhook-recent > strong,
      .official-whatsapp-webhook-recent-label {
        color: var(--text);
        font-size: 13px;
      }

      .official-whatsapp-webhook-recent-label {
        font-weight: 700;
      }

      .official-whatsapp-webhook-recent-detail {
        border-top: 1px solid rgba(15, 118, 110, 0.12);
        border-top-color: rgba(31, 122, 122, 0.12);
        padding-top: 8px;
      }

      .official-whatsapp-webhook-recent-detail summary {
        align-items: center;
        color: var(--muted-strong);
        cursor: pointer;
        display: flex;
        font-size: 12px;
        font-weight: 700;
        gap: 8px;
        justify-content: space-between;
        list-style: none;
        user-select: none;
      }

      .official-whatsapp-webhook-recent-detail summary::-webkit-details-marker {
        display: none;
      }

      .official-whatsapp-webhook-recent-detail summary::after {
        content: "展开";
        color: var(--muted);
        font-weight: 600;
      }

      .official-whatsapp-webhook-recent-detail[open] summary::after {
        content: "收起";
      }

      .official-whatsapp-webhook-recent-detail .official-whatsapp-webhook-recent-grid {
        padding-top: 8px;
      }

      .official-whatsapp-webhook-security code {
        color: var(--muted);
        font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
        font-size: 11px;
        overflow-wrap: anywhere;
      }

      .official-whatsapp-webhook-diagnostics {
        border: 1px solid rgba(15, 118, 110, 0.18);
        border-color: rgba(31, 122, 122, 0.18);
        border-radius: 8px;
        display: grid;
        gap: 10px;
        padding: 10px;
      }

      .official-whatsapp-webhook-diagnostics.warning {
        border-color: rgba(183, 121, 31, 0.24);
      }

      .official-whatsapp-webhook-diagnostics.danger {
        border-color: rgba(192, 57, 43, 0.2);
      }

      .official-whatsapp-webhook-diagnostics summary {
        align-items: center;
        color: var(--muted);
        cursor: pointer;
        display: flex;
        font-size: 12px;
        font-weight: 700;
        gap: 8px;
        justify-content: space-between;
        list-style: none;
        user-select: none;
      }

      .official-whatsapp-webhook-diagnostics summary::-webkit-details-marker {
        display: none;
      }

      .official-whatsapp-webhook-diagnostics summary::after {
        content: "展开";
        font-weight: 600;
      }

      .official-whatsapp-webhook-diagnostics[open] summary::after {
        content: "收起";
      }

      .official-whatsapp-webhook-diagnostics summary small {
        color: var(--muted);
        font-size: 11px;
        font-weight: 500;
        margin-left: auto;
      }

      .official-whatsapp-webhook-diagnostics-status {
        border: 1px solid rgba(15, 118, 110, 0.14);
        border-color: rgba(31, 122, 122, 0.14);
        border-radius: 999px;
        padding: 2px 8px;
      }

      .official-whatsapp-webhook-diagnostics-status.ok {
        background: rgba(31, 122, 122, 0.08);
        color: #176363;
      }

      .official-whatsapp-webhook-diagnostics-status.warning {
        background: rgba(183, 121, 31, 0.08);
        border-color: rgba(183, 121, 31, 0.18);
        color: #92400e;
      }

      .official-whatsapp-webhook-diagnostics-status.danger {
        background: rgba(192, 57, 43, 0.06);
        border-color: rgba(192, 57, 43, 0.14);
        color: #c0392b;
      }

      .official-whatsapp-webhook-diagnostics-brief {
        border: 1px solid rgba(15, 118, 110, 0.12);
        border-color: rgba(31, 122, 122, 0.12);
        border-radius: 8px;
        display: grid;
        gap: 6px 10px;
        grid-template-columns: minmax(88px, auto) minmax(0, 1fr);
        padding: 9px 10px;
      }

      .official-whatsapp-webhook-diagnostics-brief span {
        color: var(--muted);
        font-size: 12px;
      }

      .official-whatsapp-webhook-diagnostics-brief strong {
        color: var(--text);
        font-size: 12px;
        min-width: 0;
        overflow-wrap: anywhere;
      }

      .official-whatsapp-webhook-diagnostics-brief strong.ok {
        color: #176363;
      }

      .official-whatsapp-webhook-diagnostics-brief strong.warning {
        color: #92400e;
      }

      .official-whatsapp-webhook-diagnostics-brief strong.danger {
        color: #c0392b;
      }

      .official-whatsapp-webhook-diagnostics-detail {
        border-top: 1px solid rgba(15, 118, 110, 0.12);
        border-top-color: rgba(31, 122, 122, 0.12);
        padding-top: 8px;
      }

      .official-whatsapp-webhook-diagnostics-detail summary {
        color: var(--muted-strong);
      }

      .official-whatsapp-webhook-diagnostics-detail-body {
        display: grid;
        gap: 10px;
        padding-top: 10px;
      }

      .official-whatsapp-webhook-diagnostics-body {
        display: grid;
        gap: 10px;
      }

      .official-whatsapp-webhook-recent-grid {
        display: grid;
        gap: 6px 10px;
        grid-template-columns: minmax(120px, auto) minmax(0, 1fr);
      }

      .official-whatsapp-webhook-recent-grid span {
        color: var(--muted);
        font-size: 12px;
      }

      .official-whatsapp-webhook-recent-grid strong {
        color: var(--text);
        font-size: 12px;
        min-width: 0;
        overflow-wrap: anywhere;
      }

      .official-whatsapp-webhook-section-title {
        color: var(--muted);
        font-size: 12px;
        font-weight: 700;
        margin-top: 2px;
      }

      .official-whatsapp-webhook-legacy-urls {
        border-top: 1px solid var(--line);
        padding-top: 8px;
      }

      .official-whatsapp-webhook-legacy-urls summary {
        align-items: center;
        color: var(--muted-strong);
        cursor: pointer;
        display: flex;
        font-size: 12px;
        font-weight: 700;
        gap: 8px;
        justify-content: space-between;
        list-style: none;
        user-select: none;
      }

      .official-whatsapp-webhook-legacy-urls summary::-webkit-details-marker {
        display: none;
      }

      .official-whatsapp-webhook-legacy-urls summary::after {
        content: "展开";
        color: var(--muted);
        font-weight: 600;
      }

      .official-whatsapp-webhook-legacy-urls[open] summary::after {
        content: "收起";
      }

      .official-whatsapp-webhook-legacy-urls .official-whatsapp-webhook-urls {
        padding-top: 8px;
      }

      .official-whatsapp-webhook-urls,
      .official-whatsapp-webhook-hints {
        display: grid;
        gap: 10px;
      }

      .official-whatsapp-webhook-row {
        border: 1px solid var(--line);
        border-radius: 8px;
        padding: 10px;
      }

      .official-whatsapp-webhook-row.secure {
        background: #f4f9f9;
        border-color: rgba(31, 122, 122, 0.24);
      }

      .official-whatsapp-webhook-row > div {
        min-width: 0;
      }

      .official-whatsapp-webhook-label {
        color: var(--muted);
        display: block;
        font-size: 12px;
        margin-bottom: 5px;
      }

      .official-whatsapp-webhook-row code {
        color: var(--text);
        display: block;
        font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
        font-size: 12px;
        overflow-wrap: anywhere;
      }

      .official-whatsapp-webhook-copy-status.error-text {
        color: var(--danger);
      }

      .official-whatsapp-webhook-health-status.pass {
        color: var(--accent);
      }

      .official-whatsapp-webhook-health-status.fail,
      .official-whatsapp-webhook-health-status.error {
        color: var(--danger);
      }

      .official-whatsapp-webhook-health-status.checking {
        color: var(--muted);
      }

      .official-whatsapp-list-head {
        align-items: flex-start;
        display: flex;
        gap: 12px;
        justify-content: space-between;
      }

      .official-whatsapp-list-head h4 {
        margin: 0 0 4px;
      }

      .official-whatsapp-list-head p {
        color: var(--muted);
        font-size: 12px;
        line-height: 1.5;
        margin: 0;
      }

      .official-whatsapp-account-list {
        display: grid;
        gap: 10px;
      }

      .official-whatsapp-account-card {
        background: var(--surface);
        border: 1px solid var(--line);
        border-radius: 8px;
        color: var(--text);
        display: grid;
        gap: 7px;
        padding: 12px;
        text-align: left;
        width: 100%;
      }

      .official-whatsapp-account-card:hover,
      .official-whatsapp-account-card.active {
        border-color: var(--accent);
        box-shadow: 0 8px 18px rgba(31, 122, 122, 0.12);
      }

      .official-whatsapp-account-pick {
        background: transparent;
        border: 0;
        color: inherit;
        cursor: pointer;
        display: grid;
        gap: 7px;
        padding: 0;
        text-align: left;
        width: 100%;
      }

      .official-whatsapp-delete-button {
        justify-self: end;
      }

      .official-whatsapp-card-top,
      .official-whatsapp-card-meta {
        align-items: center;
        display: flex;
        gap: 8px;
        justify-content: space-between;
      }

      .official-whatsapp-card-top span,
      .official-whatsapp-card-line,
      .official-whatsapp-card-meta {
        color: var(--muted);
        font-size: 12px;
      }

      .official-whatsapp-card-line {
        overflow-wrap: anywhere;
      }

      .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: #f4f8fa !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-color: #dfe7ec;
        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: #fbfcfd;
        border-color: #d8e3e8;
      }

      #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(31, 122, 122, 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: #f7f9fb;
        border: 1px solid #e1e6e3;
        border-color: #e2e8ec;
        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: #fff4df;
        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(20, 42, 52, 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: #f7f9fb;
        border: 1px solid #e1e6e3;
        border-color: #e2e8ec;
        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(20, 42, 52, 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: #1f7a7a;
        --comment-soft: #e6f3f2;
      }

      .comment-tone-1 {
        --comment-accent: #1f7a7a;
        --comment-soft: #e6f3f2;
      }

      .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;
      }

      .engagement-center-controls {
        align-items: end;
        background: #f6f8fa;
        border-bottom: 1px solid var(--line);
        display: grid;
        gap: 18px;
        grid-template-columns: max-content minmax(540px, 680px);
        justify-content: start;
        padding: 14px 20px;
      }

      .engagement-control-main {
        align-items: center;
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        min-width: 0;
      }

      .segmented-control {
        background: var(--bg);
        border: 1px solid var(--line);
        border-radius: 8px;
        display: inline-flex;
        gap: 4px;
        padding: 4px;
      }

      .engagement-stat {
        align-items: center;
        background: var(--surface);
        border: 1px solid var(--line);
        border-radius: 8px;
        display: inline-flex;
        gap: 8px;
        min-height: 42px;
        padding: 0 12px;
        white-space: nowrap;
      }

      .engagement-stat-row {
        display: contents;
      }

      .engagement-stat span {
        color: var(--muted);
        font-size: 12px;
      }

      .engagement-stat strong {
        color: var(--accent-strong);
        font-size: 18px;
        line-height: 1;
      }

      .segmented-button {
        background: transparent;
        border: 0;
        border-radius: 6px;
        color: var(--muted);
        cursor: pointer;
        font-size: 13px;
        min-height: 32px;
        padding: 0 12px;
      }

      .segmented-button.active {
        background: var(--surface);
        box-shadow: 0 3px 10px rgba(20, 42, 52, 0.08);
        color: var(--text);
        font-weight: 700;
      }

      .engagement-filter-toggle {
        align-items: center;
        background: var(--surface);
        border: 1px solid var(--line);
        border-radius: 8px;
        color: var(--accent-strong);
        cursor: pointer;
        display: none;
        font: inherit;
        font-size: 13px;
        font-weight: 800;
        justify-content: center;
        min-height: 38px;
        padding: 0 12px;
        white-space: nowrap;
      }

      .engagement-filter-toggle.has-active-filters {
        background: var(--accent-soft);
        border-color: rgba(18, 128, 111, 0.28);
      }

      .engagement-filter-toggle::after {
        content: '⌄';
        font-size: 14px;
        line-height: 1;
        margin-left: 6px;
        transition: transform 160ms ease;
      }

      .engagement-filter-toggle[aria-expanded="true"]::after {
        transform: rotate(180deg);
      }

      .engagement-filter-grid {
        align-items: end;
        display: grid;
        gap: 10px;
        grid-template-columns: minmax(120px, 140px) minmax(180px, 220px) minmax(220px, 260px);
        justify-self: start;
        max-width: 680px;
        width: 100%;
      }

      .app[data-role="sales"] .engagement-filter-grid {
        grid-template-columns: minmax(120px, 140px) minmax(180px, 220px) minmax(220px, 260px);
      }

      .filter-field {
        color: var(--muted);
        display: grid;
        font-size: 12px;
        gap: 4px;
      }

      .filter-field[hidden] {
        display: none;
      }

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

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

      .comments-inbox-list {
        align-content: start;
        align-items: start;
        display: grid;
        gap: 12px;
        margin: 0 auto;
        max-width: 1340px;
        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(20, 42, 52, 0.05);
        display: grid;
        gap: 9px;
        height: max-content;
        padding: 14px 16px;
      }

      .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: 15px;
      }

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

      .direction-pill,
      .author-pill,
      .time-pill {
        align-items: center;
        border-radius: 999px;
        display: inline-flex;
        gap: 6px;
        font-size: 12px;
        min-height: 24px;
        padding: 0 8px;
      }

      .author-pill em,
      .time-pill em {
        color: inherit;
        font-style: normal;
        font-weight: 600;
        opacity: 0.72;
      }

      .author-pill {
        background: #edf2f7;
        border: 1px solid #d9e2ea;
        color: #44505c;
        font-weight: 700;
      }

      .direction-pill {
        background: #eef2f5;
        color: var(--accent-strong);
        font-weight: 700;
      }

      .time-pill {
        background: var(--bg);
        border: 1px solid var(--line);
        color: var(--muted);
      }

      .time-pill.accent {
        background: #fff4df;
        border-color: #f0d49b;
        color: #8a641f;
        font-weight: 700;
      }

      .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 rgba(16, 24, 20, 0.08);
        display: flex;
        justify-content: space-between;
        padding-top: 8px;
      }

      .broadcast-notification-form {
        border-color: rgba(15, 135, 118, 0.28);
        background: linear-gradient(180deg, #ffffff 0%, #f7fbfc 100%);
      }

      .broadcast-notification-fields {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 150px;
        gap: 10px;
        margin-top: 12px;
      }

      .broadcast-notification-fields label {
        display: grid;
        gap: 6px;
        color: #53615d;
        font-size: 12px;
      }

      .broadcast-notification-fields input,
      .broadcast-notification-fields select,
      .broadcast-notification-fields textarea {
        width: 100%;
        border: 1px solid #d9e5e1;
        border-radius: 8px;
        padding: 9px 10px;
        background: #fff;
        color: #1b2a26;
        font: inherit;
      }

      .broadcast-notification-fields textarea {
        min-height: 94px;
        resize: vertical;
      }

      .broadcast-notification-body {
        grid-column: 1 / -1;
      }

      .broadcast-notification-card.warning {
        border-left: 4px solid #d99a2b;
      }

      .broadcast-notification-card.urgent {
        border-left: 4px solid #d85a4f;
      }

      .duplicate-customer-card {
        --comment-accent: #b7791f;
        --comment-soft: #fff4df;
      }

      .duplicate-sales-chips {
        align-items: center;
        background: #f5f8f7;
        border: 1px solid #d8e4e0;
        border-radius: 999px;
        color: var(--muted-strong);
        display: inline-flex;
        flex-wrap: wrap;
        gap: 4px;
        min-width: 0;
        padding: 3px 6px;
      }

      .duplicate-sales-chips em {
        color: var(--muted);
        font-size: 11px;
        font-style: normal;
      }

      .duplicate-sales-chip {
        background: var(--surface);
        border: 1px solid rgba(16, 24, 20, 0.08);
        border-radius: 999px;
        color: var(--text);
        display: inline-flex;
        font-size: 11px;
        font-weight: 700;
        line-height: 1.2;
        max-width: 150px;
        overflow: hidden;
        padding: 2px 7px;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .duplicate-sales-chip.muted {
        color: var(--muted);
        font-weight: 600;
      }

      .duplicate-account-list {
        display: grid;
        gap: 8px;
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
      }

      .duplicate-account-card {
        background: #fbfcfd;
        border: 1px solid var(--line);
        border-radius: 8px;
        display: grid;
        gap: 10px;
        grid-template-rows: auto 1fr;
        min-width: 0;
        padding: 10px;
      }

      .duplicate-account-card > div:first-child {
        align-items: center;
        display: flex;
        gap: 8px;
        justify-content: space-between;
        min-width: 0;
      }

      .duplicate-account-card strong {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .duplicate-account-card span {
        color: var(--muted);
        font-size: 12px;
      }

      .duplicate-account-actions {
        align-content: end;
        align-items: end;
        align-self: end;
        display: grid;
        gap: 8px;
      }

      .duplicate-account-actions .detail-button {
        align-items: center;
        display: inline-flex;
        height: 44px;
        justify-content: center;
        line-height: 1.2;
        min-height: 44px;
        padding: 0 12px;
        width: 100%;
      }

      .duplicate-profile-missing,
      .duplicate-profile-pending,
      .duplicate-profile-approved,
      .duplicate-profile-rejected {
        background: var(--surface-soft);
        border: 1px solid var(--line);
        border-radius: 8px;
        color: var(--muted-strong);
        display: block;
        line-height: 1.45;
        padding: 8px 10px;
      }

      .duplicate-profile-rejected {
        background: var(--danger-soft);
        border-color: rgba(180, 35, 24, 0.22);
        color: var(--danger);
      }

      .duplicate-profile-approved {
        background: var(--ok-soft);
        border-color: rgba(20, 128, 74, 0.24);
        color: var(--ok);
      }

      .duplicate-profile-detail {
        background: var(--surface);
        border: 1px solid var(--line);
        border-radius: 8px;
        display: grid;
        gap: 6px;
        padding: 10px;
      }

      .duplicate-profile-detail.muted,
      .duplicate-profile-detail.error {
        color: var(--muted);
      }

      .duplicate-profile-detail.error {
        border-color: rgba(180, 35, 24, 0.25);
        color: var(--danger);
      }

      .duplicate-profile-detail span {
        display: grid;
        gap: 2px;
      }

      .duplicate-profile-detail em {
        color: var(--muted);
        font-size: 11px;
        font-style: normal;
      }

      .duplicate-profile-detail strong {
        color: var(--text);
        font-size: 13px;
        line-height: 1.45;
        white-space: normal;
      }

      .duplicate-approval-list {
        background: #fff4df;
        border: 1px solid #fed7aa;
        border-color: #eccb91;
        border-radius: 8px;
        display: grid;
        gap: 8px;
        padding: 10px;
      }

      .duplicate-approval-item {
        align-items: center;
        display: flex;
        gap: 10px;
        justify-content: space-between;
      }

      .duplicate-approval-actions {
        display: inline-flex;
        flex: 0 0 auto;
        gap: 8px;
      }

      .engagement-empty-action {
        align-items: center;
        display: flex;
        gap: 12px;
        justify-content: space-between;
      }

      @media (max-width: 980px) {
        .engagement-center-controls {
          align-items: stretch;
          grid-template-columns: 1fr;
        }

        .engagement-filter-grid {
          max-width: none;
        }
      }

      @media (max-width: 760px) {
        .engagement-center-controls {
          align-items: stretch;
          grid-template-columns: 1fr;
          gap: 10px;
          padding: 10px 12px;
        }

        .engagement-control-main {
          align-items: stretch;
          flex-direction: column;
          gap: 8px;
        }

        .engagement-stat-row {
          align-items: stretch;
          display: grid;
          gap: 8px;
          grid-template-columns: minmax(0, 1fr) auto;
        }

        .engagement-stat {
          justify-content: space-between;
          min-height: 38px;
          min-width: 0;
        }

        .engagement-filter-toggle {
          display: inline-flex;
        }

        .segmented-control {
          width: 100%;
        }

        .segmented-button {
          flex: 1;
        }

        .engagement-filter-grid {
          grid-template-columns: 1fr;
          width: 100%;
        }

        .engagement-center-controls:not(.filters-expanded) .engagement-filter-grid {
          display: none;
        }

        .comments-inbox-actions {
          align-items: stretch;
          flex-direction: column;
          gap: 8px;
        }

        .broadcast-notification-fields {
          grid-template-columns: 1fr;
        }

        .engagement-empty-action {
          align-items: stretch;
          flex-direction: column;
        }
      }

      .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(20, 42, 52, 0.05);
        padding: 12px;
      }

      .comment-compose-head {
        align-items: center;
        color: var(--text);
        display: flex;
        font-size: 14px;
        gap: 8px;
      }

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

      .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);
        border-bottom-color: rgba(185, 201, 209, 0.8);
        box-shadow: 0 10px 28px rgba(20, 42, 52, 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(242, 246, 248, 0.72);
        border: 1px solid rgba(198, 210, 204, 0.88);
        border-color: rgba(185, 201, 209, 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(20, 42, 52, 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-color: rgba(185, 201, 209, 0.86);
        border-radius: 999px;
        box-shadow: 0 8px 20px rgba(20, 42, 52, 0.06);
        color: #2a3542;
        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(31, 122, 122, 0.34);
        box-shadow: 0 12px 24px rgba(31, 122, 122, 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: #c0392b;
        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-color: rgba(185, 201, 209, 0.86);
        border-radius: 999px;
        box-shadow: 0 8px 20px rgba(20, 42, 52, 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(31, 122, 122, 0.34);
        box-shadow: 0 12px 24px rgba(31, 122, 122, 0.12);
        transform: translateY(-1px);
      }

      .current-user-avatar,
      .notification-item-avatar {
        align-items: center;
        background: linear-gradient(135deg, #176363, #1f7a7a);
        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-color: rgba(185, 201, 209, 0.9);
        border-radius: 12px;
        box-shadow: 0 22px 56px rgba(16, 27, 34, 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;
        border-bottom-color: #eef2f5;
        display: grid;
        gap: 3px;
        padding: 8px 8px 10px;
      }

      .notification-panel-head {
        align-items: start;
        grid-template-columns: minmax(0, 1fr) max-content;
      }

      .notification-panel-title {
        display: grid;
        gap: 3px;
        min-width: 0;
      }

      .notification-panel-head-actions {
        align-items: center;
        display: flex;
        gap: 6px;
        justify-content: flex-end;
        padding-top: 0;
      }

      .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;
        max-height: 438px;
        overflow-y: auto;
        padding-top: 8px;
        padding-right: 4px;
      }

      .notification-item {
        align-items: start;
        background: #f7f9fb;
        border: 1px solid #edf2ef;
        border-color: #eef2f5;
        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: #eef2f5;
        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-panel-action {
        background: #f7f9fb;
        border: 1px solid #d8e3df;
        border-color: #d8e3e8;
        color: #365048;
        min-height: 26px;
        padding: 4px 9px;
      }

      .notification-panel-action.danger {
        color: #8a453d;
      }

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

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

      .notification-panel-action:disabled {
        color: #9daaa5;
        cursor: default;
        opacity: 0.62;
        text-decoration: 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: #2a3542;
        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: #f1c5c1;
        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(20, 42, 52, 0.07);
        grid-template-rows: auto auto auto auto minmax(0, 1fr);
        z-index: 2;
      }

      .conversation-resizer {
        align-items: center;
        background: linear-gradient(90deg, rgba(31, 122, 122, 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(31, 122, 122, 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(31, 122, 122, 0.1), rgba(255, 255, 255, 0.98));
        border-color: rgba(31, 122, 122, 0.28);
        box-shadow: 0 0 0 3px rgba(31, 122, 122, 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, 253, 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: none;
        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, #176363, #1f7a7a);
        border-radius: 12px;
        color: #fff;
        display: inline-flex;
        font-size: 12px;
        font-weight: 900;
        height: 38px;
        justify-content: center;
        width: 38px;
      }

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

      .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: #f1c5c1;
        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(20, 42, 52, 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);
        border-bottom-color: rgba(216, 227, 232, 0.66);
        padding: 9px 14px;
      }

      .conversation-search {
        align-items: center;
        background: linear-gradient(180deg, #f3f6f9, #eef2f6);
        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(31, 122, 122, 0.12), 0 12px 28px rgba(20, 42, 52, 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: #8b98a9;
      }

      .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 auto;
        min-height: 48px;
        min-width: 0;
        overflow: visible;
        padding: 8px 14px 10px;
        position: relative;
      }

      .conversation-sync-strip {
        align-items: center;
        background: linear-gradient(180deg, #eef7f7, #e6f3f2);
        border-bottom: 1px solid rgba(176, 213, 203, 0.72);
        color: #0b746b;
        display: flex;
        font-size: 12px;
        font-weight: 800;
        gap: 8px;
        grid-row: 4;
        justify-content: center;
        min-height: 34px;
        padding: 8px 14px;
      }

      .conversation-sync-strip[hidden] {
        display: none;
      }

      .conversation-sync-spinner {
        border: 2px solid rgba(18, 140, 126, 0.18);
        border-color: rgba(31, 122, 122, 0.18);
        border-radius: 999px;
        border-top-color: #1f7a7a;
        height: 16px;
        width: 16px;
        animation: conversation-sync-spin 760ms linear infinite;
      }

      .chat-history-loading {
        align-items: center;
        color: #1f7a7a;
        display: flex;
        font-size: 12px;
        gap: 8px;
        justify-content: center;
        padding: 10px 0 12px;
      }

      .chat-history-loading .conversation-sync-spinner {
        height: 14px;
        width: 14px;
        border-width: 2px;
      }

      .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-color: #d8e3e8;
        border-radius: 999px;
        color: #5c6b78;
        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: #f7f9fb;
        border-color: #b9c9d1;
        color: #30413a;
        transform: translateY(-1px);
      }

      .filter-pill.active {
        background: #e7f5ec;
        border-color: #1f7a7a;
        box-shadow: 0 6px 14px rgba(31, 122, 122, 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,
      #conversation-grade-filter,
      #conversation-quick-filter {
        justify-content: center;
        min-width: 70px;
      }

      .quick-filter-menu {
        min-width: 184px;
      }

      .wa-menu {
        background: #fff;
        border: 1px solid rgba(27, 39, 34, 0.1);
        border-radius: 8px;
        box-shadow: 0 16px 40px rgba(16, 27, 34, 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;
      }

      .grade-menu-button .customer-chip {
        justify-self: start;
      }

      .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 #instance-refresh {
        display: none !important;
      }

      .layout.accounts-hidden .account-panel .panel-actions > :not(#hide-accounts) {
        display: none !important;
      }

      .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;
      }

      #conversation-list {
        grid-row: 5;
      }

      .scroll,
      .chat-body,
      .conversation-filters,
      .tag-menu {
        scrollbar-color: rgba(100, 113, 126, 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(100, 113, 126, 0.32);
        border-radius: 999px;
      }

      .list-button {
        background: transparent;
        border: 0;
        border-bottom: 1px solid rgba(216, 223, 220, 0.76);
        border-bottom-color: rgba(216, 227, 232, 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(31, 122, 122, 0.08), rgba(242, 246, 248, 0.98));
        box-shadow: inset 3px 0 0 rgba(31, 122, 122, 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;
        width: 100%;
      }

      .account-card-shell {
        position: relative;
      }

      .account-button .row-name[data-sales-instance-remark-name] {
        border-radius: 6px;
        cursor: text;
        padding: 1px 3px;
      }

      .account-button .row-name[data-sales-instance-remark-name]:hover {
        background: rgba(31, 122, 122, 0.08);
      }

      .account-remark-name-input {
        background: #fff;
        border: 1px solid rgba(18, 140, 126, 0.34);
        border-color: rgba(31, 122, 122, 0.34);
        border-radius: 6px;
        box-shadow: 0 0 0 3px rgba(31, 122, 122, 0.12);
        color: var(--text);
        display: block;
        font: inherit;
        font-weight: 800;
        line-height: 1.25;
        max-width: 100%;
        min-width: 0;
        outline: none;
        padding: 1px 5px;
        width: 100%;
      }

      .account-button:focus-visible {
        box-shadow:
          inset 3px 0 0 var(--accent),
          0 0 0 3px rgba(31, 122, 122, 0.14);
      }

      .sales-wa-create-panel {
        border-bottom: 1px solid rgba(216, 223, 220, 0.76);
        border-bottom-color: rgba(216, 227, 232, 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(31, 122, 122, 0.07);
        border: 1px solid rgba(18, 140, 126, 0.16);
        border-color: rgba(31, 122, 122, 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: 78px;
      }

      .account-icon {
        align-items: center;
        background: linear-gradient(135deg, #176363, #1f7a7a);
        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-icon img {
        display: block;
        height: 100%;
        object-fit: cover;
        width: 100%;
      }

      .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;
        box-sizing: border-box;
        color: var(--muted-strong);
        display: inline-flex;
        flex: 0 0 auto;
        font-size: 12px;
        gap: 6px;
        justify-content: center;
        line-height: 1;
        min-height: 28px;
        min-width: 58px;
        padding: 5px 9px;
        position: absolute;
        right: 12px;
        white-space: nowrap;
      }

      .account-status-actions {
        align-items: flex-end;
        bottom: 10px;
        display: inline-flex;
        gap: 6px;
        max-width: calc(100% - 24px);
        position: absolute;
        right: 12px;
        z-index: 1;
      }

      .account-status-actions .account-status-corner {
        bottom: auto;
        position: static;
        right: auto;
      }

      .account-remove-button {
        align-items: center;
        background: rgba(255, 255, 255, 0.94);
        border: 1px solid rgba(213, 93, 78, 0.36);
        border-radius: 999px;
        color: var(--danger);
        cursor: pointer;
        display: inline-flex;
        font-size: 12px;
        font-weight: 700;
        justify-content: center;
        line-height: 1;
        min-height: 28px;
        padding: 5px 9px;
        white-space: nowrap;
      }

      .account-remove-button:hover {
        background: rgba(253, 236, 234, 0.98);
        border-color: rgba(213, 93, 78, 0.6);
      }

      .account-remove-button:disabled {
        cursor: default;
        opacity: 0.62;
      }

      .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(253, 236, 234, 0.94);
        border-color: #f1c5c1;
        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;
        height: 12px;
        min-height: 12px;
        min-width: 12px;
        padding: 0;
        width: 12px;
      }

      .layout.accounts-hidden .account-status-actions {
        bottom: 13px;
        right: 13px;
      }

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

      .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;
      }

      .conversation-button::after {
        background: linear-gradient(90deg, transparent, rgba(216, 227, 232, 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(31, 122, 122, 0.13), #f4f8fa 42%, #ffffff);
        box-shadow: inset 4px 0 0 var(--accent);
      }

      .conversation-load-more {
        align-items: center;
        color: #6b7b74;
        cursor: pointer;
        display: flex;
        font-size: 12px;
        height: 40px;
        justify-content: center;
        padding: 0 12px;
      }

      .conversation-load-more:hover {
        color: var(--accent);
      }

      .avatar {
        align-items: center;
        background: linear-gradient(135deg, #176363, #1f7a7a);
        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(31, 122, 122, 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: 7px;
        min-width: 62px;
        position: relative;
      }

      .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;
      }

      .conversation-button .row-name[data-conversation-remark-open] {
        border-radius: 6px;
        cursor: text;
        padding: 1px 3px;
      }

      .conversation-button .row-name[data-conversation-remark-open]:hover {
        background: rgba(31, 122, 122, 0.08);
      }

      .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);
        display: none;
        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: #5c6b78;
        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;
      }

      .conversation-tags .customer-source-wrap,
      .conversation-tags .customer-source-menu {
        display: none !important;
      }

      .tag-chip {
        align-items: center;
        background: #f7f9fb;
        border: 1px solid #e1e6e3;
        border-color: #e2e8ec;
        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;
      }

      .customer-source-wrap {
        display: inline-flex;
        position: relative;
      }

      .customer-source-chip {
        align-items: center;
        background: #e6f3f2;
        border: 1px solid #b9ded4;
        border-color: #b7d8d8;
        border-radius: 999px;
        color: #176363;
        cursor: default;
        display: inline-flex;
        font: inherit;
        font-size: 11px;
        font-weight: 800;
        gap: 5px;
        line-height: 1;
        max-width: 138px;
        min-height: 22px;
        padding: 4px 8px;
        white-space: nowrap;
      }

      .customer-source-chip.interactive {
        cursor: pointer;
        min-height: 32px;
        padding: 7px 12px;
      }

      .chat-title-tags .customer-source-chip.interactive {
        border-radius: 10px;
        font-size: 13px;
        gap: 7px;
        max-width: 178px;
      }

      .customer-source-chip.static {
        pointer-events: none;
      }

      .customer-source-label {
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .customer-source-chip.missing {
        background: #fff1f0;
        border-color: #ffb4ad;
        color: #c0392b;
      }

      .customer-source-chip.saving {
        opacity: 0.65;
      }

      .source-dropdown-caret {
        color: currentColor;
        flex: 0 0 auto;
        font-size: 14px;
        line-height: 1;
        margin-left: 1px;
      }

      .source-alert-dot,
      .source-ok-dot {
        align-items: center;
        border-radius: 50%;
        display: inline-flex;
        flex: 0 0 auto;
        height: 14px;
        justify-content: center;
        width: 14px;
      }

      .source-alert-dot {
        background: #c0392b;
        color: #fff;
        font-size: 10px;
        line-height: 1;
      }

      .source-ok-dot {
        background: #1f7a7a;
      }

      .customer-source-menu {
        background: #fff;
        border: 1px solid rgba(34, 48, 42, 0.08);
        border-color: rgba(20, 42, 52, 0.08);
        border-radius: 8px;
        box-shadow: 0 14px 34px rgba(20, 42, 52, 0.18);
        color: var(--text);
        min-width: 164px;
        padding: 6px;
        position: absolute;
        top: calc(100% + 6px);
        z-index: 120;
      }

      .chat-title-tags .customer-source-menu {
        left: 0;
      }

      .conversation-tags .customer-source-menu {
        left: 0;
      }

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

      .customer-source-menu-item:hover,
      .customer-source-menu-item.active {
        background: #e6f3f2;
        color: #176363;
      }

      .conversation-row-tools {
        align-items: center;
        display: flex;
        gap: 6px;
        justify-content: flex-end;
        min-height: 20px;
      }

      .conversation-pin-icon {
        color: #68756f;
        font-size: 13px;
        line-height: 1;
      }

      .conversation-menu-trigger {
        align-items: center;
        background: #f4f6f5;
        border: 1px solid rgba(105, 117, 111, 0.16);
        border-radius: 999px;
        color: #6d7773;
        cursor: pointer;
        display: inline-flex;
        font-size: 15px;
        font-weight: 700;
        height: 22px;
        justify-content: center;
        line-height: 1;
        opacity: 0;
        padding: 0;
        transition: background 160ms ease, border-color 160ms ease, color 160ms ease, opacity 160ms ease;
        width: 22px;
      }

      .conversation-button:hover .conversation-menu-trigger,
      .conversation-button.active .conversation-menu-trigger,
      .conversation-button.menu-open .conversation-menu-trigger,
      .conversation-menu-trigger.active {
        opacity: 1;
      }

      .conversation-menu-trigger:hover,
      .conversation-menu-trigger.active {
        background: #e9eeeb;
        border-color: rgba(92, 104, 98, 0.24);
        color: var(--text);
      }

      .conversation-row-menu {
        background: #fff;
        border: 1px solid rgba(34, 48, 42, 0.08);
        border-color: rgba(20, 42, 52, 0.08);
        border-radius: 8px;
        box-shadow: 0 14px 34px rgba(20, 42, 52, 0.18);
        color: var(--text);
        min-width: 150px;
        padding: 6px;
        position: absolute;
        right: 12px;
        top: 44px;
        z-index: 80;
      }

      .conversation-row-menu-item {
        align-items: center;
        border-radius: 6px;
        cursor: pointer;
        display: flex;
        font-size: 13px;
        min-height: 34px;
        padding: 0 12px;
        white-space: nowrap;
      }

      .conversation-row-menu-item:hover {
        background: #f3f6f5;
      }

      .conversation-unread {
        align-items: center;
        background: #c0392b;
        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: #f1c5c1;
        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;
        border-bottom-color: #f1c5c1;
        color: var(--danger);
      }

      .chat-body {
        background:
          radial-gradient(circle at 18px 18px, rgba(31, 122, 122, 0.06) 1.4px, transparent 2px),
          radial-gradient(circle at 54px 48px, rgba(115, 127, 140, 0.06) 1px, transparent 2px),
          linear-gradient(#eef2f5, #eef2f5);
        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;
        -webkit-overflow-scrolling: touch;
      }

      .chat-head {
        align-items: center;
        background: #ffffff;
        backdrop-filter: blur(12px);
        box-shadow: 0 10px 26px rgba(20, 42, 52, 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;
      }

      .conversation-remark-display {
        border-radius: 6px;
        display: inline-block;
        max-width: 100%;
        min-height: 22px;
        overflow: hidden;
        padding: 1px 3px;
        text-overflow: ellipsis;
        vertical-align: top;
        white-space: nowrap;
      }

      .conversation-remark-display[data-conversation-remark-edit] {
        cursor: text;
      }

      .conversation-remark-display[data-conversation-remark-edit]:hover {
        background: rgba(31, 122, 122, 0.08);
      }

      .conversation-remark-input {
        background: #fff;
        border: 1px solid rgba(18, 140, 126, 0.45);
        border-color: rgba(31, 122, 122, 0.45);
        border-radius: 6px;
        box-shadow: 0 0 0 3px rgba(31, 122, 122, 0.1);
        color: var(--text);
        font: inherit;
        font-weight: 800;
        max-width: 100%;
        min-width: 160px;
        outline: none;
        padding: 1px 6px;
        width: min(360px, 100%);
      }

      .chat-identity p {
        color: var(--muted);
        display: none;
        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: visible;
      }

      .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: #d8e3e8;
        color: #5c6b78;
      }

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

      .filter-pill.stage-filter-pill.active {
        background: #e7f5ec;
        border-color: #1f7a7a;
        box-shadow: 0 6px 14px rgba(31, 122, 122, 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: #b9c9d1;
        box-shadow: 0 10px 22px rgba(20, 42, 52, 0.1);
        transform: translateY(-1px);
      }

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

      /* A4-Fix：客户阶段菜单标题行（字段名+行为说明/只读说明） */
      .tag-menu .tag-menu-head {
        border-bottom: 1px solid var(--line, #E2E8F0);
        color: #0f172a;
        display: grid;
        font-size: 12.5px;
        font-weight: 600;
        gap: 2px;
        padding: 8px 12px 7px;
      }

      .tag-menu .tag-menu-head span {
        color: #64748b;
        font-size: 11px;
        font-weight: 400;
      }

      /* A4-Hint：当前阶段状态行 + 空/未建档提示态 + 长阶段名换行
         （A4-Fix1：删除仅 2.56:1 对比度的 em 弱化标记——其所注「尚未手动设置」本身不可证实） */
      .tag-menu .tag-menu-current {
        align-items: center;
        border-bottom: 1px solid var(--line, #E2E8F0);
        color: #334155;
        display: flex;
        flex-wrap: wrap;
        font-size: 12px;
        gap: 6px;
        padding: 8px 12px;
      }

      .tag-menu .tag-menu-empty {
        color: #64748B;
        font-size: 12.5px;
        line-height: 1.5;
        padding: 12px;
      }

      .tag-menu .stage-menu-button span:nth-child(2) {
        overflow-wrap: anywhere;
        white-space: normal;
      }

      .tag-menu .wa-menu-button:disabled {
        cursor: not-allowed;
        opacity: 0.55;
      }

      .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: #1f7a7a;
        display: inline-flex;
        font-size: 13px;
        height: 18px;
        justify-content: center;
        width: 18px;
      }

      .tag-check.checked {
        background: #e6f3f2;
        border-color: #1f7a7a;
      }

      .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;
      }

      .chat-head .chat-title-tags {
        gap: 8px;
        justify-content: flex-end;
      }

      .chat-head .chat-title-tags .tag-chip,
      .chat-head .chat-title-tags .customer-chip,
      .chat-head .chat-title-tags .customer-source-chip {
        background: #f7f9fb;
        border: 1px solid #d8e3df;
        border-color: #d8e3e8;
        border-radius: 999px;
        box-shadow: none;
        color: #344754;
        font-size: 12px;
        font-weight: 700;
        height: 34px;
        line-height: 1;
        max-width: 148px;
        min-height: 34px;
        padding: 0 12px;
      }

      .chat-head .chat-title-tags .grade-unrated {
        background: #f7f9fb;
        border-color: #d8e3e8;
        color: #5c6b78;
      }

      .chat-head .chat-title-tags .customer-source-chip.interactive {
        background: #e6f3f2;
        border-color: #b7d8d8;
        color: #176363;
        font-size: 12px;
        gap: 8px;
        max-width: 168px;
      }

      .chat-head .source-ok-dot,
      .chat-head .source-alert-dot {
        height: 12px;
        width: 12px;
      }

      .chat-head .source-dropdown-caret {
        font-size: 12px;
        margin-left: 0;
      }

      .chat-head .chat-actions {
        gap: 8px;
      }

      .chat-head .chat-actions .chat-menu-wrap {
        align-items: center;
        display: inline-flex;
        height: 34px;
      }

      .chat-head .chat-actions .add-list-button,
      .chat-head .chat-actions .icon-button.flat {
        background: #ffffff;
        border: 1px solid #d8e3df;
        border-color: #d8e3e8;
        border-radius: 999px;
        box-shadow: none;
        color: #263a33;
        font-size: 12px;
        font-weight: 700;
        height: 34px;
        line-height: 1;
        min-height: 34px;
      }

      .chat-head .chat-actions .add-list-button {
        padding: 0 14px;
      }

      .chat-head .chat-actions .icon-button.flat {
        font-size: 15px;
        min-width: 34px;
        padding: 0;
        width: 34px;
      }

      .chat-head .chat-actions .add-list-button:hover,
      .chat-head .chat-actions .add-list-button.active,
      .chat-head .chat-actions .icon-button.flat:hover,
      .chat-head .chat-actions .icon-button.flat.active {
        background: #f5faf8;
        border-color: #b8c9c3;
        box-shadow: 0 8px 18px rgba(20, 42, 52, 0.08);
        color: #17232e;
      }

      .chat-head .translate-all-button {
        border-color: #d8e3e8;
        color: #3d514a;
      }

      .chat-head .translate-all-button:hover,
      .chat-head .translate-all-button.active {
        background: #f5faf8;
        border-color: #b8c9c3;
        color: #17232e;
      }

      .profile-entry-button {
        background: #1f7a7a;
        border-color: #1f7a7a;
        box-shadow: 0 9px 20px rgba(31, 122, 122, 0.16);
        color: #fff;
        max-width: 160px;
        overflow: hidden;
        text-overflow: ellipsis;
      }

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

      .chat-head .profile-entry-button {
        background: #1f7a7a;
        border-color: #1f7a7a;
        box-shadow: 0 8px 18px rgba(31, 122, 122, 0.16);
        color: #ffffff;
      }

      .chat-head .profile-entry-button:hover,
      .chat-head .profile-entry-button.active {
        background: #176363;
        border-color: #176363;
        color: #ffffff;
      }

      .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(20, 42, 52, 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: #f6f8fa;
        display: grid;
        gap: 10px;
        min-width: 0;
        overflow: auto;
        overflow-x: hidden;
        padding: 12px;
      }

      .customer-profile-card {
        background: #ffffff;
        border: 1px solid #dce7e3;
        border-color: #d8e3e8;
        border-radius: 8px;
        box-sizing: border-box;
        box-shadow: 0 10px 26px rgba(20, 42, 52, 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(31, 122, 122, 0.35);
        box-shadow: 0 12px 30px rgba(31, 122, 122, 0.1);
      }

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

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

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

      .customer-profile-module-button {
        align-items: center;
        background: #f7f9fb;
        border: 1px solid #e0e9e5;
        border-radius: 8px;
        color: #2a3542;
        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: #17232e;
        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(31, 122, 122, 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-left-color: #1f7a7a;
        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: #1f7a7a;
        border: 1px solid #128c7e;
        border-color: #1f7a7a;
        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: #176363;
        border-color: #176363;
      }

      .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: #fbfcfd;
        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: #d8e3e8;
        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(16, 27, 34, 0.08), 0 10px 22px rgba(16, 27, 34, 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(16, 27, 34, 0.08), 0 14px 28px rgba(16, 27, 34, 0.07);
        transform: translateY(-1px);
      }

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

      .message-row.inbound .bubble:has(.message-ai-reply-card),
      .message-row.inbound .bubble:has(.message-ai-reply-loading),
      .message-row.inbound .bubble:has(.message-ai-reply-error) {
        max-width: min(760px, 76%);
      }

      .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-color: rgba(139, 152, 164, 0.22);
        border-radius: 8px;
        box-shadow: 0 8px 18px rgba(16, 27, 34, 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, #1f7a7a 0 var(--audio-progress), transparent var(--audio-progress) 100%),
          repeating-linear-gradient(90deg, #8b98a9 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: #1f7a7a;
        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: #1f7a7a;
        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: #1f7a7a;
        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-color: rgba(139, 152, 164, 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-card--pending-image {
        background: rgba(255, 255, 255, 0.82);
        border-color: rgba(31, 122, 122, 0.2);
        box-shadow: 0 8px 20px rgba(22, 38, 32, 0.08);
        grid-template-columns: 58px minmax(0, 1fr);
        min-height: 74px;
        width: min(210px, 100%);
      }

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

      .media-pending-thumb {
        background:
          linear-gradient(135deg, rgba(31, 122, 122, 0.14), rgba(31, 122, 122, 0.04)),
          #eef6f2;
        border: 1px solid rgba(20, 122, 105, 0.16);
        border-color: rgba(31, 122, 122, 0.16);
        border-radius: 8px;
        display: block;
        height: 58px;
        overflow: hidden;
        position: relative;
        width: 58px;
      }

      .media-pending-thumb::before {
        border: 2px solid rgba(20, 122, 105, 0.42);
        border-color: rgba(31, 122, 122, 0.42);
        border-radius: 4px;
        bottom: 12px;
        content: "";
        height: 22px;
        left: 12px;
        position: absolute;
        width: 30px;
      }

      .media-pending-thumb::after {
        background: rgba(31, 122, 122, 0.48);
        border-radius: 50%;
        content: "";
        height: 7px;
        left: 36px;
        position: absolute;
        top: 17px;
        width: 7px;
      }

      .media-pending-icon {
        border-bottom: 10px solid rgba(20, 122, 105, 0.35);
        border-bottom-color: rgba(31, 122, 122, 0.35);
        border-left: 8px solid transparent;
        border-right: 8px solid transparent;
        bottom: 15px;
        display: block;
        height: 0;
        left: 17px;
        position: absolute;
        width: 0;
      }

      .media-pending-bar {
        animation: mediaPendingSweep 1.35s ease-in-out infinite;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.72), transparent);
        bottom: 0;
        display: block;
        position: absolute;
        top: 0;
        transform: translateX(-80%);
        width: 70%;
      }

      .media-loading-dots {
        align-items: center;
        display: inline-flex;
        gap: 3px;
        margin-left: 6px;
        vertical-align: middle;
      }

      .media-loading-dots i {
        animation: mediaDotPulse 1.1s ease-in-out infinite;
        background: rgba(31, 122, 122, 0.72);
        border-radius: 50%;
        display: block;
        height: 3px;
        width: 3px;
      }

      .media-loading-dots i:nth-child(2) {
        animation-delay: 0.14s;
      }

      .media-loading-dots i:nth-child(3) {
        animation-delay: 0.28s;
      }

      @keyframes mediaPendingSweep {
        0% {
          transform: translateX(-85%);
        }
        55%,
        100% {
          transform: translateX(135%);
        }
      }

      @keyframes mediaDotPulse {
        0%,
        100% {
          opacity: 0.28;
          transform: translateY(0);
        }
        50% {
          opacity: 1;
          transform: translateY(-1px);
        }
      }

      @media (prefers-reduced-motion: reduce) {
        .media-pending-bar,
        .media-loading-dots i {
          animation: none;
        }
      }

      .file-type-icon {
        --file-bg: #eef2f5;
        --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: #eef2f5;
        --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-color: rgba(139, 152, 164, 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);
      }

      .chat-media-customer-file-menu {
        background: #ffffff;
        border: 1px solid rgba(117, 135, 126, 0.28);
        border-radius: 8px;
        box-shadow: 0 12px 28px rgba(30, 45, 38, 0.16);
        left: 0;
        min-width: 152px;
        padding: 6px;
        position: fixed;
        top: 0;
        z-index: 80;
      }

      .chat-media-customer-file-menu[hidden] {
        display: none !important;
      }

      .chat-media-customer-file-menu button {
        background: transparent;
        border: 0;
        border-radius: 6px;
        color: var(--text);
        cursor: pointer;
        font: inherit;
        font-size: 13px;
        padding: 8px 10px;
        text-align: left;
        width: 100%;
      }

      .chat-media-customer-file-menu button:hover,
      .chat-media-customer-file-menu button:focus-visible {
        background: rgba(16, 143, 126, 0.1);
        color: var(--wa);
        outline: none;
      }

      .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: #e6f3f2;
        border: 1px solid #cce9e1;
        border-color: #b7d8d8;
        border-radius: 8px;
        color: #176363;
        display: flex;
        gap: 8px;
        justify-content: space-between;
        margin: 10px 10px 8px;
        min-height: 38px;
        padding: 8px 10px;
      }

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

      .sales-wa-status-bar.error {
        background: #fef2f2;
        border-color: #f1c5c1;
        color: #c0392b;
      }

      .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-color: rgba(216, 227, 232, 0.92);
        border-radius: 8px;
        box-shadow: 0 18px 42px rgba(20, 42, 52, 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: #f6f8fa;
        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);
        border-top-color: rgba(216, 227, 232, 0.8);
        display: grid;
        gap: 10px;
        grid-template-columns: 38px minmax(0, 1fr) 38px 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(31, 122, 122, 0.1);
        color: var(--green-dark);
      }

      .composer-icon.template {
        border: 1px solid rgba(18, 140, 126, 0.18);
        border-color: rgba(31, 122, 122, 0.18);
        color: var(--green-dark);
        font-size: 14px;
        font-weight: 800;
      }

      .composer-icon.template:not(:disabled) {
        background: #fff;
        box-shadow: 0 8px 18px rgba(20, 42, 52, 0.06);
      }

      .composer-icon.template:not(:disabled):hover {
        background: #effaf6;
      }

      .composer-icon.send:not(:disabled) {
        background: var(--green);
        box-shadow: 0 8px 18px rgba(31, 122, 122, 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(20, 42, 52, 0.04), 0 8px 18px rgba(20, 42, 52, 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(31, 122, 122, 0.32);
        box-shadow:
          inset 0 1px 0 rgba(20, 42, 52, 0.04),
          0 0 0 4px rgba(31, 122, 122, 0.09);
      }

      .attachment-menu {
        background: #fff;
        border: 1px solid rgba(216, 223, 220, 0.92);
        border-color: rgba(216, 227, 232, 0.92);
        border-radius: 8px;
        bottom: calc(100% + 10px);
        box-shadow: 0 18px 42px rgba(20, 42, 52, 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;
      }

      .template-message-modal {
        align-items: center;
        background: rgba(15, 23, 42, 0.32);
        display: flex;
        inset: 0;
        justify-content: center;
        padding: 24px;
        position: fixed;
        z-index: 70;
      }

      .template-message-modal[hidden] {
        display: none;
      }

      .template-message-dialog {
        background: #fff;
        border: 1px solid rgba(216, 223, 220, 0.94);
        border-color: rgba(216, 227, 232, 0.94);
        border-radius: 8px;
        box-shadow: 0 24px 70px rgba(15, 23, 42, 0.22);
        display: grid;
        gap: 14px;
        max-height: calc(100dvh - 48px);
        max-width: 520px;
        overflow: auto;
        padding: 18px;
        width: min(520px, calc(100vw - 48px));
      }

      .template-message-head {
        align-items: start;
        display: flex;
        gap: 14px;
        justify-content: space-between;
      }

      .template-message-head h3 {
        font-size: 18px;
        line-height: 1.2;
        margin: 0 0 5px;
      }

      .template-message-head span,
      .template-message-field span,
      .template-message-status {
        color: var(--muted);
        font-size: 12px;
      }

      .template-message-close {
        align-items: center;
        background: transparent;
        border: 0;
        border-radius: 50%;
        color: #5c6b78;
        cursor: pointer;
        display: inline-flex;
        font-size: 28px;
        height: 34px;
        justify-content: center;
        line-height: 1;
        width: 34px;
      }

      .template-message-close:hover {
        background: #eef2f5;
      }

      .template-message-field {
        display: grid;
        gap: 6px;
      }

      .template-message-field small {
        color: #5c6b78;
        font-size: 12px;
        line-height: 1.45;
      }

      .template-message-field input,
      .template-message-field textarea {
        border: 1px solid #d8e3df;
        border-color: #d8e3e8;
        border-radius: 8px;
        box-sizing: border-box;
        color: #25352f;
        font: inherit;
        line-height: 1.45;
        min-height: 40px;
        outline: none;
        padding: 9px 10px;
        width: 100%;
      }

      .template-message-field textarea {
        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
        min-height: 104px;
        resize: vertical;
      }

      .template-message-field input:focus,
      .template-message-field textarea:focus {
        border-color: rgba(31, 122, 122, 0.42);
        box-shadow: 0 0 0 4px rgba(31, 122, 122, 0.09);
      }

      .template-message-approval {
        align-items: flex-start;
        background: #fff8e6;
        border: 1px solid #f1d38b;
        border-radius: 8px;
        color: #5c4321;
        cursor: pointer;
        display: flex;
        gap: 9px;
        line-height: 1.45;
        padding: 10px 11px;
      }

      .template-message-approval input {
        flex: 0 0 auto;
        margin-top: 3px;
      }

      .template-message-approval span {
        font-size: 12px;
      }

      .template-message-status {
        min-height: 18px;
      }

      .template-message-status.error {
        color: #c2412d;
        font-weight: 700;
      }

      .template-message-actions {
        display: flex;
        gap: 10px;
        justify-content: flex-end;
      }

      .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 conversation-sync-spin {
        to {
          transform: rotate(360deg);
        }
      }

      @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);
        border-top-color: rgba(216, 227, 232, 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);
          border-right-color: rgba(216, 227, 232, 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: 900px) {
        .topbar {
          align-items: stretch;
          gap: 10px;
          padding: 14px 16px 12px;
        }

        .topbar-main {
          gap: 10px;
          width: 100%;
        }

        .brand {
          padding-right: 96px;
        }

        .brand h1 {
          font-size: 18px;
          line-height: 1.25;
        }

        .topbar-tools {
          position: absolute;
          right: 16px;
          top: 12px;
        }

        .view-nav {
          flex-wrap: nowrap;
          max-width: 100%;
          overflow-x: auto;
          padding: 4px;
          scrollbar-width: none;
          width: 100%;
        }

        .view-nav::-webkit-scrollbar {
          display: none;
        }

        .view-button {
          flex: 0 0 auto;
          font-size: 14px;
          min-height: 34px;
          padding: 6px 12px;
        }

        .app[data-view="workbench"] .dashboard {
          gap: 16px;
          overflow-x: hidden;
          padding: 18px 16px 22px;
        }

        .dashboard-panel {
          max-width: none;
          min-width: 0;
        }

        .dashboard-panel-head {
          align-items: flex-start;
          gap: 10px;
        }

        .dashboard-panel-head h2 {
          font-size: 18px;
        }

        .dashboard-panel-head p {
          font-size: 14px;
        }

        .dashboard-scope-chip {
          font-size: 12px;
          padding: 5px 9px;
        }

        .dashboard-controls {
          align-items: stretch;
          display: grid;
          gap: 10px;
        }

        .dashboard-range-tabs {
          grid-auto-flow: initial;
          grid-template-columns: repeat(4, minmax(0, 1fr));
          overflow: hidden;
          width: 100%;
        }

        .dashboard-range-button {
          font-size: 14px;
          min-width: 0;
          padding: 0 8px;
        }

        .dashboard-custom-range {
          display: grid;
          gap: 8px;
          grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
        }

        .dashboard-custom-range label {
          align-items: stretch;
          display: grid;
          gap: 4px;
          min-width: 0;
        }

        .dashboard-custom-range input {
          max-width: none;
          min-width: 0;
          width: 100%;
        }

        .dashboard-custom-range .detail-button {
          align-self: end;
          height: 32px;
          min-width: 72px;
          padding: 0 14px;
        }

        .dashboard-kpis,
        .dashboard-customer-kpis,
        .dashboard-instance-kpis,
        .app:not([data-role="admin"]) .dashboard-customer-kpis {
          gap: 10px;
          grid-template-columns: repeat(2, minmax(0, 1fr));
          justify-content: stretch;
          overflow: visible;
        }

        .app[data-view="workbench"] .kpi {
          min-width: 0;
        }
      }

      @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;
        }

        .customer-source-wrap,
        .customer-source-menu {
          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;
        }

        .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(20, 42, 52, 0.08);
          height: 38px;
          min-width: 38px;
        }

        .app[data-view="conversations"][data-mobile-chat-detail="true"] .topbar {
          display: none;
        }

        .app[data-view="conversations"][data-mobile-chat-detail="true"] {
          grid-template-rows: minmax(0, 1fr) auto;
        }

        .app[data-view="conversations"][data-mobile-chat-detail="true"] .layout {
          height: 100%;
          min-height: 0;
        }

        .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: #d8e3e8;
          border-radius: 999px;
          box-shadow: 0 6px 16px rgba(20, 42, 52, 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(20, 42, 52, 0.12);
          color: var(--text);
          transform: none;
        }

        .health {
          display: none;
        }

        .event-drawer {
          display: none !important;
        }

        .app[data-view="customer-forms"] .customer-form-view {
          background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(242, 246, 248, 0.98)),
            #f3f8f6;
          min-height: 0;
          overflow-y: auto;
          -webkit-overflow-scrolling: touch;
        }

        .app[data-view="customer-forms"] .customer-form-workbench {
          display: block;
          overflow: visible;
          padding: 10px 12px 16px;
        }

        .app[data-view="customer-forms"] .customer-form-list-panel {
          border: 0;
          border-radius: 0;
          display: grid;
          gap: 10px;
          overflow: visible;
        }

        .app[data-view="customer-forms"] .customer-form-toolbar {
          align-items: stretch;
          background: #ffffff;
          border: 1px solid #dbe7e2;
          border-color: #d8e3e8;
          border-radius: 12px;
          box-shadow: 0 8px 20px rgba(20, 42, 52, 0.06);
          gap: 10px;
          grid-template-columns: 1fr;
          padding: 10px;
        }

        .app[data-view="customer-forms"] .customer-form-filter-toggle {
          display: inline-flex;
          min-height: 38px;
          width: 100%;
        }

        .app[data-view="customer-forms"] .customer-form-controls-panel {
          display: grid;
          gap: 10px;
        }

        .app[data-view="customer-forms"] .customer-form-view:not(.customer-form-controls-expanded) .customer-form-controls-panel {
          display: none;
        }

        .app[data-view="customer-forms"] .customer-form-filters {
          grid-template-columns: 1fr;
          gap: 8px;
        }

        .app[data-view="customer-forms"] .customer-form-toolbar .customer-field-filter {
          gap: 5px;
        }

        .app[data-view="customer-forms"] .customer-form-toolbar .customer-field-filter span {
          font-size: 11px;
          font-weight: 800;
        }

        .app[data-view="customer-forms"] .customer-form-date-controls {
          align-items: stretch;
          display: grid;
          gap: 8px;
        }

        .app[data-view="customer-forms"] .customer-form-date-controls .dashboard-range-tabs {
          display: grid;
          grid-template-columns: repeat(4, minmax(0, 1fr));
          height: auto;
          width: 100%;
        }

        .app[data-view="customer-forms"] .customer-form-date-controls .dashboard-range-button {
          font-size: 13px;
          min-height: 34px;
          padding: 0 8px;
        }

        .app[data-view="customer-forms"] .customer-form-date-controls .dashboard-custom-range {
          display: grid;
          gap: 8px;
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .app[data-view="customer-forms"] .customer-form-date-controls .dashboard-custom-range label {
          gap: 5px;
          min-width: 0;
        }

        .app[data-view="customer-forms"] .customer-form-date-controls .dashboard-custom-range input {
          height: 34px;
          max-width: none;
          min-width: 0;
          width: 100%;
        }

        .app[data-view="customer-forms"] .customer-form-date-controls .dashboard-range-reset {
          grid-column: 1 / -1;
          min-height: 34px;
          width: 100%;
        }

        .app[data-view="customer-forms"] .customer-form-command-row {
          align-items: stretch;
          display: grid;
          gap: 8px;
          min-height: 0;
        }

        .app[data-view="customer-forms"] .customer-form-actions {
          display: grid;
          gap: 8px;
          grid-template-columns: repeat(2, minmax(0, 1fr));
          justify-content: stretch;
        }

        .app[data-view="customer-forms"] .customer-form-actions .detail-button {
          font-size: 13px;
          min-height: 38px;
          padding: 0 10px;
          width: 100%;
        }

        .app[data-view="customer-forms"] .customer-form-selection-count {
          background: #f6f8fa;
          border: 1px solid #dbe7e2;
          border-color: #d8e3e8;
          border-radius: 8px;
          grid-column: 1 / -1;
          line-height: 1.2;
          padding: 8px;
          text-align: center;
        }

        .app[data-view="customer-forms"] .customer-form-table-wrap {
          background: transparent;
          border: 0;
          overflow: visible;
        }

        .app[data-view="customer-forms"] .customer-form-table {
          background: transparent;
          border-collapse: separate;
          display: block;
          min-width: 0;
          width: 100%;
        }

        .app[data-view="customer-forms"] .customer-form-table thead {
          display: none;
        }

        .app[data-view="customer-forms"] .customer-form-table tbody {
          display: grid;
          gap: 10px;
          width: 100%;
        }

        .app[data-view="customer-forms"] .customer-form-table tbody > tr:not(.customer-form-detail-row) {
          background: #ffffff;
          border: 1px solid #dbe7e2;
          border-color: #d8e3e8;
          border-radius: 12px;
          box-shadow: 0 8px 20px rgba(20, 42, 52, 0.06);
          display: grid;
          overflow: hidden;
          width: 100%;
        }

        .app[data-view="customer-forms"] .customer-form-table tbody > tr:not(.customer-form-detail-row) > td {
          align-items: center;
          background: transparent;
          border-bottom: 1px solid rgba(216, 226, 222, 0.72);
          border-bottom-color: rgba(216, 227, 232, 0.72);
          display: flex;
          gap: 10px;
          justify-content: space-between;
          min-height: 40px;
          padding: 9px 12px;
          text-align: right;
          width: 100%;
        }

        .app[data-view="customer-forms"] .customer-form-table tbody > tr:not(.customer-form-detail-row) > td::before {
          color: var(--muted);
          content: attr(data-label);
          flex: 0 0 84px;
          font-size: 12px;
          font-weight: 800;
          text-align: left;
        }

        .app[data-view="customer-forms"] .customer-form-table tbody > tr:not(.customer-form-detail-row) > td:last-child {
          align-items: stretch;
          border-bottom: 0;
          display: grid;
          justify-content: stretch;
          text-align: left;
        }

        .app[data-view="customer-forms"] .customer-form-table tbody > tr:not(.customer-form-detail-row) > td:last-child::before {
          margin-bottom: 4px;
        }

        .app[data-view="customer-forms"] .customer-form-table .customer-empty {
          display: block;
          text-align: center;
          width: 100%;
        }

        .app[data-view="customer-forms"] .customer-form-table .customer-empty::before {
          content: none !important;
        }

        .app[data-view="customer-forms"] .customer-form-row-actions {
          display: grid;
          gap: 8px;
          grid-template-columns: 1fr;
          width: 100%;
        }

        .app[data-view="customer-forms"] .customer-form-time {
          text-align: right;
          white-space: normal;
        }

        .app[data-view="customer-forms"] .customer-form-detail-row {
          display: block;
        }

        .app[data-view="customer-forms"] .customer-form-detail-row > td {
          border: 0;
          display: block;
          padding: 0;
          width: 100%;
        }

        .app[data-view="customer-forms"] .customer-form-detail-panel {
          border-radius: 12px;
          margin: -4px 0 4px;
          padding: 12px;
        }

        .app[data-view="customer-forms"] .customer-form-detail-actions,
        .app[data-view="customer-forms"] .customer-form-translation-grid {
          display: grid;
          grid-template-columns: 1fr;
        }

        .app[data-view="workbench"] .dashboard {
          background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(238, 242, 245, 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;
        }

        .dashboard-panel {
          gap: 10px;
        }

        .dashboard-panel + .dashboard-panel {
          padding-top: 14px;
        }

        .dashboard-panel-head {
          align-items: flex-start;
        }

        .dashboard-panel-head h2 {
          font-size: 14px;
        }

        .dashboard-controls {
          align-items: stretch;
          flex-direction: column;
        }

        .dashboard-range-tabs {
          grid-auto-flow: initial;
          grid-template-columns: repeat(4, minmax(0, 1fr));
        }

        .dashboard-range-button {
          padding: 0 6px;
        }

        #dashboard-controls .dashboard-range-tabs {
          display: grid;
          grid-template-columns: repeat(4, minmax(0, 1fr));
          width: 100%;
        }

        #dashboard-controls [data-dashboard-range="yesterday"] {
          display: none !important;
        }

        #dashboard-controls .dashboard-range-button {
          align-items: center;
          display: inline-flex;
          font-size: 13px;
          font-weight: 700;
          justify-content: center;
          line-height: 1;
          min-height: 32px;
          min-width: 0;
          padding: 0 4px;
          text-align: center;
          width: 100%;
        }

        #dashboard-controls .dashboard-custom-toggle {
          display: inline-flex !important;
          grid-column: auto;
          grid-row: auto;
          justify-content: center;
        }

        #dashboard-controls .dashboard-custom-toggle.active {
          background: var(--accent-soft);
          color: var(--accent-strong);
          font-weight: 700;
        }

        .dashboard-custom-range {
          align-items: stretch;
          display: grid;
          grid-template-columns: 1fr;
        }

        #dashboard-controls .dashboard-custom-range {
          display: none;
        }

        #dashboard-controls.custom-range-open .dashboard-custom-range {
          display: grid;
        }

        .dashboard-custom-range label {
          align-items: stretch;
          display: grid;
          gap: 4px;
        }

        .dashboard-custom-range input {
          max-width: none;
          width: 100%;
        }

        .app[data-view="workbench"] .dashboard-kpis {
          gap: 10px;
        }

        .app[data-view="workbench"] .kpi {
          border-radius: 14px;
          box-shadow: 0 10px 24px rgba(20, 42, 52, 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"] .dashboard-customer-kpis .kpi:first-child,
        .app[data-view="workbench"] .dashboard-instance-kpis .kpi:first-child {
          grid-column: auto;
          min-height: 118px;
        }

        .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 {
          display: block;
          overflow-y: auto;
          padding: 12px;
        }

        .customer-filter-panel {
          background: rgba(255, 255, 255, 0.94);
          border: 1px solid rgba(216, 223, 220, 0.9);
          border-color: rgba(216, 227, 232, 0.9);
          border-radius: 12px;
          box-shadow: 0 8px 18px rgba(20, 42, 52, 0.05);
          margin-bottom: 8px;
          overflow: visible;
        }

        .customer-filter-panel:not([open]) {
          background: transparent;
          border: 0;
          border-radius: 0;
          box-shadow: none;
        }

        .customer-filter-summary {
          background: #ffffff;
          border-radius: 12px;
          display: flex;
        }

        .customer-filter-summary-copy small {
          overflow: visible;
          text-overflow: clip;
          white-space: normal;
        }

        .customer-filter-panel:not([open]) .customer-filter-summary {
          border: 1px solid rgba(216, 223, 220, 0.9);
          border-color: rgba(216, 227, 232, 0.9);
          box-shadow: 0 8px 18px rgba(20, 42, 52, 0.05);
        }

        .customer-filter-panel:not([open]) .customer-filter-form {
          display: none;
        }

        .customer-filter-panel[open] .customer-filter-form {
          display: grid;
        }

        .customer-filter-panel .customer-filter-form {
          background: transparent;
          border: 0;
          border-radius: 0;
          box-shadow: none;
        }

        .customer-filter-form {
          align-items: stretch;
          grid-template-columns: 1fr;
          gap: 10px;
          padding: 12px;
        }

        .customer-filter-field label {
          line-height: 1.25;
          overflow: visible;
          text-overflow: clip;
          white-space: normal;
        }

        .customer-field-filter-bar {
          grid-template-columns: 1fr;
          padding: 12px;
        }

        .sales-analytics-date-controls {
          background: #ffffff;
          border: 1px solid #dbe7e2;
          border-color: #d8e3e8;
          border-radius: 12px;
          box-sizing: border-box;
          box-shadow: 0 8px 20px rgba(20, 42, 52, 0.06);
          gap: 8px;
          margin: 10px 12px 0;
          padding: 10px;
          width: auto;
        }

        .sales-analytics-date-controls .dashboard-range-tabs {
          border-radius: 10px;
          width: 100%;
        }

        .sales-analytics-date-controls .dashboard-range-button {
          min-height: 30px;
        }

        .sales-analytics-date-controls .dashboard-custom-range {
          align-items: end;
          display: grid;
          gap: 8px;
          grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 74px;
        }

        .sales-analytics-date-controls .dashboard-custom-range label {
          gap: 5px;
          min-width: 0;
        }

        .sales-analytics-date-controls .dashboard-custom-range label span {
          color: var(--muted);
          font-size: 11px;
          font-weight: 800;
        }

        .sales-analytics-date-controls .dashboard-custom-range input {
          border-radius: 8px;
          font-size: 12px;
          height: 32px;
          min-width: 0;
        }

        .sales-analytics-date-controls .dashboard-custom-range .detail-button {
          grid-column: auto;
          min-height: 32px;
          padding: 5px 8px;
        }

        .sales-analytics-filter-bar {
          background: #ffffff;
          border: 1px solid #dbe7e2;
          border-color: #d8e3e8;
          border-radius: 12px;
          box-sizing: border-box;
          box-shadow: 0 8px 20px rgba(20, 42, 52, 0.05);
          gap: 10px;
          grid-template-columns: repeat(2, minmax(0, 1fr));
          margin: 8px 12px 0;
          padding: 10px;
          width: auto;
        }

        .sales-analytics-filter-bar .customer-field-filter {
          gap: 5px;
        }

        .sales-analytics-filter-bar .customer-field-filter span {
          font-size: 11px;
        }

        .sales-analytics-filter-bar .customer-field-filter select {
          border-radius: 8px;
          font-size: 13px;
          min-height: 34px;
          padding: 0 9px;
        }

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

        .sales-analytics-filter-bar .detail-button {
          min-height: 34px;
        }

        .app[data-view="sales-customer-analytics"] .sales-customer-analytics {
          background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(242, 246, 248, 0.98)),
            #f3f8f6;
          min-height: 0;
          overflow-y: auto;
          -webkit-overflow-scrolling: touch;
        }

        .app[data-view="sales-customer-analytics"] .customer-management-head {
          border-bottom: 0;
          padding: 14px 12px 4px;
        }

        .app[data-view="sales-customer-analytics"] .customer-management-head h2 {
          font-size: 20px;
          line-height: 1.15;
        }

        .app[data-view="sales-customer-analytics"] .sales-analytics-table-wrap {
          margin: 10px 12px 18px;
          overflow: visible;
          padding: 0;
        }

        .app[data-view="sales-customer-analytics"] .sales-analytics-table {
          background: transparent;
          border: 0;
          border-radius: 0;
          display: block;
          min-width: 0;
          width: 100%;
        }

        .app[data-view="sales-customer-analytics"] .sales-analytics-table colgroup,
        .app[data-view="sales-customer-analytics"] .sales-analytics-table thead {
          display: none;
        }

        .app[data-view="sales-customer-analytics"] .sales-analytics-table tbody {
          display: grid;
          gap: 10px;
          width: 100%;
        }

        .app[data-view="sales-customer-analytics"] .sales-analytics-sales-row,
        .app[data-view="sales-customer-analytics"] .sales-analytics-account-row {
          border: 1px solid #dbe7e2;
          border-color: #d8e3e8;
          display: grid;
          overflow: hidden;
          width: 100%;
        }

        .app[data-view="sales-customer-analytics"] .sales-analytics-sales-row {
          background: #ffffff;
          border-radius: 12px;
          box-shadow: 0 10px 24px rgba(20, 42, 52, 0.08);
          margin-top: 2px;
        }

        .app[data-view="sales-customer-analytics"] .sales-analytics-account-row {
          background: #f2f7f5;
          border-color: #d7e6df;
          border-radius: 10px;
          margin: -4px 8px 0 16px;
          width: auto;
        }

        .app[data-view="sales-customer-analytics"] .sales-analytics-sales-row td,
        .app[data-view="sales-customer-analytics"] .sales-analytics-account-row td {
          align-items: center;
          background: transparent;
          border-bottom: 1px solid rgba(216, 226, 222, 0.72);
          border-bottom-color: rgba(216, 227, 232, 0.72);
          box-shadow: none;
          display: flex;
          font-size: 14px;
          justify-content: space-between;
          min-height: 36px;
          padding: 8px 12px;
          vertical-align: middle;
          width: 100%;
        }

        .app[data-view="sales-customer-analytics"] .sales-analytics-sales-row td:first-child,
        .app[data-view="sales-customer-analytics"] .sales-analytics-account-row td:first-child {
          background: rgba(255, 255, 255, 0.76);
          border-bottom-color: #d5e3de;
          box-shadow: inset 3px 0 0 var(--accent);
          padding: 11px 12px;
        }

        .app[data-view="sales-customer-analytics"] .sales-analytics-account-row td:first-child {
          background: rgba(236, 245, 242, 0.95);
          box-shadow: inset 3px 0 0 #b9d4cb;
        }

        .app[data-view="sales-customer-analytics"] .sales-analytics-sales-row td:last-child,
        .app[data-view="sales-customer-analytics"] .sales-analytics-account-row td:last-child {
          border-bottom: 0;
        }

        .app[data-view="sales-customer-analytics"] .sales-analytics-sales-row td:not(:first-child)::before,
        .app[data-view="sales-customer-analytics"] .sales-analytics-account-row td:not(:first-child)::before {
          color: var(--muted);
          content: attr(data-label);
          font-size: 12px;
          font-weight: 800;
        }

        .app[data-view="sales-customer-analytics"] .sales-analytics-sales-row td:not(:first-child),
        .app[data-view="sales-customer-analytics"] .sales-analytics-account-row td:not(:first-child) {
          color: var(--text);
          font-weight: 800;
        }

        .app[data-view="sales-customer-analytics"] .sales-analytics-toggle {
          width: 100%;
        }

        .app[data-view="sales-customer-analytics"] .sales-analytics-toggle strong,
        .app[data-view="sales-customer-analytics"] .sales-analytics-account-name strong {
          font-size: 15px;
          overflow-wrap: anywhere;
          white-space: normal;
        }

        .app[data-view="sales-customer-analytics"] .sales-analytics-account-name {
          justify-content: space-between;
          width: 100%;
        }

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

        .customer-table-wrap {
          display: none;
        }

        .customer-pagination {
          display: none !important;
        }

        .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 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;
          height: 100%;
          grid-template-rows: auto minmax(0, 1fr) auto;
          min-height: 0;
        }

        .app[data-view="conversations"] .layout[data-mobile-pane="detail"] .chat-body {
          min-height: 0;
          overflow-y: 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%, #5c6b78 50%) calc(100% - 18px) 50% / 6px 6px no-repeat,
            linear-gradient(135deg, #5c6b78 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;
          border-bottom-color: #f6f8fb;
          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-filters .quick-filter-wrap {
          box-shadow: none;
          padding-left: 0;
        }

        #conversation-more-filter,
        #conversation-grade-filter,
        #conversation-quick-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-bottom-color: #f6f8fb;
          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;
        }

        .conversation-menu-trigger {
          opacity: 0.7;
        }

        .conversation-row-menu {
          right: 10px;
          top: 42px;
        }

        .chat-head {
          align-items: center;
          background: #f7f8f8;
          border-bottom: 1px solid #d8dfdc;
          border-bottom-color: #d8e3e8;
          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.inbound .bubble:has(.message-ai-reply-card),
        .message-row.inbound .bubble:has(.message-ai-reply-loading),
        .message-row.inbound .bubble:has(.message-ai-reply-error) {
          max-width: 92%;
        }

        .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(20, 42, 52, 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(31, 122, 122, 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;
        }

        .followup-form,
        #customer-detail-quick-form,
        #customer-metadata-form,
        #customer-important-form {
          display: none !important;
        }

        .customer-comments {
          gap: 10px;
        }

        .comment-compose {
          background: linear-gradient(180deg, #f4fafb 0%, #ffffff 100%);
          border-color: rgba(31, 122, 122, 0.32);
          border-radius: 12px;
          box-shadow: 0 10px 22px rgba(31, 122, 122, 0.1);
          gap: 10px;
          padding: 12px;
        }

        .comment-compose-head {
          font-size: 15px;
        }

        .comment-compose-icon {
          border-radius: 9px;
          height: 30px;
          width: 30px;
        }

        .comment-form textarea {
          border-color: rgba(31, 122, 122, 0.22);
          border-radius: 10px;
          font-size: 16px;
          line-height: 1.45;
          min-height: 128px;
          padding: 10px 11px;
        }

        .comment-form textarea:focus {
          border-color: rgba(31, 122, 122, 0.72);
          box-shadow: 0 0 0 3px rgba(31, 122, 122, 0.12);
          outline: none;
        }

        .comment-actions {
          align-items: stretch;
          display: grid;
          gap: 8px;
          grid-template-columns: 1fr;
        }

        .comment-actions .detail-button {
          justify-content: center;
          min-height: 44px;
          width: 100%;
        }

        .comment-status {
          line-height: 1.35;
          min-height: 16px;
          order: 2;
        }

        .comment-empty,
        .comment-permission {
          border-radius: 10px;
          font-size: 13px;
          padding: 12px;
        }

        .comment-item {
          border-radius: 10px;
          gap: 9px;
          padding: 12px;
        }

        .comment-content {
          font-size: 13.5px;
        }

        .comment-reply-box {
          gap: 10px;
        }

        .comment-reply-box summary {
          background: rgba(31, 122, 122, 0.08);
          border: 1px solid rgba(18, 140, 126, 0.18);
          border-color: rgba(31, 122, 122, 0.18);
          border-radius: 999px;
          min-height: 34px;
          padding: 7px 12px;
        }

        .comment-reply-form {
          border-color: rgba(31, 122, 122, 0.22);
          border-radius: 10px;
          padding: 10px;
        }
      }

      /* S3 layout fix: the official panel uses .role-account-panel's grid
         (grid-template-rows: auto minmax(0,1fr)) which expects exactly 2 children
         (subhead + body). The monitoring panel adds a 3rd child, so give THIS panel
         a 3-row template and pin each child to its row - keeps the monitoring panel
         between the header and the account form/list instead of overlapping it. */
      .official-whatsapp-panel {
        grid-template-rows: auto auto minmax(0, 1fr);
      }
      .official-whatsapp-panel > .management-subhead { grid-row: 1; }
      .official-whatsapp-panel > .official-send-observability { grid-row: 2; }
      .official-whatsapp-panel > .management-body { grid-row: 3; }

      /* S3: official send monitoring panel (admin-only, read-only display) */
      .official-send-observability {
        margin: 0 0 12px;
        padding: 10px 12px;
        border: 1px solid rgba(18, 140, 126, 0.22);
        border-color: rgba(31, 122, 122, 0.22);
        border-radius: 10px;
        background: var(--ok-soft);
      }
      .official-send-observability .oso-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-weight: 600;
        color: var(--muted-strong);
        margin-bottom: 8px;
      }
      .official-send-observability .oso-head.danger { color: var(--danger); }
      .official-send-observability .oso-status {
        font-size: 12px;
        padding: 2px 10px;
        border-radius: 999px;
        background: var(--ok-soft);
        color: var(--ok);
        border: 1px solid var(--ok);
      }
      .official-send-observability .oso-status.danger {
        background: var(--danger-soft);
        color: var(--danger);
        border-color: var(--danger);
      }
      .official-send-observability .oso-chips {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        margin-bottom: 8px;
      }
      .official-send-observability .oso-chip {
        display: inline-flex;
        align-items: baseline;
        gap: 4px;
        font-size: 12px;
        color: var(--muted-strong);
        background: #fff;
        border: 1px solid rgba(18, 140, 126, 0.22);
        border-color: rgba(31, 122, 122, 0.22);
        border-radius: 999px;
        padding: 3px 10px;
      }
      .official-send-observability .oso-chip b { font-size: 13px; color: var(--accent); }
      .official-send-observability .oso-chip.danger {
        background: var(--danger-soft);
        border-color: var(--danger);
      }
      .official-send-observability .oso-chip.danger b { color: var(--danger); }
      .official-send-observability .oso-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 12px;
        background: #fff;
        border-radius: 8px;
        overflow: hidden;
      }
      .official-send-observability .oso-table th,
      .official-send-observability .oso-table td {
        text-align: left;
        padding: 5px 8px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.06);
      }
      .official-send-observability .oso-table th { color: var(--muted); font-weight: 600; }
      .official-send-observability .oso-empty { color: var(--muted); text-align: center; padding: 8px; }
      .official-send-observability .oso-empty.danger { color: var(--danger); }
      .official-send-observability .oso-foot { margin: 6px 0 0; font-size: 11px; color: var(--muted); }

      /* P2-Chat-GeneratedAvatar-Fix1：无真实头像时的本地确定性头像 fallback（纯展示）。
         由 public/assets/crm-generated-avatar.js 按客户稳定身份挑 12 色 × 8 纹样 × 1 文字，
         仅在无 avatar_url 的元素上叠加这些 class；有真实头像者不加、照常显示 <img>。
         用双类名(.crm-generated-avatar.--color-N) 提到 (0,2,0) 特异性并置于文件末尾，
         稳压 .avatar / .customer-detail-avatar 的 (0,1,0) 底色与 .conversation-button:hover .avatar 的 (0,2,0) 悬停底色。
         颜色走 background-color、纹样走 background-image，互不覆盖；纹样为低透明度 CSS 渐变，无外部图片、不遮挡文字。 */
      .crm-generated-avatar {
        color: #ffffff;
        background-repeat: repeat;
        background-position: center;
      }
      .crm-generated-avatar.crm-generated-avatar--color-0 { background-color: #0f766e; }
      .crm-generated-avatar.crm-generated-avatar--color-1 { background-color: #0e7490; }
      .crm-generated-avatar.crm-generated-avatar--color-2 { background-color: #047857; }
      .crm-generated-avatar.crm-generated-avatar--color-3 { background-color: #15803d; }
      .crm-generated-avatar.crm-generated-avatar--color-4 { background-color: #4d7c0f; }
      .crm-generated-avatar.crm-generated-avatar--color-5 { background-color: #a16207; }
      .crm-generated-avatar.crm-generated-avatar--color-6 { background-color: #b45309; }
      .crm-generated-avatar.crm-generated-avatar--color-7 { background-color: #b91c1c; }
      .crm-generated-avatar.crm-generated-avatar--color-8 { background-color: #be185d; }
      .crm-generated-avatar.crm-generated-avatar--color-9 { background-color: #7c3aed; }
      .crm-generated-avatar.crm-generated-avatar--color-10 { background-color: #4f46e5; }
      .crm-generated-avatar.crm-generated-avatar--color-11 { background-color: #1d4ed8; }
      .crm-generated-avatar.crm-generated-avatar--pattern-0 { background-image: none; }
      .crm-generated-avatar.crm-generated-avatar--pattern-1 {
        background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.1) 0, rgba(255, 255, 255, 0.1) 5px, rgba(255, 255, 255, 0) 5px, rgba(255, 255, 255, 0) 11px);
      }
      .crm-generated-avatar.crm-generated-avatar--pattern-2 {
        background-image: radial-gradient(rgba(255, 255, 255, 0.16) 1.4px, rgba(255, 255, 255, 0) 1.6px);
        background-size: 9px 9px;
      }
      .crm-generated-avatar.crm-generated-avatar--pattern-3 {
        background-image: radial-gradient(circle at 28% 24%, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 58%);
      }
      .crm-generated-avatar.crm-generated-avatar--pattern-4 {
        background-image: radial-gradient(circle at 82% 86%, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0) 55%);
      }
      .crm-generated-avatar.crm-generated-avatar--pattern-5 {
        background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.09) 0, rgba(255, 255, 255, 0.09) 5px, rgba(255, 255, 255, 0) 5px, rgba(255, 255, 255, 0) 11px);
      }
      .crm-generated-avatar.crm-generated-avatar--pattern-6 {
        background-image:
          repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.08) 0, rgba(255, 255, 255, 0.08) 4px, rgba(255, 255, 255, 0) 4px, rgba(255, 255, 255, 0) 9px),
          repeating-linear-gradient(-45deg, rgba(0, 0, 0, 0.08) 0, rgba(0, 0, 0, 0.08) 4px, rgba(0, 0, 0, 0) 4px, rgba(0, 0, 0, 0) 9px);
      }
      .crm-generated-avatar.crm-generated-avatar--pattern-7 {
        background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.14), rgba(0, 0, 0, 0.12));
      }

      /* ==================================================================
         Layout-G（Stitch）：全局导航左侧栏。
         桌面端（≥768px）把既有 .topbar 原地转为固定左侧栏：同一批 DOM
         （view-button / 动态中心角标 / 铃铛 / 账号菜单 / #health 挂点）只改
         布局与皮肤，不复制不删除任何入口；<768px 不进入本块，移动端保持
         既有顶部导航形态与全部既有移动媒体规则，零变化。
         「销售目标」nav 项与 .nav-ico / .nav-section-label 仅 ≥768 显示。
         tokens 取自 Stitch DESIGN.md：细边 #E2E8F0 / 主色 #00453D / 工作区底 #F8FAFC。
         ================================================================== */
      .nav-ico { display: none; }
      .nav-section-label { display: none; }
      .view-button[data-dashboard-goal-open] { display: none; }
      /* 品牌名拆两行仅桌面侧栏用；<768 维持原单行观感（tier 与名称同字号同行） */
      .brand-tier { margin-left: 6px; }

      @media (min-width: 768px) {
        /* ===== A8 侧栏自动收起（老板方案）：桌面默认 56px 图标栏，hover 进入 120ms 展开、
           离开 320ms 收起（transition-delay 双态=目标态取值，移回天然取消收起）；
           focus-within 与通知/账号弹层打开时保持展开；展开为 overlay（fixed z-1000 覆盖，
           工作区 padding-left 恒=--sidenav-collapsed 不重排）。统一变量：
           --sidenav-collapsed=工作区预留宽（≤880 会话页归 0）；--sidenav-expanded=展开宽
           （普通页 256 / 会话页 218，事件抽屉 left 同源 --sidenav-collapsed）。
           纯 CSS 实现：零监听、零定时器、快速进出由过渡反转天然防闪烁。 ===== */
        .app {
          --sidenav-collapsed: 56px;
          --sidenav-expanded: 256px;
          background: #f8fafc;
          padding-left: var(--sidenav-collapsed);
        }
        .topbar {
          align-items: stretch;
          backdrop-filter: none;
          background: #ffffff;
          border-bottom: 0;
          border-right: 1px solid #e2e8f0;
          bottom: 0;
          box-shadow: none;
          display: flex;
          flex-direction: column;
          gap: 0;
          justify-content: flex-start;
          left: 0;
          /* A8-Fix1：收起态经 overflow 裁剪隐藏内容（布局恒定=展开版式，文字起点几何 ≥56px，
             无 display/font-size/color 切换 → 内容与宽度天然同步无闪烁，Codex 阻断②）。
             通知/账号面板为 fixed 定位不受祖先 overflow 裁剪。 */
          overflow: hidden;
          padding: 0;
          position: fixed;
          top: 0;
          transition: width 200ms ease 320ms;
          width: var(--sidenav-collapsed);
          z-index: 1000;
        }
        /* A8-Fix1（Codex 阻断①）：焦点保持条件从 :focus-within 收窄为 :has(:focus-visible)——
           鼠标点击导航产生的焦点（非 focus-visible）不再钉住展开态，移出按 320ms 收起；
           键盘 Tab 焦点（focus-visible）保持展开，Escape 由既有 keydown 处理 blur 收起。 */
        .topbar:hover,
        .topbar:has(:focus-visible),
        .topbar:has(.notification-panel:not([hidden])),
        .topbar:has(.account-menu:not([hidden])) {
          box-shadow: 0 12px 34px rgba(16, 42, 34, 0.14);
          transition: width 200ms ease 120ms;
          width: var(--sidenav-expanded);
        }
        /* A8-Fix1（Codex 阻断③）：减弱动画=瞬时切换，delay 一并清零 */
        @media (prefers-reduced-motion: reduce) {
          .topbar,
          .topbar .brand,
          .topbar .view-button,
          .topbar .nav-section-label,
          .topbar .topbar-tools {
            transition-delay: 0s !important;
            transition-duration: 0.001ms !important;
          }
        }
        /* —— A8-Fix1 收起态几何（Codex 阻断②根治）：布局恒定=展开版式，双态只用【可过渡属性】
           （brand/按钮/分组标签/账号区的 padding·gap·background-size），与宽度同一 delay 组
           （基态 320ms / 展开 120ms）同步过渡——无 display/font-size/color 切换，无先后闪烁。
           收起 56px 内只露图标带（文字起点几何 ≥56 被 topbar overflow 裁净）：
           按钮 icon 中心=19+9=28、文字起点=19+18+19=56；brand W 中心=12+16=28、h1 起点=60；
           账号 avatar 中心=12+16=28、meta 起点=56；badge/caret/health/铃铛位于 56 外天然裁隐。 —— */
        .topbar .brand {
          padding: 4px 12px 0;
          transition: padding 200ms ease 320ms;
        }
        .topbar .view-button {
          gap: 19px;
          margin-right: 0;
          padding-left: 19px;
          transition: gap 200ms ease 320ms, margin-right 200ms ease 320ms, padding-left 200ms ease 320ms;
        }
        .topbar .nav-section-label {
          background: linear-gradient(#e2e8f0, #e2e8f0) no-repeat 14px center / 28px 1px;
          padding-left: 56px;
          transition: background-size 200ms ease 320ms, padding-left 200ms ease 320ms;
        }
        .topbar .topbar-tools {
          padding: 20px 12px;
          transition: padding 200ms ease 320ms;
        }
        .topbar:hover .brand, .topbar:has(:focus-visible) .brand,
        .topbar:has(.notification-panel:not([hidden])) .brand, .topbar:has(.account-menu:not([hidden])) .brand {
          padding: 4px 32px 0;
          transition-delay: 120ms;
        }
        .topbar:hover .view-button, .topbar:has(:focus-visible) .view-button,
        .topbar:has(.notification-panel:not([hidden])) .view-button, .topbar:has(.account-menu:not([hidden])) .view-button {
          gap: 16px;
          margin-right: 24px;
          padding-left: 32px;
          transition-delay: 120ms;
        }
        .topbar:hover .nav-section-label, .topbar:has(:focus-visible) .nav-section-label,
        .topbar:has(.notification-panel:not([hidden])) .nav-section-label, .topbar:has(.account-menu:not([hidden])) .nav-section-label {
          background-size: 0 1px;
          padding-left: 32px;
          transition-delay: 120ms;
        }
        .topbar:hover .topbar-tools, .topbar:has(:focus-visible) .topbar-tools,
        .topbar:has(.notification-panel:not([hidden])) .topbar-tools, .topbar:has(.account-menu:not([hidden])) .topbar-tools {
          padding: 20px 24px;
          transition-delay: 120ms;
        }
        /* A8-Fix1（Codex 补充）：粗指针设备（触摸）无 hover 语义——侧栏固定展开，
           工作区预留宽经变量联动同步为展开宽（不做悬停收放）；四个双态元素锁展开几何。
           本块必须位于上方双态基态规则之后（同特异性靠级联顺序取胜）。 */
        @media (pointer: coarse) {
          .app { --sidenav-collapsed: var(--sidenav-expanded); }
          .topbar { transition: none; width: var(--sidenav-expanded); }
          .topbar .brand { padding: 4px 32px 0; transition: none; }
          .topbar .view-button { gap: 16px; margin-right: 24px; padding-left: 32px; transition: none; }
          .topbar .nav-section-label { background-size: 0 1px; padding-left: 32px; transition: none; }
          .topbar .topbar-tools { padding: 20px 24px; transition: none; }
        }
        /* —— Stitch 一比一：品牌区 h-20/px-8/gap-16、双行标识（16px 名称 + 10px 宽字距副标） —— */
        .topbar-main {
          align-items: stretch;
          display: flex;
          flex: 1 1 auto;
          flex-direction: column;
          flex-wrap: nowrap;
          gap: 24px;
          min-height: 0;
          overflow-x: hidden;
          overflow-y: auto;
          padding: 16px 0 8px;
        }
        .brand { align-items: center; display: flex; gap: 16px; padding: 4px 32px 0; }
        .brand::before {
          align-items: center;
          border: 1px solid #e2e8f0;
          border-radius: 6px;
          color: #00453d;
          content: "W";
          display: inline-flex;
          flex: none;
          font-size: 17px;
          font-weight: 800;
          height: 32px;
          justify-content: center;
          width: 32px;
        }
        .brand h1 { display: grid; font-size: 16px; gap: 3px; line-height: 1.1; }
        .brand-name { font-size: 16px; font-weight: 800; letter-spacing: -0.01em; }
        .brand-tier { color: #bec9c5; font-size: 10px; font-weight: 600; letter-spacing: 0.2em; margin-left: 0; }
        /* —— Stitch 一比一：导航项 py-3/px-8/gap-16/右满圆角/右缩进 mr-6，激活=浅蓝底+左 2px 主色条 —— */
        .view-nav {
          align-items: stretch;
          background: transparent;
          border: 0;
          border-radius: 0;
          box-shadow: none;
          display: flex;
          flex-direction: column;
          flex-wrap: nowrap;
          gap: 4px;
          padding: 8px 0;
        }
        .nav-ico { color: #6f7976; display: inline-flex; flex: none; }
        .nav-ico svg { height: 18px; width: 18px; }
        .view-button {
          align-items: center;
          border-radius: 0 999px 999px 0;
          color: #3f4946;
          display: flex;
          font-size: 14px;
          font-weight: 500;
          gap: 16px;
          justify-content: flex-start;
          letter-spacing: 0.02em;
          margin-right: 24px;
          min-height: 44px;
          padding: 12px 12px 12px 32px;
          position: relative;
          text-align: left;
          white-space: nowrap;
        }
        .view-button:hover { background: #eff4ff; color: #0b1c30; }
        .view-button:hover .nav-ico { color: #00453d; }
        .view-button.active {
          background: rgba(229, 238, 255, 0.5);
          box-shadow: none;
          color: #0b1c30;
          font-weight: 600;
          transform: none;
        }
        .view-button.active::before {
          background: #00453d;
          border-radius: 0 999px 999px 0;
          content: '';
          height: 16px;
          left: 0;
          position: absolute;
          top: calc(50% - 8px);
          width: 2px;
        }
        .view-button.active .nav-ico { color: #00453d; }
        .view-button[data-dashboard-goal-open] { display: flex; }
        /* Stitch：动态中心角标=红色纯文字（无胶囊底） */
        .view-nav .nav-badge {
          background: transparent;
          color: #ba1a1a;
          font-size: 11px;
          font-weight: 800;
          margin-left: auto;
          min-width: 0;
          padding: 0;
        }
        .nav-section-label {
          color: #bec9c5;
          display: block;
          font-size: 10px;
          font-weight: 700;
          letter-spacing: 0.12em;
          margin-top: 28px;
          padding: 0 32px 4px;
        }
        /* —— Stitch 一比一：底部 p-6(24px)、无边框账号行（avatar 32 + 13px 名/11px 角色 + 折叠符），
             通知铃铛保留在行末（Stitch 无铃铛，按老板要求保留，弱化为无边框图标钮） —— */
        .topbar-tools {
          align-items: center;
          border-top: 1px solid #e2e8f0;
          display: flex;
          flex: none;
          gap: 8px;
          justify-content: flex-start;
          padding: 20px 24px;
        }
        .topbar-tools[hidden] { display: none; }
        .account-menu-wrap { flex: 1 1 auto; min-width: 0; order: -1; }
        .account-menu-button {
          background: transparent;
          border: 0;
          box-shadow: none;
          gap: 12px;
          padding: 2px 0;
          width: 100%;
        }
        .topbar-tools .current-user-avatar {
          background: #eff4ff;
          border: 1px solid #e2e8f0;
          color: #00453d;
          font-weight: 800;
        }
        .topbar-tools .current-user-name { color: #0b1c30; font-size: 13px; font-weight: 600; }
        .topbar-tools .current-user-role { color: #6f7976; font-size: 11px; }
        .topbar-tools .menu-caret { color: #bec9c5; }
        .topbar-tools .topbar-icon-button {
          background: transparent;
          border: 0;
          box-shadow: none;
          height: 32px;
          min-height: 0;
          padding: 0;
          width: 32px;
        }
        .topbar-tools .topbar-icon-button:hover { background: #eff4ff; }
        .notification-panel,
        .account-menu {
          bottom: 78px;
          left: 16px;
          max-height: min(70vh, 560px);
          overflow-y: auto;
          position: fixed;
          right: auto;
          top: auto;
          width: 330px;
        }
      }

      /* ==================================================================
         Layout-C1（定版风格）：客户管理板块——列表单卡三段式 + 档案三栏 + 模块弹窗。
         桌面（≥768px）生效；<768px 移动端保持既有卡片列表与档案布局（JS 模板同步分流）。
         按钮四级体系：实心主色 #00453D（每页唯一）/ 主色柔底 / 白底细边 / 低饱和砖红 #9A4A43。
         弹窗开合骑既有 tab 机制：可见性由 .customer-profile-modal[data-detail-tab] 驱动，零新增 JS。
         ================================================================== */
      @media (min-width: 768px) {
        /* —— 列表页：单卡三段式（筛选工具条 / 台账表 / 分页贴底） —— */
        .customer-management { display: flex; flex-direction: column; min-height: 0; padding: 14px 24px 18px; }
        .customer-management-body {
          background: #ffffff;
          border: 1px solid #e2e8f0;
          border-radius: 10px;
          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
          display: flex;
          flex: 1 1 auto;
          flex-direction: column;
          min-height: 0;
          overflow: hidden;
          padding: 0;
        }
        .customer-filter-panel { border-bottom: 1px solid #e2e8f0; }
        /* 特异性对齐 1038 行的 .customer-filter-panel .customer-filter-form { display:grid } */
        .customer-filter-panel .customer-filter-form,
        .customer-filter-form {
          align-items: center;
          background: transparent;
          border: 0;
          border-radius: 0;
          box-shadow: none;
          display: flex;
          flex-wrap: wrap;
          gap: 6px;
          padding: 10px 12px;
        }
        .customer-management-body { min-width: 0; }
        .customer-filter-form { min-width: 0; }
        .customer-filter-field { display: flex; flex: none; min-width: 0; }
        /* 标签并入控件占位文案：label 视觉隐藏、语义保留 */
        .customer-filter-field label {
          border: 0;
          clip: rect(0 0 0 0);
          height: 1px;
          margin: -1px;
          overflow: hidden;
          padding: 0;
          position: absolute;
          width: 1px;
        }
        .customer-filter-field input,
        .customer-filter-field select { border-color: #e2e8f0; border-radius: 8px; box-sizing: border-box; font-size: 12.5px; height: 32px; }
        /* 原生 select 会按最长 option 撑宽：定宽（border-box），选中项超长由 UA 截断（占位标签均为短词） */
        .customer-filter-field select { min-width: 0; padding-left: 8px; width: 96px; }
        .customer-filter-field:first-child { flex: 1 1 140px; max-width: 170px; }
        .customer-filter-field:first-child input { min-width: 0; width: 100%; }
        .customer-filter-actions { flex: none; gap: 8px; margin-left: auto; }
        .customer-filter-actions .customer-filter-button { white-space: nowrap; }
        .customer-filter-button { background: #00453d; border-color: #00453d; border-radius: 8px; min-height: 32px; padding: 5px 14px; }
        .customer-filter-button:hover { background: #063f38; border-color: #063f38; }
        .customer-filter-button.secondary { background: #fff; border-color: #e2e8f0; color: #3f4946; }
        .customer-filter-button.secondary:hover { background: #f1f5f9; color: #0b1c30; }

        /* —— 台账式表格：36px 表头 #F1F5F9 + 44px 行 + 单行省略 + 行悬停 ——
           选择器逐条对齐 1346-1604 旧基础块的特异度（.customer-table 前缀），靠尾部同特异度覆盖生效；
           colgroup 已修为 9 列（历史遗留 10 列在 table-layout:fixed 下产生 9% 幽灵列、挤爆操作列） */
        .customer-table-wrap { background: transparent; border: 0; border-radius: 0; box-shadow: none; flex: 1 1 auto; }
        .customer-table { min-width: 1080px; }
        .customer-table th {
          background: #f1f5f9;
          color: #3f4946;
          font-size: 12px;
          font-weight: 600;
          height: 36px;
          letter-spacing: 0.03em;
          padding: 0 10px;
          white-space: nowrap;
        }
        .customer-table th:first-child { border-top-left-radius: 0; }
        .customer-table th:last-child { border-top-right-radius: 0; }
        .customer-table td {
          border-bottom-color: #eff2f5;
          color: #3f4946;
          font-size: 13px;
          height: 44px;
          padding: 2px 10px;
        }
        .customer-table tbody tr:hover td { background: #f8fafc; }
        .customer-table tr.active td { background: #f1f5f9; }
        .customer-table tr.active td:first-child { box-shadow: inset 2px 0 0 #00453d; }
        /* 客户名称：24px 头像 + 单行省略（覆盖旧 44px 头像 / 2 行 clamp / 46px 钮最小高） */
        .customer-table .customer-name-cell button { gap: 8px; min-height: 0; }
        .customer-table .customer-name-cell .avatar { font-size: 11px; height: 24px; width: 24px; }
        .customer-table .customer-name-cell .primary-cell {
          display: block;
          font-weight: 600;
          line-height: 1.35;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          -webkit-line-clamp: unset;
        }
        .customer-table .customer-owner-cell .primary-cell { font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
        /* 产品需求列：左对齐 + 单行省略（覆盖旧第 6 列居中与 2 行 clamp；完整内容走既有 title 悬浮） */
        .customer-table th:nth-child(6),
        .customer-table td:nth-child(6) { text-align: left; }
        .customer-table .customer-message {
          display: block;
          overflow: hidden;
          text-align: left;
          text-overflow: ellipsis;
          white-space: nowrap;
          -webkit-line-clamp: unset;
        }
        .customer-table .customer-time-cell { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .customer-table .customer-chip { font-size: 12px; padding: 3px 8px; }
        /* 操作列：幽灵文字钮（删除=砖红文字），flex order 让删除排尾成 档案/会话/推送/删除——DOM 顺序与 handler 不动 */
        .customer-row-actions { gap: 2px; }
        .customer-table .customer-action-button {
          background: transparent;
          border-color: transparent;
          border-radius: 7px;
          box-shadow: none;
          color: #3f4946;
          font-size: 12px;
          font-weight: 600;
          min-height: 26px;
          padding: 2px 7px;
        }
        .customer-table .customer-action-button.secondary { background: transparent; color: #3f4946; }
        .customer-table .customer-action-button:hover { background: rgba(0, 69, 61, 0.08); border-color: transparent; color: #00453d; }
        .customer-table .customer-action-button.danger { background: transparent; border-color: transparent; color: #9a4a43; order: 10; }
        .customer-table .customer-action-button.danger:hover { background: rgba(239, 68, 68, 0.08); color: #9a4a43; }
        .customer-table .customer-action-button[disabled] { background: transparent; color: #bec9c5; }

        /* —— 分页贴底 —— */
        .customer-pagination {
          background: transparent;
          border: 0;
          border-radius: 0;
          border-top: 1px solid #e2e8f0;
          box-shadow: none;
          margin-top: 0;
          min-height: 48px;
          padding: 8px 12px;
        }
        .pagination-btn { border-color: #e2e8f0; border-radius: 7px; }
        .pagination-btn.page-number.active { background: #00453d; border-color: #00453d; color: #fff; }
        .customer-pagination select,
        .customer-pagination input { border-color: #e2e8f0; border-radius: 7px; box-sizing: border-box; height: 32px; }

        /* —— 档案页：外壳纵向流 + 顶条 + 头卡 —— */
        .customer-detail-view { min-height: 0; }
        .customer-detail-shell { display: flex; flex-direction: column; gap: 12px; height: 100%; min-height: 0; }
        .customer-profile-topbar { align-items: center; display: flex; flex-wrap: wrap; gap: 8px 12px; }
        .customer-profile-crumb { align-items: baseline; color: #6f7976; display: inline-flex; font-size: 13px; gap: 8px; }
        .customer-profile-crumb b { color: #0b1c30; font-weight: 600; }
        .customer-profile-crumb-link { background: transparent; border: 0; color: #6f7976; cursor: pointer; font: inherit; padding: 0; }
        .customer-profile-crumb-link:hover { color: #00453d; text-decoration: underline; }
        .customer-profile-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
        .customer-profile-actions .detail-button {
          background: #fff;
          border: 1px solid #e2e8f0;
          border-radius: 8px;
          box-shadow: none;
          color: #3f4946;
          font-size: 12px;
          font-weight: 500;
          min-height: 30px;
          padding: 4px 10px;
          transform: none;
        }
        .customer-profile-actions .customer-profile-act.is-primary { background: #00453d; border-color: #00453d; color: #fff; font-weight: 600; }
        .customer-profile-actions .customer-profile-act.is-primary:hover { background: #063f38; }
        .customer-profile-actions .customer-profile-act.is-soft { background: rgba(0, 69, 61, 0.07); border-color: rgba(0, 69, 61, 0.16); color: #00453d; font-weight: 600; }
        .customer-profile-actions .customer-profile-act.is-danger,
        .customer-profile-actions .danger-button { background: #fff; border-color: #e2e8f0; color: #9a4a43; }
        .customer-profile-actions .customer-profile-act.is-danger:hover,
        .customer-profile-actions .danger-button:hover { background: rgba(239, 68, 68, 0.08); }
        /* 「更多操作」在新动作行同样保持既有隐藏语义（原规则作用域挂在旧 toolbar 容器上） */
        .customer-profile-actions .customer-detail-more-actions-hidden { display: none !important; }
        .customer-profile-actions .detail-button { white-space: nowrap; }
        .customer-profile-headcard {
          align-items: center;
          background: #fff;
          border: 1px solid #e2e8f0;
          border-radius: 10px;
          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
          display: flex;
          flex-wrap: wrap;
          gap: 6px 12px;
          padding: 10px 14px;
        }
        .customer-profile-headcard .customer-detail-avatar { flex: none; height: 40px; width: 40px; }
        .customer-profile-head-main { display: grid; flex: 1 1 340px; gap: 5px; min-width: 0; }
        .customer-profile-head-row1 { align-items: center; display: flex; flex-wrap: wrap; gap: 5px 8px; }
        .customer-profile-head-row1 h2 { font-size: 16px; line-height: 1.35; margin: 0; }
        .customer-profile-head-row1 .customer-detail-quick-form { align-items: center; display: inline-flex; flex-wrap: wrap; gap: 5px; margin: 0; }
        .customer-profile-head-row1 .customer-detail-toolbar-control { min-height: 24px; }
        .customer-profile-head-row2 { align-items: center; color: #6f7976; display: flex; flex-wrap: wrap; font-size: 12px; gap: 4px 12px; }
        .customer-profile-head-row2 b { color: #3f4946; }
        .customer-profile-owner { max-width: 420px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .customer-profile-instance { max-width: 380px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .customer-profile-head-meta { color: #6f7976; display: grid; font-size: 12px; gap: 4px; margin-left: auto; text-align: right; }
        .customer-profile-head-meta b { color: #3f4946; font-variant-numeric: tabular-nums; }

        /* —— 三栏：概览常驻(内滚) + 跟进摘要 + 右列(评论/文件/关键时间) —— */
        .customer-detail-body.is-profile-l3 {
          align-items: stretch;
          display: grid;
          flex: 1 1 auto;
          gap: 12px;
          grid-template-columns: minmax(0, 4.1fr) minmax(0, 3.4fr) minmax(0, 3fr);
          min-height: 0;
        }
        .customer-detail-sidebar.is-profile-l3 { display: contents; }
        .customer-profile-col-main { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
        .cp-col-side { display: flex; flex-direction: column; gap: 12px; min-height: 0; min-width: 0; overflow-y: auto; }
        .customer-profile-col-main .customer-overview-card {
          background: #fff;
          border: 1px solid #e2e8f0;
          border-radius: 10px;
          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
          display: flex;
          flex: 1 1 auto;
          flex-direction: column;
          min-height: 0;
        }
        .customer-profile-col-main .detail-section-head { align-items: center; border-bottom: 1px solid #e2e8f0; margin: 0; padding: 9px 14px; }
        .customer-profile-col-main .detail-section-head h3 { font-size: 13.5px; font-weight: 700; margin: 0; }
        /* 设计稿卡头无副文案提示行 */
        .customer-profile-col-main .detail-section-head p { display: none; }
        .customer-profile-col-main .detail-section-body {
          align-content: start;
          flex: 1 1 auto;
          min-height: 0;
          overflow-y: auto;
          padding: 4px 14px 10px;
          scrollbar-width: thin;
        }
        .customer-profile-col-main .detail-section-body::-webkit-scrollbar,
        .cp-col-side::-webkit-scrollbar,
        .customer-profile-card-body::-webkit-scrollbar { width: 8px; }
        .customer-profile-col-main .detail-section-body::-webkit-scrollbar-thumb,
        .cp-col-side::-webkit-scrollbar-thumb,
        .customer-profile-card-body::-webkit-scrollbar-thumb { background: #d3dbe3; border-radius: 8px; }
        .customer-profile-col-main .detail-section-body::-webkit-scrollbar-track,
        .cp-col-side::-webkit-scrollbar-track,
        .customer-profile-card-body::-webkit-scrollbar-track { background: transparent; }
        .customer-profile-col-main .customer-overview-group { align-content: start; gap: 0; }
        .customer-profile-card {
          background: #fff;
          border: 1px solid #e2e8f0;
          border-radius: 10px;
          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
          display: flex;
          flex-direction: column;
          min-height: 0;
          min-width: 0;
        }
        .customer-profile-card-head { align-items: center; border-bottom: 1px solid #e2e8f0; display: flex; flex-wrap: wrap; gap: 6px; padding: 9px 12px; }
        .customer-profile-card-head h3 { font-size: 13.5px; font-weight: 700; margin: 0; }
        .customer-profile-count { background: rgba(0, 69, 61, 0.08); border-radius: 999px; color: #00453d; font-size: 11px; font-weight: 700; padding: 2px 8px; }
        .customer-profile-card-sp { flex: 1 1 0; }
        .customer-profile-mini {
          background: #fff;
          border: 1px solid #e2e8f0;
          border-radius: 7px;
          box-shadow: none;
          color: #3f4946;
          font-size: 12px;
          min-height: 24px;
          padding: 2px 9px;
        }
        .customer-profile-mini:hover { background: #f1f5f9; color: #0b1c30; }
        .customer-profile-mini.is-soft { background: rgba(0, 69, 61, 0.07); border-color: rgba(0, 69, 61, 0.16); color: #00453d; font-weight: 600; }
        .customer-profile-card-body { display: flex; flex: 1 1 auto; flex-direction: column; gap: 7px; min-height: 0; overflow-y: auto; padding: 9px 12px; scrollbar-width: thin; }
        .customer-profile-sum-empty { color: #8a97a0; font-size: 12.5px; padding: 4px 0; }
        .customer-profile-timeline { display: flex; flex-direction: column; }
        .customer-profile-tl-item { display: flex; gap: 9px; }
        .customer-profile-tl-item + .customer-profile-tl-item { margin-top: 10px; }
        .customer-profile-tl-rail { align-items: center; display: flex; flex: none; flex-direction: column; width: 9px; }
        .customer-profile-tl-dot { background: #00453d; border-radius: 999px; height: 7px; margin-top: 5px; width: 7px; }
        .customer-profile-tl-body { flex: 1 1 auto; min-width: 0; }
        .customer-profile-tl-meta { color: #6f7976; font-size: 12px; }
        .customer-profile-tl-meta b { color: #3f4946; }
        .customer-profile-tl-text {
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 3;
          color: #0b1c30;
          display: -webkit-box;
          font-size: 12.5px;
          line-height: 1.6;
          margin-top: 2px;
          overflow: hidden;
        }
        .customer-profile-sum-more { background: transparent; border: 0; color: #00453d; cursor: pointer; font: inherit; font-size: 12px; font-weight: 600; padding: 2px 0; text-align: left; }
        .customer-profile-sum-more:hover { text-decoration: underline; }
        .customer-profile-comment { border-bottom: 1px solid #eff2f5; padding-bottom: 8px; }
        .customer-profile-comment:last-of-type { border-bottom: 0; }
        .customer-profile-comment-entry {
          background: #fff;
          border: 1px solid #e2e8f0;
          border-radius: 8px;
          color: #8a97a0;
          cursor: pointer;
          font: inherit;
          font-size: 12px;
          padding: 7px 10px;
          text-align: left;
        }
        .customer-profile-comment-entry:hover { border-color: rgba(0, 69, 61, 0.4); color: #00453d; }
        .customer-profile-file { align-items: flex-start; display: flex; gap: 8px; }
        .customer-profile-file-icon {
          align-items: center;
          background: #eef2f6;
          border-radius: 6px;
          color: #64748b;
          display: inline-flex;
          flex: none;
          font-size: 10px;
          font-weight: 800;
          height: 30px;
          justify-content: center;
          margin-top: 1px;
          width: 30px;
        }
        .customer-profile-file-icon.is-pdf { background: #fdecea; color: #c0392b; }
        .customer-profile-file-icon.is-img { background: #eaf3ff; color: #245d9c; }
        .customer-profile-file-main { display: grid; flex: 1 1 auto; gap: 2px; min-width: 0; }
        .customer-profile-file-row1 { align-items: center; display: flex; gap: 8px; }
        .customer-profile-file-row1 .customer-profile-file-name { flex: 1 1 auto; min-width: 0; }
        .customer-profile-file-preview { background: transparent; border: 0; color: #00453d; cursor: pointer; flex: none; font: inherit; font-size: 12px; font-weight: 600; padding: 0; }
        .customer-profile-file-preview:hover { text-decoration: underline; }
        .customer-profile-file-name {
          background: transparent;
          border: 0;
          color: #0b1c30;
          cursor: pointer;
          font: inherit;
          font-size: 12.5px;
          font-weight: 600;
          overflow: hidden;
          padding: 0;
          text-align: left;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .customer-profile-file-name:hover { color: #00453d; text-decoration: underline; }
        .customer-profile-kt { border-bottom: 1px solid #eff2f5; display: flex; font-size: 12.5px; justify-content: space-between; padding: 6px 0; }
        .customer-profile-kt:last-child { border-bottom: 0; }
        .customer-profile-kt span { color: #6f7976; }
        .customer-profile-kt b { color: #0b1c30; font-variant-numeric: tabular-nums; }

        /* —— 三级弹窗（可见性骑 data-detail-tab；关闭=✕/遮罩 切回 overview） —— */
        .customer-profile-modal { display: none; }
        .customer-profile-modal:not([data-detail-tab="overview"]) {
          align-items: center;
          display: flex;
          inset: 0;
          justify-content: center;
          padding: 28px;
          position: fixed;
          z-index: 1400;
        }
        .customer-profile-modal-mask { background: rgba(23, 35, 46, 0.42); inset: 0; position: absolute; }
        .customer-profile-modal-card {
          background: #fff;
          border: 1px solid #e2e8f0;
          border-radius: 12px;
          box-shadow: 0 22px 56px rgba(16, 27, 34, 0.28);
          display: flex;
          flex-direction: column;
          max-height: min(86vh, 820px);
          overflow: hidden;
          position: relative;
          width: min(680px, calc(100vw - 340px));
        }
        .customer-profile-modal-head { align-items: center; border-bottom: 1px solid #e2e8f0; display: flex; gap: 8px; padding: 12px 16px; }
        .customer-profile-modal-head h3 { font-size: 15px; font-weight: 700; margin: 0; }
        .cpm-t { display: none; }
        .customer-profile-modal[data-detail-tab="followups"] .cpm-t-followups,
        .customer-profile-modal[data-detail-tab="comments"] .cpm-t-comments,
        .customer-profile-modal[data-detail-tab="files"] .cpm-t-files { display: inline; }
        .customer-profile-modal-close {
          background: transparent;
          border: 0;
          border-radius: 7px;
          color: #6f7976;
          cursor: pointer;
          font-size: 18px;
          height: 30px;
          line-height: 1;
          margin-left: auto;
          width: 30px;
        }
        .customer-profile-modal-close:hover { background: #f1f5f9; color: #0b1c30; }
        .customer-profile-modal-body { display: grid; flex: 1 1 auto; gap: 14px; min-height: 120px; overflow-y: auto; padding: 14px 16px; }
        .customer-profile-modal-body .detail-button { background: #00453d; border-color: #00453d; color: #fff; }
        .customer-profile-modal-body .detail-button:hover { background: #063f38; }
        .customer-profile-modal-body .detail-button.secondary { background: #fff; border-color: #e2e8f0; color: #3f4946; }
        .customer-profile-modal-body .customer-file-action.danger { color: #9a4a43; }

        /* —— 头卡快捷表单：前缀标签并入胶囊（独立作用域，不依赖旧 toolbar 容器类） —— */
        .customer-profile-head-row1 .customer-detail-quick-field {
          align-items: center;
          background: #fff;
          border: 1px solid #e2e8f0;
          border-radius: 8px;
          display: inline-flex;
          gap: 3px;
          min-height: 24px;
          min-width: 0; /* 覆盖旧 .customer-detail-quick-field { min-width:150px }，pill 贴内容宽 */
          padding: 0 3px 0 6px;
        }
        /* 设计稿头卡 pill 不带前缀文字（等级/阶段/标签直接显示当前值+箭头）：视觉隐藏、语义保留 */
        .customer-profile-head-row1 .customer-detail-field-prefix {
          border: 0;
          clip: rect(0 0 0 0);
          height: 1px;
          margin: -1px;
          overflow: hidden;
          padding: 0;
          position: absolute;
          white-space: nowrap;
          width: 1px;
        }
        .customer-profile-head-row1 .customer-detail-quick-field select {
          background: transparent;
          border: 0;
          box-shadow: none;
          color: #0b1c30;
          font-size: 12px;
          font-weight: 600;
          height: 22px;
          min-height: 0;
          padding: 0 3px;
        }
        /* 客户标签 pill 实为 details/summary 结构：旧 3923 组规则给 summary 38px 白底边框，
           在头卡内与其它 24px pill 不齐——同作用域覆盖成与 select 同款融入 pill */
        .customer-profile-head-row1 .customer-tag-dropdown { min-width: 0; }
        .customer-profile-head-row1 .customer-tag-dropdown summary {
          align-items: center;
          background: transparent;
          border: 0;
          border-radius: 0;
          box-shadow: none;
          color: #0b1c30;
          display: inline-flex;
          font-size: 12px;
          font-weight: 600;
          gap: 4px;
          min-height: 22px;
          padding: 0 3px;
        }
        .customer-profile-head-row1 .customer-detail-star {
          align-items: center;
          background: #fff;
          border: 1px solid #e2e8f0;
          border-radius: 8px;
          color: #6f7976;
          cursor: pointer;
          display: inline-flex;
          font-size: 12px;
          gap: 4px;
          min-height: 24px;
          order: 5; /* 设计稿顺序：等级/阶段/标签在前，设为重要排尾（DOM 与 handler 不动） */
          padding: 0 8px;
        }
        .customer-profile-head-row1 .customer-detail-quick-status { order: 6; }
        .customer-profile-head-row1 .customer-detail-quick-status { font-size: 11.5px; }

        /* —— 概览字段行式（仅展示态；编辑态表单结构不受影响） —— */
        .customer-profile-col-main .customer-overview-grid { display: grid; gap: 0; grid-template-columns: minmax(0, 1fr); }
        .customer-profile-col-main .customer-overview-field,
        .customer-profile-col-main .customer-overview-readonly-field {
          align-items: baseline;
          background: transparent;
          border: 0;
          border-bottom: 1px solid #eff2f5;
          border-radius: 0;
          box-shadow: none;
          display: flex;
          gap: 10px;
          margin: 0;
          min-height: 0;
          padding: 5px 2px;
        }
        .customer-profile-col-main .customer-overview-field:last-child,
        .customer-profile-col-main .customer-overview-readonly-field:last-child { border-bottom: 0; }
        .customer-profile-col-main .customer-overview-field-head {
          align-items: baseline;
          display: flex;
          flex: none;
          gap: 5px;
          margin: 0;
          order: -1;
          width: 124px;
        }
        .customer-profile-col-main .customer-overview-label { color: #6f7976; font-size: 12px; font-weight: 400; }
        .customer-profile-col-main .customer-overview-value { color: #0b1c30; flex: 1 1 auto; font-size: 13px; font-weight: 500; line-height: 1.5; min-width: 0; }
        .customer-profile-col-main .customer-overview-field-edit { color: #bec9c5; font-size: 12px; height: 18px; width: 18px; }
        .customer-profile-col-main .customer-overview-field-edit:hover { color: #00453d; }
        .customer-profile-col-main .customer-overview-field.is-wide,
        .customer-profile-col-main .customer-overview-readonly-field.is-wide { align-items: flex-start; display: grid; grid-template-columns: minmax(0, 1fr); }
        .customer-profile-col-main .customer-overview-field.is-wide .customer-overview-field-head { order: 0; width: auto; }
        .customer-profile-col-main .customer-overview-field.is-editing { display: block; }
        .customer-profile-col-main .customer-overview-group-title { color: #00453d; font-size: 12.5px; font-weight: 700; margin: 10px 0 2px; }
        /* 概览头「编辑资料」降为安静钮（编辑态内的保存/取消保持既有样式） */
        .customer-profile-col-main .customer-overview-actions .detail-button {
          background: #fff;
          border: 1px solid #e2e8f0;
          border-radius: 8px;
          box-shadow: none;
          color: #3f4946;
          font-size: 12px;
          min-height: 28px;
          padding: 3px 10px;
          white-space: nowrap;
        }
        .customer-profile-col-main .customer-overview-actions .detail-button:hover { background: #f1f5f9; color: #0b1c30; }
      }

      /* —— Layout-C1 断点（本板块 +256 收口） —— */
      @media (min-width: 768px) and (max-width: 1536px) {
        .customer-overview-grid,
        .customer-overview-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      }
      @media (min-width: 768px) and (max-width: 1420px) {
        .customer-detail-body.is-profile-l3 { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
        .cp-col-side { display: grid; grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; }
      }
      @media (min-width: 768px) and (max-width: 1080px) {
        .customer-detail-body.is-profile-l3 { grid-template-columns: minmax(0, 1fr); }
        .cp-col-side { grid-template-columns: minmax(0, 1fr); }
      }

      /* ==================================================================
         Layout-C2（定版风格）：运营管理板块——页头行 + 筛选单行 + 批量条(选中态显现) + 台账表 + 行内展开。
         桌面（≥768px）生效；<768px 移动端旧布局零覆盖（批量条显隐规则也只在本桌面块内，移动端命令行照旧常驻）。
         colgroup 由 customer-forms-ui 按 canManage 渲染 9/8 列（施工单补丁2·方案B，防 sales 模式错位）。
         选择器逐条对齐旧基础块特异度（css:2533-2850 / 2304-2333 / 3161-3170 / 1843-1864）。
         ================================================================== */
      @media (min-width: 768px) {
        /* —— 板块外壳与页头行 —— */
        .customer-form-view { min-height: 0; }
        .customer-form-workbench { display: flex; flex-direction: column; gap: 12px; height: 100%; min-height: 0; padding: 14px 24px 18px; }
        .customer-form-page-head { align-items: center; display: flex; flex-wrap: wrap; gap: 12px; }
        .customer-form-page-head h2 { color: #0b1c30; font-size: 17px; margin: 0; }
        .customer-form-page-sub { color: #6f7976; font-size: 12.5px; }
        .customer-form-page-sp { flex: 1 1 0; }
        .customer-form-count-chip { background: rgba(0, 69, 61, 0.08); border-radius: 999px; color: #00453d; font-size: 12px; font-weight: 700; padding: 3px 12px; white-space: nowrap; }
        .customer-form-page-head .detail-button { background: #00453d; border: 1px solid #00453d; border-radius: 8px; box-shadow: none; color: #fff; font-size: 12.5px; font-weight: 600; min-height: 32px; padding: 5px 13px; transform: none; }
        .customer-form-page-head .detail-button:hover { background: #063f38; border-color: #063f38; }
        /* —— 卡壳 —— */
        .customer-form-list-panel { background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; overflow: hidden; }
        /* —— 筛选行（覆盖旧 2533 toolbar / 2582 filters / 2591 field-filter / 1855 select 38px / 2606-2646 日期 38px 系） —— */
        .customer-form-toolbar { align-items: center; border-bottom: 1px solid #e2e8f0; display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 10px; width: 100%; }
        .customer-form-controls-panel { display: contents; }
        .customer-form-filters { align-items: center; display: flex; flex: 1 1 auto; flex-wrap: wrap; gap: 4px; min-width: 0; }
        /* 筛选控件 pill 化（前缀+控件融合，同设计稿）：label 为壳、select 去原生箭头由壳自绘 ⌄
           （1440 一行收口的宽度预算：原生箭头 ×3 与 datetime 弹性宽是两行元凶，见施工报告 rev3） */
        .customer-form-toolbar .customer-field-filter { align-items: center; background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; display: flex; flex: none; gap: 2px; height: 32px; min-width: 0; padding: 0 2px 0 7px; position: relative; }
        .customer-form-toolbar .customer-field-filter::after { color: #8a97a0; content: "⌄"; font-size: 11px; pointer-events: none; position: absolute; right: 6px; top: 7px; }
        .customer-form-toolbar .customer-field-filter span { color: #6f7976; font-size: 12px; font-weight: 500; white-space: nowrap; }
        .customer-form-toolbar .customer-field-filter select { appearance: none; -webkit-appearance: none; background: transparent; border: 0; border-radius: 0; box-shadow: none; box-sizing: border-box; color: #0b1c30; font-size: 12px; font-weight: 600; height: 30px; min-height: 0; padding: 0 12px 0 1px; }
        .customer-form-date-controls { align-items: center; flex-wrap: wrap; gap: 3px; width: auto; }
        .customer-form-date-controls .dashboard-range-tabs { background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: 8px; height: 32px; padding: 2px; }
        .customer-form-date-controls .dashboard-range-button { font-size: 12.5px; min-height: 26px; padding: 0 8px; }
        .customer-form-date-controls .dashboard-custom-range { align-items: center; gap: 3px; }
        .customer-form-date-controls .dashboard-custom-range label { align-items: center; background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; color: #6f7976; display: flex; flex-direction: row; font-size: 12px; gap: 2px; height: 32px; padding: 0 2px 0 7px; white-space: nowrap; }
        /* 施工单 §三：datetime ≥150px 不裁分钟；定宽 150（原 148-172 弹性会被 UA 撑到 172=两行元凶之一） */
        .customer-form-date-controls .dashboard-custom-range input { background: transparent; border: 0; border-radius: 0; box-shadow: none; box-sizing: border-box; color: #0b1c30; font-size: 12px; height: 30px; max-width: 150px; min-width: 150px; padding: 0 1px; width: 150px; }
        .customer-form-date-controls .detail-button { background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; box-shadow: none; color: #3f4946; font-size: 12px; font-weight: 500; min-height: 28px; padding: 3px 8px; }
        .customer-form-date-controls .detail-button:hover { background: #f1f5f9; color: #0b1c30; }
        .customer-form-filters > .detail-button { background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; box-shadow: none; color: #3f4946; font-size: 12px; font-weight: 500; min-height: 28px; padding: 3px 8px; }
        .customer-form-filters > .detail-button:hover { background: #f1f5f9; color: #0b1c30; }
        /* —— 批量条（覆盖旧 2669 command-row / 2648+2659 actions 38px / 2706 count / 3166 danger 红底） —— */
        .customer-form-bulk-bar { align-items: center; align-self: stretch; background: rgba(0, 69, 61, 0.06); border-bottom: 1px solid #e2e8f0; display: none; flex-wrap: wrap; gap: 8px; justify-content: flex-start; margin-left: 0; min-height: 0; padding: 7px 12px; width: 100%; }
        .customer-form-has-selection .customer-form-bulk-bar { display: flex; }
        .customer-form-bulk-bar .customer-form-selection-count { color: #00453d; font-size: 12.5px; font-weight: 700; line-height: 1.4; }
        .customer-form-bulk-sp { flex: 1 1 0; }
        .customer-form-bulk-bar .customer-form-actions { display: flex; flex-wrap: nowrap; gap: 6px; justify-content: flex-end; }
        .customer-form-bulk-bar .customer-form-actions .detail-button { background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; box-shadow: none; color: #3f4946; font-size: 12px; font-weight: 500; min-height: 28px; padding: 3px 10px; transform: none; white-space: nowrap; }
        .customer-form-bulk-bar .customer-form-actions > .detail-button:first-child { background: rgba(0, 69, 61, 0.07); border-color: rgba(0, 69, 61, 0.16); color: #00453d; font-weight: 600; }
        .customer-form-bulk-bar .customer-form-actions .detail-button.danger { background: #fff; border-color: #e2e8f0; color: #9a4a43; }
        .customer-form-bulk-bar .customer-form-actions .detail-button:hover { background: #f1f5f9; color: #0b1c30; }
        .customer-form-bulk-bar .customer-form-actions > .detail-button:first-child:hover { background: rgba(0, 69, 61, 0.12); color: #00453d; }
        .customer-form-bulk-bar .customer-form-actions .detail-button.danger:hover { background: rgba(239, 68, 68, 0.08); color: #9a4a43; }
        .customer-form-bulk-bar .customer-form-actions .detail-button:disabled { cursor: not-allowed; opacity: 0.5; }
        /* —— 台账表（覆盖旧 2304-2333 management-table / 2782 min-width 1260 / 2713 time 700） —— */
        .customer-form-table-wrap { flex: 1 1 auto; min-height: 0; overflow: auto; }
        .customer-form-table { min-width: 1080px; table-layout: fixed; }
        .customer-form-table th { background: #f1f5f9; color: #3f4946; font-size: 12px; font-weight: 600; height: 36px; letter-spacing: 0.03em; padding: 0 10px; text-transform: none; vertical-align: middle; white-space: nowrap; }
        .customer-form-table td { border-bottom-color: #eff2f5; color: #3f4946; font-size: 13px; height: 52px; padding: 4px 10px; vertical-align: middle; }
        .customer-form-table tbody tr:hover td { background: #f8fafc; }
        .customer-form-table tr.customer-form-row-selected td { background: #f1f5f9; }
        .customer-form-table tr.customer-form-row-selected td:first-child { box-shadow: inset 2px 0 0 #00453d; }
        .customer-form-table input[type="checkbox"] { accent-color: #00453d; height: 15px; width: 15px; }
        .customer-form-table .primary-cell { color: #0b1c30; font-variant-numeric: tabular-nums; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .customer-form-table .muted-line { color: #6f7976; font-size: 12px; margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .customer-form-time { color: #3f4946; display: inline-flex; font-size: 12.5px; font-variant-numeric: tabular-nums; font-weight: 400; white-space: nowrap; }
        .customer-form-table td[data-label="WhatsApp"] { color: #6f7976; font-family: Consolas, monospace; font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .customer-form-table td[data-label="解析"] { color: #6f7976; font-size: 12.5px; }
        /* —— chip 定版六态 + 添加状态描边款（覆盖旧 2727-2780 全部色值；语义不变仅统一风格） —— */
        .customer-form-status { border: 1px solid transparent; font-size: 12px; font-weight: 600; padding: 4px 9px; white-space: nowrap; }
        .customer-form-status.assigned { background: rgba(0, 69, 61, 0.08); color: #0b5f55; }
        .customer-form-status.pending { background: #f1f3f6; color: #4b5563; }
        .customer-form-status.matched_existing { background: #e8f7ef; border-color: #b7dfc7; color: #1f6b3a; }
        .customer-form-status.duplicate_existing { background: #fff4d8; border-color: #e7c96c; color: #7a5208; }
        .customer-form-status.invalid { background: rgba(154, 74, 67, 0.1); color: #9a4a43; }
        .customer-form-status.needs_review { background: #eaf3ff; border-color: #bfd7f5; color: #245d9c; }
        .customer-form-add-status { border: 1px solid transparent; font-size: 12px; font-weight: 600; padding: 4px 9px; white-space: nowrap; }
        .customer-form-add-status.added { background: #fff; border-color: #b7dfc7; color: #1f6b3a; }
        .customer-form-add-status.not_added { background: #fff; border-color: #d3d8e0; color: #6b7280; }
        /* —— 操作列幽灵钮（覆盖旧 3161 compact 32px / 3166 danger 红底白字） —— */
        .customer-form-row-actions { flex-wrap: nowrap; gap: 2px; }
        .customer-form-row-actions .detail-button { background: transparent; border: 1px solid transparent; border-radius: 7px; box-shadow: none; color: #3f4946; font-size: 12px; font-weight: 600; min-height: 26px; padding: 2px 5px; transform: none; white-space: nowrap; }
        .customer-form-row-actions .detail-button:hover { background: rgba(0, 69, 61, 0.08); border-color: transparent; color: #00453d; }
        .customer-form-row-actions .detail-button.danger { background: transparent; border-color: transparent; color: #9a4a43; }
        .customer-form-row-actions .detail-button.danger:hover { background: rgba(239, 68, 68, 0.08); color: #9a4a43; }
        /* —— 行内展开：表单内容面板（覆盖旧 2794-2850） —— */
        .customer-form-detail-row td { background: #f8fafc; height: auto; padding: 10px 12px 12px; }
        .customer-form-detail-panel { background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; border-top: 1px solid #e2e8f0; padding: 10px 14px 12px; }
        .customer-form-detail-panel .customer-form-row-head { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; }
        .customer-form-detail-panel .customer-form-row-head strong { color: #0b1c30; font-size: 13px; }
        .customer-form-detail-actions { display: flex; gap: 6px; margin-left: auto; }
        .customer-form-detail-actions .detail-button { background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; box-shadow: none; color: #3f4946; font-size: 12px; font-weight: 500; min-height: 28px; padding: 3px 10px; transform: none; }
        .customer-form-detail-actions .detail-button:hover { background: #f1f5f9; color: #0b1c30; }
        .customer-form-translation-grid { gap: 10px; margin-top: 8px; }
        .customer-form-source-panel,
        .customer-form-translated-panel { background: #f8fafc; border: 1px solid #eff2f5; border-radius: 8px; }
        .customer-form-panel-title { border-bottom: 0; color: #00453d; font-size: 12px; font-weight: 700; padding: 9px 11px 0; }
        .customer-form-translated-panel .customer-form-panel-title { color: #00453d; }
        .customer-form-source-panel .customer-form-raw,
        .customer-form-translation-text { color: #3f4946; font-size: 12px; line-height: 1.75; padding: 6px 11px 10px; }
        /* —— 底部状态条（detail-status 从命令行移入；旧 2684 min-width 保留无害） —— */
        .customer-form-foot-bar { align-items: center; border-top: 1px solid #e2e8f0; color: #6f7976; display: flex; font-size: 12.5px; gap: 14px; min-height: 44px; padding: 6px 12px; }
      }
      /* Layout-C2 移动端：仅为新增元素给最小呈现（旧移动布局 11517 块零覆盖；
         批量条显隐规则只在桌面块内，移动端命令行照旧常驻） */
      @media (max-width: 767px) {
        .customer-form-page-head { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; }
        .customer-form-page-head h2 { font-size: 16px; margin: 0; }
        .customer-form-page-sub { color: #6f7976; font-size: 12px; }
        .customer-form-page-sp { flex: 1 1 0; }
        .customer-form-count-chip { background: rgba(0, 69, 61, 0.08); border-radius: 999px; color: #00453d; font-size: 12px; font-weight: 700; padding: 3px 12px; }
        .customer-form-page-head .detail-button { min-height: 38px; }
        .customer-form-foot-bar { color: #6f7976; font-size: 12.5px; padding: 8px 2px; }
      }

      /* ==================================================================
         Layout-C3 START: customer conversations frozen design parity.
         This file-tail block is deliberately scoped to the conversations
         view so Layout-C1 / Layout-C2 / Layout-G remain independently
         reversible. Business handlers and data states are unchanged.
         ================================================================== */
      .app[data-view="conversations"] {
        --c3-brand-950: #073f3a;
        --c3-brand-900: #07554e;
        --c3-brand-800: #08665d;
        --c3-brand-700: #0a776c;
        --c3-brand-100: #dff1ed;
        --c3-brand-50: #edf8f5;
        --c3-ink-950: #12201d;
        --c3-ink-800: #263934;
        --c3-ink-650: #52645f;
        --c3-ink-500: #74837f;
        --c3-line-strong: #cedbd7;
        --c3-line: #dce6e3;
        --c3-line-soft: #eaf0ee;
        --c3-canvas: #f3f6f5;
        --c3-chat-canvas: #eef3f1;
        --c3-outbound: #dff3e8;
        --c3-outbound-line: #b9ddce;
        --c3-translation: #f0f8f5;
        --conversation-width: 376px;
        background: #ffffff;
        color: var(--c3-ink-950);
        font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
      }

      .app[data-view="conversations"] .layout {
        --account-column-width: 296px;
        --conversation-min-width: 320px;
        --conversation-width: 376px;
        --resizer-width: 8px;
        background: #ffffff;
        isolation: isolate;
        overflow: hidden;
      }

      .app[data-view="conversations"] .panel {
        background: #ffffff;
        border-right-color: var(--c3-line);
      }

      .app[data-view="conversations"] .panel.chat-panel {
        background: var(--c3-chat-canvas);
        grid-template-rows: auto minmax(0, 1fr) auto;
      }

      .app[data-view="conversations"] .conversation-panel {
        background: #ffffff;
        border-right: 1px solid var(--c3-line-strong);
        box-shadow: none;
        grid-template-rows: auto auto auto auto minmax(0, 1fr);
        z-index: 5;
      }

      .app[data-view="conversations"] .conversation-resizer {
        background: #f8faf9;
        border-left: 0;
        border-right: 1px solid var(--c3-line-strong);
        min-width: 8px;
        transition: background-color 160ms ease, border-color 160ms ease;
      }

      .app[data-view="conversations"] .conversation-resizer::before {
        background: #b9c9c4;
        height: 42px;
        opacity: 1;
        width: 3px;
      }

      .app[data-view="conversations"] .conversation-resizer:hover,
      .app[data-view="conversations"] .conversation-resizer:focus-visible,
      .app[data-view="conversations"] .layout.is-resizing .conversation-resizer {
        background: #f8faf9;
        border-color: var(--c3-brand-700);
        box-shadow: none;
      }

      .app[data-view="conversations"] .conversation-resizer:hover::before,
      .app[data-view="conversations"] .conversation-resizer:focus-visible::before,
      .app[data-view="conversations"] .layout.is-resizing .conversation-resizer::before {
        background: var(--c3-brand-700);
      }

      /* Compact instance rail: the visible label is the real instance name,
         never a one-character avatar substitute.
         C3-Fix1 #6: z-index 6→4——staging elementFromPoint 实证 account-panel(z:6)覆盖
         conversation-panel(z:5)内 fixed 快筛菜单;降到 5 以下解除跨面板遮盖。 */
      .app[data-view="conversations"] .account-panel {
        background: #fbfcfc;
        grid-template-rows: 74px minmax(0, 1fr) auto;
        z-index: 4;
      }

      .app[data-view="conversations"] .layout.accounts-hidden .account-panel-head {
        align-items: center;
        border-bottom: 1px solid var(--c3-line-soft);
        display: grid;
        gap: 4px;
        grid-template-columns: 32px minmax(0, 1fr);
        justify-content: normal;
        min-height: 74px;
        padding: 0 8px;
      }

      .app[data-view="conversations"] .layout.accounts-hidden .account-panel-head .panel-title,
      .app[data-view="conversations"] .layout.accounts-hidden .account-panel-head .panel-actions {
        display: none;
      }

      /* C3-Fix1 #5: 老板修订——compact 轨道只留 ☰,heading 文案隐藏。 */
      .app[data-view="conversations"] .layout.accounts-hidden .account-rail-heading {
        display: none;
      }

      .app[data-view="conversations"] .layout:not(.accounts-hidden) .account-rail-heading {
        display: none;
      }

      .app[data-view="conversations"] .layout.accounts-hidden #hide-accounts {
        background: #ffffff;
        border: 1px solid var(--c3-line-strong);
        border-radius: 8px;
        color: var(--c3-ink-800);
        font-size: 16px;
        height: 32px;
        min-width: 32px;
        padding: 0;
        width: 32px;
      }

      .app[data-view="conversations"] .layout.accounts-hidden #account-list {
        align-content: start;
        display: grid;
        gap: 10px;
        justify-items: center;
        overflow-x: visible;
        overflow-y: auto;
        padding: 12px 8px;
      }

      .app[data-view="conversations"] .layout.accounts-hidden .account-card-shell {
        width: 58px;
      }

      .app[data-view="conversations"] .layout.accounts-hidden .account-button {
        align-items: center;
        background: transparent;
        border: 1px solid transparent;
        border-radius: 10px;
        box-shadow: none;
        color: var(--c3-ink-650);
        display: grid;
        height: 40px;
        justify-items: center;
        min-height: 40px;
        padding: 0;
        position: relative;
        width: 58px;
      }

      .app[data-view="conversations"] .layout.accounts-hidden .account-button:hover {
        background: #ffffff;
        border-color: var(--c3-line);
        box-shadow: none;
      }

      .app[data-view="conversations"] .layout.accounts-hidden .account-button.active {
        background: var(--c3-brand-800);
        border-color: var(--c3-brand-800);
        box-shadow: 0 1px 2px rgba(18, 32, 29, 0.05), 0 6px 8px rgba(18, 32, 29, 0.04);
        color: #ffffff;
      }

      .app[data-view="conversations"] .layout.accounts-hidden .account-main {
        display: block;
        min-width: 0;
        padding: 0;
        width: 100%;
      }

      .app[data-view="conversations"] .layout.accounts-hidden .account-icon,
      .app[data-view="conversations"] .layout.accounts-hidden .account-details {
        display: none;
      }

      .app[data-view="conversations"] .account-rail-label {
        display: none;
      }

      /* C3-Fix1 #5: 名称统一两字宽 CSS 截断(无省略号);全名走 .account-button 现役 title(instance-ui 零改)。 */
      .app[data-view="conversations"] .layout.accounts-hidden .account-rail-label {
        color: inherit;
        display: block;
        font-size: 11px;
        font-weight: 800;
        line-height: 38px;
        overflow: hidden;
        padding: 0 2px;
        text-align: center;
        white-space: nowrap;
        width: 2em;
      }

      .app[data-view="conversations"] .layout.accounts-hidden .account-status-actions {
        bottom: 4px;
        display: block;
        height: 10px;
        max-width: none;
        position: absolute;
        right: 4px;
        width: 10px;
      }

      .app[data-view="conversations"] .layout.accounts-hidden .account-status-corner {
        background: transparent;
        border: 0;
        bottom: auto;
        height: 10px;
        min-height: 10px;
        min-width: 10px;
        padding: 0;
        position: static;
        width: 10px;
      }

      .app[data-view="conversations"] .layout.accounts-hidden .account-status-corner .dot {
        border: 2px solid #fbfcfc;
        box-sizing: border-box;
        height: 10px;
        width: 10px;
      }

      .app[data-view="conversations"] .layout.accounts-hidden .account-remove-button {
        display: none;
      }

      .app[data-view="conversations"] .account-rail-foot {
        align-items: center;
        border-top: 1px solid var(--c3-line-soft);
        display: flex;
        justify-content: center;
        min-height: 62px;
      }

      .app[data-view="conversations"] .layout.accounts-hidden #instance-refresh {
        background: transparent;
        border-color: transparent;
        border-radius: 8px;
        color: var(--c3-ink-650);
        display: inline-flex !important;
        height: 34px;
        min-width: 34px;
        width: 34px;
      }

      /* Conversation header, search, filters, and list rows. */
      .app[data-view="conversations"] .conversation-head {
        align-items: flex-start;
        background: #ffffff;
        border-bottom: 0;
        display: flex;
        gap: 12px;
        min-height: 0;
        padding: 15px 16px 10px;
      }

      .app[data-view="conversations"] .conversation-instance-summary {
        display: block;
        flex: 1 1 auto;
        min-width: 0;
      }

      .app[data-view="conversations"] .conversation-instance-summary .instance-mini-avatar {
        display: none;
      }

      .app[data-view="conversations"] .conversation-head .panel-title h2 {
        color: var(--c3-ink-950);
        font-size: 17px;
        line-height: 1.25;
      }

      .app[data-view="conversations"] .conversation-head .panel-title p {
        color: var(--c3-ink-500);
        font-size: 12px;
        margin-top: 4px;
      }

      .app[data-view="conversations"] .conversation-summary-meta {
        align-items: flex-start;
        display: flex;
        flex: 0 0 auto;
        max-width: none;
      }

      .app[data-view="conversations"] #conversation-status,
      .app[data-view="conversations"] #conversation-unreplied-count {
        display: none;
      }

      .app[data-view="conversations"] .conversation-head #conversation-count {
        background: transparent;
        border: 0;
        color: var(--c3-brand-800);
        font-size: 12px;
        font-weight: 700;
        height: auto;
        min-width: 0;
        padding: 0;
      }

      .app[data-view="conversations"] .conversation-search-wrap {
        background: #ffffff;
        border-bottom: 0;
        padding: 0 16px 10px;
      }

      .app[data-view="conversations"] .conversation-search {
        background: #f0f4f3;
        border: 1px solid transparent;
        border-radius: 8px;
        box-shadow: none;
        color: var(--c3-ink-500);
        gap: 8px;
        grid-template-columns: 24px minmax(0, 1fr) auto;
        min-height: 40px;
        padding: 0 8px 0 11px;
        transform: none;
      }

      .app[data-view="conversations"] .conversation-search:focus-within {
        background: #ffffff;
        border-color: #9ccfc4;
        box-shadow: 0 0 0 3px rgba(19, 143, 129, 0.1);
        transform: none;
      }

      .app[data-view="conversations"] .conversation-search input {
        color: var(--c3-ink-950);
        font-size: 13px;
      }

      .app[data-view="conversations"] .conversation-search input::placeholder {
        color: #74837f;
        opacity: 1;
      }

      .app[data-view="conversations"] .conversation-search-shortcut {
        background: #ffffff;
        border: 1px solid var(--c3-line-strong);
        border-radius: 5px;
        color: #74837f;
        font-size: 10px;
        padding: 2px 6px;
        white-space: nowrap;
      }

      .app[data-view="conversations"] .conversation-filters {
        align-items: center;
        background: #ffffff;
        border-bottom: 1px solid var(--c3-line-soft);
        display: flex;
        gap: 6px;
        min-height: 40px;
        overflow: visible;
        padding: 0 16px 10px;
      }

      .app[data-view="conversations"] .conversation-filters .filter-chip-group {
        display: flex;
        flex: 1 1 auto;
        gap: 4px;
        min-width: 0;
        overflow: hidden;
      }

      .app[data-view="conversations"] .conversation-filters .filter-pill {
        background: #ffffff;
        border: 1px solid var(--c3-line);
        border-radius: 999px;
        box-shadow: none;
        color: var(--c3-ink-650);
        font-size: 12px;
        height: 30px;
        min-height: 30px;
        padding: 0 9px;
        transform: none;
      }

      .app[data-view="conversations"] .conversation-filters .filter-pill:hover {
        background: #f8faf9;
        border-color: #a8ccc4;
        color: var(--c3-brand-900);
        transform: none;
      }

      .app[data-view="conversations"] .conversation-filters .filter-pill.active {
        background: var(--c3-brand-50);
        border-color: #b9d9d2;
        box-shadow: none;
        color: var(--c3-brand-900);
        transform: none;
      }

      .app[data-view="conversations"] .conversation-filters .filter-menu-wrap {
        box-shadow: none;
        padding-left: 0;
      }

      .app[data-view="conversations"] #conversation-grade-filter,
      .app[data-view="conversations"] #conversation-more-filter,
      .app[data-view="conversations"] #conversation-quick-filter {
        min-width: 0;
      }

      .app[data-view="conversations"] #conversation-list {
        background: #ffffff;
        overflow-x: hidden;
        overflow-y: auto;
        padding: 0;
      }

      .app[data-view="conversations"] .conversation-button {
        background: #ffffff;
        border: 0;
        border-bottom: 1px solid var(--c3-line-soft);
        border-radius: 0;
        box-shadow: none;
        column-gap: 11px;
        grid-template-columns: 44px minmax(0, 1fr) auto;
        min-height: 86px;
        padding: 12px 13px;
      }

      .app[data-view="conversations"] .conversation-button::after {
        display: none;
      }

      .app[data-view="conversations"] .conversation-button:hover {
        background: #f8fbfa;
        box-shadow: none;
      }

      .app[data-view="conversations"] .conversation-button.active {
        background: var(--c3-brand-50);
        box-shadow: inset 3px 0 0 var(--c3-brand-700);
      }

      .app[data-view="conversations"] .conversation-button > .avatar {
        grid-row: 1 / span 2;
        height: 44px;
        width: 44px;
      }

      .app[data-view="conversations"] .conversation-button:hover > .avatar {
        box-shadow: none;
        transform: none;
      }

      .app[data-view="conversations"] .conversation-main {
        grid-column: 2;
        min-width: 0;
      }

      .app[data-view="conversations"] .conversation-button .row-name {
        color: var(--c3-ink-950);
        font-size: 13px;
        font-weight: 700;
        line-height: 1.25;
      }

      .app[data-view="conversations"] .conversation-preview {
        color: var(--c3-ink-650);
        font-size: 12px;
        line-height: 1.35;
        margin-top: 3px;
      }

      .app[data-view="conversations"] .conversation-info {
        color: var(--c3-ink-500);
        font-size: 11px;
      }

      .app[data-view="conversations"] .conversation-tags,
      .app[data-view="conversations"] .conversation-stage {
        gap: 4px;
        margin-top: 7px;
      }

      .app[data-view="conversations"] .conversation-tags .tag-chip,
      .app[data-view="conversations"] .conversation-tags .customer-chip,
      .app[data-view="conversations"] .conversation-stage .customer-chip {
        font-size: 10px;
        min-height: 20px;
        padding: 1px 7px;
      }

      .app[data-view="conversations"] .conversation-side {
        color: var(--c3-ink-500);
        font-size: 11px;
        gap: 9px;
        grid-column: 3;
        grid-row: 1 / span 2;
        min-width: 46px;
      }

      .app[data-view="conversations"] .conversation-side .time {
        color: var(--c3-ink-500);
        font-size: 11px;
      }

      /* Two-row chat header. */
      .app[data-view="conversations"] .chat-head {
        align-items: stretch;
        backdrop-filter: none;
        background: rgba(255, 255, 255, 0.98);
        border-bottom: 1px solid var(--c3-line-strong);
        box-shadow: none;
        display: grid;
        gap: 8px;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto auto;
        min-height: 96px;
        padding: 12px 16px 10px;
        z-index: 4;
      }

      .app[data-view="conversations"] .chat-primary {
        align-items: center;
        display: flex;
        gap: 12px;
        min-width: 0;
      }

      .app[data-view="conversations"] .chat-profile {
        align-items: center;
        display: grid;
        flex: 1 1 auto;
        gap: 12px;
        grid-template-columns: 40px minmax(0, 1fr);
        min-width: 0;
      }

      .app[data-view="conversations"] .chat-avatar {
        height: 40px;
        width: 40px;
      }

      .app[data-view="conversations"] .chat-profile:hover .avatar {
        box-shadow: none;
      }

      .app[data-view="conversations"] .chat-name-line {
        align-items: center;
        display: flex;
        gap: 7px;
        min-width: 0;
      }

      .app[data-view="conversations"] .chat-identity h2 {
        color: var(--c3-ink-950);
        font-size: 15px;
        font-weight: 750;
      }

      .app[data-view="conversations"] .chat-identity p {
        color: var(--c3-ink-500);
        display: block;
        font-size: 11px;
        margin-top: 2px;
      }

      .app[data-view="conversations"] .chat-channel-state {
        color: #28815c;
        flex: 0 0 auto;
        font-size: 11px;
      }

      .app[data-view="conversations"] .chat-actions {
        align-items: center;
        display: flex;
        flex: 0 0 auto;
        gap: 6px;
      }

      .app[data-view="conversations"] .chat-head .chat-actions .add-list-button,
      .app[data-view="conversations"] .chat-head .chat-actions .icon-button.flat {
        background: #ffffff;
        border: 1px solid var(--c3-line-strong);
        border-radius: 8px;
        box-shadow: none;
        color: var(--c3-ink-800);
        font-size: 12px;
        height: 34px;
        min-height: 34px;
        transform: none;
      }

      .app[data-view="conversations"] .chat-head .chat-actions .add-list-button:hover,
      .app[data-view="conversations"] .chat-head .chat-actions .icon-button.flat:hover {
        background: var(--c3-brand-50);
        border-color: #b9d8d1;
        box-shadow: none;
        color: var(--c3-brand-900);
      }

      .app[data-view="conversations"] .chat-head .chat-actions .profile-entry-button {
        background: var(--c3-brand-800);
        border-color: var(--c3-brand-800);
        color: #ffffff;
      }

      .app[data-view="conversations"] .chat-head .chat-actions .profile-entry-button:hover,
      .app[data-view="conversations"] .chat-head .chat-actions .profile-entry-button.active {
        background: var(--c3-brand-900);
        border-color: var(--c3-brand-900);
        color: #ffffff;
      }

      .app[data-view="conversations"] .chat-secondary {
        align-items: center;
        display: flex;
        gap: 10px;
        justify-content: space-between;
        min-width: 0;
        /* A4-Fix2：成为阶段菜单的定位基准（整行宽），菜单以本行宽度封顶，见下方 .tag-menu 块 */
        position: relative;
      }

      /* C3-Fix1 #7: overflow-x:auto 会把 overflow-y 强制成 auto,25px 高滚动容器剪掉 absolute
         阶段/来源菜单(几何铁证)。改 overflow:visible,菜单定位体系零改;chips 单行 nowrap 保持。 */
      .app[data-view="conversations"] .customer-flags {
        align-items: center;
        display: flex;
        gap: 5px;
        min-width: 0;
        overflow: visible;
        scrollbar-width: none;
      }

      .app[data-view="conversations"] .customer-flags::-webkit-scrollbar {
        display: none;
      }

      .app[data-view="conversations"] .chat-secondary #chat-list-button,
      .app[data-view="conversations"] .chat-head .chat-title-tags .tag-chip,
      .app[data-view="conversations"] .chat-head .chat-title-tags .customer-chip,
      .app[data-view="conversations"] .chat-head .chat-title-tags .customer-source-chip {
        background: #f8faf9;
        border: 1px solid var(--c3-line);
        border-radius: 999px;
        box-shadow: none;
        color: var(--c3-ink-650);
        font-size: 11px;
        height: 25px;
        line-height: 1;
        max-width: 148px;
        min-height: 25px;
        padding: 2px 8px;
      }

      .app[data-view="conversations"] .chat-secondary #chat-list-button {
        border-color: #cabff1;
        color: #6657c8;
      }

      /* A4-Fix2：阶段菜单 right:0 锚在面板最左的 ~90px .chat-menu-wrap 上，min-width:286px 必然向左
         伸出面板边界，同时触发两层独立遮挡（探针实证：.panel.chat-panel overflow:hidden 裁剪
         clippedLeft≈180px；仅解除裁剪后 conversation-panel z:5 仍盖 chat-head z:4 内的菜单）。
         修法=锚点换到整行宽的 .chat-secondary（上方规则 position:relative）并以其宽度封顶，
         菜单几何上不再离开聊天面板，两层遮挡一并消除，跨面板 z-index 零改动（C3-Fix1 #6 教训：
         不跨面板抬 z）；881-915 断点聊天列可被压到 ~200px，min-width 必须随行宽收敛，
         否则 min 压过 max 复现右溢。 */
      .app[data-view="conversations"] .chat-secondary .chat-menu-wrap {
        position: static;
      }

      .app[data-view="conversations"] .chat-secondary .tag-menu {
        left: 0;
        max-width: 100%;
        min-width: min(286px, 100%);
        right: auto;
        top: calc(100% + 6px);
        transform-origin: top left;
        width: min(286px, 100%);
      }

      .app[data-view="conversations"] .chat-title-tags {
        align-items: center;
        display: flex;
        flex-wrap: nowrap;
        gap: 5px;
        justify-content: flex-start;
        margin: 0;
      }

      .app[data-view="conversations"] .chat-title-tags > .stage-chip {
        display: none;
      }

      .app[data-view="conversations"] .chat-service-window {
        color: var(--c3-ink-500);
        flex: 0 0 auto;
        font-size: 11px;
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
      }

      /* Message canvas and existing message/media variants.
         C3-Fix1 #4: 老板修订推翻定版稿 920px 居中——消息流全宽,固定 padding,关 drawer 不再左右拉伸。 */
      .app[data-view="conversations"] .chat-body {
        animation: none;
        background: var(--c3-chat-canvas);
        background-image: none;
        min-height: 0;
        overflow-y: auto;
        padding: 18px 24px 22px;
      }

      .app[data-view="conversations"] .message-row {
        animation: none;
        margin-bottom: 10px;
      }

      .app[data-view="conversations"] .bubble {
        background: #ffffff;
        border: 1px solid var(--c3-line);
        border-radius: 12px;
        box-shadow: 0 1px 2px rgba(18, 32, 29, 0.05), 0 6px 8px rgba(18, 32, 29, 0.04);
        max-width: min(74%, 660px);
        min-width: 0;
        padding: 10px 11px 7px;
        transform: none;
      }

      .app[data-view="conversations"] .bubble:hover {
        box-shadow: 0 1px 2px rgba(18, 32, 29, 0.05), 0 6px 8px rgba(18, 32, 29, 0.04);
        transform: none;
      }

      .app[data-view="conversations"] .message-row.inbound .bubble {
        background: #ffffff;
        border-top-left-radius: 4px;
      }

      .app[data-view="conversations"] .message-row.outbound .bubble {
        background: var(--c3-outbound);
        border-color: var(--c3-outbound-line);
        border-top-right-radius: 4px;
      }

      .app[data-view="conversations"] .message-row.center .bubble {
        background: rgba(255, 255, 255, 0.78);
        border-color: #d5dfdc;
        border-radius: 999px;
        color: var(--c3-ink-500);
        font-size: 11px;
        max-width: 82%;
        padding: 5px 10px;
      }

      .app[data-view="conversations"] .message-row.inbound .bubble:has(.message-ai-reply-card),
      .app[data-view="conversations"] .message-row.inbound .bubble:has(.message-ai-reply-loading),
      .app[data-view="conversations"] .message-row.inbound .bubble:has(.message-ai-reply-error) {
        max-width: min(74%, 660px);
      }

      .app[data-view="conversations"] .message-text {
        color: #1d302b;
        font-size: 14px;
        line-height: 1.5;
      }

      .app[data-view="conversations"] .message-translation {
        background: var(--c3-translation);
        border: 0;
        border-left: 2px solid #56a898;
        border-radius: 6px;
        color: #265c51;
        font-size: 12px;
        line-height: 1.48;
        margin-top: 8px;
        padding: 8px 9px;
      }

      .app[data-view="conversations"] .message-row.outbound .message-translation {
        background: rgba(255, 255, 255, 0.46);
      }

      .app[data-view="conversations"] .message-meta {
        color: var(--c3-ink-500);
        font-size: 10px;
        gap: 6px;
        margin-top: 5px;
      }

      .app[data-view="conversations"] .message-translate-btn {
        background: rgba(255, 255, 255, 0.7);
        border-color: #c7dcd7;
        color: var(--c3-brand-900);
        font-size: 10px;
        height: 22px;
        min-width: 25px;
        padding: 0 6px;
      }

      .app[data-view="conversations"] .media-card,
      .app[data-view="conversations"] .media-file {
        background: #f8faf9;
        border: 1px solid #d4dfdc;
        border-radius: 8px;
        box-shadow: none;
        gap: 10px;
        grid-template-columns: 38px minmax(0, 1fr);
        min-height: 56px;
        padding: 9px;
        width: min(360px, 100%);
      }

      .app[data-view="conversations"] .media-card .media-thumb,
      .app[data-view="conversations"] .media-card .media-icon,
      .app[data-view="conversations"] .media-card .file-type-icon,
      .app[data-view="conversations"] .media-file .file-type-icon {
        height: 38px;
        width: 38px;
      }

      /* Composer retains all existing controls and send gating. */
      .app[data-view="conversations"] .chat-composer {
        align-items: end;
        backdrop-filter: none;
        background: #f9fbfa;
        border-top: 1px solid var(--c3-line-strong);
        display: grid;
        gap: 8px;
        grid-template-columns: auto minmax(0, 1fr) auto auto;
        min-height: 80px;
        padding: 10px 14px 12px;
      }

      .app[data-view="conversations"] .composer-main {
        min-width: 0;
      }

      .app[data-view="conversations"] .composer-status {
        align-items: center;
        color: var(--c3-ink-500);
        display: flex;
        font-size: 10px;
        gap: 6px;
        margin: 0 3px 5px;
        min-height: 14px;
      }

      .app[data-view="conversations"] .composer-status strong {
        color: #287754;
        font-weight: 700;
      }

      .app[data-view="conversations"] .composer-input {
        background: #ffffff;
        border: 1px solid var(--c3-line-strong);
        border-radius: 10px;
        box-shadow: none;
        color: var(--c3-ink-950);
        line-height: 1.45;
        max-height: 132px;
        min-height: 42px;
        padding: 10px 12px;
      }

      .app[data-view="conversations"] .composer-input::placeholder {
        color: var(--c3-ink-500);
        opacity: 1;
      }

      .app[data-view="conversations"] .composer-input:not(:disabled):focus {
        border-color: #87c3b8;
        box-shadow: 0 0 0 3px rgba(19, 143, 129, 0.09);
      }

      .app[data-view="conversations"] .composer-icon {
        background: #ffffff;
        border: 1px solid var(--c3-line-strong);
        border-radius: 10px;
        box-shadow: none;
        color: var(--c3-ink-800);
        height: 42px;
        width: 42px;
      }

      .app[data-view="conversations"] .composer-icon.template:not(:disabled) {
        background: #ffffff;
        box-shadow: none;
      }

      .app[data-view="conversations"] .composer-icon.send {
        font-size: 12px;
        font-weight: 700;
        min-width: 66px;
        width: 66px;
      }

      .app[data-view="conversations"] .composer-icon.send:not(:disabled) {
        background: var(--c3-brand-800);
        border-color: var(--c3-brand-800);
        box-shadow: none;
        color: #ffffff;
      }

      .app[data-view="conversations"] .composer-icon.send:not(:disabled):hover {
        background: var(--c3-brand-900);
        transform: none;
      }

      /* Customer profile: one fixed header and exactly three default sections. */
      .app[data-view="conversations"] .customer-profile-drawer {
        background: #ffffff;
        grid-column: 5;
        inset: auto;
        min-height: 0;
        min-width: 0;
        position: relative;
        width: 320px;
        z-index: 5;
      }

      .app[data-view="conversations"] .customer-profile-drawer[hidden] {
        display: none;
      }

      .app[data-view="conversations"] .customer-profile-panel {
        background: #ffffff;
        border-left: 1px solid var(--c3-line-strong);
        box-shadow: none;
        display: grid;
        grid-template-rows: auto minmax(0, 1fr);
        height: 100%;
        max-width: none;
        min-height: 0;
        width: 100%;
      }

      .app[data-view="conversations"] .context-header {
        align-items: center;
        border-bottom: 1px solid var(--c3-line-soft);
        display: flex;
        gap: 10px;
        justify-content: space-between;
        min-height: 58px;
        padding: 0 10px 0 16px;
      }

      .app[data-view="conversations"] .context-header > strong,
      .app[data-view="conversations"] .context-title {
        color: var(--c3-ink-950);
        font-size: 14px;
        font-weight: 700;
      }

      .app[data-view="conversations"] .context-head-actions {
        align-items: center;
        display: flex;
        gap: 4px;
      }

      .app[data-view="conversations"] .context-detail-button {
        align-items: center;
        background: var(--c3-brand-50);
        border: 1px solid #b7d7d0;
        border-radius: 8px;
        color: var(--c3-brand-900);
        cursor: pointer;
        display: inline-flex;
        font-size: 11px;
        font-weight: 700;
        gap: 5px;
        min-height: 32px;
        padding: 0 9px;
        white-space: nowrap;
      }

      .app[data-view="conversations"] .context-detail-button:hover {
        background: var(--c3-brand-100);
        border-color: var(--c3-brand-700);
      }

      .app[data-view="conversations"] .context-close-button {
        align-items: center;
        background: transparent;
        border: 1px solid transparent;
        border-radius: 8px;
        color: var(--c3-ink-650);
        cursor: pointer;
        display: inline-flex;
        font-size: 18px;
        height: 32px;
        justify-content: center;
        padding: 0;
        width: 32px;
      }

      .app[data-view="conversations"] .context-close-button:hover {
        background: #f8faf9;
        border-color: var(--c3-line);
      }

      .app[data-view="conversations"] .context-head-actions .icon-button.flat {
        align-items: center;
        background: transparent;
        border: 1px solid transparent;
        border-radius: 8px;
        box-shadow: none;
        color: var(--c3-ink-650);
        display: inline-flex;
        font-size: 18px;
        height: 32px;
        justify-content: center;
        min-width: 32px;
        padding: 0;
        transform: none;
        width: 32px;
      }

      .app[data-view="conversations"] .context-head-actions .icon-button.flat:hover {
        background: #f8faf9;
        border-color: var(--c3-line);
        color: var(--c3-brand-900);
      }

      .app[data-view="conversations"] .context-scroll {
        min-height: 0;
        overflow-x: hidden;
        overflow-y: auto;
        padding: 0 16px 20px;
      }

      .app[data-view="conversations"] .profile-section {
        border-bottom: 1px solid var(--c3-line-soft);
        padding: 16px 0;
      }

      .app[data-view="conversations"] .profile-section:last-child {
        border-bottom: 0;
      }

      .app[data-view="conversations"] .profile-section-head {
        align-items: center;
        display: flex;
        gap: 8px;
        justify-content: space-between;
        margin-bottom: 12px;
      }

      .app[data-view="conversations"] .profile-section-head strong {
        color: var(--c3-ink-950);
        font-size: 13px;
      }

      .app[data-view="conversations"] .profile-section-meta {
        color: var(--c3-ink-500);
        font-size: 10px;
        font-variant-numeric: tabular-nums;
      }

      .app[data-view="conversations"] .profile-summary {
        align-items: center;
        display: flex;
        gap: 11px;
        margin-bottom: 12px;
      }

      .app[data-view="conversations"] .profile-summary .avatar {
        background: #16814f;
        height: 46px;
        width: 46px;
      }

      .app[data-view="conversations"] .profile-summary-copy {
        min-width: 0;
      }

      .app[data-view="conversations"] .profile-summary-copy strong,
      .app[data-view="conversations"] .profile-summary-copy span {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .app[data-view="conversations"] .profile-summary-copy strong {
        font-size: 13px;
      }

      .app[data-view="conversations"] .profile-summary-copy span {
        color: var(--c3-ink-500);
        font-size: 11px;
        margin-top: 3px;
      }

      .app[data-view="conversations"] .profile-grid {
        display: grid;
        font-size: 11px;
        gap: 9px 8px;
        grid-template-columns: 88px minmax(0, 1fr);
      }

      .app[data-view="conversations"] .profile-grid dt {
        color: var(--c3-ink-500);
      }

      .app[data-view="conversations"] .profile-grid dd {
        color: var(--c3-ink-800);
        margin: 0;
        overflow-wrap: anywhere;
      }

      .app[data-view="conversations"] .context-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
      }

      .app[data-view="conversations"] .overview-tags {
        margin-top: 12px;
      }

      .app[data-view="conversations"] .context-tags .tag-chip,
      .app[data-view="conversations"] .context-tags .customer-chip,
      .app[data-view="conversations"] .context-tags .tag {
        align-items: center;
        background: #f8faf9;
        border: 1px solid var(--c3-line);
        border-radius: 999px;
        color: var(--c3-ink-650);
        display: inline-flex;
        font-size: 10px;
        min-height: 20px;
        padding: 1px 7px;
        white-space: nowrap;
      }

      .app[data-view="conversations"] .context-tags .tag.important {
        background: #fff7e8;
        border-color: #eccb98;
        color: #98621a;
      }

      .app[data-view="conversations"] .context-tags .tag.quote {
        background: #edf4fc;
        border-color: #bcd1e9;
        color: #2d65a7;
      }

      .app[data-view="conversations"] .text-link {
        background: transparent;
        border: 0;
        color: var(--c3-brand-800);
        cursor: pointer;
        font-size: 11px;
        padding: 0;
      }

      .app[data-view="conversations"] .followup-actions {
        align-items: center;
        display: flex;
        gap: 8px;
      }

      .app[data-view="conversations"] .next-followup {
        background: var(--c3-brand-50);
        border: 1px solid #d7e7e2;
        border-radius: 9px;
        padding: 10px;
      }

      .app[data-view="conversations"] .next-followup span {
        color: var(--c3-brand-900);
        display: block;
        font-size: 10px;
        font-weight: 700;
      }

      .app[data-view="conversations"] .next-followup strong {
        display: block;
        font-size: 12px;
        margin-top: 3px;
      }

      .app[data-view="conversations"] .timeline {
        display: grid;
        gap: 11px;
      }

      .app[data-view="conversations"] .timeline-first {
        margin-top: 12px;
      }

      .app[data-view="conversations"] .timeline-item {
        padding-left: 17px;
        position: relative;
      }

      .app[data-view="conversations"] .timeline-item::before {
        background: var(--c3-brand-700);
        border-radius: 50%;
        content: "";
        height: 7px;
        left: 2px;
        position: absolute;
        top: 6px;
        width: 7px;
      }

      .app[data-view="conversations"] .timeline-item::after {
        background: var(--c3-line-strong);
        bottom: -12px;
        content: "";
        left: 5px;
        position: absolute;
        top: 16px;
        width: 1px;
      }

      .app[data-view="conversations"] .timeline-item:last-child::after {
        display: none;
      }

      .app[data-view="conversations"] .timeline-item strong {
        display: block;
        font-size: 11px;
      }

      .app[data-view="conversations"] .timeline-item p {
        color: var(--c3-ink-650);
        font-size: 11px;
        line-height: 1.45;
        margin: 3px 0 0;
      }

      .app[data-view="conversations"] .timeline-item time {
        color: var(--c3-ink-500);
        display: block;
        font-size: 10px;
        font-variant-numeric: tabular-nums;
        margin-top: 3px;
      }

      .app[data-view="conversations"] .file-list {
        display: grid;
        gap: 6px;
      }

      .app[data-view="conversations"] .file-entry {
        align-items: center;
        background: transparent;
        border: 1px solid transparent;
        border-radius: 8px;
        color: inherit;
        cursor: pointer;
        display: grid;
        gap: 9px;
        grid-template-columns: 34px minmax(0, 1fr) auto;
        min-height: 50px;
        padding: 7px;
        text-align: left;
        width: 100%;
      }

      .app[data-view="conversations"] .file-entry:hover {
        background: #f8faf9;
        border-color: var(--c3-line);
      }

      .app[data-view="conversations"] .file-type {
        align-items: center;
        background: #edf4fc;
        border-radius: 7px;
        color: #2d65a7;
        display: grid;
        font-size: 9px;
        font-weight: 800;
        height: 34px;
        justify-items: center;
        width: 34px;
      }

      .app[data-view="conversations"] .file-type.image {
        background: var(--c3-brand-50);
        color: var(--c3-brand-800);
      }

      .app[data-view="conversations"] .file-type.doc {
        background: #f0efff;
        color: #6657c8;
      }

      .app[data-view="conversations"] .file-entry-copy {
        min-width: 0;
      }

      .app[data-view="conversations"] .file-entry-copy strong,
      .app[data-view="conversations"] .file-entry-copy span {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .app[data-view="conversations"] .file-entry-copy strong {
        font-size: 11px;
      }

      .app[data-view="conversations"] .file-entry-copy span {
        color: var(--c3-ink-500);
        font-size: 10px;
        margin-top: 2px;
      }

      .app[data-view="conversations"] .file-entry-action {
        color: var(--c3-brand-800);
        font-size: 11px;
      }

      .app[data-view="conversations"] [data-conversation-profile-data] .loading,
      .app[data-view="conversations"] [data-conversation-profile-data] .empty,
      .app[data-view="conversations"] [data-conversation-profile-data] .error-state,
      .app[data-view="conversations"] .profile-section-state,
      .app[data-view="conversations"] .profile-section-empty {
        background: transparent;
        border: 0;
        color: var(--c3-ink-500);
        font-size: 11px;
        padding: 10px 0;
      }

      .app[data-view="conversations"] .profile-section-empty.is-error {
        color: #b33a36;
      }

      .app[data-view="conversations"] .profile-section .customer-profile-card {
        border: 0;
        border-radius: 0;
        box-shadow: none;
        padding: 0;
      }

      .app[data-view="conversations"] .profile-section .customer-profile-form,
      .app[data-view="conversations"] .profile-section .profile-followup-form {
        gap: 10px;
        overflow: visible;
        padding: 0;
      }

      @media (min-width: 881px) {
        /* A8：会话页收起/展开随通用侧栏体系（收起 56 由 .app 基础变量承担），仅定义展开档=218；
           原 padding-left:218 / topbar width:218 常驻覆盖删除。 */
        .app[data-view="conversations"] {
          --sidenav-expanded: 218px;
        }

        .app[data-view="conversations"] .layout {
          grid-template-rows: minmax(0, 1fr);
        }

        .app[data-view="conversations"] .account-panel {
          grid-column: 1;
          grid-row: 1;
        }

        .app[data-view="conversations"] .conversation-panel {
          grid-column: 2;
          grid-row: 1;
        }

        .app[data-view="conversations"] .conversation-resizer {
          display: flex;
          grid-column: 3;
          grid-row: 1;
        }

        .app[data-view="conversations"] .chat-panel {
          grid-column: 4;
          grid-row: 1;
        }

        .app[data-view="conversations"] .panel {
          border-bottom: 0;
        }

        .app[data-view="conversations"] .layout.accounts-hidden {
          grid-template-columns: 76px minmax(320px, var(--conversation-width)) 8px minmax(440px, 1fr) 0;
        }

        .app[data-view="conversations"] .layout:not(.accounts-hidden) {
          grid-template-columns: 296px minmax(320px, var(--conversation-width)) 8px minmax(440px, 1fr) 0;
        }
      }

      @media (min-width: 1651px) {
        .app[data-view="conversations"] .layout.accounts-hidden.customer-profile-open {
          grid-template-columns: 76px minmax(320px, var(--conversation-width)) 8px minmax(440px, 1fr) 320px;
        }

        .app[data-view="conversations"] .layout:not(.accounts-hidden).customer-profile-open {
          grid-template-columns: 296px minmax(320px, var(--conversation-width)) 8px minmax(440px, 1fr) 320px;
        }
      }

      @media (max-width: 1650px) {
        .app[data-view="conversations"] .customer-profile-drawer {
          bottom: 0;
          box-shadow: -18px 0 42px rgba(18, 32, 29, 0.16);
          grid-column: auto;
          position: absolute;
          right: 0;
          top: 0;
          width: 320px;
          z-index: 30;
        }
      }

      @media (min-width: 881px) and (max-width: 1180px) {
        /* A8：原 72px 常驻图标档整组废除（收起 56/展开 218 由通用侧栏体系接管）；
           仅保留该断点的会话列宽与聊天头按钮压缩。 */
        .app[data-view="conversations"] {
          --conversation-width: 346px;
        }

        .app[data-view="conversations"] .layout {
          --conversation-width: 346px;
        }

        .app[data-view="conversations"] .chat-head .chat-actions .add-list-button {
          padding: 0 9px;
        }
      }

      @media (min-width: 881px) and (max-width: 915px) {
        .app[data-view="conversations"] .layout.accounts-hidden {
          grid-template-columns: 76px minmax(320px, var(--conversation-width)) 8px minmax(0, 1fr) 0;
        }

        .app[data-view="conversations"] .layout:not(.accounts-hidden) {
          grid-template-columns: 296px minmax(320px, var(--conversation-width)) 8px minmax(0, 1fr) 0;
        }
      }

      @media (max-width: 880px) {
        .app[data-view="conversations"] {
          /* A8：≤880 会话页侧栏完全隐藏（维持原行为）；collapsed 变量归 0 使工作区
             padding-left 与事件抽屉 left 同源自动归 0。 */
          --sidenav-collapsed: 0px;
          padding-left: 0;
        }

        .app[data-view="conversations"] .topbar {
          display: none;
        }

        .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: minmax(0, 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"] .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;
          height: 100%;
          min-height: 0;
        }

        .app[data-view="conversations"] .mobile-account-switch.mobile-only {
          display: block !important;
        }

        .app[data-view="conversations"] .mobile-chat-back.mobile-only {
          display: inline-flex !important;
        }

        .app[data-view="conversations"] .mobile-chat-stage-actions.mobile-only {
          display: flex !important;
        }

        .app[data-view="conversations"] .conversation-head,
        .app[data-view="conversations"] .context-bar {
          display: none;
        }

        .app[data-view="conversations"] .chat-head {
          min-height: 86px;
          padding: 10px 12px;
        }

        .app[data-view="conversations"] .chat-secondary,
        .app[data-view="conversations"] .chat-actions .chat-menu-wrap,
        .app[data-view="conversations"] #chat-search-button,
        .app[data-view="conversations"] #chat-list-button,
        .app[data-view="conversations"] #chat-tag-menu {
          display: none !important;
        }

        .app[data-view="conversations"] .chat-body {
          padding: 12px 9px;
        }

        .app[data-view="conversations"] .bubble,
        .app[data-view="conversations"] .message-row.inbound .bubble:has(.message-ai-reply-card),
        .app[data-view="conversations"] .message-row.inbound .bubble:has(.message-ai-reply-loading),
        .app[data-view="conversations"] .message-row.inbound .bubble:has(.message-ai-reply-error) {
          max-width: 88%;
        }

        .app[data-view="conversations"] .customer-profile-drawer {
          bottom: 0;
          box-shadow: none;
          grid-column: auto;
          left: 0;
          position: absolute;
          right: 0;
          top: 0;
          width: 100%;
          z-index: 60;
        }

        .app[data-view="conversations"] .customer-profile-panel {
          border-left: 0;
        }

        .app[data-view="conversations"] .customer-profile-drawer [data-toggle-conversation-followup],
        .app[data-view="conversations"] .customer-profile-drawer [data-edit-full-profile] {
          display: none !important;
        }
      }

      @media (max-width: 375px) {
        .app[data-view="conversations"] .chat-composer {
          gap: 6px;
          grid-template-columns: 38px minmax(0, 1fr) 38px 54px;
          padding: 8px;
        }

        .app[data-view="conversations"] .composer-icon {
          height: 38px;
          width: 38px;
        }

        .app[data-view="conversations"] .composer-icon.send {
          min-width: 54px;
          width: 54px;
        }

        .app[data-view="conversations"] .composer-input {
          min-height: 38px;
          padding-inline: 9px;
        }
      }

      @media (prefers-reduced-motion: reduce) {
        .app[data-view="conversations"] .conversation-button,
        .app[data-view="conversations"] .conversation-resizer,
        .app[data-view="conversations"] .account-button,
        .app[data-view="conversations"] .chat-head button,
        .app[data-view="conversations"] .chat-composer button {
          animation: none !important;
          transition-duration: 0.001ms !important;
        }
      }

      .app[data-view="conversations"] {
        grid-template-rows: minmax(0, 1fr);
      }

      .app[data-view="conversations"] .layout {
        grid-row: 1;
        height: 100%;
      }

      .app[data-view="conversations"] .event-drawer {
        background: rgba(255, 255, 255, 0.98);
        border: 1px solid var(--c3-line-strong);
        border-bottom: 0;
        border-radius: 12px 12px 0 0;
        bottom: 0;
        box-shadow: 0 -14px 34px rgba(18, 32, 29, 0.13);
        display: none;
        /* A8：抽屉左缘与工作区预留宽同源（56 / ≤880 归 0）；overlay 展开不推动抽屉。
           原 218 / 72 / 0 三档硬编码覆盖删除。 */
        left: var(--sidenav-collapsed, 0px);
        max-height: min(44vh, 440px);
        position: fixed;
        right: 0;
        z-index: 80;
      }

      .app[data-view="conversations"] .event-drawer[open] {
        display: block;
      }

      /* Layout-C3 END ==================================================== */

      /* Layout-D1 START =====================================================
         动态中心(view=comments-inbox)按已确认 Artifact(d87e69b5)一比一复刻。
         定版基线:#F8FAFC 工作区 / #FFFFFF 白卡细边 #E2E8F0 圆角10 内距16 /
         主色 #00453D / 激活 #D3E4FE / hover #EFF4FF / 语义 22C55E·F59E0B·EF4444。
         规则全部限域 .app[data-view="comments-inbox"](弹窗按 #followup-review-modal 独立限域,
         因其入口亦存在于客户管理视图)。零业务逻辑,纯展示层。 */

      .app[data-view="comments-inbox"] .comments-inbox-view {
        background: #F8FAFC;
        display: flex;
        flex-direction: column;
        gap: 12px;
        min-height: 0;
        overflow: hidden;
        padding: 18px 22px 0;
      }

      /* body 继续承担内滚(视图为 app 行高受限),旧 18px 内距归零由视图内距接管 */
      .app[data-view="comments-inbox"] .comments-inbox-body {
        display: block;
        flex: 1 1 auto;
        min-height: 0;
        overflow: auto;
        padding: 0 0 28px;
      }

      .app[data-view="comments-inbox"] .comments-inbox-list {
        margin: 0;
        max-width: none;
      }

      .app[data-view="comments-inbox"] .engagement-page-head {
        align-items: baseline;
        display: flex;
        gap: 10px;
      }

      .app[data-view="comments-inbox"] .engagement-page-head h2 {
        font-size: 18px;
        font-weight: 700;
        margin: 0;
      }

      .app[data-view="comments-inbox"] .engagement-page-sub {
        color: #64748B;
        font-size: 12px;
      }

      /* ── 统一顶区一卡化 ── */
      .app[data-view="comments-inbox"] .engagement-center-controls {
        align-items: stretch; /* 旧控件区 grid 规则的 align-items:end 会让 flex 列子项右缩，必须显式覆盖 */
        background: #FFFFFF;
        border: 1px solid #E2E8F0;
        border-radius: 10px;
        box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding: 10px 14px 12px;
      }

      .app[data-view="comments-inbox"] .engagement-tabs.segmented-control {
        background: transparent;
        border: 0;
        box-shadow: none;
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        padding: 0;
      }

      .app[data-view="comments-inbox"] .engagement-tabs .segmented-button {
        align-items: center;
        background: transparent;
        border: 1px solid transparent;
        border-radius: 8px;
        color: #334155;
        display: inline-flex;
        font-size: 14px;
        gap: 7px;
        min-height: 34px;
        padding: 7px 12px;
      }

      .app[data-view="comments-inbox"] .engagement-tabs .segmented-button:hover {
        background: #EFF4FF;
      }

      .app[data-view="comments-inbox"] .engagement-tabs .segmented-button.active {
        background: #00453D;
        color: #FFFFFF;
        font-weight: 600;
      }

      .app[data-view="comments-inbox"] .engagement-tab-count {
        background: #EEF2F7;
        border-radius: 9px;
        color: #64748B;
        font-size: 11px;
        font-variant-numeric: tabular-nums;
        font-weight: 600;
        height: 18px;
        line-height: 18px;
        min-width: 20px;
        padding: 0 6px;
        text-align: center;
      }

      .app[data-view="comments-inbox"] .engagement-tabs .segmented-button.active .engagement-tab-count {
        background: rgba(255, 255, 255, .22);
        color: #FFFFFF;
      }

      .app[data-view="comments-inbox"] .engagement-tab-dot {
        background: #EF4444;
        border-radius: 50%;
        height: 6px;
        width: 6px;
      }

      .app[data-view="comments-inbox"] .engagement-toolbar {
        align-items: center;
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
      }

      .app[data-view="comments-inbox"] .engagement-board-title {
        display: flex;
        flex-direction: column;
        gap: 1px;
        margin-right: auto;
      }

      .app[data-view="comments-inbox"] .engagement-board-title strong {
        font-size: 14px;
      }

      .app[data-view="comments-inbox"] .engagement-board-title span {
        color: #64748B;
        font-size: 12px;
      }

      /* 数量卡语义迁移到各 Tab 的 count chip(同口径),旧数量卡节点保留供 JS 写入但视觉隐藏 */
      .app[data-view="comments-inbox"] .engagement-stat {
        display: none;
      }

      .app[data-view="comments-inbox"] .engagement-filter-note {
        color: #64748B;
        display: none;
        font-size: 11px;
      }

      .app[data-view="comments-inbox"] .engagement-center-controls[data-active-tab="push-tasks"] .engagement-filter-note {
        display: inline;
      }

      .app[data-view="comments-inbox"] .engagement-center-controls[data-active-tab="push-tasks"] .engagement-filter-grid {
        display: none;
      }

      .app[data-view="comments-inbox"] .engagement-filter-grid {
        align-items: center;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        max-width: none; /* 旧规则 max-width:680px;width:100% 覆盖 */
        width: auto;
      }

      .app[data-view="comments-inbox"] .engagement-filter-grid .filter-field {
        align-items: center;
        display: flex;
        flex-direction: row;
        gap: 6px;
      }

      /* display:flex 会压过 [hidden] 属性的 UA/旧规则——销售字段在 broadcasts/push-tasks/销售角色下的隐藏必须保住 */
      .app[data-view="comments-inbox"] .engagement-filter-grid .filter-field[hidden] {
        display: none;
      }

      .app[data-view="comments-inbox"] .engagement-filter-grid .filter-field > span {
        color: #64748B;
        flex: none; /* 旧 select{width:100%} 会把 label 挤成 1ch 竖排 */
        font-size: 12px;
        white-space: nowrap;
      }

      .app[data-view="comments-inbox"] .engagement-filter-grid select,
      .app[data-view="comments-inbox"] .engagement-filter-grid input[type="search"] {
        background: #FFFFFF;
        border: 1px solid #E2E8F0;
        border-radius: 8px;
        color: #0F172A;
        font-size: 12.5px;
        height: 30px;
        padding: 0 9px;
        width: auto; /* 旧 .filter-field select{width:100%} 覆盖 */
      }

      .app[data-view="comments-inbox"] .engagement-filter-grid input[type="search"] {
        width: 210px;
      }

      .app[data-view="comments-inbox"] .engagement-filter-grid select:focus,
      .app[data-view="comments-inbox"] .engagement-filter-grid input[type="search"]:focus {
        border-color: #00453D;
        outline: 2px solid #D3E4FE;
      }

      /* 桌面:筛选常驻,折叠开关只在移动端出现 */
      .app[data-view="comments-inbox"] .engagement-filter-toggle {
        display: none;
      }

      /* ── 待办状态子 Tab(顶区插槽) ── */
      .app[data-view="comments-inbox"] .engagement-subtabs .push-task-controls {
        margin: 0;
        padding: 0;
      }

      .app[data-view="comments-inbox"] .engagement-subtabs .segmented-control {
        align-items: center;
        background: transparent;
        border: 0;
        box-shadow: none;
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        padding: 0;
      }

      .app[data-view="comments-inbox"] .engagement-subtabs .segmented-button {
        background: #FFFFFF;
        border: 1px solid #E2E8F0;
        border-radius: 999px;
        color: #334155;
        font-size: 12.5px;
        min-height: 30px;
        padding: 5px 12px;
      }

      .app[data-view="comments-inbox"] .engagement-subtabs .segmented-button:hover {
        background: #EFF4FF;
      }

      .app[data-view="comments-inbox"] .engagement-subtabs .segmented-button.active {
        background: #D3E4FE;
        border-color: #B9CFF7;
        color: #00453D;
        font-weight: 600;
      }

      .app[data-view="comments-inbox"] .engagement-subtabs .segmented-button[data-open-followup-review-panel] {
        margin-left: auto;
      }

      /* ── 记录卡四层结构 ── */
      .app[data-view="comments-inbox"] .comments-inbox-list {
        align-items: stretch; /* 旧列表规则 align-items:start 会让卡片收缩为内容宽，必须显式覆盖 */
        display: flex;
        flex-direction: column;
        gap: 10px;
      }

      .app[data-view="comments-inbox"] .engagement-record,
      #followup-review-modal .engagement-record {
        background: #FFFFFF;
        border: 1px solid #E2E8F0;
        border-radius: 10px;
        padding: 13px 16px 11px;
      }

      .app[data-view="comments-inbox"] .engagement-record:hover,
      #followup-review-modal .engagement-record:hover {
        border-color: #CBD5E1;
        box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
      }

      .app[data-view="comments-inbox"] .engagement-record.unread,
      #followup-review-modal .engagement-record.unread {
        background: #FBFDFD;
        border-color: #BFD7D1;
      }

      /* 旧 tone 左彩条在 D1 卡上一律压平(方向语义已由 chip 承担) */
      .app[data-view="comments-inbox"] .comments-inbox-item.engagement-record {
        border-left: 1px solid #E2E8F0;
      }

      .app[data-view="comments-inbox"] .comments-inbox-item.engagement-record.unread {
        border-left-color: #BFD7D1;
      }

      .app[data-view="comments-inbox"] .engagement-record-head,
      #followup-review-modal .engagement-record-head {
        align-items: flex-start;
        display: flex;
        gap: 10px;
      }

      .app[data-view="comments-inbox"] .engagement-record-who,
      #followup-review-modal .engagement-record-who {
        align-items: center;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        min-width: 0;
      }

      .app[data-view="comments-inbox"] .engagement-record-who strong,
      #followup-review-modal .engagement-record-who strong {
        font-size: 15px;
        font-weight: 650;
      }

      .app[data-view="comments-inbox"] .engagement-unread-dot,
      #followup-review-modal .engagement-unread-dot {
        background: #EF4444;
        border-radius: 50%;
        flex: 0 0 auto;
        height: 8px;
        width: 8px;
      }

      .app[data-view="comments-inbox"] .engagement-record-head-right,
      #followup-review-modal .engagement-record-head-right {
        align-items: center;
        display: flex;
        flex: 0 0 auto;
        gap: 10px;
        margin-left: auto;
      }

      .app[data-view="comments-inbox"] .engagement-record-time,
      #followup-review-modal .engagement-record-time {
        color: #64748B;
        font-size: 12px;
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
      }

      .app[data-view="comments-inbox"] .engagement-chip,
      #followup-review-modal .engagement-chip {
        align-items: center;
        background: #EEF2F7;
        border: 1px solid transparent;
        border-radius: 999px;
        color: #334155;
        display: inline-flex;
        font-size: 11.5px;
        font-weight: 500;
        gap: 4px;
        height: 20px;
        padding: 0 8px;
        white-space: nowrap;
      }

      /* chip 的语气修饰类是裸类名(brand/info/...)，侧栏 logo 的通配 .brand::before{content:"W"}
         会命中 .engagement-chip.brand —— 显式灭掉 chip 上的伪元素 */
      .app[data-view="comments-inbox"] .engagement-chip::before,
      #followup-review-modal .engagement-chip::before {
        content: none;
      }

      .app[data-view="comments-inbox"] .engagement-chip.brand,
      #followup-review-modal .engagement-chip.brand { background: #E4EFEC; color: #00453D; }
      .app[data-view="comments-inbox"] .engagement-chip.info,
      #followup-review-modal .engagement-chip.info { background: #D3E4FE; color: #1D4ED8; }
      .app[data-view="comments-inbox"] .engagement-chip.warn,
      #followup-review-modal .engagement-chip.warn { background: #FEF3C7; color: #92400E; }
      .app[data-view="comments-inbox"] .engagement-chip.danger,
      #followup-review-modal .engagement-chip.danger { background: #FEE2E2; color: #B91C1C; }
      .app[data-view="comments-inbox"] .engagement-chip.success,
      #followup-review-modal .engagement-chip.success { background: #DCFCE7; color: #15803D; }
      .app[data-view="comments-inbox"] .engagement-chip.ghost,
      #followup-review-modal .engagement-chip.ghost { background: #FFFFFF; border-color: #E2E8F0; color: #64748B; }

      .app[data-view="comments-inbox"] button.engagement-chip {
        cursor: pointer;
      }

      .app[data-view="comments-inbox"] .engagement-record-meta,
      #followup-review-modal .engagement-record-meta {
        align-items: center;
        display: flex;
        flex-wrap: wrap;
        gap: 6px 14px;
        margin-top: 7px;
      }

      .app[data-view="comments-inbox"] .engagement-meta-kv,
      #followup-review-modal .engagement-meta-kv {
        color: #64748B;
        font-size: 12px;
      }

      .app[data-view="comments-inbox"] .engagement-meta-kv b,
      #followup-review-modal .engagement-meta-kv b {
        color: #334155;
        font-weight: 600;
      }

      .app[data-view="comments-inbox"] .engagement-record-body,
      #followup-review-modal .engagement-record-body {
        color: #334155;
        font-size: 13px;
        margin-top: 8px;
        max-width: 92ch;
        overflow-wrap: anywhere;
      }

      .app[data-view="comments-inbox"] .engagement-record-body.clamp {
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        display: -webkit-box;
        overflow: hidden;
      }

      .app[data-view="comments-inbox"] .engagement-body-expand {
        background: none;
        border: 0;
        color: #00453D;
        cursor: pointer;
        font-size: 12px;
        padding: 2px 0 0;
      }

      .app[data-view="comments-inbox"] .engagement-record-foot,
      #followup-review-modal .engagement-record-foot {
        align-items: center;
        border-top: 1px dashed #E2E8F0;
        display: flex;
        gap: 10px;
        margin-top: 9px;
        padding-top: 9px;
      }

      .app[data-view="comments-inbox"] .engagement-foot-status,
      #followup-review-modal .engagement-foot-status {
        align-items: center;
        color: #64748B;
        display: inline-flex;
        font-size: 12px;
        gap: 5px;
      }

      .app[data-view="comments-inbox"] .engagement-foot-status::before,
      #followup-review-modal .engagement-foot-status::before {
        border-radius: 50%;
        content: "";
        height: 6px;
        width: 6px;
      }

      .app[data-view="comments-inbox"] .engagement-foot-status.success::before,
      #followup-review-modal .engagement-foot-status.success::before { background: #22C55E; }
      .app[data-view="comments-inbox"] .engagement-foot-status.muted::before,
      #followup-review-modal .engagement-foot-status.muted::before { background: #CBD5E1; }

      .app[data-view="comments-inbox"] .engagement-foot-actions,
      #followup-review-modal .engagement-foot-actions {
        display: flex;
        gap: 8px;
        margin-left: auto;
      }

      .app[data-view="comments-inbox"] .engagement-view-customer,
      #followup-review-modal .engagement-view-customer {
        border-color: #9DBBB4;
        color: #00453D;
      }

      /* ── 回复线程 ── */
      .app[data-view="comments-inbox"] .engagement-replies,
      .app[data-view="comments-inbox"] .engagement-thread {
        background: #FAFBFC;
        border: 1px solid #E2E8F0;
        border-radius: 8px;
        margin-top: 8px;
      }

      .app[data-view="comments-inbox"] .engagement-replies > summary {
        color: #00453D;
        cursor: pointer;
        display: flex;
        align-items: center;
        font-size: 12px;
        font-weight: 600;
        gap: 6px;
        list-style: none;
        padding: 7px 12px;
      }

      .app[data-view="comments-inbox"] .engagement-replies > summary::before {
        content: "▸";
        font-size: 10px;
      }

      .app[data-view="comments-inbox"] .engagement-replies[open] > summary::before {
        content: "▾";
      }

      .app[data-view="comments-inbox"] .engagement-replies .comment-reply-list {
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding: 2px 12px 10px;
      }

      .app[data-view="comments-inbox"] .engagement-reply-item {
        display: flex;
        gap: 8px;
      }

      .app[data-view="comments-inbox"] .engagement-reply-avatar {
        align-items: center;
        background: #E4EFEC;
        border-radius: 50%;
        color: #00453D;
        display: flex;
        flex: 0 0 auto;
        font-size: 11px;
        font-weight: 600;
        height: 22px;
        justify-content: center;
        width: 22px;
      }

      .app[data-view="comments-inbox"] .engagement-reply-main {
        display: flex;
        flex-direction: column;
        gap: 1px;
        min-width: 0;
      }

      .app[data-view="comments-inbox"] .engagement-reply-meta {
        color: #64748B;
        font-size: 11.5px;
      }

      .app[data-view="comments-inbox"] .engagement-reply-meta b {
        color: #334155;
      }

      .app[data-view="comments-inbox"] .engagement-reply-text {
        color: #334155;
        font-size: 12.5px;
        overflow-wrap: anywhere;
      }

      .app[data-view="comments-inbox"] .engagement-thread .push-task-reply-form,
      .app[data-view="comments-inbox"] .engagement-thread .comment-reply-list + .comment-status {
        padding: 0 12px 12px;
      }

      .app[data-view="comments-inbox"] .engagement-thread .push-task-reply-form textarea {
        background: #FFFFFF;
        border: 1px solid #E2E8F0;
        border-radius: 8px;
        font-size: 12.5px;
        min-height: 54px;
        padding: 7px 9px;
        resize: vertical;
        width: 100%;
      }

      .app[data-view="comments-inbox"] .engagement-thread .push-task-reply-actions {
        display: flex;
        justify-content: flex-end;
        margin-top: 8px;
      }

      .app[data-view="comments-inbox"] .push-task-latest-reply {
        background: #FAFBFC;
        border: 1px dashed #E2E8F0;
        border-radius: 8px;
        color: #334155;
        cursor: pointer;
        display: block;
        font-size: 12px;
        margin-top: 8px;
        padding: 7px 10px;
        text-align: left;
        width: 100%;
      }

      .app[data-view="comments-inbox"] .push-task-latest-reply:hover {
        background: #EFF4FF;
      }

      .app[data-view="comments-inbox"] .engagement-readonly-note {
        color: #64748B;
        font-size: 12px;
        margin-top: 8px;
      }

      /* ── 空 / 权限 / 错误 / 骨架 ── */
      .app[data-view="comments-inbox"] .engagement-empty-card {
        align-items: center;
        background: #FFFFFF;
        border: 1px dashed #CBD5E1;
        border-radius: 10px;
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding: 42px 20px;
        text-align: center;
      }

      .app[data-view="comments-inbox"] .engagement-empty-card strong {
        color: #334155;
        font-size: 14px;
      }

      .app[data-view="comments-inbox"] .engagement-empty-card span {
        color: #64748B;
        font-size: 12px;
        max-width: 46ch;
      }

      .app[data-view="comments-inbox"] .engagement-empty-card .detail-button {
        margin-top: 6px;
      }

      .app[data-view="comments-inbox"] .engagement-empty-icon {
        align-items: center;
        background: #EEF4F3;
        border-radius: 50%;
        color: #00453D;
        display: flex;
        height: 52px;
        justify-content: center;
        width: 52px;
      }

      .app[data-view="comments-inbox"] .engagement-empty-icon svg {
        height: 24px;
        width: 24px;
      }

      .app[data-view="comments-inbox"] .engagement-empty-card.is-permission {
        border-style: solid;
        padding: 28px 20px;
      }

      .app[data-view="comments-inbox"] .engagement-error-card {
        align-items: center;
        background: #FFFFFF;
        border: 1px solid #F3B4B4;
        border-radius: 10px;
        color: #EF4444;
        display: flex;
        font-size: 13px;
        gap: 10px;
        justify-content: space-between;
        padding: 14px 16px;
      }

      .app[data-view="comments-inbox"] .engagement-skeleton-card {
        background: #FFFFFF;
        border: 1px solid #E2E8F0;
        border-radius: 10px;
        display: flex;
        flex-direction: column;
        gap: 9px;
        padding: 14px 16px;
      }

      .app[data-view="comments-inbox"] .engagement-skeleton {
        background: linear-gradient(90deg, #EEF2F7 25%, #F8FAFC 50%, #EEF2F7 75%);
        border-radius: 6px;
        display: block;
        height: 12px;
      }

      .app[data-view="comments-inbox"] .engagement-load-more {
        display: flex;
        justify-content: center;
        padding: 4px 0 0;
      }

      /* ── 重复客户 ── */
      .app[data-view="comments-inbox"] .engagement-dup-accounts {
        display: grid;
        gap: 8px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin-top: 10px;
      }

      .app[data-view="comments-inbox"] .engagement-dup-accounts .duplicate-account-card {
        align-items: center;
        background: #FAFBFC;
        border: 1px solid #E2E8F0;
        border-radius: 8px;
        display: flex;
        gap: 10px;
        margin: 0;
        padding: 10px 12px;
      }

      .app[data-view="comments-inbox"] .engagement-dup-who {
        align-items: flex-start;
        display: flex; /* 旧 .duplicate-account-card > div:first-child 是 flex row space-between，覆盖为竖排(名上/销售·建档态下) */
        flex: 1;
        flex-direction: column;
        gap: 2px;
        justify-content: flex-start;
        min-width: 0;
      }

      .app[data-view="comments-inbox"] .engagement-dup-who strong {
        display: block;
        font-size: 13px;
      }

      .app[data-view="comments-inbox"] .engagement-dup-who span {
        color: #64748B;
        font-size: 11.5px;
      }

      .app[data-view="comments-inbox"] .duplicate-account-actions {
        align-items: center;
        display: flex;
        flex: 0 0 auto;
        gap: 6px;
      }

      .app[data-view="comments-inbox"] .duplicate-sales-chips {
        align-items: center;
        display: inline-flex;
        flex-wrap: wrap;
        gap: 5px;
      }

      .app[data-view="comments-inbox"] .duplicate-sales-chips em {
        color: #64748B;
        font-size: 12px;
        font-style: normal;
      }

      .app[data-view="comments-inbox"] .duplicate-sales-chip {
        background: #EEF2F7;
        border-radius: 999px;
        color: #334155;
        font-size: 11.5px;
        padding: 2px 8px;
      }

      .app[data-view="comments-inbox"] .duplicate-sales-chip.muted {
        background: #FFFFFF;
        border: 1px solid #E2E8F0;
        color: #64748B;
      }

      .app[data-view="comments-inbox"] .duplicate-approval-list {
        border-top: 1px dashed #E2E8F0;
        display: flex;
        flex-direction: column;
        gap: 6px;
        margin-top: 10px;
        padding-top: 9px;
      }

      .app[data-view="comments-inbox"] .duplicate-approval-item {
        align-items: center;
        background: #FFFBEB;
        border: 1px solid #FDE68A;
        border-radius: 8px;
        color: #334155;
        display: flex;
        font-size: 12.5px;
        gap: 10px;
        padding: 7px 10px;
      }

      .app[data-view="comments-inbox"] .duplicate-approval-actions {
        display: flex;
        gap: 6px;
        margin-left: auto;
      }

      .app[data-view="comments-inbox"] .duplicate-profile-missing,
      .app[data-view="comments-inbox"] .duplicate-profile-pending,
      .app[data-view="comments-inbox"] .duplicate-profile-rejected {
        color: #64748B;
        font-size: 12px;
      }

      .app[data-view="comments-inbox"] .duplicate-profile-rejected {
        color: #B91C1C;
      }

      /* ── 全员通知 ── */
      .app[data-view="comments-inbox"] .engagement-publish-card {
        background: #F6FAF9;
        border-color: #C9DAD6;
      }

      .app[data-view="comments-inbox"] .engagement-publish-grid {
        display: grid;
        gap: 8px 10px;
        grid-template-columns: minmax(0, 1fr) 132px;
        margin-top: 9px;
      }

      .app[data-view="comments-inbox"] .engagement-publish-grid label {
        color: #64748B;
        display: flex;
        flex-direction: column;
        font-size: 12px;
        gap: 4px;
      }

      .app[data-view="comments-inbox"] .engagement-publish-grid input[type="text"],
      .app[data-view="comments-inbox"] .engagement-publish-grid select {
        background: #FFFFFF;
        border: 1px solid #E2E8F0;
        border-radius: 8px;
        height: 32px;
        padding: 0 9px;
      }

      .app[data-view="comments-inbox"] .engagement-publish-grid .broadcast-notification-body {
        grid-column: 1 / -1;
      }

      .app[data-view="comments-inbox"] .engagement-publish-grid textarea {
        background: #FFFFFF;
        border: 1px solid #E2E8F0;
        border-radius: 8px;
        min-height: 64px;
        padding: 7px 9px;
        resize: vertical;
      }

      /* Artifact 删除钮=白底红描边(danger-line)，压过 .detail-button.danger 的红实心 */
      .app[data-view="comments-inbox"] .engagement-delete-btn.detail-button.danger {
        background: #FFFFFF;
        border: 1px solid #FCA5A5;
        color: #B91C1C;
      }

      .app[data-view="comments-inbox"] .engagement-delete-btn.detail-button.danger:hover {
        background: #FEF2F2;
        border-color: #F87171;
      }

      .app[data-view="comments-inbox"] .broadcast-notification-card.warning.engagement-record {
        border-color: #F5DFAE;
      }

      .app[data-view="comments-inbox"] .broadcast-notification-card.urgent.engagement-record {
        border-color: #F3B4B4;
      }

      /* ── 不再跟进记录区弹窗(入口含客户管理视图,独立限域) ── */
      #followup-review-modal .followup-review-dialog-d1 {
        display: flex; /* 基座 import-dialog 是 5 行 grid(两个 minmax fr 行)+min-height:560，记录区只有 3 个子元素会撑出整块空白 */
        flex-direction: column;
        gap: 12px;
        max-width: 860px;
        min-height: 0;
        width: min(860px, calc(100vw - 48px));
      }

      #followup-review-modal .followup-review-dialog-d1 #followup-review-list {
        display: flex;
        flex-direction: column;
        gap: 10px;
        max-height: min(540px, 62vh);
        overflow: auto;
        padding: 2px;
      }

      #followup-review-modal .engagement-record.is-rejected {
        border-color: #F3B4B4;
      }

      /* ── 移动端(沿用现网 ≤900px 顶栏+横滚导航策略) ── */
      @media (max-width: 900px) {
        .app[data-view="comments-inbox"] .comments-inbox-view {
          gap: 10px;
          padding: 12px 10px 18px;
        }

        .app[data-view="comments-inbox"] .engagement-center-controls {
          padding: 8px 10px 10px;
        }

        .app[data-view="comments-inbox"] .engagement-tabs.segmented-control {
          flex-wrap: nowrap;
          overflow-x: auto;
          scrollbar-width: none;
        }

        .app[data-view="comments-inbox"] .engagement-tabs.segmented-control::-webkit-scrollbar {
          display: none;
        }

        .app[data-view="comments-inbox"] .engagement-tabs .segmented-button {
          flex: 0 0 auto;
          font-size: 13px;
          padding: 6px 10px;
        }

        .app[data-view="comments-inbox"] .engagement-board-title {
          margin-right: 0;
          width: 100%;
        }

        /* Codex-RETURN 收口：移动端筛选按 Artifact 基准=常显 wrap(时间/销售一行+关键词整行)，无折叠开关。
           toggle 节点保留供 JS 写入(hidden/aria/class)，视觉与桌面同为 display:none；
           filters-expanded 类由现役 JS 继续切换，无论有无该类栅格都常显(选择器不带类名)。 */
        .app[data-view="comments-inbox"] .engagement-filter-toggle {
          display: none;
        }

        .app[data-view="comments-inbox"] .engagement-filter-grid {
          display: grid;
          gap: 8px;
          grid-template-columns: 1fr 1fr;
          width: 100%;
        }

        .app[data-view="comments-inbox"] .engagement-center-controls[data-active-tab="push-tasks"] .engagement-filter-grid,
        .app[data-view="comments-inbox"] .engagement-center-controls[data-active-tab="push-tasks"].filters-expanded .engagement-filter-grid {
          display: none;
        }

        .app[data-view="comments-inbox"] .engagement-filter-grid .filter-field {
          display: grid;
          gap: 4px;
          grid-template-columns: 34px 1fr;
        }

        .app[data-view="comments-inbox"] .engagement-filter-grid .filter-field:last-child {
          grid-column: 1 / -1;
        }

        .app[data-view="comments-inbox"] .engagement-filter-grid input[type="search"] {
          width: 100%;
        }

        .app[data-view="comments-inbox"] .engagement-subtabs .segmented-control {
          flex-wrap: nowrap;
          overflow-x: auto;
          scrollbar-width: none;
        }

        .app[data-view="comments-inbox"] .engagement-subtabs .segmented-control::-webkit-scrollbar {
          display: none;
        }

        .app[data-view="comments-inbox"] .engagement-subtabs .segmented-button {
          flex: 0 0 auto;
        }

        .app[data-view="comments-inbox"] .engagement-subtabs .segmented-button[data-open-followup-review-panel] {
          margin-left: 0;
        }

        .app[data-view="comments-inbox"] .engagement-record {
          padding: 11px 12px 9px;
        }

        .app[data-view="comments-inbox"] .engagement-record-head {
          flex-wrap: wrap;
        }

        .app[data-view="comments-inbox"] .engagement-record-head-right {
          justify-content: space-between;
          margin-left: 0;
          margin-top: 6px;
          order: 3;
          width: 100%;
        }

        .app[data-view="comments-inbox"] .engagement-dup-accounts {
          grid-template-columns: 1fr;
        }

        .app[data-view="comments-inbox"] .engagement-publish-grid {
          grid-template-columns: 1fr;
        }

        .app[data-view="comments-inbox"] .engagement-foot-actions {
          flex-wrap: wrap;
          justify-content: flex-end;
        }
      }

      /* Layout-D1 END ===================================================== */

      /* ═══════════════ Layout-E1 START（账号管理四子板块 · 施工基准=Artifact 4f4212da V3-R3） ═══════════════
         限域：.app[data-view="role-management"]（实例运营为运行时搬迁面板，同属本视图）+ 抽屉态。
         D1 渗透坑预防：显式覆盖 align-items / [hidden] 优先级 / 语义定宽；不使用裸修饰类（e1- 前缀）。 */
      .app[data-view="role-management"] .customer-management-head {
        align-items: baseline;
        border-bottom: 0;
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        padding: 18px 24px 0;
      }

      .app[data-view="role-management"] .customer-management-head h2 {
        font-size: 18px;
        font-weight: 700;
        letter-spacing: -.01em;
      }

      .app[data-view="role-management"] .customer-management-head p {
        color: #64748B;
        font-size: 12.5px;
        margin: 0;
      }

      .app[data-view="role-management"] .role-head-actions {
        align-items: center;
        display: flex;
        gap: 10px;
        margin-left: auto;
      }

      .app[data-view="role-management"] .role-head-actions .count {
        background: transparent;
        border: 0;
        color: #64748B;
        font-size: 12px;
        font-variant-numeric: tabular-nums;
      }

      /* ── 四子板块 Tab：下划线式 ── */
      .app[data-view="role-management"] .role-management-tabs {
        background: transparent;
        border-bottom: 1px solid #E2E8F0;
        display: flex;
        gap: 26px;
        margin: 6px 24px 0;
        overflow-x: auto;
        padding: 0;
      }

      .app[data-view="role-management"] .role-management-tab {
        background: none;
        border: 0;
        border-bottom: 2px solid transparent;
        border-radius: 0;
        color: #64748B;
        flex: none;
        font-size: 13.5px;
        padding: 9px 2px 11px;
      }

      .app[data-view="role-management"] .role-management-tab:hover {
        background: none;
        color: #334155;
      }

      .app[data-view="role-management"] .role-management-tab.active {
        background: none;
        border-bottom-color: #00453D;
        box-shadow: none;
        color: #00453D;
        font-weight: 600;
      }

      .app[data-view="role-management"] .role-management-panels {
        display: block;
        min-height: 0;
        overflow: auto;
        padding: 16px 24px 26px;
      }

      .app[data-view="role-management"] .role-management-panel {
        display: block;
      }

      .app[data-view="role-management"] .role-management-panel[hidden] {
        display: none; /* display:block 会压过 [hidden]，必须显式保住（D1 坑④） */
      }

      /* ── 通用：E1 chip / 分节 / 横幅 ── */
      .app[data-view="role-management"] .e1-chip {
        align-items: center;
        background: #EEF2F7;
        border-radius: 999px;
        color: #334155;
        display: inline-flex;
        font-size: 11.5px;
        font-weight: 500;
        gap: 5px;
        height: 20px;
        padding: 0 8px;
        white-space: nowrap;
      }

      .app[data-view="role-management"] .e1-chip::before {
        content: none; /* 防裸类通配伪元素污染（D1 坑③模式） */
      }

      .app[data-view="role-management"] .e1-chip.e1-t-brand { background: #E4EFEC; color: #00453D; }
      .app[data-view="role-management"] .e1-chip.e1-t-info { background: #D3E4FE; color: #1D4ED8; }
      .app[data-view="role-management"] .e1-chip.e1-t-warn { background: #FEF3C7; color: #92400E; }
      .app[data-view="role-management"] .e1-chip.e1-t-danger { background: #FEE2E2; color: #B91C1C; }
      .app[data-view="role-management"] .e1-chip.e1-t-success { background: #DCFCE7; color: #15803D; }
      .app[data-view="role-management"] .e1-chip.e1-t-ghost { background: #FFFFFF; border: 1px solid #E2E8F0; color: #64748B; }

      .app[data-view="role-management"] .e1-dot {
        border-radius: 50%;
        display: inline-block;
        height: 7px;
        width: 7px;
      }

      .app[data-view="role-management"] .e1-dot.g { background: #22C55E; }
      .app[data-view="role-management"] .e1-dot.y { background: #EAB308; }
      .app[data-view="role-management"] .e1-dot.r { background: #EF4444; }
      .app[data-view="role-management"] .e1-dot.gray { background: #CBD5E1; }

      .app[data-view="role-management"] .e1-banner {
        align-items: center;
        border-radius: 8px;
        display: flex;
        flex-wrap: wrap;
        font-size: 12.5px;
        gap: 8px;
        line-height: 1.6;
        padding: 9px 12px;
      }

      .app[data-view="role-management"] .e1-banner.e1-t-warn { background: #FEF3C7; color: #92400E; }
      .app[data-view="role-management"] .e1-banner.e1-t-info { background: #F1F5F9; color: #334155; }

      .app[data-view="role-management"] .e1-sect-h {
        align-items: center;
        color: #0F172A;
        display: flex;
        flex-wrap: wrap;
        font-size: 13px;
        font-weight: 600;
        gap: 10px;
        margin-top: 6px;
      }

      .app[data-view="role-management"] .e1-sect-h .e1-sub {
        color: #64748B;
        font-size: 11.5px;
        font-weight: 400;
      }

      .app[data-view="role-management"] .e1-sect {
        border-top: 1px solid #E2E8F0;
        display: flex;
        flex-direction: column;
        gap: 12px;
        padding: 16px 0 20px;
      }

      .app[data-view="role-management"] .e1-sect:first-of-type {
        border-top: 0;
      }

      /* ── A. 角色配置：左窄栏 + 右流式面 ── */
      .app[data-view="role-management"] .role-management-body {
        align-items: stretch; /* 防旧规则 align-items 渗透（D1 坑①②） */
        background: #FFFFFF;
        border: 1px solid #E2E8F0;
        border-radius: 10px;
        box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
        display: grid;
        gap: 0;
        grid-template-columns: 252px minmax(0, 1fr);
        overflow: hidden;
        padding: 0;
      }

      .app[data-view="role-management"] .role-list-panel {
        background: transparent;
        border-right: 1px solid #E2E8F0;
        display: flex;
        flex-direction: column;
        min-height: 0;
        padding: 10px 0;
      }

      .app[data-view="role-management"] .role-note {
        background: #F8FAFC;
        border: 1px dashed #CBD5E1;
        border-radius: 8px;
        color: #64748B;
        font-size: 11.5px;
        line-height: 1.55;
        margin: 2px 12px 8px;
        padding: 7px 10px;
      }

      .app[data-view="role-management"] .role-list {
        display: flex;
        flex-direction: column;
        gap: 0;
        min-height: 0;
        overflow-y: auto;
        padding: 0;
      }

      .app[data-view="role-management"] .role-list-button {
        background: none;
        border: 0;
        border-left: 2px solid transparent;
        border-radius: 0;
        box-shadow: none;
        display: flex;
        flex-direction: column;
        gap: 3px;
        margin: 0;
        padding: 11px 18px;
        text-align: left;
      }

      .app[data-view="role-management"] .role-list-button:hover {
        background: #EFF4FF;
      }

      .app[data-view="role-management"] .role-list-button.active {
        background: #E4EFEC;
        border-left-color: #00453D;
      }

      .app[data-view="role-management"] .role-list-button .row-top {
        align-items: center;
        display: flex;
        gap: 7px;
      }

      .app[data-view="role-management"] .role-list-button .row-name {
        font-size: 13px;
        font-weight: 600;
      }

      .app[data-view="role-management"] .role-list-button .role-type {
        background: none;
        border: 0;
        color: #64748B;
        font-size: 11px;
        font-weight: 400;
        padding: 0;
      }

      .app[data-view="role-management"] .role-list-button .role-description,
      .app[data-view="role-management"] .role-list-button .row-meta {
        color: #64748B;
        display: flex;
        flex-wrap: wrap;
        font-size: 11.5px;
        gap: 4px 10px;
      }

      .app[data-view="role-management"] .role-list-button .row-meta .badge {
        background: none;
        border: 0;
        color: #64748B;
        font-size: 11.5px;
        padding: 0;
      }

      .app[data-view="role-management"] .role-detail {
        background: transparent;
        border: 0;
        display: flex;
        flex-direction: column;
        min-height: 0;
        min-width: 0;
        overflow-y: auto;
        padding: 20px 26px 0;
      }

      .app[data-view="role-management"] .role-detail-head {
        align-items: center;
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
      }

      .app[data-view="role-management"] .role-detail-head h3 {
        font-size: 15px;
        margin: 0;
      }

      .app[data-view="role-management"] .role-detail-head .e1-head-spacer {
        margin-left: auto;
      }

      .app[data-view="role-management"] .role-meta-grid {
        color: #64748B;
        display: flex;
        flex-wrap: wrap;
        font-size: 12px;
        gap: 6px 18px;
        margin-top: 8px;
      }

      .app[data-view="role-management"] .role-meta-item {
        align-items: baseline;
        display: flex;
        gap: 6px;
      }

      .app[data-view="role-management"] .role-meta-item span {
        color: #64748B;
        font-size: 12px;
      }

      .app[data-view="role-management"] .role-meta-item strong {
        color: #334155;
        font-size: 12px;
        font-weight: 600;
      }

      /* 角色表单：语义定宽 */
      .app[data-view="role-management"] #role-form {
        display: flex;
        flex-direction: column;
        gap: 0;
        margin-top: 14px;
      }

      .app[data-view="role-management"] #role-form .e1-frow {
        display: flex;
        flex-wrap: wrap;
        gap: 12px 22px;
      }

      .app[data-view="role-management"] #role-form .detail-field {
        display: flex;
        flex-direction: column;
        gap: 5px;
      }

      .app[data-view="role-management"] #role-form .detail-field label {
        color: #334155;
        font-size: 12.5px;
        font-weight: 600;
      }

      .app[data-view="role-management"] #role-form input,
      .app[data-view="role-management"] #role-form select,
      .app[data-view="role-management"] #role-form textarea {
        background: #FFFFFF;
        border: 1px solid #E2E8F0;
        border-radius: 8px;
        font-size: 12.5px;
        min-height: 32px;
        padding: 5px 10px;
      }

      .app[data-view="role-management"] #role-form input:focus,
      .app[data-view="role-management"] #role-form select:focus,
      .app[data-view="role-management"] #role-form textarea:focus {
        border-color: #00453D;
        outline: 2px solid #D3E4E0;
      }

      .app[data-view="role-management"] #role-form input[readonly],
      .app[data-view="role-management"] #role-form select[disabled] {
        background: #F8FAFC;
        color: #64748B;
      }

      .app[data-view="role-management"] #role-id { width: 240px; }
      .app[data-view="role-management"] #role-display-name { width: 240px; }
      .app[data-view="role-management"] #role-data-scope { width: 180px; }
      .app[data-view="role-management"] #role-description { max-width: 640px; min-height: 56px; width: 100%; }

      /* 权限矩阵：两列无框分组 */
      .app[data-view="role-management"] .permission-groups {
        column-gap: 40px;
        columns: 2;
        display: block; /* 现役基础规则是 display:grid，grid 容器 multi-column 失效，必须压回 block */
        margin-top: 8px;
      }

      .app[data-view="role-management"] .permission-group {
        background: none;
        border: 0;
        break-inside: avoid;
        margin: 0 0 20px;
        padding: 0;
      }

      .app[data-view="role-management"] .permission-group h4 {
        align-items: baseline;
        border-bottom: 1px solid #E2E8F0;
        color: #0F172A;
        display: flex;
        font-size: 12.5px;
        gap: 8px;
        margin: 0;
        padding-bottom: 7px;
      }

      .app[data-view="role-management"] .permission-group h4 .e1-cnt {
        color: #64748B;
        font-size: 11.5px;
        font-variant-numeric: tabular-nums;
        font-weight: 500;
        margin-left: auto;
      }

      .app[data-view="role-management"] .permission-options {
        display: flex;
        flex-direction: column;
        gap: 0;
      }

      .app[data-view="role-management"] .permission-option {
        align-items: flex-start;
        background: none;
        border: 0;
        display: flex;
        gap: 9px;
        padding: 8px 0 0;
      }

      .app[data-view="role-management"] .permission-option input[type="checkbox"] {
        accent-color: #00453D;
        height: 14px;
        margin-top: 2px;
        width: 14px;
      }

      .app[data-view="role-management"] .permission-option input[type="checkbox"][disabled] {
        opacity: .55;
      }

      .app[data-view="role-management"] .permission-option strong {
        color: #334155;
        font-size: 12.5px;
        font-weight: 400;
      }

      .app[data-view="role-management"] .permission-option code {
        background: none;
        border: 0;
        color: #94A3B8;
        font-size: 10.5px;
        margin-left: 4px;
        padding: 0;
      }

      .app[data-view="role-management"] .permission-option small {
        color: #64748B;
        display: block;
        font-size: 11.5px;
        line-height: 1.5;
        margin-top: 1px;
      }

      .app[data-view="role-management"] .e1-sys {
        background: #FEF3C7;
        border-radius: 999px;
        color: #92400E;
        font-size: 10px;
        margin-left: 6px;
        padding: 1px 6px;
        white-space: nowrap;
      }

      .app[data-view="role-management"] .permission-option.disabled strong {
        color: #94A3B8;
      }

      /* 角色底部操作条 */
      .app[data-view="role-management"] .e1-actionbar {
        align-items: center;
        background: #FBFCFD;
        border-top: 1px solid #E2E8F0;
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin: 8px -26px 0;
        padding: 12px 20px;
        position: sticky;
        bottom: 0;
      }

      .app[data-view="role-management"] .e1-actionbar .e1-note {
        color: #64748B;
        font-size: 11.5px;
        line-height: 1.5;
        margin-right: auto;
        max-width: 60%;
      }

      .app[data-view="role-management"] .e1-actionbar .detail-status {
        color: #64748B;
        font-size: 11.5px;
        margin: 0;
      }

      /* ── 通用表格（users / instances / deleted） ── */
      .app[data-view="role-management"] .management-table-wrap {
        overflow-x: auto;
      }

      .app[data-view="role-management"] .management-table th {
        border-bottom: 1px solid #E2E8F0;
        color: #64748B;
        font-size: 11.5px;
        font-weight: 600;
        padding: 10px 12px;
        white-space: nowrap;
      }

      .app[data-view="role-management"] .management-table td {
        border-bottom: 1px solid #F1F5F9;
        font-size: 12.5px;
        padding: 11px 12px;
        vertical-align: middle;
      }

      .app[data-view="role-management"] .management-table tbody tr:hover {
        background: #EFF4FF;
      }

      .app[data-view="role-management"] .management-table tbody tr.active {
        background: #E4EFEC;
      }

      .app[data-view="role-management"] .e1-cell-sub {
        color: #64748B;
        display: block;
        font-size: 11.5px;
        font-weight: 400;
      }

      /* ── B/C. 账号 & 实例：全宽表 + 详情抽屉 ── */
      .app[data-view="role-management"] #user-management .management-body,
      .app[data-view="role-management"] #sales-management .management-body {
        display: block;
      }

      .app[data-view="role-management"] #user-management > .management-body > .management-table-wrap,
      .app[data-view="role-management"] #sales-management > .management-body > .management-table-wrap {
        background: #FFFFFF;
        border: 1px solid #E2E8F0;
        border-radius: 10px;
        box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
      }

      .app[data-view="role-management"] #user-management .management-detail,
      .app[data-view="role-management"] #sales-management .management-detail {
        display: none;
      }

      .app[data-view="role-management"] .e1-drawer-mask {
        background: rgba(15, 23, 42, .34);
        inset: 0;
        position: fixed;
        z-index: 58;
      }

      .app[data-view="role-management"] .e1-drawer-mask[hidden] {
        display: none;
      }

      .app[data-view="role-management"] #user-management.e1-drawer-open .management-detail,
      .app[data-view="role-management"] #sales-management.e1-drawer-open .management-detail {
        background: #FFFFFF;
        border-left: 1px solid #E2E8F0;
        bottom: 0;
        box-shadow: -18px 0 44px rgba(15, 23, 42, .14);
        display: flex;
        flex-direction: column;
        max-width: 680px;
        overflow-y: auto;
        padding: 0 24px;
        position: fixed;
        right: 0;
        top: 0;
        width: 680px;
        z-index: 59;
      }

      .app[data-view="role-management"] .e1-drawer-head {
        align-items: center;
        background: #FFFFFF;
        border-bottom: 1px solid #E2E8F0;
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin: 0 -24px;
        padding: 16px 24px;
        position: sticky;
        top: 0;
        z-index: 3;
      }

      .app[data-view="role-management"] .e1-drawer-head h3 {
        font-size: 15px;
        margin: 0;
      }

      .app[data-view="role-management"] .e1-drawer-x {
        background: none;
        border: 0;
        color: #64748B;
        cursor: pointer;
        font-size: 18px;
        line-height: 1;
        margin-left: auto;
        padding: 4px;
      }

      .app[data-view="role-management"] .e1-drawer-foot {
        align-items: center;
        background: #FBFCFD;
        border-top: 1px solid #E2E8F0;
        bottom: 0;
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin: auto -24px 0;
        padding: 12px 24px;
        position: sticky;
        z-index: 3;
      }

      .app[data-view="role-management"] .e1-drawer-foot .e1-note {
        color: #64748B;
        flex: 1 1 240px; /* 长句可收缩，按钮与文案保持同行（不足 240px 才 wrap） */
        font-size: 11.5px;
        margin-right: auto;
        min-width: 0;
      }

      .app[data-view="role-management"] .e1-drawer-foot .detail-status {
        color: #64748B;
        font-size: 11.5px;
        margin: 0;
      }

      /* 抽屉内表单：语义定宽 + 分节 */
      .app[data-view="role-management"] #user-management .detail-form,
      .app[data-view="role-management"] #sales-management .detail-form {
        display: flex;
        flex-direction: column;
        gap: 12px;
      }

      /* 账号/实例抽屉：分节行（V3 frow 横排；D1 坑防护：不设 align-items:stretch/end 于字段行） */
      .app[data-view="role-management"] #user-management .e1-frow,
      .app[data-view="role-management"] #sales-management .detail-form .e1-frow {
        align-items: flex-end;
        display: flex;
        flex-wrap: wrap;
        gap: 12px 22px;
      }

      .app[data-view="role-management"] #user-management .detail-field,
      .app[data-view="role-management"] #sales-management .detail-form .detail-field {
        display: flex;
        flex-direction: column;
        gap: 5px;
      }

      .app[data-view="role-management"] #user-management .detail-field label,
      .app[data-view="role-management"] #sales-management .detail-field label,
      .app[data-view="role-management"] #official-whatsapp-management .detail-field label {
        color: #334155;
        font-size: 12.5px;
        font-weight: 600;
      }

      .app[data-view="role-management"] #user-management .detail-field input,
      .app[data-view="role-management"] #user-management .detail-field select,
      .app[data-view="role-management"] #sales-management .detail-field input,
      .app[data-view="role-management"] #sales-management .detail-field select {
        background: #FFFFFF;
        border: 1px solid #E2E8F0;
        border-radius: 8px;
        font-size: 12.5px;
        min-height: 32px;
        padding: 5px 10px;
      }

      .app[data-view="role-management"] #user-username,
      .app[data-view="role-management"] #user-display-name { width: 240px; }
      .app[data-view="role-management"] #user-role-id { width: 200px; }
      .app[data-view="role-management"] #user-sales-group-id { width: 240px; }
      .app[data-view="role-management"] #user-status { width: 140px; }
      .app[data-view="role-management"] #user-password { width: 260px; }

      .app[data-view="role-management"] #user-management .e1-scope-options {
        display: grid;
        gap: 8px 14px;
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        margin: 8px 0 14px;
      }

      .app[data-view="role-management"] #user-management .e1-scope-option {
        align-items: center;
        border: 1px solid #E2E8F0;
        border-radius: 8px;
        color: #334155;
        display: flex;
        font-size: 12.5px;
        font-weight: 500;
        gap: 8px;
        min-height: 34px;
        padding: 6px 10px;
      }

      .app[data-view="role-management"] #user-management .e1-scope-option input[type="checkbox"] {
        accent-color: #00453D;
        height: 15px;
        margin: 0;
        min-height: 0;
        padding: 0;
        width: 15px;
      }

      .app[data-view="role-management"] .e1-danger-row {
        align-items: center;
        background: #FFF7F7;
        border: 1px solid #F3D4D4;
        border-radius: 10px;
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        padding: 10px 14px;
      }

      .app[data-view="role-management"] .e1-danger-row .e1-note {
        color: #64748B;
        flex: 1;
        font-size: 11.5px;
        line-height: 1.55;
        min-width: 200px;
      }

      /* 折叠区（新增分组 / 绑定新实例） */
      .app[data-view="role-management"] details.e1-disc {
        border: 1px dashed #E2E8F0;
        border-radius: 10px;
      }

      .app[data-view="role-management"] details.e1-disc > summary {
        align-items: center;
        color: #334155;
        cursor: pointer;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        font-size: 12.5px;
        font-weight: 600;
        list-style: none;
        padding: 10px 14px;
        user-select: none;
      }

      .app[data-view="role-management"] details.e1-disc > summary::-webkit-details-marker { display: none; }
      .app[data-view="role-management"] details.e1-disc > summary::before {
        color: #64748B;
        content: "▸";
        font-size: 11px;
      }

      .app[data-view="role-management"] details.e1-disc[open] > summary::before { content: "▾"; }

      .app[data-view="role-management"] details.e1-disc > summary .e1-sub {
        color: #64748B;
        font-size: 11.5px;
        font-weight: 400;
      }

      .app[data-view="role-management"] .e1-disc-body {
        padding: 2px 14px 14px;
      }

      /* 绑定实例卡（两行全字段） */
      .app[data-view="role-management"] .e1-inst-card {
        border: 1px solid #E2E8F0;
        border-radius: 10px;
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding: 11px 14px;
      }

      .app[data-view="role-management"] .e1-inst-card .e1-r1 {
        align-items: center;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
      }

      .app[data-view="role-management"] .e1-inst-card .e1-r1 .e1-name {
        font-family: Consolas, "JetBrains Mono", monospace;
        font-size: 12.5px;
        font-weight: 600;
      }

      .app[data-view="role-management"] .e1-inst-card .e1-r1 .e1-sp { margin-left: auto; }

      .app[data-view="role-management"] .e1-inst-card .e1-r2 {
        align-items: center;
        color: #334155;
        display: flex;
        flex-wrap: wrap;
        font-size: 12px;
        gap: 6px 16px;
      }

      .app[data-view="role-management"] .e1-inst-card .e1-r2 em {
        color: #64748B;
        font-style: normal;
      }

      .app[data-view="role-management"] .e1-inst-card .e1-r2 b {
        font-variant-numeric: tabular-nums;
        font-weight: 600;
      }

      .app[data-view="role-management"] .e1-inst-card .inline-form {
        align-items: center;
        display: inline-flex;
        gap: 6px;
      }

      .app[data-view="role-management"] .e1-inst-card .inline-form input[name="remark"] {
        border: 1px solid #E2E8F0;
        border-radius: 6px;
        font-size: 11.5px;
        height: 26px;
        padding: 0 8px;
        width: 110px;
      }

      /* dl 详情（实例抽屉） */
      .app[data-view="role-management"] #sales-management .detail-list {
        display: grid;
        gap: 10px 22px;
        grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
        margin: 0;
      }

      .app[data-view="role-management"] #sales-management .detail-list > div {
        display: flex;
        flex-direction: column;
        gap: 2px;
      }

      .app[data-view="role-management"] #sales-management .detail-list dt {
        color: #64748B;
        font-size: 11.5px;
      }

      .app[data-view="role-management"] #sales-management .detail-list dd {
        color: #0F172A;
        font-size: 12.5px;
        font-weight: 600;
        margin: 0;
      }

      .app[data-view="role-management"] #sales-management .detail-list dd .muted-line {
        color: #64748B;
        display: block;
        font-size: 11px;
        font-weight: 400;
      }

      #sales-profile-form .e1-frow {
        align-items: end;
        display: flex;
        flex-wrap: wrap;
        gap: 12px 22px;
      }

      #sales-profile-form input { width: 240px; }
      #sales-profile-form select { width: 200px; }

      /* ── 已删除实例区（details 收起 + 桌面表格/移动卡片） ── */
      /* staging验收P1：基础规则 .deleted-instance-section{min-width:980px}(≈css:3379) 渗透——
         390px 下容器撑到 980 被外层裁切(全局无横滚=假绿)。容器压回自适应；
         桌面 7 列表格宽度由内层 .management-table(min-width:980)+wrap 横滚兜底，不靠容器撑宽。 */
      .app[data-view="role-management"] .deleted-instance-section {
        min-width: 0;
        background: #FFFFFF;
        border: 1px solid #E2E8F0;
        border-radius: 10px;
        box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
        margin-top: 12px;
        padding: 0;
      }

      .app[data-view="role-management"] details.e1-deleted-disc > summary {
        align-items: center;
        color: #334155;
        cursor: pointer;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        font-size: 13px;
        font-weight: 600;
        list-style: none;
        padding: 13px 20px;
        user-select: none;
      }

      .app[data-view="role-management"] details.e1-deleted-disc > summary::-webkit-details-marker { display: none; }
      .app[data-view="role-management"] details.e1-deleted-disc > summary::before {
        color: #64748B;
        content: "▸";
        font-size: 11px;
      }

      .app[data-view="role-management"] details.e1-deleted-disc[open] > summary::before { content: "▾"; }

      .app[data-view="role-management"] details.e1-deleted-disc > summary .e1-sub {
        color: #64748B;
        font-size: 12px;
        font-weight: 400;
      }

      .app[data-view="role-management"] .deleted-instance-restore-result {
        align-items: center;
        background: #F0FDF4;
        border: 1px solid #BBF7D0;
        border-radius: 10px;
        display: flex;
        flex-wrap: wrap;
        gap: 14px;
        margin: 8px 16px 12px;
        padding: 10px 14px;
      }

      .app[data-view="role-management"] .deleted-instance-restore-result h4 {
        font-size: 13px;
        margin: 0;
      }

      .app[data-view="role-management"] .deleted-instance-restore-result p {
        color: #15803D;
        font-size: 12px;
        margin: 2px 0 0;
      }

      .app[data-view="role-management"] .deleted-instance-restore-result .sales-wa-qr img,
      .app[data-view="role-management"] .deleted-instance-restore-result .sales-wa-qr pre {
        max-height: 120px;
        max-width: 120px;
      }

      /* ── D. 官方API：单列聚焦 + 顶部配置卡 ── */
      .app[data-view="role-management"] .official-whatsapp-panel .management-subhead {
        align-items: center;
        border: 0;
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        padding: 0 0 12px;
      }

      .app[data-view="role-management"] .official-whatsapp-panel .management-subhead h3 {
        font-size: 14px;
        margin: 0;
      }

      .app[data-view="role-management"] .official-whatsapp-panel .management-subhead p {
        color: #64748B;
        font-size: 12px;
        margin: 0;
      }

      .app[data-view="role-management"] .official-whatsapp-panel .management-body {
        display: flex;
        flex-direction: column;
        gap: 14px;
        max-width: 1020px;
      }

      /* 已保存配置：网格卡 */
      .app[data-view="role-management"] .official-whatsapp-list-panel {
        background: transparent;
        border: 0;
        display: flex;
        flex-direction: column;
        gap: 10px;
        order: -1; /* 列表条置顶（V3：先选配置再编辑） */
        padding: 0;
      }

      .app[data-view="role-management"] .official-whatsapp-list-head {
        align-items: center;
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
      }

      .app[data-view="role-management"] .official-whatsapp-list-head h4 {
        font-size: 13px;
        margin: 0;
      }

      .app[data-view="role-management"] .official-whatsapp-list-head p {
        color: #64748B;
        font-size: 11.5px;
        margin: 0;
      }

      .app[data-view="role-management"] .official-whatsapp-list-head .detail-button {
        margin-left: auto;
      }

      .app[data-view="role-management"] .official-whatsapp-account-list {
        display: grid;
        gap: 10px;
        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
      }

      .app[data-view="role-management"] .official-whatsapp-account-card {
        background: #FFFFFF;
        border: 1px solid #E2E8F0;
        border-radius: 10px;
        display: flex;
        flex-direction: column;
        padding: 0;
        position: relative;
      }

      .app[data-view="role-management"] .official-whatsapp-account-card.active {
        border-color: #00453D;
        box-shadow: 0 0 0 1px #00453D inset;
      }

      .app[data-view="role-management"] .official-whatsapp-account-pick {
        background: none;
        border: 0;
        cursor: pointer;
        display: flex;
        flex-direction: column;
        gap: 5px;
        padding: 12px 14px 10px;
        text-align: left;
      }

      .app[data-view="role-management"] .official-whatsapp-card-top {
        align-items: center;
        display: flex;
        flex-wrap: wrap;
        gap: 7px;
      }

      .app[data-view="role-management"] .official-whatsapp-card-top strong {
        font-size: 13px;
      }

      .app[data-view="role-management"] .official-whatsapp-card-top > span {
        background: #D3E4FE;
        border-radius: 999px;
        color: #1D4ED8;
        font-size: 11px;
        padding: 1px 8px;
      }

      .app[data-view="role-management"] .official-whatsapp-card-line {
        color: #334155;
        font-size: 11.5px;
      }

      .app[data-view="role-management"] .official-whatsapp-card-meta {
        color: #64748B;
        font-size: 11px;
      }

      .app[data-view="role-management"] .official-whatsapp-delete-button {
        bottom: 10px;
        position: absolute;
        right: 12px;
      }

      /* 官方表单：分节 + 语义定宽 */
      .app[data-view="role-management"] .official-whatsapp-panel .management-detail {
        background: #FFFFFF;
        border: 1px solid #E2E8F0;
        border-radius: 10px;
        box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
        padding: 6px 24px 0;
      }

      .app[data-view="role-management"] #official-whatsapp-form {
        display: flex;
        flex-direction: column;
        gap: 0;
      }

      .app[data-view="role-management"] #official-whatsapp-form .e1-frow {
        display: flex;
        flex-wrap: wrap;
        gap: 12px 22px;
      }

      .app[data-view="role-management"] #official-whatsapp-form .detail-field {
        display: flex;
        flex-direction: column;
        gap: 5px;
      }

      .app[data-view="role-management"] #official-whatsapp-form input,
      .app[data-view="role-management"] #official-whatsapp-form select,
      .app[data-view="role-management"] #official-whatsapp-form textarea {
        background: #FFFFFF;
        border: 1px solid #E2E8F0;
        border-radius: 8px;
        font-size: 12.5px;
        min-height: 32px;
        padding: 5px 10px;
      }

      .app[data-view="role-management"] #official-whatsapp-form small {
        color: #64748B;
        font-size: 11.5px;
        line-height: 1.55;
      }

      .app[data-view="role-management"] #official-whatsapp-provider { width: 240px; }
      .app[data-view="role-management"] #official-whatsapp-display-name { width: 240px; }
      .app[data-view="role-management"] #official-whatsapp-business-phone { width: 240px; }
      .app[data-view="role-management"] #official-whatsapp-phone-number-id,
      .app[data-view="role-management"] #official-whatsapp-waba-id,
      .app[data-view="role-management"] #official-whatsapp-channel-id,
      .app[data-view="role-management"] #official-whatsapp-cust-space-id,
      .app[data-view="role-management"] #official-whatsapp-access-key-id,
      .app[data-view="role-management"] #official-whatsapp-access-key-secret,
      .app[data-view="role-management"] #official-whatsapp-encryption-key-ref { width: 420px; }
      .app[data-view="role-management"] #official-whatsapp-api-base-url { width: 520px; }
      .app[data-view="role-management"] #official-whatsapp-sales-account { width: 300px; }
      .app[data-view="role-management"] #official-whatsapp-conversation-aliases { max-width: 480px; width: 100%; }

      .app[data-view="role-management"] .official-whatsapp-credential-box {
        background: transparent;
        border: 0;
        display: flex;
        flex-direction: column;
        gap: 12px;
        padding: 0;
      }

      .app[data-view="role-management"] .e1-cred-sect .e1-sect-h .e1-lock {
        background: #FEF3C7;
        border-radius: 999px;
        color: #92400E;
        font-size: 10.5px;
        padding: 1px 8px;
      }

      .app[data-view="role-management"] #official-whatsapp-form .detail-status {
        color: #64748B;
        font-size: 11.5px;
        line-height: 1.5;
        margin: 0;
      }

      .app[data-view="role-management"] #official-whatsapp-form > .detail-actions {
        align-items: center;
        background: #FBFCFD;
        border-top: 1px solid #E2E8F0;
        display: flex;
        gap: 10px;
        justify-content: flex-end;
        margin: 8px -24px 0;
        padding: 12px 20px;
        position: sticky;
        bottom: 0;
      }

      /* webhook / 送信监控面板：白面板化 */
      .app[data-view="role-management"] .official-whatsapp-webhook-panel,
      .app[data-view="role-management"] #official-send-observability-panel {
        background: #FFFFFF;
        border: 1px solid #E2E8F0;
        border-radius: 10px;
        box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
        padding: 12px 16px;
      }

      .app[data-view="role-management"] #official-send-observability-panel[hidden] {
        display: none;
      }

      /* ── 移动端 ≤900px ── */
      @media (max-width: 900px) {
        .app[data-view="role-management"] .customer-management-head {
          padding: 12px 12px 0;
        }

        .app[data-view="role-management"] .role-management-tabs {
          gap: 18px;
          margin: 6px 12px 0;
        }

        .app[data-view="role-management"] .role-management-panels {
          padding: 12px 10px 20px;
        }

        /* 角色：左栏变横向滚动行 */
        .app[data-view="role-management"] .role-management-body {
          grid-template-columns: 1fr;
        }

        .app[data-view="role-management"] .role-list-panel {
          border-bottom: 1px solid #E2E8F0;
          border-right: 0;
          flex-direction: row;
          overflow-x: auto;
          padding: 4px 6px;
        }

        .app[data-view="role-management"] .role-note { display: none; }

        .app[data-view="role-management"] .role-list {
          flex-direction: row;
          overflow: visible;
        }

        .app[data-view="role-management"] .role-list-button {
          border-bottom: 2px solid transparent;
          border-left: 0;
          flex: none;
          padding: 9px 10px;
        }

        .app[data-view="role-management"] .role-list-button.active {
          background: none;
          border-bottom-color: #00453D;
        }

        .app[data-view="role-management"] .role-list-button .role-description,
        .app[data-view="role-management"] .role-list-button .row-meta { display: none; }

        .app[data-view="role-management"] .role-detail { padding: 16px 14px 0; }

        .app[data-view="role-management"] .permission-groups { columns: 1; }

        .app[data-view="role-management"] #role-id,
        .app[data-view="role-management"] #role-display-name,
        .app[data-view="role-management"] #role-data-scope,
        .app[data-view="role-management"] #role-description { max-width: none; width: 100%; }

        .app[data-view="role-management"] .e1-actionbar { margin: 8px -14px 0; }

        /* 抽屉全屏 */
        .app[data-view="role-management"] #user-management.e1-drawer-open .management-detail,
        .app[data-view="role-management"] #sales-management.e1-drawer-open .management-detail {
          border-left: 0;
          max-width: 100%;
          width: 100%;
        }

        .app[data-view="role-management"] #user-username,
        .app[data-view="role-management"] #user-display-name,
        .app[data-view="role-management"] #user-role-id,
        .app[data-view="role-management"] #user-sales-group-id,
        .app[data-view="role-management"] #user-status,
        .app[data-view="role-management"] #user-password,
        #sales-profile-form input,
        #sales-profile-form select { width: 100%; }

        /* 表格卡片化（data-label 驱动） */
        .app[data-view="role-management"] table.e1-cardable { min-width: 0; }
        .app[data-view="role-management"] table.e1-cardable thead { display: none; }
        .app[data-view="role-management"] table.e1-cardable,
        .app[data-view="role-management"] table.e1-cardable tbody { display: block; }
        .app[data-view="role-management"] table.e1-cardable tbody tr {
          border: 1px solid #E2E8F0;
          border-radius: 10px;
          display: flex;
          flex-direction: column;
          gap: 2px;
          margin: 0 0 10px;
          padding: 10px 12px;
        }
        .app[data-view="role-management"] table.e1-cardable tbody tr td {
          border: 0;
          display: flex;
          flex-wrap: wrap;
          gap: 6px;
          padding: 3px 0;
        }
        .app[data-view="role-management"] table.e1-cardable tbody tr td[data-label]::before {
          color: #64748B;
          content: attr(data-label);
          flex: none;
          font-size: 11.5px;
          min-width: 74px;
        }
        .app[data-view="role-management"] table.e1-cardable tbody tr td.customer-empty { display: block; }

        /* 官方：语义宽全放开 + sticky 保存 */
        .app[data-view="role-management"] #official-whatsapp-provider,
        .app[data-view="role-management"] #official-whatsapp-display-name,
        .app[data-view="role-management"] #official-whatsapp-business-phone,
        .app[data-view="role-management"] #official-whatsapp-phone-number-id,
        .app[data-view="role-management"] #official-whatsapp-waba-id,
        .app[data-view="role-management"] #official-whatsapp-channel-id,
        .app[data-view="role-management"] #official-whatsapp-cust-space-id,
        .app[data-view="role-management"] #official-whatsapp-access-key-id,
        .app[data-view="role-management"] #official-whatsapp-access-key-secret,
        .app[data-view="role-management"] #official-whatsapp-encryption-key-ref,
        .app[data-view="role-management"] #official-whatsapp-api-base-url,
        .app[data-view="role-management"] #official-whatsapp-sales-account,
        .app[data-view="role-management"] #official-whatsapp-conversation-aliases { max-width: none; width: 100%; }

        .app[data-view="role-management"] #official-whatsapp-form > .detail-actions {
          margin: 8px -12px 0;
        }

        .app[data-view="role-management"] .official-whatsapp-panel .management-detail { padding: 6px 12px 0; }

        .app[data-view="role-management"] .official-whatsapp-account-list { grid-template-columns: 1fr; }
      }
      /* 抽屉内嵌表（可查看销售账号等）：压回基础 min-width:980px，按抽屉宽自适应 */
      .app[data-view="role-management"] #user-management .management-detail .management-table {
        min-width: 0;
      }

      /* 敏感凭据箱：SK 与 Key Ref 双列（V3 双列近似；AK 独行在上，DOM 原样零搬迁） */
      .app[data-view="role-management"] .official-whatsapp-credential-box {
        display: flex;
        flex-wrap: wrap;
        gap: 12px 22px;
      }

      /* 已删除实例表：操作列右对齐（V3） */
      .app[data-view="role-management"] .deleted-instance-table th:last-child,
      .app[data-view="role-management"] .deleted-instance-table td:last-child {
        text-align: right;
      }

      /* 血闸：本视图内 [hidden] 永远生效——E1 新增 display:flex/grid 不得击穿现役显隐逻辑（D1 坑④全类防护） */
      .app[data-view="role-management"] [hidden] {
        display: none !important;
      }

      /* ═══════════════ Layout-E1 END ═══════════════ */