/* Feature and screen-specific styles that are still being split from the legacy monolith. */

    .login-form,
    .code-form {
      display: grid;
      gap: 14px;
      width: 100%;
      min-height: 0;
      align-content: start;
    }

    .auth-panel-stack {
      position: relative;
      width: 100%;
      min-height: 0;
    }

    .auth-panel {
      position: absolute;
      inset: 0;
      width: 100%;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transform: translateX(18px);
      transition:
        opacity 0.28s ease,
        transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
        visibility 0s linear 0.28s;
      will-change: transform, opacity;
    }

    .auth-panel.active,
    .auth-panel.entering,
    .auth-panel.leaving {
      visibility: visible;
      transition-delay: 0s;
    }

    .auth-panel.active,
    .auth-panel.entering {
      opacity: 1;
      pointer-events: auto;
      transform: translateX(0);
    }

    .auth-panel.leaving {
      opacity: 0;
      transform: translateX(-18px);
    }

    .code-actions {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }

    .otp-grid {
      display: grid;
      grid-template-columns: repeat(6, minmax(0, 1fr));
      gap: 10px;
    }

    .otp-input {
      height: 56px;
      padding: 0;
      text-align: center;
      font-size: 22px;
      font-weight: 700;
      line-height: 1;
      letter-spacing: 0.04em;
      appearance: none;
      -webkit-appearance: none;
      border-color: rgba(215, 225, 236, 0.95);
      background: rgba(248, 251, 255, 0.96);
      transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        background 0.18s ease,
        transform 0.18s ease;
    }

    .otp-input.filled {
      border-color: rgba(31, 122, 236, 0.34);
      background: rgba(233, 242, 255, 0.88);
      color: var(--accent-dark);
      box-shadow: inset 0 0 0 1px rgba(31, 122, 236, 0.08);
    }

    .otp-input:active {
      transform: scale(0.985);
    }

    .otp-input.invalid {
      border-color: rgba(180, 35, 24, 0.42);
      background: rgba(255, 232, 232, 0.72);
      color: var(--danger-text);
      box-shadow: 0 0 0 4px rgba(180, 35, 24, 0.08);
    }

    .code-hint {
      margin-top: 8px;
      font-size: 13px;
      color: var(--muted);
      line-height: 1.45;
      text-align: center;
    }

    .status-line {
      margin-top: 18px;
      min-height: 18px;
      font-size: 13px;
      color: var(--muted);
      text-align: center;
    }

    .status-line.error {
      color: var(--danger-text);
    }

    .status-line.success {
      color: #1d7b4f;
    }

    .app-screen-shell {
      max-width: 1180px;
      margin: 0 auto;
      padding-bottom: 92px;
    }

    .app-shell {
      max-width: 1180px;
      min-height: calc(100vh - 32px);
      display: flex;
      background: rgba(255, 255, 255, 0.74);
      border: 1px solid rgba(215, 225, 236, 0.9);
      border-radius: 28px;
      box-shadow: var(--shadow);
      overflow: hidden;
      backdrop-filter: blur(12px);
    }

    .sidebar {
      width: 320px;
      min-width: 320px;
      position: relative;
      display: flex;
      flex-direction: column;
      border-right: 1px solid rgba(215, 225, 236, 0.9);
      background: rgba(250, 252, 255, 0.88);
    }

    .sidebar-header,
    .chat-header {
      padding: 18px;
      border-bottom: 1px solid rgba(215, 225, 236, 0.9);
      background: var(--panel-soft);
    }

    .brand {
      margin-bottom: 14px;
    }

    .brand h2,
    .chat-title {
      margin: 0;
      font-size: 18px;
      font-weight: 700;
      letter-spacing: 0.02em;
    }

    .brand p,
    .chat-subtitle {
      margin: 4px 0 0;
      font-size: 13px;
      color: var(--muted);
    }

    .chat-subtitle.is-online {
      color: #18794e;
      font-weight: 500;
    }

    .chat-subtitle.is-recent {
      color: #5f748f;
      font-weight: 500;
    }

    .chat-subtitle.is-offline {
      color: var(--muted);
      font-weight: 400;
    }

    .sidebar-panels-track {
      width: 100%;
      height: 100%;
      display: flex;
      flex-wrap: nowrap;
      transform: translate3d(0, 0, 0);
      transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
      will-change: transform;
    }

    .sidebar-panels-track.no-transition {
      transition: none !important;
    }

    .sidebar-panel {
      position: relative;
      flex: 0 0 100%;
      width: 100%;
      height: 100%;
      min-width: 100%;
      min-height: 0;
      display: flex;
      flex-direction: column;
      pointer-events: none;
    }

    .sidebar-panel.active {
      pointer-events: auto;
    }

    .sidebar-search {
      padding: 0 18px 14px;
    }

    .chat-list-search-wrap {
      position: relative;
    }

    .search-input-wrap {
      position: relative;
      min-width: 0;
    }

    .search-input-wrap > .input,
    .search-input-wrap > input {
      padding-right: 42px;
    }

    .chat-list-search-icon {
      position: absolute;
      left: 14px;
      top: 50%;
      transform: translateY(-50%);
      width: 15px;
      height: 15px;
      color: #b0bcd4;
      line-height: 1;
      pointer-events: none;
      z-index: 1;
    }

    .chat-list-search-input {
      padding-left: 40px;
      padding-right: 42px;
    }

    .search-input-clear-button {
      position: absolute;
      right: 10px;
      top: 50%;
      transform: translateY(-50%) scale(0.9);
      width: 24px;
      height: 24px;
      border: 0;
      border-radius: 999px;
      background: rgba(123, 141, 168, 0.16);
      color: rgba(90, 102, 121, 0.95);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.18s ease, transform 0.18s ease, background 0.18s ease, color 0.18s ease;
      -webkit-tap-highlight-color: transparent;
      z-index: 1;
    }

    .search-input-clear-button.is-visible {
      opacity: 1;
      pointer-events: auto;
      transform: translateY(-50%) scale(1);
    }

    .search-input-clear-button:active {
      background: rgba(123, 141, 168, 0.24);
      transform: translateY(-50%) scale(0.95);
    }

    .search-input-clear-button[hidden] {
      display: none !important;
    }

    .chat-folders-bar {
      display: flex;
      gap: 8px;
      overflow-x: auto;
      padding: 0 18px 12px;
      scrollbar-width: none;
      -webkit-overflow-scrolling: touch;
    }

    .chat-folders-bar::-webkit-scrollbar {
      display: none;
    }

    .chat-folder-chip {
      border: 1px solid rgba(215, 225, 236, 0.92);
      background: rgba(255, 255, 255, 0.82);
      color: var(--text);
      border-radius: 999px;
      padding: 8px 14px;
      font-size: 13px;
      font-weight: 700;
      line-height: 1;
      white-space: nowrap;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
      transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, transform 0.16s ease;
    }

    .chat-folder-chip.active {
      background: var(--folder-soft, rgba(31, 122, 236, 0.12));
      border-color: var(--folder-accent, var(--accent));
      color: var(--folder-accent, var(--accent-dark));
    }

    .chat-folder-chip:active {
      transform: scale(0.98);
    }

    .sidebar-panel-header {
      padding: 18px 18px 10px;
      text-align: center;
      flex-shrink: 0;
    }

    .sidebar-panel-header-row {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto;
      align-items: center;
      gap: 10px;
    }

    .sidebar-panel-header-row > :first-child:empty,
    .sidebar-panel-header-row > :last-child:empty {
      width: 36px;
      height: 36px;
    }

    .sidebar-panel-title {
      margin: 0;
      font-size: 18px;
      font-weight: 700;
      letter-spacing: -0.02em;
      color: var(--text);
    }

    .sidebar-header-action {
      min-width: 36px;
      height: 36px;
      padding: 0 12px;
      border: 0;
      border-radius: 999px;
      background: rgba(236, 244, 255, 0.95);
      color: var(--accent-dark);
      font-size: 13px;
      font-weight: 700;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      -webkit-tap-highlight-color: transparent;
    }

    .sidebar-header-actions {
      display: inline-flex;
      align-items: center;
      justify-content: flex-end;
      gap: 8px;
    }

    .sidebar-header-icon-action {
      width: 36px;
      min-width: 36px;
      padding: 0;
      font-size: 20px;
      line-height: 1;
    }

    .sidebar-header-icon-action .ui-icon {
      width: 16px;
      height: 16px;
      color: var(--accent-dark);
    }

    .sidebar-header-action[hidden] {
      display: none;
    }

    .sidebar-header-action-count {
      min-width: 18px;
      height: 18px;
      padding: 0 5px;
      border-radius: 999px;
      background: rgba(31, 122, 236, 0.14);
      color: var(--accent-dark);
      font-size: 11px;
      font-weight: 800;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    .contacts-meta {
      margin-top: 8px;
      font-size: 12px;
      color: var(--muted);
    }

    .sidebar-list {
      flex: 1;
      min-height: 0;
      overflow-y: auto;
      overscroll-behavior: contain;
      -webkit-overflow-scrolling: touch;
      padding: 0;
      display: flex;
      flex-direction: column;
      gap: 0;
    }

    .sidebar-list .list-empty {
      margin: 12px 18px 0;
    }

    .sidebar-list-section-title {
      padding: 10px 18px 8px;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: var(--muted);
    }

    .sidebar-list-section-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 10px 18px 8px;
    }

    .sidebar-list-section-header .sidebar-list-section-title {
      padding: 0;
    }

    .sidebar-list-section-action {
      border: 0;
      background: transparent;
      padding: 0;
      margin: 0;
      font-size: 12px;
      line-height: 1.2;
      font-weight: 700;
      color: var(--accent-dark);
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
    }

    .chat-search-history-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 10px;
      width: 100%;
      border-bottom: 1px solid rgba(226, 233, 242, 0.92);
      padding: 0 18px;
      background: transparent;
    }

    .chat-search-history-button {
      width: 100%;
      border: 0;
      background: transparent;
      padding: 14px 0;
      text-align: left;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
    }

    .chat-search-history-remove {
      width: 30px;
      height: 30px;
      border: 0;
      border-radius: 999px;
      background: rgba(238, 243, 251, 0.92);
      color: var(--muted);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      line-height: 1;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
      flex-shrink: 0;
    }

    .chat-search-highlight {
      display: inline;
      padding: 0 2px;
      border-radius: 5px;
      background: rgba(31, 122, 236, 0.14);
      color: inherit;
      font-weight: 700;
      box-decoration-break: clone;
      -webkit-box-decoration-break: clone;
    }

    .chat-search-phone-match {
      margin-top: 4px;
      font-size: 12px;
      line-height: 1.35;
      color: var(--muted);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .chat-search-message-extra {
      margin-top: 4px;
      font-size: 12px;
      line-height: 1.35;
      color: var(--muted);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .list-empty,
    .messages-empty {
      padding: 20px;
      border: 1px dashed var(--panel-border);
      border-radius: 20px;
      text-align: center;
      color: var(--muted);
      background: rgba(255, 255, 255, 0.72);
    }

    .sidebar-item {
      width: 100%;
      flex-shrink: 0;
      border: 0;
      border-bottom: 1px solid rgba(226, 233, 242, 0.92);
      background: transparent;
      border-radius: 0;
      padding: 14px 18px;
      text-align: left;
      cursor: pointer;
      transition: background 0.15s ease, transform 0.15s ease;
    }

    .chat-list-swipe-shell {
      position: relative;
      overflow: hidden;
      border-radius: 0;
      width: 100%;
      flex-shrink: 0;
      touch-action: pan-y;
      --chat-left-progress: 0;
      --chat-right-progress: 0;
    }

    .chat-list-actions {
      position: absolute;
      top: 0;
      bottom: 0;
      display: flex;
      align-items: stretch;
      gap: 0;
      padding: 0;
      pointer-events: none;
      overflow: hidden;
      z-index: 0;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.12s ease, visibility 0s linear 0.12s;
    }

    .chat-list-actions-track {
      display: flex;
      align-items: stretch;
      gap: 0;
      will-change: transform;
      opacity: 0;
      transition: opacity 0.12s ease;
    }

    .chat-list-actions-left {
      right: 0;
      width: 324px;
      justify-content: flex-end;
    }

    .chat-list-actions-right {
      left: 0;
      width: 216px;
      justify-content: flex-start;
    }

    .chat-list-swipe-shell.is-removing {
      pointer-events: none;
    }

    .chat-list-swipe-shell.is-archive-actions .chat-list-actions {
      grid-template-columns: 92px 92px 84px 96px;
    }

    .chat-list-action-button {
      height: 100%;
      width: 108px;
      min-width: 108px;
      border: 0;
      border-radius: 0;
      color: #fff;
      font-size: 12px;
      font-weight: 700;
      -webkit-tap-highlight-color: transparent;
      pointer-events: none;
      transform: translate3d(0, 0, 0);
      transition: background 0.18s ease, transform 0.16s ease, box-shadow 0.16s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 10px;
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
      overflow: visible;
    }

    .chat-list-action-content {
      display: grid;
      gap: 8px;
      justify-items: center;
      text-align: center;
      line-height: 1.1;
      width: 100%;
    }

    .chat-list-action-content i {
      font-size: 18px;
      line-height: 1;
    }

    .chat-list-actions-left .chat-list-actions-track {
      transform: translate3d(calc((1 - var(--chat-left-progress)) * 22px), 0, 0);
      opacity: var(--chat-left-progress);
    }

    .chat-list-actions-right .chat-list-actions-track {
      transform: translate3d(calc((1 - var(--chat-right-progress)) * -22px), 0, 0);
      opacity: var(--chat-right-progress);
    }

    .chat-list-actions-left .chat-list-action-button {
      transform-origin: right center;
      transform:
        translate3d(calc((1 - var(--chat-left-progress)) * (12px + (var(--chat-action-order, 0) * 8px))), 0, 0)
        scaleX(calc(0.42 + (var(--chat-left-progress) * 0.58)))
        scaleY(calc(0.92 + (var(--chat-left-progress) * 0.08)));
    }

    .chat-list-actions-right .chat-list-action-button {
      transform-origin: left center;
      transform:
        translate3d(calc((1 - var(--chat-right-progress)) * (-12px - (var(--chat-action-order, 0) * 8px))), 0, 0)
        scaleX(calc(0.42 + (var(--chat-right-progress) * 0.58)))
        scaleY(calc(0.92 + (var(--chat-right-progress) * 0.08)));
    }

    .chat-list-actions-left .chat-list-action-content {
      transform: translate3d(calc((1 - var(--chat-left-progress)) * 6px), 0, 0) scale(calc(0.8 + (var(--chat-left-progress) * 0.2)));
      transform-origin: center;
      transition: transform 0.16s ease;
    }

    .chat-list-actions-right .chat-list-action-content {
      transform: translate3d(calc((1 - var(--chat-right-progress)) * -6px), 0, 0) scale(calc(0.8 + (var(--chat-right-progress) * 0.2)));
      transform-origin: center;
      transition: transform 0.16s ease;
    }

    .chat-list-swipe-shell.is-revealed-left .chat-list-actions-left .chat-list-action-button,
    .chat-list-swipe-shell.is-revealed-right .chat-list-actions-right .chat-list-action-button {
      pointer-events: auto;
    }

    .chat-list-swipe-shell.is-revealed-left .chat-list-actions-left,
    .chat-list-swipe-shell.is-revealed-right .chat-list-actions-right {
      opacity: 1;
      visibility: visible;
      transition-delay: 0s;
    }

    .chat-list-swipe-shell.is-revealed-left .chat-list-actions-left .chat-list-actions-track,
    .chat-list-swipe-shell.is-revealed-right .chat-list-actions-right .chat-list-actions-track {
      opacity: 1;
    }

    .chat-list-action-button.archive {
      background: linear-gradient(180deg, #6ab3ff 0%, #4589f3 100%);
    }

    .chat-list-action-button.pin {
      background: linear-gradient(180deg, #6f95ff 0%, #4d6df0 100%);
    }

    .chat-list-action-button.mute {
      background: linear-gradient(180deg, #8da0ba 0%, #65768b 100%);
    }

    .chat-list-action-button.delete {
      background: linear-gradient(180deg, #ff7f8f 0%, #ef4f67 100%);
    }

    .chat-list-action-button.unread {
      background: linear-gradient(180deg, #5fd3bd 0%, #2eb89d 100%);
    }

    .chat-list-swipe-shell > .sidebar-item {
      position: relative;
      z-index: 1;
      will-change: transform;
      background: rgba(255, 255, 255, 0.98);
    }

    .chat-list-swipe-shell > .sidebar-item.active {
      background: rgba(255, 255, 255, 0.98);
    }

    .chat-list-swipe-shell > .sidebar-item:hover {
      background: rgba(255, 255, 255, 0.98);
    }

    .chat-list-swipe-shell > .sidebar-item:active {
      background: rgba(233, 242, 255, 0.4);
    }

    .chat-list-swipe-shell > .sidebar-item.is-pinned-chat {
      background: rgba(239, 244, 250, 0.84);
      -webkit-tap-highlight-color: transparent;
    }

    .chat-list-swipe-shell > .sidebar-item.is-pinned-chat.active,
    .chat-list-swipe-shell > .sidebar-item.is-pinned-chat:hover,
    .chat-list-swipe-shell > .sidebar-item.is-pinned-chat:focus-visible {
      background: rgba(239, 244, 250, 0.84);
    }

    .chat-list-swipe-shell > .sidebar-item.is-pinned-chat:active {
      background: rgba(229, 238, 249, 0.96);
    }

    .chat-list-action-button.restore {
      background: #4e89de;
    }

    .sidebar-item-title {
      margin: 0;
      font-size: 15px;
      font-weight: 700;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .sidebar-item-title.is-pinned::before {
      content: '\f08d';
      font-family: "Font Awesome 6 Free";
      font-weight: 900;
      margin-right: 6px;
      font-size: 12px;
      vertical-align: 1px;
      opacity: 0.82;
    }

    .sidebar-item-title.is-muted::after {
      content: '\f1f6';
      font-family: "Font Awesome 6 Free";
      font-weight: 900;
      margin-left: 6px;
      font-size: 12px;
      vertical-align: 1px;
      opacity: 0.82;
    }

    .sidebar-item-meta {
      font-size: 12px;
      color: var(--muted);
    }

    .sidebar-item-rich {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      gap: 12px;
      align-items: center;
    }

    .sidebar-avatar {
      width: 44px;
      height: 44px;
      border-radius: 999px;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      background: linear-gradient(180deg, #eef5ff 0%, #e3efff 100%);
      color: var(--accent-dark);
      font-size: 16px;
      font-weight: 800;
      border: 1px solid rgba(215, 225, 236, 0.95);
      box-shadow: inset 0 0 0 1px rgba(31, 122, 236, 0.08);
    }

    .sidebar-avatar.has-image {
      background: #fff;
    }

    .sidebar-avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .sidebar-item-body {
      min-width: 0;
    }

    .sidebar-item-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: start;
      gap: 8px;
    }

    .sidebar-item-time {
      flex-shrink: 0;
      font-size: 11px;
      line-height: 1.3;
      color: var(--muted);
      white-space: nowrap;
    }

    .sidebar-item-secondary {
      margin-top: 4px;
      font-size: 12px;
      color: var(--muted);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .sidebar-item-secondary.is-typing {
      color: var(--accent-dark);
      font-weight: 600;
    }

    .sidebar-item-secondary.is-draft {
      color: #c45c2a;
      font-weight: 600;
    }

    .sidebar-item-inline-action {
      margin-left: auto;
      border: 0;
      background: rgba(31, 122, 236, 0.08);
      color: var(--accent-dark);
      border-radius: 999px;
      height: 28px;
      padding: 0 11px;
      font-size: 12px;
      font-weight: 700;
      line-height: 1;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      -webkit-tap-highlight-color: transparent;
      flex-shrink: 0;
      align-self: center;
    }

    .sidebar-item-inline-actions {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap;
      justify-content: flex-end;
    }

    .typing-inline-indicator {
      display: inline-flex;
      align-items: center;
      gap: 3px;
      margin-left: 6px;
      vertical-align: middle;
    }

    .typing-inline-indicator span {
      width: 4px;
      height: 4px;
      border-radius: 999px;
      background: currentColor;
      opacity: 0.32;
      animation: typingInlinePulse 1s infinite ease-in-out;
    }

    .typing-inline-indicator span:nth-child(2) {
      animation-delay: 0.14s;
    }

    .typing-inline-indicator span:nth-child(3) {
      animation-delay: 0.28s;
    }

    @keyframes typingInlinePulse {
      0%, 80%, 100% {
        opacity: 0.28;
        transform: translateY(0);
      }
      40% {
        opacity: 1;
        transform: translateY(-1px);
      }
    }

    .sidebar-item-footer {
      margin-top: 4px;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 8px;
    }

    .sidebar-item-badge {
      min-width: 20px;
      height: 20px;
      padding: 0 6px;
      border-radius: 999px;
      background: var(--accent);
      color: #fff;
      font-size: 11px;
      font-weight: 700;
      line-height: 20px;
      text-align: center;
      justify-self: end;
    }

    .sidebar-item-badge.is-dot {
      min-width: 10px;
      width: 10px;
      height: 10px;
      padding: 0;
      line-height: 10px;
      font-size: 0;
      color: transparent;
    }

    .blocked-users-card {
      margin-top: 14px;
    }

    .blocked-list-item {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 12px;
    }

    .blocked-list-action {
      flex-shrink: 0;
      min-width: 108px;
      padding: 10px 12px;
      border: 0;
      border-radius: 12px;
      background: rgba(78, 137, 222, 0.12);
      color: var(--accent-dark);
      font-size: 13px;
      font-weight: 700;
      text-align: center;
      -webkit-tap-highlight-color: transparent;
    }

    .blocked-list-action:active {
      background: rgba(78, 137, 222, 0.18);
    }

    .chat-panel {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      position: relative;
    }

    html[data-chat-wallpaper="default"] .chat-panel {
      background:
        radial-gradient(circle at top, rgba(31, 122, 236, 0.09), transparent 36%),
        linear-gradient(180deg, #f7fbff 0%, #eef4fb 100%);
    }

    html[data-chat-wallpaper="sky"] .chat-panel {
      background:
        radial-gradient(circle at top left, rgba(110, 186, 255, 0.24), transparent 38%),
        radial-gradient(circle at bottom right, rgba(120, 167, 255, 0.14), transparent 34%),
        linear-gradient(180deg, #f2f8ff 0%, #e4efff 100%);
    }

    html[data-chat-wallpaper="mint"] .chat-panel {
      background:
        radial-gradient(circle at top left, rgba(96, 213, 189, 0.16), transparent 38%),
        radial-gradient(circle at bottom right, rgba(89, 177, 255, 0.10), transparent 36%),
        linear-gradient(180deg, #f2fbf8 0%, #e6f5ef 100%);
    }

    html[data-chat-wallpaper="sunset"] .chat-panel {
      background:
        radial-gradient(circle at top, rgba(255, 171, 121, 0.18), transparent 38%),
        radial-gradient(circle at bottom right, rgba(255, 119, 163, 0.10), transparent 34%),
        linear-gradient(180deg, #fff7f1 0%, #fbeee9 100%);
    }

    html[data-chat-wallpaper="graphite"] .chat-panel {
      background:
        radial-gradient(circle at top, rgba(104, 122, 153, 0.11), transparent 36%),
        linear-gradient(180deg, #eef2f7 0%, #e4e9f0 100%);
    }

    .chat-header-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      min-height: 44px;
    }

    .chat-profile-button,
    .message-profile-button {
      border: 0;
      background: transparent;
      padding: 0;
      color: inherit;
      font: inherit;
      text-align: inherit;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
    }

    .chat-profile-button {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      gap: 12px;
      align-items: center;
      text-align: left;
      min-height: 44px;
    }

    .chat-profile-button > div:last-child {
      min-width: 0;
      min-height: 36px;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .chat-header-actions {
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }

    .chat-search-button {
      width: 36px;
      height: 36px;
      border: 0;
      border-radius: 999px;
      background: rgba(236, 244, 255, 0.95);
      color: var(--accent-dark);
      font-size: 17px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      -webkit-tap-highlight-color: transparent;
    }

    .chat-search-panel {
      display: none;
      padding: 12px 18px 10px;
      border-bottom: 1px solid rgba(215, 225, 236, 0.9);
      background: var(--panel-soft);
    }

    .chat-search-panel.active {
      display: block;
    }

    .chat-search-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto auto;
      gap: 10px;
      align-items: center;
    }

    .chat-search-input-wrap {
      position: relative;
      min-width: 0;
    }

    .chat-search-input {
      width: 100%;
      min-height: 44px;
      border: 1px solid rgba(215, 225, 236, 0.95);
      border-radius: 14px;
      padding: 0 44px 0 14px;
      font-size: 15px;
      background: rgba(255, 255, 255, 0.96);
    }

    .chat-search-clear {
      position: absolute;
      right: 10px;
      top: 50%;
      transform: translateY(-50%) scale(0.9);
      width: 24px;
      height: 24px;
      border: 0;
      border-radius: 999px;
      background: rgba(123, 141, 168, 0.16);
      color: rgba(90, 102, 121, 0.95);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.18s ease, transform 0.18s ease, background 0.18s ease, color 0.18s ease;
      -webkit-tap-highlight-color: transparent;
    }

    .chat-search-clear.is-visible {
      opacity: 1;
      pointer-events: auto;
      transform: translateY(-50%) scale(1);
    }

    .chat-search-clear:active {
      background: rgba(123, 141, 168, 0.24);
      transform: translateY(-50%) scale(0.95);
    }

    .chat-search-date-native-input {
      position: fixed;
      left: -9999px;
      width: 1px;
      height: 1px;
      opacity: 0;
      pointer-events: none;
    }

    .chat-search-close {
      min-width: 44px;
      min-height: 44px;
      border: 0;
      border-radius: 14px;
      background: transparent;
      color: var(--accent-dark);
      font-size: 16px;
      font-weight: 700;
      padding: 0 4px;
      white-space: nowrap;
      -webkit-tap-highlight-color: transparent;
    }

    .chat-search-navigator {
      margin-top: 10px;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 8px;
    }

    .chat-search-nav-button {
      width: 32px;
      height: 32px;
      border: 0;
      border-radius: 999px;
      background: rgba(236, 244, 255, 0.95);
      color: var(--accent-dark);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      -webkit-tap-highlight-color: transparent;
    }

    .chat-search-nav-button:disabled {
      opacity: 0.45;
    }

    .chat-search-counter {
      min-width: 56px;
      font-size: 12px;
      line-height: 1;
      font-weight: 700;
      color: var(--muted);
      text-align: center;
      font-variant-numeric: tabular-nums;
    }

    .chat-search-results {
      margin-top: 10px;
      display: flex;
      flex-direction: column;
      gap: 0;
      border-top: 1px solid rgba(226, 233, 242, 0.92);
    }

    .chat-search-results:empty {
      display: none;
    }

    .forward-preview-card {
      width: min(100%, 420px);
      margin: 0 auto 14px;
      padding: 14px 16px;
      border: 1px solid rgba(215, 225, 236, 0.92);
      border-radius: 20px;
      background: rgba(255, 255, 255, 0.84);
      display: grid;
      gap: 6px;
      text-align: left;
      appearance: none;
      -webkit-appearance: none;
      -webkit-tap-highlight-color: transparent;
    }

    .forward-preview-card.is-clickable {
      cursor: pointer;
    }

    .forward-preview-card.is-clickable:active {
      transform: scale(0.992);
      box-shadow: 0 10px 22px rgba(17, 34, 68, 0.06);
    }

    .forward-preview-card:disabled {
      cursor: default;
    }

    .forward-preview-label {
      font-size: 12px;
      line-height: 1.4;
      color: var(--muted);
    }

    .forward-preview-author {
      font-size: 14px;
      font-weight: 700;
      line-height: 1.35;
      color: var(--accent-dark);
    }

    .forward-preview-text {
      font-size: 14px;
      line-height: 1.45;
      color: var(--text);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .forward-list {
      background: rgba(255, 255, 255, 0.82);
      border-top: 1px solid rgba(223, 231, 241, 0.92);
      border-bottom: 1px solid rgba(223, 231, 241, 0.92);
    }

    .chat-search-result {
      width: 100%;
      border: 0;
      border-bottom: 1px solid rgba(226, 233, 242, 0.92);
      background: transparent;
      text-align: left;
      padding: 12px 0;
      display: grid;
      gap: 4px;
      -webkit-tap-highlight-color: transparent;
    }

    .chat-search-result.is-active {
      background: rgba(236, 244, 255, 0.78);
    }

    .chat-search-result-head {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 8px;
      align-items: start;
    }

    .chat-search-result-author {
      font-size: 12px;
      font-weight: 700;
      color: var(--accent-dark);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .chat-search-result-time {
      font-size: 11px;
      color: var(--muted);
      white-space: nowrap;
    }

    .chat-search-result-text {
      font-size: 13px;
      line-height: 1.4;
      color: var(--text);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .chat-search-status {
      margin-top: 8px;
      font-size: 12px;
      color: var(--muted);
    }

    .chat-header-avatar {
      width: 44px;
      height: 44px;
      border-radius: 999px;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      background: linear-gradient(180deg, #eef5ff 0%, #e3efff 100%);
      color: var(--accent-dark);
      font-size: 16px;
      font-weight: 800;
      border: 1px solid rgba(215, 225, 236, 0.95);
      box-shadow: inset 0 0 0 1px rgba(31, 122, 236, 0.08);
    }

    .chat-header-avatar.has-image,
    .message-author-avatar.has-image {
      background: #fff;
    }

    .chat-header-avatar img,
    .message-author-avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .status-badge {
      flex-shrink: 0;
      min-width: 76px;
      min-height: 32px;
      padding: 8px 12px;
      border-radius: 999px;
      background: #ecf4ff;
      color: var(--accent-dark);
      font-size: 12px;
      font-weight: 600;
    }

    .status-badge:empty {
      display: none;
    }

    .messages {
      flex: 1;
      min-height: 320px;
      overflow-y: auto;
      overscroll-behavior: contain;
      -webkit-overflow-scrolling: touch;
      padding: 18px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      scroll-behavior: auto;
      position: relative;
    }

    .chat-scroll-date-indicator {
      position: absolute;
      left: 50%;
      top: 16px;
      z-index: 6;
      transform: translateX(-50%) translateY(-6px);
      opacity: 0;
      pointer-events: none;
      min-height: 28px;
      padding: 7px 13px;
      border-radius: 999px;
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.46), rgba(246, 250, 255, 0.34));
      border: 1px solid rgba(255, 255, 255, 0.46);
      box-shadow:
        0 8px 22px rgba(17, 34, 68, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.34);
      backdrop-filter: blur(16px) saturate(1.08);
      -webkit-backdrop-filter: blur(16px) saturate(1.08);
      color: rgba(35, 50, 70, 0.82);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.03em;
      line-height: 1;
      white-space: nowrap;
      transition: opacity 0.18s ease, transform 0.18s ease;
    }

    .chat-scroll-date-indicator.is-visible {
      opacity: 1;
      transform: translateX(-50%) translateY(0);
    }

    .chat-scroll-bottom-button {
      position: absolute;
      right: 16px;
      bottom: calc(env(safe-area-inset-bottom, 0px) + 88px);
      z-index: 7;
      width: 46px;
      height: 46px;
      border: 1px solid rgba(215, 225, 236, 0.92);
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.94);
      color: var(--accent-dark);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 12px 28px rgba(17, 34, 68, 0.12);
      backdrop-filter: blur(16px) saturate(1.04);
      -webkit-backdrop-filter: blur(16px) saturate(1.04);
      opacity: 0;
      pointer-events: none;
      transform: translateY(8px) scale(0.94);
      transition: opacity 0.18s ease, transform 0.18s ease;
    }

    .chat-scroll-bottom-button.is-visible {
      opacity: 1;
      pointer-events: auto;
      transform: translateY(0) scale(1);
    }

    .chat-scroll-bottom-badge {
      position: absolute;
      top: -4px;
      right: -4px;
      min-width: 19px;
      height: 19px;
      padding: 0 5px;
      border-radius: 999px;
      background: var(--accent);
      color: #fff;
      font-size: 10px;
      font-weight: 800;
      line-height: 19px;
      text-align: center;
      box-shadow: 0 6px 14px rgba(31, 122, 236, 0.22);
    }

    .message-day-separator {
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 14px 0 10px;
      pointer-events: none;
    }

    .message-day-separator-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 28px;
      padding: 7px 13px;
      border-radius: 999px;
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.46), rgba(246, 250, 255, 0.34));
      border: 1px solid rgba(255, 255, 255, 0.46);
      box-shadow:
        0 8px 22px rgba(17, 34, 68, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.34);
      backdrop-filter: blur(16px) saturate(1.08);
      -webkit-backdrop-filter: blur(16px) saturate(1.08);
      color: rgba(35, 50, 70, 0.82);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.03em;
      line-height: 1;
      white-space: nowrap;
    }

    .message-unread-separator {
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 6px 0 10px;
      pointer-events: none;
    }

    .message-unread-separator-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 28px;
      padding: 7px 13px;
      border-radius: 999px;
      background: rgba(31, 122, 236, 0.12);
      border: 1px solid rgba(31, 122, 236, 0.18);
      color: var(--accent-dark);
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.03em;
    }

    .message-row {
      display: flex;
      position: relative;
      touch-action: pan-y;
    }

    .message-row.is-selection-mode {
      align-items: flex-start;
      gap: 10px;
    }

    .message-row.self {
      justify-content: flex-end;
    }

    .message-row.other {
      justify-content: flex-start;
    }

    .message-row.system {
      justify-content: center;
    }

    .message-row.is-grouped-with-previous {
      margin-top: -6px;
    }

    .message-bubble {
      max-width: min(80%, 560px);
      padding: 12px 14px;
      border-radius: 18px;
      box-shadow: 0 8px 20px rgba(17, 34, 68, 0.05);
      border: 1px solid rgba(216, 224, 234, 0.95);
      word-break: break-word;
      position: relative;
      transform: translate3d(0, 0, 0);
      transition: transform 0.22s ease;
    }

    .message-selection-check {
      width: 20px;
      height: 20px;
      min-width: 20px;
      margin-top: 12px;
      border: 0;
      border-radius: 50%;
      background: #eef2f9;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0;
      box-shadow: none;
      flex-shrink: 0;
    }

    .message-selection-check-icon {
      width: 10px;
      height: 10px;
      display: block;
      opacity: 0;
      transform: scale(0.7);
      transition: opacity 0.16s ease, transform 0.16s ease;
      background-repeat: no-repeat;
      background-position: center;
      background-size: 10px 10px;
      background-image: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 5l2.5 2.5L8 3' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    }

    .message-selection-check.is-selected {
      background: #1664c4;
    }

    .message-selection-check.is-selected .message-selection-check-icon {
      opacity: 1;
      transform: scale(1);
    }

    .message-row.self .message-bubble {
      background: var(--bubble-self);
      border-bottom-right-radius: 6px;
    }

    .message-row.other .message-bubble {
      background: var(--bubble-other);
      border-bottom-left-radius: 6px;
    }

    .message-row.system .message-bubble {
      max-width: min(88%, 460px);
      padding: 8px 12px;
      border-radius: 999px;
      background: rgba(233, 239, 247, 0.96);
      border: 1px solid rgba(216, 224, 234, 0.92);
      box-shadow: none;
    }

    .message-header {
      margin-bottom: 6px;
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 11px;
      color: var(--muted);
    }

    .message-header-spacer {
      flex: 1 1 auto;
    }

    .message-bottom-row {
      margin-top: 8px;
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 10px;
    }

    .message-bottom-row.is-sticker {
      margin-top: 6px;
    }

    .message-bottom-row:not(.has-reactions) {
      justify-content: flex-end;
    }

    .message-footer {
      display: flex;
      justify-content: flex-end;
      align-items: flex-end;
      gap: 6px;
      font-size: 11px;
      line-height: 1;
      color: var(--muted);
      text-align: right;
      flex: 0 0 auto;
      white-space: nowrap;
    }

    .message-footer:empty {
      display: none;
    }

    .message-footer-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 4px 8px;
      border-radius: 999px;
      background: rgba(236, 242, 250, 0.92);
      border: 1px solid rgba(216, 224, 234, 0.84);
      box-shadow: 0 4px 10px rgba(17, 34, 68, 0.04);
    }

    .message-row.self .message-footer-badge {
      background: rgba(219, 235, 255, 0.92);
      border-color: rgba(173, 205, 244, 0.9);
    }

    .message-footer.is-sticker {
      gap: 5px;
    }

    .message-original-toggle-wrap {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 6px;
      margin-top: 8px;
    }

    .message-row.self .message-original-toggle-wrap {
      align-items: flex-end;
    }

    .message-original-toggle {
      padding: 0;
      border: none;
      background: transparent;
      color: #1664c4;
      font-size: 12px;
      font-weight: 500;
      line-height: 1.2;
      cursor: pointer;
    }

    .message-original-text {
      max-width: 100%;
      padding: 8px 10px;
      border-radius: 12px;
      background: rgba(22, 100, 196, 0.08);
      color: inherit;
      font-size: 12px;
      line-height: 1.45;
      white-space: normal;
      word-break: break-word;
    }

    .message-ticks {
      font-size: 13px;
      line-height: 1;
      letter-spacing: -0.08em;
      color: rgba(108, 122, 143, 0.88);
      font-weight: 700;
      margin-left: -2px;
    }

    .message-views {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      color: rgba(108, 122, 143, 0.88);
      font-weight: 600;
    }

    .message-views i {
      font-size: 11px;
    }

    .message-ticks.seen {
      color: var(--accent-dark);
    }

    .message-action-button {
      width: 26px;
      height: 26px;
      border: 0;
      border-radius: 999px;
      background: rgba(238, 243, 251, 0.92);
      color: var(--muted);
      font-size: 16px;
      line-height: 1;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
    }

    .chat-panel.is-message-actions-open .chat-header,
    .chat-panel.is-message-actions-open .chat-search-panel,
    .chat-panel.is-message-actions-open .composer {
      filter: blur(8px);
      opacity: 0.24;
      pointer-events: none;
      transition: filter 0.18s ease, opacity 0.18s ease;
    }

    .messages.is-actions-open .message-row {
      filter: blur(8px);
      opacity: 0.22;
      pointer-events: none;
      transition: filter 0.18s ease, opacity 0.18s ease;
    }

    .messages.is-actions-open .message-row.is-action-target {
      filter: none !important;
      opacity: 1 !important;
      pointer-events: auto;
      z-index: 121;
      transform: translateY(var(--message-action-shift-y, 0px));
      transition: transform 0.18s ease, filter 0.18s ease, opacity 0.18s ease;
    }

    .messages.is-actions-open .message-row.is-action-target .message-bubble {
      box-shadow: 0 18px 36px rgba(17, 34, 68, 0.16);
      transform: scale(1.012);
      transition: box-shadow 0.18s ease, transform 0.18s ease;
    }

    #messageActionsModal {
      align-items: stretch;
      justify-content: flex-start;
      padding: 0;
      background: rgba(7, 12, 20, 0.08);
      z-index: 120;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }

    #messageActionsModal .message-actions-card {
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      width: auto;
      height: auto;
      padding: 0;
      border: 0;
      background: transparent;
      box-shadow: none;
      overflow: visible;
      z-index: 122;
      visibility: hidden;
      pointer-events: none;
      transform: none !important;
      opacity: 1 !important;
      transition: none !important;
    }

    #chatListActionsModal {
      background: rgba(7, 12, 20, 0.12);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      z-index: 118;
    }

    .chat-list-actions-card {
      position: absolute;
      width: min(320px, calc(100vw - 24px));
      padding: 14px 14px 12px;
      border-radius: 24px;
      background: rgba(255, 255, 255, 0.96);
      box-shadow: 0 22px 50px rgba(17, 34, 68, 0.18);
      border: 1px solid rgba(225, 234, 244, 0.92);
      transform-origin: top right;
      opacity: 0;
      transform: translateY(6px) scale(0.985);
      transition: opacity 0.18s ease, transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
    }

    #chatListActionsModal.active .chat-list-actions-card {
      opacity: 1;
      transform: translateY(0) scale(1);
    }

    .chat-list-actions-card::before {
      content: '';
      position: absolute;
      right: 18px;
      width: 14px;
      height: 14px;
      background: inherit;
      transform: rotate(45deg);
      box-sizing: border-box;
    }

    .chat-list-actions-card.is-below-anchor::before {
      top: -7px;
      border-left: 1px solid rgba(225, 234, 244, 0.92);
      border-top: 1px solid rgba(225, 234, 244, 0.92);
    }

    .chat-list-actions-card.is-above-anchor::before {
      bottom: -7px;
      border-right: 1px solid rgba(225, 234, 244, 0.92);
      border-bottom: 1px solid rgba(225, 234, 244, 0.92);
    }

    .chat-list-actions-card .profile-card-header {
      margin-bottom: 8px;
    }

    .chat-list-actions-card .profile-main-name {
      margin: 0 0 12px;
      font-size: 18px;
      line-height: 1.2;
    }

    .chat-list-actions-preview {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      gap: 12px;
      align-items: center;
      padding: 12px 14px;
      margin: 0 0 12px;
      border-radius: 18px;
      background: rgba(244, 248, 253, 0.92);
      border: 1px solid rgba(225, 234, 244, 0.92);
    }

    .chat-list-actions-preview .sidebar-avatar {
      width: 44px;
      height: 44px;
      font-size: 15px;
    }

    .chat-list-actions-preview-copy {
      min-width: 0;
      display: grid;
      gap: 4px;
    }

    .chat-list-actions-preview-name {
      font-size: 14px;
      font-weight: 700;
      color: var(--text);
    }

    .chat-list-actions-preview-text {
      font-size: 12px;
      line-height: 1.35;
      color: var(--muted);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .chat-list-actions-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
    }

    .chat-list-quick-action {
      border: 0;
      border-radius: 18px;
      min-height: 78px;
      padding: 10px 8px;
      background: linear-gradient(180deg, rgba(245, 249, 255, 0.96) 0%, rgba(234, 242, 252, 0.96) 100%);
      color: #26415f;
      display: grid;
      justify-items: center;
      align-content: center;
      gap: 8px;
      text-align: center;
      font-size: 11px;
      font-weight: 700;
      line-height: 1.15;
      transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease, color 0.16s ease;
      box-shadow: inset 0 0 0 1px rgba(207, 220, 237, 0.72);
      -webkit-tap-highlight-color: transparent;
    }

    .chat-list-quick-action i {
      font-size: 18px;
      line-height: 1;
      color: var(--accent-dark);
    }

    .chat-list-quick-action:active {
      transform: scale(0.97);
    }

    .chat-list-quick-action.is-danger {
      background: linear-gradient(180deg, rgba(255, 242, 244, 0.98) 0%, rgba(255, 229, 233, 0.98) 100%);
      color: #8e3040;
      box-shadow: inset 0 0 0 1px rgba(246, 195, 203, 0.82);
    }

    .chat-list-quick-action.is-danger i {
      color: #d44f63;
    }

    .chat-list-swipe-shell > .sidebar-item.is-action-target {
      background: rgba(233, 242, 255, 0.98);
      box-shadow: 0 16px 36px rgba(17, 34, 68, 0.12);
      transform: scale(0.992);
      transition: background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
    }

    .chat-list-swipe-shell > .sidebar-item.is-pinned-chat.is-action-target {
      background: rgba(229, 238, 249, 0.98);
    }

    .chat-list-folder-picker {
      margin-top: 12px;
      padding-top: 12px;
      border-top: 1px solid rgba(226, 233, 242, 0.94);
    }

    .chat-list-folder-picker-head {
      margin-bottom: 10px;
      font-size: 12px;
      font-weight: 700;
      color: var(--muted);
      letter-spacing: 0.01em;
    }

    .chat-list-folder-picker-options {
      display: grid;
      gap: 8px;
      max-height: 220px;
      overflow: auto;
    }

    .chat-list-folder-picker-option {
      border: 0;
      border-radius: 16px;
      padding: 12px 13px;
      display: grid;
      grid-template-columns: auto 1fr auto;
      align-items: center;
      gap: 10px;
      background: rgba(245, 249, 255, 0.95);
      color: var(--text);
      text-align: left;
      box-shadow: inset 0 0 0 1px rgba(207, 220, 237, 0.72);
      -webkit-tap-highlight-color: transparent;
    }

    .chat-list-folder-picker-option:active {
      transform: scale(0.985);
    }

    .chat-list-folder-picker-option:disabled {
      opacity: 0.52;
    }

    .chat-list-folder-picker-dot {
      width: 10px;
      height: 10px;
      border-radius: 999px;
      background: var(--folder-accent);
      box-shadow: 0 0 0 3px rgba(31, 122, 236, 0.12);
    }

    .chat-list-folder-picker-option span {
      font-size: 14px;
      font-weight: 700;
    }

    .chat-list-folder-picker-option i {
      font-size: 14px;
      color: var(--accent-dark);
    }

    .message-reactions-picker-floating {
      position: absolute;
      display: inline-flex;
      flex-wrap: nowrap;
      align-items: center;
      justify-content: center;
      width: fit-content;
      max-width: min(calc(100vw - 24px), 340px);
      margin: 0 !important;
      padding: 7px 9px;
      border-radius: 20px;
      background: rgba(255, 255, 255, 0.97);
      box-shadow: 0 16px 34px rgba(17, 34, 68, 0.14);
      z-index: 123;
      pointer-events: auto;
    }

    .message-actions-spacer {
      display: none;
      width: 0;
      height: 0;
      pointer-events: none;
    }

    .message-actions-toolbar {
      position: absolute;
      margin-top: 0 !important;
      width: max-content;
      display: inline-flex;
      flex-wrap: wrap;
      gap: 6px;
      justify-content: center;
      align-items: center;
      max-width: min(calc(100vw - 24px), 340px);
      z-index: 123;
      pointer-events: auto;
    }

    .message-actions-toolbar .button {
      width: auto;
      min-width: 0;
      min-height: 34px;
      padding: 8px 11px;
      border-radius: 999px;
      font-size: 12px;
      line-height: 1;
      font-weight: 700;
      box-shadow: 0 14px 30px rgba(17, 34, 68, 0.14);
    }

    #cancelMessageActionButton,
    #messageActionsModal .profile-card-header,
    #messageActionsTitle,
    #messageActionsText {
      display: none !important;
    }

    .message-swipe-indicator {
      position: absolute;
      top: 50%;
      left: 10px;
      width: 30px;
      height: 30px;
      border-radius: 999px;
      background: rgba(31, 122, 236, 0.12);
      color: var(--accent-dark);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      font-weight: 700;
      transform: translateY(-50%) scale(0.84);
      opacity: 0;
      transition: opacity 0.18s ease, transform 0.18s ease;
      pointer-events: none;
    }

    .message-row.self .message-swipe-indicator {
      left: auto;
      right: 10px;
    }

    .message-row.is-swipe-ready .message-swipe-indicator {
      opacity: 1;
      transform: translateY(-50%) scale(1);
    }

    .message-author {
      font-weight: 700;
      color: #3b4a60;
    }

    .message-author-group {
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    .message-author-avatar {
      width: 24px;
      height: 24px;
      border-radius: 999px;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      background: linear-gradient(180deg, #eef5ff 0%, #e3efff 100%);
      color: var(--accent-dark);
      font-size: 11px;
      font-weight: 800;
      border: 1px solid rgba(215, 225, 236, 0.95);
    }

    .message-text {
      font-size: 15px;
      line-height: 1.45;
      white-space: pre-wrap;
    }

    .message-row.system .message-text {
      font-size: 13px;
      line-height: 1.35;
      text-align: center;
      color: #586779;
    }

    .message-mention {
      border: 0;
      appearance: none;
      -webkit-appearance: none;
      font: inherit;
      line-height: inherit;
      cursor: pointer;
      color: #0f63d8;
      font-weight: 800;
      background: rgba(31, 122, 236, 0.14);
      border-radius: 8px;
      padding: 0 4px;
      margin: 0;
      box-decoration-break: clone;
      -webkit-box-decoration-break: clone;
      -webkit-tap-highlight-color: transparent;
      box-shadow: inset 0 0 0 1px rgba(31, 122, 236, 0.12);
    }

    .message-mention-static {
      display: inline-block;
      cursor: default;
    }

    .message-forwarded {
      margin-bottom: 10px;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      line-height: 1.35;
      color: var(--muted);
    }

    .message-forwarded::before {
      content: '\f3e5';
      font-family: 'Font Awesome 6 Free';
      font-weight: 900;
      font-size: 12px;
      color: var(--accent-dark);
      opacity: 0.85;
    }

    .message-forwarded-author {
      border: 0;
      background: transparent;
      padding: 0;
      margin: 0;
      font-size: 12px;
      line-height: 1.35;
      font-weight: 700;
      color: var(--accent-dark);
      -webkit-tap-highlight-color: transparent;
    }

    .message-forwarded-author.is-hidden {
      color: var(--muted);
    }

    .message-reply-preview {
      width: 100%;
      margin: 0 0 10px;
      padding: 10px 11px 10px 12px;
      border: 0;
      border-radius: 15px;
      background: rgba(239, 245, 255, 0.94);
      border-left: 3px solid rgba(31, 122, 236, 0.82);
      display: grid;
      gap: 3px;
      text-align: left;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
    }

    .message-row.other .message-reply-preview {
      background: rgba(246, 248, 252, 0.96);
    }

    .message-reply-author {
      font-size: 12px;
      line-height: 1.3;
      font-weight: 700;
      color: var(--accent-dark);
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    .message-reply-text {
      font-size: 12px;
      line-height: 1.35;
      color: var(--muted);
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    .message-row.is-highlighted .message-bubble {
      box-shadow:
        0 0 0 1px rgba(31, 122, 236, 0.2),
        0 10px 24px rgba(31, 122, 236, 0.12);
      border-color: rgba(31, 122, 236, 0.24);
    }

    .message-image {
      position: relative;
      margin-bottom: 10px;
      border-radius: 18px;
      overflow: hidden;
      background: rgba(227, 236, 247, 0.7);
      border: 1px solid rgba(215, 225, 236, 0.9);
    }

    .message-image img {
      display: block;
      width: 100%;
      max-width: min(72vw, 320px);
      max-height: 320px;
      object-fit: cover;
      background: #fff;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
    }

    .message-bubble.is-sticker {
      padding: 0;
      background: transparent !important;
      border: none !important;
      box-shadow: none !important;
    }

    .message-bubble.is-sticker .message-header {
      margin-bottom: 2px;
      padding: 0 4px;
    }

    .message-bubble.is-sticker .message-footer {
      margin-top: 6px;
      padding: 0 4px;
    }

    .message-image.is-sticker {
      margin-bottom: 0;
      border: none;
      background: transparent;
      border-radius: 14px;
      overflow: visible;
    }

    .message-image.is-sticker img {
      max-width: min(46vw, 176px);
      max-height: 176px;
      object-fit: contain;
      background: transparent;
      cursor: default;
      pointer-events: none;
    }

    .message-video {
      position: relative;
      margin-bottom: 10px;
      border-radius: 18px;
      overflow: hidden;
      background: rgba(227, 236, 247, 0.7);
      border: 1px solid rgba(215, 225, 236, 0.9);
    }

    .message-video video {
      display: block;
      width: 100%;
      max-width: min(72vw, 320px);
      max-height: 360px;
      background: #0b0f14;
      object-fit: contain;
      -webkit-tap-highlight-color: transparent;
    }

    .message-album {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 6px;
      margin-bottom: 10px;
      width: min(72vw, 320px);
    }

    .message-album-item {
      position: relative;
      min-width: 0;
      aspect-ratio: 1 / 1;
      padding: 0;
      border: 1px solid rgba(215, 225, 236, 0.9);
      border-radius: 16px;
      overflow: hidden;
      background: rgba(227, 236, 247, 0.7);
      display: block;
      -webkit-tap-highlight-color: transparent;
    }

    .message-album-item img,
    .message-album-item video {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
      background: #0b0f14;
    }

    .message-album-play {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      color: rgba(255, 255, 255, 0.94);
      font-size: 20px;
      background: linear-gradient(180deg, rgba(7, 12, 20, 0.08), rgba(7, 12, 20, 0.28));
      pointer-events: none;
    }

    .message-startup-media-placeholder {
      display: block;
      width: 100%;
      height: 100%;
      min-height: 100%;
      border-radius: inherit;
      background:
        linear-gradient(135deg, rgba(219, 234, 254, 0.84), rgba(240, 244, 251, 0.96)),
        linear-gradient(180deg, rgba(22, 100, 196, 0.08), rgba(12, 26, 58, 0.03));
    }

    .message-startup-media-placeholder.is-video {
      background:
        linear-gradient(135deg, rgba(219, 234, 254, 0.62), rgba(224, 232, 246, 0.92)),
        linear-gradient(180deg, rgba(12, 26, 58, 0.08), rgba(12, 26, 58, 0.02));
    }

    .message-startup-media-placeholder.is-sticker {
      background:
        radial-gradient(circle at 30% 30%, rgba(219, 234, 254, 0.9), rgba(240, 244, 251, 0.72) 58%, rgba(228, 234, 245, 0.42) 100%);
    }

    .message-startup-media-placeholder.is-album {
      min-height: 100%;
    }

    .message-view-once-badge {
      position: absolute;
      top: 10px;
      right: 10px;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 8px;
      border-radius: 999px;
      background: rgba(12, 26, 58, 0.72);
      color: #fff;
      font-size: 11px;
      line-height: 1;
      font-weight: 700;
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      pointer-events: none;
      z-index: 2;
    }

    .message-view-once-badge i {
      font-size: 10px;
    }

    .message-media-badges {
      position: absolute;
      inset: 10px 10px auto auto;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      z-index: 2;
      pointer-events: none;
    }

    .message-view-once-count {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-size: 11px;
      line-height: 1;
      font-weight: 700;
      color: var(--muted);
      white-space: nowrap;
    }

    .message-view-once-count i {
      font-size: 10px;
      opacity: 0.9;
    }

    .message-album-caption {
      margin-top: 2px;
    }

    .message-reactions {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      align-items: center;
      justify-content: flex-start;
      flex: 1 1 auto;
      min-width: 0;
    }

    .message-reaction-chip {
      min-width: 38px;
      height: 28px;
      padding: 0 9px;
      border: 1px solid rgba(215, 225, 236, 0.95);
      border-radius: 999px;
      background: rgba(246, 249, 253, 0.96);
      color: var(--text);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
      font-size: 13px;
      font-weight: 700;
      -webkit-tap-highlight-color: transparent;
    }

    .message-reaction-chip.is-active {
      background: rgba(31, 122, 236, 0.12);
      border-color: rgba(31, 122, 236, 0.22);
      color: var(--accent-dark);
    }

    .message-reaction-count {
      font-size: 12px;
      font-variant-numeric: tabular-nums;
    }

    .message-reactions-picker {
      margin: 10px 0 16px;
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      justify-content: center;
    }

    .message-reaction-picker-button {
      width: 42px;
      height: 42px;
      border: 1px solid rgba(215, 225, 236, 0.95);
      border-radius: 999px;
      background: rgba(247, 250, 255, 0.96);
      font-size: 20px;
      line-height: 1;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      -webkit-tap-highlight-color: transparent;
    }

    .message-reaction-picker-button.is-active {
      background: rgba(31, 122, 236, 0.12);
      border-color: rgba(31, 122, 236, 0.22);
    }

    .composer {
      padding: 10px 18px 12px;
      border-top: 1px solid rgba(215, 225, 236, 0.9);
      background: var(--panel-soft);
    }

    .composer-raw-input {
      min-height: 44px;
      height: 44px;
      max-height: 40vh;
      display: block;
      overflow-y: hidden;
      resize: none;
      padding: 10px 14px;
      border-radius: 18px;
      line-height: 1.35;
      box-sizing: border-box;
    }

    .composer-form {
      display: block;
    }

    .composer-attachments {
      display: grid;
      gap: 10px;
      margin-bottom: 6px;
    }

    .composer-mention-picker {
      display: none;
      margin-bottom: 10px;
      padding: 8px;
      border: 1px solid rgba(215, 225, 236, 0.96);
      border-radius: 18px;
      background: rgba(255, 255, 255, 0.96);
      box-shadow: 0 12px 28px rgba(17, 34, 68, 0.08);
      gap: 4px;
    }

    .composer-mention-picker.active {
      display: grid;
    }

    .composer-formatting-bar {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 8px;
      flex-wrap: wrap;
    }

    .composer-formatting-bar[hidden] {
      display: none !important;
    }

    .composer-format-button,
    .composer-link-preview-toggle {
      border: 1px solid rgba(215, 225, 236, 0.92);
      background: rgba(255, 255, 255, 0.88);
      color: var(--muted-dark);
      border-radius: 999px;
      min-height: 32px;
      padding: 0 12px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      font-size: 12px;
      box-shadow: 0 8px 18px rgba(17, 34, 68, 0.06);
    }

    .composer-format-button {
      min-width: 32px;
      padding: 0 10px;
    }

    .composer-format-button.is-active {
      color: var(--accent-dark);
      border-color: rgba(31, 122, 236, 0.24);
      background: rgba(31, 122, 236, 0.1);
      box-shadow: 0 10px 22px rgba(31, 122, 236, 0.12);
    }

    .composer-link-preview-toggle.is-disabled-preview {
      color: var(--accent-dark);
      border-color: rgba(31, 122, 236, 0.22);
      background: rgba(31, 122, 236, 0.08);
    }

    .composer-link-preview-toggle[hidden] {
      display: none !important;
    }

    .composer-sticker-picker {
      display: grid;
      margin-top: 0;
      border: 1px solid rgba(215, 225, 236, 0.96);
      border-radius: 22px;
      background: rgba(255, 255, 255, 0.98);
      box-shadow: 0 18px 34px rgba(17, 34, 68, 0.1);
      overflow: hidden;
      max-height: 0;
      opacity: 0;
      transform: translateY(14px);
      pointer-events: none;
      margin-bottom: 0;
      transition:
        max-height 0.26s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.2s ease,
        transform 0.26s cubic-bezier(0.22, 1, 0.36, 1),
        margin-top 0.26s cubic-bezier(0.22, 1, 0.36, 1),
        margin-bottom 0.26s cubic-bezier(0.22, 1, 0.36, 1);
    }

.composer-sticker-picker.active {
  max-height: 336px;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  margin-top: 10px;
  margin-bottom: 2px;
}

html.channel-comments-open .composer-sticker-picker {
  position: fixed;
  left: 50%;
  bottom: calc(74px + env(safe-area-inset-bottom, 0px));
  width: min(calc(100vw - 24px), 640px);
  z-index: 120;
  margin-top: 0;
  margin-bottom: 0;
  transform: translate(-50%, 14px);
}

html.channel-comments-open .composer-sticker-picker.active {
  transform: translate(-50%, 0);
}

    .composer-sticker-tabs {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0;
      padding: 6px;
      border-bottom: 1px solid rgba(228, 235, 244, 0.92);
      background: rgba(246, 249, 253, 0.94);
    }

    .composer-sticker-tab {
      height: 38px;
      border: 0;
      border-radius: 16px;
      background: transparent;
      color: var(--muted);
      font-size: 13px;
      font-weight: 700;
      -webkit-tap-highlight-color: transparent;
    }

    .composer-sticker-tab.active {
      background: rgba(31, 122, 236, 0.12);
      color: var(--accent-dark);
    }

    .composer-sticker-grid {
      display: none;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 10px;
      padding: 12px;
      max-height: 260px;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
    }

    .composer-sticker-grid.active {
      display: grid;
    }

    .composer-sticker-option {
      aspect-ratio: 1;
      border: 0;
      border-radius: 18px;
      background: linear-gradient(180deg, rgba(241, 247, 255, 0.96) 0%, rgba(230, 239, 255, 0.98) 100%);
      color: var(--accent-dark);
      display: grid;
      place-items: center;
      padding: 0;
      overflow: hidden;
      -webkit-tap-highlight-color: transparent;
    }

    .composer-sticker-option img,
    .composer-sticker-option video {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
      background: #0b0f14;
    }

    .composer-sticker-option span {
      font-size: 44px;
      line-height: 1;
    }

    .composer-mention-option {
      width: 100%;
      border: 0;
      background: transparent;
      border-radius: 14px;
      padding: 10px 12px;
      display: grid;
      gap: 2px;
      text-align: left;
      -webkit-tap-highlight-color: transparent;
    }

    .composer-mention-option.is-active {
      background: rgba(31, 122, 236, 0.1);
    }

    .composer-mention-option-title {
      font-size: 14px;
      line-height: 1.35;
      font-weight: 700;
      color: var(--text);
    }

    .composer-mention-option-subtitle {
      font-size: 12px;
      line-height: 1.35;
      color: var(--muted);
    }

    .composer-edit-banner {
      display: none;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 12px;
      margin-bottom: 10px;
      padding: 10px 12px;
      border: 1px solid rgba(31, 122, 236, 0.16);
      border-radius: 18px;
      background: rgba(235, 243, 255, 0.94);
    }

    .composer-edit-banner.active {
      display: grid;
    }

    .composer-reply-banner {
      display: none;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 8px;
      margin-bottom: 8px;
      padding: 8px 10px 8px 12px;
      border: 1px solid rgba(31, 122, 236, 0.12);
      border-radius: 14px;
      background: rgba(248, 251, 255, 0.92);
      position: relative;
      overflow: hidden;
    }

    .composer-reply-banner::before {
      content: '';
      position: absolute;
      left: 0;
      top: 7px;
      bottom: 7px;
      width: 3px;
      border-radius: 999px;
      background: linear-gradient(180deg, rgba(31, 122, 236, 0.96) 0%, rgba(31, 122, 236, 0.62) 100%);
    }

    .composer-reply-banner.active {
      display: grid;
    }

    .composer-reply-copy {
      min-width: 0;
      display: grid;
      gap: 2px;
      padding-left: 4px;
    }

    .composer-reply-copy strong {
      font-size: 12px;
      line-height: 1.25;
      font-weight: 700;
      color: var(--accent-dark);
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    .composer-reply-copy span {
      font-size: 12px;
      line-height: 1.3;
      color: var(--muted);
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    .composer-reply-banner .composer-remove-attachment {
      width: 28px;
      height: 28px;
      min-width: 28px;
      border-radius: 10px;
      background: rgba(236, 243, 251, 0.92);
      color: var(--muted);
      font-size: 15px;
    }

    .composer-edit-copy {
      min-width: 0;
      display: grid;
      gap: 4px;
      text-align: left;
    }

    .composer-edit-copy strong {
      font-size: 14px;
      line-height: 1.3;
      color: var(--accent-dark);
    }

    .composer-edit-copy span {
      font-size: 12px;
      line-height: 1.4;
      color: var(--muted);
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    .message-text.is-deleted {
      font-style: italic;
      color: var(--muted);
    }

    .message-inline-code {
      display: inline-block;
      padding: 1px 6px;
      border-radius: 8px;
      background: rgba(17, 34, 68, 0.08);
      font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
      font-size: 0.92em;
    }

    .message-spoiler {
      border: 0;
      background: rgba(17, 34, 68, 0.12);
      color: transparent;
      border-radius: 8px;
      padding: 0 5px;
      margin: 0;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
      text-shadow: 0 0 10px rgba(17, 34, 68, 0.34);
    }

    .message-spoiler.is-revealed {
      color: inherit;
      text-shadow: none;
      background: rgba(17, 34, 68, 0.06);
    }

    .message-link {
      color: var(--accent-dark);
      font-weight: 600;
      text-decoration: none;
      word-break: break-word;
      border-bottom: 1px solid rgba(31, 122, 236, 0.18);
    }

    .message-link:active {
      opacity: 0.74;
    }

    .message-underlined {
      text-decoration: underline;
    }

    .message-struck {
      text-decoration: line-through;
    }

    .message-rich-list {
      margin: 6px 0;
      padding-left: 1.35em;
    }

    .message-rich-list li + li {
      margin-top: 4px;
    }

    .message-link-preview {
      margin-top: 10px;
      width: min(100%, 320px);
      border: 1px solid rgba(214, 224, 236, 0.94);
      border-radius: 18px;
      background: rgba(247, 250, 255, 0.96);
      overflow: hidden;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
      text-align: left;
      transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease, opacity 0.16s ease;
    }

    .message-row.self .message-link-preview {
      background: rgba(243, 248, 255, 0.96);
      border-color: rgba(187, 209, 241, 0.96);
    }

    .message-link-preview:active {
      transform: scale(0.992);
      box-shadow: 0 10px 22px rgba(17, 34, 68, 0.06);
    }

    .message-link-preview-image {
      width: 100%;
      aspect-ratio: 1.72;
      background: linear-gradient(180deg, rgba(231, 238, 248, 0.88), rgba(220, 230, 242, 0.92));
      overflow: hidden;
    }

    .message-link-preview-image img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
    }

    .message-link-preview-body {
      display: grid;
      gap: 4px;
      padding: 12px 13px 13px;
    }

    .message-link-preview-site {
      font-size: 11px;
      line-height: 1.35;
      font-weight: 700;
      color: var(--accent-dark);
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }

    .message-link-preview-title {
      font-size: 14px;
      line-height: 1.4;
      font-weight: 700;
      color: var(--text);
      word-break: break-word;
    }

    .message-link-preview-description {
      font-size: 12px;
      line-height: 1.45;
      color: var(--muted);
      word-break: break-word;
    }

    .message-link-preview-url {
      font-size: 12px;
      line-height: 1.35;
      color: var(--muted);
      word-break: break-all;
    }

    .composer-image-preview {
      display: none;
      grid-template-columns: auto minmax(0, 1fr) auto;
      align-items: center;
      gap: 12px;
      padding: 10px 12px;
      border: 1px solid var(--panel-border);
      border-radius: 18px;
      background: rgba(255, 255, 255, 0.92);
    }

    .composer-image-preview.active {
      display: grid;
    }

    .composer-audio-preview {
      display: none;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 12px;
      padding: 10px 12px;
      border: 1px solid var(--panel-border);
      border-radius: 18px;
      background: rgba(255, 255, 255, 0.92);
    }

    .composer-audio-preview.active {
      display: grid;
    }

    .composer-video-preview {
      display: none;
      grid-template-columns: auto minmax(0, 1fr) auto;
      align-items: center;
      gap: 12px;
      padding: 10px 12px;
      border: 1px solid var(--panel-border);
      border-radius: 18px;
      background: rgba(255, 255, 255, 0.92);
    }

    .composer-video-preview.active {
      display: grid;
    }

    .composer-video-thumb {
      width: 56px;
      height: 56px;
      border-radius: 14px;
      overflow: hidden;
      background: #0b0f14;
      border: 1px solid rgba(215, 225, 236, 0.9);
      flex-shrink: 0;
      position: relative;
    }

    .composer-video-thumb::after {
      content: '▶';
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      color: rgba(255, 255, 255, 0.92);
      font-size: 16px;
      font-weight: 700;
      background: linear-gradient(180deg, rgba(7, 12, 20, 0.08), rgba(7, 12, 20, 0.28));
      pointer-events: none;
    }

    .composer-video-thumb video {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
      background: #0b0f14;
    }

    .composer-file-preview {
      display: none;
      grid-template-columns: auto minmax(0, 1fr) auto;
      align-items: center;
      gap: 12px;
      padding: 10px 12px;
      border: 1px solid var(--panel-border);
      border-radius: 18px;
      background: rgba(255, 255, 255, 0.92);
    }

    .composer-file-preview.active {
      display: grid;
    }

    .composer-file-icon {
      width: 56px;
      height: 56px;
      border-radius: 14px;
      background: linear-gradient(180deg, #eef5ff 0%, #e3efff 100%);
      border: 1px solid rgba(215, 225, 236, 0.95);
      color: var(--accent-dark);
      font-size: 22px;
      font-weight: 800;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .composer-audio-copy {
      min-width: 0;
      display: grid;
      gap: 6px;
    }

    .composer-audio-copy strong {
      font-size: 14px;
      line-height: 1.3;
      color: var(--text);
    }

    .composer-audio-copy span {
      font-size: 12px;
      line-height: 1.4;
      color: var(--muted);
    }

    .composer-audio-player-shell {
      min-width: 0;
    }

    .composer-message-audio {
      min-height: 40px;
      padding: 7px 8px;
      border-radius: 16px;
      gap: 8px;
      width: 100%;
    }

    .composer-message-audio .message-audio-button {
      width: 30px;
      height: 30px;
      min-width: 30px;
      flex-basis: 30px;
      font-size: 12px;
    }

    .composer-message-audio .message-audio-progress {
      gap: 6px;
    }

    .composer-message-audio .message-audio-waveform {
      min-height: 18px;
    }

    .composer-message-audio .message-audio-meta {
      gap: 4px;
    }

    .composer-message-audio .message-audio-time {
      font-size: 11px;
    }

    .composer-message-audio .message-audio-speed {
      min-width: 32px;
      height: 24px;
      padding: 0 7px;
      font-size: 11px;
      border-radius: 999px;
    }

    .composer-image-thumb {
      width: 56px;
      height: 56px;
      border-radius: 14px;
      overflow: hidden;
      background: rgba(227, 236, 247, 0.7);
      border: 1px solid rgba(215, 225, 236, 0.9);
      flex-shrink: 0;
    }

    .composer-image-thumb img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
    }

    .composer-image-copy {
      min-width: 0;
      display: grid;
      gap: 4px;
    }

    .composer-image-copy strong {
      font-size: 14px;
      line-height: 1.3;
      color: var(--text);
    }

    .composer-image-copy span {
      font-size: 12px;
      line-height: 1.4;
      color: var(--muted);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .composer-remove-attachment {
      width: 34px;
      height: 34px;
      border: 0;
      border-radius: 999px;
      background: rgba(238, 243, 251, 0.95);
      color: var(--muted);
      font-size: 22px;
      line-height: 1;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
    }

    .composer-field-group {
      display: flex;
      align-items: center;
      gap: 10px;
      width: 100%;
      min-height: 44px;
      transform: none;
      transition: gap 0.18s ease;
    }

    .composer-field-group.has-send {
      gap: 6px;
    }

    .composer-input-shell {
      position: relative;
      min-width: 0;
      flex: 1 1 auto;
      width: 100%;
      min-height: 44px;
      border: 1px solid var(--panel-border);
      border-radius: 18px;
      background: var(--panel);
      overflow: hidden;
      transform: none !important;
    }

    .composer-input-editor {
      position: absolute;
      inset: 0;
      display: block;
      width: 100%;
      min-height: 44px;
      padding: 10px 132px 10px 14px;
      border-radius: 18px;
      color: var(--text);
      font-size: 15px;
      line-height: 1.35;
      white-space: pre-wrap;
      word-break: break-word;
      overflow: hidden;
      z-index: 2;
      outline: none;
      cursor: text;
      caret-color: var(--text);
      -webkit-user-select: text;
      user-select: text;
      -webkit-touch-callout: default;
    }

    .composer-input-editor strong,
    .composer-input-editor b,
    .composer-input-editor em,
    .composer-input-editor i,
    .composer-input-editor u,
    .composer-input-editor s,
    .composer-input-editor a,
    .composer-input-editor code,
    .composer-input-editor span,
    .composer-input-editor li {
      line-height: inherit;
      font-size: inherit;
      vertical-align: baseline;
    }

    .composer-input-editor:empty::before {
      content: attr(data-placeholder);
      color: var(--muted);
      pointer-events: none;
    }

    .composer-editor-inline-code {
      display: inline;
      padding: 1px 6px;
      border-radius: 8px;
      background: rgba(17, 34, 68, 0.08);
      font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
      font-size: 0.92em;
      line-height: inherit;
      vertical-align: baseline;
    }

    .composer-editor-spoiler {
      border-radius: 8px;
      padding: 0 5px;
      background: rgba(17, 34, 68, 0.12);
      line-height: inherit;
      vertical-align: baseline;
    }

    .composer-editor-list {
      margin: 0.2em 0;
      padding-left: 1.35em;
    }

    .composer-editor-list li + li {
      margin-top: 0.18em;
    }

    .composer-raw-input {
      position: absolute;
      left: 0;
      top: 0;
      width: 1px;
      min-width: 1px;
      height: 1px;
      min-height: 1px;
      padding: 0;
      margin: 0;
      border: 0;
      opacity: 0 !important;
      pointer-events: none;
      z-index: 1;
      overflow: hidden;
      white-space: pre;
      clip-path: inset(50%);
      clip: rect(0 0 0 0);
      background: transparent !important;
      color: transparent !important;
      caret-color: transparent !important;
      -webkit-text-fill-color: transparent !important;
      text-shadow: none !important;
      transform: none !important;
      -webkit-transform: none !important;
    }

    .composer-attach-button {
      width: 44px;
      height: 44px;
      min-width: 44px;
      flex: 0 0 44px;
      align-self: flex-end;
      border: 1px solid var(--panel-border);
      border-radius: 16px;
      background: rgba(255, 255, 255, 0.94);
      color: var(--accent-dark);
      font-size: 23px;
      font-weight: 600;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
      transition: width 0.2s ease, opacity 0.2s ease, transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
    }

    .composer-formatting-toggle-button {
      width: 44px;
      height: 44px;
      min-width: 44px;
      flex: 0 0 44px;
      align-self: flex-end;
      border: 1px solid var(--panel-border);
      border-radius: 16px;
      background: rgba(255, 255, 255, 0.94);
      color: var(--accent-dark);
      font-size: 18px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
      transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease, color 0.2s ease, opacity 0.2s ease;
    }

    .composer-formatting-toggle-button.is-active {
      color: var(--accent-dark);
      border-color: rgba(31, 122, 236, 0.24);
      background: rgba(31, 122, 236, 0.1);
      box-shadow: 0 10px 22px rgba(31, 122, 236, 0.12);
    }

    .composer-send-button {
      position: absolute;
      right: 7px;
      top: calc(50% - 17px);
      bottom: auto;
      transform: scale(1);
      transform-origin: center center;
      width: 34px;
      max-width: 34px;
      min-width: 34px;
      height: 34px;
      padding: 0;
      border-radius: 999px;
      font-size: 15px;
      line-height: 1;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      -webkit-tap-highlight-color: transparent;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
      left: auto;
      flex: 0 0 34px;
      z-index: 4;
    }

    .composer-send-button.is-visible {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      transform: scale(1);
      transition: opacity 0.18s ease, transform 0.18s ease;
    }

    .composer-send-button:active:not(:disabled) {
      transform: scale(0.84);
    }

    .composer-send-button:hover {
      transform: scale(1);
    }

    .composer-voice-button {
      width: 44px;
      height: 44px;
      min-width: 44px;
      flex: 0 0 44px;
      border: 1px solid var(--panel-border);
      border-radius: 14px;
      background: rgba(255, 255, 255, 0.94);
      color: var(--accent-dark);
      font-size: 19px;
      font-weight: 700;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
      touch-action: none;
      transition: width 0.18s ease, opacity 0.18s ease, transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
    }

    .composer-sticker-button {
      width: 44px;
      height: 44px;
      min-width: 44px;
      border: 1px solid rgba(214, 225, 239, 0.98);
      border-radius: 16px;
      background: rgba(248, 251, 255, 0.96);
      color: #6b7d97;
      font-size: 18px;
      font-weight: 700;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
      transition: width 0.2s ease, opacity 0.2s ease, transform 0.2s ease, border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
    }

    .composer-sticker-button.is-inline {
      position: absolute;
      right: 8px;
      top: 50%;
      bottom: auto;
      transform: translateY(-50%);
      width: 36px;
      height: 36px;
      border-radius: 999px;
      border-color: transparent;
      border-width: 0;
      background: transparent;
      color: #8a96a8;
      box-shadow: none;
      font-size: 15px;
      z-index: 4;
    }

    .composer-input-shell.is-multiline .composer-send-button {
      top: auto;
      bottom: 7px;
      transform: scale(1);
    }

    .composer-input-shell.is-multiline .composer-send-button.is-visible {
      transform: scale(1);
    }

    .composer-input-shell.is-multiline .composer-send-button:active:not(:disabled) {
      transform: scale(0.96);
    }

    .composer-input-shell.is-multiline .composer-sticker-button.is-inline {
      top: auto;
      bottom: 8px;
      transform: none;
    }

    .composer-input-shell.has-send .composer-sticker-button.is-inline {
      right: 46px;
    }

    .composer-scheduled-button.is-inline {
      right: 44px;
    }

    .composer-input-shell.has-send .composer-scheduled-button.is-inline {
      right: 82px;
    }

    .composer-sticker-button.is-inline:hover,
    .composer-sticker-button.is-inline:focus-visible {
      background: transparent;
      border-color: transparent;
      color: #6f7c90;
      box-shadow: none;
    }

    .composer-sticker-button:hover,
    .composer-sticker-button:focus-visible {
      background: rgba(239, 245, 255, 0.98);
      border-color: rgba(188, 207, 233, 0.98);
      color: var(--accent-dark);
    }

    .composer-scheduled-button.is-active {
      color: var(--accent-dark);
    }

    .composer-poll-button {
      color: #5977a6;
    }

    .poll-options-list {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .poll-option-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 10px;
      align-items: center;
    }

    .poll-option-remove {
      min-width: 42px;
      width: 42px;
      height: 42px;
      padding: 0;
      border-radius: 14px;
    }

    .poll-add-option {
      align-self: flex-start;
    }

    .composer-voice-button.is-recording {
      background: rgba(255, 237, 237, 0.96);
      border-color: rgba(226, 90, 90, 0.28);
      color: #d94444;
    }

    .composer-voice-button.is-hidden {
      width: 0;
      min-width: 0;
      flex-basis: 0;
      margin-left: -6px;
      opacity: 0;
      pointer-events: none;
      transform: scale(0.88);
      overflow: hidden;
      border-width: 0;
      padding: 0;
    }

    .composer-recording-bar {
      flex: 1 1 auto;
      min-width: 0;
      height: 44px;
      border: 1px solid rgba(220, 228, 238, 0.96);
      border-radius: 22px;
      background: rgba(255, 255, 255, 0.96);
      display: none;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 0 16px;
      overflow: hidden;
      position: relative;
    }

    .composer-recording-bar.active {
      display: flex;
      grid-column: 3 / 4;
    }

    .composer-recording-meta {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      flex: 0 0 auto;
      min-width: 0;
    }

    .composer-recording-dot {
      width: 10px;
      height: 10px;
      border-radius: 999px;
      background: #ef4444;
      box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.45);
      animation: composerRecordingBlink 1.05s ease-in-out infinite;
      flex-shrink: 0;
    }

    .composer-recording-timer {
      font-size: 14px;
      line-height: 1;
      font-weight: 700;
      color: #d94444;
      font-variant-numeric: tabular-nums;
      letter-spacing: 0.02em;
    }

    .composer-recording-cancel {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      text-align: center;
      font-size: 13px;
      line-height: 1;
      font-weight: 700;
      color: var(--muted);
      transition: color 0.18s ease, transform 0.18s ease, opacity 0.18s ease;
      pointer-events: none;
      user-select: none;
      -webkit-user-select: none;
    }

    .composer-recording-bar.is-canceling .composer-recording-cancel {
      color: #d94444;
      transform: translateX(-50%) scale(1.03);
    }

    .composer-recording-bar.is-locked .composer-recording-cancel {
      color: var(--accent);
    }

    .composer-recording-cancel.is-actionable {
      pointer-events: auto;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
    }

    .composer-recording-cancel.is-actionable:active {
      transform: translateX(-50%) scale(0.97);
    }

    .composer-recording-lock-hint {
      position: absolute;
      right: 8px;
      bottom: 100%;
      margin-bottom: 10px;
      width: 42px;
      display: none;
      align-items: center;
      justify-content: center;
      pointer-events: none;
      z-index: 3;
    }

    .composer-recording-lock-hint.is-visible {
      display: flex;
    }

    .composer-recording-lock-track {
      position: absolute;
      bottom: -10px;
      width: 4px;
      height: 54px;
      border-radius: 999px;
      background: rgba(123, 141, 168, 0.18);
    }

    .composer-recording-lock-icon {
      position: relative;
      width: 32px;
      height: 32px;
      border-radius: 16px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: rgba(255, 255, 255, 0.98);
      border: 1px solid rgba(220, 228, 238, 0.96);
      color: var(--accent);
      box-shadow: 0 12px 26px rgba(24, 44, 79, 0.12);
      transform: translateY(0);
      transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
    }

    .composer-recording-lock-hint.is-armed .composer-recording-lock-icon {
      transform: translateY(-8px) scale(1.05);
      box-shadow: 0 16px 32px rgba(78, 124, 255, 0.18);
      background: rgba(237, 244, 255, 0.98);
    }

    .composer-field-group.is-recording-locked .composer-recording-lock-hint {
      display: none;
    }

    .composer-voice-button.is-pressing {
      transform: scale(1.06);
      background: rgba(237, 244, 255, 0.98);
      border-color: rgba(78, 124, 255, 0.34);
    }

    .composer-voice-button.is-locked {
      background: rgba(78, 124, 255, 0.12);
      border-color: rgba(78, 124, 255, 0.32);
      color: var(--accent);
    }

    .composer-field-group.is-recording .composer-input-shell {
      display: none;
    }

    .composer-field-group.is-recording .composer-sticker-button,
    .composer-field-group.is-recording .composer-attach-button {
      opacity: 0.4;
      pointer-events: none;
    }

    .composer-attach-button.is-recording-hidden,
    .composer-sticker-button.is-recording-hidden {
      width: 0;
      min-width: 0;
      opacity: 0;
      transform: translateX(-18px) scale(0.86);
      pointer-events: none;
      overflow: hidden;
      border-width: 0;
      padding: 0;
    }

    @keyframes composerRecordingBlink {
      0%,
      100% {
        opacity: 1;
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.42);
      }
      50% {
        opacity: 0.4;
        box-shadow: 0 0 0 6px rgba(239, 68, 68, 0);
      }
    }

    .message-audio,
    .message-file,
    .message-contact,
    .message-checklist,
    .message-location {
      margin-bottom: 10px;
      border-radius: 16px;
      border: 1px solid rgba(215, 225, 236, 0.92);
      background: rgba(245, 249, 255, 0.92);
    }

    .message-audio,
    .message-file,
    .message-contact {
      width: min(72vw, 320px);
    }

    .message-checklist,
    .message-location {
      width: min(74vw, 340px);
      color: inherit;
      text-align: left;
      -webkit-tap-highlight-color: transparent;
    }

    .message-row.self .message-audio,
    .message-row.self .message-file,
    .message-row.self .message-contact,
    .message-row.self .message-checklist,
    .message-row.self .message-location {
      background: rgba(234, 244, 255, 0.94);
      border-color: rgba(191, 214, 241, 0.95);
    }

    .message-audio {
      padding: 10px 12px 11px;
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto;
      gap: 10px;
      align-items: center;
    }

    .message-audio-button {
      width: 38px;
      height: 38px;
      border: 0;
      border-radius: 999px;
      background: var(--accent-dark);
      color: #fff;
      font-size: 16px;
      line-height: 1;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      -webkit-tap-highlight-color: transparent;
      flex-shrink: 0;
      transition: transform 0.22s ease, background 0.22s ease;
    }

    .message-audio.is-playing .message-audio-button {
      transform: scale(1.04);
      background: #1769d0;
    }

    .message-audio.is-playing .message-audio-button i::before {
      content: "\f04c";
    }

    .message-audio-progress {
      min-width: 0;
      display: grid;
      gap: 6px;
    }

    .message-audio-waveform {
      position: relative;
      width: 100%;
      height: 22px;
      overflow: hidden;
      border-radius: 10px;
      background:
        repeating-linear-gradient(
          90deg,
          rgba(31, 122, 236, 0.16) 0 4px,
          transparent 4px 8px
        );
      mask-image:
        linear-gradient(
          180deg,
          transparent 0%,
          rgba(0, 0, 0, 0.7) 18%,
          rgba(0, 0, 0, 1) 40%,
          rgba(0, 0, 0, 1) 60%,
          rgba(0, 0, 0, 0.7) 82%,
          transparent 100%
        );
    }

    .message-audio-waveform::before {
      content: '';
      position: absolute;
      inset: 0;
      background:
        linear-gradient(90deg, rgba(255,255,255,0.18), transparent 26%, transparent 74%, rgba(255,255,255,0.08)),
        repeating-linear-gradient(
          90deg,
          rgba(31, 122, 236, 0.09) 0 4px,
          transparent 4px 8px
        );
      opacity: 0;
      transition: opacity 0.22s ease;
      pointer-events: none;
    }

    .message-audio.is-playing .message-audio-waveform::before {
      opacity: 1;
    }

    .message-audio-waveform-fill {
      position: absolute;
      inset: 0 auto 0 0;
      width: 0%;
      background:
        repeating-linear-gradient(
          90deg,
          #1f7aec 0 4px,
          transparent 4px 8px
        );
      pointer-events: none;
    }

    .message-audio-meta {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      font-size: 12px;
      line-height: 1.3;
      color: var(--muted);
    }

    .message-audio-time {
      white-space: nowrap;
      font-variant-numeric: tabular-nums;
      letter-spacing: -0.01em;
    }

    .message-audio-speed {
      min-width: 42px;
      height: 34px;
      border: 0;
      border-radius: 999px;
      background: rgba(31, 122, 236, 0.1);
      color: var(--accent-dark);
      font-size: 12px;
      font-weight: 700;
      padding: 0 10px;
      -webkit-tap-highlight-color: transparent;
      flex-shrink: 0;
      transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
    }

    .message-audio.is-playing .message-audio-speed {
      background: rgba(31, 122, 236, 0.14);
      transform: translateY(-0.5px);
    }

    .message-audio-native {
      display: none;
    }

    .message-voice-transcript {
      margin: -2px 0 10px;
      display: grid;
      gap: 2px;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.45;
    }

    .message-voice-transcript-label {
      font-weight: 700;
      color: var(--text);
    }

    .message-voice-transcript.is-shared {
      margin-top: 8px;
    }

    .message-file {
      padding: 12px;
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      gap: 10px;
      align-items: center;
      color: inherit;
      text-decoration: none;
      -webkit-tap-highlight-color: transparent;
    }

    .message-file-icon,
    .message-location-icon {
      width: 42px;
      height: 42px;
      border-radius: 14px;
      background: linear-gradient(180deg, #eef5ff 0%, #e3efff 100%);
      border: 1px solid rgba(215, 225, 236, 0.95);
      color: var(--accent-dark);
      font-size: 18px;
      font-weight: 800;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .message-file-copy {
      min-width: 0;
      display: grid;
      gap: 4px;
    }

    .message-file-name {
      font-size: 14px;
      line-height: 1.35;
      font-weight: 700;
      color: var(--text);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .message-file-meta {
      font-size: 12px;
      line-height: 1.35;
      color: var(--muted);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .message-contact {
      padding: 12px;
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      gap: 12px;
      align-items: center;
      text-align: left;
      color: inherit;
      text-decoration: none;
      -webkit-tap-highlight-color: transparent;
    }

    .message-contact-avatar {
      width: 48px;
      height: 48px;
      border-radius: 999px;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      background: linear-gradient(180deg, #eef5ff 0%, #e3efff 100%);
      color: var(--accent-dark);
      font-size: 16px;
      font-weight: 800;
      border: 1px solid rgba(215, 225, 236, 0.95);
      flex-shrink: 0;
    }

    .message-contact-avatar img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
    }

    .message-contact-copy {
      min-width: 0;
      display: grid;
      gap: 2px;
    }

    .message-contact-label {
      font-size: 11px;
      line-height: 1.35;
      font-weight: 700;
      color: var(--accent-dark);
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    .message-contact-name {
      font-size: 15px;
      line-height: 1.35;
      font-weight: 700;
      color: var(--text);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .message-contact-secondary {
      font-size: 12px;
      line-height: 1.35;
      color: var(--muted);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .message-poll {
      width: min(74vw, 340px);
      margin-bottom: 10px;
      display: grid;
      gap: 10px;
    }

    .message-poll-question {
      font-size: 15px;
      line-height: 1.4;
      font-weight: 700;
      color: var(--text);
    }

    .message-poll-options {
      display: grid;
      gap: 8px;
    }

    .message-poll-option {
      position: relative;
      overflow: hidden;
      width: 100%;
      border: 1px solid rgba(214, 225, 239, 0.92);
      border-radius: 15px;
      background: rgba(246, 249, 255, 0.94);
      padding: 11px 13px;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 12px;
      align-items: center;
      text-align: left;
      color: inherit;
      -webkit-tap-highlight-color: transparent;
    }

    .message-row.self .message-poll-option {
      background: rgba(235, 244, 255, 0.95);
      border-color: rgba(192, 214, 241, 0.95);
    }

    .message-poll-option.is-selected {
      border-color: rgba(107, 149, 214, 0.55);
      color: var(--accent-dark);
    }

    .message-poll-option[disabled] {
      opacity: 0.92;
    }

    .message-poll-option-bar {
      position: absolute;
      inset: 0 auto 0 0;
      background: linear-gradient(90deg, rgba(111, 155, 223, 0.2) 0%, rgba(111, 155, 223, 0.05) 100%);
      pointer-events: none;
    }

    .message-poll-option-label,
    .message-poll-option-meta {
      position: relative;
      z-index: 1;
    }

    .message-poll-option-label {
      font-size: 14px;
      line-height: 1.35;
      font-weight: 600;
      color: var(--text);
    }

    .message-poll-option-meta {
      font-size: 12px;
      line-height: 1;
      font-weight: 700;
      color: var(--muted);
    }

    .message-poll-summary {
      font-size: 12px;
      line-height: 1.35;
      color: var(--muted);
    }

    .helper-text {
      margin-top: 10px;
      font-size: 12px;
      color: var(--muted);
    }

    .settings-actions {
      padding: 0 18px 18px;
      margin-top: 12px;
    }

    .settings-card {
      margin: 0 18px;
      padding: 18px;
      border: 1px solid var(--panel-border);
      border-radius: 20px;
      background: rgba(255, 255, 255, 0.72);
      color: var(--muted);
      line-height: 1.5;
    }

    .settings-links {
      margin: 0 18px 12px;
      display: grid;
      gap: 10px;
    }

    .settings-link-card {
      width: 100%;
      border: 1px solid var(--panel-border);
      border-radius: 20px;
      background: rgba(255, 255, 255, 0.78);
      padding: 16px 18px;
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto;
      align-items: center;
      gap: 14px;
      text-align: left;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
      -webkit-touch-callout: none;
    }

    .settings-link-copy {
      min-width: 0;
      display: grid;
      gap: 4px;
    }

    .settings-link-leading-icon {
      width: 38px;
      height: 38px;
      border-radius: 14px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(180deg, rgba(235, 243, 255, 0.96), rgba(223, 236, 255, 0.98));
      color: var(--accent-dark);
      box-shadow: inset 0 0 0 1px rgba(31, 122, 236, 0.08);
      font-size: 16px;
      flex-shrink: 0;
    }

    .settings-link-copy strong {
      font-size: 15px;
      line-height: 1.3;
      color: var(--text);
    }

    .settings-link-copy span {
      font-size: 12px;
      line-height: 1.45;
      color: var(--muted);
    }

    .settings-link-chevron {
      font-size: 16px;
      line-height: 1;
      color: var(--muted);
      transition: transform 0.18s ease;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    .settings-action-card {
      position: relative;
      align-items: start;
      min-height: 76px;
      padding-right: 54px;
    }

    .settings-link-action-icon {
      position: absolute;
      top: 14px;
      right: 14px;
      width: 30px;
      height: 30px;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: rgba(31, 122, 236, 0.1);
      color: var(--accent-dark);
      font-size: 14px;
      line-height: 1;
    }

    .settings-link-card.is-open .settings-link-chevron {
      transform: rotate(90deg);
    }

    .profile-link-card {
      margin-top: 16px;
    }

    .profile-delete-contact-button {
      width: 100%;
      margin-top: 16px;
      color: #fff;
    }

    .settings-link-value {
      font-size: 12px;
      line-height: 1.45;
      color: var(--muted);
    }

    .settings-detail-card {
      width: min(100%, 420px);
      margin: 0 auto;
      padding: 18px;
      border: 1px solid rgba(215, 225, 236, 0.92);
      border-radius: 24px;
      background: rgba(255, 255, 255, 0.84);
      box-shadow: 0 14px 34px rgba(17, 34, 68, 0.08);
      display: grid;
      gap: 14px;
    }

    #dataStoragePanel .profile-panel-body {
      display: grid;
      gap: 14px;
      align-content: start;
    }

    .settings-detail-note {
      margin: 0;
      font-size: 13px;
      line-height: 1.55;
      color: var(--muted);
    }

    .chat-wallpaper-options {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }

    .chat-wallpaper-options--context {
      margin-top: 10px;
    }

    .chat-wallpaper-option {
      border: 1px solid var(--panel-border);
      border-radius: 18px;
      background: rgba(255, 255, 255, 0.76);
      padding: 10px;
      display: grid;
      gap: 8px;
      justify-items: start;
      color: var(--text);
      font-size: 13px;
      font-weight: 700;
      text-align: left;
      -webkit-tap-highlight-color: transparent;
      transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
    }

    .chat-wallpaper-option.active {
      border-color: rgba(31, 122, 236, 0.42);
      box-shadow: 0 10px 24px rgba(17, 34, 68, 0.08);
    }

    .chat-wallpaper-preview {
      width: 100%;
      height: 48px;
      border-radius: 12px;
      border: 1px solid rgba(215, 225, 236, 0.9);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.26);
    }

    .chat-wallpaper-preview.is-default {
      background:
        radial-gradient(circle at top, rgba(31, 122, 236, 0.12), transparent 38%),
        linear-gradient(180deg, #f7fbff 0%, #eef4fb 100%);
    }

    .chat-wallpaper-preview.is-sky {
      background:
        radial-gradient(circle at top left, rgba(110, 186, 255, 0.28), transparent 42%),
        linear-gradient(180deg, #f2f8ff 0%, #e4efff 100%);
    }

    .chat-wallpaper-preview.is-mint {
      background:
        radial-gradient(circle at top left, rgba(96, 213, 189, 0.2), transparent 40%),
        linear-gradient(180deg, #f2fbf8 0%, #e6f5ef 100%);
    }

    .chat-wallpaper-preview.is-sunset {
      background:
        radial-gradient(circle at top, rgba(255, 171, 121, 0.24), transparent 40%),
        linear-gradient(180deg, #fff7f1 0%, #fbeee9 100%);
    }

    .chat-wallpaper-preview.is-graphite {
      background:
        radial-gradient(circle at top, rgba(104, 122, 153, 0.15), transparent 40%),
        linear-gradient(180deg, #eef2f7 0%, #e4e9f0 100%);
    }

    .chat-bubble-theme-copy {
      margin-top: 14px;
    }

    .chat-bubble-theme-options {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
      margin-top: 10px;
    }

    .chat-bubble-theme-option {
      border: 1px solid var(--panel-border);
      border-radius: 18px;
      background: rgba(255, 255, 255, 0.76);
      padding: 10px;
      display: grid;
      gap: 8px;
      justify-items: start;
      color: var(--text);
      font-size: 13px;
      font-weight: 700;
      text-align: left;
      transition: border-color 0.16s ease, box-shadow 0.16s ease;
    }

    .chat-bubble-theme-option.active {
      border-color: rgba(31, 122, 236, 0.42);
      box-shadow: 0 10px 24px rgba(17, 34, 68, 0.08);
    }

    .chat-bubble-theme-preview {
      width: 100%;
      height: 48px;
      border-radius: 12px;
      border: 1px solid rgba(215, 225, 236, 0.9);
      padding: 8px;
      display: grid;
      align-content: center;
      gap: 6px;
      background: linear-gradient(180deg, #f7fbff 0%, #eef4fb 100%);
    }

    .chat-bubble-theme-preview span {
      display: block;
      height: 12px;
      border-radius: 999px;
    }

    .chat-bubble-theme-preview span:first-child {
      width: 68%;
      justify-self: end;
      background: var(--theme-preview-self, #d9ebff);
    }

    .chat-bubble-theme-preview span:last-child {
      width: 74%;
      justify-self: start;
      background: var(--theme-preview-other, #ffffff);
      border: 1px solid rgba(215, 225, 236, 0.9);
    }

    .chat-bubble-theme-preview.is-default {
      --theme-preview-self: #d9ebff;
      --theme-preview-other: #ffffff;
    }

    .chat-bubble-theme-preview.is-ocean {
      --theme-preview-self: #cde6ff;
      --theme-preview-other: #f5fbff;
    }

    .chat-bubble-theme-preview.is-mint {
      --theme-preview-self: #cfeedd;
      --theme-preview-other: #f2fbf6;
    }

    .chat-bubble-theme-preview.is-rose {
      --theme-preview-self: #ffd9e7;
      --theme-preview-other: #fff5f9;
    }

    .chat-bubble-theme-preview.is-sand {
      --theme-preview-self: #f2e0ca;
      --theme-preview-other: #fbf5ec;
    }

    .settings-profile {
      margin: 0 18px 12px;
      padding: 18px;
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto;
      gap: 14px;
      align-items: center;
      border: 1px solid var(--panel-border);
      border-radius: 22px;
      background: rgba(255, 255, 255, 0.82);
      box-shadow: 0 8px 24px rgba(17, 34, 68, 0.05);
    }

    .settings-profile-main {
      min-width: 0;
    }

    .settings-profile-avatar {
      width: 64px;
      height: 64px;
      border-radius: 999px;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      background: linear-gradient(180deg, #eef5ff 0%, #e3efff 100%);
      color: var(--accent-dark);
      font-size: 22px;
      font-weight: 800;
      border: 1px solid rgba(215, 225, 236, 0.95);
      box-shadow: inset 0 0 0 1px rgba(31, 122, 236, 0.08);
    }

    .settings-profile-avatar.has-image {
      background: #fff;
    }

    .settings-profile-avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .settings-profile-name {
      margin: 0;
      font-size: 18px;
      font-weight: 800;
      color: var(--text);
      letter-spacing: -0.02em;
    }

    .settings-profile-phone {
      margin: 4px 0 0;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.45;
    }

    .settings-profile-actions {
      align-self: start;
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }

    .settings-profile-icon-button {
      width: 34px;
      height: 34px;
      border: 0;
      border-radius: 12px;
      background: rgba(236, 244, 255, 0.9);
      color: var(--accent-dark);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      -webkit-tap-highlight-color: transparent;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
    }

    .settings-profile-icon-button:active {
      transform: scale(0.96);
    }

    html.theme-dark .settings-profile-icon-button {
      background: rgba(12, 22, 37, 0.92);
      color: var(--accent-dark);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
    }

    .settings-profile-username-button,
    .profile-main-username-button {
      margin: 4px 0 0;
      padding: 0;
      border: 0;
      background: transparent;
      color: var(--accent-dark);
      font-size: 13px;
      line-height: 1.45;
      font-weight: 700;
      text-align: left;
      cursor: pointer;
      display: none;
      -webkit-tap-highlight-color: transparent;
    }

    .settings-profile-username-button.is-visible,
    .profile-main-username-button.is-visible {
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    .settings-profile-username-button::after,
    .profile-main-username-button::after {
      content: '⋯';
      color: rgba(22, 100, 196, 0.52);
      font-size: 14px;
      font-weight: 700;
      line-height: 1;
    }

    .profile-main-username-button {
      text-align: center;
      justify-content: center;
    }

    .settings-profile-edit {
      margin: 0 18px 12px;
    }

    .settings-edit-card {
      margin: 0 18px 12px;
      padding: 18px;
      border: 1px solid var(--panel-border);
      border-radius: 20px;
      background: rgba(255, 255, 255, 0.78);
      display: none;
      gap: 14px;
    }

    .settings-edit-card.active {
      display: grid;
    }

    .settings-edit-avatar {
      display: grid;
      justify-items: center;
      gap: 12px;
    }

    .profile-qr-card {
      width: min(100%, 360px);
      text-align: center;
    }

    .profile-qr-body {
      display: grid;
      gap: 14px;
      justify-items: center;
    }

    .profile-qr-image {
      width: 220px;
      height: 220px;
      max-width: 100%;
      border-radius: 22px;
      border: 1px solid var(--panel-border);
      background: #fff;
      padding: 12px;
      object-fit: contain;
      box-shadow: 0 10px 26px rgba(17, 34, 68, 0.08);
    }

    .profile-qr-link {
      width: 100%;
      font-size: 13px;
      line-height: 1.5;
      color: var(--muted);
      word-break: break-all;
    }

    html.theme-dark .profile-qr-image {
      background: #ffffff;
      border-color: rgba(30, 45, 67, 0.96);
      box-shadow: 0 12px 30px rgba(2, 8, 18, 0.3);
    }

    .settings-edit-actions {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }

    .settings-toggle {
      position: relative;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 12px;
      padding: 14px 16px;
      border: 1px solid var(--panel-border);
      border-radius: 18px;
      background: rgba(255, 255, 255, 0.76);
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
      -webkit-touch-callout: none;
    }

    .settings-toggle-copy {
      min-width: 0;
      display: grid;
      gap: 4px;
    }

    .settings-toggle-copy strong {
      font-size: 14px;
      line-height: 1.3;
      color: var(--text);
    }

    .settings-toggle-copy span {
      font-size: 12px;
      line-height: 1.4;
      color: var(--muted);
    }

    .settings-toggle-input {
      position: absolute;
      opacity: 0;
      pointer-events: none;
    }

    .settings-toggle-switch {
      width: 46px;
      height: 28px;
      border-radius: 999px;
      background: #d7e1ec;
      position: relative;
      transition: background 0.2s ease;
      flex-shrink: 0;
      justify-self: end;
      -webkit-tap-highlight-color: transparent;
    }

    .settings-toggle-switch::after {
      content: '';
      position: absolute;
      top: 3px;
      left: 3px;
      width: 22px;
      height: 22px;
      border-radius: 999px;
      background: #fff;
      box-shadow: 0 4px 10px rgba(17, 34, 68, 0.14);
      transition: transform 0.2s ease;
    }

    .settings-toggle-input:checked + .settings-toggle-switch {
      background: var(--accent);
    }

    .settings-toggle-input:checked + .settings-toggle-switch::after {
      transform: translateX(18px);
    }

    .chat-info-permissions {
      display: grid;
      gap: 12px;
      padding: 14px 0 0;
      border: 0;
      border-radius: 0;
      background: transparent;
      overflow: visible;
    }

    .chat-info-permissions-head {
      display: grid;
      gap: 4px;
      padding: 0 2px 2px;
      background: transparent;
      border: 0;
    }

    .chat-info-permissions-head strong {
      font-size: 14px;
      line-height: 1.3;
      color: var(--text);
    }

    .chat-info-permissions-head span {
      font-size: 12px;
      line-height: 1.45;
      color: var(--muted);
    }

    .chat-info-permissions .settings-toggle {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      min-height: 58px;
      padding: 14px 16px;
      border: 1px solid rgba(220, 228, 238, 0.96);
      border-radius: 16px;
      background: rgba(255, 255, 255, 0.9);
      box-shadow: 0 8px 22px rgba(27, 45, 80, 0.06);
    }

    .chat-info-permissions .settings-toggle-copy {
      flex: 1 1 auto;
      gap: 0;
    }

    .chat-info-permissions .settings-toggle-switch {
      flex: 0 0 auto;
      align-self: center;
      margin-left: 0;
    }

    .chat-info-permissions.is-disabled .settings-toggle {
      opacity: 0.62;
    }

    .chat-info-permissions .settings-toggle-copy strong {
      font-size: 14px;
      line-height: 1.35;
    }

    .chat-info-public-cta,
    .chat-info-public-highlights,
    .chat-info-public-preview {
      display: none !important;
    }

    #chatInfoActions {
      margin-top: 18px;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
    }

    #chatInfoActions .button {
      position: relative;
      min-height: 56px;
      padding: 14px 16px 14px 46px;
      border-radius: 18px;
      justify-content: flex-start;
      text-align: left;
      line-height: 1.25;
      box-shadow: 0 10px 24px rgba(17, 34, 68, 0.08);
    }

    #chatInfoActions .button::before {
      position: absolute;
      left: 16px;
      top: 50%;
      transform: translateY(-50%);
      font-family: "Font Awesome 6 Free";
      font-weight: 900;
      font-size: 15px;
      line-height: 1;
      opacity: 0.92;
    }

    #chatInfoJoinButton::before {
      content: '\f234';
    }

    #chatInfoAddMembersButton::before {
      content: '\f500';
    }

    #chatInfoInviteButton::before {
      content: '\40';
      font-family: inherit;
      font-weight: 800;
      font-size: 17px;
    }

    #chatInfoInviteLinkButton::before {
      content: '\f0c1';
    }

    #chatInfoSharePublicButton::before {
      content: '\f1e0';
    }

    #chatInfoNotificationsButton::before {
      content: '\f0f3';
    }

    #chatInfoAutoDeleteButton::before {
      content: '\f017';
    }

    #chatInfoLeaveButton::before {
      content: '\f2f5';
    }

    #chatInfoDeleteButton::before {
      content: '\f1f8';
    }

    #chatInfoActions #chatInfoJoinButton,
    #chatInfoActions #chatInfoDeleteButton {
      grid-column: 1 / -1;
    }

    #chatInfoMembersCard {
      margin-top: 14px;
      border-radius: 22px;
      background: rgba(255, 255, 255, 0.86);
      box-shadow: 0 14px 32px rgba(17, 34, 68, 0.08);
    }

    .chat-info-public-chip {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: fit-content;
      max-width: 100%;
      padding: 8px 12px;
      margin: 2px auto 0;
      border-radius: 999px;
      background: rgba(70, 129, 226, 0.12);
      color: var(--accent-strong);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.01em;
    }

    .chat-info-public-meta {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 8px;
      margin-top: 2px;
    }

    .chat-info-public-meta-item {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 7px 11px;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.88);
      border: 1px solid rgba(214, 226, 242, 0.96);
      color: var(--text);
      font-size: 12px;
      font-weight: 600;
      line-height: 1;
      white-space: nowrap;
    }

    .chat-info-public-cta {
      display: grid;
      gap: 6px;
      margin-top: 14px;
      padding: 16px 18px;
      border-radius: 20px;
      background: linear-gradient(180deg, rgba(31, 122, 236, 0.08), rgba(31, 122, 236, 0.04));
      border: 1px solid rgba(31, 122, 236, 0.14);
      text-align: left;
    }

    .chat-info-public-cta strong {
      font-size: 14px;
      line-height: 1.35;
      color: var(--text);
    }

    .chat-info-public-cta span {
      font-size: 12px;
      line-height: 1.5;
      color: var(--muted);
    }

    .profile-actions.is-public-preview {
      gap: 12px;
      margin-top: 18px;
    }

    .profile-actions.is-public-preview .button {
      min-height: 50px;
    }

    .profile-actions.is-public-preview .button.button-primary {
      box-shadow: 0 14px 28px rgba(31, 122, 236, 0.18);
    }

    .chat-info-public-highlights {
      display: grid;
      gap: 10px;
      margin-top: 12px;
    }

    .chat-info-public-highlight {
      padding: 14px 16px;
      border-radius: 18px;
      background: rgba(255, 255, 255, 0.9);
      border: 1px solid rgba(217, 228, 241, 0.98);
      text-align: left;
      box-shadow: 0 2px 10px rgba(53, 78, 117, 0.04);
    }

    .chat-info-public-highlight strong {
      display: block;
      font-size: 13px;
      line-height: 1.35;
      color: var(--text);
      margin-bottom: 4px;
    }

    .chat-info-public-highlight span {
      display: block;
      font-size: 12px;
      line-height: 1.5;
      color: var(--muted);
    }

    .chat-info-public-preview {
      display: grid;
      gap: 10px;
      margin-top: 14px;
    }

    .chat-info-public-preview-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 0 4px;
    }

    .chat-info-public-preview-head strong {
      font-size: 14px;
      line-height: 1.35;
      color: var(--text);
    }

    .chat-info-public-preview-head span {
      font-size: 12px;
      color: var(--muted);
    }

    .chat-info-public-preview-list {
      display: grid;
      gap: 10px;
    }

    .chat-info-public-preview-item {
      padding: 14px 16px;
      border-radius: 18px;
      background: rgba(255, 255, 255, 0.92);
      border: 1px solid rgba(217, 228, 241, 0.98);
      text-align: left;
      box-shadow: 0 2px 10px rgba(53, 78, 117, 0.04);
    }

    .chat-info-public-preview-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 6px;
    }

    .chat-info-public-preview-author {
      min-width: 0;
      font-size: 13px;
      font-weight: 700;
      color: var(--text);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .chat-info-public-preview-time {
      flex-shrink: 0;
      font-size: 11px;
      color: var(--muted);
    }

    .chat-info-public-preview-text {
      font-size: 13px;
      line-height: 1.5;
      color: var(--text);
      word-break: break-word;
    }

    .chat-info-public-preview-type {
      display: inline-flex;
      align-items: center;
      margin-bottom: 6px;
      padding: 4px 8px;
      border-radius: 999px;
      background: rgba(70, 129, 226, 0.1);
      color: var(--accent-strong);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.01em;
    }

    .app-language-options {
      display: grid;
      gap: 10px;
    }

    .app-language-option {
      width: 100%;
      padding: 14px 16px;
      border: 1px solid rgba(215, 225, 236, 0.95);
      border-radius: 18px;
      background: rgba(255, 255, 255, 0.84);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      text-align: left;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
    }

    .app-language-option.is-active {
      border-color: rgba(31, 122, 236, 0.24);
      background: linear-gradient(180deg, #eef5ff 0%, #deebff 100%);
    }

    .app-language-option-copy {
      display: grid;
      gap: 4px;
      min-width: 0;
    }

    .app-language-option-title {
      font-size: 15px;
      font-weight: 800;
      color: var(--text);
    }

    .app-language-option-subtitle {
      font-size: 12px;
      line-height: 1.45;
      color: var(--muted);
    }

    .app-language-option-check {
      width: 24px;
      height: 24px;
      border-radius: 999px;
      border: 1.5px solid rgba(31, 122, 236, 0.24);
      color: var(--accent-dark);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      font-weight: 800;
      flex-shrink: 0;
      background: rgba(255, 255, 255, 0.78);
    }

    .app-language-option:not(.is-active) .app-language-option-check {
      color: transparent;
    }

    .bottom-tabs {
      position: fixed;
      left: 50%;
      bottom: 16px;
      transform: translateX(-50%);
      width: min(calc(100% - 24px), 1180px);
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
      padding: 10px;
      border: 1px solid rgba(215, 225, 236, 0.94);
      border-radius: 24px;
      background: rgba(255, 255, 255, 0.88);
      box-shadow: 0 18px 40px rgba(17, 34, 68, 0.10);
      backdrop-filter: blur(14px);
      z-index: 20;
      overflow: hidden;
      isolation: isolate;
    }

    .bottom-tabs-indicator {
      --indicator-x: 0px;
      --indicator-y: 0px;
      --indicator-scale-x: 0.94;
      position: absolute;
      left: 0;
      top: 0;
      width: 0;
      height: 0;
      border-radius: 18px;
      background: linear-gradient(180deg, #eef5ff 0%, #deebff 100%);
      box-shadow: inset 0 0 0 1px rgba(31, 122, 236, 0.08);
      opacity: 0;
      transform: translate3d(var(--indicator-x), var(--indicator-y), 0) scaleX(var(--indicator-scale-x));
      transform-origin: center center;
      transition:
        transform 0.42s cubic-bezier(0.22, 1, 0.36, 1),
        width 0.38s cubic-bezier(0.22, 1, 0.36, 1),
        height 0.38s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.2s ease;
      pointer-events: none;
      z-index: 0;
    }

    .bottom-tabs-indicator.prerender {
      transition: none !important;
    }

    .bottom-tabs-indicator.ready {
      opacity: 1;
      --indicator-scale-x: 1;
    }

    .bottom-tabs-indicator.is-moving {
      --indicator-scale-x: 1.06;
    }

    .bottom-tab-button {
      position: relative;
      z-index: 1;
      height: 50px;
      border: 0;
      border-radius: 16px;
      background: transparent;
      color: var(--muted);
      font-size: 12px;
      font-weight: 700;
      display: grid;
      align-content: center;
      justify-items: center;
      gap: 4px;
      cursor: pointer;
      transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
    }

    .bottom-tab-icon {
      width: 22px;
      height: 22px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: currentColor;
    }

    .bottom-tab-label {
      display: block;
      line-height: 1;
    }

    .bottom-tab-button:hover {
      transform: translateY(-1px);
    }

    .bottom-tab-button.active {
      color: var(--accent-dark);
    }

    .bottom-tab-button.active:hover {
      color: var(--accent-dark);
    }

    .chat-profile-button,
    .message-profile-button,
    .chat-search-button,
    .profile-edit-button,
    .profile-main-username-button,
    .settings-profile-username-button,
    .settings-link-card,
    .sidebar-item-inline-action,
    .blocked-list-action,
    .chat-list-action-button,
    .message-action-button,
    .composer-attach-button,
    .composer-formatting-toggle-button,
    .composer-sticker-button,
    .composer-voice-button,
    .composer-send-button,
    .shared-media-item,
    .shared-file-item,
    .shared-link-item,
    .shared-voice-item,
    .shared-file-filter-chip,
    .shared-file-sort-button {
      transition:
        background 0.16s ease,
        border-color 0.16s ease,
        color 0.16s ease,
        transform 0.16s ease,
        opacity 0.16s ease,
        box-shadow 0.16s ease;
    }

    .chat-profile-button:active,
    .message-profile-button:active,
    .profile-main-username-button:active,
    .settings-profile-username-button:active {
      opacity: 0.74;
      transform: scale(0.992);
    }

    .chat-search-button:active,
    .profile-edit-button:active,
    .message-action-button:active,
    .composer-attach-button:active,
    .composer-formatting-toggle-button:active,
    .composer-sticker-button:active,
    .composer-voice-button:active:not(.is-hidden),
    .blocked-list-action:active,
    .chat-list-action-button:active,
    .shared-file-filter-chip:active,
    .shared-file-sort-button:active,
    .bottom-tab-button:active {
      transform: scale(0.975);
    }

    .settings-link-card:active,
    .shared-file-item:active,
    .shared-link-item:active,
    .shared-voice-item:active {
      background: rgba(248, 251, 255, 0.94);
      border-color: rgba(188, 209, 238, 0.96);
      box-shadow: 0 12px 28px rgba(17, 34, 68, 0.06);
    }

    .shared-media-item:active {
      transform: scale(0.986);
      box-shadow: 0 12px 28px rgba(17, 34, 68, 0.08);
    }

    .sidebar-item-inline-action {
      cursor: pointer;
    }

    .sidebar-item-inline-action:active {
      background: rgba(31, 122, 236, 0.16);
      transform: scale(0.98);
    }

    .button:focus-visible,
    .text-button:focus-visible,
    .chat-profile-button:focus-visible,
    .message-profile-button:focus-visible,
    .chat-search-button:focus-visible,
    .profile-edit-button:focus-visible,
    .profile-main-username-button:focus-visible,
    .settings-profile-username-button:focus-visible,
    .settings-link-card:focus-visible,
    .sidebar-item-inline-action:focus-visible,
    .blocked-list-action:focus-visible,
    .chat-list-action-button:focus-visible,
    .message-action-button:focus-visible,
    .composer-attach-button:focus-visible,
    .composer-formatting-toggle-button:focus-visible,
    .composer-sticker-button:focus-visible,
    .composer-voice-button:focus-visible,
    .composer-send-button:focus-visible,
    .shared-media-item:focus-visible,
    .shared-file-item:focus-visible,
    .shared-link-item:focus-visible,
    .shared-voice-item:focus-visible,
    .shared-file-filter-chip:focus-visible,
    .shared-file-sort-button:focus-visible,
    .bottom-tab-button:focus-visible {
      outline: 2px solid rgba(31, 122, 236, 0.42);
      outline-offset: 2px;
    }

    .send-options-card {
      width: min(360px, 100%);
    }

    .send-options-list {
      display: grid;
      gap: 10px;
      margin: 16px 0 18px;
    }

    .send-option-button {
      justify-content: flex-start;
      gap: 10px;
    }

    .send-schedule-sheet-modal {
      z-index: 120;
    }

    .send-schedule-card {
      padding: 0 20px calc(32px + env(safe-area-inset-bottom, 0px));
    }

    .send-schedule-sheet-modal.active .send-schedule-card {
      transform: translateY(0);
    }

    .sheet-handle {
      background: var(--layer-sheet-handle);
    }

    .send-schedule-title {
      margin: 0 0 18px;
      text-align: center;
      font-size: 17px;
      line-height: 1.25;
      font-weight: 600;
      color: #0c1a3a;
    }

    .send-schedule-field-group {
      margin-bottom: 16px;
    }

    .send-schedule-field-group:last-of-type {
      margin-bottom: 20px;
    }

    .send-schedule-actions {
      display: grid;
      gap: 10px;
    }

    .send-schedule-actions .button {
      width: 100%;
      box-sizing: border-box;
    }

    .scheduled-message-actions-modal {
      align-items: flex-end;
      justify-content: stretch;
      padding: 0;
      background: rgba(15, 17, 23, 0.3);
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      z-index: 125;
    }

    .scheduled-message-actions-card {
      width: 100%;
      max-width: 520px;
      margin: 0 auto;
      padding: 0 20px calc(32px + env(safe-area-inset-bottom, 0px));
      border: 0;
      border-radius: 24px 24px 0 0;
      background: #ffffff;
      box-shadow: none;
      transform: translateY(100%);
      transition: transform 0.26s ease;
      will-change: transform;
    }

    .scheduled-message-actions-modal.active .scheduled-message-actions-card {
      transform: translateY(0);
    }

    .scheduled-message-actions-list {
      display: grid;
      gap: 10px;
      margin-bottom: 10px;
    }

    .scheduled-message-action-button {
      width: 100%;
      box-sizing: border-box;
      justify-content: center;
    }

    .profile-panel {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      z-index: 24;
      background:
        radial-gradient(circle at top, rgba(31, 122, 236, 0.09), transparent 36%),
        linear-gradient(180deg, #f7fbff 0%, #eef4fb 100%);
      visibility: hidden;
      transform: translate3d(100%, 0, 0);
      opacity: 0;
      pointer-events: none;
      transition: transform 0.28s ease, opacity 0.28s ease, visibility 0s linear 0.28s;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    .profile-panel.active {
      visibility: visible;
      transform: translate3d(0, 0, 0);
      opacity: 1;
      pointer-events: auto;
      transition-delay: 0s;
    }

    .profile-panel.no-transition {
      transition: none !important;
    }

    .profile-panel-header {
      padding: 14px 16px 12px;
      border-bottom: 1px solid rgba(215, 225, 236, 0.9);
      background: rgba(255, 255, 255, 0.88);
      backdrop-filter: blur(16px);
      flex-shrink: 0;
    }

    .profile-panel-header-row {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto;
      align-items: center;
      gap: 12px;
    }

    .profile-panel-header-actions {
      display: inline-flex;
      align-items: center;
      justify-content: flex-end;
      gap: 8px;
    }

    .profile-panel-title {
      margin: 0;
      text-align: center;
      font-size: 17px;
      font-weight: 700;
      letter-spacing: -0.02em;
    }

    .profile-panel-body {
      min-height: 0;
      flex: 1 1 auto;
      overflow-y: auto;
      overscroll-behavior: contain;
      -webkit-overflow-scrolling: touch;
      padding: 26px 18px calc(24px + env(safe-area-inset-bottom, 0px));
    }

    .compose-panel-content {
      width: min(100%, 560px);
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    .compose-panel-subtitle {
      margin: 0;
    }

    .compose-avatar-group {
      margin-bottom: 2px;
    }

    .compose-avatar-wrap {
      display: grid;
      justify-items: center;
      gap: 12px;
    }

    .compose-avatar {
      width: 88px;
      height: 88px;
      border-radius: 999px;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      border: 1px solid rgba(215, 225, 236, 0.95);
      background: linear-gradient(180deg, #eef5ff 0%, #e3efff 100%);
      color: var(--accent-dark);
      font-size: 28px;
      font-weight: 800;
      letter-spacing: 0.02em;
      box-shadow: inset 0 0 0 1px rgba(31, 122, 236, 0.08);
    }

    .compose-avatar.has-image {
      background: #fff;
    }

    .compose-avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .compose-avatar-upload {
      min-height: 40px;
      padding: 0 14px;
      font-size: 13px;
      font-weight: 700;
    }

    .compose-panel-actions {
      padding: 0 18px calc(20px + env(safe-area-inset-bottom, 0px));
      flex-shrink: 0;
      background: linear-gradient(180deg, rgba(247, 251, 255, 0), rgba(247, 251, 255, 0.92) 28%, rgba(247, 251, 255, 0.98) 100%);
    }

    #chatInfoMembersList {
      display: grid;
      gap: 10px;
      padding-bottom: 8px;
    }

    #chatInfoMembersList .list-empty {
      margin-top: 4px;
    }

    .chat-info-member-card {
      border: 1px solid rgba(219, 228, 240, 0.96);
      border-radius: 20px;
      background: rgba(255, 255, 255, 0.9);
      box-shadow: 0 10px 24px rgba(17, 34, 68, 0.06);
      padding: 14px 16px;
    }

    .chat-info-member-card .sidebar-item-rich {
      grid-template-columns: auto minmax(0, 1fr);
      gap: 14px;
      align-items: start;
    }

    .chat-info-member-card .sidebar-avatar {
      width: 48px;
      height: 48px;
      font-size: 17px;
    }

    .chat-info-member-head {
      align-items: center;
      gap: 10px;
    }

    .chat-info-member-name {
      font-size: 15px;
    }

    .chat-info-member-secondary {
      margin-top: 5px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .chat-info-member-role {
      display: inline-flex;
      align-items: center;
      width: fit-content;
      min-height: 24px;
      margin-top: 8px;
      padding: 0 10px;
      border-radius: 999px;
      background: rgba(31, 122, 236, 0.08);
      color: var(--accent-dark);
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.02em;
      text-transform: uppercase;
    }

    .chat-info-member-role.is-owner {
      background: rgba(255, 188, 52, 0.16);
      color: #a86a00;
    }

    .chat-info-member-role.is-admin {
      background: rgba(31, 122, 236, 0.1);
      color: var(--accent-dark);
    }

    .chat-info-member-role.is-member {
      background: rgba(109, 124, 143, 0.1);
      color: #566579;
    }

    .chat-info-member-action {
      min-height: 30px;
      padding: 0 12px;
      background: rgba(31, 122, 236, 0.09);
      box-shadow: inset 0 0 0 1px rgba(31, 122, 236, 0.08);
    }

    .chat-info-member-action.is-danger {
      background: rgba(228, 54, 54, 0.1);
      color: #c53b3b;
      box-shadow: inset 0 0 0 1px rgba(228, 54, 54, 0.08);
    }

    .chat-member-restrictions-card {
      width: min(100%, 520px);
      display: grid;
      gap: 12px;
    }

    .chat-member-restrictions-toggles {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .chat-member-restriction-toggle.is-active {
      background: rgba(31, 122, 236, 0.12);
      color: var(--accent-dark);
      box-shadow: inset 0 0 0 1px rgba(31, 122, 236, 0.14);
    }

    .pinned-messages-card {
      width: min(100%, 520px);
      max-height: min(78vh, 760px);
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    .pinned-messages-list {
      min-height: 0;
      overflow-y: auto;
      display: grid;
      gap: 12px;
      padding-right: 2px;
    }

    .pinned-message-modal-item {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: end;
      gap: 10px;
      cursor: pointer;
    }

    .pinned-message-modal-item.is-active .pinned-message-modal-bubble {
      box-shadow: 0 14px 30px rgba(17, 34, 68, 0.12);
      border-color: rgba(31, 122, 236, 0.2);
    }

    .pinned-message-modal-bubble {
      padding: 12px 14px;
      border-radius: 18px;
      border: 1px solid rgba(216, 224, 234, 0.95);
      background: var(--bubble-other);
      box-shadow: 0 10px 24px rgba(17, 34, 68, 0.06);
      min-width: 0;
    }

    .pinned-message-modal-bubble.self {
      background: var(--bubble-self);
    }

    .pinned-message-modal-label {
      font-size: 11px;
      font-weight: 700;
      color: var(--muted);
      margin-bottom: 5px;
    }

    .pinned-message-modal-author {
      font-size: 12px;
      font-weight: 700;
      color: var(--accent-dark);
      margin-bottom: 4px;
    }

    .pinned-message-modal-kind {
      font-size: 12px;
      font-weight: 600;
      color: var(--muted);
      margin-bottom: 4px;
    }

    .pinned-message-modal-text {
      font-size: 14px;
      line-height: 1.45;
      color: var(--text);
      word-break: break-word;
    }

    .pinned-message-modal-jump {
      width: 38px;
      height: 38px;
      border: 0;
      border-radius: 14px;
      background: rgba(31, 122, 236, 0.1);
      color: var(--accent-dark);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      flex-shrink: 0;
    }

    .compose-contact-row {
      position: relative;
      width: 100%;
      border: 0;
      background: transparent;
      padding: 0;
      text-align: left;
      display: block;
      -webkit-tap-highlight-color: transparent;
    }

    .compose-contact-row .sidebar-item-rich {
      align-items: center;
    }

    .compose-contact-check {
      width: 22px;
      height: 22px;
      border-radius: 999px;
      border: 1px solid rgba(31, 122, 236, 0.22);
      background: rgba(255, 255, 255, 0.88);
      color: transparent;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      font-weight: 800;
      flex-shrink: 0;
      transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
    }

    .compose-contact-row.is-selected .compose-contact-check {
      background: var(--accent);
      border-color: var(--accent);
      color: #fff;
      transform: scale(1.03);
    }

    .profile-card {
      width: min(100%, 420px);
      padding: 28px 24px 22px;
      border: 1px solid rgba(215, 225, 236, 0.92);
      border-radius: 28px;
      background: rgba(255, 255, 255, 0.92);
      box-shadow: 0 18px 48px rgba(17, 34, 68, 0.14);
      text-align: center;
      transform: translateY(22px) scale(0.98);
      opacity: 0;
      transition: transform 0.26s ease, opacity 0.26s ease;
    }

    .profile-modal.active .profile-card {
      transform: translateY(0) scale(1);
      opacity: 1;
    }

    .profile-card-header {
      display: flex;
      justify-content: flex-end;
      margin-bottom: 8px;
    }

    #chatFoldersModal,
    #chatFolderFormModal,
    #chatFolderChatsPickerModal {
      align-items: flex-end;
      justify-content: center;
      padding: 0;
      background: rgba(15, 17, 23, 0.3);
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }

    .chat-folders-modal-card {
      width: min(100%, 440px);
      max-height: min(86vh, 760px);
      padding: 0 0 32px;
      border: 0;
      border-radius: 20px 20px 0 0;
      background: #ffffff;
      box-shadow: none;
      text-align: left;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      transform: translateY(24px);
    }

    #chatFoldersModal.active .chat-folders-modal-card,
    #chatFolderFormModal.active .chat-folders-modal-card,
    #chatFolderChatsPickerModal.active .chat-folders-modal-card {
      transform: translateY(0);
    }

    .chat-folder-sheet-title {
      margin: 0 0 10px;
      padding: 0 14px;
      text-align: center;
      font-size: 15px;
      font-weight: 600;
      color: #0c1a3a;
    }

    .chat-folders-modal-layout {
      display: grid;
      gap: 0;
      min-height: 0;
      overflow-y: auto;
      padding: 0;
      background: #ffffff;
    }

    .chat-folders-modal-section {
      display: grid;
      gap: 0;
      padding: 0 0 2px;
      background: #ffffff;
      border: 0;
    }

    .chat-folders-modal-section[hidden] {
      display: none !important;
    }

    .chat-folder-section-label {
      display: block;
      padding: 0 14px;
      margin: 0 0 6px;
      font-size: 10px;
      font-weight: 500;
      color: #9ba8c0;
      letter-spacing: 0;
      text-transform: none;
    }

    .chat-folder-create-button,
    .chat-folder-open-picker-button,
    .chat-folder-sheet-button {
      width: calc(100% - 28px);
      margin: 6px 14px 0;
      padding: 11px;
      border: 0;
      border-radius: 13px;
      box-sizing: border-box;
      font-size: 13px;
      font-weight: 500;
      cursor: pointer;
      transition: transform 0.15s ease, opacity 0.15s ease, background 0.15s ease, color 0.15s ease;
    }

    .chat-folder-create-button:active,
    .chat-folder-open-picker-button:active,
    .chat-folder-sheet-button:active:not(:disabled) {
      transform: scale(0.985);
    }

    .chat-folder-create-button {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      margin-top: 0;
      margin-bottom: 12px;
      background: #eef2f9;
      color: #1664c4;
    }

    .chat-folders-manage-list,
    .chat-folder-chat-select-list {
      margin: 0 14px 10px;
      border-radius: 13px;
      border: 0.5px solid #eef2f9;
      overflow: hidden;
      background: #ffffff;
    }

    .chat-folder-empty-state {
      margin: 0 14px;
      padding: 16px;
      border-radius: 13px;
      border: 1px dashed #dde4f0;
      background: #f8fafd;
      color: #9ba8c0;
      font-size: 12px;
      text-align: center;
    }

    .chat-folder-manage-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 14px;
      background: #ffffff;
      border-bottom: 0.5px solid #eef2f9;
    }

    .chat-folder-manage-item:last-child {
      border-bottom: 0;
    }

    .chat-folder-manage-main {
      border: 0;
      background: transparent;
      padding: 0;
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 0;
      flex: 1;
      text-align: left;
      cursor: pointer;
    }

    .chat-folder-manage-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: var(--folder-accent);
      flex-shrink: 0;
    }

    .chat-folder-manage-copy {
      min-width: 0;
      display: grid;
      gap: 2px;
    }

    .chat-folder-manage-copy strong {
      font-size: 13px;
      font-weight: 500;
      color: #0c1a3a;
    }

    .chat-folder-manage-copy span {
      font-size: 11px;
      color: #9ba8c0;
    }

    .chat-folder-manage-actions {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      margin-left: auto;
    }

    .chat-folder-manage-order {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      border: 1px solid #dde4f0;
      background: transparent;
      color: #9ba8c0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      flex-shrink: 0;
    }

    .chat-folder-manage-order:not(:disabled) {
      color: #1664c4;
    }

    .chat-folder-manage-order:disabled {
      opacity: 0.45;
      cursor: not-allowed;
    }

    .chat-folder-field-group {
      margin: 0;
    }

    .chat-folder-field-group .input {
      width: calc(100% - 28px);
      margin: 0 14px 10px;
      padding: 10px 12px;
      border-radius: 11px;
      border: 0.5px solid #e4eaf5;
      background: #f8fafd;
      color: #0c1a3a;
      font-size: 13px;
      box-sizing: border-box;
    }

    .chat-folder-field-group .input::placeholder {
      color: #9ba8c0;
    }

    .chat-folder-color-options {
      display: flex;
      gap: 8px;
      padding: 0 14px;
      margin: 0 0 10px;
      flex-wrap: wrap;
    }

    .chat-folder-color-option {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      border: 0;
      background: var(--folder-accent);
      cursor: pointer;
      box-shadow: none;
    }

    .chat-folder-color-option.active {
      box-shadow:
        0 0 0 2px #ffffff,
        0 0 0 4px var(--folder-accent);
    }

    .chat-folder-open-picker-button {
      margin-top: 0;
      margin-bottom: 8px;
      background: #eef2f9;
      color: #1664c4;
    }

    .chat-folder-chats-preview {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      padding: 0 14px 8px;
      color: #9ba8c0;
      font-size: 11px;
    }

    .chat-folder-preview-chip {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 5px 10px 5px 5px;
      border-radius: 20px;
      background: #eef2f9;
      color: #0c1a3a;
      font-size: 11px;
      font-weight: 500;
    }

    .chat-folder-preview-avatar {
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background: #dbeafe;
      color: #1664c4;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 8px;
      font-weight: 600;
      overflow: hidden;
      flex-shrink: 0;
    }

    .chat-folder-preview-avatar.has-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .chat-folder-preview-name {
      min-width: 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .chat-folder-preview-remove {
      color: #9ba8c0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .chat-folder-chats-empty {
      padding: 0 14px;
      color: #9ba8c0;
      font-size: 11px;
    }

    .chat-folder-sheet-divider {
      height: 0;
      margin: 8px 14px;
      border-top: 0.5px solid #eef2f9;
    }

    .chat-folder-sheet-actions {
      display: grid;
      gap: 0;
    }

    .chat-folder-sheet-button.is-primary {
      background: #1664c4;
      color: #ffffff;
    }

    .chat-folder-sheet-button.is-danger-soft {
      background: #fef2f2;
      color: #e24b4a;
    }

    .chat-folder-sheet-button.is-secondary {
      background: #eef2f9;
      color: #9ba8c0;
    }

    .chat-folder-chat-option {
      display: grid;
      grid-template-columns: auto auto auto minmax(0, 1fr);
      align-items: center;
      gap: 10px;
      padding: 9px 14px;
      background: #ffffff;
      border-bottom: 0.5px solid #eef2f9;
      cursor: pointer;
      text-align: left;
    }

    .chat-folder-chat-option:last-child {
      border-bottom: 0;
    }

    .chat-folder-chat-option.is-selected {
      background: #eef5ff;
      border-color: #dce8fa;
    }

    .chat-folder-chat-option-input {
      position: absolute;
      opacity: 0;
      pointer-events: none;
    }

    .chat-folder-chat-option-check {
      width: 22px;
      height: 22px;
      border-radius: 50%;
      border: 1.5px solid #c8d4e8;
      background: transparent;
      color: transparent;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: background 0.18s ease, border-color 0.18s ease;
    }

    .chat-folder-chat-option.is-selected .chat-folder-chat-option-check {
      background: #1664c4;
      border-color: #1664c4;
      color: #ffffff;
    }

    .chat-folder-chat-option-avatar {
      width: 34px;
      height: 34px;
      border-radius: 50%;
      background: #dbeafe;
      color: #1664c4;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      font-weight: 600;
      overflow: hidden;
      flex-shrink: 0;
    }

    .chat-folder-chat-option.is-selected .chat-folder-chat-option-avatar {
      background: #b5d4f4;
      color: #0c447c;
    }

    .chat-folder-chat-option-avatar.has-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .chat-folder-chat-option-copy {
      min-width: 0;
      display: block;
    }

    .chat-folder-chat-option-title {
      font-size: 12px;
      font-weight: 500;
      color: #0c1a3a;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    #chatFoldersModal .sheet-handle,
    #chatFolderFormModal .sheet-handle,
    #chatFolderChatsPickerModal .sheet-handle {
      width: 32px;
      height: 3px;
      margin: 10px auto 14px;
      border-radius: 2px;
      background: #dde4f0;
    }

    .chat-folder-sheet-button:disabled {
      opacity: 0.4;
      pointer-events: none;
    }

    #chatComposeActionsModal {
      background: var(--layer-sheet-overlay);
    }

    #chatComposeActionsModal .chat-compose-actions-card {
      width: min(100%, 420px);
      padding: 0 0 32px;
      text-align: left;
      transform: translateY(28px);
    }

    #chatComposeActionsModal.active .chat-compose-actions-card {
      transform: translateY(0);
    }

    #chatComposeActionsModal .profile-card-header {
      display: none;
    }

    .chat-compose-actions-handle {
      margin: 12px auto 20px;
    }

    .chat-compose-actions-title {
      margin: 0 0 4px;
      font-size: 17px;
      font-weight: 600;
      line-height: 1.25;
      text-align: center;
      color: #0c1a3a;
    }

    .chat-compose-actions-subtitle {
      margin: 0 0 20px;
      font-size: 12px;
      line-height: 1.4;
      text-align: center;
      color: #9ba8c0;
    }

    .chat-compose-actions-list {
      display: grid;
      gap: 8px;
      padding: 0 16px;
    }

    .chat-compose-action-item {
      width: 100%;
      border: 0;
      margin: 0;
      padding: 13px 16px;
      border-radius: 16px;
      background: #eef2f9;
      display: flex;
      align-items: center;
      gap: 14px;
      text-align: left;
      cursor: pointer;
    }

    .chat-compose-action-icon {
      width: 40px;
      height: 40px;
      border-radius: 12px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .chat-compose-action-item.is-chat {
      color: #1664c4;
    }

    .chat-compose-action-item.is-chat .chat-compose-action-icon {
      background: #dbeafe;
    }

    .chat-compose-action-item.is-group {
      color: #0f6e56;
    }

    .chat-compose-action-item.is-group .chat-compose-action-icon {
      background: #f0faf6;
    }

    .chat-compose-action-item.is-channel {
      color: #7f77dd;
    }

    .chat-compose-action-item.is-channel .chat-compose-action-icon {
      background: #f5f0fe;
    }

    .chat-compose-action-copy {
      min-width: 0;
      display: grid;
      gap: 2px;
    }

    .chat-compose-action-name {
      font-size: 14px;
      font-weight: 500;
      line-height: 1.3;
      color: #0c1a3a;
    }

    .chat-compose-action-note {
      font-size: 11px;
      line-height: 1.35;
      color: #9ba8c0;
    }

    .chat-compose-actions-divider {
      height: 0.5px;
      margin: 12px 16px 8px;
      background: #eef2f9;
    }

    .chat-compose-cancel-button {
      box-sizing: border-box;
      width: calc(100% - 32px);
      margin: 0 16px;
      padding: 13px;
      border: 0;
      border-radius: 16px;
      background: #eef2f9;
      color: #9ba8c0;
      font-size: 14px;
      font-weight: 500;
      line-height: 1.3;
      cursor: pointer;
    }

    html.theme-dark #chatComposeActionsModal {
      background: var(--layer-sheet-overlay);
    }

    html.theme-dark #chatComposeActionsModal .chat-compose-actions-card {
      background: var(--layer-sheet-bg);
    }

    html.theme-dark .chat-compose-actions-handle {
      background: var(--layer-sheet-handle);
    }

    html.theme-dark .chat-compose-actions-title {
      color: #e8edf8;
    }

    html.theme-dark .chat-compose-actions-subtitle {
      color: #4a5568;
    }

    html.theme-dark .chat-compose-action-item {
      background: #1c2030;
    }

    html.theme-dark .chat-compose-action-item.is-chat {
      color: #85b7eb;
    }

    html.theme-dark .chat-compose-action-item.is-chat .chat-compose-action-icon {
      background: #1e3a5f;
    }

    html.theme-dark .chat-compose-action-item.is-group {
      color: #5dcaa5;
    }

    html.theme-dark .chat-compose-action-item.is-group .chat-compose-action-icon {
      background: #0d2e22;
    }

    html.theme-dark .chat-compose-action-item.is-channel {
      color: #afa9ec;
    }

    html.theme-dark .chat-compose-action-item.is-channel .chat-compose-action-icon {
      background: #1e1a38;
    }

    html.theme-dark .chat-compose-action-name {
      color: #e8edf8;
    }

    html.theme-dark .chat-compose-action-note {
      color: #4a5568;
    }

    html.theme-dark .chat-compose-actions-divider {
      background: #252b3b;
    }

    html.theme-dark .chat-compose-cancel-button {
      background: #252b3b;
      color: #4a5568;
    }

    .profile-panel-content {
      width: min(100%, 420px);
      margin: 0 auto;
      text-align: center;
    }

    .media-viewer {
      --viewer-drag-y: 0px;
      --viewer-scale: 1;
      --viewer-media-x: 0px;
      --viewer-media-y: 0px;
      --viewer-radius: 0px;
      --viewer-backdrop-opacity: 1;
      position: fixed;
      inset: 0;
      z-index: 60;
      background: transparent;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: opacity 0.24s ease, visibility 0s linear 0.24s;
      padding-top: env(safe-area-inset-top);
      padding-bottom: env(safe-area-inset-bottom);
      box-sizing: border-box;
      overflow: hidden;
    }

    .media-viewer-topbar {
      position: absolute;
      top: calc(env(safe-area-inset-top) + 12px);
      left: 50%;
      transform: translateX(-50%);
      z-index: 3;
      pointer-events: none;
    }

    .media-viewer-counter {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 34px;
      padding: 0 14px;
      border-radius: 999px;
      background: rgba(10, 16, 26, 0.52);
      border: 1px solid rgba(255, 255, 255, 0.14);
      color: rgba(255, 255, 255, 0.96);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0.01em;
    }

    .media-viewer::before,
    .media-viewer::after {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      background: var(--bg);
      pointer-events: none;
      z-index: 0;
    }

    .media-viewer::before {
      top: 0;
      height: env(safe-area-inset-top);
    }

    .media-viewer::after {
      bottom: 0;
      height: env(safe-area-inset-bottom);
    }

    .media-viewer.active {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      transition-delay: 0s;
    }

    .media-viewer-body {
      position: absolute;
      inset: 0;
      z-index: 1;
      isolation: isolate;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0;
      overflow: hidden;
      touch-action: none;
    }

    .media-viewer-video {
      position: relative;
      z-index: 1;
      width: auto;
      max-width: calc(100vw - 28px);
      max-height: calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 84px);
      display: block;
      margin: auto;
      border-radius: var(--viewer-radius);
      background: #111;
      object-fit: contain;
      transform-origin: center center;
      transform-style: preserve-3d;
      -webkit-transform-style: preserve-3d;
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
      will-change: transform;
      transform: translate3d(var(--viewer-media-x), calc(var(--viewer-media-y) + var(--viewer-drag-y)), 0) scale(var(--viewer-scale));
      transition:
        transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
        border-radius 0.32s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .media-viewer-body::before {
      content: '';
      position: absolute;
      inset: 0;
      background: rgba(7, 12, 20, 0.96);
      opacity: var(--viewer-backdrop-opacity);
      transition: opacity 0.32s cubic-bezier(0.22, 1, 0.36, 1);
      pointer-events: none;
      z-index: 0;
    }

    .media-viewer.dragging .media-viewer-body::before {
      transition: none;
    }

    .media-viewer-image {
      position: relative;
      z-index: 1;
      width: auto;
      max-width: calc(100vw - 28px);
      max-height: calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 84px);
      display: block;
      margin: auto;
      border-radius: var(--viewer-radius);
      background: #111;
      object-fit: contain;
      box-shadow: none;
      user-select: none;
      -webkit-user-drag: none;
      transform-origin: center center;
      transform-style: preserve-3d;
      -webkit-transform-style: preserve-3d;
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
      will-change: transform;
      image-rendering: auto;
      transform: translate3d(var(--viewer-media-x), calc(var(--viewer-media-y) + var(--viewer-drag-y)), 0) scale(var(--viewer-scale));
      transition:
        transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
        border-radius 0.32s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .media-viewer.dragging .media-viewer-image {
      transition: none;
    }

    .media-viewer.dragging .media-viewer-video {
      transition: none;
    }

    .media-viewer-image[hidden],
    .media-viewer-video[hidden] {
      display: none !important;
    }

    .media-viewer-clone {
      position: fixed;
      z-index: 61;
      display: block;
      margin: 0;
      object-fit: cover;
      background: #111;
      pointer-events: none;
      will-change: top, left, width, height, border-radius, opacity, transform;
      transition:
        top 0.28s cubic-bezier(0.22, 1, 0.36, 1),
        left 0.28s cubic-bezier(0.22, 1, 0.36, 1),
        width 0.28s cubic-bezier(0.22, 1, 0.36, 1),
        height 0.28s cubic-bezier(0.22, 1, 0.36, 1),
        border-radius 0.28s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.2s ease;
    }

    .profile-close {
      width: 36px;
      height: 36px;
      border: 0;
      border-radius: 999px;
      background: #edf3fb;
      color: var(--muted);
      font-size: 20px;
      line-height: 1;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    .profile-main-avatar {
      width: 96px;
      height: 96px;
      margin: 0 auto 16px;
      border-radius: 999px;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      background: linear-gradient(180deg, #eef5ff 0%, #e3efff 100%);
      color: var(--accent-dark);
      font-size: 30px;
      font-weight: 800;
      border: 1px solid rgba(215, 225, 236, 0.95);
      box-shadow: inset 0 0 0 1px rgba(31, 122, 236, 0.08);
    }

    .profile-main-avatar.has-image {
      background: #fff;
    }

    .profile-main-avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .profile-main-name {
      margin: 0;
      font-size: 24px;
      font-weight: 800;
      letter-spacing: -0.03em;
      color: var(--text);
    }

    .profile-name-row {
      display: flex;
      justify-content: center;
      align-items: center;
      width: fit-content;
      max-width: 100%;
      margin: 0 auto;
    }

    .profile-name-input {
      width: auto;
      min-width: 6ch;
      max-width: min(260px, calc(100vw - 180px));
      box-sizing: border-box;
      min-height: 48px;
      padding: 8px 14px;
      border: 0;
      border-radius: 16px;
      background: transparent;
      box-shadow: none;
      outline: none;
      -webkit-appearance: none;
      appearance: none;
      text-align: center;
      font-size: 24px;
      font-weight: 800;
      letter-spacing: -0.03em;
      color: var(--text);
      transition:
        width 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
    }

    .profile-name-input:focus {
      outline: none;
      box-shadow: none;
      border: 0;
    }

    .profile-name-input[readonly] {
      cursor: default;
      pointer-events: none;
      caret-color: transparent;
    }

    .profile-name-input.is-editing {
      background: rgba(255, 255, 255, 0.98);
      box-shadow:
        inset 0 0 0 1px rgba(31, 122, 236, 0.2),
        0 0 0 4px rgba(31, 122, 236, 0.08);
      transform: translateY(-1px);
    }

    .profile-name-measure {
      position: absolute;
      left: -9999px;
      top: -9999px;
      visibility: hidden;
      white-space: pre;
      font-size: 24px;
      font-weight: 800;
      letter-spacing: -0.03em;
      padding: 8px 14px;
    }

    .profile-edit-button {
      width: 32px;
      height: 32px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 0;
      border-radius: 999px;
      background: #edf3fb;
      color: var(--accent-dark);
      font-size: 15px;
      line-height: 1;
      cursor: pointer;
      flex-shrink: 0;
      transition: background 0.2s ease, transform 0.2s ease, color 0.2s ease;
    }

    .profile-edit-button.is-active {
      background: rgba(31, 122, 236, 0.14);
      transform: translateY(-1px);
    }

    .confirm-copy {
      margin: 8px 0 0;
      color: var(--muted);
      font-size: 14px;
      line-height: 1.5;
    }

    .profile-main-phone {
      margin: 8px 0 0;
      color: var(--muted);
      font-size: 14px;
      line-height: 1.45;
    }

    .message-checklist {
      padding: 13px 14px;
      display: grid;
      gap: 10px;
    }

    .message-checklist-title {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 15px;
      font-weight: 700;
      color: var(--text);
    }

    .message-checklist-items {
      display: grid;
      gap: 8px;
    }

    .message-checklist-item {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      gap: 9px;
      align-items: start;
      color: var(--muted);
      font-size: 14px;
      line-height: 1.45;
    }

    .message-checklist-bullet {
      color: var(--accent-dark);
      font-size: 13px;
      line-height: 1.3;
      padding-top: 2px;
    }

    .message-location {
      padding: 13px 14px;
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto;
      gap: 12px;
      align-items: center;
      text-decoration: none;
    }

    .message-location-copy {
      min-width: 0;
      display: grid;
      gap: 3px;
    }

    .message-location-label {
      font-size: 14px;
      line-height: 1.35;
      font-weight: 700;
      color: var(--text);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .message-location-meta {
      font-size: 12px;
      line-height: 1.35;
      color: var(--muted);
    }

    .message-location-live-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 42px;
      padding: 5px 8px;
      border-radius: 999px;
      background: rgba(228, 54, 54, 0.12);
      color: #c53b3b;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.06em;
    }

    .profile-language {
      margin-top: 14px;
      text-align: left;
    }

    .profile-actions {
      margin-top: 24px;
      display: grid;
      gap: 10px;
    }

    .profile-common-stats {
      margin-top: 14px;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
    }

    .profile-common-stat {
      min-width: 0;
      padding: 14px 12px;
      border-radius: 14px;
      background: var(--surface-soft);
      border: 1px solid var(--line);
      text-align: center;
    }

    .profile-common-stat strong {
      display: block;
      font-size: 18px;
      line-height: 1.1;
      font-weight: 700;
      color: var(--text);
    }

    .profile-common-stat span {
      display: block;
      margin-top: 6px;
      font-size: 11px;
      line-height: 1.35;
      color: var(--muted);
    }

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

    .attach-action-button {
      min-height: 58px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
    }

    .attach-action-button i {
      font-size: 16px;
    }

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

    .attach-contact-list {
      max-height: min(44vh, 360px);
      overflow-y: auto;
      margin-top: 8px;
      border-top: 1px solid rgba(230, 236, 244, 0.9);
      border-bottom: 1px solid rgba(230, 236, 244, 0.9);
    }

    .shared-media-tabs {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 10px;
      margin-bottom: 16px;
    }

    .shared-media-search {
      position: relative;
      margin: 0 0 12px;
    }

    .shared-media-search-icon {
      position: absolute;
      left: 14px;
      top: 50%;
      transform: translateY(-50%);
      color: var(--muted);
      pointer-events: none;
    }

    .shared-media-search-input {
      padding-left: 40px;
      padding-right: 42px;
    }

    .shared-media-tab {
      min-height: 42px;
      border: 1px solid rgba(215, 225, 236, 0.95);
      border-radius: 16px;
      background: rgba(255, 255, 255, 0.82);
      color: var(--muted);
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
    }

    .shared-media-tab.active {
      background: linear-gradient(180deg, #eef5ff 0%, #deebff 100%);
      color: var(--accent-dark);
      border-color: rgba(31, 122, 236, 0.2);
    }

    .shared-media-status {
      margin: 0 0 16px;
      font-size: 13px;
      line-height: 1.45;
      color: var(--muted);
      text-align: center;
    }

    .shared-media-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
    }

    .shared-media-item {
      position: relative;
      width: 100%;
      aspect-ratio: 1 / 1;
      appearance: none;
      border: 1px solid rgba(215, 225, 236, 0.95);
      border-radius: 18px;
      overflow: hidden;
      background: rgba(255, 255, 255, 0.82);
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
    }

    .shared-media-item-overlay {
      position: absolute;
      inset: auto 0 0 0;
      padding: 22px 10px 10px;
      background: linear-gradient(180deg, rgba(7, 12, 20, 0) 0%, rgba(7, 12, 20, 0.72) 58%, rgba(7, 12, 20, 0.86) 100%);
      color: #fff;
      display: grid;
      gap: 4px;
      text-align: left;
    }

    .shared-media-item-label {
      display: inline-flex;
      align-items: center;
      width: fit-content;
      min-height: 22px;
      padding: 0 8px;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.16);
      font-size: 10px;
      font-weight: 800;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      backdrop-filter: blur(8px);
    }

    .shared-media-item-meta {
      font-size: 11px;
      line-height: 1.35;
      color: rgba(255, 255, 255, 0.88);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .shared-media-item-caption {
      font-size: 12px;
      line-height: 1.35;
      color: rgba(255, 255, 255, 0.94);
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .shared-media-item img,
    .shared-media-item video {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      background: #0f172a;
    }

    .shared-media-item.is-video video {
      transform: scale(1.02);
      filter: saturate(0.92) contrast(1.02);
    }

    .shared-media-item-play {
      position: absolute;
      inset: 50% auto auto 50%;
      transform: translate(-50%, -50%);
      width: 52px;
      height: 52px;
      border-radius: 999px;
      background: rgba(7, 12, 20, 0.72);
      color: #fff;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      line-height: 1;
      backdrop-filter: blur(10px);
      box-shadow: 0 12px 28px rgba(7, 12, 20, 0.28);
      pointer-events: none;
    }

    .shared-media-item-badge {
      position: absolute;
      right: 8px;
      bottom: 8px;
      min-width: 28px;
      min-height: 28px;
      padding: 0 8px;
      border-radius: 999px;
      background: rgba(7, 12, 20, 0.72);
      color: #fff;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      font-weight: 700;
      backdrop-filter: blur(8px);
    }

    .shared-list {
      display: grid;
      gap: 10px;
    }

    .shared-section {
      display: grid;
      gap: 10px;
    }

    .shared-section + .shared-section {
      margin-top: 18px;
    }

    .shared-section-title {
      position: sticky;
      top: 0;
      z-index: 3;
      padding: 8px 2px;
      font-size: 12px;
      line-height: 1.3;
      font-weight: 800;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: var(--muted);
      background: linear-gradient(180deg, rgba(247, 250, 253, 0.96) 0%, rgba(247, 250, 253, 0.88) 100%);
      backdrop-filter: blur(10px);
    }

    .shared-section-body {
      display: grid;
      gap: 10px;
    }

    .shared-file-item,
    .shared-link-item,
    .shared-voice-item {
      width: 100%;
      appearance: none;
      border: 1px solid rgba(215, 225, 236, 0.92);
      border-radius: 18px;
      background: rgba(255, 255, 255, 0.84);
      padding: 14px 16px;
      display: grid;
      gap: 6px;
      text-align: left;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
      box-shadow: 0 10px 26px rgba(17, 34, 68, 0.05);
    }

    .shared-file-controls {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 14px;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
    }

    .shared-file-controls::-webkit-scrollbar {
      display: none;
    }

    .shared-file-filter-row {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-width: max-content;
    }

    .shared-file-filter-chip,
    .shared-file-sort-button {
      border: 1px solid rgba(216, 225, 236, 0.96);
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.84);
      color: var(--muted);
      min-height: 34px;
      padding: 0 12px;
      font-size: 12px;
      font-weight: 700;
      line-height: 1;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
      white-space: nowrap;
    }

    .shared-file-filter-chip.active,
    .shared-file-sort-button {
      color: var(--accent-dark);
      border-color: rgba(163, 198, 239, 0.96);
      background: rgba(232, 242, 255, 0.92);
    }

    .shared-file-filter-chip:not(.active):active,
    .shared-file-sort-button:active {
      transform: scale(0.98);
    }

    .shared-file-head,
    .shared-link-head,
    .shared-voice-head {
      display: flex;
      align-items: center;
      gap: 10px;
      color: var(--text);
    }

    .shared-file-icon,
    .shared-link-icon,
    .shared-voice-icon {
      width: 36px;
      height: 36px;
      border-radius: 12px;
      background: linear-gradient(180deg, #eef5ff 0%, #deebff 100%);
      color: var(--accent-dark);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      font-weight: 800;
      flex-shrink: 0;
    }

    .chat-back-button i,
    .profile-close i,
    .profile-edit-button i,
    .composer-sticker-button i,
    .composer-voice-button i,
    .composer-send-button i,
    .settings-link-chevron i,
    .message-audio-button i,
    .shared-media-item-play i,
    .shared-media-item-badge i,
    .shared-voice-icon i,
    .shared-link-icon i,
    .compose-contact-check i {
      pointer-events: none;
    }

    .shared-file-name,
    .shared-link-url,
    .shared-voice-title {
      font-size: 14px;
      font-weight: 700;
      color: var(--text);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .shared-file-meta,
    .shared-link-meta,
    .shared-link-text,
    .shared-voice-meta {
      font-size: 12px;
      line-height: 1.45;
      color: var(--muted);
    }

    .shared-file-kicker,
    .shared-link-kicker,
    .shared-voice-kicker {
      display: inline-flex;
      align-items: center;
      align-self: start;
      width: fit-content;
      min-height: 24px;
      padding: 0 10px;
      border-radius: 999px;
      background: rgba(31, 122, 236, 0.08);
      color: var(--accent-dark);
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.03em;
      text-transform: uppercase;
    }

    .shared-voice-item audio,
    .shared-video-inline {
      width: 100%;
      margin-top: 2px;
      border-radius: 14px;
      overflow: hidden;
      background: #0f172a;
      accent-color: var(--accent-dark);
    }

    .shared-voice-item .message-audio {
      width: 100%;
      margin: 2px 0 0;
    }

    .shared-media-caption,
    .shared-file-caption,
    .shared-voice-caption {
      font-size: 13px;
      line-height: 1.45;
      color: var(--text);
      white-space: pre-wrap;
      word-break: break-word;
    }

    .shared-link-text {
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .shared-empty {
      padding: 18px 12px;
      text-align: center;
      color: var(--muted);
      font-size: 14px;
      line-height: 1.5;
    }

    @media (max-width: 900px) {
      html,
      body {
        background: #ffffff !important;
        background-color: #ffffff !important;
      }

      body {
        padding: 0;
      }

      .screen {
        padding: 0;
      }

      .login-screen,
      .app-shell {
        min-height: 100vh;
      }

      .login-card,
      .app-shell {
        border-radius: 0;
        border: 0;
      }

      .app-screen-shell {
        padding-bottom: 88px;
      }

      .bottom-tabs {
        bottom: 0;
        width: 100%;
        border-radius: 20px 20px 0 0;
        border-left: 0;
        border-right: 0;
        border-bottom: 0;
      }
    }

    @media (max-width: 760px) {
      .app-shell {
        flex-direction: column;
      }

      .sidebar {
        width: 100%;
        min-width: 0;
        max-height: 380px;
        border-right: 0;
        border-bottom: 1px solid rgba(215, 225, 236, 0.9);
      }

      .composer-form,
      .code-actions {
        grid-template-columns: 1fr;
      }

      .phone-input-wrap {
        grid-template-columns: 1fr;
        height: auto;
        gap: 8px;
        padding: 12px 14px;
      }

      .phone-prefix {
        min-width: 0;
        padding-right: 0;
        padding-bottom: 8px;
        border-right: 0;
        border-bottom: 1px solid rgba(215, 225, 236, 0.9);
      }

      .otp-grid {
        gap: 8px;
      }

      .button {
        width: 100%;
      }

      .composer-send-button {
        width: 34px;
        max-width: 34px;
        min-width: 34px;
      }

      .message-bubble {
        max-width: 88%;
      }

      #removeContactModal {
        align-items: flex-end;
        justify-content: stretch;
        padding: 0;
        background: rgba(15, 17, 23, 0.3);
      }

      #removeContactModal .remove-contact-card {
        width: 100%;
        max-width: 520px;
        margin: 0 auto;
        padding: 20px 20px calc(32px + env(safe-area-inset-bottom, 0px));
        border: 0;
        border-radius: 24px 24px 0 0;
        background: #ffffff;
        box-shadow: none;
        text-align: initial;
        transform: translateY(100%);
        transition: transform 0.26s ease, opacity 0.26s ease;
      }

      #removeContactModal.active .remove-contact-card {
        transform: translateY(0);
      }

      #removeContactModal .profile-card-header {
        display: none;
      }

      .remove-contact-sheet-handle {
        width: 36px;
        height: 4px;
        border-radius: 2px;
        background: #dde4f0;
        margin: 0 auto 20px;
      }

      .remove-contact-icon-wrap {
        width: 56px;
        height: 56px;
        margin: 0 auto 16px;
        border-radius: 18px;
        background: #fef2f2;
        color: #e24b4a;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .remove-contact-title {
        margin: 0 0 12px;
        text-align: center;
        font-size: 17px;
        line-height: 1.25;
        font-weight: 600;
        color: #0c1a3a;
      }

      .remove-contact-copy {
        margin: 0 0 20px;
        text-align: center;
        font-size: 13px;
        line-height: 1.5;
        color: #9ba8c0;
      }

      .remove-contact-emphasis {
        font-weight: 500;
        color: #0c1a3a;
      }

      .remove-contact-avatars {
        display: flex;
        justify-content: center;
        margin: 0 0 20px;
      }

      .remove-contact-avatar-stack-item {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: #dbeafe;
        color: #1664c4;
        border: 2px solid #ffffff;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        flex-shrink: 0;
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
      }

      .remove-contact-avatar-stack-item + .remove-contact-avatar-stack-item {
        margin-left: -10px;
      }

      .remove-contact-avatar-stack-item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .remove-contact-avatar-stack-item.is-more {
        background: #eef2f9;
        color: #9ba8c0;
        font-size: 11px;
      }

      .remove-contact-actions {
        display: grid;
        gap: 10px;
      }

      .remove-contact-actions .button {
        width: 100%;
        padding: 14px;
        height: auto;
        min-height: 0;
        border-radius: 16px;
        font-size: 15px;
        font-weight: 500;
        box-sizing: border-box;
      }

      .remove-contact-actions .button-secondary {
        background: #eef2f9;
        color: #0c1a3a;
        border: 0;
      }

      .remove-contact-actions .button-danger {
        background: #e24b4a;
        color: #ffffff;
        border: 0;
      }

      #usernameActionsModal,
      #inviteLinkActionsModal,
      #sharedMediaActionsModal {
        align-items: flex-end;
        padding: 12px 12px calc(12px + env(safe-area-inset-bottom, 0px));
      }

      #usernameActionsModal .profile-card,
      #inviteLinkActionsModal .profile-card,
      #sharedMediaActionsModal .profile-card {
        width: 100%;
        max-width: none;
        padding: 22px 20px 18px;
        border-radius: 26px 26px 18px 18px;
        max-height: min(82vh, 760px);
        overflow-y: auto;
        transform: translateY(36px);
      }

      #usernameActionsModal.active .profile-card,
      #inviteLinkActionsModal.active .profile-card,
      #sharedMediaActionsModal.active .profile-card {
        transform: translateY(0);
      }

      #usernameActionsModal .profile-card-header,
      #inviteLinkActionsModal .profile-card-header,
      #sharedMediaActionsModal .profile-card-header {
        position: sticky;
        top: 0;
        z-index: 1;
        margin: -4px 0 12px;
        padding-bottom: 4px;
        background: rgba(255, 255, 255, 0.92);
      }

      .login-card {
        padding: 24px;
      }

      .onboarding-card {
        padding: 24px;
      }

      .login-brand h1 {
        font-size: 28px;
      }

      .login-brand p {
        font-size: 14px;
      }
    }

    /* Mobile-first app shell overrides */
    html,
    body {
      background: #ffffff;
      background-color: #ffffff;
    }

    #appScreen {
      height: 100dvh;
      min-height: 100dvh;
      padding: 0;
      overflow: hidden;
      overscroll-behavior: none;
      background: #ffffff;
    }

    .app-screen-shell {
      width: min(100%, 520px);
      height: 100dvh;
      min-height: 100dvh;
      margin: 0 auto;
      position: relative;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      padding-top: 0;
      padding-bottom: 0;
      background: #ffffff;
    }

    .app-screen-shell::before {
      display: none;
    }

    .app-shell {
      position: relative;
      flex: 1 1 auto;
      height: auto;
      min-height: 0;
      max-height: 100%;
      display: block;
      background: rgba(255, 255, 255, 0.82);
      border: 1px solid rgba(215, 225, 236, 0.88);
      border-radius: 0;
      border-top: 0;
      box-shadow: 0 18px 42px rgba(17, 34, 68, 0.08);
      backdrop-filter: blur(16px);
      overflow: hidden;
    }

    .sidebar {
      width: 100%;
      min-width: 0;
      height: 100%;
      min-height: 0;
      max-height: none;
      display: flex;
      flex-direction: column;
      border-right: 0;
      border-bottom: 0;
      background: transparent;
      overflow: hidden;
    }

    .sidebar-header {
      padding: calc(env(safe-area-inset-top, 0px) + 20px) 20px 10px;
      border-bottom: 0;
      background: transparent;
    }

    .brand {
      margin-bottom: 8px;
    }

    .brand h2 {
      font-size: 22px;
      letter-spacing: -0.03em;
    }

    .brand p {
      margin-top: 6px;
      font-size: 13px;
    }

    .sidebar-panels-track {
      flex: 1 1 auto;
      min-height: 0;
    }

    .sidebar-panel {
      flex: 0 0 100%;
      width: 100%;
      height: 100%;
      min-width: 100%;
      min-height: 0;
    }

    #settingsPanel {
      overflow-y: auto;
      overscroll-behavior: contain;
      -webkit-overflow-scrolling: touch;
      padding-bottom: calc(112px + env(safe-area-inset-bottom, 0px));
    }

    .sidebar-search {
      padding: 18px 18px 14px;
    }

    .sidebar-panel-header {
      padding: calc(env(safe-area-inset-top, 0px) + 18px) 18px 10px;
    }

    .sidebar-list {
      padding: 0 0 calc(112px + env(safe-area-inset-bottom, 0px));
      gap: 0;
    }

    .sidebar-item {
      padding: 14px 18px;
      border-radius: 0;
      background: transparent;
      border-color: rgba(226, 233, 242, 0.92);
      box-shadow: none;
    }

    .sidebar-item.active {
      background: transparent;
      border-color: rgba(226, 233, 242, 0.92);
    }

    .sidebar-item.is-pinned-chat,
    .sidebar-item.is-pinned-chat.active,
    .sidebar-item.is-pinned-chat:hover,
    .sidebar-item.is-pinned-chat:focus-visible {
      background: rgba(239, 244, 250, 0.9);
    }

    .sidebar-item.is-pinned-chat:active {
      background: rgba(229, 238, 249, 0.96);
    }

    .sidebar-item-title {
      font-size: 16px;
    }

    .sidebar-item-meta,
    .sidebar-item-secondary,
    .contacts-meta {
      font-size: 12px;
    }

    .chat-panel {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      z-index: 12;
      background:
        radial-gradient(circle at top, rgba(31, 122, 236, 0.09), transparent 36%),
        linear-gradient(180deg, #f7fbff 0%, #eef4fb 100%);
      visibility: hidden;
      transform: translate3d(100%, 0, 0);
      opacity: 0;
      pointer-events: none;
      transition: transform 0.28s ease, opacity 0.28s ease, visibility 0s linear 0.28s;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    .chat-panel.active {
      visibility: visible;
      transform: translate3d(0, 0, 0);
      opacity: 1;
      pointer-events: auto;
      transition-delay: 0s;
    }

    .chat-panel.no-transition,
    .bottom-tabs.no-transition,
    .bottom-tabs.no-transition.hidden {
      transition: none !important;
    }

    .chat-header {
      padding: calc(env(safe-area-inset-top, 0px) + 14px) 16px 12px;
      border-bottom: 1px solid rgba(215, 225, 236, 0.9);
      background: rgba(255, 255, 255, 0.88);
      backdrop-filter: blur(16px);
      position: sticky;
      top: 0;
      z-index: 3;
      flex-shrink: 0;
    }

    .chat-header-row {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto;
      align-items: center;
      gap: 12px;
    }

    .profile-panel-header {
      padding: calc(env(safe-area-inset-top, 0px) + 14px) 16px 12px;
    }

    .chat-back-button {
      width: 40px;
      height: 40px;
      border: 0;
      border-radius: 14px;
      background: rgba(237, 243, 251, 0.96);
      color: var(--text);
      font-size: 20px;
      line-height: 1;
      cursor: pointer;
      flex-shrink: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    .chat-profile-button {
      min-width: 0;
    }

    .chat-title {
      font-size: 17px;
      letter-spacing: -0.02em;
    }

    .chat-subtitle {
      margin-top: 3px;
      font-size: 12px;
      line-height: 1.4;
    }

    .status-badge {
      max-width: 96px;
      padding: 7px 10px;
      text-align: center;
      font-size: 11px;
    }

    .messages {
      min-height: 0;
      flex: 1 1 auto;
      padding: 16px 14px 8px;
      gap: 10px;
      overscroll-behavior: contain;
      -webkit-overflow-scrolling: touch;
    }

    .chat-contact-banner {
      display: none;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 10px 14px;
      margin: 10px 14px 0;
      border-radius: 18px;
      border: 1px solid rgba(215, 225, 236, 0.9);
      background: rgba(255, 255, 255, 0.92);
      box-shadow: 0 10px 24px rgba(17, 34, 68, 0.04);
      flex-shrink: 0;
    }

    .chat-contact-banner.active {
      display: flex;
    }

    .chat-contact-banner-copy {
      min-width: 0;
      font-size: 14px;
      font-weight: 600;
      color: var(--text);
    }

    .chat-contact-banner-actions {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-shrink: 0;
    }

    .chat-contact-banner-add {
      min-width: auto;
      height: 36px;
      padding: 0 14px;
      border-radius: 12px;
      font-size: 14px;
    }

    .chat-contact-banner-close {
      width: 36px;
      height: 36px;
      border: 0;
      border-radius: 12px;
      background: rgba(237, 243, 251, 0.96);
      color: var(--muted);
      font-size: 18px;
      line-height: 1;
      flex-shrink: 0;
      cursor: pointer;
    }

    .chat-pinned-banner {
      padding: 8px 12px;
      gap: 8px;
    }

    .chat-pinned-banner-icon-wrap {
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    .chat-pinned-banner-nav {
      width: 26px;
      height: 26px;
      border: 0;
      border-radius: 9px;
      background: rgba(31, 122, 236, 0.09);
      color: var(--accent-dark);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      cursor: pointer;
    }

    .chat-pinned-banner-nav:disabled {
      opacity: 0.38;
      cursor: default;
    }

    .chat-pinned-banner-copy {
      flex: 1;
      min-width: 0;
      border: 0;
      background: transparent;
      display: block;
      padding: 0;
      text-align: left;
      -webkit-tap-highlight-color: transparent;
    }

    .chat-pinned-banner-icon {
      width: 28px;
      height: 28px;
      border: 0;
      border-radius: 10px;
      background: rgba(31, 122, 236, 0.09);
      color: var(--accent-dark);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      flex-shrink: 0;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
    }

    .chat-pinned-banner-text {
      min-width: 0;
      display: grid;
      gap: 1px;
    }

    .chat-pinned-banner-label {
      font-size: 11px;
      line-height: 1.25;
      font-weight: 700;
      letter-spacing: 0.01em;
      color: var(--muted);
      text-transform: none;
    }

    .chat-pinned-banner-counter {
      font-size: 11px;
      line-height: 1.2;
      font-weight: 700;
      color: var(--accent-dark);
    }

    .chat-pinned-banner-preview {
      font-size: 13px;
      line-height: 1.35;
      font-weight: 600;
      color: var(--text);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .message-bubble {
      max-width: 88%;
      padding: 12px 13px;
      border-radius: 20px;
    }

    .composer {
      margin-top: auto;
      flex-shrink: 0;
      padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px));
      background: rgba(255, 255, 255, 0.88);
      backdrop-filter: blur(16px);
      position: sticky;
      bottom: 0;
      z-index: 3;
    }

    .composer .field-group label,
    .helper-text {
      display: none;
    }

    .composer-raw-input {
      border-radius: 16px;
    }

    .bottom-tabs {
      position: fixed;
      left: 50%;
      bottom: 0;
      width: min(100%, 520px);
      transform: translateX(-50%);
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
      padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
      border-radius: 24px 24px 0 0;
      border-bottom: 0;
      border-left: 0;
      border-right: 0;
      box-shadow: 0 -10px 28px rgba(17, 34, 68, 0.08);
    }

    .bottom-tabs.hidden {
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transform: translateX(-50%) translateY(24px);
      transition: opacity 0.22s ease, transform 0.22s ease, visibility 0s linear 0.22s;
    }

    .bottom-tab-button {
      height: 52px;
      border-radius: 18px;
    }

    @media (max-width: 560px) {
      .screen {
        padding: 0;
      }

      .login-screen {
        min-height: 100dvh;
      }

      .login-brand h1 {
        font-size: clamp(20px, 5.8vw, 22px);
        line-height: 1.15;
        letter-spacing: -0.03em;
        white-space: nowrap;
      }

      .auth-screen-shell {
        height: 100dvh;
        min-height: 100dvh;
        padding: 0;
        place-items: stretch;
        overflow: hidden;
      }

      .login-card,
      .onboarding-card {
        max-width: none;
        height: 100dvh;
        min-height: 100dvh;
        display: grid;
        grid-template-rows: minmax(0, 1fr) auto;
        overflow: hidden;
        border-radius: 0;
        background: rgba(255, 255, 255, 0.94);
        padding:
          calc(env(safe-area-inset-top, 0px) + 24px)
          24px
          calc(env(safe-area-inset-bottom, 0px) + 24px);
      }

      .auth-card-body {
        min-height: 0;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: stretch;
        padding-top: 28px;
      }

      .auth-panel-stack {
        width: 100%;
      }

      .auth-panel {
        position: absolute;
        inset: 0;
      }

      .login-card .status-line,
      .onboarding-card .status-line {
        margin-top: 0;
        padding-top: 18px;
      }

      html,
      body,
      #appScreen,
      .app-screen-shell {
        width: 100%;
      }

      .app-shell,
      .login-card,
      .onboarding-card {
        border: 0;
        border-radius: 0;
        box-shadow: none;
      }

      .app-screen-shell {
        width: 100%;
      }

      .status-badge {
        display: none;
      }
    }

    html.theme-dark .app-shell {
      background:
        linear-gradient(180deg, rgba(10, 17, 29, 0.97) 0%, rgba(8, 14, 24, 0.985) 100%);
      border-color: rgba(34, 50, 75, 0.92);
      box-shadow:
        0 22px 56px rgba(2, 8, 18, 0.46),
        inset 0 1px 0 rgba(255, 255, 255, 0.02);
    }

    html.theme-dark .sidebar-panel-header,
    html.theme-dark .chat-header,
    html.theme-dark .profile-panel-header,
    html.theme-dark .bottom-tabs {
      background: var(--header-glass);
      border-color: var(--line-soft);
      box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.02);
      backdrop-filter: blur(20px) saturate(1.08);
      -webkit-backdrop-filter: blur(20px) saturate(1.08);
    }

    html.theme-dark .sidebar,
    html.theme-dark .sidebar-panel,
    html.theme-dark .profile-panel,
    html.theme-dark .messages,
    html.theme-dark .settings-screen-scroll,
    html.theme-dark .profile-panel-content {
      background: transparent;
    }

    html.theme-dark .chat-panel {
      background:
        radial-gradient(circle at top, rgba(31, 122, 236, 0.08), transparent 36%),
        linear-gradient(180deg, #0f1722 0%, #0a111a 100%);
    }

    html.theme-dark[data-chat-wallpaper="default"] .chat-panel {
      background:
        radial-gradient(circle at top, rgba(31, 122, 236, 0.08), transparent 36%),
        linear-gradient(180deg, #0f1722 0%, #0a111a 100%);
    }

    html.theme-dark[data-chat-wallpaper="sky"] .chat-panel {
      background:
        radial-gradient(circle at top left, rgba(88, 157, 255, 0.18), transparent 38%),
        radial-gradient(circle at bottom right, rgba(65, 120, 224, 0.12), transparent 34%),
        linear-gradient(180deg, #0e1622 0%, #0b1320 100%);
    }

    html.theme-dark[data-chat-wallpaper="mint"] .chat-panel {
      background:
        radial-gradient(circle at top left, rgba(62, 175, 153, 0.16), transparent 38%),
        radial-gradient(circle at bottom right, rgba(65, 120, 224, 0.08), transparent 34%),
        linear-gradient(180deg, #0d171d 0%, #0a1219 100%);
    }

    html.theme-dark[data-chat-wallpaper="sunset"] .chat-panel {
      background:
        radial-gradient(circle at top, rgba(201, 114, 73, 0.18), transparent 36%),
        radial-gradient(circle at bottom right, rgba(148, 66, 112, 0.10), transparent 32%),
        linear-gradient(180deg, #16131a 0%, #0f1016 100%);
    }

    html.theme-dark[data-chat-wallpaper="graphite"] .chat-panel {
      background:
        radial-gradient(circle at top, rgba(102, 118, 147, 0.12), transparent 34%),
        linear-gradient(180deg, #151a22 0%, #0f141b 100%);
    }

    html.theme-dark .sidebar-panel,
    html.theme-dark .profile-panel {
      background:
        linear-gradient(180deg, rgba(15, 22, 33, 0.98) 0%, rgba(11, 17, 26, 0.99) 100%);
    }

    html.theme-dark .sidebar-search,
    html.theme-dark .sidebar-list,
    html.theme-dark .profile-panel-body,
    html.theme-dark .profile-panel-content,
    html.theme-dark #sharedMediaContent,
    html.theme-dark .chat-folders-modal-layout,
    html.theme-dark .chat-folders-modal-section {
      background: transparent;
    }

    html.theme-dark .sidebar-item,
    html.theme-dark .chat-search-history-row,
    html.theme-dark .chat-search-result,
    html.theme-dark .chat-folder-manage-item,
    html.theme-dark .chat-folder-chat-option,
    html.theme-dark .shared-file-item,
    html.theme-dark .shared-link-item,
    html.theme-dark .shared-voice-item,
    html.theme-dark .shared-media-item,
    html.theme-dark .settings-link-card,
    html.theme-dark .settings-detail-card,
    html.theme-dark .settings-profile,
    html.theme-dark .settings-edit-card,
    html.theme-dark .forward-preview-card,
    html.theme-dark .chat-contact-banner,
    html.theme-dark .chat-pinned-banner,
    html.theme-dark .chat-search-panel,
    html.theme-dark .composer,
    html.theme-dark .composer-sticker-picker,
    html.theme-dark .composer-mention-picker,
    html.theme-dark .profile-card,
    html.theme-dark .chat-compose-actions-card,
    html.theme-dark .message-actions-toolbar,
    html.theme-dark .message-reactions,
    html.theme-dark .message-reactions-picker,
    html.theme-dark .message-reactions-picker-floating,
    html.theme-dark .chat-info-public-card,
    html.theme-dark .chat-info-meta-card,
    html.theme-dark .chat-info-onboarding-card,
    html.theme-dark .chat-info-permissions-card,
    html.theme-dark .chat-info-invite-card {
      background: var(--surface-elevated);
      border-color: var(--line-soft);
      box-shadow: var(--shadow);
    }

    html.theme-dark .sidebar-item,
    html.theme-dark .chat-search-history-row,
    html.theme-dark .chat-search-result,
    html.theme-dark .chat-folder-chat-option {
      background: transparent;
      box-shadow: none;
    }


    html.theme-dark .sidebar-item.active {
      background: rgba(33, 48, 69, 0.92);
      border-color: rgba(83, 122, 177, 0.24);
    }

    html.theme-dark .sidebar-item:active,
    html.theme-dark .chat-search-result:active,
    html.theme-dark .chat-folder-chat-option:active,
    html.theme-dark .shared-file-item:active,
    html.theme-dark .shared-link-item:active,
    html.theme-dark .shared-voice-item:active {
      background: rgba(22, 38, 60, 0.94);
      border-color: rgba(72, 113, 169, 0.32);
      box-shadow: 0 12px 26px rgba(0, 0, 0, 0.22);
    }

    html.theme-dark .chat-list-swipe-shell > .sidebar-item {
      background: var(--list-row);
      border-bottom-color: rgba(42, 58, 84, 0.76);
      box-shadow: none;
    }

    html.theme-dark .chat-list-swipe-shell > .sidebar-item.active,
    html.theme-dark .chat-list-swipe-shell > .sidebar-item:hover,
    html.theme-dark .chat-list-swipe-shell > .sidebar-item:focus-visible {
      background: var(--list-row-hover);
    }

    html.theme-dark .chat-list-swipe-shell > .sidebar-item:active {
      background: var(--list-row-active);
    }

    html.theme-dark .chat-list-swipe-shell > .sidebar-item.is-pinned-chat,
    html.theme-dark .chat-list-swipe-shell > .sidebar-item.is-pinned-chat.active,
    html.theme-dark .chat-list-swipe-shell > .sidebar-item.is-pinned-chat:hover,
    html.theme-dark .chat-list-swipe-shell > .sidebar-item.is-pinned-chat:focus-visible {
      background: rgba(18, 31, 49, 0.98);
    }

    html.theme-dark .chat-list-swipe-shell > .sidebar-item.is-pinned-chat:active {
      background: rgba(22, 38, 60, 0.98);
    }

    html.theme-dark .chat-folder-chip {
      background: rgba(12, 19, 29, 0.94);
      border-color: rgba(41, 58, 83, 0.88);
      color: #b0bfd4;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
    }

    html.theme-dark .chat-folder-chip.active {
      background: color-mix(in srgb, var(--folder-soft, rgba(31, 122, 236, 0.18)) 82%, rgba(10, 17, 29, 0.92));
      border-color: var(--folder-accent, rgba(94, 168, 255, 0.64));
      color: var(--folder-accent, #dbe7f6);
      box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--folder-accent, rgba(94, 168, 255, 0.44)) 42%, transparent),
        0 12px 28px rgba(3, 10, 20, 0.28);
    }

    html.theme-dark .input,
    html.theme-dark .chat-search-input,
    html.theme-dark textarea,
    html.theme-dark select,
    html.theme-dark .phone-input,
    html.theme-dark .chat-list-search-input,
    html.theme-dark .composer-input,
    html.theme-dark .composer-input-shell,
    html.theme-dark .composer-recording-bar,
    html.theme-dark .composer-image-preview,
    html.theme-dark .composer-audio-preview,
    html.theme-dark .composer-video-preview,
    html.theme-dark .composer-file-preview {
      background: var(--input-bg);
      border-color: var(--line-strong);
      color: var(--text);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
    }

    html.theme-dark .composer {
      background: var(--composer-surface);
      border-top-color: var(--line-soft);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
      backdrop-filter: blur(18px) saturate(1.02);
      -webkit-backdrop-filter: blur(18px) saturate(1.02);
    }

    html.theme-dark .composer-raw-input {
      color: transparent !important;
      -webkit-text-fill-color: transparent !important;
      caret-color: transparent !important;
      background: transparent !important;
      text-shadow: none !important;
    }

    html.theme-dark .composer-input-editor {
      color: var(--text);
      caret-color: var(--text);
    }

    html.theme-dark .composer-editor-inline-code {
      background: rgba(255, 255, 255, 0.08);
    }

    html.theme-dark .composer-editor-spoiler {
      background: rgba(255, 255, 255, 0.1);
    }

    html.theme-dark .composer-attach-button,
    html.theme-dark .composer-formatting-toggle-button,
    html.theme-dark .composer-voice-button,
    html.theme-dark .composer-sticker-button,
    html.theme-dark .chat-search-button,
    html.theme-dark .chat-search-nav-button,
    html.theme-dark .chat-back-button,
    html.theme-dark .chat-search-clear,
    html.theme-dark .sidebar-header-action,
    html.theme-dark .chat-folder-manage-order,
    html.theme-dark .button-secondary,
    html.theme-dark .shared-file-sort-button,
    html.theme-dark .shared-file-filter-chip {
      background: rgba(23, 32, 46, 0.98);
      border-color: rgba(58, 75, 101, 0.82);
      color: #a7c3e8;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
    }

    html.theme-dark .composer-sticker-button.is-inline,
    html.theme-dark .chat-search-clear {
      background: transparent;
      border-color: transparent;
      box-shadow: none;
      color: #7f93b0;
    }

    html.theme-dark .composer-sticker-button.is-inline:hover,
    html.theme-dark .composer-sticker-button.is-inline:focus-visible,
    html.theme-dark .chat-search-clear:hover,
    html.theme-dark .chat-search-clear:focus-visible {
      background: transparent;
      color: #9ab7df;
    }

    html.theme-dark .composer-formatting-toggle-button.is-active {
      background: rgba(31, 122, 236, 0.18);
      border-color: rgba(88, 143, 221, 0.34);
      color: #d8e8ff;
      box-shadow: 0 10px 22px rgba(7, 23, 44, 0.24);
    }

    html.theme-dark .search-input-clear-button {
      background: rgba(23, 32, 46, 0.98);
      color: #a7c3e8;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
    }

    html.theme-dark .search-input-clear-button:hover,
    html.theme-dark .search-input-clear-button:focus-visible,
    html.theme-dark .search-input-clear-button:active {
      background: rgba(32, 45, 65, 0.98);
      color: #d7e6fb;
    }

    html.theme-dark .contact-search-input-wrap {
      background: rgba(12, 19, 29, 0.98);
      border-color: rgba(49, 66, 92, 0.86);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
    }

    html.theme-dark .contact-search-input-wrap .phone-input {
      background: transparent;
      border: 0;
      box-shadow: none;
      color: var(--text);
    }

    html.theme-dark .contact-search-flag {
      color: #7f8ea7;
    }

    html.theme-dark .message-row.other .message-bubble {
      background: var(--bubble-other);
      border-color: rgba(62, 78, 102, 0.54);
      box-shadow: 0 8px 20px rgba(2, 8, 18, 0.2);
    }

    html.theme-dark .message-row.self .message-bubble {
      background: var(--bubble-self);
      border-color: rgba(94, 150, 222, 0.22);
      box-shadow: 0 8px 20px rgba(2, 8, 18, 0.16);
    }

    html.theme-dark .message-audio,
    html.theme-dark .message-file,
    html.theme-dark .message-contact,
    html.theme-dark .message-checklist,
    html.theme-dark .message-location {
      background: rgba(14, 22, 34, 0.96);
      border-color: rgba(52, 70, 98, 0.9);
      box-shadow: 0 10px 24px rgba(2, 8, 18, 0.2);
    }

    html.theme-dark .message-row.self .message-audio,
    html.theme-dark .message-row.self .message-file,
    html.theme-dark .message-row.self .message-contact,
    html.theme-dark .message-row.self .message-checklist,
    html.theme-dark .message-row.self .message-location {
      background: rgba(16, 30, 46, 0.98);
      border-color: rgba(76, 118, 176, 0.42);
    }

    html.theme-dark .message-audio-button {
      background: linear-gradient(180deg, #3b8cf6 0%, #1f7aec 100%);
      box-shadow:
        0 10px 18px rgba(16, 78, 168, 0.26),
        inset 0 1px 0 rgba(255, 255, 255, 0.16);
    }

    html.theme-dark .message-audio-waveform {
      background:
        repeating-linear-gradient(
          90deg,
          rgba(106, 163, 238, 0.24) 0 4px,
          transparent 4px 8px
        );
    }

    html.theme-dark .message-audio-waveform::before {
      background:
        linear-gradient(90deg, rgba(255,255,255,0.14), transparent 24%, transparent 76%, rgba(255,255,255,0.06)),
        repeating-linear-gradient(
          90deg,
          rgba(111, 169, 245, 0.16) 0 4px,
          transparent 4px 8px
        );
    }

    html.theme-dark .message-audio-waveform-fill {
      background:
        repeating-linear-gradient(
          90deg,
          #69aaf2 0 4px,
          transparent 4px 8px
        );
    }

    html.theme-dark .message-audio-meta,
    html.theme-dark .message-file-meta,
    html.theme-dark .message-location-meta,
    html.theme-dark .message-checklist-item {
      color: #9fb0c7;
    }

    html.theme-dark .message-audio-speed {
      background: rgba(67, 125, 200, 0.18);
      color: #cfe3ff;
    }

    html.theme-dark .message-file-icon,
    html.theme-dark .message-location-icon {
      background: linear-gradient(180deg, rgba(25, 42, 66, 0.98) 0%, rgba(19, 31, 49, 0.98) 100%);
      border-color: rgba(63, 88, 122, 0.84);
      color: #8ec0ff;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
    }

    html.theme-dark .message-file-name,
    html.theme-dark .message-location-label,
    html.theme-dark .message-checklist-title {
      color: #e6edf7;
    }

    html.theme-dark .message-location-live-badge {
      background: rgba(32, 94, 169, 0.18);
      border-color: rgba(84, 143, 220, 0.3);
      color: #d6e7ff;
    }

    html.theme-dark .message-row.system .message-bubble {
      background: rgba(18, 30, 48, 0.84);
      border-color: rgba(53, 72, 103, 0.46);
      color: #c6d6eb;
    }

    html.theme-dark .message-row.system .message-text,
    html.theme-dark .message-header,
    html.theme-dark .message-footer,
    html.theme-dark .message-footer-badge,
    html.theme-dark .message-views,
    html.theme-dark .message-ticks {
      color: #9aafca;
    }

    html.theme-dark .message-footer-badge {
      background: rgba(9, 16, 28, 0.7);
      border-color: rgba(53, 72, 103, 0.5);
      box-shadow: 0 6px 14px rgba(2, 8, 18, 0.2);
    }

    html.theme-dark .message-row.self .message-footer-badge {
      background: rgba(8, 18, 32, 0.46);
      border-color: rgba(104, 163, 241, 0.26);
    }

    html.theme-dark .message-original-toggle {
      color: #85b7eb;
    }

    html.theme-dark .message-original-text {
      background: rgba(133, 183, 235, 0.12);
    }

    html.theme-dark .message-reply-preview {
      background: rgba(10, 18, 31, 0.88);
      border-left-color: rgba(97, 165, 244, 0.92);
    }

    html.theme-dark .message-row.other .message-reply-preview {
      background: rgba(12, 22, 36, 0.92);
    }

    html.theme-dark .message-link-preview {
      background: rgba(12, 20, 32, 0.96);
      border-color: rgba(44, 61, 88, 0.92);
      box-shadow: 0 14px 30px rgba(2, 8, 18, 0.28);
    }

    html.theme-dark .message-inline-code {
      background: rgba(8, 18, 30, 0.78);
      color: #d5e6fb;
    }

    html.theme-dark .message-spoiler {
      background: rgba(108, 129, 161, 0.18);
      text-shadow: 0 0 10px rgba(213, 230, 251, 0.38);
    }

    html.theme-dark .message-spoiler.is-revealed {
      background: rgba(108, 129, 161, 0.12);
      color: #d5e6fb;
    }

    html.theme-dark .message-image,
    html.theme-dark .message-video,
    html.theme-dark .message-album-item {
      background: rgba(12, 20, 32, 0.9);
      border-color: rgba(49, 66, 92, 0.88);
    }

    html.theme-dark .message-reaction-chip {
      background: rgba(18, 28, 43, 0.92);
      border-color: rgba(65, 84, 112, 0.84);
      color: #d7e8ff;
    }

    html.theme-dark .message-reaction-chip.is-active {
      background: rgba(39, 90, 152, 0.28);
      border-color: rgba(88, 143, 221, 0.44);
      color: #eaf3ff;
    }

    html.theme-dark .message-reaction-picker-button {
      background: rgba(18, 28, 43, 0.96);
      border-color: rgba(65, 84, 112, 0.84);
    }

    html.theme-dark .message-reactions {
      background: transparent;
      border: 0;
      box-shadow: none;
    }

    html.theme-dark .message-action-button,
    html.theme-dark .composer-remove-attachment {
      background: rgba(16, 26, 40, 0.96);
      border: 1px solid rgba(45, 63, 90, 0.92);
      color: #93a8c4;
    }

    html.theme-dark .message-mention {
      color: #b8d7ff;
      background: rgba(31, 122, 236, 0.22);
      box-shadow: inset 0 0 0 1px rgba(88, 152, 231, 0.18);
    }

    html.theme-dark .profile-card,
    html.theme-dark .chat-list-actions-card {
      background:
        linear-gradient(180deg, rgba(18, 26, 38, 0.98) 0%, rgba(14, 21, 31, 0.98) 100%);
      border-color: rgba(51, 67, 90, 0.78);
      box-shadow: 0 20px 44px rgba(2, 7, 14, 0.34);
    }

    html.theme-dark .chat-list-actions-preview {
      background: rgba(25, 35, 51, 0.92);
      border-color: rgba(51, 67, 90, 0.78);
    }

    html.theme-dark .chat-list-actions-preview-name {
      color: #e8edf8;
    }

    html.theme-dark .chat-list-actions-preview-text {
      color: #8da0bb;
    }

    html.theme-dark .settings-link-leading-icon {
      background: linear-gradient(180deg, rgba(24, 38, 58, 0.98), rgba(18, 30, 46, 0.98));
      color: #cfe4ff;
      box-shadow: inset 0 0 0 1px rgba(82, 117, 166, 0.22);
    }

    html.theme-dark .pinned-message-modal-bubble {
      border-color: rgba(49, 66, 92, 0.88);
      box-shadow: 0 14px 30px rgba(2, 8, 18, 0.22);
    }

    html.theme-dark .pinned-message-modal-author,
    html.theme-dark .pinned-message-modal-jump {
      color: #cfe4ff;
    }

    html.theme-dark .pinned-message-modal-jump {
      background: rgba(31, 122, 236, 0.18);
    }

    html.theme-dark .chat-list-actions-card.is-below-anchor::before {
      border-left-color: rgba(38, 54, 78, 0.96);
      border-top-color: rgba(38, 54, 78, 0.96);
    }

    html.theme-dark .chat-list-actions-card.is-above-anchor::before {
      border-right-color: rgba(38, 54, 78, 0.96);
      border-bottom-color: rgba(38, 54, 78, 0.96);
    }

    html.theme-dark .chat-list-quick-action,
    html.theme-dark .chat-list-folder-picker-option {
      background: linear-gradient(180deg, rgba(18, 31, 49, 0.98) 0%, rgba(14, 24, 38, 0.98) 100%);
      color: #e5f0ff;
      box-shadow: inset 0 0 0 1px rgba(52, 70, 98, 0.9);
    }

    html.theme-dark .chat-list-quick-action:not(.is-danger):active,
    html.theme-dark .chat-list-folder-picker-option:active {
      background: linear-gradient(180deg, rgba(25, 52, 86, 0.98) 0%, rgba(20, 43, 73, 0.98) 100%);
      box-shadow: inset 0 0 0 1px rgba(76, 128, 202, 0.48);
    }

    html.theme-dark .chat-list-quick-action.is-danger {
      background: linear-gradient(180deg, rgba(83, 28, 40, 0.98) 0%, rgba(63, 22, 31, 0.98) 100%);
      color: #ffd6de;
      box-shadow: inset 0 0 0 1px rgba(130, 55, 71, 0.9);
    }

    html.theme-dark .composer-sticker-tabs,
    html.theme-dark .chat-folders-modal-section,
    html.theme-dark .chat-folder-manage-form {
      background: rgba(10, 18, 30, 0.68);
      border-color: rgba(39, 56, 80, 0.88);
    }

    html.theme-dark .composer-sticker-option {
      background: linear-gradient(180deg, rgba(20, 34, 54, 0.98) 0%, rgba(14, 24, 38, 0.98) 100%);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    }

    html.theme-dark .bottom-tab-button {
      color: #8f9db1;
      text-shadow: none;
    }

    html.theme-dark .bottom-tab-button.active {
      color: #e6edf7;
      text-shadow: 0 1px 6px rgba(8, 12, 18, 0.28);
      -webkit-text-fill-color: #e6edf7;
    }

    html.theme-dark .sidebar-header-icon-action .ui-icon,
    html.theme-dark .chat-list-search-icon {
      color: #8ab8f0;
    }

    html.theme-dark .bottom-tabs-indicator {
      background: linear-gradient(180deg, rgba(28, 42, 61, 0.98) 0%, rgba(22, 34, 49, 0.98) 100%);
      box-shadow:
        inset 0 0 0 1px rgba(92, 122, 165, 0.18),
        0 10px 22px rgba(2, 8, 18, 0.2);
    }

    html.theme-dark .status-badge,
    html.theme-dark .sidebar-header-action-count {
      background: rgba(31, 122, 236, 0.22);
      color: #e8f2ff;
      box-shadow: inset 0 0 0 1px rgba(81, 136, 210, 0.2);
    }

    html.theme-dark .profile-modal {
      background: rgba(2, 7, 14, 0.5);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
    }

    html.theme-dark #chatInfoActions .button {
      box-shadow: 0 14px 30px rgba(2, 8, 18, 0.22);
    }

    html.theme-dark #chatInfoMembersCard,
    html.theme-dark .chat-info-member-card {
      background: rgba(14, 23, 36, 0.96);
      border-color: rgba(39, 56, 80, 0.9);
      box-shadow: 0 14px 30px rgba(2, 8, 18, 0.24);
    }

    html.theme-dark .chat-info-member-role.is-owner {
      background: rgba(197, 143, 24, 0.18);
      color: #ffd690;
    }

    html.theme-dark .chat-info-member-role.is-member {
      background: rgba(112, 133, 162, 0.14);
      color: #bac9dd;
    }

    html.theme-dark .chat-info-member-action {
      background: rgba(31, 122, 236, 0.14);
      color: #cfe4ff;
      box-shadow: inset 0 0 0 1px rgba(76, 128, 202, 0.2);
    }

    html.theme-dark .chat-info-member-action.is-danger {
      background: rgba(228, 54, 54, 0.16);
      color: #ffc6d1;
      box-shadow: inset 0 0 0 1px rgba(188, 78, 93, 0.22);
    }

    html.theme-dark .chat-member-restriction-toggle.is-active {
      background: rgba(133, 183, 235, 0.18);
      color: #d8ecff;
      box-shadow: inset 0 0 0 1px rgba(133, 183, 235, 0.2);
    }

    html.theme-dark .settings-screen-scroll,
    html.theme-dark .profile-panel-content,
    html.theme-dark .profile-panel-body {
      background:
        linear-gradient(180deg, rgba(15, 22, 33, 0.98) 0%, rgba(10, 17, 26, 0.99) 100%);
    }

    html.theme-dark .settings-detail-card,
    html.theme-dark .settings-profile,
    html.theme-dark .settings-edit-card,
    html.theme-dark .settings-link-card,
    html.theme-dark .settings-toggle,
    html.theme-dark .chat-info-permissions .settings-toggle {
      background: rgba(15, 24, 37, 0.96);
      border-color: rgba(49, 66, 92, 0.88);
      box-shadow: 0 14px 30px rgba(2, 8, 18, 0.2);
    }

    html.theme-dark .chat-wallpaper-option {
      background: rgba(14, 23, 36, 0.96);
      border-color: rgba(49, 66, 92, 0.88);
      color: #dfe9f7;
      box-shadow: 0 12px 26px rgba(2, 8, 18, 0.18);
    }

    html.theme-dark .chat-wallpaper-option.active {
      border-color: rgba(88, 143, 221, 0.48);
      box-shadow: 0 14px 28px rgba(2, 8, 18, 0.22);
    }

    html.theme-dark .chat-wallpaper-preview {
      border-color: rgba(63, 88, 122, 0.82);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
    }

    html.theme-dark .chat-bubble-theme-option {
      background: rgba(14, 23, 36, 0.96);
      border-color: rgba(49, 66, 92, 0.88);
      color: #dfe9f7;
      box-shadow: 0 12px 26px rgba(2, 8, 18, 0.18);
    }

    html.theme-dark .chat-bubble-theme-option.active {
      border-color: rgba(88, 143, 221, 0.48);
      box-shadow: 0 14px 28px rgba(2, 8, 18, 0.22);
    }

    html.theme-dark .chat-bubble-theme-preview {
      background: linear-gradient(180deg, rgba(16, 26, 40, 0.98) 0%, rgba(10, 17, 26, 0.99) 100%);
      border-color: rgba(63, 88, 122, 0.82);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
    }

    html.theme-dark .chat-bubble-theme-preview span:last-child {
      border-color: rgba(63, 88, 122, 0.82);
    }

    html.theme-dark .settings-detail-note,
    html.theme-dark .chat-info-permissions-head span {
      color: #94a5bc;
    }

    html.theme-dark .chat-folder-color-option {
      border-color: rgba(255, 255, 255, 0.18);
      box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.24),
        0 8px 18px rgba(2, 8, 18, 0.22);
    }

    html.theme-dark .chat-folder-color-option.active {
      border-color: #f1f6ff;
      box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.36),
        0 0 0 4px color-mix(in srgb, var(--folder-accent) 34%, transparent),
        0 10px 22px rgba(2, 8, 18, 0.24);
    }

    html.theme-dark .chat-scroll-date-indicator {
      background: linear-gradient(180deg, rgba(18, 29, 44, 0.74), rgba(13, 21, 33, 0.66));
      border-color: rgba(82, 104, 138, 0.22);
      box-shadow:
        0 8px 24px rgba(2, 8, 18, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
      color: #c5d5ea;
      backdrop-filter: blur(18px) saturate(1.02);
      -webkit-backdrop-filter: blur(18px) saturate(1.02);
    }

    html.theme-dark .chat-scroll-bottom-button {
      background: rgba(15, 24, 37, 0.94);
      border-color: rgba(63, 88, 122, 0.84);
      color: #cfe3ff;
      box-shadow: 0 14px 30px rgba(2, 8, 18, 0.24);
    }

    html.theme-dark .message-day-separator-badge {
      background: linear-gradient(180deg, rgba(18, 29, 44, 0.74), rgba(13, 21, 33, 0.66));
      border-color: rgba(82, 104, 138, 0.22);
      box-shadow:
        0 8px 24px rgba(2, 8, 18, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
      color: #c5d5ea;
      backdrop-filter: blur(18px) saturate(1.02);
      -webkit-backdrop-filter: blur(18px) saturate(1.02);
    }

    html.theme-dark .message-unread-separator-badge {
      background: rgba(27, 73, 129, 0.18);
      border-color: rgba(82, 134, 209, 0.28);
      color: #cfe3ff;
    }

    html.theme-dark .message-view-once-count {
      color: #a8b8cd;
    }

    html.theme-dark .message-view-once-badge,
    html.theme-dark .message-media-spoiler-toggle {
      background: rgba(7, 12, 20, 0.78);
      box-shadow: inset 0 0 0 1px rgba(71, 92, 122, 0.22);
    }

    html.theme-dark .message-album-item.is-media-spoiler::after {
      background: radial-gradient(circle at center, rgba(255, 255, 255, 0.05), rgba(4, 9, 17, 0.44));
    }

    html.theme-dark .group-admin-sheet-card {
      background: linear-gradient(180deg, rgba(18, 26, 38, 0.98) 0%, rgba(14, 21, 31, 0.98) 100%);
      border-color: rgba(51, 67, 90, 0.78);
      box-shadow: 0 20px 44px rgba(2, 7, 14, 0.34);
    }

    html.theme-dark .group-admin-sheet-card::before {
      background: rgba(82, 104, 138, 0.4);
    }

    html.theme-dark .group-admin-sheet-action {
      background: rgba(15, 24, 37, 0.96);
      border-color: rgba(49, 66, 92, 0.88);
      color: #dfe9f7;
      box-shadow: 0 14px 30px rgba(2, 8, 18, 0.2);
    }

    html.theme-dark .group-admin-sheet-action i {
      color: #a9d1ff;
    }

    @media (hover: none) {
      .button,
      .text-button,
      .onboarding-upload,
      .sidebar-item,
      .bottom-tab-button,
      .chat-back-button,
      .composer-attach-button,
      .composer-remove-attachment {
        -webkit-tap-highlight-color: transparent;
      }

      .onboarding-upload:hover,
      .button:hover,
      .button-primary:hover,
      .sidebar-item:hover,
      .bottom-tab-button:hover {
        transform: none;
      }

      .button-primary:hover {
        background: var(--accent);
      }

      .onboarding-upload:hover {
        background: #edf3fb;
      }

      .sidebar-item:hover {
        background: rgba(255, 255, 255, 0.72);
      }

      .bottom-tab-button:hover {
        background: transparent;
        color: var(--muted);
      }

      .bottom-tab-button.active:hover {
        color: var(--accent-dark);
      }
    }
.message-comments-trigger {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  width: calc(100% + 28px);
  margin: 6px -14px -12px;
  padding: 10px 14px 12px;
  border: 0;
  border-radius: 0;
  background: transparent;
  border-top: 1px solid rgba(148, 163, 184, 0.16);
  color: var(--accent-color, #2563eb);
  font-size: 15px;
  font-weight: 500;
  box-shadow: none;
  cursor: pointer;
  transition: color 0.16s ease, opacity 0.16s ease;
}

.message-comments-trigger::after {
  content: '\f054';
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 14px;
  opacity: 0.58;
  margin-left: auto;
}

.message-comments-trigger:hover,
.message-comments-trigger:focus-visible {
  color: #1d4ed8;
}

.message-comments-trigger:active {
  color: #1e40af;
}

.message-comments-unread {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 20px;
  padding: 0 8px;
  margin-left: auto;
  margin-right: 10px;
  border-radius: 999px;
  background: rgba(22, 100, 196, 0.14);
  color: #1664c4;
  font-size: 11px;
  font-weight: 700;
}

.message-image.is-media-spoiler,
.message-video.is-media-spoiler {
  position: relative;
  overflow: hidden;
}

.message-image.is-media-spoiler img,
.message-video.is-media-spoiler video,
.message-album-item.is-media-spoiler img,
.message-album-item.is-media-spoiler video {
  filter: blur(18px) saturate(0.75);
  transform: scale(1.05);
  transition: filter 0.2s ease, transform 0.2s ease;
}

.message-image.is-media-spoiler.is-revealed img,
.message-video.is-media-spoiler.is-revealed video,
.message-album-item.is-media-spoiler.is-revealed img,
.message-album-item.is-media-spoiler.is-revealed video {
  filter: none;
  transform: none;
}

.message-media-spoiler-toggle {
  position: absolute;
  inset: auto 12px 12px auto;
  border: 0;
  border-radius: 999px;
  padding: 8px 12px;
  background: rgba(15, 23, 42, 0.78);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}

.message-image.is-media-spoiler.is-revealed .message-media-spoiler-toggle,
.message-video.is-media-spoiler.is-revealed .message-media-spoiler-toggle,
.message-album-item.is-media-spoiler.is-revealed .message-media-spoiler-toggle {
  display: none;
}

.message-album-item.is-media-spoiler::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(255, 255, 255, 0.08), rgba(15, 23, 42, 0.34));
  z-index: 1;
}

.message-album-item.is-media-spoiler.is-revealed::after {
  display: none;
}

.group-admin-sheet-modal {
  align-items: flex-end;
  justify-content: center;
  padding: 20px 20px calc(20px + env(safe-area-inset-bottom, 0px));
}

.group-admin-sheet-card {
  width: min(100%, 520px);
  border-radius: 28px 28px 18px 18px;
  overflow: hidden;
}

.group-admin-sheet-card::before {
  content: '';
  display: block;
  width: 40px;
  height: 4px;
  margin: 12px auto 16px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.34);
}

.group-admin-sheet-summary {
  margin: -4px 0 18px;
  text-align: center;
  color: var(--muted);
}

.group-admin-sheet-actions {
  display: grid;
  gap: 10px;
}

.group-admin-sheet-action {
  width: 100%;
  border: 1px solid var(--panel-border);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.8);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  text-align: left;
}

.group-admin-sheet-action i {
  width: 18px;
  text-align: center;
  color: var(--accent);
}

.channel-comments-card,
.chat-history-card,
.media-composer-card {
  width: min(92vw, 540px);
  max-height: min(92vh, 860px);
  overflow-y: auto;
}

.channel-comments-root-preview {
  margin-bottom: 0;
}

.channel-comments-panel-body {
  width: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 18px 0;
  background: transparent;
}

.channel-comments-panel-body .channel-comments-list {
  flex: 1 1 auto;
  max-height: none;
  overflow-y: visible;
}

.channel-comments-panel-composer {
  display: none !important;
}

html.channel-comments-open #chatComposer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 140;
  width: min(100%, 720px);
  margin: 0 auto;
}

html.channel-comments-open .channel-comments-panel-body {
  padding-bottom: calc(116px + env(safe-area-inset-bottom, 0px));
}

.channel-comments-card {
  display: flex;
  flex-direction: column;
}

.channel-comments-root-bubble {
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(148, 163, 184, 0.14);
  color: var(--text-primary, #0f172a);
}

.channel-comments-root-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
  font-size: 12px;
  color: var(--text-secondary, #64748b);
}

.channel-comments-root-text {
  font-size: 14px;
  line-height: 1.45;
}

.channel-comments-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 52vh;
  overflow-y: auto;
  padding-bottom: 8px;
}

.channel-thread-root,
.channel-comments-list {
  width: 100%;
}

.channel-thread-message-row,
.scheduled-message-row {
  display: flex;
  width: 100%;
}

.channel-thread-message-row.self,
.scheduled-message-row.self {
  justify-content: flex-end;
}

.channel-thread-message-row.other,
.scheduled-message-row.other {
  justify-content: flex-start;
}

.channel-thread-bubble,
.scheduled-message-bubble {
  max-width: min(80%, 560px);
}

.scheduled-message-repeat-badge {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  min-height: 18px;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(22, 100, 196, 0.11);
  color: #1664c4;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 18px;
  white-space: nowrap;
}

#channelCommentsPanel,
#scheduledMessagesPanel {
  background:
    radial-gradient(circle at top, rgba(31, 122, 236, 0.09), transparent 36%),
    linear-gradient(180deg, #f7fbff 0%, #eef4fb 100%);
}

html[data-chat-wallpaper="default"] #channelCommentsPanel,
html[data-chat-wallpaper="default"] #scheduledMessagesPanel {
  background:
    radial-gradient(circle at top, rgba(31, 122, 236, 0.09), transparent 36%),
    linear-gradient(180deg, #f7fbff 0%, #eef4fb 100%);
}

html[data-chat-wallpaper="sky"] #channelCommentsPanel,
html[data-chat-wallpaper="sky"] #scheduledMessagesPanel {
  background:
    radial-gradient(circle at top left, rgba(110, 186, 255, 0.24), transparent 38%),
    radial-gradient(circle at bottom right, rgba(120, 167, 255, 0.14), transparent 34%),
    linear-gradient(180deg, #f2f8ff 0%, #e4efff 100%);
}

html[data-chat-wallpaper="mint"] #channelCommentsPanel,
html[data-chat-wallpaper="mint"] #scheduledMessagesPanel {
  background:
    radial-gradient(circle at top left, rgba(96, 213, 189, 0.16), transparent 38%),
    radial-gradient(circle at bottom right, rgba(89, 177, 255, 0.10), transparent 36%),
    linear-gradient(180deg, #f2fbf8 0%, #e6f5ef 100%);
}

html[data-chat-wallpaper="sunset"] #channelCommentsPanel,
html[data-chat-wallpaper="sunset"] #scheduledMessagesPanel {
  background:
    radial-gradient(circle at top, rgba(255, 171, 121, 0.18), transparent 38%),
    radial-gradient(circle at bottom right, rgba(255, 119, 163, 0.10), transparent 34%),
    linear-gradient(180deg, #fff7f1 0%, #fbeee9 100%);
}

html[data-chat-wallpaper="graphite"] #channelCommentsPanel,
html[data-chat-wallpaper="graphite"] #scheduledMessagesPanel {
  background:
    radial-gradient(circle at top, rgba(104, 122, 153, 0.11), transparent 36%),
    linear-gradient(180deg, #eef2f7 0%, #e4e9f0 100%);
}

.channel-thread-day-divider,
.scheduled-thread-day-divider,
.channel-thread-section-divider {
  display: flex;
  justify-content: center;
  margin-bottom: 8px;
}

.channel-thread-day-divider.is-inline,
.scheduled-thread-day-divider {
  margin: 2px 0 8px;
}

.channel-thread-day-divider span,
.scheduled-thread-day-divider span,
.channel-thread-section-divider span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.channel-thread-day-divider span,
.scheduled-thread-day-divider span {
  background: rgba(255, 255, 255, 0.48);
  border: 1px solid rgba(255, 255, 255, 0.58);
  color: rgba(15, 23, 42, 0.72);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
  backdrop-filter: blur(16px) saturate(1.15);
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
}

.channel-thread-section-divider span {
  background: rgba(148, 163, 184, 0.12);
  color: var(--text-secondary, #64748b);
}

.channel-thread-fallback {
  font-size: 14px;
  line-height: 1.45;
  color: var(--text-primary, #0f172a);
}

.channel-comment-item {
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(148, 163, 184, 0.12);
}

.channel-comment-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
  font-size: 12px;
  color: var(--text-secondary, #64748b);
}

.channel-comment-text {
  font-size: 14px;
  line-height: 1.45;
  color: var(--text-primary, #0f172a);
}

.channel-comment-meta {
  margin-top: 8px;
  font-size: 12px;
  color: var(--text-secondary, #64748b);
}

.media-composer-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: min(220px, 32vh);
  margin-bottom: 14px;
  border-radius: 18px;
  overflow: hidden;
  background: rgba(148, 163, 184, 0.12);
}

.media-composer-preview img,
.media-composer-preview video {
  display: block;
  width: 100%;
  max-height: min(42vh, 380px);
  object-fit: contain;
}

.media-composer-preview-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
  padding: 10px;
}

.media-composer-preview-cell {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  min-height: 128px;
  background: rgba(148, 163, 184, 0.16);
}

.media-composer-preview-cell img,
.media-composer-preview-cell video {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
}

.media-composer-preview-play,
.media-composer-album-type {
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.72);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}

.media-composer-album-list {
  display: grid;
  gap: 10px;
  margin: 0 0 14px;
}

.media-composer-album-item {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(238, 242, 249, 0.9);
}

.media-composer-album-thumb {
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(148, 163, 184, 0.14);
}

.media-composer-album-thumb img,
.media-composer-album-thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.media-composer-album-copy {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.media-composer-album-copy strong {
  font-size: 14px;
  line-height: 1.25;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.media-composer-album-copy span {
  font-size: 12px;
  color: var(--muted);
}

.media-composer-album-actions {
  display: grid;
  gap: 8px;
}

.media-composer-album-move {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 12px;
  background: rgba(225, 234, 244, 0.92);
  color: var(--accent-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.media-composer-album-move:disabled {
  opacity: 0.4;
}

.media-composer-options {
  margin-top: 12px;
}

.channel-comments-card .status-line:empty,
.media-composer-card .status-line:empty {
  display: none;
}

html.theme-dark .message-comments-trigger {
  color: #93c5fd;
}

html.theme-dark .message-comments-unread {
  background: rgba(133, 183, 235, 0.16);
  color: #85b7eb;
}

html.theme-dark .channel-comments-root-bubble,
html.theme-dark .channel-comment-item,
html.theme-dark .media-composer-preview {
  background: rgba(30, 41, 59, 0.9);
  color: #e5eefc;
}

html.theme-dark .media-composer-album-item {
  background: rgba(30, 37, 56, 0.92);
}

html.theme-dark .media-composer-album-copy strong {
  color: #e8edf8;
}

html.theme-dark .media-composer-album-copy span {
  color: #8da0bb;
}

html.theme-dark .media-composer-album-move {
  background: rgba(37, 43, 59, 0.96);
  color: #9ec9ff;
}

html.theme-dark .channel-comments-panel-composer {
  background: var(--panel-soft);
}

html.theme-dark #channelCommentsPanel,
html.theme-dark #scheduledMessagesPanel {
  background:
    radial-gradient(circle at top, rgba(49, 124, 255, 0.12), transparent 38%),
    linear-gradient(180deg, rgba(11, 18, 30, 0.98), rgba(9, 15, 25, 1));
}

html.theme-dark[data-chat-wallpaper="default"] #channelCommentsPanel,
html.theme-dark[data-chat-wallpaper="default"] #scheduledMessagesPanel {
  background:
    radial-gradient(circle at top, rgba(49, 124, 255, 0.12), transparent 38%),
    linear-gradient(180deg, rgba(11, 18, 30, 0.98), rgba(9, 15, 25, 1));
}

html.theme-dark[data-chat-wallpaper="sky"] #channelCommentsPanel,
html.theme-dark[data-chat-wallpaper="sky"] #scheduledMessagesPanel {
  background:
    radial-gradient(circle at top left, rgba(72, 143, 255, 0.16), transparent 40%),
    radial-gradient(circle at bottom right, rgba(72, 143, 255, 0.08), transparent 34%),
    linear-gradient(180deg, rgba(10, 19, 34, 0.98), rgba(8, 15, 28, 1));
}

html.theme-dark[data-chat-wallpaper="mint"] #channelCommentsPanel,
html.theme-dark[data-chat-wallpaper="mint"] #scheduledMessagesPanel {
  background:
    radial-gradient(circle at top left, rgba(40, 189, 154, 0.14), transparent 42%),
    radial-gradient(circle at bottom right, rgba(60, 120, 255, 0.08), transparent 36%),
    linear-gradient(180deg, rgba(9, 22, 24, 0.98), rgba(8, 18, 22, 1));
}

html.theme-dark[data-chat-wallpaper="sunset"] #channelCommentsPanel,
html.theme-dark[data-chat-wallpaper="sunset"] #scheduledMessagesPanel {
  background:
    radial-gradient(circle at top, rgba(255, 140, 87, 0.14), transparent 38%),
    radial-gradient(circle at bottom right, rgba(255, 93, 143, 0.08), transparent 34%),
    linear-gradient(180deg, rgba(28, 16, 18, 0.98), rgba(21, 12, 15, 1));
}

html.theme-dark[data-chat-wallpaper="graphite"] #channelCommentsPanel,
html.theme-dark[data-chat-wallpaper="graphite"] #scheduledMessagesPanel {
  background:
    radial-gradient(circle at top, rgba(125, 143, 177, 0.11), transparent 36%),
    linear-gradient(180deg, rgba(17, 24, 37, 0.98), rgba(12, 18, 28, 1));
}

.scheduled-messages-panel-body {
  padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
}

html.theme-dark .channel-thread-day-divider span,
html.theme-dark .scheduled-thread-day-divider span {
  background: rgba(15, 23, 42, 0.58);
  border-color: rgba(148, 163, 184, 0.18);
  color: rgba(226, 232, 240, 0.88);
  box-shadow: 0 12px 30px rgba(2, 6, 23, 0.26);
}

html.theme-dark .scheduled-message-repeat-badge {
  background: rgba(133, 183, 235, 0.16);
  color: #85b7eb;
}

html.theme-dark .channel-thread-section-divider span {
  background: rgba(51, 65, 85, 0.38);
  color: #94a3b8;
}

html.theme-dark .channel-comments-root-head,
html.theme-dark .channel-comment-head,
html.theme-dark .channel-comment-meta {
  color: #94a3b8;
}

html.theme-dark .channel-comments-root-text,
html.theme-dark .channel-comment-text,
html.theme-dark .channel-thread-fallback {
  color: #e5eefc;
}

/* Contacts screen redesign */
#contactsPanel {
  background: var(--contacts-page-bg);
  color: var(--contacts-text);
}

#contactsPanel .sidebar-panel-header,
#contactsPanel .sidebar-search,
#contactsPanel .sidebar-list {
  background: var(--contacts-surface);
}

#contactsPanel .sidebar-panel-header {
  padding: 14px 14px 10px;
  border-bottom: 0;
}

#contactsPanel .sidebar-panel-header-row {
  min-height: 34px;
  grid-template-columns: 34px minmax(0, 1fr) 34px;
  align-items: center;
  gap: 10px;
}

#contactsPanel .sidebar-panel-title {
  color: var(--contacts-text);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-align: center;
}

#contactsPanel .sidebar-header-actions {
  gap: 0;
}

#contactsPanel .sidebar-header-icon-action {
  width: 34px;
  min-width: 34px;
  height: 34px;
  border-radius: 11px;
  background: var(--contacts-control-bg);
  color: var(--accent-dark);
  box-shadow: none;
}

#contactsPanel .sidebar-header-icon-action .ui-icon,
#contactsPanel .sidebar-header-icon-action i {
  color: currentColor;
}

#contactsSortButton {
  position: relative;
}

#contactsSortButton.has-custom-sort {
  color: #1664c4;
}

#contactsSortButton .contacts-sort-trigger-icon {
  width: 18px;
  height: 18px;
  display: block;
}

#contactsPanel .sidebar-search {
  padding: 8px 14px 8px;
  border-bottom: 0;
}

#contactsPanel .field-group > label {
  display: none;
}

#contactsPanel .contact-search-input-wrap {
  height: 42px;
  padding: 0 14px 0 40px;
  border: 0;
  border-radius: 13px;
  background: var(--contacts-control-bg);
  box-shadow: none;
}

#contactsPanel .contact-search-input-wrap.has-flag {
  padding-left: 40px;
}

#contactsPanel .contact-search-input-wrap .phone-input {
  height: 42px;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--contacts-text);
  padding: 0 34px 0 0;
  font-size: 14px;
}

#contactsPanel .contact-search-input-wrap .phone-input::placeholder {
  color: var(--contacts-muted);
}

#contactsPanel .contact-search-flag {
  left: 14px;
  color: var(--contacts-muted);
  opacity: 1;
  transform: translateY(-50%);
}

#contactsPanel .contact-search-flag.is-emoji-flag {
  width: auto;
  height: auto;
  font-size: 17px;
  line-height: 1;
}

#contactsPanel .contacts-meta {
  margin-top: 8px;
  padding: 0 2px;
  font-size: 12px;
  color: var(--contacts-muted);
}

#contactsPanel .contacts-selection-toolbar {
  position: fixed;
  left: 50%;
  bottom: 0;
  z-index: 60;
  width: min(100%, 520px);
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px calc(32px + env(safe-area-inset-bottom, 0px));
  background: var(--contacts-surface);
  border-top: 0.5px solid #e4eaf5;
  box-shadow: none;
}

#contactsPanel .contacts-selection-toolbar[hidden] {
  display: none !important;
}

#contactsPanel .contacts-selection-toolbar-copy {
  min-width: 0;
  flex: 1 1 auto;
  color: var(--contacts-text);
}

#contactsPanel .contacts-selection-toolbar-copy strong {
  display: block;
  font-size: 13px;
  line-height: 1.2;
  font-weight: 500;
}

#contactsPanel .contacts-selection-toolbar-actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

#contactsPanel .contacts-selection-toolbar .button {
  height: 36px;
  min-height: 36px;
  padding: 0 18px;
  line-height: 36px;
  border-radius: 22px;
  font-size: 13px;
  font-weight: 500;
  box-shadow: none;
}

#contactsPanel .contacts-selection-toolbar .button-secondary {
  background: transparent;
  border: 1.5px solid #dde4f0;
  color: #0c1a3a;
}

#contactsPanel .contacts-selection-toolbar .button-danger {
  border: 0;
  background: #e24b4a;
  color: #ffffff !important;
}

#contactsPanel .contacts-selection-toolbar .button-danger:disabled {
  opacity: 0.4;
  pointer-events: none;
}

#contactsPanel .contacts-alpha-divider {
  padding: 8px 18px 2px;
  font-size: 11px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #c8d4e0;
  background: var(--contacts-surface);
}

#contactsPanel .sidebar-list {
  background: var(--contacts-surface);
  margin-top: 6px;
  padding-bottom: calc(116px + env(safe-area-inset-bottom, 0px));
}

#contactsPanel .list-empty {
  margin: 14px;
  border-radius: 14px;
  box-shadow: none;
  background: var(--contacts-control-bg);
  border: 1px dashed var(--contacts-divider);
  color: var(--contacts-muted);
}

#contactsPanel .contacts-list-item {
  padding: 10px 18px;
  border-bottom: 0.5px solid var(--contacts-divider);
  background: var(--contacts-surface);
  box-shadow: none;
  transform: none !important;
}

#contactsPanel .contacts-list-item.is-selected {
  background: #dbeafe;
  border-bottom-color: #c3d8f5;
}

#contactsPanel .contacts-list-item:last-child {
  border-bottom: 0;
}

#contactsPanel .contacts-list-item:hover,
#contactsPanel .contacts-list-item:active {
  background: var(--contacts-surface);
}

#contactsPanel .contacts-list-item.is-selected:hover,
#contactsPanel .contacts-list-item.is-selected:active {
  background: #dbeafe;
}

#contactsPanel .sidebar-item-rich {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

#contactsPanel .sidebar-item-rich.is-selection-mode {
  grid-template-columns: auto auto minmax(0, 1fr);
}

#contactsPanel .contacts-selection-check {
  width: 22px;
  height: 22px;
  min-width: 22px;
  border-radius: 50%;
  background: transparent;
  border: 1.5px solid #c8d4e8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: none;
  flex-shrink: 0;
  transition: background 0.16s ease, border-color 0.16s ease;
}

#contactsPanel .contacts-selection-check-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 11px;
  height: 11px;
  opacity: 0;
  transition: opacity 0.16s ease;
}

#contactsPanel .contacts-selection-check.is-selected {
  background: #1664c4;
  border-color: #1664c4;
}

#contactsPanel .contacts-selection-check.is-selected .contacts-selection-check-icon {
  opacity: 1;
}

#contactsPanel .contacts-list-item .sidebar-item-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

#contactsPanel .sidebar-avatar {
  width: 42px;
  height: 42px;
  background: #dbeafe;
  border: 0;
  box-shadow: none;
  color: var(--accent-dark);
  font-size: 15px;
  font-weight: 800;
  text-transform: uppercase;
}

#contactsPanel .contacts-list-item.is-selected .sidebar-avatar:not(.has-image) {
  background: #b5d4f4;
  color: #0c447c;
}

#contactsPanel .sidebar-avatar.has-image {
  background: var(--contacts-control-bg);
}

#contactsPanel .sidebar-item-title {
  color: var(--contacts-text);
  font-size: 15px;
  font-weight: 700;
}

#contactsPanel .sidebar-item-secondary {
  margin-top: 3px;
  color: var(--contacts-muted);
  font-size: 12px;
  line-height: 1.3;
}

#contactsPanel .contacts-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--contacts-muted);
  font-size: 12px;
  line-height: 1.3;
  white-space: nowrap;
}

#contactsPanel .contacts-status.is-online {
  color: var(--contacts-online);
  font-weight: 500;
}

#contactsPanel .contacts-status-dot {
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: currentColor;
  flex-shrink: 0;
}

#contactsPanel .contacts-profile-action {
  background: transparent;
  border: 1.5px solid var(--accent-dark);
  color: var(--accent-dark);
  border-radius: 18px;
  min-height: 28px;
  height: 28px;
  padding: 0 12px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  box-shadow: none;
  align-self: center;
  justify-self: end;
  margin-left: 0;
}

#contactsPanel .contacts-existing-badge {
  margin-top: 5px;
  font-size: 11px;
  line-height: 1.2;
  font-weight: 600;
  color: var(--accent-dark);
}

#contactsPanel .contacts-profile-action:hover,
#contactsPanel .contacts-profile-action:active {
  background: transparent;
  color: var(--accent-dark);
  border-color: var(--accent-dark);
}

.contact-actions-sheet-modal {
  background: var(--layer-sheet-overlay);
}

.contact-actions-sheet-modal .contact-actions-card {
  padding: 0 0 calc(12px + env(safe-area-inset-bottom, 0px));
}

.contact-actions-sheet-modal.active .contact-actions-card {
  transform: translateY(0);
}

.contact-actions-sheet-handle {
  margin: 12px auto;
}

#contactActionsModal .profile-card-header {
  display: none;
}

#contactActionsModal .contact-actions-profile-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px 12px;
}

#contactActionsModal .contact-actions-avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #dbeafe;
  color: #1664c4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 16px;
  font-weight: 800;
  text-transform: uppercase;
  overflow: hidden;
}

#contactActionsModal .contact-actions-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#contactActionsModal .contact-actions-profile-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}

#contactActionsModal .contact-actions-profile-name {
  margin: 0;
  font-size: 15px;
  line-height: 1.2;
  font-weight: 600;
  color: #0c1a3a;
}

#contactActionsModal .contact-actions-profile-subtitle {
  margin: 0;
  font-size: 12px;
  line-height: 1.25;
  color: #9ba8c0;
}

#contactActionsModal .contact-actions-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 0 14px 6px;
}

#contactActionsModal .contact-actions-grid-button {
  border: 0;
  border-radius: 14px;
  background: transparent;
  box-shadow: none;
  padding: 10px 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  color: #1664c4;
}

#contactActionsModal .contact-actions-grid-button[hidden] {
  display: none !important;
}

#contactActionsModal .contact-actions-grid-button:active {
  transform: scale(0.985);
}

#contactActionsModal .contact-actions-grid-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #eef2f9;
}

#contactActionsModal .contact-actions-grid-button.is-secret {
  color: #0f6e56;
}

#contactActionsModal .contact-actions-grid-button.is-secret .contact-actions-grid-icon {
  background: #f0faf6;
}

#contactActionsModal .contact-actions-grid-button span:last-child {
  font-size: 10px;
  line-height: 1.2;
  font-weight: 500;
}

#contactActionsModal .contact-actions-divider {
  height: 0.5px;
  margin: 6px 16px;
  background: #eef2f9;
  border-radius: 999px;
}

#contactActionsModal .contact-actions-list {
  display: flex;
  flex-direction: column;
  padding: 0 16px;
}

#contactActionsModal .contact-action-list-button {
  border: 0;
  background: transparent;
  box-shadow: none;
  padding: 12px 4px;
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  color: #0c1a3a;
  position: relative;
}

#contactActionsModal .contact-action-list-button + .contact-action-list-button::before {
  content: "";
  position: absolute;
  top: 0;
  left: 42px;
  right: 0;
  height: 0.5px;
  background: #eef2f9;
}

#contactActionsModal .contact-action-list-button[hidden] {
  display: none !important;
}

#contactActionsModal .contact-action-list-button:active {
  transform: scale(0.99);
}

#contactActionsModal .contact-action-list-icon {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: #eef2f9;
  color: #1664c4;
}

#contactActionsModal .contact-action-list-button span:last-child {
  font-size: 15px;
  line-height: 1.2;
  font-weight: 500;
}

#contactActionsModal .contact-action-list-button.is-danger {
  color: #e24b4a;
}

#contactActionsModal .contact-action-list-button.is-danger .contact-action-list-icon {
  background: #fef2f2;
  color: #e24b4a;
}

/* Bottom navigation redesign */
.bottom-tabs {
  bottom: 0;
  width: min(100%, 520px);
  gap: 0;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
  border: 0;
  border-top: 1px solid var(--contacts-divider);
  border-radius: 0;
  background: var(--contacts-surface);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.bottom-tabs-indicator {
  display: none;
}

.bottom-tab-button {
  height: 64px;
  border-radius: 0;
  gap: 6px;
  color: var(--contacts-muted);
  font-size: 11px;
  font-weight: 600;
  box-shadow: none;
}

.bottom-tab-button:hover,
.bottom-tab-button:active,
.bottom-tab-button.active:hover {
  transform: none;
  background: transparent;
}

.bottom-tab-icon {
  width: auto;
  height: auto;
  min-width: 0;
  padding: 0;
  border-radius: 11px;
  color: currentColor;
  transition: background 0.16s ease, color 0.16s ease, padding 0.16s ease;
}

.bottom-tab-icon .ui-icon-tab {
  width: 22px;
  height: 22px;
}

.bottom-tab-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  color: currentColor;
}

.bottom-tab-button.active {
  color: var(--accent-dark);
}

.bottom-tab-button.active .bottom-tab-icon {
  padding: 7px 16px;
  background: var(--accent-dark);
  color: var(--tab-active-icon);
}

html.theme-dark #contactsPanel .sidebar-header-icon-action {
  background: var(--contacts-control-bg);
  color: var(--accent);
}

html.theme-dark #contactsSortButton.has-custom-sort {
  color: #5dcaa5;
}

html.theme-dark #contactsPanel .contact-search-input-wrap {
  background: var(--contacts-control-bg);
  border: 0;
  box-shadow: none;
}

html.theme-dark #contactsPanel .contact-search-input-wrap .phone-input {
  color: var(--contacts-text);
}

html.theme-dark #contactsPanel .contact-search-flag,
html.theme-dark #contactsPanel .contacts-meta,
html.theme-dark #contactsPanel .sidebar-item-secondary,
html.theme-dark .bottom-tab-button {
  color: var(--contacts-muted);
}

html.theme-dark #contactsPanel .contacts-list-item,
html.theme-dark #contactsPanel .sidebar-panel-header,
html.theme-dark #contactsPanel .sidebar-search,
html.theme-dark #contactsPanel .sidebar-list,
html.theme-dark .bottom-tabs {
  background: var(--contacts-surface);
  border-color: var(--contacts-divider);
}

html.theme-dark #contactsPanel .contacts-profile-action {
  border-color: var(--accent);
  color: var(--accent);
}

html.theme-dark #contactsPanel .contacts-existing-badge {
  color: var(--accent);
}

html.theme-dark #contactsPanel .contacts-selection-toolbar {
  background: #181c27;
  border-top-color: #252b3b;
}

html.theme-dark #contactsPanel .contacts-selection-check {
  background: transparent;
  border-color: #2e3547;
}

html.theme-dark #contactsPanel .contacts-selection-check.is-selected {
  background: #1664c4;
  border-color: #1664c4;
}

html.theme-dark #contactsPanel .contacts-selection-toolbar .button-secondary {
  border-color: #2e3547;
  color: #e8edf8;
}

html.theme-dark #contactsPanel .contacts-selection-toolbar .button-danger {
  background: #e24b4a;
  color: #ffffff;
}

html.theme-dark #contactsPanel .contacts-alpha-divider {
  color: #2e3547;
  background: var(--contacts-surface);
}

html.theme-dark #contactsPanel .contacts-list-item.is-selected {
  background: #1a2540;
  border-bottom-color: #252b3b;
}

html.theme-dark #contactsPanel .contacts-list-item.is-selected:hover,
html.theme-dark #contactsPanel .contacts-list-item.is-selected:active {
  background: #1a2540;
}

html.theme-dark #contactsPanel .contacts-list-item.is-selected .sidebar-avatar:not(.has-image) {
  background: #1e3a5f;
  color: #85b7eb;
}

html.theme-dark .contact-actions-sheet-modal {
  background: var(--layer-sheet-overlay);
}

html.theme-dark .contact-actions-sheet-modal .contact-actions-card {
  background: var(--layer-sheet-bg);
}

html.theme-dark .contact-actions-sheet-handle {
  background: var(--layer-sheet-handle);
}

html.theme-dark #contactActionsModal .contact-actions-avatar {
  background: #1e3a5f;
  color: #85b7eb;
}

html.theme-dark #contactActionsModal .contact-actions-profile-name {
  color: #e8edf8;
}

html.theme-dark #contactActionsModal .contact-actions-profile-subtitle {
  color: #4a5568;
}

html.theme-dark #contactActionsModal .contact-actions-grid-button {
  color: #85b7eb;
}

html.theme-dark #contactActionsModal .contact-actions-grid-icon {
  background: #252b3b;
}

html.theme-dark #contactActionsModal #contactActionMessageButton .contact-actions-grid-icon {
  background: #1e3a5f;
}

html.theme-dark #contactActionsModal .contact-actions-grid-button.is-secret {
  color: #5dcaa5;
}

html.theme-dark #contactActionsModal .contact-actions-grid-button.is-secret .contact-actions-grid-icon {
  background: #0d2e22;
}

html.theme-dark #contactActionsModal .contact-actions-divider {
  background: #252b3b;
}

html.theme-dark #contactActionsModal .contact-action-list-button {
  color: #e8edf8;
}

html.theme-dark #contactActionsModal .contact-action-list-button + .contact-action-list-button::before {
  background: #252b3b;
}

html.theme-dark #contactActionsModal .contact-action-list-icon {
  background: #252b3b;
  color: #85b7eb;
}

html.theme-dark #contactActionsModal .contact-action-list-button.is-danger {
  color: #f09595;
}

html.theme-dark #contactActionsModal .contact-action-list-button.is-danger .contact-action-list-icon {
  background: #2d1515;
  color: #f09595;
}

html.theme-dark #removeContactModal {
  background: rgba(0, 0, 0, 0.55);
}

html.theme-dark #removeContactModal .remove-contact-card {
  background: #181c27;
}

html.theme-dark .remove-contact-sheet-handle {
  background: #2e3547;
}

html.theme-dark .remove-contact-icon-wrap {
  background: #2d1515;
  color: #f09595;
}

html.theme-dark .remove-contact-title {
  color: #e8edf8;
}

html.theme-dark .remove-contact-copy {
  color: #4a5568;
}

html.theme-dark .remove-contact-emphasis {
  color: #e8edf8;
}

html.theme-dark .remove-contact-avatar-stack-item {
  background: #1e3a5f;
  color: #85b7eb;
  border-color: #181c27;
}

html.theme-dark .remove-contact-avatar-stack-item.is-more {
  background: #252b3b;
  color: #4a5568;
}

html.theme-dark .remove-contact-actions .button-secondary {
  background: #252b3b;
  color: #e8edf8;
}

html.theme-dark .remove-contact-actions .button-danger {
  background: #e24b4a;
  color: #ffffff;
}

html.theme-dark .send-schedule-sheet-modal {
  background: var(--layer-sheet-overlay);
}

html.theme-dark .send-schedule-card {
  background: var(--layer-sheet-bg);
}

html.theme-dark .sheet-handle {
  background: var(--layer-sheet-handle);
}

html.theme-dark .send-schedule-title {
  color: #e8edf8;
}

html.theme-dark .scheduled-message-actions-modal {
  background: rgba(0, 0, 0, 0.55);
}

html.theme-dark .scheduled-message-actions-card {
  background: #181c27;
}

:root {
  --chats-page-bg: #f0f4fb;
  --chats-header-bg: #ffffff;
  --chats-search-bg: #eef2f9;
  --chats-pinned-bg: #e6edf8;
  --chats-pinned-divider: #d0daea;
  --chats-surface: #ffffff;
  --chats-divider: #eef2f9;
  --chats-text: #0c1a3a;
  --chats-muted: #9ba8c0;
  --chats-accent: #1664c4;
  --chats-draft: #e24b4a;
  --chats-link: #1664c4;
}

html.theme-dark {
  --chats-page-bg: #0f1117;
  --chats-header-bg: #181c27;
  --chats-search-bg: #252b3b;
  --chats-pinned-bg: #1a1f2e;
  --chats-pinned-divider: #252b3b;
  --chats-surface: #181c27;
  --chats-divider: #252b3b;
  --chats-text: #e8edf8;
  --chats-muted: #4a5568;
  --chats-accent: #85b7eb;
  --chats-draft: #f09595;
  --chats-link: #85b7eb;
}

#chatsPanel {
  background: var(--chats-page-bg);
}

#chatsPanel .sidebar-panel-header,
#chatsPanel .sidebar-search,
#chatsPanel .sidebar-list {
  background: var(--chats-header-bg);
}

#chatsPanel .sidebar-panel-header {
  padding: 18px 18px 12px;
  text-align: initial;
}

#chatsPanel .sidebar-panel-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

#chatsPanel .sidebar-panel-header-row > :first-child {
  display: none;
}

#chatsPanel .sidebar-panel-title {
  margin: 0;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--chats-text);
}

#chatsPanel .sidebar-header-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

#chatsPanel .sidebar-header-action {
  min-width: 34px;
  height: 34px;
  padding: 0 10px;
  border: 0;
  border-radius: 11px;
  background: var(--chats-search-bg);
  color: var(--chats-accent);
  font-size: 13px;
  font-weight: 600;
  box-shadow: none;
}

#chatsPanel .sidebar-header-icon-action {
  width: 34px;
  min-width: 34px;
  padding: 0;
}

#chatsPanel .sidebar-header-icon-action .ui-icon,
#chatsPanel .sidebar-header-action .ui-icon {
  width: 16px;
  height: 16px;
  color: currentColor;
}

#chatsPanel #archiveChatsButton .ui-icon-archive {
  width: 13px;
  height: 13px;
}

#chatsPanel .sidebar-header-action-count {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--chats-accent);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
}

#chatsPanel .sidebar-search {
  padding: 0 18px 0;
}

#chatsPanel .chat-list-search-wrap {
  min-height: 42px;
  height: 42px;
  border: 0;
  border-radius: 13px;
  background: var(--chats-search-bg);
  box-shadow: none;
}

#chatsPanel .chat-list-search-icon {
  left: 14px;
  width: 15px;
  height: 15px;
  color: var(--chats-muted);
}

#chatsPanel .chat-list-search-input {
  height: 42px;
  min-height: 42px;
  padding-left: 40px;
  padding-right: 42px;
  padding-top: 0;
  padding-bottom: 0;
  color: var(--chats-text);
  border: 0;
  background: transparent;
  box-shadow: none;
  font-size: 14px;
  line-height: 42px;
}

#chatsPanel .chat-list-search-input::placeholder {
  color: var(--chats-muted);
}

#chatsPanel .chat-folders-bar {
  gap: 10px;
  padding: 10px 18px;
  background: var(--chats-header-bg);
}

#chatsPanel .chat-folder-chip {
  padding: 9px 14px;
  border-radius: 20px;
  border: 1.5px solid #dde4f0;
  background: transparent;
  color: var(--chats-text);
  font-size: 13px;
  font-weight: 600;
  box-shadow: none;
}

#chatsPanel .chat-folder-chip.active {
  background: var(--chats-accent);
  border-color: var(--chats-accent);
  color: #fff;
}

#chatsPanel .sidebar-list {
  background: var(--chats-surface);
  padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px));
}

#chatsPanel .chat-list-swipe-shell > .sidebar-item {
  background: var(--chats-surface);
  border-bottom: 0.5px solid var(--chats-divider);
}

#chatsPanel .chat-list-swipe-shell > .sidebar-item.active,
#chatsPanel .chat-list-swipe-shell > .sidebar-item:hover {
  background: var(--chats-surface);
}

#chatsPanel .chat-list-swipe-shell > .sidebar-item:active {
  background: var(--chats-surface);
}

#chatsPanel .chat-list-swipe-shell > .sidebar-item.is-pinned-chat {
  background: var(--chats-pinned-bg);
  border-bottom-color: var(--chats-pinned-divider);
}

#chatsPanel .chat-list-swipe-shell > .sidebar-item.is-pinned-chat.active,
#chatsPanel .chat-list-swipe-shell > .sidebar-item.is-pinned-chat:hover,
#chatsPanel .chat-list-swipe-shell > .sidebar-item.is-pinned-chat:focus-visible,
#chatsPanel .chat-list-swipe-shell > .sidebar-item.is-pinned-chat:active {
  background: var(--chats-pinned-bg);
}

#chatsPanel .sidebar-item {
  padding: 11px 18px;
  box-shadow: none;
}

#chatsPanel .sidebar-item-rich {
  gap: 11px;
}

#chatsPanel .sidebar-avatar {
  width: 44px;
  height: 44px;
  background: #dbeafe;
  border: 0;
  box-shadow: none;
  color: var(--chats-accent);
  font-size: 16px;
  font-weight: 700;
}

#chatsPanel .sidebar-avatar:not(.has-image) {
  background: #eef2f9;
}

#chatsPanel .sidebar-avatar.has-image {
  background: var(--chats-surface);
}

#chatsPanel .sidebar-item-title {
  color: var(--chats-text);
  font-size: 14px;
  font-weight: 500;
}

#chatsPanel .sidebar-item-time {
  color: var(--chats-muted);
  font-size: 11px;
  font-weight: 500;
}

#chatsPanel .sidebar-item-secondary {
  margin-top: 3px;
  color: var(--chats-muted);
  font-size: 12px;
  line-height: 1.25;
}

#chatsPanel .sidebar-item-secondary.is-typing {
  color: var(--chats-accent);
  font-weight: 500;
}

#chatsPanel .sidebar-item-secondary.is-draft {
  color: inherit;
  font-weight: 400;
}

#chatsPanel .chat-preview-draft-label {
  color: var(--chats-draft);
  margin-right: 4px;
  font-weight: 500;
}

#chatsPanel .chat-preview-draft-text {
  color: var(--chats-muted);
}

#chatsPanel .chat-preview-link {
  color: var(--chats-link);
}

#chatsPanel .chat-preview-voice-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 11px;
  height: 11px;
  margin-right: 5px;
  color: var(--chats-muted);
  vertical-align: -1px;
}

#chatsPanel .sidebar-item-badge {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--chats-accent);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
}

#chatsPanel .sidebar-item-badge.is-dot {
  width: 10px;
  min-width: 10px;
  height: 10px;
  padding: 0;
}

#chatsPanel .sidebar-item-title.is-pinned::before {
  color: var(--chats-muted);
}

#chatsPanel .sidebar-item-title.is-muted::after {
  color: var(--chats-muted);
}

html.theme-dark #chatsPanel .chat-folder-chip {
  border-color: #252b3b;
  color: var(--chats-text);
}

html.theme-dark #chatsPanel .sidebar-header-action,
html.theme-dark #chatsPanel .chat-list-search-wrap {
  background: var(--chats-search-bg);
  color: var(--chats-accent);
}

html.theme-dark #chatsPanel .chat-list-search-icon,
html.theme-dark #chatsPanel .search-input-clear-button,
html.theme-dark #chatsPanel .sidebar-item-time,
html.theme-dark #chatsPanel .sidebar-item-secondary,
html.theme-dark #chatsPanel .chat-preview-voice-icon,
html.theme-dark #chatsPanel .sidebar-item-title.is-pinned::before,
html.theme-dark #chatsPanel .sidebar-item-title.is-muted::after {
  color: var(--chats-muted);
}

html.theme-dark #chatsPanel .sidebar-avatar {
  background: #dbeafe;
  color: #1664c4;
}

html.theme-dark #chatsPanel .sidebar-avatar:not(.has-image) {
  background: #252b3b;
  color: var(--chats-accent);
}

html.theme-dark .bottom-tab-button.active {
  color: var(--accent);
  -webkit-text-fill-color: var(--accent);
  text-shadow: none;
}

/* Contacts sort bottom sheet */
.contacts-sort-sheet-modal {
  background: var(--layer-sheet-overlay);
  z-index: 115;
}

.contacts-sort-sheet-modal .contacts-sort-card {
  padding: 12px 0 calc(16px + env(safe-area-inset-bottom, 0px));
}

.contacts-sort-sheet-modal.active .contacts-sort-card {
  transform: translateY(0);
}

.contacts-sort-sheet-handle {
  margin: 0 auto 18px;
}

.contacts-sort-title {
  margin: 0 0 16px;
  text-align: center;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #9ba8c0;
}

.contacts-sort-options {
  display: grid;
  gap: 0;
}

.contacts-sort-option {
  margin: 0 16px 10px;
  padding: 14px 16px;
  border: 0;
  border-radius: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: #f8fafd;
  color: #0c1a3a;
  text-align: left;
  box-shadow: none;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.16s ease, transform 0.16s ease;
}

.contacts-sort-option:last-child {
  margin-bottom: 0;
}

.contacts-sort-option-icon {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.contacts-sort-option-icon svg {
  width: 18px;
  height: 18px;
  display: block;
}

.contacts-sort-option-icon-alpha {
  background: #dbeafe;
  color: #1664c4;
}

.contacts-sort-option-icon-time {
  background: #f0faf6;
  color: #1d9e75;
}

.contacts-sort-option-copy {
  min-width: 0;
  flex: 1 1 auto;
  display: grid;
  gap: 3px;
}

.contacts-sort-option-title {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.2;
  color: #0c1a3a;
}

.contacts-sort-option-subtitle {
  font-size: 11px;
  line-height: 1.2;
  color: #9ba8c0;
}

.contacts-sort-option-check {
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: #eef2f9;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.contacts-sort-option-check svg {
  width: 10px;
  height: 10px;
  display: block;
  opacity: 0;
}

.contacts-sort-option.is-active {
  background: #eef2f9;
}

.contacts-sort-option.is-active .contacts-sort-option-subtitle {
  color: #1664c4;
}

.contacts-sort-option.is-active .contacts-sort-option-check {
  background: #1664c4;
}

.contacts-sort-option.is-active .contacts-sort-option-check svg {
  opacity: 1;
}

.contacts-sort-option:active {
  transform: scale(0.985);
}

html.theme-dark .contacts-sort-sheet-modal {
  background: var(--layer-sheet-overlay);
}

html.theme-dark .contacts-sort-sheet-modal .contacts-sort-card {
  background: var(--layer-sheet-bg);
}

html.theme-dark .contacts-sort-sheet-handle {
  background: var(--layer-sheet-handle);
}

html.theme-dark .contacts-sort-title {
  color: #4a5568;
}

html.theme-dark .contacts-sort-option {
  background: #1c2030;
  color: #e8edf8;
}

html.theme-dark .contacts-sort-option.is-active {
  background: #1e2538;
}

html.theme-dark .contacts-sort-option-title {
  color: #e8edf8;
}

html.theme-dark .contacts-sort-option-subtitle {
  color: #4a5568;
}

html.theme-dark .contacts-sort-option.is-active .contacts-sort-option-subtitle {
  color: #85b7eb;
}

html.theme-dark .contacts-sort-option-icon-alpha {
  background: #1e3a5f;
  color: #85b7eb;
}

html.theme-dark .contacts-sort-option-icon-time {
  background: #0d2e22;
  color: #5dcaa5;
}

html.theme-dark .contacts-sort-option-check {
  background: #252b3b;
}

html.theme-dark .contacts-sort-option.is-active .contacts-sort-option-check {
  background: #1664c4;
}

.bookmarks-group {
  display: grid;
  gap: 6px;
}

.bookmarks-group + .bookmarks-group {
  margin-top: 14px;
}

.bookmarks-group-title {
  padding: 0 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted-text, #9ba8c0);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

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

.message-reactions-modal-list {
  display: grid;
  gap: 14px;
}

.message-reactions-group {
  display: grid;
  gap: 10px;
}

.message-reactions-group-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-color, #0c1a3a);
}

.message-reactions-group-users {
  display: grid;
  gap: 8px;
}

.message-reactions-user-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  border: 0;
  border-radius: 14px;
  background: var(--surface-soft, #f8fafd);
  padding: 10px 12px;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.message-reactions-user-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #dbeafe;
  color: #1664c4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  overflow: hidden;
  flex-shrink: 0;
}

.message-reactions-user-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.message-reactions-user-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
  flex: 1;
}

.message-reactions-user-copy strong {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-color, #0c1a3a);
}

.message-reactions-user-copy span {
  font-size: 12px;
  color: var(--muted-text, #9ba8c0);
}

.message-reactions-user-emoji {
  font-size: 18px;
  line-height: 1;
  flex-shrink: 0;
}

html.theme-dark .message-reactions-user-item {
  background: #1c2030;
}

html.theme-dark .message-reactions-user-avatar {
  background: #1e3a5f;
  color: #85b7eb;
}

.message-reactions-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 14px;
}

.message-reactions-filter-chip {
  border: 0;
  border-radius: 999px;
  background: #eef2f9;
  color: #5b6f93;
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 600;
}

.message-reactions-filter-chip.is-active {
  background: #1664c4;
  color: #fff;
}

.channel-comments-unread-nav {
  position: sticky;
  bottom: 14px;
  margin: 18px 0 0 auto;
  width: max-content;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.94);
  border: 1px solid rgba(12,26,58,0.08);
  padding: 8px 10px;
}

.channel-comments-unread-nav-button {
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  background: #eef2f9;
  color: #1664c4;
}

.channel-comments-unread-counter {
  font-size: 12px;
  font-weight: 600;
  color: #5b6f93;
}

.message-selection-toolbar {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: calc(82px + env(safe-area-inset-bottom, 0px));
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-radius: 16px;
  background: rgba(255,255,255,0.96);
  border: 1px solid rgba(12,26,58,0.08);
  padding: 10px 12px;
}

.message-selection-toolbar[hidden] {
  display: none !important;
}

.message-selection-toolbar-copy strong {
  font-size: 14px;
  color: #0c1a3a;
}

.message-selection-toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.message-row.is-selected .message-bubble {
  outline: 2px solid rgba(22,100,196,0.22);
  outline-offset: 2px;
}

.chat-notification-actions {
  display: grid;
  gap: 10px;
}

.session-item .blocked-list-action.is-static {
  opacity: 0.7;
  cursor: default;
}

.shared-media-date-button.is-active {
  color: #1664c4;
}

html.theme-dark .message-reactions-filter-chip {
  background: #252b3b;
  color: #aeb8ca;
}

html.theme-dark .message-reactions-filter-chip.is-active {
  background: #85b7eb;
  color: #10141d;
}

html.theme-dark .channel-comments-unread-nav,
html.theme-dark .message-selection-toolbar {
  background: rgba(24,28,39,0.96);
  border-color: rgba(133,183,235,0.1);
}

html.theme-dark .message-selection-check {
  background: #252b3b;
}

html.theme-dark .message-selection-check.is-selected {
  background: #1664c4;
}

html.theme-dark .channel-comments-unread-nav-button {
  background: #252b3b;
  color: #85b7eb;
}

html.theme-dark .channel-comments-unread-counter,
html.theme-dark .message-selection-toolbar-copy strong {
  color: #e8edf8;
}

html.theme-dark .message-row.is-selected .message-bubble {
  outline-color: rgba(133,183,235,0.26);
}

html.theme-dark #chatFoldersModal,
html.theme-dark #chatFolderFormModal,
html.theme-dark #chatFolderChatsPickerModal {
  background: rgba(0, 0, 0, 0.5);
}

html.theme-dark .chat-folders-modal-card {
  background: #181c27;
}

html.theme-dark .chat-folders-modal-layout,
html.theme-dark .chat-folders-modal-section {
  background: #181c27 !important;
}

html.theme-dark .chat-folder-sheet-title {
  color: #e8edf8;
}

html.theme-dark .chat-folder-section-label {
  color: #4a5568;
}

html.theme-dark #chatFoldersModal .sheet-handle,
html.theme-dark #chatFolderFormModal .sheet-handle,
html.theme-dark #chatFolderChatsPickerModal .sheet-handle {
  background: #2e3547;
}

html.theme-dark .chat-folder-create-button,
html.theme-dark .chat-folder-open-picker-button,
html.theme-dark .chat-folder-sheet-button.is-secondary {
  background: #252b3b;
  color: #85b7eb;
}

html.theme-dark .chat-folders-manage-list,
html.theme-dark .chat-folder-chat-select-list {
  background: #181c27;
  border-color: #252b3b;
}

html.theme-dark .chat-folder-empty-state {
  border-color: #252b3b;
  background: #1c2030;
  color: #4a5568;
}

html.theme-dark #chatFoldersModal .chat-folder-manage-item,
html.theme-dark #chatFolderChatsPickerModal .chat-folder-chat-option,
html.theme-dark #chatFolderFormModal .chat-folder-preview-chip,
html.theme-dark #chatFolderFormModal .chat-folder-chats-preview,
html.theme-dark #chatFoldersModal .chat-folders-manage-list,
html.theme-dark #chatFolderChatsPickerModal .chat-folder-chat-select-list {
  background: #181c27 !important;
}

html.theme-dark #chatFoldersModal .sidebar-list.chat-folders-manage-list,
html.theme-dark #chatFoldersModal .sidebar-list.chat-folders-manage-list .chat-folder-manage-item {
  background: transparent !important;
}

html.theme-dark .chat-folder-manage-item {
  background: #181c27;
  border-bottom-color: #252b3b;
}

html.theme-dark .chat-folder-manage-copy strong,
html.theme-dark .chat-folder-chat-option-title,
html.theme-dark .chat-folder-preview-name {
  color: #e8edf8;
}

html.theme-dark .chat-folder-manage-copy span,
html.theme-dark .chat-folder-preview-remove,
html.theme-dark .chat-folder-chats-empty {
  color: #4a5568;
}

html.theme-dark .chat-folder-manage-order {
  border-color: #2e3547;
  color: #4a5568;
  background: transparent;
}

html.theme-dark .chat-folder-manage-order:not(:disabled) {
  color: #85b7eb;
}

html.theme-dark .chat-folder-field-group .input {
  background: #252b3b;
  border-color: #2e3547;
  color: #e8edf8;
}

html.theme-dark .chat-folder-field-group .input::placeholder {
  color: #4a5568;
}

html.theme-dark .chat-folder-color-option.active {
  box-shadow:
    0 0 0 2px #181c27,
    0 0 0 4px var(--folder-accent);
}

html.theme-dark .chat-folder-preview-chip {
  background: #252b3b;
  color: #e8edf8;
}

html.theme-dark .chat-folder-preview-avatar {
  background: #1e3a5f;
  color: #85b7eb;
}

html.theme-dark .chat-folder-sheet-divider {
  border-top-color: #252b3b;
}

html.theme-dark .chat-folder-sheet-button.is-danger-soft {
  background: #2d1515;
  color: #f09595;
}

html.theme-dark .chat-folder-chat-option {
  background: #181c27;
  border-bottom-color: #252b3b;
}

html.theme-dark .chat-folder-chat-option.is-selected {
  background: #1a2540;
  border-color: #252b3b;
}

html.theme-dark .chat-folder-chat-option-check {
  border-color: #2e3547;
}

html.theme-dark .chat-folder-chat-option-avatar {
  background: #1e3a5f;
  color: #85b7eb;
}

html.theme-dark .chat-folder-chat-option.is-selected .chat-folder-chat-option-avatar {
  background: #1e3a5f;
  color: #85b7eb;
}

/* Chat screen redesign: light-only visual overrides */
.chat-panel,
html.theme-dark .chat-panel {
  background: #f0f4fb !important;
}

.chat-panel .chat-header,
.chat-panel .composer,
.chat-panel .chat-pinned-banner,
html.theme-dark .chat-panel .chat-header,
html.theme-dark .chat-panel .composer,
html.theme-dark .chat-panel .chat-pinned-banner {
  background: #ffffff !important;
  border-color: #e4eaf5 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.chat-panel .chat-header,
html.theme-dark .chat-panel .chat-header {
  padding: 12px 14px;
}

.chat-panel .chat-header-row,
html.theme-dark .chat-panel .chat-header-row {
  min-height: 38px;
  gap: 10px;
}

.chat-panel .chat-back-button,
.chat-panel .chat-search-button,
html.theme-dark .chat-panel .chat-back-button,
html.theme-dark .chat-panel .chat-search-button {
  width: 34px;
  height: 34px;
  min-width: 34px;
  border: 0;
  border-radius: 11px;
  background: #eef2f9 !important;
  color: #1664c4 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  box-shadow: none;
}

.chat-panel .chat-back-button i,
.chat-panel .chat-search-button i,
html.theme-dark .chat-panel .chat-back-button i,
html.theme-dark .chat-panel .chat-search-button i {
  display: none;
}

.chat-panel .chat-profile-button,
html.theme-dark .chat-panel .chat-profile-button {
  gap: 10px;
  min-height: 38px;
  flex: 1 1 auto;
  min-width: 0;
}

.chat-panel .chat-profile-button > div:last-child,
html.theme-dark .chat-panel .chat-profile-button > div:last-child {
  min-height: 38px;
}

.chat-panel .chat-header-avatar,
html.theme-dark .chat-panel .chat-header-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 0;
  box-shadow: none;
  background: linear-gradient(180deg, #eaf1fd 0%, #dce8fb 100%);
  color: #1664c4;
}

.chat-panel .chat-title,
html.theme-dark .chat-panel .chat-title {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  color: #0c1a3a !important;
  letter-spacing: 0;
}

.chat-panel .chat-subtitle,
html.theme-dark .chat-panel .chat-subtitle,
.chat-panel .chat-subtitle.is-online,
.chat-panel .chat-subtitle.is-recent,
.chat-panel .chat-subtitle.is-offline,
html.theme-dark .chat-panel .chat-subtitle.is-online,
html.theme-dark .chat-panel .chat-subtitle.is-recent,
html.theme-dark .chat-panel .chat-subtitle.is-offline {
  margin-top: 2px;
  font-size: 11px;
  line-height: 1.2;
  font-weight: 400;
  color: #9ba8c0 !important;
}

.chat-panel .status-badge,
html.theme-dark .chat-panel .status-badge {
  display: none !important;
}

.chat-panel .chat-pinned-banner,
html.theme-dark .chat-panel .chat-pinned-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin: 0;
  padding: 9px 14px;
  margin-top: 0;
  margin-left: 0;
  margin-right: 0;
  border-top: 0;
  border-bottom: 0.5px solid #e4eaf5 !important;
  border-radius: 0 !important;
  box-sizing: border-box;
  position: relative;
  z-index: 3;
  box-shadow: 0 1px 0 #e4eaf5;
  opacity: 0;
  transform: translate3d(0, -8px, 0);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.22s cubic-bezier(.22, 1, .36, 1);
}

.chat-panel .chat-pinned-banner.active,
html.theme-dark .chat-panel .chat-pinned-banner.active {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  pointer-events: auto;
}

.chat-panel .chat-pinned-banner-copy,
html.theme-dark .chat-panel .chat-pinned-banner-copy {
  min-width: 0;
  flex: 1 1 auto;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent !important;
  text-align: left;
  border-radius: 0 !important;
}

.chat-panel .chat-pinned-banner-text,
html.theme-dark .chat-panel .chat-pinned-banner-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.chat-panel .chat-pinned-banner-meta,
html.theme-dark .chat-panel .chat-pinned-banner-meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.chat-panel .chat-pinned-banner-label,
html.theme-dark .chat-panel .chat-pinned-banner-label {
  font-size: 10px;
  font-weight: 400;
  color: #9ba8c0 !important;
  text-transform: none;
  letter-spacing: 0;
}

.chat-panel .chat-pinned-banner-counter,
html.theme-dark .chat-panel .chat-pinned-banner-counter {
  font-size: 10px;
  font-weight: 700;
  color: #1664c4 !important;
}

.chat-panel .chat-pinned-banner-preview,
html.theme-dark .chat-panel .chat-pinned-banner-preview {
  font-size: 12px;
  line-height: 1.3;
  font-weight: 600;
  color: #0c1a3a !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-panel .chat-pinned-banner-nav-group,
html.theme-dark .chat-panel .chat-pinned-banner-nav-group {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.chat-panel .chat-pinned-banner-nav,
html.theme-dark .chat-panel .chat-pinned-banner-nav {
  width: 24px;
  height: 24px;
  min-width: 24px;
  border: 0;
  border-radius: 7px;
  background: #eef2f9 !important;
  color: #1664c4 !important;
  padding: 0;
}

.chat-panel .chat-pinned-banner-icon,
html.theme-dark .chat-panel .chat-pinned-banner-icon {
  width: 24px;
  height: 24px;
  min-width: 24px;
  border: 0;
  border-radius: 7px;
  background: #eef2f9 !important;
  color: #1664c4 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  box-shadow: none;
}

.chat-panel .chat-pinned-banner-icon i,
html.theme-dark .chat-panel .chat-pinned-banner-icon i {
  font-size: 12px;
  line-height: 1;
}

.chat-panel .messages,
html.theme-dark .chat-panel .messages {
  padding: 14px;
  gap: 10px;
  background: #f0f4fb;
}

.chat-panel .message-row.is-grouped-with-previous,
html.theme-dark .chat-panel .message-row.is-grouped-with-previous {
  margin-top: -4px;
}

.chat-panel .message-bubble,
html.theme-dark .chat-panel .message-bubble {
  max-width: 80%;
  padding: 9px 12px;
  border-radius: 16px;
  box-shadow: none;
  border: 0;
}

.chat-panel .message-row.other .message-bubble,
html.theme-dark .chat-panel .message-row.other .message-bubble {
  background: #ffffff !important;
  border: 0.5px solid #e4eaf5 !important;
  border-radius: 16px 16px 16px 4px;
}

.chat-panel .message-row.self .message-bubble,
html.theme-dark .chat-panel .message-row.self .message-bubble {
  background: #dbeafe !important;
  border-radius: 16px 16px 4px 16px;
}

.chat-panel .message-text,
html.theme-dark .chat-panel .message-text {
  font-size: 13px;
  line-height: 1.45;
  color: #0c1a3a !important;
}

.chat-panel .message-bottom-row,
html.theme-dark .chat-panel .message-bottom-row {
  margin-top: 6px;
  gap: 8px;
}

.chat-panel .message-footer,
html.theme-dark .chat-panel .message-footer {
  gap: 4px;
  font-size: 10px;
  line-height: 1;
  color: #9ba8c0 !important;
}

.chat-panel .message-footer-badge,
html.theme-dark .chat-panel .message-footer-badge {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none;
}

.chat-panel .message-time,
html.theme-dark .chat-panel .message-time {
  font-size: 10px;
  color: #9ba8c0 !important;
}

.chat-panel .message-edited-label,
html.theme-dark .chat-panel .message-edited-label {
  font-size: 10px;
  font-style: italic;
  color: #9ba8c0 !important;
}

.chat-panel .message-ticks,
html.theme-dark .chat-panel .message-ticks {
  font-size: 11px;
  color: #9ba8c0 !important;
}

.chat-panel .message-ticks.seen,
html.theme-dark .chat-panel .message-ticks.seen {
  color: #1664c4 !important;
}

.chat-panel .message-original-toggle-wrap,
html.theme-dark .chat-panel .message-original-toggle-wrap {
  gap: 0;
  margin-top: 3px;
}

.chat-panel .message-original-toggle,
html.theme-dark .chat-panel .message-original-toggle {
  margin-top: 0;
  font-size: 11px;
  line-height: 1.2;
  font-weight: 400;
  color: #1664c4 !important;
}

.chat-panel .message-original-text,
html.theme-dark .chat-panel .message-original-text {
  margin-top: 6px;
  padding: 6px 0 0;
  border-top: 0.5px solid #e4eaf5;
  border-radius: 0;
  background: transparent !important;
  font-size: 11px;
  line-height: 1.45;
  color: #9ba8c0 !important;
}

.chat-panel .message-spoiler,
html.theme-dark .chat-panel .message-spoiler {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 6px;
  background: transparent !important;
  color: inherit !important;
  filter: blur(4px);
  user-select: none;
  text-shadow: none;
  opacity: 0.92;
  transition: filter 0.2s ease, color 0.2s ease;
}

.chat-panel .message-spoiler.is-revealed,
html.theme-dark .chat-panel .message-spoiler.is-revealed {
  color: inherit !important;
  filter: none;
  opacity: 1;
}

.chat-panel .message-inline-code,
.chat-panel .composer-editor-inline-code,
html.theme-dark .chat-panel .message-inline-code,
html.theme-dark .chat-panel .composer-editor-inline-code {
  display: inline-block;
  padding: 2px 7px;
  border: 0.5px solid #c8d4e8;
  border-radius: 6px;
  background: #ffffff !important;
  color: #1664c4 !important;
  font-family: monospace;
  font-size: 11px;
  line-height: 1.3;
}

.chat-panel .message-link,
html.theme-dark .chat-panel .message-link {
  color: #1664c4 !important;
  font-size: 13px;
  font-weight: 400;
  border-bottom: 0;
  text-decoration: none;
}

.chat-panel .composer,
html.theme-dark .chat-panel .composer {
  padding: 10px 12px 14px;
  border-top: 0.5px solid #e4eaf5 !important;
  position: relative;
  overflow: visible;
}

.chat-panel .composer-form,
html.theme-dark .chat-panel .composer-form {
  display: block;
}

.chat-panel .composer .field-group > label,
html.theme-dark .chat-panel .composer .field-group > label {
  display: none;
}

.chat-panel .composer-formatting-bar,
html.theme-dark .chat-panel .composer-formatting-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  z-index: 8;
  display: flex;
  align-items: center;
  gap: 3px;
  flex-wrap: nowrap;
  overflow-x: auto;
  opacity: 0;
  overflow-y: visible;
  padding: 6px 12px 0;
  margin: 0;
  background: #ffffff;
  border-top: 0.5px solid #e4eaf5;
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
  border-radius: 0;
  transform: translateY(8px);
  visibility: hidden;
  pointer-events: none;
  scrollbar-width: none;
  transition:
    opacity 0.18s ease,
    transform 0.22s ease,
    visibility 0s linear 0.22s;
}

.chat-panel .composer-formatting-bar::-webkit-scrollbar,
html.theme-dark .chat-panel .composer-formatting-bar::-webkit-scrollbar {
  display: none;
}

.chat-panel .composer-formatting-bar.is-visible,
html.theme-dark .chat-panel .composer-formatting-bar.is-visible {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  pointer-events: auto;
  transition:
    opacity 0.18s ease,
    transform 0.22s ease,
    visibility 0s linear 0s;
}

.chat-panel .composer-format-separator,
html.theme-dark .chat-panel .composer-format-separator {
  width: 1px;
  height: 16px;
  flex: 0 0 1px;
  margin: 0 4px;
  background: #e4eaf5;
}

.chat-panel .composer-format-button,
.chat-panel .composer-link-preview-toggle,
html.theme-dark .chat-panel .composer-format-button,
html.theme-dark .chat-panel .composer-link-preview-toggle {
  min-width: 30px;
  width: 30px;
  height: 30px;
  min-height: 30px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent !important;
  color: #9ba8c0 !important;
  box-shadow: none;
  flex: 0 0 auto;
}

.chat-panel .composer-format-button.is-active,
html.theme-dark .chat-panel .composer-format-button.is-active {
  background: #eef2f9 !important;
  color: #1664c4 !important;
}

.chat-panel .composer-link-preview-toggle,
html.theme-dark .chat-panel .composer-link-preview-toggle {
  width: auto;
  padding: 0 10px;
}

.chat-panel .composer-attachments > *,
html.theme-dark .chat-panel .composer-attachments > * {
  border-color: #e4eaf5 !important;
  background: #ffffff !important;
  box-shadow: none;
}

.chat-panel .composer-field-group,
html.theme-dark .chat-panel .composer-field-group {
  gap: 10px;
  min-height: 44px;
  align-items: center;
}

.chat-panel .composer-attach-button,
html.theme-dark .chat-panel .composer-attach-button {
  width: 34px;
  height: 34px;
  min-width: 34px;
  flex: 0 0 34px;
  align-self: center;
  border: 0;
  border-radius: 11px;
  background: #eef2f9 !important;
  color: #1664c4 !important;
  font-size: 0;
  box-shadow: none;
}

.chat-panel .composer-input-shell,
html.theme-dark .chat-panel .composer-input-shell {
  min-height: 44px;
  border: 0.5px solid #e4eaf5 !important;
  border-radius: 20px;
  background: #f0f4fb !important;
  overflow: hidden;
  box-shadow: none;
  position: relative;
  transition: width 0.2s ease, flex-basis 0.2s ease, margin 0.2s ease;
}

.chat-panel .composer-input-editor,
html.theme-dark .chat-panel .composer-input-editor {
  display: block;
  min-height: 44px;
  width: 100%;
  padding: 10px 96px 10px 14px;
  color: #0c1a3a !important;
  font-size: 13px;
  line-height: 24px;
  caret-color: #0c1a3a;
  box-sizing: border-box;
}

.chat-panel .composer-input-editor:empty::before,
html.theme-dark .chat-panel .composer-input-editor:empty::before {
  color: #9ba8c0 !important;
}

.chat-panel .composer-input-shell.is-multiline .composer-input-editor,
html.theme-dark .chat-panel .composer-input-shell.is-multiline .composer-input-editor {
  display: block;
  padding: 8px 96px 8px 14px;
  line-height: 1.45;
}

.chat-panel .composer-sticker-button.is-inline,
.chat-panel .composer-formatting-toggle-button.is-inline,
html.theme-dark .chat-panel .composer-sticker-button.is-inline,
html.theme-dark .chat-panel .composer-formatting-toggle-button.is-inline {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  min-width: 30px;
  border: 0;
  border-radius: 999px;
  background: transparent !important;
  color: #9ba8c0 !important;
  padding: 0;
  box-shadow: none;
  z-index: 5;
  pointer-events: auto;
}

.chat-panel .composer-formatting-toggle-button.is-inline,
html.theme-dark .chat-panel .composer-formatting-toggle-button.is-inline {
  right: 8px;
}

.chat-panel .composer-scheduled-button.is-inline,
html.theme-dark .chat-panel .composer-scheduled-button.is-inline {
  right: 42px;
}

.chat-panel .composer-scheduled-button.is-inline[hidden],
html.theme-dark .chat-panel .composer-scheduled-button.is-inline[hidden] {
  display: none !important;
}

.chat-panel .composer-formatting-toggle-button.is-inline.is-active svg path,
html.theme-dark .chat-panel .composer-formatting-toggle-button.is-inline.is-active svg path,
.chat-panel .composer-scheduled-button.is-inline.is-active svg path,
.chat-panel .composer-scheduled-button.is-inline.is-active svg circle,
html.theme-dark .chat-panel .composer-scheduled-button.is-inline.is-active svg path,
html.theme-dark .chat-panel .composer-scheduled-button.is-inline.is-active svg circle {
  stroke: #1664c4;
}

.chat-panel .composer-input-shell.has-send .composer-formatting-toggle-button.is-inline,
html.theme-dark .chat-panel .composer-input-shell.has-send .composer-formatting-toggle-button.is-inline {
  right: 46px;
}

.chat-panel .composer-input-shell.has-send .composer-scheduled-button.is-inline,
html.theme-dark .chat-panel .composer-input-shell.has-send .composer-scheduled-button.is-inline {
  right: 78px;
}

.chat-panel .composer-send-button,
html.theme-dark .chat-panel .composer-send-button {
  right: 5px;
  top: calc(50% - 17px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  max-width: 34px;
  min-width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #1664c4 !important;
  color: #ffffff !important;
  box-shadow: none;
  z-index: 6;
  padding: 0;
  border: 0;
  font-size: 0;
}

.chat-panel .composer-send-button svg,
html.theme-dark .chat-panel .composer-send-button svg {
  width: 18px;
  height: 18px;
  display: block;
}

.chat-panel .composer-input-shell.is-multiline .composer-send-button,
html.theme-dark .chat-panel .composer-input-shell.is-multiline .composer-send-button {
  top: auto;
  bottom: 5px;
}

.chat-panel .composer-input-shell.is-multiline .composer-formatting-toggle-button.is-inline,
.chat-panel .composer-input-shell.is-multiline .composer-scheduled-button.is-inline,
html.theme-dark .chat-panel .composer-input-shell.is-multiline .composer-formatting-toggle-button.is-inline,
html.theme-dark .chat-panel .composer-input-shell.is-multiline .composer-scheduled-button.is-inline {
  top: auto;
  bottom: 7px;
  transform: none;
}

.chat-panel .composer-voice-button,
html.theme-dark .chat-panel .composer-voice-button {
  width: 34px;
  height: 34px;
  min-width: 34px;
  flex: 0 0 34px;
  border: 0;
  border-radius: 50%;
  background: #1664c4 !important;
  color: #ffffff !important;
  box-shadow: none;
}

.chat-panel .composer-voice-button.is-hidden,
html.theme-dark .chat-panel .composer-voice-button.is-hidden {
  width: 0;
  height: 0;
  min-width: 0;
  flex: 0 0 0;
  margin-left: -10px;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
  padding: 0;
  border-width: 0;
  transform: scale(0.88);
  transition:
    width 0.2s ease,
    height 0.2s ease,
    min-width 0.2s ease,
    flex-basis 0.2s ease,
    margin 0.2s ease,
    opacity 0.16s ease,
    transform 0.2s ease;
}

.chat-panel #stickerPickerButton,
.chat-panel #channelCommentsStickerButton,
.chat-panel .composer-sticker-picker,
html.theme-dark .chat-panel #stickerPickerButton,
html.theme-dark .chat-panel #channelCommentsStickerButton,
html.theme-dark .chat-panel .composer-sticker-picker {
  display: none !important;
}

.chat-panel .chat-scroll-bottom-button,
html.theme-dark .chat-panel .chat-scroll-bottom-button {
  border-color: #e4eaf5;
  background: #ffffff;
  color: #1664c4;
  box-shadow: 0 8px 24px rgba(12, 26, 58, 0.08);
}

/* Auth refresh */
#loginScreen {
  background: #ffffff;
}

#loginScreen.login-screen {
  min-height: 100dvh;
  padding: 0;
}

#loginScreen .auth-screen-shell {
  width: 100%;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px 20px;
}

#loginScreen .login-card {
  width: min(100%, 360px);
  min-height: min(720px, calc(100dvh - 56px));
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  display: flex;
  flex-direction: column;
}

#loginScreen .auth-card-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

#loginScreen .login-logo {
  margin: 0 0 20px;
}

#loginScreen .login-logo-mark {
  width: 80px;
  height: 80px;
  border-radius: 0;
  filter: none;
}

#loginScreen .login-logo-mark svg {
  width: 80px;
  height: 80px;
}

#loginScreen .login-brand {
  margin-bottom: 20px;
}

#loginScreen .login-brand h1 {
  margin: 0 0 6px;
  color: #0c1a3a;
  font-size: 20px;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.3px;
  text-align: center;
  white-space: normal;
}

#loginScreen .login-brand p {
  margin: 0;
  color: #9ba8c0;
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
}

#loginScreen .login-step {
  width: 100%;
  gap: 8px;
  margin: 0 0 6px;
  color: #0c1a3a;
  font-size: 12px;
  font-weight: 500;
}

#loginScreen .step-indicator {
  width: 24px;
  height: 24px;
  background: #eef2f9;
  color: #1664c4;
  font-size: 11px;
  font-weight: 700;
  box-shadow: none;
}

#loginScreen .login-progress {
  width: 100%;
  height: 3px;
  margin: 0 0 14px;
  background: #eef2f9;
  border-radius: 2px;
  box-shadow: none;
}

#loginScreen .login-progress-bar {
  background: #1664c4;
  border-radius: 2px;
  box-shadow: none;
}

#loginScreen .auth-panel-stack {
  width: 100%;
}

#loginScreen .login-form,
#loginScreen .code-form {
  gap: 0;
}

#loginScreen .field-group {
  margin: 0;
}

#loginScreen .field-group label {
  width: 100%;
  margin: 0 0 6px;
  color: #0c1a3a;
  font-size: 11px;
  font-weight: 600;
}

#loginScreen .phone-field {
  gap: 6px;
}

#loginScreen .phone-input-wrap {
  display: block;
  width: 100%;
  height: auto;
  padding: 0;
  overflow: hidden;
  border: 1.5px solid #e4eaf5;
  border-radius: 14px;
  background: #ffffff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

#loginScreen .phone-input-wrap.is-filled,
#loginScreen .phone-input-wrap:focus-within {
  border-color: #1664c4;
  box-shadow: none;
}

#loginScreen .phone-prefix {
  min-width: 0;
  width: 100%;
  padding: 11px 14px;
  border: 0;
  border-bottom: 0.5px solid #e4eaf5;
  display: flex;
  align-items: center;
  gap: 8px;
}

#loginScreen .phone-flag {
  width: 14px;
  height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #9ba8c0;
  font-size: 14px;
  line-height: 1;
}

#loginScreen .phone-flag.is-emoji-flag {
  width: auto;
  height: auto;
  color: inherit;
}

#loginScreen .phone-flag svg {
  width: 14px;
  height: 14px;
  display: block;
}

#loginScreen .phone-code {
  color: #9ba8c0;
  font-size: 13px;
  font-weight: 600;
}

#loginScreen .phone-input-wrap.is-filled .phone-code,
#loginScreen .phone-input-wrap.is-valid .phone-code {
  color: #1664c4;
}

#loginScreen .phone-input {
  width: 100%;
  min-height: 46px;
  padding: 11px 14px;
  background: transparent;
  color: #0c1a3a;
  font-size: 14px;
  line-height: 1.2;
  height: auto;
}

#loginScreen .phone-input::placeholder {
  color: #c8d4e0;
}

#loginScreen .phone-meta {
  width: 100%;
  min-height: 0;
  margin: 0 0 16px;
  color: #9ba8c0;
  font-size: 11px;
  line-height: 1.45;
}

#loginScreen .button,
#loginScreen .text-button {
  width: 100%;
  box-sizing: border-box;
}

#loginScreen .button {
  height: auto;
  min-height: 0;
  padding: 13px;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 600;
  transform: none;
}

#loginScreen .button:hover,
#loginScreen .button:active:not(:disabled) {
  transform: none;
}

#loginScreen .button-primary {
  background: #1664c4;
  color: #ffffff;
}

#loginScreen .button-primary:disabled {
  background: #b5d4f4;
  color: #ffffff;
  opacity: 1;
}

#loginScreen .button-secondary {
  background: #f0f4fb;
  color: #0c1a3a;
}

#loginScreen .code-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-bottom: 12px;
}

#loginScreen .otp-grid {
  display: flex;
  gap: 6px;
  width: 100%;
  margin-bottom: 6px;
}

#loginScreen .otp-input {
  flex: 1 1 0;
  height: 64px;
  padding: 0;
  border-radius: 12px;
  border: 1.5px solid #e4eaf5;
  background: #f0f4fb;
  color: #0c1a3a;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0;
  box-shadow: none;
}

#loginScreen .otp-input.filled {
  background: #eef5ff;
  border-color: #1664c4;
  color: #1664c4;
  box-shadow: none;
}

#loginScreen .otp-input.invalid {
  background: #fff2f2;
  border-color: #e24b4a;
  color: #e24b4a;
  box-shadow: none;
}

#loginScreen .code-hint {
  margin: 0 0 16px;
  color: #9ba8c0;
  font-size: 11px;
  line-height: 1.45;
  text-align: center;
}

#loginScreen .text-button {
  margin-top: 0;
  padding: 0;
  background: transparent;
  border: 0;
  color: #1664c4;
  font-size: 12px;
  font-weight: 500;
  text-align: center;
}

#loginScreen .text-button:disabled {
  color: #9ba8c0;
  opacity: 1;
}

#loginScreen .status-line {
  width: 100%;
  min-height: 18px;
  margin-top: auto;
  padding-top: 12px;
  color: #9ba8c0;
  font-size: 12px;
  line-height: 1.4;
  text-align: center;
}

#loginScreen .status-line.error {
  color: #e24b4a;
}

#loginScreen .status-line.success {
  color: #1D9E75;
}

html.theme-dark #loginScreen,
html.theme-dark #loginScreen .auth-screen-shell,
html.theme-dark #loginScreen .login-card {
  background: #ffffff;
}

html.theme-dark #loginScreen .login-brand h1,
html.theme-dark #loginScreen .login-step,
html.theme-dark #loginScreen .field-group label,
html.theme-dark #loginScreen .phone-input,
html.theme-dark #loginScreen .button-secondary {
  color: #0c1a3a;
}

html.theme-dark #loginScreen .login-brand p,
html.theme-dark #loginScreen .phone-meta,
html.theme-dark #loginScreen .code-hint,
html.theme-dark #loginScreen .status-line,
html.theme-dark #loginScreen .text-button:disabled,
html.theme-dark #loginScreen .phone-flag,
html.theme-dark #loginScreen .phone-code {
  color: #9ba8c0;
}

html.theme-dark #loginScreen .phone-input-wrap,
html.theme-dark #loginScreen .otp-input {
  background: #ffffff;
  border-color: #e4eaf5;
}

html.theme-dark #loginScreen .otp-input {
  background: #f0f4fb;
}

html.theme-dark #loginScreen .otp-input.filled {
  background: #eef5ff;
  border-color: #1664c4;
  color: #1664c4;
}

html.theme-dark #loginScreen .button-primary {
  background: #1664c4;
  color: #ffffff;
}

html.theme-dark #loginScreen .button-primary:disabled {
  background: #b5d4f4;
  color: #ffffff;
}

@media (max-width: 560px) {
  #loginScreen .auth-screen-shell {
    align-items: stretch;
    justify-content: flex-start;
  }

  #loginScreen .login-card {
    width: 100%;
    min-height: 100dvh;
  }

  #loginScreen .auth-card-body {
    padding-top: max(10px, env(safe-area-inset-top, 0px));
  }
}