/* Extracted from index.html */
/* ===== Central de Chamadas — MERK PRAXIS (elegante, minimalista, charmoso) ===== */
#dialer-view{
--dv-bg:#09080d;--dv-surface:#11101a;--dv-surface-2:#16151f;
--dv-line:rgba(255,255,255,.07);--dv-line-2:rgba(255,255,255,.14);
--dv-fg:#f5f3ff;--dv-muted:#a1a1aa;--dv-subtle:#71717a;
--dv-primary:#8b5cf6;--dv-primary-2:#6366f1;--dv-accent:#c4b5fd;--dv-accent-2:#e9d5ff;
--dv-glow:rgba(139,92,246,.55);
--dv-ok:#86efac;--dv-warn:#fcd34d;--dv-danger:#fca5a5;
background:
radial-gradient(1200px 600px at 80% -10%,rgba(139,92,246,.16),transparent 60%),
radial-gradient(900px 500px at -10% 20%,rgba(99,102,241,.10),transparent 55%),
var(--dv-bg);
color:var(--dv-fg);
font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
font-weight:400;
}
#dialer-view *{box-sizing:border-box}
#dialer-view .dv-shell{max-width: 100%;margin:0 auto;flex:1;overflow-y:auto;padding:34px 22px 120px}
/* Header — mesma linguagem do landing */
#dialer-view .dv-eyebrow{
display:inline-flex;align-items:center;gap:8px;
padding:6px 11px;border-radius:999px;
background:rgba(139,92,246,.10);border:1px solid rgba(139,92,246,.30);
color:var(--dv-accent);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
margin-bottom:14px;
}
#dialer-view .dv-eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--dv-primary-2);box-shadow:0 0 8px var(--dv-primary-2)}
#dialer-view .dv-title{
font-size:32px;font-weight:700;letter-spacing:-.02em;line-height:1.12;margin:0 0 8px;
background:linear-gradient(135deg,#fff 0%,#c4b5fd 100%);
-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
#dialer-view .dv-title b{font-weight:700;font-style:normal}
#dialer-view .dv-subtitle{color:var(--dv-muted);font-size:13.5px;line-height:1.55;max-width: 100%;margin:0 0 26px}
/* Tabs — pill suave, igual subtabs do home */
#dialer-view .dialer-tabs{
display:inline-flex;gap:4px;padding:5px;margin:0 0 22px;
background:var(--dv-surface);border:1px solid var(--dv-line);
border-radius:14px;box-shadow:0 1px 0 rgba(255,255,255,.03) inset;
width:auto;
}
#dialer-view .dialer-tab{
background:transparent;border:0;
padding:9px 18px;border-radius:10px;font-size:13px;font-weight:600;letter-spacing:.01em;
color:var(--dv-muted);cursor:pointer;font-family:inherit;
transition:color .2s ease,background .2s ease,box-shadow .2s ease;
}
#dialer-view .dialer-tab:hover{color:var(--dv-fg)}
#dialer-view .dialer-tab.active{
color:#fff;
background:linear-gradient(135deg,var(--dv-primary),var(--dv-primary-2));
box-shadow:0 6px 18px -6px var(--dv-glow),0 1px 0 rgba(255,255,255,.15) inset;
}
#dialer-view .dialer-tab.active::after{display:none}
#dialer-view .dialer-subpanel{display:none}
#dialer-view .dialer-subpanel.active{display:block;animation:sub-in .24s cubic-bezier(.22,.61,.36,1) both}
/* Cards */
#dialer-view .dv-card{
background:linear-gradient(180deg,var(--dv-surface-2) 0%,var(--dv-surface) 100%);
border:1px solid var(--dv-line);border-radius:18px;padding:22px;
transition:border-color .25s ease,box-shadow .25s ease;
}
#dialer-view .dv-card:hover{border-color:var(--dv-line-2)}
#dialer-view .dv-card+.dv-card{margin-top:14px}
#dialer-view .dv-card-title{
font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.18em;
color:var(--dv-muted);margin:0 0 16px;
display:inline-flex;align-items:center;gap:10px;
}
#dialer-view .dv-card-title::before{content:"";width:14px;height:1px;background:linear-gradient(90deg,var(--dv-primary),transparent)}
#dialer-view .dv-hint{font-size:12px;color:var(--dv-subtle);line-height:1.55;margin-top:10px}
/* Status display (auto) */
#dialer-view .dv-status-display{
background:linear-gradient(180deg,var(--dv-surface-2) 0%,var(--dv-surface) 100%);
border:1px solid var(--dv-line);border-radius:22px;
padding:38px 24px;text-align:center;margin-bottom:14px;position:relative;overflow:hidden;
}
#dialer-view .dv-status-display::before{
content:"";position:absolute;right:-60px;top:-60px;width:200px;height:200px;border-radius:50%;
background:radial-gradient(closest-side,rgba(139,92,246,.18),transparent 70%);pointer-events:none;
}
#dialer-view #d-contact-name{font-size:11px;font-weight:600;color:var(--dv-subtle);margin-bottom:14px;letter-spacing:.22em;text-transform:uppercase}
#dialer-view #d-number-big{font-size:38px;font-weight:600;color:var(--dv-fg);margin-bottom:12px;letter-spacing:.03em;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
#dialer-view #d-call-status{font-size:10px;color:var(--dv-accent);text-transform:uppercase;letter-spacing:.28em;font-weight:600;min-height:14px}
#dialer-view #d-call-status:empty::before{content:"Aguardando"}
#dialer-view #d-call-timer{font-size:14px;font-weight:500;color:var(--dv-ok);margin-top:10px;font-variant-numeric:tabular-nums;letter-spacing:.05em}
/* Demo banner */
#dialer-view .dialer-demo-note{
background:rgba(252,211,77,.05);color:var(--dv-warn);border:1px solid rgba(252,211,77,.22);
padding:11px;border-radius:12px;font-size:11px;text-align:center;margin-bottom:18px;
letter-spacing:.14em;font-weight:600;text-transform:uppercase;
}
/* Chips */
#dialer-view .chip-row{display:flex;gap:8px;margin:0 0 18px}
#dialer-view .chip-pill{
flex:1;text-align:center;padding:12px 14px;border-radius:12px;
background:transparent;border:1px solid var(--dv-line);color:var(--dv-muted);
font-size:13px;font-weight:600;cursor:pointer;transition:all .25s ease;
}
#dialer-view .chip-pill:hover{border-color:var(--dv-line-2);color:var(--dv-fg);background:rgba(255,255,255,.02)}
#dialer-view .chip-pill.on{
background:linear-gradient(135deg,rgba(139,92,246,.18),rgba(99,102,241,.10));
border-color:rgba(196,181,253,.45);color:#fff;
box-shadow:0 6px 18px -8px var(--dv-glow);
}
/* Inputs */
#dialer-view .dinput,#dialer-view input[type="tel"],#dialer-view input[type="search"],
#dialer-view input[type="text"].dinput,#dialer-view select.dinput{
width:100%;background:rgba(0,0,0,.30);border:1px solid var(--dv-line);
color:var(--dv-fg);font-size:14px;padding:13px 16px;border-radius:12px;outline:none;
transition:border-color .2s ease,box-shadow .2s ease;font-family:inherit;font-weight:500;
}
#dialer-view .dinput:focus,#dialer-view input:focus{border-color:var(--dv-accent);box-shadow:0 0 0 3px rgba(139,92,246,.12)}
#dialer-view .dinput::placeholder,#dialer-view input::placeholder{color:var(--dv-subtle)}
#dialer-view .dv-label{font-size:11px;color:var(--dv-subtle);margin-bottom:9px;text-transform:uppercase;letter-spacing:.18em;font-weight:600}
/* Slider */
#dialer-view .dslider-row{display:flex;align-items:center;gap:14px;margin-bottom:6px}
#dialer-view .dslider-row span{font-size:10px;color:var(--dv-subtle);text-transform:uppercase;letter-spacing:.2em;font-weight:600}
#dialer-view .dslider{flex:1;-webkit-appearance:none;appearance:none;height:3px;background:var(--dv-line-2);border-radius:999px;outline:none}
#dialer-view .dslider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:var(--dv-accent);border:0;cursor:pointer;transition:transform .15s;box-shadow:0 0 0 4px rgba(139,92,246,.18)}
#dialer-view .dslider::-webkit-slider-thumb:hover{transform:scale(1.15)}
#dialer-view .dslider::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--dv-accent);border:0;cursor:pointer}
#dialer-view .dslider-val{background:transparent;color:var(--dv-fg);padding:0;font-weight:600;font-size:15px;min-width:42px;text-align:right;font-variant-numeric:tabular-nums;border:0;letter-spacing:.02em}
/* Tag filters */
#dialer-view #d-tag-filters{display:flex;flex-wrap:wrap;gap:8px}
#dialer-view #d-tag-filters label{
display:inline-flex;align-items:center;gap:8px;font-size:12px;cursor:pointer;
background:transparent;padding:8px 14px;border-radius:999px;border:1px solid var(--dv-line);
color:var(--dv-muted);transition:all .2s;font-weight:600;
}
#dialer-view #d-tag-filters label:hover{border-color:var(--dv-line-2);color:var(--dv-fg);background:rgba(255,255,255,.02)}
#dialer-view #d-tag-filters input[type=checkbox]{accent-color:var(--dv-primary);width:12px;height:12px}
/* Info pill */
#dialer-view #d-leads-info{
font-size:12px;color:var(--dv-muted);padding:14px 16px;
background:rgba(0,0,0,.28);border-radius:12px;border:1px solid var(--dv-line);
border-left:2px solid var(--dv-primary);margin:18px 0 14px;line-height:1.55;
}
#dialer-view .dialer-status-pill{
display:inline-flex;align-items:center;gap:10px;background:transparent;
padding:0 0 14px;font-size:11px;text-transform:uppercase;letter-spacing:.18em;
margin-bottom:14px;color:var(--dv-muted);border:0;font-weight:600;
}
#dialer-view .dialer-status-pill::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--dv-accent);box-shadow:0 0 10px var(--dv-primary)}
/* Call log */
#dialer-view .call-log{
background:rgba(0,0,0,.28);border-radius:12px;padding:16px;max-height:240px;overflow-y:auto;
border:1px solid var(--dv-line);font-size:12px;color:var(--dv-muted);line-height:1.6;
}
#dialer-view .call-log::-webkit-scrollbar, #dialer-view #phone-history-list::-webkit-scrollbar {width:8px;height:8px}
#dialer-view .call-log::-webkit-scrollbar-track, #dialer-view #phone-history-list::-webkit-scrollbar-track {background:#000}
#dialer-view .call-log::-webkit-scrollbar-thumb, #dialer-view #phone-history-list::-webkit-scrollbar-thumb {background:linear-gradient(135deg,#6d28d9,#1e3a8a);border-radius:4px}
#dialer-view .call-log::-webkit-scrollbar-thumb:hover, #dialer-view #phone-history-list::-webkit-scrollbar-thumb:hover {background:linear-gradient(135deg,#8b5cf6,#3b82f6)}
/* Buttons */
#dialer-view .modern-btn-primary,#dialer-view .modern-btn-secondary{
font-family:inherit;font-weight:700;letter-spacing:.12em;padding:15px 22px;
border-radius:999px;cursor:pointer;transition:all .25s ease;border:1px solid transparent;
text-transform:uppercase;font-size:11px;
}
#dialer-view .modern-btn-primary{
background:linear-gradient(135deg,var(--dv-primary),var(--dv-primary-2));color:#fff;
box-shadow:0 10px 28px -10px var(--dv-glow);
}
#dialer-view .modern-btn-primary:hover{transform:translateY(-1px);box-shadow:0 14px 32px -10px var(--dv-glow)}
#dialer-view .modern-btn-primary:disabled{opacity:.4;cursor:not-allowed;transform:none}
#dialer-view .modern-btn-secondary{background:transparent;color:var(--dv-fg);border-color:var(--dv-line-2)}
#dialer-view .modern-btn-secondary:hover{border-color:var(--dv-accent);color:var(--dv-accent);background:rgba(139,92,246,.06)}
#dialer-view .modern-btn-secondary:disabled{opacity:.35;cursor:not-allowed}
#dialer-view .dialer-ctrl-row{display:flex;gap:12px;margin-top:24px}
/* ===== PHONE ===== */
#dialer-view #dialer-panel-phone.active{display:flex;flex-direction:column;gap:24px}
#dialer-view .dv-phone-grid{display:flex;flex-direction:column;gap:24px}
#dialer-view .dv-phone-card{
background:linear-gradient(180deg,var(--dv-surface-2) 0%,#0c0b14 100%);
border:1px solid var(--dv-line);border-radius:32px;
padding:32px 26px;position:relative;overflow:hidden;
width:100%;max-width:420px;margin:0 auto;
min-height:calc(100vh - 240px);display:flex;flex-direction:column;
box-shadow:0 30px 80px -30px rgba(0,0,0,.6),0 1px 0 rgba(255,255,255,.05) inset;
}
#dialer-view .dv-phone-card::before{
content:"";position:absolute;top:14px;left:50%;transform:translateX(-50%);
width:48px;height:4px;border-radius:999px;background:var(--dv-line-2);
}
#dialer-view .phone-display{
font-size:32px;font-weight:600;text-align:center;color:var(--dv-fg);
letter-spacing:.04em;min-height:72px;margin:28px 0;padding:18px 12px;
background:transparent;border:0;
border-radius:0;font-variant-numeric:tabular-nums;
overflow:hidden;word-break:break-all;white-space:normal;
}
#dialer-view .phone-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin-bottom:24px;flex:1;align-content:center}
#dialer-view .modern-phone-key{
aspect-ratio:1/1;background:transparent;border:none;
color:var(--dv-fg);font-size:26px;font-weight:400;border-radius:50%;cursor:pointer;
transition:all .18s ease;font-family:inherit;display:flex;align-items:center;justify-content:center;
letter-spacing:.02em;min-height:58px;
}
#dialer-view .modern-phone-key:hover{border-color:var(--dv-accent);color:var(--dv-accent);background:rgba(139,92,246,.06)}
#dialer-view .modern-phone-key:active{transform:scale(.96);background:rgba(139,92,246,.16);border-color:var(--dv-primary);color:#fff}
#dialer-view .phone-actions{display:flex;gap:10px;margin-bottom:12px}
#dialer-view .phone-call-btn,#dialer-view .phone-hang-btn{
border:1px solid transparent;border-radius:999px;font-size:11px;font-weight:700;
padding:18px;cursor:pointer;transition:all .25s ease;letter-spacing:.16em;
font-family:inherit;text-transform:uppercase;
}
#dialer-view .phone-call-btn{
flex:2;background:linear-gradient(135deg,var(--dv-primary),var(--dv-primary-2));color:#fff;
box-shadow:0 10px 28px -10px var(--dv-glow);
}
#dialer-view .phone-call-btn:hover{transform:translateY(-1px);box-shadow:0 14px 32px -10px var(--dv-glow)}
#dialer-view .phone-hang-btn{flex:1;background:transparent;color:var(--dv-fg);border-color:var(--dv-line-2)}
#dialer-view .phone-hang-btn:hover{border-color:var(--dv-danger);color:var(--dv-danger);background:rgba(248,113,113,.06)}
#dialer-view .dv-erase{
width:100%;background:transparent;border:0;color:var(--dv-subtle);
font-size:10px;padding:12px;border-radius:0;cursor:pointer;transition:color .2s;
font-family:inherit;letter-spacing:.24em;text-transform:uppercase;font-weight:700;
}
#dialer-view .dv-erase:hover{color:var(--dv-accent)}
/* Scroll hint */
#dialer-view .dv-scroll-hint{
text-align:center;color:var(--dv-subtle);font-size:10px;
letter-spacing:.28em;text-transform:uppercase;font-weight:700;
margin:8px 0 4px;opacity:.7;
}
#dialer-view .dv-scroll-hint::after{content:"";display:block;width:1px;height:22px;background:linear-gradient(180deg,var(--dv-line-2),transparent);margin:8px auto 0}
/* History */
#dialer-view .dv-history{
background:linear-gradient(180deg,var(--dv-surface-2) 0%,var(--dv-surface) 100%);
border:1px solid var(--dv-line);border-radius:22px;padding:24px;
max-width: 100%;margin:0 auto;width:100%;
}
#dialer-view .dv-history-title{
font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.18em;
color:var(--dv-muted);padding-bottom:18px;border-bottom:1px solid var(--dv-line);
margin-bottom:16px;display:flex;align-items:center;gap:10px;
}
#dialer-view .dv-history-title::before{content:"";width:14px;height:1px;background:linear-gradient(90deg,var(--dv-primary),transparent)}
#dialer-view .dv-history-search{margin-bottom:14px;position:relative}
#dialer-view .dv-history-search input{
width:100%;background:rgba(0,0,0,.28);border:1px solid var(--dv-line);color:var(--dv-fg);
font-size:13px;padding:12px 14px 12px 38px;border-radius:12px;outline:none;
font-family:inherit;font-weight:500;transition:border-color .2s;
}
#dialer-view .dv-history-search input:focus{border-color:var(--dv-accent)}
#dialer-view .dv-history-search::before{content:"";position:absolute;left:14px;top:50%;transform:translateY(-50%);width:14px;height:14px;border:1.5px solid var(--dv-subtle);border-radius:50%;pointer-events:none}
#dialer-view .dv-history-search::after{content:"";position:absolute;left:24px;top:calc(50% + 5px);width:7px;height:1.5px;background:var(--dv-subtle);transform:rotate(45deg);border-radius:2px;pointer-events:none}
#dialer-view #phone-history-list{min-height:80px;font-size:13px;color:var(--dv-muted);font-weight:400;max-height:50vh;overflow-y:auto}
#dialer-view #phone-history-list:empty::before{content:"Nenhum registro até o momento.";display:block;text-align:center;color:var(--dv-subtle);font-size:12px;padding:32px 0;letter-spacing:.02em}
/* Extracted from index.html */
/* ===== Central de Chamadas — MERK PRAXIS (elegante, minimalista, charmoso) ===== */
#dialer-view{
--dv-bg:#09080d;--dv-surface:#11101a;--dv-surface-2:#16151f;
--dv-line:rgba(255,255,255,.07);--dv-line-2:rgba(255,255,255,.14);
--dv-fg:#f5f3ff;--dv-muted:#a1a1aa;--dv-subtle:#71717a;
--dv-primary:#8b5cf6;--dv-primary-2:#6366f1;--dv-accent:#c4b5fd;--dv-accent-2:#e9d5ff;
--dv-glow:rgba(139,92,246,.55);
--dv-ok:#86efac;--dv-warn:#fcd34d;--dv-danger:#fca5a5;
background:
radial-gradient(1200px 600px at 80% -10%,rgba(139,92,246,.16),transparent 60%),
radial-gradient(900px 500px at -10% 20%,rgba(99,102,241,.10),transparent 55%),
var(--dv-bg);
color:var(--dv-fg);
font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
font-weight:400;
}
#dialer-view *{box-sizing:border-box}
#dialer-view .dv-shell{max-width: 100%;margin:0 auto;flex:1;overflow-y:auto;padding:34px 22px 120px}
/* Header — mesma linguagem do landing */
#dialer-view .dv-eyebrow{
display:inline-flex;align-items:center;gap:8px;
padding:6px 11px;border-radius:999px;
background:rgba(139,92,246,.10);border:1px solid rgba(139,92,246,.30);
color:var(--dv-accent);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
margin-bottom:14px;
}
#dialer-view .dv-eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--dv-primary-2);box-shadow:0 0 8px var(--dv-primary-2)}
#dialer-view .dv-title{
font-size:32px;font-weight:700;letter-spacing:-.02em;line-height:1.12;margin:0 0 8px;
background:linear-gradient(135deg,#fff 0%,#c4b5fd 100%);
-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
#dialer-view .dv-title b{font-weight:700;font-style:normal}
#dialer-view .dv-subtitle{color:var(--dv-muted);font-size:13.5px;line-height:1.55;max-width: 100%;margin:0 0 26px}
/* Tabs — pill suave, igual subtabs do home */
#dialer-view .dialer-tabs{
display:inline-flex;gap:4px;padding:5px;margin:0 0 22px;
background:var(--dv-surface);border:1px solid var(--dv-line);
border-radius:14px;box-shadow:0 1px 0 rgba(255,255,255,.03) inset;
width:auto;
}
#dialer-view .dialer-tab{
background:transparent;border:0;
padding:9px 18px;border-radius:10px;font-size:13px;font-weight:600;letter-spacing:.01em;
color:var(--dv-muted);cursor:pointer;font-family:inherit;
transition:color .2s ease,background .2s ease,box-shadow .2s ease;
}
#dialer-view .dialer-tab:hover{color:var(--dv-fg)}
#dialer-view .dialer-tab.active{
color:#fff;
background:linear-gradient(135deg,var(--dv-primary),var(--dv-primary-2));
box-shadow:0 6px 18px -6px var(--dv-glow),0 1px 0 rgba(255,255,255,.15) inset;
}
#dialer-view .dialer-tab.active::after{display:none}
#dialer-view .dialer-subpanel{display:none}
#dialer-view .dialer-subpanel.active{display:block;animation:sub-in .24s cubic-bezier(.22,.61,.36,1) both}
/* Cards */
#dialer-view .dv-card{
background:linear-gradient(180deg,var(--dv-surface-2) 0%,var(--dv-surface) 100%);
border:1px solid var(--dv-line);border-radius:18px;padding:22px;
transition:border-color .25s ease,box-shadow .25s ease;
}
#dialer-view .dv-card:hover{border-color:var(--dv-line-2)}
#dialer-view .dv-card+.dv-card{margin-top:14px}
#dialer-view .dv-card-title{
font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.18em;
color:var(--dv-muted);margin:0 0 16px;
display:inline-flex;align-items:center;gap:10px;
}
#dialer-view .dv-card-title::before{content:"";width:14px;height:1px;background:linear-gradient(90deg,var(--dv-primary),transparent)}
#dialer-view .dv-hint{font-size:12px;color:var(--dv-subtle);line-height:1.55;margin-top:10px}
/* Status display (auto) */
#dialer-view .dv-status-display{
background:linear-gradient(180deg,var(--dv-surface-2) 0%,var(--dv-surface) 100%);
border:1px solid var(--dv-line);border-radius:22px;
padding:38px 24px;text-align:center;margin-bottom:14px;position:relative;overflow:hidden;
}
#dialer-view .dv-status-display::before{
content:"";position:absolute;right:-60px;top:-60px;width:200px;height:200px;border-radius:50%;
background:radial-gradient(closest-side,rgba(139,92,246,.18),transparent 70%);pointer-events:none;
}
#dialer-view #d-contact-name{font-size:11px;font-weight:600;color:var(--dv-subtle);margin-bottom:14px;letter-spacing:.22em;text-transform:uppercase}
#dialer-view #d-number-big{font-size:38px;font-weight:600;color:var(--dv-fg);margin-bottom:12px;letter-spacing:.03em;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
#dialer-view #d-call-status{font-size:10px;color:var(--dv-accent);text-transform:uppercase;letter-spacing:.28em;font-weight:600;min-height:14px}
#dialer-view #d-call-status:empty::before{content:"Aguardando"}
#dialer-view #d-call-timer{font-size:14px;font-weight:500;color:var(--dv-ok);margin-top:10px;font-variant-numeric:tabular-nums;letter-spacing:.05em}
/* Demo banner */
#dialer-view .dialer-demo-note{
background:rgba(252,211,77,.05);color:var(--dv-warn);border:1px solid rgba(252,211,77,.22);
padding:11px;border-radius:12px;font-size:11px;text-align:center;margin-bottom:18px;
letter-spacing:.14em;font-weight:600;text-transform:uppercase;
}
/* Chips */
#dialer-view .chip-row{display:flex;gap:8px;margin:0 0 18px}
#dialer-view .chip-pill{
flex:1;text-align:center;padding:12px 14px;border-radius:12px;
background:transparent;border:1px solid var(--dv-line);color:var(--dv-muted);
font-size:13px;font-weight:600;cursor:pointer;transition:all .25s ease;
}
#dialer-view .chip-pill:hover{border-color:var(--dv-line-2);color:var(--dv-fg);background:rgba(255,255,255,.02)}
#dialer-view .chip-pill.on{
background:linear-gradient(135deg,rgba(139,92,246,.18),rgba(99,102,241,.10));
border-color:rgba(196,181,253,.45);color:#fff;
box-shadow:0 6px 18px -8px var(--dv-glow);
}
/* Inputs */
#dialer-view .dinput,#dialer-view input[type="tel"],#dialer-view input[type="search"],
#dialer-view input[type="text"].dinput,#dialer-view select.dinput{
width:100%;background:rgba(0,0,0,.30);border:1px solid var(--dv-line);
color:var(--dv-fg);font-size:14px;padding:13px 16px;border-radius:12px;outline:none;
transition:border-color .2s ease,box-shadow .2s ease;font-family:inherit;font-weight:500;
}
#dialer-view .dinput:focus,#dialer-view input:focus{border-color:var(--dv-accent);box-shadow:0 0 0 3px rgba(139,92,246,.12)}
#dialer-view .dinput::placeholder,#dialer-view input::placeholder{color:var(--dv-subtle)}
#dialer-view .dv-label{font-size:11px;color:var(--dv-subtle);margin-bottom:9px;text-transform:uppercase;letter-spacing:.18em;font-weight:600}
/* Slider */
#dialer-view .dslider-row{display:flex;align-items:center;gap:14px;margin-bottom:6px}
#dialer-view .dslider-row span{font-size:10px;color:var(--dv-subtle);text-transform:uppercase;letter-spacing:.2em;font-weight:600}
#dialer-view .dslider{flex:1;-webkit-appearance:none;appearance:none;height:3px;background:var(--dv-line-2);border-radius:999px;outline:none}
#dialer-view .dslider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:var(--dv-accent);border:0;cursor:pointer;transition:transform .15s;box-shadow:0 0 0 4px rgba(139,92,246,.18)}
#dialer-view .dslider::-webkit-slider-thumb:hover{transform:scale(1.15)}
#dialer-view .dslider::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--dv-accent);border:0;cursor:pointer}
#dialer-view .dslider-val{background:transparent;color:var(--dv-fg);padding:0;font-weight:600;font-size:15px;min-width:42px;text-align:right;font-variant-numeric:tabular-nums;border:0;letter-spacing:.02em}
/* Tag filters */
#dialer-view #d-tag-filters{display:flex;flex-wrap:wrap;gap:8px}
#dialer-view #d-tag-filters label{
display:inline-flex;align-items:center;gap:8px;font-size:12px;cursor:pointer;
background:transparent;padding:8px 14px;border-radius:999px;border:1px solid var(--dv-line);
color:var(--dv-muted);transition:all .2s;font-weight:600;
}
#dialer-view #d-tag-filters label:hover{border-color:var(--dv-line-2);color:var(--dv-fg);background:rgba(255,255,255,.02)}
#dialer-view #d-tag-filters input[type=checkbox]{accent-color:var(--dv-primary);width:12px;height:12px}
/* Info pill */
#dialer-view #d-leads-info{
font-size:12px;color:var(--dv-muted);padding:14px 16px;
background:rgba(0,0,0,.28);border-radius:12px;border:1px solid var(--dv-line);
border-left:2px solid var(--dv-primary);margin:18px 0 14px;line-height:1.55;
}
#dialer-view .dialer-status-pill{
display:inline-flex;align-items:center;gap:10px;background:transparent;
padding:0 0 14px;font-size:11px;text-transform:uppercase;letter-spacing:.18em;
margin-bottom:14px;color:var(--dv-muted);border:0;font-weight:600;
}
#dialer-view .dialer-status-pill::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--dv-accent);box-shadow:0 0 10px var(--dv-primary)}
/* Call log */
#dialer-view .call-log{
background:rgba(0,0,0,.28);border-radius:12px;padding:16px;max-height:240px;overflow-y:auto;
border:1px solid var(--dv-line);font-size:12px;color:var(--dv-muted);line-height:1.6;
}
#dialer-view .call-log::-webkit-scrollbar, #dialer-view #phone-history-list::-webkit-scrollbar {width:8px;height:8px}
#dialer-view .call-log::-webkit-scrollbar-track, #dialer-view #phone-history-list::-webkit-scrollbar-track {background:#000}
#dialer-view .call-log::-webkit-scrollbar-thumb, #dialer-view #phone-history-list::-webkit-scrollbar-thumb {background:linear-gradient(135deg,#6d28d9,#1e3a8a);border-radius:4px}
#dialer-view .call-log::-webkit-scrollbar-thumb:hover, #dialer-view #phone-history-list::-webkit-scrollbar-thumb:hover {background:linear-gradient(135deg,#8b5cf6,#3b82f6)}
/* Buttons */
#dialer-view .modern-btn-primary,#dialer-view .modern-btn-secondary{
font-family:inherit;font-weight:700;letter-spacing:.12em;padding:15px 22px;
border-radius:999px;cursor:pointer;transition:all .25s ease;border:1px solid transparent;
text-transform:uppercase;font-size:11px;
}
#dialer-view .modern-btn-primary{
background:linear-gradient(135deg,var(--dv-primary),var(--dv-primary-2));color:#fff;
box-shadow:0 10px 28px -10px var(--dv-glow);
}
#dialer-view .modern-btn-primary:hover{transform:translateY(-1px);box-shadow:0 14px 32px -10px var(--dv-glow)}
#dialer-view .modern-btn-primary:disabled{opacity:.4;cursor:not-allowed;transform:none}
#dialer-view .modern-btn-secondary{background:transparent;color:var(--dv-fg);border-color:var(--dv-line-2)}
#dialer-view .modern-btn-secondary:hover{border-color:var(--dv-accent);color:var(--dv-accent);background:rgba(139,92,246,.06)}
#dialer-view .modern-btn-secondary:disabled{opacity:.35;cursor:not-allowed}
#dialer-view .dialer-ctrl-row{display:flex;gap:12px;margin-top:24px}
/* ===== PHONE ===== */
#dialer-view #dialer-panel-phone.active{display:flex;flex-direction:column;gap:24px}
#dialer-view .dv-phone-grid{display:flex;flex-direction:column;gap:24px}
#dialer-view .dv-phone-card{
background:linear-gradient(180deg,var(--dv-surface-2) 0%,#0c0b14 100%);
border:1px solid var(--dv-line);border-radius:32px;
padding:32px 26px;position:relative;overflow:hidden;
width:100%;max-width:420px;margin:0 auto;
min-height:calc(100vh - 240px);display:flex;flex-direction:column;
box-shadow:0 30px 80px -30px rgba(0,0,0,.6),0 1px 0 rgba(255,255,255,.05) inset;
}
#dialer-view .dv-phone-card::before{
content:"";position:absolute;top:14px;left:50%;transform:translateX(-50%);
width:48px;height:4px;border-radius:999px;background:var(--dv-line-2);
}
#dialer-view .phone-display{
font-size:32px;font-weight:600;text-align:center;color:var(--dv-fg);
letter-spacing:.04em;min-height:72px;margin:28px 0;padding:18px 12px;
background:transparent;border:0;
border-radius:0;font-variant-numeric:tabular-nums;
overflow:hidden;word-break:break-all;white-space:normal;
}
#dialer-view .phone-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin-bottom:24px;flex:1;align-content:center}
#dialer-view .modern-phone-key{
aspect-ratio:1/1;background:transparent;border:none;
color:var(--dv-fg);font-size:26px;font-weight:400;border-radius:50%;cursor:pointer;
transition:all .18s ease;font-family:inherit;display:flex;align-items:center;justify-content:center;
letter-spacing:.02em;min-height:58px;
}
#dialer-view .modern-phone-key:hover{border-color:var(--dv-accent);color:var(--dv-accent);background:rgba(139,92,246,.06)}
#dialer-view .modern-phone-key:active{transform:scale(.96);background:rgba(139,92,246,.16);border-color:var(--dv-primary);color:#fff}
#dialer-view .phone-actions{display:flex;gap:10px;margin-bottom:12px}
#dialer-view .phone-call-btn,#dialer-view .phone-hang-btn{
border:1px solid transparent;border-radius:999px;font-size:11px;font-weight:700;
padding:18px;cursor:pointer;transition:all .25s ease;letter-spacing:.16em;
font-family:inherit;text-transform:uppercase;
}
#dialer-view .phone-call-btn{
flex:2;background:linear-gradient(135deg,var(--dv-primary),var(--dv-primary-2));color:#fff;
box-shadow:0 10px 28px -10px var(--dv-glow);
}
#dialer-view .phone-call-btn:hover{transform:translateY(-1px);box-shadow:0 14px 32px -10px var(--dv-glow)}
#dialer-view .phone-hang-btn{flex:1;background:transparent;color:var(--dv-fg);border-color:var(--dv-line-2)}
#dialer-view .phone-hang-btn:hover{border-color:var(--dv-danger);color:var(--dv-danger);background:rgba(248,113,113,.06)}
#dialer-view .dv-erase{
width:100%;background:transparent;border:0;color:var(--dv-subtle);
font-size:10px;padding:12px;border-radius:0;cursor:pointer;transition:color .2s;
font-family:inherit;letter-spacing:.24em;text-transform:uppercase;font-weight:700;
}
#dialer-view .dv-erase:hover{color:var(--dv-accent)}
/* Scroll hint */
#dialer-view .dv-scroll-hint{
text-align:center;color:var(--dv-subtle);font-size:10px;
letter-spacing:.28em;text-transform:uppercase;font-weight:700;
margin:8px 0 4px;opacity:.7;
}
#dialer-view .dv-scroll-hint::after{content:"";display:block;width:1px;height:22px;background:linear-gradient(180deg,var(--dv-line-2),transparent);margin:8px auto 0}
/* History */
#dialer-view .dv-history{
background:linear-gradient(180deg,var(--dv-surface-2) 0%,var(--dv-surface) 100%);
border:1px solid var(--dv-line);border-radius:22px;padding:24px;
max-width: 100%;margin:0 auto;width:100%;
}
#dialer-view .dv-history-title{
font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.18em;
color:var(--dv-muted);padding-bottom:18px;border-bottom:1px solid var(--dv-line);
margin-bottom:16px;display:flex;align-items:center;gap:10px;
}
#dialer-view .dv-history-title::before{content:"";width:14px;height:1px;background:linear-gradient(90deg,var(--dv-primary),transparent)}
#dialer-view .dv-history-search{margin-bottom:14px;position:relative}
#dialer-view .dv-history-search input{
width:100%;background:rgba(0,0,0,.28);border:1px solid var(--dv-line);color:var(--dv-fg);
font-size:13px;padding:12px 14px 12px 38px;border-radius:12px;outline:none;
font-family:inherit;font-weight:500;transition:border-color .2s;
}
#dialer-view .dv-history-search input:focus{border-color:var(--dv-accent)}
#dialer-view .dv-history-search::before{content:"";position:absolute;left:14px;top:50%;transform:translateY(-50%);width:14px;height:14px;border:1.5px solid var(--dv-subtle);border-radius:50%;pointer-events:none}
#dialer-view .dv-history-search::after{content:"";position:absolute;left:24px;top:calc(50% + 5px);width:7px;height:1.5px;background:var(--dv-subtle);transform:rotate(45deg);border-radius:2px;pointer-events:none}
#dialer-view #phone-history-list{min-height:80px;font-size:13px;color:var(--dv-muted);font-weight:400;max-height:50vh;overflow-y:auto}
#dialer-view #phone-history-list:empty::before{content:"Nenhum registro até o momento.";display:block;text-align:center;color:var(--dv-subtle);font-size:12px;padding:32px 0;letter-spacing:.02em}
.btn-call, .btn-end { border-radius: 12px !important; }
/* IN-APP CALL SCREEN OVERLAY */
.call-screen-overlay {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: linear-gradient(135deg, #111827 0%, #000000 100%);
z-index: 99999;
display: flex;
flex-direction: column;
color: white;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
font-family: var(--font, 'Inter', sans-serif);
}
.call-screen-overlay.active {
opacity: 1;
pointer-events: auto;
}
.call-screen-content {
display: flex;
flex-direction: column;
height: 100%;
padding: 40px 20px;
box-sizing: border-box;
}
.call-header {
text-align: center;
margin-bottom: 40px;
}
.call-status {
font-size: 16px;
color: rgba(255, 255, 255, 0.7);
letter-spacing: 1px;
}
.call-profile {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 15px;
}
.call-avatar {
width: 120px;
height: 120px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.1);
display: flex;
align-items: center;
justify-content: center;
font-size: 60px;
margin-bottom: 10px;
box-shadow: 0 0 30px rgba(255,255,255,0.05);
}
.call-name {
font-size: 28px;
font-weight: 600;
text-align: center;
}
.call-number {
font-size: 18px;
color: rgba(255, 255, 255, 0.6);
}
.call-timer {
font-size: 22px;
font-family: monospace;
margin-top: 10px;
color: rgba(255, 255, 255, 0.9);
}
.call-controls {
padding-bottom: 20px;
}
.call-btn-row {
display: flex;
justify-content: space-around;
margin-bottom: 40px;
}
.call-action-btn {
background: transparent;
border: none;
color: white;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
cursor: pointer;
opacity: 0.8;
transition: 0.2s;
}
.call-action-btn:hover { opacity: 1; }
.call-action-btn .icon {
width: 50px;
height: 50px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.15);
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
}
.call-action-btn.active .icon {
background: white;
color: black;
}
.call-action-btn .label {
font-size: 12px;
}
.call-end-row {
display: flex;
justify-content: center;
}
.call-end-btn {
width: 70px;
height: 70px;
border-radius: 50%;
background: #ef4444;
color: white;
border: none;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 4px 15px rgba(239, 68, 68, 0.4);
transition: transform 0.2s;
}
.call-end-btn:active {
transform: scale(0.92);
}
/* ========================================================= */
/* FOSSIFY DIALER STYLES (MATERIAL DARK & ORANGE) */
/* ========================================================= */
.fossify-dialer-panel {
display: flex !important;
flex-direction: column;
height: 100%;
background-color: #121212; /* Material Dark Background */
color: #ffffff;
font-family: 'Roboto', 'Inter', sans-serif;
overflow: hidden;
/* position: absolute; */
top: 0;
left: 0;
width: 100%;
z-index: 10;
}
.fd-top-area {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
padding: 24px;
background-color: #121212;
}
.fd-display-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100px;
}
.fd-phone-display {
font-size: 48px;
font-weight: 300;
letter-spacing: 2px;
color: #ffffff;
text-align: center;
word-break: break-all;
min-height: 60px;
}
.fd-bottom-area {
background-color: #1a1a1a;
border-top: 1px solid #2a2a2a;
padding: 24px 20px 48px;
display: flex;
flex-direction: column;
align-items: center;
}
.fd-numpad {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px 32px;
width: 100%;
max-width: 320px;
margin-bottom: 32px;
}
.fd-key {
background: transparent;
border: none;
border-radius: 50%;
aspect-ratio: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background-color 0.2s;
user-select: none;
-webkit-tap-highlight-color: transparent;
}
.fd-key:active {
background-color: rgba(255, 255, 255, 0.1);
}
.fd-num {
font-size: 34px;
font-weight: 400;
color: #ffffff;
line-height: 1;
}
.fd-sub {
font-size: 11px;
font-weight: 500;
color: #999999;
letter-spacing: 1.5px;
margin-top: 4px;
min-height: 14px;
text-transform: uppercase;
}
.fd-key-special .fd-num {
font-size: 40px;
color: #aaaaaa;
}
.fd-call-action-row {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
align-items: center;
width: 100%;
max-width: 320px;
}
.fd-icon-btn {
background: transparent;
border: none;
color: #cccccc;
width: 56px;
height: 56px;
border-radius: 50%;
margin: 0 auto;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background-color 0.2s, color 0.2s;
}
.fd-icon-btn:active {
background-color: rgba(255, 255, 255, 0.1);
color: #ffffff;
}
.fd-fab-call {
width: 72px;
height: 72px;
border-radius: 50%;
background-color: #F57C00; /* Fossify Orange */
color: #ffffff;
border: none;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 12px rgba(245, 124, 0, 0.4);
cursor: pointer;
transition: transform 0.2s, box-shadow 0.2s;
-webkit-tap-highlight-color: transparent;
}
.fd-fab-call:active {
transform: scale(0.92);
box-shadow: 0 2px 6px rgba(245, 124, 0, 0.3);
}
/* Hide original dialer panel when this is active */
#dialer-panel-phone:not(.active) {
display: none !important;
}
.cursor-blink {
animation: blink 1s step-end infinite;
color: #F57C00;
font-weight: 200;
}
@keyframes blink { 50% { opacity: 0; } }
/* =========================================================
MerkDialer — Android-style dialer + AUTO mode (dark)
========================================================= */
#dialer-view{
--md-bg:#09080d; --md-surf:#14131c; --md-surf2:#1c1a26;
--md-line:rgba(255,255,255,.08); --md-fg:#f5f3ff;
--md-muted:#a1a1aa; --md-subtle:#71717a;
--md-primary:#8b5cf6; --md-primary-2:#6366f1;
--md-call:#22c55e; --md-call-glow:rgba(34,197,94,.45);
background:
radial-gradient(1200px 600px at 80% -10%,rgba(139,92,246,.16),transparent 60%),
radial-gradient(900px 500px at -10% 20%,rgba(99,102,241,.10),transparent 55%),
var(--md-bg);
color:var(--md-fg);
font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
}
.md-dialer{
max-width:480px; margin:0 auto; min-height:100%;
display:flex; flex-direction:column;
padding:4px 18px 28px; gap:4px;
}
.md-top{ text-align:center; padding-top:0px; }
.md-match{
display:none !important;
font-size:13px; color:var(--md-subtle); min-height:18px;
letter-spacing:.02em; transition:color .2s;
}
.md-match.match{ color:var(--md-primary); }
.md-match.match b{ color:#fff; font-weight:600; }
.md-match-sheet{ color:var(--md-muted); }
.md-match.nomatch{ color:#71717a; }
.md-number{
font-size:34px; font-weight:500; letter-spacing:-.01em;
min-height:48px; margin:8px 0 4px;
color:var(--md-fg); word-break:break-all;
}
.md-number:empty::before{
content: attr(data-placeholder);
color:var(--md-subtle); font-weight:400; opacity:.6;
}
.md-actions-top{
display:flex; justify-content:space-between; align-items:center;
padding:6px 4px 0;
}
.md-auto-btn{
background:#26252e;
border:1px solid rgba(255,255,255,.08);
color:#a1a1aa; padding:8px 14px; border-radius:999px;
font-size:12px; font-weight:700; letter-spacing:.12em;
display:inline-flex; align-items:center; gap:8px; cursor:pointer;
font-family:inherit; transition:all .2s;
}
.md-auto-btn:hover{ background:#2f2d38; color:#fff; transform:translateY(-1px); }
.md-auto-dot{ width:7px; height:7px; border-radius:50%; background:#71717a;
transition:background .2s, box-shadow .2s; }
.md-auto-btn.active{
background:linear-gradient(135deg,rgba(139,92,246,.22),rgba(99,102,241,.18));
border-color:rgba(139,92,246,.5); color:#fff;
box-shadow:0 0 0 1px rgba(139,92,246,.25), 0 6px 18px rgba(139,92,246,.18);
}
.md-auto-btn.active .md-auto-dot{ background:var(--md-primary); box-shadow:0 0 10px var(--md-primary); }
.md-back{
background:transparent; border:0; color:var(--md-muted);
width:44px; height:44px; border-radius:12px; cursor:pointer;
display:inline-flex; align-items:center; justify-content:center;
transition:background .15s,color .15s;
}
.md-back:hover{ background:rgba(255,255,255,.05); color:var(--md-fg); }
.md-pad{
display:grid; grid-template-columns:repeat(3, 104px); gap:12px;
margin:6px auto 0; justify-content:center;
}
.md-key{
background:var(--md-surf); border:1px solid var(--md-line);
border-radius:18px; padding:0;
color:var(--md-fg); cursor:pointer; font-family:inherit;
display:flex; flex-direction:column; align-items:center; justify-content:center;
width:104px; height:72px;
min-width:104px; min-height:72px;
max-width:104px; max-height:72px;
flex:0 0 auto;
transition:background .12s, border-color .12s, transform .08s;
-webkit-tap-highlight-color:transparent;
}
.md-key:hover{ background:var(--md-surf2); border-color:rgba(139,92,246,.35); }
.md-key:active{ transform:scale(.96); background:rgba(139,92,246,.18); }
.md-key .md-n{ font-size:26px; font-weight:500; line-height:1; }
.md-key .md-s { font-size:10px; color:var(--md-subtle); letter-spacing:.18em;
text-transform:uppercase; margin-top:4px; min-height:12px; }
.md-callrow{ display:flex; justify-content:center; margin-top:8px; }
.md-call{
width:68px; height:68px; border-radius:50%;
background:var(--md-call); color:#fff; border:0; cursor:pointer;
display:inline-flex; align-items:center; justify-content:center;
box-shadow:0 8px 24px rgba(124, 58, 237, 0.4), 0 0 0 6px rgba(124, 58, 237, 0.08);
transition:transform .12s, box-shadow .2s;
}
.md-call:hover{ transform:translateY(-2px); box-shadow:0 12px 30px rgba(124, 58, 237, 0.6), 0 0 0 8px rgba(124, 58, 237, 0.12); }
.md-call:active{ transform:scale(.94); }
/* ===== AUTO floating island ===== */
.md-auto-island{
position:fixed; right:18px; bottom:90px; z-index:9000;
width:min(360px, calc(100vw - 28px));
background:rgba(20,19,28,.92); backdrop-filter:blur(18px);
border:1px solid rgba(139,92,246,.28); border-radius:20px;
box-shadow:0 24px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.03) inset;
color:#f5f3ff; font-family:'Inter',sans-serif;
padding:16px; animation:mdIslandIn .22s ease-out;
}
@keyframes mdIslandIn{ from{opacity:0;transform:translateY(10px) scale(.97);} to{opacity:1;transform:none;} }
.md-ai-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.md-ai-title{ font-weight:700; font-size:14px; letter-spacing:.02em; }
.md-ai-close{ background:transparent; border:0; color:#a1a1aa; font-size:22px; cursor:pointer; line-height:1; padding:0 6px; }
.md-ai-close:hover{ color:#fff; }
.md-ai-section{ margin-bottom:14px; }
.md-ai-label{ display:flex; justify-content:space-between; font-size:11px;
color:#a1a1aa; letter-spacing:.1em; text-transform:uppercase; margin-bottom:8px; font-weight:600; }
.md-ai-label span{ color:#c4b5fd; }
.md-ai-range{ width:100%; -webkit-appearance:none; appearance:none; height:6px; border-radius:999px;
background:linear-gradient(90deg,#8b5cf6,#6366f1 60%,#27272a 60%,#27272a); outline:none; }
.md-ai-range::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none;
width:18px; height:18px; border-radius:50%; background:#fff;
border:2px solid #8b5cf6; cursor:pointer; box-shadow:0 2px 8px rgba(139,92,246,.5); }
.md-ai-range::-moz-range-thumb{ width:18px;height:18px;border-radius:50%;background:#fff;border:2px solid #8b5cf6;cursor:pointer; }
.md-ai-rangelegend{ display:flex; justify-content:space-between; font-size:10px; color:#71717a; margin-top:4px; }
.md-ai-chips { display:flex; flex-wrap:wrap; gap:6px; }
.md-ai-chip{
background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.07);
border-radius:999px; padding:6px 11px; font-size:12px; color:#e9d5ff; cursor:pointer;
display:inline-flex; align-items:center; gap:6px;
}
.md-ai-chip input{ accent-color:#8b5cf6; }
.md-ai-empty{ font-size:12px; color:#71717a; padding:4px 0; }
.md-ai-foot{ display:flex; align-items:center; gap:8px; padding-top:6px; border-top:1px solid rgba(255,255,255,.06); margin-top:8px; }
.md-ai-info{ flex:1; font-size:11px; color:#a1a1aa; }
.md-ai-sync, .md-ai-start{
background:rgba(139,92,246,.18); border:1px solid rgba(139,92,246,.35);
color:#f5f3ff; padding:8px 14px; border-radius:10px; font-weight:600;
font-size:12px; cursor:pointer; font-family:inherit; transition:all .15s;
}
.md-ai-start{ background:linear-gradient(135deg,#8b5cf6,#6366f1); border-color:transparent; }
.md-ai-sync:hover{ background:rgba(139,92,246,.32); }
.md-ai-start:hover{ filter:brightness(1.1); }
.md-ai-countdown{ margin-top:14px; padding:14px; border-radius:14px;
background:rgba(139,92,246,.08); border:1px solid rgba(139,92,246,.22); text-align:center; }
.md-ai-cd-label{ font-size:11px; color:#a1a1aa; letter-spacing:.12em; text-transform:uppercase; margin-bottom:4px; }
.md-ai-cd-num{ font-size:44px; font-weight:700; color:#c4b5fd; line-height:1; font-variant-numeric:tabular-nums; }
.md-ai-cd-stop{ margin-top:10px; background:rgba(239,68,68,.15); border:1px solid rgba(239,68,68,.35);
color:#fca5a5; padding:6px 14px; border-radius:10px; cursor:pointer; font-family:inherit; font-size:12px; font-weight:600; }
/* ===== Post-call modal ===== */
.md-postcall{
position:fixed; inset:0; z-index:10000;
background:rgba(9,8,13,.72); backdrop-filter:blur(8px);
display:flex; align-items:center; justify-content:center; padding:20px;
animation:mdFade .2s;
}
@keyframes mdFade{ from{opacity:0;} to{opacity:1;} }
.md-pc-card{
width:100%; max-width:420px; background:#14131c;
border:1px solid rgba(255,255,255,.08); border-radius:20px;
padding:22px; color:#f5f3ff; font-family:'Inter',sans-serif;
box-shadow:0 30px 60px rgba(0,0,0,.6);
animation:mdIslandIn .25s ease-out;
}
.md-pc-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; }
.md-pc-title{ font-weight:700; font-size:15px; }
.md-pc-close{ background:transparent; border:0; color:#a1a1aa; font-size:24px; cursor:pointer; line-height:1; }
.md-pc-contact{ padding:14px; background:rgba(139,92,246,.08); border:1px solid rgba(139,92,246,.18);
border-radius:12px; margin-bottom:16px; }
.md-pc-name{ font-size:16px; font-weight:600; }
.md-pc-num{ font-size:13px; color:#a1a1aa; margin-top:2px; font-variant-numeric:tabular-nums; }
.md-pc-label{ display:block; font-size:11px; color:#a1a1aa; letter-spacing:.1em;
text-transform:uppercase; margin:0 0 8px; font-weight:600; }
.md-pc-tags { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:16px; }
.md-pc-tag{
background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08);
border-radius:999px; padding:7px 12px; font-size:12px; color:#e4e4e7;
cursor:pointer; font-family:inherit; display:inline-flex; align-items:center; gap:7px;
transition:all .15s;
}
.md-pc-tag span{ width:8px; height:8px; border-radius:50%; background:var(--c,#71717a); }
.md-pc-tag:hover{ border-color:var(--c); }
.md-pc-tag.on{ background:color-mix(in srgb, var(--c) 18%, transparent); border-color:var(--c); color:#fff; }
.md-pc-note{
width:100%; background:#09080d; border:1px solid rgba(255,255,255,.08);
border-radius:12px; padding:11px 13px; color:#f5f3ff; font-family:inherit;
font-size:13px; resize:vertical; outline:none; transition:border-color .15s;
}
.md-pc-note:focus { border-color:rgba(139,92,246,.5); }
.md-pc-actions { display:flex; gap:8px; justify-content:flex-end; margin-top:16px; }
.md-pc-skip{ background:transparent; border:1px solid rgba(255,255,255,.1); color:#a1a1aa;
padding:9px 16px; border-radius:10px; cursor:pointer; font-family:inherit; font-size:13px; }
.md-pc-save{ background:linear-gradient(135deg,#8b5cf6,#6366f1); border:0; color:#fff;
padding:9px 18px; border-radius:10px; cursor:pointer; font-family:inherit; font-size:13px; font-weight:600; }
.md-pc-save:hover{ filter:brightness(1.1); }
@media(max-width:520px){
.md-auto-island{ right:10px; left:10px; width:auto; bottom:80px; }
.md-number{ font-size:30px; }
}
/* ===== Tabs Discador / Hist:rico ===== */
.md-tabs{
display:flex; gap:6px; background:var(--md-surf);
border:1px solid var(--md-line); border-radius:14px; padding:4px;
align-self:center; margin:0 auto;
}
.md-tab{
background:transparent; border:0; color:var(--md-muted);
padding:8px 18px; border-radius:10px; cursor:pointer;
font-family:inherit; font-size:13px; font-weight:600; letter-spacing:.02em;
transition:all .2s;
}
.md-tab:hover{ color:var(--md-fg); }
.md-tab.active{ background:linear-gradient(135deg,#8b5cf6,#6366f1); color:#fff; }
.md-pane{ display:none; flex-direction:column; gap:18px; }
.md-pane.active{ display:flex; }
/* ===== Match card (contato encontrado) ===== */
.md-match-card{
display:inline-flex; flex-direction:column; align-items:center; gap:4px;
background:rgba(139,92,246,.10); border:1px solid rgba(139,92,246,.28);
padding:8px 16px; border-radius:14px;
}
.md-match-name{ font-size:14px; color:#fff; }
.md-match-card .md-match-sheet{ font-size:11px; color:var(--md-muted); letter-spacing:.04em; text-transform:uppercase; }
.md-match-last{ font-size:11px; color:var(--md-subtle); margin-top:2px; }
/* ===== Hist:rico ===== */
.md-hist-head{
display:flex; justify-content:space-between; align-items:center;
font-size:14px; font-weight:600; color:var(--md-fg); padding:4px 4px 8px;
border-bottom:1px solid var(--md-line); margin-bottom:4px;
}
.md-hist-clear{
background:transparent; border:1px solid rgba(255,255,255,.1); color:var(--md-muted);
padding:5px 10px; border-radius:8px; cursor:pointer; font-family:inherit; font-size:11px;
}
.md-hist-clear:hover{ color:#fff; border-color:rgba(139,92,246,.5); }
.md-hist-list{ display:flex; flex-direction:column; gap:6px; max-height:60vh; overflow-y:auto; }
.md-hist-empty{ text-align:center; color:var(--md-subtle); padding:32px 8px; font-size:13px; }
.md-hist-item{
display:flex; justify-content:space-between; align-items:center; gap:12px;
background:var(--md-surf); border:1px solid var(--md-line); border-radius:12px;
padding:10px 14px; cursor:pointer; transition:background .12s, border-color .12s;
}
.md-hist-item:hover{ background:var(--md-surf2); border-color:rgba(139,92,246,.35); }
.md-hist-main{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.md-hist-name{ font-size:14px; color:var(--md-fg); font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.md-hist-num{ font-size:12px; color:var(--md-muted); }
.md-hist-meta{ text-align:right; font-size:11px; color:var(--md-subtle); white-space:nowrap; }
.md-hist-time{ color:var(--md-primary); font-weight:600; margin-top:2px; }