@media (min-width: 600px) {
      html, body { background: #F2F4F7; }
      body {
        display: grid;
        place-items: center;
        padding: 24px;
        min-height: 100dvh;
      }
      .app {
        position: relative;
        inset: auto;
        width: 100%;
        max-width: 430px;
        height: min(calc(100dvh - 48px), 932px);
        max-height: none;
        min-height: 0;
        border-radius: 34px;
        box-shadow: 0 18px 60px rgba(0,0,0,.12);
      }
      /* Do not use height:auto on .main — it breaks the flex chain inside the
         fixed-height .app card when the browser zooms and clips the composer. */
      .pane-chat .main,
      .pane-main {
        flex: 1 1 0%;
        min-height: 0;
        max-height: 100%;
        overflow: hidden;
      }
    }
    html.is-desktop-board, html.is-desktop-board body {
      background: #eef1f4;
    }
    html.is-desktop-board {
      --desktop-pane-gap: 14px;
      --desktop-rail-width: 72px;
      --desktop-rail-gap: 16px;
    }
    html.is-desktop-board body {
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: flex-start;
      gap: var(--desktop-rail-gap);
      padding: 16px 20px;
      min-height: 100dvh;
      box-sizing: border-box;
    }
    html.is-desktop-board .app {
      position: relative;
      inset: auto;
      flex: 0 1 auto;
      width: min(calc(100vw - 40px - var(--desktop-rail-width) - var(--desktop-rail-gap)), 920px);
      max-width: none;
      height: min(calc(100dvh - 32px), 932px);
      margin: 0;
      overflow: hidden;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
    }
    html.is-desktop-board .topbar {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      z-index: 40;
      background: transparent;
    }
    html.is-desktop-board .main-bottom-shell {
      display: none !important;
    }
    html.is-desktop-board .workspace {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      column-gap: var(--desktop-pane-gap);
      flex: 1 1 0%;
      min-height: 0;
    }
    html.is-desktop-board .pane-chat .main,
    html.is-desktop-board .pane-main {
      height: 100%;
      min-height: 0;
    }
    html.is-desktop-board .pane {
      display: flex;
      flex-direction: column;
      min-width: 0;
      min-height: 0;
      overflow: hidden;
      border-left: 0;
      border-radius: 28px;
      background: #fff;
      box-shadow: 0 14px 40px rgba(0,0,0,.08);
    }
    html.is-desktop-board .pane-chat { border-left: 0; }
    html.is-desktop-board .pane-label {
      display: flex;
      flex-shrink: 0;
      align-items: center;
      justify-content: center;
      box-sizing: border-box;
      height: var(--topbar-height);
      margin: 0;
      padding: 0 12px;
      border-bottom: 1px solid #eeeeec;
      color: #202321;
      background: transparent;
      font-size: 16px;
      font-weight: 650;
      letter-spacing: -.03em;
      position: relative;
    }
    html.is-desktop-board .pane-label-text {
      pointer-events: none;
    }
    html.is-desktop-board .pane.is-desktop-leftmost-pane > .pane-label {
      padding-left: calc(12px + 37px + 10px);
    }
    html.is-desktop-board .pane.is-desktop-rightmost-pane > .pane-label {
      padding-right: 12px;
    }
    html.is-desktop-board #profileButton {
      display: none !important;
    }
    #desktopRailMeButton {
      display: none;
    }
    html.is-desktop-board #desktopRailMeButton {
      display: flex;
      margin-bottom: 4px;
    }
    html.is-desktop-board .pane.is-desktop-pane-closed { display: none !important; }
    html.is-desktop-board[data-desktop-open-count="1"] .workspace {
      grid-template-columns: minmax(0, 1fr);
    }
    html.is-desktop-board[data-desktop-open-count="2"] .workspace {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
    html.is-desktop-board[data-desktop-open-count="3"] .workspace {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
    }
    html.is-desktop-board .pane-circle .circle-fixed-top { top: 0; position: sticky; }
    html.is-desktop-board .pane-circle {
      background: #F2F4F7;
    }
    html.is-desktop-board .pane-circle .pane-main {
      position: relative;
      background: #F2F4F7;
    }
    html.is-desktop-board .pane-circle .circle-add-button {
      position: absolute;
      right: 22px;
      bottom: 22px;
    }
    html.is-desktop-board .pane-circle .pane-label {
      background: transparent;
      border-bottom-color: #e6e8ec;
    }
    html.is-desktop-board .pane-circle .conversation {
      padding: 0;
      background: #F2F4F7;
    }
    html.is-desktop-board .pane-circle .circle-feed-page { padding: 0 0 88px; }
    html.is-desktop-board .pane-circle .circle-fixed-top {
      padding: 2px 8px 6px;
    }
    html.is-desktop-board .pane-circle .circle-private-feed { padding-top: 4px; }
    .home-pane-dock { display: none; }
    html.is-desktop-board .home-pane-dock {
      display: flex;
      flex-direction: column;
      flex-shrink: 0;
      padding: 0 10px calc(14px + env(safe-area-inset-bottom, 0px));
      background: #fff;
    }
    html.is-desktop-board .home-pane-dock .composer-wrap {
      padding: 3px 0 0;
      margin: 0;
      background: #fff;
    }
    html.is-desktop-board .home-pane-dock .composer-dock { display: block; }
    html.is-desktop-board .home-pane-dock .composer {
      min-height: 58px;
      padding: 6px;
      gap: 5px;
      display: flex;
      align-items: center;
      border: 1px solid #eceeea;
      border-radius: 30px;
      background: #fff;
      box-shadow: 0 6px 20px rgba(0,0,0,.075);
    }
    html.is-desktop-board .home-pane-dock #homePanePlus {
      width: 52px;
      height: 52px;
      flex: 0 0 52px;
      border: 1px solid #eceeea;
      border-radius: 50%;
      color: #171717;
      background: #fff;
      box-shadow: 0 5px 16px rgba(0,0,0,.08);
    }
    html.is-desktop-board .home-pane-dock #homePanePlus .composer-side-icon {
      font-size: 31px;
      font-weight: 350;
      line-height: 1;
      transition: transform .2s ease;
    }
    html.is-desktop-board .home-pane-dock #homePanePlus .composer-side-icon svg {
      display: block;
      width: 24px;
      height: 24px;
    }
    html.is-desktop-board .home-pane-dock.plus-open #homePanePlus .composer-side-icon {
      transform: rotate(90deg);
    }
    html.is-desktop-board .home-pane-dock #homePaneInput {
      flex: 1 1 auto;
      min-width: 0;
      white-space: pre-wrap;
      overflow-x: hidden;
    }
    html.is-desktop-board .home-pane-dock .composer-divider { display: none; }
    html.is-desktop-board .home-pane-dock .composer:not(.has-text) #homePaneSend { display: none; }
    html.is-desktop-board .home-pane-dock #homePaneFriendly {
      width: 52px;
      height: 52px;
      flex: 0 0 52px;
      color: #5d6470;
      background: #eceef2;
    }
    html.is-desktop-board .home-pane-dock .plus-menu {
      display: none;
      flex: none;
      margin: 8px 2px 2px;
      max-height: min(360px, 52vh);
      overflow-y: auto;
      overscroll-behavior: contain;
    }
    html.is-desktop-board .home-pane-dock .plus-menu.show { display: block; }
    @media (min-width: 1360px) {
      html.is-desktop-board .app {
        width: min(calc(100vw - 40px - var(--desktop-rail-width) - var(--desktop-rail-gap)), 1320px);
      }
    }
    html.is-desktop-board .desktop-pane-rail:not([hidden]) {
      display: flex;
      flex-direction: column;
      flex: 0 0 var(--desktop-rail-width);
      width: var(--desktop-rail-width);
      gap: 10px;
      padding: 8px 0;
      position: sticky;
      top: 16px;
      align-self: flex-start;
      box-sizing: border-box;
    }
    html.is-desktop-board .desktop-pane-rail-toggle {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 4px;
      width: 100%;
      min-height: 64px;
      padding: 8px 4px;
      border: 1px solid #dfe3e8;
      border-radius: 16px;
      color: #6b7280;
      background: #f4f4f5;
      font: inherit;
      font-size: 11px;
      font-weight: 650;
      letter-spacing: -.02em;
      cursor: pointer;
      transition: background .15s, color .15s, border-color .15s;
    }
    html.is-desktop-board .desktop-pane-rail-toggle.is-on {
      color: #fff;
      background: #25282d;
      border-color: #25282d;
    }
    html.is-desktop-board .desktop-pane-rail-toggle:hover:not(.is-on) {
      background: #ececef;
    }
    html.is-desktop-board .desktop-pane-rail-icon {
      font-size: 20px;
      line-height: 1;
    }
    html.is-desktop-board .desktop-pane-rail-label {
      line-height: 1.1;
    }
    html.is-desktop-board .app:has(.is-direct-chat, .soul-summary-bar, .soul-assistant-page) .topbar {
      position: absolute;
      top: 0;
      left: 0;
      right: auto;
      z-index: 40;
      width: calc((100% - var(--desktop-pane-gap)) / 2);
      border-bottom: 1px solid #eeeeec;
      border-right: 0;
      border-radius: 28px 28px 0 0;
      background: #fff;
    }
    html.is-desktop-board[data-desktop-cols="3"] .app:has(.is-direct-chat, .soul-summary-bar, .soul-assistant-page) .topbar {
      width: calc((100% - 2 * var(--desktop-pane-gap)) / 3);
    }
    html.is-desktop-board .app:has(.is-direct-chat, .soul-summary-bar, .soul-assistant-page) .main-bottom-shell {
      display: none;
    }
    html.is-desktop-board .app:has(.is-direct-chat, .soul-summary-bar, .soul-assistant-page) .pane-chat {
      padding-top: var(--topbar-height);
    }
    html.is-desktop-board .app:has(.is-direct-chat, .soul-summary-bar, .soul-assistant-page) .pane-chat > .pane-label {
      display: none;
    }
    html.is-desktop-board .app:has(.is-direct-chat, .soul-summary-bar, .soul-assistant-page) .pane-home > .pane-label,
    html.is-desktop-board .app:has(.is-direct-chat, .soul-summary-bar, .soul-assistant-page) .pane-circle > .pane-label {
      height: var(--topbar-height);
      padding: 0 52px;
    }
    /* Thread header lives in .pane-chat (is-chat-room-chrome); do not overlay it on .app. */
    html.is-desktop-board.is-chat-room-chrome .app:has(.is-direct-chat, .soul-summary-bar, .soul-assistant-page) .chat-room-chrome .topbar {
      position: relative;
      top: auto;
      left: auto;
      z-index: 1;
      width: 100%;
      max-width: 100%;
      box-sizing: border-box;
      border-bottom: 1px solid #eeeeec;
      border-radius: 28px 28px 0 0;
      background: #fff;
    }
    html.is-desktop-board.is-chat-room-chrome .app:has(.is-direct-chat, .soul-summary-bar, .soul-assistant-page) .pane-chat {
      padding-top: 0;
    }

    /* Messaging polish: familiar chat hierarchy with a neutral, low-green palette. */
    #menuButton:not(.is-back) {
      color: #fff;
      background: #4a515b;
      border: 1px solid #4a515b;
      box-shadow: 0 6px 16px rgba(74, 81, 91, .18);
    }
    #menuButton:not(.is-back) .add-friend-mark {
      font-size: 24px;
      font-weight: 650;
      line-height: 1;
      transform: translateY(-1px);
    }
    #menuButton:not(.is-back),
    #profileButton {
      width: 37px; height: 37px;
    }
    #profileButton {
      color: #30343a; background: #fff;
      border: 1px solid #e8eaed;
      box-shadow: none;
    }
    #menuButton:not(.is-back)::after,
    #profileButton::after {
      right: -1px; bottom: -1px; width: 12px; height: 12px;
      border-width: 2px; color: #fff; font-size: 6px;
      box-shadow: 0 2px 5px rgba(35,42,52,.16);
    }
    #menuButton:not(.is-back)::after { display: none; }
    #profileButton::after { background: #9a7465; }
    #menuButton:not(.is-back):hover { background: #3d444d; }
    #profileButton:hover { background: #f0f2f5; }
    #menuButton:not(.is-back) .me-label,
    #profileButton .me-label { font-size: 10px; font-weight: 750; }
    .main-mode-buttons button.active { color: #fff; background: #25282d; }

    .friends-chat-page .chat-page { padding: 2px 0 28px; }
    .friends-chat-page .chat-group { margin-bottom: 22px; }
    .friends-chat-page .chat-group-title {
      margin: 0 13px 8px; color: #858b94; font-size: 10px;
      font-weight: 750; letter-spacing: .7px;
    }
    .friends-chat-page .chat-page-list,
    .friends-chat-page .link-contact-list {
      gap: 0; overflow: hidden; border: 0;
      border-radius: 20px; background: #fff;
    }
    .friends-chat-page .chat-page-person,
    .friends-chat-page .link-contact {
      position: relative; min-height: 72px; margin: 0; padding: 10px 12px;
      border: 0; border-radius: 0;
      background: #fff; box-shadow: none; transition: background .14s, transform .14s;
    }
    .friends-chat-page .chat-page-person:not(:last-child)::after,
    .friends-chat-page .link-contact:not(:last-child)::after {
      content: ""; position: absolute; left: 71px; right: 0; bottom: 0;
      height: 1px; background: #ececef; pointer-events: none;
    }
    .friends-chat-page .chat-page-person:active,
    .friends-chat-page .link-contact:active { transform: none; background: #f3f4f6; }
    .friends-chat-page .chat-page-avatar,
    .friends-chat-page .link-contact-avatar {
      width: 48px; height: 48px; border-radius: 50%; color: #3f4a5a;
      background: #e9edf3; font-size: 18px; font-weight: 800;
      overflow: hidden; background-size: cover; background-position: center;
    }
    .friends-chat-page .chat-page-person:nth-child(4n+2) .chat-page-avatar:not(.has-photo),
    .friends-chat-page .link-contact:nth-child(4n+2) .link-contact-avatar:not(.has-photo) { color: #625273; background: #eee8f4; }
    .friends-chat-page .chat-page-person:nth-child(4n+3) .chat-page-avatar:not(.has-photo),
    .friends-chat-page .link-contact:nth-child(4n+3) .link-contact-avatar:not(.has-photo) { color: #8a5b43; background: #f6e9e1; }
    .friends-chat-page .chat-page-person:nth-child(4n) .chat-page-avatar:not(.has-photo),
    .friends-chat-page .link-contact:nth-child(4n) .link-contact-avatar:not(.has-photo) { color: #495b78; background: #e7edf7; }
    .friends-chat-page .chat-page-copy strong,
    .friends-chat-page .link-contact strong { color: #202226; font-size: 14px; font-weight: 720; }
    .friends-chat-page .chat-page-copy small,
    .friends-chat-page .link-contact small {
      max-width: 100%; margin-top: 4px; overflow: hidden; color: #858a92;
      font-size: 11px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap;
    }
    .friends-chat-page .chat-page-time { color: #9a9ea5; font-size: 9px; font-weight: 650; }
    .friends-chat-page .chat-page-state { color: #727983; font-size: 9px; font-weight: 750; }
    .friends-chat-page .link-chat-meta { color: #687181; }
    .friends-chat-page .link-birthday,
    .friends-chat-page .link-unread-badge {
      top: 6px; right: auto; left: 47px; min-width: 20px; height: 20px;
      padding: 0 5px; border-width: 2px; font-size: 9px;
      box-shadow: 0 2px 7px rgba(169,61,53,.18);
    }
    .friends-chat-page [data-global-message] .chat-page-state,
    .friends-chat-page [data-friend-new-chat] .chat-page-state,
    .friends-chat-page .chat-group-row.unread .chat-page-state,
    .friends-chat-page .picturelink-folder-row .chat-page-state {
      min-width: 19px; height: 19px; padding: 0 6px; border-radius: 10px;
      display: grid; place-items: center; color: #fff; background: #5a78f0;
    }
    .friends-chat-page .picturelink-folder-row {
      overflow: hidden; border: 0; border-radius: 20px;
    }
    .friends-chat-page .chat-page-meta {
      min-width: 54px; align-self: stretch; align-content: center;
    }
    .friends-chat-page .chat-page-state { justify-self: end; }
    .friends-chat-page .picturelink-folder-row.open { background: #f6f7f9; }
    .friends-chat-page .picturelink-folder-panel { border-left-color: #dfe2e7; }
    .friends-chat-page .picturelink-invite { background: linear-gradient(145deg,#f0f2f6,#f8f5f2); }
    .friends-chat-page .picturelink-invite-actions button { color: #455064; background: #fff; }
    .friends-chat-page .picturelink-invite-actions button.primary { color: #fff; background: #4c69d8; }
    .friends-chat-page .link-hobbies {
      gap: 8px;
      min-width: 0;
      min-height: 36px;
    }
    .friends-chat-page .link-hobby {
      width: 36px;
      height: 36px;
      border-radius: 11px;
      background: #f2f3f5;
      font-size: 18px;
    }

    .main.is-direct-chat .conversation,
    .main:has(.soul-summary-bar) .conversation { background: #f5f6f7; }
    .message { margin: 6px 0; gap: 7px; }
    .message-avatar { background: #4e5968; }
    .message.assistant .message-avatar { color: #4f5865; background: #e4e7eb; }
    .message.user .message-avatar { background: #2e3238; }
    .message-bubble {
      min-width: 0;
      max-width: 75%;
      padding: 10px 13px;
      border: 1px solid #e4e6e9;
      border-radius: 17px;
      color: #25272b;
      background: #fff;
      box-shadow: 0 1px 2px rgba(20,25,31,.04);
      overflow-wrap: anywhere;
      word-break: break-word;
      white-space: pre-wrap;
    }
    .message.assistant .message-bubble { border-bottom-left-radius: 5px; }
    .message.user .message-bubble {
      border-color: #dce5fb; border-bottom-right-radius: 5px;
      background: #e8efff;
    }
    .soul-summary-bar {
      color: #596170; background: rgba(244,246,249,.97);
      border-bottom-color: #e1e4e9;
    }
    .soul-summary-bar:active { background: #eceff4; }
    .soul-summary-add { color: #fff; background: #4a515b; }
    .composer.thread-mode #composerFriendsButton,
    .main.is-direct-chat #composerFriendsButton,
    .main:has(.soul-summary-bar) #composerFriendsButton { color: #5d6470; background: #eceef2; }
    .composer-side.is-mic .composer-side-label { display: none; }
    .composer-side.is-mic .composer-side-icon svg { width: 22px; height: 22px; }
    #composerFriendsButton.is-mic { width: 46px; height: 46px; flex: 0 0 46px; }
    .composer:has(#composerFriendsButton.is-mic) #composerFriendsButton { order: 1; }
    .composer:has(#composerFriendsButton.is-mic) #sendButton { order: 2; }
    .composer:has(#composerFriendsButton.is-mic):not(.has-text) #sendButton { display: none; }
    .pane-chat .main:has(.agent-home) #composerFriendsButton.is-mic,
    .pane-chat .main:has(.agent-chat) #composerFriendsButton.is-mic,
    html.is-desktop-board .home-pane-dock #homePaneFriendly.is-mic {
      width: 40px;
      height: 40px;
      flex: 0 0 40px;
      border: 0;
      border-radius: 50%;
      color: #5d6470;
      background: transparent;
      box-shadow: none;
    }
    .composer.thread-mode #composerFriendsButton.is-listening,
    .main.is-direct-chat #composerFriendsButton.is-listening,
    .main:has(.soul-summary-bar) #composerFriendsButton.is-listening,
    .pane-chat .main:has(.agent-home) #composerFriendsButton.is-listening,
    .pane-chat .main:has(.agent-chat) #composerFriendsButton.is-listening,
    html.is-desktop-board .home-pane-dock #homePaneFriendly.is-listening {
      color: #fff;
      background: #e5484d;
      border-radius: 50%;
      animation: mic-listen-pulse 1.4s ease-in-out infinite;
    }
    @keyframes mic-listen-pulse {
      0%, 100% { box-shadow: 0 0 0 0 rgba(229, 72, 77, .35); }
      70% { box-shadow: 0 0 0 10px rgba(229, 72, 77, 0); }
    }
    @media (prefers-reduced-motion: reduce) {
      .composer-side.is-listening { animation: none; }
    }
    html[data-profile-theme="dark"] .pane-chat .main:has(.agent-home) #composerFriendsButton.is-mic,
    html[data-profile-theme="dark"] .pane-chat .main:has(.agent-chat) #composerFriendsButton.is-mic,
    html[data-profile-theme="dark"].is-desktop-board .home-pane-dock #homePaneFriendly.is-mic {
      color: #5d6470;
      background: transparent;
    }
    html[data-profile-theme="dark"] .composer.thread-mode #composerFriendsButton.is-listening,
    html[data-profile-theme="dark"] .pane-chat .main:has(.agent-home) #composerFriendsButton.is-listening,
    html[data-profile-theme="dark"].is-desktop-board .home-pane-dock #homePaneFriendly.is-listening {
      color: #fff;
      background: #e5484d;
    }
    .composer-side.active { color: #48566d; background: #e8ecf2; }
    .plus.home-return { color: #48566d; background: #e8ecf2; }
    .soul-line-add { color: #fff; background: #596a86; }
    .soul-line-add.added { color: #596270; background: #e9ebef; }

    /* Friendly pages share the same flat visual language as Chat. */
    .soul-line-page { padding: 2px 0 86px; }
    .soul-line-page .friendly-contact-page { padding: 0; }
    .soul-line-page .friendly-contact-page .link-contact-list { padding-bottom: 0; }
    .soul-line-page .friendly-group-directory { margin-bottom: 22px; }
    .soul-line-page .unified-chat-list { margin-top: 8px; }
    .friendly-members-page .chat-group { margin-bottom: 22px; }
    .friendly-members-page .chat-group-title {
      margin: 0 13px 8px; color: #858b94; font-size: 10px;
      font-weight: 750; letter-spacing: .7px;
    }
    .friendly-list {
      overflow: hidden; border: 0; border-radius: 20px; background: #fff;
    }
    .friendly-list .soul-line-person {
      position: relative; min-height: 72px; margin: 0; padding: 10px 12px;
      border: 0; border-radius: 0; gap: 11px; background: #fff;
      box-shadow: none; transition: background .14s;
    }
    .friendly-list .soul-line-person:not(:last-child)::after {
      content: ""; position: absolute; left: 71px; right: 0; bottom: 0;
      height: 1px; background: #ececef; pointer-events: none;
    }
    .friendly-list .soul-line-person:active { background: #f3f4f6; }
    .friendly-list .soul-line-avatar {
      width: 48px; height: 48px; flex: 0 0 48px; border-radius: 50%;
      color: #3f4a5a; background: #e9edf3; font-size: 21px;
    }
    .friendly-list .soul-line-person:nth-child(4n+2) .soul-line-avatar { background: #eee8f4; }
    .friendly-list .soul-line-person:nth-child(4n+3) .soul-line-avatar { background: #f6e9e1; }
    .friendly-list .soul-line-person:nth-child(4n) .soul-line-avatar { background: #e7edf7; }
    .friendly-list .soul-line-copy strong { color: #202226; font-size: 14px; font-weight: 720; }
    .friendly-list .soul-line-copy small {
      margin-top: 4px; overflow: hidden; color: #858a92; font-size: 11px;
      line-height: 1.35; text-overflow: ellipsis; white-space: nowrap;
    }
    .friendly-list .soul-line-add {
      min-width: 55px; height: 30px; padding: 0 12px; border-radius: 15px;
      color: #fff; background: #4f5968; font-size: 11px; font-weight: 750;
    }
    .friendly-list .soul-line-add.added { color: #717780; background: #eef0f3; }

    /* Home plus panel sits in the composer, same as chat attachments. */
    .plus-menu-grabber { display: none; }
    .plus-shortcuts {
      margin: 0; display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 6px;
    }
    .plus-page-shortcuts {
      margin-top: 14px;
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .plus-shortcuts button {
      min-width: 0; min-height: 0; padding: 0;
      border: 0; border-radius: 0; display: grid; justify-items: center;
      align-content: center; gap: 6px; color: #4b504d; background: transparent;
      cursor: pointer; font-size: 9px; font-weight: 750;
    }
    .plus-shortcuts button span {
      width: 44px; height: 44px; border-radius: 15px; display: grid; place-items: center;
      background: var(--attach-bg, #eef1f5); font-size: 21px; line-height: 1;
      box-shadow: inset 0 0 0 1px rgba(0,0,0,.025);
    }
    .plus-shortcuts button:nth-child(3) span { --attach-bg: #eef1f5; }
    .plus-shortcuts button:nth-child(4) span { --attach-bg: #eaf4f2; }
    .plus-shortcuts button:active span { transform: scale(.92); }
    .plus-menu-list {
      margin-top: 14px; overflow: visible; border: 0;
      display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px 6px;
    }
    .plus-option {
      position: relative; min-width: 0; min-height: 0; padding: 0;
      border-radius: 0; display: grid; justify-items: center; align-content: center;
      gap: 6px; color: #4b504d; background: transparent; text-align: center;
    }
    .plus-option:hover { background: transparent; }
    .plus-option > span:last-child { min-width: 0; }
    .plus-option strong { color: #4b504d; font-size: 9px; font-weight: 750; line-height: 1.2; }
    .plus-option small { display: none; }
    .option-icon {
      width: 44px; height: 44px; flex: 0 0 44px;
      border-radius: 15px; color: #4d5664; background: #F4F4F5;
      font-size: 21px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.025);
    }
    .plus-option:nth-child(2) .option-icon { background: #fff1df; }
    .plus-option:nth-child(3) .option-icon { background: #eef3ff; }
    .plus-option:nth-child(4) .option-icon { background: #fff0f3; }
    .plus-option:active .option-icon { transform: scale(.92); }
    .main:has(.plus-menu.show) .main-mode-buttons { visibility: hidden; pointer-events: none; }

    /* Keep the Home composer and Friendly destination in one moving dock. */
    .main:has(.agent-home) .main-mode-buttons [data-main-mode="friendly"] {
      right: 16px; bottom: 7px; width: 46px; height: 46px;
      border: 0; border-radius: 20px;
      color: #5d6470; background: #eceef2; box-shadow: none;
      font-size: 9px;
    }
    .main:has(.agent-home) .main-mode-buttons [data-main-mode="friendly"]::before {
      content: ""; position: absolute; left: -7px; top: 9px;
      width: 1px; height: 28px; background: #eceeea;
    }
    .main:has(.agent-home) .main-mode-buttons [data-main-mode="friendly"]:hover { background: #e5e8ed; }

    html:not(.is-authed):not(.is-spectator) .app { visibility: hidden; pointer-events: none; }
    .auth-screen {
      position: fixed; inset: 0; z-index: 80;
      display: grid; place-items: center; padding: calc(24px + var(--safe-top)) 18px 24px;
      background: #F2F4F7;
    }
    html.is-authed .auth-screen { display: none; }
    html.is-auth-restoring:not(.is-authed) .auth-screen { visibility: hidden; }
    html.is-admin-preview .auth-screen,
    html.is-admin-preview .app > :not(#visitorMeDrawer) { display: none !important; }
    html.is-admin-preview .app { visibility: visible; pointer-events: auto; }
    html.is-admin-preview #visitorMeDrawer { width: 100%; box-shadow: none; transition: none; }
    html.is-admin-preview #visitorMeDrawer .circle-reaction-bar,
    html.is-admin-preview #visitorMeDrawer .circle-comments,
    html.is-admin-preview #visitorMeDrawer .circle-link-request-actions,
    html.is-admin-preview #visitorMeDrawer [data-circle-edit] { pointer-events: none; }
    html.is-admin-preview #visitorMeDrawer .circle-bomb,
    html.is-admin-preview #visitorMeDrawer .circle-comment-compose { display: none; }
    .auth-card {
      width: min(100%, 390px); padding: 28px 24px 22px;
      border-radius: 28px; background: #fff;
      box-shadow: 0 18px 50px rgba(22, 27, 34, .12);
    }
    .auth-kicker {
      margin: 0 0 6px; color: #18181B;
      font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
    }
    .auth-card h1 { margin: 0 0 8px; font-size: 28px; letter-spacing: -.03em; text-align: center; }
    .auth-copy { margin: 0 0 22px; color: #66756e; font-size: 14px; line-height: 1.45; text-align: center; }
    .auth-field { display: grid; gap: 6px; margin-bottom: 12px; }
    .auth-field[hidden] { display: none !important; }
    .auth-field span { color: #5d6b64; font-size: 12px; font-weight: 700; }
    .auth-field input,
    .auth-field textarea {
      width: 100%; padding: 12px 14px; border: 1px solid #dbe3de; border-radius: 14px;
      background: #f7faf8; font-size: 16px; font-family: inherit;
    }
    .auth-field textarea {
      min-height: 88px; resize: none; line-height: 1.4;
    }
    .auth-error { margin: 0 0 12px; color: #b42318; font-size: 13px; font-weight: 650; }
    /* Forgot password: a small link under the password, and a short note ("We sent a code…"). */
    .auth-forgot { display: block; margin: -4px 0 12px auto; padding: 4px 2px; border: 0; background: transparent; color: #5d6b64; font: inherit; font-size: 13px; font-weight: 650; cursor: pointer; }
    .auth-forgot[hidden] { display: none; }
    .auth-note { margin: 0 0 12px; color: #2e7d55; font-size: 13px; line-height: 1.4; }
    .auth-submit {
      width: 100%; margin-top: 4px; padding: 13px 16px; border: 0; border-radius: 16px;
      color: #fff; background: #18181B; font-size: 16px; font-weight: 750; cursor: pointer;
    }
    .auth-switch {
      width: 100%; margin-top: 12px; border: 0; background: transparent;
      color: #18181B; font-size: 14px; font-weight: 700; cursor: pointer;
    }
    .auth-logout {
      width: 100%; margin: 18px 0 8px; padding: 12px 16px; border: 1px solid #efd4c6;
      border-radius: 16px; color: #9a573e; background: #fff9f4; font-weight: 750; cursor: pointer;
    }
    .live-people-empty { margin: 0; padding: 8px 4px 6px; color: #7a8680; font-size: 13px; }
    .feed-loading {
      display: grid;
      place-items: center;
      gap: 10px;
      padding: 40px 16px;
      color: #8a938e;
      font-size: 13px;
    }
    .feed-loading p { margin: 0; }
    .feed-loading-spinner {
      width: 20px;
      height: 20px;
      border: 2px solid #d8dedb;
      border-top-color: #8a938e;
      border-radius: 50%;
      animation: pull-refresh-spin .7s linear infinite;
    }
    .add-friend-empty-btn {
      margin: 0 0 14px; padding: 9px 14px; border: 0; border-radius: 14px;
      color: #25282d; background: #eceef2; font-size: 14px; font-weight: 750; cursor: pointer;
    }
    .link-contact-avatar.has-photo,
    .chat-page-avatar.has-photo,
    .message-avatar.has-photo,
    .circle-private-avatar.has-photo,
    .circle-comment-avatar.has-photo,
    .soul-assistant-avatar.has-photo,
    .avatar.has-photo {
      background-size: cover !important;
      background-position: center !important;
      background-repeat: no-repeat !important;
      color: transparent !important;
      overflow: hidden;
    }