:root{
  --bg:#060914;
  --card:rgba(255,255,255,.075);
  --card-2:rgba(255,255,255,.105);
  --border:rgba(255,255,255,.145);
  --text:#fff;
  --muted:rgba(255,255,255,.62);
  --soft:rgba(255,255,255,.08);
  --gold:#d8b86d;
  --blue:#4776ff;
  --cyan:#31d7dd;
  --green:#50e3c2;
  --red:#ff4e78;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;min-height:100vh;background:var(--bg);color:var(--text);font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Tahoma,Arial,sans-serif;overflow-x:hidden}
button,input{font:inherit}button{cursor:pointer}button:disabled{opacity:.55;cursor:not-allowed}.hidden{display:none!important}
.ambient-bg{position:fixed;inset:0;z-index:-2;overflow:hidden;background:radial-gradient(circle at top right,rgba(110,90,255,.25),transparent 36%),radial-gradient(circle at bottom left,rgba(49,215,221,.16),transparent 34%),linear-gradient(135deg,#070913,#10162d 55%,#060914)}
.mesh{position:absolute;border-radius:999px;filter:blur(26px);opacity:.65}.mesh-a{width:360px;height:360px;right:8%;top:4%;background:rgba(216,184,109,.18)}.mesh-b{width:440px;height:440px;left:-8%;top:30%;background:rgba(71,118,255,.18)}.mesh-c{width:300px;height:300px;left:24%;bottom:0;background:rgba(49,215,221,.12)}.noise{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);background-size:52px 52px;mask-image:radial-gradient(circle at center,#000,transparent 78%)}
.app{width:min(1220px,calc(100% - 28px));margin:0 auto;padding:28px 0 112px}.glass-card{background:linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,.052)),rgba(255,255,255,.045);border:1px solid var(--border);box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 24px 80px rgba(0,0,0,.34);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px)}
.auth-view{display:grid;grid-template-columns:1.15fr .85fr;gap:18px;min-height:calc(100vh - 56px);align-items:center}.auth-hero,.auth-panel{border-radius:34px;padding:28px}.brand{display:flex;align-items:center;gap:14px}.brand-mark{width:58px;height:58px;border-radius:20px;display:grid;place-items:center;font-weight:950;letter-spacing:.5px;background:radial-gradient(circle at top,rgba(255,255,255,.26),transparent 48%),linear-gradient(135deg,var(--gold),#9c6cff,var(--cyan));box-shadow:0 18px 42px rgba(71,118,255,.18)}.brand-mark.small{width:40px;height:40px;border-radius:14px;font-size:13px}.brand h1{margin:0;font-size:25px}.brand p{margin:4px 0 0;color:var(--muted);font-size:13px}.hero-copy{margin-top:42px}.eyebrow,.status-pill,.call-state{display:inline-flex;align-items:center;width:max-content;padding:8px 13px;border-radius:999px;color:#f6e7bd;background:rgba(216,184,109,.12);border:1px solid rgba(216,184,109,.24);font-size:12px;font-weight:850}.hero-copy h2{font-size:clamp(40px,5vw,68px);line-height:1.08;margin:18px 0 14px;letter-spacing:-1.8px}.hero-copy p{max-width:650px;margin:0;color:var(--muted);line-height:2;font-size:16px}.device-preview{width:min(360px,100%);margin:34px auto 0;padding:18px;border-radius:34px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.13)}.preview-top{width:84px;height:7px;border-radius:99px;background:rgba(255,255,255,.26);margin:0 auto 16px}.preview-user{display:flex;align-items:center;gap:12px;padding:12px;border-radius:22px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.10)}.avatar-preview,.avatar{display:grid;place-items:center;font-weight:950;background:linear-gradient(135deg,var(--gold),var(--green),var(--cyan));color:#fff}.avatar-preview{width:46px;height:46px;border-radius:16px}.preview-user strong,.preview-user small{display:block}.preview-user small{color:var(--muted);font-size:12px}.preview-user i{margin-right:auto;width:10px;height:10px;border-radius:50%;background:var(--green);box-shadow:0 0 0 6px rgba(80,227,194,.13)}.preview-call{height:180px;margin-top:14px;border-radius:26px;border:1px solid rgba(255,255,255,.10);background:radial-gradient(circle at top,rgba(255,255,255,.13),transparent 48%),linear-gradient(135deg,rgba(71,118,255,.13),rgba(49,215,221,.10));display:grid;place-items:center;color:rgba(255,255,255,.86);font-weight:900}.preview-controls{display:flex;gap:10px}.preview-controls b{width:38px;height:38px;border-radius:15px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.10)}
.auth-panel{align-self:center}.auth-tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:6px;border-radius:20px;background:rgba(255,255,255,.055)}.tab-btn{height:46px;border:0;border-radius:15px;background:transparent;color:var(--muted);font-weight:900}.tab-btn.active{background:rgba(255,255,255,.11);color:#fff}.auth-form{display:none;padding-top:20px}.auth-form.active{display:grid;gap:14px}.auth-form h3{margin:0 0 4px;font-size:24px}.auth-form label{display:grid;gap:8px;color:rgba(255,255,255,.75);font-size:13px;font-weight:800}input{width:100%;height:52px;border-radius:18px;border:1px solid rgba(255,255,255,.12);outline:0;background:rgba(255,255,255,.07);color:#fff;padding:0 16px}input::placeholder{color:rgba(255,255,255,.36)}input:focus{border-color:rgba(216,184,109,.48);box-shadow:0 0 0 4px rgba(216,184,109,.08)}.primary-btn{height:52px;border:0;border-radius:18px;color:#fff;font-weight:950;background:radial-gradient(circle at top,rgba(255,255,255,.2),transparent 45%),linear-gradient(135deg,var(--gold),#8f5cff);box-shadow:0 18px 34px rgba(143,92,255,.22)}.primary-btn.compact{height:48px;padding:0 20px}.dashboard{display:grid;grid-template-columns:230px 1fr;gap:16px;align-items:start}.side-nav{position:sticky;top:18px;border-radius:30px;padding:16px;display:grid;gap:10px;min-height:calc(100vh - 56px)}.nav-brand{display:flex;align-items:center;gap:10px;font-weight:950;margin-bottom:10px}.nav-btn,.logout-nav,.icon-soft{border:0;color:#fff}.side-nav .nav-btn,.logout-nav{height:48px;border-radius:17px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.08);display:flex;align-items:center;justify-content:space-between;padding:0 14px;font-weight:900}.side-nav .nav-btn.active{background:rgba(255,255,255,.12);border-color:rgba(216,184,109,.20)}.logout-nav{margin-top:auto;justify-content:center;background:rgba(255,78,120,.09)}.workspace{display:grid;gap:16px}.topbar{border-radius:30px;padding:22px;display:flex;align-items:center;justify-content:space-between}.topbar h2{margin:10px 0 0;font-size:clamp(30px,4vw,48px);line-height:1.15}.icon-soft{width:48px;height:48px;border-radius:17px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);font-size:22px}.content-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.panel{border-radius:30px;padding:18px;min-height:260px;overflow:hidden}.panel-head{margin-bottom:14px}.panel-head h3{margin:0;font-size:26px}.panel-head p{margin:6px 0 0;color:var(--muted);font-size:13px}.list{display:grid;gap:12px;max-height:390px;overflow:auto;padding-left:2px;scrollbar-width:thin}.list::-webkit-scrollbar{width:6px}.list::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:99px}.row{display:grid;grid-template-columns:52px minmax(0,1fr) auto;align-items:center;gap:12px;min-height:76px;padding:12px;border-radius:24px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.10);contain:layout paint}.avatar{width:52px;height:52px;border-radius:18px;min-width:52px}.avatar.xl{width:92px;height:92px;border-radius:30px;font-size:32px}.row-main{min-width:0;text-align:right}.row-main strong{display:block;font-size:16px;line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.row-main small{display:block;color:var(--muted);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.row-actions{display:flex;gap:10px;align-items:center}.glass-icon,.call-btn{display:grid;place-items:center;border:1px solid rgba(255,255,255,.12);background:radial-gradient(circle at top,rgba(255,255,255,.13),transparent 44%),linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.026)),rgba(12,17,36,.82);box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 10px 24px rgba(0,0,0,.22);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);color:rgba(255,255,255,.9);transition:background .18s ease,border-color .18s ease}.glass-icon:hover,.call-btn:hover{border-color:rgba(255,255,255,.2);background:radial-gradient(circle at top,rgba(255,255,255,.18),transparent 44%),rgba(16,22,46,.9)}.glass-icon{width:56px;height:56px;border-radius:20px}.glass-icon svg{width:23px;height:23px;fill:currentColor}.search-box{display:grid;grid-template-columns:1fr auto;gap:10px;margin-bottom:12px}.empty{min-height:78px;display:grid;place-items:center;border-radius:24px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.08);color:var(--muted);font-weight:850;text-align:center;padding:14px}.profile-panel{display:grid;place-items:center}.profile-card{text-align:center}.profile-card h3{margin:14px 0 4px;font-size:30px}.profile-card p{margin:0;color:var(--muted)}.profile-stats{display:flex;gap:10px;justify-content:center;margin-top:18px}.profile-stats span{padding:10px 14px;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.08);color:var(--muted)}.profile-stats b{color:#fff}.bottom-nav{display:none}.toast{position:fixed;right:22px;bottom:22px;z-index:2000;width:min(360px,calc(100% - 44px));border-radius:22px;padding:15px 16px;background:linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,.06)),rgba(10,14,28,.82);border:1px solid rgba(255,255,255,.13);box-shadow:0 22px 70px rgba(0,0,0,.38);backdrop-filter:blur(20px);transform:translateY(140%);transition:transform .32s cubic-bezier(.2,.9,.2,1)}.toast.show{transform:translateY(0)}.toast strong{display:block;margin-bottom:4px}.toast span{display:block;color:var(--muted);font-size:13px;line-height:1.6}
.call-layer{position:fixed;inset:0;z-index:1500;display:grid;place-items:center;padding:22px;background:rgba(3,5,14,.66);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}.call-card{width:min(820px,100%);border-radius:34px;padding:24px;text-align:center}.call-info{display:grid;justify-items:center;gap:10px}.pulse{box-shadow:0 0 0 16px rgba(216,184,109,.08),0 0 0 38px rgba(216,184,109,.03)}.call-card h3{font-size:clamp(28px,5vw,52px);line-height:1.35;margin:8px 0 0}.call-card p{margin:0;color:var(--muted);font-size:18px}.call-controls{width:fit-content;max-width:100%;display:flex;align-items:center;justify-content:center;gap:12px;margin:22px auto 0;padding:10px 12px;border-radius:999px;background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03)),rgba(8,12,26,.62);border:1px solid rgba(255,255,255,.12);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 14px 34px rgba(0,0,0,.28);backdrop-filter:blur(20px)}.call-btn{width:62px;height:62px;border-radius:999px;border:0;font-size:24px}.call-btn.accept{color:#5ff3df;background:linear-gradient(180deg,rgba(95,243,223,.16),rgba(95,243,223,.04)),rgba(13,30,38,.86)}.call-btn.reject,.call-btn.end{color:#ff6583;background:linear-gradient(180deg,rgba(255,101,131,.16),rgba(255,101,131,.04)),rgba(38,15,26,.86)}.call-btn.end{transform:rotate(135deg)}.call-btn.cam,.call-btn.mic{color:#d7e3ff}.call-media{position:relative;width:100%;aspect-ratio:16/9;border-radius:28px;overflow:hidden;margin-bottom:16px;background:#050814;border:1px solid rgba(255,255,255,.12)}.call-media video{width:100%;height:100%;object-fit:cover;background:#050814}#localVideo{position:absolute;left:18px;bottom:18px;width:156px;height:106px;border-radius:20px;border:1px solid rgba(255,255,255,.22);box-shadow:0 18px 44px rgba(0,0,0,.38)}#remoteAudioEl{display:none}
@media (max-width:900px){.auth-view{grid-template-columns:1fr}.device-preview{display:none}.dashboard{display:block}.side-nav{display:none}.content-grid{grid-template-columns:1fr}.section-panel{display:none}.section-panel.active{display:block}.bottom-nav{position:fixed;left:10px;right:10px;bottom:calc(env(safe-area-inset-bottom,0px) + 10px);z-index:900;display:grid;grid-template-columns:repeat(4,1fr);gap:6px;border-radius:24px;padding:8px}.bottom-nav .nav-btn{height:52px;border:0;border-radius:18px;background:transparent;color:var(--muted);display:grid;place-items:center;font-size:18px}.bottom-nav .nav-btn span{font-size:11px}.bottom-nav .nav-btn.active{background:rgba(255,255,255,.10);color:#fff}}
@media (max-width:620px){.app{width:100%;padding:0 10px 96px}.auth-view{min-height:100dvh;align-content:start;padding-top:12px}.auth-hero,.auth-panel,.topbar,.panel{border-radius:24px;padding:16px}.brand p,.hero-copy p,.eyebrow{display:none}.hero-copy{margin-top:20px}.hero-copy h2{font-size:24px;letter-spacing:-.8px;line-height:1.25}.auth-panel{margin-bottom:16px}.topbar{margin-top:10px}.topbar h2{font-size:32px}.content-grid{gap:12px}.panel{min-height:210px}.panel-head h3{font-size:24px}.search-box{grid-template-columns:1fr}.row{grid-template-columns:48px minmax(0,1fr) 112px;min-height:78px;border-radius:22px;padding:10px;gap:10px}.avatar{width:44px;height:44px;min-width:44px;border-radius:15px}.row-actions{gap:8px}.glass-icon{width:52px;height:52px;border-radius:18px}.glass-icon svg{width:21px;height:21px}.list{max-height:360px}.toast{right:12px;bottom:92px;width:calc(100% - 24px)}.call-layer{padding:0;place-items:stretch}.call-card{width:100vw;min-height:100dvh;border-radius:0;padding:calc(env(safe-area-inset-top,0px) + 18px) 16px calc(env(safe-area-inset-bottom,0px) + 110px);display:flex;flex-direction:column;justify-content:center}.call-card h3{font-size:clamp(28px,9vw,42px)}.call-controls{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 18px);transform:translateX(-50%);margin:0}.call-btn{width:58px;height:58px}.call-media{height:72dvh;aspect-ratio:auto;border-radius:22px}.call-info.compact{display:none}#localVideo{width:112px;height:150px;left:12px;bottom:12px;border-radius:18px}}

/* === CALLMALL_TOAST_FIX_START === */

.toast {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  top: 18px !important;
  bottom: auto !important;
  transform: translateX(-50%) translateY(-16px) !important;

  width: min(420px, calc(100vw - 28px)) !important;
  max-width: calc(100vw - 28px) !important;

  padding: 13px 16px !important;
  border-radius: 18px !important;

  background:
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.055)),
    rgba(10,15,32,.86) !important;

  border: 1px solid rgba(255,255,255,.14) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 18px 42px rgba(0,0,0,.30) !important;

  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;

  color: #fff !important;
  font-size: 14px !important;
  line-height: 1.7 !important;
  text-align: right !important;
  direction: rtl !important;

  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  z-index: 9999 !important;

  transition:
    opacity .22s ease,
    visibility .22s ease,
    transform .22s ease !important;
}

.toast.show,
.toast.active,
.toast.is-active {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateX(-50%) translateY(0) !important;
}

.toast:empty {
  display: none !important;
}

@media (max-width: 620px) {
  .toast {
    top: calc(env(safe-area-inset-top, 0px) + 14px) !important;
    bottom: auto !important;
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
  }
}

/* === CALLMALL_TOAST_FIX_END === */

/* === CALLMALL_PERSIAN_FONT_START === */

@import url('https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/Vazirmatn-font-face.css');

:root {
  --callmall-font: "Vazirmatn", "IRANYekanX", "IRANSansX", "Yekan Bakh", "Tahoma", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html,
body,
button,
input,
textarea,
select,
.toast,
.auth-card,
.dashboard,
.panel,
.call-modal,
.call-modal-card,
.call-modal-card-wide,
.contact-row,
.user-result,
.request-card,
.history-item {
  font-family: var(--callmall-font) !important;
  font-feature-settings: "ss01" 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

body {
  letter-spacing: -0.015em;
}

h1,
h2,
h3,
h4,
.brand-title,
.dash-header h2,
.panel h3,
.call-modal-card h3,
.call-modal-card-wide h3 {
  font-family: var(--callmall-font) !important;
  font-weight: 900 !important;
  letter-spacing: -0.045em;
}

p,
small,
span,
label,
input,
button {
  font-family: var(--callmall-font) !important;
}

button {
  font-weight: 800 !important;
}

input::placeholder {
  font-family: var(--callmall-font) !important;
  font-weight: 500;
}

/* === CALLMALL_PERSIAN_FONT_END === */

/* === CALLMALL_DESKTOP_UI_POLISH_START === */

/* global text balance */
body {
  overflow-x: hidden !important;
}

.dashboard,
.panel,
.sidebar,
.mobile-shell,
.app-shell {
  font-family: var(--callmall-font, "Vazirmatn", "Tahoma", sans-serif) !important;
}

/* desktop layout: make sidebar professional, not stretched weird */
@media (min-width: 901px) {
  .app-shell,
  .dashboard-layout,
  .main-layout,
  .dashboard-shell {
    align-items: stretch !important;
  }

  .sidebar {
    width: 230px !important;
    min-width: 230px !important;
    max-width: 230px !important;
    min-height: auto !important;
    height: calc(100vh - 48px) !important;
    max-height: 850px !important;

    padding: 22px 16px !important;
    border-radius: 28px !important;

    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    gap: 18px !important;

    overflow: hidden !important;
  }

  .sidebar-brand,
  .brand-mini,
  .side-brand {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    width: 100% !important;
    margin-bottom: 16px !important;
  }

  .sidebar-brand strong,
  .brand-mini strong,
  .side-brand strong {
    font-size: 15px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
  }

  .sidebar-nav,
  .side-nav,
  .nav-menu {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
    margin: 0 !important;
  }

  .sidebar button,
  .sidebar-nav button,
  .side-nav button,
  .nav-menu button {
    width: 100% !important;
    min-height: 48px !important;
    height: 48px !important;

    display: grid !important;
    grid-template-columns: 28px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 10px !important;

    padding: 0 14px !important;
    border-radius: 15px !important;

    text-align: right !important;
    direction: rtl !important;

    font-size: 15px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    white-space: nowrap !important;

    overflow: hidden !important;
  }

  .sidebar button span,
  .sidebar-nav button span,
  .side-nav button span,
  .nav-menu button span {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .sidebar button i,
  .sidebar button svg,
  .sidebar button .icon,
  .sidebar-nav button i,
  .sidebar-nav button svg,
  .sidebar-nav button .icon,
  .side-nav button i,
  .side-nav button svg,
  .side-nav button .icon {
    width: 22px !important;
    min-width: 22px !important;
    height: 22px !important;
    display: grid !important;
    place-items: center !important;
    opacity: .95 !important;
  }

  .sidebar .logout,
  .sidebar .logout-btn,
  #logoutBtn,
  .logout-button {
    margin-top: auto !important;
  }
}

/* header: reduce oversized greeting */
.hero-card,
.dashboard-hero,
.top-card,
.welcome-card {
  min-height: 118px !important;
  padding: 24px 28px !important;
  border-radius: 28px !important;
}

.dash-header h2,
.hero-card h1,
.dashboard-hero h1,
.top-card h1,
.welcome-card h1,
.welcome-title {
  font-size: clamp(30px, 3.1vw, 46px) !important;
  line-height: 1.25 !important;
  letter-spacing: -0.035em !important;
  font-weight: 900 !important;
  margin: 0 !important;
  max-width: 100% !important;
  overflow-wrap: anywhere !important;
}

.status-pill,
.online-pill {
  font-size: 12px !important;
  min-height: 30px !important;
  padding: 0 13px !important;
  border-radius: 999px !important;
}

/* panels: cleaner headings and spacing */
.panel {
  border-radius: 28px !important;
  padding: 26px 28px !important;
}

.panel h3 {
  font-size: clamp(24px, 2.1vw, 34px) !important;
  line-height: 1.25 !important;
  letter-spacing: -0.035em !important;
  margin-bottom: 4px !important;
}

.panel p,
.panel small,
.panel .panel-subtitle {
  line-height: 1.8 !important;
  opacity: .72 !important;
}

/* search area: avoid cramped text */
.search-box,
.search-form {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  gap: 10px !important;
  align-items: center !important;
}

.search-box input,
.search-form input {
  min-width: 0 !important;
  height: 52px !important;
  font-size: 14px !important;
  padding-inline: 16px !important;
}

.search-box button,
.search-form button {
  height: 52px !important;
  min-width: 98px !important;
  padding-inline: 20px !important;
  white-space: nowrap !important;
}

/* contact rows: keep name + buttons aligned */
.contact-row,
.stable-contact-row {
  grid-template-columns: 54px minmax(0, 1fr) 124px !important;
  height: 76px !important;
  min-height: 76px !important;
  max-height: 76px !important;
  padding: 10px 14px !important;
  gap: 12px !important;
}

.contact-info strong,
.contact-row strong {
  font-size: 15px !important;
  line-height: 1.45 !important;
  white-space: nowrap !important;
}

.contact-info small,
.contact-row small {
  font-size: 12px !important;
  line-height: 1.35 !important;
  white-space: nowrap !important;
}

.contact-actions {
  width: 120px !important;
  min-width: 120px !important;
  max-width: 120px !important;
  gap: 8px !important;
}

.contact-actions button {
  width: 52px !important;
  height: 52px !important;
  min-width: 52px !important;
  min-height: 52px !important;
  max-width: 52px !important;
  max-height: 52px !important;
  border-radius: 18px !important;
}

/* history panel scrollbar nicer */
.history-panel,
.contacts-panel,
.requests-panel {
  scrollbar-width: thin !important;
  scrollbar-color: rgba(255,255,255,.32) transparent !important;
}

.history-panel::-webkit-scrollbar,
.contacts-panel::-webkit-scrollbar,
.requests-panel::-webkit-scrollbar {
  width: 6px !important;
}

.history-panel::-webkit-scrollbar-thumb,
.contacts-panel::-webkit-scrollbar-thumb,
.requests-panel::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.28) !important;
  border-radius: 999px !important;
}

/* toast must never sit over bottom menu when empty */
.toast {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  top: 18px !important;
  bottom: auto !important;
  transform: translateX(-50%) translateY(-16px) !important;

  width: min(420px, calc(100vw - 28px)) !important;
  max-width: calc(100vw - 28px) !important;

  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;

  z-index: 9999 !important;
}

.toast.show,
.toast.active,
.toast.is-active {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateX(-50%) translateY(0) !important;
}

.toast:empty {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* mobile: hide desktop sidebar, make typography sane */
@media (max-width: 900px) {
  .sidebar {
    display: none !important;
  }

  .dash-header h2,
  .hero-card h1,
  .dashboard-hero h1,
  .top-card h1,
  .welcome-card h1,
  .welcome-title {
    font-size: clamp(28px, 8vw, 38px) !important;
    line-height: 1.25 !important;
  }

  .panel {
    padding: 20px !important;
    border-radius: 26px !important;
  }

  .panel h3 {
    font-size: 26px !important;
  }

  .toast {
    top: calc(env(safe-area-inset-top, 0px) + 14px) !important;
    bottom: auto !important;
  }
}

/* === CALLMALL_DESKTOP_UI_POLISH_END === */

/* === CALLMALL_REMOVE_USELESS_DESKTOP_SIDEBAR_START === */

/*
  Desktop sidebar removed:
  On desktop all panels are visible, so sidebar is redundant.
  Mobile bottom navigation remains useful and untouched.
*/

@media (min-width: 901px) {
  .sidebar,
  .side-menu,
  .desktop-sidebar,
  .app-sidebar,
  aside {
    display: none !important;
  }

  .app-shell,
  .dashboard-shell,
  .dashboard-layout,
  .main-layout,
  .app-layout {
    display: block !important;
    width: min(1240px, calc(100vw - 48px)) !important;
    max-width: 1240px !important;
    margin: 0 auto !important;
    padding: 24px 0 !important;
  }

  .main-content,
  .dashboard-main,
  .content-area,
  .dashboard {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
  }

  .dash-header,
  .hero-card,
  .dashboard-hero,
  .top-card,
  .welcome-card {
    width: 100% !important;
    min-height: 108px !important;
    padding: 22px 28px !important;
    margin-bottom: 18px !important;
    border-radius: 28px !important;
  }

  .dash-header h2,
  .hero-card h1,
  .dashboard-hero h1,
  .top-card h1,
  .welcome-card h1,
  .welcome-title {
    font-size: clamp(30px, 3vw, 42px) !important;
    line-height: 1.25 !important;
    letter-spacing: -0.035em !important;
  }

  .dash-grid,
  .dashboard-grid,
  .panels-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px !important;
    width: 100% !important;
  }

  .panel {
    min-width: 0 !important;
    border-radius: 28px !important;
  }

  .bottom-nav,
  .mobile-nav,
  .mobile-bottom-nav {
    display: none !important;
  }
}

/* Mobile keeps bottom nav, no side menu */
@media (max-width: 900px) {
  .sidebar,
  .side-menu,
  .desktop-sidebar,
  .app-sidebar,
  aside {
    display: none !important;
  }

  .bottom-nav,
  .mobile-nav,
  .mobile-bottom-nav {
    display: flex !important;
  }
}

/* === CALLMALL_REMOVE_USELESS_DESKTOP_SIDEBAR_END === */

/* === CALLMALL_NO_DESKTOP_SIDENAV_LAYOUT_START === */

.side-nav {
  display: none !important;
}

.dashboard {
  width: min(1180px, calc(100vw - 40px)) !important;
  max-width: 1180px !important;
  margin: 0 auto !important;
  padding: 24px 0 110px !important;
  display: block !important;
}

.workspace {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
}

.topbar {
  width: 100% !important;
  min-height: 112px !important;
  padding: 22px 28px !important;
  margin-bottom: 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 18px !important;
}

.topbar h2,
#welcomeTitle {
  font-size: clamp(30px, 3vw, 42px) !important;
  line-height: 1.25 !important;
  letter-spacing: -0.04em !important;
  margin: 8px 0 0 !important;
  text-align: right !important;
}

.top-actions {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex: 0 0 auto !important;
}

.top-logout-btn {
  height: 48px !important;
  min-width: 92px !important;
  padding: 0 18px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.025)),
    rgba(255,101,131,.11) !important;
  color: #fff !important;
  font-family: var(--callmall-font, inherit) !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  cursor: pointer !important;
}

.content-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 18px !important;
  width: 100% !important;
}

.panel {
  min-width: 0 !important;
}

.bottom-nav {
  display: none !important;
}

@media (max-width: 900px) {
  .dashboard {
    width: 100% !important;
    max-width: 100% !important;
    padding: 12px 12px 96px !important;
  }

  .topbar {
    min-height: 94px !important;
    padding: 18px !important;
    border-radius: 26px !important;
  }

  .topbar h2,
  #welcomeTitle {
    font-size: clamp(26px, 8vw, 36px) !important;
  }

  .top-logout-btn {
    display: none !important;
  }

  .content-grid {
    display: block !important;
  }

  .section-panel {
    display: none !important;
  }

  .section-panel.active {
    display: block !important;
  }

  .bottom-nav {
    display: flex !important;
  }
}

/* === CALLMALL_NO_DESKTOP_SIDENAV_LAYOUT_END === */

/* === CALLMALL_MOBILE_APP_LAYOUT_FIX_START === */

/* Mobile app-like layout */
@media (max-width: 900px) {
  html,
  body {
    width: 100% !important;
    min-height: 100% !important;
    overflow-x: hidden !important;
  }

  body {
    background: #070a16 !important;
  }

  .app {
    width: 100% !important;
    min-height: 100dvh !important;
  }

  .dashboard {
    width: 100% !important;
    min-height: 100dvh !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding:
      calc(env(safe-area-inset-top, 0px) + 12px)
      12px
      calc(env(safe-area-inset-bottom, 0px) + 96px)
      12px !important;
    display: block !important;
    position: relative !important;
  }

  .workspace {
    width: 100% !important;
    max-width: 440px !important;
    min-height: calc(100dvh - 112px) !important;
    margin: 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
  }

  .topbar {
    width: 100% !important;
    min-height: 90px !important;
    padding: 16px !important;
    margin: 0 !important;
    border-radius: 24px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
  }

  .topbar > div:first-child {
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }

  .status-pill {
    font-size: 10px !important;
    height: 24px !important;
    min-height: 24px !important;
    padding: 0 10px !important;
    margin-bottom: 5px !important;
  }

  .topbar h2,
  #welcomeTitle {
    font-size: clamp(22px, 7vw, 30px) !important;
    line-height: 1.25 !important;
    margin: 0 !important;
    letter-spacing: -0.035em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .top-actions {
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
  }

  .icon-soft {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    min-height: 46px !important;
    border-radius: 16px !important;
  }

  .content-grid {
    width: 100% !important;
    flex: 1 1 auto !important;
    display: block !important;
    min-height: 0 !important;
  }

  .section-panel {
    display: none !important;
  }

  .section-panel.active {
    display: block !important;
  }

  .panel {
    width: 100% !important;
    min-height: auto !important;
    max-height: none !important;
    padding: 20px !important;
    border-radius: 26px !important;
    margin: 0 !important;
  }

  .panel-head {
    margin-bottom: 18px !important;
  }

  .panel h3 {
    font-size: clamp(25px, 7vw, 32px) !important;
    line-height: 1.25 !important;
    margin: 0 0 6px !important;
    letter-spacing: -0.035em !important;
  }

  .panel p,
  .panel-head p {
    font-size: 12px !important;
    line-height: 1.8 !important;
    margin: 0 !important;
  }

  .list {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }

  .contact-row,
  .stable-contact-row {
    width: 100% !important;
    height: 74px !important;
    min-height: 74px !important;
    max-height: 74px !important;

    display: grid !important;
    grid-template-columns: 48px minmax(0, 1fr) 104px !important;
    grid-template-areas: "avatar info actions" !important;
    align-items: center !important;
    gap: 10px !important;

    padding: 10px !important;
    border-radius: 22px !important;
  }

  .contact-row .avatar,
  .stable-contact-row .avatar {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    border-radius: 15px !important;
    font-size: 17px !important;
  }

  .contact-info strong,
  .contact-row strong {
    font-size: 14px !important;
    line-height: 1.35 !important;
  }

  .contact-info small,
  .contact-row small {
    font-size: 11px !important;
    line-height: 1.35 !important;
  }

  .contact-actions {
    width: 104px !important;
    min-width: 104px !important;
    max-width: 104px !important;
    height: 48px !important;
    display: flex !important;
    justify-content: flex-end !important;
    gap: 8px !important;
  }

  .contact-actions button {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    max-width: 48px !important;
    max-height: 48px !important;
    border-radius: 17px !important;
  }

  .contact-actions button svg {
    width: 20px !important;
    height: 20px !important;
  }

  .search-box {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .search-box input,
  .search-box button {
    width: 100% !important;
    height: 52px !important;
  }

  .history-list {
    max-height: calc(100dvh - 280px) !important;
    overflow-y: auto !important;
    padding-left: 4px !important;
  }

  .bottom-nav {
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 10px) !important;
    transform: translateX(-50%) !important;

    width: min(420px, calc(100vw - 24px)) !important;
    height: 68px !important;

    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    align-items: center !important;
    gap: 6px !important;

    padding: 8px !important;
    border-radius: 24px !important;

    background:
      linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,.045)),
      rgba(13,18,38,.82) !important;

    border: 1px solid rgba(255,255,255,.13) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.10),
      0 18px 48px rgba(0,0,0,.34) !important;

    backdrop-filter: blur(22px) !important;
    -webkit-backdrop-filter: blur(22px) !important;

    z-index: 900 !important;
  }

  .bottom-nav .nav-btn {
    width: 100% !important;
    height: 52px !important;
    min-height: 52px !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;

    padding: 0 !important;
    border-radius: 17px !important;

    font-size: 17px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;

    background: transparent !important;
    border: 0 !important;
    color: rgba(255,255,255,.72) !important;
  }

  .bottom-nav .nav-btn span {
    display: block !important;
    font-size: 10px !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .bottom-nav .nav-btn.active {
    color: #fff !important;
    background:
      radial-gradient(circle at 50% 0%, rgba(169,102,255,.20), transparent 48%),
      linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.035)) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.10),
      0 8px 18px rgba(0,0,0,.20) !important;
  }

  .toast {
    top: calc(env(safe-area-inset-top, 0px) + 12px) !important;
    bottom: auto !important;
    z-index: 9999 !important;
  }
}

/* Tiny mobile */
@media (max-width: 390px) {
  .dashboard {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  .workspace {
    max-width: 100% !important;
  }

  .topbar {
    padding: 14px !important;
  }

  .panel {
    padding: 17px !important;
  }

  .bottom-nav {
    width: calc(100vw - 16px) !important;
  }
}

/* === CALLMALL_MOBILE_APP_LAYOUT_FIX_END === */

/* === CALLMALL_MOBILE_HEADER_EXIT_POLISH_START === */

@media (max-width: 900px) {
  .topbar {
    min-height: 78px !important;
    padding: 14px 14px !important;
    border-radius: 23px !important;
    align-items: center !important;
  }

  .topbar > div:first-child {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    justify-content: center !important;
    min-width: 0 !important;
  }

  .status-pill {
    font-size: 9px !important;
    height: 22px !important;
    min-height: 22px !important;
    padding: 0 9px !important;
    margin-bottom: 4px !important;
    transform: scale(.94);
    transform-origin: left center;
  }

  .topbar h2,
  #welcomeTitle {
    font-size: clamp(18px, 5.6vw, 24px) !important;
    line-height: 1.25 !important;
    letter-spacing: -0.03em !important;
    font-weight: 900 !important;
    max-width: 190px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .top-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
  }

  .icon-soft,
  .top-logout-btn {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    max-width: 42px !important;
    max-height: 42px !important;

    display: grid !important;
    place-items: center !important;

    padding: 0 !important;
    border-radius: 15px !important;

    border: 1px solid rgba(255,255,255,.12) !important;
    background:
      radial-gradient(circle at 50% 0%, rgba(255,255,255,.12), transparent 42%),
      linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.025)),
      rgba(13,18,38,.72) !important;

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.10),
      0 8px 18px rgba(0,0,0,.22) !important;

    color: #fff !important;
    font-size: 0 !important;
    line-height: 0 !important;
    cursor: pointer !important;
  }

  .icon-soft {
    font-size: 18px !important;
    line-height: 1 !important;
  }

  .top-logout-btn {
    color: transparent !important;
    text-indent: -9999px !important;
    overflow: hidden !important;
    position: relative !important;
    background:
      radial-gradient(circle at 50% 0%, rgba(255,255,255,.11), transparent 42%),
      linear-gradient(180deg, rgba(255,101,131,.13), rgba(255,101,131,.035)),
      rgba(38,15,26,.72) !important;
  }

  .top-logout-btn::before {
    content: "⏻";
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    text-indent: 0;
    color: #ff8aa0;
    font-size: 18px;
    font-weight: 900;
    line-height: 1;
  }

  .top-logout-btn:active,
  .icon-soft:active {
    transform: scale(.96) !important;
  }
}

@media (max-width: 390px) {
  .topbar h2,
  #welcomeTitle {
    max-width: 165px !important;
    font-size: clamp(17px, 5.4vw, 22px) !important;
  }

  .icon-soft,
  .top-logout-btn {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
  }
}

/* === CALLMALL_MOBILE_HEADER_EXIT_POLISH_END === */

/* === CALLMALL_IOS_INPUT_ZOOM_FIX_START === */

/*
  iOS Safari auto-zooms inputs when font-size is below 16px.
  Keep all editable fields >= 16px on mobile.
*/

input,
textarea,
select {
  font-size: 16px !important;
  line-height: 1.5 !important;
  transform: translateZ(0);
  -webkit-text-size-adjust: 100%;
}

@media (max-width: 900px) {
  input,
  textarea,
  select,
  .auth-form input,
  .search-box input,
  #searchInput {
    font-size: 16px !important;
    min-height: 52px !important;
  }

  input::placeholder,
  textarea::placeholder {
    font-size: 16px !important;
  }

  html,
  body {
    -webkit-text-size-adjust: 100% !important;
    touch-action: manipulation;
  }

  button,
  a,
  input,
  textarea,
  select {
    touch-action: manipulation;
  }
}

/* === CALLMALL_IOS_INPUT_ZOOM_FIX_END === */