/* ═══════════════════════════════════════════════════════════════
   ALPHAVAULT CRM INTERACTIONS — crm-interactions.css v2.0
   ULTRA PRO / MINIMALIST — 100% aligné checkout.css
   ═══════════════════════════════════════════════════════════════ */

   @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

   *, *::before, *::after { box-sizing: border-box; }
   
   /* ════════════════════════════════════════════════════════════
      DESIGN TOKENS — identiques à checkout.css (--int-*)
   ════════════════════════════════════════════════════════════ */
   :root,
   body.int-theme-light {
       --int-ink:         #0a0a0a;
       --int-ink-soft:    #404040;
       --int-text:        #0a0a0a;
       --int-text-muted:  #737373;
       --int-text-faint:  #a3a3a3;
       --int-border:      #e5e5e5;
       --int-border-soft: #f5f5f5;
       --int-bg:          #fafafa;
       --int-surface:     #ffffff;
       --int-input-bg:    #ffffff;
   
       --int-success:     #16a34a;
       --int-success-bg:  #f0fdf4;
       --int-danger:      #dc2626;
       --int-danger-bg:   #fef2f2;
       --int-warning:     #d97706;
       --int-warning-bg:  #fffbeb;
       --int-purple:      #6d28d9;
       --int-purple-bg:   #f5f3ff;
   
       --int-primary:      #0a0a0a;
       --int-primary-soft: #f5f5f5;
       --int-primary-hover:#262626;
   
       --int-radius-sm: 4px;
       --int-radius-md: 6px;
       --int-radius-lg: 10px;
       --int-radius-xl: 12px;
       --int-radius-full: 999px;
   
       --int-shadow-sm: 0 1px 3px rgba(0,0,0,0.04);
       --int-shadow-md: 0 1px 3px rgba(0,0,0,0.04);
       --int-shadow-lg: 0 4px 12px rgba(0,0,0,0.06);
       --int-shadow-xl: 0 12px 32px rgba(0,0,0,0.10);
       --int-shadow-dropdown: 0 8px 24px rgba(0,0,0,0.08);
       --int-shadow-modal: 0 12px 32px rgba(0,0,0,0.12);
   
       --int-transition: 0.15s ease;
   
       /* compat rétro vers les anciennes variables --crm-* utilisées dans crm-dashboard.js */
       --crm-primary: var(--int-ink);
       --crm-primary-dark: var(--int-ink-soft);
       --crm-surface: var(--int-surface);
       --crm-border: var(--int-border);
       --crm-border-hover: var(--int-ink-soft);
       --crm-text: var(--int-text);
       --crm-text-muted: var(--int-text-muted);
       --crm-text-faint: var(--int-text-faint);
       --crm-input-bg: var(--int-input-bg);
       --crm-red: var(--int-danger);
       --crm-green: var(--int-success);
       --crm-amber: var(--int-warning);
       --crm-orange: var(--int-warning);
       --crm-purple: var(--int-purple);
       --crm-radius: var(--int-radius-sm);
       --crm-radius-lg: var(--int-radius-lg);
       --crm-shadow: var(--int-shadow-md);
       --crm-shadow-lg: var(--int-shadow-lg);
       --crm-shadow-xl: var(--int-shadow-xl);
       --crm-transition: var(--int-transition);
   }
   
   body.int-theme-dark {
       --int-ink:         #fafafa;
       --int-ink-soft:    #d4d4d4;
       --int-text:        #fafafa;
       --int-text-muted:  #a3a3a3;
       --int-text-faint:  #737373;
       --int-border:      #262626;
       --int-border-soft: #171717;
       --int-bg:          #0a0a0a;
       --int-surface:     #141414;
       --int-input-bg:    #141414;
   
       --int-success-bg:  rgba(22,163,74,0.12);
       --int-danger-bg:   rgba(220,38,38,0.12);
       --int-warning-bg:  rgba(217,119,6,0.12);
       --int-purple-bg:   rgba(109,40,217,0.12);
   
       --int-primary:      #fafafa;
       --int-primary-soft: #171717;
       --int-primary-hover:#d4d4d4;
   
       --int-shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
       --int-shadow-md: 0 1px 3px rgba(0,0,0,0.4);
       --int-shadow-lg: 0 4px 12px rgba(0,0,0,0.5);
       --int-shadow-xl: 0 12px 32px rgba(0,0,0,0.6);
       --int-shadow-dropdown: 0 8px 24px rgba(0,0,0,0.5);
       --int-shadow-modal: 0 12px 32px rgba(0,0,0,0.6);
   
       --crm-primary: var(--int-ink);
       --crm-primary-dark: var(--int-ink-soft);
       --crm-surface: var(--int-surface);
       --crm-border: var(--int-border);
       --crm-border-hover: var(--int-ink-soft);
       --crm-text: var(--int-text);
       --crm-text-muted: var(--int-text-muted);
       --crm-text-faint: var(--int-text-faint);
       --crm-input-bg: var(--int-input-bg);
   }
   
   /* Compat : anciennes classes body.crm-dark-mode → alias automatique */
   body.crm-dark-mode { }
   
   /* ════════════════════════════════════════════════════════════
      1. HERO ICON
   ════════════════════════════════════════════════════════════ */
   .int-hero-icon {
       display: inline-flex; align-items: center; justify-content: center;
       width: 34px; height: 34px; border-radius: var(--int-radius-sm);
       background: var(--int-ink); color: var(--int-bg);
       font-size: 14px; margin-right: 10px; vertical-align: middle; flex-shrink: 0;
   }
   
   /* ════════════════════════════════════════════════════════════
      2. KPI BAR
   ════════════════════════════════════════════════════════════ */
   .int-kpi-bar { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin-bottom: 16px; }
   
   .int-kpi-card {
       background: var(--int-surface); border: 1px solid var(--int-border);
       border-radius: var(--int-radius-lg); padding: 18px;
       display: flex; flex-direction: column; gap: 4px;
       transition: var(--int-transition); position: relative; overflow: hidden;
       box-shadow: var(--int-shadow-sm);
   }
   .int-kpi-card:hover { border-color: var(--int-ink-soft); box-shadow: var(--int-shadow-md); }
   .int-kpi-card-danger { border-color: rgba(220,38,38,0.3); }
   
   .int-kpi-skeleton { min-height: 112px; animation: crmSkeletonPulse 1.5s ease-in-out infinite; pointer-events: none; }
   
   .int-kpi-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
   
   .int-kpi-icon {
       width: 38px; height: 38px; border-radius: var(--int-radius-sm);
       display: flex; align-items: center; justify-content: center; font-size: 14px;
       background: var(--int-border-soft); color: var(--int-ink); flex-shrink: 0;
   }
   
   .int-kpi-badge {
       font-size: 9px; font-weight: 800; padding: 2px 7px; border-radius: var(--int-radius-full);
       background: var(--int-border-soft); color: var(--int-text-muted); border: 1px solid var(--int-border);
       white-space: nowrap; flex-shrink: 0;
   }
   .int-kpi-badge-danger { background: var(--int-danger-bg); color: var(--int-danger); border-color: transparent; }
   
   .int-kpi-value { font-size: 22px; font-weight: 800; color: var(--int-text); line-height: 1.2; word-break: break-word; }
   .int-kpi-label { font-size: 11px; font-weight: 700; color: var(--int-text-muted); }
   .int-kpi-sub   { font-size: 10px; color: var(--int-text-faint); }
   
   /* ════════════════════════════════════════════════════════════
      3. TOOLBAR
   ════════════════════════════════════════════════════════════ */
   .int-toolbar {
       background: var(--int-surface); border: 1px solid var(--int-border);
       border-radius: var(--int-radius-lg); padding: 12px 16px; margin-bottom: 16px;
       display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
       box-shadow: var(--int-shadow-sm);
   }
   
   .int-view-switcher {
       display: flex; align-items: center; gap: 3px; background: var(--int-border-soft);
       border: 1px solid var(--int-border); border-radius: var(--int-radius-sm); padding: 3px; flex-shrink: 0;
   }
   .int-view-btn {
       display: flex; align-items: center; gap: 5px; padding: 6px 12px; background: transparent;
       border: none; border-radius: var(--int-radius-sm); font-family: inherit; font-size: 11px; font-weight: 700;
       color: var(--int-text-muted); cursor: pointer; transition: var(--int-transition); white-space: nowrap; position: relative;
   }
   .int-view-btn:hover { color: var(--int-text); }
   .int-view-btn.active { background: var(--int-ink); color: var(--int-bg); box-shadow: none; }
   .int-view-btn i { font-size: 11px; }
   
   .int-view-badge {
       display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px;
       padding: 0 5px; background: var(--int-danger); color: #fff; border-radius: var(--int-radius-full);
       font-size: 9px; font-weight: 800; line-height: 1;
   }
   
   .int-toolbar-sep { width: 1px; height: 28px; background: var(--int-border); flex-shrink: 0; }
   
   .int-filters { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; flex-wrap: wrap; }
   .int-filter-group { display: flex; flex-direction: column; gap: 3px; position: relative; flex-shrink: 0; }
   .int-filter-label { font-size: 8px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--int-text-faint); white-space: nowrap; }
   
   .int-type-pills { display: flex; align-items: center; gap: 3px; flex-wrap: wrap; }
   .int-type-pill {
       display: inline-flex; align-items: center; gap: 4px; padding: 4px 9px;
       border-radius: var(--int-radius-full); border: 1px solid var(--int-border); background: var(--int-input-bg);
       font-family: inherit; font-size: 10px; font-weight: 700; color: var(--int-text-muted);
       cursor: pointer; transition: var(--int-transition); white-space: nowrap;
   }
   .int-type-pill:hover { color: var(--int-text); border-color: var(--int-ink-soft); }
   .int-type-pill.active { background: var(--int-ink); color: var(--int-bg); border-color: var(--int-ink); }
   .int-type-pill i { font-size: 9px; }
   
   .int-filter-select, .int-filter-input {
       background: var(--int-input-bg); border: 1px solid var(--int-border); border-radius: var(--int-radius-sm);
       padding: 5px 8px; font-family: inherit; font-size: 11px; font-weight: 600; color: var(--int-text);
       outline: none; transition: var(--int-transition); min-width: 100px;
   }
   .int-filter-input { min-width: 130px; }
   .int-filter-input::placeholder { color: var(--int-text-faint); }
   .int-filter-select:focus, .int-filter-input:focus { border-color: var(--int-ink); }
   
   .int-contact-filter-dropdown {
       position: absolute; top: calc(100% + 4px); left: 0; min-width: 210px;
       background: var(--int-surface); border: 1px solid var(--int-border); border-radius: var(--int-radius-lg);
       box-shadow: var(--int-shadow-dropdown); z-index: 2000; overflow: hidden; animation: crmFadeIn 0.15s ease;
   }
   .int-contact-filter-item { display: flex; align-items: center; gap: 8px; padding: 8px 12px; cursor: pointer; transition: var(--int-transition); border-bottom: 1px solid var(--int-border-soft); }
   .int-contact-filter-item:last-child { border-bottom: none; }
   .int-contact-filter-item:hover { background: var(--int-border-soft); }
   
   .int-filter-avatar { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 800; color: #fff; flex-shrink: 0; }
   
   .int-clear-filters-btn {
       display: flex; align-items: center; gap: 4px; padding: 5px 10px;
       background: var(--int-danger-bg); border: 1px solid rgba(220,38,38,0.2); border-radius: var(--int-radius-sm);
       font-family: inherit; font-size: 10px; font-weight: 700; color: var(--int-danger);
       cursor: pointer; transition: var(--int-transition); white-space: nowrap; flex-shrink: 0;
   }
   .int-clear-filters-btn:hover { background: rgba(220,38,38,0.15); }
   
   .int-toolbar-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; margin-left: auto; }
   
   .int-action-btn {
       display: inline-flex; align-items: center; gap: 6px; padding: 9px 15px;
       border-radius: var(--int-radius-sm); font-family: inherit; font-size: 12px; font-weight: 600;
       cursor: pointer; transition: var(--int-transition); border: 1px solid transparent; white-space: nowrap;
   }
   .int-action-btn-primary { background: var(--int-ink); color: var(--int-bg); }
   .int-action-btn-primary:hover { opacity: 0.85; }
   .int-action-btn-ai { background: var(--int-border-soft); color: var(--int-ink-soft); border-color: var(--int-border); }
   .int-action-btn-ai:hover { border-color: var(--int-ink); color: var(--int-text); }
   
   /* ════════════════════════════════════════════════════════════
      4. REMINDERS BANNER
   ════════════════════════════════════════════════════════════ */
   .int-reminders-banner {
       display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px;
       background: var(--int-danger-bg); border: 1px solid rgba(220,38,38,0.2); border-left: 3px solid var(--int-danger);
       border-radius: var(--int-radius-lg); margin-bottom: 16px; animation: crmFadeIn 0.3s ease;
   }
   .int-reminders-content { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; flex-wrap: wrap; }
   .int-reminders-icon { width: 32px; height: 32px; border-radius: var(--int-radius-sm); background: rgba(220,38,38,0.12); display: flex; align-items: center; justify-content: center; font-size: 13px; color: var(--int-danger); flex-shrink: 0; }
   .int-reminders-text { font-size: 12px; color: var(--int-text-muted); flex-shrink: 0; line-height: 1.5; }
   .int-reminders-text strong { font-weight: 800; color: var(--int-danger); }
   .int-reminders-contacts { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
   .int-reminder-contact {
       display: flex; align-items: center; gap: 5px; padding: 3px 8px 3px 4px;
       background: var(--int-surface); border: 1px solid var(--int-border); border-radius: var(--int-radius-full);
       cursor: pointer; transition: var(--int-transition); font-size: 11px; font-weight: 600; color: var(--int-text-muted);
   }
   .int-reminder-contact:hover { border-color: var(--int-ink); color: var(--int-text); }
   .int-reminders-dismiss {
       width: 28px; height: 28px; border-radius: var(--int-radius-sm); border: 1px solid var(--int-border);
       background: var(--int-input-bg); color: var(--int-text-faint); cursor: pointer;
       display: flex; align-items: center; justify-content: center; font-size: 10px; transition: var(--int-transition); flex-shrink: 0;
   }
   .int-reminders-dismiss:hover { background: var(--int-danger-bg); color: var(--int-danger); border-color: rgba(220,38,38,0.2); }
   
   /* ════════════════════════════════════════════════════════════
      5. VIEW CONTAINER
   ════════════════════════════════════════════════════════════ */
   .int-view { animation: crmFadeIn 0.2s ease; }
   
   /* ════════════════════════════════════════════════════════════
      6. TIMELINE — Results Bar & Group By
   ════════════════════════════════════════════════════════════ */
   .int-results-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
   .int-results-count { font-size: 11px; font-weight: 700; color: var(--int-text-faint); }
   .int-groupby-switch { display: flex; align-items: center; gap: 4px; }
   .int-groupby-label { font-size: 10px; font-weight: 700; color: var(--int-text-faint); margin-right: 2px; }
   .int-groupby-btn {
       padding: 4px 10px; background: var(--int-input-bg); border: 1px solid var(--int-border);
       border-radius: var(--int-radius-sm); font-family: inherit; font-size: 10px; font-weight: 700;
       color: var(--int-text-muted); cursor: pointer; transition: var(--int-transition);
   }
   .int-groupby-btn:hover { color: var(--int-text); }
   .int-groupby-btn.active { background: var(--int-ink); color: var(--int-bg); border-color: var(--int-ink); }
   
   /* ════════════════════════════════════════════════════════════
      7. TIMELINE SKELETON
   ════════════════════════════════════════════════════════════ */
   .int-timeline-skeleton { display: flex; flex-direction: column; gap: 18px; }
   .int-skeleton-group { display: flex; flex-direction: column; gap: 8px; }
   .int-skeleton-date { height: 20px; width: 130px; background: var(--int-border-soft); border-radius: var(--int-radius-sm); animation: crmSkeletonPulse 1.5s ease-in-out infinite; }
   .int-skeleton-item { height: 88px; background: var(--int-border-soft); border-radius: var(--int-radius-lg); animation: crmSkeletonPulse 1.5s ease-in-out infinite; }
   .int-skeleton-item:nth-child(2) { animation-delay: 0.2s; }
   .int-skeleton-item:nth-child(3) { animation-delay: 0.4s; }
   
   /* ════════════════════════════════════════════════════════════
      8. TIMELINE — Groups
   ════════════════════════════════════════════════════════════ */
   .int-timeline-container { display: flex; flex-direction: column; }
   .int-timeline-group { margin-bottom: 22px; }
   
   .int-group-header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
   
   .int-group-date-label {
       font-size: 11px; font-weight: 800; color: var(--int-text-muted); text-transform: uppercase;
       letter-spacing: 0.06em; display: flex; align-items: center; gap: 5px; white-space: nowrap; flex-shrink: 0;
   }
   .int-group-date-label.today { color: var(--int-success); }
   
   .int-group-header-contact { cursor: pointer; padding: 4px 6px; border-radius: var(--int-radius-sm); transition: var(--int-transition); }
   .int-group-header-contact:hover { background: var(--int-border-soft); }
   
   .int-group-contact-avatar { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; color: #fff; flex-shrink: 0; }
   .int-group-contact-info { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
   .int-group-contact-name { font-size: 13px; font-weight: 800; color: var(--int-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
   .int-group-contact-company { font-size: 10px; color: var(--int-text-faint); }
   
   .int-group-type-icon { width: 28px; height: 28px; border-radius: var(--int-radius-sm); display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--int-border-soft); color: var(--int-text); }
   .int-group-type-label { font-size: 12px; font-weight: 800; white-space: nowrap; flex-shrink: 0; color: var(--int-text); }
   
   .int-group-count {
       font-size: 10px; font-weight: 700; color: var(--int-text-faint); background: var(--int-border-soft);
       border: 1px solid var(--int-border); padding: 2px 8px; border-radius: var(--int-radius-full); white-space: nowrap; flex-shrink: 0;
   }
   .int-group-line { flex: 1; height: 1px; background: var(--int-border); min-width: 20px; }
   .int-group-items { display: flex; flex-direction: column; gap: 8px; }
   
   /* ════════════════════════════════════════════════════════════
      9. INTERACTION CARDS
   ════════════════════════════════════════════════════════════ */
   .int-interaction-card {
       display: flex; gap: 12px; background: var(--int-surface); border: 1px solid var(--int-border);
       border-radius: var(--int-radius-lg); padding: 14px 16px; cursor: pointer;
       transition: border-color .15s ease, box-shadow .15s ease; position: relative; overflow: hidden;
       box-shadow: var(--int-shadow-sm);
   }
   .int-interaction-card:hover { border-color: var(--int-ink-soft); box-shadow: var(--int-shadow-lg); }
   
   .int-card-icon-col { display: flex; flex-direction: column; align-items: center; gap: 5px; flex-shrink: 0; width: 38px; }
   .int-card-type-icon {
       width: 36px; height: 36px; border-radius: var(--int-radius-sm); display: flex; align-items: center;
       justify-content: center; font-size: 13px; flex-shrink: 0; transition: var(--int-transition);
       background: var(--int-border-soft) !important; color: var(--int-ink) !important; border: 1px solid var(--int-border) !important;
   }
   .int-interaction-card:hover .int-card-type-icon { transform: scale(1.06); border-color: var(--int-ink-soft) !important; }
   .int-card-time { font-size: 9px; font-weight: 600; color: var(--int-text-faint); text-align: center; white-space: nowrap; line-height: 1.4; }
   
   .int-card-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
   .int-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
   .int-card-header-left { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; flex: 1; min-width: 0; }
   .int-card-header-right { display: flex; align-items: center; gap: 5px; flex-shrink: 0; }
   
   .int-card-contact-name {
       display: flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 800; color: var(--int-text);
       white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; flex-shrink: 0;
   }
   .int-card-contact-mini-avatar { width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 7px; font-weight: 800; color: #fff; flex-shrink: 0; }
   .int-card-company { font-size: 11px; font-weight: 500; color: var(--int-text-faint); flex-shrink: 0; }
   
   .int-card-type-badge, .int-card-template-badge, .int-card-ai-badge {
       display: inline-flex; align-items: center; gap: 3px; font-size: 9px; font-weight: 800; padding: 2px 7px;
       border-radius: var(--int-radius-full); white-space: nowrap; flex-shrink: 0;
       background: var(--int-border-soft) !important; color: var(--int-ink-soft) !important; border: 1px solid var(--int-border) !important;
   }
   .int-card-ai-badge { background: var(--int-purple-bg) !important; color: var(--int-purple) !important; border-color: rgba(109,40,217,0.2) !important; }
   
   .int-card-sentiment-badge { display: inline-flex; align-items: center; gap: 3px; font-size: 9px; font-weight: 700; padding: 2px 7px; border-radius: var(--int-radius-full); white-space: nowrap; flex-shrink: 0; }
   
   .int-card-author { display: flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 600; color: var(--int-text-faint); flex-shrink: 0; }
   .int-card-author-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
   .int-card-duration { display: flex; align-items: center; gap: 3px; font-size: 9px; font-weight: 600; color: var(--int-text-faint); flex-shrink: 0; }
   
   .int-card-quick-actions { display: flex; gap: 3px; opacity: 0; transition: opacity 0.15s; flex-shrink: 0; }
   .int-interaction-card:hover .int-card-quick-actions { opacity: 1; }
   .int-card-quick-btn {
       width: 24px; height: 24px; border-radius: var(--int-radius-sm); border: 1px solid var(--int-border);
       background: var(--int-input-bg); color: var(--int-text-faint); font-size: 10px; cursor: pointer;
       display: flex; align-items: center; justify-content: center; transition: var(--int-transition); flex-shrink: 0;
   }
   .int-card-quick-btn:hover { background: var(--int-border-soft); color: var(--int-text); border-color: var(--int-ink-soft); }
   .int-card-quick-btn.danger:hover { background: var(--int-danger-bg); color: var(--int-danger); border-color: rgba(220,38,38,0.25); }
   
   .int-card-summary { font-size: 12px; color: var(--int-text-muted); line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
   .int-card-read-more { display: inline; font-size: 11px; color: var(--int-ink); font-weight: 700; cursor: pointer; margin-left: 4px; }
   
   .int-card-actions-preview { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; margin-top: 2px; }
   .int-card-actions-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 9px; font-weight: 800; padding: 2px 7px; border-radius: var(--int-radius-full); white-space: nowrap; flex-shrink: 0; }
   .int-card-actions-badge.overdue { background: var(--int-danger-bg); color: var(--int-danger); border: 1px solid rgba(220,38,38,0.2); }
   .int-card-actions-badge.pending { background: var(--int-warning-bg); color: var(--int-warning); border: 1px solid rgba(217,119,6,0.2); }
   .int-card-actions-badge.done { background: var(--int-success-bg); color: var(--int-success); border: 1px solid rgba(22,163,74,0.15); }
   
   .int-card-actions-items-preview { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
   .int-card-action-chip { display: inline-flex; align-items: center; font-size: 9px; font-weight: 600; padding: 2px 7px; border-radius: var(--int-radius-sm); background: var(--int-border-soft); color: var(--int-text-faint); border: 1px solid var(--int-border); white-space: nowrap; max-width: 140px; overflow: hidden; text-overflow: ellipsis; }
   .int-card-action-chip.done { text-decoration: line-through; opacity: 0.6; }
   .int-card-action-chip.more { background: var(--int-border-soft); color: var(--int-ink); border-color: var(--int-border); font-weight: 800; }
   
   .int-card-deal { display: flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 600; color: var(--int-text-faint); }
   
   /* ════════════════════════════════════════════════════════════
      10. LOAD MORE
   ════════════════════════════════════════════════════════════ */
   .int-load-more-wrap { display: flex; justify-content: center; padding: 22px 0; }
   .int-load-more-btn {
       display: flex; align-items: center; gap: 6px; padding: 10px 24px; background: var(--int-surface);
       border: 1px solid var(--int-border); border-radius: var(--int-radius-lg); font-family: inherit;
       font-size: 12px; font-weight: 700; color: var(--int-text-muted); cursor: pointer; transition: var(--int-transition);
   }
   .int-load-more-btn:hover { border-color: var(--int-ink); color: var(--int-text); }
   .int-load-more-btn:disabled { opacity: 0.5; cursor: not-allowed; }
   
   /* ════════════════════════════════════════════════════════════
      11. CALENDAR VIEW
   ════════════════════════════════════════════════════════════ */
   .int-cal-controls { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
   .int-cal-nav-btn {
       width: 34px; height: 34px; border-radius: var(--int-radius-sm); border: 1px solid var(--int-border);
       background: var(--int-input-bg); color: var(--int-text-muted); font-size: 11px; cursor: pointer;
       display: flex; align-items: center; justify-content: center; transition: var(--int-transition); flex-shrink: 0;
   }
   .int-cal-nav-btn:hover { border-color: var(--int-ink); color: var(--int-text); }
   .int-cal-title-wrap { display: flex; flex-direction: column; align-items: center; gap: 5px; flex: 1; }
   .int-cal-title { font-size: 16px; font-weight: 800; color: var(--int-text); text-align: center; }
   
   .int-cal-mode-switch { display: flex; gap: 2px; background: var(--int-border-soft); border: 1px solid var(--int-border); border-radius: var(--int-radius-sm); padding: 2px; }
   .int-cal-mode-btn { padding: 4px 10px; background: transparent; border: none; border-radius: var(--int-radius-sm); font-family: inherit; font-size: 10px; font-weight: 700; color: var(--int-text-muted); cursor: pointer; transition: var(--int-transition); }
   .int-cal-mode-btn.active { background: var(--int-ink); color: var(--int-bg); }
   
   .int-cal-today-btn {
       padding: 7px 14px; background: var(--int-input-bg); border: 1px solid var(--int-border);
       border-radius: var(--int-radius-sm); font-family: inherit; font-size: 11px; font-weight: 700;
       color: var(--int-text-muted); cursor: pointer; transition: var(--int-transition); flex-shrink: 0;
   }
   .int-cal-today-btn:hover { border-color: var(--int-ink); color: var(--int-text); }
   
   .int-cal-grid-wrap { background: var(--int-surface); border: 1px solid var(--int-border); border-radius: var(--int-radius-lg); overflow: hidden; margin-bottom: 12px; box-shadow: var(--int-shadow-sm); }
   
   .int-cal-day-headers { display: grid; grid-template-columns: repeat(7,1fr); background: var(--int-border-soft); border-bottom: 1px solid var(--int-border); }
   .int-cal-day-header { padding: 8px 4px; text-align: center; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--int-text-faint); }
   
   .int-cal-cells { display: grid; grid-template-columns: repeat(7,1fr); }
   .int-cal-cell {
       min-height: 92px; padding: 6px; border-right: 1px solid var(--int-border); border-bottom: 1px solid var(--int-border);
       cursor: pointer; transition: background 0.12s; display: flex; flex-direction: column; gap: 3px; position: relative;
   }
   .int-cal-cell:nth-child(7n) { border-right: none; }
   .int-cal-cell:hover { background: var(--int-border-soft); }
   .int-cal-cell.other-month { background: var(--int-border-soft); opacity: 0.5; }
   .int-cal-cell.today { background: var(--int-border-soft); }
   
   .int-cal-cell-header { display: flex; align-items: center; justify-content: space-between; gap: 4px; }
   .int-cal-cell-day { font-size: 12px; font-weight: 700; color: var(--int-text-muted); line-height: 1; }
   .int-cal-cell-day.today-badge { width: 22px; height: 22px; border-radius: 50%; background: var(--int-ink); color: var(--int-bg); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; }
   .int-cal-cell-count { font-size: 9px; font-weight: 800; padding: 1px 5px; border-radius: var(--int-radius-full); background: var(--int-border-soft); color: var(--int-ink); border: 1px solid var(--int-border); }
   
   .int-cal-cell-events { display: flex; flex-direction: column; gap: 2px; flex: 1; overflow: hidden; }
   .int-cal-event-chip {
       display: flex; align-items: center; gap: 3px; padding: 2px 5px; border-radius: var(--int-radius-sm);
       font-size: 9px; font-weight: 700; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
       background: var(--int-border-soft); color: var(--int-ink-soft); border-left: 2px solid var(--int-ink-soft);
   }
   .int-cal-event-chip:hover { opacity: 0.8; }
   .int-cal-more-events { font-size: 9px; font-weight: 700; color: var(--int-ink); cursor: pointer; padding-left: 2px; }
   
   .int-cal-dots { display: flex; align-items: center; gap: 3px; margin-top: auto; padding-top: 2px; }
   .int-cal-dot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; background: var(--int-ink-soft); }
   .int-cal-overflow { font-size: 8px; font-weight: 800; color: var(--int-text-faint); }
   
   .int-cal-legend { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 4px 2px; }
   .int-cal-legend-item { display: flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 600; color: var(--int-text-faint); }
   .int-cal-legend-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
   
   .int-cal-popover { background: var(--int-surface); border: 1px solid var(--int-border); border-radius: var(--int-radius-lg); width: 280px; box-shadow: var(--int-shadow-xl); overflow: hidden; animation: crmFadeIn 0.15s ease; }
   .int-cal-popover-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--int-border); font-size: 12px; font-weight: 800; color: var(--int-text); }
   .int-cal-popover-header button { width: 22px; height: 22px; border-radius: var(--int-radius-sm); border: 1px solid var(--int-border); background: var(--int-input-bg); color: var(--int-text-faint); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 10px; transition: var(--int-transition); }
   .int-cal-popover-header button:hover { background: var(--int-danger-bg); color: var(--int-danger); }
   .int-cal-popover-body { max-height: 260px; overflow-y: auto; padding: 6px; }
   .int-cal-popover-item { display: flex; gap: 8px; padding: 8px; border-radius: var(--int-radius-sm); cursor: pointer; transition: var(--int-transition); margin-bottom: 2px; }
   .int-cal-popover-item:hover { background: var(--int-border-soft); }
   .int-cal-popover-item-icon { width: 28px; height: 28px; border-radius: var(--int-radius-sm); display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--int-border-soft); color: var(--int-ink); border: 1px solid var(--int-border); }
   .int-cal-popover-item-info { flex: 1; min-width: 0; }
   .int-cal-popover-item-name { font-size: 11px; font-weight: 700; color: var(--int-text); margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
   .int-cal-popover-item-sub { display: flex; gap: 6px; font-size: 10px; color: var(--int-text-faint); flex-wrap: wrap; }
   .int-cal-popover-item-summary { font-size: 10px; color: var(--int-text-faint); margin-top: 3px; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
   .int-cal-popover-footer { padding: 10px 12px; border-top: 1px solid var(--int-border); display: flex; justify-content: flex-end; }
   
   .int-cal-week-grid { overflow-x: auto; }
   .int-cal-week-headers { display: grid; grid-template-columns: 50px repeat(7,1fr); background: var(--int-border-soft); border-bottom: 1px solid var(--int-border); min-width: 600px; }
   .int-cal-week-time-col { padding: 8px; font-size: 9px; color: var(--int-text-faint); text-align: center; }
   .int-cal-week-day-header { padding: 8px 4px; text-align: center; border-left: 1px solid var(--int-border); }
   .int-cal-week-day-header.today { background: var(--int-border-soft); }
   .int-cal-week-day-name { font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--int-text-faint); margin-bottom: 2px; }
   .int-cal-week-day-num { font-size: 16px; font-weight: 800; color: var(--int-text-muted); line-height: 1; }
   .int-cal-week-day-num.today-badge { width: 28px; height: 28px; border-radius: 50%; background: var(--int-ink); color: var(--int-bg); font-size: 13px; display: flex; align-items: center; justify-content: center; margin: 0 auto; }
   
   .int-cal-week-allday { display: grid; grid-template-columns: 50px repeat(7,1fr); border-bottom: 1px solid var(--int-border); background: var(--int-border-soft); min-width: 600px; }
   .int-cal-week-allday-label { padding: 4px 6px; font-size: 8px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--int-text-faint); display: flex; align-items: center; justify-content: center; border-right: 1px solid var(--int-border); }
   .int-cal-week-allday-cell { border-left: 1px solid var(--int-border); padding: 4px; min-height: 30px; display: flex; flex-direction: column; gap: 2px; }
   
   .int-cal-week-body { overflow-y: auto; max-height: 480px; min-width: 600px; }
   .int-cal-week-row { display: grid; grid-template-columns: 50px repeat(7,1fr); border-bottom: 1px solid var(--int-border); min-height: 44px; }
   .int-cal-week-time { padding: 3px 6px 0; font-size: 9px; font-weight: 600; color: var(--int-text-faint); text-align: right; border-right: 1px solid var(--int-border); display: flex; align-items: flex-start; justify-content: flex-end; flex-shrink: 0; }
   .int-cal-week-cell { border-left: 1px solid var(--int-border); padding: 3px; cursor: pointer; display: flex; flex-direction: column; gap: 2px; transition: background 0.12s; }
   .int-cal-week-cell:hover { background: var(--int-border-soft); }
   .int-cal-week-cell.today-col { background: var(--int-border-soft); }
   .int-cal-week-event { display: flex; align-items: center; gap: 3px; padding: 2px 5px; border-radius: var(--int-radius-sm); font-size: 9px; font-weight: 700; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: var(--int-ink); color: var(--int-bg); }
   .int-cal-week-event:hover { opacity: 0.85; }
   
   /* ════════════════════════════════════════════════════════════
      12-15. RESPONSIVE
   ════════════════════════════════════════════════════════════ */
   @media (max-width: 1200px) {
       .int-kpi-bar { grid-template-columns: repeat(2,1fr); }
       .int-toolbar { flex-wrap: wrap; gap: 10px; }
       .int-toolbar-sep { display: none; }
       .int-toolbar-actions { margin-left: 0; }
       .int-filters { flex-wrap: wrap; }
   }
   @media (max-width: 768px) {
       .int-kpi-bar { grid-template-columns: repeat(2,1fr); gap: 8px; }
       .int-kpi-card { padding: 14px; }
       .int-kpi-value { font-size: 18px; }
       .int-kpi-icon { width: 32px; height: 32px; font-size: 14px; }
       .int-toolbar { padding: 10px 12px; gap: 8px; flex-direction: column; align-items: flex-start; }
       .int-view-btn span { display: none; }
       .int-view-btn { padding: 7px 10px; }
       .int-filters { gap: 6px; overflow-x: auto; flex-wrap: nowrap; width: 100%; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
       .int-filter-group { flex-shrink: 0; }
       .int-type-pills { flex-wrap: nowrap; }
       .int-type-pill { font-size: 10px; padding: 4px 8px; }
       .int-filter-select, .int-filter-input { font-size: 12px; min-width: 90px; }
       .int-toolbar-actions { width: 100%; justify-content: flex-end; }
       .int-action-btn span { display: none; }
       .int-action-btn { padding: 8px 12px; }
       .int-reminders-banner { flex-direction: column; align-items: flex-start; gap: 8px; }
       .int-reminders-dismiss { align-self: flex-end; }
       .int-reminders-content { flex-direction: column; align-items: flex-start; gap: 6px; }
       .int-results-bar { flex-direction: column; align-items: flex-start; gap: 6px; }
       .int-interaction-card { padding: 10px 12px; }
       .int-card-icon-col { width: 32px; }
       .int-card-type-icon { width: 30px; height: 30px; font-size: 11px; }
       .int-card-contact-name { max-width: 140px; font-size: 12px; }
       .int-card-quick-actions { opacity: 1; }
       .int-cal-cell { min-height: 60px; }
       .int-cal-event-chip { display: none; }
       .int-cal-cell-count { font-size: 8px; }
       .int-cal-controls { gap: 6px; }
       .int-cal-title { font-size: 13px; }
   }
   @media (max-width: 480px) {
       .int-kpi-bar { grid-template-columns: 1fr 1fr; gap: 6px; }
       .int-kpi-card { padding: 12px; }
       .int-kpi-value { font-size: 16px; }
       .int-action-btn { border-radius: 50%; width: 40px; height: 40px; padding: 0; justify-content: center; }
       .int-cal-cell { min-height: 48px; padding: 3px; }
       .int-cal-cell-day { font-size: 10px; }
       .int-cal-more-events { display: none; }
       .int-cal-day-header { font-size: 8px; }
   }
   @media (min-width: 1600px) {
       .int-kpi-bar { grid-template-columns: repeat(4,1fr); }
       .int-cal-cell { min-height: 110px; }
   }
   
   /* ═══════════════════════════════════════════════════════════════
      PART 2 — Action Items · Statistics · Forms · Modals
      ═══════════════════════════════════════════════════════════════ */
   
   /* ════════════════════════════════════════════════════════════
      16. ACTION ITEMS — Header & Filters
   ════════════════════════════════════════════════════════════ */
   .int-actions-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
   .int-actions-filters { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
   .int-actions-filter-btn {
       display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; background: var(--int-input-bg);
       border: 1px solid var(--int-border); border-radius: var(--int-radius-sm); font-family: inherit; font-size: 11px;
       font-weight: 700; color: var(--int-text-muted); cursor: pointer; transition: var(--int-transition); white-space: nowrap;
   }
   .int-actions-filter-btn:hover { border-color: var(--int-ink-soft); color: var(--int-text); }
   .int-actions-filter-btn.active { background: var(--int-ink); color: var(--int-bg); border-color: var(--int-ink); }
   .int-actions-filter-btn i { font-size: 10px; }
   
   .int-actions-filter-count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; background: var(--int-border-soft); border: 1px solid var(--int-border); color: var(--int-text-faint); border-radius: var(--int-radius-full); font-size: 9px; font-weight: 800; line-height: 1; }
   .int-actions-filter-btn.active .int-actions-filter-count { background: rgba(255,255,255,0.2); color: var(--int-bg); border-color: transparent; }
   .int-actions-filter-count.urgent { background: var(--int-danger-bg); border-color: rgba(220,38,38,0.2); color: var(--int-danger); }
   
   .int-actions-sort { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
   .int-actions-list { display: flex; flex-direction: column; gap: 8px; }
   .int-actions-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px 24px; text-align: center; }
   
   /* ════════════════════════════════════════════════════════════
      17. ACTION ITEM CARDS
   ════════════════════════════════════════════════════════════ */
   .int-action-item-card {
       display: flex; align-items: flex-start; gap: 12px; background: var(--int-surface); border: 1px solid var(--int-border);
       border-radius: var(--int-radius-lg); padding: 14px 16px; transition: var(--int-transition); position: relative;
       box-shadow: var(--int-shadow-sm);
   }
   .int-action-item-card:hover { border-color: var(--int-ink-soft); box-shadow: var(--int-shadow-md); }
   
   .int-action-item-card.int-action-overdue { background: var(--int-danger-bg); border-color: rgba(220,38,38,0.2); border-left: 3px solid var(--int-danger); }
   .int-action-item-card.int-action-due-soon { background: var(--int-warning-bg); border-color: rgba(217,119,6,0.2); border-left: 3px solid var(--int-warning); }
   .int-action-item-card.int-action-completed { opacity: 0.6; background: var(--int-border-soft); }
   
   .int-action-card-check-col { display: flex; align-items: flex-start; padding-top: 1px; flex-shrink: 0; }
   .int-action-complete-toggle, .int-action-complete-btn {
       width: 22px; height: 22px; background: none; border: none; padding: 0; cursor: pointer;
       display: flex; align-items: center; justify-content: center; color: var(--int-text-faint);
       font-size: 18px; transition: var(--int-transition); flex-shrink: 0;
   }
   .int-action-complete-toggle:hover, .int-action-complete-btn:hover { color: var(--int-success); }
   .int-action-complete-toggle.done, .int-action-complete-btn.done { color: var(--int-success); }
   
   .int-action-card-content { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
   .int-action-card-text { font-size: 13px; font-weight: 700; color: var(--int-text); line-height: 1.5; word-break: break-word; }
   .int-action-strikethrough { text-decoration: line-through; color: var(--int-text-faint); }
   
   .int-action-card-meta { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
   .int-action-meta-chip {
       display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 700; padding: 3px 8px;
       border-radius: var(--int-radius-full); background: var(--int-border-soft); color: var(--int-text-faint);
       border: 1px solid var(--int-border); white-space: nowrap; transition: var(--int-transition);
   }
   .int-action-contact-chip { cursor: pointer; }
   .int-action-contact-chip:hover { border-color: var(--int-ink); color: var(--int-text); }
   .int-action-meta-avatar { width: 16px; height: 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 7px; font-weight: 800; color: #fff; flex-shrink: 0; }
   .int-action-source-chip { cursor: pointer; }
   .int-action-source-chip:hover { border-color: var(--int-ink-soft); }
   
   .int-action-card-actions { display: flex; flex-direction: column; gap: 4px; flex-shrink: 0; opacity: 0; transition: opacity 0.15s; }
   .int-action-item-card:hover .int-action-card-actions { opacity: 1; }
   
   /* ════════════════════════════════════════════════════════════
      18. STATISTICS VIEW
   ════════════════════════════════════════════════════════════ */
   .int-stats-grid { display: grid; grid-template-columns: 1fr 2fr; gap: 14px; }
   .int-stat-card-wide { grid-column: 2/3; }
   .int-stat-card-ai { grid-column: 1/-1; }
   .int-chart-empty { display: flex; align-items: center; justify-content: center; height: 180px; font-size: 12px; font-weight: 600; color: var(--int-text-faint); }
   
   .int-top-contacts-list, .int-team-stats-list { display: flex; flex-direction: column; gap: 6px; max-height: 320px; overflow-y: auto; }
   
   .int-top-contact-row, .int-team-stats-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--int-radius-sm); cursor: pointer; transition: var(--int-transition); }
   .int-top-contact-row:hover, .int-team-stats-row:hover { background: var(--int-border-soft); }
   
   .int-top-contact-rank { font-size: 10px; font-weight: 800; color: var(--int-text-faint); min-width: 22px; text-align: center; flex-shrink: 0; }
   .int-top-contact-avatar, .int-team-stats-avatar { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 800; color: #fff; flex-shrink: 0; }
   
   .int-top-contact-info, .int-team-stats-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
   .int-top-contact-name, .int-team-stats-name { font-size: 12px; font-weight: 700; color: var(--int-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
   .int-top-contact-meta { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
   
   .int-type-mini-chip { display: inline-flex; align-items: center; gap: 3px; font-size: 9px; font-weight: 700; padding: 1px 6px; border-radius: var(--int-radius-full); background: var(--int-border-soft); color: var(--int-ink-soft); border: 1px solid var(--int-border); }
   
   .int-top-contact-bar-wrap, .int-team-stats-bar-wrap { flex: 1; height: 4px; background: var(--int-border-soft); border-radius: var(--int-radius-full); overflow: hidden; max-width: 120px; flex-shrink: 0; }
   .int-team-stats-bar-wrap { width: 80px; max-width: none; }
   .int-top-contact-bar, .int-team-stats-bar { height: 100%; border-radius: var(--int-radius-full); transition: width 0.5s ease; min-width: 4px; background: var(--int-ink); }
   .int-top-contact-count { font-size: 13px; font-weight: 800; color: var(--int-text); min-width: 24px; text-align: right; flex-shrink: 0; }
   
   .int-team-type-bar-wrap { height: 3px; background: var(--int-border-soft); border-radius: var(--int-radius-sm); overflow: hidden; display: flex; }
   .int-team-type-segment { height: 100%; background: var(--int-ink-soft); transition: width 0.4s ease; }
   .int-team-stats-count { display: flex; flex-direction: column; align-items: flex-end; flex-shrink: 0; min-width: 50px; }
   .int-team-stats-count strong { font-size: 14px; font-weight: 800; color: var(--int-text); line-height: 1; }
   .int-team-stats-count span { font-size: 9px; color: var(--int-text-faint); font-weight: 600; }
   
   /* ════════════════════════════════════════════════════════════
      19. LOG INTERACTION MODAL — Forms
   ════════════════════════════════════════════════════════════ */
   .int-template-selector { margin-bottom: 16px; }
   .int-template-label { font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--int-text-faint); margin-bottom: 8px; display: block; }
   .int-template-chips { display: flex; gap: 5px; flex-wrap: wrap; }
   .int-template-chip {
       display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; background: var(--int-input-bg);
       border: 1px solid var(--int-border); border-radius: var(--int-radius-full); font-family: inherit; font-size: 10px;
       font-weight: 700; color: var(--int-text-muted); cursor: pointer; transition: var(--int-transition); white-space: nowrap;
   }
   .int-template-chip:hover { border-color: var(--int-ink-soft); color: var(--int-text); }
   .int-template-chip.active { background: var(--int-ink); color: var(--int-bg); border-color: var(--int-ink); }
   .int-template-chip[data-template].active, .int-template-chip[data-aitpl].active { background: var(--int-ink); color: var(--int-bg); border-color: var(--int-ink); }
   
   .int-form-divider { border: none; border-top: 1px solid var(--int-border); margin: 14px 0; }
   .int-section-label { display: flex; align-items: center; gap: 5px; }
   .int-section-textarea { transition: var(--int-transition); border-color: var(--int-border); }
   .int-section-textarea:focus { border-color: var(--int-ink); }
   
   .int-multi-contacts { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
   .int-contact-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; background: var(--int-border-soft); border: 1px solid var(--int-border); border-radius: var(--int-radius-full); font-size: 10px; font-weight: 700; color: var(--int-ink); }
   .int-contact-badge button { background: none; border: none; cursor: pointer; font-size: 12px; color: var(--int-ink); padding: 0; line-height: 1; display: flex; align-items: center; opacity: 0.7; transition: opacity 0.15s; }
   .int-contact-badge button:hover { opacity: 1; }
   
   .int-ai-tag-btn {
       display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px; background: var(--int-purple-bg);
       border: 1px solid rgba(109,40,217,0.2); border-radius: var(--int-radius-full); font-family: inherit; font-size: 9px;
       font-weight: 800; color: var(--int-purple); cursor: pointer; transition: var(--int-transition); margin-left: 6px; vertical-align: middle;
   }
   .int-ai-tag-btn:hover { background: rgba(109,40,217,0.18); }
   
   .int-action-items-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
   .int-add-action-btn {
       display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; background: var(--int-success-bg);
       border: 1px solid rgba(22,163,74,0.2); border-radius: var(--int-radius-full); font-family: inherit; font-size: 10px;
       font-weight: 700; color: var(--int-success); cursor: pointer; transition: var(--int-transition);
   }
   .int-add-action-btn:hover { background: rgba(22,163,74,0.18); }
   .int-action-items-form { display: flex; flex-direction: column; gap: 6px; }
   .int-action-item-row { display: grid; grid-template-columns: 1fr auto auto auto; gap: 6px; align-items: center; }
   .int-action-text { flex: 1; }
   .int-action-date { width: 130px; flex-shrink: 0; }
   .int-action-assignee { width: 110px; flex-shrink: 0; }
   .int-remove-action-btn {
       width: 28px; height: 28px; border-radius: var(--int-radius-sm); border: 1px solid var(--int-border);
       background: var(--int-input-bg); color: var(--int-text-faint); font-size: 10px; cursor: pointer;
       display: flex; align-items: center; justify-content: center; transition: var(--int-transition); flex-shrink: 0;
   }
   .int-remove-action-btn:hover { background: var(--int-danger-bg); color: var(--int-danger); border-color: rgba(220,38,38,0.2); }
   
   /* ════════════════════════════════════════════════════════════
      20. AI MEETING NOTES MODAL
   ════════════════════════════════════════════════════════════ */
   .int-transcript-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; font-size: 10px; color: var(--int-text-faint); font-weight: 600; }
   .int-transcript-clear {
       display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; background: transparent;
       border: 1px solid var(--int-border); border-radius: var(--int-radius-sm); font-family: inherit; font-size: 10px;
       font-weight: 700; color: var(--int-text-faint); cursor: pointer; transition: var(--int-transition);
   }
   .int-transcript-clear:hover { background: var(--int-danger-bg); color: var(--int-danger); border-color: rgba(220,38,38,0.2); }
   
   .int-ai-analyze-btn { min-width: 180px; justify-content: center; }
   .int-ai-analyzing { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px 24px; gap: 20px; text-align: center; }
   .int-ai-analyzing-icon { position: relative; width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; }
   .int-ai-analyzing-icon i { font-size: 32px; color: var(--int-purple); z-index: 1; position: relative; animation: crmPulse 1.5s ease-in-out infinite; }
   .int-ai-pulse-ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(109,40,217,0.25); animation: intPulseRing 1.8s ease-out infinite; }
   @keyframes intPulseRing { 0% { transform: scale(0.8); opacity: 1; } 100% { transform: scale(1.5); opacity: 0; } }
   .int-ai-analyzing-title { font-size: 16px; font-weight: 800; color: var(--int-text); }
   .int-ai-analyzing-steps { display: flex; flex-direction: column; gap: 8px; text-align: left; min-width: 260px; }
   .int-ai-step { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: var(--int-text-faint); padding: 8px 12px; border-radius: var(--int-radius-sm); background: var(--int-border-soft); transition: var(--int-transition); }
   .int-ai-step.active { color: var(--int-purple); background: var(--int-purple-bg); border: 1px solid rgba(109,40,217,0.15); font-weight: 700; }
   
   .int-ai-result-header {
       display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px;
       background: var(--int-purple-bg); border: 1px solid rgba(109,40,217,0.15); border-radius: var(--int-radius-lg); margin-bottom: 16px;
   }
   .int-ai-result-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 800; color: var(--int-purple); }
   .int-ai-result-badge i { font-size: 14px; }
   .int-ai-result-redo {
       display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; background: transparent;
       border: 1px solid rgba(109,40,217,0.2); border-radius: var(--int-radius-full); font-family: inherit; font-size: 10px;
       font-weight: 700; color: var(--int-purple); cursor: pointer; transition: var(--int-transition);
   }
   .int-ai-result-redo:hover { background: rgba(109,40,217,0.1); }
   
   .int-ai-result-section { margin-bottom: 16px; }
   .int-ai-result-section-title { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 800; color: var(--int-text-muted); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 8px; }
   .int-editable-hint { font-size: 9px; font-weight: 700; padding: 2px 6px; background: var(--int-success-bg); color: var(--int-success); border-radius: var(--int-radius-sm); text-transform: none; letter-spacing: 0; }
   
   .int-ai-editable { font-family: 'Inter', sans-serif; font-size: 12px; line-height: 1.7; border-color: rgba(109,40,217,0.2) !important; background: var(--int-purple-bg) !important; }
   .int-ai-editable:focus { border-color: var(--int-purple) !important; box-shadow: 0 0 0 3px rgba(109,40,217,0.1) !important; }
   
   .int-ai-action-items-list { display: flex; flex-direction: column; gap: 6px; }
   .int-ai-action-item-row { display: grid; grid-template-columns: auto 1fr auto auto auto; gap: 6px; align-items: center; }
   .int-ai-action-check { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 22px; }
   .int-ai-sentiment-display { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: var(--int-radius-sm); font-size: 13px; font-weight: 800; margin-bottom: 8px; }
   
   /* ════════════════════════════════════════════════════════════
      21. DETAIL MODAL
   ════════════════════════════════════════════════════════════ */
   .int-detail-layout { display: grid; grid-template-columns: 1fr 260px; gap: 20px; align-items: flex-start; }
   .int-detail-left { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
   .int-detail-right { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
   
   .int-detail-meta-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
   .int-type-badge, .int-sentiment-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 800; padding: 4px 10px; border-radius: var(--int-radius-full); flex-shrink: 0; }
   .int-meta-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: var(--int-radius-full); background: var(--int-border-soft); color: var(--int-text-faint); border: 1px solid var(--int-border); flex-shrink: 0; }
   .int-meta-chip-ai { background: var(--int-purple-bg); color: var(--int-purple); border-color: rgba(109,40,217,0.2); }
   
   .int-detail-notes { font-size: 13px; color: var(--int-text); line-height: 1.75; white-space: pre-wrap; word-break: break-word; background: var(--int-border-soft); border-radius: var(--int-radius-lg); padding: 14px 16px; border: 1px solid var(--int-border); }
   
   .int-detail-section { background: var(--int-border-soft); border-radius: var(--int-radius-sm); border: 1px solid var(--int-border); overflow: hidden; }
   .int-detail-section-title { display: flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--int-text-faint); padding: 8px 12px; border-bottom: 1px solid var(--int-border); }
   .int-detail-section-body { font-size: 12px; color: var(--int-text-muted); line-height: 1.7; padding: 12px; white-space: pre-wrap; word-break: break-word; }
   .int-ai-message { background: var(--int-purple-bg); border-color: rgba(109,40,217,0.15); font-style: italic; }
   
   .int-detail-actions-section { background: var(--int-surface); border: 1px solid var(--int-border); border-radius: var(--int-radius-lg); overflow: hidden; }
   .int-detail-actions-list { display: flex; flex-direction: column; gap: 0; padding: 8px; }
   .int-detail-action-item { display: flex; align-items: flex-start; gap: 10px; padding: 10px 10px; border-radius: var(--int-radius-sm); transition: var(--int-transition); }
   .int-detail-action-item:hover { background: var(--int-border-soft); }
   .int-detail-action-item.completed { opacity: 0.6; }
   .int-detail-action-item.overdue { background: var(--int-danger-bg); border-left: 3px solid var(--int-danger); padding-left: 8px; }
   
   .int-action-item-content { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
   .int-action-item-text { font-size: 12px; font-weight: 700; color: var(--int-text); line-height: 1.4; word-break: break-word; }
   .int-detail-action-item.completed .int-action-item-text { text-decoration: line-through; color: var(--int-text-faint); }
   .int-action-item-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
   .int-overdue-label { display: inline-flex; align-items: center; gap: 3px; font-size: 10px; font-weight: 800; color: var(--int-danger); }
   .int-deadline-label, .int-assignee-label { display: inline-flex; align-items: center; gap: 3px; font-size: 10px; font-weight: 600; color: var(--int-text-faint); }
   
   .int-detail-sidebar-card { background: var(--int-border-soft); border: 1px solid var(--int-border); border-radius: var(--int-radius-lg); padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
   .int-detail-sidebar-title { font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--int-text-faint); }
   
   .int-detail-contact-card { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; padding: 6px; border-radius: var(--int-radius-sm); transition: var(--int-transition); margin: -6px; }
   .int-detail-contact-card:hover { background: var(--int-border); }
   .int-detail-contact-avatar { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; color: #fff; flex-shrink: 0; }
   .int-detail-contact-name { font-size: 12px; font-weight: 800; color: var(--int-text); margin-bottom: 2px; line-height: 1.3; }
   .int-detail-contact-title { font-size: 10px; color: var(--int-text-faint); margin-bottom: 2px; }
   .int-detail-contact-company { display: flex; align-items: center; gap: 4px; font-size: 10px; color: var(--int-text-muted); font-weight: 600; }
   
   .int-quick-log-btn {
       display: flex; align-items: center; justify-content: center; gap: 5px; padding: 6px 12px; background: var(--int-success-bg);
       border: 1px solid rgba(22,163,74,0.2); border-radius: var(--int-radius-sm); font-family: inherit; font-size: 10px;
       font-weight: 700; color: var(--int-success); cursor: pointer; transition: var(--int-transition); width: 100%;
   }
   .int-quick-log-btn:hover { background: rgba(22,163,74,0.18); }
   
   .int-detail-deal-card { display: flex; flex-direction: column; gap: 3px; cursor: pointer; padding: 6px 8px; border-radius: var(--int-radius-sm); background: var(--int-border-soft); border: 1px solid var(--int-border); transition: var(--int-transition); }
   .int-detail-deal-card:hover { border-color: var(--int-ink-soft); }
   .int-detail-deal-name { font-size: 12px; font-weight: 800; color: var(--int-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
   .int-detail-deal-stage { font-size: 10px; font-weight: 700; text-transform: capitalize; color: var(--int-text-muted); }
   
   .int-detail-author-row { display: flex; align-items: center; gap: 8px; }
   .int-detail-author-avatar { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 800; color: #fff; flex-shrink: 0; }
   
   .int-detail-quick-actions { display: flex; flex-direction: column; gap: 5px; }
   .int-detail-quick-btn {
       display: flex; align-items: center; gap: 7px; padding: 7px 10px; background: var(--int-surface);
       border: 1px solid var(--int-border); border-radius: var(--int-radius-sm); font-family: inherit; font-size: 11px;
       font-weight: 700; color: var(--int-text-muted); cursor: pointer; transition: var(--int-transition); text-align: left; width: 100%;
   }
   .int-detail-quick-btn:hover { border-color: var(--int-ink-soft); color: var(--int-text); }
   .int-detail-quick-btn.danger { color: var(--int-danger); }
   .int-detail-quick-btn.danger:hover { background: var(--int-danger-bg); border-color: rgba(220,38,38,0.2); }
   .int-detail-quick-btn i { font-size: 11px; width: 14px; text-align: center; flex-shrink: 0; }
   
   /* ════════════════════════════════════════════════════════════
      22. AI DRAFT RESULT
   ════════════════════════════════════════════════════════════ */
   .int-ai-draft-result { display: flex; flex-direction: column; gap: 14px; }
   .int-ai-draft-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
   .int-ai-draft-badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; background: var(--int-purple-bg); border: 1px solid rgba(109,40,217,0.2); border-radius: var(--int-radius-full); font-size: 11px; font-weight: 800; color: var(--int-purple); }
   
   /* ════════════════════════════════════════════════════════════
      23. RESPONSIVE PART 2
   ════════════════════════════════════════════════════════════ */
   @media (max-width: 1200px) {
       .int-stats-grid { grid-template-columns: 1fr; }
       .int-stat-card-wide, .int-stat-card-ai { grid-column: 1/-1; }
       .int-detail-layout { grid-template-columns: 1fr; }
       .int-detail-right { display: grid; grid-template-columns: repeat(auto-fill,minmax(200px,1fr)); gap: 10px; }
   }
   @media (max-width: 768px) {
       .int-actions-header { flex-direction: column; align-items: flex-start; gap: 8px; }
       .int-actions-filters { overflow-x: auto; flex-wrap: nowrap; width: 100%; padding-bottom: 4px; }
       .int-actions-filter-btn { flex-shrink: 0; }
       .int-action-item-card { flex-wrap: wrap; }
       .int-action-card-actions { opacity: 1; flex-direction: row; }
       .int-action-item-row { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; }
       .int-remove-action-btn { grid-column: 2; grid-row: 1; justify-self: end; }
       .int-action-date, .int-action-assignee { width: 100%; }
       .int-stats-grid { gap: 10px; }
       .int-top-contact-bar-wrap { max-width: 70px; }
       .int-team-stats-bar-wrap { width: 60px; }
       .int-detail-layout { grid-template-columns: 1fr; }
       .int-detail-right { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
       .int-template-chips { gap: 4px; }
       .int-template-chip { font-size: 9px; padding: 4px 8px; }
       .int-action-item-row { grid-template-columns: 1fr auto; }
       .int-action-date, .int-action-assignee { min-width: 0; }
       .int-ai-analyzing { padding: 32px 16px; }
       .int-ai-analyzing-steps { min-width: auto; width: 100%; }
   }
   @media (max-width: 480px) {
       .int-action-item-row { grid-template-columns: 1fr auto; grid-template-rows: auto auto auto; }
       .int-action-date, .int-action-assignee { grid-column: 1/-1; }
       .int-detail-right { grid-template-columns: 1fr; }
       .int-top-contacts-list, .int-team-stats-list { max-height: 240px; }
       .int-top-contact-bar-wrap, .int-team-stats-bar-wrap { display: none; }
       .int-ai-action-item-row { grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; }
       .int-ai-action-item-row .int-action-date, .int-ai-action-item-row .int-action-assignee { grid-column: 1/-1; }
       .int-detail-notes { font-size: 12px; padding: 10px 12px; }
       .int-actions-filters { padding-bottom: 6px; -webkit-overflow-scrolling: touch; }
   }
   
   /* ════════════════════════════════════════════════════════════
      24. PRINT
   ════════════════════════════════════════════════════════════ */
   @media print {
       .int-toolbar, .int-view-switcher, .int-toolbar-actions, .int-load-more-wrap,
       .int-card-quick-actions, .int-reminders-banner, .int-reminders-dismiss,
       .int-action-card-actions, .int-detail-quick-actions { display: none !important; }
       .int-interaction-card { break-inside: avoid; border: 1px solid #ccc !important; box-shadow: none !important; transform: none !important; }
       .int-kpi-bar { grid-template-columns: repeat(4,1fr) !important; }
       .int-stats-grid { grid-template-columns: 1fr 2fr !important; }
       .int-detail-layout { grid-template-columns: 1fr 240px !important; }
       body { background: #fff !important; }
   }
   
   /* ════════════════════════════════════════════════════════════
      25. ACCESSIBILITY / UTILITIES
   ════════════════════════════════════════════════════════════ */
   .int-view-btn:focus-visible, .int-type-pill:focus-visible, .int-action-btn:focus-visible,
   .int-actions-filter-btn:focus-visible, .int-action-complete-toggle:focus-visible,
   .int-action-complete-btn:focus-visible, .int-groupby-btn:focus-visible, .int-cal-nav-btn:focus-visible,
   .int-load-more-btn:focus-visible, .int-quick-log-btn:focus-visible, .int-detail-quick-btn:focus-visible {
       outline: 1px solid var(--int-ink); outline-offset: 2px;
   }
   
   @media (max-width: 768px) {
       .int-filter-select, .int-filter-input, .int-section-textarea, .int-ai-editable,
       .int-action-text, .int-action-date, .int-action-assignee { font-size: 16px; }
       .int-filter-select:not(:focus), .int-filter-input:not(:focus), .int-section-textarea:not(:focus),
       .int-ai-editable:not(:focus), .int-action-text:not(:focus), .int-action-date:not(:focus),
       .int-action-assignee:not(:focus) { font-size: 11px; }
   }
   
   @media (prefers-reduced-motion: reduce) {
       .int-ai-analyzing-icon i, .int-ai-pulse-ring, .int-view-badge, .int-reminders-icon { animation: none !important; }
       .int-interaction-card, .int-action-item-card, .int-kpi-card { transition-duration: 0.01ms !important; }
   }
   
   .int-truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
   .int-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
   
   * { scrollbar-width: thin; scrollbar-color: var(--int-border) transparent; }
   *::-webkit-scrollbar { width: 5px; height: 5px; }
   *::-webkit-scrollbar-track { background: transparent; }
   *::-webkit-scrollbar-thumb { background: var(--int-border); border-radius: 5px; }
   *::-webkit-scrollbar-thumb:hover { background: var(--int-text-faint); }
   
   /* ══════════════════════════════════════════════════════════
      GEMINI/CLAUDE ICONS
   ══════════════════════════════════════════════════════════ */
   .int-gemini-icon-xs { width: 12px; height: 12px; object-fit: contain; vertical-align: middle; display: inline-block; }
   .int-gemini-icon-sm { width: 16px; height: 16px; object-fit: contain; vertical-align: middle; display: inline-block; }
   .int-gemini-icon-md { width: 22px; height: 22px; object-fit: contain; vertical-align: middle; display: inline-block; }
   .int-gemini-icon-lg { width: 44px; height: 44px; object-fit: contain; display: block; margin: 0 auto; filter: grayscale(100%) contrast(1.1); opacity: 0.85; }
   .int-gemini-icon-btn { width: 14px; height: 14px; object-fit: contain; vertical-align: middle; margin-right: 6px; display: inline-block; }
   
   .int-ai-insights-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 32px 20px; text-align: center; }
   
   /* ══════════════════════════════════════════════════════════
      THINKING BLOCK — monochrome (aligné .aa-think style checkout)
   ══════════════════════════════════════════════════════════ */
   .aa-think { margin-bottom: 12px; border: 1px solid var(--int-border); border-radius: var(--int-radius-md); background: var(--int-surface); overflow: hidden; transition: border-color .25s ease, box-shadow .25s ease; }
   .aa-think.is-active { border-color: var(--int-ink-soft); box-shadow: var(--int-shadow-sm); }
   .aa-think-header { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 14px; background: transparent; border: none; cursor: pointer; font-family: inherit; text-align: left; }
   .aa-think-header:hover { background: var(--int-border-soft); }
   .aa-think-icon { position: relative; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
   .aa-think-ring { position: absolute; inset: -3px; border-radius: 50%; border: 1.6px solid var(--int-border); border-top-color: var(--int-ink); animation: aaRingSpin 0.85s linear infinite; opacity: 1; transition: opacity .3s ease; }
   .aa-think:not(.is-active) .aa-think-ring { opacity: 0; }
   @keyframes aaRingSpin { to { transform: rotate(360deg); } }
   @property --think-radius { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
   @property --think-angle  { syntax: '<angle>';      inherits: false; initial-value: 0deg; }
   .aa-think-logo {
       width: 13px; height: 13px; object-fit: contain; display: block; filter: grayscale(100%) contrast(1.1); opacity: 0.85; transition: opacity .3s ease;
       --think-radius: 0%; --think-angle: 0deg;
       -webkit-mask-image: radial-gradient(circle, #000 62%, transparent 64%), conic-gradient(from -90deg, #000 var(--think-angle), transparent var(--think-angle));
               mask-image: radial-gradient(circle, #000 62%, transparent 64%), conic-gradient(from -90deg, #000 var(--think-angle), transparent var(--think-angle));
       -webkit-mask-size: var(--think-radius) var(--think-radius), 100% 100%;
               mask-size: var(--think-radius) var(--think-radius), 100% 100%;
       -webkit-mask-repeat: no-repeat, no-repeat; mask-repeat: no-repeat, no-repeat;
       -webkit-mask-position: center, center; mask-position: center, center;
       -webkit-mask-composite: source-in; mask-composite: intersect;
   }
   .aa-think.is-active .aa-think-logo { animation: aaLogoReveal 1.6s cubic-bezier(.45,0,.55,1) infinite; }
   .aa-think:not(.is-active) .aa-think-logo { --think-radius: 160%; --think-angle: 360deg; opacity: 1; }
   @keyframes aaLogoReveal {
       0%   { --think-radius: 0%;   --think-angle: 0deg;   opacity: 0;    }
       12%  { opacity: 1; }
       55%  { --think-radius: 160%; --think-angle: 360deg; opacity: 1;    }
       78%  { --think-radius: 160%; --think-angle: 360deg; opacity: 1;    }
       100% { --think-radius: 160%; --think-angle: 360deg; opacity: 0.15; }
   }
   .aa-think-label { flex: 1; font-size: 12.5px; font-weight: 600; color: var(--int-ink-soft); display: flex; align-items: center; gap: 2px; }
   .aa-think-dots { display: inline-flex; gap: 2px; margin-left: 2px; }
   .aa-think-dots i { width: 3px; height: 3px; border-radius: 50%; background: var(--int-text-faint); animation: aaThinkDot 1.1s ease-in-out infinite; display: inline-block; }
   .aa-think-dots i:nth-child(2) { animation-delay: .15s; }
   .aa-think-dots i:nth-child(3) { animation-delay: .3s; }
   .aa-think:not(.is-active) .aa-think-dots { display: none; }
   @keyframes aaThinkDot { 0%,80%,100% { opacity:.25; transform:translateY(0); } 40% { opacity:1; transform:translateY(-1.5px); } }
   .aa-think-chev { font-size: 10px; color: var(--int-text-faint); transition: transform .25s ease; flex-shrink: 0; }
   .aa-think.is-open .aa-think-chev { transform: rotate(180deg); }
   .aa-think-body { max-height: 0; overflow: hidden; transition: max-height .35s cubic-bezier(.4,0,.2,1); }
   .aa-think.is-open .aa-think-body { max-height: 260px; overflow-y: auto; }
   .aa-think-text { padding: 2px 14px 14px 42px; font-size: 12px; line-height: 1.65; color: var(--int-text-muted); font-style: italic; white-space: pre-wrap; border-top: 1px solid var(--int-border-soft); margin-top: 2px; padding-top: 10px; }
   
   .int-think-slot { width: 100%; }
   
   @keyframes crmFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
   @keyframes crmPulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .55; transform: scale(0.9); } }
   @keyframes crmSkeletonPulse { 0%,100% { opacity: 0.5; } 50% { opacity: 0.9; } }