/* CodeekrPhone Softphone — self-contained styles */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
button{border:none;background:none;cursor:pointer;font:inherit;color:inherit}
html{font-size:16px}
body{
    font-family:'IBM Plex Sans Arabic',-apple-system,BlinkMacSystemFont,sans-serif;
    background:#0B1120;
    color:var(--color-text-primary);
    -webkit-font-smoothing:antialiased;
    overflow:hidden;
    height:100dvh;
}
.hidden{display:none!important}

/* ===== Loading ===== */
.app-loading{display:flex;align-items:center;justify-content:center;height:100dvh;background:#0B1120}
.ld-ring{width:48px;height:48px;position:relative}
.ld-ring div{width:38px;height:38px;border:3px solid transparent;border-top-color:#3B82F6;border-radius:50%;position:absolute;animation:ldSpin .9s ease infinite}
.ld-ring div:nth-child(2){animation-delay:-.3s;opacity:.7}
.ld-ring div:nth-child(3){animation-delay:-.6s;opacity:.4}
@keyframes ldSpin{to{transform:rotate(360deg)}}

/* ===== Phone Frame ===== */
.phone-frame{
    width:100%;
    max-width:420px;
    margin:0 auto;
    height:100dvh;
    display:flex;
    flex-direction:column;
    background:var(--color-surface);
    position:relative;
    overflow:hidden;
}
@media(min-width:500px){
    body{display:flex;align-items:center;justify-content:center}
    .phone-frame{
        height:min(96dvh,780px);
        border-radius:24px;
        box-shadow:0 25px 60px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.06);
    }
}

/* ===== Status Bar ===== */
.sbar{
    display:flex;align-items:center;justify-content:space-between;
    padding:10px 16px;
    background:var(--color-surface);
    border-bottom:1px solid var(--color-divider);
    flex-shrink:0;
    min-height:44px;
}
.sbar-end,.sbar-start{display:flex;align-items:center;gap:10px}
.sbar-status{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:500;color:var(--color-text-secondary)}
.sbar-led{width:7px;height:7px;border-radius:50%;background:#64748B;flex-shrink:0}
.sbar-led.on{background:#22C55E}
.sbar-led.warn{background:#F59E0B;animation:blink 1.4s infinite}
.sbar-led.err{background:#EF4444}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}
.sbar-ext{font-size:11px;color:var(--color-text-disabled);font-weight:600;letter-spacing:.5px}
.ib{
    width:32px;height:32px;display:flex;align-items:center;justify-content:center;
    border-radius:8px;transition:background .15s;
}
.ib:hover{background:var(--color-surface-hover)}
.ib .material-symbols-rounded{font-size:20px;color:var(--color-text-secondary)}

/* ===== Screens ===== */
.screens{flex:1;overflow:hidden;position:relative}
.scr{
    position:absolute;inset:0;
    display:flex;flex-direction:column;
    opacity:0;pointer-events:none;
    transition:opacity .2s,transform .2s;
    transform:translateX(-12px);
    overflow-y:auto;
    overflow-x:hidden;
}
[dir="rtl"] .scr{transform:translateX(12px)}
.scr.active{opacity:1;pointer-events:auto;transform:translateX(0)}

/* ===== Recent Screen ===== */
.rec-hd{padding:16px 20px 8px;display:flex;align-items:center;justify-content:space-between}
.rec-hd h2{font-size:18px;font-weight:700;color:var(--color-text-primary)}
.rec-list{flex:1;overflow-y:auto;padding-bottom:8px}
.rec-empty{
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    height:100%;gap:12px;opacity:.4;
}
.rec-empty .material-symbols-rounded{font-size:56px}
.rec-empty p{font-size:14px}

/* Call items */
.ri{
    display:flex;align-items:center;gap:12px;
    padding:12px 20px;
    transition:background .12s;
    cursor:pointer;
    border-bottom:1px solid var(--color-divider);
    direction:rtl;
}
.ri:active{background:var(--color-surface-hover)}
.ri-av{
    width:42px;height:42px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    font-size:13px;font-weight:700;color:#fff;flex-shrink:0;
    letter-spacing:-.5px;
}
.ri-av.out{background:#3B82F6}
.ri-av.in{background:#22C55E}
.ri-av.miss{background:#EF4444}
.ri-body{flex:1;min-width:0;overflow:hidden}
.ri-name{font-size:14px;font-weight:600;color:var(--color-text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:start}
.ri-detail{font-size:12px;color:var(--color-text-secondary);display:flex;align-items:center;gap:4px;margin-top:3px;direction:rtl}
.ri-detail .material-symbols-rounded{font-size:14px}
.ri-detail.missed{color:#EF4444}
.ri-meta{display:flex;flex-direction:column;align-items:flex-start;gap:2px;flex-shrink:0}
.ri-time{font-size:11px;color:var(--color-text-disabled);white-space:nowrap}
.ri-dur{font-size:11px;color:var(--color-text-secondary);white-space:nowrap;direction:ltr}
.ri-detail{font-size:11px}

/* ===== Recent Pagination ===== */
.rec-pager{display:flex;align-items:center;justify-content:center;gap:12px;padding:12px 0 4px}
.rp-btn{
    width:32px;height:32px;border-radius:50%;border:1px solid var(--color-border);
    background:var(--bg-primary);display:flex;align-items:center;justify-content:center;
    color:var(--color-text-secondary);transition:all .15s;cursor:pointer;
}
.rp-btn:hover:not(:disabled){background:var(--color-primary);color:#fff;border-color:var(--color-primary)}
.rp-btn:disabled{opacity:.35;cursor:not-allowed}
.rp-btn .material-symbols-rounded{font-size:18px}
.rp-info{font-size:13px;color:var(--color-text-secondary);min-width:48px;text-align:center;direction:ltr}

/* ===== Contacts Screen ===== */
.con-hd{padding:16px 20px 8px;display:flex;align-items:center;justify-content:space-between}
.con-hd h2{font-size:18px;font-weight:700;color:var(--color-text-primary)}
.con-add{width:36px;height:36px;border-radius:50%;background:var(--color-primary);color:#fff;display:flex;align-items:center;justify-content:center;transition:transform .12s}
.con-add:active{transform:scale(.9)}
.con-add .material-symbols-rounded{font-size:20px}
.con-search-wrap{padding:0 20px 8px;position:relative}
.con-search-icon{position:absolute;top:50%;transform:translateY(-50%);inset-inline-start:28px;font-size:20px;color:var(--color-text-disabled);pointer-events:none}
.con-search{
    width:100%;padding:10px 12px;padding-inline-start:36px;
    border:1px solid var(--color-border);border-radius:12px;
    background:var(--color-surface-hover);font-size:14px;
    color:var(--color-text-primary);font-family:inherit;
    transition:border-color .15s;
}
.con-search:focus{border-color:var(--color-primary);outline:none}
.con-list{flex:1;overflow-y:auto;padding-bottom:8px}
.con-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:12px;opacity:.4}
.con-empty .material-symbols-rounded{font-size:56px}
.con-empty p{font-size:14px}

/* Contact items */
.ci{display:flex;align-items:center;gap:12px;padding:10px 20px;border-bottom:1px solid var(--color-divider);direction:rtl}
.ci-av{
    width:42px;height:42px;border-radius:50%;
    background:var(--color-primary);color:#fff;
    display:flex;align-items:center;justify-content:center;
    font-size:13px;font-weight:700;flex-shrink:0;cursor:pointer;
}
.ci-body{flex:1;min-width:0;cursor:pointer}
.ci-name{font-size:14px;font-weight:600;color:var(--color-text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:start}
.ci-phone{font-size:12px;color:var(--color-text-secondary);margin-top:2px}
.ci-acts{display:flex;align-items:center;gap:4px;flex-shrink:0}
.ci-act{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:background .12s,color .12s;color:var(--color-text-secondary)}
.ci-act:hover{background:var(--color-surface-hover);color:var(--color-primary)}
.ci-act .material-symbols-rounded{font-size:18px}
.ci-del:hover{color:var(--color-danger)!important}

/* Recent item action buttons */
.ri-acts{display:flex;align-items:center;gap:2px;flex-shrink:0}
.ri-act{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:background .12s,color .12s;color:var(--color-text-secondary)}
.ri-act:hover{background:var(--color-surface-hover);color:var(--color-primary)}
.ri-act .material-symbols-rounded{font-size:18px}
.ri-sub{font-size:11px;color:var(--color-text-disabled);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:start}

/* ===== Recordings Screen ===== */
.rec-scr-hd{padding:16px 20px 8px;display:flex;align-items:center;justify-content:space-between}
.rec-scr-hd h2{font-size:18px;font-weight:700;color:var(--color-text-primary)}
.rec-scr-list{flex:1;overflow-y:auto;padding-bottom:8px}
.rec-scr-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:12px;opacity:.4}
.rec-scr-empty .material-symbols-rounded{font-size:56px}
.rec-scr-empty p{font-size:14px}

/* Recording items */
.rsi{display:flex;align-items:center;gap:12px;padding:12px 20px;border-bottom:1px solid var(--color-divider);direction:rtl}
.rsi-av{
    width:42px;height:42px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    font-size:13px;font-weight:700;color:#fff;flex-shrink:0;
}
.rsi-av.out{background:#3B82F6}
.rsi-av.in{background:#22C55E}
.rsi-body{flex:1;min-width:0}
.rsi-name{font-size:14px;font-weight:600;color:var(--color-text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:start}
.rsi-info{font-size:12px;color:var(--color-text-secondary);margin-top:3px;text-align:start}
.rsi-play{
    width:40px;height:40px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    transition:background .12s,color .12s;color:var(--color-primary);flex-shrink:0;
}
.rsi-play:hover{background:var(--color-surface-hover)}
.rsi-play .material-symbols-rounded{font-size:28px}

/* Recordings player bar */
.rec-scr-player{
    display:flex;align-items:center;gap:10px;
    padding:8px 16px;
    background:var(--color-surface-hover);
    border-top:1px solid var(--color-divider);
    flex-shrink:0;
}
.rec-scr-eq{font-size:22px;color:var(--color-primary);animation:blink 1.2s infinite}
.rec-scr-pinfo{font-size:12px;color:var(--color-text-secondary);min-width:80px;font-variant-numeric:tabular-nums}
.rec-scr-pp,.rec-scr-close{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--color-text-secondary);transition:background .12s}
.rec-scr-pp:hover,.rec-scr-close:hover{background:var(--color-surface-active)}
.rec-scr-pp .material-symbols-rounded,.rec-scr-close .material-symbols-rounded{font-size:20px}
.rec-scr-player{flex-shrink:0}

/* ===== Contact Add/Edit Modal ===== */
.cmodal{position:absolute;inset:0;z-index:80;background:rgba(0,0,0,.4);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:20px}
.cmodal-box{
    background:var(--color-surface);border-radius:16px;
    padding:20px;box-shadow:0 16px 40px rgba(0,0,0,.2);
    display:flex;flex-direction:column;gap:12px;width:100%;max-width:320px;
}
.cmodal-box h3{font-size:16px;font-weight:700;text-align:center}
.cmodal-in{
    width:100%;padding:10px 14px;
    border:1px solid var(--color-border);border-radius:10px;
    background:var(--color-surface-hover);font-size:14px;
    color:var(--color-text-primary);font-family:inherit;
}
.cmodal-in:focus{border-color:var(--color-primary);outline:none}
.cmodal-acts{display:flex;gap:8px;margin-top:4px}
.cmodal-btn{flex:1;padding:10px;border-radius:10px;font-size:14px;font-weight:600;text-align:center;transition:background .12s}
.cmodal-cancel{background:var(--color-surface-hover);color:var(--color-text-secondary)}
.cmodal-cancel:hover{background:var(--color-surface-active)}
.cmodal-save{background:var(--color-primary);color:#fff}
.cmodal-save:hover{background:var(--color-primary-dark,#1D4ED8)}

/* ===== Dialpad Screen ===== */
.dp-num{
    text-align:center;font-size:32px;font-weight:300;
    padding:20px 24px 4px;min-height:68px;
    color:var(--color-text-primary);letter-spacing:2px;
    word-break:break-all;
}
.dp-grid{
    display:grid;grid-template-columns:repeat(3,1fr);
    gap:10px;padding:4px 24px;
    width:100%;max-width:300px;margin:0 auto;
    direction:ltr;
}
.dk{
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    width:68px;height:68px;margin:0 auto;
    border-radius:50%;background:var(--color-surface-hover);
    transition:background .12s,transform .1s;
    user-select:none;-webkit-tap-highlight-color:transparent;
}
.dk:active{background:var(--color-primary-100);transform:scale(.92)}
.dk b{font-size:24px;font-weight:500;line-height:1;color:var(--color-text-primary)}
.dk small{font-size:9px;color:var(--color-text-secondary);letter-spacing:2px;margin-top:1px}
.dp-acts{
    display:flex;align-items:center;justify-content:center;
    gap:40px;padding:16px 0 8px;direction:ltr;
}
.dp-call{
    width:60px;height:60px;border-radius:50%;
    background:#22C55E;color:#fff;
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 4px 14px rgba(34,197,94,.4);
    transition:transform .12s,box-shadow .12s;
}
.dp-call:active{transform:scale(.9)}
.dp-call .material-symbols-rounded{font-size:28px}
.dp-bs{
    width:48px;height:48px;display:flex;align-items:center;justify-content:center;
    border-radius:50%;transition:background .12s;
}
.dp-bs:active{background:var(--color-surface-hover)}
.dp-bs .material-symbols-rounded{font-size:24px;color:var(--color-text-secondary)}

/* ===== Bottom Tab Bar ===== */
.tbar{
    display:flex;
    border-top:1px solid var(--color-divider);
    background:var(--color-surface);
    flex-shrink:0;
    padding-bottom:env(safe-area-inset-bottom,0);
}
.ti{
    flex:1;display:flex;flex-direction:column;align-items:center;
    gap:2px;padding:8px 0 6px;
    transition:color .15s;
    color:var(--color-text-disabled);
}
.ti.active{color:var(--color-primary)}
.ti .material-symbols-rounded{font-size:24px}
.ti span:last-child{font-size:11px;font-weight:500}

/* ===== Call Overlay ===== */
.cov{
    position:absolute;inset:0;z-index:50;
    display:flex;flex-direction:column;
    transition:opacity .25s,transform .25s;
}
.cov.hidden{opacity:0;transform:translateY(100%);pointer-events:none}
.cov:not(.hidden){opacity:1;transform:translateY(0)}

/* Active Call Screen */
.csc{
    flex:1;display:flex;flex-direction:column;
    background:linear-gradient(170deg,#0F172A 0%,#1E3A5F 50%,#0F172A 100%);
    padding:24px 20px;padding-bottom:calc(24px + env(safe-area-inset-bottom,0));
    color:#fff;position:relative;overflow:hidden;
}
.csc::before{
    content:'';position:absolute;top:-40%;right:-30%;width:80%;height:80%;
    border-radius:50%;background:radial-gradient(circle,rgba(59,130,246,.12),transparent 70%);
    pointer-events:none;
}
.csc-top{display:flex;flex-direction:column;align-items:center;gap:6px;padding-top:24px;position:relative;z-index:1}
.csc-avatar{
    width:80px;height:80px;border-radius:50%;
    background:rgba(255,255,255,.1);backdrop-filter:blur(8px);
    display:flex;align-items:center;justify-content:center;
    font-size:28px;font-weight:700;color:#fff;
    border:2px solid rgba(255,255,255,.15);
    margin-bottom:8px;
}
.csc-name{font-size:22px;font-weight:700}
.csc-num{font-size:14px;opacity:.6;margin-top:2px}
.csc-state{font-size:13px;color:#60A5FA;font-weight:500;margin-top:8px}
.csc-timer{font-size:36px;font-weight:300;font-variant-numeric:tabular-nums;margin-top:4px;opacity:.9}

/* Call controls */
.csc-mid{
    display:grid;grid-template-columns:repeat(3,1fr);
    gap:8px;padding:28px 8px;margin:auto 0;position:relative;z-index:1;
    direction:ltr;
}
.cb{
    display:flex;flex-direction:column;align-items:center;gap:6px;
    padding:12px 4px;border-radius:16px;transition:background .15s;
}
.cb:active{background:rgba(255,255,255,.08)}
.cb .material-symbols-rounded{font-size:26px;color:rgba(255,255,255,.85)}
.cb span:last-child{font-size:11px;color:rgba(255,255,255,.5)}
.cb.on .material-symbols-rounded{color:#60A5FA}
.cb.rec .material-symbols-rounded{color:#EF4444;animation:blink 1s infinite}

/* In-call DTMF */
.cdtmf{
    position:absolute;inset:0;z-index:10;
    background:rgba(15,23,42,.95);backdrop-filter:blur(8px);
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
}
.cdtmf-grid{
    display:grid;grid-template-columns:repeat(3,1fr);gap:12px;
    max-width:240px;direction:ltr;
}
.cdtmf-k{
    width:60px;height:60px;border-radius:50%;
    background:rgba(255,255,255,.08);color:#fff;
    font-size:22px;font-weight:500;
    display:flex;align-items:center;justify-content:center;
    transition:background .12s,transform .1s;
}
.cdtmf-k:active{background:rgba(255,255,255,.18);transform:scale(.9)}
.cdtmf-x{
    width:44px;height:44px;border-radius:50%;
    background:rgba(255,255,255,.06);color:rgba(255,255,255,.6);
    display:flex;align-items:center;justify-content:center;
    margin-top:8px;
}
.cdtmf-x .material-symbols-rounded{font-size:22px}

/* End button */
.csc-bot{display:flex;justify-content:center;padding-bottom:8px;position:relative;z-index:1}
.end-btn{
    width:64px;height:64px;border-radius:50%;
    background:#EF4444;color:#fff;
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 6px 20px rgba(239,68,68,.4);
    transition:transform .12s;
}
.end-btn:active{transform:scale(.88)}
.end-btn .material-symbols-rounded{font-size:30px}

/* ===== Incoming Call Screen ===== */
.inc{
    position:absolute;inset:0;z-index:60;
    display:flex;flex-direction:column;
    background:linear-gradient(170deg,#0F172A 0%,#1a2744 100%);
    color:#fff;padding:24px;
    padding-bottom:calc(32px + env(safe-area-inset-bottom,0));
}
.inc-top{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}
.inc-lbl{font-size:14px;color:rgba(255,255,255,.5);font-weight:500;margin-bottom:12px}
.inc-avatar{
    width:96px;height:96px;border-radius:50%;
    background:rgba(34,197,94,.15);
    display:flex;align-items:center;justify-content:center;
    font-size:32px;font-weight:700;color:#22C55E;
    animation:incPulse 2s ease infinite;
    border:2px solid rgba(34,197,94,.3);
}
@keyframes incPulse{
    0%,100%{box-shadow:0 0 0 0 rgba(34,197,94,.3)}
    50%{box-shadow:0 0 0 24px rgba(34,197,94,0)}
}
.inc-name{font-size:26px;font-weight:700;margin-top:8px}
.inc-num{font-size:16px;opacity:.5}
.inc-bot{display:flex;align-items:center;justify-content:center;gap:64px;padding-bottom:24px}
.inc-btn{
    width:64px;height:64px;border-radius:50%;color:#fff;
    display:flex;align-items:center;justify-content:center;
    transition:transform .12s;
}
.inc-btn:active{transform:scale(.88)}
.inc-no{background:#EF4444;box-shadow:0 4px 16px rgba(239,68,68,.35)}
.inc-yes{background:#22C55E;box-shadow:0 4px 16px rgba(34,197,94,.35);animation:incBtnPulse 1.8s ease infinite}
@keyframes incBtnPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
.inc-btn .material-symbols-rounded{font-size:30px}

/* ===== Language Modal ===== */
.lang-modal{
    position:absolute;inset:0;z-index:80;
    background:rgba(0,0,0,.4);backdrop-filter:blur(4px);
    display:flex;align-items:center;justify-content:center;
}
.lang-box{
    background:var(--color-surface);border-radius:16px;
    padding:8px;box-shadow:0 16px 40px rgba(0,0,0,.2);
    display:flex;flex-direction:column;min-width:200px;
}
.lang-opt{
    padding:14px 20px;font-size:15px;font-weight:500;
    border-radius:12px;text-align:center;
    transition:background .12s;color:var(--color-text-primary);
}
.lang-opt:hover{background:var(--color-surface-hover)}

/* ===== Toasts ===== */
.toasts{
    position:fixed;top:12px;left:50%;transform:translateX(-50%);
    z-index:999;display:flex;flex-direction:column;gap:6px;
    pointer-events:none;max-width:300px;width:auto;
}
.toast{
    padding:10px 16px;border-radius:12px;
    font-size:13px;font-weight:500;color:#fff;
    backdrop-filter:blur(8px);
    animation:toastIn .25s ease;
    pointer-events:auto;text-align:center;
}
.toast.ok{background:rgba(34,197,94,.9)}
.toast.err{background:rgba(239,68,68,.9)}
.toast.info{background:rgba(59,130,246,.9)}
.toast.warn{background:rgba(245,158,11,.9)}
@keyframes toastIn{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:translateY(0)}}
.toast.out{animation:toastOut .2s ease forwards}
@keyframes toastOut{to{opacity:0;transform:translateY(-12px)}}