@media (max-width: 820px), (max-width: 960px) and (max-height: 520px) and (orientation: landscape) {
  .modal-root,
  .chat-materials-root {
    inset: var(--mobile-visual-offset-top, 0px) 0 auto;
    width: var(--app-width, 100vw);
    height: var(--mobile-viewport-height, var(--app-height, 100dvh));
    max-width: var(--app-width, 100vw);
    max-height: var(--mobile-viewport-height, var(--app-height, 100dvh));
    overflow: hidden;
  }

  .toast-root {
    inset: var(--mobile-visual-offset-top, 0px) 0 auto;
    width: var(--app-width, 100vw);
    height: var(--mobile-viewport-height, var(--app-height, 100dvh));
    max-width: var(--app-width, 100vw);
    max-height: var(--mobile-viewport-height, var(--app-height, 100dvh));
  }

  .media-volume-control:not(.is-expanded) {
    width: 44px;
    height: 44px;
  }

  .media-volume-control:not(.is-expanded) > .media-volume-trigger {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    border-radius: 13px;
  }

  .media-volume-control:not(.is-expanded) > .media-volume-popover {
    display: none;
  }

  .media-volume-sheet-backdrop {
    position: fixed;
    inset: var(--mobile-visual-offset-top, 0px) 0 auto;
    z-index: 1180;
    box-sizing: border-box;
    width: var(--app-width, 100vw);
    height: var(--mobile-viewport-height, var(--app-height, 100dvh));
    display: block;
    pointer-events: none;
    opacity: 0;
    transition: opacity 160ms ease;
  }

  .media-volume-sheet-backdrop[hidden] {
    display: none !important;
  }

  .media-volume-sheet-backdrop.is-open {
    opacity: 1;
  }

  .media-volume-sheet {
    position: absolute;
    top: var(--media-volume-sheet-top, 8px);
    left: var(--media-volume-sheet-left, 8px);
    box-sizing: border-box;
    width: min(190px, calc(100% - 16px));
    min-height: 48px;
    padding: 7px 10px 7px 12px;
    border: 1px solid rgba(89, 217, 139, 0.34);
    border-radius: 15px;
    display: grid;
    pointer-events: auto;
    color: var(--text);
    background:
      linear-gradient(145deg, rgba(35, 163, 95, 0.18), rgba(10, 14, 11, 0.99)),
      #0a0e0b;
    box-shadow:
      0 14px 34px rgba(0, 0, 0, 0.54),
      0 0 0 1px rgba(255, 255, 255, 0.025) inset;
    transform: translateY(5px) scale(0.98);
    transform-origin: right center;
    transition: transform 160ms ease;
  }

  .media-volume-sheet-backdrop.is-open .media-volume-sheet {
    transform: translate3d(0, 0, 0);
  }

  .media-volume-sheet-row {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 38px;
    align-items: center;
    gap: 8px;
  }

  .media-volume-sheet-row > output {
    color: #dffbe7;
    font-size: 11px;
    font-weight: 950;
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
  }

  .media-volume-sheet-row input[type="range"] {
    width: 100%;
    min-width: 0;
    height: 32px;
    margin: 0;
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    touch-action: none;
  }

  .media-volume-sheet-row input[type="range"]:focus-visible {
    outline: 2px solid rgba(89, 217, 139, 0.5);
    outline-offset: -4px;
    border-radius: 999px;
  }

  .media-volume-sheet-row input[type="range"]::-webkit-slider-thumb {
    width: 22px;
    height: 22px;
    margin-top: -8.5px;
  }

  .media-volume-sheet-row input[type="range"]::-moz-range-thumb {
    width: 16px;
    height: 16px;
  }

  .media-volume-sheet > p {
    margin: 0;
    padding: 7px 8px;
    border-radius: 11px;
    color: rgba(247, 241, 223, 0.72);
    background: rgba(255, 255, 255, 0.035);
    font-size: 11px;
    line-height: 1.35;
    text-align: center;
  }

  .media-volume-sheet > p[hidden] {
    display: none;
  }

  .media-volume-sheet.is-system-volume .media-volume-sheet-row input,
  .media-volume-sheet.is-system-volume .media-volume-sheet-row output {
    display: none;
  }

  .media-volume-sheet.is-system-volume {
    width: min(240px, calc(100% - 16px));
  }

  .media-volume-sheet.is-system-volume .media-volume-sheet-row {
    display: none;
  }

  .toast-root .notice {
    bottom: max(14px, calc(env(safe-area-inset-bottom) + 10px));
    width: max-content;
    max-width: calc(100% - 24px);
    background-color: #101410;
    line-height: 1.35;
    overflow-wrap: anywhere;
  }

  .modal-backdrop {
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    transform: translateZ(0);
  }

  .direct-delete-modal {
    width: min(100% - 20px, 460px);
    max-height: calc(var(--mobile-viewport-height, 100dvh) - 20px);
    padding: 16px;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .direct-delete-actions {
    gap: 6px;
  }

  .direct-delete-actions .button {
    min-height: 46px;
    padding-inline: 7px;
    font-size: 13px;
  }

  .media-preview,
  .media-preview-surface,
  .media-preview video {
    backface-visibility: hidden;
    transform: translateZ(0);
  }

  .media-backdrop {
    padding: 12px;
  }

  .media-preview {
    width: min(340px, calc(var(--app-width, 100vw) - 24px));
    max-height: calc(var(--mobile-viewport-height, 100dvh) - 24px);
  }

  .media-preview.video .media-preview-stage {
    width: min(
      252px,
      calc(var(--app-width, 100vw) - 88px),
      calc(var(--mobile-viewport-height, 100dvh) - 238px)
    );
    min-width: 180px;
    margin: 12px auto 10px;
  }

  .media-preview.video .media-preview-surface {
    width: 100%;
    height: auto;
  }

  .media-camera-controls {
    position: static;
    width: 100%;
    margin-top: 10px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 46px;
    grid-template-areas:
      "zoom switch"
      "status status";
    gap: 6px 8px;
    align-items: center;
    pointer-events: auto;
  }

  .media-camera-controls:not(.has-switch) {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "zoom"
      "status";
  }

  .media-camera-switch {
    position: static;
    grid-area: switch;
    justify-self: end;
    width: 46px;
    height: 46px;
    -webkit-tap-highlight-color: transparent;
  }

  .media-camera-switch svg {
    width: 21px;
    height: 21px;
  }

  .media-camera-zoom {
    position: static;
    grid-area: zoom;
    width: auto;
    min-height: 44px;
    padding: 7px 12px;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 8px;
    transform: none;
  }

  .media-camera-zoom > span {
    font-size: 13px;
  }

  .media-camera-zoom input[type="range"] {
    height: 30px;
  }

  .media-camera-status {
    position: static;
    grid-area: status;
    min-height: 14px;
    max-width: none;
    font-size: 10px;
    line-height: 1.35;
    white-space: normal;
    transform: none;
  }

  .read-info-backdrop {
    padding: 12px;
  }

  .read-info-modal {
    width: min(360px, calc(var(--app-width, 100vw) - 24px));
    max-height: calc(var(--mobile-viewport-height, 100dvh) - 24px);
  }

  .reaction-info-backdrop {
    place-items: end center;
    padding: 10px max(10px, var(--app-safe-right)) max(10px, var(--app-safe-bottom)) max(10px, var(--app-safe-left));
  }

  .reaction-info-modal {
    width: 100%;
    max-height: min(72dvh, calc(var(--mobile-viewport-height, 100dvh) - 20px));
    border-radius: 19px;
  }

  .reaction-info-modal > header { padding: 12px; }

  .message-menu-reaction {
    width: 44px;
    height: 44px;
    border-radius: 11px;
  }

  .message-menu-reactions {
    grid-template-columns: repeat(6, 44px);
    justify-content: space-between;
    gap: 2px;
  }

  .message-menu-reactions-more {
    grid-template-columns: repeat(5, 44px);
    justify-content: space-between;
    gap: 4px;
  }

  .message-reaction-chip {
    position: relative;
    min-width: 52px;
    min-height: 34px;
    padding: 3px 9px;
    border-radius: 13px;
  }

  .message-reaction-chip::before {
    content: "";
    position: absolute;
    inset: -5px 0;
  }

  .reaction-info-modal header > .button.icon {
    width: 44px;
    min-width: 44px;
    min-height: 44px;
  }

  body {
    overflow: hidden;
    width: var(--app-width, 100vw);
    max-width: var(--app-width, 100vw);
  }

  #app {
    width: var(--app-width, 100vw);
    max-width: var(--app-width, 100vw);
    overflow-x: hidden;
  }

  .profile-card-backdrop {
    place-items: center;
    padding: 14px;
  }

  .profile-card {
    width: min(100%, 440px);
    max-height: calc(var(--app-height, 100dvh) - 28px);
    border-radius: 18px;
    backface-visibility: hidden;
    contain: layout paint style;
    transform: translateZ(0);
  }

  .profile-avatar-wrap .avatar,
  .profile-avatar-wrap img {
    backface-visibility: hidden;
  }

  .profile-hero {
    min-height: 116px;
    grid-template-columns: 66px minmax(0, 1fr);
    gap: 14px;
    padding: 20px 60px 18px 18px;
  }

  .profile-avatar-wrap,
  .profile-avatar-wrap .avatar {
    width: 66px;
    height: 66px;
  }

  .profile-name {
    font-size: 20px;
  }

  .profile-content {
    padding: 14px;
  }

  .profile-session-list {
    max-height: none;
    overflow: visible;
    overscroll-behavior: auto;
    scrollbar-gutter: auto;
  }

  .profile-name-policy,
  .profile-identity-card,
  .profile-shared-workspaces {
    border-radius: 12px;
  }

  .profile-identity-summary {
    min-height: 58px;
    grid-template-columns: 36px minmax(0, 1fr) auto;
    gap: 9px;
    padding: 10px;
  }

  .profile-identity-icon {
    width: 36px;
    height: 36px;
    border-radius: 11px;
  }

  .profile-identity-history-hint > span {
    display: none;
  }

  .profile-identity-recent {
    font-size: 8px;
  }

  .profile-public-name-history-row {
    grid-template-columns: minmax(0, 1fr) 11px minmax(0, 1fr);
    gap: 5px;
  }

  .profile-public-name-history-row > time {
    grid-column: 1 / -1;
    padding-left: 1px;
  }

  .profile-shared-workspaces {
    padding: 10px;
  }

  .profile-shared-workspace-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .profile-name-history-list {
    max-height: min(210px, 28dvh);
  }

  .profile-name-history-row {
    grid-template-columns: minmax(0, 1fr) 11px minmax(0, 1fr);
    gap: 5px;
  }

  .profile-name-history-row > time {
    grid-column: 1 / -1;
    padding-left: 1px;
  }

  .profile-primary-action {
    min-height: 46px;
  }

  .profile-account-delete-card {
    grid-template-columns: 36px minmax(0, 1fr) auto;
    gap: 9px;
  }

  .profile-account-delete-icon {
    width: 36px;
    height: 36px;
  }

  .account-deletion-backdrop {
    align-items: end;
    justify-items: stretch;
    padding: 0;
    background: rgba(4, 5, 4, 0.78);
  }

  .account-deletion-dialog {
    width: 100%;
    max-width: none;
    max-height: min(86dvh, calc(var(--mobile-viewport-height, 100dvh) - 12px));
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: 22px 22px 0 0;
    padding-bottom: env(safe-area-inset-bottom);
    animation: accountDeletionSheetIn 180ms cubic-bezier(0.2, 0.72, 0.18, 1);
  }

  .account-deletion-dialog > header {
    min-height: 72px;
    padding: 13px 14px;
  }

  .account-deletion-body {
    padding: 14px;
  }

  .account-deletion-workspaces li {
    grid-template-columns: minmax(0, 1fr);
  }

  .account-deletion-workspaces .button {
    width: 100%;
    min-height: 42px;
    justify-content: center;
  }

  .account-deletion-refresh {
    width: 100%;
    min-height: 42px;
    justify-content: center;
  }

  .account-deletion-actions {
    grid-template-columns: 1fr;
  }

  .account-deletion-actions .button {
    min-height: 48px;
  }

  .account-deletion-actions .button.danger {
    order: -1;
  }

  .account-deletion-resend-row .button {
    width: 100%;
    min-height: 42px;
    justify-content: center;
  }

  @keyframes accountDeletionSheetIn {
    from { opacity: 0; transform: translate3d(0, 18px, 0); }
    to { opacity: 1; transform: translate3d(0, 0, 0); }
  }

  @media (prefers-reduced-motion: reduce) {
    .account-deletion-dialog {
      animation: none;
    }
  }

  .auth-screen {
    min-height: 0;
    grid-template-columns: 1fr;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 26px;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
  }

  .auth-screen:has(input[name="passwordConfirm"]) {
    align-items: start;
  }

  .auth-card {
    width: min(100%, 430px);
    margin: 0 auto;
  }

  .auth-switch {
    min-height: 44px;
    padding: 6px 8px;
    touch-action: manipulation;
  }

  .auth-legal-consent a {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    vertical-align: middle;
    touch-action: manipulation;
  }

  .contact-search-box {
    min-height: 48px;
    grid-template-columns: 18px minmax(0, 1fr) 44px;
    padding-right: 2px;
  }

  .contact-search-box > .button,
  .contact-request-item > .button,
  .contact-profile-button {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    touch-action: manipulation;
  }

  .contact-request-item {
    min-height: 58px;
    grid-template-columns: 30px minmax(0, 1fr) 44px 44px;
    gap: 5px;
  }

  .contact-request-user,
  .contact-requests-more,
  .contact-request-retry {
    min-height: 44px;
    touch-action: manipulation;
  }

  .contact-result {
    grid-template-columns: 30px minmax(0, 1fr) 12px 44px;
  }

  .profile-tab-button {
    width: 44px;
    min-width: 44px;
    flex-basis: 44px;
    min-height: 44px;
    touch-action: manipulation;
  }

  .auth-showcase {
    display: none;
  }

  .app-shell {
    --mobile-nav-rail: calc(62px + var(--app-safe-left));
    --mobile-nav-width: min(calc(var(--app-width, 100vw) - var(--mobile-nav-rail) - 48px), 340px);
    --mobile-sheet-width: min(calc(var(--app-width, 100vw) - 24px), 360px);
    position: absolute;
    inset: 0;
    min-height: 0;
    width: var(--app-width, 100vw);
    max-width: var(--app-width, 100vw);
    height: var(--app-height, 100dvh);
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    overflow: hidden;
    overflow-x: hidden;
  }

  .app-shell.no-right-panel {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
  }

  .mobile-drawer {
    position: fixed;
    inset: var(--mobile-visual-offset-top, 0px) auto auto 0;
    z-index: 60;
    display: grid;
    grid-template-columns: var(--mobile-nav-rail) var(--mobile-nav-width);
    width: calc(var(--mobile-nav-rail) + var(--mobile-nav-width));
    height: var(--mobile-viewport-height, var(--app-height, 100dvh));
    max-height: var(--mobile-viewport-height, var(--app-height, 100dvh));
    min-height: 0;
    overflow: hidden;
    background: rgba(27, 28, 26, 1);
    border-right: 1px solid var(--line-strong);
    box-shadow: 22px 0 54px rgba(0, 0, 0, 0.36);
    transform: translate3d(-100%, 0, 0);
    transition:
      transform var(--mobile-panel-transition),
      visibility 0s linear 210ms;
    visibility: hidden;
    backface-visibility: hidden;
    contain: layout paint style;
    isolation: isolate;
  }

  .server-rail {
    position: relative;
    inset: auto;
    z-index: auto;
    width: var(--mobile-nav-rail);
    height: 100%;
    padding: calc(10px + var(--app-safe-top)) 7px calc(10px + var(--app-safe-bottom)) calc(7px + var(--app-safe-left));
    transform: none;
    transition: none;
    visibility: inherit;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .space-panel {
    position: relative;
    inset: auto;
    z-index: auto;
    width: var(--mobile-nav-width);
    height: 100%;
    min-height: 0;
    max-width: calc(var(--app-width, 100vw) - var(--mobile-nav-rail));
    transform: none;
    transition: none;
    visibility: inherit;
    border-right: 1px solid var(--line-strong);
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .app-shell.mobile-nav-open .mobile-drawer {
    transform: translate3d(0, 0, 0);
    visibility: visible;
    transition:
      transform var(--mobile-panel-transition),
      visibility 0s;
  }

  .mobile-backdrop {
    display: block;
    position: fixed;
    inset: var(--mobile-visual-offset-top, 0px) 0 auto;
    z-index: 50;
    width: var(--app-width, 100vw);
    height: var(--mobile-viewport-height, var(--app-height, 100dvh));
    max-width: var(--app-width, 100vw);
    max-height: var(--mobile-viewport-height, var(--app-height, 100dvh));
    background: rgba(2, 3, 3, 0.68);
    backdrop-filter: none;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
      opacity var(--mobile-panel-transition),
      visibility 0s linear 210ms;
  }

  .app-shell.mobile-nav-open .mobile-backdrop,
  .app-shell.mobile-members-open .mobile-backdrop {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition:
      opacity var(--mobile-panel-transition),
      visibility 0s;
  }

  .space-header {
    min-height: calc(68px + var(--app-safe-top));
    padding: calc(12px + var(--app-safe-top)) 14px 12px;
  }

  .space-panel:not(.home-panel) .space-header {
    min-height: calc(68px + var(--app-safe-top));
    grid-template-columns: minmax(0, 1fr) auto;
    align-content: stretch;
    align-items: center;
    gap: 6px;
  }

  .space-panel:not(.home-panel) .space-title {
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 8px;
    padding-right: 0;
  }

  .space-panel:not(.home-panel) .workspace-name {
    display: block;
    overflow: hidden;
    max-width: 100%;
    font-size: 15px;
    line-height: 1.15;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .space-panel:not(.home-panel) .space-avatar {
    width: 36px;
    height: 36px;
    border-radius: 11px;
    font-size: 12px;
  }

  .space-panel:not(.home-panel) .space-header p {
    margin-top: 3px;
    font-size: 10px;
  }

  .space-panel:not(.home-panel) .space-actions {
    justify-self: end;
    grid-auto-columns: 40px;
    gap: 4px;
    padding-right: 0;
  }

  .space-panel:not(.home-panel) .space-actions .button {
    width: 40px;
    min-width: 40px;
    min-height: 40px;
    border-radius: 11px;
  }

  .space-panel:not(.home-panel) .space-actions .button svg {
    width: 14px;
    height: 14px;
  }

  .space-panel:not(.home-panel) .space-header {
    position: relative;
    z-index: 30;
    overflow: visible;
  }

  .space-panel:not(.home-panel) .workspace-action-direct {
    display: none;
  }

  .space-panel:not(.home-panel) .workspace-action-overflow {
    position: relative;
    display: block;
    width: 40px;
    height: 40px;
  }

  .workspace-action-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 20;
    width: 190px;
    padding: 6px;
    border: 1px solid rgba(89, 217, 139, 0.28);
    border-radius: 10px;
    display: grid;
    gap: 3px;
    background: rgba(18, 20, 17, 0.99);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.42);
  }

  .workspace-action-menu[hidden] {
    display: none;
  }

  .workspace-action-menu button {
    min-width: 0;
    min-height: 36px;
    padding: 0 10px;
    border: 0;
    border-radius: 7px;
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    color: var(--text);
    text-align: left;
    background: transparent;
  }

  .workspace-action-menu button:hover:not(:disabled),
  .workspace-action-menu button:focus-visible {
    background: rgba(89, 217, 139, 0.1);
  }

  .workspace-action-menu button.danger {
    color: #ffb9b3;
  }

  .workspace-action-menu button:disabled {
    opacity: 0.42;
  }

  .workspace-action-menu svg {
    width: 16px;
    height: 16px;
  }

  .workspace-action-menu span {
    overflow: hidden;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .space-actions {
    grid-auto-columns: 32px;
    gap: 5px;
  }

  .space-actions .button {
    width: 32px;
    min-width: 32px;
    min-height: 32px;
  }

  .voice-card {
    margin: 12px;
    padding: 10px 12px;
  }

  .voice-card-top {
    margin-bottom: 8px;
  }

  .voice-card > .voice-microphone-gain-button {
    padding-inline: 10px;
    justify-content: flex-start;
    gap: 5px;
  }

  .voice-card > .voice-microphone-gain-button output {
    margin-left: auto;
  }

  .voice-card > .voice-microphone-gain-button .voice-microphone-gain-muted-status {
    flex: 0 0 auto;
  }

  .voice-occupants {
    min-height: 30px;
    margin-bottom: 8px;
  }

  .voice-mini-actions {
    margin-top: 8px;
  }

  .voice-moderation-person {
    min-height: 38px;
  }

  .chat-panel {
    grid-column: 1;
    grid-row: 1;
    min-height: 0;
    width: var(--app-width, 100vw);
    max-width: var(--app-width, 100vw);
    height: var(--app-height, 100dvh);
    grid-template-rows: 64px auto auto minmax(0, 1fr) auto;
    overflow-x: hidden;
    background: rgba(13, 14, 12, 0.96);
  }

  .chat-header {
    position: relative;
    z-index: 30;
    min-height: 64px;
    padding: 0 10px;
    align-items: center;
    gap: 8px;
    background: rgba(18, 19, 17, 0.98);
    backdrop-filter: none;
  }

  .mobile-nav-toggle,
  .mobile-members-toggle,
  .mobile-panel-close {
    display: grid;
  }

  .chat-title {
    flex: 1 1 auto;
    gap: 8px;
  }

  .title-icon {
    width: 36px;
    height: 36px;
  }

  .title-icon svg {
    width: 21px;
    height: 21px;
  }

  .title-icon .avatar {
    width: 36px;
    height: 36px;
  }

  .title-icon .personal-chat-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
  }

  .chat-title h1 {
    font-size: 16px;
    max-width: none;
  }

  .chat-title p {
    font-size: 11px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .header-actions {
    gap: 6px;
  }

  .messages {
    padding: 14px 10px 8px;
  }

  .pinned-message-bar,
  .message-selection-bar {
    position: relative;
    top: auto;
    right: auto;
    z-index: 20;
    max-width: calc(100% - 16px);
    margin: 6px 8px 0;
  }

  .pinned-message-bar {
    grid-row: 2;
    width: calc(100% - 16px);
    min-width: 0;
    min-height: 44px;
    padding: 2px 3px 2px 6px;
    border-radius: 11px;
  }

  .pinned-message-main {
    max-width: none;
    min-height: 38px;
    padding: 0 4px 0 0;
    grid-template-columns: 5px minmax(0, 1fr);
    gap: 7px;
  }

  .pinned-message-icon {
    display: none;
  }

  .pinned-message-rail {
    height: 30px;
  }

  .pinned-message-text {
    display: flex;
    align-items: baseline;
    gap: 5px;
    overflow: hidden;
    white-space: nowrap;
  }

  .pinned-message-text strong {
    flex: 0 0 auto;
    font-size: 10px;
  }

  .pinned-message-text small {
    flex: 1 1 auto;
    font-size: 11px;
  }

  .pinned-message-author {
    display: none;
  }

  .pinned-message-controls .button {
    width: 44px;
    min-width: 44px;
    min-height: 44px;
    border-radius: 9px;
  }

  .pinned-message-controls {
    flex: 0 0 auto;
    gap: 0;
  }

  .message-selection-bar {
    grid-row: 3;
    width: fit-content;
    min-height: 48px;
    margin-left: auto;
    padding: 2px 3px 2px 12px;
    border-radius: 12px;
  }

  .message-selection-bar .button {
    width: 44px;
    min-width: 44px;
    min-height: 44px;
    border-radius: 10px;
  }

  .message {
    padding: 1px 2px;
  }

  .message .avatar {
    width: 32px;
    height: 32px;
    font-size: 12px;
  }

  .message-head {
    gap: 6px;
  }

  .message-body {
    overflow-wrap: anywhere;
  }

  .message-quote {
    width: fit-content;
    max-width: calc(var(--app-width, 100vw) - 78px);
    margin: 4px 0;
    padding: 7px 9px 7px 10px;
  }

  .message-code-block {
    width: fit-content;
    min-width: min(260px, calc(var(--app-width, 100vw) - 78px));
    max-width: calc(var(--app-width, 100vw) - 78px);
    border-radius: 9px;
  }

  .message-code-block figcaption {
    min-height: 32px;
    padding: 5px 6px 5px 9px;
  }

  .message-code-block code {
    padding: 9px 10px;
    font-size: 12px;
    line-height: 1.44;
  }

  .message-attachments {
    width: 100%;
  }

  .message-link-previews {
    width: min(100%, calc(var(--app-width, 100vw) - 78px));
  }

  .message-link-previews:has(> .link-preview.generic) {
    width: min(100%, 360px);
  }

  .message-link-previews:has(> .link-preview.yandex-music) {
    width: min(100%, 370px);
  }

  .link-preview.yandex-music {
    max-width: 370px;
    border-radius: 11px;
  }

  .yandex-music-preview-card {
    min-height: 100px;
    padding: 8px;
    grid-template-columns: 82px minmax(0, 1fr);
    gap: 10px;
  }

  .yandex-music-preview-artwork {
    width: 82px;
    height: 82px;
    border-radius: 9px;
  }

  .yandex-music-preview-copy > strong {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    white-space: normal;
  }

  .yandex-music-preview-actions {
    gap: 5px;
  }

  .yandex-music-preview-listen,
  .yandex-music-preview-external {
    min-height: 44px;
    padding-inline: 10px;
  }

  .yandex-music-preview-external > span {
    display: none;
  }

  .yandex-music-preview-external {
    width: 44px;
    min-width: 44px;
    padding: 0;
  }

  .link-preview-card {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  .link-preview-info strong {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .link-preview-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .link-preview-inline-action,
  .link-preview-external {
    width: 100%;
  }

  .link-preview.generic {
    width: 100%;
    max-width: 360px;
  }

  .yandex-music-player-root {
    inset: var(--mobile-visual-offset-top, 0px) 0 auto;
    width: var(--app-width, 100vw);
    height: var(--mobile-viewport-height, var(--app-height, 100dvh));
    max-width: var(--app-width, 100vw);
    max-height: var(--mobile-viewport-height, var(--app-height, 100dvh));
  }

  .yandex-music-player {
    right: 8px;
    bottom: calc(var(--footer-height) + var(--app-safe-bottom) + 8px);
    width: calc(100% - 16px);
    max-height: min(420px, calc(var(--mobile-viewport-height, 100dvh) - var(--footer-height) - var(--app-safe-bottom) - 22px));
    border-radius: 17px;
    transform-origin: center bottom;
  }

  .yandex-music-player-root.is-detached .yandex-music-player {
    left: auto;
    top: auto;
    right: 8px;
    bottom: calc(var(--footer-height) + var(--app-safe-bottom) + 8px);
  }

  .yandex-music-player-header[data-yandex-music-drag-handle] {
    cursor: default;
    touch-action: auto;
  }

  .yandex-music-player-root.is-expanded .yandex-music-player {
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }

  .yandex-music-player-header {
    min-height: 80px;
    padding: 10px;
    grid-template-columns: 58px minmax(0, 1fr) auto;
    gap: 9px;
  }

  .yandex-music-player-tools {
    gap: 3px;
  }

  .yandex-music-player-tool {
    width: 44px;
    min-width: 44px;
    height: 44px;
    border-radius: 12px;
  }

  .yandex-music-player-tool.external {
    display: none;
  }

  .yandex-music-player-tool.reset-position {
    display: none;
  }

  .yandex-music-player-root.is-collapsed .yandex-music-player {
    width: min(350px, calc(100% - 16px));
  }

  .yandex-music-player-root.is-collapsed .yandex-music-player-header {
    min-height: 70px;
    padding: 7px;
    grid-template-columns: 54px minmax(0, 1fr) auto;
    gap: 8px;
  }

  .yandex-music-player-root.is-collapsed .yandex-music-player-artwork {
    width: 54px;
    height: 54px;
    border-radius: 9px;
  }

  @media (max-width: 350px) {
    .yandex-music-preview-card {
      grid-template-columns: 74px minmax(0, 1fr);
      gap: 8px;
    }

    .yandex-music-preview-artwork {
      width: 74px;
      height: 74px;
    }

    .yandex-music-preview-listen {
      padding-inline: 8px;
      font-size: 10px;
    }

    .yandex-music-player-header {
      grid-template-columns: 52px minmax(0, 1fr) auto;
      gap: 6px;
    }

    .yandex-music-player-artwork {
      width: 52px;
      height: 52px;
    }

    .yandex-music-player-tool {
      width: 42px;
      min-width: 42px;
      height: 42px;
    }
  }

  .generic-link-preview-card {
    min-height: 58px;
    padding: 9px 10px 9px 11px;
  }

  .generic-link-preview-card.has-thumbnail {
    min-height: 88px;
    grid-template-columns: minmax(0, 1fr) 70px;
    gap: 9px;
  }

  .generic-link-preview-thumb {
    width: 70px;
    height: 70px;
    border-radius: 7px;
  }

  .generic-link-preview-title {
    font-size: 13px;
  }

  .generic-link-preview-description {
    font-size: 11px;
  }

  .message-media-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .message-media-grid.count-1 {
    grid-template-columns: minmax(0, 1fr);
  }

  .document-attachment {
    padding: 7px 8px;
    grid-template-columns: 34px minmax(0, 1fr) 28px;
    column-gap: 8px;
  }

  .document-attachment.has-embedded-meta {
    padding-bottom: 6px;
    row-gap: 1px;
  }

  .document-attachment-open {
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 8px;
  }

  .document-attachment-icon {
    width: 34px;
    height: 34px;
  }

  .document-attachment-footer {
    margin-top: -1px;
  }

  .attachment-viewer-backdrop {
    padding: 0;
    background: #000;
    contain: layout;
  }

  .attachment-viewer-shell {
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
  }

  .attachment-viewer-top {
    top: max(9px, env(safe-area-inset-top));
    left: max(9px, env(safe-area-inset-left));
    right: max(9px, env(safe-area-inset-right));
    gap: 8px;
  }

  .attachment-viewer-title {
    max-width: min(46%, calc(100% - 196px));
    padding: 9px 12px;
    backdrop-filter: none;
  }

  .attachment-viewer-actions {
    gap: 6px;
    padding: 5px;
    border-radius: 14px;
    backdrop-filter: none;
    max-width: 54%;
    overflow: hidden;
  }

  .attachment-viewer-actions-scroll {
    min-width: 0;
    flex: 1 1 auto;
    gap: 6px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }

  .attachment-viewer-actions-scroll::-webkit-scrollbar {
    display: none;
  }

  .attachment-viewer-close {
    flex: 0 0 40px;
  }

  .attachment-viewer-actions .button.icon {
    width: 40px;
    min-width: 40px;
    min-height: 40px;
  }

  .attachment-viewer-stage {
    height: 100%;
    max-height: none;
    padding: 0;
    place-items: center;
    overflow: visible;
    touch-action: none;
  }

  .attachment-viewer-frame {
    animation: none;
  }

  .attachment-viewer-carousel {
    width: var(--app-width, 100vw);
    height: var(--mobile-viewport-height, var(--app-height, 100dvh));
    max-width: var(--app-width, 100vw);
    max-height: var(--mobile-viewport-height, var(--app-height, 100dvh));
  }

  .attachment-viewer-track {
    width: 300%;
    height: 100%;
  }

  .attachment-viewer-slide {
    width: 33.333333%;
    height: 100%;
    flex-basis: 33.333333%;
  }

  .attachment-viewer-slide-preview {
    max-width: calc(var(--app-width, 100vw) - 18px);
    max-height: calc(var(--mobile-viewport-height, var(--app-height, 100dvh)) - max(18px, var(--app-safe-bottom)));
  }

  .attachment-viewer-slide-preview.is-video {
    max-width: var(--app-width, 100vw);
    max-height: var(--mobile-viewport-height, var(--app-height, 100dvh));
    border-radius: 12px;
  }

  .attachment-viewer-image,
  .attachment-viewer-image-preview,
  .attachment-viewer-video {
    max-width: calc(var(--app-width, 100vw) - 18px);
    max-height: calc(var(--mobile-viewport-height, var(--app-height, 100dvh)) - max(18px, var(--app-safe-bottom)));
  }

  .attachment-viewer-backdrop.is-portrait-video .attachment-viewer-frame,
  .attachment-viewer-backdrop.is-portrait-video .attachment-viewer-video {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    border-radius: 0;
  }

  .attachment-viewer-backdrop.is-portrait-video .attachment-viewer-video {
    object-fit: cover;
  }

  .rasta-video-player {
    max-width: var(--app-width, 100vw);
    max-height: var(--mobile-viewport-height, var(--app-height, 100dvh));
    border-radius: 12px;
    box-shadow: 0 18px 58px rgba(0, 0, 0, 0.52);
  }

  .rasta-video-player.is-portrait {
    border-color: rgba(247, 241, 223, 0.09);
  }

  .attachment-viewer-backdrop.is-portrait-video .rasta-video-player .attachment-viewer-video,
  .rasta-video-player .attachment-viewer-video,
  .rasta-video-player .rasta-video-poster,
  .rasta-video-player .rasta-video-poster-fallback {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    border-radius: inherit;
    object-fit: contain;
  }

  .rasta-video-controls {
    right: auto;
    bottom: max(10px, env(safe-area-inset-bottom));
    left: 50%;
    width: min(520px, calc(100% - max(16px, env(safe-area-inset-left)) - max(16px, env(safe-area-inset-right))));
    padding: 9px 9px 8px;
    box-sizing: border-box;
    border-radius: 14px;
    backdrop-filter: none;
    background:
      linear-gradient(135deg, rgba(89, 217, 139, 0.08), transparent 48%),
      rgba(8, 11, 8, 0.88);
  }

  .rasta-video-center-control {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 9;
    width: 52px;
    min-width: 52px;
    height: 52px;
    padding: 0;
    border: 1px solid rgba(247, 241, 223, 0.18);
    border-radius: 18px;
    display: grid;
    place-items: center;
    color: rgba(255, 254, 245, 0.96);
    background: rgba(8, 12, 9, 0.68);
    box-shadow:
      0 14px 36px rgba(0, 0, 0, 0.34),
      inset 0 1px 0 rgba(255, 255, 255, 0.06);
    opacity: 1;
    pointer-events: auto;
    transform: translate3d(-50%, -50%, 0) scale(1);
    transition: opacity 160ms ease, transform 160ms ease, background 130ms ease;
    -webkit-tap-highlight-color: transparent;
  }

  .rasta-video-center-control svg {
    width: 22px;
    height: 22px;
  }

  .rasta-video-center-control:active {
    background: rgba(22, 46, 29, 0.82);
    transform: translate3d(-50%, -50%, 0) scale(0.92);
  }

  .rasta-video-player.controls-hidden .rasta-video-center-control {
    opacity: 0;
    pointer-events: none;
    transform: translate3d(-50%, -50%, 0) scale(0.9);
  }

  .rasta-video-player:not(.is-playing) .rasta-video-center-control,
  .rasta-video-player.is-ended .rasta-video-center-control {
    opacity: 1;
    pointer-events: auto;
    transform: translate3d(-50%, -50%, 0) scale(1);
  }

  .rasta-video-button[data-video-control="toggle"] {
    display: none;
  }

  .rasta-video-timeline {
    height: 22px;
  }

  .rasta-video-track,
  .rasta-video-timeline:hover .rasta-video-track,
  .rasta-video-timeline:focus-within .rasta-video-track {
    height: 5px;
  }

  .rasta-video-seek {
    height: 22px;
  }

  .rasta-video-seek::-webkit-slider-thumb {
    width: 16px;
    height: 16px;
    margin-top: 3px;
    opacity: 1;
  }

  .rasta-video-seek::-moz-range-thumb {
    width: 13px;
    height: 13px;
    opacity: 1;
  }

  .rasta-video-toolbar {
    height: 44px;
    gap: 3px;
  }

  .rasta-video-button {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    border-radius: 11px;
  }

  .rasta-video-button svg {
    width: 19px;
    height: 19px;
  }

  .rasta-video-time {
    min-width: 78px;
    margin-left: 0;
    font-size: 10px;
  }

  .rasta-video-volume-range {
    display: none;
  }

  .rasta-video-button.rate {
    min-width: 44px;
    padding: 0 6px;
  }

  .rasta-video-toolbar-spacer {
    min-width: 0;
  }

  .rasta-video-speed-menu {
    right: -42px;
    bottom: calc(100% + 9px);
    width: 94px;
    backdrop-filter: none;
  }

  .rasta-video-speed-menu button {
    min-height: 44px;
  }

  @media (max-width: 350px) {
    .rasta-video-controls {
      right: auto;
      left: 50%;
      width: calc(100% - max(14px, env(safe-area-inset-left)) - max(14px, env(safe-area-inset-right)));
      padding-right: 7px;
      padding-left: 7px;
    }

    .rasta-video-toolbar {
      gap: 2px;
    }

    .rasta-video-button {
      width: 44px;
      min-width: 44px;
      height: 44px;
      min-height: 44px;
    }

    .rasta-video-time {
      min-width: 0;
      flex: 0 1 64px;
    }

    .rasta-video-button.rate {
      min-width: 44px;
      padding-right: 4px;
      padding-left: 4px;
    }
  }

  .rasta-video-seek-feedback {
    width: 56px;
    height: 56px;
    border-radius: 19px;
    backdrop-filter: none;
  }

  .rasta-video-seek-feedback.seek-back {
    left: 13%;
  }

  .rasta-video-seek-feedback.seek-forward {
    right: 13%;
  }

  .rasta-video-loading,
  .rasta-video-error {
    backdrop-filter: none;
  }

  .rasta-video-player:fullscreen,
  .rasta-video-player.is-fullscreen {
    width: 100vw !important;
    height: 100dvh !important;
    border-radius: 0;
  }

  .rasta-video-player:fullscreen .rasta-video-controls,
  .rasta-video-player.is-fullscreen .rasta-video-controls {
    bottom: max(12px, env(safe-area-inset-bottom));
    width: min(520px, calc(100% - max(16px, env(safe-area-inset-left)) - max(16px, env(safe-area-inset-right))));
  }

  .rasta-video-player.is-short-video .rasta-video-controls,
  .rasta-video-player.is-short-video:fullscreen .rasta-video-controls,
  .rasta-video-player.is-short-video.is-fullscreen .rasta-video-controls {
    inset: 0;
    width: auto;
    height: auto;
    padding: 0;
    border: 0;
    border-radius: inherit;
    background: none;
    box-shadow: none;
    pointer-events: none;
    transform: none;
  }

  .rasta-video-player.is-short-video.controls-hidden .rasta-video-controls {
    transform: none;
  }

  .rasta-video-player.is-short-video .rasta-video-toolbar {
    position: absolute;
    inset: 0;
    height: auto;
    display: block;
    pointer-events: none;
  }

  .rasta-video-player.is-short-video .rasta-video-timeline {
    position: absolute;
    right: max(12px, env(safe-area-inset-right));
    bottom: max(5px, env(safe-area-inset-bottom));
    left: max(12px, env(safe-area-inset-left));
    height: 22px;
    pointer-events: auto;
  }

  .rasta-video-player.is-short-video .rasta-video-track,
  .rasta-video-player.is-short-video .rasta-video-timeline:hover .rasta-video-track,
  .rasta-video-player.is-short-video .rasta-video-timeline:focus-within .rasta-video-track {
    height: 3px;
    background: rgba(247, 241, 223, 0.3);
  }

  .rasta-video-player.is-short-video .rasta-video-seek::-webkit-slider-thumb {
    width: 14px;
    height: 14px;
    margin-top: 4px;
    opacity: 0;
  }

  .rasta-video-player.is-short-video .rasta-video-seek::-moz-range-thumb {
    width: 11px;
    height: 11px;
    opacity: 0;
  }

  .rasta-video-player.is-short-video .rasta-video-timeline:active .rasta-video-seek::-webkit-slider-thumb,
  .rasta-video-player.is-short-video .rasta-video-seek:focus-visible::-webkit-slider-thumb,
  .rasta-video-player.is-short-video .rasta-video-timeline:active .rasta-video-seek::-moz-range-thumb,
  .rasta-video-player.is-short-video .rasta-video-seek:focus-visible::-moz-range-thumb {
    opacity: 1;
  }

  .rasta-video-player.is-short-video .rasta-video-time {
    position: absolute;
    bottom: max(26px, calc(env(safe-area-inset-bottom) + 21px));
    left: max(12px, env(safe-area-inset-left));
    min-width: 0;
    padding: 4px 7px;
    border-radius: 999px;
    color: rgba(255, 254, 245, 0.9);
    background: rgba(5, 8, 6, 0.5);
    font-size: 10px;
    line-height: 1;
    pointer-events: none;
  }

  .rasta-video-player.is-short-video .rasta-video-volume {
    position: absolute;
    top: max(10px, env(safe-area-inset-top));
    left: max(10px, env(safe-area-inset-left));
    pointer-events: auto;
  }

  .rasta-video-player.is-short-video .rasta-video-button.fullscreen {
    position: absolute;
    top: max(10px, env(safe-area-inset-top));
    right: max(10px, env(safe-area-inset-right));
    pointer-events: auto;
  }

  .rasta-video-player.is-short-video .rasta-video-speed,
  .rasta-video-player.is-short-video .rasta-video-button.pip,
  .rasta-video-player.is-short-video .rasta-video-toolbar-spacer {
    display: none;
  }

  .rasta-video-player.is-short-video .rasta-video-more {
    position: absolute;
    top: max(10px, env(safe-area-inset-top));
    right: max(58px, calc(env(safe-area-inset-right) + 48px));
    display: block;
    pointer-events: auto;
  }

  .rasta-video-player.is-short-video .rasta-video-button,
  .rasta-video-player.is-short-video .rasta-video-button.more {
    width: 44px;
    min-width: 44px;
    height: 44px;
    border-color: rgba(247, 241, 223, 0.13);
    border-radius: 50%;
    background: rgba(5, 8, 6, 0.52);
  }

  .rasta-video-player.is-short-video .rasta-video-center-control {
    width: 48px;
    min-width: 48px;
    height: 48px;
    border-radius: 50%;
  }

  .rasta-video-more-menu {
    position: absolute;
    top: calc(100% + 7px);
    right: -58px;
    width: min(330px, calc(var(--app-width, 100vw) - 20px));
    padding: 10px;
    border: 1px solid rgba(247, 241, 223, 0.14);
    border-radius: 16px;
    color: #f7f1df;
    background: rgba(8, 11, 8, 0.96);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.44);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate3d(0, -5px, 0) scale(0.98);
    transform-origin: right top;
    transition: opacity 140ms ease, transform 140ms ease, visibility 140ms ease;
  }

  .rasta-video-player.is-more-open .rasta-video-more-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
  }

  .rasta-video-more-title {
    display: block;
    margin: 1px 2px 8px;
    color: rgba(247, 241, 223, 0.62);
    font-size: 10px;
    font-weight: 760;
  }

  .rasta-video-more-rates {
    display: grid;
    grid-template-columns: repeat(6, minmax(44px, 1fr));
    gap: 3px;
  }

  .rasta-video-more-rates button,
  .rasta-video-more-pip {
    min-height: 44px;
    padding: 0 6px;
    border: 0;
    border-radius: 10px;
    color: rgba(247, 241, 223, 0.82);
    background: rgba(247, 241, 223, 0.07);
    font: inherit;
    font-size: 11px;
    font-weight: 780;
  }

  .rasta-video-more-rates button.active {
    color: #eaffe9;
    background: rgba(89, 217, 139, 0.2);
  }

  .rasta-video-more-pip {
    width: 100%;
    margin-top: 7px;
    display: none;
    align-items: center;
    gap: 8px;
  }

  .rasta-video-more-pip svg {
    width: 17px;
    height: 17px;
  }

  .rasta-video-player.can-pip .rasta-video-more-pip {
    display: flex;
  }

  .rasta-video-player.is-short-video.is-landscape .rasta-video-more-pip {
    display: none;
  }

  .attachment-viewer-nav {
    width: 40px;
    min-height: 52px;
    backdrop-filter: none;
  }

  .attachment-viewer-nav.prev {
    left: max(7px, env(safe-area-inset-left));
  }

  .attachment-viewer-nav.next {
    right: max(7px, env(safe-area-inset-right));
  }

  .people-panel {
    position: fixed;
    top: var(--mobile-visual-offset-top, 0px);
    right: 0;
    bottom: auto;
    z-index: 60;
    display: grid;
    width: var(--mobile-sheet-width);
    max-width: var(--app-width, 100vw);
    height: var(--mobile-viewport-height, var(--app-height, 100dvh));
    max-height: var(--mobile-viewport-height, var(--app-height, 100dvh));
    transform: translate3d(104%, 0, 0);
    transition:
      transform 210ms ease,
      visibility 210ms ease;
    visibility: hidden;
    border-left: 1px solid var(--line-strong);
    border-right: 0;
    box-shadow: -22px 0 54px rgba(0, 0, 0, 0.36);
    backface-visibility: hidden;
    contain: layout paint style;
  }

  .app-shell.mobile-members-open .people-panel {
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }

  .people-header {
    min-height: 64px;
    padding: 0 12px 0 14px;
  }

  .people-header > span {
    margin-left: auto;
  }

  .members-panel .people-header {
    min-height: 68px;
  }

  .members-panel .people-header-copy h3 {
    font-size: 12px;
  }

  .people-header-copy small {
    font-size: 9px;
  }

  .member-list {
    padding: 10px;
  }

  .member-list-notice-slot {
    padding: 8px 10px 0;
  }

  .member-list-state {
    min-height: 144px;
    padding: 28px 18px;
  }

  .member-list-notice {
    min-height: 40px;
    padding: 6px 8px 6px 10px;
  }

  .member {
    min-height: 52px;
    grid-template-columns: 36px minmax(0, 1fr) 12px 44px;
  }

  .member-action {
    opacity: 1;
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
  }

  .composer-zone {
    min-height: auto;
    padding: 8px 10px calc(8px + var(--app-safe-bottom));
    background: rgba(10, 11, 10, 0.94);
  }

  .composer {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 8px;
    align-items: end;
  }

  .composer-tools {
    min-height: 38px;
    gap: 6px;
    overflow: visible;
    padding-bottom: 3px;
    scrollbar-width: none;
  }

  .composer-tools::-webkit-scrollbar {
    display: none;
  }

  .composer-tools .button {
    width: 38px;
    min-width: 38px;
    min-height: 38px;
  }

  .composer-box {
    min-width: 0;
  }

  .composer-format-toolbar {
    max-width: calc(var(--app-width, 100vw) - 24px);
    overflow-x: auto;
    scrollbar-width: none;
    backdrop-filter: none;
  }

  .composer-format-toolbar::-webkit-scrollbar {
    display: none;
  }

  .composer-format-toolbar.link-mode {
    width: calc(var(--app-width, 100vw) - 24px);
    max-width: calc(var(--app-width, 100vw) - 24px);
  }

  .composer-format-toolbar .button.icon {
    width: 33px;
    min-width: 33px;
    min-height: 33px;
  }

  .composer-box.has-attachments {
    grid-template-columns: minmax(0, 1fr);
  }

  .composer-box.has-attachments .attachment-draft,
  .composer-box.has-attachments .composer-input {
    grid-column: 1;
  }

  .attach-menu {
    left: 0;
    width: min(304px, calc(var(--app-width, 100vw) - 18px));
  }

  .attachment-draft-item {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  .attachment-draft-preview {
    width: 38px;
    height: 38px;
  }

  .attachment-drop-overlay {
    inset: 56px 0 calc(62px + var(--app-safe-bottom)) 0;
  }

  .textarea {
    min-height: 44px;
    max-height: 112px;
    padding-right: 90px;
  }

  .composer-actions {
    right: 3px;
    bottom: 3px;
    gap: 2px;
    background: rgba(7, 8, 7, 0.72);
    backdrop-filter: none;
  }

  .composer-actions .button {
    width: 36px;
    min-width: 36px;
    min-height: 36px;
  }

  .emoji-picker {
    right: 0;
    bottom: calc(100% + 8px);
    width: min(420px, calc(var(--app-width, 100vw) - 20px));
    height: min(284px, calc(100dvh - 148px));
    max-height: min(284px, 44dvh);
    overflow: hidden;
  }

  .emoji-pack-tab {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
  }

  .emoji-choice {
    width: 44px;
    height: 44px;
  }

  .screen-float {
    left: 10px;
    right: 10px;
    bottom: calc(82px + var(--app-safe-bottom));
    width: auto;
    max-height: min(42dvh, 320px);
    grid-template-rows: 40px minmax(0, auto);
  }

  .screen-dock,
  .activity-dock-stack,
  .music-float {
    display: none;
  }

  .space-panel-footer {
    position: relative;
    z-index: 2;
    max-height: min(52dvh, 430px);
    overflow: hidden;
    display: grid;
    grid-template-rows: minmax(0, auto) auto;
    align-content: end;
    background: rgba(13, 14, 12, 0.98);
  }

  .space-panel-footer .user-strip {
    min-height: calc(var(--footer-height) + var(--app-safe-bottom));
    height: calc(var(--footer-height) + var(--app-safe-bottom));
    padding-bottom: var(--app-safe-bottom);
  }

  .mobile-panel-activity {
    min-width: 0;
    max-height: min(38dvh, 310px);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 10px 10px 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: grid;
    gap: 8px;
    scrollbar-width: thin;
  }

  .mobile-panel-activity > div {
    min-width: 0;
  }

  .mobile-panel-activity .active-voice-dock,
  .mobile-panel-activity .mobile-screen-card,
  .mobile-panel-activity .mobile-music-card {
    width: 100%;
    margin: 0;
    box-shadow: none;
    backdrop-filter: none;
  }

  .mobile-panel-activity .active-voice-dock {
    border-radius: 12px;
  }

  .mobile-screen-card,
  .mobile-music-card {
    width: calc(100% - 28px);
    box-sizing: border-box;
    margin: -2px 14px 12px;
    padding: 8px;
    border: 1px solid rgba(89, 217, 139, 0.28);
    border-radius: 12px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    background:
      linear-gradient(135deg, rgba(35, 163, 95, 0.14), transparent 58%),
      rgba(255, 255, 255, 0.045);
  }

  .mobile-music-card.music-dock,
  .mobile-music-card.music-dock.has-nav {
    position: relative;
    isolation: isolate;
    min-height: 86px;
    grid-template-columns: 24px 34px 24px minmax(0, 1fr) 44px 44px;
    grid-template-rows: minmax(24px, auto) 44px;
    grid-template-areas:
      "main main main main main main"
      "prev play next . volume close";
    align-content: center;
    margin-top: -4px;
    gap: 7px;
  }

  .mobile-music-card.music-dock.has-car-mode:not(.has-share),
  .mobile-music-card.music-dock.has-nav.has-car-mode:not(.has-share),
  .mobile-music-card.music-dock.has-share:not(.has-car-mode),
  .mobile-music-card.music-dock.has-nav.has-share:not(.has-car-mode) {
    grid-template-columns: 24px 34px 24px minmax(0, 1fr) 44px 44px 44px;
    grid-template-areas:
      "main main main main main main main"
      "prev play next . volume share close";
  }

  .mobile-music-card.music-dock.has-car-mode:not(.has-share),
  .mobile-music-card.music-dock.has-nav.has-car-mode:not(.has-share) {
    grid-template-areas:
      "main main main main main main main"
      "prev play next . volume car close";
  }

  .mobile-music-card.music-dock.has-car-mode.has-share,
  .mobile-music-card.music-dock.has-nav.has-car-mode.has-share {
    grid-template-columns: 24px 34px 24px minmax(0, 1fr) 44px 44px 44px 44px;
    grid-template-rows: minmax(24px, auto) 44px;
    grid-template-areas:
      "main main main main main main main main"
      "prev play next . volume share car close";
  }

  .mobile-music-card button {
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    user-select: none;
  }

  .mobile-music-card > .music-dock-step[data-action="prev-music-track"],
  .mobile-music-card > .music-dock-step[data-seconds="-15"] {
    grid-area: prev;
  }

  .mobile-music-card > .music-dock-play {
    grid-area: play;
  }

  .mobile-music-card > .music-dock-step[data-action="next-music-track"],
  .mobile-music-card > .music-dock-step[data-seconds="30"] {
    grid-area: next;
  }

  .mobile-music-card .music-car-mode-entry {
    grid-area: car;
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    border-radius: 13px;
    color: #b8efbc;
    border-color: rgba(143, 224, 151, 0.24);
    background: rgba(97, 184, 108, 0.08);
  }

  .mobile-music-card .music-share-current {
    grid-area: share;
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    border-radius: 13px;
  }

  .mobile-music-card > .button:last-child {
    grid-area: close;
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    border-radius: 13px;
  }

  .mobile-music-card .music-dock-progress {
    position: relative;
    height: 16px;
    margin: -6px 0;
    overflow: visible;
    touch-action: none;
    background: transparent;
  }

  .mobile-music-card .music-dock-progress::before {
    content: "";
    position: absolute;
    top: 6px;
    right: 0;
    bottom: 6px;
    left: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.09);
  }

  .mobile-music-card .music-dock-progress span {
    position: absolute;
    top: 6px;
    left: 0;
    z-index: 1;
    height: 4px;
  }

  .mobile-music-card .music-dock-progress.seeking::before {
    background: rgba(255, 255, 255, 0.15);
  }

  .mobile-music-card .music-dock-main {
    grid-area: main;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto 16px;
    align-items: center;
    gap: 2px 8px;
  }

  .mobile-music-card .music-dock-head {
    grid-column: 1;
    grid-row: 1;
  }

  .mobile-music-card .music-dock-main > small {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    white-space: nowrap;
  }

  .mobile-music-card .music-dock-main > .music-dock-progress {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .mobile-music-card .music-dock-main,
  .mobile-music-card > .music-dock-step,
  .mobile-music-card > .music-dock-play,
  .mobile-music-card > .music-volume,
  .mobile-music-card > .button {
    align-self: center;
  }

  .mobile-music-card .music-dock-main {
    transition: opacity 120ms ease;
  }

  .mobile-music-card .music-volume {
    grid-area: volume;
    z-index: 8;
  }

  .mobile-music-card .music-volume,
  .mobile-music-card .music-volume > .media-volume-trigger {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    border-radius: 13px;
  }

  .mobile-music-card .music-volume svg,
  .mobile-music-card .music-share-current svg,
  .mobile-music-card .music-car-mode-entry svg {
    width: 16px;
    height: 16px;
  }

  .mobile-music-card .music-volume::before {
    display: none;
  }

  @media (max-width: 340px) {
    .mobile-music-card.music-dock.has-car-mode.has-share,
    .mobile-music-card.music-dock.has-nav.has-car-mode.has-share {
      grid-template-columns: 22px 34px 22px minmax(0, 1fr) 40px 40px 40px 40px;
      gap: 4px;
    }

    .mobile-music-card.has-share .music-volume,
    .mobile-music-card.has-share .music-volume > .media-volume-trigger,
    .mobile-music-card.has-share .music-share-current,
    .mobile-music-card.has-share .music-car-mode-entry,
    .mobile-music-card.has-share > .button:last-child {
      width: 40px;
      min-width: 40px;
      height: 40px;
      min-height: 40px;
    }
  }

  .mobile-panel-activity .mobile-music-card.music-dock,
  .mobile-panel-activity .mobile-music-card.music-dock.has-nav,
  .mobile-panel-activity .mobile-music-card.music-dock.has-car-mode,
  .mobile-panel-activity .mobile-music-card.music-dock.has-share,
  .mobile-panel-activity .mobile-music-card.music-dock.has-car-mode.has-share,
  .mobile-panel-activity .mobile-music-card.music-dock.has-nav.has-car-mode.has-share {
    min-width: 0;
    max-width: 100%;
    min-height: 134px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: minmax(24px, auto) 36px 44px;
    grid-template-areas:
      "main main main main"
      "prev play play next"
      "volume . . close";
    column-gap: 4px;
    row-gap: 7px;
    overflow: hidden;
  }

  .mobile-panel-activity .mobile-music-card.music-dock.has-car-mode:not(.has-share),
  .mobile-panel-activity .mobile-music-card.music-dock.has-nav.has-car-mode:not(.has-share) {
    grid-template-areas:
      "main main main main"
      "prev play play next"
      "volume . car close";
  }

  .mobile-panel-activity .mobile-music-card.music-dock.has-share:not(.has-car-mode),
  .mobile-panel-activity .mobile-music-card.music-dock.has-nav.has-share:not(.has-car-mode) {
    grid-template-areas:
      "main main main main"
      "prev play play next"
      "volume share . close";
  }

  .mobile-panel-activity .mobile-music-card.music-dock.has-car-mode.has-share,
  .mobile-panel-activity .mobile-music-card.music-dock.has-nav.has-car-mode.has-share {
    grid-template-areas:
      "main main main main"
      "prev play play next"
      "volume share car close";
  }

  .mobile-panel-activity .mobile-music-card .music-dock-main {
    width: 100%;
    justify-self: stretch;
  }

  .mobile-panel-activity .mobile-music-card > .music-dock-step,
  .mobile-panel-activity .mobile-music-card > .music-dock-play,
  .mobile-panel-activity .mobile-music-card > .music-volume,
  .mobile-panel-activity .mobile-music-card > .button {
    justify-self: center;
  }

  @media (max-width: 340px) {
    .mobile-panel-activity .mobile-music-card .music-volume,
    .mobile-panel-activity .mobile-music-card .music-volume > .media-volume-trigger,
    .mobile-panel-activity .mobile-music-card .music-share-current,
    .mobile-panel-activity .mobile-music-card .music-car-mode-entry,
    .mobile-panel-activity .mobile-music-card > .button:last-child {
      width: 40px;
      min-width: 40px;
      height: 40px;
      min-height: 40px;
    }
  }

  .mobile-screen-main {
    min-width: 0;
    display: grid;
    gap: 3px;
  }

  .mobile-screen-main .screen-live-meta {
    min-width: 0;
    gap: 3px;
  }

  .mobile-screen-main .screen-viewer-count {
    font-size: 9px;
  }

  .mobile-screen-main .screen-viewer-count svg {
    width: 12px;
    height: 12px;
  }

  .mobile-screen-live {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--green-2);
    font-size: 9px;
    font-weight: 900;
    text-transform: uppercase;
  }

  .mobile-screen-live i {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: var(--green-2);
    box-shadow: 0 0 0 4px rgba(89, 217, 139, 0.12);
  }

  .mobile-screen-main strong {
    min-width: 0;
    overflow: hidden;
    color: var(--text);
    font-size: 12px;
    line-height: 1.1;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .mobile-screen-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 4px;
  }

  .mobile-screen-actions .button {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
  }

  .mobile-screen-actions .screen-watch-cta {
    width: auto;
    min-width: 96px;
    min-height: 44px;
    padding: 0 11px;
    gap: 6px;
    font-size: 11px;
  }

  .mobile-screen-card.screen-watch-available,
  .mobile-screen-card.screen-watch-joining {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .mobile-screen-card .screen-audio-state {
    grid-column: 1 / -1;
    justify-self: stretch;
    width: 100%;
    max-width: none;
    box-sizing: border-box;
  }

  .mobile-screen-card .screen-volume.media-volume-control {
    grid-column: auto;
    justify-self: end;
    width: 44px;
    max-width: 44px;
  }

  .mobile-screen-card.compact-screen-audio {
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 6px;
  }

  .mobile-screen-card.compact-screen-audio .screen-audio-state {
    grid-column: auto;
    justify-self: end;
    width: auto;
    max-width: 72px;
  }

  .mobile-screen-card .screen-volume input[type="range"] {
    width: 100%;
    min-width: 0;
  }

  .screen-float-header {
    padding: 6px 7px 6px 10px;
  }

  .screen-float.expanded {
    top: max(8px, env(safe-area-inset-top));
    right: 8px;
    bottom: max(8px, var(--app-safe-bottom));
    left: 8px;
    grid-template-rows: 44px minmax(0, 1fr);
  }

  .screen-float-media {
    max-height: calc(var(--mobile-media-max-height, 42dvh) - 40px);
    backface-visibility: hidden;
    contain: paint;
  }

  .screen-float-media video,
  .circle-shell,
  .circle-video {
    backface-visibility: hidden;
  }

  .screen-float.expanded .screen-float-media {
    max-height: none;
  }

  .screen-view-tools {
    right: 8px;
    bottom: 8px;
    opacity: 1;
  }

  .screen-view-tools .button {
    width: 44px;
    min-width: 44px;
    min-height: 44px;
  }

  .quality-backdrop {
    align-items: end;
    padding: 12px;
  }

  .stream-settings-panel {
    width: 100%;
    max-height: calc(var(--mobile-viewport-height, var(--app-height, 100dvh)) - 24px);
    overflow-y: auto;
  }

  .quality-grid {
    grid-template-columns: 1fr;
  }

  .audio-device-settings {
    grid-template-columns: 1fr;
  }

  .voice-device-picker-trigger {
    min-height: 46px;
  }

  .stream-settings-panel .voice-device-picker .voice-device-picker-panel {
    position: fixed;
    z-index: 1030;
    inset: auto 16px calc(16px + var(--app-safe-bottom, 0px));
    width: auto;
    min-width: 0;
    max-width: none;
    max-height: min(70svh, 520px);
  }

  .voice-device-picker-options {
    max-height: min(42svh, 300px);
  }

  .voice-device-picker-options > button {
    min-height: 46px;
  }

  .stream-stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .notification-panel {
    top: calc(var(--mobile-visual-offset-top, 0px) + max(72px, calc(var(--app-safe-top) + 64px)));
    right: max(10px, var(--app-safe-right));
    left: max(10px, var(--app-safe-left));
    width: auto;
    max-width: 320px;
    max-height: calc(var(--mobile-viewport-height, var(--app-height, 100dvh)) - max(84px, calc(var(--app-safe-top) + 76px)) - max(10px, var(--app-safe-bottom)));
    margin-left: auto;
    overflow-y: auto;
  }

  .notification-permission-prompt {
    top: calc(var(--mobile-visual-offset-top, 0px) + max(76px, calc(var(--app-safe-top) + 64px)));
    right: max(10px, var(--app-safe-right));
    left: max(10px, var(--app-safe-left));
    width: auto;
    max-width: 330px;
    margin-left: auto;
    padding: 11px;
    backdrop-filter: none;
  }

  html.mobile-keyboard-open .notification-permission-prompt {
    display: none;
  }

  .stream-settings-panel {
    width: 100%;
    min-width: 0;
  }

  .chat-materials-backdrop {
    justify-content: flex-end;
    padding: 0;
  }

  .chat-materials-panel {
    width: var(--mobile-sheet-width, min(calc(var(--app-width, 100vw) - 24px), 360px));
    max-width: var(--app-width, 100vw);
    height: var(--app-height, 100dvh);
    align-self: stretch;
    border: 0;
    border-left: 1px solid var(--line-strong);
    border-radius: 0;
    box-shadow: -22px 0 54px rgba(0, 0, 0, 0.36);
    animation: chatMaterialsMobileIn var(--mobile-panel-transition, 190ms cubic-bezier(0.2, 0.72, 0.18, 1)) both;
    will-change: transform;
    touch-action: pan-y;
    overscroll-behavior-x: contain;
  }

  .chat-materials-header {
    padding: 14px;
  }

  .chat-material-tabs {
    margin: 0 14px 10px;
  }

  .chat-material-tabs button {
    min-height: 44px;
    touch-action: manipulation;
  }

  .chat-materials-body {
    padding: 2px 14px 14px;
  }

  .chat-material-media-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }
}

@media (max-width: 360px) {
  .contact-request-item {
    grid-template-rows: minmax(44px, auto) 44px;
  }

  .contact-request-item .avatar {
    grid-column: 1;
    grid-row: 1;
  }

  .contact-request-user {
    grid-column: 2 / 5;
    grid-row: 1;
  }

  .contact-request-accept {
    grid-column: 3;
    grid-row: 2;
  }

  .contact-request-decline {
    grid-column: 4;
    grid-row: 2;
  }

  .chat-material-tabs button {
    position: relative;
    gap: 4px;
    padding: 0 26px 0 6px;
    font-size: 10px;
  }

  .chat-material-tabs button > span {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .chat-material-tabs b {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    font-size: 9px;
  }
}

@media (min-width: 821px) and (max-width: 960px) {
  .auth-screen {
    display: flex;
    width: 100%;
    height: 100%;
    min-height: 0;
    align-items: flex-start;
    align-items: safe center;
    justify-content: center;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 26px;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
  }

  .auth-card {
    flex: 0 0 auto;
    width: min(100%, 430px);
    margin-block: 0;
  }

  .auth-screen:has(input[name="passwordConfirm"]) {
    align-items: flex-start;
  }

  .auth-showcase {
    display: none;
  }
}

@media (max-width: 520px) {
  .stream-auto-card {
    padding: 10px;
  }

  .stream-live-status {
    grid-template-columns: 38px minmax(0, 1fr) auto;
    gap: 8px;
  }

  .stream-live-status-icon {
    width: 38px;
    height: 38px;
  }

  .stream-live-status-copy small {
    white-space: normal;
  }

  .stream-auto-mode {
    grid-template-columns: 36px minmax(0, 1fr) auto;
    gap: 8px;
    padding: 9px;
  }

  .stream-auto-mode-icon {
    width: 36px;
    height: 36px;
  }

  .stream-auto-mode-copy small {
    white-space: normal;
  }

  .stream-auto-mode-state {
    min-width: 34px;
  }

  .stream-auto-mode-state b {
    display: none;
  }

  .stream-priority-control {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .stream-priority-copy small {
    margin-top: 2px;
  }

  .stream-priority-option {
    min-height: 46px;
  }

  .stream-manual-settings .quality-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 360px) {
  .stream-live-status-badge {
    grid-column: 2;
    justify-self: start;
  }

  .stream-priority-options,
  .stream-manual-settings .quality-options {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 820px), (max-width: 1100px) and (max-height: 600px) {
  body.music-car-mode-open {
    overflow: hidden;
    overscroll-behavior: none;
  }

  .music-car-mode-root {
    position: fixed;
    inset: var(--mobile-visual-offset-top, 0px) 0 auto;
    z-index: 180;
    width: var(--app-width, 100vw);
    height: var(--mobile-viewport-height, var(--app-height, 100dvh));
    max-width: var(--app-width, 100vw);
    max-height: var(--mobile-viewport-height, var(--app-height, 100dvh));
    overflow: hidden;
    color: #f5f3e8;
    background: #0a0e0b;
    isolation: isolate;
    contain: layout paint;
    touch-action: pan-y;
  }

  .music-car-mode-root[hidden] {
    display: none !important;
  }

  .music-car-mode {
    position: relative;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding:
      max(12px, env(safe-area-inset-top))
      max(14px, env(safe-area-inset-right))
      max(14px, env(safe-area-inset-bottom))
      max(14px, env(safe-area-inset-left));
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: clamp(10px, 2.1dvh, 18px);
    overflow: hidden;
    background:
      radial-gradient(circle at 50% 18%, rgba(99, 210, 125, 0.16), transparent 38%),
      linear-gradient(180deg, #111812 0%, #0b100c 52%, #080b09 100%);
  }

  .music-car-ambient {
    position: absolute;
    inset: -12%;
    z-index: -2;
    overflow: hidden;
    background:
      radial-gradient(circle at 26% 18%, rgba(108, 214, 126, 0.22), transparent 32%),
      radial-gradient(circle at 76% 55%, rgba(73, 118, 83, 0.2), transparent 40%);
    pointer-events: none;
  }

  .music-car-ambient::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(180deg, rgba(7, 10, 8, 0.36), rgba(7, 10, 8, 0.82)),
      radial-gradient(circle at center, transparent 0 24%, rgba(7, 10, 8, 0.52) 72%);
  }

  .music-car-ambient img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.34;
    filter: blur(34px) saturate(1.18);
    transform: scale(1.18);
  }

  .music-car-header {
    position: relative;
    z-index: 4;
    min-height: 48px;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) 48px;
    align-items: center;
    gap: 10px;
  }

  .music-car-header > div {
    min-width: 0;
    display: grid;
    justify-items: center;
    gap: 2px;
  }

  .music-car-header > div > span {
    color: #a5e9ad;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.18em;
  }

  .music-car-header > div > small {
    max-width: 100%;
    color: rgba(245, 243, 232, 0.62);
    font-size: 12px;
    font-weight: 650;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .music-car-back,
  .music-car-wake-status {
    width: 48px;
    height: 48px;
    border: 1px solid rgba(235, 245, 234, 0.13);
    border-radius: 16px;
    display: grid;
    place-items: center;
    color: #f4f1e7;
    background: rgba(20, 27, 21, 0.84);
  }

  .music-car-back {
    padding: 0;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
  }

  .music-car-back:active {
    transform: scale(0.96);
  }

  .music-car-back svg,
  .music-car-wake-status svg {
    width: 23px;
    height: 23px;
  }

  .music-car-wake-status {
    visibility: hidden;
    color: #a9ecaf;
    border-color: rgba(128, 221, 140, 0.24);
    background: rgba(54, 113, 64, 0.18);
  }

  .music-car-mode.is-wake-locked .music-car-wake-status {
    visibility: visible;
  }

  .music-car-stage {
    position: relative;
    z-index: 2;
    width: min(100%, 520px);
    min-height: 0;
    margin: 0 auto;
    display: grid;
    grid-template-rows: minmax(0, auto) auto auto auto auto;
    align-content: center;
    justify-items: stretch;
    gap: clamp(10px, 1.8dvh, 17px);
  }

  .music-car-visual {
    position: relative;
    width: min(67vw, 34dvh, 340px);
    max-width: 100%;
    aspect-ratio: 1;
    margin: 0 auto;
    display: grid;
    place-items: center;
  }

  .music-car-artwork {
    position: relative;
    z-index: 2;
    width: 86%;
    height: 86%;
    border: 1px solid rgba(230, 244, 227, 0.17);
    border-radius: clamp(24px, 8vw, 42px);
    display: grid;
    place-items: center;
    overflow: hidden;
    color: #b8efbc;
    background:
      radial-gradient(
        circle at 33% 25%,
        hsl(var(--music-art-accent, 174) 72% 63% / 0.62),
        transparent 42%
      ),
      linear-gradient(
        145deg,
        hsl(var(--music-art-hue, 132) 38% 28%),
        hsl(var(--music-art-accent, 174) 32% 12%)
      );
    box-shadow:
      0 34px 70px rgba(0, 0, 0, 0.42),
      0 0 54px rgba(102, 218, 126, 0.1);
  }

  .music-car-artwork img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    background: rgba(6, 12, 8, 0.26);
  }

  .music-car-artwork > i {
    width: 88px;
    height: 88px;
    border: 1px solid rgba(198, 242, 203, 0.18);
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: rgba(8, 13, 9, 0.28);
  }

  .music-car-artwork > i svg {
    width: 38px;
    height: 38px;
  }

  .music-car-halo {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: 999px;
    pointer-events: none;
  }

  .music-car-halo i {
    position: absolute;
    inset: 3%;
    border: 1px solid rgba(147, 229, 157, 0.15);
    border-radius: 38% 62% 57% 43% / 48% 43% 57% 52%;
  }

  .music-car-halo i:nth-child(2) {
    inset: 0;
    border-color: rgba(160, 218, 167, 0.1);
    transform: rotate(43deg);
  }

  .music-car-halo i:nth-child(3) {
    inset: 8%;
    border-color: rgba(92, 199, 112, 0.13);
    transform: rotate(-28deg);
  }

  .music-car-mode.playing .music-car-halo i {
    animation: music-car-orbit 13s linear infinite;
  }

  .music-car-mode.playing .music-car-halo i:nth-child(2) {
    animation-duration: 17s;
    animation-direction: reverse;
  }

  .music-car-mode.playing .music-car-halo i:nth-child(3) {
    animation-duration: 21s;
  }

  .music-car-copy {
    min-width: 0;
    display: grid;
    justify-items: center;
    gap: 3px;
    text-align: center;
  }

  .music-car-copy > span {
    color: #9ddeaa;
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }

  .music-car-copy > strong {
    width: 100%;
    color: #f5f3e8;
    font-size: clamp(24px, 7.2vw, 38px);
    line-height: 1.06;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .music-car-copy > small,
  .music-car-copy > em {
    width: 100%;
    color: rgba(245, 243, 232, 0.68);
    font-size: clamp(14px, 4vw, 18px);
    font-style: normal;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .music-car-copy > em {
    color: rgba(164, 222, 171, 0.58);
    font-size: 12px;
  }

  .music-car-timeline {
    display: grid;
    gap: 5px;
  }

  .music-car-progress {
    position: relative;
    height: 24px;
    overflow: visible;
    touch-action: none;
    background: transparent;
  }

  .music-car-progress::before {
    content: "";
    position: absolute;
    inset: 9px 0;
    border-radius: 999px;
    background: rgba(235, 244, 232, 0.15);
  }

  .music-car-progress > span {
    position: absolute;
    top: 8px;
    left: 0;
    width: 100%;
    height: 6px;
    border-radius: 999px;
    background: linear-gradient(90deg, #79d685, #c3efc5);
    box-shadow: 0 0 18px rgba(115, 214, 131, 0.32);
    transform-origin: left center;
  }

  .music-car-progress.seeking::before {
    background: rgba(235, 244, 232, 0.22);
  }

  .music-car-timeline > div:last-child {
    display: flex;
    justify-content: space-between;
    color: rgba(245, 243, 232, 0.62);
    font-variant-numeric: tabular-nums;
  }

  .music-car-transport {
    display: grid;
    grid-template-columns: 54px 62px 88px 62px 54px;
    justify-content: center;
    align-items: center;
    gap: clamp(5px, 2vw, 10px);
  }

  .music-car-control,
  .music-car-play {
    padding: 0;
    border: 1px solid rgba(231, 242, 228, 0.14);
    border-radius: 999px;
    display: grid;
    place-items: center;
    color: #f4f1e7;
    background: rgba(25, 33, 26, 0.88);
    appearance: none;
    -webkit-tap-highlight-color: transparent;
  }

  .music-car-control {
    width: 62px;
    height: 62px;
  }

  .music-car-control.secondary {
    width: 54px;
    height: 54px;
    color: rgba(238, 244, 235, 0.68);
  }

  .music-car-control.active {
    color: #b9efbd;
    border-color: rgba(129, 224, 143, 0.44);
    background: rgba(73, 154, 84, 0.2);
  }

  .music-car-control:disabled {
    opacity: 0.24;
  }

  .music-car-control:active:not(:disabled),
  .music-car-play:active {
    transform: scale(0.96);
  }

  .music-car-control svg {
    width: 25px;
    height: 25px;
  }

  .music-car-control.secondary svg {
    width: 21px;
    height: 21px;
  }

  .music-car-play {
    width: 88px;
    height: 88px;
    color: #102114;
    border-color: rgba(204, 244, 207, 0.52);
    background: linear-gradient(145deg, #c3efc5, #78d184);
    box-shadow: 0 16px 34px rgba(70, 172, 89, 0.26);
  }

  .music-car-play svg {
    width: 38px;
    height: 38px;
  }

  .music-car-mode.recovering .music-car-play {
    animation: music-car-recover 1.4s ease-in-out infinite;
  }

  .music-car-volume {
    width: min(100%, 360px);
    margin: 0 auto;
  }

  .music-car-volume .music-volume.car {
    position: relative;
    width: 100%;
    height: 44px;
    padding: 0 4px 0 0;
    border: 0;
    border-radius: 0;
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    align-items: center;
    gap: 6px;
    background: transparent;
  }

  .music-car-volume .music-volume.car::before {
    display: none;
  }

  .music-car-volume .music-volume.car .button {
    width: 44px;
    height: 44px;
    border: 0;
    color: #dff4df;
    background: transparent;
  }

  .music-car-volume .music-volume.car input[type="range"] {
    position: relative;
    inset: auto;
    width: 100%;
    height: 30px;
    opacity: 1;
    pointer-events: auto;
    transform: none;
    touch-action: none;
  }

  .music-car-queue {
    position: relative;
    z-index: 3;
    width: min(100%, 560px);
    min-height: 0;
    margin: 0 auto;
    display: grid;
    gap: 8px;
  }

  .music-car-queue > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 3px;
  }

  .music-car-queue > header strong {
    font-size: 13px;
  }

  .music-car-queue > header span {
    color: rgba(236, 242, 233, 0.5);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
  }

  .music-car-queue-list {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
  }

  .music-car-queue-list::-webkit-scrollbar {
    display: none;
  }

  .music-car-queue-track {
    flex: 0 0 min(72vw, 270px);
    min-width: 0;
    height: 58px;
    padding: 7px 10px 7px 7px;
    border: 1px solid rgba(229, 241, 226, 0.1);
    border-radius: 17px;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 24px;
    align-items: center;
    gap: 9px;
    color: #f3f0e6;
    text-align: left;
    background: rgba(18, 24, 19, 0.7);
    scroll-snap-align: start;
    appearance: none;
  }

  .music-car-queue-track.current {
    border-color: rgba(124, 219, 138, 0.34);
    background: rgba(59, 120, 68, 0.22);
  }

  .music-car-queue-art {
    position: relative;
    width: 44px;
    height: 44px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    overflow: hidden;
    color: #b8efbc;
    background:
      radial-gradient(circle at 32% 26%, hsla(var(--music-art-hue, 132), 64%, 63%, 0.3), transparent 52%),
      #202b22;
  }

  .music-car-queue-art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .music-car-queue-art > i svg {
    width: 18px;
    height: 18px;
  }

  .music-car-queue-art > b {
    display: none;
  }

  .music-car-queue-track > span {
    min-width: 0;
    display: grid;
    gap: 2px;
  }

  .music-car-queue-track strong,
  .music-car-queue-track small {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .music-car-queue-track strong {
    font-size: 13px;
  }

  .music-car-queue-track small,
  .music-car-queue-track em {
    color: rgba(240, 244, 237, 0.52);
    font-size: 10px;
    font-style: normal;
  }

  .music-car-playing-bars {
    height: 22px;
    display: flex;
    align-items: end;
    justify-content: center;
    gap: 2px;
  }

  .music-car-playing-bars b {
    width: 3px;
    height: 70%;
    border-radius: 999px;
    background: #9be4a4;
  }

  .music-car-mode.playing .music-car-playing-bars b {
    animation: music-car-bars 760ms ease-in-out infinite alternate;
  }

  .music-car-mode.playing .music-car-playing-bars b:nth-child(2) {
    animation-delay: -280ms;
  }

  .music-car-mode.playing .music-car-playing-bars b:nth-child(3) {
    animation-delay: -520ms;
  }

  @keyframes music-car-orbit {
    to { transform: rotate(360deg); }
  }

  @keyframes music-car-bars {
    from { height: 32%; }
    to { height: 100%; }
  }

  @keyframes music-car-recover {
    50% { box-shadow: 0 16px 38px rgba(104, 216, 122, 0.5); }
  }
}

@media (max-width: 820px) and (max-height: 700px) and (orientation: portrait) {
  .music-car-mode {
    gap: 8px;
  }

  .music-car-stage {
    gap: 8px;
  }

  .music-car-visual {
    width: min(52vw, 26dvh, 230px);
  }

  .music-car-copy > strong {
    font-size: clamp(22px, 6vw, 30px);
  }

  .music-car-control {
    width: 56px;
    height: 56px;
  }

  .music-car-control.secondary {
    width: 48px;
    height: 48px;
  }

  .music-car-play {
    width: 76px;
    height: 76px;
  }

  .music-car-transport {
    grid-template-columns: 48px 56px 76px 56px 48px;
  }

  .music-car-queue-track {
    height: 52px;
  }
}

@media (max-width: 380px) and (orientation: portrait) {
  .music-car-transport {
    grid-template-columns: 44px 50px 72px 50px 44px;
    gap: 4px;
  }

  .music-car-control {
    width: 50px;
    height: 50px;
  }

  .music-car-control.secondary {
    width: 44px;
    height: 44px;
  }

  .music-car-play {
    width: 72px;
    height: 72px;
  }
}

@media (max-width: 1100px) and (max-height: 600px) and (orientation: landscape) {
  .music-car-mode {
    grid-template-rows: auto minmax(0, 1fr);
    gap: 6px;
    padding-top: max(8px, env(safe-area-inset-top));
  }

  .music-car-header {
    min-height: 42px;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
  }

  .music-car-back,
  .music-car-wake-status {
    width: 42px;
    height: 42px;
    border-radius: 14px;
  }

  .music-car-stage {
    width: min(100%, 780px);
    grid-template-columns: minmax(150px, 34vw) minmax(260px, 1fr);
    grid-template-rows: auto auto auto auto;
    grid-template-areas:
      "visual copy"
      "visual timeline"
      "visual transport"
      "visual volume";
    align-content: center;
    column-gap: clamp(20px, 4vw, 46px);
    row-gap: 7px;
  }

  .music-car-visual {
    grid-area: visual;
    width: min(34vw, 62dvh, 260px);
  }

  .music-car-copy {
    grid-area: copy;
    justify-items: start;
    text-align: left;
  }

  .music-car-copy > strong,
  .music-car-copy > small,
  .music-car-copy > em {
    text-align: left;
  }

  .music-car-copy > strong {
    font-size: clamp(24px, 4.4vw, 36px);
  }

  .music-car-timeline {
    grid-area: timeline;
  }

  .music-car-transport {
    grid-area: transport;
    grid-template-columns: 44px 52px 70px 52px 44px;
    justify-content: start;
  }

  .music-car-control {
    width: 52px;
    height: 52px;
  }

  .music-car-control.secondary {
    width: 44px;
    height: 44px;
  }

  .music-car-play {
    width: 70px;
    height: 70px;
  }

  .music-car-volume {
    grid-area: volume;
    width: min(100%, 340px);
    margin: 0;
  }

  .music-car-queue {
    display: none;
  }
}

@media (max-width: 1100px) and (prefers-reduced-motion: reduce) {
  .music-car-mode.playing .music-car-halo i,
  .music-car-mode.playing .music-car-playing-bars b,
  .music-car-mode.recovering .music-car-play {
    animation: none;
  }
}

@media (max-width: 960px) and (max-height: 520px) and (orientation: landscape) {
  .yandex-music-player-root.is-expanded .yandex-music-player {
    left: max(8px, var(--app-safe-left));
    right: max(8px, var(--app-safe-right));
    bottom: max(8px, var(--app-safe-bottom));
    width: auto;
    max-height: calc(var(--mobile-viewport-height, 100dvh) - 16px);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }

  .yandex-music-player-root.is-expanded .yandex-music-player-header {
    min-height: 66px;
    padding: 6px 8px;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    gap: 7px;
  }

  .yandex-music-player-root.is-expanded .yandex-music-player-artwork {
    width: 48px;
    height: 48px;
  }

  .auth-screen {
    display: flex;
    width: 100%;
    height: var(--mobile-viewport-height, var(--app-height, 100dvh));
    min-height: 0;
    align-items: flex-start;
    align-items: safe center;
    justify-content: center;
    overflow-x: hidden;
    overflow-y: auto;
    padding:
      max(8px, var(--app-safe-top, env(safe-area-inset-top)))
      max(12px, var(--app-safe-right, env(safe-area-inset-right)))
      max(8px, var(--app-safe-bottom, env(safe-area-inset-bottom)))
      max(12px, var(--app-safe-left, env(safe-area-inset-left)));
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
  }

  .auth-card {
    flex: 0 0 auto;
    width: min(100%, 430px);
    margin-block: 0;
    padding: 16px 18px;
  }

  .auth-screen:has(input[name="passwordConfirm"]) {
    align-items: flex-start;
  }

  .brand-row {
    gap: 10px;
    margin-bottom: 12px;
  }

  .brand-badge {
    width: 42px;
    height: 42px;
    padding: 6px;
  }

  .brand-title {
    font-size: 22px;
  }

  .auth-form {
    gap: 10px;
  }

  .auth-verification {
    grid-template-columns: 54px minmax(0, 1fr);
    column-gap: 12px;
    row-gap: 9px;
  }

  .auth-code-orbit {
    width: 54px;
    height: 54px;
  }

  .auth-code-orbit svg {
    width: 24px;
    height: 24px;
  }

  .auth-verification-title {
    font-size: 19px;
  }

  .media-backdrop {
    padding:
      max(8px, var(--app-safe-top, env(safe-area-inset-top)))
      max(10px, var(--app-safe-right, env(safe-area-inset-right)))
      max(8px, var(--app-safe-bottom, env(safe-area-inset-bottom)))
      max(10px, var(--app-safe-left, env(safe-area-inset-left)));
  }

  .media-preview.video,
  .media-preview.audio,
  .media-preview.audio:not(.recording):not(.preparing) {
    width: min(720px, 100%);
    height: min(350px, 100%);
    min-height: 0;
    max-height: 100%;
    grid-template-columns: minmax(0, 1fr) minmax(224px, 0.82fr);
    grid-template-rows: minmax(0, 1fr) auto;
    grid-template-areas:
      "stage meta"
      "stage actions";
    align-items: stretch;
    overflow: hidden;
  }

  .media-preview.audio,
  .media-preview.audio:not(.recording):not(.preparing) {
    width: min(560px, 100%);
    height: auto;
  }

  .media-preview.video .media-preview-stage {
    grid-area: stage;
    width: 100%;
    min-width: 0;
    min-height: 0;
    height: 100%;
    margin: 0;
    padding: 8px 10px;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    align-items: center;
  }

  .media-preview.video .media-preview-surface {
    width: min(
      244px,
      100%,
      calc(var(--mobile-viewport-height, 100dvh) - 120px)
    );
    min-width: 0;
    justify-self: center;
  }

  .media-preview.video .media-camera-controls {
    margin-top: 6px;
  }

  .media-preview.audio .media-preview-stage {
    grid-area: stage;
    min-width: 0;
    min-height: 0;
    align-self: center;
  }

  .media-preview.audio .media-preview-surface {
    min-width: 0;
    margin: 10px;
  }

  .media-preview.video .media-preview-meta,
  .media-preview.audio .media-preview-meta {
    grid-area: meta;
    width: 100%;
    align-self: center;
    border-bottom-color: rgba(255, 255, 255, 0.06);
    border-left: 1px solid rgba(255, 255, 255, 0.06);
  }

  .media-preview.video .media-preview-actions,
  .media-preview.audio .media-preview-actions {
    grid-area: actions;
    align-self: end;
    border-left: 1px solid rgba(255, 255, 255, 0.06);
  }
}

@media (max-width: 420px) {
  .quality-options {
    grid-template-columns: 1fr;
  }

  .stream-stats-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 820px), (max-width: 960px) and (max-height: 520px) and (orientation: landscape) {
  .message-confirm-modal footer .button {
    min-height: 44px;
  }
}

@media (max-width: 760px), (max-width: 960px) and (max-height: 520px) and (orientation: landscape) {
  .two-factor-qr-card {
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 10px;
  }

  .two-factor-qr-card img {
    width: 92px;
    height: 92px;
  }

  .two-factor-inline-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .two-factor-inline-actions .button:last-child:nth-child(3) {
    grid-column: 1 / -1;
  }

  .two-factor-status-pill {
    display: none;
  }

  .two-factor-status-line {
    grid-template-columns: 34px minmax(0, 1fr);
  }
}

@media (max-width: 390px) {
  .two-factor-qr-card {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .two-factor-setup-copy {
    width: 100%;
  }

  .two-factor-backup-grid {
    grid-template-columns: 1fr;
  }
}

@keyframes rasta-mobile-header-music-wave {
  0%, 100% { transform: scaleY(0.42); }
  50% { transform: scaleY(1); }
}

@media (max-width: 820px), (max-width: 960px) and (max-height: 520px) and (orientation: landscape) {
  .chat-header {
    position: relative;
    z-index: 40;
  }

  .mobile-header-music-toggle-slot {
    flex: 0 0 auto;
    display: inline-flex;
  }

  .mobile-header-voice-toggle-slot {
    flex: 0 0 auto;
    display: inline-flex;
  }

  .mobile-header-voice-toggle-slot:empty {
    display: none;
  }

  .mobile-header-voice-toggle {
    position: relative;
    width: 40px;
    min-width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid rgba(145, 118, 220, 0.36);
    border-radius: 13px;
    display: grid;
    place-items: center;
    color: #ddd2ff;
    background: #1b1824;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
  }

  .mobile-header-voice-toggle.active {
    border-color: rgba(174, 145, 255, 0.68);
    background: #2a2140;
  }

  .mobile-header-voice-toggle:active {
    transform: translateY(1px);
  }

  .mobile-header-voice-toggle svg {
    width: 20px;
    height: 20px;
  }

  .mobile-header-voice-toggle > span {
    position: absolute;
    right: 5px;
    bottom: 5px;
    width: 7px;
    height: 7px;
    border: 2px solid #1b1824;
    border-radius: 999px;
    background: var(--green-2);
  }

  .mobile-header-voice-toggle.speaking > span {
    box-shadow: 0 0 0 4px rgba(89, 217, 139, 0.16);
    animation: liveDot 1.1s ease-in-out infinite;
  }

  .mobile-header-music-toggle-slot:empty {
    display: none;
  }

  .mobile-header-music-toggle {
    width: 42px;
    min-width: 42px;
    height: 42px;
    padding: 0;
    border: 1px solid rgba(89, 217, 139, 0.24);
    border-radius: 13px;
    display: grid;
    place-items: center;
    color: #dff8df;
    background: #171b16;
    box-shadow: none;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
  }

  .mobile-header-music-toggle.active {
    border-color: rgba(89, 217, 139, 0.58);
    background: #203522;
  }

  .mobile-header-music-toggle:active {
    transform: translateY(1px);
  }

  .mobile-header-music-wave {
    width: 22px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
  }

  .mobile-header-music-wave i {
    width: 2px;
    height: 15px;
    border-radius: 999px;
    background: currentColor;
    transform: scaleY(0.48);
    transform-origin: center;
  }

  .mobile-header-music-wave i:nth-child(2),
  .mobile-header-music-wave i:nth-child(4) {
    height: 20px;
    transform: scaleY(0.7);
  }

  .mobile-header-music-wave i:nth-child(3) {
    height: 12px;
    transform: scaleY(0.9);
  }

  .mobile-header-music-toggle.playing .mobile-header-music-wave i {
    animation: rasta-mobile-header-music-wave 760ms ease-in-out infinite;
  }

  .mobile-header-music-toggle.playing .mobile-header-music-wave i:nth-child(2) { animation-delay: -180ms; }
  .mobile-header-music-toggle.playing .mobile-header-music-wave i:nth-child(3) { animation-delay: -360ms; }
  .mobile-header-music-toggle.playing .mobile-header-music-wave i:nth-child(4) { animation-delay: -90ms; }
  .mobile-header-music-toggle.playing .mobile-header-music-wave i:nth-child(5) { animation-delay: -270ms; }

  .mobile-header-music-panel-slot,
  .mobile-header-voice-panel-slot {
    position: absolute;
    top: var(--mobile-header-height, 64px);
    right: 8px;
    left: 8px;
    z-index: 61;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-6px) scale(0.985);
    transform-origin: top right;
    transition: opacity 140ms ease, transform 140ms ease, visibility 0s linear 140ms;
    contain: layout paint;
    isolation: isolate;
  }

  .mobile-header-voice-panel-slot {
    contain: layout;
    overflow: visible;
  }

  .mobile-header-music-panel-slot {
    position: absolute;
    top: var(--mobile-header-height, 66px);
    right: 8px;
    bottom: auto;
    left: 8px;
    z-index: 94;
    box-sizing: border-box;
    padding: 0;
    overflow: visible;
    background: transparent;
    backdrop-filter: none;
    contain: layout;
  }

  .mobile-header-music-panel-slot.open,
  .mobile-header-voice-panel-slot.open {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
    transition-delay: 0s;
  }

  .mobile-header-music-panel-slot .mobile-music-card {
    position: relative;
    z-index: 1;
    width: 100%;
    margin: 0;
    border-color: rgba(89, 217, 139, 0.4);
    background: #151a15;
    box-shadow:
      0 22px 48px rgba(0, 0, 0, 0.62),
      0 0 0 1px rgba(255, 255, 255, 0.02) inset;
    backdrop-filter: none;
  }

  .mobile-header-voice-panel {
    width: 100%;
    box-sizing: border-box;
    padding: 12px;
    border: 1px solid rgba(174, 145, 255, 0.38);
    border-radius: 16px;
    display: grid;
    gap: 10px;
    color: var(--text);
    background:
      linear-gradient(140deg, rgba(85, 62, 132, 0.24), transparent 58%),
      #151716;
    box-shadow: 0 18px 34px rgba(0, 0, 0, 0.44);
  }

  .mobile-header-voice-meta {
    min-width: 0;
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) 34px;
    align-items: center;
    gap: 9px;
  }

  .mobile-header-voice-meta > span {
    width: 36px;
    height: 36px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    color: #ddd2ff;
    background: rgba(145, 118, 220, 0.16);
  }

  .mobile-header-voice-meta > span svg {
    width: 19px;
    height: 19px;
  }

  .mobile-header-voice-meta > div {
    min-width: 0;
  }

  .mobile-header-voice-meta strong,
  .mobile-header-voice-meta small {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .mobile-header-voice-meta strong {
    font-size: 13px;
  }

  .mobile-header-voice-meta small {
    margin-top: 3px;
    color: var(--muted);
    font-size: 10px;
  }

  .mobile-header-voice-meta .button {
    width: 34px;
    min-width: 34px;
    min-height: 34px;
  }

  .mobile-header-voice-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(44px, 1fr));
    gap: 7px;
  }

  .mobile-header-voice-actions .button {
    width: 100%;
    min-width: 0;
    min-height: 38px;
  }

  .mobile-header-voice-participants {
    min-width: 0;
    max-height: min(28vh, 220px);
    overflow-y: auto;
    display: grid;
    gap: 6px;
    padding: 1px;
    overscroll-behavior: contain;
  }

  .mobile-header-voice-participants .voice-participant-volume-button,
  .voice-card .voice-participant-volume-button {
    min-width: 30px;
    height: 30px;
    margin-right: -5px;
  }

  .voice-participant-volume-control {
    padding: 14px 10px 12px;
    gap: 10px;
  }

  .voice-participant-volume-slider-row {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 10px;
  }

  .voice-participant-volume-mute {
    width: 44px;
    height: 44px;
    border-radius: 13px;
  }

  .voice-participant-volume-slider-row input[type="range"] {
    height: 44px;
  }

  .voice-participant-volume-scale {
    margin-left: 54px;
  }

  .voice-participant-volume-reset {
    min-height: 38px;
    font-size: 11px;
  }

  .header-menu {
    background: #171815;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .header-menu button {
    min-height: 44px;
    touch-action: manipulation;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-header-music-toggle.playing .mobile-header-music-wave i {
    animation: none;
  }

  .mobile-header-music-panel-slot,
  .mobile-header-voice-panel-slot,
  .media-volume-sheet-backdrop,
  .media-volume-sheet {
    transition: none;
  }
}

@media (max-width: 820px), (max-width: 960px) and (max-height: 520px) and (orientation: landscape) {
  :root {
    --mobile-header-height: calc(66px + var(--app-safe-top));
    --mobile-composer-radius: 17px;
    --mobile-panel-transition: 190ms cubic-bezier(0.2, 0.72, 0.18, 1);
    --mobile-viewport-height: var(--app-height, 100dvh);
    --mobile-keyboard-inset: 0px;
    --mobile-visual-offset-top: 0px;
  }

  html.mobile-keyboard-open {
    --mobile-header-height: calc(58px + var(--app-safe-top));
  }

  html,
  body {
    position: fixed;
    inset: 0;
    width: var(--app-width, 100vw);
    height: var(--mobile-viewport-height, var(--app-height, 100dvh));
    max-width: var(--app-width, 100vw);
    max-height: var(--mobile-viewport-height, var(--app-height, 100dvh));
    overflow: hidden;
    overscroll-behavior: none;
    background: #0b0c0a;
  }

  body {
    touch-action: manipulation;
    -webkit-text-size-adjust: 100%;
  }

  #app {
    position: fixed;
    inset: var(--mobile-visual-offset-top, 0px) 0 auto;
    width: var(--app-width, 100vw);
    height: var(--mobile-viewport-height, var(--app-height, 100dvh));
    max-width: var(--app-width, 100vw);
    max-height: var(--mobile-viewport-height, var(--app-height, 100dvh));
    overflow: hidden;
    overscroll-behavior: none;
    background:
      linear-gradient(135deg, rgba(30, 68, 40, 0.18), transparent 34%),
      #0b0c0a;
  }

  .app-shell {
    isolation: isolate;
    width: var(--app-width, 100vw);
    height: var(--mobile-viewport-height, var(--app-height, 100dvh));
    max-width: var(--app-width, 100vw);
    max-height: var(--mobile-viewport-height, var(--app-height, 100dvh));
    overflow: hidden;
    overscroll-behavior: none;
    background: #0b0c0a;
  }

  .chat-panel {
    width: var(--app-width, 100vw);
    max-width: var(--app-width, 100vw);
    height: var(--mobile-viewport-height, var(--app-height, 100dvh));
    max-height: var(--mobile-viewport-height, var(--app-height, 100dvh));
    grid-template-rows: var(--mobile-header-height) auto auto minmax(0, 1fr) auto;
    overflow: hidden;
    overscroll-behavior: none;
    background: #0d0e0c;
  }

  .chat-header {
    min-height: var(--mobile-header-height);
    height: var(--mobile-header-height);
    padding: var(--app-safe-top) max(10px, var(--app-safe-right)) 0 max(10px, var(--app-safe-left));
    gap: 8px;
    background: rgba(14, 15, 13, 0.98);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
  }

  html.mobile-keyboard-open .chat-header {
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18);
  }

  .mobile-nav-toggle,
  .mobile-members-toggle,
  .header-actions .button.icon,
  .header-more-button {
    width: 42px;
    min-width: 42px;
    min-height: 42px;
    border-radius: 13px;
  }

  html.mobile-keyboard-open .header-actions .notification-button {
    display: none;
  }

  .chat-title {
    flex: 1 1 auto;
    min-width: 0;
    gap: 9px;
  }

  .chat-title h1 {
    max-width: 42vw;
    font-size: 17px;
    line-height: 1.05;
  }

  .chat-title p {
    max-width: 46vw;
    margin-top: 3px;
    font-size: 11px;
    line-height: 1.15;
  }

  .title-icon,
  .title-icon .avatar,
  .title-icon .personal-chat-icon {
    width: 38px;
    height: 38px;
    border-radius: 11px;
  }

  .messages {
    min-height: 0;
    padding: 12px max(10px, var(--app-safe-right)) 8px max(10px, var(--app-safe-left));
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    scroll-padding-bottom: 16px;
    contain: layout paint style;
    touch-action: pan-y;
  }

  .message {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 1px 2px;
  }

  .message.group-start {
    padding-top: 7px;
  }

  .message.day-start {
    padding-top: 0;
  }

  .message-row {
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 7px;
  }

  .message.mine .message-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .message.mine .avatar,
  .message.mine .message-avatar-spacer {
    display: none;
  }

  .message-content {
    width: fit-content;
    min-width: 0;
    max-width: min(86%, calc(var(--app-width, 100vw) - 48px));
    padding: 7px 10px 5px;
    box-sizing: border-box;
  }

  .message-content.has-long-text {
    width: fit-content;
    max-width: min(86%, calc(var(--app-width, 100vw) - 48px));
  }

  .message-content:has(> .message-reply-preview),
  .message-content.has-reply {
    max-width: min(86%, calc(var(--app-width, 100vw) - 48px));
  }

  .message-reply-preview {
    max-width: calc(var(--app-width, 100vw) - 68px);
    margin-bottom: 5px;
    padding: 5px 7px;
  }

  .message.mine .message-content {
    justify-self: end;
    padding-right: 10px;
  }

  .message.mine.group-middle:not(.group-start) .message-content {
    border-top-left-radius: 8px;
    border-top-right-radius: 4px;
  }

  .message.mine.group-middle:not(.group-end) .message-content {
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 4px;
  }

  .message.mine .message-content.has-voice-note {
    justify-self: end;
    margin-right: 0;
    margin-left: auto;
  }

  .message-body {
    font-size: 16px;
    line-height: 1.36;
    overflow-wrap: anywhere;
  }

  .message-content.inline-meta > .message-meta {
    margin-left: 7px;
    transform: translateY(2px);
  }

  .message.deleted .message-content {
    max-width: min(90%, calc(var(--app-width, 100vw) - 48px));
    column-gap: 7px;
    padding: 5px 8px 4px;
  }

  .message.deleted .message-deleted {
    font-size: 12px;
  }

  .message.deleted .message-head {
    max-width: 100%;
  }

  .message-author {
    max-width: 54vw;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 14px;
  }

  .message-author.has-display-name-signal {
    max-width: 58vw;
  }

  .message-context-trigger:focus-visible {
    top: -32px;
    right: 0;
  }

  .message.mine .message-context-trigger:focus-visible {
    right: auto;
    left: 0;
  }

  .message-body {
    -webkit-touch-callout: none;
  }

  .message-body a,
  .message-code-block,
  .message-code-block * {
    -webkit-touch-callout: default;
  }

  .message-media,
  .message-media *,
  .circle-shell,
  .circle-shell *,
  .voice-note,
  .voice-note *,
  .music-attachment,
  .music-attachment *,
  .document-attachment,
  .document-attachment * {
    -webkit-touch-callout: none;
  }

  .voice-note {
    grid-template-columns: 34px minmax(0, 1fr) 44px;
  }

  .voice-note > .voice-note-volume {
    margin-top: -5px;
  }

  .music-attachment-download {
    -webkit-touch-callout: default;
  }

  .message.context-press-pending .message-body,
  .message.context-menu-active .message-body {
    -webkit-user-select: none;
    user-select: none;
  }

  .message-menu {
    width: min(320px, calc(var(--app-width, 100vw) - 20px));
    padding: 7px;
    border-radius: 18px;
    box-shadow:
      0 26px 72px rgba(0, 0, 0, 0.52),
      0 8px 26px rgba(0, 0, 0, 0.3),
      inset 0 1px 0 rgba(255, 255, 255, 0.045);
  }

  .message-menu-item {
    min-height: 46px;
    border-radius: 12px;
    padding-right: 12px;
    font-size: 14px;
  }

  .message-menu-icon {
    flex-basis: 31px;
    width: 31px;
    height: 31px;
    border-radius: 10px;
  }

  .message-menu-divider {
    margin-block: 5px;
  }

  .message-read-status {
    position: static;
    min-height: 18px;
  }

  .message-quote,
  .message-code-block,
  .message-attachments,
  .message-link-previews {
    max-width: 100%;
  }

  .message-code-block {
    min-width: min(244px, calc(var(--app-width, 100vw) - 62px));
  }

  .message-content.has-code-block {
    width: fit-content;
    max-width: calc(var(--app-width, 100vw) - 45px);
    padding: 6px;
  }

  .message-content.has-bare-media.has-visual-media:not(.has-video-circle),
  .message-content.has-captioned-media.has-visual-media {
    width: min(430px, calc(var(--app-width, 100vw) - 58px));
    max-width: 100%;
  }

  .message-content.has-bare-media.has-visual-media.has-single-portrait-media:not(.has-video-circle),
  .message-content.has-bare-media.has-visual-media.has-single-unknown-media:not(.has-video-circle),
  .message-content.has-captioned-media.has-visual-media.has-single-portrait-media,
  .message-content.has-captioned-media.has-visual-media.has-single-unknown-media {
    width: min(230px, 58vw, calc(var(--app-width, 100vw) - 58px));
    max-width: min(230px, 58vw, calc(var(--app-width, 100vw) - 58px));
  }

  .message-content.has-bare-media.has-visual-media.has-single-square-media:not(.has-video-circle),
  .message-content.has-captioned-media.has-visual-media.has-single-square-media {
    width: min(290px, 72vw, calc(var(--app-width, 100vw) - 58px));
    max-width: min(290px, 72vw, calc(var(--app-width, 100vw) - 58px));
  }

  .message-content.has-bare-media.has-visual-media.has-single-landscape-media:not(.has-video-circle),
  .message-content.has-captioned-media.has-visual-media.has-single-landscape-media {
    width: min(340px, 84vw, calc(var(--app-width, 100vw) - 58px));
    max-width: min(340px, 84vw, calc(var(--app-width, 100vw) - 58px));
  }

  .message-content.has-single-portrait-media.has-video-media .message-media-grid {
    border: 2px solid rgba(89, 217, 139, 0.9);
    box-shadow:
      0 0 0 1px rgba(5, 8, 5, 0.72),
      0 8px 24px rgba(35, 163, 95, 0.16);
  }

  .message-content.has-bare-media.has-audio-media:not(.has-visual-media) {
    width: min(280px, 100%);
    max-width: min(280px, 100%);
  }

  .message-content.has-bare-media.has-voice-note {
    width: min(280px, 100%);
    max-width: min(280px, 100%);
  }

  .message-content.has-bare-media.has-document-media,
  .message-content.has-grouped-media {
    width: min(430px, calc(var(--app-width, 100vw) - 58px));
    max-width: 100%;
  }

  .message-content.has-bare-media.has-video-circle {
    width: 213px;
    max-width: 213px;
  }

  .message-content.has-captioned-media.has-voice-note {
    width: min(280px, calc(var(--app-width, 100vw) - 58px));
    max-width: min(280px, calc(var(--app-width, 100vw) - 58px));
  }

  .message-content.has-captioned-media.has-video-circle {
    width: min(213px, calc(var(--app-width, 100vw) - 58px));
    max-width: min(213px, calc(var(--app-width, 100vw) - 58px));
  }

  .message-content.has-bare-media.has-visual-only:not(.has-video-circle) > .message-meta {
    right: 6px;
    bottom: 6px;
    backdrop-filter: none;
  }

  .message-media-caption-row {
    padding: 6px 8px 5px;
  }

  .message-day-separator {
    margin-top: 12px;
    margin-bottom: 8px;
  }

  .messages-date-float {
    top: 7px;
  }

  .messages-date-float button,
  .message-day-separator {
    backdrop-filter: none;
  }

  .new-messages-jump {
    right: 14px;
    bottom: calc(84px + var(--app-safe-bottom));
  }

  .message-calendar-backdrop {
    padding: max(12px, env(safe-area-inset-top)) 12px max(12px, var(--app-safe-bottom));
  }

  .message-calendar {
    width: min(370px, calc(var(--app-width, 100vw) - 24px));
    padding: 14px;
  }

  .message-calendar .button.icon {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
  }

  .composer-zone {
    position: relative;
    z-index: 22;
    min-height: auto;
    padding: 8px max(8px, var(--app-safe-right)) calc(8px + var(--app-safe-bottom)) max(8px, var(--app-safe-left));
    border-top: 1px solid rgba(255, 255, 255, 0.09);
    background:
      linear-gradient(180deg, rgba(8, 9, 8, 0.98), rgba(8, 9, 8, 0.94)),
      #090a09;
    box-shadow: 0 -14px 38px rgba(0, 0, 0, 0.34);
    contain: inline-size;
  }

  html.mobile-keyboard-open .composer-zone {
    padding-bottom: 7px;
    box-shadow: 0 -10px 26px rgba(0, 0, 0, 0.26);
  }

  .field-head,
  .profile-password-label {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .field-error,
  .profile-password-hint {
    flex-basis: 100%;
    text-align: left;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .channel-create.has-error {
    height: auto;
    min-height: 38px;
    padding-block: 5px;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    align-items: center;
  }

  .channel-create.has-error > svg:first-child {
    grid-column: 1;
    grid-row: 1;
  }

  .channel-create.has-error > input {
    grid-column: 2;
    grid-row: 1;
  }

  .channel-create.has-error > button[type="submit"] {
    grid-column: 3;
    grid-row: 1;
  }

  .channel-create.has-error > .channel-create-error {
    grid-column: 2 / 4;
    grid-row: 2;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  html.mobile-keyboard-open .composer-tools [data-action="start-video-recording"] {
    display: none;
  }

  .composer {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 7px;
    align-items: end;
  }

  .composer-tools {
    min-height: 42px;
    gap: 5px;
    padding: 0 0 2px;
    overflow: visible;
  }

  .composer-tools .button {
    width: 36px;
    min-width: 36px;
    min-height: 42px;
    border-radius: 13px;
  }

  .composer-box {
    min-width: 0;
    gap: 6px;
  }

  .composer-input {
    min-height: 46px;
    max-height: min(116px, 28dvh);
    padding: 11px 84px 11px 13px;
    border-radius: var(--mobile-composer-radius);
    font-size: 16px;
    line-height: 1.28;
    overflow-x: hidden;
    word-break: break-word;
  }

  .composer-input:empty::before {
    max-width: calc(100% - 4px);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .composer-actions {
    right: 4px;
    bottom: 4px;
    gap: 1px;
    padding: 1px;
    background: linear-gradient(90deg, rgba(7, 8, 7, 0), rgba(7, 8, 7, 0.82) 18%);
    backdrop-filter: none;
  }

  .composer-actions .button {
    width: 38px;
    min-width: 38px;
    min-height: 38px;
  }

  .composer-actions .composer-emoji {
    width: 34px;
    min-width: 34px;
  }

  .composer-context-bar {
    min-height: 54px;
    padding: 6px 5px 6px 11px;
    border-radius: calc(var(--mobile-composer-radius) - 1px) calc(var(--mobile-composer-radius) - 1px) 0 0;
    grid-template-columns: 25px minmax(0, 1fr) 40px;
    gap: 7px;
  }

  .composer-context-bar.has-media {
    grid-template-columns: 32px minmax(0, 1fr) 40px;
  }

  .composer-context-bar > .message-reply-thumbnail,
  .message-reply-preview .message-reply-thumbnail {
    width: 32px;
    height: 32px;
  }

  .message-reply-preview.has-media {
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 6px;
  }

  .composer-box:has(> .composer-context-bar) {
    border-radius: var(--mobile-composer-radius);
  }

  .composer-context-preview {
    font-size: 11px;
    line-height: 1.3;
    -webkit-line-clamp: 2;
  }

  .composer-context-dismiss.button {
    width: 40px;
    min-width: 40px;
    min-height: 40px;
    border-radius: 12px;
  }

  .composer-box:has(> .composer-context-bar) > .composer-input {
    border-radius: 0 0 calc(var(--mobile-composer-radius) - 1px) calc(var(--mobile-composer-radius) - 1px);
  }

  .composer-box.has-attachments {
    grid-template-columns: minmax(0, 1fr);
  }

  .composer-box.has-attachments .attachment-draft,
  .composer-box.has-attachments .composer-input {
    grid-column: 1;
  }

  .composer-box.has-attachments:has(> .composer-context-bar) .attachment-draft {
    height: 104px;
    margin: 6px 6px 0;
  }

  .composer-box.has-attachments:has(> .composer-context-bar) .attachment-draft.expanded {
    height: auto;
    margin: 6px 6px 0;
  }

  .attachment-draft.expanded {
    max-height: min(236px, 32dvh);
    grid-template-rows: 36px minmax(0, 1fr);
  }

  .attachment-draft.expanded .attachment-draft-body {
    min-height: 0;
    max-height: min(190px, calc(32dvh - 46px));
    overflow: hidden;
    align-items: stretch;
  }

  .composer-box.has-attachments:has(> .composer-context-bar) > .composer-input {
    min-height: 46px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    border-left: 0;
    border-radius: 0 0 calc(var(--mobile-composer-radius) - 1px) calc(var(--mobile-composer-radius) - 1px);
  }

  .attachment-draft-toolbar {
    grid-template-columns: 28px minmax(0, 1fr) auto 30px;
    gap: 4px;
  }

  .attachment-draft-toggle {
    position: relative;
    min-height: 30px;
    padding: 0 6px;
    font-size: 9px;
    touch-action: manipulation;
  }

  .attachment-clear {
    position: relative;
    width: 30px;
    height: 30px;
    touch-action: manipulation;
  }

  .attachment-draft-body {
    grid-template-columns: 28px minmax(0, 1fr) 28px;
    gap: 4px;
  }

  .attachment-draft-nav {
    position: relative;
    width: 28px;
    height: 48px;
    touch-action: manipulation;
  }

  .attachment-draft:not(.expanded) .attachment-draft-item {
    flex-basis: min(220px, calc(100% - 30px));
  }

  .attachment-draft.expanded .attachment-draft-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-height: 0;
    max-height: min(190px, calc(32dvh - 46px));
    overflow-x: hidden;
    overflow-y: auto;
    align-content: start;
    overscroll-behavior: contain;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
  }

  .attachment-markdown-import {
    height: 30px;
    padding-inline: 7px;
    font-size: 9px;
    touch-action: manipulation;
  }

  .attachment-markdown-import::before {
    inset: -7px -3px;
  }

  .attachment-remove {
    width: 28px;
    height: 28px;
    touch-action: manipulation;
  }

  .attachment-draft-toggle::before,
  .attachment-clear::before,
  .attachment-draft-nav::before,
  .attachment-remove::before {
    position: absolute;
    content: "";
  }

  .attachment-draft-toggle::before,
  .attachment-clear::before {
    inset: -5px;
  }

  .attachment-draft-nav::before {
    inset: 0 -6px;
  }

  .attachment-remove::before {
    inset: -6px;
  }

  .attach-menu {
    position: fixed;
    left: 8px;
    bottom: calc(64px + var(--app-safe-bottom));
    width: min(318px, calc(var(--app-width, 100vw) - 16px));
    max-height: min(360px, calc(var(--mobile-viewport-height, var(--app-height, 100dvh)) - 140px));
    overflow-y: auto;
    border-radius: 16px;
    box-shadow: 0 22px 70px rgba(0, 0, 0, 0.48);
  }

  .emoji-picker {
    position: fixed;
    right: 8px;
    bottom: calc(64px + var(--app-safe-bottom));
    width: min(420px, calc(var(--app-width, 100vw) - 16px));
    height: min(300px, calc(var(--mobile-viewport-height, var(--app-height, 100dvh)) - 180px));
    max-height: min(300px, calc(var(--mobile-viewport-height, var(--app-height, 100dvh)) - 180px));
    border-radius: 16px;
  }

  .emoji-pack-sample {
    width: 25px;
    height: 25px;
    font-size: 22px;
  }

  .rasta-emoji-pack-sample {
    width: 29px;
    height: 29px;
  }

  .emoji-grid {
    grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
  }

  .rasta-emoji-grid {
    grid-template-columns: repeat(auto-fill, minmax(58px, 1fr));
  }

  .rasta-emoji-choice {
    width: 56px;
    height: 56px;
  }

  .emoji-only-hero .emoji-only-body {
    min-width: 0;
    min-height: 0;
    padding: 0;
    font-size: 36px;
  }

  .emoji-only-compact .emoji-only-body {
    max-width: min(290px, calc(var(--app-width, 100vw) - 92px));
    font-size: 27px;
  }

  .emoji-only-dense .emoji-only-body {
    max-width: min(330px, calc(var(--app-width, 100vw) - 76px));
    font-size: 22px;
  }

  html.mobile-keyboard-open .emoji-picker,
  html.mobile-keyboard-open .attach-menu {
    bottom: 62px;
    height: min(240px, calc(var(--mobile-viewport-height, var(--app-height, 100dvh)) - 112px));
    max-height: min(240px, calc(var(--mobile-viewport-height, var(--app-height, 100dvh)) - 112px));
  }

  .emoji-picker,
  .attach-menu,
  .notification-panel {
    backdrop-filter: none;
  }

  .mobile-drawer {
    will-change: auto;
    backface-visibility: hidden;
    contain: layout paint style;
  }

  .space-panel,
  .people-panel {
    background: rgba(27, 28, 26, 0.99);
    backdrop-filter: none;
  }

  .people-panel {
    transition:
      transform var(--mobile-panel-transition),
      visibility 0s linear 190ms;
  }

  .app-shell.mobile-members-open .people-panel {
    transition:
      transform var(--mobile-panel-transition),
      visibility 0s;
  }

  .app-shell.mobile-drawer-dragging .mobile-drawer {
    transform: translate3d(var(--mobile-drawer-x, -100%), 0, 0);
    transition: none;
    visibility: visible;
    will-change: transform;
  }

  .app-shell.mobile-drawer-dragging .mobile-backdrop {
    opacity: calc(var(--mobile-drawer-progress, 0) * 0.92);
    visibility: visible;
    transition: none;
    pointer-events: none;
  }

  .app-shell.mobile-nav-open .mobile-drawer,
  .app-shell.mobile-members-open .people-panel,
  .app-shell.mobile-panel-animating .mobile-drawer,
  .app-shell.mobile-panel-animating .people-panel {
    will-change: transform;
  }

  .mobile-drawer,
  .profile-card {
    touch-action: pan-y;
    overscroll-behavior-x: contain;
  }

  .mobile-drawer .server-stack,
  .mobile-drawer .nav-zone,
  .mobile-drawer .nav-list {
    touch-action: pan-y;
    overscroll-behavior-x: contain;
  }

  .profile-card.mobile-swipe-dragging,
  .chat-materials-panel.mobile-swipe-dragging,
  .people-panel.mobile-swipe-dragging {
    animation: none;
    transform: translate3d(var(--mobile-swipe-x, 0px), 0, 0);
    transition: none;
    will-change: transform;
  }

  .profile-card.mobile-swipe-settling,
  .chat-materials-panel.mobile-swipe-settling,
  .people-panel.mobile-swipe-settling {
    animation: none;
    transform: translate3d(var(--mobile-swipe-x, 0px), 0, 0);
    transition: transform 180ms cubic-bezier(0.2, 0.72, 0.18, 1);
    will-change: transform;
  }

  @media (prefers-reduced-motion: reduce) {
    .server-rail,
    .space-panel,
    .mobile-drawer,
    .people-panel,
    .mobile-backdrop,
    .profile-card.mobile-swipe-settling,
    .chat-materials-panel.mobile-swipe-settling,
    .people-panel.mobile-swipe-settling {
      transition-duration: 1ms !important;
    }
  }
}

@media (max-width: 420px) {
  .composer-tools .button {
    width: 34px;
    min-width: 34px;
  }

  .composer {
    gap: 6px;
  }

  .composer-input {
    padding-right: 80px;
  }

  .chat-title h1 {
    max-width: 38vw;
  }

  .header-actions {
    gap: 5px;
  }
}

@media (max-width: 820px), (max-width: 960px) and (max-height: 520px) and (orientation: landscape) {
  .message-content.has-collapsible-text > .message-body,
  .message-body-collapsed {
    max-height: calc(1.36em * 9);
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 78%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0%, #000 78%, transparent 100%);
  }

  .message-content.has-collapsible-text.expanded > .message-body {
    max-height: none;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .message-markdown table {
    max-width: calc(var(--app-width, 100vw) - 84px);
    overscroll-behavior-x: contain;
  }

  .message-markdown h1 { font-size: 1.2em; }
  .message-markdown h2 { font-size: 1.14em; }

  .composer-length-status {
    right: 0;
    bottom: calc(100% + 7px);
    max-width: min(250px, 100%);
    box-shadow: none;
  }

  .composer-length-status.danger {
    right: 0;
    bottom: calc(100% + 7px);
    width: min(100%, 390px);
    max-width: 100%;
    min-height: 40px;
    white-space: normal;
  }

  .markdown-viewer-backdrop {
    padding: 0;
    background: #090b09;
  }

  .markdown-viewer {
    width: 100%;
    height: var(--mobile-viewport-height, 100dvh);
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .markdown-viewer-header {
    min-height: 60px;
    padding: max(8px, env(safe-area-inset-top)) 8px 8px;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    gap: 8px;
  }

  .markdown-viewer-file-icon {
    width: 34px;
    height: 34px;
  }

  .markdown-viewer-mode {
    width: 44px;
    min-width: 44px;
    padding: 0;
    justify-content: center;
  }

  .markdown-viewer-mode span {
    display: none;
  }

  .markdown-viewer-actions {
    gap: 2px;
  }

  .markdown-viewer-actions .button {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
  }

  .document-viewer-zoom-controls {
    bottom: max(10px, env(safe-area-inset-bottom));
    min-height: 52px;
    padding: 4px;
    border-radius: 17px;
    gap: 2px;
  }

  .document-viewer-zoom-controls [data-document-zoom-action] {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    border-radius: 13px;
  }

  .document-viewer-zoom-controls .document-viewer-zoom-value {
    width: auto;
    min-width: 60px;
    padding-inline: 8px;
    font-size: 11px;
  }

  .document-viewer-body[data-document-zoom-enabled="true"] .document-zoom-stage {
    margin-bottom: calc(68px + env(safe-area-inset-bottom));
  }

  .markdown-viewer-document,
  .markdown-viewer-source {
    width: calc(100% - 16px);
    min-height: calc(100% - 16px);
    margin: 8px;
    padding: 16px;
    border-radius: 12px;
  }

  .markdown-viewer-source {
    font-size: 12px;
  }

  .document-preview-note,
  .document-preview-sheets,
  .document-preview-slides {
    width: calc(100% - 16px);
    margin: 8px;
  }

  .document-preview-note {
    margin-bottom: 0;
  }

  .document-preview-sheets,
  .document-preview-slides {
    min-height: calc(100% - 16px);
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  .document-preview-sheet,
  .document-preview-slide {
    padding: 13px;
    border-radius: 12px;
  }

  .document-viewer:has(.document-preview-pdf) {
    width: 100%;
  }

  .document-viewer-body:has(.document-preview-pdf) {
    padding: 8px;
  }

  .document-preview-pdf-summary {
    top: 0;
    margin-bottom: 8px;
  }

  .document-preview-pdf-summary span {
    min-height: 28px;
    padding: 0 9px;
    font-size: 10px;
  }

  .document-preview-pdf-pages {
    gap: 10px;
  }

  .document-preview-pdf-page {
    border-radius: 8px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.3);
  }

  .document-preview-pdf-page-number {
    top: 7px;
    right: 7px;
  }

  .document-preview-table th,
  .document-preview-table td {
    min-width: 82px;
    max-width: 260px;
    padding: 8px 9px;
  }

  .markdown-document-open {
    grid-template-columns: 34px minmax(0, 1fr);
  }

  .workspace-settings-backdrop,
  .workspace-member-menu-backdrop,
  .voice-microphone-gain-backdrop,
  .workspace-confirm-backdrop {
    inset: var(--mobile-visual-offset-top, 0px) 0 auto;
    width: var(--app-width, 100vw);
    height: var(--mobile-viewport-height, var(--app-height, 100dvh));
    max-width: var(--app-width, 100vw);
    max-height: var(--mobile-viewport-height, var(--app-height, 100dvh));
  }

  .workspace-settings-backdrop {
    padding:
      max(14px, var(--app-safe-top))
      max(14px, var(--app-safe-right))
      max(14px, var(--app-safe-bottom))
      max(14px, var(--app-safe-left));
    place-items: center;
    background:
      radial-gradient(circle at 30% 18%, rgba(89, 217, 139, 0.12), transparent 34%),
      rgba(5, 6, 5, 0.86);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .workspace-settings-card {
    width: min(100%, 440px);
    height: min(720px, calc(var(--mobile-viewport-height, var(--app-height, 100dvh)) - 28px));
    max-height: 100%;
    min-height: 0;
    border: 1px solid rgba(89, 217, 139, 0.24);
    border-radius: 18px;
    grid-template-rows: 82px minmax(0, 1fr);
    box-shadow:
      0 26px 80px rgba(0, 0, 0, 0.56),
      inset 0 1px 0 rgba(255, 255, 255, 0.05);
    background:
      radial-gradient(circle at 0 0, rgba(89, 217, 139, 0.11), transparent 34%),
      linear-gradient(145deg, rgba(19, 27, 20, 0.985), rgba(9, 13, 10, 0.99));
    backface-visibility: hidden;
  }

  .workspace-settings-card > .profile-close {
    top: 17px;
    right: 14px;
    width: 44px;
    min-height: 44px;
  }

  .workspace-settings-header {
    min-height: 82px;
    padding: 13px 66px 13px 14px;
    gap: 10px;
  }

  .workspace-settings-header .profile-avatar-wrap,
  .workspace-settings-header .avatar {
    width: 46px;
    height: 46px;
    flex-basis: 46px;
  }

  .workspace-settings-header .profile-avatar-wrap {
    min-height: 46px;
  }

  .workspace-settings-header .profile-avatar-tools {
    bottom: -7px;
    gap: 4px;
  }

  .workspace-settings-header .profile-avatar-tools .profile-avatar-action {
    width: 32px;
    min-width: 32px;
    max-width: 32px;
    height: 32px;
    min-height: 32px;
    flex-basis: 32px;
  }

  .workspace-settings-header > div:last-child > strong {
    font-size: 16px;
  }

  .workspace-settings-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
  }

  .workspace-settings-nav {
    min-width: 0;
    padding: 8px 10px;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    display: flex;
    gap: 8px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    scroll-snap-type: inline proximity;
    background: rgba(8, 12, 9, 0.96);
  }

  .workspace-settings-nav::-webkit-scrollbar {
    display: none;
  }

  .workspace-settings-nav-item {
    width: 40px;
    min-width: 40px;
    min-height: 40px;
    padding: 0;
    flex: 0 0 40px;
    justify-content: center;
    gap: 0;
    border-radius: 12px;
    scroll-snap-align: nearest;
  }

  .workspace-settings-nav-item > span {
    display: none;
  }

  .workspace-settings-nav-item svg {
    width: 18px;
    height: 18px;
  }

  .workspace-settings-nav-item.danger {
    margin-top: 0;
  }

  .workspace-settings-content {
    overflow-y: auto;
    scrollbar-gutter: auto;
    -webkit-overflow-scrolling: touch;
  }

  .workspace-settings-section {
    min-height: auto;
    padding: 16px 12px calc(24px + env(safe-area-inset-bottom));
    gap: 13px;
  }

  .workspace-section-heading h3 {
    font-size: 17px;
  }

  .workspace-section-heading p {
    font-size: 11px;
  }

  .workspace-general-form {
    padding: 14px;
  }

  .workspace-info-card {
    min-height: 72px;
    padding: 11px 12px;
    gap: 11px;
  }

  .workspace-info-card .workspace-info-avatar {
    width: 48px;
    height: 48px;
    flex-basis: 48px;
    border-radius: 14px;
  }

  .workspace-info-card strong {
    font-size: 14px;
  }

  .workspace-general-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .workspace-general-actions .button {
    min-height: 46px;
  }

  .workspace-member-tools {
    grid-template-columns: minmax(0, 1fr) 126px;
    gap: 7px;
  }

  .workspace-search,
  .workspace-settings-card .workspace-picker-trigger {
    min-height: 46px;
  }

  .workspace-settings-card .workspace-picker-panel {
    position: absolute;
    z-index: 40;
    inset: auto;
    top: calc(100% + 7px);
    left: 0;
    width: min(300px, calc(100vw - 32px));
    max-height: min(70svh, 520px);
  }

  .workspace-settings-card .workspace-picker-options {
    max-height: min(48svh, 350px);
  }

  .workspace-settings-card .workspace-picker-options > button {
    min-height: 46px;
  }

  .workspace-entity-list,
  .workspace-audit-list {
    max-height: none;
    overflow: visible;
    scrollbar-gutter: auto;
  }

  .workspace-member-row {
    min-height: 62px;
    border-radius: 14px;
    -webkit-user-select: none;
    touch-action: pan-y;
  }

  .workspace-member-main {
    min-height: 60px;
    padding: 9px;
  }

  .workspace-member-main .avatar {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
  }

  .workspace-invite-builder {
    padding: 11px;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
  }

  .workspace-invite-builder .button {
    grid-column: 1 / -1;
    min-height: 46px;
  }

  .workspace-entity-row {
    min-height: 66px;
    padding: 9px;
  }

  .workspace-invite-row {
    grid-template-columns: 38px minmax(0, 1fr) auto;
  }

  .workspace-entity-icon,
  .workspace-entity-avatar {
    width: 38px;
    height: 38px;
  }

  .workspace-row-actions .button {
    width: 44px;
    min-width: 44px;
    min-height: 44px;
  }

  .workspace-row-actions .workspace-invite-copy {
    width: auto;
    min-width: 44px;
    padding: 0 8px;
  }

  .workspace-row-actions .workspace-invite-copy span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .workspace-unblock {
    min-height: 44px;
    padding: 0 10px;
    font-size: 10px;
  }

  .workspace-danger-card {
    min-height: 0;
    padding: 13px;
    grid-template-columns: 38px minmax(0, 1fr);
  }

  .workspace-danger-card > .button {
    grid-column: 1 / -1;
    min-height: 46px;
  }

  .workspace-member-menu-backdrop {
    display: grid;
    align-items: end;
    padding: max(14px, var(--app-safe-top)) max(10px, var(--app-safe-right)) calc(12px + var(--app-safe-bottom)) max(10px, var(--app-safe-left));
    background: rgba(0, 0, 0, 0.48);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .voice-microphone-gain-backdrop {
    display: grid;
    align-items: end;
    padding: max(14px, var(--app-safe-top)) max(10px, var(--app-safe-right)) calc(12px + var(--app-safe-bottom)) max(10px, var(--app-safe-left));
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .voice-microphone-gain-dialog {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    max-height: min(76dvh, 560px, calc(var(--mobile-viewport-height, var(--app-height, 100dvh)) - max(26px, var(--app-safe-top)) - max(24px, var(--app-safe-bottom))));
    padding: 12px;
    border-radius: 21px;
    backdrop-filter: none;
    animation: workspaceSheetIn 170ms ease-out both;
  }

  .voice-microphone-gain-dialog > header {
    min-height: 52px;
    grid-template-columns: 44px minmax(0, 1fr) 42px;
    gap: 10px;
    padding: 4px 2px 13px;
  }

  .voice-microphone-gain-icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
  }

  .voice-microphone-gain-dialog > header strong {
    font-size: 16px;
  }

  .voice-microphone-gain-dialog > header small {
    font-size: 11px;
  }

  .voice-microphone-gain-dialog > header .button {
    width: 42px;
    min-width: 42px;
    min-height: 42px;
    border-radius: 13px;
  }

  .voice-microphone-gain-control {
    padding: 16px 14px 13px;
    gap: 11px;
    border-radius: 16px;
  }

  .voice-microphone-gain-value {
    font-size: 11px;
  }

  .voice-microphone-gain-value output {
    font-size: 18px;
  }

  .voice-microphone-gain-control input[type="range"] {
    height: 46px;
  }

  .voice-microphone-gain-reset {
    min-height: 40px;
    font-size: 11px;
  }

  .voice-microphone-gain-hint {
    margin: 11px 5px 3px;
    font-size: 10px;
  }

  .voice-microphone-quick-actions {
    gap: 8px;
  }

  .voice-microphone-effect,
  .voice-microphone-more {
    min-height: 48px;
    padding: 8px 10px;
  }

  .voice-preset-options {
    grid-template-columns: 1fr;
  }

  .voice-preset-option {
    min-height: 50px;
  }

  .voice-settings-section > header {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
  }

  .voice-setting-toggle {
    min-height: 56px;
  }

  .voice-preflight-head {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .voice-preflight-action {
    grid-column: 1 / -1;
    min-height: 44px;
  }

  .workspace-member-menu {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    max-height: min(72dvh, 560px, calc(var(--mobile-viewport-height, var(--app-height, 100dvh)) - max(26px, var(--app-safe-top)) - max(24px, var(--app-safe-bottom))));
    overflow-y: auto;
    padding: 9px;
    border-radius: 20px;
    backdrop-filter: none;
    animation: workspaceSheetIn 170ms ease-out both;
  }

  .workspace-member-menu > header {
    min-height: 58px;
    padding: 8px 9px 12px;
  }

  .workspace-member-menu > header .avatar {
    width: 42px;
    height: 42px;
  }

  .workspace-member-menu-actions button {
    min-height: 50px;
    border-radius: 13px;
    font-size: 13px;
  }

  .workspace-member-menu-hint {
    padding: 9px 10px 5px;
    font-size: 10px;
  }

  .workspace-confirm-backdrop {
    place-items: end stretch;
    padding: max(14px, var(--app-safe-top)) max(10px, var(--app-safe-right)) calc(12px + var(--app-safe-bottom)) max(10px, var(--app-safe-left));
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .workspace-action-confirm {
    width: 100%;
    max-height: min(84dvh, 680px, calc(var(--mobile-viewport-height, var(--app-height, 100dvh)) - max(26px, var(--app-safe-top)) - max(24px, var(--app-safe-bottom))));
    border-radius: 20px;
    animation: workspaceSheetIn 170ms ease-out both;
  }

  .workspace-action-confirm > header {
    padding: 14px;
    grid-template-columns: 40px minmax(0, 1fr) 44px;
  }

  .workspace-action-confirm > header > span {
    width: 40px;
    height: 40px;
  }

  .workspace-action-confirm > header > button {
    width: 44px;
    min-height: 44px;
  }

  .workspace-action-confirm form {
    padding: 14px;
  }

  .workspace-role-option {
    min-height: 64px;
  }

  .workspace-confirm-actions .button {
    min-height: 46px;
    flex: 1;
  }

  .profile-blocked-row {
    min-height: 64px;
  }

  .profile-blocked-row > .button {
    min-height: 44px;
    padding: 0 10px;
    font-size: 10px;
  }

  .member.workspace-member-row {
    min-height: 58px;
    grid-template-columns: minmax(0, 1fr) 12px;
  }

  .member-profile-hit {
    min-height: 56px;
    padding: 7px 8px;
  }

  @keyframes workspaceSheetIn {
    from { opacity: 0; transform: translate3d(0, 14px, 0); }
    to { opacity: 1; transform: translate3d(0, 0, 0); }
  }

  @media (prefers-reduced-motion: reduce) {
    .workspace-member-menu,
    .workspace-action-confirm {
      animation: none;
    }
  }
}

@media (max-width: 420px) {
  .chat-header:has(.mobile-header-voice-toggle):has(.mobile-header-music-toggle):has(.mobile-header-audiobook-toggle) {
    gap: 4px;
  }

  .chat-header:has(.mobile-header-voice-toggle):has(.mobile-header-music-toggle):has(.mobile-header-audiobook-toggle) .title-icon,
  .chat-header:has(.mobile-header-voice-toggle):has(.mobile-header-music-toggle):has(.mobile-header-audiobook-toggle) .chat-title p {
    display: none;
  }

  .chat-header:has(.mobile-header-voice-toggle):has(.mobile-header-music-toggle):has(.mobile-header-audiobook-toggle) .chat-title {
    gap: 0;
  }

  .chat-header:has(.mobile-header-voice-toggle):has(.mobile-header-music-toggle):has(.mobile-header-audiobook-toggle) .chat-title h1 {
    max-width: 100%;
  }

  .chat-header:has(.mobile-header-voice-toggle):has(.mobile-header-music-toggle):has(.mobile-header-audiobook-toggle) .header-actions {
    gap: 3px;
  }
}

/* Keep compact mobile glyphs while exposing complete 44px touch regions. */
@media (max-width: 820px), (max-width: 960px) and (max-height: 520px) and (orientation: landscape) {
  .mobile-header-voice-meta .button,
  .mobile-header-voice-actions .button,
  .mobile-header-voice-participants .voice-participant-volume-button,
  .voice-card .voice-participant-volume-button,
  .composer-tools .button,
  .composer-format-toolbar .button.icon,
  .composer-actions .button,
  .composer-context-dismiss.button,
  .workspace-settings-header .profile-avatar-tools .profile-avatar-action {
    position: relative;
    z-index: 1;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  .mobile-header-voice-meta .button::before,
  .mobile-header-voice-actions .button::before,
  .mobile-header-voice-participants .voice-participant-volume-button::before,
  .composer-tools .button::before,
  .composer-format-toolbar .button.icon::before,
  .composer-actions .button::before,
  .composer-context-dismiss.button::before,
  .workspace-settings-header .profile-avatar-tools .profile-avatar-action::before {
    position: absolute;
    content: "";
  }

  .mobile-header-voice-meta .button::before {
    inset: -5px;
  }

  .mobile-header-voice-actions .button::before {
    inset: -3px 0;
  }

  .mobile-header-voice-participants .voice-participant-volume-button::before {
    inset: -7px;
  }

  .voice-card .voice-participant-volume-button {
    min-width: 44px;
    height: 44px;
    margin-right: 0;
  }

  .voice-participant-volume-reset {
    min-height: 44px;
    touch-action: manipulation;
  }

  .composer-tools {
    gap: 8px;
  }

  .composer-tools .button {
    width: 36px;
    min-width: 36px;
    min-height: 40px;
  }

  .composer-tools .button::before {
    inset: -2px -4px;
  }

  .composer-format-toolbar {
    top: -54px;
    gap: 8px;
  }

  .composer-format-toolbar .button.icon {
    width: 36px;
    min-width: 36px;
    min-height: 40px;
  }

  .composer-format-toolbar .button.icon::before,
  .composer-actions .button::before {
    inset: -2px -4px;
  }

  .composer-context-dismiss.button::before {
    inset: -2px;
  }

  .composer-input {
    padding-right: 92px;
  }

  .composer-actions {
    gap: 8px;
  }

  .composer-actions .button,
  .composer-actions .composer-emoji {
    width: 36px;
    min-width: 36px;
    min-height: 40px;
  }

  .composer-context-dismiss.button {
    width: 40px;
    min-width: 40px;
    min-height: 40px;
  }

  .workspace-settings-header .profile-avatar-wrap {
    width: 80px;
    min-height: 46px;
    flex-basis: 80px;
  }

  .workspace-settings-header .avatar {
    width: 46px;
    height: 46px;
    flex-basis: 46px;
  }

  .workspace-settings-header .profile-avatar-tools {
    gap: 12px;
  }

  .workspace-settings-header .profile-avatar-tools .profile-avatar-action::before {
    inset: -6px;
  }
}