/* ===================== */
        /* CSM SHARED STYLES    */
        /* ===================== */
        .csm-filters {
            display: flex;
            gap: 8px;
            align-items: center;
            flex-wrap: wrap;
            margin-bottom: 16px;
        }
        .csm-filter-pill {
            padding: 6px 14px;
            border: 1px solid var(--border-color);
            border-radius: 20px;
            background: var(--bg-white);
            color: var(--text-secondary);
            font-size: 12px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.15s;
        }
        .csm-filter-pill:hover { border-color: var(--accent-blue); color: var(--accent-blue); }
        .csm-filter-pill.active { background: var(--accent-blue); color: #fff; border-color: var(--accent-blue); }

        .csm-search {
            flex: 1;
            min-width: 180px;
            padding: 8px 12px;
            border: 1px solid var(--border-color);
            border-radius: 8px;
            font-size: 13px;
            background: var(--bg-white);
            color: var(--text-primary);
        }

        .csm-badge {
            display: inline-block;
            padding: 2px 8px;
            border-radius: 12px;
            font-size: 11px;
            font-weight: 600;
            line-height: 1.4;
        }
        .csm-badge-prospect { background: #e0e7ff; color: #3730a3; }
        .csm-badge-onboarding { background: #fef3c7; color: #92400e; }
        .csm-badge-active { background: #d1fae5; color: #065f46; }
        .csm-badge-at_risk { background: #fee2e2; color: #991b1b; }
        .csm-badge-churned { background: #f1f5f9; color: #64748b; }

        [data-theme="dark"] .csm-badge-prospect { background: #312e81; color: #a5b4fc; }
        [data-theme="dark"] .csm-badge-onboarding { background: #451a03; color: #fcd34d; }
        [data-theme="dark"] .csm-badge-active { background: #064e3b; color: #6ee7b7; }
        [data-theme="dark"] .csm-badge-at_risk { background: #450a0a; color: #fca5a5; }
        [data-theme="dark"] .csm-badge-churned { background: #334155; color: #94a3b8; }

        .csm-health-dot {
            display: inline-block;
            width: 10px;
            height: 10px;
            border-radius: 50%;
        }
        .csm-health-good { background: var(--accent-green); }
        .csm-health-warning { background: var(--accent-yellow); }
        .csm-health-bad { background: var(--accent-red); }
        .csm-health-none { background: var(--border-color); }

        /* ===================== */
        /* CUSTOMER LIST         */
        /* ===================== */
        .cust-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 13px;
        }
        .cust-table th {
            text-align: left;
            padding: 10px 12px;
            font-size: 11px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            color: var(--text-muted);
            border-bottom: 2px solid var(--border-color);
        }
        .cust-table td {
            padding: 10px 12px;
            border-bottom: 1px solid var(--border-color);
            color: var(--text-primary);
        }
        .cust-table tr:hover td { background: var(--bg-active); }
        .cust-table .cust-name {
            font-weight: 600;
            color: var(--accent-blue);
            cursor: pointer;
        }
        .cust-table .cust-name:hover { text-decoration: underline; }

        /* ===================== */
        /* CUSTOMER PROFILE      */
        /* ===================== */
        .cust-profile-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 20px;
            margin-bottom: 24px;
        }
        .cust-profile-title {
            font-size: 22px;
            font-weight: 700;
            color: var(--text-primary);
        }
        .cust-profile-meta {
            display: flex;
            gap: 16px;
            flex-wrap: wrap;
            margin-top: 8px;
            font-size: 13px;
            color: var(--text-secondary);
        }
        .cust-profile-meta span { display: flex; align-items: center; gap: 4px; }

        .cust-stats-row {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
            gap: 12px;
            margin-bottom: 24px;
        }
        .cust-stat-card {
            background: var(--bg-white);
            border: 1px solid var(--border-color);
            border-radius: 10px;
            padding: 14px;
            text-align: center;
        }
        .cust-stat-value {
            font-size: 22px;
            font-weight: 700;
            color: var(--text-primary);
        }
        .cust-stat-label {
            font-size: 11px;
            font-weight: 600;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 0.3px;
            margin-top: 4px;
        }

        /* Tabs */
        .cust-tabs {
            display: flex;
            gap: 0;
            border-bottom: 2px solid var(--border-color);
            margin-bottom: 20px;
            overflow-x: auto;
        }
        .cust-tab {
            padding: 10px 18px;
            font-size: 13px;
            font-weight: 600;
            color: var(--text-secondary);
            cursor: pointer;
            border-bottom: 2px solid transparent;
            margin-bottom: -2px;
            white-space: nowrap;
            transition: all 0.15s;
        }
        .cust-tab:hover { color: var(--text-primary); }
        .cust-tab.active {
            color: var(--accent-blue);
            border-bottom-color: var(--accent-blue);
        }
        .cust-tab-content { display: none; }
        .cust-tab-content.active { display: block; }

        /* Timeline */
        .cust-timeline {
            position: relative;
            padding-left: 24px;
        }
        .cust-timeline::before {
            content: '';
            position: absolute;
            left: 6px;
            top: 0;
            bottom: 0;
            width: 2px;
            background: var(--border-color);
        }
        .cust-timeline-item {
            position: relative;
            padding: 10px 0;
            padding-left: 12px;
        }
        .cust-timeline-item::before {
            content: '';
            position: absolute;
            left: -21px;
            top: 16px;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: var(--accent-blue);
            border: 2px solid var(--bg-white);
        }
        .cust-timeline-item[data-type="ticket"]::before { background: var(--accent-orange); }
        .cust-timeline-item[data-type="knowledge"]::before { background: var(--accent-purple); }
        .cust-timeline-date {
            font-size: 11px;
            color: var(--text-muted);
            margin-bottom: 2px;
        }
        .cust-timeline-title {
            font-size: 13px;
            font-weight: 600;
            color: var(--text-primary);
        }
        .cust-timeline-meta {
            font-size: 12px;
            color: var(--text-secondary);
        }

        /* Commitments */
        .cust-commitment-row {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 10px 12px;
            border-bottom: 1px solid var(--border-color);
            font-size: 13px;
        }
        .cust-commitment-row.overdue {
            background: #fef2f2;
        }
        [data-theme="dark"] .cust-commitment-row.overdue { background: #450a0a33; }
        .cust-commitment-date {
            font-weight: 600;
            min-width: 90px;
        }
        .cust-commitment-date.overdue { color: var(--accent-red); }

        /* Module Grid */
        .cust-module-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 12px;
        }
        .cust-module-card {
            background: var(--bg-white);
            border: 1px solid var(--border-color);
            border-radius: 10px;
            padding: 14px;
        }
        .cust-module-name {
            font-size: 13px;
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 6px;
        }
        .cust-module-status {
            font-size: 11px;
            font-weight: 600;
        }
        .cust-module-status.active { color: var(--accent-green); }
        .cust-module-status.onboarding { color: var(--accent-orange); }
        .cust-module-status.not_started { color: var(--text-muted); }
        .cust-module-status.inactive { color: var(--accent-red); }

        /* Contact Cards */
        .cust-contact-card {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px;
            background: var(--bg-white);
            border: 1px solid var(--border-color);
            border-radius: 10px;
            margin-bottom: 8px;
        }
        .cust-contact-avatar {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: var(--accent-blue);
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            font-weight: 700;
            flex-shrink: 0;
        }
        .cust-contact-name {
            font-size: 14px;
            font-weight: 600;
            color: var(--text-primary);
        }
        .cust-contact-detail {
            font-size: 12px;
            color: var(--text-secondary);
        }
        .cust-contact-primary {
            font-size: 10px;
            font-weight: 700;
            color: var(--accent-blue);
            text-transform: uppercase;
        }

        /* ===================== */
        /* INTERACTIONS          */
        /* ===================== */
        .int-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 13px;
        }
        .int-table th {
            text-align: left;
            padding: 10px 12px;
            font-size: 11px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            color: var(--text-muted);
            border-bottom: 2px solid var(--border-color);
        }
        .int-table td {
            padding: 10px 12px;
            border-bottom: 1px solid var(--border-color);
            color: var(--text-primary);
        }
        .int-table tr:hover td { background: var(--bg-active); }

        .int-type-badge {
            display: inline-block;
            padding: 2px 8px;
            border-radius: 4px;
            font-size: 11px;
            font-weight: 600;
        }
        .int-type-call { background: #dbeafe; color: #1e40af; }
        .int-type-support { background: #fef3c7; color: #92400e; }

        [data-theme="dark"] .int-type-call { background: #1e3a5f; color: #93c5fd; }
        [data-theme="dark"] .int-type-support { background: #451a03; color: #fcd34d; }

        /* New Interaction Dropdown Menu */
        .int-new-menu {
            display: none;
            position: absolute;
            right: 0;
            top: 100%;
            margin-top: 6px;
            background: var(--bg-white);
            border: 1px solid var(--border-color);
            border-radius: 12px;
            box-shadow: 0 8px 24px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.08);
            min-width: 240px;
            z-index: 200;
            padding: 6px;
            animation: intMenuFadeIn 0.15s ease-out;
        }
        .int-new-menu.int-menu-open { display: block; }
        @keyframes intMenuFadeIn {
            from { opacity: 0; transform: translateY(-4px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .int-new-menu-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 10px 12px;
            border-radius: 8px;
            cursor: pointer;
            transition: background 0.15s ease;
        }
        .int-new-menu-item:hover { background: var(--bg-active); }
        .int-new-menu-icon {
            width: 36px;
            height: 36px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }
        .int-new-menu-icon-call { background: #dbeafe; color: #2563eb; }
        .int-new-menu-icon-support { background: #f3e8ff; color: #7c3aed; }
        .int-new-menu-name {
            font-size: 13px;
            font-weight: 600;
            color: var(--text-primary);
            line-height: 1.2;
        }
        .int-new-menu-desc {
            font-size: 11px;
            color: var(--text-muted);
            margin-top: 1px;
        }
        [data-theme="dark"] .int-new-menu {
            box-shadow: 0 8px 24px rgba(0,0,0,0.4), 0 2px 8px rgba(0,0,0,0.3);
        }
        [data-theme="dark"] .int-new-menu-icon-call { background: #1e3a5f; color: #60a5fa; }
        [data-theme="dark"] .int-new-menu-icon-support { background: #2e1065; color: #a78bfa; }

        /* Interaction Detail — Top Bar */
        .int-top-bar {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 16px;
        }
        .int-back-btn {
            background: none;
            border: 1px solid var(--border-color);
            border-radius: 8px;
            cursor: pointer;
            font-size: 16px;
            color: var(--text-secondary);
            padding: 6px 10px;
            transition: background 0.15s, border-color 0.15s;
        }
        .int-back-btn:hover { background: var(--bg-active); border-color: var(--accent-blue); color: var(--accent-blue); }
        .int-title-input {
            flex: 1;
            font-size: 18px;
            font-weight: 700;
            border: none;
            border-bottom: 2px solid transparent;
            padding: 8px 4px;
            background: transparent;
            color: var(--text-primary);
            transition: border-color 0.15s;
        }
        .int-title-input:focus { outline: none; border-bottom-color: var(--accent-blue); }
        .int-title-input::placeholder { color: var(--text-muted); font-weight: 400; }
        .int-status-badge {
            font-size: 10px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            padding: 4px 12px;
            border-radius: 6px;
            background: var(--bg-page);
        }

        /* Interaction Detail — Single Column (no sidebar) */
        .int-detail-layout {
            display: block;
        }

        /* Context Header (Company + Contacts) */
        .int-context-header {
            background: var(--bg-white);
            border: 1px solid var(--border-color);
            border-radius: 12px;
            padding: 16px 20px;
            margin-bottom: 20px;
            display: flex;
            flex-direction: column;
            gap: 12px;
        }
        .int-context-row {
            display: flex;
            align-items: center;
            gap: 16px;
        }
        .int-context-company {
            display: flex;
            align-items: center;
            gap: 10px;
            flex: 1;
            min-width: 0;
        }
        .int-context-meta {
            display: flex;
            gap: 12px;
            flex-shrink: 0;
        }
        .int-context-meta-field {
            display: flex;
            align-items: center;
            gap: 6px;
        }
        .int-context-meta-label {
            font-size: 10px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            color: var(--text-muted);
            white-space: nowrap;
        }
        .int-context-meta-select {
            padding: 5px 24px 5px 8px;
            border: 1px solid var(--border-color);
            border-radius: 8px;
            font-size: 12px;
            font-weight: 500;
            background: var(--bg-page) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%2394a3b8'/%3E%3C/svg%3E") no-repeat right 8px center;
            color: var(--text-primary);
            cursor: pointer;
            appearance: none;
            -webkit-appearance: none;
        }
        .int-context-meta-select:focus { outline: none; border-color: var(--accent-blue); }
        [data-theme="dark"] .int-context-meta-select { background-color: #0f172a; color: #e2e8f0; }
        .int-context-company .cn-chip {
            font-size: 15px;
            font-weight: 700;
            padding: 4px 12px;
            border-radius: 8px;
            background: var(--accent-blue);
            color: #fff;
        }
        .int-context-company .cn-chip .remove {
            color: rgba(255,255,255,0.7);
            margin-left: 6px;
            cursor: pointer;
        }
        .int-context-company .cn-chip .remove:hover { color: #fff; }
        .int-context-input {
            padding: 8px 12px;
            border: 1px solid var(--border-color);
            border-radius: 8px;
            font-size: 13px;
            background: var(--bg-page);
            color: var(--text-primary);
            width: 100%;
            transition: border-color 0.15s, box-shadow 0.15s;
        }
        .int-context-input:focus { outline: none; border-color: var(--accent-blue); box-shadow: 0 0 0 3px rgba(59,89,152,0.1); }
        .int-context-input::placeholder { color: var(--text-muted); }
        .int-context-input-sm { font-size: 12px; padding: 5px 10px; }
        .int-context-contacts {
            display: flex;
            align-items: center;
            gap: 8px;
            flex-wrap: wrap;
        }
        .int-contact-chips-row {
            display: flex;
            gap: 6px;
            flex-wrap: wrap;
        }
        .int-contact-chips-row .cn-chip {
            font-size: 12px;
            padding: 3px 10px;
            border-radius: 6px;
            background: #f1f5f9;
            color: var(--text-primary);
            font-weight: 500;
        }

        /* Transcript Button */
        .int-transcript-btn {
            display: flex;
            align-items: center;
            gap: 5px;
            padding: 5px 12px;
            border: 1px solid var(--border-color);
            border-radius: 8px;
            font-size: 12px;
            font-weight: 600;
            background: var(--bg-page);
            color: var(--text-secondary);
            cursor: pointer;
            transition: border-color 0.15s, color 0.15s, background 0.15s;
            white-space: nowrap;
            position: relative;
        }
        .int-transcript-btn:hover { border-color: var(--accent-blue); color: var(--accent-blue); background: var(--bg-white); }
        .int-transcript-indicator {
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: var(--accent-green);
            position: absolute;
            top: -2px;
            right: -2px;
        }
        [data-theme="dark"] .int-transcript-btn { background: #0f172a; }

        /* Transcript Modal */
        .int-modal-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.5);
            z-index: 1000;
            display: flex;
            align-items: center;
            justify-content: center;
            backdrop-filter: blur(2px);
        }
        .int-modal {
            background: var(--bg-white);
            border: 1px solid var(--border-color);
            border-radius: 14px;
            box-shadow: 0 20px 60px rgba(0,0,0,0.3);
            width: 90%;
            max-width: 700px;
            max-height: 85vh;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }
        .int-modal-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 16px 20px;
            border-bottom: 1px solid var(--border-color);
        }
        .int-modal-title {
            font-size: 15px;
            font-weight: 700;
            color: var(--text-primary);
        }
        .int-modal-close {
            background: none;
            border: none;
            font-size: 20px;
            color: var(--text-muted);
            cursor: pointer;
            padding: 4px 8px;
            border-radius: 6px;
            transition: background 0.15s;
        }
        .int-modal-close:hover { background: var(--bg-active); color: var(--text-primary); }
        .int-modal-body {
            padding: 20px;
            overflow-y: auto;
            flex: 1;
        }
        .int-modal-footer {
            padding: 12px 20px;
            border-top: 1px solid var(--border-color);
            display: flex;
            justify-content: flex-end;
            gap: 8px;
        }
        [data-theme="dark"] .int-modal { background: var(--bg-white); }
        [data-theme="dark"] .int-modal-overlay { background: rgba(0,0,0,0.7); }

        /* Legacy — keep for backward compat */
        .int-transcript-section { margin-bottom: 20px; }
        .int-transcript-toggle {
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 13px;
            font-weight: 600;
            color: var(--text-secondary);
            margin-bottom: 8px;
            padding: 6px 0;
        }
        .int-transcript-toggle:hover { color: var(--text-primary); }
        .int-transcript-arrow {
            transition: transform 0.2s;
            display: inline-block;
            font-size: 10px;
        }
        .int-transcript-textarea {
            width: 100%;
            min-height: 120px;
            padding: 12px;
            border: 1px solid var(--border-color);
            border-radius: 10px;
            font-size: 13px;
            background: var(--bg-page);
            color: var(--text-primary);
            resize: vertical;
            font-family: inherit;
            line-height: 1.6;
            transition: border-color 0.15s;
        }
        .int-transcript-textarea:focus { outline: none; border-color: var(--accent-blue); }

        /* Sidebar (slim) */
        .int-sidebar-select {
            width: 100%;
            padding: 6px 10px;
            border: 1px solid var(--border-color);
            border-radius: 8px;
            font-size: 13px;
            background: var(--bg-white);
            color: var(--text-primary);
            cursor: pointer;
        }

        /* Dark mode — interactions */
        [data-theme="dark"] .int-context-header { background: var(--bg-white); border-color: var(--border-color); }
        [data-theme="dark"] .int-context-input { background: #0f172a; }
        [data-theme="dark"] .int-transcript-textarea { background: #0f172a; }
        [data-theme="dark"] .int-contact-chips-row .cn-chip { background: #334155; color: #e2e8f0; }
        [data-theme="dark"] .int-back-btn { border-color: var(--border-color); color: var(--text-secondary); }
        [data-theme="dark"] .int-back-btn:hover { background: var(--bg-active); }

        /* Quill notes editor — framing & sizing */
        #intEditorSection {
            border: 1px solid var(--border-color);
            border-radius: 10px;
            margin-bottom: 12px;
            background: var(--bg-white);
        }
        #intEditorSection .ql-toolbar {
            border: none;
            border-bottom: 1px solid var(--border-color);
            border-radius: 10px 10px 0 0;
            background: var(--bg-page);
            padding: 6px 10px;
        }
        #intEditorSection .ql-container {
            border: none;
            font-size: 13px;
            font-family: inherit;
            height: auto;
        }
        #intEditorSection .ql-editor {
            min-height: 100px;
            max-height: 100px;
            overflow-y: auto;
            padding: 10px 14px;
            line-height: 1.5;
            color: var(--text-primary);
            transition: max-height 0.2s ease;
        }
        #intEditorSection .ql-editor table {
            display: block;
            overflow-x: auto;
            width: 100%;
            border-collapse: collapse;
            font-size: 12px;
            margin: 8px 0;
        }
        #intEditorSection .ql-editor table td,
        #intEditorSection .ql-editor table th {
            border: 1px solid var(--border-color);
            padding: 4px 8px;
            white-space: nowrap;
        }
        #intEditorSection.int-editor-expanded .ql-editor {
            max-height: 400px;
        }
        #intEditorSection .ql-editor.ql-blank::before {
            color: var(--text-muted);
            font-style: normal;
        }
        [data-theme="dark"] #intEditorSection { background: var(--bg-white); border-color: var(--border-color); }
        [data-theme="dark"] #intEditorSection .ql-toolbar { background: #0f172a; border-color: var(--border-color); }
        [data-theme="dark"] #intEditorSection .ql-toolbar .ql-stroke { stroke: var(--text-muted); }
        [data-theme="dark"] #intEditorSection .ql-toolbar .ql-fill { fill: var(--text-muted); }
        [data-theme="dark"] #intEditorSection .ql-toolbar .ql-picker-label { color: var(--text-muted); }

        /* Interaction Tabs */
        .int-tabs {
            display: flex;
            gap: 0;
            border-bottom: 2px solid var(--border-color);
            margin-bottom: 16px;
        }
        .int-tab {
            padding: 10px 20px;
            font-size: 13px;
            font-weight: 600;
            color: var(--text-muted);
            background: none;
            border: none;
            cursor: pointer;
            border-bottom: 2px solid transparent;
            margin-bottom: -2px;
            transition: color 0.15s, border-color 0.15s;
        }
        .int-tab:hover { color: var(--text-primary); }
        .int-tab.active {
            color: var(--accent-blue);
            border-bottom-color: var(--accent-blue);
        }
        .int-tab-content { }

        /* Interaction detail + ticket panel wrapper */
        #intDetailWrapper {
            display: flex;
            gap: 0;
            height: calc(100vh - 120px);
            overflow: hidden;
        }
        .int-detail-main {
            flex: 1;
            min-width: 0;
            overflow-y: auto;
            padding-right: 0;
        }
        .int-ticket-panel {
            flex: 0 0 480px;
            max-width: 520px;
            border-left: 1px solid var(--border-color);
            background: var(--bg-white);
            overflow-y: auto;
            display: flex;
            flex-direction: column;
        }
        .int-tp-header {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            padding: 14px 20px;
            border-bottom: 1px solid var(--border-color);
            background: var(--bg-page);
            position: sticky;
            top: 0;
            z-index: 1;
            gap: 10px;
        }
        .int-tp-title {
            font-size: 14px;
            font-weight: 700;
            color: var(--text-primary);
            line-height: 1.4;
            flex: 1;
            /* Allow wrapping so title is fully visible */
            white-space: normal;
            word-break: break-word;
        }
        .int-tp-close {
            background: none;
            border: 1px solid var(--border-color);
            font-size: 16px;
            color: var(--text-muted);
            cursor: pointer;
            padding: 4px 8px;
            border-radius: 6px;
            flex-shrink: 0;
        }
        .int-tp-close:hover { background: var(--bg-active); color: var(--text-primary); border-color: var(--accent-blue); }
        .int-tp-body {
            padding: 20px;
            flex: 1;
        }
        .int-tp-section {
            margin-bottom: 20px;
            padding-bottom: 20px;
            border-bottom: 1px solid var(--border-color);
        }
        .int-tp-section:last-child { border-bottom: none; margin-bottom: 0; }
        .int-tp-section-title {
            font-size: 11px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            color: var(--accent-blue);
            margin-bottom: 10px;
        }
        .int-tp-field {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 8px;
        }
        .int-tp-field:last-child { margin-bottom: 0; }
        .int-tp-label {
            font-size: 11px;
            font-weight: 600;
            color: var(--text-muted);
            width: 65px;
            flex-shrink: 0;
        }
        /* Ticket panel — text formatting */
        .int-tp-text {
            font-size: 13px;
            color: var(--text-primary);
            line-height: 1.7;
            margin: 0;
        }
        .int-tp-bullets {
            margin: 0;
            padding-left: 20px;
            font-size: 13px;
            color: var(--text-primary);
            line-height: 1.8;
        }
        .int-tp-bullets li {
            margin-bottom: 6px;
            padding-left: 4px;
        }
        .int-tp-meta-grid {
            display: flex;
            flex-wrap: wrap;
            gap: 8px 20px;
        }

        /* Ticket panel — email thread */
        .int-tp-email {
            border: 1px solid var(--border-color);
            border-radius: 8px;
            margin-bottom: 10px;
            overflow: hidden;
        }
        .int-tp-email:last-child { margin-bottom: 0; }
        .int-tp-email-header {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 8px 12px;
            font-size: 11px;
            border-bottom: 1px solid var(--border-color);
        }
        .int-tp-email-inbound .int-tp-email-header { background: #fef3c7; }
        .int-tp-email-outbound .int-tp-email-header { background: #e0f2fe; }
        .int-tp-email-dir {
            font-size: 9px;
            font-weight: 700;
            padding: 1px 5px;
            border-radius: 3px;
            letter-spacing: 0.5px;
        }
        .int-tp-email-inbound .int-tp-email-dir { background: #f59e0b; color: #fff; }
        .int-tp-email-outbound .int-tp-email-dir { background: #3b82f6; color: #fff; }
        .int-tp-email-from {
            font-weight: 600;
            color: var(--text-primary);
            flex: 1;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .int-tp-email-date {
            color: var(--text-muted);
            white-space: nowrap;
        }
        .int-tp-email-body {
            padding: 12px 14px;
            font-size: 13px;
            line-height: 1.7;
            color: var(--text-primary);
            max-height: 300px;
            overflow-y: auto;
            word-break: break-word;
            background: var(--bg-white);
        }

        /* Dark mode */
        [data-theme="dark"] .int-ticket-panel { background: var(--bg-white); }
        [data-theme="dark"] .int-tp-header { background: #0f172a; }
        [data-theme="dark"] .int-tp-email-inbound .int-tp-email-header { background: #451a03; }
        [data-theme="dark"] .int-tp-email-outbound .int-tp-email-header { background: #0c2d48; }

        /* Action Items Grid */
        .int-grid-section { margin-bottom: 20px; }
        .int-grid-header-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 10px;
        }
        .int-grid-table {
            border: 1px solid var(--border-color);
            border-radius: 10px;
            overflow: visible;
            background: var(--bg-white);
            box-shadow: var(--shadow);
        }
        .int-grid-col-headers { border-radius: 10px 10px 0 0; overflow: hidden; }
        .int-grid-col-headers {
            display: grid;
            grid-template-columns: 1fr 120px 100px 140px 80px 100px 90px 48px 80px 32px;
            gap: 0;
            background: var(--bg-page);
            border-bottom: 2px solid var(--border-color);
        }
        .int-grid-ch {
            padding: 10px 10px;
            font-size: 10px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.6px;
            color: var(--text-muted);
            border-right: 1px solid var(--border-color);
        }
        .int-grid-ch:last-child { border-right: none; }
        .int-grid-ch-product, .int-grid-ch-actions { text-align: center; }
        .int-grid-row {
            display: grid;
            grid-template-columns: 1fr 120px 100px 140px 80px 100px 90px 48px 80px 32px;
            gap: 0;
            border-bottom: 1px solid var(--border-color);
            transition: background 0.1s;
        }
        .int-grid-row:last-child { border-bottom: none; }
        .int-grid-row:hover { background: var(--bg-active); }
        .int-grid-row:hover .int-grid-delete-btn { opacity: 1; }
        .int-grid-row-empty { opacity: 0.5; }
        .int-grid-row-empty:hover { opacity: 1; background: var(--bg-active); }
        .int-grid-row-elevated { /* kept for compat */ }
        .int-grid-cell-main {
            padding: 8px 10px;
            display: flex;
            flex-direction: column;
            gap: 4px;
            border-right: 1px solid var(--border-color);
        }
        .int-grid-row1 {
            display: flex;
            align-items: center;
            gap: 6px;
        }
        .int-grid-type-select {
            padding: 2px 20px 2px 6px;
            border: 1px solid transparent;
            border-radius: 6px;
            font-size: 11px;
            font-weight: 600;
            background: var(--bg-page) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%2394a3b8'/%3E%3C/svg%3E") no-repeat right 6px center;
            color: var(--text-secondary);
            cursor: pointer;
            appearance: none;
            -webkit-appearance: none;
            flex-shrink: 0;
        }
        .int-grid-type-select:focus { border-color: var(--accent-blue); outline: none; }
        .int-grid-title-input {
            flex: 1;
            border: none;
            padding: 3px 4px;
            font-size: 13px;
            font-weight: 600;
            background: transparent;
            color: var(--text-primary);
            min-width: 0;
        }
        .int-grid-title-input:focus { outline: none; }
        .int-grid-title-input::placeholder { color: var(--text-muted); font-weight: 400; }
        .int-grid-row2 { padding-left: 2px; }
        .int-grid-detail-textarea {
            width: 100%;
            height: 44px;
            padding: 4px 6px;
            border: 1px solid transparent;
            border-radius: 4px;
            font-size: 12px;
            background: transparent;
            color: var(--text-secondary);
            resize: none;
            font-family: inherit;
            line-height: 1.5;
            overflow-y: auto;
        }
        .int-grid-detail-textarea:focus { border-color: var(--border-color); background: var(--bg-page); outline: none; }
        .int-grid-detail-textarea::placeholder { color: var(--text-muted); }
        .int-grid-cell {
            padding: 10px 8px;
            display: flex;
            align-items: flex-start;
            justify-content: center;
            border-right: 1px solid var(--border-color);
            padding-top: 14px;
        }
        .int-grid-cell:last-child { border-right: none; }
        .int-grid-cell-product { justify-content: center; }
        .int-grid-cell-product input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; }
        .int-grid-mini-select {
            padding: 3px 18px 3px 6px;
            border: 1px solid transparent;
            border-radius: 4px;
            font-size: 11px;
            background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%2394a3b8'/%3E%3C/svg%3E") no-repeat right 4px center;
            color: var(--text-primary);
            cursor: pointer;
            appearance: none;
            -webkit-appearance: none;
            width: 100%;
        }
        .int-grid-mini-select:focus { border-color: var(--accent-blue); outline: none; }
        .int-grid-date-input {
            padding: 3px 4px;
            border: 1px solid transparent;
            border-radius: 4px;
            font-size: 11px;
            background: transparent;
            color: var(--text-primary);
            width: 100%;
        }
        .int-grid-date-input:focus { border-color: var(--accent-blue); outline: none; }
        .int-grid-contact-chip {
            font-size: 11px;
            color: var(--accent-blue);
            cursor: pointer;
            padding: 2px 6px;
            border-radius: 4px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 80px;
        }
        .int-grid-contact-chip:hover { background: var(--bg-active); }

        /* Contact dropdown on action items — fixed position, no shadow */
        .int-contact-dropdown {
            position: fixed;
            z-index: 1000;
            background: var(--bg-white);
            border: 1px solid var(--border-color);
            border-radius: 8px;
            min-width: 220px;
            max-height: 280px;
            overflow-y: auto;
        }
        .int-cdd-search { padding: 8px; border-bottom: 1px solid var(--border-color); }
        .int-cdd-input {
            width: 100%;
            padding: 5px 8px;
            border: 1px solid var(--border-color);
            border-radius: 6px;
            font-size: 12px;
            background: var(--bg-page);
            color: var(--text-primary);
        }
        .int-cdd-input:focus { outline: none; border-color: var(--accent-blue); }
        .int-cdd-group-label {
            padding: 6px 10px 2px;
            font-size: 9px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            color: var(--text-muted);
        }
        .int-cdd-item {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 6px 10px;
            font-size: 12px;
            color: var(--text-primary);
            cursor: pointer;
        }
        .int-cdd-item:hover { background: var(--bg-active); }
        .int-cdd-item input[type="checkbox"] { width: 14px; height: 14px; cursor: pointer; flex-shrink: 0; }
        [data-theme="dark"] .int-contact-dropdown { background: var(--bg-white); }
        [data-theme="dark"] .int-cdd-input { background: #0f172a; }
        .int-grid-delete-btn {
            background: none;
            border: none;
            cursor: pointer;
            color: var(--text-muted);
            padding: 4px;
            border-radius: 4px;
            opacity: 0.4;
            transition: opacity 0.15s, color 0.15s;
        }
        .int-grid-delete-btn:hover { color: var(--accent-red); background: #fee2e2; }

        .int-grid-commit-btn {
            background: none;
            border: none;
            cursor: pointer;
            color: var(--accent-green, #22c55e);
            padding: 4px;
            border-radius: 4px;
            opacity: 0;
            transition: opacity 0.15s, color 0.15s, background 0.15s;
        }
        .int-grid-row:hover .int-grid-commit-btn { opacity: 1; }
        .int-grid-commit-btn:hover { color: #16a34a; background: #dcfce7; }
        [data-theme="dark"] .int-grid-commit-btn:hover { background: #052e16; }

        /* Dark mode — grid */
        [data-theme="dark"] .int-grid-table { background: var(--bg-white); border-color: var(--border-color); }
        [data-theme="dark"] .int-grid-col-headers { background: #0f172a; border-bottom-color: var(--border-color); }
        [data-theme="dark"] .int-grid-ch { border-right-color: var(--border-color); }
        [data-theme="dark"] .int-grid-row { border-bottom-color: var(--border-color); }
        [data-theme="dark"] .int-grid-row:hover { background: var(--bg-active); }
        [data-theme="dark"] .int-grid-cell { border-right-color: var(--border-color); }
        [data-theme="dark"] .int-grid-cell-main { border-right-color: var(--border-color); }
        [data-theme="dark"] .int-grid-type-select { background-color: #1e293b; color: #e2e8f0; }
        [data-theme="dark"] .int-grid-detail-textarea:focus { background: #0f172a; border-color: var(--border-color); }
        [data-theme="dark"] .int-grid-delete-btn:hover { background: #450a0a; }

        /* ── Quick Action Grid ── */
        .qa-container {
            margin-bottom: 16px;
            border: 2px solid var(--accent-blue);
            border-radius: 10px;
            overflow: visible;
            background: var(--bg-white);
            box-shadow: var(--shadow);
        }
        .qa-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 14px;
            background: #eff6ff;
            border-bottom: 1px solid var(--border-color);
            border-radius: 8px 8px 0 0;
        }
        [data-theme="dark"] .qa-header { background: #1e293b; }
        .qa-grid-col-headers {
            display: grid;
            grid-template-columns: 160px 110px 1fr 120px 100px 80px 100px 48px 40px;
            gap: 0;
            background: var(--bg-page);
            border-bottom: 2px solid var(--border-color);
        }
        .qa-grid-th {
            padding: 6px 8px;
            font-size: 10px;
            font-weight: 700;
            color: var(--text-muted);
            text-transform: uppercase;
            border-right: 1px solid var(--border-color);
        }
        .qa-grid-th:last-child { border-right: none; }
        .qa-grid-row {
            display: grid;
            grid-template-columns: 160px 110px 1fr 120px 100px 80px 100px 48px 40px;
            gap: 0;
            border-bottom: 1px solid var(--border-color);
            transition: background 0.1s;
        }
        .qa-grid-row:last-child { border-bottom: none; }
        .qa-grid-row:hover { background: var(--bg-active); }
        .qa-grid-row-empty { opacity: 0.5; }
        .qa-grid-row-empty:hover { opacity: 1; }
        .qa-grid-cell {
            padding: 6px 8px;
            border-right: 1px solid var(--border-color);
            display: flex;
            align-items: flex-start;
        }
        .qa-grid-cell:last-child { border-right: none; }
        .qa-grid-cell-customer {
            padding: 6px 8px;
            border-right: 1px solid var(--border-color);
            position: relative;
        }
        .qa-grid-cell-contact {
            padding: 6px 8px;
            border-right: 1px solid var(--border-color);
            position: relative;
        }
        .qa-search-dropdown {
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            background: var(--bg-white);
            border: 1px solid var(--border-color);
            border-radius: 6px;
            box-shadow: var(--shadow-md);
            z-index: 200;
            max-height: 200px;
            overflow-y: auto;
        }
        .qa-search-item {
            padding: 6px 10px;
            cursor: pointer;
            border-bottom: 1px solid var(--border-color);
        }
        .qa-search-item:last-child { border-bottom: none; }
        .qa-search-item:hover { background: var(--bg-active); }
        [data-theme="dark"] .qa-container { background: var(--bg-white); border-color: var(--accent-blue); }
        .qa-grid-row:hover .int-grid-commit-btn { opacity: 1; }
        .qa-grid-row:hover .int-grid-delete-btn { opacity: 1; }
        [data-theme="dark"] .qa-grid-row:hover { background: var(--bg-active); }
        [data-theme="dark"] .qa-search-dropdown { background: var(--bg-white); }

        /* Legacy — keep for backward compat */
        .int-item-card {
            background: var(--bg-white);
            border: 1px solid var(--border-color);
            border-radius: 10px;
            padding: 14px;
            margin-bottom: 10px;
        }
        .int-item-header {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 8px;
        }
        .int-item-type-icon {
            width: 24px;
            height: 24px;
            border-radius: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            flex-shrink: 0;
        }
        .int-item-type-bug { background: #fee2e2; color: #dc2626; }
        .int-item-type-feature_request { background: #dbeafe; color: #2563eb; }
        .int-item-type-custom_report { background: #f3e8ff; color: #7c3aed; }
        .int-item-type-support_task { background: #d1fae5; color: #059669; }
        .int-item-type-training_request { background: #fef3c7; color: #d97706; }
        .int-item-type-other { background: #f1f5f9; color: #64748b; }

        [data-theme="dark"] .int-item-type-bug { background: #450a0a; color: #fca5a5; }
        [data-theme="dark"] .int-item-type-feature_request { background: #1e3a5f; color: #93c5fd; }
        [data-theme="dark"] .int-item-type-custom_report { background: #2e1065; color: #c4b5fd; }
        [data-theme="dark"] .int-item-type-support_task { background: #064e3b; color: #6ee7b7; }
        [data-theme="dark"] .int-item-type-training_request { background: #451a03; color: #fcd34d; }
        [data-theme="dark"] .int-item-type-other { background: #334155; color: #94a3b8; }

        .int-item-subject {
            font-size: 14px;
            font-weight: 600;
            color: var(--text-primary);
            flex: 1;
        }
        .int-item-chips {
            display: flex;
            gap: 6px;
            flex-wrap: wrap;
        }
        .int-item-chip {
            padding: 2px 8px;
            border-radius: 4px;
            font-size: 11px;
            font-weight: 600;
            background: var(--bg-page);
            color: var(--text-secondary);
        }
        .int-item-chip.priority-urgent { background: #fee2e2; color: #dc2626; }
        .int-item-chip.priority-high { background: #fef3c7; color: #d97706; }
        .int-item-chip.committed { background: #dbeafe; color: #1e40af; }
        .int-item-chip.overdue { background: #fee2e2; color: #dc2626; }

        [data-theme="dark"] .int-item-chip.priority-urgent { background: #450a0a; color: #fca5a5; }
        [data-theme="dark"] .int-item-chip.priority-high { background: #451a03; color: #fcd34d; }
        [data-theme="dark"] .int-item-chip.committed { background: #1e3a5f; color: #93c5fd; }
        [data-theme="dark"] .int-item-chip.overdue { background: #450a0a; color: #fca5a5; }

        /* Commitment Banner */
        .int-commitment-banner {
            background: #fef3c7;
            border: 1px solid #fbbf24;
            border-radius: 8px;
            padding: 10px 14px;
            margin-bottom: 16px;
            font-size: 13px;
            color: #92400e;
            cursor: pointer;
        }
        [data-theme="dark"] .int-commitment-banner {
            background: #451a03;
            border-color: #92400e;
            color: #fcd34d;
        }

        /* Right Panel (slim — type + owner only) */
        .int-detail-sidebar {
            border-left: 1px solid var(--border-color);
            padding-left: 20px;
            padding-top: 4px;
        }
        .int-sidebar-section {
            margin-bottom: 20px;
        }
        .int-sidebar-title {
            font-size: 10px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.6px;
            color: var(--text-muted);
            margin-bottom: 6px;
        }

        /* ===================== */
        /* PROJECTS              */
        /* ===================== */
        .proj-card {
            background: var(--bg-white);
            border: 1px solid var(--border-color);
            border-radius: 10px;
            padding: 16px;
            margin-bottom: 12px;
        }
        .proj-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 12px;
        }
        .proj-title {
            font-size: 15px;
            font-weight: 700;
            color: var(--text-primary);
        }
        .proj-progress-bar {
            width: 100%;
            height: 6px;
            background: var(--border-color);
            border-radius: 3px;
            overflow: hidden;
            margin-bottom: 12px;
        }
        .proj-progress-fill {
            height: 100%;
            background: var(--accent-blue);
            border-radius: 3px;
            transition: width 0.3s;
        }

        /* Task Checklist */
        .proj-task-list {
            list-style: none;
            padding: 0;
        }
        .proj-task-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 8px 0;
            border-bottom: 1px solid var(--border-color);
            font-size: 13px;
        }
        .proj-task-item:last-child { border-bottom: none; }
        .proj-task-check {
            width: 18px;
            height: 18px;
            border: 2px solid var(--border-color);
            border-radius: 4px;
            cursor: pointer;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .proj-task-check.completed {
            background: var(--accent-green);
            border-color: var(--accent-green);
            color: #fff;
        }
        .proj-task-check.completed::after { content: '\2713'; font-size: 12px; }
        .proj-task-title { flex: 1; color: var(--text-primary); }
        .proj-task-item.completed .proj-task-title {
            text-decoration: line-through;
            color: var(--text-muted);
        }
        .proj-task-type {
            font-size: 10px;
            font-weight: 600;
            padding: 2px 6px;
            border-radius: 4px;
            background: var(--bg-page);
            color: var(--text-secondary);
        }
        .proj-task-due {
            font-size: 11px;
            color: var(--text-muted);
        }
        .proj-task-due.overdue { color: var(--accent-red); font-weight: 600; }

        /* Template List */
        .tpl-card {
            background: var(--bg-white);
            border: 1px solid var(--border-color);
            border-radius: 10px;
            padding: 14px;
            margin-bottom: 8px;
            display: flex;
            align-items: center;
            gap: 12px;
        }
        .tpl-icon {
            width: 36px;
            height: 36px;
            border-radius: 8px;
            background: var(--bg-page);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            flex-shrink: 0;
        }
        .tpl-name {
            font-size: 14px;
            font-weight: 600;
            color: var(--text-primary);
        }
        .tpl-module {
            font-size: 12px;
            color: var(--text-secondary);
        }

        /* Module Lifecycle Cards */
        .module-lifecycle-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 12px;
        }
        .module-lifecycle-card {
            background: #1e1e2e;
            border: 1px solid #2d2d3d;
            border-radius: 8px;
            padding: 14px;
            transition: border-color 0.2s;
        }
        .module-lifecycle-card:hover {
            border-color: #4a4a6a;
        }
        .module-detail-panel {
            margin-top: 12px;
            padding-top: 12px;
            border-top: 1px solid #2d2d3d;
        }
        .milestone-row {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 6px 0;
            border-bottom: 1px solid #1a1a2a;
            font-size: 13px;
        }
        .milestone-row:last-child { border-bottom: none; }
        .capture-chip-active {
            background: var(--accent-blue) !important;
            color: #fff !important;
            border-color: var(--accent-blue) !important;
        }
        .milestone-checkbox {
            width: 16px;
            height: 16px;
            cursor: pointer;
        }
        .milestone-type-badge {
            font-size: 10px;
            padding: 1px 6px;
            border-radius: 3px;
            text-transform: uppercase;
            font-weight: 600;
        }
        .stage-accordion {
            margin-bottom: 8px;
        }
        .stage-accordion-header {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 6px 8px;
            background: #16162a;
            border-radius: 4px;
            cursor: pointer;
            font-size: 12px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        .stage-accordion-body {
            padding: 4px 8px;
        }
        /* Action Items Tab */
        .action-items-grid {
            width: 100%;
            border-collapse: collapse;
        }
        .action-items-grid th {
            text-align: left;
            font-size: 11px;
            text-transform: uppercase;
            color: #8b8ba0;
            padding: 8px 10px;
            border-bottom: 1px solid #2d2d3d;
        }
        .action-items-grid td {
            padding: 8px 10px;
            border-bottom: 1px solid #1a1a2a;
            font-size: 13px;
        }
        .action-items-grid tr:hover td {
            background: #1a1a2e;
        }
        .source-badge {
            font-size: 10px;
            padding: 2px 6px;
            border-radius: 3px;
            font-weight: 600;
        }
        .source-interaction { background: #3b82f620; color: #60a5fa; }
        .source-ticket { background: #f9731620; color: #fb923c; }
        .source-milestone { background: #8b5cf620; color: #a78bfa; }
        /* Module select modal */
        .module-select-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 8px;
            margin: 16px 0;
        }
        .module-select-item {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 8px 12px;
            background: #16162a;
            border: 1px solid #2d2d3d;
            border-radius: 6px;
            cursor: pointer;
        }
        .module-select-item:hover {
            border-color: #4a4a6a;
        }
        .module-select-item input[type="checkbox"] {
            width: 16px;
            height: 16px;
        }