:root{font-family:system-ui,-apple-system,sans-serif;color:#e5eaf2;background:#0e1521}*{box-sizing:border-box}body{margin:0}button,input,textarea{font:inherit}button{border:0;border-radius:10px;background:#4263eb;color:white;padding:12px 18px;cursor:pointer;font-weight:600}button:hover{filter:brightness(1.12)}button:disabled{opacity:.4;cursor:not-allowed}button.secondary{background:#28364c}button.green{background:#118c69}button.red{background:#b83f56}input,textarea{width:100%;background:#172537;color:#fff;border:1px solid #3a4b60;border-radius:9px;padding:12px;min-width:0}header{padding:14px 24px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #263449;gap:10px}h1{font-size:1.3rem;margin:0}header .badge{color:#a8c2e8}main{max-width:1050px;margin:auto;padding:20px}nav{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}nav button{background:#26364c}nav button.selected{background:#4263eb}.panel{background:#151f2e;border:1px solid #2a3950;border-radius:16px;padding:20px;min-height:430px}.callbox{max-width:380px;margin:auto;text-align:center}.large{font-size:1.8rem;margin:14px}.subtle{color:#9babc0;font-size:.92rem}.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:14px auto;max-width:300px}.keypad button{background:#293c55;font-size:1.3rem;padding:13px}.row{display:flex;gap:10px;align-items:center;justify-content:center;margin-top:10px}.row button{flex:1}.columns{display:grid;grid-template-columns:minmax(170px,30%) 1fr;gap:15px}.columns aside{border-right:1px solid #314055;min-height:340px}.columns aside button{display:block;width:95%;text-align:left;margin-bottom:8px;background:#25364d;overflow-wrap:anywhere}.thread{height:290px;overflow:auto;display:flex;flex-direction:column;gap:10px;padding:10px}.bubble{background:#2b3f57;border-radius:13px;padding:10px;max-width:84%;align-self:flex-start;white-space:pre-wrap;overflow-wrap:anywhere}.bubble.out{background:#2d5d88;align-self:flex-end}.bubble small{display:block;color:#c5d1df;margin-top:5px}#smsform{display:flex;gap:8px;align-items:end}#smsform button{flex-shrink:0}#contactlist>div,#callhistory>div{padding:12px;border-bottom:1px solid #35445a;cursor:pointer}.login{min-height:100vh;display:grid;place-items:center;padding:20px}.card{width:min(100%,410px);background:#192535;padding:28px;border-radius:16px}.card form{display:grid;gap:10px}.error{color:#f99}#feedback{color:#f7c975}@media(max-width:650px){header{padding:14px}header h1{font-size:1.05rem}header button{padding:8px}main{padding:12px}.panel{padding:12px}.columns{grid-template-columns:1fr}.columns aside{min-height:0;max-height:135px;overflow:auto;border:0}.row{flex-wrap:wrap}nav button{flex:1;padding:10px 8px}}

.login-button{display:inline-block;background:#2563eb;color:white;padding:12px 18px;border-radius:10px;text-decoration:none;font-weight:600}
[hidden]{display:none!important}

/* Contact actions */
#contactlist>.contact-row{display:flex;align-items:center;justify-content:space-between;gap:16px;cursor:default}
.contact-info{display:flex;flex-direction:column;gap:3px;min-width:0;overflow-wrap:anywhere}
.contact-info span{color:#a9bdd4;font-size:.92rem}
.contact-actions{display:flex;gap:8px;flex-shrink:0}
.contact-actions button{padding:9px 14px}
@media(max-width:480px){.contact-actions button{padding:8px 10px}#contactlist>.contact-row{gap:8px}}

.sms-conversation-row{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap;margin:.4rem 0}.sms-conversation-row>button:first-child{flex:1;min-width:12rem;text-align:left}.sms-conversation-row small{opacity:.75}

/* Administrative SMS visibility toggle; no effect on permissions. */
.sms-heading{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:1rem}
.sms-heading h2{margin:0}
.admin-mode-control{display:flex;align-items:center;gap:.5rem;cursor:pointer;padding:.55rem .75rem;background:#26364c;border-radius:10px}
.admin-mode-control input{width:auto;accent-color:#4263eb;cursor:pointer}
.admin-mode-control small{color:#bdcbe0;margin-left:.3rem}
@media(max-width:600px){.admin-mode-control{width:100%;flex-wrap:wrap}}

header>div{display:flex;align-items:center;gap:10px;flex-wrap:wrap}header .admin-mode-control{font-size:.85rem}#callduration{margin:10px}


/* Incoming-call notifications appear regardless of the selected tab. */
.incoming-banner{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:0 0 16px;padding:17px 20px;border:2px solid #ffd38b;border-radius:14px;background:#76351b;color:#fff6e3;animation:incomingPulse 2.4s ease-in-out infinite}
.incoming-icon{font-size:2.2rem;line-height:1}
.incoming-banner-text{display:flex;flex:1;min-width:155px;flex-direction:column;gap:3px}
.incoming-banner-text strong{font-size:1.25rem}
.incoming-banner-text span{font-size:.9rem}
.incoming-banner button{white-space:nowrap}
.callbox.is-ringing{border-radius:14px;outline:3px solid #f5bd64;outline-offset:12px;animation:incomingOutline 2.4s ease-in-out infinite}
.ring-settings{margin:16px 0 8px;display:flex;gap:9px;flex-direction:column;align-items:center}
.ring-settings button{width:min(100%,240px)}
.ring-settings .subtle{font-size:.82rem}
@keyframes incomingPulse{0%,100%{background:#76351b;border-color:#ffd38b}50%{background:#a44221;border-color:#fff4bd}}
@keyframes incomingOutline{0%,100%{outline-color:#f5bd64}50%{outline-color:#fff6cc}}
@media(prefers-reduced-motion:reduce){.incoming-banner,.callbox.is-ringing{animation:none}}
@media(max-width:540px){.incoming-banner{gap:10px;padding:12px}.incoming-banner button{width:100%}}