@font-face {
  font-family: AppFont;
  src: url("/fonts/fa.woff2") format("woff2");
  font-display: swap;
}
* {
  box-sizing: border-box;
}
html {
  font-size: 16px;
  --bg: #161826;
  --surface: #1d2031;
  --elev: #25283c;
  --line: #ffffff0d;
  --text: #ecebf5;
  --dim: #9799b0;
  --accent: #78b7f3;
  --accent-bg: #233d56;
  --bubble: #244868;
  --shadow: #0005;
  color-scheme: dark;
}
html[data-theme="light"] {
  --bg: #f5f5fb;
  --surface: #fff;
  --elev: #ececf5;
  --line: #24203b12;
  --text: #292637;
  --dim: #6c6880;
  --accent: #2787d9;
  --accent-bg: #e6f2fc;
  --bubble: #d9edfc;
  --shadow: #29263716;
  color-scheme: light;
}
body {
  margin: 0;
  font-family: AppFont, Tahoma, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
}
button,
input,
textarea,
select {
  font: inherit;
}
button {
  cursor: pointer;
  transition:
    background 0.16s,
    color 0.16s,
    transform 0.16s;
  border: 1px solid var(--line);
  background: var(--elev);
  color: inherit;
  border-radius: 11px;
  padding: 10px 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 0.875rem;
}
button:hover {
  background: var(--accent-bg);
}
button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
button:active:not(:disabled) {
  transform: translateY(1px);
}
input,
textarea,
select {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  color: var(--text);
  min-width: 0;
  max-width: 100%;
  font-size: 0.9375rem;
}
input::placeholder,
textarea::placeholder {
  color: var(--dim);
}
textarea {
  resize: vertical;
  line-height: 1.8;
}
p {
  line-height: 1.9;
  margin: 10px 0;
}
h1,
h2,
h3 {
  line-height: 1.5;
  margin: 0;
}
h1 {
  font-size: 1.65rem;
}
h2 {
  font-size: 1.15rem;
}
h3 {
  font-size: 1rem;
  margin: 16px 0;
}
small {
  font-size: 0.8125rem;
  color: var(--dim);
  line-height: 1.8;
}
a {
  color: var(--accent);
  text-decoration: none;
}
label {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 0.875rem;
  margin-bottom: 20px;
}
svg {
  flex-shrink: 0;
}
input[type="checkbox"] {
  width: 20px;
  height: 20px;
  accent-color: var(--accent);
}
.primary {
  background: var(--accent);
  color: #211c33;
  border-color: transparent;
  font-weight: 700;
  padding: 12px 20px;
}
.primary:hover {
  background: #cbbdf9;
}
.wide {
  width: 100%;
}
.text-btn {
  background: none;
  border: 0;
  padding: 6px 0;
  color: var(--accent);
}
.danger {
  color: #f19aab;
}
.danger-solid {
  background: #9c3f58;
  color: white;
}
.hint {
  font-size: 0.8125rem;
  color: var(--dim);
  line-height: 1.9;
}
.error {
  color: #ff9aab;
}
.eyebrow {
  font-family: Arial, sans-serif;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--dim);
  display: block;
  margin-bottom: 8px;
}
.icon-btn {
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--dim);
  flex: none;
}
.icon-btn.active {
  color: var(--accent);
  background: var(--accent-bg);
}
.spin {
  animation: spin 1s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.boot {
  height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
}
.boot img {
  width: 64px;
}
.avatar {
  width: 46px;
  height: 46px;
  border-radius: 17px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: linear-gradient(140deg, #595078, #343046);
  color: #efe9ff;
  font-size: 1.25rem;
  font-weight: 600;
}
.avatar.group {
  background: linear-gradient(140deg, #465e65, #2d3b45);
  color: #d7efea;
}
.avatar.small {
  width: 35px;
  height: 35px;
  border-radius: 12px;
  font-size: 1rem;
}
.avatar.large {
  width: 76px;
  height: 76px;
  border-radius: 25px;
  font-size: 2rem;
}
.app-shell {
  height: 100dvh;
  display: flex;
  overflow: hidden;
}
.rail {
  width: 86px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 25px 8px 18px;
  gap: 10px;
  border-left: 1px solid var(--line);
  background: var(--surface);
}
.brand {
  width: 44px;
  height: 44px;
  margin-bottom: 30px;
}
.rail-item {
  position: relative;
  flex-direction: column;
  border: 0;
  background: transparent;
  border-radius: 14px;
  width: 64px;
  padding: 12px 3px;
  color: var(--dim);
  gap: 7px;
}
.rail-item span {
  font-size: 0.6875rem;
}
.rail-item.selected {
  background: var(--accent-bg);
  color: var(--accent);
}
.rail-item i {
  position: absolute;
  top: 10px;
  left: 14px;
  background: var(--accent);
  width: 5px;
  height: 5px;
  border-radius: 50%;
}
.rail-bottom {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.profile-button {
  padding: 0;
  border: 0;
  background: none;
}
.list-pane {
  width: 335px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--line);
}
.pane-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30px 24px 20px;
}
.pane-heading h1 {
  font-size: 1.5rem;
}
.search-field {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0 13px;
  color: var(--dim);
}
.list-pane > .search-field {
  margin: 0 18px;
}
.search-field input {
  border: 0;
  background: transparent;
  width: 100%;
  padding: 12px 0;
  font-size: 0.875rem;
}
.search-field .icon-btn {
  width: 23px;
}
.filters {
  display: flex;
  gap: 6px;
  padding: 17px 18px 12px;
  flex-wrap: wrap;
}
.filters button {
  font-size: 0.75rem;
  padding: 6px 10px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--dim);
}
.filters .selected {
  color: var(--accent);
  background: var(--accent-bg);
}
.filters button span {
  font-size: 0.6875rem;
}
.chat-list {
  flex: 1;
  overflow-y: auto;
  padding: 4px 10px;
}
.chat-row {
  width: 100%;
  background: none;
  border: 0;
  padding: 15px 12px;
  border-radius: 13px;
  display: flex;
  text-align: right;
  gap: 12px;
  margin-bottom: 3px;
  min-height: 80px;
}
.chat-row.selected {
  background: var(--elev);
}
.row-copy {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  flex: 1;
}
.row-copy b {
  font-size: 0.9375rem;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.row-copy small {
  font-size: 0.75rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.row-meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-end;
  color: var(--dim);
}
.row-meta small {
  font-size: 0.6875rem;
}
.row-meta em {
  font-style: normal;
  background: var(--accent);
  color: #211c33;
  border-radius: 7px;
  font-size: 0.75rem;
  min-width: 21px;
  padding: 1px 6px;
  text-align: center;
}
.connection {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--dim);
  padding: 17px 23px;
  border-top: 1px solid var(--line);
  font-size: 0.75rem;
}
.online,
.offline {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #79b89d;
}
.offline {
  background: #c79c67;
}
.version {
  margin-right: auto;
  font-size: 0.625rem;
  opacity: 0.7;
}
.list-empty {
  text-align: center;
  color: var(--dim);
  padding: 60px 15px;
}
.list-empty > svg {
  display: block;
  margin: 0 auto 18px;
  color: var(--accent);
}
.list-empty b {
  font-size: 0.875rem;
}
.list-empty p {
  font-size: 0.8125rem;
  margin-bottom: 20px;
}
.conversation {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg);
}
.welcome {
  margin: auto;
  text-align: center;
  max-width: 560px;
  padding: 30px;
}
.welcome-mark {
  width: 108px;
  height: 108px;
  display: grid;
  place-items: center;
  color: var(--accent);
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 36px;
  margin: 0 auto 28px;
  box-shadow: 0 20px 70px #0001;
}
.welcome h2 {
  font-size: 1.5rem;
}
.welcome > p {
  color: var(--dim);
  margin: 12px 0 28px;
}
.welcome-security {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 7px;
  color: var(--dim);
  font-size: 0.75rem;
  margin-top: 32px;
}
.announcement {
  display: flex;
  text-align: right;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px;
  margin-top: 38px;
  font-size: 0.875rem;
}
.announcement svg {
  color: var(--accent);
  margin-top: 4px;
}
.announcement p {
  color: var(--dim);
  margin-bottom: 0;
  white-space: pre-wrap;
}
.chat-header {
  min-height: 88px;
  display: flex;
  align-items: center;
  padding: 17px 28px;
  gap: 13px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.peer-title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  border: 0;
  background: none;
  padding: 0;
  gap: 4px;
}
.peer-title b {
  font-size: 1rem;
}
.peer-title small {
  font-size: 0.75rem;
}
.header-actions {
  display: flex;
  margin-right: auto;
  gap: 5px;
}
.mobile-back {
  display: none;
}
.encryption-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-size: 0.6875rem;
  color: var(--dim);
  padding: 12px;
}
.messages {
  flex: 1;
  overflow: auto;
  padding: 0 42px 24px;
  overscroll-behavior: contain;
}
.date-divider {
  text-align: center;
  margin: 18px 0 24px;
}
.date-divider span,
.message-empty > span {
  font-size: 0.6875rem;
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 5px 13px;
  border-radius: 7px;
  color: var(--dim);
}
.message-row {
  display: flex;
  justify-content: flex-end;
  margin: 10px 0;
}
.message-row.mine {
  justify-content: flex-start;
}
.bubble {
  position: relative;
  max-width: min(78%, 540px);
  min-width: 110px;
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 12px 15px 8px;
  border-radius: 17px 17px 4px 17px;
  box-shadow: 0 2px 6px #00000005;
}
.mine .bubble {
  background: var(--bubble);
  border-radius: 17px 17px 17px 4px;
}
.bubble p {
  font-size: 0.9375rem;
  margin: 0;
  line-height: 1.9;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.message-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  color: var(--dim);
  font-size: 0.625rem;
  margin-top: 5px;
}
.message-meta .read {
  color: #a9a1ed;
}
.sender-name {
  display: block;
  font-size: 0.75rem;
  color: var(--accent);
  margin-bottom: 5px;
}
.message-menu-btn {
  position: absolute;
  left: -31px;
  top: 5px;
  border: 0;
  padding: 4px;
  background: none;
  color: var(--dim);
  opacity: 0;
}
.bubble:hover .message-menu-btn,
.message-menu-btn:focus-visible {
  opacity: 1;
}
.message-menu {
  position: absolute;
  z-index: 20;
  bottom: 22px;
  left: 0;
  background: var(--elev);
  border: 1px solid var(--line);
  box-shadow: 0 10px 35px var(--shadow);
  border-radius: 13px;
  width: 205px;
  padding: 6px;
  display: flex;
  flex-direction: column;
}
.message-menu > button {
  background: none;
  border: 0;
  justify-content: flex-start;
  border-radius: 7px;
  font-size: 0.8125rem;
}
.reaction-picker {
  display: flex;
  border-bottom: 1px solid var(--line);
  padding-bottom: 5px;
}
.reaction-picker button {
  border: 0;
  background: none;
  padding: 6px;
  font-size: 1rem;
}
.reactions {
  display: flex;
  gap: 5px;
  margin-top: 8px;
}
.reactions button {
  border: 1px solid var(--line);
  padding: 2px 7px;
  font-size: 0.75rem;
  border-radius: 9px;
  background: var(--bg);
}
.reply-preview {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  border: 0;
  border-right: 3px solid var(--accent);
  background: #ffffff08;
  border-radius: 5px;
  padding: 7px 9px;
  font-size: 0.75rem;
  margin-bottom: 9px;
  width: 100%;
  max-width: 330px;
  overflow: hidden;
}
.reply-preview b {
  color: var(--accent);
}
.reply-preview span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  color: var(--dim);
}
.deleted p {
  font-style: italic;
  color: var(--dim);
}
.invalid {
  border-color: #bd6c6c50;
}
.typing {
  font-size: 0.75rem;
  color: var(--dim);
  padding: 8px;
}
.typing span {
  color: var(--accent);
  letter-spacing: 3px;
}
.composer-area {
  padding: 12px 26px 14px;
  background: var(--bg);
  border-top: 1px solid var(--line);
}
.composer {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 8px;
}
.composer textarea {
  flex: 1;
  border: 0;
  background: none;
  resize: none;
  min-height: 40px;
  max-height: 160px;
  padding: 8px 0;
  font-size: 0.9375rem;
}
.send-btn {
  background: var(--accent);
  color: #211c33;
  padding: 0;
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: 12px;
}
.send-btn svg {
  transform: rotate(180deg);
}
.send-btn .spin {
  transform: none;
}
.composer-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 9px 8px 0;
  font-size: 0.625rem;
  color: var(--dim);
}
.composer-foot select {
  border: 0;
  padding: 0;
  background: none;
  color: var(--dim);
  font-size: 0.6875rem;
}
.composer-reply {
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 0.8125rem;
  background: var(--surface);
  border-radius: 10px;
  padding: 6px 12px;
  margin-bottom: 8px;
}
.composer-reply > span {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.composer-reply small {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.recording {
  flex: 1;
  font-size: 0.875rem;
  color: #ec91a3;
  display: flex;
  gap: 10px;
  align-items: center;
}
.recording > span {
  width: 8px;
  height: 8px;
  background: #ec91a3;
  border-radius: 50%;
}
.pending {
  font-size: 0.75rem;
  color: #e3b87a;
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.pending button {
  background: none;
  border: 0;
}
.message-empty {
  text-align: center;
  padding: 65px 20px;
  color: var(--dim);
  font-size: 0.875rem;
}
.message-empty p {
  margin-top: 22px;
}
.load-more {
  display: flex;
  margin: 15px auto;
  font-size: 0.75rem;
}
.loading {
  display: flex;
  justify-content: center;
  gap: 10px;
  padding: 40px;
  color: var(--dim);
}
.request-card {
  margin: auto;
  text-align: center;
  padding: 30px;
  max-width: 430px;
}
.request-card h2 {
  margin-top: 20px;
}
.request-card p {
  color: var(--dim);
  font-size: 0.9375rem;
}
.request-card > .text-btn {
  display: flex;
  margin: 15px auto;
}
.file-attachment {
  max-width: 340px;
}
.file-attachment img {
  display: block;
  max-width: 100%;
  max-height: 300px;
  border-radius: 10px;
  object-fit: contain;
}
.file-attachment audio {
  width: 260px;
  max-width: 100%;
}
.file-attachment button {
  background: none;
  border: 0;
  text-align: right;
  padding: 10px 0;
}
.file-attachment button span {
  display: flex;
  flex-direction: column;
  gap: 5px;
  overflow-wrap: anywhere;
}
.file-download {
  display: flex;
  align-items: center;
  gap: 7px;
  overflow-wrap: anywhere;
  padding: 8px 0;
  font-size: 0.8125rem;
}
.settings-page,
.admin-page {
  flex: 1;
  overflow: auto;
  padding: 38px 48px 60px;
}
.page-title {
  margin-bottom: 30px;
}
.page-title p {
  color: var(--dim);
  font-size: 0.9375rem;
}
.surface {
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface);
  margin-bottom: 20px;
}
.surface > h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 19px;
}
.surface > p {
  color: var(--dim);
  font-size: 0.875rem;
}
.settings-grid {
  display: grid;
  grid-template-columns: minmax(300px, 1fr) minmax(300px, 1.1fr);
  gap: 24px;
  max-width: 1120px;
}
.profile-settings {
  align-self: start;
}
.profile-intro {
  display: flex;
  gap: 18px;
  align-items: center;
  margin-bottom: 30px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
}
.profile-intro p {
  color: var(--dim);
  font-size: 0.8125rem;
}
.button-row {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
}
.theme-options {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
}
.theme-options > button {
  flex: 1;
  flex-wrap: wrap;
  justify-content: center;
  padding: 10px;
  background: none;
}
.theme-options > button.selected {
  border-color: var(--accent);
  color: var(--accent);
}
.theme-preview {
  height: 55px;
  width: 100%;
  border-radius: 8px;
  display: block;
  border: 1px solid #9d8eba30;
}
.dark-preview {
  background: linear-gradient(90deg, #38314f 30%, #161826 30%);
}
.light-preview {
  background: linear-gradient(90deg, #ded5ee 30%, #f5f5fb 30%);
}
.toggle-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin: 0;
}
.toggle-row small {
  display: block;
}
.security-note {
  display: flex;
  gap: 14px;
  color: var(--dim);
}
.security-note > svg {
  color: var(--accent);
  margin-top: 4px;
}
.security-note p {
  font-size: 0.8125rem;
  margin: 5px 0 0;
}
.security-note b {
  font-size: 0.875rem;
  color: var(--text);
}
.logout-btn {
  background: none;
  border: 0;
  color: #e995a4;
  padding: 8px;
}
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
  background: #080912b8;
  backdrop-filter: blur(7px);
}
.modal {
  width: 510px;
  max-width: 100%;
  max-height: 90dvh;
  overflow: auto;
  outline: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 25px;
  box-shadow: 0 35px 100px #0005;
}
.modal > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.modal > p {
  color: var(--dim);
  font-size: 0.875rem;
}
.modal label input,
.modal label textarea {
  width: 100%;
}
.segmented {
  display: flex;
  background: var(--bg);
  padding: 5px;
  border-radius: 11px;
  margin-bottom: 24px;
}
.segmented button {
  flex: 1;
  border: 0;
  background: none;
}
.segmented .selected {
  background: var(--elev);
  color: var(--accent);
}
.picked {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}
.picked button {
  font-size: 0.75rem;
  padding: 5px 8px;
}
.user-results {
  min-height: 100px;
  max-height: 270px;
  overflow: auto;
  margin-bottom: 20px;
}
.user-results > button {
  display: flex;
  width: 100%;
  justify-content: flex-start;
  border: 0;
  background: none;
  padding: 10px;
}
.user-results > button.selected {
  background: var(--accent-bg);
}
.user-results > button > span:not(.avatar) {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.user-results > button b {
  font-size: 0.9375rem;
}
.peer-card {
  text-align: center;
  padding: 10px 0 15px;
}
.peer-card h2 {
  margin-top: 15px;
}
.peer-card p {
  color: var(--dim);
  font-size: 0.875rem;
}
.modal-actions {
  display: flex;
  gap: 10px;
  margin: 14px 0;
}
.peer-meta {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 9px;
}
.peer-meta span {
  padding: 4px 8px;
  border-radius: 7px;
  background: var(--elev);
  color: var(--dim);
  font-size: 0.7rem;
}
.modal-actions > button {
  flex: 1;
  font-size: 0.8125rem;
}
.member-list > div {
  display: flex;
  gap: 9px;
  align-items: center;
  padding: 12px 0;
  border-top: 1px solid var(--line);
  flex-wrap: wrap;
}
.member-list > div > span:not(.avatar) {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.member-list b {
  font-size: 0.875rem;
}
.member-list .text-btn {
  font-size: 0.75rem;
}
.inline-form {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.inline-form input {
  flex: 1;
}
.stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 20px 0;
}
.stack > button {
  justify-content: space-between;
  text-align: right;
}
.fingerprint {
  display: block;
  line-height: 2.2;
  word-break: break-word;
  background: var(--bg);
  padding: 18px;
  border-radius: 10px;
  font-size: 1rem;
  color: var(--accent);
}
.key-banner {
  position: fixed;
  bottom: 20px;
  left: 20px;
  right: 440px;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 10px;
  background: #423652;
  color: #f4e9ff;
  border: 1px solid #c8a1ed40;
  box-shadow: 0 10px 30px #0004;
  border-radius: 13px;
  padding: 12px 16px;
  font-size: 0.8125rem;
}
.key-banner > span {
  flex: 1;
}
.key-banner button {
  padding: 7px 11px;
  font-size: 0.75rem;
}
.toast {
  position: fixed;
  z-index: 100;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  max-width: calc(100% - 32px);
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--elev);
  color: var(--text);
  border: 1px solid var(--line);
  padding: 14px 18px;
  border-radius: 13px;
  box-shadow: 0 12px 40px #0005;
  font-size: 0.875rem;
}
.toast > svg {
  color: var(--accent);
}
.toast button {
  padding: 0;
  border: 0;
  background: none;
}
.admin-page {
  background: var(--bg);
}
.admin-page > .page-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.admin-badge {
  border: 1px solid var(--line);
  padding: 8px 13px;
  border-radius: 9px;
  display: flex;
  gap: 7px;
  align-items: center;
  color: var(--accent);
  font-size: 0.8125rem;
}
.admin-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 27px;
  border-bottom: 1px solid var(--line);
  overflow: auto;
  padding-bottom: 12px;
}
.admin-tabs button {
  background: none;
  border: 0;
  color: var(--dim);
  white-space: nowrap;
}
.admin-tabs button.selected {
  color: var(--accent);
  background: var(--accent-bg);
}
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.stats .surface {
  display: flex;
  flex-direction: column;
  gap: 13px;
}
.stats svg {
  color: var(--accent);
}
.stats strong {
  font-size: 2rem;
}
.stats span {
  color: var(--dim);
  font-size: 0.875rem;
}
.empty-state {
  text-align: center;
  color: var(--dim);
  padding: 45px;
  font-size: 0.875rem;
}
.audit-list > div {
  display: flex;
  gap: 13px;
  align-items: center;
  border-top: 1px solid var(--line);
  padding: 15px 0;
}
.audit-list svg {
  color: var(--accent);
}
.audit-list span {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}
.audit-list b {
  font-size: 0.875rem;
}
.audit-list time {
  font-size: 0.75rem;
  color: var(--dim);
}
.section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 22px;
}
.table-wrap {
  overflow: auto;
}
table {
  width: 100%;
  border-collapse: collapse;
  white-space: nowrap;
  font-size: 0.875rem;
  text-align: right;
}
th {
  font-size: 0.75rem;
  color: var(--dim);
  font-weight: 400;
  padding: 13px;
  border-bottom: 1px solid var(--line);
}
td {
  padding: 17px 13px;
  border-bottom: 1px solid var(--line);
}
.table-user {
  display: flex;
  align-items: center;
  gap: 11px;
}
.table-user > span {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.table-user b {
  font-weight: 500;
}
.status-pill {
  font-size: 0.6875rem;
  padding: 4px 9px;
  background: #7eba9915;
  color: #88c5a6;
  border-radius: 7px;
  white-space: nowrap;
}
.status-pill.banned {
  background: #ec728215;
  color: #ed91a2;
}
.group-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
}
.group-grid article {
  display: flex;
  align-items: center;
  flex-direction: column;
  padding: 25px 15px;
  border: 1px solid var(--line);
  border-radius: 15px;
  gap: 10px;
}
.group-grid h3 {
  margin: 0;
}
.group-grid span:not(.avatar) {
  font-size: 0.875rem;
  color: var(--dim);
}
.report-card {
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 19px;
  margin: 14px 0;
}
.report-card header {
  display: flex;
  align-items: center;
  gap: 15px;
}
.report-card header small {
  margin-right: auto;
}
.report-card p {
  font-size: 0.9375rem;
  white-space: pre-wrap;
}
.report-card blockquote {
  margin: 15px 0;
  background: var(--bg);
  padding: 15px;
  border-right: 3px solid var(--accent);
}
.broadcast {
  max-width: 700px;
}
.broadcast > svg {
  color: var(--accent);
  margin-bottom: 20px;
}
.broadcast textarea {
  width: 100%;
}
.login {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 110px;
  padding: 50px;
  background:
    radial-gradient(ellipse at 70% 40%, #30253e 0, transparent 55%), #161826;
  color: #ecebf5;
}
.login-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.login-brand img {
  width: 115px;
  border-radius: 35px;
  box-shadow: 0 20px 80px #0003;
}
.login-brand > span {
  font-size: 2rem;
  margin-top: 10px;
}
.login-brand small {
  color: #a19cb4;
}
.login-card {
  max-width: 450px;
  width: 100%;
}
.login-card .eyebrow {
  margin-bottom: 25px;
}
.login-card h1 {
  font-size: 2.3rem;
  line-height: 1.75;
}
.login-card > p {
  color: #a6a2b5;
  font-size: 0.9375rem;
  margin: 20px 0 26px;
}
.login-card > .hint {
  display: block;
  text-align: center;
  margin-top: 10px;
}
.login-points {
  display: flex;
  gap: 25px;
  justify-content: center;
  margin: 25px 0;
  font-size: 0.8125rem;
  color: #b5adc8;
}
.login-points span {
  display: flex;
  align-items: center;
  gap: 7px;
}
.dev-accounts {
  border: 1px solid #ffffff0e;
  border-radius: 15px;
  padding: 18px;
  margin-top: 25px;
  background: #ffffff03;
}
.dev-accounts b {
  font-size: 0.8755rem;
}
.dev-accounts p {
  font-size: 0.8125rem;
  color: #9793a7;
}
.dev-accounts > div {
  display: flex;
  gap: 8px;
}
.dev-accounts button {
  font-size: 0.8125rem;
  flex: 1;
  padding: 9px;
}
.login-card > .login-foot {
  font-size: 0.6875rem;
  color: #7f7b90;
  line-height: 2;
  text-align: center;
}
.search-results {
  max-height: 330px;
  overflow: auto;
}
.search-results span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.search-results small {
  flex-shrink: 0;
}
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
::-webkit-scrollbar-thumb {
  background: #8f86aa30;
  border-radius: 4px;
}
@media (min-width: 1600px) {
  .list-pane {
    width: 370px;
  }
  .messages {
    padding-left: 70px;
    padding-right: 70px;
  }
  .settings-page,
  .admin-page {
    padding-left: 80px;
    padding-right: 80px;
  }
}
@media (max-width: 1100px) {
  .list-pane {
    width: 295px;
  }
  .rail {
    width: 75px;
  }
  .settings-page,
  .admin-page {
    padding: 30px 25px;
  }
  .settings-grid {
    grid-template-columns: 1fr;
  }
  .stats {
    grid-template-columns: repeat(2, 1fr);
  }
  .messages {
    padding: 0 25px 20px;
  }
  .group-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .login {
    gap: 65px;
  }
  .key-banner {
    right: 390px;
  }
}
@media (max-width: 760px) {
  .app-shell {
    flex-direction: column-reverse;
  }
  .rail {
    width: 100%;
    height: 70px;
    flex-direction: row;
    justify-content: space-around;
    padding: 6px 5px 8px;
    border-left: 0;
    border-top: 1px solid var(--line);
    gap: 2px;
  }
  .brand,
  .rail-bottom {
    display: none;
  }
  .rail-item {
    padding: 6px 2px;
    gap: 3px;
    width: 62px;
  }
  .rail-item span {
    font-size: 0.625rem;
  }
  .rail-item svg {
    width: 20px;
  }
  .list-pane {
    width: 100%;
    flex: 1;
    min-height: 0;
    border: 0;
  }
  .pane-heading {
    padding: 23px 22px 18px;
  }
  .mobile-hidden {
    display: none !important;
  }
  .conversation {
    min-height: 0;
  }
  .mobile-back {
    display: block;
  }
  .chat-header {
    padding: 12px 12px;
    min-height: 76px;
    gap: 9px;
  }
  .chat-header .avatar {
    width: 38px;
    height: 38px;
    border-radius: 13px;
  }
  .header-actions {
    gap: 0;
  }
  .chat-header .icon-btn {
    width: 32px;
  }
  .messages {
    padding: 0 18px 15px;
  }
  .bubble {
    max-width: 86%;
    padding: 10px 13px 6px;
  }
  .message-menu-btn {
    opacity: 1;
    left: -23px;
  }
  .message-menu {
    left: 0;
  }
  .composer-area {
    padding: 9px 10px 10px;
  }
  .composer {
    gap: 3px;
    padding: 6px;
  }
  .composer .icon-btn {
    width: 32px;
  }
  .composer-foot > span {
    display: none;
  }
  .composer-foot {
    justify-content: flex-end;
    margin-top: 6px;
  }
  .composer textarea {
    font-size: 1rem;
  }
  .encryption-strip {
    font-size: 0.625rem;
    padding: 9px;
  }
  .settings-page,
  .admin-page {
    padding: 25px 17px 30px;
    min-height: 0;
  }
  .settings-grid {
    display: block;
  }
  .surface {
    padding: 20px;
    border-radius: 16px;
  }
  .stats {
    gap: 10px;
  }
  .stats .surface {
    padding: 19px;
    gap: 10px;
  }
  .stats strong {
    font-size: 1.6rem;
  }
  .stats span {
    font-size: 0.75rem;
  }
  .admin-page > .page-title {
    align-items: flex-start;
  }
  .admin-badge {
    font-size: 0.625rem;
    padding: 6px;
  }
  .admin-badge svg {
    width: 14px;
  }
  .page-title h1 {
    font-size: 1.45rem;
  }
  .admin-tabs {
    gap: 3px;
  }
  .admin-tabs button {
    font-size: 0.8125rem;
    padding: 9px 12px;
  }
  .section-heading {
    flex-direction: column;
    align-items: stretch;
  }
  .audit-list time {
    font-size: 0.625rem;
  }
  .report-card header {
    gap: 7px;
    flex-wrap: wrap;
  }
  .report-card header small {
    margin-right: 0;
  }
  .group-grid {
    grid-template-columns: 1fr;
  }
  .modal-backdrop {
    padding: 14px;
  }
  .modal {
    padding: 20px;
    max-height: 88dvh;
  }
  .key-banner {
    bottom: 80px;
    left: 12px;
    right: 12px;
    font-size: 0.75rem;
    flex-wrap: wrap;
  }
  .toast {
    bottom: 85px;
    min-width: 240px;
    font-size: 0.8125rem;
  }
  .login {
    flex-direction: column;
    gap: 32px;
    padding: 35px 24px;
  }
  .login-brand {
    flex-direction: row;
    gap: 13px;
  }
  .login-brand img {
    width: 48px;
    border-radius: 15px;
  }
  .login-brand > span {
    font-size: 1.4rem;
    margin: 0;
  }
  .login-brand small {
    display: none;
  }
  .login-card h1 {
    font-size: 1.9rem;
  }
  .login-card .eyebrow {
    font-size: 0.5625rem;
  }
  .login-card > .login-foot {
    margin-bottom: 0;
  }
  .welcome-security {
    font-size: 0.6875rem;
  }
  .login .toast {
    bottom: 20px;
  }
  .member-list .icon-btn {
    width: 28px;
  }
  .file-attachment audio {
    width: 220px;
  }
}

/* نسخهٔ ۰.۸ — ورود موبایلی، تماس پایدار و رابط یکپارچه */
.auth-channel { display:grid;grid-template-columns:1fr 1fr;gap:5px;margin:10px 0;padding:4px;border-radius:13px;background:var(--hover); }
.auth-channel button { min-height:38px;border:0;border-radius:10px;background:transparent;color:var(--muted);display:flex;align-items:center;justify-content:center;gap:7px; }
.auth-channel button.selected { color:var(--ink);background:var(--surface);box-shadow:0 2px 9px #101b2a12; }
.phone-auth { animation:auth-slide .24s ease; }.otp-phone{display:flex;align-items:center;justify-content:space-between;padding:9px 11px;border-radius:11px;background:var(--hover)}.otp-phone button,.dev-otp{border:0;background:transparent;color:var(--accent)}
.otp-input{text-align:center!important;font-size:1.35rem!important;letter-spacing:.55em!important;font-variant-numeric:tabular-nums}.dev-otp{width:100%;padding:7px;border-radius:9px;background:var(--accent-bg)}
@keyframes auth-slide{from{opacity:0;transform:translateY(6px)}}

.conversation:before { content:"";position:absolute;inset:0;pointer-events:none;opacity:.42;background-image:radial-gradient(circle at center,color-mix(in srgb,var(--accent) 10%,transparent) 0 1px,transparent 1.5px);background-size:31px 31px;mask-image:linear-gradient(transparent,#000 20%,#000 85%,transparent); }
.messages,.composer-area,.chat-header,.pinned-message{position:relative;z-index:1}
.bubble { padding:9px 12px 23px!important; min-width:94px; }
.bubble p{font-size:.89rem!important;line-height:1.7!important}.message-row.mine .bubble{background:linear-gradient(140deg,color-mix(in srgb,var(--accent-bg) 90%,var(--surface)),color-mix(in srgb,var(--accent) 13%,var(--surface)))!important}
.message-meta,.message-row.mine .message-meta { position:absolute!important;right:10px!important;left:auto!important;bottom:5px!important;float:none!important;margin:0!important;direction:ltr!important;justify-content:flex-start!important;line-height:1; }
.message-meta svg{width:14px;height:14px}.message-meta .read{color:#3f9fe7!important}.message-row.mine .message-meta svg{order:-1}
.reactions { position:absolute!important;left:9px!important;right:auto!important;bottom:-15px!important;margin:0!important;z-index:2;direction:ltr; }
.bubble:has(.reactions){margin-bottom:17px!important}.reactions button{min-height:27px!important;padding:2px 7px!important;border-radius:13px!important;background:var(--surface)!important;box-shadow:0 2px 8px #0f1c2a18}
.reply-preview{margin-bottom:8px!important;background:color-mix(in srgb,var(--accent) 10%,transparent)!important}.sender-name{font-weight:750;letter-spacing:-.1px}

.call-topbar { direction:rtl!important; }.call-topbar>button{position:absolute!important;left:14px!important;top:10px!important;display:grid!important;place-items:center!important;padding:0!important}.call-topbar>button svg{display:block;margin:auto}
.call-chat-toggle { top:10px!important;bottom:auto!important;left:62px!important;height:38px!important;z-index:12!important;padding:0 13px!important;display:flex!important;align-items:center!important;justify-content:center!important;line-height:1!important; }
.call-chat-toggle svg{display:block;flex:none;margin:0}.call-actions{display:flex!important;align-items:center!important;justify-content:center!important}.call-button{display:flex!important;align-items:center!important;justify-content:center!important;line-height:1!important;border:0!important}.call-button svg{display:block!important;margin:0!important;position:static!important;transform:none!important}
.call-participants { position:relative;z-index:5;width:min(440px,92vw);margin:18px auto 0;display:flex;flex-wrap:wrap;justify-content:center;gap:9px;color:white; }
.call-participant { min-width:135px;padding:10px 12px;border:1px solid #ffffff16;border-radius:15px;background:#ffffff0b;backdrop-filter:blur(12px);display:flex;align-items:center;gap:9px; }
.call-participant .avatar{width:40px!important;height:40px!important;font-size:.9rem!important;box-shadow:none!important}.call-participant span{display:flex;flex:1;min-width:0;flex-direction:column}.call-participant b{font-size:.8rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.call-participant small{font-size:.67rem;color:#9eafbf}.call-participant>svg{color:#67d39c}
.video-call .call-participants{position:absolute;right:15px;top:118px;width:210px;margin:0;display:grid;gap:5px}.video-call .call-participant{min-width:0;padding:6px 8px;border-radius:11px}.video-call .call-participant .avatar{width:30px!important;height:30px!important}
.call-dock{box-sizing:border-box!important;direction:rtl!important;right:72px!important;bottom:0!important;border-radius:14px 0 0 0!important}.call-dock>*{flex:none}.call-dock>span:nth-of-type(2){flex:1!important}.dock-participants{display:flex;direction:ltr;margin-inline:-2px 1px}.dock-participants .avatar{width:27px!important;height:27px!important;font-size:.62rem!important;margin-left:-8px;border:2px solid var(--surface)}
.remote-video,.local-video,.group-video{object-position:center!important}.remote-video,.group-video{object-fit:contain!important}.call-overlay:not(.video-call) .call-copy{margin-top:auto!important;margin-bottom:0!important}

.settings-page{background:linear-gradient(145deg,color-mix(in srgb,var(--app-bg) 92%,var(--accent-bg)),var(--app-bg))!important}.settings-layout{grid-template-columns:224px minmax(0,720px)!important;justify-content:center!important;gap:16px!important}.settings-nav{padding:9px!important;border-radius:19px!important}.settings-user{padding:13px 10px 17px!important}.settings-nav>button{min-height:46px!important;border-radius:12px!important}.settings-nav>button.selected{box-shadow:inset -3px 0 0 var(--accent)!important}
.settings-content{display:grid;gap:12px}.settings-content .surface{border-radius:19px!important;border-color:color-mix(in srgb,var(--line) 74%,transparent)!important;box-shadow:0 8px 28px #111c2b09!important}.settings-content .surface>h2{display:flex;align-items:center;gap:9px;margin:0;padding:16px 18px 11px;font-size:.96rem}.profile-settings .profile-intro{min-height:142px!important;align-items:center!important}.profile-settings .avatar.large{width:76px!important;height:76px!important}.profile-settings form{padding:17px 20px 20px!important}.settings-content :where(input,textarea,select){border:1px solid transparent!important;background:color-mix(in srgb,var(--app-bg) 72%,var(--surface))!important;transition:background .18s ease!important}.settings-content :where(input,textarea,select):focus{border-color:transparent!important;background:var(--hover)!important}.setting-row{margin:0 17px!important;padding:13px 1px!important}.theme-options{padding:0 17px 14px!important}.blocked-user,.device-row{margin:0 17px;padding:11px 0!important}.access-summary{padding-bottom:15px!important}.access-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:0 16px}.access-cards>div{min-height:72px;padding:10px;border-radius:13px;background:var(--hover);display:flex;align-items:center;gap:9px}.access-cards>div>svg{color:var(--accent)}.access-cards span{display:flex;flex-direction:column}.access-cards b{font-size:.77rem}.access-cards small{font-size:.65rem;color:var(--muted)}
.auth-policy-card{grid-column:1/-1!important;min-height:auto!important;align-items:stretch!important}.auth-policy-card p{color:var(--muted);font-size:.78rem}.policy-options{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}.policy-options button{min-height:74px;padding:11px;border:1px solid var(--line);border-radius:13px;background:var(--surface);display:flex;align-items:center;text-align:right;gap:10px}.policy-options button.selected{border-color:var(--accent);background:var(--accent-bg);color:var(--accent)}.policy-options span{display:flex;flex-direction:column}.policy-options small{color:var(--muted)}

@media(max-width:760px){
 .call-chat-toggle{left:58px!important;top:7px!important;width:38px!important;height:38px!important;padding:0!important}.call-topbar>button{left:9px!important;top:7px!important}.call-participants{width:100%;gap:6px}.call-participant{min-width:calc(50% - 4px);padding:8px}.video-call .call-participants{top:105px;right:7px;width:165px}.call-dock{right:0!important;bottom:61px!important;border-radius:0!important}.dock-participants{display:none}.access-cards{grid-template-columns:1fr;padding:0 13px}.access-cards>div{min-height:58px}.policy-options{grid-template-columns:1fr}.settings-layout{display:block!important}.settings-content .surface{border-radius:16px!important}
}

/* تجربهٔ مینیمال گفتگو و مدیریت ـ نسخهٔ ۰.۶ */
input:focus,
textarea:focus,
select:focus,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: none;
  box-shadow: none;
  border-color: var(--line);
}
.conversation {
  position: relative;
  background-color: var(--bg);
  background-image:
    radial-gradient(circle at 12px 12px, color-mix(in srgb, var(--accent) 8%, transparent) 1.2px, transparent 1.5px),
    linear-gradient(135deg, transparent 47%, color-mix(in srgb, var(--accent) 3%, transparent) 48%, color-mix(in srgb, var(--accent) 3%, transparent) 52%, transparent 53%);
  background-size: 34px 34px, 82px 82px;
}
.messages { background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 54%, transparent), color-mix(in srgb, var(--bg) 78%, transparent)); }
.bubble {
  box-shadow: 0 5px 18px #00000012;
  padding: 9px 12px 5px;
  border-radius: 17px 17px 6px 17px;
}
.mine .bubble { border-radius: 17px 17px 17px 6px; }
.reply-preview {
  width: 100%;
  border: 0;
  border-right: 3px solid var(--accent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent-bg) 72%, transparent);
  padding: 7px 10px;
  margin-bottom: 7px;
  align-items: flex-start;
  text-align: right;
}
.reply-preview b { color: var(--accent); }
.message-meta { direction: rtl; justify-content: flex-start; gap: 4px; }
.mine .message-meta { justify-content: flex-end; }
.message-meta .read { color: #58aaf0; }
.message-menu.context-pop { animation: contextMenuPop .22s cubic-bezier(.2,1.35,.35,1) both; transform-origin: 90% 0; }
@keyframes contextMenuPop { from { opacity: 0; transform: translateY(-7px) scale(.88) rotate(-1deg); } }

.composer-area { padding: 9px 12px 10px; }
.composer {
  direction: rtl;
  display: flex;
  border-radius: 23px;
  padding: 5px 6px;
  background: color-mix(in srgb, var(--surface) 95%, transparent);
  box-shadow: 0 10px 34px #0002;
}
.composer textarea { order: 3; background: transparent; border: 0; padding: 10px 7px; }
.composer .send-btn { order: 1; width: 42px; height: 42px; border-radius: 50%; padding: 0; background: linear-gradient(145deg, var(--accent), #7567c9); color: white; box-shadow: 0 7px 22px color-mix(in srgb, var(--accent) 30%, transparent); transform: rotate(180deg); }
.composer .send-btn svg { transform: rotate(-180deg); }
.composer .voice-btn { order: 2; color: var(--accent); }
.composer .poll-btn { order: 4; }
.composer .attach-btn { order: 5; }
.recording { order: 3; flex: 1; justify-content: flex-start; }
.composer-reply { border-right: 3px solid var(--accent); border-radius: 12px; background: color-mix(in srgb, var(--surface) 96%, transparent); }

.group-call-banner {
  width: calc(100% - 24px); margin: 8px 12px 0; min-height: 58px; padding: 8px 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  border-radius: 15px; background: linear-gradient(100deg, color-mix(in srgb, var(--accent-bg) 85%, var(--surface)), var(--surface));
  justify-content: flex-start; text-align: right;
}
.group-call-banner > span:nth-child(2) { display:flex; flex-direction:column; flex:1; }
.group-call-banner small { color: var(--dim); }
.group-call-banner strong { color: var(--accent); font-size:.78rem; }
.group-call-pulse { width:38px; height:38px; border-radius:50%; display:grid; place-items:center; color:white; background:#35a36c; animation: callPulse 2s infinite; }
@keyframes callPulse { 50% { box-shadow: 0 0 0 8px #35a36c18; } }

.modal { width: min(470px, 100%); border-radius: 20px; padding: 18px; background: color-mix(in srgb, var(--surface) 97%, transparent); }
.modal > header { margin-bottom: 14px; }
.modal > header h2 { font-size: 1.02rem; }
.modal-backdrop { backdrop-filter: blur(10px) saturate(.8); }
.confirm-modal { max-width: 390px; text-align: center; }
.confirm-visual { width:56px;height:56px;margin:4px auto 10px;border-radius:18px;display:grid;place-items:center;background:#d65b6d1b;color:#ef8292; }
.confirm-actions { display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:18px; }
.search-modal .search-field, .new-chat-search .search-field { border-radius: 16px; background: var(--elev); transition: transform .2s ease; }
.search-modal .search-field:focus-within, .new-chat-search .search-field:focus-within { transform: scale(1.012); }
.search-categories { display:flex; gap:5px; overflow-x:auto; padding:3px 0 10px; scrollbar-width:none; }
.search-categories button { flex:none; padding:6px 11px; border-radius:999px; background:transparent; color:var(--dim); }
.search-categories button.selected { background:var(--accent-bg);color:var(--accent); }
.new-chat-modal { max-width: 450px; }
.new-chat-modal .segmented { margin-bottom:15px; border-radius:14px; }
.new-chat-modal .user-results > button { border-radius:13px; animation:searchResultIn .24s ease both; }

.profile-modal { max-height: min(92dvh, 820px); overflow-y: auto; scrollbar-width: thin; }
.profile-modal > header { position: sticky; top: 0; }
.profile-hero { min-height: 210px; }
.profile-cover { background: radial-gradient(circle at 70% 5%, #b6a9ff4d, transparent 35%), linear-gradient(150deg, #4d4778, #171925 72%); }
.member-list { display:flex; flex-direction:column; gap:5px; margin-bottom:12px; }
.member-list > div { flex-wrap:nowrap; min-height:58px; padding:7px; border:0; border-radius:13px; background:color-mix(in srgb, var(--elev) 46%, transparent); }
.member-identity { min-width:0; flex:1; justify-content:flex-start; padding:0; border:0; background:transparent; text-align:right; }
.member-identity:disabled { opacity:1; cursor:default; }
.member-identity > span:not(.avatar) { min-width:0; display:flex; flex-direction:column; align-items:flex-start; }
.member-identity b,.member-identity small { max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.profile-danger-zone { margin:16px; padding:12px 14px; display:flex; align-items:center; gap:12px; border:1px solid #e66b7a24; border-radius:15px; background:#b6435510; }
.profile-danger-zone > span { display:flex; flex-direction:column; flex:1; }
.profile-danger-zone button { background:transparent; padding:7px 10px; }
.handle-state.available { color:#67c595; }
.handle-state.taken,.handle-state.invalid { color:#ef8292; }

.call-overlay { width:min(860px,calc(100vw - 30px)); min-height:520px; padding:24px; overflow:hidden; }
.call-copy { position:relative; z-index:2; }
.call-chat-toggle { position:absolute; z-index:5; top:18px; left:18px; background:#ffffff14; border-color:#ffffff18; color:white; }
.call-chat-toggle.active { background:#9788e8; }
.call-chat-panel { position:absolute; z-index:6; inset:62px 15px 15px auto; width:min(310px,calc(100% - 30px)); display:flex;flex-direction:column;padding:12px;border-radius:18px;background:#11131eee;border:1px solid #ffffff17;backdrop-filter:blur(18px);animation:callChatIn .25s ease both; }
@keyframes callChatIn { from { opacity:0; transform:translateX(-18px); } }
.call-chat-panel header { display:flex;justify-content:space-between;align-items:center;margin-bottom:8px; }
.call-chat-panel header button { width:30px;height:30px;padding:0;background:transparent; }
.call-chat-messages { flex:1;overflow:auto;display:flex;flex-direction:column;gap:6px; }
.call-chat-messages > div { display:flex;flex-direction:column;padding:8px 10px;border-radius:11px;background:#ffffff0b; }
.call-chat-messages time { font-size:.62rem;color:#aaa; }
.call-chat-panel form { display:flex;gap:5px;margin-top:8px; }
.call-chat-panel input { flex:1;background:#ffffff0b;border:0; }
.call-chat-panel form button { width:38px;padding:0;border-radius:12px;background:#8d7ddd; }
.call-actions { flex-wrap:wrap; justify-content:center; }
.call-button { width:62px;height:58px;border-radius:17px; }

.admin-page { padding:16px; }
.admin-layout { grid-template-columns:176px minmax(0,1fr); gap:14px; max-width:1320px; }
.admin-tabs { padding:7px; border-radius:17px; }
.admin-tabs button { padding:9px 10px; border-radius:11px; font-size:.8rem; }
.admin-content .page-title { margin-bottom:14px; }
.admin-content .surface { border-radius:16px; }
.stats { gap:8px; }
.stats .surface { min-height:88px; padding:14px; }
.stats strong { font-size:1.35rem; }
.chart-legend { display:flex;gap:16px;margin-top:10px;font-size:.7rem;color:var(--dim); }
.chart-legend span::before { content:"";display:inline-block;width:7px;height:7px;border-radius:50%;margin-left:5px;background:var(--accent); }
.chart-legend .calls::before { background:#51c49a; }.chart-legend .users::before { background:#df8b78; }
.analytics-chart .chart-bars { width:min(58px,80%); height:100%; display:flex; align-items:flex-end; justify-content:center; gap:3px; }
.analytics-chart .chart-bars span { width:28%; min-height:5px; border-radius:5px 5px 2px 2px; }
.analytics-chart .chart-bars .messages { background:linear-gradient(var(--accent),#62569b); }
.analytics-chart .chart-bars .calls { background:linear-gradient(#70d7b1,#338a6b); }
.analytics-chart .chart-bars .users { background:linear-gradient(#f1a08d,#a7594a); }
.admin-insights { display:flex;align-items:center;gap:22px; }
.donut { --online:0%; width:112px;height:112px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;flex:none;background:radial-gradient(circle at center,var(--surface) 56%,transparent 58%),conic-gradient(var(--accent) var(--online),var(--elev) 0); }
.donut b { font-size:1.4rem; }.donut small{font-size:.65rem;}
.admin-row-actions { display:flex;gap:8px;flex-wrap:wrap; }
.admin-row-actions .text-btn { font-size:.72rem; }
.broadcast-pro { max-width:900px; }
.announcement-preview { display:flex;gap:10px;padding:13px;border-radius:14px;background:var(--elev);margin:8px 0 14px; }
.announcement-preview span { display:flex;flex-direction:column; }.announcement-preview.warning{border-right:3px solid #e9ae65}.announcement-preview.critical{border-right:3px solid #eb6578}.announcement-preview.success{border-right:3px solid #65c594}
.announcement-history { margin-top:24px;border-top:1px solid var(--line);padding-top:12px; }
.announcement-history article { display:flex;align-items:center;gap:10px;padding:10px 4px;border-bottom:1px solid var(--line); }
.announcement-history article.paused { opacity:.5; }.announcement-history article>div{display:flex;flex-direction:column;flex:1}.announcement-history time{font-size:.65rem;color:var(--dim)}
.notice-dot { width:8px;height:8px;border-radius:50%;background:var(--accent); }.notice-dot.warning{background:#e9ae65}.notice-dot.critical{background:#eb6578}.notice-dot.success{background:#65c594}
.priority-pill { padding:3px 7px;border-radius:8px;font-size:.65rem;background:var(--elev); }.priority-pill.high{color:#ff8797;background:#cc455717;}
.report-context { display:flex;gap:6px;flex-wrap:wrap;margin:8px 0; }.report-context span{font-size:.68rem;color:var(--dim);background:var(--elev);padding:4px 7px;border-radius:8px;}
.announcement.warning{border-right:3px solid #e9ae65}.announcement.critical{border-right:3px solid #eb6578}.announcement.success{border-right:3px solid #65c594}

@media (max-width:760px){
  .rail { justify-content:space-evenly; }
  .rail-item { flex:1 1 0; max-width:none; }
  .admin-page { padding:8px 8px 18px; }
  .admin-tabs { gap:2px; }
  .admin-tabs button { padding:8px 9px; }
  .admin-content .page-title p,.admin-content .eyebrow { display:none; }
  .call-overlay { inset:7px 7px 70px; min-height:0; padding:16px 10px; }
  .call-chat-toggle { top:10px;left:10px;font-size:0; width:38px;padding:0; }
  .call-actions { gap:7px;margin-top:14px; }
  .call-button { width:58px;height:54px;font-size:.64rem; }
  .profile-modal { max-height:92dvh; }
  .member-list > div .icon-btn { width:28px;min-width:28px;height:28px; }
  .composer-foot { display:none; }
}
+

/* رابط مینیمال با چیدمان نزدیک به پیام‌رسان‌های روز */
html {
  --bg: #0e1621;
  --surface: #17212b;
  --elev: #202b36;
  --line: #ffffff12;
  --text: #f3f6f9;
  --dim: #8f9ba7;
  --accent: #5eb5f7;
  --accent-bg: #203a50;
  --bubble: #2b5278;
}
html[data-theme="light"] {
  --bg: #eef2f5;
  --surface: #ffffff;
  --elev: #f1f3f5;
  --line: #18253314;
  --text: #182533;
  --dim: #708499;
  --accent: #3390ec;
  --accent-bg: #e6f3ff;
  --bubble: #d9efff;
}
button,
input,
textarea,
select {
  border-radius: 9px;
}
.primary {
  background: #3390ec;
  color: white;
}
.primary:hover {
  background: #2b80d2;
}
.rail {
  width: 76px;
  padding: 18px 6px 14px;
  background: var(--surface);
}
.brand {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  margin-bottom: 12px;
}
.rail-item {
  width: 58px;
  padding: 9px 2px;
  border-radius: 11px;
}
.rail-item.selected {
  background: var(--accent-bg);
}
.avatar,
.avatar.small,
.avatar.large,
.chat-header .avatar {
  border-radius: 50%;
  background: linear-gradient(145deg, #5aaee8, #3478b6);
}
.avatar.group {
  background: linear-gradient(145deg, #5dbb9d, #32816b);
}
.list-pane {
  width: 360px;
  background: var(--surface);
}
.pane-heading {
  padding: 20px 20px 14px;
}
.pane-heading .eyebrow,
.page-title .eyebrow {
  display: none;
}
.pane-heading h1 {
  font-size: 1.3rem;
}
.list-pane > .search-field {
  margin: 0 12px;
}
.search-field {
  background: var(--elev);
  border: 0;
  border-radius: 10px;
}
.filters {
  flex-wrap: nowrap;
  overflow-x: auto;
  padding: 10px 12px 8px;
}
.filters button {
  white-space: nowrap;
  padding: 7px 10px;
}
.chat-list {
  padding: 3px 7px;
}
.chat-row {
  min-height: 68px;
  margin: 0;
  padding: 10px 9px;
  border-radius: 10px;
}
.chat-row:hover {
  background: var(--elev);
}
.chat-row.selected {
  background: #3390ec;
  color: white;
}
.chat-row.selected small,
.chat-row.selected .row-meta {
  color: #e4f3ff;
}
.row-copy {
  gap: 3px;
}
.connection {
  min-height: 44px;
  padding: 11px 16px;
  background: var(--surface);
}
.connecting-dot {
  animation: connectionPulse 1.1s ease-in-out infinite;
}
@keyframes connectionPulse {
  50% {
    opacity: 0.25;
    transform: scale(0.75);
  }
}
.conversation {
  background:
    radial-gradient(
      circle at 20% 20%,
      color-mix(in srgb, var(--accent) 4%, transparent),
      transparent 34%
    ),
    var(--bg);
}
.chat-header {
  min-height: 68px;
  padding: 10px 18px;
}
.encryption-strip {
  padding: 7px;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
}
.messages {
  padding: 2px max(22px, 5vw) 18px;
}
.bubble {
  border: 0;
  border-radius: 14px 14px 4px 14px;
  padding: 9px 12px 6px;
  box-shadow: 0 1px 2px #0002;
}
.mine .bubble {
  border-radius: 14px 14px 14px 4px;
}
.welcome-mark {
  width: 82px;
  height: 82px;
  border-radius: 50%;
  box-shadow: none;
}
.welcome h2 {
  font-size: 1.3rem;
}
.announcement {
  border-radius: 12px;
  padding: 13px 15px;
}
.composer-area {
  background: var(--surface);
  border-top: 1px solid var(--line);
}
.composer {
  border-radius: 14px;
  background: var(--bg);
}
.readonly-notice {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--dim);
  font-size: 0.8rem;
  padding: 9px;
}
.modal-backdrop {
  background: #0008;
  backdrop-filter: blur(2px);
}
.modal {
  border-radius: 16px;
  padding: 20px;
}
.surface {
  border-radius: 14px;
  padding: 21px;
  margin-bottom: 14px;
  box-shadow: 0 1px 2px #0000000d;
}
.settings-page,
.admin-page {
  padding: 28px 34px 48px;
}
.page-title {
  margin-bottom: 20px;
}
.settings-layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 760px);
  gap: 18px;
  align-items: start;
}
.settings-nav {
  display: flex;
  flex-direction: column;
  padding: 8px;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 14px;
  position: sticky;
  top: 20px;
}
.settings-user {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 8px 15px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--line);
}
.settings-user > span,
.blocked-user > span {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
}
.settings-nav > button {
  justify-content: flex-start;
  background: none;
  border: 0;
  padding: 11px;
}
.settings-nav > button span {
  flex: 1;
  text-align: right;
}
.settings-nav > button.selected {
  color: var(--accent);
  background: var(--accent-bg);
}
.settings-nav > button.danger {
  margin-top: 8px;
  border-top: 1px solid var(--line);
  border-radius: 0;
  padding-top: 15px;
}
.settings-content {
  min-width: 0;
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.settings-save {
  display: flex;
  justify-content: flex-end;
}
.settings-list .setting-row {
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.setting-row > span {
  flex: 1;
}
.setting-row b,
.setting-row small {
  display: block;
}
.setting-row select {
  width: 165px;
  margin: 0;
}
.blocked-user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
}
.blocked-user button {
  background: none;
  color: var(--accent);
}
.theme-preview {
  height: 42px;
}
.inline-form {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 16px 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg);
}
.inline-form h3 {
  margin: 0 0 14px;
}
.inline-form label {
  width: 100%;
}
.inline-form label > svg {
  display: inline;
}
.add-member-button {
  width: 100%;
  margin: 4px 0 12px;
  background: none;
  color: var(--accent);
  border-style: dashed;
}
.modal-actions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 7px;
}
.modal-actions > button {
  flex-direction: column;
  min-height: 66px;
  padding: 8px 4px;
  font-size: 0.7rem;
  background: none;
}
.member-list > div {
  flex-wrap: nowrap;
  padding: 9px 0;
}
.member-list .icon-btn {
  width: 32px;
  height: 32px;
}
.member-list > div > small {
  color: var(--accent);
  white-space: nowrap;
}
.key-banner {
  background: #223347;
  color: white;
  border-color: #ffffff12;
}
.key-actions {
  display: flex;
  gap: 6px;
}
.key-banner .key-actions button {
  color: white;
  background: #ffffff14;
  border-color: #ffffff20;
}
.key-banner .key-actions button:hover {
  background: #ffffff24;
}
.admin-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.service-health {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px 16px;
  margin-bottom: 14px;
  border: 1px solid #4caf7a45;
  background: #4caf7a10;
  border-radius: 12px;
}
.service-health > span {
  display: flex;
  flex: 1;
  flex-direction: column;
}
.service-health > i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #4caf7a;
  box-shadow: 0 0 0 5px #4caf7a1f;
}
.stats {
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.stats .surface {
  gap: 8px;
}
.stats strong {
  font-size: 1.65rem;
}
.mini-filters {
  display: flex;
  gap: 5px;
}
.mini-filters button {
  padding: 7px 10px;
  border: 0;
  background: none;
  color: var(--dim);
}
.mini-filters button.selected {
  color: var(--accent);
  background: var(--accent-bg);
}
.system-detail {
  grid-column: 1 / -1;
}
.system-detail > div {
  display: flex;
  justify-content: space-between;
  padding: 11px 0;
  border-top: 1px solid var(--line);
}
.healthy {
  color: #58b984;
}
html[data-density="compact"] .chat-row {
  min-height: 60px;
  padding-block: 7px;
}
html[data-density="compact"] .message-row {
  margin-block: 5px;
}
html[data-density="compact"] .bubble {
  padding-top: 7px;
}

@media (max-width: 980px) {
  .settings-layout {
    grid-template-columns: 190px minmax(0, 1fr);
  }
  .settings-page,
  .admin-page {
    padding: 24px 20px 40px;
  }
}
@media (max-width: 760px) {
  .settings-layout {
    display: block;
  }
  .settings-nav {
    position: static;
    flex-direction: row;
    overflow-x: auto;
    margin-bottom: 12px;
  }
  .settings-user,
  .settings-nav > button svg:last-child {
    display: none;
  }
  .settings-nav > button {
    flex: 0 0 auto;
  }
  .settings-nav > button span {
    white-space: nowrap;
  }
  .settings-nav > button.danger {
    border: 0;
    margin: 0;
    padding-top: 11px;
  }
  .form-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .modal-actions {
    grid-template-columns: repeat(2, 1fr);
  }
  .stats {
    grid-template-columns: repeat(2, 1fr);
  }
  .admin-header-actions small,
  .admin-badge {
    display: none;
  }
  .key-actions {
    width: 100%;
  }
  .key-actions button {
    flex: 1;
  }
}

/* نسخه ۰.۴ — بازگشت به هویت بصری اصلی و اصلاح رابط واکنش‌گرا */
html {
  --bg: #151724;
  --surface: #1b1e2d;
  --elev: #232638;
  --line: #ffffff12;
  --text: #f1eff8;
  --dim: #9a96aa;
  --accent: #9b8bea;
  --accent-strong: #7e6fd1;
  --accent-bg: #9586e51a;
  --bubble: #393451;
}
html[data-theme="light"] {
  --bg: #f5f3fa;
  --surface: #ffffff;
  --elev: #efedf6;
  --line: #302c4517;
  --text: #292637;
  --dim: #777184;
  --accent: #7666c6;
  --accent-strong: #6555b6;
  --accent-bg: #7766c616;
  --bubble: #e5def8;
}
body {
  background: var(--bg);
}
button,
input,
textarea,
select {
  font: inherit;
}
button {
  border-radius: 12px;
}
input,
select {
  border-radius: 14px;
}
textarea {
  border-radius: 18px 18px 7px 18px;
}
input,
textarea,
select {
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--elev) 72%, transparent);
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
input:focus,
textarea:focus,
select:focus {
  border-color: color-mix(in srgb, var(--accent) 72%, white 8%);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
  background: var(--surface);
}
.primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
  color: white;
  border: 0;
  box-shadow: 0 8px 24px color-mix(in srgb, var(--accent) 22%, transparent);
}
.primary:hover {
  background: linear-gradient(135deg, #aa9af0, #7464c4);
  transform: translateY(-1px);
}
.icon-btn {
  width: 35px;
  height: 35px;
  min-width: 35px;
  padding: 0;
  border-radius: 11px;
}
.icon-btn svg {
  width: 17px;
  height: 17px;
}
.rail {
  width: 72px;
  padding: 15px 6px 12px;
  background: #171927;
  border-color: var(--line);
}
.brand {
  width: 39px;
  height: 39px;
  border-radius: 13px;
  box-shadow: 0 8px 24px #8f7fe645;
}
.rail-item {
  width: 55px;
  padding: 8px 2px;
  border-radius: 13px;
}
.rail-item svg {
  width: 18px;
  height: 18px;
}
.rail-item.selected {
  color: #c6bcff;
  background: linear-gradient(135deg, #9b8bea20, #7b6dc31d);
}
.avatar,
.avatar.small,
.avatar.large,
.chat-header .avatar {
  background: linear-gradient(145deg, #a395ec, #6f61b9);
  box-shadow: inset 0 0 0 1px #ffffff20;
}
.avatar.group {
  background: linear-gradient(145deg, #8377ca, #514784);
}
.list-pane {
  width: 350px;
  background: #191b29;
}
html[data-theme="light"] .list-pane,
html[data-theme="light"] .rail {
  background: var(--surface);
}
.chat-row.selected {
  background: linear-gradient(100deg, #8677d6, #7567c4);
}
.chat-row {
  border-radius: 14px;
}
.search-field {
  border: 1px solid transparent;
  background: var(--elev);
  border-radius: 16px;
  transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease;
}
.search-field:focus-within {
  border-color: #9b8bea75;
  box-shadow: 0 8px 30px #0002, 0 0 0 3px #9b8bea14;
  transform: translateY(-1px);
}
.search-field svg {
  transition: transform .22s ease, color .22s ease;
}
.search-field:focus-within svg {
  color: var(--accent);
  transform: scale(1.08) rotate(-5deg);
}
.connection {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.connection i,
.connecting-dot {
  background: var(--accent);
}
.conversation {
  background:
    radial-gradient(circle at 15% 15%, #9887df0b, transparent 30%),
    radial-gradient(circle at 85% 85%, #5b527e0e, transparent 32%),
    var(--bg);
}
.chat-header,
.composer-area {
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  backdrop-filter: blur(14px);
}
.bubble {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px 18px 6px 18px;
}
.mine .bubble {
  background: var(--bubble);
  border-radius: 18px 18px 18px 6px;
}
.composer {
  border: 1px solid var(--line);
  border-radius: 20px 20px 9px 20px;
  background: var(--bg);
}
.composer textarea {
  border-radius: 0;
}
.surface {
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: 0 10px 34px #0000000f;
}
.modal-backdrop {
  background: #0c0d14b8;
  backdrop-filter: blur(7px);
  animation: backdropIn .2s ease both;
}
.modal {
  border: 1px solid #ffffff16;
  border-radius: 24px;
  padding: 22px;
  box-shadow: 0 30px 100px #0009;
  animation: modalIn .28s cubic-bezier(.2,.9,.3,1.12) both;
  transform-origin: 50% 45%;
}
@keyframes backdropIn {
  from { opacity: 0; }
}
@keyframes modalIn {
  from { opacity: 0; transform: translateY(16px) scale(.965); }
}
.search-modal {
  max-width: 560px;
}
.search-modal .search-field {
  padding: 12px 15px;
  margin-bottom: 8px;
}
.search-modal .search-results > * {
  animation: searchResultIn .25s ease both;
}
.search-modal .search-results > *:nth-child(2) { animation-delay: .035s; }
.search-modal .search-results > *:nth-child(3) { animation-delay: .07s; }
.search-modal .search-results > *:nth-child(4) { animation-delay: .105s; }
@keyframes searchResultIn {
  from { opacity: 0; transform: translateX(10px); }
}
.profile-modal {
  padding: 0;
  overflow: hidden;
  max-width: 520px;
}
.profile-modal > header {
  position: absolute;
  z-index: 5;
  inset: 12px 14px auto;
  color: white;
  border: 0;
}
.profile-modal > header h2 {
  opacity: 0;
}
.profile-modal > header .icon-btn {
  background: #0b0c1466;
  color: white;
  border-color: #ffffff20;
}
.profile-hero {
  position: relative;
  min-height: 240px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: end;
  padding: 74px 24px 24px;
  text-align: center;
  color: white;
  overflow: hidden;
}
.profile-cover {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 25% 5%, #c9c1ff42, transparent 32%),
    linear-gradient(145deg, #3b365c, #171925 75%);
}
.profile-hero > .avatar {
  position: relative;
  width: 86px;
  height: 86px;
  font-size: 1.7rem;
  box-shadow: 0 12px 38px #0005, 0 0 0 4px #ffffff18;
}
.profile-identity {
  position: relative;
}
.profile-identity h2 {
  margin: 12px 0 2px;
}
.profile-identity p {
  margin: 0;
  color: #d0cbe6;
  font-size: .82rem;
}
.profile-quick-actions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 7px;
  padding: 14px 16px 6px;
}
.profile-quick-actions button,
.modal-actions > button {
  min-height: 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 4px;
  border: 0;
  background: var(--elev);
  color: var(--accent);
  font-size: .72rem;
  border-radius: 17px;
}
.profile-details {
  margin: 8px 16px 4px;
  padding: 5px 16px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--elev) 52%, transparent);
  border-radius: 18px;
}
.profile-details > div:not(.peer-meta) {
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}
.profile-details > div:last-child {
  border-bottom: 0;
}
.profile-details span {
  font-size: .69rem;
  color: var(--accent);
}
.profile-details p {
  margin: 3px 0 0;
  font-size: .88rem;
}
.profile-modal > .modal-actions,
.profile-modal > .inline-form,
.profile-modal > .add-member-button,
.profile-modal > h3,
.profile-modal > .member-list,
.profile-modal > .danger {
  margin-left: 16px;
  margin-right: 16px;
}
.profile-modal > .modal-actions {
  padding-top: 6px;
}
.settings-page,
.admin-page {
  background:
    radial-gradient(circle at 90% 0, #9987e40b, transparent 28%),
    var(--bg);
}
.profile-settings .profile-intro {
  border-radius: 18px 18px 8px 18px;
  background: linear-gradient(135deg, #9787df18, transparent);
  padding: 18px;
}
.settings-nav {
  border-radius: 20px;
}
.settings-nav > button {
  border-radius: 13px;
}
.inline-form {
  border-radius: 20px 20px 8px 20px;
}

/* پنل مدیریت بازنویسی‌شده */
.admin-page {
  padding: 24px;
  overflow: auto;
}
.admin-layout {
  width: min(1280px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 20px;
}
.admin-tabs {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-self: start;
  padding: 10px;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 22px;
}
.admin-nav-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 9px 16px;
  margin-bottom: 3px;
  border-bottom: 1px solid var(--line);
  color: var(--accent);
}
.admin-nav-brand > span {
  display: flex;
  flex-direction: column;
  color: var(--text);
}
.admin-nav-brand small {
  color: var(--dim);
  font-size: .68rem;
}
.admin-tabs button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 11px 12px;
  border: 0;
  background: transparent;
  color: var(--dim);
}
.admin-tabs button.selected {
  color: #c7bdff;
  background: linear-gradient(100deg, #9888df28, #9888df0c);
}
.admin-tabs button i {
  margin-right: auto;
  min-width: 20px;
  padding: 2px 5px;
  border-radius: 8px;
  background: #d1697c;
  color: white;
  font-size: .65rem;
  font-style: normal;
}
.admin-content {
  min-width: 0;
}
.service-health {
  border-radius: 18px;
}
.stats .surface {
  min-height: 112px;
  position: relative;
  overflow: hidden;
}
.stats .surface > svg {
  color: var(--accent);
}
.analytics-chart span {
  background: linear-gradient(var(--accent), #62569b);
}
.table-wrap {
  border: 1px solid var(--line);
  border-radius: 16px;
}
.group-grid article,
.report-card {
  border-radius: 18px;
  background: color-mix(in srgb, var(--elev) 45%, transparent);
}
.call-overlay {
  background:
    radial-gradient(circle at 30% 0, #9988e838, transparent 35%),
    linear-gradient(160deg, #252239, #10111a);
  border-radius: 28px;
  animation: callIn .3s cubic-bezier(.2,.9,.3,1.1) both;
}
@keyframes callIn {
  from { opacity: 0; transform: translateY(20px) scale(.96); }
}
.call-button {
  width: 68px;
  height: 64px;
  border-radius: 50%;
}
.call-button svg {
  width: 19px;
  height: 19px;
}

@media (max-width: 980px) {
  .admin-layout {
    grid-template-columns: 170px minmax(0, 1fr);
  }
  .list-pane {
    width: 310px;
  }
}
@media (max-width: 760px) {
  body,
  #root,
  .app-shell {
    width: 100%;
    height: 100dvh;
    max-width: 100vw;
    overflow: hidden;
  }
  .app-shell {
    display: flex;
    flex-direction: column;
  }
  .rail {
    order: 2;
    flex: 0 0 62px;
    width: 100%;
    height: 62px;
    min-height: 62px;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    overflow: hidden;
    padding: 5px max(4px, env(safe-area-inset-right)) calc(5px + env(safe-area-inset-bottom));
    border: 0;
    border-top: 1px solid var(--line);
  }
  .rail-item {
    flex: 1 1 0;
    width: auto;
    min-width: 42px;
    max-width: 70px;
    padding: 4px 1px;
    border-radius: 11px;
  }
  .rail-item svg {
    width: 17px;
    height: 17px;
  }
  .rail-item span {
    font-size: .56rem;
  }
  .list-pane,
  .conversation,
  .settings-page,
  .admin-page {
    order: 1;
    flex: 1 1 auto;
    width: 100%;
    height: calc(100dvh - 62px);
    min-height: 0;
    overflow: auto;
  }
  .list-pane {
    padding-bottom: env(safe-area-inset-bottom);
  }
  .pane-heading {
    padding: 17px 16px 12px;
  }
  .chat-header {
    min-height: 60px;
    padding: 8px 9px;
  }
  .chat-header .avatar {
    width: 35px;
    height: 35px;
  }
  .header-actions .icon-btn {
    width: 31px;
    min-width: 31px;
    height: 31px;
  }
  .header-actions .icon-btn svg {
    width: 15px;
    height: 15px;
  }
  .messages {
    padding: 4px 10px 12px;
  }
  .bubble {
    max-width: 91%;
    border-radius: 16px 16px 5px 16px;
  }
  .mine .bubble {
    border-radius: 16px 16px 16px 5px;
  }
  .composer-area {
    position: sticky;
    bottom: 0;
    padding: 7px 7px calc(7px + env(safe-area-inset-bottom));
  }
  .composer {
    border-radius: 17px 17px 7px 17px;
  }
  .encryption-strip {
    display: none;
  }
  .modal-backdrop {
    align-items: flex-end;
    padding: 0;
  }
  .modal {
    width: 100%;
    max-width: none;
    max-height: min(90dvh, 760px);
    overflow: auto;
    padding: 18px 16px calc(18px + env(safe-area-inset-bottom));
    border-radius: 24px 24px 0 0;
    animation-name: mobileModalIn;
    transform-origin: bottom center;
  }
  @keyframes mobileModalIn {
    from { opacity: 0; transform: translateY(35px); }
  }
  .profile-modal {
    padding: 0 0 calc(16px + env(safe-area-inset-bottom));
  }
  .profile-hero {
    min-height: 215px;
  }
  .profile-quick-actions {
    gap: 5px;
    padding-inline: 10px;
  }
  .profile-quick-actions button {
    min-height: 58px;
  }
  .form-grid {
    display: block;
  }
  .settings-page {
    padding: 16px 12px 24px;
  }
  .settings-nav {
    display: flex;
    position: static;
    flex-direction: row;
    border-radius: 16px;
    margin-bottom: 10px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .settings-nav > button {
    flex: 0 0 auto;
    padding: 9px 11px;
  }
  .surface {
    padding: 16px;
    border-radius: 18px;
  }
  .admin-page {
    padding: 12px 10px 22px;
  }
  .admin-layout {
    display: block;
  }
  .admin-tabs {
    position: static;
    flex-direction: row;
    overflow-x: auto;
    border-radius: 16px;
    margin-bottom: 12px;
    scrollbar-width: none;
  }
  .admin-nav-brand {
    display: none;
  }
  .admin-tabs button {
    flex: 0 0 auto;
    width: auto;
    padding: 9px 11px;
    white-space: nowrap;
  }
  .admin-tabs button i {
    margin-right: 0;
  }
  .admin-content .page-title {
    margin: 4px 4px 14px;
  }
  .stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .stats .surface {
    min-height: 96px;
  }
  .table-wrap {
    overflow-x: auto;
  }
  .table-wrap table {
    min-width: 680px;
  }
  .call-overlay,
  .call-overlay.video-call {
    inset: 8px 8px 70px;
    width: auto;
    border-radius: 24px;
  }
  .local-video {
    width: 86px;
    height: 116px;
  }
  .key-banner {
    bottom: 70px;
  }
}
@media (max-width: 390px) {
  .rail-item span {
    display: none;
  }
  .rail-item {
    justify-content: center;
  }
  .profile-quick-actions {
    grid-template-columns: repeat(2, 1fr);
  }
  .stats {
    grid-template-columns: 1fr 1fr;
  }
}

/* امکانات حساب و دستگاه در نسخه ۰.۵ */
.login {
  overflow: auto;
}
.login-card {
  padding-block: 28px;
}
.auth-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  padding: 5px;
  margin: 18px 0 14px;
  border: 1px solid var(--line);
  background: #ffffff05;
  border-radius: 17px;
}
.auth-switch button {
  border: 0;
  background: transparent;
  color: #aaa5ba;
  padding: 9px;
}
.auth-switch button.selected {
  background: #9787df22;
  color: #cabfff;
  box-shadow: inset 0 0 0 1px #aa9bec20;
}
.email-auth {
  display: grid;
  gap: 10px;
}
.email-auth label {
  margin: 0;
  font-size: .75rem;
  color: #aaa5ba;
}
.email-auth input {
  margin-top: 5px;
}
.auth-input {
  position: relative;
  display: block;
}
.auth-input svg {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-34%);
  color: var(--accent);
  z-index: 1;
}
.auth-input input {
  padding-right: 42px;
}
.auth-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0;
  color: #797487;
  font-size: .72rem;
}
.auth-divider::before,
.auth-divider::after {
  content: "";
  height: 1px;
  flex: 1;
  background: #ffffff0c;
}
.avatar {
  overflow: hidden;
}
.avatar > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.avatar-editor {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.avatar-editor > button {
  border: 0;
  background: var(--accent-bg);
  color: var(--accent);
  padding: 6px 10px;
  font-size: .7rem;
}
.device-list {
  margin-top: 10px;
}
.device-row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
}
.device-row > span:nth-child(2) {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.device-row small {
  color: var(--dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.device-icon {
  width: 35px;
  height: 35px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--accent-bg);
  color: var(--accent);
}
.file-attachment video {
  width: min(440px, 70vw);
  max-height: 360px;
  border-radius: 16px;
  background: #090a10;
}
.group-invite-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-inline: 16px;
}
.group-invite-actions .add-member-button {
  margin-inline: 0;
}
.invite-link {
  width: 100%;
  margin-bottom: 12px;
}
.pane-actions {
  display: flex;
  gap: 5px;
}
.search-results button > span {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.search-results button > span small {
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.call-button.active {
  background: var(--accent);
}
.group-video-grid {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: minmax(0, 1fr);
  gap: 4px;
  background: #0b0c12;
}
.group-video {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  background: #202131;
}
.group-video-grid + .call-copy {
  margin-top: auto;
  text-shadow: 0 2px 10px #000;
}
.poll-option-editor {
  display: grid;
  gap: 8px;
  margin: 12px 0;
}
.poll-option-editor > div {
  display: flex;
  align-items: center;
  gap: 7px;
}
.poll-option-editor input {
  flex: 1;
  margin: 0;
}
.poll-card {
  min-width: min(290px, 68vw);
  display: grid;
  gap: 7px;
  margin-top: 9px;
}
.poll-card > button {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 13px;
  background: color-mix(in srgb, var(--elev) 72%, transparent);
  border: 1px solid var(--line);
  color: var(--text);
}
.poll-card > button > span {
  position: absolute;
  inset: 0 auto 0 0;
  background: color-mix(in srgb, var(--accent) 17%, transparent);
  transition: width .3s ease;
}
.poll-card > button b,
.poll-card > button small {
  position: relative;
}
.poll-card > button b {
  flex: 1;
  text-align: right;
}
.poll-card > button.selected {
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
}
.poll-card > small {
  color: var(--dim);
}
@media (max-width: 760px) {
  .login {
    justify-content: flex-start;
    padding-top: 24px;
  }
  .login-card {
    padding-block: 0 24px;
  }
  .login-points {
    margin-block: 16px;
  }
  .group-invite-actions {
    margin-inline: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto !important;
    animation: none !important;
    transition: none !important;
  }
}

/* تماس، پیام سنجاق‌شده و نمای فشرده */
.pinned-message {
  width: 100%;
  border: 0;
  border-radius: 0;
  justify-content: flex-start;
  background: var(--surface);
  padding: 8px 24px;
  color: var(--accent);
  border-bottom: 1px solid var(--line);
}
.pinned-message span {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}
.pinned-message small {
  max-width: 60vw;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.call-overlay {
  position: fixed;
  z-index: 110;
  inset: 22px 22px 22px auto;
  width: min(380px, calc(100vw - 44px));
  background: linear-gradient(160deg, #202d3d, #111722);
  color: white;
  border: 1px solid #ffffff1a;
  border-radius: 24px;
  box-shadow: 0 22px 70px #0009;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 34px 22px;
  direction: rtl;
}
.call-overlay.video-call {
  width: min(720px, calc(100vw - 44px));
}
.call-copy {
  position: relative;
  z-index: 3;
  text-align: center;
}
.call-copy h2 {
  margin-top: 14px;
}
.call-copy p {
  color: #cad5e1;
}
.remote-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #10151d;
}
.local-video {
  position: absolute;
  z-index: 2;
  left: 16px;
  top: 16px;
  width: 112px;
  height: 150px;
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid #fff4;
  background: #202936;
}
.video-call .call-copy {
  margin-top: auto;
  text-shadow: 0 2px 8px #000;
}
.call-actions {
  position: relative;
  z-index: 3;
  display: flex;
  gap: 13px;
  margin-top: 24px;
}
.call-button {
  width: 76px;
  height: 70px;
  border-radius: 18px;
  flex-direction: column;
  padding: 8px;
  background: #ffffff20;
  border-color: #ffffff20;
  font-size: 0.75rem;
}
.call-button.accept {
  background: #24975b;
}
.call-button.hangup {
  background: #d84c59;
}
.call-button.off {
  background: #ffffff40;
}
.analytics-chart {
  height: 180px;
  display: flex;
  align-items: end;
  gap: 12px;
  padding-top: 20px;
}
.analytics-chart > div {
  height: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: end;
  gap: 8px;
}
.analytics-chart span {
  width: min(36px, 70%);
  border-radius: 9px 9px 3px 3px;
  background: linear-gradient(var(--accent), #527aa0);
  min-height: 8px;
}
.admin-note {
  background: var(--accent-bg);
  border-radius: 10px;
  padding: 10px 13px;
}
.system-stats strong {
  font-size: 1.35rem;
}
.message-meta span {
  font-size: 0.625rem;
}

@media (max-width: 760px) {
  .call-overlay {
    inset: 10px 10px 80px;
    width: auto;
    border-radius: 20px;
  }
  .call-overlay.video-call {
    width: auto;
  }
  .rail-item {
    width: 54px;
  }
  .rail {
    overflow-x: auto;
    justify-content: flex-start;
  }
  .pinned-message {
    padding-inline: 15px;
  }
}

/* اولویت نهایی برای بازطراحی ۰.۶ */
.analytics-chart .chart-bars { width:min(58px,80%);height:100%;display:flex;align-items:flex-end;justify-content:center;gap:3px; }
.analytics-chart .chart-bars span { width:28%;min-height:5px;border-radius:5px 5px 2px 2px; }
.analytics-chart .chart-bars .messages { background:linear-gradient(var(--accent),#62569b); }
.analytics-chart .chart-bars .calls { background:linear-gradient(#70d7b1,#338a6b); }
.analytics-chart .chart-bars .users { background:linear-gradient(#f1a08d,#a7594a); }
@media (max-width:760px){
  .rail{overflow-x:auto;justify-content:space-evenly;gap:1px}
  .rail-item{flex:1 1 0;width:auto;max-width:none;min-width:41px}
  .call-overlay,.call-overlay.video-call{inset:7px 7px 70px;width:auto;border-radius:20px}
}

/* بازطراحی نهایی ۰.۷ — این بخش عمداً در انتهای فایل است تا پوسته‌های قدیمی را خنثی کند. */
:where(input, textarea, select):focus,
:where(input, textarea, select):focus-visible,
.composer:focus-within,
.search-field:focus-within {
  outline: none !important;
  box-shadow: none !important;
  border-color: var(--line) !important;
}
.search-field:focus-within svg { animation: search-nod .38s ease; color: var(--accent); }
@keyframes search-nod { 45% { transform: scale(.78) rotate(-12deg); } }

.conversation {
  position: relative;
  background-color: var(--chat-bg, #e8edf3) !important;
  background-image:
    radial-gradient(circle at 20% 25%, color-mix(in srgb, var(--accent) 8%, transparent) 0 2px, transparent 2.5px),
    radial-gradient(circle at 78% 72%, color-mix(in srgb, var(--accent) 7%, transparent) 0 1.5px, transparent 2px),
    linear-gradient(135deg, transparent 47%, color-mix(in srgb, var(--ink) 3%, transparent) 48% 49%, transparent 50%) !important;
  background-size: 82px 82px, 64px 64px, 110px 110px !important;
}
[data-theme="dark"] .conversation { --chat-bg: #10151c; }
.messages { background: transparent !important; padding: 18px clamp(12px, 3.5vw, 54px) 10px !important; }
.message-row { margin: 3px 0 !important; }
.bubble {
  max-width: min(72%, 640px) !important;
  padding: 8px 11px 6px !important;
  border: 1px solid color-mix(in srgb, var(--line) 78%, transparent) !important;
  border-radius: 17px 17px 17px 5px !important;
  background: color-mix(in srgb, var(--surface) 96%, transparent) !important;
  box-shadow: 0 2px 8px #17203310 !important;
  overflow: visible !important;
}
.message-row.mine .bubble {
  border-radius: 17px 17px 5px 17px !important;
  background: color-mix(in srgb, var(--accent-bg) 84%, var(--surface)) !important;
  border-color: color-mix(in srgb, var(--accent) 20%, var(--line)) !important;
}
.bubble p { margin: 0 0 2px; line-height: 1.58; }
.sender-name { display:block; margin-bottom:3px; color:var(--accent); font-size:.75rem; }
.message-meta { direction: ltr; justify-content: flex-start !important; float: right; margin: 4px 8px -1px 0; gap: 3px !important; opacity: .67; }
.message-row.mine .message-meta { float: left; margin: 4px 0 -1px 8px; }
.reply-preview {
  width:100%; margin:0 0 6px !important; padding:6px 9px !important;
  border:0 !important; border-right:3px solid var(--accent) !important;
  border-radius:7px !important; background:color-mix(in srgb,var(--accent) 8%,transparent) !important;
}
.message-focus-pulse { animation: message-focus 1.65s ease !important; }
@keyframes message-focus {
  0%,100% { box-shadow: 0 2px 8px #17203310; }
  18%,62% { box-shadow: 0 0 0 5px color-mix(in srgb,var(--accent) 24%,transparent), 0 8px 25px color-mix(in srgb,var(--accent) 22%,transparent); transform:scale(1.012); }
}

.composer-area { padding: 7px clamp(9px, 2vw, 18px) 8px !important; background:transparent !important; }
.composer {
  min-height: 52px !important; padding: 4px 5px !important; gap: 2px !important;
  border: 1px solid color-mix(in srgb,var(--line) 80%,transparent) !important;
  border-radius: 24px !important; background:color-mix(in srgb,var(--surface) 97%,transparent) !important;
  box-shadow: 0 6px 24px #101c2a13 !important;
}
.composer textarea,
.composer textarea:focus {
  min-height: 40px !important; max-height: 126px; padding: 10px 8px !important;
  border: 0 !important; background:transparent !important; box-shadow:none !important;
}
.composer .icon-btn { width:40px !important; height:40px !important; border:0 !important; background:transparent !important; }
.composer .icon-btn:hover { background:var(--hover) !important; }
.composer .voice-btn { color:var(--accent) !important; }
.send-btn {
  width:42px !important; height:42px !important; min-width:42px; border-radius:50% !important;
  border:0 !important; background:var(--accent) !important; color:white !important;
  box-shadow: 0 5px 13px color-mix(in srgb,var(--accent) 32%,transparent) !important;
  transform:none !important; transition:transform .16s ease, filter .16s ease !important;
}
.send-btn:hover:not(:disabled) { transform:translateY(-1px) scale(1.04) !important; filter:brightness(1.05); }
.send-btn svg { transform:rotate(180deg); width:18px; height:18px; }
.send-btn:disabled { opacity:.38; box-shadow:none !important; }
.composer-foot { display:none !important; }

.modal-backdrop { overflow-y:auto !important; padding:16px !important; align-items:center !important; }
.modal {
  max-height:calc(100dvh - 32px) !important; overflow-y:auto !important; overscroll-behavior:contain;
  border-radius:18px !important; box-shadow:0 24px 80px #0a152c38 !important;
  animation: modal-rise .24s cubic-bezier(.2,.8,.2,1) !important;
}
.profile-modal { overflow-y:auto !important; max-height:calc(100dvh - 32px) !important; padding:0 !important; }
.profile-modal > header { position:sticky !important; top:0; z-index:5; background:color-mix(in srgb,var(--surface) 88%,transparent); backdrop-filter:blur(16px); }
.profile-modal .profile-hero { min-height:180px; }
.member-list { overflow:visible !important; max-height:none !important; }
@keyframes modal-rise { from { opacity:0; transform:translateY(12px) scale(.985); } }

.message-menu.context-pop {
  z-index:6500 !important; width:236px; max-height:calc(100dvh - 16px); overflow:auto;
  transform-origin:top right; animation:menu-pop .17s cubic-bezier(.2,.8,.2,1) !important;
  box-shadow:0 18px 48px #0913263d !important;
}
@keyframes menu-pop { from { opacity:0; transform:scale(.9) translateY(-5px); } }

.call-overlay,
.call-overlay.video-call {
  position:fixed !important; inset:0 !important; width:100vw !important; height:100dvh !important;
  max-width:none !important; border-radius:0 !important; z-index:7000 !important;
  padding:68px 24px 104px !important; overflow:hidden; isolation:isolate;
  background:radial-gradient(circle at 50% 32%,#26384f 0,#111923 43%,#080c12 100%) !important;
  animation:call-enter .28s ease !important;
}
@keyframes call-enter { from { opacity:0; transform:scale(1.025); } }
.call-topbar {
  position:absolute; inset:0 0 auto; height:58px; z-index:8; display:flex; align-items:center; justify-content:space-between;
  padding:0 20px; color:#dce6f2; background:linear-gradient(#080c12cc,transparent);
}
.call-topbar span { display:flex;align-items:center;gap:8px;font-size:.78rem; }
.call-topbar i { width:7px;height:7px;border-radius:50%;background:#47d495;box-shadow:0 0 0 5px #47d49520; }
.call-topbar button,.call-chat-toggle,.call-chat-panel button,.call-dock button { border:0; cursor:pointer; }
.call-topbar button { width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#ffffff12;color:white; }
.remote-video { inset:58px 0 92px !important; width:100% !important; height:calc(100% - 150px) !important; object-fit:contain !important; background:#05080d !important; }
.local-video { left:18px !important; top:74px !important; width:min(21vw,230px) !important; height:min(27vh,180px) !important; object-fit:contain !important; border-radius:14px !important; background:#090e15 !important; }
.group-video-grid { position:absolute; inset:58px 0 94px; padding:10px; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr)); gap:8px; background:#05080d; }
.group-video { width:100%; height:100%; min-height:0; object-fit:contain !important; border-radius:12px; background:#0d141d; }
.call-copy { position:relative; z-index:4; margin:auto !important; text-align:center; color:white; }
.call-copy .avatar { width:96px;height:96px;font-size:2rem;box-shadow:0 0 0 8px #ffffff0c; }
.call-copy h2 { margin:16px 0 3px;font-size:1.35rem; }.call-copy p{margin:0;color:#afbdcc;}
.video-call .call-copy { position:absolute; right:24px; top:70px; margin:0 !important; text-align:right; }
.video-call .call-copy .avatar { width:42px;height:42px;font-size:1rem;float:right;margin-left:10px; }
.video-call .call-copy h2{font-size:.95rem;margin:2px 0}.video-call .call-copy p{font-size:.72rem}
.call-actions { position:absolute !important; z-index:9 !important; bottom:18px; left:50%; transform:translateX(-50%); margin:0 !important; gap:10px !important; }
.call-button { width:58px !important;height:58px !important;border-radius:50% !important;padding:0 !important;font-size:0 !important;display:grid !important;place-items:center;background:#ffffff18 !important;color:white !important; }
.call-button:hover{background:#ffffff28 !important}.call-button.off{background:#fff !important;color:#111 !important}.call-button.accept{background:#32a66a !important}.call-button.hangup{background:#e1505d !important}
.call-chat-toggle { position:absolute;z-index:9;left:20px;bottom:26px;height:42px;padding:0 14px;border-radius:21px;background:#ffffff16;color:white;display:flex;align-items:center;gap:7px; }
.call-chat-toggle.active{background:var(--accent)}
.call-chat-panel { position:absolute;z-index:10;left:18px;top:68px;bottom:82px;width:min(360px,calc(100% - 36px));display:flex;flex-direction:column;border:1px solid #ffffff19;border-radius:16px;background:#111923ed;color:white;box-shadow:0 18px 60px #0008;overflow:hidden;animation:panel-in .2s ease; }
@keyframes panel-in{from{opacity:0;transform:translateX(-16px)}}
.call-chat-panel>header{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-bottom:1px solid #ffffff12}.call-chat-panel>header button{background:transparent;color:white}
.call-chat-messages{flex:1;overflow:auto;padding:10px}.call-chat-messages>div{padding:8px 9px;margin-bottom:6px;border-radius:10px;background:#ffffff09}.call-message-sender{display:block;color:#76b9ff;margin-bottom:3px}.call-chat-messages time{font-size:.65rem;opacity:.55;margin-right:7px}
.call-chat-panel form{display:flex;margin:9px;padding:4px;border-radius:21px;background:#ffffff0e}.call-chat-panel input{flex:1;border:0!important;background:transparent!important;color:white;padding:8px}.call-chat-panel form button{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:white}
.call-dock { position:fixed;z-index:7000;right:72px;bottom:0;width:360px;height:64px;padding:8px 10px;display:flex;align-items:center;gap:9px;background:color-mix(in srgb,var(--surface) 94%,transparent);backdrop-filter:blur(18px);border:1px solid var(--line);border-radius:14px 0 0 0;box-shadow:0 -8px 30px #0d182a1a;cursor:pointer;animation:dock-in .22s ease; }
@keyframes dock-in{from{transform:translateY(100%)}}
.call-dock audio{display:none}.call-dock-live{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:#35a66b;color:white}.call-dock>span:nth-of-type(2){display:flex;flex:1;min-width:0;flex-direction:column}.call-dock small{color:var(--muted)}.call-dock button{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--hover);color:var(--ink)}.call-dock .dock-hangup{background:#df4d59;color:white}

.settings-page,.admin-page { padding:18px 22px !important; overflow:auto !important; background:var(--app-bg); }
.settings-page .page-title,.admin-page .page-title { max-width:1180px;margin:0 auto 14px; }.page-title h1{font-size:1.35rem!important;margin-bottom:3px!important}.page-title p{font-size:.8rem!important}
.settings-layout { max-width:980px !important; margin:0 auto !important; grid-template-columns:210px minmax(0,1fr) !important; gap:12px !important; align-items:start; }
.settings-nav { padding:7px !important; border:1px solid var(--line); border-radius:16px !important; background:var(--surface); position:sticky;top:0;box-shadow:none!important; }
.settings-user{padding:10px 9px 13px!important;margin:0 0 5px!important;border-bottom:1px solid var(--line)}
.settings-nav>button { min-height:42px !important;padding:8px 10px!important;border-radius:10px!important;font-size:.81rem;gap:9px!important; }.settings-nav>button svg:last-child{margin-right:auto;opacity:.35}.settings-nav>button.selected{background:var(--accent-bg)!important;color:var(--accent)!important}
.settings-content .surface { padding:0 !important;border:1px solid var(--line)!important;border-radius:16px!important;overflow:hidden!important;box-shadow:none!important;background:var(--surface); }
.profile-settings .profile-intro { margin:0!important;padding:18px 20px!important;border-radius:0!important;background:linear-gradient(135deg,var(--accent-bg),transparent)!important; }
.profile-settings form,.settings-section { padding:16px 18px!important; }
.settings-content label,.admin-content label,.modal label { gap:5px!important;font-size:.76rem!important; }
.settings-content :where(input,textarea,select),.admin-content :where(input,textarea,select),.modal :where(input,textarea,select) { min-height:40px!important;padding:9px 11px!important;border-radius:11px!important;font-size:.84rem!important;background:color-mix(in srgb,var(--app-bg) 56%,var(--surface))!important; }
.settings-content textarea,.admin-content textarea,.modal textarea{min-height:74px!important}.form-grid{gap:10px!important}.settings-row{min-height:52px!important;padding:9px 0!important}.settings-row h3{font-size:.84rem!important}.settings-row p{font-size:.72rem!important}
.admin-layout{max-width:1440px!important;margin:auto;grid-template-columns:188px minmax(0,1fr)!important;gap:12px!important;align-items:start}.admin-tabs{position:sticky;top:0;border:1px solid var(--line);border-radius:16px!important;padding:7px!important;background:var(--surface)!important;box-shadow:none!important}.admin-tabs>button{min-height:40px!important;border-radius:9px!important;padding:8px 10px!important;font-size:.79rem!important}.admin-tabs>button.selected{background:var(--accent-bg)!important;color:var(--accent)!important}.admin-content{min-width:0}.admin-content>.page-title{margin:0 0 12px!important}.stats{gap:8px!important}.stat{min-height:82px!important;padding:12px!important;border-radius:13px!important;box-shadow:none!important;border:1px solid var(--line)!important}.stat strong{font-size:1.35rem!important}.admin-card{padding:14px!important;border-radius:14px!important;box-shadow:none!important;border:1px solid var(--line)!important}.admin-table{font-size:.77rem}.admin-table th,.admin-table td{padding:8px!important}.admin-table thead{position:sticky;top:0;z-index:2;background:var(--surface)}

@media (max-width: 760px) {
  .messages{padding:12px 8px 8px!important}.bubble{max-width:88%!important}.composer-area{padding:5px 6px 7px!important}.composer{border-radius:22px!important}.composer .icon-btn{width:36px!important;height:40px!important}.send-btn{width:40px!important;height:40px!important;min-width:40px}.modal-backdrop{padding:0!important;align-items:flex-end!important}.modal,.profile-modal{width:100%!important;max-width:none!important;max-height:92dvh!important;border-radius:20px 20px 0 0!important}
  .call-overlay,.call-overlay.video-call{inset:0!important;width:100vw!important;height:100dvh!important;border-radius:0!important;padding:58px 12px 98px!important}.remote-video{inset:52px 0 86px!important;height:calc(100% - 138px)!important}.local-video{top:62px!important;left:10px!important;width:30vw!important;height:22vh!important}.group-video-grid{inset:52px 0 86px;padding:5px;grid-template-columns:1fr 1fr}.call-topbar{height:52px;padding:0 12px}.call-actions{bottom:14px;gap:8px!important}.call-button{width:52px!important;height:52px!important}.call-chat-toggle{left:10px;bottom:20px;width:42px;padding:0;justify-content:center;font-size:0}.call-chat-panel{left:7px;right:7px;top:58px;bottom:74px;width:auto}.video-call .call-copy{right:12px;top:59px}.call-dock{right:0;bottom:61px;width:100%;height:58px;border-radius:0;padding:6px 9px}
  .settings-page,.admin-page{padding:10px 8px 74px!important}.settings-layout,.admin-layout{display:block!important}.settings-nav,.admin-tabs{position:static!important;display:flex!important;overflow-x:auto;margin-bottom:9px;border-radius:13px!important;scrollbar-width:none}.settings-user,.admin-nav-brand{display:none!important}.settings-nav>button,.admin-tabs>button{flex:0 0 auto;min-height:38px!important;white-space:nowrap}.settings-nav>button svg:last-child{display:none}.settings-content .surface{border-radius:14px!important}.profile-settings .profile-intro{padding:14px!important}.profile-settings form,.settings-section{padding:13px!important}.form-grid{grid-template-columns:1fr!important}.stats{grid-template-columns:1fr 1fr!important}.admin-table-wrap{overflow-x:auto}
}
/* Telegram Air — final visual layer. Kept separate so legacy rules cannot drift. */
:root {
  --air-accent:#3390ec;--air-accent-strong:#2186df;--air-bg:#eef2f5;
  --air-panel:#fff;--air-panel-2:#f4f6f8;--air-line:#e6ebef;
  --air-text:#17212b;--air-muted:#708499;--air-green:#4fae4e;
  --air-bubble-in:#fff;--air-bubble-out:#e4f2ff;--air-shadow:0 8px 30px rgba(28,48,69,.08);
}
[data-theme="dark"] {
  --air-bg:#0e1621;--air-panel:#17212b;--air-panel-2:#202b36;--air-line:#293847;
  --air-text:#f2f5f7;--air-muted:#8da2b5;--air-bubble-in:#182533;--air-bubble-out:#2b5278;
  --air-shadow:0 12px 36px rgba(0,0,0,.24);
}
*{scrollbar-width:thin;scrollbar-color:#9fb0be55 transparent}
body{background:var(--air-bg)!important;color:var(--air-text)!important;overflow:hidden}
button,input,textarea,select{font:inherit}
button:focus,input:focus,textarea:focus,select:focus{outline:none!important;box-shadow:none!important}
button:focus-visible{outline:2px solid color-mix(in srgb,var(--air-accent) 72%,transparent)!important;outline-offset:2px}
.telegram-air{height:100dvh!important;min-height:0!important;display:grid!important;grid-template-columns:72px 340px minmax(0,1fr)!important;background:var(--air-bg)!important;overflow:hidden!important;direction:ltr}
.telegram-air>.rail{grid-column:1!important;position:relative!important;inset:auto!important;width:72px!important;height:100dvh!important;padding:12px 8px!important;background:var(--air-panel)!important;border:0!important;border-right:1px solid var(--air-line)!important;box-shadow:none!important;direction:rtl;z-index:40}
.rail .brand{width:42px!important;height:42px!important;margin:0 auto 15px!important;border-radius:50%!important;background:linear-gradient(145deg,#54a9f2,#2788e5)!important;box-shadow:0 7px 18px #3390ec36!important}
.rail .brand svg{width:20px;height:20px}
.rail button,.rail .icon-button{width:52px!important;min-width:52px!important;height:48px!important;margin:2px auto!important;border-radius:14px!important;color:var(--air-muted)!important;background:transparent!important;display:grid!important;place-items:center!important;position:relative!important;padding:0!important;border:0!important}
.rail button span:not(.avatar){display:none!important}
.rail button svg{width:20px!important;height:20px!important;stroke-width:1.9}
.rail button.active{color:var(--air-accent)!important;background:color-mix(in srgb,var(--air-accent) 11%,transparent)!important}
.rail button.active:before{content:"";position:absolute;right:-8px;width:3px;height:24px;border-radius:4px;background:var(--air-accent)}
.rail button i{position:absolute;top:9px;right:10px;width:7px;height:7px;border-radius:50%;background:#ff5b64;border:2px solid var(--air-panel)}
.rail-bottom{margin-top:auto!important;display:flex!important;flex-direction:column!important;gap:4px!important}
.profile-button .avatar{width:34px!important;height:34px!important}
.telegram-air>.list-pane{grid-column:2!important;position:relative!important;inset:auto!important;width:auto!important;height:100dvh!important;min-width:0!important;background:var(--air-panel)!important;border:0!important;border-right:1px solid var(--air-line)!important;box-shadow:none!important;display:flex!important;flex-direction:column!important;direction:rtl;z-index:20;overflow:hidden!important}
.pane-heading{height:66px!important;min-height:66px!important;padding:10px 14px!important;border-bottom:0!important;display:flex!important;align-items:center!important}
.pane-heading h1{font-size:1.18rem!important;margin:1px 0 0!important;line-height:1.25!important;letter-spacing:-.02em}
.eyebrow{font-size:.58rem!important;letter-spacing:.12em!important;color:var(--air-accent)!important}
.pane-actions{gap:2px!important}.pane-actions .icon-button{width:36px!important;height:36px!important;border-radius:50%!important;background:transparent!important;color:var(--air-muted)!important}
.search-field{height:38px!important;min-height:38px!important;margin:0 12px 10px!important;padding:0 12px!important;border:0!important;border-radius:19px!important;background:var(--air-panel-2)!important;color:var(--air-muted)!important;transition:background .2s,transform .2s!important;display:flex!important;align-items:center!important;gap:8px!important}
.search-field:focus-within{background:color-mix(in srgb,var(--air-accent) 8%,var(--air-panel-2))!important;transform:translateY(-1px)}
.search-field input{height:100%!important;background:transparent!important;border:0!important;padding:0!important;color:var(--air-text)!important;min-width:0!important}
.search-field .icon-button{width:28px!important;height:28px!important;min-width:28px!important}
.filters{padding:0 12px 9px!important;display:flex!important;gap:5px!important;overflow:auto!important;border-bottom:1px solid var(--air-line)!important}
.filters button,.mini-filters button{height:30px!important;padding:0 11px!important;border-radius:15px!important;border:0!important;background:transparent!important;color:var(--air-muted)!important;white-space:nowrap!important;font-size:.76rem!important}
.filters button.selected,.mini-filters button.selected{background:color-mix(in srgb,var(--air-accent) 12%,transparent)!important;color:var(--air-accent)!important;font-weight:700!important}
.chat-list{padding:5px 7px 64px!important;overflow-y:auto!important;min-height:0!important;flex:1!important}
.chat-row{height:66px!important;min-height:66px!important;margin:1px 0!important;padding:8px 9px!important;border:0!important;border-radius:12px!important;background:transparent!important;color:var(--air-text)!important;display:grid!important;grid-template-columns:48px minmax(0,1fr) auto!important;gap:10px!important;align-items:center!important;transition:background .16s,transform .16s!important}
.chat-row:hover{background:var(--air-panel-2)!important}.chat-row:active{transform:scale(.99)}
.chat-row.selected{background:var(--air-accent)!important;color:#fff!important}.chat-row.selected small,.chat-row.selected .row-meta{color:#e9f5ff!important}
.chat-row .avatar{width:48px!important;height:48px!important;box-shadow:none!important}
.row-copy{min-width:0!important;text-align:right!important}.row-copy b{font-size:.89rem!important}.row-copy small{display:block!important;margin-top:4px!important;color:var(--air-muted)!important;white-space:nowrap!important;text-overflow:ellipsis!important;overflow:hidden!important;font-size:.73rem!important}
.row-meta{align-self:stretch!important;min-width:31px!important;color:var(--air-muted)!important;display:flex!important;align-items:flex-end!important;justify-content:space-between!important;flex-direction:column!important;padding:3px 0!important}
.row-meta em{min-width:19px!important;height:19px!important;border-radius:10px!important;background:var(--air-accent)!important;color:white!important;font-style:normal!important;font-size:.66rem!important;display:grid!important;place-items:center!important}
.chat-row.selected .row-meta em{background:#fff!important;color:var(--air-accent)!important}
.connection{position:absolute!important;bottom:0!important;left:0!important;right:0!important;height:48px!important;padding:0 14px!important;border-top:1px solid var(--air-line)!important;background:color-mix(in srgb,var(--air-panel) 92%,transparent)!important;backdrop-filter:blur(16px)!important;display:flex!important;align-items:center!important;gap:7px!important;font-size:.72rem!important;color:var(--air-muted)!important;z-index:4}
.connection>span:first-child{width:8px!important;height:8px!important}.connection .version{margin-right:auto!important;font-size:.66rem!important}
.telegram-air>.conversation{grid-column:3!important;position:relative!important;inset:auto!important;width:auto!important;height:100dvh!important;min-width:0!important;display:flex!important;flex-direction:column!important;direction:rtl;background:var(--air-bg)!important;overflow:hidden!important}
.chat-header{height:62px!important;min-height:62px!important;padding:7px 15px!important;background:var(--air-panel)!important;border-bottom:1px solid var(--air-line)!important;box-shadow:none!important;display:flex!important;align-items:center!important;gap:10px!important;z-index:12}
.chat-header .avatar{width:42px!important;height:42px!important}.peer-title{min-width:0!important;padding:0!important;background:none!important;border:0!important;color:var(--air-text)!important;text-align:right!important}.peer-title b{font-size:.92rem!important}.peer-title small{color:var(--air-muted)!important;font-size:.7rem!important;margin-top:2px!important;display:block!important}
.header-actions{margin-right:auto!important;display:flex!important;gap:1px!important}.header-actions .icon-button,.chat-header .icon-button{width:38px!important;height:38px!important;border-radius:50%!important;background:transparent!important;color:var(--air-muted)!important;border:0!important}.header-actions .icon-button:hover{background:var(--air-panel-2)!important;color:var(--air-accent)!important}
.messages{position:relative!important;flex:1!important;min-height:0!important;padding:18px max(20px,7vw) 30px!important;overflow-y:auto!important;scroll-behavior:smooth!important;background-color:var(--air-bg)!important;background-image:radial-gradient(circle at 20px 20px,color-mix(in srgb,var(--air-muted) 8%,transparent) 1.4px,transparent 1.5px),radial-gradient(circle at 55px 55px,color-mix(in srgb,var(--air-accent) 6%,transparent) 1px,transparent 1.1px)!important;background-size:72px 72px,88px 88px!important}
.message-row{margin:3px 0!important;display:flex!important;align-items:flex-end!important;gap:7px!important;animation:airMessage .2s ease both}.message-row.mine{justify-content:flex-start!important}.message-row:not(.mine){justify-content:flex-end!important}
@keyframes airMessage{from{opacity:0;transform:translateY(5px) scale(.985)}to{opacity:1;transform:none}}
.message,.bubble{position:relative!important;max-width:min(68%,640px)!important;min-width:90px!important;padding:7px 10px 18px!important;border:0!important;border-radius:15px 15px 5px 15px!important;background:var(--air-bubble-in)!important;color:var(--air-text)!important;box-shadow:0 1px 1px rgba(0,0,0,.07)!important;overflow:visible!important}
.mine .message,.mine .bubble{background:var(--air-bubble-out)!important;border-radius:15px 15px 15px 5px!important}
.message p,.bubble p{margin:0!important;line-height:1.65!important;font-size:.88rem!important;white-space:pre-wrap!important;overflow-wrap:anywhere!important}.message .sender-name,.bubble .sender-name,.bubble .sender{font-size:.72rem!important;color:var(--air-accent)!important;font-weight:700!important;margin-bottom:2px!important}
.message-meta{position:absolute!important;right:10px!important;bottom:4px!important;display:flex!important;align-items:center!important;gap:3px!important;color:var(--air-muted)!important;font-size:.61rem!important;direction:ltr!important}.mine .message-meta{color:color-mix(in srgb,var(--air-accent) 72%,var(--air-muted))!important}.message-meta svg{width:14px!important;height:14px!important}
.reactions{position:absolute!important;left:7px!important;bottom:-15px!important;display:flex!important;gap:3px!important;z-index:3}.reactions button{height:26px!important;min-width:34px!important;padding:0 7px!important;border:1px solid var(--air-line)!important;border-radius:14px!important;background:var(--air-panel)!important;color:var(--air-text)!important;box-shadow:0 2px 8px rgba(0,0,0,.08)!important;font-size:.71rem!important}
.reply-preview,.message-reply{border-right:3px solid var(--air-accent)!important;border-radius:4px!important;background:color-mix(in srgb,var(--air-accent) 8%,transparent)!important;padding:5px 8px!important;margin-bottom:5px!important;display:block!important}.reply-preview b,.message-reply b{color:var(--air-accent)!important}
.message.highlight{animation:airHighlight 1.5s ease!important}@keyframes airHighlight{0%,100%{filter:none}40%{filter:drop-shadow(0 0 12px var(--air-accent));transform:scale(1.015)}}
.date-divider{position:sticky!important;top:4px!important;z-index:7!important;width:max-content!important;margin:12px auto!important;padding:4px 12px!important;border-radius:14px!important;background:color-mix(in srgb,var(--air-panel) 82%,transparent)!important;backdrop-filter:blur(12px)!important;color:var(--air-muted)!important;font-size:.67rem!important;box-shadow:0 2px 8px rgba(0,0,0,.06)!important}
.composer-area{padding:8px max(14px,7vw) 9px!important;background:transparent!important;border:0!important;position:relative!important;z-index:10}
.composer{min-height:50px!important;margin:0!important;padding:4px 5px!important;display:flex!important;align-items:flex-end!important;gap:2px!important;background:var(--air-panel)!important;border:1px solid var(--air-line)!important;border-radius:18px!important;box-shadow:var(--air-shadow)!important;transition:border-color .2s!important}
.composer:focus-within{border-color:color-mix(in srgb,var(--air-accent) 38%,var(--air-line))!important;box-shadow:var(--air-shadow)!important}
.composer textarea{flex:1!important;min-width:0!important;min-height:40px!important;max-height:130px!important;padding:10px 7px!important;border:0!important;background:transparent!important;color:var(--air-text)!important;resize:none!important;line-height:1.45!important}.composer textarea:focus{outline:0!important}
.composer .icon-button,.composer>button{width:40px!important;height:40px!important;min-width:40px!important;border-radius:50%!important;border:0!important;background:transparent!important;color:var(--air-muted)!important;display:grid!important;place-items:center!important;padding:0!important}.composer .icon-button:hover{color:var(--air-accent)!important;background:var(--air-panel-2)!important}
.composer .send-btn{background:var(--air-accent)!important;color:#fff!important;transform:rotate(180deg)!important;box-shadow:0 5px 14px #3390ec43!important}.composer .send-btn:disabled{background:var(--air-panel-2)!important;color:var(--air-muted)!important;box-shadow:none!important;opacity:.75!important}.composer .voice-btn{color:var(--air-accent)!important}
.composer-reply,.pending,.readonly-notice{max-width:none!important;margin:0 8px 7px!important;border:0!important;border-right:3px solid var(--air-accent)!important;border-radius:10px!important;background:var(--air-panel)!important;box-shadow:0 4px 15px rgba(0,0,0,.07)!important;padding:7px 10px!important}
.composer-foot{display:none!important}.recording{flex:1!important;height:40px!important;display:flex!important;align-items:center!important;color:#e85662!important;padding:0 10px!important}
.pinned-message,.group-call-banner{margin:7px max(14px,7vw) 0!important;border:0!important;border-radius:12px!important;background:var(--air-panel)!important;box-shadow:0 3px 14px rgba(0,0,0,.07)!important;color:var(--air-text)!important;min-height:48px!important;padding:7px 12px!important}
.pinned-message{border-right:3px solid var(--air-accent)!important}
.welcome{background:var(--air-bg)!important}.welcome-mark{background:var(--air-accent)!important;color:#fff!important;border-radius:50%!important;box-shadow:0 12px 28px #3390ec42!important}

/* Settings */
.telegram-air>.settings-page{grid-column:2/4!important;width:auto!important;height:100dvh!important;overflow-y:auto!important;background:var(--air-bg)!important;padding:0!important;direction:rtl}
.settings-page>.page-title{width:100%!important;max-width:none!important;height:78px!important;margin:0!important;padding:14px 26px!important;background:var(--air-panel)!important;border-bottom:1px solid var(--air-line)!important}.page-title h1{font-size:1.2rem!important;margin:0!important}.page-title p{font-size:.74rem!important;margin:3px 0!important;color:var(--air-muted)!important}
.settings-layout{max-width:980px!important;margin:26px auto!important;padding:0 18px!important;display:grid!important;grid-template-columns:250px minmax(0,1fr)!important;gap:18px!important;align-items:start!important}
.settings-nav{position:sticky!important;top:20px!important;padding:8px!important;border:1px solid var(--air-line)!important;border-radius:18px!important;background:var(--air-panel)!important;box-shadow:var(--air-shadow)!important;overflow:hidden!important}.settings-user{padding:12px 10px 17px!important;margin-bottom:5px!important;border-bottom:1px solid var(--air-line)!important}.settings-user .avatar{width:44px!important;height:44px!important;min-width:44px!important;flex:none!important;border-radius:50%!important}.settings-nav>button{height:46px!important;width:100%!important;padding:0 11px!important;margin:2px 0!important;border:0!important;border-radius:11px!important;background:transparent!important;color:var(--air-text)!important;display:grid!important;grid-template-columns:22px 1fr 16px!important;gap:9px!important;align-items:center!important;text-align:right!important}.settings-nav>button.selected{background:var(--air-accent)!important;color:#fff!important}.settings-nav>button.danger{color:#e05a65!important;margin-top:8px!important}
.settings-content{min-width:0!important}.settings-content .surface{padding:0!important;border:1px solid var(--air-line)!important;border-radius:18px!important;background:var(--air-panel)!important;box-shadow:var(--air-shadow)!important;overflow:hidden!important}.profile-intro{padding:22px!important;background:linear-gradient(135deg,color-mix(in srgb,var(--air-accent) 13%,var(--air-panel)),var(--air-panel))!important;border:0!important}.profile-settings form{padding:20px!important}.settings-content h2{font-size:.96rem!important;padding:17px 19px!important;margin:0!important;border-bottom:1px solid var(--air-line)!important}.settings-content label:not(.setting-row){font-size:.73rem!important;color:var(--air-muted)!important;gap:6px!important}.settings-content input,.settings-content textarea,.settings-content select,.admin-page input,.admin-page textarea,.admin-page select,.modal input,.modal textarea,.modal select{border:1px solid var(--air-line)!important;border-radius:11px!important;background:var(--air-panel-2)!important;color:var(--air-text)!important;padding:10px 12px!important;min-height:40px!important}.settings-content input:focus,.settings-content textarea:focus,.settings-content select:focus,.admin-page input:focus,.admin-page textarea:focus,.admin-page select:focus,.modal input:focus,.modal textarea:focus,.modal select:focus{border-color:var(--air-accent)!important;background:var(--air-panel)!important;box-shadow:none!important}.setting-row{min-height:64px!important;padding:11px 18px!important;margin:0!important;border-bottom:1px solid var(--air-line)!important;background:transparent!important;border-radius:0!important}.setting-row:last-child{border-bottom:0!important}.setting-row small{color:var(--air-muted)!important}.theme-options{padding:16px!important}.theme-options button{border-radius:14px!important;border:1px solid var(--air-line)!important}.theme-options button.selected{border-color:var(--air-accent)!important}.settings-save{padding-top:12px!important}.primary{border:0!important;border-radius:11px!important;background:var(--air-accent)!important;color:#fff!important;min-height:42px!important;box-shadow:none!important}.primary:hover{background:var(--air-accent-strong)!important}

/* Admin */
.telegram-air>.admin-page{grid-column:2/4!important;width:auto!important;height:100dvh!important;padding:0!important;overflow:hidden!important;background:var(--air-bg)!important;direction:rtl}
.admin-layout{width:100%!important;max-width:none!important;height:100%!important;margin:0!important;display:grid!important;grid-template-columns:210px minmax(0,1fr)!important;gap:0!important}.admin-tabs{position:relative!important;inset:auto!important;width:auto!important;height:100%!important;padding:14px 10px!important;background:var(--air-panel)!important;border-left:1px solid var(--air-line)!important;overflow-y:auto!important}.admin-nav-brand{height:58px!important;padding:8px 10px!important;margin-bottom:12px!important;border-bottom:1px solid var(--air-line)!important}.admin-tabs>button{height:42px!important;margin:2px 0!important;padding:0 12px!important;border:0!important;border-radius:10px!important;background:transparent!important;color:var(--air-muted)!important;display:grid!important;grid-template-columns:20px 1fr auto!important;align-items:center!important;gap:9px!important;text-align:right!important}.admin-tabs>button.selected{background:color-mix(in srgb,var(--air-accent) 12%,transparent)!important;color:var(--air-accent)!important;font-weight:700!important}.admin-content{min-width:0!important;width:auto!important;height:100%!important;overflow-x:hidden!important;overflow-y:auto!important;padding:0 24px 36px!important}.admin-content>*{max-width:100%!important}.admin-content>.page-title{position:sticky!important;top:0!important;z-index:20!important;width:auto!important;max-width:none!important;height:78px!important;margin:0 -24px 20px!important;padding:13px 24px!important;background:color-mix(in srgb,var(--air-panel) 94%,transparent)!important;backdrop-filter:blur(14px)!important;border-bottom:1px solid var(--air-line)!important}.admin-content .surface,.service-health{border:1px solid var(--air-line)!important;border-radius:15px!important;background:var(--air-panel)!important;box-shadow:0 4px 18px rgba(0,0,0,.045)!important;padding:17px!important}.stats{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:10px!important}.stats .surface{min-height:100px!important;display:grid!important;grid-template-columns:38px 1fr!important;grid-template-rows:auto auto!important;align-items:center!important;gap:2px 10px!important;padding:13px!important}.stats .surface svg{grid-row:1/3!important;width:36px!important;height:36px!important;padding:8px!important;border-radius:11px!important;color:var(--air-accent)!important;background:color-mix(in srgb,var(--air-accent) 10%,transparent)!important}.stats .surface strong{font-size:1.25rem!important}.stats .surface span{color:var(--air-muted)!important;font-size:.7rem!important}.analytics-chart{width:100%!important;min-width:0!important;height:220px!important}.chart-bars span{border-radius:5px 5px 1px 1px!important}.section-heading{min-height:54px!important;display:flex!important;align-items:center!important}.section-heading .search-field{width:240px!important;margin:0 auto 0 0!important}.table-wrap{max-width:100%!important;border:1px solid var(--air-line)!important;border-radius:12px!important;overflow:auto!important}.admin-page table{border-collapse:collapse!important;width:100%!important}.admin-page th{height:42px!important;background:var(--air-panel-2)!important;color:var(--air-muted)!important;font-size:.67rem!important}.admin-page td{height:58px!important;border-top:1px solid var(--air-line)!important;font-size:.75rem!important}.admin-row-actions{display:flex!important;gap:4px!important;flex-wrap:wrap!important}.admin-row-actions button{width:32px!important;min-width:32px!important;height:32px!important;padding:0 8px!important;border:0!important;border-radius:8px!important;background:var(--air-panel-2)!important;color:var(--air-text)!important;font-size:.65rem!important}.group-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:10px!important}.group-grid article,.report-card{border:1px solid var(--air-line)!important;border-radius:14px!important;background:var(--air-panel)!important;padding:14px!important;box-shadow:none!important}.status-pill,.priority-pill{border-radius:12px!important;padding:4px 8px!important;font-size:.64rem!important}

/* Modal and menus */
.modal-backdrop{background:#10182099!important;backdrop-filter:blur(5px)!important;animation:airFade .18s ease both!important}.modal{width:min(94vw,480px)!important;max-height:min(86dvh,760px)!important;border:1px solid var(--air-line)!important;border-radius:20px!important;background:var(--air-panel)!important;color:var(--air-text)!important;box-shadow:0 24px 70px rgba(0,0,0,.28)!important;overflow:hidden!important;animation:airModal .24s cubic-bezier(.2,.8,.2,1) both!important}.modal>header{height:58px!important;padding:0 18px!important;border-bottom:1px solid var(--air-line)!important}.modal-content,.modal>form{overflow-y:auto!important;min-height:0!important;padding:16px!important}.modal .search-field{margin:0 0 12px!important}.context-menu,.message-menu.context-pop{position:fixed!important;z-index:1000!important;min-width:190px!important;max-height:min(70vh,440px)!important;overflow-y:auto!important;border:1px solid var(--air-line)!important;border-radius:14px!important;background:color-mix(in srgb,var(--air-panel) 96%,transparent)!important;backdrop-filter:blur(18px)!important;box-shadow:0 16px 45px rgba(0,0,0,.2)!important;padding:6px!important;animation:airContext .16s cubic-bezier(.2,.9,.2,1) both!important;transform-origin:top right!important}.context-menu button,.message-menu.context-pop button{height:38px!important;border-radius:8px!important}.reaction-picker{position:sticky!important;top:0!important;background:var(--air-panel)!important;z-index:2!important}
@keyframes airFade{from{opacity:0}to{opacity:1}}@keyframes airModal{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}@keyframes airContext{from{opacity:0;transform:scale(.92) translateY(-5px)}to{opacity:1;transform:none}}

/* Calls */
.call-overlay{position:fixed!important;inset:0!important;width:100vw!important;height:100dvh!important;border:0!important;border-radius:0!important;padding:68px 24px 104px!important;background:radial-gradient(circle at 50% 22%,#263b4d,#101820 62%,#0b1117)!important;color:#fff!important;z-index:2000!important;overflow:hidden!important;direction:rtl!important}.call-overlay.video-call{padding:64px 18px 100px!important}
.call-topbar{position:absolute!important;inset:0 0 auto!important;height:58px!important;padding:0 18px!important;display:flex!important;align-items:center!important;justify-content:space-between!important;background:linear-gradient(#0b1117cc,transparent)!important;z-index:25!important}.call-topbar>span{font-size:.75rem!important;color:#d9e5ee!important}.call-topbar>span i{display:inline-block!important;width:7px!important;height:7px!important;margin-left:7px!important;border-radius:50%!important;background:#4bc889!important;box-shadow:0 0 0 5px #4bc88922!important}.call-top-actions{display:flex!important;gap:7px!important}.call-topbar button,.call-top-actions .call-chat-toggle{position:static!important;width:38px!important;height:38px!important;padding:0!important;border:0!important;border-radius:50%!important;background:#ffffff14!important;color:#fff!important;display:grid!important;place-items:center!important}.call-top-actions .call-chat-toggle.active{background:var(--air-accent)!important}
.remote-video{position:absolute!important;inset:58px 0 92px!important;width:100%!important;height:calc(100% - 150px)!important;object-fit:contain!important;background:#070b0f!important}.local-video{position:absolute!important;top:72px!important;left:18px!important;width:min(24vw,280px)!important;height:min(27vh,210px)!important;object-fit:cover!important;border:2px solid #ffffff2a!important;border-radius:17px!important;background:#18232d!important;box-shadow:0 12px 40px #0008!important;z-index:10!important}.group-video-grid{position:absolute!important;inset:58px 0 92px!important;padding:8px!important;display:grid!important;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))!important;grid-auto-rows:minmax(180px,1fr)!important;gap:8px!important;overflow-y:auto!important;background:#070b0f!important}.group-video-tile{position:relative!important;min-height:0!important;border-radius:14px!important;overflow:hidden!important;background:#18232d!important}.group-video{width:100%!important;height:100%!important;object-fit:contain!important}.group-video-tile>span{position:absolute!important;right:10px!important;bottom:9px!important;padding:4px 9px!important;border-radius:10px!important;background:#071017a8!important;font-size:.68rem!important}.call-copy{position:relative!important;z-index:4!important;text-align:center!important;display:flex!important;flex-direction:column!important;align-items:center!important}.video-call .call-copy{position:absolute!important;top:70px!important;right:22px!important;align-items:flex-start!important;text-align:right!important}.video-call .call-copy .avatar{display:none!important}.call-copy .avatar{width:104px!important;height:104px!important;margin-top:5vh!important;font-size:2rem!important;box-shadow:0 0 0 12px #ffffff0b,0 20px 55px #0007!important}.call-copy h2{font-size:1.35rem!important;margin:18px 0 4px!important}.call-copy p{margin:0!important;color:#adc0cf!important;font-size:.78rem!important}.call-participants{position:absolute!important;top:58px!important;right:18px!important;width:min(340px,32vw)!important;max-height:calc(100vh - 175px)!important;overflow-y:auto!important;display:flex!important;flex-direction:column!important;gap:6px!important;z-index:6!important}.video-call .call-participants{top:auto!important;right:18px!important;bottom:104px!important;width:min(300px,30vw)!important;max-height:34vh!important}.call-participant{min-height:56px!important;padding:7px 9px!important;border:1px solid #ffffff12!important;border-radius:13px!important;background:#0c151dc9!important;backdrop-filter:blur(12px)!important;display:grid!important;grid-template-columns:38px 1fr 24px!important;gap:9px!important;align-items:center!important}.call-participant .avatar{width:38px!important;height:38px!important}.call-participant span{text-align:right!important}.call-participant b{display:block!important;font-size:.76rem!important}.call-participant small{display:block!important;color:#98adbd!important;font-size:.62rem!important;margin-top:2px!important}
.call-actions{position:absolute!important;bottom:20px!important;left:50%!important;transform:translateX(-50%)!important;z-index:30!important;display:flex!important;align-items:flex-start!important;justify-content:center!important;gap:14px!important}.call-button{position:relative!important;width:58px!important;height:58px!important;padding:0!important;border:0!important;border-radius:50%!important;background:#ffffff18!important;color:#fff!important;display:grid!important;place-items:center!important;line-height:1!important}.call-button>svg{position:absolute!important;inset:50% auto auto 50%!important;transform:translate(-50%,-50%)!important;margin:0!important}.call-button>span{position:absolute!important;top:64px!important;white-space:nowrap!important;font-size:.62rem!important;color:#cad5dd!important}.call-button.off{background:#fff!important;color:#18232d!important}.call-button.active{background:var(--air-accent)!important}.call-button.hangup{background:#e44f5b!important}.call-button.accept{background:#42b978!important}
.call-chat-panel{position:absolute!important;top:66px!important;left:18px!important;bottom:94px!important;width:min(360px,34vw)!important;border:1px solid #ffffff18!important;border-radius:18px!important;background:#101a23ed!important;backdrop-filter:blur(20px)!important;box-shadow:0 20px 60px #0008!important;overflow:hidden!important;z-index:22!important;display:flex!important;flex-direction:column!important}.call-chat-panel header{height:52px!important;padding:0 14px!important;border-bottom:1px solid #ffffff12!important;display:flex!important;align-items:center!important}.call-chat-panel header button{margin-right:auto!important;width:32px!important;height:32px!important;border-radius:50%!important;background:#ffffff10!important;color:#fff!important}.call-chat-messages{flex:1!important;overflow-y:auto!important;padding:10px!important}.call-chat-messages>div{width:fit-content!important;max-width:88%!important;margin:5px 0!important;padding:7px 10px!important;border-radius:12px!important;background:#ffffff10!important}.call-chat-panel form{height:54px!important;margin:8px!important;padding:3px 5px!important;border-radius:14px!important;background:#ffffff0e!important;display:flex!important}.call-chat-panel input{flex:1!important;background:transparent!important;border:0!important;color:#fff!important;padding:0 9px!important}.call-chat-panel form button{width:40px!important;height:40px!important;border-radius:50%!important;background:var(--air-accent)!important;color:#fff!important}
.call-dock{position:fixed!important;right:72px!important;left:auto!important;bottom:0!important;width:340px!important;height:58px!important;border:0!important;border-top:1px solid var(--air-line)!important;border-radius:0!important;background:var(--air-panel)!important;color:var(--air-text)!important;box-shadow:0 -8px 24px rgba(0,0,0,.12)!important;z-index:2050!important;padding:6px 8px!important;display:grid!important;grid-template-columns:38px 1fr 34px 34px!important;gap:7px!important;align-items:center!important}.call-dock-live{width:36px!important;height:36px!important;border-radius:50%!important;background:#42b978!important;color:#fff!important;display:grid!important;place-items:center!important}.call-dock>span:nth-of-type(2){min-width:0!important}.call-dock b,.call-dock small{display:block!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}.call-dock small{color:var(--air-muted)!important;font-size:.62rem!important}.call-dock>button{width:32px!important;height:32px!important;border:0!important;border-radius:50%!important;background:var(--air-panel-2)!important;color:var(--air-text)!important;display:grid!important;place-items:center!important}.call-dock .dock-hangup{background:#e44f5b!important;color:#fff!important}.dock-participants{display:none!important}

@media(max-width:1100px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))!important}.group-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.messages,.composer-area{padding-left:22px!important;padding-right:22px!important}}
@media(max-width:760px){
  body{overflow:hidden!important}.telegram-air{display:grid!important;grid-template-columns:1fr!important;grid-template-rows:minmax(0,1fr) 60px!important;height:100dvh!important}
  .telegram-air>.rail{grid-column:1!important;grid-row:2!important;position:relative!important;width:100%!important;height:60px!important;padding:5px 6px max(5px,env(safe-area-inset-bottom))!important;border:0!important;border-top:1px solid var(--air-line)!important;display:flex!important;align-items:center!important;justify-content:space-around!important;z-index:90!important}.rail .brand,.rail-bottom,.rail button[data-admin-hidden="true"]{display:none!important}.rail>button{width:46px!important;min-width:46px!important;height:48px!important;margin:0!important}.rail button.active:before{right:50%!important;top:-5px!important;width:22px!important;height:3px!important;transform:translateX(50%)!important}.rail button svg{width:20px!important;height:20px!important}
  .telegram-air>.list-pane,.telegram-air>.conversation,.telegram-air>.settings-page,.telegram-air>.admin-page{grid-column:1!important;grid-row:1!important;width:100%!important;height:100%!important;min-height:0!important}
  .telegram-air>.list-pane.mobile-hidden,.telegram-air>.conversation.mobile-hidden{display:none!important}.telegram-air>.list-pane:not(.mobile-hidden),.telegram-air>.conversation:not(.mobile-hidden){display:flex!important}
  .pane-heading{height:58px!important;min-height:58px!important}.pane-heading h1{font-size:1.08rem!important}.chat-row{height:65px!important}.connection{height:42px!important}.chat-header{height:58px!important;min-height:58px!important;padding:6px 7px!important}.chat-header .avatar{width:38px!important;height:38px!important}.header-actions{gap:0!important}.header-actions .icon-button{width:34px!important;height:34px!important}.header-actions .icon-button:nth-child(2){display:none!important}
  .messages{padding:12px 8px 26px!important}.message,.bubble{max-width:84%!important;font-size:.85rem!important}.composer-area{padding:6px 6px calc(7px + env(safe-area-inset-bottom))!important}.composer{border-radius:16px!important}.composer .poll-btn{display:none!important}.pinned-message,.group-call-banner{margin:5px 7px 0!important}
  .settings-page>.page-title{height:62px!important;padding:10px 14px!important}.settings-layout{display:flex!important;flex-direction:column!important;margin:0!important;padding:10px!important;gap:10px!important}.settings-nav{position:relative!important;top:auto!important;width:100%!important;display:flex!important;overflow-x:auto!important;padding:6px!important;border-radius:14px!important}.settings-user{display:none!important}.settings-nav>button{min-width:48px!important;width:48px!important;height:42px!important;grid-template-columns:1fr!important;padding:0!important;place-items:center!important}.settings-nav>button span,.settings-nav>button svg:last-child{display:none!important}.settings-nav>button.danger{margin:2px 0!important}.settings-content{width:100%!important}.settings-content .surface{border-radius:14px!important}.form-grid{grid-template-columns:1fr!important}.profile-intro{padding:16px!important}.profile-settings form{padding:14px!important}
  .admin-layout{display:flex!important;flex-direction:column!important}.admin-tabs{width:100%!important;height:58px!important;min-height:58px!important;padding:6px!important;border:0!important;border-bottom:1px solid var(--air-line)!important;display:flex!important;overflow-x:auto!important}.admin-nav-brand{display:none!important}.admin-tabs>button{min-width:42px!important;width:42px!important;height:42px!important;grid-template-columns:1fr!important;padding:0!important;place-items:center!important}.admin-tabs>button:not(.selected){color:var(--air-muted)!important}.admin-tabs>button{font-size:0!important}.admin-tabs>button i{position:absolute!important;font-size:.6rem!important}.admin-content{flex:1!important;height:auto!important;padding:0 10px 28px!important}.admin-content>.page-title{height:66px!important;margin:0 -10px 12px!important;padding:9px 12px!important}.admin-content>.page-title p,.admin-content>.page-title .eyebrow{display:none!important}.stats{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important}.stats .surface{min-height:86px!important}.group-grid{grid-template-columns:1fr!important}.section-heading{align-items:flex-start!important;flex-direction:column!important}.section-heading .search-field{width:100%!important;margin:8px 0!important}.table-wrap{border:0!important}.admin-page table,.admin-page tbody,.admin-page tr,.admin-page td{display:block!important}.admin-page thead{display:none!important}.admin-page tr{padding:10px!important;margin:7px 0!important;border:1px solid var(--air-line)!important;border-radius:12px!important}.admin-page td{height:auto!important;min-height:30px!important;padding:4px!important;border:0!important}
  .modal{width:calc(100vw - 14px)!important;max-height:calc(100dvh - 30px)!important;border-radius:18px!important}.context-menu,.message-menu.context-pop{max-width:calc(100vw - 16px)!important}
  .call-overlay,.call-overlay.video-call{padding:58px 8px 96px!important}.remote-video{inset:54px 0 88px!important;height:calc(100% - 142px)!important}.local-video{top:64px!important;left:9px!important;width:32vw!important;height:20vh!important;border-radius:12px!important}.group-video-grid{inset:54px 0 88px!important;grid-template-columns:1fr 1fr!important;grid-auto-rows:minmax(130px,1fr)!important;padding:4px!important;gap:4px!important}.call-topbar{height:54px!important;padding:0 9px!important}.video-call .call-copy{top:60px!important;right:10px!important}.call-copy .avatar{width:86px!important;height:86px!important}.call-participants{top:58px!important;right:8px!important;width:calc(100% - 16px)!important;max-height:calc(100% - 175px)!important}.video-call .call-participants{display:none!important}.call-actions{bottom:18px!important;gap:10px!important}.call-button{width:52px!important;height:52px!important}.call-button>span{top:57px!important}.call-chat-panel{top:58px!important;left:6px!important;right:6px!important;bottom:88px!important;width:auto!important}.call-dock{right:0!important;bottom:60px!important;width:100%!important;height:58px!important}.call-top-actions{gap:4px!important}
}
/* One coherent visual pass across the messenger, settings, administration and calls. */
:root{--air-bg:#e8edf1;--air-panel:#fff;--air-panel-2:#f0f3f6;--air-line:#dce4e9;--air-text:#182834;--air-muted:#718696;--air-accent:#2789d8;--air-bubble-in:#fff;--air-bubble-out:#dff1ff;--air-shadow:0 8px 28px #16334512}
[data-theme="dark"]{--air-bg:#0e1924;--air-panel:#172532;--air-panel-2:#20313f;--air-line:#2a3d4c;--air-text:#edf4f8;--air-muted:#97abba;--air-accent:#57a9ec;--air-bubble-in:#1d3040;--air-bubble-out:#285273;--air-shadow:0 8px 28px #0003}
body,.telegram-air{color:var(--air-text)!important}
.avatar,.avatar.small,.avatar.large,.chat-header .avatar{background:linear-gradient(145deg,#5eb4ee,#2b82c8)!important;color:#fff!important;box-shadow:none!important}
.avatar.group{background:linear-gradient(145deg,#61c1b5,#2e8f94)!important}
.telegram-air>.rail{background:#142637!important;border-right-color:#294253!important}
.rail .brand{background:#2789d8!important}
.rail button{color:#a5bacb!important}
.rail button.selected{color:#fff!important;background:#2789d8!important}
.rail button.selected:before{content:"";position:absolute;right:-8px;width:3px;height:26px;border-radius:8px;background:#64bbff}
.rail button:hover:not(.selected){background:#ffffff12!important;color:#fff!important}
.telegram-air>.list-pane,.chat-header{background:var(--air-panel)!important}
.pane-heading{height:76px!important;min-height:76px!important;padding:12px 18px!important}
.pane-heading h1{font-size:1.26rem!important;font-weight:750!important}
.chat-row{height:72px!important;min-height:72px!important;margin:2px 5px!important;padding:9px 11px!important;border-radius:13px!important}
.chat-row.selected{background:color-mix(in srgb,var(--air-accent) 14%,var(--air-panel))!important;color:var(--air-text)!important}
.chat-row.selected small,.chat-row.selected .row-meta{color:var(--air-muted)!important}
.chat-row.selected .row-copy b{color:var(--air-accent)!important}
.chat-row.selected .row-meta em{background:var(--air-accent)!important;color:#fff!important}
.chat-row:hover:not(.selected){background:var(--air-panel-2)!important}
.search-field{border:1px solid transparent!important;transition:background .2s,border-color .2s,box-shadow .2s!important}
.search-field:focus-within{transform:none!important;border-color:color-mix(in srgb,var(--air-accent) 35%,var(--air-panel-2))!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--air-accent) 10%,transparent)!important}
.chat-header{height:68px!important;min-height:68px!important;padding:8px 22px!important;box-shadow:0 1px 6px #0000000c!important}
.header-actions .icon-btn,.chat-header .icon-btn{color:var(--air-muted)!important}
.header-actions .icon-btn:hover,.chat-header .icon-btn:hover{background:var(--air-panel-2)!important;color:var(--air-accent)!important}
.conversation:before{opacity:.13!important;background-image:radial-gradient(circle at 22px 22px,var(--air-accent) 1px,transparent 1.2px),radial-gradient(circle at 58px 62px,var(--air-accent) 1px,transparent 1.2px)!important;background-size:92px 88px!important;mask-image:none!important}
.messages{background-image:radial-gradient(circle at 24px 24px,color-mix(in srgb,var(--air-accent) 12%,transparent) 1px,transparent 1.2px)!important;background-size:78px 78px!important;padding-top:26px!important}
.message-row{animation:messageAppear .18s ease-out both!important;margin:4px 0!important}
@keyframes messageAppear{from{opacity:0}to{opacity:1}}
.bubble{min-width:104px!important;max-width:min(72%,640px)!important;padding:10px 12px 24px!important;border-radius:16px 16px 5px 16px!important;background:var(--air-bubble-in)!important;box-shadow:0 1px 2px #00000017!important}
.message-row.mine .bubble{background:var(--air-bubble-out)!important;border-radius:16px 16px 16px 5px!important}
.bubble p{font-size:.92rem!important;line-height:1.62!important;letter-spacing:0!important}
.message-meta{right:11px!important;left:auto!important;bottom:5px!important;gap:4px!important;direction:ltr!important;font-size:.64rem!important}
.message-row.mine .message-meta svg{order:0!important}
.message-meta .read{color:#77c6fb!important}
.message-menu-btn{left:-28px!important;top:4px!important;width:24px!important;height:24px!important;padding:3px!important;border-radius:50%!important;color:var(--air-muted)!important}
.bubble:hover .message-menu-btn,.message-menu-btn:focus-visible{background:var(--air-panel-2)!important;opacity:1!important}
.reply-preview{width:100%!important;text-align:right!important;border-right:3px solid var(--air-accent)!important;background:color-mix(in srgb,var(--air-accent) 12%,transparent)!important;border-radius:8px!important}
.pinned-message,.group-call-banner{box-shadow:0 3px 12px #00000010!important}
.composer-area{padding-bottom:13px!important}
.composer{min-height:54px!important;border-radius:18px!important;padding:5px!important;box-shadow:0 5px 22px #00000019!important}
.composer:focus-within{border-color:var(--air-line)!important;box-shadow:0 5px 22px #00000019!important}
.composer textarea{font-size:.91rem!important}
.composer .send-btn{width:42px!important;height:42px!important;min-width:42px!important;border-radius:14px!important;background:var(--air-accent)!important;transform:none!important;box-shadow:none!important}
.composer .send-btn svg{transform:rotate(180deg)!important;width:19px!important;height:19px!important}
.composer .send-btn:disabled{background:var(--air-panel-2)!important;color:var(--air-muted)!important;opacity:1!important}
.composer .voice-btn{color:var(--air-accent)!important}
.settings-page,.admin-page{background:var(--air-bg)!important}
.settings-page>.page-title,.admin-content>.page-title{box-shadow:0 1px 6px #0000000c!important}
.settings-layout{max-width:1050px!important;grid-template-columns:250px minmax(0,1fr)!important;gap:22px!important}
.settings-nav,.settings-content .surface,.admin-content .surface,.service-health{border-radius:16px!important;box-shadow:0 3px 14px #0000000b!important}
.settings-nav>button{transition:background .16s,color .16s!important}
.settings-nav>button.selected{background:color-mix(in srgb,var(--air-accent) 13%,var(--air-panel))!important;color:var(--air-accent)!important;font-weight:700!important}
.setting-row:hover{background:color-mix(in srgb,var(--air-accent) 4%,var(--air-panel))!important}
.admin-tabs{background:var(--air-panel)!important}
.admin-tabs>button.selected{background:color-mix(in srgb,var(--air-accent) 14%,var(--air-panel))!important;color:var(--air-accent)!important}
.admin-page table tr:hover td{background:color-mix(in srgb,var(--air-accent) 3%,var(--air-panel))!important}
.admin-page .chart-legend .messages{position:static!important;flex:none!important;padding:0!important;min-height:0!important;overflow:visible!important;background:none!important;box-shadow:none!important}
.admin-page .analytics-chart .chart-bars .messages{position:static!important;flex:0 0 28%!important;width:28%!important;min-height:5px!important;padding:0!important;overflow:visible!important;scroll-behavior:auto!important;background:linear-gradient(#58adf0,#287fc8)!important;box-shadow:none!important}
.modal{border-radius:18px!important;box-shadow:0 26px 70px #0005!important}
.modal-backdrop{backdrop-filter:blur(7px)!important}
.message-menu.context-pop{z-index:3000!important;box-shadow:0 18px 50px #0005!important;animation:menuRise .16s ease-out both!important}
@keyframes menuRise{from{opacity:0;scale:.94}to{opacity:1;scale:1}}
.call-leave-backdrop{position:fixed;inset:0;z-index:4000;background:#07111ac4;display:grid;place-items:center;padding:18px;backdrop-filter:blur(8px)}
.call-leave-sheet{width:min(100%,390px);padding:22px;border-radius:22px;background:var(--air-panel);border:1px solid var(--air-line);color:var(--air-text);box-shadow:0 26px 70px #0008;direction:rtl;animation:sheetIn .22s cubic-bezier(.2,.8,.2,1)}
@keyframes sheetIn{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}}
.call-leave-sheet h3{margin:0 0 8px;font-size:1.05rem}.call-leave-sheet p{margin:0 0 18px;color:var(--air-muted);line-height:1.7;font-size:.82rem}
.call-leave-sheet button{display:block;width:100%;min-height:45px;margin:6px 0;border:0;border-radius:12px;background:var(--air-panel-2);color:var(--air-text);font-weight:650;cursor:pointer}
.call-leave-sheet button:first-of-type{background:var(--air-accent);color:#fff}.call-leave-sheet button.danger{color:#e95864;background:color-mix(in srgb,#e95864 12%,var(--air-panel))}.call-leave-sheet button.cancel{background:transparent;color:var(--air-muted)}
.call-overlay{background:radial-gradient(circle at 50% 15%,#28465d,#142735 55%,#0c1b28)!important}
.call-topbar{background:#0d1c29d9!important;border-bottom:1px solid #ffffff14!important}
.call-participant{background:#162d3cda!important}
.call-button{background:#ffffff21!important}.call-button.hangup{background:#e3545f!important}.call-button.off{background:#f0f4f7!important;color:#152b39!important}.call-button.active{background:#2789d8!important}
.call-dock{right:calc(50% - 170px)!important;bottom:14px!important;border:1px solid var(--air-line)!important;border-radius:16px!important;box-shadow:0 10px 40px #0005!important}
@media(max-width:760px){
  .telegram-air{grid-template-rows:minmax(0,1fr) 64px!important}
  .telegram-air>.rail{height:64px!important;padding:3px 4px max(3px,env(safe-area-inset-bottom))!important;background:var(--air-panel)!important;border-top:1px solid var(--air-line)!important}
  .rail>button{width:calc((100vw - 10px)/6)!important;min-width:0!important;height:57px!important;margin:0!important;display:flex!important;flex-direction:column!important;gap:3px!important;align-items:center!important;justify-content:center!important;border-radius:10px!important;color:var(--air-muted)!important}
  .rail>button svg{width:19px!important;height:19px!important}.rail>button span:not(.avatar){display:block!important;font-size:.61rem!important;line-height:1!important;white-space:nowrap!important}
  .rail>button.selected{color:var(--air-accent)!important;background:color-mix(in srgb,var(--air-accent) 11%,transparent)!important}.rail>button.selected:before{display:none!important}
  .chat-header{height:62px!important;min-height:62px!important;padding:6px 9px!important;gap:5px!important}.chat-header .avatar{width:37px!important;height:37px!important}.peer-title b{font-size:.84rem!important}.peer-title small{font-size:.65rem!important}
  .header-actions .icon-btn,.chat-header .icon-btn{width:34px!important;height:34px!important}.header-actions .icon-btn:nth-child(2){display:grid!important}
  .messages{padding:16px 11px 24px!important}.bubble{max-width:82vw!important;min-width:110px!important;padding:10px 12px 24px!important}.bubble p{font-size:.88rem!important}
  .message-menu-btn{opacity:.55!important;left:7px!important;top:5px!important;color:var(--air-muted)!important}.message-row{margin:5px 0!important}
  .composer-area{padding:7px 7px calc(8px + env(safe-area-inset-bottom))!important}.composer{min-height:50px!important}.composer .poll-btn{display:grid!important}.composer .icon-btn,.composer>button{width:37px!important;min-width:37px!important;height:40px!important}.composer .send-btn{width:40px!important;min-width:40px!important;height:40px!important}
  .settings-layout{padding:12px!important}.settings-nav{gap:4px!important;max-width:100%!important;scrollbar-width:none}.settings-nav>button{min-width:auto!important;width:auto!important;height:42px!important;padding:0 11px!important;grid-template-columns:18px auto!important;gap:5px!important;white-space:nowrap!important}.settings-nav>button span{display:inline!important;font-size:.7rem!important}.settings-nav>button svg:last-child{display:none!important}
  .admin-tabs>button{width:auto!important;min-width:65px!important;padding:0 9px!important;display:flex!important;gap:5px!important;font-size:.67rem!important;white-space:nowrap!important}.admin-tabs>button svg{width:17px!important;height:17px!important}
  .video-call .call-participants{display:flex!important;top:auto!important;bottom:104px!important;right:7px!important;left:7px!important;width:auto!important;max-height:70px!important;flex-direction:row!important;overflow-x:auto!important;overflow-y:hidden!important}.video-call .call-participant{min-width:145px!important;min-height:54px!important}
  .group-video-grid{bottom:176px!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;grid-auto-rows:minmax(140px,1fr)!important}.group-video-tile{min-height:140px!important}
  .call-dock{right:6px!important;left:6px!important;width:auto!important;bottom:70px!important}
}
@media(max-width:390px){.composer .icon-btn,.composer>button{width:33px!important;min-width:33px!important}.chat-header .icon-btn{width:31px!important;height:31px!important}.rail>button span:not(.avatar){font-size:.57rem!important}}
@media(prefers-reduced-motion:reduce){.message-row,.modal,.modal-backdrop,.message-menu,.call-leave-sheet{animation:none!important}}

/* Compact status and a call dock that actually occupies the status slot. */
.connection{padding:0!important;height:54px!important;display:block!important}
.connection-status{height:100%;padding:0 14px;display:flex;align-items:center;gap:8px;color:var(--air-muted)}
.connection-status>span:first-child{width:8px;height:8px;border-radius:50%;flex:none}
.connection-status .version{margin-right:auto;font-size:.66rem}
#connection-dock:empty{display:none}
#connection-dock:not(:empty){position:absolute;inset:0;display:block}
.connection:has(.call-dock) .connection-status{visibility:hidden}
.connection .call-dock{position:relative!important;inset:auto!important;width:100%!important;height:54px!important;padding:5px 9px!important;grid-template-columns:34px minmax(0,1fr) 31px 31px!important;gap:7px!important;border:0!important;border-radius:0!important;background:var(--air-panel)!important;box-shadow:none!important}
.connection .call-dock-live{width:33px!important;height:33px!important}
.connection .call-dock b{font-size:.73rem!important}.connection .call-dock small{font-size:.63rem!important}
.connection .call-dock>button{width:30px!important;height:30px!important}

/* Quiet chat wallpaper, with no stray dotted texture. */
.conversation:before{display:none!important}
.conversation .messages{background-color:var(--air-bg)!important;background-image:radial-gradient(ellipse at 14% 12%,color-mix(in srgb,var(--air-accent) 8%,transparent),transparent 43%),radial-gradient(ellipse at 84% 88%,color-mix(in srgb,var(--air-accent) 6%,transparent),transparent 48%)!important;background-size:100% 100%!important}
.composer{box-shadow:0 2px 14px #00000016!important;border-radius:17px!important}
.composer .send-btn{width:42px!important;height:42px!important;border-radius:13px!important;display:grid!important;place-items:center!important}
.composer .send-btn svg{fill:currentColor!important;stroke:var(--air-panel)!important;stroke-width:1.5!important;transform:rotate(180deg)!important}
.composer .send-btn:not(:disabled){background:var(--air-accent)!important;color:#fff!important}

/* Dialogs share a readable header and one reliable scroll area. */
.modal-backdrop{z-index:1500!important;padding:16px!important;align-items:center!important;overflow-y:auto!important;background:#07131db8!important}
.modal{width:min(94vw,470px)!important;max-height:calc(100dvh - 32px)!important;overflow-x:hidden!important;overflow-y:auto!important;overscroll-behavior:contain!important;padding:0 18px 18px!important;border-radius:18px!important;scrollbar-width:thin!important;background:var(--air-panel)!important;animation:dialogEnter .2s cubic-bezier(.2,.8,.2,1) both!important}
.modal>header{position:sticky!important;top:0!important;z-index:10!important;height:55px!important;min-height:55px!important;margin:0 -18px 14px!important;padding:0 17px!important;display:flex!important;align-items:center!important;background:var(--air-panel)!important;color:var(--air-text)!important;border-bottom:1px solid var(--air-line)!important;backdrop-filter:none!important}
.modal>header h2{opacity:1!important;font-size:.94rem!important;font-weight:700!important;margin:0!important;color:var(--air-text)!important}
.modal>header .icon-btn{width:32px!important;height:32px!important;min-width:32px!important;border:0!important;border-radius:9px!important;background:var(--air-panel-2)!important;color:var(--air-muted)!important}
@keyframes dialogEnter{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
.modal label{color:var(--air-muted)!important;font-size:.75rem!important}
.modal input,.modal textarea,.modal select{min-height:38px!important;padding:8px 11px!important;border-radius:10px!important;background:var(--air-panel-2)!important;border:1px solid transparent!important;color:var(--air-text)!important}
.modal input:focus,.modal textarea:focus,.modal select:focus{background:var(--air-panel-2)!important;border-color:color-mix(in srgb,var(--air-accent) 50%,var(--air-line))!important;box-shadow:none!important}
.modal .search-field{height:41px!important;min-height:41px!important;margin:0 0 10px!important;padding:0 12px!important;border-radius:12px!important;background:var(--air-panel-2)!important;box-shadow:none!important;transform:none!important}
.modal .search-field input{height:100%!important;min-height:0!important;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important}
.modal .search-field:focus-within{background:color-mix(in srgb,var(--air-accent) 8%,var(--air-panel-2))!important;border-color:transparent!important;box-shadow:none!important;animation:searchWake .22s ease-out}
@keyframes searchWake{from{opacity:.7;transform:translateY(2px)}to{opacity:1;transform:none}}
.modal .hint{font-size:.72rem!important;line-height:1.65!important;color:var(--air-muted)!important}
.modal .primary{min-height:41px!important;border-radius:11px!important}
.search-categories{margin:2px 0 10px!important;padding:0 0 3px!important;gap:5px!important}
.search-categories button{min-height:30px!important;padding:3px 10px!important;border:1px solid var(--air-line)!important;border-radius:16px!important;background:transparent!important;color:var(--air-muted)!important;font-size:.72rem!important}
.search-categories button.selected{border-color:transparent!important;background:color-mix(in srgb,var(--air-accent) 16%,var(--air-panel))!important;color:var(--air-accent)!important}
.search-modal .search-results{margin:7px 0 0!important;max-height:48dvh!important;overflow-y:auto!important}
.new-chat-modal .segmented{margin:0 0 14px!important;padding:3px!important;border-radius:12px!important;background:var(--air-panel-2)!important}
.new-chat-modal .segmented button{min-height:36px!important;border-radius:9px!important;font-size:.78rem!important;color:var(--air-muted)!important}
.new-chat-modal .segmented button.selected{background:var(--air-panel)!important;color:var(--air-accent)!important;box-shadow:0 1px 5px #00000013!important}
.new-chat-modal .user-results{min-height:48px!important;max-height:210px!important;margin:3px 0 12px!important;overflow-y:auto!important}
.new-chat-modal .user-results>button{min-height:52px!important;padding:7px 9px!important;border-radius:10px!important}
.new-chat-modal .user-results .hint{margin:8px 2px!important}
.new-chat-modal>.hint:last-child{margin:9px 0 0!important}

/* Profile: compact identity, visible actions and scrollable details. */
.profile-modal{width:min(94vw,530px)!important;max-height:calc(100dvh - 32px)!important;overflow-y:auto!important;padding:0 0 14px!important}
.profile-modal>header{margin:0!important;padding:0 16px!important}
.profile-modal .profile-hero{min-height:104px!important;height:auto!important;padding:17px 18px!important;display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:flex-start!important;gap:14px!important;text-align:right!important;color:var(--air-text)!important;overflow:visible!important;border-bottom:1px solid var(--air-line)!important}
.profile-modal .profile-cover{background:linear-gradient(125deg,color-mix(in srgb,var(--air-accent) 13%,var(--air-panel)),var(--air-panel))!important}
.profile-modal .profile-hero>.avatar{width:62px!important;height:62px!important;min-width:62px!important;margin:0!important;font-size:1.2rem!important;box-shadow:0 0 0 3px var(--air-panel)!important}
.profile-modal .profile-identity{min-width:0!important;flex:1!important}
.profile-modal .profile-identity h2{margin:0 0 5px!important;font-size:1.02rem!important;line-height:1.3!important;color:var(--air-text)!important}
.profile-modal .profile-identity p{font-size:.72rem!important;color:var(--air-muted)!important}
.profile-quick-actions{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(92px,1fr))!important;gap:7px!important;padding:12px 16px 4px!important}
.profile-quick-actions button{min-height:53px!important;padding:7px 3px!important;gap:5px!important;border:1px solid var(--air-line)!important;border-radius:12px!important;background:var(--air-panel-2)!important;color:var(--air-text)!important;font-size:.69rem!important;line-height:1.15!important}
.profile-quick-actions button svg{width:17px!important;height:17px!important;color:var(--air-accent)!important}
.profile-quick-actions button:hover{background:color-mix(in srgb,var(--air-accent) 10%,var(--air-panel))!important}
.profile-details{margin:11px 16px 8px!important;padding:1px 13px!important;border-radius:12px!important;background:var(--air-panel-2)!important;border:1px solid var(--air-line)!important}
.profile-details>div:not(.peer-meta){padding:9px 0!important}
.profile-details span{color:var(--air-muted)!important;font-size:.67rem!important}
.profile-details p{font-size:.81rem!important;line-height:1.5!important;color:var(--air-text)!important;overflow-wrap:anywhere!important}
.profile-modal>.modal-actions{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important;margin:7px 16px 14px!important;padding:0!important}
.profile-modal>.modal-actions>button{min-height:40px!important;flex-direction:row!important;gap:7px!important;padding:5px 8px!important;justify-content:flex-start!important;text-align:right!important;border:1px solid var(--air-line)!important;border-radius:10px!important;background:var(--air-panel)!important;color:var(--air-text)!important;font-size:.69rem!important}
.profile-modal>.modal-actions>button svg{width:16px!important;height:16px!important;color:var(--air-accent)!important}
.profile-modal>h3{margin:16px 17px 8px!important;font-size:.83rem!important;color:var(--air-text)!important}
.profile-modal .member-list{margin:0 16px 12px!important;max-height:none!important;overflow:visible!important;gap:5px!important}
.profile-modal .member-list>div{min-height:52px!important;flex-wrap:nowrap!important;padding:6px 8px!important;border:1px solid var(--air-line)!important;border-radius:10px!important;background:var(--air-panel)!important;gap:5px!important}
.profile-modal .member-list .member-identity{min-width:0!important;flex:1!important;text-align:right!important}
.profile-modal .member-list .icon-btn{width:27px!important;height:27px!important;min-width:27px!important;padding:5px!important}
.profile-modal .member-list>div>small{font-size:.64rem!important;color:var(--air-muted)!important}
.profile-danger-zone{margin:14px 16px 0!important;padding:10px 12px!important;border-radius:11px!important;background:color-mix(in srgb,#e55661 7%,var(--air-panel))!important}
.profile-danger-zone b{font-size:.75rem!important}.profile-danger-zone small{font-size:.65rem!important;color:var(--air-muted)!important}
.profile-danger-zone button{min-height:32px!important;border-radius:8px!important;color:#d64a56!important}
.profile-modal>.inline-form{display:flex!important;flex-direction:column!important;gap:10px!important;margin:12px 16px!important;padding:13px!important;border:1px solid var(--air-line)!important;border-radius:12px!important;background:var(--air-panel-2)!important}
.profile-modal>.inline-form h3{margin:0 0 2px!important;font-size:.84rem!important;color:var(--air-text)!important}
.profile-modal>.inline-form label{width:100%!important;margin:0!important;color:var(--air-muted)!important}
.profile-modal>.inline-form input:not([type="checkbox"]),.profile-modal>.inline-form textarea,.profile-modal>.inline-form select{min-height:38px!important;background:var(--air-panel)!important;border:1px solid var(--air-line)!important;border-radius:9px!important;color:var(--air-text)!important}
.profile-modal>.inline-form input:disabled{opacity:.65!important}
.profile-modal>.inline-form .setting-row{padding:7px 0!important;min-height:48px!important;border-bottom:1px solid var(--air-line)!important;background:transparent!important}
.profile-modal>.inline-form .setting-row:last-of-type{border-bottom:0!important}
.profile-modal>.inline-form .primary{width:100%!important}

/* Account settings use the same density as the messenger. */
.settings-layout{margin:16px auto!important;gap:14px!important}
.profile-settings .profile-intro{min-height:0!important;padding:14px 17px!important;box-shadow:none!important;background:color-mix(in srgb,var(--air-accent) 9%,var(--air-panel))!important}
.profile-settings .avatar.large{width:57px!important;height:57px!important;min-width:57px!important}
.profile-settings .profile-intro h2{border:0!important;padding:0!important;font-size:.91rem!important}
.profile-settings .profile-intro p,.profile-settings .profile-intro small{font-size:.7rem!important}
.profile-settings form{padding:14px 17px!important}
.settings-content label:not(.setting-row){font-size:.72rem!important}
.settings-content input,.settings-content textarea,.settings-content select{min-height:37px!important;padding:8px 10px!important;border-radius:10px!important}
.settings-content textarea{min-height:68px!important}
.profile-settings .profile-intro{min-height:76px!important;padding:11px 17px!important;background:var(--air-panel)!important;border-bottom:1px solid var(--air-line)!important}
.profile-settings .avatar.large{width:52px!important;height:52px!important;min-width:52px!important}
.profile-settings .profile-intro h2{margin:0 0 2px!important}
.profile-settings .profile-intro p{margin:0 0 2px!important}
.profile-settings form{display:flex!important;flex-direction:column!important;gap:10px!important;padding:12px 17px 15px!important}
.profile-settings form .form-grid{gap:12px!important}
.profile-settings form label{gap:2px!important;color:var(--air-muted)!important}
.profile-settings form input,.profile-settings form textarea{min-height:34px!important;padding:5px 1px!important;border:0!important;border-bottom:1px solid var(--air-line)!important;border-radius:0!important;background:transparent!important;color:var(--air-text)!important;box-shadow:none!important}
.profile-settings form textarea{min-height:54px!important;resize:vertical!important}
.profile-settings form input:focus,.profile-settings form textarea:focus{border-color:var(--air-accent)!important;background:transparent!important;box-shadow:none!important}
.profile-settings .handle-state{font-size:.66rem!important}
.profile-settings .settings-save{padding:2px 0 0!important}

@media(max-width:760px){
  .modal-backdrop{padding:10px!important;align-items:center!important}
  .modal,.profile-modal{width:calc(100vw - 20px)!important;max-width:none!important;max-height:calc(100dvh - 20px)!important;border-radius:17px!important}
  .profile-modal .profile-hero{min-height:94px!important;padding:14px!important}
  .profile-quick-actions{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .profile-modal>.modal-actions{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .call-dock{left:8px!important;right:8px!important;bottom:70px!important;width:auto!important;height:52px!important;border-radius:13px!important;grid-template-columns:34px minmax(0,1fr) 31px 31px!important}
  .connection{height:42px!important}.connection-status{padding:0 12px!important}
  .settings-layout{margin:0!important;padding:10px!important}
  .profile-settings .settings-save .primary{width:100%!important}
}

/* A restrained Telegram-like surface shared by the chat and management views. */
:root{
  --air-bg:#e9eef2;--air-panel:#fff;--air-panel-2:#f1f5f7;
  --air-line:#dce5eb;--air-text:#1c2b36;--air-muted:#6c8392;
  --air-accent:#298dd8;--air-accent-strong:#207dc4;
  --air-bubble-in:#fff;--air-bubble-out:#dff0fb;
  --air-shadow:0 5px 20px #203c5310;
}
[data-theme="dark"]{
  --air-bg:#0e1923;--air-panel:#182734;--air-panel-2:#223541;
  --air-line:#304452;--air-text:#eef4f7;--air-muted:#9bb0be;
  --air-accent:#63b5ee;--air-accent-strong:#80c4f3;
  --air-bubble-in:#213645;--air-bubble-out:#2a506b;
  --air-shadow:0 5px 20px #0002;
}
.telegram-air{grid-template-columns:64px clamp(290px,27vw,370px) minmax(0,1fr)!important}
.telegram-air>.rail{width:64px!important;background:var(--air-panel)!important;border-right:1px solid var(--air-line)!important}
.rail .brand{background:var(--air-accent)!important;box-shadow:none!important}
.rail button{color:var(--air-muted)!important}
.rail button.active,.rail button.selected{background:color-mix(in srgb,var(--air-accent) 14%,var(--air-panel))!important;color:var(--air-accent)!important}
.rail button.active:before,.rail button.selected:before{background:var(--air-accent)!important}
.pane-heading{height:67px!important;min-height:67px!important;padding:10px 15px!important}
.pane-heading h1{font-size:1.12rem!important}
.chat-row{height:68px!important;min-height:68px!important;margin:2px 6px!important;padding:8px 9px!important}
.chat-row .avatar{width:45px!important;height:45px!important}
.chat-row.selected{background:color-mix(in srgb,var(--air-accent) 13%,var(--air-panel))!important}
.chat-header{height:62px!important;min-height:62px!important;padding:7px 16px!important;box-shadow:none!important}
.chat-header .avatar{width:40px!important;height:40px!important}
.chat-header .icon-btn,.header-actions .icon-btn{width:35px!important;height:35px!important}
.chat-header .icon-btn svg,.header-actions .icon-btn svg{width:18px!important;height:18px!important}
.conversation .messages{padding:17px clamp(16px,5.5vw,90px) 24px!important;background-image:radial-gradient(circle at 78% 34%,transparent 0 104px,color-mix(in srgb,var(--air-accent) 13%,transparent) 105px 106px,transparent 107px 156px,color-mix(in srgb,var(--air-accent) 8%,transparent) 157px 158px,transparent 159px),radial-gradient(ellipse at 78% 34%,color-mix(in srgb,var(--air-accent) 13%,transparent),transparent 49%),linear-gradient(145deg,transparent 25%,color-mix(in srgb,var(--air-accent) 3%,transparent) 58%,transparent 83%)!important;background-color:var(--air-bg)!important;background-size:100% 100%!important}
.message-row{margin:3px 0!important}
.message-row:has(.reactions){margin-bottom:15px!important}
.bubble{max-width:min(74%,610px)!important;min-width:92px!important;padding:8px 12px 22px!important;border:1px solid color-mix(in srgb,var(--air-line) 55%,transparent)!important;box-shadow:0 1px 2px #00000012!important}
.message-row.mine .bubble{border-color:color-mix(in srgb,var(--air-accent) 12%,transparent)!important}
.bubble p{font-size:.88rem!important;line-height:1.55!important}
.message-meta{right:10px!important;bottom:4px!important}
.reactions{left:6px!important;bottom:-14px!important}
.reactions button{box-shadow:0 2px 8px #00000012!important}
.reply-preview,.message-reply{padding:6px 9px!important;border-radius:7px!important;background:color-mix(in srgb,var(--air-accent) 10%,transparent)!important}
.date-divider{background:color-mix(in srgb,var(--air-panel) 88%,transparent)!important;color:var(--air-text)!important;border:1px solid var(--air-line)!important;box-shadow:none!important}
.composer-area{padding:9px clamp(13px,5.5vw,90px) 12px!important}
.composer{min-height:51px!important;padding:4px 6px!important;gap:2px!important;border:1px solid var(--air-line)!important;border-radius:17px!important;box-shadow:0 2px 12px #00000013!important}
.composer:focus-within{border-color:var(--air-line)!important;box-shadow:0 2px 12px #00000013!important}
.composer textarea{min-height:39px!important;padding:9px 6px!important;font-size:.87rem!important}
.composer .icon-btn,.composer>button:not(.send-btn){width:36px!important;min-width:36px!important;height:40px!important;border-radius:11px!important}
.composer .icon-btn svg,.composer>button svg{width:18px!important;height:18px!important}
.composer .send-btn{width:40px!important;min-width:40px!important;height:40px!important;border-radius:50%!important;transform:none!important;background:var(--air-accent)!important;box-shadow:none!important}
.composer .send-btn svg{width:19px!important;height:19px!important;fill:none!important;stroke:#fff!important;stroke-width:2!important;transform:none!important;margin-left:-2px!important}
.composer .send-btn:disabled{background:var(--air-panel-2)!important;color:var(--air-muted)!important}
.composer .send-btn:disabled svg{stroke:var(--air-muted)!important}
.composer-reply,.pending,.readonly-notice{border:1px solid var(--air-line)!important;border-right:3px solid var(--air-accent)!important;border-radius:11px!important;box-shadow:0 1px 5px #0000000b!important}

/* Dialog content stays visible and scrolls as one panel at every screen height. */
.modal-backdrop{align-items:center!important;justify-content:center!important;padding:max(10px,env(safe-area-inset-top)) 12px max(10px,env(safe-area-inset-bottom))!important}
.modal{max-height:min(720px,calc(100dvh - 24px))!important;width:min(94vw,480px)!important;border:1px solid var(--air-line)!important;border-radius:18px!important;box-shadow:0 24px 70px #0005!important;scrollbar-gutter:stable!important}
.modal>header{height:53px!important;min-height:53px!important;margin-bottom:12px!important}
.modal>header h2{font-size:.92rem!important}
.modal>header .icon-btn{background:transparent!important;color:var(--air-muted)!important}
.modal>header .icon-btn:hover{background:var(--air-panel-2)!important;color:var(--air-text)!important}
.modal label{font-size:.73rem!important}
.modal .search-field{height:39px!important;min-height:39px!important;border:1px solid var(--air-line)!important;background:var(--air-panel-2)!important}
.modal .search-field:focus-within{border-color:var(--air-line)!important;box-shadow:none!important}
.modal .search-field svg{width:17px!important;height:17px!important}
.search-modal .search-results{max-height:min(360px,48dvh)!important;scrollbar-width:thin!important}
.search-categories{display:flex!important;flex-wrap:nowrap!important;overflow-x:auto!important;scrollbar-width:none!important}
.search-categories button{flex:none!important}
.new-chat-modal .picked:empty{display:none!important}
.new-chat-modal .user-results{min-height:0!important;max-height:210px!important}
.new-chat-modal .primary{width:100%!important}
.new-chat-modal .primary:disabled{opacity:.6!important}
.new-chat-modal .primary:disabled{background:var(--air-panel-2)!important;color:var(--air-muted)!important;border:1px solid var(--air-line)!important;opacity:.72!important;box-shadow:none!important;cursor:not-allowed!important}
.new-chat-modal>.hint:last-child{font-size:.68rem!important;line-height:1.55!important}
.confirm-modal{width:min(94vw,410px)!important}
.modal .stack>button,.modal .confirm-actions button{border-radius:10px!important}

/* Profile and account controls read as compact rows instead of large tiles. */
.profile-modal{width:min(94vw,510px)!important;padding-bottom:14px!important}
.profile-modal .profile-hero{min-height:90px!important;padding:13px 16px!important;gap:12px!important}
.profile-modal .profile-hero>.avatar{width:56px!important;height:56px!important;min-width:56px!important}
.profile-modal .profile-identity h2{font-size:.99rem!important}
.profile-quick-actions{grid-template-columns:repeat(auto-fit,minmax(85px,1fr))!important;padding:11px 16px 1px!important}
.profile-quick-actions button{min-height:51px!important;background:transparent!important;border-color:var(--air-line)!important}
.profile-quick-actions button svg{width:16px!important;height:16px!important}
.profile-details{margin-top:10px!important}
.profile-modal>.modal-actions>button{font-size:.7rem!important}
.profile-modal .member-list>div{min-height:49px!important}
.profile-modal .member-list .member-identity{overflow:hidden!important}
.profile-modal .member-list .member-identity span{min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important}
.profile-modal>.inline-form{background:var(--air-panel)!important}
.profile-modal>.inline-form input:not([type="checkbox"]),.profile-modal>.inline-form textarea,.profile-modal>.inline-form select{background:var(--air-panel-2)!important;border:1px solid var(--air-line)!important}
.settings-page>.page-title,.admin-content>.page-title{height:67px!important;padding-top:10px!important;padding-bottom:10px!important}
.settings-layout{max-width:940px!important;grid-template-columns:225px minmax(0,1fr)!important;gap:13px!important}
.settings-nav,.settings-content .surface,.admin-content .surface{border-radius:13px!important;box-shadow:none!important}
.settings-nav>button{height:43px!important}
.setting-row{min-height:55px!important;padding:9px 16px!important}
.profile-settings form{padding:10px 16px 14px!important}
.profile-settings form .form-grid{gap:10px!important}
.profile-settings .profile-intro{margin-bottom:0!important}
.profile-settings form{gap:12px!important;padding:14px 16px 17px!important}
.profile-settings form label{font-size:.81rem!important;color:var(--air-text)!important;gap:5px!important}
.profile-settings form input,.profile-settings form textarea{min-height:39px!important;padding:7px 10px!important;border:1px solid var(--air-line)!important;border-radius:9px!important;background:var(--air-panel-2)!important}
.profile-settings form input:focus,.profile-settings form textarea:focus{background:var(--air-panel-2)!important;border-color:var(--air-line)!important;box-shadow:none!important}
.profile-settings form textarea{height:58px!important;min-height:58px!important;max-height:115px!important;resize:vertical!important}
.profile-settings .handle-state{font-size:.7rem!important}
.settings-content h2{padding:13px 16px!important;font-size:.89rem!important}
.admin-layout{grid-template-columns:185px minmax(0,1fr)!important}
.admin-tabs{padding:10px 7px!important}
.admin-tabs>button{height:40px!important}
.admin-content{padding-left:18px!important;padding-right:18px!important}
.admin-content>.page-title{margin-left:-18px!important;margin-right:-18px!important;padding-left:18px!important;padding-right:18px!important}
.admin-content .surface,.service-health{padding:14px!important}
.stats .surface{min-height:86px!important;padding:10px!important}
.stats .surface svg{width:31px!important;height:31px!important}
.analytics-chart{height:190px!important}
.section-heading{min-height:49px!important}
.admin-page th{height:38px!important}
.admin-page td{height:52px!important}

/* The minimized call is a status-bar item, with a compact floating fallback on mobile. */
.connection{height:51px!important}
.connection .call-dock{height:50px!important}
.connection .call-dock-live{background:#40b884!important}
.connection .call-dock>button{border-radius:9px!important}
.call-topbar{height:56px!important}
.call-topbar button,.call-top-actions .call-chat-toggle{width:36px!important;height:36px!important}
.call-topbar button svg,.call-top-actions .call-chat-toggle svg{width:18px!important;height:18px!important}
.call-button{width:54px!important;height:54px!important;flex:none!important}
.call-button>svg{width:21px!important;height:21px!important}
.call-button>span{top:59px!important}
.call-actions{gap:12px!important}
.remote-video,.group-video{object-fit:contain!important}
.group-video-placeholder{width:100%!important;height:100%!important;min-height:140px!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:12px!important;background:radial-gradient(circle at 50% 45%,#2c4453,#172834 75%)!important;color:#eff6fa!important}
.group-video-placeholder .avatar{width:72px!important;height:72px!important;min-width:72px!important;font-size:1.5rem!important;box-shadow:0 0 0 8px #ffffff0b!important}
.group-video-placeholder small{color:#b8cbd8!important;font-size:.72rem!important}
.local-video-placeholder{position:absolute!important;top:72px!important;left:18px!important;width:min(24vw,280px)!important;height:min(27vh,210px)!important;z-index:10!important;display:grid!important;place-items:center!important;border:2px solid #ffffff2a!important;border-radius:17px!important;background:radial-gradient(circle at 50% 40%,#2e495a,#152631 78%)!important;box-shadow:0 12px 40px #0008!important;overflow:hidden!important}
.local-video-placeholder .avatar{width:68px!important;height:68px!important;min-width:68px!important;font-size:1.3rem!important}
.call-chat-panel{border-radius:14px!important}

@media(max-width:760px){
  .telegram-air{grid-template-columns:1fr!important;grid-template-rows:minmax(0,1fr) 64px!important}
  .telegram-air>.rail{width:100%!important}
  .pane-heading{height:58px!important;min-height:58px!important}
  .conversation .messages{padding:12px 9px 22px!important}
  .chat-header{gap:5px!important;padding:6px 8px!important}
  .chat-header .avatar{width:36px!important;height:36px!important;min-width:36px!important}
  .chat-header .peer-title{flex:1!important;min-width:0!important;overflow:hidden!important}
  .chat-header .peer-title b,.chat-header .peer-title small{display:block!important;max-width:100%!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
  .header-actions{flex:none!important;gap:0!important}
  .header-actions .icon-btn,.chat-header .icon-btn{width:35px!important;height:35px!important;min-width:35px!important}
  .header-actions .icon-btn svg,.chat-header .icon-btn svg{width:18px!important;height:18px!important}
  .bubble{max-width:85vw!important}
  .composer-area{padding:6px 7px calc(8px + env(safe-area-inset-bottom))!important}
  .composer .icon-btn,.composer>button:not(.send-btn){width:34px!important;min-width:34px!important}
  .composer .send-btn{width:39px!important;min-width:39px!important;height:39px!important}
  .modal{width:calc(100vw - 20px)!important;max-height:calc(100dvh - 20px)!important;scrollbar-gutter:auto!important}
  .profile-modal{width:calc(100vw - 20px)!important}
  .profile-quick-actions{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .settings-layout{display:flex!important;flex-direction:column!important;padding:9px!important}
  .settings-nav{position:relative!important;top:auto!important;max-width:100%!important}
  .admin-layout{display:flex!important;flex-direction:column!important}
  .admin-tabs{padding:6px!important}
  .admin-content{padding:0 10px 22px!important}
  .admin-content>.page-title{margin:0 -10px 10px!important;padding:10px!important}
  .call-actions{gap:8px!important;max-width:calc(100vw - 16px)!important}
  .call-button{width:45px!important;height:45px!important}
  .call-button>span{top:48px!important;font-size:.59rem!important}
  .call-button>svg{width:19px!important;height:19px!important}
  .call-dock{bottom:70px!important}
  .group-video-placeholder .avatar{width:58px!important;height:58px!important;min-width:58px!important}
  .local-video-placeholder{top:64px!important;left:9px!important;width:32vw!important;height:20vh!important;border-radius:12px!important}
  .local-video-placeholder .avatar{width:46px!important;height:46px!important;min-width:46px!important;font-size:1rem!important}
}
@media(max-width:360px){
  .chat-header .header-actions button[aria-label="جستجو در پیام‌ها"]{display:none!important}
  .chat-header .avatar{width:32px!important;height:32px!important;min-width:32px!important}
  .chat-header .peer-title b{font-size:.79rem!important}
  .composer .icon-btn,.composer>button:not(.send-btn){width:31px!important;min-width:31px!important}
  .composer .send-btn{width:37px!important;min-width:37px!important;height:37px!important}
  .composer textarea{padding-left:2px!important;padding-right:2px!important}
  .profile-modal>.modal-actions{grid-template-columns:1fr!important}
}
@media(max-width:420px){
  .settings-nav{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:4px!important;overflow:visible!important;padding:5px!important}
  .settings-nav>button{width:100%!important;min-width:0!important;height:39px!important;margin:0!important;padding:0 7px!important;grid-template-columns:18px minmax(0,1fr)!important;gap:5px!important;justify-items:stretch!important;text-align:right!important}
  .settings-nav>button svg:first-child{width:17px!important;height:17px!important}
  .settings-nav>button svg:last-child{display:none!important}
  .settings-nav>button span{display:block!important;min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;font-size:.68rem!important}
  .settings-nav>button.danger{grid-column:1/-1!important;margin:0!important}
}
@media(prefers-reduced-motion:reduce){.modal,.modal-backdrop,.search-field,.message-row{animation:none!important;transition:none!important}}
/* Settings: restrained surfaces, clear control states, and a usable mobile flow. */
.telegram-air > .settings-v2 {
  grid-column: 2 / -1 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  height: 100dvh !important;
  min-height: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  padding: 27px clamp(16px, 4vw, 56px) 65px !important;
  background: var(--air-bg) !important;
  direction: rtl;
  scrollbar-gutter: stable;
}
.settings-v2 > .page-title {
  max-width: 1040px !important;
  height: auto !important;
  margin: 0 auto 19px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}
.settings-v2 .settings-eyebrow {
  margin-bottom: 7px;
  color: var(--air-accent);
  font-size: .69rem;
  font-weight: 700;
}
.settings-v2 > .page-title h1 {
  margin: 0 0 4px !important;
  color: var(--air-text) !important;
  font-size: clamp(1.35rem, 2vw, 1.75rem) !important;
  font-weight: 750;
  letter-spacing: -.025em;
}
.settings-v2 > .page-title p {
  margin: 0 !important;
  color: var(--air-muted) !important;
  font-size: .8rem !important;
}
.settings-v2 .settings-layout {
  display: grid !important;
  grid-template-columns: 216px minmax(0, 1fr) !important;
  gap: 18px !important;
  max-width: 1040px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  align-items: start !important;
}
.settings-v2 .settings-nav {
  position: sticky !important;
  top: 18px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 9px !important;
  overflow: visible !important;
  border: 1px solid var(--air-line) !important;
  border-radius: 17px !important;
  background: var(--air-panel) !important;
  box-shadow: none !important;
}
.settings-v2 .settings-user {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0;
  margin: 0 0 9px !important;
  padding: 9px 8px 16px !important;
  border-bottom: 1px solid var(--air-line) !important;
}
.settings-v2 .settings-user .avatar { width: 38px !important; height: 38px !important; min-width: 38px !important; }
.settings-v2 .settings-user b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--air-text); font-size: .82rem; }
.settings-v2 .settings-user small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--air-muted); font-size: .68rem; }
.settings-v2 .settings-user-dot { width: 7px; height: 7px; flex: none !important; border-radius: 50%; background: #46b77a; box-shadow: 0 0 0 4px #46b77a18; }
.settings-v2 .settings-nav-label { padding: 2px 11px 6px; color: var(--air-muted); font-size: .64rem; font-weight: 700; }
.settings-v2 .settings-nav > button {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 42px !important;
  min-height: 42px !important;
  margin: 0 !important;
  padding: 0 11px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: transparent !important;
  color: var(--air-muted) !important;
  text-align: right !important;
  font-size: .78rem !important;
  transition: background .16s ease, color .16s ease !important;
}
.settings-v2 .settings-nav > button:hover { background: var(--air-panel-2) !important; color: var(--air-text) !important; }
.settings-v2 .settings-nav > button.selected { background: color-mix(in srgb, var(--air-accent) 12%, transparent) !important; color: var(--air-accent) !important; box-shadow: none !important; font-weight: 700; }
.settings-v2 .settings-nav > button.selected::before { content: ""; width: 3px; height: 18px; position: absolute; right: 0; border-radius: 3px; background: var(--air-accent); }
.settings-v2 .settings-nav > button { position: relative; }
.settings-v2 .settings-nav > button span { display: block !important; flex: 1; min-width: 0; text-align: right !important; }
.settings-v2 .settings-nav > button svg:first-child { width: 17px !important; height: 17px !important; flex: none; }
.settings-v2 .settings-nav > button svg:last-child:not(:first-child) { width: 14px !important; height: 14px !important; opacity: .5; }
.settings-v2 .settings-nav > button.danger { margin-top: 11px !important; border-top: 1px solid var(--air-line) !important; border-radius: 0 !important; color: #d36b72 !important; }
.settings-v2 .settings-content { display: flex !important; flex-direction: column !important; gap: 12px !important; width: 100% !important; min-width: 0 !important; }
.settings-v2 .settings-section-intro { display: flex; align-items: flex-start; gap: 11px; padding: 2px 2px 5px; animation: settingsEnter .2s ease both; }
.settings-v2 .settings-section-symbol { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 12px; background: color-mix(in srgb, var(--air-accent) 12%, transparent); color: var(--air-accent); }
.settings-v2 .settings-section-intro h2 { margin: 0 0 3px !important; padding: 0 !important; border: 0 !important; color: var(--air-text); font-size: 1.02rem !important; }
.settings-v2 .settings-section-intro p { margin: 0; color: var(--air-muted); font-size: .72rem; line-height: 1.7; }
@keyframes settingsEnter { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
.settings-v2 .settings-content .surface { width: 100%; overflow: hidden !important; border: 1px solid var(--air-line) !important; border-radius: 16px !important; background: var(--air-panel) !important; box-shadow: none !important; }
.settings-v2 .profile-settings .profile-intro {
  display: flex !important;
  align-items: center !important;
  gap: 15px !important;
  min-height: 112px !important;
  margin: 0 !important;
  padding: 17px 19px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--air-line) !important;
  border-radius: 0 !important;
  background: linear-gradient(115deg, color-mix(in srgb, var(--air-accent) 14%, var(--air-panel)), var(--air-panel) 80%) !important;
}
.settings-v2 .profile-settings .avatar-editor { width: 72px; flex: none; gap: 5px; }
.settings-v2 .profile-settings .avatar.large { width: 56px !important; height: 56px !important; min-width: 56px !important; }
.settings-v2 .avatar-editor > button { padding: 3px 0 !important; border: 0 !important; background: transparent !important; color: var(--air-accent) !important; font-size: .66rem !important; font-weight: 700; }
.settings-v2 .profile-intro > div:last-child { min-width: 0; }
.settings-v2 .profile-intro h2 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin: 0 0 3px !important; padding: 0 !important; border: 0 !important; font-size: 1.08rem !important; }
.settings-v2 .profile-intro p { margin: 0 0 6px !important; color: var(--air-muted) !important; font-size: .72rem !important; text-align: right; }
.settings-v2 .profile-intro small { display: inline-flex; padding: 3px 8px; border-radius: 10px; background: color-mix(in srgb, var(--air-accent) 11%, transparent); color: var(--air-accent) !important; font-size: .64rem !important; }
.settings-v2 .profile-settings form { display: flex !important; flex-direction: column !important; gap: 14px !important; padding: 18px 19px 19px !important; }
.settings-v2 .settings-form-intro { display: flex; flex-direction: column; gap: 3px; padding-bottom: 4px; }
.settings-v2 .settings-form-intro strong { color: var(--air-text); font-size: .82rem; }
.settings-v2 .settings-form-intro span { color: var(--air-muted); font-size: .69rem; }
.settings-v2 .profile-settings form .form-grid { gap: 12px !important; }
.settings-v2 .profile-settings form label { display: flex !important; flex-direction: column !important; gap: 6px !important; color: var(--air-text) !important; font-size: .75rem !important; font-weight: 650; }
.settings-v2 .profile-settings form input, .settings-v2 .profile-settings form textarea {
  width: 100% !important;
  min-height: 41px !important;
  padding: 9px 11px !important;
  border: 1px solid var(--air-line) !important;
  border-radius: 10px !important;
  background: var(--air-panel-2) !important;
  color: var(--air-text) !important;
  font-size: .82rem !important;
  font-weight: 400;
  transition: border-color .16s ease, background .16s ease !important;
}
.settings-v2 .profile-settings form input:focus, .settings-v2 .profile-settings form textarea:focus { border-color: var(--air-accent) !important; background: var(--air-panel-2) !important; box-shadow: none !important; }
.settings-v2 .profile-settings form textarea { height: 77px !important; min-height: 77px !important; max-height: 170px !important; line-height: 1.7; }
.settings-v2 .profile-settings .handle-state, .settings-v2 .settings-field-hint { color: var(--air-muted); font-size: .65rem !important; font-weight: 400; }
.settings-v2 .profile-settings .handle-state.available { color: #319b67; }
.settings-v2 .profile-settings .handle-state.taken, .settings-v2 .profile-settings .handle-state.invalid { color: #d26b72; }
.settings-v2 .settings-field-hint { align-self: flex-end; }
.settings-v2 .profile-settings .settings-save { display: flex !important; align-items: center !important; justify-content: flex-end !important; flex-wrap: wrap; gap: 8px; padding: 10px 0 0 !important; border-top: 1px solid var(--air-line); }
.settings-v2 .settings-unsaved { margin-left: auto; color: var(--air-muted); font-size: .67rem; }
.settings-v2 .settings-reset { border: 0 !important; background: transparent !important; color: var(--air-accent) !important; padding: 7px 8px !important; font-size: .71rem !important; }
.settings-v2 .settings-save .primary { min-height: 37px !important; padding: 0 13px !important; border-radius: 9px !important; font-size: .74rem !important; }
.settings-v2 .settings-save .primary:disabled { opacity: 1 !important; background: var(--air-panel-2) !important; color: var(--air-muted) !important; border: 1px solid var(--air-line) !important; cursor: default; }
.settings-v2 .settings-list > h2, .settings-v2 .access-summary > h2, .settings-v2 .settings-content .surface > h2 {
  display: flex !important; align-items: center !important; gap: 9px !important;
  min-height: 49px !important; margin: 0 !important; padding: 12px 17px !important;
  border-bottom: 1px solid var(--air-line) !important;
  color: var(--air-text) !important; font-size: .83rem !important;
}
.settings-v2 .settings-content .surface > h2 svg { color: var(--air-accent); }
.settings-v2 .settings-content .surface > h2.settings-subhead { min-height: 42px !important; margin-top: 4px !important; background: var(--air-panel-2); font-size: .75rem !important; }
.settings-v2 .setting-row { min-height: 64px !important; margin: 0 !important; padding: 12px 17px !important; border-bottom: 1px solid var(--air-line) !important; }
.settings-v2 .setting-row > span { min-width: 0; }
.settings-v2 .setting-row b { margin-bottom: 3px; color: var(--air-text); font-size: .76rem; }
.settings-v2 .setting-row small { color: var(--air-muted); font-size: .68rem; line-height: 1.6; }
.settings-v2 .setting-row select { width: clamp(120px, 29%, 170px) !important; min-height: 36px !important; margin: 0 12px 0 0 !important; padding: 6px 9px !important; border: 1px solid var(--air-line) !important; border-radius: 9px !important; background: var(--air-panel-2) !important; color: var(--air-text) !important; font-size: .73rem !important; }
.settings-v2 .settings-privacy-summary { display: flex; align-items: center; gap: 8px; margin: 12px 17px 16px; padding: 9px 11px; border-radius: 10px; background: color-mix(in srgb, var(--air-accent) 8%, transparent); color: var(--air-muted); font-size: .69rem; line-height: 1.6; }
.settings-v2 .settings-privacy-summary svg { flex: none; color: var(--air-accent); }
.settings-v2 .settings-data-disclosure { display: flex; align-items: flex-start; gap: 8px; margin: 0 17px 16px; color: var(--air-muted); font-size: .68rem; line-height: 1.75; }
.settings-v2 .settings-data-disclosure svg { flex: none; margin-top: 2px; color: var(--air-accent); }
.settings-v2 .blocked-row { min-height: 55px !important; }
.settings-v2 .blocked-user, .settings-v2 .device-row { margin: 0 !important; padding: 10px 17px !important; border-top: 0 !important; border-bottom: 1px solid var(--air-line) !important; }
.settings-v2 .blocked-user:last-child, .settings-v2 .device-row:last-child { border-bottom: 0 !important; }
.settings-v2 .blocked-user .avatar { width: 34px !important; height: 34px !important; min-width: 34px !important; }
.settings-v2 .blocked-user b, .settings-v2 .device-row b { color: var(--air-text); font-size: .75rem; }
.settings-v2 .blocked-user small, .settings-v2 .device-row small { color: var(--air-muted); font-size: .65rem; }
.settings-v2 .blocked-user button, .settings-v2 .device-row button { min-height: 31px; padding: 5px 9px; border: 1px solid var(--air-line); border-radius: 8px; background: var(--air-panel-2); color: var(--air-accent); font-size: .69rem; }
.settings-v2 .settings-list > .hint { margin: 12px 17px 17px !important; color: var(--air-muted) !important; font-size: .7rem !important; }
.settings-v2 .settings-section-note { margin: 0; padding: 11px 17px 0; color: var(--air-muted); font-size: .69rem; line-height: 1.6; }
.settings-v2 .settings-bottom-note { padding: 11px 17px 17px; border-top: 1px solid var(--air-line); }
.settings-v2 .theme-options { display: grid !important; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px !important; margin: 0 !important; padding: 12px 17px 17px !important; }
.settings-v2 .theme-options > button { display: grid !important; grid-template-columns: 1fr 17px 1fr; align-items: center; gap: 9px; padding: 8px !important; border: 1px solid var(--air-line) !important; border-radius: 12px !important; background: var(--air-panel) !important; color: var(--air-text) !important; text-align: right; }
.settings-v2 .theme-options > button.selected { border-color: var(--air-accent) !important; background: color-mix(in srgb, var(--air-accent) 6%, var(--air-panel)) !important; }
.settings-v2 .theme-options > button > svg { color: var(--air-accent); }
.settings-v2 .theme-options > button > span:last-child { display: flex; flex-direction: column; min-width: 0; font-size: .75rem; font-weight: 700; }
.settings-v2 .theme-options > button small { color: var(--air-muted); font-size: .63rem; font-weight: 400; white-space: nowrap; }
.settings-v2 .theme-preview { width: 68px !important; height: 52px !important; border: 1px solid var(--air-line) !important; border-radius: 8px !important; }
.settings-v2 .dark-preview { background: linear-gradient(90deg,#202c39 33%,#111b26 33%) !important; }
.settings-v2 .light-preview { background: linear-gradient(90deg,#eff4f7 33%,#fff 33%) !important; }
.settings-v2 .toggle-row input[type="checkbox"] { appearance: none; position: relative; flex: none; width: 36px !important; height: 21px !important; min-height: 21px !important; margin: 0 12px 0 0 !important; border: 1px solid var(--air-line); border-radius: 999px; background: var(--air-panel-2); cursor: pointer; transition: background .18s ease; }
.settings-v2 .toggle-row input[type="checkbox"]::before { content: ""; position: absolute; top: 2px; left: 2px; width: 15px; height: 15px; border-radius: 50%; background: var(--air-muted); transition: left .18s ease, background .18s ease; }
.settings-v2 .toggle-row input[type="checkbox"]:checked { border-color: var(--air-accent); background: var(--air-accent); }
.settings-v2 .toggle-row input[type="checkbox"]:checked::before { left: 17px; background: #fff; }
.settings-v2 .settings-choice-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; padding: 11px 17px; border-bottom: 1px solid var(--air-line); }
.settings-v2 .settings-choice-row > span { display: flex; flex-direction: column; min-width: 0; }
.settings-v2 .settings-choice-row b { color: var(--air-text); font-size: .76rem; }
.settings-v2 .settings-choice-row small { color: var(--air-muted); font-size: .68rem; line-height: 1.6; }
.settings-v2 .settings-size-options { display: inline-flex; gap: 3px; flex: none; padding: 3px; border: 1px solid var(--air-line); border-radius: 10px; background: var(--air-panel-2); }
.settings-v2 .settings-size-options button { min-height: 30px; padding: 4px 10px; border: 0; border-radius: 7px; background: transparent; color: var(--air-muted); font-size: .69rem; }
.settings-v2 .settings-size-options button.selected { background: var(--air-panel); color: var(--air-accent); box-shadow: 0 1px 4px #00000013; font-weight: 700; }
.settings-v2 .settings-size-options button:focus-visible { outline: 2px solid var(--air-accent) !important; outline-offset: 1px; }
.settings-v2 .access-cards { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; padding: 13px 16px 16px; }
.settings-v2 .access-cards > div { min-width: 0; min-height: 69px; border: 1px solid var(--air-line); border-radius: 10px; background: var(--air-panel-2); }
.settings-v2 .access-cards svg { width: 18px; height: 18px; flex: none; color: var(--air-accent); }
.settings-v2 .access-cards b { color: var(--air-text); font-size: .72rem; }
.settings-v2 .access-cards small { overflow: hidden; text-overflow: ellipsis; font-size: .62rem; }
.settings-v2 .device-list { margin: 0 !important; }
.settings-v2 .device-icon { width: 34px; height: 34px; border-radius: 10px; background: color-mix(in srgb, var(--air-accent) 11%, transparent); color: var(--air-accent); }
.settings-v2 .settings-content .surface:has(.device-list) > .hint { margin: 12px 17px !important; color: var(--air-muted); font-size: .7rem; }
.settings-v2 .settings-content .surface:has(input[type="password"]) { padding-bottom: 17px !important; }
.settings-v2 .settings-content .surface:has(input[type="password"]) > .hint { margin: 12px 17px !important; }
.settings-v2 .settings-content .surface:has(input[type="password"]) > .form-grid { margin: 0 17px 13px; }
.settings-v2 .settings-content .surface:has(input[type="password"]) > .primary { margin: 0 17px; font-size: .74rem; }
.settings-v2 .settings-content .surface:has(input[type="password"]) label { display: flex; flex-direction: column; gap: 5px; color: var(--air-text); font-size: .73rem; }
.settings-v2 .settings-content .surface:has(input[type="password"]) input { min-height: 39px !important; border: 1px solid var(--air-line) !important; border-radius: 9px !important; background: var(--air-panel-2) !important; color: var(--air-text) !important; }
.settings-logout-modal > p { margin: 0; padding: 17px 18px; color: var(--air-muted); line-height: 1.8; font-size: .79rem; }
.settings-logout-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 0 18px 18px; }
.settings-logout-actions button { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border: 1px solid var(--air-line); border-radius: 9px; background: var(--air-panel-2); color: var(--air-text); font-size: .75rem; }
.settings-logout-actions .danger { border-color: #d9616b55; background: #d9616b16; color: #d9616b; }

/* The local demo-login buttons must remain legible in the light theme. */
[data-theme="light"] .login-card .dev-accounts { background: var(--air-panel-2) !important; border: 1px solid var(--air-line) !important; }
[data-theme="light"] .login-card .dev-accounts b { color: var(--air-text) !important; }
[data-theme="light"] .login-card .dev-accounts p { color: var(--air-muted) !important; }
[data-theme="light"] .login-card .dev-accounts button { background: var(--air-panel) !important; border: 1px solid var(--air-line) !important; color: var(--air-text) !important; }
[data-theme="light"] .login-card .dev-accounts button:hover { border-color: var(--air-accent) !important; color: var(--air-accent) !important; }

/* Device-specific reading preferences. These rules affect the conversation itself. */
html[data-chat-text="small"] { --chat-message-font-size: .82rem; }
html[data-chat-text="medium"] { --chat-message-font-size: .92rem; }
html[data-chat-text="large"] { --chat-message-font-size: 1.05rem; }
html[data-chat-text] .telegram-air .conversation .message p,
html[data-chat-text] .telegram-air .conversation .bubble p { font-size: var(--chat-message-font-size) !important; line-height: 1.65 !important; }
html[data-reduced-motion="true"] *,
html[data-reduced-motion="true"] *::before,
html[data-reduced-motion="true"] *::after {
  animation-duration: .01ms !important;
  animation-delay: 0ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: .01ms !important;
  scroll-behavior: auto !important;
}

@media (max-width: 760px) {
  .telegram-air > .settings-v2 { grid-column: 1 !important; grid-row: 1 !important; width: 100% !important; height: 100% !important; min-width: 0 !important; padding: 14px 11px calc(86px + env(safe-area-inset-bottom)) !important; scrollbar-gutter: auto; }
  .settings-v2 > .page-title { margin-bottom: 13px !important; }
  .settings-v2 > .page-title h1 { font-size: 1.28rem !important; }
  .settings-v2 .settings-layout { display: flex !important; flex-direction: column !important; gap: 12px !important; }
  .settings-v2 .settings-nav { position: relative !important; top: auto !important; display: grid !important; grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 5px !important; overflow: visible !important; padding: 5px !important; }
  .settings-v2 .settings-user, .settings-v2 .settings-nav-label { display: none !important; }
  .settings-v2 .settings-nav > button { display: inline-flex !important; width: 100% !important; min-width: 0 !important; height: 36px !important; min-height: 36px !important; padding: 0 8px !important; gap: 6px !important; white-space: nowrap !important; }
  .settings-v2 .settings-nav > button span { display: inline !important; width: auto !important; min-width: 0 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; font-size: .69rem !important; }
  .settings-v2 .settings-nav > button svg:last-child:not(:first-child) { display: none !important; }
  .settings-v2 .settings-nav > button.danger { grid-column: 1 / -1 !important; justify-content: center !important; margin: 0 !important; border: 0 !important; border-radius: 9px !important; background: #d36b720e !important; }
  .settings-v2 .settings-nav > button.danger span { flex: 0 1 auto !important; }
  .settings-v2 .settings-nav > button.selected::before { display: none; }
  .settings-v2 .profile-settings form .form-grid { grid-template-columns: 1fr !important; }
  .settings-v2 .access-cards { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .settings-v2 .access-cards > div:last-child { grid-column: 1 / -1; }
  .settings-v2 .settings-choice-row { align-items: flex-start; flex-direction: column; gap: 8px; }
  .settings-v2 .settings-size-options { width: 100%; }
  .settings-v2 .settings-size-options button { flex: 1; }
}
@media (max-width: 420px) {
  .telegram-air > .settings-v2 { padding-right: 9px !important; padding-left: 9px !important; }
  .settings-v2 .settings-section-intro p { font-size: .67rem; }
  .settings-v2 .profile-settings .profile-intro { min-height: 96px !important; padding: 12px !important; gap: 9px !important; }
  .settings-v2 .profile-settings .avatar-editor { width: 60px; }
  .settings-v2 .profile-settings .avatar.large { width: 49px !important; height: 49px !important; min-width: 49px !important; }
  .settings-v2 .profile-settings form { padding: 13px !important; }
  .settings-v2 .theme-options { gap: 7px !important; padding: 10px !important; }
  .settings-v2 .theme-options > button { grid-template-columns: 1fr auto; gap: 5px; padding: 7px !important; }
  .settings-v2 .theme-preview { grid-column: 1 / -1; width: 100% !important; height: 38px !important; }
  .settings-v2 .theme-options > button small { white-space: normal; }
  .settings-v2 .setting-row { padding: 10px 12px !important; }
  .settings-v2 .setting-row select { width: 124px !important; margin-left: 6px !important; font-size: .68rem !important; }
  .settings-v2 .access-cards { padding: 10px !important; }
  .settings-v2 .access-cards > div { padding: 8px !important; }
}
@media (prefers-reduced-motion: reduce) { .settings-v2 .settings-section-intro { animation: none; } }
.admin-page{--admin-line:var(--air-line);--admin-panel:var(--air-panel);--admin-soft:var(--air-panel-2);--admin-text:var(--air-text);--admin-muted:var(--air-muted);--admin-accent:var(--air-accent)}
.admin-page .admin-content>.page-title{margin-bottom:12px!important}
.admin-page .admin-content>.page-title h1{font-size:1.12rem!important;letter-spacing:0!important}
.admin-page .admin-content>.page-title p{font-size:.73rem!important;margin-top:2px!important}
.admin-page .service-health{min-height:58px!important;padding:10px 14px!important;margin-bottom:10px!important}
.admin-page .service-health>svg{width:17px!important;height:17px!important}
.admin-page .admin-stat-grid{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:8px!important;margin-bottom:10px!important}
.admin-page .admin-stat-grid .surface{min-height:72px!important;padding:9px 11px!important;grid-template-columns:30px 1fr!important;column-gap:8px!important}
.admin-page .admin-stat-grid .surface svg{width:29px!important;height:29px!important;padding:6px!important;border-radius:9px!important}
.admin-page .admin-stat-grid .surface strong{font-size:1.06rem!important;line-height:1!important}
.admin-page .admin-stat-grid .surface span{font-size:.66rem!important;line-height:1.3!important}
.admin-page .analytics-chart{height:160px!important}
.admin-page .admin-audit-surface .audit-list{max-height:300px;overflow-y:auto;scrollbar-width:thin}
.admin-entity-list{border:1px solid var(--admin-line);border-radius:13px;overflow:hidden;background:var(--admin-panel)}
.admin-entity-row{width:100%;min-height:66px;display:grid;grid-template-columns:38px minmax(135px,1.3fr) minmax(110px,1fr) 85px 18px;gap:12px;align-items:center;padding:10px 14px;border:0;border-bottom:1px solid var(--admin-line);border-radius:0;background:transparent;color:var(--admin-text);text-align:right;cursor:pointer;transition:background .16s ease,transform .16s ease}
.admin-entity-row:last-child{border-bottom:0}
.admin-entity-row:hover,.admin-entity-row:focus-visible{background:color-mix(in srgb,var(--admin-accent) 7%,var(--admin-panel));outline:0}
.admin-entity-row:active{transform:scale(.997)}
.admin-entity-row>.avatar{width:36px!important;height:36px!important;font-size:.78rem!important}
.admin-entity-main{min-width:0;display:flex;flex-direction:column;gap:3px}
.admin-entity-main>b{font-size:.79rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.admin-entity-main>small,.admin-entity-meta{font-size:.68rem;color:var(--admin-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.admin-entity-row>.status-pill{justify-self:start}
.admin-entity-row>svg{color:var(--admin-muted)}
.admin-page .section-heading{gap:12px!important;flex-wrap:wrap}
.admin-page .section-heading>h2,.admin-page .section-heading h2{font-size:.91rem!important}
.admin-page .section-heading .search-field{height:37px!important;min-height:37px!important;border-radius:10px!important}
.admin-page .section-heading .search-field input{font-size:.73rem!important}
.admin-page .surface{min-width:0}
.admin-page .admin-audit-page .admin-mini-list{max-height:70vh;overflow-y:auto}
.admin-detail{display:flex;flex-direction:column;gap:13px;padding:0 2px 4px;color:var(--air-text)}
.modal:has(.admin-detail){width:min(94vw,620px)!important;max-height:calc(100dvh - 30px)!important;overflow-y:auto!important}
.admin-detail h2{margin:0;font-size:1rem}.admin-detail h3{margin:6px 0 0;font-size:.79rem;color:var(--air-text)}
.admin-detail-hero{display:flex;gap:13px;align-items:center;padding:13px;border:1px solid var(--air-line);border-radius:13px;background:var(--air-panel-2)}
.admin-detail-hero>div{display:flex;flex-direction:column;align-items:flex-start;gap:5px;min-width:0}.admin-detail-hero small{color:var(--air-muted);font-size:.72rem}
.admin-detail-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
.admin-detail-facts>div{min-width:0;display:flex;flex-direction:column;gap:6px;padding:11px;border:1px solid var(--air-line);border-radius:10px;background:var(--air-panel)}
.admin-detail-facts small{font-size:.66rem;color:var(--air-muted)}.admin-detail-facts b{font-size:.72rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.admin-detail-actions{display:flex;flex-wrap:wrap;gap:7px}.admin-detail-actions button{min-height:38px;padding:0 12px;border:1px solid var(--air-line);border-radius:9px;background:var(--air-panel-2);color:var(--air-text);font-size:.72rem;cursor:pointer}.admin-detail-actions button:hover{border-color:var(--air-accent);color:var(--air-accent)}
.admin-mini-list{display:flex;flex-direction:column;border:1px solid var(--air-line);border-radius:10px;overflow:hidden}.admin-mini-list>div,.admin-mini-list>button{min-height:42px;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:8px 11px;border:0;border-bottom:1px solid var(--air-line);border-radius:0;background:var(--air-panel);color:var(--air-text);text-align:right;font-size:.72rem}.admin-mini-list>:last-child{border-bottom:0}.admin-mini-list>button{cursor:pointer}.admin-mini-list>button:hover{background:var(--air-panel-2)}.admin-mini-list small,.admin-mini-list time{color:var(--air-muted);font-size:.66rem}.admin-mini-list p{padding:10px;margin:0;color:var(--air-muted);font-size:.71rem}.admin-mini-list span{min-width:0;overflow-wrap:anywhere}
.admin-member-list{display:flex;flex-direction:column;gap:5px}.admin-member-list>div{display:grid;grid-template-columns:34px minmax(80px,1fr) auto 90px auto;align-items:center;gap:8px;padding:7px 9px;border:1px solid var(--air-line);border-radius:10px}.admin-member-list .avatar{width:32px!important;height:32px!important}.admin-member-list span{display:flex;flex-direction:column;min-width:0}.admin-member-list b{font-size:.71rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.admin-member-list small{font-size:.63rem;color:var(--air-muted)}.admin-member-list select{min-height:31px!important;padding:4px 7px!important;font-size:.67rem!important}.admin-member-list button{font-size:.67rem;min-height:32px}.admin-member-list button.danger,.admin-report-message .danger{color:#df5b65}
.admin-report-message{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:9px 0;padding:8px;border-radius:10px;background:var(--air-panel-2)}.admin-report-message blockquote{width:100%;margin:0;padding:10px;border-right:3px solid var(--air-accent);background:var(--air-panel);border-radius:8px;overflow-wrap:anywhere;font-size:.76rem}
.admin-pagination{display:flex;justify-content:center;align-items:center;gap:12px;margin-top:12px}.admin-pagination button{min-height:34px;padding:0 12px;border:1px solid var(--air-line);border-radius:9px;background:var(--air-panel-2);color:var(--air-text);font-size:.7rem}.admin-pagination button:disabled{opacity:.45}.admin-pagination span{font-size:.7rem;color:var(--air-muted)}
.modal:has(.admin-chat-review){width:min(94vw,620px)!important;max-height:calc(100dvh - 30px)!important;overflow-y:auto!important}.admin-chat-review{display:flex;flex-direction:column;gap:7px}.admin-chat-review>.hint{margin:2px 0 6px}.admin-chat-review article{padding:10px 12px;border:1px solid var(--air-line);border-radius:10px;background:var(--air-panel-2)}.admin-chat-review article header{display:flex;justify-content:space-between;gap:8px;font-size:.71rem}.admin-chat-review article time{color:var(--air-muted);font-size:.64rem}.admin-chat-review article p{margin:6px 0 0;font-size:.75rem;line-height:1.7;overflow-wrap:anywhere}
.admin-message-actions{display:flex;justify-content:flex-end;margin-top:8px;padding-top:7px;border-top:1px solid var(--air-line)}.admin-message-actions .danger{font-size:.67rem;color:#df5b65}
.admin-attachment-actions{display:flex;align-items:center;flex-wrap:wrap;gap:7px;margin-top:8px;padding-top:8px;border-top:1px solid var(--air-line);font-size:.69rem}.admin-attachment-actions span{min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;color:var(--air-muted)}.admin-attachment-actions button,.admin-attachment-actions a{min-height:30px;padding:5px 9px;border:1px solid var(--air-line);border-radius:8px;background:var(--air-panel);color:var(--air-accent);font-size:.68rem;text-decoration:none;cursor:pointer}.admin-attachment-preview{display:flex;flex-direction:column;align-items:center;gap:12px}.admin-attachment-preview img,.admin-attachment-preview video{display:block;max-width:100%;max-height:60dvh;object-fit:contain;border-radius:10px}.admin-attachment-preview audio{width:100%}.admin-attachment-preview>.primary{display:inline-flex;align-items:center;justify-content:center;min-width:140px;padding:8px 14px;text-decoration:none;font-size:.73rem}
@media(max-width:700px){
  .admin-page .admin-layout{align-items:stretch!important}
  .admin-page .admin-content{width:100%!important;max-width:100%!important;min-width:0!important;box-sizing:border-box!important}
  .admin-page .admin-tabs{height:auto!important;min-height:55px!important;max-height:108px!important;display:flex!important;flex-wrap:wrap!important;justify-content:center!important;overflow:visible!important;gap:3px!important;padding:5px 7px!important}
  .admin-page .admin-tabs>button{width:auto!important;min-width:58px!important;height:43px!important;padding:3px 5px!important;display:flex!important;flex-direction:column!important;gap:2px!important;justify-content:center!important;font-size:.59rem!important;white-space:nowrap!important}
  .admin-page .admin-tabs>button svg{width:15px!important;height:15px!important}.admin-page .admin-tabs>button i{position:static!important;font-size:.58rem!important}
  .admin-page .admin-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:6px!important}.admin-page .admin-stat-grid .surface{min-height:67px!important}
  .admin-page .admin-content>.page-title{height:61px!important;min-height:61px!important}.admin-page .admin-content>.page-title h1{font-size:.94rem!important}.admin-page .admin-header-actions small{display:none!important}
  .admin-entity-row{min-height:62px;grid-template-columns:34px minmax(0,1fr) auto 14px;gap:7px;padding:8px 9px}.admin-entity-row>.avatar{width:33px!important;height:33px!important}.admin-entity-main>b{font-size:.74rem}.admin-entity-main>small{font-size:.63rem}.admin-entity-meta{display:none}.admin-entity-row>.status-pill{font-size:.61rem!important;padding:3px 6px!important}
  .admin-detail-facts{grid-template-columns:repeat(2,minmax(0,1fr))}.admin-member-list>div{grid-template-columns:31px minmax(0,1fr) 82px auto;gap:5px}.admin-member-list>div>small{display:none}.admin-member-list select{width:82px}.admin-detail-actions button{flex:1 1 auto}
  .modal:has(.admin-detail){width:calc(100vw - 18px)!important;max-height:calc(100dvh - 18px)!important}
}
@media(max-width:360px){.admin-page .admin-tabs>button{min-width:54px!important;font-size:.55rem!important}.admin-member-list>div{grid-template-columns:29px minmax(0,1fr) 72px auto}.admin-member-list select{width:72px}}
@media(max-width:420px){.admin-detail-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.admin-detail-actions button{width:100%;min-height:40px;padding:6px 8px;text-align:center}}
/* 0.12: production login and call polish */
.login-card{width:min(94vw,560px)!important;padding:28px 34px!important;background:color-mix(in srgb,#20263a 88%,transparent)!important;border:1px solid #ffffff16!important;border-radius:28px!important;box-shadow:0 28px 90px #05071166!important;max-height:calc(100dvh - 32px)!important;overflow-y:auto!important}
.login-card h1{font-size:2rem!important;line-height:1.48!important;margin-top:8px!important}
.login-card .eyebrow{margin-bottom:12px!important}
.login-card>p{max-width:46ch!important;line-height:1.8!important;margin:10px 0 14px!important}
.login-card .auth-switch{margin:12px 0 10px!important}
.email-auth{gap:17px!important;margin-top:20px!important}
.email-auth label{gap:8px!important;font-size:.82rem!important}
.email-auth input,.email-auth .auth-input{min-height:54px!important;border-radius:16px!important}
.email-auth .auth-input{display:flex!important;align-items:center!important;padding:0 14px!important;border:1px solid #ffffff18!important;background:#0b1220aa!important;box-shadow:inset 0 1px 0 #ffffff08!important}
.email-auth .auth-input input{min-height:50px!important;height:50px!important;border:0!important;background:transparent!important;padding-inline:10px!important;box-shadow:none!important;outline:0!important;flex:1!important;min-width:0!important}
.email-auth .primary.wide{min-height:54px!important;border-radius:16px!important;font-weight:800!important;margin-top:3px!important}
.password-input>button{width:38px!important;height:38px!important;min-width:38px!important;display:grid!important;place-items:center!important;border:0!important;border-radius:12px!important;background:transparent!important;color:var(--air-muted)!important;padding:0!important}
.password-input>button:hover{background:var(--air-hover)!important;color:var(--air-text)!important}
.auth-channel{padding:5px!important;border-radius:16px!important;margin-top:18px!important}
.auth-channel button{min-height:43px!important;border-radius:12px!important}
.login-points{margin:16px 0!important}.dev-accounts{margin-top:16px!important}

.call-topbar{min-height:58px!important;padding-inline:20px!important}
.call-top-actions{display:flex!important;align-items:center!important;gap:8px!important}
.call-ping{height:30px;display:inline-flex;align-items:center;padding:0 10px;border-radius:999px;font-size:.68rem;font-weight:750;background:color-mix(in srgb,var(--air-panel) 88%,transparent);border:1px solid var(--air-line);direction:rtl;white-space:nowrap}
.call-ping.good{color:#62d99b}.call-ping.medium{color:#f6c85f}.call-ping.poor{color:#ff7c89}.call-ping.unknown{color:var(--air-muted)}
.connection-ping{font-size:.58rem;font-variant-numeric:tabular-nums;direction:ltr;padding:2px 6px;border-radius:999px;background:var(--air-hover)}.connection-ping.good{color:#55cf91}.connection-ping.medium{color:#e7b956}.connection-ping.poor{color:#ff7784}
.call-actions{display:flex!important;align-items:center!important;justify-content:center!important;gap:12px!important;padding:16px max(16px,env(safe-area-inset-right)) calc(18px + env(safe-area-inset-bottom))!important}
.call-button{width:68px!important;min-width:68px!important;height:68px!important;border-radius:22px!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:5px!important;padding:0!important}
.call-button svg{display:block!important;margin:0!important;flex:none!important}
.call-button span{font-size:.65rem!important;line-height:1!important}
.call-overlay .remote-video,.call-overlay .group-video{object-fit:contain!important;background:#071018!important;width:100%!important;height:100%!important}
.group-video-tile{overflow:hidden!important;min-height:0!important}
.call-chat-panel{max-height:min(56vh,520px)!important;overflow:hidden!important}
.call-chat-messages{overflow-y:auto!important;overscroll-behavior:contain!important}

@media(max-width:700px){
  .login{padding:16px!important;align-items:flex-start!important;overflow-y:auto!important}
  .login-card{width:100%!important;max-width:520px!important;padding:25px 20px calc(25px + env(safe-area-inset-bottom))!important;border-radius:24px!important;margin:auto!important}
  .login-card h1{font-size:clamp(1.65rem,8vw,2.2rem)!important;line-height:1.35!important}
  .email-auth input,.email-auth .auth-input{min-height:52px!important}
  .call-topbar{padding-inline:12px!important}
  .call-ping{padding:0 8px;font-size:.61rem}
  .call-actions{gap:8px!important;overflow-x:auto!important;justify-content:safe center!important}
  .call-button{width:61px!important;min-width:61px!important;height:61px!important;border-radius:19px!important}
  .call-overlay.video-call .call-copy{pointer-events:none!important}
}
/* Anonymous 1.0 — compact Blurple interface
   This file is the final visual contract. It intentionally overrides the
   earlier compatibility layers while leaving their behaviour untouched. */
:root {
  --air-accent: #5865f2;
  --air-accent-strong: #4752c4;
  --air-green: #35ed7e;
  --air-magenta: #ec48bd;
  --air-bg: #f3f4fb;
  --air-panel: #ffffff;
  --air-panel-2: #f0f1f9;
  --air-line: #e4e6f2;
  --air-text: #171933;
  --air-muted: #747895;
  --air-bubble-in: #ffffff;
  --air-bubble-out: #e9eaff;
  --air-shadow: 0 10px 35px rgba(36, 39, 90, .10);
  --v1-canvas: #0a0d3a;
  --v1-panel: #14183e;
  --v1-raised: #1e2353;
  --v1-focus: rgba(88, 101, 242, .22);
}

[data-theme="dark"] {
  --air-bg: #0a0d24;
  --air-panel: #141832;
  --air-panel-2: #1d2247;
  --air-line: #2a315e;
  --air-text: #f7f7ff;
  --air-muted: #a4a8c4;
  --air-bubble-in: #1b2047;
  --air-bubble-out: #303875;
  --air-shadow: 0 16px 44px rgba(2, 3, 18, .28);
}

*, *::before, *::after { box-sizing: border-box; }
html, body, #root { width: 100%; min-width: 0; height: 100%; }
body { margin: 0; background: var(--air-bg) !important; }
button, input, textarea, select { max-width: 100%; }
button, a, input, textarea, select { -webkit-tap-highlight-color: transparent; }
img, video, canvas { max-width: 100%; }
svg { flex: 0 0 auto; }

/* App shell */
.telegram-air {
  grid-template-columns: 68px 328px minmax(0, 1fr) !important;
  background:
    radial-gradient(circle at 76% -20%, rgba(236,72,189,.10), transparent 34%),
    radial-gradient(circle at 55% 120%, rgba(88,101,242,.13), transparent 38%),
    var(--air-bg) !important;
}
.telegram-air > .rail {
  width: 68px !important;
  padding: 10px 7px !important;
  background: color-mix(in srgb, var(--air-panel) 97%, var(--air-accent)) !important;
}
.rail .brand {
  width: 40px !important; height: 40px !important;
  border-radius: 13px !important;
  background: linear-gradient(145deg, #7180ff, #5865f2 52%, #8e55ed) !important;
  box-shadow: 0 8px 24px rgba(88,101,242,.28) !important;
}
.rail button, .rail .icon-button {
  width: 48px !important; min-width: 48px !important; height: 44px !important;
  border-radius: 12px !important;
}
.rail button.active { color: var(--air-accent) !important; background: rgba(88,101,242,.12) !important; }
.rail button.active::before { right: -7px !important; height: 20px !important; background: var(--air-accent) !important; }

.telegram-air > .list-pane { background: color-mix(in srgb, var(--air-panel) 98%, var(--air-accent)) !important; }
.pane-heading { height: 61px !important; min-height: 61px !important; padding: 9px 13px !important; }
.pane-heading h1 { font-size: 1.05rem !important; }
.pane-actions .icon-button { width: 34px !important; height: 34px !important; border-radius: 10px !important; }
.search-field {
  height: 36px !important; min-height: 36px !important;
  margin: 0 10px 9px !important; border: 1px solid transparent !important;
  border-radius: 12px !important; background: var(--air-panel-2) !important;
  transform: none !important;
}
.search-field:focus-within {
  border-color: rgba(88,101,242,.32) !important;
  background: color-mix(in srgb, var(--air-panel-2) 92%, var(--air-accent)) !important;
  box-shadow: 0 0 0 3px rgba(88,101,242,.07) !important;
}
.filters { padding: 0 10px 8px !important; gap: 4px !important; }
.filters button, .mini-filters button { height: 28px !important; padding: 0 10px !important; border-radius: 9px !important; }
.filters button.selected, .mini-filters button.selected { background: rgba(88,101,242,.12) !important; color: var(--air-accent) !important; }
.chat-list { padding: 5px 6px 60px !important; }
.chat-row {
  height: 62px !important; min-height: 62px !important;
  grid-template-columns: 44px minmax(0,1fr) auto !important;
  gap: 9px !important; padding: 7px 8px !important; border-radius: 12px !important;
}
.chat-row .avatar { width: 44px !important; height: 44px !important; min-width: 44px !important; }
.chat-row.selected { background: linear-gradient(135deg, #5865f2, #6d5ce7) !important; }
.row-copy, .row-copy > *, .row-meta { min-width: 0 !important; }

/* Connection chip doubles as the compact call dock. */
.connection {
  height: 48px !important; padding: 0 11px !important;
  background: color-mix(in srgb, var(--air-panel) 94%, transparent) !important;
  backdrop-filter: blur(18px) saturate(130%) !important;
}
.connection-status {
  min-width: 0; display: inline-flex !important; align-items: center; gap: 7px;
  height: 30px; padding: 0 9px; border-radius: 10px;
  color: var(--air-muted); background: var(--air-panel-2);
}
.connection-status > span:first-child {
  width: 7px !important; height: 7px !important; border-radius: 50%;
  box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 12%, transparent);
}
.connection-status .online { background: #35c884 !important; color: #35c884; }
.connection-status .offline { background: #e9a64c !important; color: #e9a64c; }
.connection-status .connecting-dot { animation: v1Pulse 1.2s ease-in-out infinite; }
.connection-ping { padding: 1px 5px !important; background: transparent !important; border-right: 1px solid var(--air-line); }
@keyframes v1Pulse { 50% { opacity: .35; transform: scale(.78); } }

/* Conversation */
.chat-header { height: 58px !important; min-height: 58px !important; padding: 6px 12px !important; }
.chat-header .avatar { width: 39px !important; height: 39px !important; min-width: 39px !important; }
.header-actions .icon-button, .chat-header .icon-button { width: 36px !important; height: 36px !important; border-radius: 11px !important; }
.messages {
  padding: 16px max(16px, 6vw) 28px !important;
  background-color: var(--air-bg) !important;
  background-image:
    linear-gradient(145deg, transparent 72%, rgba(88,101,242,.045)),
    radial-gradient(circle at 16px 16px, rgba(88,101,242,.09) 1px, transparent 1.4px),
    radial-gradient(circle at 55px 45px, rgba(236,72,189,.055) 1px, transparent 1.35px) !important;
  background-size: 100% 100%, 68px 68px, 82px 82px !important;
  overscroll-behavior: contain;
}
.message, .bubble {
  max-width: min(66%, 620px) !important; min-width: 74px !important;
  padding: 7px 10px 17px !important;
  border: 1px solid color-mix(in srgb, var(--air-line) 76%, transparent) !important;
  border-radius: 14px 14px 5px 14px !important;
  box-shadow: 0 2px 7px rgba(28,31,76,.07) !important;
}
.mine .message, .mine .bubble {
  border-color: rgba(88,101,242,.12) !important;
  border-radius: 14px 14px 14px 5px !important;
  background: linear-gradient(135deg, var(--air-bubble-out), color-mix(in srgb, var(--air-bubble-out) 92%, var(--air-accent))) !important;
}
.message p, .bubble p { overflow-wrap: anywhere !important; word-break: break-word; }
.message-meta { right: 9px !important; bottom: 3px !important; }
.reactions { left: 5px !important; }
.reactions button { height: 24px !important; min-width: 31px !important; padding: 0 6px !important; }
.composer-area { padding: 7px max(10px,6vw) 8px !important; }
.composer {
  min-height: 48px !important; padding: 3px 4px !important; gap: 1px !important;
  border-radius: 15px !important; box-shadow: 0 8px 30px rgba(26,29,72,.10) !important;
}
.composer textarea { min-height: 40px !important; padding: 10px 7px !important; }
.composer .icon-button, .composer > button { width: 39px !important; min-width: 39px !important; height: 39px !important; border-radius: 12px !important; }
.composer .send-btn {
  border-radius: 12px !important;
  background: linear-gradient(145deg, #7180ff, #5865f2) !important;
  box-shadow: 0 5px 15px rgba(88,101,242,.28) !important;
}
.pinned-message, .group-call-banner { border: 1px solid var(--air-line) !important; border-radius: 11px !important; box-shadow: none !important; }

/* Settings */
.telegram-air > .settings-page { background: transparent !important; }
.settings-page > .page-title {
  height: 72px !important; padding: 12px 22px !important;
  background: color-mix(in srgb, var(--air-panel) 96%, transparent) !important;
  backdrop-filter: blur(18px) !important;
}
.settings-layout { max-width: 960px !important; margin: 20px auto !important; gap: 14px !important; padding: 0 16px 28px !important; grid-template-columns: 224px minmax(0,1fr) !important; }
.settings-v2 .settings-nav {
  top: 14px !important; padding: 7px !important; border-radius: 15px !important;
  background: color-mix(in srgb, var(--air-panel) 98%, var(--air-accent)) !important;
  box-shadow: none !important;
}
.settings-v2 .settings-user { min-height: 65px !important; padding: 9px !important; }
.settings-v2 .settings-nav > button { height: 40px !important; min-height: 40px !important; border-radius: 9px !important; }
.settings-v2 .settings-nav > button.selected { background: rgba(88,101,242,.12) !important; color: var(--air-accent) !important; }
.settings-v2 .settings-content { gap: 10px !important; }
.settings-v2 .settings-section-symbol { width: 36px !important; height: 36px !important; border-radius: 11px !important; }
.settings-v2 .settings-content .surface { border-radius: 14px !important; box-shadow: none !important; }
.settings-v2 .profile-settings .profile-intro {
  min-height: 98px !important; padding: 14px 17px !important;
  background:
    radial-gradient(circle at 12% 20%, rgba(236,72,189,.10), transparent 38%),
    linear-gradient(120deg, rgba(88,101,242,.14), transparent 72%) !important;
}
.settings-v2 .profile-settings form { gap: 12px !important; padding: 15px 17px 17px !important; }
.settings-v2 .profile-settings form input,
.settings-v2 .profile-settings form textarea,
.settings-v2 .settings-content input:not([type="checkbox"]),
.settings-v2 .settings-content select {
  border-radius: 9px !important; background: var(--air-panel-2) !important;
}
.settings-v2 .setting-row { min-height: 58px !important; padding: 10px 15px !important; }
.settings-v2 .settings-content .surface > h2 { min-height: 45px !important; padding: 10px 15px !important; }
.settings-v2 .settings-choice-row { min-height: 58px !important; padding: 9px 15px !important; }
.settings-v2 .theme-options { padding: 10px 15px 14px !important; }
.settings-v2 .theme-preview { width: 56px !important; height: 43px !important; }

/* Modal system: every dialog scrolls inside the viewport and nothing can escape. */
.modal-backdrop {
  padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom)) !important;
  overflow: hidden !important;
  background: rgba(5, 7, 31, .76) !important;
  backdrop-filter: blur(10px) saturate(115%) !important;
}
.modal {
  width: min(94vw, 480px) !important;
  max-width: calc(100vw - 24px) !important;
  max-height: calc(100dvh - 24px) !important;
  padding: 0 16px 16px !important;
  border: 1px solid color-mix(in srgb, var(--air-line) 86%, var(--air-accent)) !important;
  border-radius: 16px !important;
  overflow-x: hidden !important; overflow-y: auto !important;
  overscroll-behavior: contain !important; scrollbar-gutter: stable;
  box-shadow: 0 28px 90px rgba(3,4,24,.36) !important;
  animation: v1Dialog .2s cubic-bezier(.2,.8,.2,1) both !important;
}
.modal > * { max-width: 100%; min-width: 0; }
.modal > header {
  position: sticky !important; top: 0 !important; z-index: 20 !important;
  height: 52px !important; min-height: 52px !important;
  margin: 0 -16px 12px !important; padding: 0 14px !important;
  background: color-mix(in srgb, var(--air-panel) 94%, transparent) !important;
  backdrop-filter: blur(18px) !important;
}
.modal > header h2 { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .9rem !important; }
.modal > header .icon-btn { width: 32px !important; min-width: 32px !important; height: 32px !important; border-radius: 9px !important; }
.modal input, .modal textarea, .modal select { width: 100%; border-radius: 9px !important; background: var(--air-panel-2) !important; }
.modal .stack, .modal .member-list, .modal .search-results { min-width: 0; max-width: 100%; }
.modal .stack > *, .modal .member-list > *, .modal .search-results > * { min-width: 0; max-width: 100%; }
.profile-modal { width: min(94vw, 520px) !important; padding: 0 0 12px !important; }
.profile-modal > header { margin: 0 0 0 !important; }
.profile-modal .profile-hero { min-height: 96px !important; padding: 14px 16px !important; overflow: hidden !important; }
.profile-modal .profile-cover {
  background:
    radial-gradient(circle at 18% 10%, rgba(236,72,189,.20), transparent 42%),
    linear-gradient(125deg, rgba(88,101,242,.22), transparent 70%) !important;
}
.profile-modal > .modal-actions { gap: 6px !important; margin: 8px 14px 12px !important; }
.profile-modal > .modal-actions > button { min-width: 0 !important; min-height: 38px !important; overflow: hidden; }
.profile-modal .member-list { margin: 0 14px 10px !important; }
.profile-modal .member-list > div { min-width: 0 !important; overflow: hidden !important; }
.profile-modal .member-identity { min-width: 0 !important; overflow: hidden !important; }
.profile-modal .member-identity span { min-width: 0 !important; overflow: hidden !important; }
.profile-modal .member-identity b, .profile-modal .member-identity small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@keyframes v1Dialog { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }

/* Calls: media stays fully visible and all controls remain centred. */
.call-overlay, .call-overlay.video-call {
  padding: 58px 16px 94px !important;
  background:
    radial-gradient(circle at 20% 0%, rgba(236,72,189,.18), transparent 34%),
    radial-gradient(circle at 82% 18%, rgba(88,101,242,.32), transparent 42%),
    linear-gradient(155deg, #0a0d3a, #080a24 70%) !important;
}
.call-topbar {
  height: 56px !important; min-height: 56px !important; padding: 0 14px !important;
  background: rgba(10,13,58,.72) !important; border-bottom: 1px solid rgba(255,255,255,.09) !important;
  backdrop-filter: blur(18px) !important;
}
.call-topbar button, .call-top-actions .call-chat-toggle { width: 35px !important; height: 35px !important; border-radius: 11px !important; }
.call-top-actions { min-width: 0; align-items: center !important; }
.call-ping { height: 28px !important; background: rgba(255,255,255,.08) !important; border-color: rgba(255,255,255,.09) !important; }
.remote-video {
  inset: 56px 0 88px !important; width: 100% !important; height: calc(100% - 144px) !important;
  object-fit: contain !important; object-position: center !important; background: #050616 !important;
}
.local-video {
  top: 68px !important; left: 14px !important; width: min(23vw,250px) !important; height: min(24vh,190px) !important;
  object-fit: contain !important; background: #090b26 !important; border-radius: 14px !important;
}
.group-video-grid {
  inset: 56px 0 88px !important; padding: 7px !important; gap: 7px !important;
  grid-template-columns: repeat(auto-fit, minmax(min(260px,100%),1fr)) !important;
  background: #050616 !important;
}
.group-video-tile { min-width: 0 !important; min-height: 0 !important; border-radius: 13px !important; }
.group-video, .call-overlay video { object-fit: contain !important; object-position: center !important; }
.call-actions {
  bottom: 14px !important; max-width: calc(100vw - 20px) !important; gap: 9px !important;
  align-items: center !important;
}
.call-button {
  position: relative !important; width: 58px !important; min-width: 58px !important; height: 58px !important;
  border-radius: 18px !important; display: flex !important; flex-direction: column !important;
  align-items: center !important; justify-content: center !important; gap: 4px !important;
  background: rgba(255,255,255,.12) !important; backdrop-filter: blur(14px) !important;
}
.call-button > svg { position: static !important; transform: none !important; margin: 0 !important; width: 20px !important; height: 20px !important; }
.call-button > span { position: static !important; font-size: .59rem !important; line-height: 1 !important; }
.call-button.off { background: #f5f6ff !important; color: #171933 !important; }
.call-button.hangup { background: #ef5664 !important; color: #fff !important; }
.call-button.accept { background: #35c884 !important; color: #071e14 !important; }
.call-chat-panel {
  top: 66px !important; bottom: 86px !important; width: min(350px,34vw) !important;
  border-radius: 15px !important; background: rgba(12,15,48,.90) !important;
}
.call-chat-panel input { font-size: 16px !important; }
.call-participant { min-width: 0 !important; overflow: hidden !important; }
.call-participant span { min-width: 0 !important; overflow: hidden; }
.call-participant b, .call-participant small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.connection .call-dock { height: 48px !important; background: transparent !important; }

/* Universal admin overflow guards; the dedicated admin layer keeps its layout. */
.admin-page, .admin-layout, .admin-content, .admin-content > *, .admin-page section { min-width: 0 !important; }
.admin-page table { width: 100%; table-layout: fixed; }
.admin-page th, .admin-page td { overflow-wrap: anywhere; }
.admin-entity-row, .admin-mini-list > *, .admin-detail-facts > * { min-width: 0 !important; }
.admin-entity-main, .admin-entity-main > *, .admin-entity-meta { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 760px) {
  /* 16px prevents Safari/Chrome mobile from zooming focused fields. */
  input:not([type="checkbox"]):not([type="radio"]), textarea, select,
  .composer textarea, .search-field input, .modal input, .modal textarea, .modal select,
  .settings-content input, .settings-content textarea, .settings-content select,
  .admin-page input, .admin-page textarea, .admin-page select {
    font-size: 16px !important;
  }
  /* Mobile shell: navigation owns a real top row and the active page gets
     only the remaining height. This prevents the composer from falling
     below the viewport. */
  .telegram-air {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: 58px minmax(0, 1fr) !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 100dvh !important;
    overflow: hidden !important;
  }
  .telegram-air > .rail {
    position: relative !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    inset: auto !important;
    width: 100% !important;
    height: 58px !important;
    padding: 5px 8px !important;
    border-top: 0 !important;
    border-bottom: 1px solid var(--air-line) !important;
  }
  .rail button, .rail .icon-button { min-width: 44px !important; height: 44px !important; }
  .telegram-air > .list-pane,
  .telegram-air > .conversation,
  .telegram-air > .settings-page,
  .telegram-air > .settings-v2,
  .telegram-air > .admin-page {
    grid-column: 1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
  }
  .pane-heading { height: 58px !important; min-height: 58px !important; }
  .search-field { min-height: 42px !important; height: 42px !important; }
  .chat-row { min-height: 64px !important; height: 64px !important; }
  .chat-header { height: 56px !important; min-height: 56px !important; padding: 5px 7px !important; }
  .header-actions { gap: 0 !important; }
  .header-actions .icon-button, .chat-header .icon-button { width: 44px !important; min-width: 44px !important; height: 44px !important; }
  .messages { padding: 10px 7px 24px !important; }
  .message, .bubble { max-width: 88% !important; }
  .composer-area { padding: 5px 5px calc(6px + env(safe-area-inset-bottom)) !important; }
  .composer { min-height: 50px !important; border-radius: 15px !important; }
  .composer .icon-button, .composer > button { width: 42px !important; min-width: 42px !important; height: 42px !important; }

  .telegram-air > .settings-v2 { padding: 10px 8px calc(12px + env(safe-area-inset-bottom)) !important; overflow-x: hidden !important; }
  .settings-v2 > .page-title { height: auto !important; min-height: 64px !important; padding: 10px 5px !important; background: transparent !important; border: 0 !important; }
  .settings-v2 .settings-layout { width: 100% !important; padding: 0 !important; margin: 0 !important; gap: 9px !important; }
  .settings-v2 .settings-nav {
    display: flex !important; flex-wrap: nowrap !important; gap: 4px !important;
    width: 100% !important; overflow-x: auto !important; overflow-y: hidden !important;
    scrollbar-width: none; padding: 4px !important;
  }
  .settings-v2 .settings-nav::-webkit-scrollbar { display: none; }
  .settings-v2 .settings-nav > button {
    flex: 0 0 auto !important; width: auto !important; min-width: max-content !important;
    height: 44px !important; min-height: 44px !important; padding: 0 11px !important;
  }
  .settings-v2 .settings-nav > button svg:last-child:not(:first-child) { display: none !important; }
  .settings-v2 .settings-content { width: 100% !important; min-width: 0 !important; }
  .settings-v2 .settings-section-intro { padding: 3px !important; }
  .settings-v2 .profile-settings .profile-intro { padding: 13px !important; }
  .settings-v2 .profile-settings form { padding: 13px !important; }
  .settings-v2 .profile-settings form .form-grid { grid-template-columns: 1fr !important; }
  .settings-v2 .setting-row, .settings-v2 .settings-choice-row { gap: 9px !important; padding: 10px 12px !important; }
  .settings-v2 .setting-row select { width: 134px !important; min-height: 44px !important; margin: 0 !important; }
  .settings-v2 .theme-options { grid-template-columns: 1fr !important; padding: 10px 12px !important; }
  .settings-v2 .theme-options > button { min-height: 58px !important; }
  .settings-v2 .settings-size-options { max-width: 100%; overflow-x: auto; }
  .settings-v2 .settings-size-options button { min-height: 38px !important; }

  .modal-backdrop { padding: max(8px, env(safe-area-inset-top)) 8px max(8px, env(safe-area-inset-bottom)) !important; }
  .modal, .profile-modal {
    width: calc(100vw - 16px) !important; max-width: calc(100vw - 16px) !important;
    max-height: calc(100dvh - 16px) !important; border-radius: 15px !important;
  }
  .modal > header { height: 50px !important; min-height: 50px !important; }
  .modal button, .modal a[role="button"] { min-height: 42px; }
  .profile-modal > .modal-actions { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
  .profile-modal > .modal-actions > button { min-height: 44px !important; }
  .profile-modal .member-list > div { flex-wrap: wrap !important; }

  .call-overlay, .call-overlay.video-call { padding: 54px 7px 84px !important; }
  .call-topbar { height: 54px !important; padding: 0 7px !important; }
  .call-topbar > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .call-top-actions { gap: 3px !important; }
  .call-topbar button, .call-top-actions .call-chat-toggle { width: 38px !important; min-width: 38px !important; height: 38px !important; }
  .call-ping { display: none !important; }
  .remote-video { inset: 54px 0 80px !important; height: calc(100% - 134px) !important; }
  .local-video { top: 63px !important; left: 8px !important; width: 34vw !important; height: 19vh !important; border-radius: 11px !important; }
  .group-video-grid {
    inset: 54px 0 80px !important; padding: 4px !important; gap: 4px !important;
    grid-template-columns: repeat(2,minmax(0,1fr)) !important; grid-auto-rows: minmax(120px,1fr) !important;
  }
  .call-actions { bottom: 10px !important; gap: 6px !important; overflow-x: auto !important; justify-content: safe center !important; }
  .call-button { width: 50px !important; min-width: 50px !important; height: 50px !important; border-radius: 15px !important; }
  .call-button > svg { width: 18px !important; height: 18px !important; }
  .call-button > span { font-size: .54rem !important; }
  .call-chat-panel { inset: 60px 6px 79px !important; width: auto !important; max-height: none !important; }
  .call-participants { left: 7px !important; right: 7px !important; width: auto !important; }
  .connection .call-dock { height: 48px !important; }
}

@media (max-width: 390px) {
  .composer .poll-btn { display: none !important; }
  .profile-modal > .modal-actions { grid-template-columns: 1fr !important; }
  .settings-v2 .setting-row, .settings-v2 .settings-choice-row { align-items: flex-start !important; flex-direction: column !important; }
  .settings-v2 .setting-row select, .settings-v2 .settings-size-options { width: 100% !important; }
  .call-button { width: 46px !important; min-width: 46px !important; height: 46px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .connection-status .connecting-dot, .modal, .message-row { animation: none !important; }
}
/* Call surface is isolated here so the app theme cannot break media geometry. */
.call-overlay.call-overlay{
  position:fixed!important;inset:0!important;z-index:3000!important;width:100vw!important;height:100dvh!important;
  min-width:0!important;min-height:0!important;padding:60px 16px 92px!important;border:0!important;border-radius:0!important;
  overflow:hidden!important;color:#f7f8ff!important;background:
    radial-gradient(circle at 12% 12%,rgba(88,101,242,.32),transparent 34%),
    radial-gradient(circle at 88% 85%,rgba(236,72,189,.18),transparent 38%),#090d28!important;
  isolation:isolate!important;box-sizing:border-box!important;
}
.call-overlay.call-overlay *{box-sizing:border-box;min-width:0}
.call-overlay .call-topbar{
  position:absolute!important;z-index:30!important;inset:0 0 auto 0!important;height:60px!important;padding:0 14px!important;
  display:flex!important;align-items:center!important;justify-content:space-between!important;gap:12px!important;
  border-bottom:1px solid rgba(255,255,255,.09)!important;background:rgba(9,13,40,.82)!important;
  backdrop-filter:blur(18px) saturate(135%)!important;
}
.call-topbar>span{display:flex;align-items:center;gap:8px;font-size:.78rem;font-weight:750;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.call-topbar>span>i{width:7px;height:7px;border-radius:50%;background:#35ed7e;box-shadow:0 0 0 5px rgba(53,237,126,.1),0 0 18px rgba(53,237,126,.55);animation:call-live 1.8s ease-in-out infinite}
.call-top-actions{display:flex!important;align-items:center!important;gap:6px!important;flex:none!important}
.call-overlay .call-top-actions button{width:34px!important;height:34px!important;min-width:34px!important;padding:0!important;display:grid!important;place-items:center!important;border:1px solid rgba(255,255,255,.08)!important;border-radius:11px!important;background:rgba(255,255,255,.08)!important;color:#fff!important}
.call-overlay .call-top-actions button:hover{background:rgba(255,255,255,.14)!important}
.call-overlay .call-ping{height:28px!important;padding:0 9px!important;border:1px solid rgba(255,255,255,.09)!important;border-radius:999px!important;background:rgba(255,255,255,.065)!important;font-size:.64rem!important}
.call-ping.good{color:#68efa1!important}.call-ping.medium{color:#ffd56f!important}.call-ping.poor{color:#ff8290!important}.call-ping.unknown{color:#aeb5d1!important}

.call-overlay .remote-video{
  position:absolute!important;inset:60px 0 86px!important;width:100%!important;height:calc(100% - 146px)!important;
  object-fit:contain!important;object-position:center!important;background:#050719!important;z-index:1!important;
}
.call-overlay .remote-video-placeholder{
  position:absolute!important;z-index:2!important;inset:60px 0 86px!important;display:flex!important;flex-direction:column!important;
  align-items:center!important;justify-content:center!important;gap:14px!important;background:radial-gradient(circle,#20285d 0,#0b1033 58%,#070a22 100%)!important;
}
.remote-video-placeholder .avatar{width:92px!important;height:92px!important;min-width:92px!important;font-size:1.7rem!important;box-shadow:0 0 0 10px rgba(255,255,255,.045)!important}
.remote-video-placeholder small{color:#b7bdd6;font-size:.72rem}
.call-overlay .local-video,.call-overlay .local-video-placeholder{
  position:absolute!important;z-index:12!important;top:74px!important;left:16px!important;width:min(220px,24vw)!important;height:min(150px,23vh)!important;
  border:1px solid rgba(255,255,255,.17)!important;border-radius:16px!important;background:#080b20!important;box-shadow:0 16px 45px rgba(0,0,0,.42)!important;overflow:hidden!important;
}
.call-overlay .local-video{object-fit:contain!important;object-position:center!important}
.call-overlay .local-video-placeholder{display:grid!important;place-items:center!important;background:radial-gradient(circle,#27306d,#111636)!important}
.call-overlay .local-video-placeholder .avatar{width:58px!important;height:58px!important;min-width:58px!important}

.call-overlay .group-video-grid{
  position:absolute!important;z-index:1!important;inset:60px 0 86px!important;padding:8px!important;display:grid!important;
  grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))!important;grid-auto-rows:minmax(180px,1fr)!important;
  gap:7px!important;overflow:auto!important;overscroll-behavior:contain!important;background:#06091f!important;
}
.call-overlay .group-video-tile{position:relative!important;min-height:0!important;border:1px solid rgba(255,255,255,.075)!important;border-radius:15px!important;overflow:hidden!important;background:#0d1333!important}
.call-overlay .group-video,.call-overlay .group-video-placeholder{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:contain!important;object-position:center!important}
.call-overlay .group-video-placeholder{display:grid!important;place-items:center!important;background:radial-gradient(circle,#242d66,#101533 72%)!important}
.call-overlay .group-video-placeholder .avatar{width:72px!important;height:72px!important;min-width:72px!important}
.call-overlay .group-video-tile>span{position:absolute!important;z-index:4!important;right:9px!important;bottom:8px!important;max-width:calc(100% - 18px)!important;padding:4px 8px!important;border-radius:8px!important;background:rgba(4,7,20,.7)!important;font-size:.67rem!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;backdrop-filter:blur(8px)!important}

.call-overlay .call-copy{position:relative!important;z-index:8!important;width:min(100%,460px)!important;margin:clamp(40px,10vh,100px) auto 0!important;text-align:center!important;pointer-events:none!important}
.call-overlay.video-call .call-copy{position:absolute!important;right:18px!important;top:74px!important;width:auto!important;margin:0!important;text-align:right!important}
.call-overlay.video-call .call-copy>.avatar,.call-overlay.video-call .call-copy>h2{display:none!important}
.call-overlay .call-copy h2{margin:18px 0 5px!important;font-size:1.15rem!important}.call-overlay .call-copy p{margin:0!important;color:#b7bdd6!important;font-size:.76rem!important}
.call-overlay .call-participants{
  position:absolute!important;z-index:16!important;top:72px!important;right:14px!important;width:min(250px,31vw)!important;max-height:calc(100dvh - 180px)!important;
  margin:0!important;padding:5px!important;display:flex!important;flex-direction:column!important;flex-wrap:nowrap!important;gap:4px!important;overflow:auto!important;
}
.call-overlay.video-call .call-participants{right:auto!important;left:14px!important;top:232px!important;width:min(220px,24vw)!important}
.call-overlay .call-participant{width:100%!important;min-width:0!important;min-height:45px!important;padding:5px 7px!important;display:grid!important;grid-template-columns:32px minmax(0,1fr) 18px!important;align-items:center!important;gap:7px!important;border:1px solid rgba(255,255,255,.07)!important;border-radius:12px!important;background:rgba(11,16,45,.74)!important;backdrop-filter:blur(12px)!important}
.call-overlay .call-participant .avatar{width:32px!important;height:32px!important;min-width:32px!important;font-size:.7rem!important}.call-participant span{overflow:hidden!important}.call-participant b,.call-participant small{display:block!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}.call-participant b{font-size:.68rem!important}.call-participant small{font-size:.58rem!important;color:#adb4cf!important}

.call-overlay .call-actions{
  position:absolute!important;z-index:40!important;left:50%!important;bottom:max(15px,env(safe-area-inset-bottom))!important;transform:translateX(-50%)!important;
  width:max-content!important;max-width:calc(100vw - 20px)!important;margin:0!important;padding:7px!important;display:flex!important;align-items:center!important;justify-content:center!important;flex-wrap:nowrap!important;gap:8px!important;
  border:1px solid rgba(255,255,255,.09)!important;border-radius:20px!important;background:rgba(9,13,40,.76)!important;box-shadow:0 16px 50px rgba(0,0,0,.35)!important;backdrop-filter:blur(18px)!important;
}
.call-overlay .call-button{
  position:relative!important;width:48px!important;min-width:48px!important;height:48px!important;padding:0!important;display:grid!important;place-items:center!important;
  border:0!important;border-radius:15px!important;background:rgba(255,255,255,.1)!important;color:#fff!important;font-size:0!important;cursor:pointer!important;transition:transform .16s ease,background .16s ease!important;
}
.call-overlay .call-button:hover{transform:translateY(-2px)!important;background:rgba(255,255,255,.17)!important}.call-overlay .call-button:disabled{cursor:wait!important;opacity:.45!important;transform:none!important}
.call-overlay .call-button svg{width:20px!important;height:20px!important;display:block!important;margin:0!important}.call-overlay .call-button span{position:absolute!important;top:54px!important;left:50%!important;transform:translateX(-50%)!important;width:max-content!important;font-size:.58rem!important;color:#c6cbe0!important;line-height:1!important}
.call-overlay .call-button.off{background:#f1f3fb!important;color:#171c42!important}.call-overlay .call-button.active{background:#5865f2!important;color:#fff!important}.call-overlay .call-button.accept{background:#35c978!important;color:#061a10!important}.call-overlay .call-button.hangup{background:#e94f64!important;color:#fff!important}

.call-overlay .call-chat-panel{position:absolute!important;z-index:50!important;top:68px!important;left:12px!important;bottom:92px!important;width:min(340px,calc(100vw - 24px))!important;max-height:none!important;display:grid!important;grid-template-rows:44px minmax(0,1fr) 48px!important;overflow:hidden!important;border:1px solid rgba(255,255,255,.11)!important;border-radius:16px!important;background:rgba(13,18,50,.94)!important;box-shadow:0 24px 70px rgba(0,0,0,.45)!important;backdrop-filter:blur(20px)!important}
.call-chat-panel header{padding:0 12px!important;display:flex!important;align-items:center!important;justify-content:space-between!important;border-bottom:1px solid rgba(255,255,255,.08)!important}.call-chat-panel header b{font-size:.75rem!important}.call-chat-panel header button{width:30px!important;height:30px!important;border-radius:9px!important;background:rgba(255,255,255,.07)!important;color:#fff!important}
.call-chat-messages{min-height:0!important;padding:9px!important;overflow:auto!important}.call-chat-messages>div{width:fit-content!important;max-width:90%!important;margin:5px 0!important;padding:7px 9px!important;border-radius:11px!important;background:rgba(255,255,255,.075)!important}.call-chat-messages b,.call-chat-messages small{display:block!important}.call-chat-messages b{font-size:.7rem!important}.call-chat-messages small,.call-chat-messages time{font-size:.56rem!important;color:#aeb5d1!important}
.call-chat-panel form{height:48px!important;padding:5px 7px!important;display:grid!important;grid-template-columns:minmax(0,1fr) 36px!important;gap:5px!important;border-top:1px solid rgba(255,255,255,.08)!important}.call-chat-panel form input{width:100%!important;height:36px!important;padding:0 11px!important;border:0!important;border-radius:11px!important;outline:0!important;background:rgba(255,255,255,.07)!important;color:#fff!important;font-size:.75rem!important}.call-chat-panel form button{width:36px!important;height:36px!important;border-radius:11px!important;background:#5865f2!important;color:#fff!important}

.call-dock.call-dock{overflow:hidden!important}.call-dock.call-dock:focus-visible{outline:2px solid #5865f2!important;outline-offset:-2px!important}.call-dock.call-dock audio{display:none!important}
.call-leave-backdrop{z-index:4100!important}.call-leave-sheet{border-radius:18px!important}.call-leave-sheet button{min-height:42px!important;border-radius:11px!important}
@keyframes call-live{50%{opacity:.62;box-shadow:0 0 0 8px rgba(53,237,126,0),0 0 22px rgba(53,237,126,.2)}}

@media(max-width:760px){
  .call-overlay.call-overlay{padding:54px 7px 88px!important}
  .call-overlay .call-topbar{height:54px!important;padding:0 8px!important}.call-topbar>span{font-size:.7rem!important}.call-overlay .call-ping{display:none!important}.call-overlay .call-top-actions button{width:33px!important;height:33px!important;min-width:33px!important}
  .call-overlay .remote-video,.call-overlay .remote-video-placeholder{inset:54px 0 80px!important;height:calc(100% - 134px)!important}
  .call-overlay .local-video,.call-overlay .local-video-placeholder{top:63px!important;left:8px!important;width:31vw!important;height:19vh!important;min-height:96px!important;border-radius:12px!important}.call-overlay .local-video-placeholder .avatar{width:42px!important;height:42px!important;min-width:42px!important}
  .call-overlay .group-video-grid{inset:54px 0 82px!important;padding:4px!important;gap:4px!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;grid-auto-rows:minmax(140px,1fr)!important}.call-overlay .group-video-tile{border-radius:11px!important}.call-overlay .group-video-placeholder .avatar{width:52px!important;height:52px!important;min-width:52px!important}
  .call-overlay .call-copy{margin-top:clamp(28px,8vh,64px)!important}.call-overlay.video-call .call-copy{top:62px!important;right:9px!important}.call-overlay .call-copy h2{font-size:1rem!important}.call-overlay .call-copy>.avatar{width:76px!important;height:76px!important;min-width:76px!important}
  .call-overlay .call-participants{top:auto!important;right:7px!important;left:7px!important;bottom:91px!important;width:auto!important;max-height:58px!important;padding:2px!important;flex-direction:row!important;overflow-x:auto!important;overflow-y:hidden!important}.call-overlay.video-call .call-participants{top:auto!important;right:7px!important;left:7px!important;bottom:91px!important;width:auto!important}.call-overlay .call-participant{width:150px!important;min-width:150px!important;min-height:50px!important}
  .call-overlay .call-actions{bottom:max(10px,env(safe-area-inset-bottom))!important;padding:6px!important;gap:6px!important;border-radius:17px!important}.call-overlay .call-button{width:44px!important;min-width:44px!important;height:44px!important;border-radius:13px!important}.call-overlay .call-button svg{width:19px!important;height:19px!important}.call-overlay .call-button span{top:48px!important;font-size:.55rem!important}
  .call-overlay .call-chat-panel{top:60px!important;right:7px!important;left:7px!important;bottom:82px!important;width:auto!important}.call-chat-panel form input{font-size:16px!important}
  .remote-video-placeholder .avatar{width:78px!important;height:78px!important;min-width:78px!important}
}
@media(max-width:360px){.call-overlay .call-topbar>span{max-width:110px!important}.call-overlay .call-actions{gap:4px!important}.call-overlay .call-button{width:42px!important;min-width:42px!important;height:42px!important}.call-overlay .group-video-grid{grid-template-columns:1fr!important}.call-overlay .call-participants{display:none!important}}
@media(prefers-reduced-motion:reduce){.call-topbar>span>i{animation:none!important}.call-overlay .call-button{transition:none!important}}
/* 1.1 interaction and responsive polish */
html[dir="rtl"], body, #root { direction: rtl; }
.telegram-air, .login, .public-landing, .modal-backdrop { direction: rtl !important; text-align: right; }
.telegram-air { direction: ltr !important; }
.telegram-air > * { direction: rtl !important; }

/* Network state lives in unused heading space and no longer consumes a row. */
.pane-actions { display:flex !important; align-items:center !important; }
.pane-network { height:27px; min-width:0; padding:0 7px; display:inline-flex; align-items:center; gap:5px; border:1px solid var(--air-line); border-radius:9px; background:var(--air-panel-2); color:var(--air-muted); font-size:.61rem; direction:ltr; white-space:nowrap; }
.pane-network .connection-signal { width:7px; height:7px; border-radius:50%; display:block; }
.pane-network .online { background:#35c884; box-shadow:0 0 0 3px color-mix(in srgb,#35c884 15%,transparent); }
.pane-network .offline { background:#e9a64c; box-shadow:0 0 0 3px color-mix(in srgb,#e9a64c 15%,transparent); }
.connection { height:0 !important; min-height:0 !important; padding:0 !important; border:0 !important; background:transparent !important; overflow:visible !important; }
.connection:has(#connection-dock:not(:empty)) { height:48px !important; border-top:1px solid var(--air-line) !important; background:color-mix(in srgb,var(--air-panel) 94%,transparent) !important; }
#connection-dock:not(:empty) { position:absolute; inset:0; }
.chat-list { padding-bottom:8px !important; }
.list-pane:has(#connection-dock:not(:empty)) .chat-list { padding-bottom:54px !important; }

/* Public landing */
.public-landing { min-height:100dvh; overflow:auto; color:#f6f7ff; background:radial-gradient(circle at 12% 12%,rgba(118,87,255,.24),transparent 29%),radial-gradient(circle at 88% 35%,rgba(44,166,255,.18),transparent 27%),#090c25; font-family:inherit; }
.landing-nav { width:min(1180px,calc(100% - 32px)); height:70px; margin:auto; display:flex; align-items:center; justify-content:space-between; }
.landing-logo { display:flex; align-items:center; gap:9px; color:#fff; text-decoration:none; }
.landing-logo img { width:34px; height:34px; border-radius:11px; box-shadow:0 8px 24px rgba(88,101,242,.3); }
.landing-logo b { font-size:.92rem; }
.landing-login,.landing-primary { border:0; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:8px; }
.landing-login { height:38px; padding:0 14px; border:1px solid rgba(255,255,255,.14); border-radius:11px; background:rgba(255,255,255,.06); color:#fff; font-size:.74rem; }
.landing-hero { width:min(1180px,calc(100% - 32px)); min-height:calc(100dvh - 170px); margin:auto; padding:55px 0 70px; display:grid; grid-template-columns:minmax(320px,.82fr) minmax(460px,1.18fr); align-items:center; gap:64px; }
.landing-copy { max-width:540px; }
.landing-kicker { display:inline-flex; align-items:center; gap:7px; color:#b9c0e2; font-size:.72rem; }
.landing-kicker>span { width:7px; height:7px; border-radius:50%; background:#45dd94; box-shadow:0 0 0 5px rgba(69,221,148,.12); }
.landing-copy h1 { margin:20px 0 16px; font-size:clamp(2.45rem,5.4vw,5.1rem); line-height:1.07; letter-spacing:-.055em; }
.landing-copy h1 em { color:#7885ff; font-style:normal; }
.landing-copy>p { max-width:480px; margin:0; color:#adb5d7; font-size:.96rem; line-height:1.9; }
.landing-actions { margin-top:27px; display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.landing-primary { height:46px; padding:0 18px; border-radius:13px; color:#fff; background:linear-gradient(135deg,#6d7cff,#5865f2); box-shadow:0 13px 34px rgba(88,101,242,.3); font-weight:700; }
.landing-actions>span { display:flex; align-items:center; gap:7px; color:#aeb6d9; font-size:.69rem; }
.landing-preview { height:470px; min-width:0; display:grid; grid-template-columns:54px 190px minmax(0,1fr); overflow:hidden; transform:perspective(1200px) rotateY(-4deg) rotateX(1deg); border:1px solid rgba(255,255,255,.1); border-radius:24px; background:#141832; box-shadow:0 40px 100px rgba(0,0,0,.4); }
.preview-sidebar { padding:13px 8px; display:flex; flex-direction:column; align-items:center; gap:13px; border-left:1px solid rgba(255,255,255,.07); background:#11152e; }
.preview-sidebar i { width:30px; height:30px; border-radius:10px; background:#252a50; }
.preview-sidebar .preview-logo { margin-bottom:13px; background:linear-gradient(135deg,#7180ff,#5865f2); }
.preview-list { padding:15px 8px; border-left:1px solid rgba(255,255,255,.07); }
.preview-search { height:30px; margin-bottom:13px; border-radius:9px; background:#232847; }
.preview-list>div { height:56px; padding:7px; display:flex; align-items:center; gap:8px; border-radius:11px; }
.preview-list>div.active { background:#5865f2; }
.preview-list i,.preview-chat header i { width:36px; height:36px; flex:none; border-radius:50%; background:#31375e; }
.preview-list span,.preview-chat header span { flex:1; display:grid; gap:6px; }
.preview-list b,.preview-list small,.preview-chat header b,.preview-chat header small { display:block; height:6px; border-radius:4px; background:#42486b; }
.preview-list small,.preview-chat header small { width:62%; opacity:.6; }
.preview-chat { min-width:0; display:grid; grid-template-rows:57px minmax(0,1fr) 62px; background:radial-gradient(circle at 30% 30%,rgba(88,101,242,.12),transparent 35%),#0d112b; }
.preview-chat header { padding:10px 13px; display:flex; align-items:center; gap:9px; border-bottom:1px solid rgba(255,255,255,.07); background:#171b38; }
.preview-chat section { padding:28px 22px; display:flex; flex-direction:column; justify-content:flex-end; gap:10px; }
.preview-chat section p { width:54%; height:38px; margin:0; border-radius:13px 13px 4px 13px; background:#1d2347; }
.preview-chat section p:nth-child(2) { width:68%; align-self:flex-start; background:#303875; border-radius:13px 13px 13px 4px; }
.preview-chat section p:nth-child(3) { width:44%; }
.preview-chat footer { margin:7px 12px; padding:5px 7px; display:flex; align-items:center; gap:8px; border:1px solid rgba(255,255,255,.08); border-radius:14px; background:#171b38; }
.preview-chat footer i { width:27px; height:27px; border-radius:9px; background:#252b51; }.preview-chat footer span{height:6px;flex:1;border-radius:4px;background:#343a5d}.preview-chat footer b{width:34px;height:34px;border-radius:11px;background:#5865f2}
.landing-features { width:min(1180px,calc(100% - 32px)); margin:0 auto 55px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.landing-features article { min-width:0; padding:20px; border:1px solid rgba(255,255,255,.09); border-radius:16px; background:rgba(255,255,255,.045); }
.landing-features svg { color:#7d8aff; }.landing-features b{display:block;margin:12px 0 7px;font-size:.87rem}.landing-features p{margin:0;color:#9fa8ca;font-size:.72rem;line-height:1.8}
.landing-footer { width:min(1180px,calc(100% - 32px)); margin:auto; padding:20px 0 30px; display:flex; justify-content:space-between; border-top:1px solid rgba(255,255,255,.08); color:#8f98bd; font-size:.68rem; }
.landing-footer button { border:0; background:none; color:#8e98ff; cursor:pointer; }

/* Authentication: compact, centered, and safe at narrow widths. */
.login { min-height:100dvh !important; height:auto !important; overflow:auto !important; padding:24px !important; grid-template-columns:minmax(230px,390px) minmax(320px,480px) !important; justify-content:center !important; align-items:center !important; gap:clamp(28px,7vw,100px) !important; }
.login-card { width:100% !important; max-width:480px !important; max-height:none !important; overflow:visible !important; padding:24px !important; border-radius:18px !important; }
.login-card h1 { font-size:clamp(1.55rem,3vw,2.3rem) !important; }
.login-back { height:30px; margin-bottom:8px; padding:0 5px; display:inline-flex; align-items:center; gap:5px; border:0; background:transparent; color:var(--air-muted); font-size:.68rem; cursor:pointer; }
.email-auth { gap:10px !important; }.email-auth label{gap:5px !important}.email-auth input,.auth-input{min-height:43px !important}.auth-input input{height:41px !important}.auth-switch,.auth-channel{min-height:39px !important}
.login-points { flex-wrap:wrap; }

.settings-data-note { margin:12px; padding:12px; display:flex; align-items:center; gap:10px; border-radius:11px; background:color-mix(in srgb,var(--air-accent) 8%,var(--air-panel-2)); color:var(--air-text); }
.settings-data-note span{display:flex;flex-direction:column;gap:3px}.settings-data-note small{color:var(--air-muted);font-size:.68rem}

/* Prevent component collisions in settings/admin forms. */
.settings-page *, .admin-page * { min-width:0; }
.settings-content, .admin-content { overflow-x:hidden !important; }
.settings-choice-row>span,.setting-row>span { flex:1; min-width:0; }
.admin-page table { display:table; max-width:100%; }

@media(max-width:760px){
  body { overscroll-behavior:none; }
  .public-landing { min-height:100svh; }
  .landing-nav { height:60px; }.landing-logo img{width:31px;height:31px}.landing-login{height:36px;padding:0 10px}
  .landing-hero { min-height:auto; padding:52px 0 38px; grid-template-columns:1fr; gap:34px; }
  .landing-copy h1 { margin-top:16px; font-size:clamp(2.25rem,13vw,3.7rem); }
  .landing-copy>p { font-size:.84rem; }.landing-actions{gap:13px}.landing-primary{height:44px}
  .landing-preview { height:315px; grid-template-columns:39px 112px minmax(0,1fr); border-radius:17px; transform:none; }
  .preview-sidebar{padding:9px 5px;gap:9px}.preview-sidebar i{width:25px;height:25px}.preview-list{padding:10px 5px}.preview-list>div{height:46px;padding:5px}.preview-list i,.preview-chat header i{width:29px;height:29px}.preview-chat{grid-template-rows:49px minmax(0,1fr) 53px}.preview-chat section{padding:16px 9px}.preview-chat footer{margin:6px;padding:4px}
  .landing-features { grid-template-columns:1fr; }.landing-footer{margin-top:15px}

  .login { display:block !important; padding:10px 10px calc(14px + env(safe-area-inset-bottom)) !important; }
  .login-brand { width:100% !important; min-height:auto !important; padding:17px 0 12px !important; }
  .login-brand img { width:44px !important; height:44px !important; }.login-brand small{display:none !important}
  .login-card { margin:auto !important; padding:17px !important; border-radius:16px !important; }
  .login-card h1 { font-size:1.48rem !important; margin:8px 0 !important; }.login-card>p{font-size:.72rem !important;line-height:1.7 !important}

  /* Bottom navigation owns its own grid row; every active page stays above it. */
  .telegram-air { grid-template-columns:minmax(0,1fr) !important; grid-template-rows:minmax(0,1fr) calc(60px + env(safe-area-inset-bottom)) !important; height:100dvh !important; min-height:0 !important; overflow:hidden !important; }
  .telegram-air > .rail { grid-column:1 !important; grid-row:2 !important; position:relative !important; inset:auto !important; width:100% !important; height:calc(60px + env(safe-area-inset-bottom)) !important; min-height:calc(60px + env(safe-area-inset-bottom)) !important; padding:5px 5px env(safe-area-inset-bottom) !important; display:flex !important; flex-direction:row !important; align-items:center !important; justify-content:space-around !important; gap:2px !important; overflow:hidden !important; border:0 !important; border-top:1px solid var(--air-line) !important; scrollbar-width:none !important; z-index:100 !important; }
  .telegram-air > .rail::-webkit-scrollbar{width:0 !important;height:0 !important;display:none !important}.rail .brand{display:none !important}
  .rail .rail-item,.rail button,.rail .icon-button { flex:1 1 54px !important; width:auto !important; min-width:45px !important; max-width:72px !important; height:48px !important; margin:0 !important; border-radius:12px !important; display:flex !important; flex-direction:column !important; gap:2px !important; }
  .rail .rail-item[data-nav="contacts"],.rail .rail-item[data-nav="saved"]{display:none !important}
  .rail button span:not(.avatar){display:block !important;font-size:.55rem !important;line-height:1 !important}.rail button svg{width:18px !important;height:18px !important}
  .rail button.active:before { right:50% !important; top:-5px !important; width:22px !important; height:3px !important; transform:translateX(50%); }
  .rail-bottom { display:none !important; }
  .telegram-air > .list-pane,.telegram-air > .conversation,.telegram-air > .settings-page,.telegram-air > .settings-v2,.telegram-air > .admin-page { grid-column:1 !important; grid-row:1 !important; width:100% !important; max-width:100% !important; height:100% !important; min-height:0 !important; }
  .pane-heading{height:55px !important;min-height:55px !important;padding:7px 9px !important}.pane-heading h1{font-size:1rem !important}.pane-network{height:25px;padding:0 6px;font-size:.57rem}.pane-actions{gap:1px !important}.pane-actions .icon-button{width:34px !important;min-width:34px !important;height:34px !important}
  .search-field{height:40px !important;min-height:40px !important}.chat-list{padding-bottom:8px !important}.chat-row{height:62px !important;min-height:62px !important}
  .conversation { min-height:0 !important; }.messages{min-height:0 !important}.composer-area{flex:none !important;padding-bottom:max(6px,env(safe-area-inset-bottom)) !important}
  .settings-page,.admin-page { overflow:hidden !important; }.settings-v2{padding:0 !important;display:flex !important;flex-direction:column !important}.settings-v2>.page-title{display:none !important}.settings-v2 .settings-layout{height:100% !important;min-height:0 !important;display:grid !important;grid-template-columns:minmax(0,1fr) !important;grid-template-rows:auto minmax(0,1fr) !important;overflow:hidden !important;padding:7px !important;margin:0 !important}.settings-v2 .settings-nav{position:relative !important;top:auto !important;width:100% !important;max-width:100% !important;height:50px !important;min-height:50px !important;display:flex !important;flex-direction:row !important;flex-wrap:nowrap !important;overflow-x:auto !important;overflow-y:hidden !important}.settings-v2 .settings-user,.settings-v2 .settings-nav-label,.settings-v2 .settings-nav>button.danger{display:none !important}.settings-v2 .settings-content{width:100% !important;height:100% !important;overflow-y:auto !important;padding-bottom:10px !important}.settings-v2 .settings-section-intro{position:sticky;top:0;z-index:5;background:var(--air-bg);padding:7px !important}.settings-v2 .settings-nav>button{flex:0 0 auto !important;width:auto !important;height:40px !important;min-height:40px !important;padding:0 10px !important}
  .settings-data-note{margin:9px}
  .admin-page .admin-layout{height:100% !important;min-height:0 !important;display:grid !important;grid-template-rows:auto minmax(0,1fr) !important;grid-template-columns:1fr !important}.admin-page .admin-tabs{grid-row:1 !important;overflow-x:auto !important;overflow-y:hidden !important;flex-wrap:nowrap !important;justify-content:flex-start !important;max-height:58px !important}.admin-page .admin-content{grid-row:2 !important;height:100% !important;overflow-y:auto !important;padding:8px !important}
  .modal,.profile-modal{overflow-y:auto !important;overscroll-behavior:contain !important}
}

@media(max-width:390px){
  .pane-network>span:last-child{display:none}.pane-network{width:25px;justify-content:center;padding:0}.landing-features article{padding:16px}.landing-footer{flex-direction:column;gap:10px}.login-points{display:none !important}
}