:root {
  color-scheme: dark;
  --bg: #0d0d12;
  --sidebar: #101016;
  --surface: #14141b;
  --surface-2: #191922;
  --surface-3: #20202b;
  --line: #2d2c37;
  --line-soft: #24232d;
  --text: #f4f2f7;
  --muted: #a09ca9;
  --subtle: #777382;
  --violet: #8f70bc;
  --violet-soft: #31273e;
  --blue: #4f8dd9;
  --blue-soft: #17283d;
  --amber: #e8ad52;
  --amber-soft: #33291c;
  --green: #57c98a;
  --red: #e35f63;
  --red-dark: #a93e43;
  --radius-sm: 12px;
  --radius: 18px;
  --radius-lg: 24px;
  font-family: "Manrope", "Segoe UI", sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }
html {
  min-height: 100%;
  background: var(--bg);
  overscroll-behavior-y: auto;
}
body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  overflow: hidden;
  overscroll-behavior-y: auto;
}
#root {
  min-height: 100vh;
  background: var(--bg);
}
button, input, textarea, select { font: inherit; }
button { color: inherit; cursor: pointer; }
.material-symbols-rounded { font-size: 22px; line-height: 1; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 318px 1fr; }
.mobile-nav {
  position: fixed;
  left: 50%;
  bottom: 18px;
  z-index: 70;
  display: grid;
  grid-template-columns: repeat(3, 92px);
  gap: 8px;
  align-items: center;
  padding: 8px;
  border: 1px solid rgba(45,44,55,.9);
  border-radius: 18px;
  background: rgba(16,16,22,.94);
  box-shadow: 0 18px 48px rgba(0,0,0,.34);
  backdrop-filter: blur(16px);
  transform: translateX(-50%);
}
.mobile-nav-action {
  position: fixed;
  right: 40px;
  bottom: 40px;
  z-index: 75;
  display: grid;
  place-items: center;
  width: 70px;
  height: 70px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 24px;
  background: var(--violet);
  color: white;
  box-shadow: 0 22px 52px rgba(0,0,0,.36), 0 12px 28px rgba(143,112,188,.34);
}
.mobile-nav-action .material-symbols-rounded { font-size: 32px; }
.mobile-nav-action:disabled {
  opacity: .52;
  cursor: not-allowed;
  box-shadow: none;
}
.mobile-nav-button {
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: 4px;
  min-height: 54px;
  padding: 7px 10px 6px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}
.mobile-nav-button .material-symbols-rounded { font-size: 23px; }
.mobile-nav-button.active {
  background: var(--surface-2);
  color: #d7e7ff;
}
.mobile-nav-button[hidden],
#mobileSettingsNav[hidden] { display: none !important; }
.sidebar {
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 30px 20px 104px;
  background: var(--sidebar);
  border-right: 1px solid var(--line);
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
}
.brand { display: flex; align-items: center; gap: 14px; padding: 0 8px; }
.screen-brand { display: none; }
.brand-mark {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 16px;
  background: var(--violet);
  color: white;
  font-size: 30px;
  box-shadow: 0 12px 34px rgba(143,112,188,.22);
}
.brand strong { display: block; font-size: 22px; line-height: 1.25; }
.brand span:last-child { display: block; margin-top: 3px; color: var(--muted); font-size: 12px; }
.new-call-button, .primary-button {
  border: 1px solid #9b7ac6;
  background: var(--violet);
  color: white;
  font-weight: 600;
  box-shadow: 0 12px 30px rgba(143,112,188,.18);
}
.new-call-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  margin: 28px 8px 34px;
  border-radius: 15px;
  font-size: 15px;
}
.new-call-button:disabled {
  opacity: .55;
  cursor: not-allowed;
  box-shadow: none;
}
.account-card {
  margin: -18px 8px 24px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255,255,255,.025);
}
.account-card > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.account-card span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
}
.account-card strong {
  min-width: 0;
  color: var(--text);
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.account-button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface-2);
  color: #d7e7ff;
  font-size: 12px;
  font-weight: 700;
}
.account-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 0;
}
.admin-account-button {
  border-color: #4f8dd9;
  background: var(--blue-soft);
  color: #d7e7ff;
}
.account-button[hidden] { display: none; }
.account-processing-list {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}
.account-processing-banner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 9px;
  padding: 10px;
  border: 1px solid rgba(232,173,82,.42);
  border-radius: 12px;
  background: rgba(232,173,82,.08);
}
.account-processing-banner > .material-symbols-rounded {
  margin-top: 1px;
  color: var(--amber);
}
.account-processing-banner strong,
.account-processing-banner span {
  display: block;
}
.account-processing-banner strong {
  font-size: 12px;
}
.account-processing-banner span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.account-processing-banner .inline-copy-button {
  justify-content: flex-start;
  margin-top: 6px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #c7b2dd;
  font-size: 10px;
}
.account-processing-banner .icon-button {
  width: 32px;
  height: 32px;
}
.language-switcher {
  margin: -14px 8px 20px;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255,255,255,.025);
}
.language-switcher label > span {
  display: block;
  margin-bottom: 7px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
}
.language-switcher select {
  width: 100%;
  height: 38px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 11px;
  outline: none;
  background: var(--surface-2);
  color: var(--text);
  font-size: 12px;
}
.language-switcher select:focus { border-color: var(--blue); }
.balance-card {
  min-width: 0;
  margin: 0 8px 24px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  overflow-x: hidden;
}
.balance-card > * { min-width: 0; }
.balance-card > div {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.balance-card span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
}
.balance-card strong {
  color: #d7e7ff;
  font-size: 18px;
}
.minute-price {
  flex: 0 0 100%;
  display: block;
  margin-top: 4px;
  color: var(--amber);
  font-size: 10px;
  font-weight: 700;
  text-align: right;
}
.wallet-card {
  min-width: 0;
  margin: 0 8px 24px;
  display: grid;
  gap: 12px;
}
.wallet-balance-card,
.payment-card,
.promo-collapse,
.last-transaction-card {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
}
.wallet-balance-card {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.wallet-balance-card span,
.last-transaction-card > span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}
.wallet-balance-card strong {
  color: #d7e7ff;
  font-size: 28px;
}
.payment-card {
  border-color: #4f8dd9;
  background: linear-gradient(180deg, rgba(23,40,61,.72), rgba(20,20,27,.96) 42%);
  box-shadow: 0 18px 46px rgba(0,0,0,.22);
}
.promo-collapse {
  color: #d7e7ff;
}
.promo-collapse summary {
  display: flex;
  align-items: center;
  min-height: 24px;
  color: #d7e7ff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.promo-collapse summary::-webkit-details-marker {
  display: none;
}
.promo-collapse summary::after {
  content: "expand_more";
  margin-left: auto;
  color: var(--muted);
  font-family: "Material Symbols Rounded";
  font-size: 20px;
  line-height: 1;
}
.promo-collapse[open] summary::after {
  content: "expand_less";
}
.promo-collapse .promo-redeem-form {
  margin-top: 12px;
}
.last-transaction-card {
  display: grid;
  gap: 10px;
}
.last-transaction-card .ton-payment-item {
  padding: 11px;
}
.last-transaction-line {
  display: flex !important;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.last-transaction-line .material-symbols-rounded {
  color: var(--muted);
  font-size: 17px;
}
.last-transaction-meta {
  display: block;
  margin-top: 6px;
  color: var(--subtle) !important;
}
.promo-redeem-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 40px;
  gap: 8px;
}
.promo-redeem-form input {
  min-width: 0;
  height: 40px;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: 11px;
  outline: none;
  background: var(--surface-2);
  color: var(--text);
  font-size: 12px;
  text-transform: uppercase;
}
.promo-redeem-form input:focus { border-color: var(--blue); }
.promo-redeem-form button {
  display: grid;
  place-items: center;
  border: 1px solid #477dbe;
  border-radius: 11px;
  background: var(--blue-soft);
  color: #bcd8fb;
}
.ton-toggle-button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  margin-top: 8px;
  border: 1px solid #4f8dd9;
  border-radius: 11px;
  background: var(--blue-soft);
  color: #d7e7ff;
  font-size: 12px;
  font-weight: 700;
}
.ton-topup-panel {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  margin-top: 10px;
}
.payment-card.ton-topup-panel {
  margin-top: 0;
  gap: 12px;
}
.ton-topup-panel[hidden],
.ton-payment-box[hidden],
#markTonPaidButton[hidden] {
  display: none;
}
.ton-topup-panel form {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}
.ton-topup-panel label { min-width: 0; }
.ton-topup-panel label > span:first-child {
  display: block;
  margin-bottom: 6px;
  color: #d7d3dc;
  font-size: 10px;
  font-weight: 700;
}
.ton-topup-panel input,
.ton-topup-panel select {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  height: 40px;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: 11px;
  outline: none;
  background: var(--surface-2);
  color: var(--text);
  font-size: 12px;
}
.ton-topup-panel input:focus,
.ton-topup-panel select:focus { border-color: var(--blue); }
.amount-input-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-width: 0;
  height: 40px;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface-2);
}
.amount-input-shell:focus-within {
  border-color: var(--blue);
}
.amount-input-shell input {
  height: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.amount-input-shell input:focus {
  border: 0;
}
.amount-input-shell span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.ton-payment-box,
.ton-payment-item,
.ton-admin-item {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 7px;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255,255,255,.025);
}
.ton-payment-box {
  max-height: min(560px, calc(100vh - 260px));
  overflow-x: hidden;
  overflow-y: auto;
}
.ton-topup-panel *,
.ton-payment-box * {
  min-width: 0;
}
.ton-payment-box strong,
.ton-payment-item strong,
.ton-admin-item strong {
  color: var(--text);
  font-size: 12px;
}
.ton-payment-box span,
.ton-payment-item span,
.ton-admin-item span {
  min-width: 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.payment-value-card {
  min-width: 0;
  max-width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 7px;
  padding: 10px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 11px;
  background: var(--surface-2);
}
.payment-value-card code,
.inline-copy-button {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  color: var(--text);
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 11px;
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: normal;
}
.payment-value-card .secondary-button {
  width: 100%;
  min-height: 34px;
}
.payment-value-card .copy-value-button {
  min-height: 42px;
}
.payment-details-layout {
  display: grid;
  grid-template-columns: minmax(180px, 220px) minmax(0, 1fr);
  align-items: stretch;
  gap: 12px;
}
.payment-details-values {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}
.copy-value-button,
.inline-copy-button {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  padding: 8px 9px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255,255,255,.035);
  text-align: left;
}
.copy-value-button:hover,
.inline-copy-button:hover {
  border-color: var(--blue);
  color: #d7e7ff;
}
.copy-value-button code {
  display: block;
  flex: 1;
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.copy-value-button .material-symbols-rounded {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 17px;
}
.ton-qr-box {
  display: grid;
  place-items: center;
  padding: 10px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  background: #fff;
}
.ton-qr-box img {
  display: block;
  width: min(100%, 210px);
  aspect-ratio: 1;
}
.ton-payment-box .primary-button,
.ton-payment-box .secondary-button {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 38px;
  white-space: normal;
}
.ton-user-payments,
.ton-processing-list,
.ton-admin-list {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}
.ton-admin-item > div {
  min-width: 0;
}
.ton-payment-item.processing {
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  border-color: rgba(232,173,82,.45);
  background: rgba(232,173,82,.08);
}
.ton-payment-item.processing > .material-symbols-rounded {
  margin-top: 1px;
  color: var(--amber);
}
.ton-payment-item.confirmed {
  border-color: rgba(87,201,138,.28);
}
.ton-payment-item.confirmed strong {
  color: #d9f5e5;
}
.ton-payment-item small,
.ton-admin-item small {
  display: block;
  margin-top: 5px;
  color: var(--subtle);
  font-size: 9px;
  line-height: 1.4;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.ton-payment-item .inline-copy-button {
  justify-content: flex-start;
  margin-top: 6px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #c7b2dd;
  font-size: 10px;
}
.ton-payment-item .inline-copy-button:hover {
  color: #d7e7ff;
}
.spinning-icon {
  animation: spin 1s linear infinite;
}
.primary-button:disabled {
  opacity: .65;
  cursor: wait;
}
.setup-warning {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  margin: -14px 8px 28px;
  padding: 12px;
  border: 1px solid #75551f;
  border-radius: 13px;
  background: var(--amber-soft);
  color: #f2c576;
}
.setup-warning[hidden] { display: none; }
.setup-warning .material-symbols-rounded { color: var(--amber); }
.setup-warning strong { display: block; font-size: 11px; }
.setup-warning p { margin: 4px 0 0; color: #caa66a; font-size: 10px; line-height: 1.45; }
.setup-link {
  margin-top: 9px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #ffd184;
  font-size: 10px;
  font-weight: 700;
}
.history-heading { display: flex; align-items: center; justify-content: space-between; padding: 0 8px 12px; color: var(--muted); font-size: 13px; }
.icon-button { border: 0; background: transparent; color: var(--muted); padding: 6px; border-radius: 9px; }
.icon-button:hover { color: var(--text); background: var(--surface-3); }
.call-history { min-height: 0; overflow-y: auto; padding-right: 4px; }
.history-group-label { margin: 12px 8px 8px; color: var(--subtle); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.history-item {
  position: relative;
  width: 100%;
  border: 1px solid transparent;
  border-radius: 14px;
  background: transparent;
}
.history-main {
  width: 100%;
  display: grid;
  grid-template-columns: 38px 1fr auto;
  gap: 10px;
  padding: 14px 34px 14px 12px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  text-align: left;
  color: inherit;
}
.history-item:hover { background: var(--surface); }
.history-item.active { background: var(--surface-2); border-color: #564368; }
.history-menu-button {
  position: absolute;
  right: 5px;
  top: 7px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--subtle);
  opacity: .72;
}
.history-item:hover .history-menu-button,
.history-menu-button[aria-expanded="true"] {
  opacity: 1;
  color: var(--text);
  background: rgba(255,255,255,.05);
}
.history-menu {
  position: absolute;
  right: 6px;
  top: 38px;
  z-index: 20;
  min-width: 142px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #191922;
  box-shadow: 0 16px 40px rgba(0,0,0,.38);
}
.history-menu[hidden] { display: none; }
.history-menu button {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #d8d3df;
  text-align: left;
  font-size: 11px;
}
.history-menu button:hover {
  background: rgba(227,95,99,.12);
  color: #ffb0b3;
}
.history-menu .material-symbols-rounded { font-size: 17px; }
.history-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--violet-soft); color: #c4a9e5; }
.history-details { min-width: 0; }
.history-details strong, .history-details span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.history-details strong { font-size: 13px; font-weight: 600; }
.history-details span { color: var(--muted); font-size: 11px; margin-top: 4px; }
.history-meta {
  display: grid;
  gap: 5px;
  justify-items: end;
  padding-top: 1px;
  color: var(--subtle);
}
.history-time { font-size: 10px; }
.history-duration {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #c7b2dd;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .01em;
}
body.is-live-call .history-item.active .history-duration {
  color: #9fe6bd;
  background: transparent;
}
.history-status { display: flex !important; align-items: center; gap: 5px; color: var(--amber) !important; }
.history-status.live, .history-status.warning { color: var(--amber) !important; }
.history-status.ringing { color: #ffd28a !important; }
.history-status.complete { color: var(--green) !important; }
.history-status.failed { color: var(--red) !important; }
.history-status .material-symbols-rounded { font-size: 14px; }
.empty-history {
  margin: 0 8px;
  padding: 14px 12px;
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  color: var(--subtle);
  font-size: 11px;
  line-height: 1.5;
  background: rgba(255,255,255,.02);
}
.sidebar-bottom { margin-top: auto; padding: 16px 8px 0; border-top: 1px solid var(--line-soft); }
.help-button {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-2);
  color: #c7b2dd;
  text-align: left;
}
.help-button + .help-button { margin-top: 9px; }
.sidebar-bottom p { display: flex; align-items: center; gap: 8px; color: var(--subtle); font-size: 10px; line-height: 1.5; }
.sidebar-bottom p .material-symbols-rounded { font-size: 18px; }

.main { height: 100vh; display: flex; flex-direction: column; min-width: 0; padding: 22px 32px 104px; }
.mobile-home-history { display: none; }
body.mobile-view-admin .main { display: none; }
body.mobile-view-account .app-shell,
body.mobile-view-wallet .app-shell {
  grid-template-columns: minmax(320px, 460px);
  justify-content: center;
}
body.mobile-view-account .main,
body.mobile-view-wallet .main {
  display: none;
}
body.mobile-view-account .sidebar,
body.mobile-view-wallet .sidebar {
  height: auto;
  max-height: calc(100vh - 116px);
  margin: 16px 0 0;
  border: 1px solid var(--line);
  border-radius: 22px;
}
body.mobile-view-account .account-card {
  margin: 0 8px 24px;
}
body.mobile-view-wallet .sidebar {
  padding: 38px 40px;
}
body.mobile-view-wallet .brand {
  margin: 0 0 20px;
  padding: 0;
}
body.mobile-view-wallet .wallet-card {
  margin: 0;
  gap: 16px;
}
body.mobile-view-wallet .wallet-balance-card,
body.mobile-view-wallet .payment-card,
body.mobile-view-wallet .promo-collapse,
body.mobile-view-wallet .last-transaction-card {
  padding: 18px 20px;
  border-radius: 18px;
}
body.mobile-view-wallet .wallet-balance-card {
  min-height: 84px;
}
body.mobile-view-wallet .payment-card.ton-topup-panel {
  gap: 14px;
}
body.mobile-view-wallet .ton-payment-box .open-wallet-button {
  color: white;
  text-decoration: none;
}
body.mobile-view-wallet .ton-payment-box .refresh-payment-button {
  min-height: 42px;
  color: var(--muted);
  font-size: 13px;
}
body.mobile-view-wallet .ton-topup-panel form {
  gap: 12px;
}
body.mobile-view-wallet .ton-topup-panel input,
body.mobile-view-wallet .ton-topup-panel select,
body.mobile-view-wallet .amount-input-shell {
  height: 48px;
  border-radius: 12px;
}
body.mobile-view-wallet .wallet-card .primary-button,
body.mobile-view-wallet .wallet-card .secondary-button {
  min-height: 54px;
  border-radius: 14px;
}
body.mobile-view-wallet .promo-collapse summary {
  min-height: 30px;
}
body.mobile-view-wallet .last-transaction-card {
  gap: 14px;
}
body.mobile-view-wallet .last-transaction-card .ton-payment-item {
  padding: 14px;
}
body.mobile-view-wallet .sidebar-bottom {
  margin: 16px 0 0;
  padding: 0;
  border: 0;
}
body.mobile-view-wallet .help-button {
  min-height: 58px;
  padding: 0 18px;
  border-radius: 16px;
  font-size: 16px;
}
.call-header { display: flex; align-items: center; gap: 18px; min-height: 74px; }
.contact-avatar { position: relative; display: grid; place-items: center; width: 58px; height: 58px; flex: 0 0 auto; border-radius: 50%; background: var(--violet-soft); border: 1px solid #55436c; color: #cab4e4; isolation: isolate; }
.contact-avatar::before {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: inherit;
  background: conic-gradient(from 120deg, transparent 0 25%, rgba(143,112,188,.65), rgba(232,173,82,.75), transparent 74% 100%);
  filter: blur(8px);
  opacity: 0;
  transition: opacity .25s ease;
  z-index: -2;
}
.contact-avatar::after {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: inherit;
  background: radial-gradient(circle at 32% 24%, rgba(255,255,255,.16), transparent 30%), var(--violet-soft);
  z-index: -1;
}
.contact-avatar .material-symbols-rounded { font-size: 28px; position: relative; z-index: 2; }
body.call-status-idle .contact-avatar { border-color: #55436c; color: #cab4e4; background: var(--violet-soft); }
body.call-status-dialing .contact-avatar { border-color: rgba(232,173,82,.86); color: #ffd28a; background: #33291c; }
body.call-status-dialing .contact-avatar::after { background: radial-gradient(circle at 32% 24%, rgba(255,255,255,.16), transparent 30%), #33291c; }
body.call-status-ringing .contact-avatar { border-color: rgba(232,173,82,.96); color: #ffe0a7; background: #3b2b18; }
body.call-status-ringing .contact-avatar::after { background: radial-gradient(circle at 32% 24%, rgba(255,255,255,.18), transparent 30%), #3b2b18; }
body.call-status-live .contact-avatar { border-color: rgba(87,201,138,.9); color: #bdf2d3; background: #1c3327; }
body.call-status-live .contact-avatar::after { background: radial-gradient(circle at 32% 24%, rgba(255,255,255,.16), transparent 30%), #1c3327; }
body.call-status-complete .contact-avatar { border-color: rgba(87,201,138,.55); color: #8fe0b2; background: #182820; }
body.call-status-complete .contact-avatar::after { background: radial-gradient(circle at 32% 24%, rgba(255,255,255,.12), transparent 30%), #182820; }
body.call-status-failed .contact-avatar { border-color: rgba(227,95,99,.88); color: #ffb0b3; background: #351c22; }
body.call-status-failed .contact-avatar::after { background: radial-gradient(circle at 32% 24%, rgba(255,255,255,.14), transparent 30%), #351c22; }
.avatar-orbit {
  position: absolute;
  inset: -7px;
  border-radius: inherit;
  border: 1px solid transparent;
  border-top-color: rgba(232,173,82,.78);
  border-right-color: rgba(143,112,188,.5);
  opacity: 0;
}
.orbit-two {
  inset: -13px;
  border-top-color: rgba(87,201,138,.55);
  border-left-color: rgba(232,173,82,.45);
}
body.is-live-call .contact-avatar {
  border-color: rgba(143,112,188,.9);
  box-shadow: 0 0 0 0 rgba(143,112,188,.34);
  animation: avatarPulse 1.8s ease-out infinite, avatarFloat 3.2s ease-in-out infinite;
}
body.is-live-call .contact-avatar::before { opacity: 1; animation: avatarGlowSpin 3.5s linear infinite; }
body.is-live-call .avatar-orbit { opacity: 1; animation: orbitSpin 2.8s linear infinite; }
body.is-live-call .orbit-two { animation-duration: 4.4s; animation-direction: reverse; }
body.is-live-call #contactAvatarIcon { animation: phoneNudge 1.9s ease-in-out infinite; }
body.is-live-call .call-header {
  background: linear-gradient(90deg, rgba(143,112,188,.09), rgba(232,173,82,.055), transparent 62%);
  border-radius: 22px;
  padding: 8px 12px;
  margin: -8px -12px 0;
}
body.remote-speaking .contact-avatar {
  border-color: rgba(87,201,138,.9);
  color: #bdf2d3;
}
.contact-main { min-width: 220px; }
.eyebrow { color: var(--muted); font-size: 11px; letter-spacing: .02em; }
.contact-main h1 { font-size: 22px; margin: 3px 0; }
.contact-main > span:last-child { color: var(--muted); font-size: 12px; }
.header-divider { width: 1px; height: 48px; background: var(--line); }
.call-goal { min-width: 180px; }
.call-goal span, .call-goal strong { display: block; }
.call-goal strong { margin-top: 8px; font-size: 14px; }
.call-state { margin-left: auto; min-width: 120px; }
.live-label { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 11px; }
.live-label i { width: 8px; height: 8px; background: var(--green); border-radius: 50%; box-shadow: 0 0 0 4px rgba(87,201,138,.08); }
body.is-live-call .live-label i { animation: liveDot 1.2s ease-in-out infinite; }
body.call-status-idle .live-label i { background: var(--subtle); box-shadow: none; }
body.call-status-dialing .live-label i { background: var(--amber); box-shadow: 0 0 0 4px rgba(232,173,82,.12); }
body.call-status-ringing .live-label i { background: #ffd28a; box-shadow: 0 0 0 5px rgba(232,173,82,.18); }
body.call-status-live .live-label i { background: var(--green); box-shadow: 0 0 0 4px rgba(87,201,138,.12); }
body.call-status-complete .live-label i { background: var(--green); box-shadow: 0 0 0 4px rgba(87,201,138,.08); }
body.call-status-failed .live-label i { background: var(--red); box-shadow: 0 0 0 4px rgba(227,95,99,.12); }
.call-state strong { display: block; margin-top: 5px; font-size: 24px; letter-spacing: .03em; }
.call-cost {
  display: block;
  margin-top: 4px;
  color: #c7b2dd;
  font-size: 11px;
  font-weight: 700;
}
.mini-eq {
  display: none;
  align-items: end;
  gap: 3px;
  height: 18px;
  margin-top: 5px;
}
.mini-eq span {
  width: 4px;
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(180deg, #f1c170, #8f70bc);
  box-shadow: 0 0 10px rgba(232,173,82,.25);
  animation: miniEq 860ms ease-in-out infinite;
}
.mini-eq span:nth-child(2) { animation-delay: -120ms; }
.mini-eq span:nth-child(3) { animation-delay: -260ms; }
.mini-eq span:nth-child(4) { animation-delay: -390ms; }
.mini-eq span:nth-child(5) { animation-delay: -510ms; }
body.is-live-call .mini-eq { display: flex; }
.call-state.idle { opacity: .65; }
body:not(.has-active-call) .call-state strong { display: none; }
body:not(.has-active-call) .live-label i { background: var(--subtle); box-shadow: none; }
.language-badge { display: flex; align-items: center; gap: 9px; min-width: 180px; padding: 12px 14px; border: 1px solid #75551f; border-radius: 14px; background: var(--amber-soft); color: #f2c576; font-size: 11px; line-height: 1.4; }
.language-badge .material-symbols-rounded { color: var(--amber); }


.conversation-card { position: relative; min-height: 0; flex: 1; display: flex; flex-direction: column; margin-top: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: #111117; overflow: hidden; box-shadow: 0 22px 50px rgba(0,0,0,.18); }
body.is-live-call .conversation-card {
  border-color: rgba(143,112,188,.42);
  background:
    radial-gradient(circle at 18% 8%, rgba(143,112,188,.18), transparent 28%),
    radial-gradient(circle at 82% 0%, rgba(232,173,82,.12), transparent 24%),
    #111117;
  animation: liveCardBreath 2.6s ease-in-out infinite;
}
body.remote-speaking .conversation-card {
  border-color: rgba(87,201,138,.5);
  box-shadow: 0 22px 50px rgba(0,0,0,.18), 0 0 0 1px rgba(87,201,138,.08) inset;
}
body:not(.has-active-call) .conversation-card {
  border-style: dashed;
  background:
    radial-gradient(circle at 50% 38%, rgba(143,112,188,.08), transparent 34%),
    #111117;
}
.conversation { min-height: 0; flex: 1; overflow-y: auto; padding: 22px 28px; scrollbar-color: #373540 transparent; }
.conversation.has-messages {
  display: flex;
  flex-direction: column;
}
.conversation.has-messages .message-row:first-child {
  margin-top: auto;
}
.call-energy {
  position: absolute;
  left: 26px;
  right: 26px;
  top: 18px;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 34px;
  pointer-events: none;
  opacity: .72;
  z-index: 1;
  mask-image: linear-gradient(90deg, transparent, black 14%, black 86%, transparent);
}
.call-energy span {
  width: 7px;
  height: 9px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(232,173,82,.95), rgba(143,112,188,.86));
  box-shadow: 0 0 18px rgba(143,112,188,.36);
  animation: energyWave 980ms ease-in-out infinite;
}
.call-energy span:nth-child(2n) { animation-delay: -120ms; }
.call-energy span:nth-child(3n) { animation-delay: -240ms; background: linear-gradient(180deg, rgba(87,201,138,.9), rgba(143,112,188,.78)); }
.call-energy span:nth-child(4n) { animation-delay: -360ms; }
.call-energy span:nth-child(5n) { animation-delay: -480ms; }
body.is-live-call .call-energy { display: flex; }
body.is-live-call .conversation { padding-top: 58px; }
.pinned-summary {
  position: relative;
  z-index: 3;
  padding: 18px 24px 0;
  background:
    linear-gradient(180deg, rgba(17,17,23,.98), rgba(17,17,23,.94) 78%, rgba(17,17,23,0));
}
.pinned-summary[hidden] { display: none; }
.message-row { display: flex; gap: 12px; margin-bottom: 20px; }
.message-row.assistant { justify-content: flex-end; }
.speaker-avatar { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 auto; border-radius: 50%; background: var(--violet-soft); color: #d1bae8; }
.speaker-avatar .material-symbols-rounded { font-size: 20px; }
.message-wrap { max-width: 64%; }
.message-meta { display: flex; gap: 10px; align-items: center; margin-bottom: 7px; color: var(--muted); font-size: 11px; }
.message-row.assistant .message-meta { justify-content: flex-end; }
.message-bubble { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--surface-2); }
.message-row.assistant .message-bubble { border-color: #3d689b; background: #162537; }
.message-row.remote .message-bubble {
    background: #17182b;
}
.message-original, .message-translation { padding: 12px 15px; font-size: 14px; line-height: 1.58; }
.message-translation { border-top: 1px solid var(--line); color: var(--muted); }
.message-row.assistant .message-translation { border-color: var(--line); color: var(--muted); }
.system-message { width: fit-content; margin: 12px auto 20px; padding: 7px 12px; border-radius: 999px; background: var(--surface-2); color: var(--muted); font-size: 10px; }
.call-summary {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  margin: 0 0 16px;
  padding: 16px;
  border: 1px solid rgba(143,112,188,.32);
  border-radius: 16px;
  background:
    radial-gradient(circle at top left, rgba(143,112,188,.14), transparent 42%),
    var(--surface-2);
}
.summary-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  background: var(--violet-soft);
  color: #d4bbed;
}
.call-summary strong { display: block; margin-top: 4px; font-size: 14px; }
.call-summary p { margin: 8px 0 10px; color: #d8d3df; font-size: 12px; line-height: 1.55; }
.call-summary small { display: block; margin-top: 10px; color: var(--muted); font-size: 10px; line-height: 1.5; }
.call-summary.loading .summary-icon { animation: avatarGlowSpin 1.6s linear infinite; }
.summary-stats { display: flex; gap: 8px; flex-wrap: wrap; }
.summary-stats span { padding: 5px 8px; border: 1px solid var(--line); border-radius: 999px; color: #c7b2dd; font-size: 10px; background: rgba(255,255,255,.03); }
.empty-state { height: 100%; display: grid; place-items: center; text-align: center; color: var(--muted); }
.empty-state .material-symbols-rounded { display: block; font-size: 48px; color: var(--violet); margin-bottom: 12px; }
.empty-state strong { display: block; color: var(--text); font-size: 18px; margin-bottom: 6px; }
.empty-state span:last-child { display: block; max-width: 380px; line-height: 1.6; }

.reply-area { padding: 0 18px 16px; }
body:not(.has-active-call) .reply-area { display: none; }
.call-action-state {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  margin: 16px 18px 0;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-2);
}
.call-action-state[hidden] { display: none; }
.call-action-state.complete {
  border-color: rgba(87,201,138,.32);
  background: linear-gradient(180deg, rgba(87,201,138,.08), rgba(87,201,138,.03));
}
.call-action-state.failed {
  border-color: rgba(227,95,99,.35);
  background: linear-gradient(180deg, rgba(227,95,99,.1), rgba(227,95,99,.04));
}
.call-action-state.warning {
  border-color: rgba(232,173,82,.38);
  background: linear-gradient(180deg, rgba(232,173,82,.1), rgba(232,173,82,.04));
}
.call-action-state .material-symbols-rounded {
  color: #d7e7ff;
  font-size: 22px;
}
.call-action-state.complete .material-symbols-rounded {
  color: var(--green);
}
.call-action-state.failed .material-symbols-rounded {
  color: #ffb0b3;
}
.call-action-state.warning .material-symbols-rounded {
  color: var(--amber);
}
.call-action-state strong,
.call-action-state span {
  display: block;
}
.call-action-state strong {
  font-size: 13px;
}
.call-action-state span:last-child {
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}
.call-action-close {
  width: 32px;
  height: 32px;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  background: rgba(255,255,255,.03);
  color: var(--muted);
  cursor: pointer;
}
.call-action-close:hover {
  color: var(--text);
  background: rgba(255,255,255,.07);
}
.call-action-close .material-symbols-rounded {
  font-size: 18px;
  color: currentColor;
}
.translation-status { display: flex; align-items: center; gap: 8px; margin: 0 2px 10px; color: var(--amber); font-size: 11px; font-weight: 600; }
.translation-status .material-symbols-rounded { font-size: 18px; }
.suggestions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.suggestion-button { min-height: 58px; display: flex; align-items: center; gap: 10px; padding: 10px 13px; border: 1px solid #815d24; border-radius: 13px; background: var(--amber-soft); color: #f0d1a0; text-align: left; font-size: 10px; line-height: 1.45; }
.suggestion-button:hover { border-color: var(--amber); background: #3c2e1b; }
.suggestion-button .material-symbols-rounded { color: var(--amber); flex: 0 0 auto; }
.composer { display: grid; grid-template-columns: minmax(240px, 1fr) 200px 154px; gap: 12px; }
.composer-field { position: relative; min-width: 0; }
.composer textarea { width: 100%; height: 66px; resize: none; padding: 14px 54px 12px 14px; border: 1px solid #634a29; border-radius: 14px; outline: none; background: var(--surface-2); color: var(--text); font-size: 14px; }
.composer textarea:focus { border-color: var(--amber); box-shadow: 0 0 0 3px rgba(232,173,82,.08); }
.send-button { position: absolute; right: 10px; bottom: 10px; width: 38px; height: 38px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--violet); color: white; }
.autopilot-control { display: flex; align-items: center; gap: 9px; padding: 10px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-2); cursor: pointer; }
.autopilot-control input, .modal-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.toggle-visual { width: 38px; height: 22px; flex: 0 0 auto; padding: 3px; border-radius: 999px; background: #3a3844; transition: .2s ease; }
.toggle-visual span { display: block; width: 16px; height: 16px; border-radius: 50%; background: var(--muted); transition: .2s ease; }
input:checked + .toggle-visual { background: var(--violet); }
input:checked + .toggle-visual span { transform: translateX(16px); background: white; }
.autopilot-control strong, .autopilot-control small, .modal-toggle strong, .modal-toggle small { display: block; }
.autopilot-control strong { font-size: 10px; }
.autopilot-control small { margin-top: 4px; color: var(--muted); font-size: 8px; line-height: 1.3; }
.end-call-button { display: flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid #ef7377; border-radius: 14px; background: var(--red-dark); color: white; font-size: 11px; font-weight: 600; }
.end-call-button:hover { background: var(--red); }
.end-call-button:disabled { opacity: .45; cursor: not-allowed; }

.modal { width: min(600px, 100%); max-width: calc(100vw - 32px); padding: 0; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); color: var(--text); box-shadow: 0 28px 90px rgba(0,0,0,.6); overflow-x: hidden; }
.modal::backdrop { background: rgba(5,5,8,.78); backdrop-filter: blur(6px); }
.modal-card { width: 100%; max-width: 100%; padding: 26px; overflow-x: hidden; }
.modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.modal-header h2 { margin: 5px 0 8px; font-size: 25px; }
.modal-header p { max-width: 460px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.modal-card label > span:first-child { display: block; margin-bottom: 7px; color: #d7d3dc; font-size: 11px; font-weight: 600; }
.modal-card input, .modal-card textarea, .modal-card select { width: 100%; min-width: 0; margin-bottom: 16px; padding: 12px 13px; border: 1px solid var(--line); border-radius: 11px; outline: none; background: var(--surface-2); color: var(--text); font-size: 12px; }
.modal-card input:focus, .modal-card textarea:focus, .modal-card select:focus { border-color: var(--violet); }
.form-error-summary {
  margin: -6px 0 16px;
  padding: 11px 13px;
  border: 1px solid rgba(227,95,99,.5);
  border-radius: 12px;
  background: rgba(227,95,99,.12);
  color: #ffb9bb;
  font-size: 11px;
  line-height: 1.45;
}
.form-error-summary[hidden] { display: none; }
.modal-card .field-invalid {
  border-color: rgba(227,95,99,.85);
  box-shadow: 0 0 0 3px rgba(227,95,99,.08);
}
.field-error {
  display: block;
  min-height: 14px;
  margin: -10px 0 12px;
  color: #ff9da0;
  font-size: 10px;
  line-height: 1.4;
}
.field-error:empty { display: none; }
.language-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; }
.language-row > .material-symbols-rounded { color: var(--violet); margin-top: 6px; }
.modal-toggle { display: flex; align-items: center; gap: 12px; margin: 0 0 22px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); cursor: pointer; }
.modal-toggle strong { font-size: 11px; }
.modal-toggle small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.call-price-note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: -10px 0 18px;
  padding: 10px 12px;
  border: 1px solid rgba(232,173,82,.28);
  border-radius: 12px;
  background: rgba(232,173,82,.08);
  color: #f2c576;
  font-size: 11px;
  font-weight: 700;
}
.call-price-note .material-symbols-rounded { font-size: 18px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; }
.primary-button, .secondary-button { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 11px; font-size: 12px; }
.secondary-button { border: 1px solid var(--line); background: var(--surface-2); color: var(--muted); }
.admin-page {
  width: 100%;
  height: 100vh;
  min-height: 100vh;
  min-width: 0;
  overflow-y: auto;
  padding: 22px 32px 24px;
  background: var(--bg);
}
.admin-page[hidden] { display: none; }
.admin-page-inner {
  width: min(1120px, 100%);
  margin: 0 auto;
}
.admin-page-header,
.settings-section-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}
.admin-page-header h2 {
  margin: 5px 0 8px;
  font-size: 26px;
}
.admin-page-header p,
.settings-section-heading p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
}
.admin-tabs {
  display: flex;
  gap: 8px;
  margin: 0 0 18px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: rgba(255,255,255,.025);
  overflow-x: auto;
}
.admin-tabs button {
  flex: 1 0 auto;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: 11px;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}
.admin-tabs button:hover {
  border-color: var(--line);
  color: var(--text);
  background: rgba(255,255,255,.035);
}
.admin-tabs button.active {
  border-color: rgba(143,112,188,.55);
  background: var(--violet-soft);
  color: #eadcff;
}
.admin-tabs .material-symbols-rounded {
  font-size: 18px;
}
.admin-tab-panel[hidden] {
  display: none;
}
.admin-tab-panel {
  min-width: 0;
}
.settings-section-heading h3 {
  margin: 0 0 5px;
  font-size: 15px;
}
.admin-users-section {
  margin-bottom: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line-soft);
}
.admin-users-list {
  display: grid;
  gap: 10px;
}
.admin-user-item {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) minmax(420px, 2fr) auto;
  gap: 14px;
  align-items: center;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255,255,255,.025);
}
.admin-user-main strong,
.admin-user-main span,
.admin-user-last {
  display: block;
}
.admin-user-main strong { font-size: 14px; }
.admin-user-main span,
.admin-user-last {
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
}
.admin-user-stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(72px, 1fr));
  gap: 8px;
}
.admin-user-stats span {
  min-width: 0;
  padding: 8px 9px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: rgba(255,255,255,.02);
}
.admin-user-stats strong,
.admin-user-stats small {
  display: block;
}
.admin-user-stats strong {
  color: var(--text);
  font-size: 13px;
}
.admin-user-stats small {
  margin-top: 3px;
  color: var(--subtle);
  font-size: 9px;
}
.admin-page label > span:first-child { display: block; margin-bottom: 7px; color: #d7d3dc; font-size: 11px; font-weight: 600; }
.admin-page input,
.admin-page textarea,
.admin-page select {
  width: 100%;
  min-width: 0;
  margin-bottom: 16px;
  padding: 12px 13px;
  border: 1px solid var(--line);
  border-radius: 11px;
  outline: none;
  background: var(--surface-2);
  color: var(--text);
  font-size: 12px;
}
.admin-page input:focus,
.admin-page textarea:focus,
.admin-page select:focus { border-color: var(--violet); }
.primary-button.wide { width: 100%; }
.auth-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 0 0 18px;
}
.auth-switch button {
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}
.auth-switch button.active {
  border-color: #4f8dd9;
  background: var(--blue-soft);
  color: #d7e7ff;
}
.telegram-auth-block {
  display: grid;
  gap: 10px;
  margin: 0 0 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
  text-align: center;
}
.telegram-auth-block > span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}
.telegram-login-button {
  width: 100%;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 16px;
  border: 1px solid rgba(64,169,235,.45);
  border-radius: 11px;
  background: rgba(42,171,238,.14);
  color: #d8f0ff;
  font-size: 12px;
  font-weight: 800;
}
.telegram-login-button:hover {
  border-color: rgba(64,169,235,.75);
  background: rgba(42,171,238,.2);
}
.telegram-login-button .material-symbols-rounded {
  font-size: 18px;
}
.small-modal { width: min(500px, calc(100vw - 32px)); }
.settings-modal { width: min(760px, 100%); max-width: calc(100vw - 32px); }
.settings-status { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.settings-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-2);
}
.settings-card.ready { border-color: rgba(87,201,138,.45); }
.settings-card.missing { border-color: #75551f; background: var(--amber-soft); }
.settings-card .material-symbols-rounded { color: var(--violet); }
.settings-card.ready .material-symbols-rounded { color: var(--green); }
.settings-card.missing .material-symbols-rounded { color: var(--amber); }
.settings-card strong, .settings-card small { display: block; }
.settings-card strong { font-size: 13px; }
.settings-card small { margin-top: 4px; color: var(--muted); font-size: 10px; }
.inline-check-button {
  margin-top: 9px;
  padding: 7px 10px;
  border: 1px solid #4f465f;
  border-radius: 9px;
  background: rgba(255,255,255,.04);
  color: #d8c6ee;
  font-size: 10px;
  font-weight: 700;
}
.inline-check-button:hover { border-color: var(--violet); color: white; }
.missing-box {
  margin-bottom: 18px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: rgba(255,255,255,.025);
  color: var(--muted);
  font-size: 11px;
  line-height: 1.6;
}
.missing-box strong { color: var(--text); }
.missing-box code, .settings-section code {
  padding: 2px 5px;
  border-radius: 6px;
  background: #24232d;
  color: #f0d1a0;
}
.settings-section { margin-top: 16px; }
.admin-tab-panel > .settings-section:first-child,
.admin-tab-panel > .admin-users-section:first-child,
.admin-tab-panel > .settings-status:first-child {
  margin-top: 0;
}
.admin-commands-panel {
  margin-top: 0;
}
.settings-section h3 { margin: 0 0 9px; font-size: 13px; }
.settings-section p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.6; }
.settings-form {
  display: grid;
  grid-template-columns: minmax(180px, 1.2fr) minmax(140px, .8fr) auto;
  gap: 10px;
  align-items: end;
  margin-bottom: 9px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255,255,255,.025);
}
.settings-form.twilio-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.settings-form.promo-admin-form { grid-template-columns: minmax(140px, 1fr) 110px 130px auto; }
.settings-form.ton-settings-form { grid-template-columns: minmax(220px, 1fr) 130px 130px auto; }
.settings-form.usdt-settings-form { grid-template-columns: minmax(220px, 1fr) 90px 130px 130px auto; }
.settings-form label > span:first-child { display: block; margin-bottom: 7px; color: #d7d3dc; font-size: 10px; font-weight: 600; }
.settings-form > label { min-width: 0; }
.settings-form input { margin-bottom: 0; }
.saved-secret-hint { display: block; margin-top: 6px; color: var(--subtle); font-size: 9px; line-height: 1.4; }
.settings-form .primary-button { min-height: 42px; white-space: nowrap; }
.settings-form.twilio-form .primary-button { width: fit-content; justify-self: start; }
.settings-form.twilio-form .secondary-button { width: fit-content; justify-self: end; }
.promo-admin-list {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}
.promo-admin-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255,255,255,.025);
}
.promo-admin-item.disabled { opacity: .58; }
.promo-admin-item strong,
.promo-admin-item span {
  display: block;
}
.promo-admin-item strong { font-size: 13px; }
.promo-admin-item span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
}
.promo-redemption-list {
  display: grid;
  gap: 6px;
  margin-top: 10px;
}
.promo-redemption-item {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  margin-top: 0 !important;
  padding: 7px 8px;
  border: 1px solid var(--line-soft);
  border-radius: 9px;
  background: rgba(255,255,255,.02);
}
.promo-redemption-item strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
}
.promo-redemption-item small,
.promo-redemption-empty {
  color: var(--subtle);
  font-size: 10px;
}
.promo-redemption-empty {
  display: block;
  margin-top: 8px;
}
.promo-admin-item .secondary-button {
  min-height: 36px;
  padding-inline: 11px;
}
.collapsed-help details {
  border: 1px solid var(--line);
  border-radius: 13px;
  background: rgba(255,255,255,.02);
}
.collapsed-help summary {
  padding: 12px 14px;
  color: #d7d3dc;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}
.collapsed-help pre { border: 0; border-top: 1px solid var(--line); border-radius: 0 0 13px 13px; }
.settings-section pre {
  max-height: 250px;
  overflow: auto;
  margin: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: #0b0b10;
  color: #e8d9ff;
  font-size: 11px;
  line-height: 1.55;
  white-space: pre-wrap;
}
.help-list { list-style: none; padding: 0; margin: 0 0 20px; }
.help-list li { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
.help-list li > span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--violet-soft); color: #cdb5e6; font-size: 11px; font-weight: 700; }
.help-list p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.help-list strong { display: block; margin-bottom: 3px; color: var(--text); font-size: 12px; }
.toast { position: fixed; right: 24px; bottom: 24px; max-width: 340px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-3); color: var(--text); font-size: 11px; opacity: 0; transform: translateY(10px); pointer-events: none; transition: .2s ease; box-shadow: 0 15px 40px rgba(0,0,0,.35); }
.toast.visible { opacity: 1; transform: translateY(0); }

@keyframes avatarPulse {
  0% { box-shadow: 0 0 0 0 rgba(143,112,188,.34), 0 0 28px rgba(143,112,188,.16); }
  70% { box-shadow: 0 0 0 16px rgba(143,112,188,0), 0 0 34px rgba(232,173,82,.16); }
  100% { box-shadow: 0 0 0 0 rgba(143,112,188,0), 0 0 28px rgba(143,112,188,.16); }
}

@keyframes liveDot {
  0%, 100% { transform: scale(1); opacity: .75; }
  50% { transform: scale(1.45); opacity: 1; }
}

@keyframes avatarGlowSpin {
  to { transform: rotate(360deg); }
}

@keyframes orbitSpin {
  to { transform: rotate(360deg); }
}

@keyframes avatarFloat {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-2px) scale(1.03); }
}

@keyframes phoneNudge {
  0%, 100% { transform: rotate(0deg); }
  18% { transform: rotate(-9deg); }
  36% { transform: rotate(8deg); }
  54% { transform: rotate(-4deg); }
  72% { transform: rotate(3deg); }
}

@keyframes miniEq {
  0%, 100% { height: 5px; opacity: .55; }
  45% { height: 18px; opacity: 1; }
}

@keyframes energyWave {
  0%, 100% { height: 8px; transform: translateY(0); opacity: .42; }
  45% { height: 34px; transform: translateY(-3px); opacity: 1; }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes liveCardBreath {
  0%, 100% { box-shadow: 0 22px 50px rgba(0,0,0,.18), 0 0 0 1px rgba(143,112,188,.03) inset; }
  50% { box-shadow: 0 24px 58px rgba(0,0,0,.22), 0 0 0 1px rgba(232,173,82,.12) inset, 0 0 44px rgba(143,112,188,.12); }
}

@media (prefers-reduced-motion: reduce) {
  body.is-live-call .contact-avatar,
  body.is-live-call .contact-avatar::before,
  body.is-live-call .avatar-orbit,
  body.is-live-call #contactAvatarIcon,
  body.is-live-call .live-label i,
  body.is-live-call .conversation-card,
  .mini-eq span,
  .call-energy span,
  .spinning-icon {
    animation: none !important;
  }
}

@media (max-width: 1100px) {
  .app-shell { grid-template-columns: 250px 1fr; }
  .main { padding-inline: 20px; }
  .language-badge { display: none; }
  .contact-main { min-width: 160px; }
  .composer { grid-template-columns: 1fr 180px; }
  .end-call-button { min-height: 46px; grid-column: 1 / -1; }
}
@media (min-width: 781px) {
  body.mobile-view-account .app-shell,
  body.mobile-view-wallet .app-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(0, 920px);
    justify-content: center;
    align-content: start;
    padding: 28px 24px 116px;
  }
  body.mobile-view-account .sidebar,
  body.mobile-view-wallet .sidebar {
    width: min(920px, calc(100vw - 48px));
    height: auto;
    max-height: calc(100vh - 144px);
    margin: 0;
    padding: 30px;
    border: 1px solid var(--line);
    border-radius: 24px;
    background: var(--sidebar);
  }
  body.mobile-view-account .sidebar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, .82fr);
    gap: 18px;
    align-content: start;
  }
  body.mobile-view-account .brand,
  body.mobile-view-account .sidebar-bottom {
    grid-column: 1 / -1;
  }
  body.mobile-view-account .account-card,
  body.mobile-view-account .language-switcher,
  body.mobile-view-account .balance-card,
  body.mobile-view-wallet .wallet-card {
    margin: 0;
  }
  body.mobile-view-account .balance-card {
    grid-column: 2;
    grid-row: 2 / 4;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 196px;
  }
  body.mobile-view-account .balance-card > div {
    margin-bottom: 26px;
  }
  body.mobile-view-account .balance-card span {
    font-size: 15px;
  }
  body.mobile-view-account .balance-card strong {
    font-size: 32px;
  }
  body.mobile-view-account .ton-toggle-button {
    min-height: 48px;
  }
  body.mobile-view-account .sidebar-bottom {
    margin-top: 4px;
  }
  body.mobile-view-wallet .app-shell {
    grid-template-columns: minmax(0, 760px);
  }
  body.mobile-view-wallet .sidebar {
    width: min(760px, calc(100vw - 48px));
  }
}
@media (max-width: 780px) {
  html,
  body,
  #root {
    min-height: 100dvh;
    background: var(--bg);
  }
  body {
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 100dvh;
    background: var(--bg);
    overscroll-behavior-y: auto;
  }
  body.mobile-view-call {
    overflow: hidden;
  }
  button, input, textarea, select { font-size: 16px; }
  .app-shell {
    display: block;
    min-height: 100dvh;
    background: var(--bg);
  }
  .sidebar {
    position: static;
    width: auto;
    height: 100dvh;
    min-height: 100dvh;
    max-height: none;
    margin: 0;
    padding: calc(14px + env(safe-area-inset-top)) 12px calc(92px + env(safe-area-inset-bottom));
    border: 0;
    border-radius: 0;
    background: transparent;
    overflow-y: auto;
    overscroll-behavior-y: auto;
  }
  body.mobile-view-history .sidebar,
  body.mobile-view-account .sidebar,
  body.mobile-view-wallet .sidebar {
    height: 100dvh;
    max-height: none;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: var(--bg);
  }
  body.mobile-view-call .sidebar { display: none; }
  body.mobile-view-admin .sidebar { display: none; }
  body.mobile-view-history .main { display: none; }
  body.mobile-view-account .main { display: none; }
  body.mobile-view-wallet .main { display: none; }
  body.mobile-view-admin .main { display: none; }
  .admin-page {
    height: 100dvh;
    min-height: 100dvh;
    padding: calc(14px + env(safe-area-inset-top)) 12px calc(88px + env(safe-area-inset-bottom));
    overflow-y: auto;
  }
  .admin-page-inner,
  .admin-tab-panel,
  .settings-section,
  .settings-form {
    width: 100%;
    min-width: 0;
  }
  .admin-page-header,
  .settings-section-heading {
    gap: 10px;
    margin-bottom: 14px;
  }
  .admin-page-header h2 {
    font-size: 21px;
  }
  .admin-page-header p,
  .settings-section-heading p {
    font-size: 11px;
  }
  .settings-section-heading {
    align-items: stretch;
    flex-direction: column;
  }
  .admin-tabs {
    margin-bottom: 14px;
    padding: 5px;
  }
  .admin-tabs button {
    flex: 0 0 auto;
    min-height: 38px;
    padding-inline: 11px;
    font-size: 11px;
  }
  .settings-section-heading .secondary-button {
    width: 100%;
  }
  .admin-user-item {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 11px;
  }
  .admin-user-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .admin-user-stats span:last-child {
    grid-column: 1 / -1;
  }
  .admin-page input,
  .admin-page textarea,
  .admin-page select {
    min-height: 46px;
    font-size: 16px;
  }
  .brand {
    display: flex;
    gap: 10px;
    padding: 0 2px;
    margin-bottom: 14px;
    transition: gap .24s ease, margin .24s ease, transform .24s ease;
  }
  .screen-brand { display: flex; }
  .brand-mark {
    width: 42px;
    height: 42px;
    border-radius: 13px;
    font-size: 24px;
    transition: width .24s ease, height .24s ease, border-radius .24s ease, font-size .24s ease;
  }
  .brand strong { font-size: 18px; transition: font-size .24s ease; }
  .brand span:last-child { font-size: 10px; transition: opacity .2s ease, max-height .24s ease, margin .24s ease; }
  .new-call-button {
    display: none;
  }
  body.mobile-view-account .sidebar {
    max-width: 520px;
    margin: 0 auto;
    padding: calc(18px + env(safe-area-inset-top)) 16px calc(132px + env(safe-area-inset-bottom));
    gap: 14px;
  }
  body.mobile-view-wallet .sidebar {
    max-width: 520px;
    margin: 0 auto;
    padding: calc(18px + env(safe-area-inset-top)) 16px calc(132px + env(safe-area-inset-bottom));
    gap: 14px;
  }
  body.mobile-view-account .brand {
    min-height: 56px;
    margin: 0;
    padding: 0;
    gap: 12px;
  }
  body.mobile-view-account .brand-mark {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    font-size: 27px;
  }
  body.mobile-view-account .brand strong {
    font-size: 22px;
    line-height: 1.2;
  }
  body.mobile-view-account .brand span:last-child {
    margin-top: 3px;
    font-size: 11px;
  }
  body.mobile-view-wallet .brand {
    min-height: 56px;
    margin: 0;
    padding: 0;
    gap: 12px;
  }
  body.mobile-view-wallet .brand-mark {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    font-size: 27px;
  }
  body.mobile-view-wallet .brand strong {
    font-size: 22px;
    line-height: 1.2;
  }
  body.mobile-view-wallet .brand span:last-child {
    margin-top: 3px;
    font-size: 11px;
  }
  body.mobile-view-account .history-heading,
  body.mobile-view-account .call-history,
  body.mobile-view-account .sidebar-bottom {
    display: none;
  }
  body.mobile-view-account .account-card,
  body.mobile-view-account .language-switcher,
  body.mobile-view-account .balance-card {
    margin: 0;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: #14141b;
    box-shadow: none;
  }
  body.mobile-view-account .account-card {
    display: grid;
    gap: 14px;
    max-height: none;
    overflow: hidden;
    transition: max-height .28s ease, margin .24s ease, padding .24s ease, opacity .2s ease;
  }
  body.mobile-view-account .account-card > div {
    margin: 0;
    transition: margin .24s ease;
  }
  body.mobile-view-account .account-card > div:first-child {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
  }
  body.mobile-view-account .account-card span,
  body.mobile-view-account .language-switcher label > span,
  body.mobile-view-account .balance-card span {
    color: var(--muted);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.25;
  }
  body.mobile-view-account .account-card strong {
    color: var(--text);
    font-size: 20px;
    line-height: 1.2;
  }
  body.mobile-view-account .account-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    margin: 0;
  }
  body.mobile-view-account .account-button {
    min-height: 52px;
    border-radius: 14px;
    font-size: 16px;
    transition: min-height .24s ease, font-size .24s ease, border-radius .24s ease;
  }
  body.mobile-view-account .language-switcher {
    max-height: 128px;
    overflow: hidden;
    transition: max-height .28s ease, margin .24s ease, padding .24s ease, opacity .2s ease;
  }
  body.mobile-view-account .language-switcher label > span {
    margin-bottom: 10px;
    transition: opacity .2s ease, max-height .24s ease, margin .24s ease;
  }
  body.mobile-view-account .language-switcher select {
    height: 52px;
    border-radius: 14px;
    font-size: 16px;
    transition: height .24s ease, font-size .24s ease, border-radius .24s ease;
  }
  body.mobile-view-account .balance-card {
    display: grid;
    gap: 14px;
    transition: margin .24s ease, padding .24s ease, border-color .24s ease, box-shadow .24s ease;
  }
  body.mobile-view-account .balance-card > div {
    margin: 0;
    align-items: center;
  }
  body.mobile-view-account .balance-card strong {
    color: #d7e7ff;
    font-size: 28px;
    line-height: 1.1;
  }
  .promo-redeem-form input {
    height: 50px;
    border-radius: 14px;
    font-size: 16px;
  }
  .promo-redeem-form button {
    border-radius: 14px;
  }
  body.mobile-view-account .ton-toggle-button {
    min-height: 52px;
    border-radius: 14px;
    font-size: 15px;
  }
  body.mobile-view-wallet .wallet-card {
    margin: 0;
    gap: 14px;
  }
  body.mobile-view-wallet .wallet-balance-card,
  body.mobile-view-wallet .payment-card,
  body.mobile-view-wallet .promo-collapse,
  body.mobile-view-wallet .last-transaction-card {
    padding: 16px;
    border-radius: 20px;
  }
  body.mobile-view-wallet .wallet-balance-card {
    min-height: 74px;
  }
  body.mobile-view-wallet .wallet-balance-card span,
  body.mobile-view-wallet .last-transaction-card > span {
    font-size: 14px;
  }
  body.mobile-view-wallet .wallet-balance-card strong {
    font-size: 28px;
  }
  body.mobile-view-wallet .wallet-card .account-processing-list {
    margin: 10px 0 0;
  }
  body.mobile-view-wallet .wallet-card .ton-topup-panel {
    margin-top: 0;
    gap: 12px;
  }
  body.mobile-view-wallet .wallet-card .ton-payment-box {
    max-height: none;
  }
  body.mobile-view-wallet .payment-details-layout {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 8px;
  }
  body.mobile-view-wallet .payment-details-values {
    gap: 8px;
  }
  body.mobile-view-wallet .payment-value-card {
    padding: 9px;
  }
  body.mobile-view-wallet .ton-qr-box {
    display: none;
  }
  body.mobile-view-wallet .copy-value-button {
    min-height: 44px;
    padding: 9px 10px;
    border-radius: 12px;
  }
  body.mobile-view-wallet .payment-value-card code {
    font-size: 10px;
    line-height: 1.35;
  }
  body.mobile-view-wallet .ton-qr-box img {
    width: min(100%, 184px);
  }
  body.mobile-view-wallet .ton-topup-panel form {
    gap: 12px;
  }
  body.mobile-view-wallet .ton-topup-panel input,
  body.mobile-view-wallet .ton-topup-panel select,
  body.mobile-view-wallet .amount-input-shell {
    height: 52px;
    border-radius: 14px;
  }
  body.mobile-view-wallet .wallet-card .primary-button,
  body.mobile-view-wallet .wallet-card .secondary-button {
    min-height: 52px;
    border-radius: 14px;
    font-size: 15px;
  }
  .setup-warning {
    margin: 10px 0 0;
    padding: 10px;
  }
  .history-heading {
    display: flex;
    padding: 18px 2px 10px;
    font-size: 12px;
  }
  .call-history {
    display: grid;
    gap: 9px;
    min-height: 0;
    max-height: none;
    margin: 0;
    padding: 0;
    overflow: visible;
  }
  .history-group-label { display: none; }
  .history-item {
    width: 100%;
    flex: none;
    background: rgba(255,255,255,.018);
    border-color: var(--line-soft);
  }
  .history-main {
    grid-template-columns: 36px minmax(0, 1fr);
    padding: 12px 36px 12px 11px;
  }
  .history-icon {
    width: 34px;
    height: 34px;
  }
  .history-details strong { font-size: 12px; }
  .history-details span { font-size: 10px; }
  .history-meta {
    grid-column: 2;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    margin-top: 7px;
    padding: 0;
    color: var(--subtle);
  }
  .history-duration {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #bfa6dc;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .01em;
  }
  .history-duration::before {
    content: "•";
    margin-right: 8px;
    color: var(--subtle);
    font-weight: 500;
  }
  body.is-live-call .history-item.active .history-duration {
    border: 0;
    color: #9fe6bd;
    background: transparent;
  }
  .history-menu { right: 8px; }
  .sidebar-bottom { display: none; }
  body.mobile-view-wallet .sidebar-bottom {
    display: block;
    margin-top: 0;
    padding: 0;
    border: 0;
  }
  body.mobile-view-wallet .help-button {
    min-height: 56px;
    border-radius: 18px;
  }
  .mobile-nav {
    position: fixed;
    left: 50%;
    right: auto;
    bottom: calc(10px + env(safe-area-inset-bottom));
    z-index: 70;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
    align-items: center;
    width: min(252px, calc(100vw - 104px));
    margin: 0;
    padding: 7px;
    border: 1px solid rgba(45,44,55,.9);
    border-radius: 18px;
    background: rgba(16,16,22,.96);
    backdrop-filter: blur(16px);
    box-shadow: 0 18px 48px rgba(0,0,0,.34);
    transform: translateX(-50%);
  }
  .mobile-nav-button,
  .mobile-nav-action {
    min-width: 0;
    border: 0;
    color: var(--muted);
  }
  .mobile-nav-button {
    display: grid;
    justify-items: center;
    gap: 3px;
    min-height: 54px;
    padding: 7px 4px 5px;
    border-radius: 14px;
    background: transparent;
    font-size: 10px;
    font-weight: 700;
  }
  .mobile-nav-button .material-symbols-rounded { font-size: 22px; }
  .mobile-nav-button.active {
    background: var(--surface-2);
    color: #d7e7ff;
  }
  .mobile-nav-action {
    position: fixed;
    right: 24px;
    bottom: calc(94px + env(safe-area-inset-bottom));
    z-index: 75;
    display: grid;
    place-items: center;
    width: 62px;
    height: 62px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 22px;
    background: var(--violet);
    color: white;
    box-shadow: 0 18px 42px rgba(0,0,0,.34), 0 10px 24px rgba(143,112,188,.34);
  }
  .mobile-nav-action .material-symbols-rounded { font-size: 29px; }
  .mobile-nav-action:disabled {
    opacity: .52;
    cursor: not-allowed;
    box-shadow: none;
  }
  .main {
    height: 100dvh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: calc(10px + env(safe-area-inset-top)) 12px calc(150px + env(safe-area-inset-bottom));
  }
  .mobile-nav-button span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .mobile-home-history {
    display: none;
  }
  .mobile-home-history .history-heading {
    padding: 0 2px 7px;
    font-size: 13px;
  }
  .mobile-home-history .call-history {
    display: grid;
    gap: 7px;
    padding: 0;
    overflow: visible;
  }
  .mobile-home-history .history-main {
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .mobile-home-history .history-item {
    background: rgba(255,255,255,.018);
    border-color: var(--line-soft);
  }
  .mobile-home-history .history-item.active {
    border-color: #564368;
    background: var(--surface-2);
  }
  .call-header {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    min-height: 0;
    flex: 0 0 auto;
    padding: 8px 10px;
    border: 1px solid var(--line-soft);
    border-radius: 15px;
    background: rgba(20,20,27,.58);
  }
  body.is-live-call .call-header {
    padding: 8px 10px;
    margin: 0;
    border-color: rgba(143,112,188,.42);
    background:
      radial-gradient(circle at 0% 0%, rgba(143,112,188,.18), transparent 38%),
      rgba(20,20,27,.78);
  }
  .contact-avatar {
    width: 40px;
    height: 40px;
  }
  .contact-avatar .material-symbols-rounded { font-size: 22px; }
  .avatar-orbit { inset: -5px; }
  .orbit-two { inset: -9px; }
  .header-divider { display: none; }
  .contact-main {
    min-width: 0;
    flex: 1;
  }
  .contact-main h1 {
    max-width: 100%;
    margin: 2px 0;
    font-size: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .contact-main > span:last-child {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 11px;
  }
  .call-state {
    min-width: 66px;
    margin-left: 0;
    justify-self: end;
    text-align: right;
  }
  .live-label {
    justify-content: flex-end;
    font-size: 10px;
  }
  .call-state strong {
    margin-top: 3px;
    font-size: 17px;
  }
  .mini-eq {
    justify-content: flex-end;
    margin-left: auto;
  }
  .call-goal {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
    padding-top: 7px;
    border-top: 1px solid var(--line-soft);
  }
  .call-goal strong {
    margin-top: 3px;
    font-size: 11px;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .language-badge { display: none; }
  .conversation-card {
    min-height: 0;
    height: auto;
    max-height: none;
    flex: 1 1 auto;
    margin-top: 8px;
    border-radius: 15px;
  }
  body:not(.has-active-call) .conversation-card {
    min-height: 0;
    height: auto;
  }
  .call-energy {
    left: 12px;
    right: 12px;
    top: 10px;
    height: 24px;
    gap: 3px;
  }
  .call-energy span {
    width: 5px;
    max-height: 24px;
  }
  body.is-live-call .conversation { padding-top: 44px; }
  .pinned-summary {
    padding: 8px 8px 0;
  }
  .call-summary {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 8px;
    align-items: center;
    padding: 9px;
    margin-bottom: 7px;
    border-radius: 12px;
  }
  .summary-icon {
    width: 30px;
    height: 30px;
    border-radius: 9px;
  }
  .summary-icon.material-symbols-rounded { font-size: 18px; }
  .call-summary .eyebrow,
  .call-summary p,
  .call-summary small,
  .summary-stats {
    display: none;
  }
  .call-summary strong {
    margin-top: 0;
    font-size: 11px;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .conversation {
    padding: 12px 10px;
    overscroll-behavior: contain;
  }
  .message-row {
    gap: 8px;
    margin-bottom: 14px;
  }
  .speaker-avatar {
    width: 28px;
    height: 28px;
  }
  .message-wrap { max-width: 86%; }
  .message-meta { font-size: 11px; }
  .message-original, .message-translation {
    padding: 11px 13px;
    font-size: 14px;
  }
  .empty-state {
    min-height: 0;
    padding: 18px;
  }
  .empty-state .material-symbols-rounded { font-size: 32px; }
  .empty-state strong { font-size: 14px; }
  .empty-state span:last-child { font-size: 11px; }
  .reply-area {
    flex: 0 0 auto;
    padding: 0 8px 8px;
    background: linear-gradient(180deg, rgba(17,17,23,0), #111117 14%);
  }
  .translation-status {
    margin: 0 0 6px;
    font-size: 9px;
  }
  .call-action-state {
    gap: 10px;
    margin: 10px 10px 0;
    padding: 11px 12px;
    border-radius: 12px;
  }
  .call-action-state .material-symbols-rounded {
    font-size: 20px;
  }
  .call-action-state strong {
    font-size: 11px;
  }
  .call-action-state span:last-child {
    font-size: 10px;
  }
  .suggestions {
    display: flex;
    gap: 6px;
    margin: 0 -2px 7px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .suggestions::-webkit-scrollbar { display: none; }
  .suggestion-button {
    flex: 0 0 70%;
    min-height: 38px;
    padding: 7px 9px;
    font-size: 9px;
  }
  .suggestion-button .material-symbols-rounded { font-size: 17px; }
  .composer {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 6px;
    align-items: stretch;
  }
  .composer-field {
    grid-column: 1 / -1;
  }
  .composer textarea {
    height: 46px;
    padding: 10px 46px 8px 10px;
    font-size: 16px;
    border-radius: 12px;
  }
  .send-button {
    right: 7px;
    bottom: 7px;
    width: 32px;
    height: 32px;
  }
  .autopilot-control {
    min-height: 38px;
    padding: 7px 8px;
    border-radius: 12px;
  }
  .toggle-visual {
    width: 32px;
    height: 19px;
    padding: 3px;
  }
  .toggle-visual span {
    width: 13px;
    height: 13px;
  }
  input:checked + .toggle-visual span { transform: translateX(13px); }
  .autopilot-control strong { font-size: 9px; }
  .autopilot-control small { display: none; }
  .end-call-button {
    min-height: 38px;
    padding: 0 11px;
    border-radius: 12px;
    font-size: 11px;
  }
  .modal {
    width: 100%;
    max-width: none;
    max-height: 100dvh;
    margin: 0;
    border: 0;
    border-radius: 0;
  }
  .modal-card {
    min-height: 100dvh;
    max-height: 100dvh;
    overflow-y: auto;
    padding: calc(18px + env(safe-area-inset-top)) 16px calc(18px + env(safe-area-inset-bottom));
  }
  .modal-header {
    gap: 12px;
    margin-bottom: 16px;
  }
  .modal-header h2 {
    margin: 3px 0 6px;
    font-size: 22px;
  }
  .modal-header p { font-size: 11px; }
  .modal-card label > span:first-child { font-size: 11px; }
  .modal-card input, .modal-card textarea, .modal-card select {
    min-height: 46px;
    margin-bottom: 13px;
    font-size: 16px;
  }
  .language-row {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .language-row > .material-symbols-rounded {
    display: none;
  }
  .payment-details-layout {
    grid-template-columns: minmax(136px, 42%) minmax(0, 1fr);
  }
  .ton-qr-box img {
    width: min(100%, 184px);
  }
  .modal-toggle {
    align-items: flex-start;
    margin-bottom: 16px;
  }
  .modal-actions {
    position: sticky;
    bottom: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 9px;
    padding-top: 12px;
    background: linear-gradient(180deg, rgba(20,20,27,0), var(--surface) 28%);
  }
  .modal-actions .primary-button,
  .modal-actions .secondary-button {
    width: 100%;
    min-height: 48px;
  }
  .settings-status,
  .settings-form,
  .settings-form.twilio-form,
  .settings-form.ton-settings-form,
  .settings-form.usdt-settings-form,
  .settings-form.promo-admin-form {
    grid-template-columns: 1fr;
  }
  .settings-card {
    padding: 12px;
  }
  .settings-form {
    gap: 9px;
    padding: 10px;
  }
  .settings-section {
    margin-top: 12px;
  }
  #admin-panel-payments .settings-help-text {
    display: none;
  }
  #admin-panel-payments .ton-admin-list {
    gap: 6px;
  }
  #admin-panel-payments .ton-admin-item {
    padding: 10px;
  }
  .settings-form.twilio-form .primary-button,
  .settings-form.twilio-form .secondary-button,
  .settings-form.promo-admin-form .primary-button,
  .settings-form .primary-button {
    width: 100%;
    justify-self: stretch;
  }
  .promo-admin-item {
    grid-template-columns: 1fr;
  }
  .settings-section pre {
    max-height: 180px;
    font-size: 10px;
  }
  .toast {
    left: 12px;
    right: 12px;
    bottom: calc(72px + env(safe-area-inset-bottom));
    max-width: none;
    text-align: center;
  }
}

@media (max-width: 420px) {
  .sidebar { padding-inline: 10px; }
  .main { padding-inline: 10px; padding-bottom:90px; }
  .brand span:last-child { display: none; }
  .new-call-button { min-height: 46px; }
  .history-item {
    width: 100%;
  }
  .call-header {
    grid-template-columns: 40px minmax(0, 1fr) auto;
  }
  .call-state {
    grid-column: auto;
    justify-self: end;
    display: block;
    text-align: right;
    padding-top: 0;
    border-top: 0;
  }
  .live-label { justify-content: flex-end; }
  .call-state strong {
    margin-top: 3px;
    font-size: 16px;
  }
  .call-goal { display: none; }
  .mini-eq { display: none !important; }
  .conversation-card {
    height: auto;
    min-height: 0;
  }
  body:not(.has-active-call) .conversation-card {
    height: auto;
    min-height: 0;
  }
  .suggestion-button {
    flex-basis: 76%;
  }
  .composer {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .autopilot-control {
    min-width: 0;
  }
  .end-call-button {
    width: auto;
  }
  .end-call-button .material-symbols-rounded { font-size: 18px; }
}

@media (max-width: 780px) {
  body.mobile-view-account .sidebar > .brand,
  body.mobile-view-wallet .sidebar > .brand {
    margin-bottom: 0 !important;
    padding: 0 !important;
    gap: 12px !important;
  }
}