/* MamontPhone */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

:root{
  --bg:#000;--sf:#1c1c1e;--sf2:#2c2c2e;--sf3:#3a3a3c;
  --tx:#f2f2f7;--tx2:#aeaeb2;--tx3:#636366;
  --sep:rgba(255,255,255,.08);
  --grn:#30d158;--grn-d:rgba(48,209,88,.15);
  --red:#ff453a;--red-d:rgba(255,69,58,.2);
  --brand:#c41e3a;--brand-d:rgba(196,30,58,.25);
  --amb:#ff9f0a;
  --ff:'Inter',-apple-system,sans-serif;
  --fm:'JetBrains Mono','SF Mono',monospace;
  --fd:'Montserrat',sans-serif;
}

html,body{height:100%;overflow:hidden}
body{
  font-family:var(--ff);background:var(--bg);color:var(--tx);
  display:flex;justify-content:center;
  -webkit-font-smoothing:antialiased;
}
.hide{display:none!important}
button{-webkit-tap-highlight-color:transparent}

/* ---- SHELL ---- */
#app{
  width:100%;max-width:400px;height:100vh;height:100dvh;
  display:flex;flex-direction:column;position:relative;
}
.screen{display:none;flex-direction:column;flex:1;overflow:hidden}
.screen.active{display:flex}

/* ============ LOGIN ============ */
#login-screen{justify-content:center;align-items:center;padding:0 32px}
.login-wrap{width:100%;max-width:300px}

.brand{text-align:center;margin-bottom:52px}
.brand-mark{
  font-family:var(--fd);font-size:26px;font-weight:900;
  letter-spacing:6px;color:#fff;
}
.brand-mark span{color:var(--brand)}
.brand-tag{
  font-family:var(--fm);font-size:9px;letter-spacing:4px;
  color:var(--tx3);margin-top:10px;
}

.field{margin-bottom:12px}
.field label{
  display:block;font-family:var(--fm);font-size:9px;
  letter-spacing:2px;color:var(--tx3);margin-bottom:6px;
}
.field input{
  width:100%;padding:14px 16px;background:var(--sf);
  border:1px solid transparent;border-radius:10px;
  color:#fff;font-size:15px;font-family:var(--ff);outline:none;
}
.field input:focus{border-color:var(--brand)}

#login-btn{
  width:100%;padding:16px;margin-top:8px;
  background:var(--brand);border:none;border-radius:12px;
  color:#fff;font-family:var(--fd);font-size:14px;font-weight:700;
  letter-spacing:3px;cursor:pointer;
}
#login-btn:active{opacity:.85}
#login-btn:disabled{background:var(--sf2);color:var(--tx3);cursor:default}

#login-status{
  text-align:center;font-family:var(--fm);font-size:11px;
  margin-top:18px;min-height:18px;color:var(--tx2);
}
#login-status.err{color:var(--red)}
#login-status.ok{color:var(--grn)}
#login-status.warn{color:var(--amb)}

#install-btn{
  display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;padding:14px;margin-top:16px;
  background:transparent;border:1px solid var(--sf3);border-radius:12px;
  color:var(--tx2);font-family:var(--fm);font-size:12px;letter-spacing:1px;
  cursor:pointer;transition:all .2s;
}
#install-btn:hover{border-color:var(--brand);color:var(--tx)}
#install-btn:active{opacity:.85}
#install-btn svg{flex-shrink:0}

/* ============ PHONE SCREEN ============ */
#phone-screen{position:relative}

/* -- Top bar -- */
#top-bar{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 16px;flex-shrink:0;
}
.top-left{display:flex;align-items:center;gap:8px}
#reg-dot{width:7px;height:7px;border-radius:50%;background:var(--red)}
#reg-dot.on{background:var(--grn);box-shadow:0 0 6px var(--grn-d)}
#reg-dot.wait{background:var(--amb);animation:pulse 1.4s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
#reg-text{font-family:var(--fm);font-size:11px;color:var(--tx2)}

#logout-btn{
  background:none;border:none;color:var(--tx3);
  font-family:var(--fm);font-size:10px;letter-spacing:1px;
  padding:6px 0;cursor:pointer;
}
#logout-btn:active{color:var(--tx2)}

/* -- Tab bodies -- */
.tab-body{display:none;flex:1;overflow-y:auto}
.tab-body.active{display:flex;flex-direction:column}

/* ============ KEYPAD TAB ============ */
#tab-keypad{padding:0}
#dial-area{
  flex:1;display:flex;align-items:center;justify-content:center;
  padding:0 24px;min-height:56px;
}
#dial-input{
  flex:1;background:transparent;border:none;
  color:var(--tx);font-family:var(--fm);font-size:32px;
  font-weight:300;text-align:center;letter-spacing:2px;
  outline:none;caret-color:var(--brand);min-width:0;
}
#dial-input::placeholder{color:var(--tx3);font-size:15px;letter-spacing:1px;font-weight:400}
#btn-delete{
  background:none;border:none;color:var(--tx2);
  cursor:pointer;padding:8px;flex-shrink:0;
}
#btn-delete:active{opacity:.4}

.keypad-wrap{
  flex-shrink:0;display:flex;flex-direction:column;
  align-items:center;padding:0 0 12px;
}
#dialpad{
  display:grid;grid-template-columns:repeat(3,72px);
  gap:12px;justify-items:center;
}
.key{
  width:72px;height:72px;border-radius:50%;
  background:var(--sf);border:none;color:var(--tx);
  cursor:pointer;display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  user-select:none;-webkit-user-select:none;
  transition:background .1s;
}
.key:active{background:var(--sf2)}
.key b{font-family:var(--ff);font-size:26px;font-weight:300;display:block;line-height:1}
.key small{
  font-family:var(--ff);font-size:8px;font-weight:600;
  letter-spacing:2px;color:var(--tx2);margin-top:2px;
}

#btn-call{
  width:64px;height:64px;border-radius:50%;
  background:var(--grn);border:none;color:#fff;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;margin:16px auto 0;
}
#btn-call:active{opacity:.8}

/* ============ RECENTS TAB ============ */
#tab-recents{padding:0 16px}
#call-history{flex:1}
.hist-empty{
  padding:48px 0;text-align:center;
  font-family:var(--fm);font-size:11px;color:var(--tx3);letter-spacing:1px;
}
.hist-row{
  display:flex;align-items:center;gap:12px;
  padding:14px 4px;border-bottom:1px solid var(--sep);cursor:pointer;
}
.hist-row:active{background:rgba(255,255,255,.03)}
.hist-dir{font-size:14px;width:20px;text-align:center;color:var(--tx2);flex-shrink:0}
.hist-row.missed .hist-dir{color:var(--red)}
.hist-num{
  flex:1;font-family:var(--fm);font-size:14px;color:var(--tx);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.hist-row.missed .hist-num{color:var(--red)}
.hist-meta{display:flex;flex-direction:column;align-items:flex-end;gap:2px;flex-shrink:0}
.hist-time{font-family:var(--fm);font-size:10px;color:var(--tx3)}
.hist-dur{font-family:var(--fm);font-size:10px;color:var(--tx2)}

#hist-footer{
  flex-shrink:0;padding:16px 4px;
}
#btn-clear-history{
  width:100%;padding:12px;background:none;border:none;
  color:var(--red);font-family:var(--ff);font-size:13px;
  cursor:pointer;border-radius:8px;
}
#btn-clear-history:active{background:rgba(255,69,58,.1)}

/* ============ CALLER ID TAB ============ */
#tab-callerid{padding:0 16px}
.cid-panel{padding:20px 0}
.cid-current{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px;background:var(--sf);border-radius:12px;
  margin-bottom:16px;
}
.cid-label{font-family:var(--fm);font-size:9px;letter-spacing:1px;color:var(--tx3)}
#cid-value{font-family:var(--fm);font-size:14px;color:var(--tx2)}
#cid-value.set{color:var(--grn)}

#callerid-input{
  width:100%;padding:14px 16px;background:var(--sf);
  border:1px solid transparent;border-radius:10px;
  color:#fff;font-family:var(--fm);font-size:16px;
  text-align:center;letter-spacing:2px;outline:none;
}
#callerid-input:focus{border-color:var(--brand)}
#callerid-input::placeholder{color:var(--tx3);font-size:13px;letter-spacing:1px}

.cid-actions{display:flex;gap:8px;margin-top:12px}
.cid-actions button{
  flex:1;padding:14px;border:none;border-radius:10px;
  cursor:pointer;font-family:var(--fm);font-size:11px;letter-spacing:1px;
}
#cid-set{background:var(--brand);color:#fff}
#cid-set:active{opacity:.85}
#cid-clear{background:var(--sf);color:var(--tx2)}
#cid-clear:active{background:var(--sf2)}

.cid-hint{
  margin-top:16px;font-family:var(--ff);font-size:12px;
  color:var(--tx3);line-height:1.5;
}

/* ============ BOTTOM TAB BAR ============ */
#tabs{
  display:flex;border-top:1px solid var(--sep);
  padding:4px 0 env(safe-area-inset-bottom,4px);
  background:rgba(28,28,30,.9);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  flex-shrink:0;
}
.tab{
  flex:1;display:flex;flex-direction:column;align-items:center;
  gap:2px;padding:6px 0;background:none;border:none;
  color:var(--tx3);cursor:pointer;
}
.tab svg{width:22px;height:22px}
.tab span{font-family:var(--ff);font-size:10px}
.tab.active{color:var(--brand)}

/* ============ CALL OVERLAY ============ */
#call-overlay{
  position:absolute;inset:0;background:var(--bg);
  display:flex;flex-direction:column;z-index:10;
}

/* held bar */
#held-call-bar{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 16px;background:var(--sf);flex-shrink:0;
}
.held-info{font-family:var(--fm);font-size:11px;color:var(--amb);letter-spacing:1px}
.held-btns{display:flex;gap:8px}
.held-btns button{
  background:var(--sf2);border:none;border-radius:8px;
  color:var(--tx2);font-family:var(--fm);font-size:10px;
  letter-spacing:1px;padding:6px 14px;cursor:pointer;
}
.held-btns button:active{background:var(--sf3)}

/* call info */
.call-info{
  flex:1;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:4px;
}
#remote-party{
  font-family:var(--fm);font-size:28px;font-weight:300;
  color:#fff;letter-spacing:2px;margin-bottom:4px;
}
#secure-line{
  display:flex;align-items:center;gap:5px;
  font-family:var(--fm);font-size:9px;font-weight:700;
  letter-spacing:3px;color:var(--grn);margin-bottom:8px;
}
#secure-line svg{color:var(--grn)}
#call-state{
  font-family:var(--fm);font-size:11px;color:var(--tx2);
  letter-spacing:2px;
}
#call-timer{
  font-family:var(--fm);font-size:48px;font-weight:200;
  color:var(--grn);margin-top:8px;
  font-variant-numeric:tabular-nums;
  text-shadow:0 0 40px var(--grn-d);
}

/* DTMF overlay (replaces call-info area) */
#call-dtmf-pad{
  flex:1;display:flex;align-items:center;justify-content:center;
}
.dtmf-grid{
  display:grid;grid-template-columns:repeat(3,64px);
  gap:12px;justify-items:center;
}
.dkey{
  width:64px;height:64px;border-radius:50%;
  background:var(--sf);border:none;color:var(--tx);
  font-family:var(--ff);font-size:24px;font-weight:300;
  cursor:pointer;user-select:none;-webkit-user-select:none;
  transition:background .1s;
}
.dkey:active{background:var(--sf2)}

/* call controls */
.call-ctrls{flex-shrink:0;padding:0 16px}
.ctrl-row{display:flex;justify-content:center;gap:28px;margin-bottom:16px}
.call-ctrl{
  display:flex;flex-direction:column;align-items:center;
  gap:6px;background:none;border:none;color:var(--tx2);
  cursor:pointer;padding:0;
}
.ctrl-icon{
  width:64px;height:64px;border-radius:50%;
  background:var(--sf);display:flex;align-items:center;
  justify-content:center;transition:background .15s;
}
.ctrl-icon svg{transition:stroke .15s,fill .15s}
.call-ctrl span{font-family:var(--ff);font-size:11px}

.call-ctrl.on .ctrl-icon{background:var(--tx)}
.call-ctrl.on .ctrl-icon svg{stroke:#000;fill:#000}
.call-ctrl.on span{color:var(--tx)}

.hangup-wrap{
  display:flex;justify-content:center;
  padding:8px 0 env(safe-area-inset-bottom,20px);
  flex-shrink:0;
}
#btn-hangup{
  width:72px;height:72px;border-radius:50%;
  background:var(--red);border:none;color:#fff;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
}
#btn-hangup:active{opacity:.8}

/* ============ MODALS ============ */
#xfer-panel,#addcall-panel{
  position:absolute;inset:0;background:rgba(0,0,0,.85);
  display:flex;align-items:center;justify-content:center;z-index:20;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.modal-inner{
  width:280px;max-width:90%;padding:24px;
  background:var(--sf);border-radius:14px;
}
.modal-title{
  font-family:var(--fd);font-size:14px;font-weight:700;
  letter-spacing:2px;color:var(--tx);margin-bottom:16px;
  text-align:center;
}
.modal-inner input{
  width:100%;padding:14px;background:var(--sf2);
  border:1px solid transparent;border-radius:10px;
  color:#fff;font-family:var(--fm);font-size:18px;
  text-align:center;letter-spacing:2px;outline:none;
}
.modal-inner input:focus{border-color:var(--brand)}
.modal-inner input::placeholder{color:var(--tx3);font-size:13px}
.modal-btns{display:flex;gap:8px;margin-top:14px}
.modal-btn-primary{
  flex:1;padding:14px;border:none;border-radius:10px;
  font-family:var(--fm);font-size:11px;letter-spacing:1px;
  cursor:pointer;background:var(--brand);color:#fff;
}
.modal-btn-primary:active{opacity:.85}
.modal-btn-secondary{
  flex:1;padding:14px;border:none;border-radius:10px;
  font-family:var(--fm);font-size:11px;letter-spacing:1px;
  cursor:pointer;background:var(--sf2);color:var(--tx2);
}
.modal-btn-secondary:active{background:var(--sf3)}

/* ============ INCOMING ============ */
#incoming{
  position:absolute;inset:0;background:var(--bg);
  display:flex;flex-direction:column;align-items:center;
  justify-content:center;z-index:30;
}
.inc-label{
  font-family:var(--fm);font-size:11px;letter-spacing:3px;
  color:var(--tx2);margin-bottom:8px;
}
#inc-caller{
  font-family:var(--fm);font-size:32px;font-weight:300;
  color:#fff;letter-spacing:2px;margin-bottom:56px;
}
.inc-btns{display:flex;gap:64px}
.inc-btn-wrap{display:flex;flex-direction:column;align-items:center;gap:8px}
.inc-circle{
  width:64px;height:64px;border-radius:50%;border:none;
  color:#fff;display:flex;align-items:center;justify-content:center;
  cursor:pointer;
}
.inc-circle:active{opacity:.8}
.inc-accept{background:var(--grn)}
.inc-decline{background:var(--red)}
.inc-btn-wrap span{font-family:var(--ff);font-size:12px;color:var(--tx2)}

/* ============ RESPONSIVE ============ */
@media(max-width:380px){
  #dialpad{grid-template-columns:repeat(3,64px);gap:10px}
  .key{width:64px;height:64px}
  .key b{font-size:22px}
  #dial-input{font-size:26px}
  #call-timer{font-size:40px}
  .ctrl-icon{width:56px;height:56px}
  .ctrl-row{gap:20px}
}
@media(max-height:600px){
  #dial-area{min-height:40px}
  #dialpad{gap:8px}
  .key{width:60px;height:60px}
  .key b{font-size:22px}
  #btn-call{width:56px;height:56px;margin-top:10px}
  .keypad-wrap{padding-bottom:6px}
}