/* ═══ OneJourney — Salesforce Lightning Service Console Replica ═══ */
:root {
  --sf-blue: #0176d3; --sf-blue-dk: #032d60; --sf-blue-lt: #1b96ff;
  --sf-blue-bg: #eef4ff; --sf-green: #2e844a; --sf-red: #ea001e;
  --sf-orange: #e86a17; --sf-gold: #b8860b; --sf-purple: #7526c9;
  --sf-bg: #f3f3f3; --sf-white: #fff; --sf-border: #d8dde6;
  --sf-text: #181818; --sf-text2: #444; --sf-text3: #706e6b;
  --sf-font: 'Salesforce Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--sf-font);font-size:12px;color:var(--sf-text);background:var(--sf-bg);overflow:hidden;height:100vh;line-height:1.4}
a{color:var(--sf-blue);text-decoration:none} .link{color:var(--sf-blue);cursor:pointer}

/* ── SPLASH SCREEN ── */
.splash-overlay {
  position: fixed; inset: 0; z-index: 10000;
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%);
  display: flex; align-items: center; justify-content: center;
  transition: opacity 0.6s ease, visibility 0.6s ease;
}
.splash-overlay.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.splash-card {
  text-align: center; padding: 60px 80px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 24px;
  backdrop-filter: blur(20px);
  box-shadow: 0 32px 64px rgba(0,0,0,0.4);
}
.splash-logos { display: flex; align-items: center; justify-content: center; gap: 24px; margin-bottom: 32px; }
.splash-logo-mango { height: 50px; filter: brightness(0) invert(1); }
.splash-logo-konecta { height: 34px; filter: brightness(0) invert(1); opacity: 0.9; }
.splash-divider { width: 1px; height: 40px; background: rgba(255,255,255,0.2); }
.splash-title { font-size: 28px; font-weight: 300; color: #fff; letter-spacing: 4px; text-transform: uppercase; margin-bottom: 8px; }
.splash-subtitle { font-size: 14px; color: rgba(255,255,255,0.5); margin-bottom: 40px; letter-spacing: 1px; }
.splash-lang-buttons { display: flex; gap: 20px; justify-content: center; margin-bottom: 40px; }
.splash-lang-btn {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 24px 40px; border-radius: 16px; cursor: pointer;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12);
  transition: all 0.3s ease; color: #fff;
}
.splash-lang-btn:hover {
  background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.3);
  transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,0.3);
}
.splash-flag { font-size: 36px; }
.splash-lang-name { font-size: 15px; font-weight: 600; letter-spacing: 1px; }
.splash-footer { font-size: 11px; color: rgba(255,255,255,0.25); letter-spacing: 1px; }

.hidden{display:none!important}

/* ── HEADER ── */
.sf-header{background:#ffffff;height:50px;display:flex;align-items:center;padding:0 16px;gap:8px;border-bottom:1px solid var(--sf-border)}
.sf-header-left{display:flex;align-items:center;gap:16px}
.mango-logo{color:#000;font-size:22px;font-weight:800;letter-spacing:3px;font-family: Georgia, serif;}
.header-app-name{color:#444;font-size:13px;font-weight:600;border-left:1px solid #ccc;padding-left:12px;}
.header-select{background:none;border:1px solid #ccc;color:#333;border-radius:3px;padding:2px 6px;font-size:11px;cursor:pointer}
.sf-header-center{flex:1;display:flex;justify-content:center}
.header-search{background:#fff;border:1px solid #ccc;border-radius:4px;display:flex;align-items:center;gap:6px;padding:6px 12px;width:400px;box-shadow:inset 0 1px 3px rgba(0,0,0,.05)}
.header-search input{background:none;border:none;outline:none;color:#333;font-size:12px;width:100%;font-family:inherit}
.header-search input::placeholder{color:#999}
.sf-header-right{display:flex;align-items:center;gap:10px}
.h-icon{width:32px;height:32px;border-radius:4px;display:flex;align-items:center;justify-content:center;cursor:pointer}
.h-icon:hover{background:#f0f0f0}
.h-icon svg{width:20px;height:20px;fill:#666 !important;}
.h-avatar{width:32px;height:32px;border-radius:50%;background:var(--sf-blue);color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;cursor:pointer}

/* ── CASE TABS ── */
.case-tabs-bar{background:var(--sf-white);border-bottom:1px solid var(--sf-border);display:flex;align-items:stretch;height:32px;padding:0 8px;gap:1px}
.case-tab{display:flex;align-items:center;gap:5px;padding:0 10px;font-size:11px;color:var(--sf-text2);cursor:pointer;border-bottom:2px solid transparent;transition:.15s}
.case-tab:hover{background:var(--sf-blue-bg)}
.case-tab.active{border-bottom-color:var(--sf-blue);color:var(--sf-blue);font-weight:600}
.case-tab-close{font-size:14px;margin-left:4px;color:#999;cursor:pointer}
.tab-badge{background:var(--sf-red);color:#fff;font-size:9px;border-radius:8px;padding:0 5px;font-weight:700;animation:pulse 2s infinite}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.15)}}

/* ── 3-PANEL LAYOUT ── */
.console-layout{display:flex;height:calc(100vh - 72px - 32px);overflow:hidden}
.panel-left{width:280px;min-width:280px;border-right:1px solid var(--sf-border);background:var(--sf-white);display:flex;flex-direction:column;overflow:hidden}
.panel-center{width:280px;min-width:260px;border-right:1px solid var(--sf-border);background:var(--sf-white);overflow-y:auto;transition:width .24s ease,min-width .24s ease,border-color .24s ease}
.panel-center.floating-active{width:0;min-width:0;border-right-color:transparent;overflow:visible;background:transparent}
.panel-right{flex:1;overflow-y:auto;background:var(--sf-white)}
.panel-empty{display:flex;align-items:center;justify-content:center;height:100%;color:var(--sf-text3);font-size:13px}

.center-floating-shell{
  position:fixed;
  top:96px;
  right:24px;
  width:400px;
  max-height:calc(100vh - 144px);
  display:flex;
  flex-direction:column;
  background:rgba(255,255,255,.98);
  border:2px solid #000;
  border-radius:16px;
  box-shadow:
    0 4px 12px rgba(15,23,42,.12),
    0 18px 40px rgba(15,23,42,.18),
    0 36px 84px rgba(15,23,42,.24);
  backdrop-filter:blur(14px);
  overflow:hidden;
  z-index:350;
}
.center-floating-shell.minimized{width:400px;max-height:none}
.center-floating-shell.minimized .center-floating-body{display:none}
.center-floating-shell.dragging{
  cursor:grabbing;
  box-shadow:
    0 10px 24px rgba(15,23,42,.16),
    0 28px 56px rgba(15,23,42,.22),
    0 42px 92px rgba(15,23,42,.28);
}
.center-floating-header{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:4px;
  padding:12px 14px;
  background:linear-gradient(180deg,#fff 0%,#f8fafc 100%);
  border-bottom:1px solid var(--sf-border);
  cursor:grab;
}
.center-floating-header-top{display:flex;align-items:center;justify-content:space-between;gap:12px;min-width:0}
.center-floating-title-wrap{min-width:0;flex:1}
.center-floating-title{font-size:12px;font-weight:700;color:var(--sf-blue-dk);letter-spacing:.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.center-floating-subtitle{font-size:10px;color:var(--sf-text3);line-height:1.3}
.center-floating-actions{display:flex;align-items:center;gap:6px;flex-shrink:0}
.floating-summary-btn{padding:6px 10px;border-radius:999px;font-size:10px;line-height:1;white-space:nowrap;box-shadow:none}
.floating-summary-btn:hover{transform:none}
.floating-window-btn{
  width:28px;
  height:28px;
  border-radius:50%;
  border:1px solid var(--sf-border);
  background:#fff;
  color:var(--sf-text2);
  font-size:14px;
  font-weight:700;
  cursor:pointer;
  font-family:inherit;
}
.floating-window-btn:hover{background:#f8fafc;border-color:#b8c2cf}
.floating-window-btn.close:hover{background:#fef2f2;border-color:#fecaca;color:#b91c1c}
.center-floating-body{display:flex;flex-direction:column;min-height:0;flex:1;background:#fff}
.center-floating-shell #view-active-center{height:100%;min-height:0}
.center-floating-shell #center-scroll-content{padding:10px;flex:1;overflow-y:auto;min-height:0}
.center-summary-region{padding-top:12px;margin-top:10px;border-top:1px solid #eef2f7;background:transparent}
.center-floating-shell #center-subtab-coach,
.center-floating-shell #center-subtab-knowledge{min-height:0}
.center-floating-launcher{
  position:fixed;
  right:24px;
  bottom:48px;
  z-index:350;
  border:none;
  border-radius:999px;
  background:linear-gradient(135deg,#0f172a,#1e3a8a);
  color:#fff;
  padding:10px 16px;
  font-size:11px;
  font-weight:700;
  box-shadow:0 18px 32px rgba(15,23,42,.28);
  cursor:pointer;
  font-family:inherit;
}
.center-floating-launcher:hover{transform:translateY(-1px)}

/* ── LEFT PANEL (Chat) ── */
.panel-subtabs{display:flex;border-bottom:1px solid var(--sf-border)}
.panel-subtab{flex:1;padding:8px;text-align:center;font-size:11px;font-weight:600;color:var(--sf-text3);cursor:pointer;border-bottom:2px solid transparent}
.panel-subtab:hover{color:var(--sf-blue);background:var(--sf-blue-bg)}
.panel-subtab.active{color:var(--sf-blue);border-bottom-color:var(--sf-blue)}
.conv-header{display:flex;align-items:center;gap:6px;padding:8px 10px;border-bottom:1px solid var(--sf-border);font-size:12px}
.conv-title{font-weight:700}
.conv-status{background:#dcfce7;color:var(--sf-green);font-size:10px;padding:1px 6px;border-radius:8px;font-weight:600}
.conv-meta{font-size:10px;color:var(--sf-text3);padding:4px 10px;border-bottom:1px solid var(--sf-border)}
.chat-messages{flex:1;overflow-y:auto;padding:8px;display:flex;flex-direction:column;gap:6px;background:#fafafa}
.chat-waiting{text-align:center;color:#aaa;font-size:11px;padding:20px 0}
.chat-msg{max-width:88%;padding:8px 10px;border-radius:8px;font-size:12px;line-height:1.4;animation:fadeIn .3s}
.chat-msg.customer{background:#e9ecef;align-self:flex-start;border-bottom-left-radius:2px}
.chat-msg.agent{background:#0176d3;color:#fff;align-self:flex-end;border-bottom-right-radius:2px}
.chat-msg .msg-meta{font-size:9px;opacity:.7;margin-top:3px;display:flex;justify-content:space-between}
.chat-input-row{display:flex;gap:4px;padding:6px;border-top:1px solid var(--sf-border)}
.chat-input-row textarea{flex:1;resize:none;border:1px solid var(--sf-border);border-radius:3px;padding:5px 8px;font-family:inherit;font-size:11px;outline:none;min-height:28px}
.chat-input-row textarea:focus{border-color:var(--sf-blue);box-shadow:0 0 0 1px rgba(1,118,211,.3)}

/* ── CENTER PANEL ── */
.sf-card{border-bottom:1px solid var(--sf-border)}
.card-head{display:flex;align-items:center;gap:6px;padding:8px 10px;font-size:12px;font-weight:700;color:var(--sf-text);border-bottom:1px solid #eee;background:#fafbfc}
.card-head svg{flex-shrink:0}
.card-body{padding:8px 10px}
.cb-label{font-weight:400;font-size:10px;color:var(--sf-text3);margin-left:auto;display:flex;align-items:center;gap:3px}
.cust-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.cust-field label{display:block;font-size:10px;color:var(--sf-text3);font-weight:600}
.cust-field span{font-size:12px}
.order-search{display:flex;gap:4px}
.order-search input{flex:1;border:1px solid var(--sf-border);border-radius:3px;padding:4px 8px;font-size:11px;outline:none;font-family:inherit}
.order-sub{font-size:11px;color:var(--sf-text3);padding:6px 0;cursor:pointer}

/* ── RIGHT PANEL (Case) ── */
.case-header-bar{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;border-bottom:1px solid var(--sf-border);gap:8px;flex-wrap:wrap}
.case-icon-title{display:flex;align-items:center;gap:6px}
.case-num{font-size:16px;font-weight:700;color:var(--sf-text)}
.case-type{font-size:11px;color:var(--sf-text3)}
.case-actions{display:flex;align-items:center;gap:6px}
.action-link{font-size:11px;color:var(--sf-blue);cursor:pointer}
.btn-action{padding:4px 12px;border-radius:3px;font-size:11px;font-weight:600;cursor:pointer;border:1px solid var(--sf-border);background:var(--sf-white);color:var(--sf-text);font-family:inherit}
.btn-action:hover{background:#f0f0f0}
.btn-action.resolve{background:var(--sf-blue);color:#fff;border-color:var(--sf-blue)}
.btn-action.resolve:hover{background:#015aa0}
.case-fields{display:grid;grid-template-columns:1fr 1fr 1fr;gap:4px 12px;padding:8px 12px;border-bottom:1px solid var(--sf-border)}
.cf label{display:block;font-size:10px;color:var(--sf-text3);font-weight:600}
.cf span{font-size:12px}

/* Compact Customer Profile */
.compact-customer-profile {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: #fafbfc;
  border-bottom: 1px solid var(--sf-border);
}
.ccp-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--sf-purple);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  flex-shrink: 0;
}
.ccp-info {
  flex: 1;
}
.ccp-name {
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ccp-tier {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  background: #fef3c7;
  color: #b45309;
  padding: 2px 6px;
  border-radius: 10px;
  border: 1px solid #fde68a;
}
.ccp-meta {
  font-size: 11px;
  color: var(--sf-text3);
  margin-top: 2px;
}

/* Feed */
.feed-section{border-top:1px solid var(--sf-border)}
.feed-head{display:flex;gap:12px;padding:8px 12px;border-bottom:1px solid var(--sf-border);font-size:12px;font-weight:700}
.feed-tab{font-weight:400;color:var(--sf-text3);cursor:pointer}
.feed-tab:hover{color:var(--sf-blue)}
.feed-compose{padding:8px 12px;border-bottom:1px solid var(--sf-border)}
.compose-tabs{display:flex;gap:10px;margin-bottom:6px;font-size:11px}
.compose-tab{color:var(--sf-text3);cursor:pointer;padding-bottom:2px}
.compose-tab.active{color:var(--sf-text);font-weight:600;border-bottom:2px solid var(--sf-blue)}
.compose-row{display:flex;gap:6px}
.compose-input{flex:1;border:1px solid var(--sf-border);border-radius:3px;padding:5px 8px;font-size:11px;outline:none;font-family:inherit}
.feed-filter{display:flex;align-items:center;justify-content:space-between;padding:6px 12px;font-size:11px;color:var(--sf-text3);border-bottom:1px solid var(--sf-border)}
.feed-search input{border:1px solid var(--sf-border);border-radius:3px;padding:3px 8px;font-size:10px;outline:none;width:140px;font-family:inherit}
.feed-subtabs{display:flex;gap:12px;padding:6px 12px;border-bottom:1px solid var(--sf-border);font-size:11px}
.feed-subtab{color:var(--sf-text3);cursor:pointer;padding-bottom:3px}
.feed-subtab.active{color:var(--sf-blue);font-weight:600;border-bottom:2px solid var(--sf-blue)}
.feed-email{padding:8px 12px}
.feed-email-header{font-size:11px;color:var(--sf-text3);margin-bottom:4px}
.feed-email-body{background:#fafafa;border:1px solid #eee;border-radius:3px;padding:10px;font-size:12px;line-height:1.6;white-space:pre-wrap;color:var(--sf-text2);max-height:140px;overflow-y:auto}

/* ── BUTTONS ── */
.btn-sm{padding:3px 10px;border-radius:3px;font-size:11px;font-weight:600;cursor:pointer;border:1px solid var(--sf-border);background:var(--sf-white);color:var(--sf-text);font-family:inherit}
.btn-blue{padding:4px 14px;border-radius:3px;font-size:11px;font-weight:600;cursor:pointer;border:none;background:var(--sf-blue);color:#fff;font-family:inherit}
.btn-blue:hover{background:#015aa0}
.btn-ai{padding:5px 14px;border-radius:4px;font-size:11px;font-weight:600;cursor:pointer;border:none;background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff;font-family:inherit;transition:.2s}
.btn-ai:hover{box-shadow:0 2px 8px rgba(99,102,241,.4)}
.btn-ai:disabled{opacity:.5;cursor:not-allowed}
.btn-send{padding:4px 12px;border-radius:3px;font-size:11px;font-weight:600;cursor:pointer;border:none;background:var(--sf-blue);color:#fff;font-family:inherit}

/* ── AI SUMMARY ── */
.ai-summary-box{background:linear-gradient(135deg,#eef2ff,#f5f3ff);border:1px solid #c7d2fe;border-left:3px solid #6366f1;border-radius:4px;padding:10px;margin-top:8px;animation:fadeIn .4s}
.ai-summary-box h4{color:#4338ca;font-size:11px;margin-bottom:4px}
.ai-summary-box p{font-size:12px;line-height:1.5;color:#374151}
.ai-meta-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:8px}
.ai-meta-item{background:#fff;border-radius:3px;padding:6px 8px;border:1px solid #e0e7ff}
.ai-meta-item .ml{font-size:9px;text-transform:uppercase;color:#6366f1;font-weight:700;letter-spacing:.5px}
.ai-meta-item .mv{font-size:11px;color:#1f2937;margin-top:1px}
.ai-entities{margin-top:6px}
.ai-entity{display:flex;gap:6px;padding:3px 0;font-size:11px;border-bottom:1px solid #e0e7ff}
.ai-entity:last-child{border-bottom:none}
.ai-entity .et{background:#6366f1;color:#fff;padding:0 5px;border-radius:2px;font-size:9px;font-weight:700;white-space:nowrap}
.center-floating-shell .ai-summary-box{margin-top:0;margin-bottom:10px}
.center-floating-shell .ai-meta-grid{grid-template-columns:1fr}
.center-floating-shell .ai-summary-box p{font-size:11px}
.center-floating-shell .ai-entity{align-items:flex-start}

/* ── KB Articles (Assistant) ── */
.kb-art{background:#fff;border:1px solid #eee;border-radius:3px;padding:8px;margin-bottom:5px;cursor:pointer;transition:.15s}
.kb-art:hover{border-color:var(--sf-blue);box-shadow:0 1px 4px rgba(0,0,0,.08)}
.kb-art-head{display:flex;justify-content:space-between;align-items:start;margin-bottom:3px}
.kb-art-title{font-size:11px;font-weight:700;color:var(--sf-blue)}
.kb-rel{background:#dcfce7;color:#16a34a;font-size:9px;padding:0 5px;border-radius:8px;font-weight:700}
.kb-art-id{font-size:9px;color:var(--sf-text3)}
.kb-art-ex{font-size:10px;color:var(--sf-text2);line-height:1.4;margin-top:2px}
.coach-step{display:flex;gap:8px;padding:6px 0;border-bottom:1px solid #eee}
.coach-step:last-child{border-bottom:none}
.coach-num{width:20px;height:20px;border-radius:50%;background:var(--sf-blue);color:#fff;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;flex-shrink:0}
.coach-action{font-size:11px;font-weight:600}
.coach-detail{font-size:10px;color:var(--sf-text3);margin-top:1px}
.section-title{font-size:10px;font-weight:700;text-transform:uppercase;color:var(--sf-text3);letter-spacing:.5px;padding:6px 10px;background:#f8f9fa;border-bottom:1px solid #eee}

/* AI Responses */
.ai-resp{background:#fff;border:1px solid #c7d2fe;border-radius:6px;padding:8px;margin:4px 10px;cursor:pointer;transition:.15s}
.ai-resp:hover{border-color:#6366f1;box-shadow:0 1px 6px rgba(99,102,241,.2);transform:translateY(-1px)}
.ai-resp.selected{border-color:#6366f1;background:#eef2ff}
.ai-resp .tone{font-size:9px;font-weight:700;text-transform:uppercase;color:#6366f1;letter-spacing:.5px;margin-bottom:2px}
.ai-resp .rtxt{font-size:10px;color:var(--sf-text2);line-height:1.4}

/* ── INBOX ── */
.inbox-item{display:flex;align-items:center;gap:10px;padding:10px;cursor:pointer;transition:.15s}
.inbox-item:hover{background:var(--sf-blue-bg)}
.inbox-item.unread{background:#eff6ff;border-left:3px solid var(--sf-blue)}
.inbox-dot{width:7px;height:7px;border-radius:50%;background:var(--sf-blue);flex-shrink:0}
.inbox-body{flex:1;min-width:0}
.inbox-subject{font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.inbox-preview{font-size:10px;color:var(--sf-text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.inbox-time{font-size:10px;color:var(--sf-text3);white-space:nowrap}

/* ── UTILITY BAR ── */
.utility-bar{position:fixed;bottom:0;left:0;right:0;height:32px;background:#1e293b;display:flex;align-items:center;justify-content:space-between;padding:0 8px;z-index:200}
.utility-items{display:flex;gap:2px}
.util-item{padding:3px 8px;font-size:10px;color:#94a3b8;cursor:pointer;border-radius:2px;white-space:nowrap}
.util-item:hover{background:rgba(255,255,255,.1);color:#fff}
.util-item.active{color:#4ade80}
.demo-controls{display:flex;align-items:center;gap:6px;position:relative}
.sim-dropdown{position:relative}
.sim-menu{position:absolute;bottom:100%;right:0;margin-bottom:8px;background:#fff;border-radius:4px;box-shadow:0 4px 16px rgba(0,0,0,.3);min-width:260px;z-index:300;overflow:hidden;border:1px solid var(--sf-border)}
.sim-item{padding:10px 14px;font-size:12px;color:var(--sf-text);cursor:pointer;transition:.15s}
.sim-item:hover{background:var(--sf-blue-bg)}
.demo-btn{padding:3px 10px;border-radius:4px;border:1px solid #475569;background:#334155;color:#cbd5e1;font-size:10px;font-weight:600;cursor:pointer;font-family:inherit;white-space:nowrap}
.demo-btn:hover:not(:disabled){background:#475569;color:#fff}
.demo-btn:disabled{opacity:.3;cursor:not-allowed}
.demo-btn.primary{background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff;border-color:#6366f1}
.demo-btn.reset{border-color:#ef4444;color:#f87171}
.demo-btn.reset:hover{background:#450a0a}
.demo-steps{display:flex;gap:3px}
.demo-dot{width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;background:#334155;color:#64748b;border:1px solid #475569;transition:.2s}
.demo-dot.active{background:#6366f1;color:#fff;border-color:#6366f1;box-shadow:0 0 6px rgba(99,102,241,.5)}
.demo-dot.completed{background:#16a34a;color:#fff;border-color:#16a34a}
.demo-label{font-size:9px;color:#6366f1;font-weight:700;text-transform:uppercase;letter-spacing:.3px}

/* ── MODAL ── */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;z-index:1000;opacity:0;pointer-events:none;transition:.2s}
.modal-overlay.visible{opacity:1;pointer-events:all}
.modal-box{background:#fff;border-radius:6px;width:560px;max-height:75vh;overflow-y:auto;box-shadow:0 16px 48px rgba(0,0,0,.3)}
.modal-head{padding:12px 16px;border-bottom:1px solid var(--sf-border);display:flex;align-items:center;justify-content:space-between}
.modal-head h3{font-size:14px;margin:0}
.modal-head button{background:none;border:none;font-size:18px;cursor:pointer;color:#999}
.modal-body{padding:16px}
.modal-foot{padding:10px 16px;border-top:1px solid var(--sf-border);display:flex;justify-content:flex-end;gap:6px}
.sum-section{margin-bottom:12px}
.sum-section h4{font-size:10px;text-transform:uppercase;color:var(--sf-text3);font-weight:700;letter-spacing:.5px;margin-bottom:6px;padding-bottom:3px;border-bottom:1px solid #eee}
.sum-meta{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.sum-meta label{font-size:9px;color:var(--sf-text3);text-transform:uppercase;font-weight:700}
.sum-meta p{font-size:12px;margin:0}
.sum-actions{list-style:none}
.sum-actions li{padding:3px 0;font-size:12px}
.sum-desc{font-size:12px;line-height:1.6;color:var(--sf-text2)}

/* ── TOAST ── */
.toast{position:fixed;top:48px;right:12px;z-index:500;background:#fff;border-radius:6px;box-shadow:0 4px 12px rgba(0,0,0,.2);padding:10px 14px;display:flex;align-items:center;gap:10px;max-width:340px;border-left:3px solid var(--sf-blue);transform:translateX(110%);transition:.3s cubic-bezier(.22,1,.36,1)}
.toast.show{transform:translateX(0)}
.toast-body{flex:1;font-size:11px}
.toast-body strong{display:block;margin-bottom:2px}
.toast-x{cursor:pointer;color:#999;font-size:14px}

/* ── SHIMMER ── */
.shimmer{background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0 50%,#f0f0f0 75%);background-size:200% 100%;animation:shimmerA 1.5s infinite;border-radius:3px}
@keyframes shimmerA{0%{background-position:-200% 0}100%{background-position:200% 0}}
.typing-ind{display:flex;gap:3px;padding:6px 0}
.typing-ind span{width:5px;height:5px;border-radius:50%;background:#6366f1;animation:typA .8s infinite}
.typing-ind span:nth-child(2){animation-delay:.15s}
.typing-ind span:nth-child(3){animation-delay:.3s}
@keyframes typA{0%,100%{opacity:.3;transform:scale(.8)}50%{opacity:1;transform:scale(1.1)}}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}

/* ── AUTOPLAY DEMO ── */
.btn-play-demo{margin-left:20px;padding:4px 12px;border-radius:20px;border:none;background:linear-gradient(135deg,#f59e0b,#ef4444);color:#fff;font-size:11px;font-weight:700;cursor:pointer;animation:pulseBtn 2s infinite;box-shadow:0 2px 8px rgba(239,68,68,.4)}
@keyframes pulseBtn{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
.fake-cursor{position:fixed;width:28px;height:28px;background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24"><path fill="black" stroke="white" stroke-width="1.5" stroke-linejoin="round" d="M5.5 3.21V20.8c0 .45.54.67.85.35l4.86-4.86a.5.5 0 0 1 .35-.15h6.42c.45 0 .66-.54.35-.85L5.5 3.21z"/></svg>');z-index:9999;pointer-events:none;transition:top .7s cubic-bezier(0.25, 1, 0.5, 1), left .7s cubic-bezier(0.25, 1, 0.5, 1);filter:drop-shadow(2px 4px 6px rgba(0,0,0,.4));transform-origin:top left}
.fake-cursor.click{animation:cursorClick .3s ease-out}
@keyframes cursorClick{0%{transform:scale(1)}50%{transform:scale(.8)}100%{transform:scale(1)}}

/* Highlights para el Autopilot */
@keyframes pulseHighlight {
  0%   { box-shadow: 0 0 0 0 rgba(99,102,241,.7), 0 0 20px rgba(99,102,241,.3); }
  50%  { box-shadow: 0 0 0 8px rgba(99,102,241,0), 0 0 30px rgba(99,102,241,.15); }
  100% { box-shadow: 0 0 0 0 rgba(99,102,241,0), 0 0 20px rgba(99,102,241,.3); }
}
.highlight-pulse {
  animation: pulseHighlight 1.2s ease-in-out infinite !important;
  border-radius: 8px;
  position: relative;
  z-index: 100;
  border: 3px solid #6366f1 !important;
  outline: 3px solid rgba(99,102,241,.25);
  outline-offset: 2px;
  transition: transform 0.2s;
}
/* Draft email when highlighted */
textarea.highlight-pulse {
  background: linear-gradient(135deg, #eef2ff 0%, #faf5ff 100%) !important;
  color: #1e1b4b !important;
  font-weight: 500;
}

/* Inline Chat Suggestions */
.chat-inline-suggestions {
  padding: 8px 12px;
  background: #f4f6f9;
  border-top: 1px solid #e5e7eb;
  border-bottom: 1px solid #e5e7eb;
  display: flex;
  flex-direction: column;
  gap: 6px;
  animation: fadeIn 0.4s ease-out;
}
.chat-sugg-title {
  font-size: 11px;
  font-weight: 700;
  color: #7526c9;
  display: flex;
  align-items: center;
  gap: 4px;
}
.chat-sugg-bubble {
  background: #fff;
  border: 1px solid #0176d3;
  color: #0176d3;
  padding: 8px 14px;
  border-radius: 18px;
  font-size: 13px;
  cursor: pointer;
  display: inline-block;
  width: fit-content;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  transition: all 0.2s;
  line-height: 1.3;
}
.chat-sugg-bubble:hover {
  background: #0176d3;
  color: #fff;
}

@media (max-width: 1100px) {
  .center-floating-shell{
    width:min(400px,calc(100vw - 24px));
    right:12px;
  }
  .center-floating-launcher{right:12px}
}

@media (max-width: 820px) {
  .center-floating-shell{
    left:12px;
    right:12px;
    width:auto;
    max-height:calc(100vh - 124px);
  }
  .center-floating-launcher{
    left:12px;
    right:12px;
    width:calc(100vw - 24px);
  }
}