/* Уточняю палитру интерфейса поверх базовых стилей. Этот файл подключаю после style.css. */
:root {
  --bg: #202026;
  --panel: #19191f;
  --soft: #2a2a33;
  --line: #303039;
  --muted: #a6a6b5;
  --accent: #e6325d;
  --light: #ff799b;
  font-family: 'Segoe UI', Inter, Arial, sans-serif;
}

button,
a,
input,
summary {
  -webkit-tap-highlight-color: transparent;
}

/* Задаю единый размер SVG-иконок; цвет беру из currentColor. */
.icon {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
  vertical-align: middle;
}

button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

button:hover {
  filter: none;
}

button:disabled {
  opacity: 0.5;
}

.primary {
  justify-content: center;
  padding: 13px 20px;
  min-height: 46px;
  border-radius: 8px;
  background: #de2c57;
  box-shadow: 0 4px 14px #7517321f;
  font-size: 0.9rem;
}

.primary:hover:not(:disabled) {
  background: #f03966;
  transform: translateY(-1px);
}

.primary .icon {
  width: 20px;
  height: 20px;
}

.link:hover {
  text-decoration: underline;
}

.muted {
  color: #acabb9;
}

.eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.13em;
  color: #c9a1af;
}

/* Здесь уточняю оформление страницы входа и регистрации. */
.auth {
  background: #1b1b22;
  grid-template-columns: 48% 52%;
}

.identity {
  background: radial-gradient(ellipse at 20% 45%, #55243760, transparent 70%), #15151c;
  padding: 38px 9%;
  min-height: 100dvh;
}

.identity-copy {
  margin-top: auto;
  padding: 60px 0 36px;
}

.identity h1 {
  font-size: clamp(2.8rem, 4.1vw, 4.5rem);
  letter-spacing: -0.055em;
  line-height: 1.12;
  margin-top: 22px;
  margin-bottom: 23px;
}

.identity-copy p {
  font-size: 1rem;
  color: #b2a5b2;
}

.brand {
  font-size: 1.4rem;
}

.brand img {
  width: 38px;
  height: 38px;
}

.identity footer {
  font-size: 0.65rem;
  align-items: center;
  gap: 15px;
  padding-top: 35px;
}

.identity footer button {
  font-size: 0.8rem;
  color: #cba6b5;
}

/* Оформляю декоративный пример голосовой комнаты на странице входа. */
.auth-scene {
  max-width: 390px;
  background: #22212b;
  border: 1px solid #40313e;
  border-radius: 14px;
  padding: 20px;
  margin-top: 32px;
  box-shadow: 0 30px 55px #09080e40;
  transform: rotate(-3deg);
}

.scene-heading {
  display: flex;
  gap: 9px;
  align-items: center;
  font-size: 0.8rem;
  color: #d6cbd6;
}

.scene-heading .icon {
  width: 18px;
}

.scene-badge {
  font-size: 0.55rem;
  letter-spacing: 0.08em;
  margin-left: auto;
  color: #ffa3bc;
  background: #602538;
  padding: 5px 6px;
  border-radius: 4px;
}

.scene-people {
  display: flex;
  gap: 12px;
  margin: 20px 0 18px;
}

.scene-people > div {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  padding: 20px 7px 10px;
  background: #2e2b36;
  border: 2px solid transparent;
  border-radius: 9px;
}

.scene-people b {
  width: 40px;
  height: 40px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  color: #fac3d5;
  background: #624052;
  font-size: 1rem;
}

.scene-people > div:nth-child(3) b {
  background: #455b67;
  color: #d0edf3;
}

.scene-people > div:nth-child(2) b {
  background: #69454b;
  color: #fbe1c3;
}

.scene-people span {
  font-size: 0.65rem;
  color: #ccc4d1;
}

.scene-people .scene-active {
  border-color: #dc3963;
  box-shadow: 0 0 16px #ef33641a;
}

.scene-controls {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.scene-controls > span {
  display: grid;
  place-items: center;
  background: #37313e;
  padding: 9px;
  border-radius: 8px;
}

.scene-controls .icon {
  width: 16px;
  height: 16px;
}

.scene-controls > span:last-child {
  background: #c32d52;
}

.auth-pane {
  padding: 48px 8% 75px;
}

.auth-card {
  width: min(100%, 410px);
}

/* Выделяю активную вкладку входа или регистрации. */
.auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 5px;
  background: #141419;
  border: 1px solid #2d2d36;
  border-radius: 10px;
  margin-bottom: 28px;
}

.auth-tabs button {
  padding: 11px 14px;
  border-radius: 6px;
  color: #aaa8b7;
  background: transparent;
  font-size: 0.875rem;
}

.auth-tabs button.selected {
  background: #34303b;
  color: white;
  box-shadow: 0 2px 6px #0003;
}

.auth-card h2 {
  font-size: 1.75rem;
  margin: 0 0 10px;
  font-weight: 700;
}

.auth-card > .muted {
  font-size: 0.875rem;
  margin-bottom: 25px;
}

.auth-card label {
  margin: 15px 0;
  font-size: 0.81rem;
  letter-spacing: 0.005em;
  color: #d0ccd8;
}

.auth-card input {
  padding: 12px 14px;
  border-radius: 7px;
  background: #121217;
  border-color: #34323e;
  font-size: 0.94rem;
  min-height: 46px;
}

.auth-card input::placeholder {
  color: #73717f;
}

.auth-card label input {
  margin-top: 8px;
}

.auth-card input[aria-invalid='true'] {
  border-color: #f56c87;
  box-shadow: 0 0 0 2px #f56c8712;
}

/* Резервирую оформление подсказок об ошибках рядом с полями формы. */
.field-error {
  display: block;
  color: #ff8da5;
  font-size: 0.77rem;
  font-weight: 400;
  line-height: 1.5;
}

.field-error:not(:empty) {
  margin-top: 6px;
}

/* Оставляю место внутри поля пароля для кнопки показа символов. */
.password-wrap {
  position: relative;
  margin-top: 8px;
}

.password-wrap input {
  padding-right: 48px;
  margin-top: 0 !important;
}

.password-toggle {
  position: absolute;
  right: 4px;
  top: 3px;
  width: 42px;
  height: 40px;
  background: transparent;
  color: #a9a3b4;
  border-radius: 5px;
}

.password-toggle:hover {
  color: #f7d5e2;
  background: #34252f;
}

.password-toggle .icon {
  width: 19px;
  height: 19px;
}

/* Показываю требования к паролю и отдельно выделяю выполненные пункты. */
.password-rules {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 0.73rem;
  color: #94909e;
  margin-top: -3px;
}

.password-rules > span {
  display: flex;
  align-items: center;
  gap: 4px;
}

.password-rules .icon {
  width: 14px;
  height: 14px;
}

.password-rules .passed {
  color: #f2a5bc;
}

.auth-card .error:empty {
  display: none;
}

.auth-card .error {
  margin: 14px 0;
  font-size: 0.8rem;
}

.auth-card #auth-submit {
  margin-top: 23px;
  justify-content: space-between;
}

.auth-switch {
  margin-top: 23px;
  padding-top: 20px;
  border-color: #33313b;
  font-size: 0.8rem;
}

.auth-help {
  display: flex;
  margin: 18px auto 0;
  font-size: 0.78rem;
  color: #9b94a5;
}

.auth-foot {
  font-size: 0.73rem;
  bottom: 25px;
}

.auth-card small {
  font-size: 0.72rem;
  color: #928c9d;
}

/* Уточняю сетку рабочего экрана и добавляю верхнюю полосу приложения. */
.workspace {
  height: 100dvh;
  min-height: 0;
  grid-template-columns: 76px 248px minmax(0, 1fr) 238px;
  grid-template-rows: 36px minmax(0, 1fr);
  overflow: hidden;
  background: #15151b;
}

.app-titlebar {
  grid-column: 1/-1;
  grid-row: 1;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 18px;
  border-bottom: 1px solid #26262f;
  font-size: 0.76rem;
  color: #b6b0c0;
  background: #141419;
}

.app-titlebar img {
  width: 18px;
  height: 18px;
  border-radius: 5px;
}

.app-titlebar strong {
  font-size: 0.77rem;
  color: #d5cfdd;
  letter-spacing: 0.01em;
}

.app-titlebar > span {
  margin: auto;
  font-size: 0.7rem;
  color: #777181;
}

.app-titlebar button {
  padding: 4px;
  background: transparent;
  color: #89828f;
}

.app-titlebar .icon {
  width: 16px;
  height: 16px;
}

/* Оформляю узкую панель с серверами и переходом на главную. */
.rail {
  grid-column: 1;
  grid-row: 2;
  padding: 16px 12px;
  gap: 6px;
  background: #141419;
  border-right: 0;
  overflow-y: auto;
  scrollbar-width: none;
}

.rail-home {
  padding: 0;
  background: transparent;
  border-radius: 16px;
  position: relative;
}

.rail-home img {
  width: 48px;
  height: 48px;
  border-radius: 16px;
}

.rail-home.selected:before {
  content: '';
  position: absolute;
  left: -12px;
  top: 10px;
  width: 3px;
  height: 28px;
  background: #fff;
  border-radius: 0 4px 4px 0;
}

.rail-line {
  background: #32303a;
  width: 30px;
  margin: 10px 0 14px;
}

.server-icon {
  position: relative;
  display: flex;
  margin-bottom: 12px;
  border-radius: 50%;
  background: #2b2934;
  color: #e3d8e6;
  transition:
    border-radius 0.2s,
    background 0.2s;
}

.server-icon:hover {
  border-radius: 15px;
  background: #53283a;
  color: #ffcfdf;
}

.server-icon.selected {
  background: #db2b58;
  box-shadow: none;
  border-radius: 15px;
}

.server-icon.selected:before {
  content: '';
  position: absolute;
  left: -12px;
  top: 9px;
  width: 3px;
  height: 30px;
  background: #fff;
  border-radius: 0 4px 4px 0;
}

.server-icon.add,
.server-icon.join {
  border: 0;
  background: #28242f;
  color: #f283a6;
  border-radius: 50%;
  font-size: 1rem;
}

.server-icon.add:hover,
.server-icon.join:hover {
  background: #d72a55;
  color: white;
  border-radius: 15px;
}

.rail-bottom {
  margin-top: auto;
  padding-top: 30px;
}

.rail-help {
  height: 42px;
  width: 42px;
  background: transparent;
  color: #a39aaf;
  border-radius: 13px;
}

.rail-help:hover {
  background: #2d2633;
  color: #fff;
}

/* Уточняю размеры и состояния элементов боковой панели. */
.sidebar {
  grid-column: 2;
  grid-row: 2;
  min-height: 0;
  background: #1a1a21;
  border-color: #2b2934;
}

.sidebar header {
  min-height: 64px;
  padding: 18px 18px;
  font-size: 0.9rem;
  border-color: #2d2a36;
}

.sidebar header > .icon {
  width: 17px;
  height: 17px;
  color: #a09aaa;
}

.sidebar-body {
  padding: 16px 10px;
  overflow-y: auto;
}

.sidebar-nav {
  display: flex;
  width: 100%;
  justify-content: flex-start;
  padding: 12px 12px;
  font-size: 0.875rem;
  color: #a8a3b4;
  background: transparent;
  border-radius: 6px;
  margin-bottom: 5px;
}

.sidebar-nav .icon {
  width: 21px;
  height: 21px;
}

.sidebar-nav.active {
  background: #34303d;
  color: #f6eff7;
}

.sidebar-nav:hover {
  background: #2c2833;
}

.sidebar-divider {
  height: 1px;
  background: #302b38;
  margin: 25px 6px;
}

.sidebar-body .section-label {
  font-size: 0.68rem;
  letter-spacing: 0.05em;
  margin: 14px 8px;
  color: #9c91a8;
}

.sidebar-body .small {
  font-size: 0.81rem;
  margin: 14px 8px;
}

.sidebar-create {
  margin: 10px 8px;
  background: transparent;
  font-size: 0.8rem;
  color: #ef91b0;
  padding: 0;
}

.sidebar-create .icon {
  width: 18px;
  height: 18px;
}

.invite {
  font-size: 0.82rem;
  border: 1px solid #503045;
  background: #372431;
  color: #f4bad0;
  display: flex;
  justify-content: center;
  margin: 0 0 25px;
}

.invite .icon {
  width: 18px;
  height: 18px;
}

.channel {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-size: 0.87rem;
  padding: 11px 10px;
  line-height: 1.4;
}

.channel .icon {
  width: 19px;
  height: 19px;
  color: #97889e;
}

.channel:hover {
  background: #2e2835;
  color: white;
}

.channel.selected {
  background: #442737;
  color: #ffc8dc;
}

.channel.selected .icon {
  color: #f68cad;
}

.connection {
  padding: 13px 14px;
  background: #1a171f;
  border-color: #302934;
}

.connection strong {
  font-weight: 600;
  font-size: 0.77rem;
}

.connection small {
  font-size: 0.68rem;
  color: #9b8fa4;
}

/* Собираю аватар, имя и кнопку настроек в нижнем блоке профиля. */
.profile {
  padding: 12px 10px;
  background: #15141b;
  gap: 8px;
  min-height: 70px;
}

.profile-avatar {
  padding: 0;
  background: transparent;
}

.profile .avatar {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background: #704158;
  color: #ffd9e8;
  font-size: 0.75rem;
}

.profile > div {
  flex: 1;
}

.profile strong {
  font-size: 0.75rem;
  display: block;
  max-width: 104px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile small {
  font-size: 0.68rem;
}

.profile .icon-button {
  padding: 5px;
  flex-shrink: 0;
  margin-left: 0;
  color: #a498af;
  min-width: 24px;
}

.profile .icon-button .icon {
  width: 17px;
  height: 17px;
}

.icon-button:hover {
  color: #fff;
}

.workspace main {
  grid-column: 3;
  grid-row: 2;
  min-height: 0;
  background: #22222a;
  overflow-y: auto;
}

.room-header {
  min-height: 64px;
  height: 64px;
  padding: 18px 26px;
  position: sticky;
  top: 0;
  z-index: 3;
  background: #22222a;
  border-color: #35313e;
}

.room-header strong {
  font-size: 0.875rem;
}

.room-header .hash {
  color: #aa9cb5;
  display: flex;
}

.room-header .pill {
  border: 0;
  border-left: 1px solid #49404f;
  border-radius: 0;
  padding-left: 14px;
  color: #8f869a;
  font-size: 0.62rem;
  letter-spacing: 0.045em;
}

.header-help {
  padding: 0;
  background: transparent;
  color: #aa9db6;
}

.header-help .icon {
  width: 20px;
  height: 20px;
}

#mobile-menu {
  display: none;
}

/* Выделяю уведомление о состоянии подтверждения почты. */
.email-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 25px;
  background: #453027;
  border-bottom: 1px solid #5e4032;
  color: #edc6a4;
}

.email-banner > .icon {
  width: 18px;
  height: 18px;
}

.email-banner p {
  margin: 0;
  font-size: 0.76rem;
  line-height: 1.5;
  flex: 1;
}

.email-banner .link {
  color: #ffd7bd;
  white-space: nowrap;
  font-size: 0.75rem;
}

/* Оформляю начальный экран с подсказками и действиями для нового пользователя. */
.home-page {
  display: block;
  text-align: left;
  padding: 32px 30px 24px;
  max-width: 1050px;
  width: 100%;
  margin: 0 auto;
  flex: 1;
}

.welcome-top h1 {
  font-size: 1.65rem;
  letter-spacing: -0.035em;
  margin: 9px 0 7px;
  overflow-wrap: anywhere;
}

.welcome-top > .muted {
  font-size: 0.87rem;
  margin-bottom: 26px;
}

.home-hero {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  position: relative;
  overflow: hidden;
  border: 1px solid #6c354d;
  border-radius: 14px;
  padding: 27px 30px;
  background:
    radial-gradient(ellipse at 90% 80%, #7b2a4744, transparent 65%),
    linear-gradient(120deg, #452335, #302132);
}

.hero-symbol {
  color: #f389aa;
}

.hero-symbol .icon {
  width: 27px;
  height: 27px;
}

.home-hero h2 {
  font-size: 1.9rem;
  line-height: 1.15;
  letter-spacing: -0.04em;
  margin: 12px 0;
}

.home-hero p {
  font-size: 0.83rem;
  line-height: 1.6;
  color: #c7adbf;
  margin-bottom: 20px;
}

.home-hero .primary {
  font-size: 0.82rem;
  min-height: 42px;
  display: inline-flex;
}

.home-art {
  position: relative;
  min-height: 220px;
  display: grid;
  place-items: center;
}

.art-logo {
  position: relative;
  z-index: 1;
  transform: rotate(-12deg);
  box-shadow: 0 20px 40px #170f22aa;
  border-radius: 29px;
}

.art-logo img {
  width: 94px;
  height: 94px;
  display: block;
}

.orbit {
  position: absolute;
  border: 1px solid #ad60813d;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  transform: rotate(-25deg) scaleX(1.25);
}

.orbit-two {
  width: 275px;
  height: 275px;
  border-style: dashed;
  border-color: #aa608029;
}

.orbit-icon {
  position: absolute;
  display: grid;
  place-items: center;
  width: 53px;
  height: 53px;
  border-radius: 16px;
  background: #4c2c42;
  border: 1px solid #89506b;
  color: #f6a2c0;
  box-shadow: 0 10px 20px #180d2340;
}

.orbit-mic {
  left: 10%;
  top: 4%;
  transform: rotate(10deg);
}

.orbit-video {
  right: 4%;
  top: 32%;
  transform: rotate(10deg);
}

.orbit-screen {
  left: 28%;
  bottom: 0;
  transform: rotate(-10deg);
}

/* Размещаю карточки основных действий в сетке. */
.home-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 18px;
}

.action-card {
  border: 1px solid #3c3547;
  border-radius: 10px;
  padding: 18px 15px;
  background: #292630;
  justify-content: flex-start;
  text-align: left;
  gap: 12px;
  min-width: 0;
}

.action-card:hover {
  border-color: #7a4660;
  background: #322833;
}

.action-card .action-icon {
  background: #423047;
  border-radius: 10px;
  padding: 9px;
  color: #d796b7;
}

.action-card .action-icon .icon {
  width: 20px;
  height: 20px;
}

.action-card > span:nth-child(2) {
  flex: 1;
  min-width: 0;
}

.action-card strong {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
}

.action-card small {
  font-size: 0.71rem;
  line-height: 1.5;
  margin-top: 5px;
  color: #a89aad;
}

.action-card > span:last-child > .icon {
  width: 16px;
  height: 16px;
  color: #a695b3;
}

/* Выделяю короткую последовательность первых шагов. */
.quick-start {
  margin-top: 30px;
}

.quick-start h3 {
  font-size: 0.9rem;
  font-weight: 600;
  margin: 0 0 18px;
  color: #dcd4e2;
}

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.steps > div {
  border-top: 1px solid #433543;
  padding-top: 17px;
}

.steps span {
  display: block;
  color: #c46287;
  font-size: 0.75rem;
  font-weight: 600;
  margin-bottom: 9px;
}

.steps strong {
  display: block;
  font-size: 0.79rem;
  color: #dad0df;
}

.steps p {
  font-size: 0.74rem;
  line-height: 1.6;
  margin-top: 7px;
  color: #9f91aa;
}

/* Уточняю оформление списка участников справа. */
.members {
  grid-column: 4;
  grid-row: 2;
  background: #1b1a22;
  min-height: 0;
  padding: 26px 18px;
  border-color: #302a38;
  overflow-y: auto;
}

.members .section-label {
  font-size: 0.67rem;
  padding-bottom: 20px;
  letter-spacing: 0.06em;
}

.member {
  font-size: 0.79rem;
  color: #cfc2d9;
  margin-bottom: 18px;
}

.member .avatar {
  width: 32px;
  height: 32px;
  font-size: 0.72rem;
  background: #413043;
}

.home-tips {
  padding: 12px 7px;
}

.tip-icon {
  color: #e28bad;
  margin-bottom: 20px;
}

.tip-icon .icon {
  width: 34px;
  height: 34px;
}

.home-tips h3 {
  font-size: 1.1rem;
  line-height: 1.4;
  color: #e2d5e8;
  letter-spacing: -0.015em;
  margin-bottom: 13px;
}

.home-tips p {
  font-size: 0.79rem;
  color: #9e91ab;
  line-height: 1.7;
  margin-bottom: 18px;
}

.tip-line {
  height: 1px;
  background: #352b3c;
  margin: 30px 0;
}

.home-tips > span > .icon {
  color: #b191bc;
  width: 27px;
  height: 27px;
}

.home-tips h4 {
  font-size: 0.88rem;
  line-height: 1.6;
  margin: 12px 0;
}

.home-tips .link {
  font-size: 0.74rem;
  color: #d190b2;
  gap: 8px;
}

.home-tips .link .icon {
  width: 15px;
}

.support-card {
  margin-top: auto;
  padding: 17px 5px 0;
  border-top: 1px solid #362c3c;
  justify-content: flex-start;
  background: transparent;
  text-align: left;
  color: #d7c7de;
  font-size: 0.79rem;
}

.support-card > span:first-child {
  color: #b287b8;
}

.support-card small {
  font-size: 0.69rem;
  color: #8f829b;
  margin-top: 4px;
}

.main-footer {
  padding: 15px 28px;
  color: #75697f;
  font-size: 0.68rem;
  border-color: #332b39;
}

.main-footer > span:first-child {
  color: #a791b2;
}

.room-view {
  padding: 27px 28px;
  flex: 1;
}

.stage-top h1 {
  font-size: 1.6rem;
  margin-top: 10px;
}

.stage-top .muted {
  font-size: 0.75rem;
}

.prejoin {
  padding: 45px 15px;
}

.prejoin-symbol {
  margin: 0 auto 24px;
  background: #392a3c;
  border: 1px solid #604051;
  border-radius: 28px;
  width: 95px;
  height: 95px;
  display: grid;
  place-items: center;
  color: #ed88aa;
}

.prejoin-symbol .icon {
  width: 45px;
  height: 45px;
}

.prejoin h2 {
  font-size: 1.5rem;
  letter-spacing: -0.035em;
}

.prejoin p {
  font-size: 0.88rem;
}

.prejoin .primary {
  margin: 23px auto 17px;
}

.prejoin small {
  font-size: 0.7rem;
  color: #908298;
}

/* Оформляю панель звонка: кнопки, подписи и разделители. */
.call-controls {
  border: 1px solid #453347;
  background: #1c1822;
  padding: 14px 20px 10px;
  gap: 15px;
  border-radius: 16px;
  position: sticky;
  bottom: 16px;
  z-index: 2;
  box-shadow: 0 8px 40px #10091580;
}

.control-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
}

.call-controls .control-item button {
  padding: 0;
  width: 48px;
  height: 44px;
  border-radius: 13px;
  background: #393040;
  color: #cbbad6;
}

.call-controls .control-item button[aria-pressed='true'] {
  background: #5f2c46;
  color: #ffc4dd;
}

.call-controls .control-item button.danger {
  background: #cf315a;
  color: #fff;
  width: 60px;
}

.control-item > span {
  font-size: 0.64rem;
  color: #a694b0;
}

.control-divider {
  width: 1px;
  background: #48354c;
  height: 42px;
  margin: 0 2px;
}

.tile {
  background: radial-gradient(circle at 40% 20%, #51364c, #2b2532);
  border-radius: 12px;
}

.tile .initial {
  background: #74465d;
  border-radius: 26px;
  min-width: 76px;
  height: 76px;
  padding: 14px;
  font-size: 1.9rem;
  display: grid;
  place-items: center;
}

.tile.speaking {
  border-color: #ed4575;
  box-shadow: 0 0 20px #ec45751a;
}

.tile .tile-label {
  z-index: 2;
  bottom: 11px;
  left: 11px;
  background: #17121ccc;
  font-size: 0.73rem;
  padding: 7px 10px;
}

.tiles {
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
}

/* Согласовываю диалоговые окна с остальной палитрой приложения. */
dialog {
  border: 1px solid #5e4059;
  background: #24202c;
  box-shadow: 0 25px 90px #0008;
  border-radius: 15px;
  padding: 30px;
  max-height: 90dvh;
  overflow-y: auto;
  width: min(460px, 92vw);
}

dialog .close {
  width: 32px;
  height: 32px;
  padding: 5px;
  border-radius: 7px;
}

dialog .close:hover {
  background: #423146;
}

.dialog-symbol {
  display: grid;
  place-items: center;
  width: 49px;
  height: 49px;
  background: #4b2b42;
  color: #f19aba;
  border: 1px solid #71425d;
  border-radius: 15px;
  margin-bottom: 19px;
}

.dialog-symbol .icon {
  width: 24px;
  height: 24px;
}

dialog h2 {
  font-size: 1.45rem;
  margin: 10px 0 15px;
  letter-spacing: -0.025em;
}

dialog label {
  font-size: 0.8rem;
  margin: 20px 0 10px;
}

dialog input {
  background: #19151f;
  font-size: 0.9rem;
  border-color: #50374d;
}

dialog .primary {
  font-size: 0.86rem;
}

dialog .error:empty {
  display: none;
}

dialog .error {
  margin: 13px 0;
  font-size: 0.78rem;
}

#dialog-submit {
  margin-top: 20px;
}

/* Оформляю раздел помощи с вкладками и раскрывающимися ответами. */
.help-dialog {
  width: min(660px, 94vw);
  padding: 30px;
}

.dialog-heading {
  display: flex;
  gap: 17px;
  align-items: center;
  margin-bottom: 22px;
}

.dialog-heading .dialog-symbol {
  margin: 0;
  flex-shrink: 0;
}

.dialog-heading h2 {
  margin: 6px 0 0;
  font-size: 1.4rem;
}

.dialog-heading .eyebrow {
  font-size: 0.64rem;
}

.help-tabs {
  display: flex;
  gap: 7px;
  border-bottom: 1px solid #493249;
  margin-bottom: 16px;
  padding-bottom: 12px;
}

.help-tabs button {
  background: transparent;
  color: #ab9cb7;
  border-radius: 7px;
  font-size: 0.8rem;
  padding: 10px 12px;
}

.help-tabs .active {
  background: #593044;
  color: #ffbdd9;
}

.help-content {
  min-height: 240px;
}

.help-content details {
  border-bottom: 1px solid #3d2e42;
  padding: 14px 0;
}

.help-content summary {
  cursor: pointer;
  font-size: 0.86rem;
  font-weight: 500;
  line-height: 1.5;
  color: #e3d4ed;
  padding-right: 10px;
}

.help-content summary::marker {
  color: #cc759b;
}

.help-content p {
  font-size: 0.81rem;
  line-height: 1.8;
  color: #b6a5c4;
  margin: 12px 0 0 16px;
}

/* Отделяю контакт поддержки от справочных материалов. */
.help-support {
  display: flex;
  align-items: center;
  gap: 15px;
  background: #2f2435;
  border: 1px solid #593850;
  border-radius: 11px;
  padding: 18px;
  margin-top: 25px;
}

.support-mail-icon {
  color: #e98cb3;
}

.help-support strong {
  font-size: 0.85rem;
}

.help-support p {
  font-size: 0.76rem;
  color: #ac97b9;
  margin: 6px 0;
}

.help-support a {
  font-size: 0.82rem;
  color: #f59abb;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.help-support a:hover {
  text-decoration: underline;
}

.help-support .icon-button {
  padding: 6px;
  color: #b08dab;
}

.help-support .icon-button .icon {
  width: 18px;
  height: 18px;
}

/* Задаю оформление сведений об аккаунте и статуса подтверждения почты. */
.account-details {
  margin: 20px 0;
}

.account-details dt {
  font-size: 0.73rem;
  color: #9e89ad;
  margin-top: 17px;
}

.account-details dd {
  font-size: 0.91rem;
  margin: 7px 0 0;
  overflow-wrap: anywhere;
}

.verification-status {
  display: inline-flex;
  padding: 6px 10px;
  border-radius: 6px;
  background: #5b3e2c;
  color: #f6c89f;
  font-size: 0.76rem;
  margin: 5px 0 10px;
}

.verification-status.verified {
  background: #304936;
  color: #b4e7bf;
}

.email-banner .link,
.account-details {
  overflow-wrap: anywhere;
}

#toast {
  background: #452b3c;
  border-color: #88516d;
  color: #f4d9e8;
  max-width: 90vw;
  box-shadow: 0 10px 50px #0008;
  font-size: 0.82rem;
}

/* Подстраиваю расположение и размеры элементов под указанную ширину экрана. */
@media (max-width: 1250px) {
  .workspace {
    grid-template-columns: 72px 230px minmax(0, 1fr);
  }

  .members {
    display: none;
  }

  .home-page {
    max-width: 950px;
    padding: 28px;
  }

  .identity {
    padding: 34px 8%;
  }

  .auth-pane {
    padding-left: 8%;
    padding-right: 8%;
  }
}

/* Подстраиваю расположение и размеры элементов под указанную ширину экрана. */
@media (max-width: 950px) {
  .home-actions {
    grid-template-columns: 1fr;
  }

  .home-hero {
    padding: 24px;
  }

  .home-hero h2 {
    font-size: 1.65rem;
  }

  .home-art {
    transform: scale(0.8);
  }

  .steps {
    gap: 12px;
  }

  .auth-scene {
    padding: 15px;
  }

  .identity h1 {
    font-size: 2.7rem;
  }

  .scene-heading {
    font-size: 0.7rem;
  }

  .scene-badge {
    display: none;
  }
}

/* Подстраиваю расположение и размеры элементов под указанную ширину экрана. */
@media (max-width: 760px) {
  .auth {
    display: block;
  }

  .identity {
    min-height: auto;
    padding: 20px 24px;
  }

  .identity-copy,
  .identity footer {
    display: none;
  }

  .auth-pane {
    padding: 25px 24px 70px;
    min-height: calc(100dvh - 78px);
  }

  .auth-card {
    width: min(100%, 420px);
  }

  .auth-card label {
    margin: 17px 0;
  }

  .auth-foot {
    font-size: 0.68rem;
  }

  .workspace {
    grid-template-columns: 60px minmax(0, 1fr);
    grid-template-rows: 34px minmax(0, 1fr);
    height: 100dvh;
    min-height: 0;
  }

  .app-titlebar {
    padding: 0 12px;
    grid-row: 1;
    gap: 7px;
  }

  .app-titlebar > span {
    display: none;
  }

  .app-titlebar button {
    margin-left: auto;
  }

  .rail {
    grid-row: 2;
    grid-column: 1;
    padding: 14px 6px;
  }

  .rail-home img,
  .server-icon {
    width: 42px;
    height: 42px;
  }

  .rail-home.selected:before,
  .server-icon.selected:before {
    left: -6px;
  }

  .sidebar {
    display: none;
    grid-column: 2;
    grid-row: 2;
  }

  .workspace.menu-open .sidebar {
    display: flex;
    position: fixed;
    top: 34px;
    bottom: 0;
    left: 60px;
    width: 245px;
    z-index: 5;
    box-shadow: 30px 0 50px #0008;
  }

  .sidebar header {
    min-height: 64px;
  }

  .sidebar-body {
    padding: 16px 10px;
  }

  .profile {
    position: static;
  }

  .workspace main {
    grid-column: 2;
    grid-row: 2;
    min-height: 0;
  }

  .room-header {
    height: 58px;
    min-height: 58px;
    padding: 15px 16px;
  }

  .room-header > div {
    gap: 10px;
  }

  .room-header strong {
    font-size: 0.85rem;
  }

  .room-header .hash {
    display: none;
  }

  #mobile-menu {
    display: flex;
    padding: 0;
    margin: 0;
    color: #a58eb2;
  }

  .header-help .icon {
    width: 18px;
    height: 18px;
  }

  .home-page {
    padding: 23px 16px;
  }

  .welcome-top h1 {
    font-size: 1.35rem;
  }

  .welcome-top > .muted {
    font-size: 0.8rem;
    margin-bottom: 20px;
  }

  .welcome-top .eyebrow {
    font-size: 0.6rem;
  }

  .home-hero {
    display: block;
    padding: 24px 19px;
    border-radius: 12px;
  }

  .home-hero h2 {
    font-size: 1.65rem;
  }

  .home-hero p {
    font-size: 0.79rem;
  }

  .home-art {
    display: none;
  }

  .home-hero .primary {
    width: 100%;
    padding: 12px;
    font-size: 0.8rem;
  }

  .home-actions {
    gap: 12px;
    margin-top: 14px;
  }

  .action-card {
    padding: 14px 11px;
    gap: 9px;
  }

  .action-card .action-icon {
    padding: 7px;
  }

  .action-card .action-icon .icon {
    width: 18px;
    height: 18px;
  }

  .action-card strong {
    font-size: 0.75rem;
  }

  .action-card small {
    font-size: 0.68rem;
  }

  .action-card > span:last-child {
    display: none;
  }

  .quick-start {
    margin-top: 25px;
  }

  .quick-start h3 {
    font-size: 0.82rem;
  }

  .steps {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .steps > div {
    display: grid;
    grid-template-columns: 28px 1fr;
    padding-top: 13px;
    gap: 0 9px;
  }

  .steps span {
    grid-row: 1/3;
    margin-top: 2px;
  }

  .steps strong {
    font-size: 0.77rem;
  }

  .steps p {
    grid-column: 2;
    font-size: 0.72rem;
    margin: 6px 0;
  }

  .email-banner {
    padding: 10px 14px;
    gap: 8px;
    flex-wrap: wrap;
  }

  .email-banner p {
    font-size: 0.72rem;
  }

  .email-banner .link {
    margin-left: 25px;
  }

  .room-view {
    padding: 23px 14px;
  }

  .stage-top h1 {
    font-size: 1.4rem;
  }

  .stage-top .eyebrow {
    font-size: 0.6rem;
  }

  .prejoin {
    padding: 35px 5px;
  }

  .prejoin h2 {
    font-size: 1.3rem;
  }

  .prejoin p {
    font-size: 0.79rem;
  }

  .prejoin .primary {
    font-size: 0.78rem;
  }

  .prejoin small {
    font-size: 0.67rem;
  }

  .call-controls {
    padding: 11px 8px 8px;
    gap: 9px;
    bottom: 10px;
    border-radius: 12px;
  }

  .call-controls .control-item button {
    width: 40px;
    height: 40px;
    border-radius: 10px;
  }

  .call-controls .control-item button.danger {
    width: 45px;
  }

  .control-item > span {
    font-size: 0.57rem;
  }

  .control-divider {
    display: none;
  }

  .control-item .icon {
    width: 20px;
    height: 20px;
  }

  .help-dialog {
    padding: 24px 18px;
  }

  .dialog-heading {
    gap: 12px;
  }

  .dialog-heading h2 {
    font-size: 1.15rem;
  }

  .dialog-symbol {
    width: 42px;
    height: 42px;
    border-radius: 12px;
  }

  .help-tabs {
    gap: 3px;
  }

  .help-tabs button {
    padding: 9px 8px;
    font-size: 0.72rem;
  }

  .help-content summary {
    font-size: 0.8rem;
  }

  .help-content p {
    font-size: 0.77rem;
  }

  .help-support {
    padding: 14px 12px;
    gap: 10px;
  }

  .help-support a {
    font-size: 0.74rem;
  }

  .help-support .support-mail-icon {
    display: none;
  }

  .help-support .icon-button {
    padding: 0;
  }

  .main-footer {
    padding: 15px 16px;
  }
}