:root {
      --bg: #f4f7f7;
      --panel: #ffffff;
      --panel-soft: #f8fbfb;
      --text: #132321;
      --muted: #657773;
      --line: #dce7e4;
      --brand: #079cad;
      --brand-dark: #087885;
      --brand-soft: #e2f6f7;
      --danger: #b42318;
      --warning: #a16207;
      --success: #16803c;
      --shadow: 0 16px 42px rgba(21, 45, 50, .10);
      --safe-top: env(safe-area-inset-top, 0px);
      --safe-right: env(safe-area-inset-right, 0px);
      --safe-bottom: env(safe-area-inset-bottom, 0px);
      --safe-left: env(safe-area-inset-left, 0px);
      --mobile-nav-height: 64px;
      --app-height: 100dvh;
      --composer-clearance: 0px;
    }

    * { box-sizing: border-box; }
    html, body { min-height: 100%; overscroll-behavior-y: none; }
    body {
      margin: 0;
      min-height: 100dvh;
      background: var(--bg);
      color: var(--text);
      font-family: Arial, "Noto Sans Thai", "Segoe UI", sans-serif;
    }
    button, input, textarea, select { font: inherit; }
    button {
      border: 0;
      border-radius: 8px;
      min-height: 40px;
      padding: 0 14px;
      background: var(--brand);
      color: #fff;
      font-weight: 700;
      cursor: pointer;
      white-space: nowrap;
      touch-action: manipulation;
    }
    button:hover { filter: brightness(.98); }
    button.secondary { background: #edf4f3; color: var(--text); }
    button.ghost { background: transparent; color: var(--muted); min-height: 32px; padding: 0 8px; }
    button.danger { background: #fff1f0; color: var(--danger); }
    .rowActions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
    input, textarea, select {
      width: 100%;
      min-height: 40px;
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 10px 12px;
      background: #fbfdfd;
      color: var(--text);
      outline: none;
    }
    textarea { min-height: 72px; resize: vertical; }
    input:focus, textarea:focus, select:focus {
      border-color: var(--brand);
      box-shadow: 0 0 0 3px rgba(7, 156, 173, .14);
    }
    button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
      outline: 3px solid rgba(7, 156, 173, .32);
      outline-offset: 2px;
    }
    a { color: var(--brand-dark); font-weight: 700; text-decoration: none; }
    .hidden { display: none !important; }
    .shell { min-height: var(--app-height); display: grid; grid-template-rows: 64px minmax(0, 1fr); }
    body.appActive { overflow: hidden; }
    body.appActive .shell {
      height: var(--app-height);
      min-height: var(--app-height);
      overflow: hidden;
    }
    .topbar {
      position: sticky;
      top: 0;
      z-index: 20;
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 0 18px;
      border-bottom: 1px solid var(--line);
      background: rgba(255,255,255,.96);
      backdrop-filter: blur(10px);
    }
    .mark { width: 42px; height: 42px; border-radius: 8px; object-fit: cover; background: var(--brand); }
    .brand h1 { margin: 0; font-size: 18px; line-height: 1.1; }
    .brand p { margin: 3px 0 0; color: var(--muted); font-size: 12px; }
    .status { margin-left: auto; color: var(--muted); font-size: 13px; text-align: right; }
    .topActions { position: relative; display: flex; align-items: center; gap: 8px; }
    .badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 20px;
      height: 20px;
      padding: 0 6px;
      margin-left: 4px;
      border-radius: 999px;
      background: var(--danger);
      color: #fff;
      font-size: 12px;
      font-weight: 800;
    }
    .dropdown {
      position: absolute;
      right: 0;
      top: 48px;
      width: min(380px, calc(100vw - 24px));
      max-height: 420px;
      overflow: auto;
      padding: 10px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--panel);
      box-shadow: var(--shadow);
      z-index: 30;
    }
    .notice, .error {
      border-radius: 8px;
      padding: 10px 12px;
      font-size: 14px;
      line-height: 1.5;
    }
    .notice { background: var(--brand-soft); color: #075761; }
    .error { background: #fff1f0; color: var(--danger); }
    .hint { color: var(--muted); font-size: 13px; line-height: 1.45; }
    .stack { display: grid; gap: 12px; }
    .row { display: flex; align-items: center; gap: 10px; }
    .panel {
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 12px;
      background: var(--panel);
    }

    .auth {
      width: min(500px, calc(100vw - 28px));
      margin: 44px auto;
      padding: 22px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--panel);
      box-shadow: 0 18px 50px rgba(0,0,0,.05);
    }
    .auth h2 { margin: 0 0 6px; font-size: 24px; }
    .auth p { margin: 0 0 18px; color: var(--muted); line-height: 1.55; }
    .authQuick { display: flex; flex-wrap: wrap; gap: 8px; }
    .authQuick button { flex: 1 1 160px; }
    .rememberDevice {
      display: flex;
      align-items: center;
      gap: 9px;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.4;
    }
    .rememberDevice input {
      width: 16px;
      height: 16px;
      margin: 0;
      accent-color: var(--brand);
    }

    .app {
      display: none;
      min-height: 0;
      height: 100%;
      overflow: hidden;
      grid-template-columns: 92px 300px minmax(0, 1fr) 320px;
    }
    .mainRail, .chatListPane, .infoPane {
      min-height: 0;
      height: 100%;
      overflow: auto;
      overscroll-behavior: contain;
      background: var(--panel-soft);
    }
    .mainRail {
      border-right: 1px solid var(--line);
      padding: 12px 8px;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .navButton {
      width: 100%;
      min-height: 58px;
      padding: 8px 6px;
      display: grid;
      justify-items: center;
      align-content: center;
      gap: 4px;
      border-radius: 8px;
      background: transparent;
      color: var(--muted);
      font-size: 12px;
      text-align: center;
    }
    .navButton strong { font-size: 18px; line-height: 1; }
    .navButton.active { background: var(--brand); color: #fff; }
    .navButton .badge { margin-left: 0; transform: scale(.88); }

    /* The navigation rail is intentionally compact.  Keep longer section
       labels, such as Notifications and KAVEE REPUBLIC, inside their own
       button rather than allowing text to spill into the content area. */
    .mainRail .navButton {
      overflow: hidden;
    }
    .mainRail .navButton > span:not(.badge) {
      width: 100%;
      max-width: 100%;
      overflow-wrap: anywhere;
      word-break: break-word;
      line-height: 1.08;
    }
    .navSpacer { flex: 1; }
    .chatListPane {
      border-right: 1px solid var(--line);
      padding: 16px;
    }
    .paneTitle {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 12px;
    }
    .paneTitle h2, .infoPane h3 { margin: 0; font-size: 17px; }
    .roomButton, .userButton {
      width: 100%;
      min-height: 54px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      padding: 8px 10px;
      background: transparent;
      color: var(--text);
      text-align: left;
      white-space: normal;
    }
    .roomButton.active { background: var(--brand-soft); }
    .roomButton.unreadRoom .roomText strong { font-weight: 900; }
    .roomMain, .userMain { display: flex; align-items: center; gap: 9px; min-width: 0; }
    .roomText { min-width: 0; display: grid; gap: 2px; }
    .roomText strong, .roomText small { overflow: hidden; text-overflow: ellipsis; }
    .roomText small { color: var(--muted); font-weight: 500; }
    .roomMeta { display: flex; align-items: center; gap: 5px; flex: 0 0 auto; }
    .pinMark { color: var(--brand-dark); font-size: 13px; font-weight: 800; }
    .roomUnreadBadge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 22px;
      height: 22px;
      padding: 0 7px;
      border-radius: 999px;
      background: #d92d20;
      color: #fff;
      font-size: 12px;
      font-weight: 900;
      line-height: 1;
      box-shadow: 0 0 0 2px #fff;
    }
    .roomButton.active .roomUnreadBadge { box-shadow: 0 0 0 2px var(--brand-soft); }
    .avatar {
      width: 64px;
      height: 64px;
      border-radius: 8px;
      display: grid;
      place-items: center;
      background: var(--brand-soft);
      color: var(--brand-dark);
      font-weight: 900;
      overflow: hidden;
      flex: 0 0 auto;
    }
    .avatar.small { width: 34px; height: 34px; font-size: 12px; }
    .avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .avatarWithStatus {
      position: relative;
      width: max-content;
      flex: 0 0 auto;
    }
    .presenceDot {
      width: 10px;
      height: 10px;
      border-radius: 999px;
      background: #9ca3af;
      display: inline-block;
      flex: 0 0 auto;
    }
    .presenceDot.online { background: #16a34a; }
    .presenceDot.away { background: #eab308; }
    /* MSN-style presence: red is reserved strictly for a real offline state. */
    .presenceDot.busy { background: #7c3aed; }
    .presenceDot.offline { background: #dc2626; }
    .presenceDot.statusLight {
      width: 13px;
      height: 13px;
      border: 2px solid #fff;
      box-shadow: 0 0 0 1px rgba(15, 23, 42, .08);
    }
    .avatarWithStatus .presenceDot {
      position: absolute;
      right: -2px;
      bottom: -2px;
    }
    .statusPill {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      width: max-content;
      border: 1px solid var(--line);
      border-radius: 999px;
      padding: 4px 9px;
      background: #fff;
      color: var(--muted);
      font-size: 12px;
      font-weight: 800;
    }

    .chat {
      position: relative;
      min-width: 0;
      min-height: 0;
      height: 100%;
      overflow: hidden;
      display: grid;
      grid-template-rows: 64px minmax(0, 1fr) auto;
      background: #f7faf9;
    }
    .messageStage {
      position: relative;
      min-height: 0;
      overflow: hidden;
    }
    .chatHead {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 0 18px;
      border-bottom: 1px solid var(--line);
      background: var(--panel);
    }
    .backButton { display: none; }
    .chatTitle { min-width: 0; flex: 1; }
    .chatTitle h2 { margin: 0; font-size: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .chatTitle .hint { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .headActions { display: flex; gap: 8px; }
    .messages {
      height: 100%;
      min-height: 0;
      overflow: auto;
      overscroll-behavior: contain;
      /* Keep the newest message above the composer, including when an
         attachment/reply row makes the composer taller. */
      padding: 20px 18px calc(24px + var(--composer-clearance));
      scroll-padding-bottom: calc(24px + var(--composer-clearance));
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .jumpToLatest {
      position: absolute;
      right: 18px;
      bottom: 14px;
      z-index: 8;
      min-width: 46px;
      min-height: 46px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      padding: 0 13px;
      border: 1px solid #b9dfe2;
      border-radius: 999px;
      background: #fff;
      color: var(--brand-dark);
      box-shadow: 0 8px 24px rgba(20, 58, 62, .18);
      font-weight: 900;
    }
    .jumpToLatest:hover { background: var(--brand-soft); }
    .jumpToLatestArrow { font-size: 20px; line-height: 1; }
    .jumpToLatestBadge {
      max-width: 160px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 12px;
    }
    .message {
      display: grid;
      grid-template-columns: 34px minmax(0, 1fr);
      gap: 10px;
      max-width: 86%;
    }
    .message.mine {
      align-self: flex-end;
      grid-template-columns: minmax(0, 1fr);
    }
    .bubble {
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--panel);
      padding: 9px 11px;
      box-shadow: 0 6px 18px rgba(0,0,0,.04);
    }
    .mine .bubble {
      border-color: #bfe6e9;
      background: var(--brand-soft);
    }
    .msgMeta {
      display: flex;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 4px;
      color: var(--muted);
      font-size: 12px;
    }
    .readStatus {
      margin-top: 6px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 800;
      text-align: right;
    }
    .readStatus.read { color: var(--success); }
    .readStatus.unread { color: #8a5a00; }
    .messageActivitySummary {
      display: grid;
      gap: 3px;
      margin-top: 6px;
      font-size: 11px;
      color: var(--muted);
    }
    .messageActivityLine {
      display: flex;
      flex-wrap: wrap;
      align-items: baseline;
      justify-content: flex-end;
      gap: 4px;
      text-align: right;
    }
    .messageActivityLine strong { color: var(--text); }
    .inlineActor {
      border: 0;
      background: transparent;
      color: var(--brand-dark);
      padding: 0;
      min-height: auto;
      font: inherit;
      font-weight: 800;
      text-decoration: underline;
      text-decoration-thickness: 1px;
      text-underline-offset: 2px;
    }
    .msgText { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.45; }
    .replyBox, .forwardBox {
      border-left: 3px solid var(--brand);
      padding: 6px 8px;
      margin-bottom: 6px;
      background: rgba(255,255,255,.66);
      color: var(--muted);
      font-size: 13px;
      border-radius: 6px;
    }
    button.replyBox {
      width: 100%;
      min-height: auto;
      text-align: left;
      cursor: pointer;
    }
    .message.messageTarget .bubble {
      outline: 3px solid rgba(13, 158, 171, .42);
      box-shadow: 0 0 0 7px rgba(13, 158, 171, .12);
      animation: targetPulse 1.2s ease;
    }
    @keyframes targetPulse {
      0%, 100% { transform: translateY(0); }
      40% { transform: translateY(-3px); }
    }
    .deletedText { color: var(--muted); font-style: italic; }
    .messageActions {
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
      margin-top: 8px;
    }
    .messageActions button {
      min-height: 28px;
      padding: 0 8px;
      font-size: 12px;
    }
    .reactionRow { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
    .reactionWithActors {
      display: inline-flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 4px;
      color: var(--muted);
      font-size: 11px;
    }
    .reactionChip {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: #fff;
      padding: 2px 8px;
      font-size: 12px;
    }
    button.reactionChip, button.actionDetailLink {
      color: inherit;
      min-height: 28px;
      cursor: pointer;
    }
    button.reactionChip:hover, button.actionDetailLink:hover { border-color: var(--brand); color: var(--brand); }
    .actionDetailLink {
      border: 0;
      background: transparent;
      padding: 0;
      font: inherit;
      text-decoration: underline;
      text-underline-offset: 2px;
    }
    .actionDetailsOverlay {
      position: fixed;
      inset: 0;
      z-index: 120;
      display: grid;
      place-items: center;
      padding: 20px;
      background: rgba(15, 30, 32, .42);
    }
    .actionDetailsOverlay.hidden { display: none !important; }
    .actionDetailsPanel {
      width: min(620px, 100%);
      max-height: min(760px, calc(100vh - 40px));
      display: flex;
      flex-direction: column;
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--panel);
      box-shadow: 0 18px 55px rgba(20, 58, 62, .22);
    }
    .actionDetailsHeader, .actionDetailsToolbar {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 14px 16px;
      border-bottom: 1px solid var(--line);
    }
    .actionDetailsHeader { justify-content: space-between; }
    .actionDetailsToolbar { flex-wrap: wrap; }
    .actionDetailsToolbar input { flex: 1 1 180px; }
    .actionDetailsTabs { display: flex; flex-wrap: wrap; gap: 6px; }
    .actionDetailsTabs button.active { background: var(--brand); color: #fff; }
    .actionDetailsList { overflow: auto; padding: 8px 16px 16px; }
    .forwardRoomList {
      display: grid;
      gap: 8px;
      overflow: auto;
      padding: 12px 16px 16px;
    }
    .forwardRoomButton {
      min-height: 58px;
      justify-content: flex-start;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #f8fbfb;
      color: var(--text);
      text-align: left;
    }
    .forwardRoomButton:hover {
      border-color: var(--brand);
      background: #e9fbfd;
    }
    .forwardRoomButton strong,
    .forwardRoomButton span {
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .forwardRoomButton span {
      margin-top: 2px;
      color: var(--muted);
      font-size: 12px;
    }
    .actionActorRow {
      display: grid;
      grid-template-columns: 42px minmax(0, 1fr) auto;
      align-items: center;
      gap: 10px;
      padding: 10px 0;
      border-bottom: 1px solid var(--line);
    }
    .actionActorButton {
      min-height: auto;
      padding: 0;
      border: 0;
      background: transparent;
      color: inherit;
      text-align: left;
    }
    .actionActorButton:hover strong { color: var(--brand); text-decoration: underline; }
    .attachment {
      margin-top: 8px;
      max-width: 360px;
      border: 1px solid var(--line);
      border-radius: 8px;
      overflow: hidden;
      background: #fff;
    }
    .attachment .fileThumb {
      aspect-ratio: 1.9;
      max-height: 150px;
      font-size: 16px;
    }
    .attachment img,
    .attachment video { width: 100%; max-height: 150px; object-fit: contain; display: block; background: #fff; }
    .attachment .fileCard { padding: 8px; }
    .attachment .fileIcon {
      width: 36px;
      height: 36px;
      font-size: 11px;
    }
    .attachment .fileMeta span { font-size: 11px; }
    .attachment .primaryDownload {
      min-height: 30px;
      padding: 0 10px;
      font-size: 12px;
    }
    .attachment .attachmentActions {
      gap: 8px;
      padding: 7px 8px;
    }
    .imageAlbum {
      width: min(420px, 100%);
      margin-top: 8px;
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fff;
    }
    .imageAlbumGrid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 2px;
      background: var(--line);
    }
    .imageAlbumGrid.one { grid-template-columns: 1fr; }
    .imageAlbumGrid.three .imageAlbumItem:first-child { grid-row: span 2; }
    .imageAlbumItem {
      min-width: 0;
      aspect-ratio: 1;
      border: 0;
      border-radius: 0;
      padding: 0;
      background: #eef5f4;
      overflow: hidden;
    }
    .imageAlbumItem img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
    }
    .imageAlbumFooter {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 8px 10px;
    }
    .imageAlbumFooter span { color: var(--muted); font-size: 12px; }
    .imageAlbumDownload {
      min-height: 32px;
      padding: 0 10px;
      font-size: 12px;
    }
    .imageAlbumDownload:disabled {
      cursor: wait;
      opacity: 0.7;
    }
    .readStatus { display: none !important; }
    .imageAttachment {
      width: min(520px, 72vw);
      max-width: 100%;
      border: 0;
      border-radius: 0;
      overflow: visible;
      background: transparent;
    }
    .imageAttachmentPreview {
      width: 100%;
      min-height: auto;
      padding: 0;
      border: 0;
      border-radius: 14px;
      overflow: hidden;
      background: #fff;
      box-shadow: 0 8px 24px rgba(15, 23, 42, .08);
    }
    .imageAttachmentPreview img {
      width: 100%;
      max-height: 430px;
      object-fit: contain;
      display: block;
      background: #fff;
    }
    .aiImageResult.isTransparent .imageAttachmentPreview, .aiImageResult.isTransparent img { background-color: #fff; background-image: linear-gradient(45deg,#e6e9ee 25%,transparent 25%),linear-gradient(-45deg,#e6e9ee 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e6e9ee 75%),linear-gradient(-45deg,transparent 75%,#e6e9ee 75%); background-size:16px 16px; background-position:0 0,0 8px,8px -8px,-8px 0; }
    .imageAttachmentFooter {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 8px 12px;
      padding: 7px 2px 0;
      color: var(--muted);
      font-size: 12px;
    }
    .imageAttachmentFooter .attachmentActions {
      padding: 0;
      border-top: 0;
      gap: 10px;
      background: transparent;
    }
    .imageAttachmentFooter .linkButton,
    .imageAttachmentFooter a {
      color: var(--pl-line-blue-dark, var(--brand-dark));
      font-size: 12px;
      font-weight: 800;
    }
    .imageAlbum {
      width: min(560px, 74vw);
      max-width: 100%;
      border: 0;
      border-radius: 0;
      background: transparent;
    }
    .imageAlbumGrid {
      gap: 5px;
      border-radius: 14px;
      overflow: hidden;
      background: transparent;
      box-shadow: 0 8px 24px rgba(15, 23, 42, .08);
    }
    .imageAlbumGrid.one .imageAlbumItem { aspect-ratio: auto; }
    .imageAlbumItem { background: #fff; }
    .imageAlbumItem img {
      object-fit: contain;
      background: #fff;
    }
    .imageAlbumGrid.one .imageAlbumItem img {
      width: 100%;
      height: auto;
      max-height: 460px;
    }
    .imageAlbumFooter {
      padding: 8px 2px 0;
      background: transparent;
    }
    .fileCard { display: flex; align-items: center; gap: 10px; padding: 10px; }
    .fileIcon {
      width: 44px;
      height: 44px;
      border-radius: 8px;
      display: grid;
      place-items: center;
      background: var(--brand-soft);
      color: var(--brand-dark);
      font-weight: 900;
      text-transform: uppercase;
    }
    .fileMeta { min-width: 0; display: grid; gap: 2px; }
    .fileMeta strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .fileMeta span { color: var(--muted); font-size: 12px; }
    .fileThumb {
      width: 100%;
      aspect-ratio: 1.45;
      display: grid;
      place-items: center;
      overflow: hidden;
      background: #eef5f4;
      color: var(--brand-dark);
      font-size: 22px;
      font-weight: 900;
    }
    .fileThumb img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    .fileSourcePill {
      display: inline-flex;
      width: max-content;
      border-radius: 999px;
      padding: 3px 8px;
      background: #eef5f4;
      color: var(--muted);
      font-size: 12px;
      font-weight: 800;
    }
    .primaryDownload {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 34px;
      border-radius: 8px;
      padding: 0 12px;
      background: var(--brand);
      color: #fff;
      font-weight: 900;
      text-decoration: none;
    }
    .fileDetail {
      display: grid;
      grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr);
      gap: 16px;
      align-items: start;
    }
    .fileDetailPreview {
      min-height: 360px;
      display: grid;
      place-items: center;
      border: 1px solid var(--line);
      border-radius: 8px;
      overflow: hidden;
      background: #f1f7f6;
    }
    .fileDetailPreview img,
    .fileDetailPreview iframe {
      width: 100%;
      height: 100%;
      min-height: 360px;
      border: 0;
      object-fit: contain;
      display: block;
      background: #fff;
    }
    .fileDetailMeta {
      display: grid;
      gap: 10px;
    }
    .fileToolbar {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: center;
    }
    @media (max-width: 900px) {
      .fileDetail { grid-template-columns: 1fr; }
    }
    .attachmentActions {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      padding: 8px 10px;
      border-top: 1px solid var(--line);
      font-size: 13px;
    }
    .linkButton {
      border: 0;
      min-height: auto;
      padding: 0;
      background: transparent;
      color: var(--brand-dark);
      font-size: 13px;
      font-weight: 700;
    }
    .composer {
      border-top: 1px solid var(--line);
      position: relative;
      background: linear-gradient(180deg, rgba(255,255,255,.96), #fff);
      padding: 12px 14px 14px;
      display: grid;
      gap: 10px;
      box-shadow: 0 -12px 28px rgba(15, 23, 42, .04);
    }
    .mentionSuggestions {
      max-height: 210px;
      overflow: auto;
      display: grid;
      gap: 4px;
      padding: 7px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fff;
      box-shadow: 0 12px 30px rgba(0,0,0,.12);
    }
    .mentionOption {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 8px;
      min-height: 38px;
      background: #fff;
      color: var(--text);
      text-align: left;
    }
    .mentionOption:hover { background: var(--brand-soft); }
    .commandSuggestions {
      max-height: 210px;
      overflow: auto;
      display: grid;
      gap: 4px;
      padding: 7px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fff;
      box-shadow: 0 12px 30px rgba(0,0,0,.12);
    }
    .commandOption {
      display: grid;
      grid-template-columns: 104px minmax(0, 1fr);
      align-items: center;
      gap: 8px;
      min-height: 38px;
      padding: 6px 9px;
      background: #fff;
      color: var(--text);
      text-align: left;
    }
    .commandOption:hover,
    .commandOption.isActive { background: var(--brand-soft); }
    .composer.dropActive {
      background: #eefafb;
    }
    .composerDropOverlay {
      position: absolute;
      inset: 8px;
      z-index: 28;
      display: none;
      place-items: center;
      border: 2px dashed var(--brand);
      border-radius: 16px;
      background: rgba(236, 253, 255, .92);
      color: var(--brand-dark);
      font-size: 18px;
      font-weight: 900;
      pointer-events: none;
    }
    .composer.dropActive .composerDropOverlay { display: grid; }
    .replyPreview {
      display: flex;
      justify-content: space-between;
      gap: 8px;
      align-items: center;
      border-left: 3px solid var(--brand);
      padding: 8px 10px;
      border-radius: 8px;
      background: var(--brand-soft);
    }
    .composerTools {
      display: flex;
      align-items: center;
      gap: 6px;
      min-width: 0;
    }
    .composerTools input[type="file"] {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      opacity: 0;
      pointer-events: none;
    }
    .composerIconButton {
      width: 38px;
      height: 38px;
      min-height: 38px;
      padding: 0;
      display: inline-grid;
      place-items: center;
      border-radius: 12px;
      background: #f1f7f7;
      color: var(--brand-dark);
      font-size: 18px;
      line-height: 1;
    }
    .composerIconButton:hover,
    .composerIconButton.active {
      background: var(--brand);
      color: #fff;
    }
    .aiTaskStatus { margin-top: 6px; }
    .aiTaskCard { display: grid; gap: 5px; margin-top: 7px; padding: 7px 8px; border: 1px solid #cceaf5; border-radius: 9px; background: #f7fdff; color: #17698f; font-size: 12px; }
    .aiTaskCard.isBlocked, .aiTaskCard.isFailed { border-color: #f3c4c4; background: #fff7f7; color: #9b3131; }
    .aiTaskCardHeader { display: flex; justify-content: space-between; gap: 8px; font-weight: 800; }
    .aiTaskProgress { height: 5px; overflow: hidden; border-radius: 999px; background: #d9eff7; }
    .aiTaskProgress > span { display: block; height: 100%; border-radius: inherit; background: #33b9e4; transition: width .25s ease; }
    .aiTaskEvidence { margin: 0; padding-left: 17px; font-size: 11px; line-height: 1.35; }
    .aiTaskReason { font-size: 11px; line-height: 1.35; }
    .aiProposal { padding: 6px 7px; border-radius: 7px; background: rgba(255,255,255,.72); font-size: 11px; line-height: 1.38; }
    .aiProposal summary { cursor: pointer; font-weight: 800; }
    .aiApprovalActions { display: flex; flex-wrap: wrap; gap: 6px; }
    .aiApproveButton { background: #147a50; color: #fff; border-color: #147a50; }
    .aiRejectButton { background: #fff; color: #9b3131; border-color: #d99898; }
    .aiImageResult { display: grid; gap: 6px; margin-top: 8px; }
    .aiImageResult img { display: block; width: min(100%, 420px); max-height: 360px; object-fit: cover; border-radius: 8px; }
    .aiImageQuickActions { display: flex; gap: 6px; align-items: center; }
    .aiImageDownloadButton { min-height: 26px; padding: 4px 8px; border: 0; border-radius: 7px; background: #147fa8; color: #fff; font: 800 10px/1 system-ui, sans-serif; cursor: pointer; }
    .aiImageDownloadButton:hover { background: #0d668b; }
    .composerToolSpacer { flex: 1; min-width: 8px; }
    .attachMenuWrap { position: relative; display: inline-flex; }
    .attachMenu {
      position: absolute;
      left: 0;
      bottom: calc(100% + 8px);
      z-index: 35;
      width: min(260px, calc(100vw - 36px));
      display: grid;
      gap: 4px;
      padding: 8px;
      border: 1px solid var(--line);
      border-radius: 14px;
      background: #fff;
      box-shadow: 0 18px 45px rgba(15, 23, 42, .16);
    }
    .attachMenu.hidden { display: none !important; }
    .attachOption {
      display: grid;
      grid-template-columns: 32px minmax(0, 1fr);
      align-items: center;
      gap: 10px;
      min-height: 46px;
      padding: 8px 10px;
      border-radius: 10px;
      background: transparent;
      color: var(--text);
      text-align: left;
    }
    .attachOption:hover { background: var(--brand-soft); }
    .attachOption strong,
    .attachOption small {
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .attachOption small { color: var(--muted); font-size: 12px; }
    .emojiPicker {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      max-height: 142px;
      overflow: auto;
      padding: 9px;
      border: 1px solid var(--line);
      border-radius: 14px;
      background: #fff;
      box-shadow: 0 12px 30px rgba(15, 23, 42, .08);
    }
    .emojiPicker.hidden { display: none !important; }
    .emojiPicker button {
      width: 34px;
      height: 34px;
      min-height: 34px;
      padding: 0;
      border-radius: 10px;
      background: #f8fbfb;
      font-size: 18px;
    }
    .emojiPicker button:hover { background: var(--brand-soft); }
    .stickerPicker {
      grid-template-columns: repeat(4, minmax(82px, 1fr));
      gap: 8px;
      max-height: 340px;
      overflow: auto;
      padding: 10px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #f7fbfa;
    }
    .stickerPicker:not(.hidden) { display: grid; }
    .stickerPickerHeader {
      grid-column: 1 / -1;
      padding: 0 2px 4px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 900;
    }
    .stickerOption {
      display: grid;
      place-items: center;
      gap: 4px;
      min-height: 116px;
      padding: 7px;
      border: 1px solid transparent;
      background: #fff;
      color: var(--text);
    }
    .stickerOption:hover,
    .stickerOption:focus-visible {
      border-color: var(--brand);
      background: var(--brand-soft);
    }
    .stickerOptionEmoji { font-size: 34px; line-height: 1; }
    .stickerOptionImage {
      width: 78px;
      height: 78px;
      object-fit: contain;
      display: block;
    }
    .stickerOptionLabel { font-size: 12px; font-weight: 800; }
    .messageSticker {
      width: 180px;
      min-height: 150px;
      margin-top: 8px;
      display: grid;
      place-items: center;
      align-content: center;
      gap: 6px;
      border: 1px solid #9edce2;
      border-radius: 8px;
      background: #e9fafb;
      color: #075f69;
      text-align: center;
    }
    .messageStickerEmoji { font-size: 68px; line-height: 1; }
    .messageSticker.officialSticker {
      width: min(230px, 70vw);
      min-height: 0;
      padding: 8px;
      background: #fff;
    }
    .messageStickerImage {
      width: 100%;
      max-height: 210px;
      object-fit: contain;
      display: block;
    }
    .messageSticker strong { font-size: 18px; }
    .messageSticker small { color: var(--muted); font-size: 10px; font-weight: 900; }
    .fileName { color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .selectedFilePreview {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
      gap: 8px;
    }
    .selectedFilePreview.hidden { display: none !important; }
    .filePreviewCard {
      min-width: 0;
      display: grid;
      grid-template-columns: 42px minmax(0, 1fr) auto;
      align-items: center;
      gap: 10px;
      padding: 9px 10px;
      border: 1px solid var(--line);
      border-radius: 14px;
      background: #f8fbfb;
      box-shadow: 0 6px 18px rgba(15, 23, 42, .04);
    }
    .filePreviewBadge {
      width: 42px;
      height: 42px;
      display: grid;
      place-items: center;
      border-radius: 12px;
      background: var(--brand-soft);
      color: var(--brand-dark);
      font-size: 11px;
      font-weight: 900;
      text-transform: uppercase;
    }
    .filePreviewMeta { min-width: 0; display: grid; gap: 2px; }
    .filePreviewMeta strong,
    .filePreviewMeta small {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .filePreviewMeta small { color: var(--muted); font-size: 12px; }
    .filePreviewRemove {
      width: 32px;
      height: 32px;
      min-height: 32px;
      padding: 0;
      border-radius: 10px;
      background: #fee2e2;
      color: #b42318;
      font-weight: 900;
    }
    .uploadQueue {
      display: grid;
      gap: 6px;
      font-size: 12px;
      color: var(--muted);
    }
    .uploadProgress {
      display: grid;
      gap: 4px;
      padding: 8px 10px;
      border-radius: 8px;
      background: #eef7f6;
    }
    .uploadProgressBar {
      height: 6px;
      overflow: hidden;
      border-radius: 999px;
      background: #d4e6e2;
    }
    .uploadProgressBar span {
      display: block;
      height: 100%;
      width: 0;
      background: var(--brand);
      transition: width .18s ease;
    }
    .composerLine {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 8px;
      align-items: end;
      padding: 7px;
      border: 1px solid var(--line);
      border-radius: 18px;
      background: #f8fbfb;
      transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
    }
    .composerLine:focus-within {
      border-color: rgba(6, 182, 212, .7);
      background: #fff;
      box-shadow: 0 0 0 4px rgba(6, 182, 212, .12);
    }
    #messageInput {
      min-height: 44px;
      max-height: 150px;
      border: 0;
      background: transparent;
      resize: none;
      box-shadow: none;
    }
    #messageInput:focus { outline: none; box-shadow: none; }
    #sendButton {
      min-width: 54px;
      min-height: 44px;
      border-radius: 14px;
    }

    .infoPane {
      border-left: 1px solid var(--line);
      padding: 16px;
    }
    .sideSection { display: grid; gap: 10px; }
    .sideList { display: grid; gap: 8px; }
    .sideItem {
      padding: 8px;
      border-radius: 8px;
      background: #f2f7f6;
      overflow-wrap: anywhere;
      font-size: 13px;
      line-height: 1.35;
    }
    .mediaGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
    .mediaGrid a { display: block; aspect-ratio: 1; border-radius: 8px; overflow: hidden; background: #edf4f3; }
    .mediaGrid img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .mediaCenterGrid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
      gap: 12px;
    }
    .mediaTile, .fileTile {
      border: 1px solid var(--line);
      border-radius: 8px;
      overflow: hidden;
      background: var(--panel);
    }
    .mediaThumb {
      position: relative;
      display: grid;
      place-items: center;
      aspect-ratio: 1.35;
      background: #eef5f4;
      color: var(--brand-dark);
      font-weight: 900;
    }
    .mediaThumb img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    .mediaBody { display: grid; gap: 6px; padding: 10px; }
    .mediaActions { display: flex; flex-wrap: wrap; gap: 10px; font-size: 13px; }
    .fileFilters {
      display: grid;
      gap: 10px;
    }
    .fileCategoryTabs {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }
    .fileCategoryTabs button {
      min-height: 34px;
      padding: 0 12px;
      background: #eef5f4;
      color: var(--text);
    }
    .fileCategoryTabs button.active {
      background: var(--brand);
      color: #fff;
    }
    .fileListFooter {
      display: flex;
      justify-content: center;
      padding: 10px 0 2px;
    }
    .fileSkeleton {
      min-height: 230px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: linear-gradient(90deg, #f2f7f6 25%, #e7f0ef 37%, #f2f7f6 63%);
      background-size: 400% 100%;
      animation: shimmer 1.2s ease-in-out infinite;
    }
    @keyframes shimmer {
      0% { background-position: 100% 0; }
      100% { background-position: 0 0; }
    }
    .safeBadge {
      display: inline-flex;
      align-items: center;
      min-height: 22px;
      padding: 2px 8px;
      border-radius: 999px;
      background: var(--brand-soft);
      color: var(--brand-dark);
      font-size: 12px;
      font-weight: 800;
    }

    .moduleView {
      grid-column: 2 / 5;
      min-width: 0;
      min-height: 0;
      height: 100%;
      overflow: hidden;
      background: #f7faf9;
      display: grid;
      grid-template-rows: 64px minmax(0, 1fr);
    }
    .moduleHead {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 0 18px;
      border-bottom: 1px solid var(--line);
      background: var(--panel);
    }
    .moduleHead h2 { margin: 0; font-size: 19px; }
    .moduleBody {
      min-height: 0;
      overflow: auto;
      overscroll-behavior: contain;
      padding: 18px;
      display: grid;
      align-content: start;
      gap: 14px;
    }
    .moduleGrid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
      gap: 12px;
    }
    .moduleCard {
      display: grid;
      gap: 8px;
      min-height: 104px;
      padding: 12px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--panel);
    }
    .moduleCard h3 { margin: 0; font-size: 15px; }
    .moduleCard strong { color: var(--brand-dark); font-size: 24px; }
    .profileHero {
      overflow: visible;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--panel);
    }
    .profileCover {
      min-height: 220px;
      background: linear-gradient(135deg, #0b9aaa, #d6f3f1);
  background-size: cover, contain;
  background-color: #11162b;
      background-position: center;
      border-radius: 8px 8px 0 0;
    }
    .profileSummary {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto;
      gap: 14px;
      align-items: start;
      min-height: 154px;
      padding: 0 16px 20px;
      margin-top: -34px;
      background: var(--panel);
      border-radius: 0 0 8px 8px;
    }
    .profileSummary > div:not(.avatar) {
      min-width: 0;
      padding-top: 42px;
    }
    .profileSummary .avatar {
      width: 104px;
      height: 104px;
      border: 4px solid #fff;
      font-size: 22px;
      align-self: start;
    }
    .profileStatusCard {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      padding: 14px 16px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--panel);
    }
    .profileStatusMain {
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 0;
    }
    .profileStatusText {
      display: grid;
      gap: 3px;
      min-width: 0;
    }
    .profileStatusText strong { overflow-wrap: anywhere; }
    .profileFacts {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 6px;
    }
    .profileMiniFriendsGame { margin-top:14px; padding:14px; border:1px solid #bde9f7; border-radius:14px; background:linear-gradient(135deg,#f7fdff,#edf8ff); }
    .profileMiniFriendsGame header { display:flex; justify-content:space-between; align-items:center; gap:12px; color:#17688d; }
    .profileMiniFriendsGame header strong, .profileMiniFriendsGame header small { display:block; }
    .profileMiniFriendsGame header small { margin-top:2px; color:#5d8295; }
    .profileMiniFriendsGame button { border:1px solid #9fdcf4; border-radius:8px; padding:6px 9px; background:#fff; color:#17688d; font-weight:800; cursor:pointer; }
    .profileMiniGameHub { display:grid; gap:8px; margin:10px 0; padding:11px; border:1px solid #9fdded; border-radius:15px; background:radial-gradient(circle at 88% 10%,#fff7b1,transparent 22%),linear-gradient(130deg,#0b6789,#157aa2 54%,#31559b); color:#f4fdff; box-shadow:0 9px 23px #0e5d7b22; }
    .profileMiniHubHead { display:flex; align-items:center; justify-content:space-between; gap:10px; }.profileMiniHubHead > div { display:grid; gap:2px; }.profileMiniHubHead b { letter-spacing:.08em; font-size:12px; }.profileMiniHubHead small,.profileMiniHubHead > span { color:#d7f4ff; font-size:10px; }.profileMiniHubHead > span { padding:4px 7px; border:1px solid #ffffff55; border-radius:999px; background:#ffffff17; font-weight:800; }
    .profileMiniGameHub nav { display:flex; gap:5px; overflow:auto; padding-bottom:1px; }.profileMiniGameHub nav button { flex:0 0 auto; border-color:#b9f4ff; background:#ffffffeb; color:#185b7d; font-size:11px; }.profileMiniGameHub nav button.active { border-color:#fff0a8; background:linear-gradient(135deg,#fff8c5,#ffc85e); color:#65400f; box-shadow:0 3px 10px #182f5b55; }
    .profileMiniHQSpotlight { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:9px 10px; border:1px solid #ffffff5c; border-radius:11px; background:linear-gradient(105deg,#ffffff18,#fff4b72e); }.profileMiniHQSpotlight>div { display:grid; min-width:0; gap:2px; }.profileMiniHQSpotlight small { color:#cceeff; font-size:9px; font-weight:800; }.profileMiniHQSpotlight b { overflow:hidden; font-size:13px; text-overflow:ellipsis; white-space:nowrap; }.profileMiniHQSpotlight span { overflow:hidden; color:#e2f8ff; font-size:10px; text-overflow:ellipsis; white-space:nowrap; }.profileMiniHQSpotlight button { flex:0 0 auto; border-color:#fff0a8!important; background:#fff8cf!important; color:#68431a!important; font-size:10px!important; }
    .profileMiniHQHint { margin:0; color:#d5f3fb; font-size:10px; text-align:center; }
    .profileMiniHQEvents { display:grid; gap:6px; padding:7px; border:1px solid #ffffff55; border-radius:10px; background:linear-gradient(110deg,#ffffff13,#ffe78924); }.profileMiniHQEvents>header { display:flex; align-items:center; justify-content:space-between; gap:8px; }.profileMiniHQEvents>header>div { display:grid; gap:1px; }.profileMiniHQEvents>header b { font-size:11px; }.profileMiniHQEvents>header small { color:#d8f5ff; font-size:8px; }.profileMiniHQEvents>header>span { padding:3px 6px; border-radius:999px; background:#fff6c7; color:#6a4614; font-size:8px; font-weight:900; }.profileMiniHQEvents>div { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; }.profileMiniHQEvents article { display:flex; min-width:0; align-items:center; justify-content:space-between; gap:7px; padding:6px 7px; border:1px solid #ffffff42; border-radius:8px; background:#ffffff14; }.profileMiniHQEvents article.monthly { background:linear-gradient(110deg,#8c61d044,#f48eb53d); }.profileMiniHQEvents article.claimed { opacity:.72; }.profileMiniHQEvents article>div { display:grid; min-width:0; gap:1px; }.profileMiniHQEvents article small { color:#d7f3ff; font-size:8px; }.profileMiniHQEvents article b,.profileMiniHQEvents article span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.profileMiniHQEvents article b { font-size:10px; }.profileMiniHQEvents article span { color:#f3fbff; font-size:8px; }.profileMiniHQEvents article em { color:#fff1a3; font-size:8px; font-style:normal; font-weight:800; }.profileMiniHQEvents article button { flex:0 0 auto; padding:4px 6px!important; border-color:#fff1a7!important; background:#fff9d7!important; color:#704b17!important; font-size:8px!important; }.profileMiniHQEvents article button:disabled { opacity:.7; }
    .profileMiniLiveOpsHero { position:relative; isolation:isolate; display:block!important; min-height:190px; padding:16px!important; overflow:hidden; border-color:#f7d77b!important; background:linear-gradient(90deg,#071d3fec 0%,#092b51dc 45%,#0c2f5c20 72%),url('/assets/mini-friends/liveops-storybook-festival-banner-v1.png') center/cover!important; box-shadow:inset 0 1px #ffffff3d,0 8px 20px #06142f55; }.profileMiniLiveOpsHero::after { position:absolute; z-index:-1; inset:0; content:""; background:linear-gradient(90deg,#0a2145b8,#172c64aa 47%,transparent 78%); }.profileMiniLiveOpsHeroCopy { display:grid!important; width:min(62%,620px); gap:6px!important; }.profileMiniLiveOpsKicker { width:max-content; max-width:100%; padding:4px 7px; border:1px solid #ffe89c99; border-radius:999px; background:#151743a8; color:#fff3b3!important; font-size:9px!important; font-weight:900; letter-spacing:.08em; }.profileMiniLiveOpsHero h2 { margin:0; color:#fff!important; font-size:20px; line-height:1.05; text-shadow:0 2px 8px #000a; }.profileMiniLiveOpsHero p { max-width:48ch; margin:0; color:#e5f7ff; font-size:10px; line-height:1.4; }.profileMiniLiveOpsHero ol { display:flex; flex-wrap:wrap; gap:5px; padding:0; margin:1px 0; list-style:none; }.profileMiniLiveOpsHero li { display:inline-flex; align-items:center; gap:4px; padding:4px 6px; border:1px solid #ffffff3b; border-radius:999px; background:#061e3c8c; color:#f1fbff; font-size:8px; }.profileMiniLiveOpsHero li>b { display:grid; place-items:center; width:14px; height:14px; border-radius:50%; background:#f5c85d; color:#51330a; font-size:8px; }.profileMiniLiveOpsRewards { display:flex!important; align-items:baseline; gap:6px; color:#fff1aa; }.profileMiniLiveOpsRewards span { color:#ffed9b!important; font-size:9px!important; font-weight:800; }.profileMiniLiveOpsRewards b { overflow:visible!important; color:#fff!important; font-size:11px!important; text-shadow:0 1px 4px #0009; white-space:normal!important; }.profileMiniLiveOpsHero button { width:max-content; padding:7px 11px!important; border-color:#fff0a5!important; border-radius:9px!important; background:linear-gradient(135deg,#fff8c4,#f6bf51)!important; color:#56340a!important; box-shadow:0 4px 12px #0005; font-size:10px!important; }.profileMiniLiveOpsHero.claimed button { background:#e9f8ee!important; color:#2c7147!important; }
    .profileMiniRoomReturn { position:sticky; z-index:5; top:8px; margin:8px 0; border-color:#9fdded!important; background:#f9feff!important; color:#17688d!important; box-shadow:0 4px 12px #17688d22; font-size:11px!important; }
    .profileMiniFriendsGame [hidden] { display:none!important; }
    @media (min-width:920px) { .profileMiniFriendsGame[data-profile-mini-route="home"] { box-sizing:border-box; min-height:calc(100dvh - 235px); }.profileMiniFriendsGame[data-profile-mini-route="home"] .profileMiniGameHub { margin-bottom:0; }.profileMiniFriendsGame[data-profile-mini-route="home"] > header { margin-bottom:0; } }
    @media (max-width:700px) { .profileMiniHQEvents>div { grid-template-columns:1fr; }.profileMiniHQEvents article { align-items:flex-start; }.profileMiniHQEvents article button { align-self:center; }.profileMiniLiveOpsHero { min-height:210px; padding:13px!important; background-position:64% center!important; }.profileMiniLiveOpsHeroCopy { width:78%; }.profileMiniLiveOpsHero h2 { font-size:17px; }.profileMiniLiveOpsHero ol { display:grid; gap:3px; }.profileMiniLiveOpsHero li { width:max-content; max-width:100%; } }
    .profileMiniSessionBrief { display:grid; gap:7px; margin:10px 0; padding:10px; border:1px solid #f0ca7c; border-radius:14px; background:linear-gradient(135deg,#fffdf2,#fff4d6); color:#65491e; }.profileMiniSessionBrief header { display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; }.profileMiniSessionBrief header div { display:grid; gap:2px; }.profileMiniSessionBrief header b { font-size:13px; }.profileMiniSessionBrief header small { color:#8c7147; font-size:10px; }.profileMiniSessionBrief header>span { padding:4px 7px; border-radius:999px; background:#fff; color:#876222; font-size:9px; font-weight:800; }.profileMiniSessionBrief>div { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }.profileMiniSessionBrief article { display:grid; gap:2px; padding:7px; border:1px solid #ebd6a7; border-radius:9px; background:#fffaf0; }.profileMiniSessionBrief article.ready { border-color:#8ecb9c; background:#f1fff4; }.profileMiniSessionBrief article.locked { border-color:#c9c5c0; background:#fbfaf7; }.profileMiniSessionBrief article b { font-size:10px; }.profileMiniSessionBrief article small { color:#806f56; font-size:9px; line-height:1.35; }
    .profileMiniMasteryBoard { display:grid; gap:8px; margin:10px 0; padding:11px; border:1px solid #e5b2ff; border-radius:15px; background:radial-gradient(circle at 86% 0,#fff1a6,transparent 25%),linear-gradient(135deg,#fff8ff,#f5ecff 52%,#e9f8ff); color:#48305c; box-shadow:0 8px 22px #8d5baa22; }.profileMiniMasteryBoard>header { display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; }.profileMiniMasteryBoard header div { display:grid; gap:2px; }.profileMiniMasteryBoard header b { color:#77458e; font-size:14px; }.profileMiniMasteryBoard header small,.profileMiniMasteryBoard footer { color:#786080; font-size:10px; }.profileMiniMasteryBoard>header>span { padding:4px 8px; border:1px solid #d4a9e8; border-radius:999px; background:#fff; color:#7a428b; font-size:10px; font-weight:800; }.profileMiniMasteryGrid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }.profileMiniMasteryGrid article { display:grid; gap:7px; min-width:0; padding:8px; border:1px solid #d9c5ef; border-radius:11px; background:#ffffffc9; }.profileMiniMasteryGrid article.duck { border-color:#ffbddb; background:#fff8fc; }.profileMiniMasteryGrid article.pup { border-color:#f1d36e; background:#fffdf2; }.profileMiniMasteryGrid article>header { display:flex; align-items:center; gap:7px; }.profileMiniMasteryGrid article>header>span { display:grid; place-items:center; width:29px; height:29px; border-radius:50%; background:#ede0fa; font-size:16px; }.profileMiniMasteryGrid article.duck>header>span { background:#ffe1ef; }.profileMiniMasteryGrid article.pup>header>span { background:#fff1bb; }.profileMiniMasteryGrid article header div { display:grid; min-width:0; gap:1px; }.profileMiniMasteryGrid article header b { color:#553567; font-size:11px; }.profileMiniMasteryGrid article header small { overflow:hidden; color:#8b7096; font-size:9px; text-overflow:ellipsis; white-space:nowrap; }.profileMiniMasteryGrid ol { display:grid; gap:5px; padding:0; margin:0; list-style:none; }.profileMiniMasteryGrid li { display:flex; gap:6px; align-items:flex-start; padding:5px; border-radius:8px; background:#f3edf8; }.profileMiniMasteryGrid li.unlocked { background:linear-gradient(100deg,#fef1a8,#fff9dd); }.profileMiniMasteryGrid li>i { display:grid; flex:0 0 25px; place-items:center; min-height:25px; border-radius:50%; background:#c4b1d2; color:#fff; font-size:9px; font-style:normal; font-weight:900; }.profileMiniMasteryGrid li.unlocked>i { background:#6da64b; }.profileMiniMasteryGrid li>div { display:grid; min-width:0; gap:1px; }.profileMiniMasteryGrid li b { color:#604170; font-size:10px; }.profileMiniMasteryGrid li small,.profileMiniMasteryGrid li em { color:#826d8c; font-size:8px; font-style:normal; }.profileMiniMasteryGrid .profileMiniPrestige { display:grid; gap:2px; padding:6px; border:1px solid #d9b6f5; border-radius:8px; background:linear-gradient(110deg,#fbf2ff,#eef7ff); text-align:left; }.profileMiniMasteryGrid .profileMiniPrestige.max { border-color:#f2c45e; background:linear-gradient(110deg,#fff4ba,#fffdf0); }.profileMiniMasteryGrid .profileMiniPrestige b { color:#7b468e; font-size:10px; }.profileMiniMasteryGrid .profileMiniPrestige small { color:#846b8c; font-size:8px; line-height:1.35; }.profileMiniMasteryBoard footer { padding-top:2px; text-align:center; }
    .profileMiniDailyJourney { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }.profileMiniDailyJourney button { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:6px; min-width:0; padding:7px!important; border-color:#d8f6ff!important; background:#ffffffeb!important; color:#275a74!important; text-align:left; }.profileMiniDailyJourney button:hover { transform:translateY(-2px); }.profileMiniDailyJourney button i { display:grid; place-items:center; width:21px; height:21px; border-radius:50%; background:#d7eff7; color:#2a6683; font-size:11px; font-style:normal; }.profileMiniDailyJourney button.ready i { background:#ffcd64; color:#79420b; }.profileMiniDailyJourney button span { display:grid; min-width:0; gap:1px; }.profileMiniDailyJourney button b { font-size:10px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.profileMiniDailyJourney button small { color:#698195; font-size:9px; line-height:1.2; }.profileMiniDailyJourney button em { color:#17749a; font-size:10px; font-style:normal; font-weight:900; }
    .profileMiniInventory { display:grid; gap:6px; margin:10px 0; padding:9px; border:1px solid #f3d3a0; border-radius:12px; background:linear-gradient(110deg,#fffdf3,#fff6db); color:#805e1d; }
    .profileMiniInventory > strong { display:flex; align-items:baseline; justify-content:space-between; gap:8px; font-size:12px; }
    .profileMiniInventory > strong small { color:#9b7845; font-weight:700; }
    .profileMiniInventory > div { display:flex; flex-wrap:wrap; gap:6px; }
    .profileMiniInventoryItem { display:inline-flex; align-items:center; gap:4px; padding:4px 7px; border:1px solid #efd9a9; border-radius:999px; background:#fff; color:#75572c; font-size:11px; }
    .profileMiniInventoryItem b { font-size:15px; } .profileMiniInventoryItem strong { color:#b66242; }
    .profileMiniInventoryItem.empty { opacity:.54; filter:grayscale(.55); }
    .profileMiniEconomy { display:grid; gap:7px; margin:8px 0; padding:9px; border:1px solid #ffd46b; border-radius:12px; background:radial-gradient(circle at 10% 0,#fff6b6,transparent 38%),linear-gradient(120deg,#7b4c21,#ba7b2e); box-shadow:0 7px 18px rgba(119,75,25,.18); color:#fff9dd; }.profileMiniEconomy header { display:flex; align-items:center; justify-content:space-between; gap:8px; }.profileMiniEconomy header strong { font-size:14px; }.profileMiniEconomy header strong b { margin-left:4px; color:#fff0a2; font-size:18px; text-shadow:0 1px 4px #51310c; }.profileMiniEconomy header small { color:#fff0c0; font-size:10px; }.profileMiniShop { display:grid; grid-template-columns:repeat(auto-fit,minmax(118px,1fr)); gap:6px; }.profileMiniShopItem { display:grid; grid-template-columns:auto 1fr; align-items:center; gap:1px 6px; min-height:56px; padding:6px !important; border:1px solid #fff0ae !important; border-radius:10px !important; background:linear-gradient(135deg,#fffdf2,#ffe8a3) !important; color:#70451d !important; text-align:left; transition:transform .18s ease,filter .18s ease; }.profileMiniShopItem:hover:not(:disabled) { transform:translateY(-3px) scale(1.025); filter:brightness(1.05); }.profileMiniShopItem b { grid-row:1 / 3; font-size:22px; }.profileMiniShopItem span { font-size:10px; font-weight:900; }.profileMiniShopItem small { font-size:8px; color:#926d44; line-height:1.15; }.profileMiniShopItem em { grid-column:2; color:#8d5207; font-size:10px; font-style:normal; font-weight:900; }.profileMiniShopItem.pack { background:linear-gradient(135deg,#fff4fa,#d9d0ff) !important; }.profileMiniShopItem.item { background:linear-gradient(135deg,#e9fff7,#c6f5db) !important; }.profileMiniShopItem:disabled { opacity:.5; filter:grayscale(.4); }
    .profileMiniShopTabs{display:flex;flex-wrap:wrap;gap:5px}.profileMiniShopTabs button{padding:4px 8px!important;border-radius:999px!important;background:#fff7d6!important;color:#70451d!important;font-size:10px!important}.profileMiniShopTabs button.active{background:#70451d!important;color:#fff8dc!important}.profileMiniWalletHistory{border-top:1px dashed #ffe6a4;padding-top:5px;color:#fff8db;font-size:10px}.profileMiniWalletHistory summary{cursor:pointer;font-weight:800}.profileMiniWalletHistory ul{display:grid;gap:3px;margin:5px 0 0;padding:0;list-style:none}.profileMiniWalletHistory li{display:flex;justify-content:space-between;gap:10px}.profileMiniWalletHistory li.up b{color:#d4ffaf}.profileMiniWalletHistory li.down b{color:#ffd1ae}.profileMiniNextSteps{display:grid;gap:4px;margin:8px 0;padding:8px 10px;border:1px solid #bee6ff;border-radius:12px;background:linear-gradient(100deg,#effaff,#fff8e7)}.profileMiniNextSteps b{color:#176f96;font-size:12px}.profileMiniNextSteps div{display:flex;gap:5px;flex-wrap:wrap}.profileMiniNextSteps span{padding:4px 7px;border-radius:999px;background:#fff;color:#50667d;font-size:10px;box-shadow:0 1px 4px #b9d9e755}.profileMiniCardMarket{display:grid;gap:6px;margin:8px 0;padding:8px;border:1px solid #8de7f8;border-radius:12px;background:radial-gradient(circle at top right,#573fb9,#15264f 62%);color:#f8fdff}.profileMiniCardMarket header{display:flex;justify-content:space-between;gap:8px}.profileMiniCardMarket>small{color:#c9e9ff;font-size:10px}.profileMiniCardMarket>div{display:grid;grid-template-columns:repeat(auto-fit,minmax(145px,1fr));gap:6px}.profileMiniCardMarket button{display:grid;gap:2px;padding:6px!important;border:1px solid #90e9f8!important;border-radius:9px!important;background:#edfaff!important;color:#16355b!important;text-align:left!important}.profileMiniCardMarket button.rare{background:#f3ecff!important;border-color:#c9a1ff!important}.profileMiniCardMarket button.champion{background:#e6fff5!important;border-color:#71e9c1!important}.profileMiniCardMarket button.legendary{background:linear-gradient(135deg,#fff6b8,#d99518)!important;border-color:#ffe78a!important;color:#5c3500!important}.profileMiniCardMarket button small{font-size:9px}.profileMiniCardMarket button:disabled{opacity:.48;filter:grayscale(.25)}
    .profileMiniEconomyLedger{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;padding:6px;border:1px solid #fff0b0;border-radius:9px;background:#57350d66}.profileMiniEconomyLedger span{display:grid;gap:1px;font-size:8px;color:#ffedb1}.profileMiniEconomyLedger b{font-size:12px;color:#fff}.profileMiniEconomyLedger small{grid-column:1/-1;color:#fff7d6;font-size:9px}.profileMiniProDirector,.profileMiniDeckCoach{display:grid;gap:7px;padding:9px;border:1px solid #9adcec;border-radius:11px;background:linear-gradient(135deg,#effcff,#fff8df)}.profileMiniProDirector>header,.profileMiniDeckCoach>header{display:flex;align-items:center;justify-content:space-between;gap:7px}.profileMiniProDirector header div{display:grid;gap:1px}.profileMiniProDirector header b,.profileMiniDeckCoach header b{color:#176c8d;font-size:12px}.profileMiniProDirector header small{color:#5e7b8c;font-size:9px}.profileMiniProDirector header>span,.profileMiniDeckCoach header>span{padding:3px 6px;border-radius:999px;background:#fff;color:#176c8d;font-size:9px;font-weight:800}.profileMiniProDirector>div{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.profileMiniProDirector button{display:grid;grid-template-columns:auto 1fr;gap:2px 5px;padding:7px!important;border:1px solid #b8dbe5!important;background:#fff!important;color:#235f79!important;text-align:left}.profileMiniProDirector button.ready{border-color:#8dcb9d!important;background:#f1fff4!important}.profileMiniProDirector button.locked{opacity:.7}.profileMiniProDirector button i{grid-row:1/3;font-style:normal;font-size:17px}.profileMiniProDirector button b{font-size:10px}.profileMiniProDirector button small{font-size:8px;color:#587283;line-height:1.25}.profileMiniProDirector button em{grid-column:2;color:#92660f;font-size:8px;font-style:normal;font-weight:800}.profileMiniDeckCoach>div{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.profileMiniDeckCoach article{display:grid;gap:2px;padding:6px;border:1px solid #d0d9ee;border-radius:8px;background:#fff}.profileMiniDeckCoach article.ready{border-color:#9dce86;background:#f3fff0}.profileMiniDeckCoach article.blocker{border-color:#ffb8b8;background:#fff5f5}.profileMiniDeckCoach article.warning{border-color:#f2d58c;background:#fffbed}.profileMiniDeckCoach article b{font-size:9px;color:#36536e}.profileMiniDeckCoach article small,.profileMiniDeckCoach footer{font-size:8px;line-height:1.3;color:#668094}.profileMiniDeckCoach footer{padding:5px;border-radius:7px;background:#eaf6ff}
    .profileMiniResultCard { display:grid; gap:6px; margin:10px 0; padding:10px; border:1px solid #b8ead3; border-radius:12px; background:linear-gradient(110deg,#f4fff8,#edfff6); color:#37765a; box-shadow:0 5px 14px rgba(64,143,95,.1); animation:profileMiniResultIn .35s ease both; }
    .profileMiniResultCard > div { display:flex; flex-wrap:wrap; gap:5px; }
    .profileMiniResultCard span { padding:3px 6px; border-radius:999px; background:#fff; font-size:11px; font-weight:800; }
    .profileMiniResultCard span.up { color:#257553; } .profileMiniResultCard span.down { color:#a24d59; }
    .profileMiniFriendEvent { margin:10px 0; padding:8px; border-radius:9px; background:#fff5c9; color:#735000; font-size:12px; }
    .profileMiniHouse { position:relative; height:330px; margin:10px 0; overflow:hidden; border:1px solid #e9b8b2; border-radius:16px; background:url('/assets/mini-friends/mini-friends-house-room.png') center/cover no-repeat; box-shadow:0 10px 26px rgba(133,78,101,.18); }
    .profileMiniHouse.room-garden { background-position:center 42%; box-shadow:inset 0 0 0 999px rgba(145,244,183,.12),0 10px 26px rgba(88,146,99,.22); }
    .profileMiniHouse.room-arcade { background-position:center 58%; box-shadow:inset 0 0 0 999px rgba(134,103,255,.13),0 10px 26px rgba(83,59,154,.22); }
    .profileMiniHouse.room-nursery { background-position:center 40%; box-shadow:inset 0 0 0 999px rgba(255,211,235,.16),0 10px 26px rgba(168,99,129,.22); }
    .profileMiniHouse.night::after { content:''; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(180deg,rgba(40,48,105,.48),rgba(69,37,91,.18)); mix-blend-mode:multiply; }
    .profileMiniHouse.evening::after { content:''; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(180deg,rgba(247,139,110,.16),transparent 65%); }
    .profileMiniFriendsGame .profileMiniHouseFriend { position:absolute; z-index:3; bottom:49px; width:100px; height:130px; min-height:0; padding:0; border:0 !important; background:transparent !important; box-shadow:none !important; color:#694d68 !important; font-size:10px; font-weight:800; cursor:pointer; filter:drop-shadow(0 7px 6px rgba(65,42,35,.28)); transition:transform .18s ease; }
    .profileMiniHouseFriend:hover { transform:translateY(-8px) scale(1.06); }
    .profileMiniHouseFriend model-viewer { display:block; width:100%; height:109px; background:transparent; --poster-color:transparent; pointer-events:none; }
    .profileMiniHouseFriend.bear { left:25%; } .profileMiniHouseFriend.duck { left:46%; } .profileMiniHouseFriend.pup { left:68%; }
    .profileMiniHouse.room-garden .profileMiniHouseFriend { animation:profileMiniGardenWalk 8s ease-in-out infinite; }.profileMiniHouse.room-garden .profileMiniHouseFriend.duck { animation-delay:-2.4s; }.profileMiniHouse.room-garden .profileMiniHouseFriend.pup { animation-delay:-5.1s; }
    .profileMiniHouse.room-arcade .profileMiniHouseFriend { animation:profileMiniArcadeBounce 1.7s ease-in-out infinite; }.profileMiniHouse.room-arcade .profileMiniHouseFriend.duck { animation-delay:-.55s; }.profileMiniHouse.room-arcade .profileMiniHouseFriend.pup { animation-delay:-1.1s; }
    .profileMiniHouse.room-nursery .profileMiniHouseFriend { animation:profileMiniNurserySway 3.4s ease-in-out infinite; }.profileMiniHouse.room-nursery .profileMiniHouseFriend.duck { animation-delay:-1.15s; }.profileMiniHouse.room-nursery .profileMiniHouseFriend.pup { animation-delay:-2.3s; }
    .profileMiniFriendsGame button.profileMiniHouseFriend,
    .profileMiniFriendsGame button.profileMiniHouseFriend:hover,
    .profileMiniFriendsGame button.profileMiniHouseFriend:focus-visible { background:transparent !important; border:0 !important; box-shadow:none !important; }
    .profileMiniHouseFriend.is-reacting { animation:profileMiniFriendCheer .56s ease-in-out 4; }
    .profileMiniEggNest { position:absolute; z-index:4; right:13px; bottom:41px; display:grid; justify-items:center; width:72px; color:#865b78; font-size:10px; font-weight:800; filter:drop-shadow(0 5px 5px rgba(96,52,70,.22)); }
    .profileMiniEggNest.duck { right:92px; } .profileMiniEggNest.bear { right:171px; }
    .profileMiniEggNest model-viewer { width:70px; height:78px; background:transparent; --poster-color:transparent; pointer-events:none; }
    .profileMiniEggNest span { position:static; padding:2px 5px; border-radius:999px; background:#fff9; font-size:9px; }
    .profileMiniFriendsGame .profileMiniHouseBaby { position:absolute; z-index:4; display:grid; justify-items:center; width:68px; min-height:0; padding:0 !important; border:0 !important; appearance:none; background:transparent !important; background-color:transparent !important; box-shadow:none !important; color:#744e68 !important; font-size:9px; filter:drop-shadow(0 5px 5px rgba(67,42,50,.22)); animation:profileMiniBabyWander 3.4s ease-in-out infinite; cursor:pointer; user-select:none; }
    .profileMiniFriendsGame .profileMiniHouseBaby:hover { background:transparent !important; background-color:transparent !important; }
    .profileMiniFriendsGame .profileMiniHouseBaby:focus-visible { outline:2px solid #fff3a2; outline-offset:3px; border-radius:8px; }
    .profileMiniHouseBaby model-viewer, .profileMiniBabyModel model-viewer { background:transparent !important; background-color:transparent !important; --poster-color:rgba(0,0,0,0); pointer-events:none; }
    .profileMiniHouseBaby model-viewer::part(default-ar-button), .profileMiniHouseBaby model-viewer::part(default-progress-mask), .profileMiniHouseBaby model-viewer::part(default-progress-bar) { display:none; }
    .profileMiniHouseBaby model-viewer { width:66px; height:68px; }
    .profileMiniHouseBaby b { margin-top:-8px; color:#704e67; font-size:9px; line-height:1; text-shadow:0 1px 2px #fff,0 0 4px #fff; }
    .profileMiniHouseBaby.baby-0 { left:35%; bottom:23px; } .profileMiniHouseBaby.baby-1 { left:57%; bottom:21px; animation-delay:-1.1s; } .profileMiniHouseBaby.baby-2 { left:76%; bottom:27px; animation-delay:-2.2s; }
    .profileMiniHatchScene { position:absolute; z-index:12; inset:0; display:grid; grid-template-columns:1fr 1fr; place-items:center; align-content:center; gap:0; background:radial-gradient(circle,rgba(255,255,233,.96),rgba(255,235,250,.78) 42%,rgba(255,255,255,.05) 72%); animation:profileMiniHatchFlash 4.5s ease both; pointer-events:none; }
    .profileMiniHatchScene model-viewer { width:130px; height:145px; background:transparent; --poster-color:transparent; }
    .profileMiniHatchScene b { grid-column:1 / -1; padding:7px 12px; border-radius:999px; background:#fff; color:#9a4772; font-size:14px; box-shadow:0 5px 18px rgba(154,71,114,.2); }
    .profileMiniHatchSparkles { position:absolute !important; top:22px; left:50% !important; padding:0 !important; background:transparent !important; font-size:26px !important; letter-spacing:18px; transform:translateX(-50%); animation:profileMiniSparkle 1s ease-in-out infinite; }
    .profileMiniSpeech { position:absolute !important; z-index:7 !important; left:50% !important; bottom:122px !important; display:block !important; width:max-content !important; max-width:174px !important; padding:6px 8px !important; border:1px solid rgba(255,255,255,.94) !important; border-radius:13px 13px 13px 3px !important; background:rgba(255,255,255,.96) !important; color:#74516a !important; font-size:10px !important; font-weight:800 !important; line-height:1.25 !important; text-align:center !important; white-space:normal !important; box-shadow:0 5px 14px rgba(96,61,77,.20) !important; transform:translateX(-50%) !important; animation:profileMiniSpeechFloat 3s ease-in-out infinite !important; }
    .profileMiniSpeech::after { content:''; position:absolute; left:18px; bottom:-6px; width:10px; height:10px; background:rgba(255,255,255,.96); border-right:1px solid rgba(255,255,255,.94); border-bottom:1px solid rgba(255,255,255,.94); transform:rotate(45deg); }
    .profileMiniHouseFriend.duck .profileMiniSpeech { color:#8a436d !important; background:#fff6fb !important; }
    .profileMiniHouseFriend.pup .profileMiniSpeech { color:#89621b !important; background:#fffbed !important; }
    .profileMiniHouseFriend.bear .profileMiniSpeech { color:#65518e !important; background:#fbf8ff !important; }
    .profileMiniFriendCard.is-reacting { animation:profileMiniCardCelebrate .65s ease-in-out 3; }
    .profileMiniActionEffect { position:absolute; z-index:8; left:50%; top:50%; display:grid; justify-items:center; gap:4px; min-width:160px; padding:10px 16px; border:2px solid #fff; border-radius:20px; background:linear-gradient(135deg,#fffdf6,#fff0d6); color:#8a4d2a; box-shadow:0 12px 28px rgba(124,71,47,.28); pointer-events:none; transform:translate(-50%,-50%); animation:profileMiniActionPop 2.6s ease both; }
    .profileMiniActionEffect span { position:static; padding:0; background:transparent; color:inherit; font-size:32px; line-height:1; }
    .profileMiniActionEffect b { font-size:13px; white-space:nowrap; }
    .profileMiniActionEffect.feed { background:linear-gradient(135deg,#fffbe0,#ffdfb0); }
    .profileMiniActionEffect.rest { background:linear-gradient(135deg,#eef1ff,#dfe4ff); color:#4b5293; }
    .profileMiniActionEffect.explore { background:linear-gradient(135deg,#e3fff1,#c7f4d8); color:#32735a; }
    .profileMiniActionEffect.sparkle { background:linear-gradient(135deg,#fff0ff,#e9dcff); color:#764d9b; }
    .profileMiniHouse span { position:absolute; z-index:4; left:10px; bottom:9px; padding:4px 7px; border-radius:8px; background:#ffffffd9; color:#39738e; font-size:11px; font-weight:800; }
    .profileMiniHouse em { position:absolute; z-index:4; right:12px; top:12px; max-width:min(52%,340px); padding:7px 10px; border-radius:14px 14px 3px 14px; background:#fffffff0; color:#805673; font-size:12px; font-style:normal; box-shadow:0 3px 12px rgba(91,59,72,.14); }
    .profileMiniDecoration { position:absolute; z-index:2; font-size:34px; font-style:normal; filter:drop-shadow(0 3px 3px rgba(64,40,48,.24)); animation:profileMiniSparkle 1.8s ease-in-out infinite; }
    .profileMiniDecoration.lamp { right:28%; top:21%; }.profileMiniDecoration.mobile { left:48%; top:8%; }.profileMiniDecoration.rug { left:48%; bottom:19%; }
    .profileMiniFurniture { position:absolute; z-index:5; display:grid; justify-items:center; gap:1px; width:92px; padding:4px !important; border:1px solid #ffffffb8 !important; border-radius:12px !important; background:linear-gradient(145deg,#ffffffeb,#fff7e9e8) !important; color:#75566f !important; box-shadow:0 5px 15px rgba(81,48,61,.16) !important; font-size:9px !important; text-align:center; transition:transform .2s ease,filter .2s ease; }.profileMiniFurniture:hover:not(:disabled) { transform:translateY(-4px) scale(1.05); filter:brightness(1.06); }.profileMiniFurniture b { font-size:20px; line-height:1; }.profileMiniFurniture span { position:static !important; padding:0 !important; background:transparent !important; color:inherit !important; font-size:10px !important; }.profileMiniFurniture small { color:#916b56; font-size:8px; line-height:1.1; }.profileMiniFurniture:disabled { opacity:.62; filter:grayscale(.65); cursor:default; }.profileMiniFurniture.cloudBed,.profileMiniFurniture.snackTable,.profileMiniFurniture.starCabinet,.profileMiniFurniture.warmNest { left:8%; top:15px; }.profileMiniFurniture.storyLamp,.profileMiniFurniture.rainbowSwing,.profileMiniFurniture.musicMat,.profileMiniFurniture.moonMobile { right:8%; top:15px; }
    .profileMiniHouseControls { display:grid; gap:7px; margin:0 0 10px; padding:9px; border:1px solid #f1d5e0; border-radius:11px; background:linear-gradient(100deg,#fffaf4,#fff8fd); color:#805673; font-size:12px; }
    .profileMiniHouseControls > div { display:flex; flex-wrap:wrap; gap:5px; align-items:center; }
    .profileMiniHouseControls button { padding:4px 7px; border-color:#f1c6d7; color:#805673; background:#fff; font-size:11px; }
    .profileMiniHouseControls button.active { background:#ffdceb; border-color:#f09cc3; color:#8a2d59; }
    .profileMiniHouseControls button:disabled { opacity:.5; cursor:not-allowed; }
    .profileMiniHouseControls details summary { cursor:pointer; font-weight:800; }
    .profileMiniDecorations { display:flex; flex-wrap:wrap; gap:5px; padding-top:7px; }
    .profileMiniStarGame { padding-top:5px; border-top:1px dashed #efc9d7; }
    .profileMiniNursery { display:grid; gap:8px; margin:10px 0; padding:10px; border:1px solid #e8c7f3; border-radius:14px; background:linear-gradient(135deg,#fffaff,#f5f0ff); color:#715382; }
    .profileMiniNursery header { display:flex; align-items:baseline; justify-content:space-between; gap:8px; color:#754d88; }
    .profileMiniNursery header small { color:#967aa3; font-size:11px; }
    .profileMiniNursery > p { margin:0; font-size:11px; color:#876c94; }
    .profileMiniBabyGrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(165px,1fr)); gap:8px; }
    .profileMiniBabyCard { display:grid; justify-items:center; gap:4px; min-height:176px; padding:8px; border:1px solid #ecd9f5; border-radius:12px; background:#fffdff; text-align:center; font-size:11px; }
    .profileMiniBabyCard.duck { border-color:#ffd2e2; background:#fff9fc; }.profileMiniBabyCard.pup { border-color:#f5df9f; background:#fffdf4; }.profileMiniBabyCard.bear { border-color:#dcd0ff; background:#fbfaff; }
    .profileMiniBabyCard small { color:#846e90; line-height:1.25; }.profileMiniBabyCard em { color:#a07792; font-size:10px; font-style:normal; }
    .profileMiniBabyCard > div:last-of-type { display:flex; flex-wrap:wrap; justify-content:center; gap:4px; }
    .profileMiniBabyCard button { padding:3px 5px; border-color:#e6c4ed; color:#7b548b; font-size:10px; }
    .profileMiniBabyModel { position:relative; width:82px; height:85px; background:transparent; }.profileMiniBabyModel model-viewer { width:82px; height:82px; }.profileMiniBabyModel span { display:none; }
    .profileMiniNurseryEmpty { margin:0; padding:12px; border:1px dashed #dbc4e6; border-radius:10px; background:#fff; color:#8c7596; font-size:12px; text-align:center; }
    .profileMiniWorld { display:grid; gap:7px; margin:8px 0; padding:10px; border:1px solid #7bbce3; border-radius:12px; background:linear-gradient(135deg,#e8f7ff,#f6efff); color:#285273; }
    .profileMiniWorld header,.profileMiniDirector,.profileMiniExpedition,.profileMiniCosmetics,.profileMiniVisits { display:flex; gap:7px; align-items:center; justify-content:space-between; flex-wrap:wrap; }
    .profileMiniDirector span,.profileMiniVisits span { padding:4px 6px; border:1px solid #bce0ef; border-radius:8px; background:#fff; font-size:10px; }
    .profileMiniVisits button { display:grid; gap:2px; min-width:128px; text-align:left; border-color:#86c9e6; background:#fff; color:#235a7d; }.profileMiniVisits button small{font-size:8px}.profileMiniVisits button:hover{transform:translateY(-1px)}.profileMiniVisitSearch{flex:1 1 180px;min-width:160px;padding:5px 7px;border:1px solid #86c9e6;border-radius:8px;background:#fff;color:#235a7d;font-size:10px}
    .profileMiniHomeVisit{position:fixed;inset:0;z-index:160;display:grid;place-items:center;padding:18px;background:#16112dcc;backdrop-filter:blur(7px)}.profileMiniHomeVisit>article{position:relative;width:min(640px,100%);max-height:min(82dvh,760px);overflow:auto;display:grid;gap:10px;padding:16px;border:2px solid #e9c66f;border-radius:16px;background:linear-gradient(145deg,#fff9e1,#f1eaff);color:#3f315d;box-shadow:0 24px 70px #090417aa}.profileMiniHomeVisit>article>button{position:absolute;right:10px;top:10px;width:30px;height:30px;border-radius:50%;font-size:20px;line-height:1}.profileMiniHomeVisit header{display:flex;gap:9px;align-items:center;padding-right:35px}.profileMiniHomeVisit header>span{font-size:34px}.profileMiniHomeVisit header div{display:grid;gap:2px}.profileMiniHomeVisit header b{font-size:16px}.profileMiniHomeVisit header small,.profileMiniHomeVisit p,.profileMiniHomeVisit section>small{font-size:11px}.profileMiniHomeVisit p{margin:0;padding:8px;border-left:3px solid #b780e7;background:#fff9}.profileMiniVisitDecorations{display:flex;gap:5px;flex-wrap:wrap}.profileMiniVisitDecorations span{padding:4px 6px;border:1px solid #d6c0ed;border-radius:99px;background:#fff;font-size:9px}.profileMiniHomeVisit section{display:grid;gap:6px}.profileMiniHomeVisit section>div{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:7px}.profileMiniHomeVisit section article{display:grid;gap:3px;overflow:hidden;padding:4px;border:1px solid #cbb8e4;border-radius:8px;background:#fff}.profileMiniHomeVisit section article.rare{border-color:#b365da}.profileMiniHomeVisit section article.champion{border-color:#27bfae}.profileMiniHomeVisit section article.legendary{border-color:#d79323;background:#fff7d2}.profileMiniHomeVisit section img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:5px}.profileMiniHomeVisit section article b{overflow:hidden;font-size:8px;text-overflow:ellipsis;white-space:nowrap}.profileMiniHomeVisit section article small{font-size:7px}
    .profileMiniExpedition > div,.profileMiniCosmetics { display:flex; gap:5px; flex-wrap:wrap; }
    .profileMiniWorld small { font-size:10px; }.profileMiniWorld button { padding:3px 7px; font-size:10px; }
    .profileMiniQuestWorldMap { display:grid; gap:8px; margin:10px 0; padding:11px; border:1px solid #78c9ef; border-radius:15px; background:radial-gradient(circle at 90% 0,#fef5a9,transparent 22%),linear-gradient(135deg,#102d66,#256ca1 56%,#6b4386); color:#f6fcff; box-shadow:0 10px 24px #143b6a33; }.profileMiniQuestWorldMap header,.profileMiniQuestWorldMap footer { display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; }.profileMiniQuestWorldMap header div { display:grid; gap:2px; }.profileMiniQuestWorldMap header b { font-size:14px; }.profileMiniQuestWorldMap header small,.profileMiniQuestWorldMap header span,.profileMiniQuestWorldMap footer small { color:#d7edff; font-size:10px; }.profileMiniQuestWorldMap header span { padding:4px 7px; border:1px solid #ffffff44; border-radius:999px; background:#ffffff13; }.profileMiniQuestZones { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:7px; }.profileMiniQuestZones article { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:7px; min-width:0; padding:8px; border:1px solid #ffffff42; border-radius:11px; background:linear-gradient(135deg,#ffffff18,#ffffff08); }.profileMiniQuestZones article.cleared { border-color:#f9dc7b; background:linear-gradient(135deg,#fff2a62b,#ffffff12); }.profileMiniQuestZones article.practice { border-style:dashed; }.profileMiniQuestZones article > i { display:grid; place-items:center; width:34px; height:34px; border-radius:50%; background:#ffffff25; font-size:21px; font-style:normal; }.profileMiniQuestZones article > div { display:grid; min-width:0; gap:2px; }.profileMiniQuestZones b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; }.profileMiniQuestZones small { color:#d8ecff; font-size:9px; }.profileMiniQuestZones em { color:#ffe79d; font-size:9px; font-style:normal; font-weight:800; }.profileMiniQuestZones button,.profileMiniQuestWorldMap footer button { border-color:#bfeeff!important; background:#fff7bd!important; color:#63410d!important; font-size:10px!important; }
    .profileMiniTurnCombat { display:grid; gap:8px; margin:9px 0; padding:11px; border:1px solid #ffcf73; border-radius:15px; background:radial-gradient(circle at 50% 10%,#684ddc66,transparent 38%),linear-gradient(135deg,#15143f,#392068 54%,#b04f75); color:#fff; box-shadow:0 12px 30px #28114255; }.profileMiniTurnCombat header { display:flex; align-items:center; justify-content:space-between; gap:8px; }.profileMiniTurnCombat header div { display:grid; gap:2px; }.profileMiniTurnCombat header small { color:#dcd1ff; font-size:10px; }.profileMiniTurnCombat header em { padding:5px 8px; border:1px solid #ffffff4c; border-radius:999px; background:#ffffff16; color:#fff2b0; font-size:11px; font-style:normal; }.profileMiniBattlefield { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:9px; padding:9px; border:1px solid #ffffff2f; border-radius:13px; background:linear-gradient(90deg,#22b1cb20,#ffffff05 46%,#f65b7220); }.profileMiniBattleSide { display:grid; justify-items:center; gap:5px; text-align:center; }.profileMiniBattleSide strong { font-size:10px; letter-spacing:.06em; }.profileMiniCombatUnits { display:flex; justify-content:center; gap:4px; flex-wrap:wrap; }.profileMiniCombatUnits span { display:grid; justify-items:center; width:54px; gap:1px; padding:4px 2px; border:1px solid #ffffff44; border-radius:8px; background:#ffffff12; font-size:17px; }.profileMiniCombatUnits span b { font-size:8px; }.profileMiniCombatUnits span small { width:100%; overflow:hidden; color:#ddecff; font-size:7px; text-overflow:ellipsis; white-space:nowrap; }.profileMiniCombatUnits span.legendary { border-color:#ffe482; box-shadow:0 0 10px #ffc83d66; }.profileMiniEnemyAvatar { display:grid; place-items:center; width:62px; height:62px; border:2px solid #ffcf7b; border-radius:50%; background:#2c184dcc; box-shadow:0 0 18px #ff687a77; font-size:34px; }.profileMiniBattleVs { color:#ffe68a; font-weight:1000; font-style:italic; text-shadow:0 0 9px #ffb340; }.profileMiniCombatBars { width:100%; }.profileMiniCombatBars span { position:relative; display:block; height:17px; overflow:hidden; border:1px solid #ffffff66; border-radius:999px; background:#10112d; }.profileMiniCombatBars i { display:block; height:100%; background:linear-gradient(90deg,#41e19a,#eaff85); box-shadow:0 0 10px #c9ff62; }.profileMiniBattleSide.enemy .profileMiniCombatBars i { background:linear-gradient(90deg,#ff8d78,#ffce6c); box-shadow:0 0 10px #ff856d; }.profileMiniCombatBars b { position:absolute; inset:2px 0; color:#fff; font-size:9px; text-shadow:0 1px 2px #16122e; }.profileMiniCombatStatuses { display:flex; justify-content:center; gap:5px; flex-wrap:wrap; }.profileMiniCombatStatuses span { padding:3px 6px; border:1px solid #ffffff44; border-radius:999px; background:#ffffff18; font-size:9px; }.profileMiniCombatMoves { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }.profileMiniCombatMoves button { border-color:#ffe898!important; background:linear-gradient(135deg,#fff5bb,#e9904e)!important; color:#60350c!important; font-size:11px!important; }.profileMiniCombatLog { padding:6px 8px; border:1px solid #ffffff33; border-radius:9px; background:#0c092c77; }.profileMiniCombatLog summary { cursor:pointer; color:#ffe9a8; font-size:10px; font-weight:900; }.profileMiniCombatLog ol { max-height:94px; margin:6px 0 0; padding-left:19px; overflow:auto; color:#e8e2ff; font-size:10px; }
    .profileMiniCardAlbum { position:relative; display:grid; gap:9px; margin:12px 0; padding:12px; overflow:hidden; border:1px solid #ffe59a; border-radius:16px; background:linear-gradient(135deg,#8b510b 0%,#d79420 27%,#fff0a8 49%,#c47a0d 69%,#6d3907 100%); color:#fff; box-shadow:inset 0 0 0 1px #fff8cf80,inset 0 0 34px #6e360766,0 12px 28px rgba(142,82,8,.32); }
    .profileMiniCardAlbum::before { content:''; position:absolute; inset:0; pointer-events:none; background:radial-gradient(circle at 14% 0,#fffde4c7,transparent 24%),radial-gradient(circle at 90% 100%,#fff3b68c,transparent 31%),linear-gradient(114deg,transparent 31%,#fffbe099 46%,transparent 58%); background-size:auto,auto,180% 100%; animation:profileMiniGoldSheen 6s ease-in-out infinite; }
    .profileMiniCardAlbum::after { content:''; position:absolute; z-index:0; inset:0; pointer-events:none; opacity:.68; background-image:radial-gradient(circle,#fffef0 0 1px,transparent 1.8px),radial-gradient(circle,#ffe883 0 1.4px,transparent 2.2px),radial-gradient(circle,#ffffff 0 .8px,transparent 1.5px); background-position:0 0,18px 27px,43px 11px; background-size:53px 61px,71px 67px,89px 83px; animation:profileMiniGoldGlitter 4.8s linear infinite; }
    .profileMiniCardAlbum > * { position:relative; z-index:1; }
    .profileMiniCardAlbum header { display:flex; align-items:center; justify-content:space-between; gap:9px; }
    .profileMiniCardAlbum header > div { display:grid; gap:2px; }.profileMiniCardAlbum header small { color:#e5dafa; font-size:11px; }
    .profileMiniOpenPack { border:1px solid #ffe69a !important; background:linear-gradient(135deg,#fff4bd,#efa751) !important; color:#57370c !important; font-weight:900; box-shadow:0 4px 12px #0003; }
    .profileMiniCardRates { display:flex; flex-wrap:wrap; gap:6px; }.profileMiniCardRates span { padding:3px 7px; border:1px solid color-mix(in srgb,var(--card-rarity),#fff 35%); border-radius:999px; background:#ffffff16; color:#fff; font-size:10px; }
    .profileMiniCardConditions { margin:0; color:#f6ebff; font-size:11px; line-height:1.45; }
    .profileMiniCardDeck { display:flex; flex-wrap:wrap; align-items:center; gap:6px; padding:7px; border:1px solid #ffffff52; border-radius:10px; background:#ffffff12; font-size:10px; }.profileMiniCardDeck > b { color:#fff0a7; }.profileMiniCardDeck span { padding:3px 6px; border-radius:999px; background:#0c6684cc; color:#fff; font-weight:800; }.profileMiniCardDeck span.rare { background:#713fa4cc; }.profileMiniCardDeck span.champion { background:#08766ccc; }.profileMiniCardDeck span.legendary { background:#a56b14cc; }.profileMiniCardDeck small { color:#e9dcff; }
    .profileMiniDeckPresets { display:grid; gap:8px; padding:9px; border:1px solid #8ddbe8; border-radius:13px; background:linear-gradient(135deg,#effcff,#fef8e9); color:#245c78; }.profileMiniDeckPresets>header,.profileMiniDeckPresets article>header,.profileMiniPresetEditor>header { display:flex; align-items:center; justify-content:space-between; gap:8px; }.profileMiniDeckPresets>header>div,.profileMiniDeckPresets article>header>div,.profileMiniPresetEditor>header { display:grid; gap:2px; }.profileMiniDeckPresets>header b { font-size:13px; }.profileMiniDeckPresets>header small,.profileMiniDeckPresets>header>span,.profileMiniDeckPresets article>header small,.profileMiniPresetEditor small { color:#5d7f90; font-size:9px; }.profileMiniDeckPresets>header>span,.profileMiniDeckPresets article>header>span { padding:3px 6px; border-radius:999px; background:#fff; color:#296986; font-size:9px; font-weight:800; }.profileMiniDeckPresetGrid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }.profileMiniDeckPresetGrid>article { display:grid; gap:7px; min-width:0; padding:8px; border:1px solid #abdce7; border-radius:11px; background:#ffffffc9; }.profileMiniDeckPresetGrid>article.saved { border-color:#85cfad; }.profileMiniDeckPresetGrid>article.editing { grid-column:1 / -1; border-color:#e5b85b; background:linear-gradient(135deg,#fffdf6,#fff4d8); }.profileMiniPresetCards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px; }.profileMiniPresetCards button { display:grid; gap:2px; min-width:0; min-height:111px; padding:4px!important; overflow:hidden; border:1px solid #d2e7ed!important; border-radius:8px!important; background:#f9fdff!important; color:#285a73!important; text-align:left!important; }.profileMiniPresetCards button:hover { transform:translateY(-2px); }.profileMiniPresetCards button.empty { place-content:center; justify-items:center; border-style:dashed!important; color:#7895a4!important; text-align:center!important; }.profileMiniPresetCards button.empty i { font-size:20px; font-style:normal; }.profileMiniPresetCards img { width:100%; height:62px; object-fit:cover; border-radius:5px; }.profileMiniPresetCards span,.profileMiniPresetCards b,.profileMiniPresetCards small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.profileMiniPresetCards span { font-size:8px; }.profileMiniPresetCards b { font-size:9px; }.profileMiniPresetCards small { color:#5b7b8a; font-size:7px; }.profileMiniDeckPresetGrid footer { display:flex; flex-wrap:wrap; gap:4px; }.profileMiniDeckPresetGrid footer button { flex:1; min-width:72px; padding:4px 6px!important; font-size:9px!important; }.profileMiniPresetEditor { display:grid; gap:7px; padding-top:7px; border-top:1px dashed #dfbd65; }.profileMiniPresetEditor>div { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }.profileMiniPresetEditor article { display:grid; gap:4px; min-width:0; padding:6px; border:1px solid #f0d89b; border-radius:9px; background:#fffdf6; }.profileMiniPresetEditor article>b { font-size:10px; }.profileMiniPresetEditor article>div { display:grid; grid-template-columns:repeat(auto-fill,minmax(72px,1fr)); gap:4px; max-height:180px; overflow:auto; }.profileMiniPresetEditor article>div>small { padding:8px; border:1px dashed #dfc681; border-radius:7px; text-align:center; }.profileMiniPresetEditor article button { display:grid; gap:2px; min-width:0; padding:3px!important; border:1px solid #d8e2df!important; border-radius:7px!important; background:#fff!important; color:#305a70!important; text-align:left!important; }.profileMiniPresetEditor article button.selected { outline:3px solid #5eb889; border-color:#4aa57a!important; background:#effff4!important; }.profileMiniPresetEditor article button img { width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:4px; }.profileMiniPresetEditor article button span,.profileMiniPresetEditor article button small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.profileMiniPresetEditor article button span { font-size:8px; }.profileMiniPresetEditor article button small { color:#648296; font-size:7px; }
    .profileMiniPresetCharacterHeading { display:block; padding:4px 6px; border-radius:6px; background:#e7f7fb; color:#1e627d; font-size:10px!important; }.profileMiniPresetEditor article>.profileMiniPresetRarityGroups { display:grid; grid-template-columns:1fr; gap:6px; max-height:300px; overflow:auto; padding-right:3px; }.profileMiniPresetRarityGroup { display:grid; gap:4px; padding:5px; border:1px solid #dce9ee; border-left:4px solid #c98759; border-radius:7px; background:#fff; }.profileMiniPresetRarityGroup.rare { border-left-color:#a56ad1; }.profileMiniPresetRarityGroup.champion { border-left-color:#42a66e; }.profileMiniPresetRarityGroup.legendary { border-left-color:#d69b20; }.profileMiniPresetRarityGroup>header { display:flex; align-items:center; justify-content:space-between; gap:5px; }.profileMiniPresetRarityGroup>header b { color:#315f75; font-size:9px; }.profileMiniPresetRarityGroup>header small { color:#728e9c; font-size:8px; }.profileMiniPresetRarityGroup>div { display:grid; grid-template-columns:repeat(auto-fill,minmax(64px,1fr)); gap:4px; }.profileMiniPresetRarityGroup .profileMiniPresetRarityEmpty { grid-column:1 / -1; padding:4px!important; border:0!important; color:#8299a4!important; font-size:8px!important; text-align:left!important; }
    .profileMiniCardShelf { display:grid; grid-template-columns:repeat(auto-fit,minmax(148px,1fr)); gap:10px; max-height:760px; padding:5px; overflow:auto; }
    .profileMiniCardPager { display:flex; align-items:center; justify-content:center; gap:8px; padding:5px; color:#fff8df; font-size:11px; }
    .profileMiniCardPager button { padding:4px 8px; border-color:#ffe68c; background:#fff4c7; color:#684016; font-weight:900; }
    .profileMiniCardPager button:disabled { opacity:.5; }
    /* CSS filters force WebGL canvases through a soft raster pass. */
    .profileMiniFriendsGame .profileMiniHouseFriend,.profileMiniFriendsGame .profileMiniHouseBaby { filter:none; }
    .profileMiniCollectibleCard { position:relative; display:grid; min-height:246px; padding:9px 8px !important; overflow:hidden; border:2px solid #ffffff55 !important; border-radius:12px !important; background:linear-gradient(150deg,#fbf8ff,#bca4da 55%,#685383) !important; color:#352650 !important; text-align:left; box-shadow:inset 0 0 0 1px #ffffff88,0 5px 13px #1115; transition:transform .18s ease,filter .18s ease; }
    .profileMiniCollectibleCard:hover,.profileMiniCollectibleCard[aria-pressed="true"] { transform:translateY(-5px) rotate(-1deg); filter:brightness(1.08); }.profileMiniCollectibleCard[aria-pressed="true"] { outline:3px solid #fff1a8; }
    .profileMiniCollectibleCard.skill-active { animation:profileMiniCardSkillPulse 1.1s ease-in-out 3; outline:3px solid #fff2a1; filter:brightness(1.22) saturate(1.35); }
    .profileMiniCollectibleCard::after { content:''; position:absolute; inset:-90% -42%; background:linear-gradient(108deg,transparent 46%,#fff9 50%,transparent 54%); transform:rotate(12deg); animation:profileMiniCardFoil 4.2s ease-in-out infinite; pointer-events:none; }
    .profileMiniCollectibleCard.missing { filter:grayscale(1) brightness(.58); }.profileMiniCollectibleCard.missing:hover { filter:grayscale(.65) brightness(.8); }
    .profileMiniCollectibleCard.rare { background:linear-gradient(150deg,#fbf7ff,#d8bbff 55%,#7858af) !important; }.profileMiniCollectibleCard.legendary { border-color:#ffe47c !important; background:linear-gradient(150deg,#fff5ba,#f5a745 50%,#9a3f6a) !important; color:#5a2b14 !important; }
    .profileMiniCollectibleCard.common { border-color:#8ce1ff !important; background:linear-gradient(150deg,#e8fbff,#3eaed6 52%,#14669b) !important; }.profileMiniCollectibleCard.rare { border-color:#edb8ff !important; background:linear-gradient(150deg,#fff0ff,#c465ef 52%,#683ea0) !important; }.profileMiniCollectibleCard.champion { border-color:#8ffff0 !important; background:linear-gradient(150deg,#eafffb,#23bfa9 52%,#09666d) !important; color:#143f47 !important; box-shadow:inset 0 0 0 2px #dffff7,0 0 18px #16d9bd77,0 5px 13px #1115; }.profileMiniCollectibleCard.legendary { border-color:#ffe68a !important; background:linear-gradient(150deg,#fff8cf,#e2a52e 48%,#85510a) !important; color:#563608 !important; box-shadow:inset 0 0 0 2px #fff5bd,0 0 22px #f6bb3888,0 5px 13px #1115; }
    .profileMiniCollectibleCard.rose { background:linear-gradient(150deg,#fff6fc,#f2a1ca 55%,#b65d93) !important; }.profileMiniCollectibleCard.sun { background:linear-gradient(150deg,#fffce7,#f5cb55 55%,#d88931) !important; }.profileMiniCollectibleCard.sky { background:linear-gradient(150deg,#f4feff,#9ed5ee 55%,#567fbc) !important; }.profileMiniCollectibleCard.peach { background:linear-gradient(150deg,#fff7ec,#ffb47d 55%,#cf6d60) !important; }.profileMiniCollectibleCard.mint { background:linear-gradient(150deg,#f0fff8,#9bdfbd 55%,#4c9e8c) !important; }.profileMiniCollectibleCard.aurora { background:linear-gradient(150deg,#f7efff,#9b91ff 38%,#69e0cf 64%,#eea5e8) !important; }.profileMiniCollectibleCard.legend { background:linear-gradient(150deg,#fff8d6,#d8a94c 49%,#8252b2) !important; }.profileMiniCollectibleCard.rainbow { background:linear-gradient(150deg,#fff5ce,#ffb4ca 30%,#9dcbff 50%,#567fbc) !important; }
    /* Rarity is the final visual authority: intentionally no blue card bodies. */
    .profileMiniCollectibleCard.common { border-color:#f4bd82 !important; background:linear-gradient(150deg,#fff5df,#efb06a 48%,#a94f3f) !important; color:#4d241f !important; box-shadow:inset 0 0 0 2px #fff2d7,0 0 15px #dc7d4d66,0 5px 13px #3f160f66; }
    .profileMiniCollectibleCard.rare { border-color:#e7b2ff !important; background:linear-gradient(150deg,#fff4ff,#d981e8 48%,#743b89) !important; color:#3f1c50 !important; box-shadow:inset 0 0 0 2px #ffe5ff,0 0 17px #bd54db66,0 5px 13px #2d103966; }
    .profileMiniCollectibleCard.champion { border-color:#b5f0bb !important; background:linear-gradient(150deg,#f4fff0,#7fcf83 48%,#296345) !important; color:#173d2a !important; box-shadow:inset 0 0 0 2px #e3ffe0,0 0 18px #48bb6266,0 5px 13px #102b1d66; }
    .profileMiniCollectibleCard.legendary { border-color:#ffe58b !important; background:linear-gradient(150deg,#fff9d8,#edbd48 48%,#9d5c11) !important; color:#4d2c05 !important; box-shadow:inset 0 0 0 2px #fff6bc,0 0 22px #f6bb3888,0 5px 13px #4a290766; }
    .profileMiniCollectibleCard.common small,.profileMiniCollectibleCard.common em,.profileMiniCollectibleCard.common i,.profileMiniCollectibleCard.common u { color:#fff8e8; text-shadow:0 1px 2px #6e2d25; }
    .profileMiniCollectibleCard.rare small,.profileMiniCollectibleCard.rare em,.profileMiniCollectibleCard.rare i,.profileMiniCollectibleCard.rare u { color:#fff5ff; text-shadow:0 1px 2px #49205d; }
    .profileMiniCollectibleCard.champion small,.profileMiniCollectibleCard.champion em,.profileMiniCollectibleCard.champion i,.profileMiniCollectibleCard.champion u { color:#f3ffeb; text-shadow:0 1px 2px #204d34; }
    .profileMiniCollectibleCard.legendary small,.profileMiniCollectibleCard.legendary em,.profileMiniCollectibleCard.legendary i,.profileMiniCollectibleCard.legendary u { color:#fff7d0; text-shadow:0 1px 2px #70410b; }
    .profileMiniCollectibleCard.trap{box-shadow:inset 0 0 0 2px #ffc5e6,0 0 16px #ee5bad66,0 5px 13px #1115}.profileMiniCollectibleCard.pet{box-shadow:inset 0 0 0 2px #baf5ce,0 0 16px #51d68a66,0 5px 13px #1115}.profileMiniCollectibleCard.gear{box-shadow:inset 0 0 0 2px #d6e7ff,0 0 16px #6ba9e966,0 5px 13px #1115}.profileMiniCollectibleCard.support{box-shadow:inset 0 0 0 2px #ffe9a1,0 0 16px #f4c64c77,0 5px 13px #1115}.profileMiniCollectibleCard.trap .profileMiniCardArt{border-color:#ffb7df}.profileMiniCollectibleCard.pet .profileMiniCardArt{border-color:#aaf2c2}.profileMiniCollectibleCard.gear .profileMiniCardArt{border-color:#b6d8ff}.profileMiniCollectibleCard.support .profileMiniCardArt{border-color:#ffe7a0}
    .profileMiniCardFoil { position:absolute; top:7px; right:8px; z-index:3; color:#fff; font-size:17px; filter:drop-shadow(0 1px 2px #3a2057aa); }.profileMiniCollectibleCard.legendary .profileMiniCardFoil { color:#fff4a2; }
    .profileMiniCardNumber { position:absolute; top:8px; left:8px; z-index:3; color:#fff; font-size:9px; font-weight:900; text-shadow:0 1px 3px #2c1645; }
    .profileMiniCardArt { position:relative; z-index:1; display:block; height:172px; margin:4px 0 4px; overflow:hidden; border:1px solid #fff9; border-radius:8px; background-color:#11162b; background-image:linear-gradient(180deg,transparent 58%,#29173855),var(--card-art-url); background-position:center; background-size:cover,cover; background-repeat:no-repeat; box-shadow:inset 0 3px 6px #fff8,0 4px 8px #54334a36; }
    .profileMiniCardArt::after { content:''; position:absolute; inset:0; border:1px solid #ffffff70; border-radius:inherit; box-shadow:inset 0 0 18px #fff4; }.profileMiniCardStars { position:relative; z-index:2; margin-top:-17px; padding-left:4px; color:#ffe37e; font-size:12px; letter-spacing:1px; text-shadow:0 1px 2px #3a2057; }
    .profileMiniCollectibleCard small,.profileMiniCollectibleCard em,.profileMiniCollectibleCard i,.profileMiniCollectibleCard u { position:relative; z-index:1; display:block; font-size:9px; font-style:normal; text-decoration:none; }.profileMiniCollectibleCard small { color:#fff; font-weight:900; text-shadow:0 1px 2px #38244a; }.profileMiniCollectibleCard strong { position:relative; z-index:1; min-height:31px; margin-top:3px; font-size:12px; line-height:1.15; }.profileMiniCollectibleCard em { margin-top:auto; font-weight:900; }.profileMiniCollectibleCard i,.profileMiniCollectibleCard u { color:#fff; opacity:.92; }
    .profileMiniSellCard { position:relative; z-index:2; display:block; margin-top:4px; padding:3px 4px; border:1px solid #ffe497; border-radius:6px; background:#573414; color:#fff0b3; font-size:9px; font-style:normal; text-align:center; cursor:pointer; }.profileMiniSellCard:hover { background:#8b571d; }.profileMiniCardCopyCount { position:absolute; z-index:4; right:7px; bottom:7px; display:grid; min-width:28px; min-height:28px; place-items:center; padding:3px 6px; border:2px solid #fff8dc; border-radius:999px; background:#183b54e8; color:#fffbe2; font-size:12px; font-weight:900; line-height:1; box-shadow:0 2px 7px #20102a77; text-shadow:0 1px 2px #111; }.profileMiniCardMergeHint { position:absolute; z-index:3; right:6px; bottom:39px; padding:3px 5px; border:1px solid #fff0a1; border-radius:6px; background:#5b2c83e8; color:#fff8d7; font-size:8px; font-weight:900; box-shadow:0 2px 6px #2e123877; }
    .profileMiniCardInspector { display:grid; grid-template-columns:minmax(180px,1fr) auto; gap:7px; align-items:center; padding:9px; border:1px solid #ffffff55; border-radius:10px; background:#ffffff1b; }.profileMiniCardInspector > div:first-child { display:grid; gap:2px; }.profileMiniCardInspector small { color:#eee8ff; font-size:10px; }.profileMiniCardInspector > span { color:#fff4bc; font-size:11px; }
    .profileMiniCardInspector.common { border-color:#8ce1ff; background:#0a648b55; }.profileMiniCardInspector.rare { border-color:#edb8ff; background:#6f359255; }.profileMiniCardInspector.champion { border-color:#8ffff0; background:#08766c77; }.profileMiniCardInspector.legendary { border-color:#ffe68a; background:linear-gradient(120deg,#85510acc,#d89922cc); }
    .profileMiniCardSkillLine { color:#fff0a8; font-size:11px; }.profileMiniCardActions { display:flex; flex-wrap:wrap; gap:5px; }.profileMiniCardActions button { padding:4px 7px; border-color:#fff0a8; background:#fff7d9; color:#6b4311; font-size:10px; font-weight:900; }.profileMiniCardActions button:disabled { opacity:.5; cursor:not-allowed; }
    .profileMiniCardOwners { grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:5px; }.profileMiniCardOwner,.profileMiniCardNoOwners { padding:3px 6px; border-radius:999px; background:#fff; color:#59456e; font-size:10px; }.profileMiniCardOwner.me { background:#fff0a8; color:#61440e; }.profileMiniCardOwner b { font-size:9px; }
    .profileMiniCardFilters { display:grid; gap:5px; }.profileMiniCardFilters > div { display:flex; flex-wrap:wrap; align-items:center; gap:5px; }.profileMiniCardFilters b { min-width:42px; color:#fff0ba; font-size:10px; }.profileMiniCardFilters button { padding:3px 7px; border-color:#ffffff55; background:#ffffff14; color:#fff; font-size:10px; }.profileMiniCardFilters button.active { border-color:#ffe68c; background:#fff2ba; color:#624118; font-weight:900; }.profileMiniCardDeck{display:grid;gap:5px}.profileMiniCardDeck header{display:flex;align-items:center;justify-content:space-between;gap:6px}.profileMiniCardDeck header button{padding:4px 7px;border-color:#a4e8f4;background:#eafbff;color:#17657c;font-size:9px;font-weight:900}.profileMiniCardDeck header button:hover{filter:brightness(1.04);transform:translateY(-1px)}
    .profileMiniCardProgress { display:grid; grid-template-columns:minmax(180px,.75fr) minmax(260px,1.25fr); gap:7px; margin:8px 0; }.profileMiniCardProgress > div { display:grid; align-content:start; gap:4px; padding:8px; border:1px solid #ffffff42; border-radius:9px; background:#ffffff12; color:#f7efff; }.profileMiniCardProgress > div.active { border-color:#ffe58b; background:linear-gradient(120deg,#8e4ed266,#e8a83777); box-shadow:0 0 18px #f6c86144; }.profileMiniCardProgress small { color:#e9dfff; font-size:10px; }.profileMiniCardProgress button { width:max-content; padding:4px 7px; border-color:#ffe68c; background:#fff5c8; color:#684016; font-size:10px; font-weight:900; }.profileMiniCardProgress button:disabled { opacity:.5; cursor:not-allowed; }.profileMiniCardSets { grid-template-columns:repeat(3,minmax(0,1fr)); }.profileMiniCardSets > b { grid-column:1 / -1; }.profileMiniCardSet { display:grid; gap:2px; min-width:0; padding:5px; border:1px solid #ffffff2c; border-radius:7px; background:#11092c44; }.profileMiniCardSet.complete { border-color:#ffe481; background:#f7b9393d; }.profileMiniCardSet b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:10px; }.profileMiniCardSet button { font-size:9px; }
    .profileMiniCardTrade { display:grid; gap:5px; margin:8px 0; padding:8px; border:1px solid #86e8e2; border-radius:9px; background:linear-gradient(120deg,#0e536555,#47277655); color:#eefeff; }.profileMiniCardTrade > small { color:#cfefef; font-size:10px; }.profileMiniCardTrade > div:first-of-type { display:flex; flex-wrap:wrap; gap:4px; }.profileMiniCardTrade select { min-width:130px; max-width:220px; padding:4px; border:1px solid #a1f0e7; border-radius:6px; background:#f7ffff; color:#27596a; font-size:10px; }.profileMiniCardTrade button { padding:4px 7px; border-color:#f9df8b; background:#fff3c8; color:#744b12; font-size:10px; font-weight:900; }.profileMiniTradeRows { display:grid; gap:4px; }.profileMiniTradeRow { display:grid; grid-template-columns:auto 1fr auto auto; align-items:center; gap:5px; padding:5px; border-radius:7px; background:#ffffff16; font-size:10px; }.profileMiniTradeRow small { overflow:hidden; color:#fff2c6; text-overflow:ellipsis; white-space:nowrap; }.profileMiniTradeRow em { color:#d1fbf4; font-size:10px; font-style:normal; }.profileMiniTradeRow.accepted { border-left:3px solid #87f4be; }.profileMiniTradeRow.declined { opacity:.62; }
    .profileMiniBoss { display:grid; grid-template-columns:minmax(180px,1fr) auto; gap:7px; align-items:center; margin:8px 0; padding:9px; border:1px solid #b9a4ff; border-radius:10px; background:radial-gradient(circle at 14% 10%,#8f7dff66,transparent 47%),linear-gradient(125deg,#1f1557,#513078); color:#fff6dd; box-shadow:inset 0 0 24px #a77cff35; }.profileMiniBoss > div { display:grid; gap:3px; }.profileMiniBoss small { color:#ddd2ff; font-size:10px; }.profileMiniBoss span { display:block; height:7px; overflow:hidden; border-radius:999px; background:#08051b99; }.profileMiniBoss span i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#ff6b92,#ffd65d); box-shadow:0 0 10px #ffe17a; transition:width .55s ease; }.profileMiniBoss button { padding:5px 8px; border-color:#ffe28b; background:linear-gradient(135deg,#fff4b3,#efa94b); color:#4f2607; font-size:10px; font-weight:900; }.profileMiniBoss ol { grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:7px; margin:0; padding:0; list-style:none; font-size:10px; color:#e8dcff; }.profileMiniBoss li b { color:#ffe58b; }.profileMiniBoss.defeated { filter:saturate(.55); opacity:.8; }
    .profileMiniSeasonPass { grid-column:1 / -1; display:grid; gap:5px; padding:7px; border:1px solid #ffe28a; border-radius:8px; background:linear-gradient(115deg,#67459288,#f0a93f55); color:#fff8df; }.profileMiniSeasonPass header { display:flex; justify-content:space-between; gap:6px; font-size:10px; }.profileMiniSeasonPass header small { color:#fff2bd; }.profileMiniSeasonTiers, .profileMiniRoomTabs { display:flex; flex-wrap:wrap; gap:4px; }.profileMiniSeasonTiers span { padding:3px 5px; border:1px solid #ffffff55; border-radius:999px; background:#28144955; font-size:9px; }.profileMiniSeasonTiers span.ready { border-color:#ffe486; background:#fff1a33d; }.profileMiniSeasonTiers button, .profileMiniRoomTabs button { margin-left:3px; padding:2px 5px; font-size:9px; }.profileMiniRoomTabs button.active { border-color:#ffe48d; background:#fff3be; color:#63430d; }.profileMiniRoomTabs button:disabled { opacity:.45; }
    @media (prefers-reduced-motion: reduce) { .profileMiniWorkspace *, .profileMiniWorkspace *::before, .profileMiniWorkspace *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; transition-duration:.01ms !important; } }
    .profileMiniCardReveal { position:absolute; z-index:8; inset:9px; display:grid; justify-items:center; align-content:center; gap:5px; padding:15px; border-radius:13px; background:radial-gradient(circle,#fffcef,#f7c5f1e8 43%,#3b225aeF 85%); color:#593159; text-align:center; animation:profileMiniCardReveal 5.1s ease both; pointer-events:none; }.profileMiniCardReveal.legendary { background:radial-gradient(circle,#fffdeb,#ffd260e8 43%,#7b3a75ef 85%); }.profileMiniCardReveal > span { color:#fff; font-size:12px; font-weight:900; text-shadow:0 2px 3px #43245a; }.profileMiniCardReveal .profileMiniCollectibleCard { width:170px; min-height:264px; transform:rotate(-2deg) scale(1.05); }.profileMiniCardReveal > strong { padding:5px 9px; border-radius:999px; background:#fff; color:#774d7e; font-size:12px; }
    .profileMiniPackOpening { position:absolute; z-index:10; inset:9px; display:grid; justify-items:center; align-content:center; gap:5px; overflow:hidden; border-radius:13px; background:radial-gradient(circle at 50% 48%,#fff7cf 0 4%,#c78bff66 28%,#191038eb 72%); color:#fff; text-align:center; pointer-events:none; animation:profileMiniPackBackdrop 3.3s ease both; }.profileMiniPackOpening::before { content:''; position:absolute; inset:-35%; background:conic-gradient(from 0deg,#fff0 0 6%,#fff8 10%,#fff0 15% 31%,#f5c3ff9a 36%,#fff0 43% 65%,#ffe695a4 70%,#fff0 78%); animation:profileMiniPackBurst 3.3s ease-out both; }.profileMiniPackOpening > * { position:relative; z-index:1; }.profileMiniPackOpening > strong { margin-top:2px; font-size:15px; text-shadow:0 2px 5px #110722; }.profileMiniPackOpening > small { color:#fff5d4; font-size:11px; font-weight:800; }.profileMiniPackOpening .profileMiniPackStars { color:#fff4a8; font-size:25px; letter-spacing:7px; text-shadow:0 0 12px #ffe179,0 0 27px #d97eff; animation:profileMiniPackStars 3.3s ease both; }.profileMiniCardPack { position:relative; display:grid; place-items:center; width:136px; height:190px; overflow:hidden; border:3px solid #fff0a8; border-radius:13px; background:linear-gradient(135deg,#4d258c,#a34ee1 43%,#f4a3df 65%,#56338f); box-shadow:inset 0 0 0 3px #ffffff7d,0 0 13px #fff4,0 0 34px #b875ff; transform:rotate(-4deg); animation:profileMiniPackShake 3.3s cubic-bezier(.25,.6,.25,1) both; }.profileMiniPackOpening.rare .profileMiniCardPack { background:linear-gradient(135deg,#7331af,#ef6fe0 47%,#5c72f5); }.profileMiniPackOpening.champion .profileMiniCardPack { background:linear-gradient(135deg,#0e7d7a,#49d4bf 47%,#5ca8f5); }.profileMiniPackOpening.legendary .profileMiniCardPack { border-color:#fff0a6; background:linear-gradient(135deg,#86520a,#f4b731 44%,#fff0a4 68%,#ae5b0b); box-shadow:inset 0 0 0 3px #fff8cf,0 0 16px #fff6a0,0 0 44px #f5bb32; }.profileMiniCardPack::before { content:''; position:absolute; inset:-30% -70%; background:linear-gradient(110deg,transparent 37%,#fff9 48%,transparent 59%); transform:translateX(-110%); animation:profileMiniPackFoil 3.3s ease both; }.profileMiniCardPack::after { content:''; position:absolute; z-index:2; top:-8px; bottom:-8px; left:50%; width:3px; background:#fff7d0; box-shadow:0 0 12px #fff,0 0 25px #ffdf5b; opacity:0; animation:profileMiniPackTear 3.3s ease both; }.profileMiniCardPack b { z-index:1; padding:8px 10px; border:1px solid #fff9; border-radius:8px; background:#25104a66; color:#fff6c5; font-size:15px; line-height:1.05; letter-spacing:1px; text-shadow:0 2px 4px #271044; }.profileMiniCardPack i { position:absolute; z-index:1; right:10px; bottom:7px; color:#fff; font-size:41px; font-style:normal; font-weight:900; text-shadow:0 2px 5px #301757; }
    @keyframes profileMiniCardSkillPulse { 0%,100% { box-shadow:inset 0 0 0 2px #fff7,0 5px 13px #1115; transform:scale(1); } 50% { box-shadow:inset 0 0 22px #fff,0 0 30px #ffe766,0 5px 18px #1119; transform:scale(1.055) rotate(-1deg); } }
    .profileMiniFriendQuestList { display:grid; gap:5px; margin:10px 0; padding:8px; border:1px solid #d9d0f6; border-radius:9px; background:#fbf9ff; color:#644c83; font-size:12px; }
    .profileMiniFriendQuest { display:flex; align-items:center; justify-content:space-between; gap:8px; }
    .profileMiniFriendQuest button { padding:3px 6px; border-color:#cdb4ef; color:#70479a; font-size:11px; }
    .profileMiniFriendWeeklyQuest { display:grid; gap:5px; margin:10px 0; padding:8px; border:1px solid #f4d68c; border-radius:9px; background:#fffaf0; color:#7b5a12; font-size:12px; }
    .profileMiniFriendWeekly { display:flex; align-items:center; justify-content:space-between; gap:8px; }
    .profileMiniFriendWeekly button { padding:3px 6px; border-color:#edce7a; color:#795300; font-size:11px; }
    .profileMiniFeedback { margin:8px 0; padding:7px 9px; border:1px solid #f0c6d2; border-radius:9px; background:#fff6f8; color:#a24368; font-size:12px; font-weight:700; }
    .profileMiniAlert { margin:6px 0; padding:6px 9px; border-radius:8px; background:#fff6d8; color:#826018; font-size:12px; }
    .profileMiniGallery { display:grid; gap:6px; margin:10px 0; padding:9px; border:1px solid #d6d5f1; border-radius:11px; background:linear-gradient(135deg,#fbfaff,#f4f2ff); color:#655886; font-size:12px; }
    .profileMiniGallery > div { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
    .profileMiniGalleryEntry { display:grid; justify-items:center; gap:2px; padding:6px; border-radius:8px; background:#fff; text-align:center; }
    .profileMiniPeppyHeart { display:inline-block; color:#ff4f9a; font-size:1.08em; font-weight:900; line-height:1; text-shadow:0 1px 1px #fff,0 0 4px #ff9ac5; vertical-align:baseline; }
    .profileMiniGalleryEntry small { color:#887d9e; font-size:10px; }
    .profileMiniTeam, .profileMiniBadges { display:flex; flex-wrap:wrap; gap:7px; align-items:center; margin:8px 0; padding:8px; border-radius:10px; background:#f5f9ff; color:#5b6d92; font-size:12px; }
    .profileMiniBadges > div { display:flex; flex-wrap:wrap; gap:5px; }
    .profileMiniBadges span { opacity:.42; padding:3px 5px; border-radius:7px; background:#fff; }
    .profileMiniBadges span.unlocked { opacity:1; background:#fff1bd; color:#7d5800; }
    .profileMiniOutfits { display:flex; gap:4px; } .profileMiniOutfits button { padding:2px 4px !important; }
    .profileMiniFriendCard details { width:100%; font-size:10px; color:#70648d; } .profileMiniFriendCard details > div { margin-top:3px; }
    .profileMiniHouse.season-garden { filter:saturate(1.08) hue-rotate(7deg); } .profileMiniHouse.season-party::before { content:'🎉 ✨ 🎀'; position:absolute; z-index:4; top:8px; left:13px; letter-spacing:12px; }
    .profileMiniMemories, .profileMiniGift { display:grid; gap:6px; margin:10px 0; padding:9px; border:1px solid #cfe7f1; border-radius:11px; background:#f9fdff; color:#4c7283; font-size:12px; }
    .profileMiniMemories ul { display:grid; gap:3px; margin:0; padding-left:18px; }
    .profileMiniGift { grid-template-columns:1fr 1fr auto; align-items:center; }
    .profileMiniNotifications { display:block; margin:9px 0; color:#637d89; font-size:12px; }
    @media (max-width:680px) { .profileMiniGift { grid-template-columns:1fr; } }
    .profileMiniFriendGrid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
    .profileMiniFriendCard { display:grid; justify-items:center; gap:5px; padding:9px; border:1px solid #d3edf7; border-radius:11px; background:#fff; color:#39738e; font-size:12px; text-align:center; }
    .profileMiniFriendCard model-viewer { width:80px; height:82px; background:transparent; --poster-color:transparent; }
    .profileMiniFriendModel { position:relative; width:86px; height:96px; }
    .profileMiniFriendModel model-viewer { position:absolute; inset:0; z-index:1; }
    .profileMiniEvolution { position:absolute; z-index:2; left:50%; bottom:0; padding:3px 5px; border-radius:999px; background:#eff9ff; border:1px solid #bde9f7; color:#39738e; font-size:9px; font-weight:800; white-space:nowrap; transform:translateX(-50%); }
    .profileMiniFriendCard[data-stage="2"] { border-color:#f2c85e; background:linear-gradient(160deg,#fffdf4,#fff7d6); box-shadow:0 5px 14px rgba(229,174,42,.16); }
    .profileMiniFriendCard[data-stage="2"] .profileMiniFriendModel::before { content:'⭐'; position:absolute; z-index:3; top:0; right:-2px; font-size:19px; filter:drop-shadow(0 2px 3px rgba(201,132,0,.3)); animation:profileMiniSparkle 1.4s ease-in-out infinite; }
    .profileMiniFriendCard[data-stage="2"] .profileMiniFriendModel::after { content:''; position:absolute; z-index:2; left:19px; top:21px; width:47px; height:9px; border-radius:50%; border-top:4px solid #f3a645; transform:rotate(-7deg); }
    .profileMiniFriendCard[data-stage="2"] .profileMiniEvolution { border-color:#f0c85e; background:#fff3bd; color:#8a6400; }
    .profileMiniFriendCard[data-stage="3"] { border-color:#d4a7f5; background:linear-gradient(160deg,#fffaff,#f3e8ff); box-shadow:0 6px 16px rgba(136,73,194,.22); }
    .profileMiniFriendCard[data-stage="3"] .profileMiniFriendModel::before { content:'👑'; position:absolute; z-index:3; left:31px; top:-5px; font-size:23px; filter:drop-shadow(0 2px 3px rgba(120,71,0,.3)); }
    .profileMiniFriendCard[data-stage="3"] .profileMiniFriendModel::after { content:''; position:absolute; z-index:0; inset:12px 5px 8px; border-radius:50%; background:radial-gradient(circle,#e6c5ff55 0 35%,transparent 70%); animation:profileMiniAura 1.7s ease-in-out infinite; }
    .profileMiniFriendCard[data-stage="3"] .profileMiniEvolution { border-color:#d6b0f2; background:#f4e8ff; color:#75429b; }
    @keyframes profileMiniSparkle { 50% { transform:scale(1.22) rotate(16deg); } }
    @keyframes profileMiniAura { 50% { transform:scale(1.16); opacity:.55; } }
    @keyframes profileMiniFriendCheer { 50% { transform:translateY(-20px) scale(1.14) rotate(-4deg); } }
    @keyframes profileMiniCardCelebrate { 50% { transform:translateY(-7px) scale(1.03); box-shadow:0 0 0 5px rgba(255,203,100,.34),0 12px 24px rgba(137,83,168,.22); } }
    @keyframes profileMiniActionPop { 0% { opacity:0; transform:translate(-50%,-30%) scale(.55); } 16%,78% { opacity:1; transform:translate(-50%,-50%) scale(1); } 100% { opacity:0; transform:translate(-50%,-78%) scale(.86); } }
    @keyframes profileMiniSpeechFloat { 50% { transform:translateX(-50%) translateY(-4px) !important; } }
    @keyframes profileMiniResultIn { from { opacity:0; transform:translateY(-7px) scale(.98); } to { opacity:1; transform:none; } }
    @keyframes profileMiniBabyWander { 0%,100% { transform:translateX(-4px) translateY(0); } 50% { transform:translateX(8px) translateY(-7px); } }
    @keyframes profileMiniGardenWalk { 0%,100% { transform:translateX(-10px) translateY(0) rotate(-1deg); } 42% { transform:translateX(18px) translateY(-6px) rotate(2deg); } 68% { transform:translateX(7px) translateY(1px) rotate(-2deg); } }
    @keyframes profileMiniArcadeBounce { 0%,100% { transform:translateY(0) scale(1); } 50% { transform:translateY(-11px) scale(1.04); } }
    @keyframes profileMiniNurserySway { 0%,100% { transform:rotate(-2deg) translateY(0); } 50% { transform:rotate(2deg) translateY(-3px); } }
    @keyframes profileMiniHatchFlash { 0% { opacity:0; transform:scale(.84); } 12%,75% { opacity:1; transform:scale(1); } 100% { opacity:0; transform:scale(1.08); } }
    @keyframes profileMiniCardFoil { 0%,62%,100% { transform:translateX(-22%) rotate(12deg); opacity:0; } 73% { transform:translateX(78%) rotate(12deg); opacity:.8; } }
    @keyframes profileMiniGoldSheen { 0%,100% { background-position:0 0,0 0,-80% 0; } 50% { background-position:0 0,0 0,150% 0; } }
    @keyframes profileMiniGoldGlitter { 0%,100% { background-position:0 0,18px 27px,43px 11px; opacity:.4; } 48% { opacity:.78; } 50% { background-position:31px -24px,-17px 54px,79px -28px; opacity:.72; } }
    @keyframes profileMiniCardReveal { 0% { opacity:0; transform:scale(.7); } 10%,83% { opacity:1; transform:scale(1); } 100% { opacity:0; transform:scale(1.08); } }
    @keyframes profileMiniPackBackdrop { 0% { opacity:0; } 9%,78% { opacity:1; } 100% { opacity:0; } }
    @keyframes profileMiniPackShake { 0%,7% { opacity:0; transform:translateY(12px) rotate(-4deg) scale(.76); } 13% { opacity:1; transform:translateX(-8px) rotate(-8deg) scale(.94); } 20% { transform:translateX(8px) rotate(7deg) scale(1); } 27% { transform:translateX(-9px) rotate(-7deg); } 34% { transform:translateX(9px) rotate(7deg); } 41% { transform:translateX(-6px) rotate(-5deg); } 49% { transform:translateX(3px) rotate(2deg) scale(1.02); } 61% { transform:translateY(-3px) rotate(-1deg) scale(1.08); filter:brightness(1.28); } 71% { opacity:1; transform:translateY(-9px) rotate(0) scale(1.28); filter:brightness(2); } 82% { opacity:0; transform:translateY(-26px) rotate(5deg) scale(1.68); filter:brightness(3); } 100% { opacity:0; transform:translateY(-26px) scale(1.7); } }
    @keyframes profileMiniPackBurst { 0%,48% { opacity:0; transform:scale(.42) rotate(0deg); } 60% { opacity:.28; transform:scale(.74) rotate(80deg); } 72% { opacity:1; transform:scale(1.1) rotate(135deg); } 84%,100% { opacity:0; transform:scale(1.55) rotate(210deg); } }
    @keyframes profileMiniPackFoil { 0%,42% { opacity:0; transform:translateX(-110%) rotate(7deg); } 52%,70% { opacity:1; transform:translateX(110%) rotate(7deg); } 84%,100% { opacity:0; transform:translateX(145%) rotate(7deg); } }
    @keyframes profileMiniPackTear { 0%,55% { opacity:0; transform:scaleY(.2); } 65%,76% { opacity:1; transform:scaleY(1.15); } 88%,100% { opacity:0; transform:scaleY(1.7); } }
    @keyframes profileMiniPackStars { 0%,10% { opacity:0; transform:scale(.4); } 32% { opacity:.7; transform:scale(1.08); } 61% { opacity:1; transform:scale(1.28); } 82%,100% { opacity:0; transform:scale(2.1); } }
    .profileMiniFriendCard select { width:100%; border:1px solid #c4e5f3; border-radius:7px; padding:4px; color:#17688d; font-size:11px; }
    .profileMiniFriendCard div { display:flex; justify-content:center; flex-wrap:wrap; gap:4px; }
    .profileMiniFriendCard button { font-size:11px; padding:4px 6px; }
    .profileMiniFriendCard button:disabled { cursor:not-allowed; opacity:.52; filter:grayscale(.3); }
    .profileMiniDailyLimit { color:#8a6380; font-weight:700; }
    .profileMiniSkill { min-height:27px; color:#6e5e9b; line-height:1.25; }
    .profileMiniBondStory { min-height:18px; padding:3px 6px; border-radius:999px; background:#fff5cf; color:#815c15; font-size:10px; font-weight:800; }
    .profileMiniFriendsGame footer { display:grid; gap:5px; margin-top:10px; padding-top:9px; border-top:1px dashed #bde9f7; color:#6b5b80; font-size:12px; }
    @media (max-width:680px) { .profileMiniFriendGrid { grid-template-columns:1fr; }.profileMiniHouse { height:290px; }.profileMiniHouseFriend.bear { left:14%; }.profileMiniHouseFriend.duck { left:40%; }.profileMiniHouseFriend.pup { left:65%; }.profileMiniEggNest { transform:scale(.78); transform-origin:bottom right; }.profileMiniEggNest.duck { right:59px; }.profileMiniEggNest.bear { right:110px; }.profileMiniHouseBaby.baby-0 { left:27%; }.profileMiniHouseBaby.baby-1 { left:51%; }.profileMiniHouseBaby.baby-2 { left:72%; } }
    @media (max-width:680px) { .profileMiniCardProgress { grid-template-columns:1fr; }.profileMiniCardSets { grid-template-columns:1fr; } }
    @media (max-width:680px) { .profileMiniMasteryGrid,.profileMiniSessionBrief>div { grid-template-columns:1fr; } }
    .factPill {
      border: 1px solid var(--line);
      border-radius: 999px;
      padding: 4px 9px;
      background: #fff;
      color: var(--muted);
      font-size: 12px;
    }
    .employeeGrid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
      gap: 12px;
    }
    .employeeCard {
      display: grid;
      gap: 10px;
      padding: 12px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--panel);
    }
    .employeeCardTop {
      display: flex;
      gap: 10px;
      align-items: center;
      min-width: 0;
    }
    .employeeActions { display: flex; gap: 8px; flex-wrap: wrap; }
    .memberPicker {
      display: grid;
      gap: 6px;
      max-height: 150px;
      overflow: auto;
      padding: 8px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fff;
    }
    .memberPicker label {
      display: flex;
      align-items: center;
      gap: 8px;
      color: var(--text);
      font-size: 13px;
      font-weight: 700;
    }
    .memberPicker input {
      width: auto;
      min-height: auto;
    }
    .feedComposer {
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 12px;
      background: var(--panel);
      display: grid;
      gap: 10px;
    }
    .profileEditorGrid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 10px;
    }
    .profileEditorActions {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      justify-content: flex-end;
    }
    .postHeader {
      display: flex;
      gap: 10px;
      align-items: center;
    }
    .notificationList {
      display: grid;
      gap: 10px;
    }
    .notificationItem {
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--panel);
      padding: 12px;
      display: grid;
      gap: 6px;
      cursor: pointer;
    }
    .notificationItem.unread { border-color: #7bcdd2; background: var(--brand-soft); }
.notificationToastStack {
      position: fixed;
      right: 18px;
      top: 78px;
      z-index: 60;
      width: min(360px, calc(100vw - 28px));
      display: grid;
      gap: 10px;
      pointer-events: none;
    }
    .notificationToast {
      pointer-events: auto;
      border: 1px solid #b9dfe2;
      border-radius: 8px;
      background: #fff;
      box-shadow: 0 12px 32px rgba(20, 58, 62, .2);
      padding: 12px;
      display: grid;
      grid-template-columns: 38px minmax(0, 1fr) auto;
      gap: 10px;
      align-items: start;
    }
    .notificationToastBody { min-width: 0; display: grid; gap: 4px; }
    .notificationToastBody strong,
    .notificationToastBody span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .notificationToastActions { display: flex; gap: 5px; }
    .notificationToastActions button { min-height: 34px; padding: 0 9px; }
    .notificationSettingsGrid { display: grid; gap: 10px; }
    .settingRow {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 10px 0;
      border-bottom: 1px solid var(--line);
    }
    .settingRow:last-child { border-bottom: 0; }
    .settingRow input[type="checkbox"] { width: auto; min-height: auto; }
    .settingRow input[type="range"] { width: min(260px, 45vw); }
    .desktopRuntimeBadge, .desktopUpdateStatusBadge {
      display: inline-flex;
      align-items: center;
      width: fit-content;
      min-height: 28px;
      padding: 4px 9px;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 800;
    }
    .desktopRuntimeBadge { background: var(--brand-soft); color: var(--brand-dark); }
    .desktopUpdateStatusBadge { background: #edf4f3; color: var(--muted); }
    .postCard {
      display: grid;
      gap: 10px;
      padding: 14px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--panel);
    }
    .postHeader { display: flex; gap: 10px; align-items: center; }
    .postHeader strong { display: block; }
    .bottomNav { display: none; }
    .bottomNav button { position: relative; }
    .bottomNavIcon {
      display: grid;
      place-items: center;
      min-height: 20px;
      font-size: 18px;
      line-height: 1;
    }
    .bottomNavLabel { font-size: 11px; line-height: 1; }
    .bottomNav .badge {
      position: absolute;
      top: 2px;
      left: calc(50% + 7px);
      margin: 0;
      min-width: 17px;
      height: 17px;
      padding: 0 4px;
      font-size: 10px;
    }

    .lightbox {
      position: fixed;
      inset: 0;
      z-index: 80;
      display: grid;
      grid-template-rows: auto minmax(0, 1fr) auto;
      gap: 12px;
      padding: 18px;
      background: rgba(8, 20, 24, .92);
      color: #fff;
    }
    .lightbox.hidden { display: none !important; }
    .lightboxTop, .lightboxBottom {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }
    .lightboxStage {
      min-height: 0;
      display: grid;
      place-items: center;
    }
    .lightboxStage img {
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
      border-radius: 8px;
      box-shadow: 0 20px 60px rgba(0,0,0,.4);
    }
    .lightbox button { background: rgba(255,255,255,.16); color: #fff; }

    @media (max-width: 1100px) {
      .app { grid-template-columns: 82px 280px minmax(0, 1fr); }
      .infoPane { display: none; }
      .moduleView { grid-column: 2 / 4; }
    }
    @media (max-width: 760px) {
      .shell {
        height: var(--app-height);
        min-height: var(--app-height);
        grid-template-rows: calc(56px + var(--safe-top)) minmax(0, 1fr) calc(var(--mobile-nav-height) + var(--safe-bottom));
        overflow: hidden;
      }
      .topbar {
        height: auto;
        min-height: calc(56px + var(--safe-top));
        padding: var(--safe-top) max(12px, var(--safe-right)) 0 max(12px, var(--safe-left));
      }
      .mark { width: 38px; height: 38px; }
      .brand p, .status { display: none; }
      .topActions { margin-left: auto; }
      .topActions > button { width: 42px; min-width: 42px; padding: 0; overflow: hidden; color: transparent; }
      .topActions > button .badge { color: #fff; margin: 0; }
      .app {
        min-height: 0;
        height: 100%;
        grid-template-columns: 1fr;
        overflow: hidden;
      }
      .mainRail { display: none; }
      .chatListPane, .chat, .moduleView {
        grid-column: 1;
        min-height: 0;
        height: 100%;
      }
      .chatListPane.mobileHidden, .chat.mobileHidden, .moduleView.mobileHidden { display: none; }
      .chatListPane {
        border-right: 0;
        padding: 12px max(12px, var(--safe-right)) 18px max(12px, var(--safe-left));
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
      }
      .paneTitle { position: sticky; top: 0; z-index: 2; padding: 4px 0 8px; background: var(--panel-soft); }
      .roomButton, .userButton { min-height: 60px; }
      .backButton { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; padding: 0 10px; }
      .chat { grid-template-rows: 56px minmax(0, 1fr) auto; }
      .chatHead { gap: 8px; padding: 0 10px; }
      .chatHead .avatar.small { width: 32px; height: 32px; }
      .chatTitle h2 { font-size: 16px; }
      .chatTitle .hint { font-size: 11px; }
      .headActions button { min-width: 42px; padding: 0 8px; font-size: 11px; }
      .messages {
        min-height: 0;
        padding: 12px 10px calc(16px + var(--composer-clearance));
        scroll-padding-bottom: calc(16px + var(--composer-clearance));
        gap: 10px;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
      }
      .jumpToLatest {
        right: max(12px, var(--safe-right));
        bottom: 10px;
        min-width: 46px;
        min-height: 46px;
        padding: 0 12px;
      }
      .jumpToLatestBadge { max-width: 130px; }
      .notificationToastStack {
        top: max(10px, var(--safe-top));
        right: max(10px, var(--safe-right));
        left: max(10px, var(--safe-left));
        width: auto;
      }
      .notificationToast { grid-template-columns: 34px minmax(0, 1fr) auto; }
      .message { max-width: 94%; gap: 7px; }
      .bubble { padding: 8px 10px; }
      .messageActions { gap: 5px; }
      .messageActions button { min-height: 36px; padding: 0 9px; font-size: 11px; }
      .composer {
        gap: 6px;
        padding: 8px max(10px, var(--safe-right)) calc(8px + var(--safe-bottom)) max(10px, var(--safe-left));
        box-shadow: 0 -8px 20px rgba(21, 45, 50, .06);
      }
      .composerTools { flex-wrap: wrap; gap: 6px; }
      .composerIconButton { width: 36px; height: 36px; min-height: 36px; }
      .stickerPicker { grid-template-columns: repeat(3, minmax(72px, 1fr)); }
      .messageSticker { width: 160px; min-height: 138px; }
      .messageSticker.officialSticker { width: min(210px, 75vw); min-height: 0; }
      .composerLine { grid-template-columns: minmax(0, 1fr) 54px; align-items: end; }
      #messageInput { min-height: 46px; max-height: 120px; resize: none; }
      #sendButton { width: 54px; min-height: 46px; padding: 0 8px; }
      .moduleView { grid-template-rows: 56px minmax(0, 1fr); }
      .profileCover { min-height: 132px; }
      .profileSummary {
        grid-template-columns: 1fr;
        align-items: start;
        margin-top: -34px;
        padding: 0 12px 12px;
        min-height: 0;
      }
      .profileSummary > div:not(.avatar) {
        padding-top: 0;
      }
      .profileSummary .avatar {
        width: 82px;
        height: 82px;
      }
      .profileStatusCard {
        align-items: flex-start;
        flex-direction: column;
      }
      .moduleHead { min-width: 0; padding: 0 12px; gap: 8px; }
      .moduleHead h2 { font-size: 17px; }
      .moduleHead .hint { max-width: 60vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
      .moduleHead button { min-width: 44px; padding: 0 10px; font-size: 11px; }
      .moduleBody {
        min-height: 0;
        padding: 12px max(12px, var(--safe-right)) 20px max(12px, var(--safe-left));
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
      }
      .moduleGrid, .fileDetail { grid-template-columns: 1fr; }
      .mediaCenterGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
      .postCard { padding: 12px; }
      .row { flex-wrap: wrap; }
      .lightbox { padding: calc(12px + var(--safe-top)) max(12px, var(--safe-right)) calc(12px + var(--safe-bottom)) max(12px, var(--safe-left)); }
      .actionDetailsOverlay {
        align-items: end;
        padding: 0;
      }
      .actionDetailsPanel {
        width: 100%;
        max-height: min(82vh, calc(var(--app-height) - 44px));
        border-radius: 8px 8px 0 0;
        padding-bottom: var(--safe-bottom);
      }
      .actionActorRow { grid-template-columns: 40px minmax(0, 1fr); }
      .actionActorRow > .hint:last-child { grid-column: 2; }
      button, input, select { min-height: 44px; }
      .bottomNav {
        display: grid;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 2px;
        padding: 5px max(6px, var(--safe-right)) calc(5px + var(--safe-bottom)) max(6px, var(--safe-left));
        border-top: 1px solid var(--line);
        background: var(--panel);
        box-shadow: 0 -8px 24px rgba(21, 45, 50, .08);
        z-index: 25;
      }
      .bottomNav button {
        min-width: 0;
        min-height: 54px;
        padding: 5px 2px;
        display: grid;
        place-items: center;
        align-content: center;
        gap: 4px;
        font-size: 11px;
        background: transparent;
        color: var(--muted);
        white-space: normal;
      }
      .bottomNav button.active { background: var(--brand-soft); color: var(--brand-dark); }
      body.mobileChatActive .topbar,
      body.mobileChatActive .bottomNav { display: none !important; }
      body.mobileChatActive .shell { grid-template-rows: minmax(0, 1fr); }
      body.mobileChatActive .app,
      body.mobileChatActive .chat { height: var(--app-height); min-height: var(--app-height); }
    }

    /* PLCHAT_SENT_FILE_CARD_READABLE_V1 */
    .message.mine .bubble .attachment:not(.imageAttachment) {
      color: #075f78 !important;
    }
    .message.mine .bubble .attachment:not(.imageAttachment) .fileCard {
      background: #fff;
      color: #075f78 !important;
      border-radius: 12px 12px 0 0;
    }
    .message.mine .bubble .attachment:not(.imageAttachment) .fileIcon {
      background: #DFF8FC;
      color: #075f78 !important;
      border: 1px solid #BDEFF7;
    }
    .message.mine .bubble .attachment:not(.imageAttachment) .fileMeta,
    .message.mine .bubble .attachment:not(.imageAttachment) .fileMeta *,
    .message.mine .bubble .attachment:not(.imageAttachment) .fileMeta strong,
    .message.mine .bubble .attachment:not(.imageAttachment) .fileMeta span {
      color: #075f78 !important;
      opacity: 1;
      text-shadow: none;
    }
    .message.mine .bubble .attachment:not(.imageAttachment) .fileMeta strong {
      font-weight: 900;
      font-size: 14px;
      line-height: 1.25;
    }
    .message.mine .bubble .attachment:not(.imageAttachment) .fileMeta span {
      color: #0E7490 !important;
      font-size: 11px;
      line-height: 1.35;
    }
    .message.mine .bubble .attachment:not(.imageAttachment) .fileSourcePill {
      display: inline-flex;
      width: max-content;
      max-width: 100%;
      padding: 2px 8px;
      border-radius: 999px;
      background: #E0F7FF;
      color: #075f78 !important;
      font-weight: 800;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .message.mine .bubble .attachment:not(.imageAttachment) .attachmentActions {
      background: #fff;
      border-top: 1px solid #D7EEF2;
      border-radius: 0 0 12px 12px;
    }
    .message.mine .bubble .attachment:not(.imageAttachment) .attachmentActions .linkButton,
    .message.mine .bubble .attachment:not(.imageAttachment) .attachmentActions a:not(.primaryDownload) {
      color: #075f78 !important;
      font-weight: 900;
    }
    .message.mine .bubble .attachment:not(.imageAttachment) .primaryDownload {
      background: #06B6D4;
      color: #fff !important;
      border-radius: 9px;
      font-weight: 900;
    }
    .message.mine .bubble .attachment:not(.imageAttachment) .fileMeta strong,
    .message.mine .bubble .attachment:not(.imageAttachment) .fileMeta span {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    /* PLCHAT_GROUP_AVATAR_COMPACT_UI_V1 */
    #roomAvatarUrl,
    #roomAvatarFile {
      display: none !important;
    }
    .roomAvatarEditor {
      grid-template-columns: 52px minmax(0, 1fr);
      gap: 10px;
      padding: 10px;
      background: linear-gradient(135deg, #F0FDFF, #FFFFFF);
      border-color: #BDEFF7;
      box-shadow: 0 8px 20px rgba(6, 182, 212, .08);
    }
    .roomAvatarEditor .avatar {
      width: 52px;
      height: 52px;
      cursor: pointer;
      transition: transform .15s ease, box-shadow .15s ease;
    }
    .roomAvatarEditor .avatar:hover {
      transform: translateY(-1px);
      box-shadow: 0 0 0 4px rgba(6, 182, 212, .14), 0 10px 20px rgba(6, 182, 212, .18);
    }
    .roomAvatarModernActions {
      display: flex;
      flex-wrap: wrap;
      gap: 7px;
      align-items: center;
      min-width: 0;
    }
    .roomAvatarPickButton,
    .roomAvatarClearButton {
      min-height: 34px;
      border-radius: 999px;
      padding: 0 13px;
      border: 0;
      font-weight: 900;
      cursor: pointer;
    }
    .roomAvatarPickButton {
      color: #fff;
      background: linear-gradient(135deg, #06B6D4, #0891B2);
      box-shadow: 0 8px 16px rgba(6, 182, 212, .18);
    }
    .roomAvatarClearButton {
      color: #075F78;
      background: #E0F7FF;
    }
    .roomAvatarFileName {
      flex: 1 1 100%;
      min-width: 0;
      color: #0E7490;
      font-size: 11px;
      font-weight: 800;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .messages {
      padding: 10px 18px 12px !important;
    }
    .message {
      max-width: min(520px, 66%) !important;
      margin: 4px 0 !important;
    }
    .message .avatar.small {
      width: 28px;
      height: 28px;
      font-size: 10px;
    }
    .bubble {
      padding: 7px 10px !important;
      border-radius: 13px 13px 13px 5px !important;
    }
    .message.mine .bubble {
      border-radius: 13px 13px 5px 13px !important;
    }
    .msgMeta {
      font-size: 10px !important;
      margin-bottom: 3px;
    }
    .msgMeta strong {
      font-size: 11px !important;
    }
    .msgText {
      font-size: 13px !important;
      line-height: 1.42 !important;
    }
    .attachment.imageAttachment {
      max-width: 360px !important;
    }
    .imageAttachmentPreview {
      max-height: 260px !important;
    }
    .imageAttachmentPreview img {
      max-height: 260px !important;
      object-fit: contain !important;
    }
    .imageAttachmentPreview video,
    .profilePostVideoAttachment video {
      width: 100% !important;
      max-height: 360px !important;
      object-fit: contain !important;
      display: block !important;
      background: #000;
    }
    .imageAlbum {
      max-width: 360px !important;
    }
    .imageAlbumGrid {
      max-height: 280px !important;
    }
    .imageAlbumItem img {
      object-fit: cover !important;
    }
    .fileCard {
      padding: 8px !important;
    }
    .fileMeta strong {
      font-size: 12px !important;
    }
    .fileMeta span {
      font-size: 10px !important;
    }
    .attachmentActions {
      gap: 6px !important;
      padding: 7px !important;
    }
    .attachmentActions a,
    .attachmentActions button,
    .messageActions button {
      min-height: 26px !important;
      font-size: 11px !important;
      padding: 0 9px !important;
    }
    .composer {
      padding: 7px 12px 9px !important;
    }
    .composerTools {
      gap: 5px !important;
      margin-bottom: 5px !important;
    }
    .composerIconButton {
      width: 30px !important;
      height: 30px !important;
      min-height: 30px !important;
      font-size: 15px !important;
    }
    .composerLine textarea {
      min-height: 42px !important;
      font-size: 13px !important;
      line-height: 1.35 !important;
    }
    #sendButton {
      min-width: 48px !important;
      min-height: 42px !important;
      border-radius: 12px !important;
      font-size: 13px !important;
    }

    /* PLCHAT_GROUP_AVATAR_PICKER_DEFAULT_CHAT_V2 */
    #roomAvatarUrl {
      display: none !important;
    }
    #roomAvatarFile {
      position: absolute !important;
      width: 1px !important;
      height: 1px !important;
      opacity: 0 !important;
      pointer-events: none !important;
      left: -9999px !important;
    }
    .roomAvatarEditor {
      grid-template-columns: 50px minmax(0, 1fr) !important;
      padding: 9px !important;
      border-radius: 16px !important;
      background: linear-gradient(135deg, #ECFEFF, #FFFFFF) !important;
      border-color: #A5F3FC !important;
      box-shadow: 0 10px 26px rgba(6, 182, 212, .10) !important;
    }
    .roomAvatarEditor .avatar {
      width: 50px !important;
      height: 50px !important;
      cursor: pointer;
      box-shadow: 0 0 0 3px #E0F7FF;
    }
    .roomAvatarModernActions {
      display: grid !important;
      grid-template-columns: 1fr auto;
      gap: 7px;
      align-items: center;
      min-width: 0;
    }
    .roomAvatarPickButton,
    .roomAvatarClearButton {
      min-height: 32px !important;
      border: 0 !important;
      border-radius: 999px !important;
      padding: 0 12px !important;
      font-size: 12px !important;
      font-weight: 900 !important;
      cursor: pointer;
      white-space: nowrap;
    }
    .roomAvatarPickButton {
      color: #fff !important;
      background: linear-gradient(135deg, #06B6D4, #0891B2) !important;
      box-shadow: 0 8px 18px rgba(6, 182, 212, .22);
    }
    .roomAvatarClearButton {
      color: #075F78 !important;
      background: #DFF8FC !important;
    }
    .roomAvatarFileName {
      grid-column: 1 / -1;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 11px;
      font-weight: 800;
      color: #0E7490;
    }
    /* PLCHAT_GROUP_AVATAR_PICKER_FIX_V3 */
    #roomAvatarFile {
      display: block !important;
      position: fixed !important;
      left: -10000px !important;
      top: -10000px !important;
      width: 1px !important;
      height: 1px !important;
      opacity: 0 !important;
      pointer-events: none !important;
    }
    #roomAvatarUrl {
      display: none !important;
    }

    /* PLCHAT_ROOM_AVATAR_PREVIEW_FIX_V4 */
    #userList .userButton {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      width: 100%;
      min-height: 38px;
      padding: 8px 10px;
      text-align: left;
    }
    #userList .userMain {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      min-width: 0;
      font-weight: 700;
    }
    #userList .userMain span:last-child {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    #userList small { white-space: nowrap; }
    #userList .presenceDot { width: 8px; height: 8px; flex: 0 0 8px; }
    .attachment img {
      object-fit: contain !important;
      background: #fff !important;
      max-height: 260px !important;
    }
    .lightbox {
      padding: 12px !important;
    }
    .lightboxStage {
      overflow: auto !important;
      align-content: center !important;
    }
    .lightboxStage img {
      width: auto !important;
      height: auto !important;
      max-width: calc(100vw - 48px) !important;
      max-height: calc(100vh - 122px) !important;
      object-fit: contain !important;
      display: block !important;
    }
    /* PLCHAT_PASTEL_BLUE_CUTE_CHAT_UI_V1 */
    :root {
      --pl-primary: #7EC8F5;
      --pl-primary-soft: #DDF3FF;
      --pl-primary-light: #EEF9FF;
      --pl-primary-hover: #BFEAFF;
      --pl-primary-active: #8FD6FF;
      --pl-bg: #F7FBFF;
      --pl-surface: #FFFFFF;
      --pl-surface-blue: #F0F8FF;
      --pl-text-main: #1F2A37;
      --pl-text-secondary: #4B5563;
      --pl-text-muted: #8A99A8;
      --pl-border: #D8ECF8;
      --pl-shadow: rgba(80, 140, 180, 0.12);
      --pl-bubble-own: #DDF3FF;
      --pl-bubble-other: #FFFFFF;
      --pl-danger: #FF5A7A;
      --pl-success: #3DBB7D;
      --pl-warning: #F5A524;

      --brand: var(--pl-primary);
      --brand-dark: #2E6F91;
      --brand-soft: var(--pl-primary-soft);
      --line: var(--pl-border);
      --text: var(--pl-text-main);
      --muted: var(--pl-text-muted);
      --pl-line-blue: var(--pl-primary);
      --pl-line-blue-dark: #2E6F91;
      --pl-line-blue-soft: var(--pl-primary-soft);
      --pl-line-rail: #DDF3FF;
      --pl-line-chat-bg: var(--pl-bg);
      --pl-line-list-bg: var(--pl-primary-light);
      --pl-line-border: var(--pl-border);
      --pl-line-text-muted: var(--pl-text-muted);
    }

    html,
    body {
      background: var(--pl-bg) !important;
      color: var(--pl-text-main) !important;
      font-family: "LINE Seed Sans TH", "Noto Sans Thai", "Prompt", "Sarabun", system-ui, sans-serif !important;
      font-size: 13px;
      letter-spacing: 0 !important;
    }

    .topbar {
      background: rgba(255, 255, 255, .94) !important;
      border-bottom: 1px solid var(--pl-border) !important;
      box-shadow: 0 6px 20px rgba(80, 140, 180, .07) !important;
    }
    .brand h1,
    .paneTitle h2,
    .chatTitle h2,
    .infoPane h2,
    .panel h2,
    .panel h3,
    .card h3,
    strong {
      color: var(--pl-text-main);
      letter-spacing: 0 !important;
    }
    .brand p,
    .hint,
    small,
    .msgMeta,
    .chatTitle .hint,
    .roomText small,
    .userMain small,
    .fileName {
      color: var(--pl-text-secondary) !important;
    }

    .app {
      background: var(--pl-bg) !important;
    }
    .mainRail {
      background: linear-gradient(180deg, #E8F7FF 0%, #DDF3FF 100%) !important;
      border-right: 1px solid var(--pl-border) !important;
      color: #2E6F91 !important;
    }
    .navButton {
      color: #2E6F91 !important;
      border-radius: 16px !important;
      opacity: 1 !important;
      background: transparent !important;
      box-shadow: none !important;
    }
    .navButton:hover,
    .navButton.active {
      background: #FFFFFF !important;
      color: #1F5F80 !important;
      box-shadow: 0 8px 18px rgba(80, 140, 180, .12) !important;
    }
    .navButton .badge,
    .badge,
    .roomUnreadBadge {
      background: var(--pl-danger) !important;
      color: #FFFFFF !important;
      box-shadow: 0 0 0 2px #FFFFFF !important;
    }

    .chatListPane,
    .infoPane {
      background: var(--pl-primary-light) !important;
      border-color: var(--pl-border) !important;
    }
    .paneTitle,
    .chatHead,
    .composer,
    .auth,
    .panel,
    .sideItem,
    .authCard,
    .modalCard,
    .actionDetailsCard,
    .notificationDropdown,
    .downloadHistoryPanel,
    .fileCard,
    .attachmentCard,
    .selectedFilePreview,
    .filePreviewCard {
      background: var(--pl-surface) !important;
      border-color: var(--pl-border) !important;
      box-shadow: 0 10px 28px var(--pl-shadow) !important;
    }
    .panel,
    .sideItem,
    .auth,
    .authCard,
    .modalCard,
    .actionDetailsCard,
    .notificationDropdown,
    .downloadHistoryPanel {
      border-radius: 22px !important;
    }

    #chatSearch,
    input,
    textarea,
    select,
    .composerLine {
      background: #FFFFFF !important;
      border: 1px solid var(--pl-border) !important;
      color: var(--pl-text-main) !important;
      border-radius: 16px !important;
      box-shadow: none !important;
    }
    .unifiedSearchResults {
      display: grid;
      gap: 10px;
      max-height: min(46vh, 420px);
      overflow: auto;
      padding: 10px;
      border: 1px solid var(--pl-border);
      border-radius: 16px;
      background: #fff;
      box-shadow: 0 12px 28px rgba(16, 75, 106, .12);
    }
    .unifiedSearchGroup { display: grid; gap: 5px; }
    .unifiedSearchGroup > strong { color: var(--pl-primary-active); font-size: 12px; }
    .unifiedSearchRow {
      display: grid;
      grid-template-columns: 28px minmax(0, 1fr);
      align-items: center;
      gap: 8px;
      width: 100%;
      padding: 8px;
      text-align: left;
      border: 1px solid transparent;
      border-radius: 11px;
      background: #f4fbff;
      color: var(--pl-text-main);
    }
    .unifiedSearchRow:hover { border-color: var(--pl-primary-active); background: #e9f7ff; }
    .unifiedSearchRow strong, .unifiedSearchRow small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .unifiedSearchRow small { color: var(--pl-text-muted); font-size: 11px; margin-top: 2px; }
    .unifiedSearchIcon { font-size: 16px; text-align: center; }
    .unifiedSearchEmpty { color: var(--pl-text-muted); font-size: 12px; padding: 4px; }
    input::placeholder,
    textarea::placeholder {
      color: var(--pl-text-muted) !important;
    }
    :where(button, a, input, textarea, select, .roomButton, .userButton, .navButton, .bubble):focus-visible {
      outline: 0 !important;
      border-color: var(--pl-primary-active) !important;
      box-shadow: 0 0 0 3px rgba(126, 200, 245, .28) !important;
    }

    .chatListPane .roomButton,
    .chatListPane .userButton {
      min-height: 72px;
      margin: 0 8px 7px;
      width: calc(100% - 16px);
      border: 1px solid var(--pl-border) !important;
      border-radius: 18px !important;
      background: #FFFFFF !important;
      color: var(--pl-text-main) !important;
      box-shadow: 0 6px 18px rgba(80, 140, 180, .06) !important;
    }
    .chatListPane .roomButton:hover,
    .chatListPane .userButton:hover {
      background: var(--pl-primary-light) !important;
      color: var(--pl-text-main) !important;
      box-shadow: 0 10px 24px rgba(80, 140, 180, .10) !important;
    }
    .chatListPane .roomButton.active,
    .chatListPane .userButton.active {
      background: var(--pl-primary-soft) !important;
      border-color: var(--pl-primary-active) !important;
      color: var(--pl-text-main) !important;
      box-shadow: inset 4px 0 0 var(--pl-primary), 0 10px 24px rgba(80, 140, 180, .13) !important;
    }
    .chatListPane .roomButton *,
    .chatListPane .userButton * {
      color: inherit !important;
      text-shadow: none !important;
    }
    .chatListPane .roomText strong,
    .chatListPane .userMain strong {
      color: var(--pl-text-main) !important;
      font-size: 13px !important;
    }
    .chatListPane .roomText small,
    .chatListPane .userMain small {
      color: var(--pl-text-secondary) !important;
      font-size: 12px !important;
      opacity: 1 !important;
    }
    .chatListPane .avatar.small,
    .chatListPane .roomButton .avatar,
    .chatListPane .userButton .avatar,
    .chatHead .avatar,
    .avatar.small {
      background: var(--pl-primary-soft) !important;
      color: #2E6F91 !important;
      border: 1px solid var(--pl-border) !important;
      box-shadow: 0 2px 8px rgba(80, 140, 180, .10) !important;
    }

    .messages {
      background:
        radial-gradient(circle at 12% 10%, rgba(191, 234, 255, .42), transparent 28%),
        linear-gradient(180deg, #F7FBFF 0%, #FFFFFF 100%) !important;
      padding: 20px 28px 24px !important;
    }
    .message {
      margin: 8px 0 !important;
      gap: 9px !important;
      max-width: min(700px, 76%) !important;
    }
    .bubble {
      padding: 9px 12px !important;
      border: 1px solid var(--pl-border) !important;
      border-radius: 20px 20px 20px 9px !important;
      background: var(--pl-bubble-other) !important;
      color: var(--pl-text-main) !important;
      box-shadow: 0 5px 16px rgba(80, 140, 180, .10) !important;
    }
    .message.mine .bubble {
      border-color: #BFEAFF !important;
      border-radius: 20px 20px 9px 20px !important;
      background: var(--pl-bubble-own) !important;
      color: var(--pl-text-main) !important;
      box-shadow: 0 5px 16px rgba(80, 140, 180, .12) !important;
    }
    .message.mine .bubble *,
    .message.mine .bubble .msgMeta,
    .message.mine .bubble .msgMeta strong,
    .message.mine .bubble .hint,
    .message.mine .bubble .readStatus,
    .message.mine .bubble .actionDetailLink,
    .message.mine .bubble a {
      color: var(--pl-text-main) !important;
      text-shadow: none !important;
    }
    .msgText {
      color: var(--pl-text-main) !important;
      font-size: 13px !important;
      line-height: 1.48 !important;
    }
    .msgMeta,
    .msgMeta span,
    .readStatus {
      color: var(--pl-text-muted) !important;
      font-size: 11px !important;
    }
    .msgMeta strong {
      color: var(--pl-text-secondary) !important;
      font-size: 12px !important;
    }
    .reactionChip,
    .messageActions button {
      background: rgba(255, 255, 255, .84) !important;
      border: 1px solid var(--pl-border) !important;
      color: var(--pl-text-secondary) !important;
      border-radius: 999px !important;
    }

    .stickerOnly {
      max-width: min(260px, 72%) !important;
      align-items: flex-end !important;
    }
    .stickerOnly .stickerBubble,
    .stickerOnly.mine .stickerBubble {
      padding: 0 !important;
      border: 0 !important;
      border-radius: 0 !important;
      padding: 0 !important;
      min-width: 0 !important;
      background: transparent !important;
      box-shadow: none !important;
      border-radius: 0 !important;
      color: var(--pl-text-main) !important;
    }
    .stickerOnly .stickerBubble .msgMeta {
      margin: 0 0 4px;
      padding: 0 4px;
      color: var(--pl-text-muted) !important;
    }
    .stickerOnly.mine .stickerBubble .msgMeta {
      text-align: right;
    }
    .stickerOnly .reactionRow,
    .stickerOnly .messageActivitySummary {
      margin-top: 4px;
    }
    .messageSticker,
    .messageSticker.officialSticker {
      width: min(210px, 64vw) !important;
      min-height: 0 !important;
      margin-top: 0 !important;
      padding: 0 !important;
      border: 0 !important;
      border-radius: 0 !important;
      background: transparent !important;
      box-shadow: none !important;
      color: var(--pl-text-main) !important;
    }
    .messageStickerImage {
      width: 100% !important;
      max-height: 220px !important;
      object-fit: contain !important;
      filter: drop-shadow(0 8px 12px rgba(80, 140, 180, .14));
    }
    .messageSticker strong,
    .messageSticker small {
      display: none !important;
    }
    .messageStickerEmoji {
      font-size: 76px !important;
      filter: drop-shadow(0 8px 12px rgba(80, 140, 180, .12));
    }

    .stickerPicker,
    .emojiPicker,
    .attachMenu,
    .imageActionMenu,
    .contextMenu,
    .reactionPopup,
    .lightboxPanel,
    .actionDetailsCard,
    .downloadToast,
    .desktopDownloadPanel {
      border: 1px solid var(--pl-border) !important;
      border-radius: 24px !important;
      background: rgba(255, 255, 255, .98) !important;
      box-shadow: 0 18px 44px rgba(80, 140, 180, .14) !important;
    }
    .stickerPicker {
      grid-template-columns: repeat(4, minmax(82px, 1fr)) !important;
      gap: 9px !important;
      max-height: 350px !important;
      padding: 12px !important;
      background: linear-gradient(180deg, #FFFFFF 0%, #F0F8FF 100%) !important;
    }
    .stickerPickerHeader {
      color: var(--pl-text-secondary) !important;
      font-size: 12px !important;
    }
    .stickerOption {
      min-height: 112px !important;
      border: 1px solid var(--pl-border) !important;
      border-radius: 18px !important;
      background: #FFFFFF !important;
      color: var(--pl-text-main) !important;
      box-shadow: 0 5px 14px rgba(80, 140, 180, .08) !important;
    }
    .stickerOption:hover,
    .stickerOption:focus-visible {
      background: var(--pl-primary-light) !important;
      border-color: var(--pl-primary-active) !important;
      transform: translateY(-1px);
    }
    .stickerOptionImage {
      width: 82px !important;
      height: 82px !important;
      object-fit: contain !important;
    }
    .stickerOptionLabel {
      color: var(--pl-text-secondary) !important;
      font-size: 11px !important;
    }

    #sendButton,
    .primaryDownload,
    button:not(.ghost):not(.secondary):not(.danger):not(.linkButton):not(.composerIconButton):not(.attachOption) {
      background: var(--pl-primary) !important;
      color: #12384E !important;
      border-color: transparent !important;
      box-shadow: 0 8px 18px rgba(80, 140, 180, .14) !important;
    }
    #sendButton:hover,
    .primaryDownload:hover,
    button:not(.ghost):not(.secondary):not(.danger):not(.linkButton):not(.composerIconButton):not(.attachOption):hover {
      background: var(--pl-primary-hover) !important;
      color: #12384E !important;
    }
    button.secondary,
    .secondary,
    .headActions button,
    .composerIconButton,
    .linkButton {
      background: #EEF9FF !important;
      color: var(--pl-text-secondary) !important;
      border-color: var(--pl-border) !important;
    }
    button.danger,
    .danger {
      background: #FFF0F3 !important;
      color: #B4234D !important;
      border-color: #FFD1DC !important;
    }
    .progressBar,
    .downloadProgressBar {
      background: var(--pl-primary-soft) !important;
      border-radius: 999px !important;
    }
    .progressBar > *,
    .downloadProgressBar > *,
    progress::-webkit-progress-value {
      background: var(--pl-primary-active) !important;
      border-radius: 999px !important;
    }

    @media (max-width: 760px) {
      .messages {
        padding: 14px 12px 18px !important;
      }
      .message {
        max-width: 92% !important;
      }
      .stickerPicker {
        grid-template-columns: repeat(3, minmax(72px, 1fr)) !important;
        border-radius: 22px !important;
      }
      .messageSticker,
      .messageSticker.officialSticker {
        width: min(180px, 66vw) !important;
      }
      .messageStickerImage {
        max-height: 180px !important;
      }
    }

    /* PLCHAT_READ_RECEIPT_STICKER_FIX_V1 */
    .messageActivitySummary {
      display: none !important;
    }
    .readReceiptMeta {
      display: flex !important;
      flex-direction: column;
      align-items: flex-end;
      gap: 2px;
      margin-top: 6px;
      color: var(--pl-text-muted, #8A99A8) !important;
      font-size: 11px;
      line-height: 1.2;
      text-align: right;
    }
    .readReceiptButton {
      width: fit-content;
      min-height: 0;
      padding: 0 !important;
      border: 0 !important;
      background: transparent !important;
      box-shadow: none !important;
      color: var(--pl-text-muted, #8A99A8) !important;
      font-size: 11px !important;
      font-weight: 800;
      line-height: 1.2;
      cursor: pointer;
    }
    .readReceiptButton:hover,
    .readReceiptButton:focus-visible {
      color: var(--pl-line-blue-dark, #2E6F91) !important;
      text-decoration: underline;
    }
    .readReceiptMeta.unread .readReceiptButton {
      color: var(--pl-text-secondary, #4B5563) !important;
    }
    .readReceiptTime {
      color: var(--pl-text-muted, #8A99A8) !important;
      font-size: 11px;
      font-weight: 700;
    }
    .message.mine .bubble .readReceiptMeta,
    .message.mine .bubble .readReceiptMeta *,
    .message.mine .bubble .readReceiptButton,
    .message.mine .bubble .readReceiptTime {
      color: var(--pl-text-muted, #8A99A8) !important;
      text-shadow: none !important;
    }
    .message.stickerOnly {
      max-width: min(260px, 72%) !important;
    }
    .message.stickerOnly .stickerBubble,
    .message.stickerOnly.mine .stickerBubble {
      padding: 0 !important;
      border: 0 !important;
      background: transparent !important;
      box-shadow: none !important;
      border-radius: 0 !important;
    }
    .message.stickerOnly .messageSticker,
    .message.stickerOnly .messageSticker.officialSticker {
      width: min(220px, 64vw) !important;
      min-height: 0 !important;
      padding: 0 !important;
      margin: 0 !important;
      border: 0 !important;
      border-radius: 0 !important;
      background: transparent !important;
      box-shadow: none !important;
    }
    .message.stickerOnly .messageStickerImage {
      width: 100% !important;
      max-height: 220px !important;
      display: block;
      object-fit: contain !important;
      background: transparent !important;
      filter: drop-shadow(0 8px 12px rgba(80, 140, 180, .14));
    }
    .message.stickerOnly .messageSticker strong,
    .message.stickerOnly .messageSticker small {
      display: none !important;
    }
    .message.stickerOnly .stickerReadReceipt {
      margin-top: 4px;
      padding: 0 4px;
      background: transparent !important;
    }
    @media (max-width: 760px) {
      .message.stickerOnly .messageSticker,
      .message.stickerOnly .messageSticker.officialSticker {
        width: min(180px, 66vw) !important;
      }
      .message.stickerOnly .messageStickerImage {
        max-height: 180px !important;
      }
    }

    /* PLCHAT_MESSAGE_HOVER_ACTIONS_SOFT_MINT_V1 */
    :root {
      --pl-primary: #c1dbd4;
      --pl-primary-soft: #eef7f4;
      --pl-primary-hover: #d7ebe6;
      --pl-primary-active: #aacfc5;
      --pl-bg: #f7fbfa;
      --pl-surface: #ffffff;
      --pl-border: #d8e9e4;
      --pl-text-main: #1f2a2a;
      --pl-text-secondary: #4b5f5b;
      --pl-text-muted: #7c918c;
      --brand: var(--pl-primary);
      --brand-dark: #3f6960;
      --brand-soft: var(--pl-primary-soft);
      --line: var(--pl-border);
      --text: var(--pl-text-main);
      --muted: var(--pl-text-muted);
      --pl-line-blue: var(--pl-primary);
      --pl-line-blue-dark: #3f6960;
      --pl-line-blue-soft: var(--pl-primary-soft);
      --pl-line-rail: #e4f1ed;
      --pl-line-chat-bg: var(--pl-bg);
      --pl-line-list-bg: var(--pl-primary-soft);
      --pl-line-border: var(--pl-border);
      --pl-line-text-muted: var(--pl-text-muted);
    }

    html,
    body {
      background: var(--pl-bg) !important;
      color: var(--pl-text-main) !important;
      font-family: "Bebas Neue", "Noto Sans Thai", "Prompt", "Sarabun", system-ui, sans-serif !important;
      letter-spacing: 0 !important;
    }
    .msgText,
    #messageInput,
    input,
    textarea,
    .hint,
    .msgMeta,
    .readReceiptMeta,
    .roomText,
    .userMain,
    .sideItem,
    .panel {
      font-family: "Noto Sans Thai", "Prompt", "Sarabun", system-ui, sans-serif !important;
      letter-spacing: 0 !important;
    }
    .brand h1,
    .paneTitle h2,
    .chatTitle h2,
    .navButton span,
    button,
    .roomText strong,
    .userMain strong {
      font-family: "Bebas Neue", "Noto Sans Thai", "Prompt", "Sarabun", system-ui, sans-serif !important;
      letter-spacing: 0 !important;
    }
    .topbar,
    .chatHead,
    .composer,
    .panel,
    .sideItem,
    .modalCard,
    .actionDetailsCard {
      background: var(--pl-surface) !important;
      border-color: var(--pl-border) !important;
      box-shadow: 0 10px 26px rgba(31, 42, 42, .07) !important;
    }
    .mainRail {
      background: linear-gradient(180deg, #eef7f4 0%, #dfeee9 100%) !important;
      color: var(--pl-text-secondary) !important;
      border-right: 1px solid var(--pl-border) !important;
    }
    .navButton {
      color: var(--pl-text-secondary) !important;
      background: transparent !important;
    }
    .navButton:hover,
    .navButton.active {
      background: #ffffff !important;
      color: var(--pl-text-main) !important;
      box-shadow: 0 8px 18px rgba(31, 42, 42, .09) !important;
    }
    .badge,
    .roomUnreadBadge,
    .navButton .badge {
      background: #ff5a7a !important;
      color: #ffffff !important;
      box-shadow: 0 0 0 2px #ffffff !important;
    }
    .chatListPane,
    .infoPane,
    .messages {
      background: var(--pl-bg) !important;
      border-color: var(--pl-border) !important;
    }
    .messages {
      background:
        radial-gradient(circle at 12% 10%, rgba(193, 219, 212, .38), transparent 28%),
        linear-gradient(180deg, #f7fbfa 0%, #ffffff 100%) !important;
    }
    .chatListPane .roomButton,
    .chatListPane .userButton {
      background: #ffffff !important;
      color: var(--pl-text-main) !important;
      border: 1px solid var(--pl-border) !important;
      box-shadow: 0 6px 18px rgba(31, 42, 42, .05) !important;
    }
    .chatListPane .roomButton:hover,
    .chatListPane .userButton:hover,
    .chatListPane .roomButton.active,
    .chatListPane .userButton.active {
      background: var(--pl-primary-soft) !important;
      border-color: var(--pl-primary-active) !important;
      color: var(--pl-text-main) !important;
      box-shadow: inset 4px 0 0 var(--pl-primary-active), 0 10px 24px rgba(31, 42, 42, .09) !important;
    }
    .chatListPane .roomButton *,
    .chatListPane .userButton * {
      color: inherit !important;
      text-shadow: none !important;
    }
    .roomText strong,
    .userMain strong,
    .msgText,
    .bubble,
    .message.mine .bubble,
    button {
      color: var(--pl-text-main) !important;
    }
    .roomText small,
    .userMain small,
    .msgMeta,
    .readReceiptTime,
    .hint {
      color: var(--pl-text-secondary) !important;
    }
    .bubble,
    .message.mine .bubble {
      position: relative;
      overflow: visible !important;
      background: #ffffff !important;
      border-color: var(--pl-border) !important;
      box-shadow: 0 5px 16px rgba(31, 42, 42, .08) !important;
    }
    .message.mine .bubble {
      background: var(--pl-primary-soft) !important;
      border-color: var(--pl-primary) !important;
    }
    #sendButton,
    .primaryDownload,
    button:not(.ghost):not(.secondary):not(.danger):not(.linkButton):not(.composerIconButton):not(.attachOption):not(.readReceiptButton) {
      background: var(--pl-primary) !important;
      color: var(--pl-text-main) !important;
      border-color: transparent !important;
    }
    #sendButton:hover,
    .primaryDownload:hover,
    button:not(.ghost):not(.secondary):not(.danger):not(.linkButton):not(.composerIconButton):not(.attachOption):not(.readReceiptButton):hover {
      background: var(--pl-primary-hover) !important;
      color: var(--pl-text-main) !important;
    }
    button.secondary,
    .secondary,
    .headActions button,
    .composerIconButton,
    .linkButton {
      background: var(--pl-primary-soft) !important;
      color: var(--pl-text-secondary) !important;
      border-color: var(--pl-border) !important;
    }

    .message {
      position: relative;
      padding-bottom: 28px;
    }
    .messageActions {
      position: absolute !important;
      z-index: 12;
      inset-inline-start: 10px;
      top: calc(100% + 5px);
      width: max-content;
      max-width: min(520px, calc(100vw - 48px));
      display: flex !important;
      flex-wrap: nowrap;
      align-items: center;
      gap: 6px !important;
      margin: 0 !important;
      padding: 5px 8px !important;
      border: 1px solid var(--pl-border) !important;
      border-radius: 999px !important;
      background: rgba(255, 255, 255, .96) !important;
      box-shadow: 0 8px 24px rgba(31, 42, 42, .08) !important;
      opacity: 0;
      transform: translateY(6px);
      pointer-events: none;
      transition: opacity 160ms ease, transform 160ms ease;
      max-height: none !important;
      overflow-x: auto;
      overflow-y: visible;
      scrollbar-width: none;
    }
    .message.mine .messageActions {
      inset-inline-start: auto;
      inset-inline-end: 10px;
    }
    .message:hover .messageActions,
    .message:focus-within .messageActions,
    .message.actionsOpen .messageActions {
      opacity: 1;
      transform: translateY(0);
      pointer-events: auto;
    }
    .messageActions::-webkit-scrollbar {
      display: none;
    }
    .messageActions button {
      flex: 0 0 auto;
      min-height: 28px !important;
      padding: 0 9px !important;
      border-radius: 999px !important;
      border: 1px solid transparent !important;
      background: transparent !important;
      color: var(--pl-text-secondary) !important;
      box-shadow: none !important;
      font-size: 12px !important;
      font-weight: 800;
      white-space: nowrap;
    }
    .messageActions button:hover,
    .messageActions button:focus-visible {
      background: var(--pl-primary-soft) !important;
      border-color: var(--pl-border) !important;
      color: var(--pl-text-main) !important;
    }
    .messageActions button.danger {
      color: #b4234d !important;
    }
    .message.stickerOnly .stickerBubble {
      position: relative;
      overflow: visible !important;
    }
    .message.stickerOnly .messageActions {
      top: calc(100% + 6px);
      background: rgba(255, 255, 255, .97) !important;
    }
    .message.stickerOnly .messageSticker,
    .message.stickerOnly .messageSticker.officialSticker,
    .message.stickerOnly .messageStickerImage {
      background: transparent !important;
      border: 0 !important;
      box-shadow: none !important;
    }
    @media (hover: none), (pointer: coarse) {
      .message:hover .messageActions,
      .bubble:hover .messageActions {
        opacity: 0;
        transform: translateY(6px);
        pointer-events: none;
      }
      .message.actionsOpen .messageActions {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
      }
    }
    @media (max-width: 760px) {
      .message {
        padding-bottom: 32px;
      }
      .messageActions {
        max-width: calc(100vw - 34px);
        padding: 5px 7px !important;
      }
      .messageActions button {
        min-height: 32px !important;
        padding: 0 10px !important;
        font-size: 12px !important;
      }
    }
      /* PLCHAT_THEME_BAEDF6_TEXT_009EB9_V1 */
    :root {
      --pl-primary: #baedf6 !important;
      --pl-primary-soft: #f0fbfd !important;
      --pl-primary-hover: #d8f5fa !important;
      --pl-primary-active: #8eddea !important;
      --pl-bg: #f6fdff !important;
      --pl-surface: #ffffff !important;
      --pl-border: #c9eef5 !important;
      --pl-text-main: #009eb9 !important;
      --pl-text-secondary: #267f8f !important;
      --pl-text-muted: #5d9aaa !important;
      --brand: var(--pl-primary) !important;
      --brand-dark: #009eb9 !important;
      --brand-soft: var(--pl-primary-soft) !important;
      --line: var(--pl-border) !important;
      --text: var(--pl-text-main) !important;
      --muted: var(--pl-text-muted) !important;
    }
    body,
    .app,
    .panel,
    .chatTitle,
    .roomTitle,
    .roomName,
    .userMain,
    .msgAuthor,
    .msgText,
    .settingsTitle,
    .sectionTitle {
      color: var(--pl-text-main) !important;
    }
    .hint,
    .msgMeta,
    .readReceiptMeta,
    .roomMeta,
    .userSub,
    .settingsSub,
    .muted {
      color: var(--pl-text-muted) !important;
    }
    .leftRail,
    .sideItem.active,
    .roomItem.active,
    .message.mine .bubble:not(.stickerBubble),
    #sendButton,
    .primaryDownload {
      background: var(--pl-primary) !important;
      color: var(--pl-text-main) !important;
      border-color: var(--pl-border) !important;
    }
    .message.mine .bubble:not(.stickerBubble) .msgText,
    .message.mine .bubble:not(.stickerBubble) .msgAuthor,
    .message.mine .bubble:not(.stickerBubble) .msgMeta,
    .message.mine .bubble:not(.stickerBubble) .readReceiptMeta {
      color: var(--pl-text-main) !important;
    }
    .navButton,
    .railButton,
    button.secondary,
    .secondary,
    .headActions button,
    .composerIconButton,
    .linkButton,
    .messageActions button:hover,
    .messageActions button:focus-visible {
      background: var(--pl-primary-soft) !important;
      color: var(--pl-text-main) !important;
      border-color: var(--pl-border) !important;
    }
    button:not(.ghost):not(.secondary):not(.danger):not(.linkButton):not(.composerIconButton):not(.attachOption):not(.readReceiptButton):hover,
    .sideItem:hover,
    .roomItem:hover {
      background: var(--pl-primary-hover) !important;
      color: var(--pl-text-main) !important;
    }
    .unreadBadge,
    .badge.unread,
    .pillDanger {
      background: #ff5a7a !important;
      color: #ffffff !important;
    }
    /* END_PLCHAT_THEME_BAEDF6_TEXT_009EB9_V1 */
    /* PLCHAT_THEME_EEFDFF_FC_ZING_LANGUAGE_V1 */
    :root {
      --pl-primary: #eefdff !important;
      --pl-primary-soft: #fbf4ff !important;
      --pl-primary-hover: #f6e8ff !important;
      --pl-primary-active: #e2c7f0 !important;
      --pl-bg: #fff9ff !important;
      --pl-surface: #ffffff !important;
      --pl-border: #ead7f0 !important;
      --pl-text-main: #009eb9 !important;
      --pl-text-secondary: #238aa0 !important;
      --pl-text-muted: #6d97a2 !important;
      --brand: var(--pl-primary) !important;
      --brand-dark: var(--pl-text-main) !important;
      --brand-soft: var(--pl-primary-soft) !important;
      --line: var(--pl-border) !important;
      --text: var(--pl-text-main) !important;
      --muted: var(--pl-text-muted) !important;
    }
    html,
    body,
    button,
    input,
    textarea,
    select {
      font-family: "FC Zing", "FC Zing Rounded", "Noto Sans Thai", "Microsoft YaHei UI", "PingFang SC", "Segoe UI", system-ui, sans-serif !important;
    }
    body,
    .app,
    .panel,
    .postCard,
    .moduleCard,
    .chatTitle,
    .roomTitle,
    .roomName,
    .userMain,
    .msgAuthor,
    .msgText,
    .settingsTitle,
    .sectionTitle {
      color: var(--pl-text-main) !important;
    }
    .hint,
    .msgMeta,
    .readReceiptMeta,
    .roomMeta,
    .userSub,
    .settingsSub,
    .muted {
      color: var(--pl-text-muted) !important;
    }
    body,
    .app,
    .chat,
    .moduleView,
    .chatListPane,
    .infoPane {
      background: var(--pl-bg) !important;
    }
    .topbar,
    .panel,
    .postCard,
    .moduleCard,
    .composer,
    .chatHead,
    .infoCard,
    .messageActions,
    input,
    textarea,
    select {
      border-color: var(--pl-border) !important;
    }
    .leftRail,
    .sideItem.active,
    .roomItem.active,
    .message.mine .bubble:not(.stickerBubble),
    #sendButton,
    .primaryDownload {
      background: var(--pl-primary) !important;
      color: var(--pl-text-main) !important;
      border-color: var(--pl-border) !important;
    }
    .message.mine .bubble:not(.stickerBubble) .msgText,
    .message.mine .bubble:not(.stickerBubble) .msgAuthor,
    .message.mine .bubble:not(.stickerBubble) .msgMeta,
    .message.mine .bubble:not(.stickerBubble) .readReceiptMeta {
      color: var(--pl-text-main) !important;
    }
    .navButton,
    .railButton,
    button.secondary,
    .secondary,
    .headActions button,
    .composerIconButton,
    .linkButton,
    .messageActions button:hover,
    .messageActions button:focus-visible,
    .languageChoice {
      background: var(--pl-primary-soft) !important;
      color: var(--pl-text-main) !important;
      border-color: var(--pl-border) !important;
    }
    button:not(.ghost):not(.secondary):not(.danger):not(.linkButton):not(.composerIconButton):not(.attachOption):not(.readReceiptButton):hover,
    .sideItem:hover,
    .roomItem:hover,
    .languageChoice:hover {
      background: var(--pl-primary-hover) !important;
      color: var(--pl-text-main) !important;
    }
    .languageSettingsPanel .languageChoices {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 10px;
    }
    .languageChoice {
      min-height: 36px;
      padding: 0 14px;
      border: 1px solid var(--pl-border);
      border-radius: 999px;
      font-weight: 900;
    }
    .languageChoice.active {
      background: var(--pl-primary) !important;
      box-shadow: 0 8px 20px rgba(0, 158, 185, .12);
    }
    body[data-pl-language="zh"] {
      font-family: "FC Zing", "Microsoft YaHei UI", "PingFang SC", "Noto Sans CJK SC", "Segoe UI", system-ui, sans-serif !important;
    }
    body[data-pl-language="en"] {
      font-family: "FC Zing", "Segoe UI", system-ui, sans-serif !important;
    }
    .unreadBadge,
    .badge.unread,
    .pillDanger {
      background: #ff5a7a !important;
      color: #ffffff !important;
    }
    /* END_PLCHAT_THEME_EEFDFF_FC_ZING_LANGUAGE_V1 */
    /* PLCHAT_BACKGROUND_E9F8FF_VALID_ROOM_IMAGES_V1 */
    :root {
      --pl-bg: #e9f8ff !important;
      --pl-main-bg: #e9f8ff !important;
      --pl-line-chat-bg: #e9f8ff !important;
    }
    html,
    body,
    .shell,
    .app,
    .chat,
    .chatListPane,
    .infoPane,
    .moduleView,
    #chatPanel,
    #moduleView {
      background: #e9f8ff !important;
    }
    .chatMessages,
    #messages,
    .messageList {
      background: #f8fdff !important;
    }
    #roomImageList a.isBrokenRoomImage,
    #roomImageList .isBrokenRoomImage {
      display: none !important;
    }
    /* END_PLCHAT_BACKGROUND_E9F8FF_VALID_ROOM_IMAGES_V1 */
    /* PLCHAT_REMOVE_PINK_ACCENTS_TO_7BDEEF_V1 */
    :root {
      --pl-border: #7bdeef !important;
      --pl-primary-hover: #7bdeef !important;
      --pl-primary-active: #7bdeef !important;
      --line: #7bdeef !important;
      --brand-soft: #e9f8ff !important;
      --pl-accent-blue: #7bdeef !important;
    }
    .topbar,
    .panel,
    .postCard,
    .moduleCard,
    .chatHead,
    .composer,
    .infoCard,
    .profileHero,
    .profileStatusCard,
    .feedComposer,
    .employeeCard,
    .memberPicker,
    .roomButton,
    .sideItem,
    .roomItem,
    .bubble,
    .attachment,
    .fileCard,
    .imageAttachment,
    .imageAlbum,
    .messageActions,
    input,
    textarea,
    select {
      border-color: #7bdeef !important;
    }
    .profileCover {
      background-color: #7bdeef !important;
      background-image: linear-gradient(135deg, #7bdeef, #e9f8ff) !important;
    }
    .profileSummary,
    .profileStatusCard,
    .feedComposer,
    .moduleCard,
    .postCard,
    .panel {
      box-shadow: 0 14px 34px rgba(123, 222, 239, .12) !important;
    }
    .profileSummary .avatar,
    .avatar,
    .mark,
    .roomButton .avatar,
    .chatHead .avatar,
    .profileHero .avatar {
      background-color: #e9f8ff !important;
      border-color: #7bdeef !important;
      box-shadow: 0 10px 24px rgba(123, 222, 239, .18) !important;
    }
    .navButton:hover,
    .navButton.active,
    .railButton:hover,
    .railButton.active,
    .sideItem:hover,
    .roomItem:hover,
    .roomButton:hover,
    .roomButton.active,
    .languageChoice:hover,
    .languageChoice.active,
    button.secondary:hover,
    .secondary:hover,
    .headActions button:hover,
    .composerIconButton:hover,
    .linkButton:hover,
    .messageActions button:hover,
    .messageActions button:focus-visible,
    button:not(.ghost):not(.secondary):not(.danger):not(.linkButton):not(.composerIconButton):not(.attachOption):not(.readReceiptButton):hover {
      background: #7bdeef !important;
      border-color: #7bdeef !important;
      color: #006f83 !important;
    }
    button.secondary,
    .secondary,
    .headActions button,
    .composerIconButton,
    .linkButton,
    .languageChoice,
    .factPill,
    .statusPill,
    .fileSourcePill {
      background: #e9f8ff !important;
      border-color: #7bdeef !important;
      color: #009eb9 !important;
    }
    input:focus,
    textarea:focus,
    select:focus,
    button:focus-visible,
    .sideItem:focus-visible,
    .roomItem:focus-visible {
      border-color: #7bdeef !important;
      outline-color: #7bdeef !important;
      box-shadow: 0 0 0 3px rgba(123, 222, 239, .24) !important;
    }
    /* END_PLCHAT_REMOVE_PINK_ACCENTS_TO_7BDEEF_V1 */
    /* PLCHAT_EXPIRED_FILE_MINIMAL_MESSAGE_V1 */
    .message.expiredAttachmentOnly .bubble {
      background: transparent !important;
      border: 0 !important;
      box-shadow: none !important;
      padding: 0 !important;
      max-width: min(360px, 78vw) !important;
    }
    .message.expiredAttachmentOnly .msgMeta,
    .message.expiredAttachmentOnly .reactionRow,
    .message.expiredAttachmentOnly .messageActivityMeta,
    .message.expiredAttachmentOnly .messageActivitySummary,
    .message.expiredAttachmentOnly .messageActions {
      display: none !important;
    }
    .expiredAttachmentNotice {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      width: fit-content;
      max-width: 100%;
      color: var(--pl-text-muted, #6d97a2);
      font-size: 12px;
      font-weight: 800;
      line-height: 1.35;
      white-space: normal;
    }
    .message.mine .expiredAttachmentNotice {
      justify-content: flex-end;
      text-align: right;
    }
    .expiredAttachmentNotice strong {
      color: var(--pl-text-main, #009eb9);
      font-size: 12px;
      font-weight: 900;
      letter-spacing: 0;
    }
    .expiredAttachmentNotice time {
      color: var(--pl-text-muted, #6d97a2);
      font-size: 11px;
      font-weight: 700;
    }
    .expiredKaveepImageNotice {
      margin-top: 8px;
      color: #8b5cf6;
      font-weight: 800;
    }
    .legacyExpiredKaveepImageText {
      display: inline;
      margin-top: 0;
    }
    /* END_PLCHAT_EXPIRED_FILE_MINIMAL_MESSAGE_V1 */
    /* PLCHAT_DOWNLOAD_POPUP_HISTORY_AND_HOVER_WHITE_V1 */
    :where(
      .navButton,
      .railButton,
      .sideItem,
      .roomItem,
      .roomButton,
      .userButton,
      .languageChoice,
      button.secondary,
      .secondary,
      .headActions button,
      .composerIconButton,
      .linkButton,
      .messageActions button,
      .stickerOption,
      .attachOption,
      .fileCategoryTabs button,
      .primaryDownload,
      #sendButton
    ):hover,
    :where(
      .navButton,
      .railButton,
      .sideItem,
      .roomItem,
      .roomButton,
      .userButton,
      .languageChoice,
      button.secondary,
      .secondary,
      .headActions button,
      .composerIconButton,
      .linkButton,
      .messageActions button,
      .stickerOption,
      .attachOption,
      .fileCategoryTabs button,
      .primaryDownload,
      #sendButton
    ):focus-visible {
      color: #ffffff !important;
    }
    :where(
      .navButton,
      .railButton,
      .sideItem,
      .roomItem,
      .roomButton,
      .userButton,
      .languageChoice,
      button.secondary,
      .secondary,
      .headActions button,
      .composerIconButton,
      .linkButton,
      .messageActions button,
      .stickerOption,
      .attachOption,
      .fileCategoryTabs button,
      .primaryDownload,
      #sendButton
    ):hover *,
    :where(
      .navButton,
      .railButton,
      .sideItem,
      .roomItem,
      .roomButton,
      .userButton,
      .languageChoice,
      button.secondary,
      .secondary,
      .headActions button,
      .composerIconButton,
      .linkButton,
      .messageActions button,
      .stickerOption,
      .attachOption,
      .fileCategoryTabs button,
      .primaryDownload,
      #sendButton
    ):focus-visible * {
      color: #ffffff !important;
    }
    #desktopDownloadHistoryTool {
      position: relative;
      z-index: 40;
      width: 76px;
      margin: 0 auto 8px;
      font-size: 12px;
      color: var(--pl-text-main, #009eb9);
    }
    #desktopDownloadHistoryTool .downloadHistoryToggle {
      width: 100%;
      min-height: 64px;
      display: grid;
      place-items: center;
      gap: 3px;
      border: 1px solid #7bdeef !important;
      border-radius: 16px !important;
      background: #e9f8ff !important;
      color: #009eb9 !important;
      box-shadow: 0 10px 28px rgba(123, 222, 239, .22) !important;
      font-weight: 900;
      line-height: 1.05;
      text-align: center;
      padding: 7px 4px !important;
    }
    #desktopDownloadHistoryTool .downloadHistoryIcon {
      display: grid;
      place-items: center;
      width: 24px;
      height: 24px;
      border-radius: 999px;
      background: #7bdeef;
      color: #ffffff;
      font-size: 17px;
      line-height: 1;
    }
    #desktopDownloadHistoryTool .downloadHistoryText {
      font-size: 10px;
      font-weight: 900;
      letter-spacing: 0;
      color: inherit;
    }
    #desktopDownloadHistoryTool .downloadHistoryCount {
      min-width: 19px;
      height: 19px;
      display: inline-grid;
      place-items: center;
      border-radius: 999px;
      background: #ff5a7a;
      color: #ffffff;
      font-size: 10px;
      font-weight: 900;
    }
    #desktopDownloadHistoryTool .downloadHistoryToggle:hover,
    #desktopDownloadHistoryTool .downloadHistoryToggle:focus-visible {
      background: #7bdeef !important;
      color: #ffffff !important;
    }
    #desktopDownloadHistoryTool .downloadHistoryToggle:hover .downloadHistoryIcon,
    #desktopDownloadHistoryTool .downloadHistoryToggle:focus-visible .downloadHistoryIcon {
      background: #ffffff;
      color: #009eb9;
    }
    #desktopDownloadHistoryTool .downloadHistoryMiniPanel {
      position: fixed;
      left: 92px;
      bottom: 96px;
      width: min(300px, calc(100vw - 112px));
      margin-top: 0;
      max-height: 320px;
      overflow: auto;
      border: 1px solid #7bdeef;
      border-radius: 18px;
      background: rgba(255,255,255,.98);
      box-shadow: 0 18px 44px rgba(80, 140, 180, .14);
      padding: 10px;
    }
    @media (max-width: 760px) {
      #desktopDownloadHistoryTool {
        display: none;
      }
    }
    #desktopDownloadHistoryTool .downloadHistoryMiniItem {
      display: grid;
      gap: 4px;
      padding: 8px 0;
      border-top: 1px solid rgba(123, 222, 239, .42);
    }
    #desktopDownloadHistoryTool .downloadHistoryMiniItem:first-child {
      border-top: 0;
      padding-top: 0;
    }
    #desktopDownloadHistoryTool .downloadHistoryMiniItem strong {
      color: #009eb9;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    #desktopDownloadHistoryTool .downloadHistoryMiniActions {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
    }
    #desktopDownloadHistoryTool .downloadHistoryMiniActions button {
      min-height: 28px;
      padding: 0 9px !important;
      border-radius: 999px !important;
    }
    /* END_PLCHAT_DOWNLOAD_POPUP_HISTORY_AND_HOVER_WHITE_V1 */
    /* PLCHAT_CLEAR_DOWNLOAD_HISTORY_V1 */
    #desktopDownloadHistoryTool .downloadHistoryMiniHeader {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      padding-bottom: 8px;
      margin-bottom: 4px;
      border-bottom: 1px solid rgba(123, 222, 239, .42);
    }
    #desktopDownloadHistoryTool .downloadHistoryMiniHeader strong {
      color: #009eb9;
      font-size: 12px;
      font-weight: 900;
    }
    #desktopDownloadHistoryTool .downloadHistoryClearButton {
      min-height: 28px;
      padding: 0 10px !important;
      border: 1px solid #7bdeef !important;
      border-radius: 999px !important;
      background: #e9f8ff !important;
      color: #009eb9 !important;
      font-size: 11px;
      font-weight: 900;
    }
    #desktopDownloadHistoryTool .downloadHistoryClearButton:hover,
    #desktopDownloadHistoryTool .downloadHistoryClearButton:focus-visible {
      background: #7bdeef !important;
      color: #ffffff !important;
    }
    /* END_PLCHAT_CLEAR_DOWNLOAD_HISTORY_V1 */


    /* PL CHAT compact chat side drawers */
    body.plchat-chat-drawers-enabled #app {
      transition: grid-template-columns 180ms ease;
    }

    body.plchat-chat-drawers-enabled.plchat-room-info-collapsed #app {
      grid-template-columns: 92px 300px minmax(0, 1fr) 0px;
    }

    body.plchat-chat-drawers-enabled #infoPane {
      transition: transform 180ms ease, box-shadow 180ms ease;
    }

    body.plchat-chat-drawers-enabled.plchat-room-info-collapsed #infoPane {
      position: fixed;
      top: 86px;
      right: 0;
      bottom: 0;
      width: min(330px, calc(100vw - 96px));
      height: auto;
      z-index: 90;
      transform: translateX(calc(100% - 10px));
      box-shadow: none;
      border-left: 1px solid var(--brand, #7bdeef);
    }

    body.plchat-chat-drawers-enabled.plchat-room-info-open #infoPane,
    body.plchat-chat-drawers-enabled.plchat-room-info-collapsed #infoPane:hover,
    body.plchat-chat-drawers-enabled.plchat-room-info-collapsed #infoPane:focus-within {
      transform: translateX(0);
      box-shadow: -18px 0 44px rgba(20, 120, 150, .14);
    }

    .roomInfoDrawerToggle {
      position: fixed;
      top: 50%;
      right: 0;
      z-index: 95;
      min-width: 42px;
      min-height: 112px;
      padding: 10px 6px;
      border-radius: 16px 0 0 16px;
      border: 1px solid var(--brand, #7bdeef);
      border-right: 0;
      background: #e9f8ff;
      color: #009eb9;
      box-shadow: -10px 10px 30px rgba(20, 120, 150, .12);
      writing-mode: vertical-rl;
      text-orientation: mixed;
      font-weight: 900;
      letter-spacing: 0;
      cursor: pointer;
      transform: translateY(-50%);
      display: none;
    }

    body.plchat-chat-drawers-enabled .roomInfoDrawerToggle {
      display: inline-grid;
      place-items: center;
    }

    body.plchat-chat-drawers-enabled.plchat-room-info-open .roomInfoDrawerToggle,
    body.plchat-chat-drawers-enabled.plchat-room-info-collapsed #infoPane:hover + .roomInfoDrawerToggle {
      opacity: .18;
    }

    .roomInfoDrawerClose,
    .createRoomDrawerToggle {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      min-height: 34px;
      padding: 7px 11px;
      border-radius: 999px;
      border: 1px solid var(--brand, #7bdeef);
      background: #e9f8ff;
      color: #009eb9;
      font-weight: 900;
      cursor: pointer;
    }

    .roomInfoDrawerClose:hover,
    .createRoomDrawerToggle:hover,
    .roomInfoDrawerToggle:hover {
      background: #7bdeef;
      color: #fff;
    }

    .roomInfoDrawerClose {
      width: 100%;
      margin-bottom: 10px;
    }

    .chatCreateRoomPanel {
      overflow: hidden;
      transition: max-height 180ms ease, opacity 160ms ease, margin 160ms ease, padding 160ms ease;
    }

    body.plchat-chat-drawers-enabled.plchat-create-room-collapsed .chatCreateRoomPanel {
      max-height: 0 !important;
      opacity: 0;
      margin: 0 !important;
      padding-top: 0 !important;
      padding-bottom: 0 !important;
      border-width: 0 !important;
      pointer-events: none;
    }

    body.plchat-chat-drawers-enabled.plchat-create-room-open .chatCreateRoomPanel {
      max-height: 560px;
      opacity: 1;
    }

    @media (max-width: 760px) {
      body.plchat-chat-drawers-enabled.plchat-room-info-collapsed #app,
      body.plchat-chat-drawers-enabled.plchat-room-info-open #app {
        grid-template-columns: 1fr;
      }

      .roomInfoDrawerToggle {
        top: auto;
        right: 10px;
        bottom: 86px;
        min-width: 44px;
        min-height: 44px;
        border-radius: 999px;
        border: 1px solid var(--brand, #7bdeef);
        writing-mode: horizontal-tb;
        transform: none;
      }

      body.plchat-chat-drawers-enabled.plchat-room-info-collapsed #infoPane {
        top: 0;
        width: min(340px, 92vw);
        transform: translateX(100%);
      }
    }

    /* PLCHAT_MODERN_SOCIAL_PROFILE_V1 */
    .modernProfileShell { display: grid; gap: 14px; }
    .modernProfileHero { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--panel); box-shadow: var(--shadow); }
    .modernProfileCover { min-height: 260px; background: linear-gradient(135deg, #dff7ff, #f8fdff); background-size: cover; background-position: center; position: relative; border-bottom: 1px solid var(--line); }
    .modernProfileCoverActions { position: absolute; right: 16px; bottom: 16px; display: flex; gap: 8px; flex-wrap: wrap; padding: 8px; border-radius: 12px; background: rgba(248, 253, 255, .86); backdrop-filter: blur(10px); box-shadow: 0 10px 26px rgba(21, 45, 50, .12); }
    .modernProfileIntro { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 18px; align-items: start; padding: 24px 18px 18px; margin-top: 0; }
    .modernProfileAvatar { width: 128px; height: 128px; border-radius: 28px; border: 5px solid var(--panel); overflow: hidden; background: #e9f8ff; box-shadow: 0 12px 28px rgba(0, 158, 185, 0.16); display: grid; place-items: center; font-size: 36px; font-weight: 800; color: var(--brand); }
    .modernProfileAvatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .modernProfileInfo { display: grid; gap: 7px; min-width: 0; }
    .modernProfileInfo h2 { margin: 0; font-size: clamp(24px, 3vw, 34px); color: var(--text); }
    .modernProfileActions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
    .profileTabs { display: flex; gap: 8px; flex-wrap: wrap; padding: 10px 12px; border-top: 1px solid var(--line); background: #f8fdff; }
    .profileTabs button { background: #e9f8ff; }
    .profileTabs button.active { background: var(--brand); color: #fff; }
    .profileFactsModern { display: flex; flex-wrap: wrap; gap: 7px; }
    .profileAlbumGrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
    .profileAlbumCard, .profileMediaTile { border: 1px solid var(--line); border-radius: 12px; background: var(--panel); overflow: hidden; box-shadow: var(--shadow); }
    .profileAlbumCover, .profileMediaThumb { aspect-ratio: 16 / 10; background: #e9f8ff; display: grid; place-items: center; color: var(--brand); font-weight: 800; overflow: hidden; }
    .profileAlbumCover img, .profileMediaThumb img, .profileMediaThumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
    .profileAlbumBody, .profileMediaBody { padding: 10px; display: grid; gap: 5px; }
    .profileComposerTools { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
    .profileComposerTools select, .profileComposerTools input[type="file"] { min-width: 160px; }
    .profilePreviewAttachment { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border: 1px dashed var(--line); border-radius: 12px; background: #f8fdff; }
    .profileCommentComposer { margin-top: 8px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; }
    .profileCommentComposer input[type="file"] { grid-column: 1 / -1; }
    .profilePostFeeling { display: inline-flex; width: fit-content; padding: 4px 8px; border-radius: 999px; background: #e9f8ff; color: var(--brand); font-weight: 800; }
    /* Timeline media is rendered as social content, not as a chat download card. */
    .profilePostAttachment.socialPostMedia {
      width: min(720px, 100%);
      margin-top: 12px;
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: 14px;
      background: #0b1220;
      box-shadow: 0 8px 22px rgba(15, 23, 42, .10);
    }
    .profilePostAttachment.socialPostMedia .socialPostMediaButton {
      display: block;
      width: 100%;
      padding: 0;
      border: 0;
      border-radius: 0;
      background: transparent;
      cursor: zoom-in;
    }
    .profilePostAttachment.socialPostMedia img,
    .profilePostAttachment.socialPostMedia video {
      display: block;
      width: 100%;
      max-height: min(68vh, 640px);
      object-fit: contain;
      background: #0b1220;
    }
    .profilePostAttachment.socialPostMedia .socialPostMediaMeta {
      display: flex;
      align-items: center;
      min-height: 34px;
      padding: 7px 10px;
      color: #d9e7ee;
      background: #13202b;
      font-size: 12px;
    }
    @media (max-width: 760px) {
      .modernProfileCover { min-height: 170px; }
      .modernProfileIntro { grid-template-columns: 1fr; margin-top: 0; align-items: start; padding-top: 18px; }
      .modernProfileAvatar { width: 104px; height: 104px; border-radius: 24px; }
      .modernProfileActions { justify-content: flex-start; }
      .modernProfileCoverActions { justify-content: flex-start; right: 10px; bottom: 10px; max-width: calc(100% - 20px); }
    }
    /* END_PLCHAT_MODERN_SOCIAL_PROFILE_V1 */

    /* PLCHAT_MINIMAL_COOL_PREMIUM_UI_V1 */
    :root {
      --pl-primary: #c1dbd4 !important;
      --pl-primary-soft: #eef7f4 !important;
      --pl-primary-hover: #d7ebe6 !important;
      --pl-bg: #f7fbfa !important;
      --pl-surface: #ffffff !important;
      --pl-surface-soft: #f3f8f6 !important;
      --pl-border: #dbe9e5 !important;
      --pl-text-main: #16211f !important;
      --pl-text-secondary: #4b5f5b !important;
      --pl-text-muted: #7c918c !important;
      --pl-accent-dark: #22312e !important;
      --pl-danger: #ff4f6d !important;
      --pl-success: #22a06b !important;
      --pl-warning: #f5a524 !important;
      --pl-shadow: rgba(34, 49, 46, .08) !important;
      --pl-shadow-soft: rgba(34, 49, 46, .055) !important;
      --pl-bubble-own: #d7ebe6 !important;
      --pl-bubble-other: #ffffff !important;

      --brand: var(--pl-primary) !important;
      --brand-dark: var(--pl-accent-dark) !important;
      --brand-soft: var(--pl-primary-soft) !important;
      --line: var(--pl-border) !important;
      --text: var(--pl-text-main) !important;
      --muted: var(--pl-text-muted) !important;
      --bg: var(--pl-bg) !important;
      --panel: var(--pl-surface) !important;
      --panel-soft: var(--pl-surface-soft) !important;
    }

    html,
    body {
      background: var(--pl-bg) !important;
      color: var(--pl-text-main) !important;
      font-family: "Bebas Neue", "Inter", "Noto Sans Thai", "Prompt", system-ui, sans-serif !important;
      font-size: 13px !important;
      letter-spacing: 0 !important;
      text-rendering: optimizeLegibility;
    }

    button,
    input,
    textarea,
    select {
      letter-spacing: 0 !important;
    }

    button {
      border-radius: 12px !important;
      transition: background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease, opacity .18s ease !important;
    }

    button:active,
    .roomButton:active,
    .userButton:active,
    .navButton:active,
    .primaryDownload:active {
      transform: scale(.985) !important;
    }

    .topbar {
      height: 64px !important;
      background: rgba(255, 255, 255, .86) !important;
      border-bottom: 1px solid rgba(219, 233, 229, .82) !important;
      box-shadow: 0 10px 32px rgba(34, 49, 46, .045) !important;
      backdrop-filter: blur(18px) saturate(1.08) !important;
    }

    .mark {
      border-radius: 14px !important;
      box-shadow: 0 8px 18px rgba(34, 49, 46, .08) !important;
    }

    .brand h1,
    .paneTitle h2,
    .chatTitle h2,
    .infoPane h2,
    .infoPane h3,
    .panel h2,
    .panel h3 {
      color: var(--pl-text-main) !important;
      font-weight: 900 !important;
      letter-spacing: 0 !important;
    }

    .brand p,
    .hint,
    small,
    .msgMeta,
    .chatTitle .hint,
    .roomText small,
    .userMain small,
    .fileName {
      color: var(--pl-text-secondary) !important;
      opacity: 1 !important;
    }

    .app {
      background: var(--pl-bg) !important;
      grid-template-columns: 88px 312px minmax(0, 1fr) 316px !important;
    }

    .mainRail,
    .chatListPane,
    .infoPane {
      background: rgba(243, 248, 246, .82) !important;
      border-color: var(--pl-border) !important;
      scrollbar-width: thin;
      scrollbar-color: #b8cec8 transparent;
    }

    .mainRail {
      padding: 14px 10px !important;
      gap: 8px !important;
      background: linear-gradient(180deg, #ffffff 0%, #f2f8f6 100%) !important;
      border-right: 1px solid rgba(219, 233, 229, .9) !important;
    }

    .navButton {
      min-height: 56px !important;
      border-radius: 16px !important;
      background: transparent !important;
      color: var(--pl-text-secondary) !important;
      font-weight: 800 !important;
      box-shadow: none !important;
    }

    .navButton strong {
      color: inherit !important;
    }

    .navButton:hover,
    .navButton.active {
      background: var(--pl-primary-soft) !important;
      color: var(--pl-accent-dark) !important;
      box-shadow: inset 0 0 0 1px var(--pl-border), 0 8px 18px var(--pl-shadow-soft) !important;
      filter: none !important;
    }

    .chatListPane,
    .infoPane {
      padding: 16px !important;
    }

    .paneTitle,
    .chatHead,
    .composer,
    .panel,
    .sideItem,
    .authCard,
    .modalCard,
    .actionDetailsCard,
    .notificationDropdown,
    .downloadHistoryPanel,
    .fileCard,
    .attachmentCard,
    .selectedFilePreview,
    .filePreviewCard {
      background: rgba(255, 255, 255, .94) !important;
      border: 1px solid rgba(219, 233, 229, .96) !important;
      box-shadow: 0 10px 28px var(--pl-shadow-soft) !important;
    }

    .paneTitle,
    .chatHead,
    .composer {
      border-radius: 18px !important;
    }

    .panel,
    .sideItem,
    .authCard,
    .modalCard,
    .actionDetailsCard,
    .notificationDropdown,
    .downloadHistoryPanel {
      border-radius: 20px !important;
    }

    .chatHead {
      margin: 12px 14px 0 !important;
      min-height: 62px !important;
      padding: 0 16px !important;
      backdrop-filter: blur(14px) !important;
    }

    #chatSearch,
    input,
    textarea,
    select,
    .composerLine {
      min-height: 42px !important;
      background: rgba(255, 255, 255, .96) !important;
      border: 1px solid var(--pl-border) !important;
      border-radius: 15px !important;
      color: var(--pl-text-main) !important;
      box-shadow: none !important;
    }

    input::placeholder,
    textarea::placeholder {
      color: var(--pl-text-muted) !important;
    }

    input:focus,
    textarea:focus,
    select:focus,
    .composerLine:focus-within {
      border-color: #afcec6 !important;
      box-shadow: 0 0 0 4px rgba(193, 219, 212, .36) !important;
    }

    :where(button, a, input, textarea, select, .roomButton, .userButton, .navButton, .bubble):focus-visible {
      outline: 0 !important;
      border-color: #9bbfb6 !important;
      box-shadow: 0 0 0 4px rgba(193, 219, 212, .42) !important;
    }

    .chatListPane .roomButton,
    .chatListPane .userButton {
      min-height: 70px !important;
      width: 100% !important;
      margin: 0 0 8px !important;
      padding: 10px 12px !important;
      border: 1px solid transparent !important;
      border-radius: 18px !important;
      background: rgba(255, 255, 255, .72) !important;
      color: var(--pl-text-main) !important;
      box-shadow: none !important;
    }

    .chatListPane .roomButton:hover,
    .chatListPane .userButton:hover {
      background: rgba(238, 247, 244, .96) !important;
      border-color: var(--pl-border) !important;
      box-shadow: 0 10px 22px var(--pl-shadow-soft) !important;
      filter: none !important;
    }

    .chatListPane .roomButton.active,
    .chatListPane .userButton.active {
      background: var(--pl-primary-soft) !important;
      border-color: #b7d4cd !important;
      color: var(--pl-text-main) !important;
      box-shadow: inset 4px 0 0 var(--pl-primary), 0 12px 26px rgba(34, 49, 46, .065) !important;
    }

    .chatListPane .roomText strong,
    .chatListPane .userMain strong {
      color: var(--pl-text-main) !important;
      font-size: 13px !important;
      line-height: 1.25 !important;
    }

    .chatListPane .roomText small,
    .chatListPane .userMain small {
      color: var(--pl-text-secondary) !important;
      font-size: 12px !important;
      line-height: 1.35 !important;
    }

    .avatar,
    .avatar.small,
    .chatListPane .roomButton .avatar,
    .chatListPane .userButton .avatar,
    .chatHead .avatar {
      background: linear-gradient(145deg, #ffffff, var(--pl-primary-soft)) !important;
      color: var(--pl-accent-dark) !important;
      border: 1px solid var(--pl-border) !important;
      box-shadow: 0 5px 14px rgba(34, 49, 46, .06) !important;
    }

    .badge,
    .roomUnreadBadge,
    .navButton .badge {
      background: var(--pl-danger) !important;
      color: #ffffff !important;
      border: 0 !important;
      box-shadow: 0 0 0 2px #ffffff !important;
    }

    .messageStage {
      background: var(--pl-bg) !important;
    }

    .messages {
      gap: 11px !important;
      padding: 24px 30px 26px !important;
      background: linear-gradient(180deg, #f7fbfa 0%, #ffffff 100%) !important;
      scroll-behavior: smooth;
    }

    .message {
      max-width: min(720px, 76%) !important;
      gap: 10px !important;
      margin: 4px 0 !important;
      animation: plMessageIn .2s ease both;
    }

    @keyframes plMessageIn {
      from { opacity: .72; transform: translateY(3px); }
      to { opacity: 1; transform: translateY(0); }
    }

    .bubble {
      padding: 10px 13px !important;
      border: 1px solid rgba(219, 233, 229, .82) !important;
      border-radius: 20px 20px 20px 10px !important;
      background: var(--pl-bubble-other) !important;
      color: var(--pl-text-main) !important;
      box-shadow: 0 6px 18px rgba(34, 49, 46, .055) !important;
    }

    .message.mine .bubble,
    .mine .bubble {
      border-color: rgba(193, 219, 212, .9) !important;
      border-radius: 20px 20px 10px 20px !important;
      background: var(--pl-bubble-own) !important;
      color: var(--pl-text-main) !important;
      box-shadow: 0 7px 18px rgba(34, 49, 46, .06) !important;
    }

    .message.mine .bubble *,
    .message.mine .bubble .msgMeta,
    .message.mine .bubble .msgMeta strong,
    .message.mine .bubble .hint,
    .message.mine .bubble .readStatus,
    .message.mine .bubble .actionDetailLink,
    .message.mine .bubble a {
      color: var(--pl-text-main) !important;
      text-shadow: none !important;
    }

    .msgText {
      color: var(--pl-text-main) !important;
      font-size: 13px !important;
      line-height: 1.56 !important;
    }

    .msgMeta,
    .msgMeta span,
    .readStatus {
      color: var(--pl-text-muted) !important;
      font-size: 11px !important;
      line-height: 1.35 !important;
    }

    .msgMeta strong {
      color: var(--pl-text-secondary) !important;
      font-size: 12px !important;
    }

    .messageActions {
      min-height: 28px !important;
      margin-top: 6px !important;
      opacity: 0 !important;
      transform: translateY(5px) !important;
      pointer-events: none !important;
      transition: opacity .18s ease, transform .18s ease !important;
    }

    .message:hover .messageActions,
    .message:focus-within .messageActions,
    .bubble:hover .messageActions,
    .bubble:focus-within .messageActions {
      opacity: 1 !important;
      transform: translateY(0) !important;
      pointer-events: auto !important;
    }

    .reactionChip,
    .messageActions button {
      min-height: 28px !important;
      border: 1px solid rgba(219, 233, 229, .95) !important;
      border-radius: 999px !important;
      background: rgba(255, 255, 255, .88) !important;
      color: var(--pl-text-secondary) !important;
      box-shadow: 0 6px 14px rgba(34, 49, 46, .045) !important;
      backdrop-filter: blur(8px) !important;
    }

    .messageActions button:hover,
    .reactionChip:hover {
      background: var(--pl-primary-soft) !important;
      color: var(--pl-accent-dark) !important;
      border-color: #b7d4cd !important;
      filter: none !important;
    }

    .stickerOnly {
      max-width: min(260px, 72%) !important;
      align-items: flex-end !important;
    }

    .stickerOnly .stickerBubble,
    .stickerOnly.mine .stickerBubble {
      padding: 0 !important;
      border: 0 !important;
      background: transparent !important;
      box-shadow: none !important;
      border-radius: 0 !important;
      color: var(--pl-text-main) !important;
    }

    .stickerOnly .messageActions {
      margin-top: 2px !important;
    }

    .stickerOnly .stickerBubble .msgMeta {
      margin: 0 0 4px !important;
      padding: 0 4px !important;
      color: var(--pl-text-muted) !important;
      font-size: 10px !important;
    }

    .stickerOnly.mine .stickerBubble .msgMeta {
      text-align: right !important;
    }

    .messageSticker,
    .messageSticker.officialSticker {
      width: min(214px, 64vw) !important;
      min-height: 0 !important;
      margin: 0 !important;
      padding: 0 !important;
      border: 0 !important;
      border-radius: 0 !important;
      background: transparent !important;
      box-shadow: none !important;
      color: var(--pl-text-main) !important;
    }

    .messageStickerImage {
      width: 100% !important;
      max-height: 226px !important;
      object-fit: contain !important;
      filter: drop-shadow(0 9px 12px rgba(34, 49, 46, .12)) !important;
    }

    .messageStickerEmoji {
      font-size: 76px !important;
      filter: drop-shadow(0 8px 11px rgba(34, 49, 46, .10)) !important;
    }

    .messageSticker strong,
    .messageSticker small {
      display: none !important;
    }

    .stickerPicker,
    .emojiPicker,
    .attachMenu,
    .imageActionMenu,
    .contextMenu,
    .reactionPopup,
    .lightboxPanel,
    .actionDetailsCard,
    .downloadToast,
    .desktopDownloadPanel,
    .downloadHistoryPanel,
    .modalCard {
      border: 1px solid rgba(219, 233, 229, .95) !important;
      border-radius: 20px !important;
      background: rgba(255, 255, 255, .97) !important;
      box-shadow: 0 22px 54px rgba(34, 49, 46, .12) !important;
      backdrop-filter: blur(18px) saturate(1.04) !important;
      animation: plPopupIn .18s ease both;
    }

    @keyframes plPopupIn {
      from { opacity: 0; transform: translateY(6px) scale(.992); }
      to { opacity: 1; transform: translateY(0) scale(1); }
    }

    .stickerPicker {
      grid-template-columns: repeat(4, minmax(82px, 1fr)) !important;
      gap: 9px !important;
      max-height: 350px !important;
      padding: 12px !important;
      background: rgba(255, 255, 255, .98) !important;
    }

    .stickerPickerHeader {
      color: var(--pl-text-secondary) !important;
      font-size: 12px !important;
    }

    .stickerOption {
      min-height: 112px !important;
      border: 1px solid transparent !important;
      border-radius: 18px !important;
      background: var(--pl-surface-soft) !important;
      color: var(--pl-text-main) !important;
      box-shadow: none !important;
    }

    .stickerOption:hover,
    .stickerOption:focus-visible {
      background: var(--pl-primary-soft) !important;
      border-color: #b7d4cd !important;
      transform: translateY(-1px) !important;
    }

    .stickerOptionImage {
      width: 82px !important;
      height: 82px !important;
      object-fit: contain !important;
    }

    .stickerOptionLabel {
      color: var(--pl-text-secondary) !important;
      font-size: 11px !important;
    }

    #sendButton,
    .primaryDownload,
    button:not(.ghost):not(.secondary):not(.danger):not(.linkButton):not(.composerIconButton):not(.attachOption) {
      background: var(--pl-accent-dark) !important;
      color: #ffffff !important;
      border-color: transparent !important;
      box-shadow: 0 10px 20px rgba(34, 49, 46, .12) !important;
      filter: none !important;
    }

    #sendButton:hover,
    .primaryDownload:hover,
    button:not(.ghost):not(.secondary):not(.danger):not(.linkButton):not(.composerIconButton):not(.attachOption):hover {
      background: #2f4540 !important;
      color: #ffffff !important;
      filter: none !important;
      box-shadow: 0 12px 24px rgba(34, 49, 46, .15) !important;
    }

    button.secondary,
    .secondary,
    .linkButton,
    .composerIconButton,
    .attachOption {
      background: var(--pl-primary-soft) !important;
      color: var(--pl-accent-dark) !important;
      border: 1px solid var(--pl-border) !important;
      box-shadow: none !important;
    }

    button.secondary:hover,
    .secondary:hover,
    .linkButton:hover,
    .composerIconButton:hover,
    .attachOption:hover {
      background: var(--pl-primary-hover) !important;
      color: var(--pl-accent-dark) !important;
      filter: none !important;
    }

    button.ghost {
      background: transparent !important;
      color: var(--pl-text-secondary) !important;
      box-shadow: none !important;
    }

    button.danger {
      background: #fff3f5 !important;
      color: var(--pl-danger) !important;
      border: 1px solid #ffd5dd !important;
    }

    .progressBar,
    .downloadProgressBar,
    .uploadProgressBar {
      overflow: hidden !important;
      border-radius: 999px !important;
      background: var(--pl-surface-soft) !important;
      border: 1px solid var(--pl-border) !important;
    }

    .progressBar > *,
    .downloadProgressBar > *,
    .uploadProgressBar span,
    progress::-webkit-progress-value {
      background: linear-gradient(90deg, var(--pl-primary), #a9cbc2) !important;
    }

    .downloadToast,
    .desktopDownloadPanel {
      color: var(--pl-text-main) !important;
    }

    #desktopDownloadHistoryTool .downloadHistoryToggle,
    #desktopDownloadHistoryTool .downloadHistoryMiniItem,
    .downloadHistoryPanel .downloadHistoryMiniItem {
      border-color: var(--pl-border) !important;
      background: rgba(255, 255, 255, .9) !important;
      color: var(--pl-text-main) !important;
      box-shadow: 0 8px 18px rgba(34, 49, 46, .055) !important;
    }

    #desktopDownloadHistoryTool .downloadHistoryToggle:hover,
    #desktopDownloadHistoryTool .downloadHistoryToggle:focus-visible {
      background: var(--pl-primary-soft) !important;
      border-color: #b7d4cd !important;
      filter: none !important;
    }

    .fileCard,
    .attachmentCard,
    .filePreviewCard {
      border-radius: 16px !important;
      background: #ffffff !important;
    }

    .attachmentActions,
    .rowActions,
    .headActions,
    .topActions {
      gap: 8px !important;
    }

    .composer {
      margin: 0 14px 12px !important;
      padding: 10px !important;
      background: rgba(255, 255, 255, .92) !important;
    }

    #messageInput {
      line-height: 1.5 !important;
      color: var(--pl-text-main) !important;
    }

    .jumpToLatest {
      border-color: var(--pl-border) !important;
      background: rgba(255, 255, 255, .94) !important;
      color: var(--pl-accent-dark) !important;
      box-shadow: 0 12px 28px rgba(34, 49, 46, .10) !important;
    }

    .jumpToLatest:hover {
      background: var(--pl-primary-soft) !important;
      filter: none !important;
    }

    .skeleton,
    .loadingSkeleton,
    [class*="Skeleton"] {
      background: linear-gradient(90deg, #edf5f2 0%, #ffffff 48%, #edf5f2 100%) !important;
      background-size: 220% 100% !important;
      animation: plSkeleton 1.2s ease-in-out infinite !important;
    }

    @keyframes plSkeleton {
      from { background-position: 120% 0; }
      to { background-position: -120% 0; }
    }

    @media (max-width: 1100px) {
      .app {
        grid-template-columns: 78px 286px minmax(0, 1fr) !important;
      }
      .infoPane {
        display: none !important;
      }
    }

    @media (max-width: 760px) {
      .topbar {
        height: 58px !important;
        padding: 0 max(12px, var(--safe-right)) 0 max(12px, var(--safe-left)) !important;
      }
      .app {
        grid-template-columns: 1fr !important;
      }
      .mainRail {
        background: rgba(255, 255, 255, .92) !important;
        box-shadow: 0 -10px 30px rgba(34, 49, 46, .08) !important;
      }
      .chatHead {
        margin: 8px max(10px, var(--safe-right)) 0 max(10px, var(--safe-left)) !important;
      }
      .messages {
        padding: 16px max(12px, var(--safe-right)) 18px max(12px, var(--safe-left)) !important;
      }
      .message {
        max-width: 94% !important;
      }
      .bubble {
        padding: 9px 11px !important;
      }
      .messageActions {
        opacity: 1 !important;
        transform: none !important;
        pointer-events: auto !important;
      }
      .composer {
        margin: 0 max(8px, var(--safe-right)) calc(8px + var(--safe-bottom)) max(8px, var(--safe-left)) !important;
      }
      .stickerPicker {
        grid-template-columns: repeat(3, minmax(72px, 1fr)) !important;
      }
      .messageSticker,
      .messageSticker.officialSticker {
        width: min(210px, 76vw) !important;
      }
    }
    /* END_PLCHAT_MINIMAL_COOL_PREMIUM_UI_V1 */
    /* PLCHAT_MODERN_PROFILE_FILE_PICKER_V1 */
    .modernFilePicker {
      min-width: 0 !important;
      min-height: 48px !important;
      display: grid !important;
      grid-template-columns: auto minmax(120px, 1fr) !important;
      align-items: center !important;
      gap: 10px !important;
      padding: 7px !important;
      border: 1px solid var(--pl-border, #dbe9e5) !important;
      border-radius: 18px !important;
      background: rgba(255, 255, 255, .94) !important;
      box-shadow: 0 8px 20px rgba(34, 49, 46, .045) !important;
      cursor: pointer !important;
      transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease !important;
    }

    .modernFilePicker:hover,
    .modernFilePicker:focus-within {
      border-color: #b7d4cd !important;
      background: var(--pl-primary-soft, #eef7f4) !important;
      box-shadow: 0 12px 24px rgba(34, 49, 46, .075) !important;
      transform: translateY(-1px) !important;
    }

    .modernFilePicker input[type="file"] {
      position: absolute !important;
      width: 1px !important;
      height: 1px !important;
      overflow: hidden !important;
      opacity: 0 !important;
      pointer-events: none !important;
    }

    .modernFilePickerButton {
      min-height: 34px !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      gap: 8px !important;
      padding: 0 14px !important;
      border-radius: 13px !important;
      background: var(--pl-accent-dark, #22312e) !important;
      color: #ffffff !important;
      font-size: 12px !important;
      font-weight: 900 !important;
      line-height: 1 !important;
      white-space: nowrap !important;
      box-shadow: 0 10px 18px rgba(34, 49, 46, .12) !important;
    }

    .modernFilePickerButton::before {
      content: "+" !important;
      width: 18px !important;
      height: 18px !important;
      display: inline-grid !important;
      place-items: center !important;
      border-radius: 999px !important;
      background: rgba(255, 255, 255, .18) !important;
      color: #ffffff !important;
      font-size: 15px !important;
      font-weight: 900 !important;
      line-height: 1 !important;
    }

    .modernFilePickerName {
      min-width: 0 !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
      white-space: nowrap !important;
      color: var(--pl-text-secondary, #4b5f5b) !important;
      font-size: 12px !important;
      font-weight: 800 !important;
    }

    .profileTimelineUpload {
      width: 100% !important;
    }

    .profileEditorGrid .modernFilePicker {
      margin-top: 8px !important;
    }

    @media (max-width: 760px) {
      .modernFilePicker {
        grid-template-columns: 1fr !important;
      }
      .modernFilePickerButton {
        width: 100% !important;
      }
      .modernFilePickerName {
        padding: 0 6px 4px !important;
        text-align: center !important;
      }
    }
    /* END_PLCHAT_MODERN_PROFILE_FILE_PICKER_V1 */
    /* PLCHAT_THEME_EEFDFF_BLUE_WORKSPACE_FINAL_V1 */
    :root {
      --pl-primary: #eefdff !important;
      --pl-primary-soft: #eefdff !important;
      --pl-primary-hover: #7bdeef !important;
      --pl-primary-active: #7bdeef !important;
      --pl-bg: #e9f8ff !important;
      --pl-surface: #ffffff !important;
      --pl-surface-soft: #f7fdff !important;
      --pl-border: #7bdeef !important;
      --pl-text-main: #196f93 !important;
      --pl-text-secondary: #196f93 !important;
      --pl-text-muted: #4f8295 !important;
      --pl-accent-dark: #196f93 !important;
      --pl-bubble-own: #eefdff !important;
      --pl-bubble-other: #ffffff !important;
      --brand: #eefdff !important;
      --brand-dark: #196f93 !important;
      --brand-soft: #e9f8ff !important;
      --line: #7bdeef !important;
      --text: #196f93 !important;
      --muted: #4f8295 !important;
      --bg: #e9f8ff !important;
      --panel: #ffffff !important;
      --panel-soft: #f7fdff !important;
    }

    html,
    body,
    .shell,
    .app,
    .chat,
    .messageStage,
    .chatListPane,
    .infoPane,
    .moduleView,
    #chatPanel,
    #moduleView {
      background: #e9f8ff !important;
      color: #196f93 !important;
    }

    .topbar,
    .mainRail,
    .chatListPane,
    .infoPane,
    .paneTitle,
    .chatHead,
    .composer,
    .panel,
    .postCard,
    .moduleCard,
    .feedComposer,
    .profileHero,
    .profileSummary,
    .profileStatusCard,
    .profileTabs,
    .infoCard,
    .roomButton,
    .sideItem,
    .userButton,
    .employeeCard,
    .memberPicker,
    .modalCard,
    .notificationDropdown,
    .downloadHistoryPanel,
    .fileCard,
    .attachment,
    .imageAttachment,
    .imageAlbum,
    .bubble,
    .messageActions,
    input,
    textarea,
    select {
      border-color: #7bdeef !important;
      color: #196f93 !important;
    }

    .messages,
    #messages,
    .messageList,
    .chatMessages {
      background: linear-gradient(180deg, #e9f8ff 0%, #f7fdff 100%) !important;
    }

    .messageStage,
    .chat,
    #chatPanel {
      overflow-x: hidden !important;
    }

    /* Message cards and their compact action tray must never widen the chat
       viewport. Keep vertical scrolling only; action controls wrap instead
       of creating the horizontal rail above the composer. */
    #messages,
    .messages,
    .messageList,
    .chatMessages {
      overflow-x: hidden !important;
      min-width: 0 !important;
    }
    .messageActions {
      max-width: calc(100% - 20px) !important;
      overflow-x: hidden !important;
      flex-wrap: wrap !important;
    }

    .app {
      grid-template-columns: 88px minmax(288px, 312px) minmax(0, 1fr) 0 !important;
    }

    .infoPane {
      width: 0 !important;
      min-width: 0 !important;
      max-width: 0 !important;
      padding: 0 !important;
      border: 0 !important;
      overflow: hidden !important;
      opacity: 0 !important;
      pointer-events: none !important;
    }

    .profileCover,
    .profileAlbumCover,
    .profileMediaThumb {
      background-color: #7bdeef !important;
      background-image: linear-gradient(135deg, #7bdeef 0%, #eefdff 100%) !important;
      border-color: #7bdeef !important;
    }

    .profileHero,
    .profileSummary,
    .profileStatusCard,
    .profileTabs,
    .profileMediaTile,
    .profileAlbumCard {
      border-color: #7bdeef !important;
      box-shadow: 0 14px 34px rgba(123, 222, 239, .16) !important;
    }

    .avatar,
    .avatar.small,
    .mark,
    .profileSummary .avatar,
    .profileHero .avatar,
    .chatHead .avatar,
    .roomButton .avatar,
    .userButton .avatar {
      background-color: #eefdff !important;
      background-image: linear-gradient(145deg, #ffffff, #eefdff) !important;
      border-color: #7bdeef !important;
      color: #196f93 !important;
      box-shadow: 0 10px 24px rgba(123, 222, 239, .22) !important;
    }

    button.secondary,
    .secondary,
    .headActions button,
    .composerIconButton,
    .linkButton,
    .languageChoice,
    .factPill,
    .statusPill,
    .fileSourcePill,
    .profileTabs button,
    .modernFilePicker {
      background: #e9f8ff !important;
      border-color: #7bdeef !important;
      color: #196f93 !important;
    }

    .navButton:hover,
    .navButton.active,
    .railButton:hover,
    .railButton.active,
    .sideItem:hover,
    .sideItem.active,
    .roomItem:hover,
    .roomItem.active,
    .roomButton:hover,
    .roomButton.active,
    .userButton:hover,
    .userButton.active,
    .languageChoice:hover,
    .languageChoice.active,
    .profileTabs button:hover,
    .profileTabs button.active,
    .modernFilePicker:hover,
    button.secondary:hover,
    .secondary:hover,
    .headActions button:hover,
    .composerIconButton:hover,
    .linkButton:hover,
    .messageActions button:hover,
    .messageActions button:focus-visible,
    input:hover,
    textarea:hover,
    select:hover,
    button:not(.ghost):not(.secondary):not(.danger):not(.linkButton):not(.composerIconButton):not(.attachOption):not(.readReceiptButton):hover {
      background: #7bdeef !important;
      border-color: #7bdeef !important;
      color: #196f93 !important;
      filter: none !important;
    }

    input:focus,
    textarea:focus,
    select:focus,
    .composerLine:focus-within,
    :where(button, a, input, textarea, select, .roomButton, .userButton, .navButton, .bubble):focus-visible {
      outline: 2px solid #7bdeef !important;
      outline-offset: 2px !important;
      border-color: #7bdeef !important;
      box-shadow: 0 0 0 4px rgba(123, 222, 239, .24) !important;
    }

    #sendButton,
    .primaryDownload,
    .modernFilePickerButton,
    button:not(.ghost):not(.secondary):not(.danger):not(.linkButton):not(.composerIconButton):not(.attachOption):not(.readReceiptButton) {
      background: #196f93 !important;
      border-color: #196f93 !important;
      color: #ffffff !important;
    }

    .bubble,
    .message.mine .bubble,
    .mine .bubble {
      max-width: 100% !important;
      overflow: hidden !important;
      overflow-wrap: anywhere !important;
      word-break: break-word !important;
      color: #196f93 !important;
    }

    .message,
    .messageContent,
    .msgText,
    .msgAuthor,
    .msgMeta,
    .roomText,
    .roomText strong,
    .roomText small,
    .userMain,
    .userMain strong,
    .userMain small,
    .fileMeta,
    .fileMeta strong,
    .fileMeta span,
    .attachment,
    .attachment *,
    .profileSummary,
    .profileSummary *,
    .postCard,
    .postCard * {
      min-width: 0 !important;
      max-width: 100% !important;
      overflow-wrap: anywhere !important;
      word-break: break-word !important;
    }

    .roomText,
    .userMain,
    .fileMeta,
    .msgText {
      overflow: hidden !important;
    }

    .roomText strong,
    .roomText small,
    .userMain strong,
    .userMain small {
      display: block !important;
      white-space: normal !important;
      text-overflow: clip !important;
    }

    .message.mine .bubble:not(.stickerBubble),
    .mine .bubble:not(.stickerBubble) {
      background: #eefdff !important;
      border-color: #7bdeef !important;
      color: #196f93 !important;
    }

    .message.mine .bubble *,
    .mine .bubble *,
    .msgText,
    .msgAuthor,
    .msgMeta,
    .readReceiptMeta,
    .readStatus {
      color: #196f93 !important;
      text-shadow: none !important;
    }

    @media (max-width: 900px) {
      .app {
        grid-template-columns: 1fr !important;
      }
      .infoPane {
        display: none !important;
      }
    }
    /* END_PLCHAT_THEME_EEFDFF_BLUE_WORKSPACE_FINAL_V1 */
    /* PLCHAT_CHAT_FRAME_LANGUAGE_DRAWER_FIX_V1 */
    .bubble,
    .message.mine .bubble,
    .mine .bubble,
    .composerLine,
    #messageInput {
      border-color: #dff3f7 !important;
    }

    .bubble,
    .message.mine .bubble,
    .mine .bubble {
      box-shadow: 0 8px 20px rgba(223, 243, 247, .62) !important;
    }

    .navButton[data-section="updates"] {
      min-height: 58px !important;
      padding: 7px 4px !important;
      gap: 4px !important;
    }

    .navButton[data-section="updates"] span:not(.badge) {
      display: block !important;
      max-width: 100% !important;
      white-space: pre-line !important;
      overflow-wrap: anywhere !important;
      word-break: break-word !important;
      text-align: center !important;
      font-size: 9px !important;
      line-height: 1.08 !important;
      letter-spacing: 0 !important;
    }

    .navButton[data-section="updates"] strong {
      font-size: 17px !important;
      line-height: 1 !important;
    }

    body.plchat-chat-drawers-enabled.plchat-room-info-collapsed #infoPane {
      width: 0 !important;
      min-width: 0 !important;
      max-width: 0 !important;
      padding: 0 !important;
      opacity: 0 !important;
      pointer-events: none !important;
      transform: translateX(100%) !important;
      overflow: hidden !important;
    }

    body.plchat-chat-drawers-enabled.plchat-room-info-open #infoPane {
      display: block !important;
      position: fixed !important;
      top: 86px !important;
      right: 0 !important;
      bottom: 0 !important;
      width: min(350px, calc(100vw - 110px)) !important;
      min-width: min(350px, calc(100vw - 110px)) !important;
      max-width: min(350px, calc(100vw - 110px)) !important;
      height: auto !important;
      padding: 16px !important;
      border-left: 1px solid #7bdeef !important;
      border-top: 1px solid #dff3f7 !important;
      background: rgba(255, 255, 255, .98) !important;
      color: #196f93 !important;
      box-shadow: -18px 0 44px rgba(25, 111, 147, .14) !important;
      opacity: 1 !important;
      pointer-events: auto !important;
      overflow: auto !important;
      transform: translateX(0) !important;
      z-index: 98 !important;
    }

    body.plchat-chat-drawers-enabled.plchat-room-info-open #app,
    body.plchat-chat-drawers-enabled.plchat-room-info-collapsed #app {
      grid-template-columns: 88px minmax(288px, 312px) minmax(0, 1fr) 0 !important;
    }

    body.plchat-chat-drawers-enabled.plchat-room-info-open .roomInfoDrawerToggle {
      opacity: .22 !important;
    }

    @media (max-width: 900px) {
      body.plchat-chat-drawers-enabled.plchat-room-info-open #infoPane {
        display: block !important;
        top: 70px !important;
        width: min(340px, calc(100vw - 18px)) !important;
        min-width: min(340px, calc(100vw - 18px)) !important;
        max-width: min(340px, calc(100vw - 18px)) !important;
      }
    }
    /* END_PLCHAT_CHAT_FRAME_LANGUAGE_DRAWER_FIX_V1 */
    /* PLCHAT_D9EEF7_COMPACT_CHAT_BUBBLES_ACTIONS_V1 */
    :root {
      --pl-primary: #d9eef7 !important;
      --pl-primary-soft: #edf9fd !important;
      --pl-primary-hover: #7bdeef !important;
      --pl-primary-active: #7bdeef !important;
      --pl-bg: #e9f8ff !important;
      --pl-surface: #ffffff !important;
      --pl-surface-soft: #f8fdff !important;
      --pl-border: #d9eef7 !important;
      --pl-text-main: #196f93 !important;
      --pl-text-secondary: #196f93 !important;
      --pl-text-muted: #5b8798 !important;
      --pl-accent-dark: #196f93 !important;
      --pl-bubble-own: #d9eef7 !important;
      --pl-bubble-other: #ffffff !important;
      --brand: #d9eef7 !important;
      --brand-dark: #196f93 !important;
      --brand-soft: #e9f8ff !important;
      --line: #d9eef7 !important;
      --text: #196f93 !important;
      --muted: #5b8798 !important;
      --bg: #e9f8ff !important;
      --panel: #ffffff !important;
      --panel-soft: #f8fdff !important;
    }

    html,
    body,
    .shell,
    .app,
    .chat,
    .messageStage,
    .chatListPane,
    .moduleView,
    #chatPanel,
    #moduleView {
      background: #e9f8ff !important;
      color: #196f93 !important;
    }

    body,
    button,
    input,
    textarea,
    select,
    .msgText,
    .msgAuthor,
    .msgMeta,
    .roomText,
    .userMain,
    .chatTitle,
    .moduleHead {
      color: #196f93 !important;
    }

    .topbar,
    .mainRail,
    .chatListPane,
    .infoPane,
    .paneTitle,
    .chatHead,
    .composer,
    .panel,
    .postCard,
    .moduleCard,
    .feedComposer,
    .profileHero,
    .profileSummary,
    .profileStatusCard,
    .infoCard,
    .roomButton,
    .sideItem,
    .userButton,
    .employeeCard,
    .memberPicker,
    .modalCard,
    .notificationDropdown,
    .downloadHistoryPanel,
    .fileCard,
    .attachment,
    .imageAttachment,
    .imageAlbum,
    .bubble,
    .messageActions,
    input,
    textarea,
    select {
      border-color: #d9eef7 !important;
    }

    .messages,
    #messages,
    .messageList,
    .chatMessages {
      background: #e9f8ff !important;
    }

    .message {
      max-width: min(760px, 78%) !important;
      width: fit-content !important;
      min-width: 0 !important;
      align-self: flex-start !important;
    }

    .message.mine {
      align-self: flex-end !important;
    }

    .bubble,
    .message.mine .bubble,
    .mine .bubble {
      display: inline-flex !important;
      flex-direction: column !important;
      align-items: flex-start !important;
      width: fit-content !important;
      min-width: 0 !important;
      max-width: min(640px, calc(100vw - 440px)) !important;
      padding: 7px 10px !important;
      border: 1px solid #d9eef7 !important;
      border-radius: 17px !important;
      background: #ffffff !important;
      color: #196f93 !important;
      box-shadow: 0 6px 18px rgba(25, 111, 147, .055) !important;
      overflow: visible !important;
      overflow-wrap: anywhere !important;
      word-break: break-word !important;
    }

    .message.mine .bubble:not(.stickerBubble),
    .mine .bubble:not(.stickerBubble) {
      align-items: flex-end !important;
      background: #d9eef7 !important;
      border-color: #d9eef7 !important;
    }

    .bubble .msgText,
    .bubble .msgAuthor,
    .bubble .msgMeta,
    .bubble .readReceiptMeta,
    .bubble .readStatus {
      width: auto !important;
      max-width: 100% !important;
      color: #196f93 !important;
      overflow-wrap: anywhere !important;
      word-break: break-word !important;
      white-space: pre-wrap !important;
    }

    .bubble .msgText {
      line-height: 1.48 !important;
    }

    .bubble .attachment,
    .bubble .imageAttachment,
    .bubble .fileCard {
      max-width: min(520px, 100%) !important;
    }

    .messageActions,
    .attachmentActions,
    .imageAttachmentFooter .attachmentActions {
      opacity: 0 !important;
      transform: translateY(6px) !important;
      pointer-events: none !important;
      max-height: 0 !important;
      overflow: hidden !important;
      margin-top: 0 !important;
      transition: opacity .16s ease, transform .16s ease, max-height .16s ease, margin-top .16s ease !important;
    }

    .message:hover .messageActions,
    .message:focus-within .messageActions,
    .bubble:hover .messageActions,
    .bubble:focus-within .messageActions,
    .attachment:hover .attachmentActions,
    .attachment:focus-within .attachmentActions,
    .imageAttachment:hover .attachmentActions,
    .imageAttachment:focus-within .attachmentActions,
    .profilePostAttachment:hover .attachmentActions,
    .profilePostAttachment:focus-within .attachmentActions {
      opacity: 1 !important;
      transform: translateY(0) !important;
      pointer-events: auto !important;
      max-height: 96px !important;
      margin-top: 6px !important;
      overflow: visible !important;
    }

    .messageActions,
    .attachmentActions {
      gap: 6px !important;
      flex-wrap: wrap !important;
    }

    .messageActions button,
    .attachmentActions a,
    .attachmentActions button {
      min-height: 28px !important;
      padding: 5px 9px !important;
      border-radius: 999px !important;
      border-color: #d9eef7 !important;
      background: rgba(255, 255, 255, .94) !important;
      color: #196f93 !important;
      box-shadow: 0 5px 12px rgba(25, 111, 147, .055) !important;
    }

    /* A message action bar must reserve its own space.  The previous
       absolute layout overlapped the next image card whenever actions wrapped. */
    .chat .message {
      padding-bottom: 0 !important;
    }
    .chat .messageActions {
      position: static !important;
      display: flex !important;
      width: fit-content !important;
      max-width: 100% !important;
      flex-wrap: wrap !important;
      gap: 4px !important;
      margin-top: 6px !important;
      padding: 3px 4px !important;
      border-radius: 12px !important;
      overflow: visible !important;
      transform: none !important;
    }
    .chat .message:hover .messageActions,
    .chat .message:focus-within .messageActions,
    .chat .message.actionsOpen .messageActions {
      max-height: none !important;
    }
    .chat .messageActions button {
      min-height: 22px !important;
      padding: 2px 6px !important;
      border-radius: 8px !important;
      font-size: 10px !important;
      line-height: 1.15 !important;
      letter-spacing: 0 !important;
    }

    .navButton:hover,
    .navButton.active,
    .railButton:hover,
    .railButton.active,
    .sideItem:hover,
    .sideItem.active,
    .roomItem:hover,
    .roomItem.active,
    .roomButton:hover,
    .roomButton.active,
    .userButton:hover,
    .userButton.active,
    .languageChoice:hover,
    .languageChoice.active,
    .profileTabs button:hover,
    .profileTabs button.active,
    .modernFilePicker:hover,
    button.secondary:hover,
    .secondary:hover,
    .headActions button:hover,
    .composerIconButton:hover,
    .linkButton:hover,
    .messageActions button:hover,
    .messageActions button:focus-visible,
    .attachmentActions a:hover,
    .attachmentActions button:hover,
    input:hover,
    textarea:hover,
    select:hover,
    button:not(.ghost):not(.secondary):not(.danger):not(.linkButton):not(.composerIconButton):not(.attachOption):not(.readReceiptButton):hover {
      background: #7bdeef !important;
      border-color: #7bdeef !important;
      color: #196f93 !important;
      filter: none !important;
    }

    input:focus,
    textarea:focus,
    select:focus,
    .composerLine:focus-within,
    :where(button, a, input, textarea, select, .roomButton, .userButton, .navButton, .bubble):focus-visible {
      outline: 2px solid #7bdeef !important;
      outline-offset: 2px !important;
      border-color: #7bdeef !important;
      box-shadow: 0 0 0 4px rgba(123, 222, 239, .24) !important;
    }

    #sendButton,
    .primaryDownload,
    .modernFilePickerButton,
    button:not(.ghost):not(.secondary):not(.danger):not(.linkButton):not(.composerIconButton):not(.attachOption):not(.readReceiptButton) {
      background: #196f93 !important;
      border-color: #196f93 !important;
      color: #ffffff !important;
    }

    @media (max-width: 1100px) {
      .bubble,
      .message.mine .bubble,
      .mine .bubble {
        max-width: min(620px, calc(100vw - 180px)) !important;
      }
    }

    @media (max-width: 760px) {
      .message {
        max-width: 88% !important;
      }
      .bubble,
      .message.mine .bubble,
      .mine .bubble {
        max-width: 100% !important;
      }
    }
    /* END_PLCHAT_D9EEF7_COMPACT_CHAT_BUBBLES_ACTIONS_V1 */
    /* PLCHAT_ROOM_LIST_BLUE_CARD_TEXT_WHITE_V1 */
    #roomList .roomButton,
    #roomList .roomButton *,
    #roomList .roomButton .roomText,
    #roomList .roomButton .roomText strong,
    #roomList .roomButton .roomText small,
    #roomList .roomButton .hint,
    #roomList .roomButton .roomMeta {
      color: #ffffff !important;
      text-shadow: 0 1px 2px rgba(25, 111, 147, .24) !important;
    }
    #roomList .roomButton .badge,
    #roomList .roomButton .roomUnreadBadge {
      color: #ffffff !important;
      text-shadow: none !important;
    }
    /* END_PLCHAT_ROOM_LIST_BLUE_CARD_TEXT_WHITE_V1 */
    /* PLCHAT_SOFT_PASTEL_BLUE_THEME_ONLY_V1 */
    :root {
      --pl-primary: #dff3ff !important;
      --pl-primary-soft: #f3fbff !important;
      --pl-primary-hover: #ccefff !important;
      --pl-primary-active: #b9e8fb !important;
      --pl-bg: #f6fcff !important;
      --pl-surface: #ffffff !important;
      --pl-surface-soft: #f8fdff !important;
      --pl-border: #d7edf8 !important;
      --pl-text-main: #196f93 !important;
      --pl-text-secondary: #2f7f9d !important;
      --pl-text-muted: #6b92a5 !important;
      --pl-accent-dark: #196f93 !important;
      --pl-bubble-own: #dff3ff !important;
      --pl-bubble-other: #ffffff !important;
      --brand: #dff3ff !important;
      --brand-dark: #196f93 !important;
      --brand-soft: #f3fbff !important;
      --line: #d7edf8 !important;
      --text: #196f93 !important;
      --muted: #6b92a5 !important;
      --bg: #f6fcff !important;
      --panel: #ffffff !important;
      --panel-soft: #f8fdff !important;
    }

    html,
    body,
    .shell,
    .app,
    .chat,
    .messageStage,
    .chatListPane,
    .infoPane,
    .moduleView,
    #chatPanel,
    #moduleView {
      background: #f6fcff !important;
      color: #196f93 !important;
    }

    .topbar,
    .mainRail,
    .chatListPane,
    .infoPane,
    .paneTitle,
    .chatHead,
    .composer,
    .panel,
    .postCard,
    .moduleCard,
    .feedComposer,
    .profileHero,
    .profileSummary,
    .profileStatusCard,
    .infoCard,
    .roomButton,
    .sideItem,
    .userButton,
    .employeeCard,
    .memberPicker,
    .modalCard,
    .notificationDropdown,
    .downloadHistoryPanel,
    .fileCard,
    .attachment,
    .imageAttachment,
    .imageAlbum,
    .bubble,
    .messageActions,
    input,
    textarea,
    select {
      border-color: #d7edf8 !important;
    }

    .messages,
    #messages,
    .messageList,
    .chatMessages {
      background: linear-gradient(180deg, #f6fcff 0%, #ffffff 100%) !important;
    }

    .mainRail,
    .chatListPane {
      background: #eef9ff !important;
    }

    .navButton,
    .roomButton,
    .userButton,
    .sideItem,
    button.secondary,
    .secondary,
    .headActions button,
    .composerIconButton,
    .linkButton,
    .languageChoice,
    .factPill,
    .statusPill,
    .fileSourcePill,
    .modernFilePicker {
      background: #f3fbff !important;
      border-color: #d7edf8 !important;
      color: #196f93 !important;
    }

    .navButton:hover,
    .navButton.active,
    .railButton:hover,
    .railButton.active,
    .sideItem:hover,
    .sideItem.active,
    .roomItem:hover,
    .roomItem.active,
    .roomButton:hover,
    .roomButton.active,
    .userButton:hover,
    .userButton.active,
    .languageChoice:hover,
    .languageChoice.active,
    .profileTabs button:hover,
    .profileTabs button.active,
    .modernFilePicker:hover,
    button.secondary:hover,
    .secondary:hover,
    .headActions button:hover,
    .composerIconButton:hover,
    .linkButton:hover,
    .messageActions button:hover,
    .messageActions button:focus-visible,
    .attachmentActions a:hover,
    .attachmentActions button:hover,
    input:hover,
    textarea:hover,
    select:hover {
      background: #ccefff !important;
      border-color: #b9e8fb !important;
      color: #196f93 !important;
      filter: none !important;
    }

    .bubble,
    .message.mine .bubble,
    .mine .bubble {
      border-color: #d7edf8 !important;
      color: #196f93 !important;
      box-shadow: 0 8px 20px rgba(185, 232, 251, .28) !important;
    }

    .message.mine .bubble:not(.stickerBubble),
    .mine .bubble:not(.stickerBubble) {
      background: #dff3ff !important;
      border-color: #ccefff !important;
    }

    .avatar,
    .avatar.small,
    .mark,
    .profileSummary .avatar,
    .profileHero .avatar,
    .chatHead .avatar,
    .roomButton .avatar,
    .userButton .avatar {
      background-color: #f3fbff !important;
      background-image: linear-gradient(145deg, #ffffff, #dff3ff) !important;
      border-color: #ccefff !important;
      color: #196f93 !important;
    }

    #roomList .roomButton,
    #roomList .roomButton *,
    #roomList .roomButton .roomText,
    #roomList .roomButton .roomText strong,
    #roomList .roomButton .roomText small,
    #roomList .roomButton .hint,
    #roomList .roomButton .roomMeta {
      color: #196f93 !important;
      text-shadow: none !important;
    }

    input:focus,
    textarea:focus,
    select:focus,
    .composerLine:focus-within,
    :where(button, a, input, textarea, select, .roomButton, .userButton, .navButton, .bubble):focus-visible {
      outline-color: #b9e8fb !important;
      border-color: #b9e8fb !important;
      box-shadow: 0 0 0 4px rgba(185, 232, 251, .34) !important;
    }
    /* END_PLCHAT_SOFT_PASTEL_BLUE_THEME_ONLY_V1 */
    /* PLCHAT_REMOVE_DARK_NAVY_TO_PASTEL_BLUE_V1 */
    .mainRail,
    .chatListPane,
    .infoPane,
    .moduleView,
    .chatHead,
    .composer,
    .panel,
    .paneTitle,
    .topbar {
      background: #f3fbff !important;
      border-color: #d7edf8 !important;
      color: #196f93 !important;
    }

    .mainRail .navButton,
    .mainRail .navButton.active,
    .mainRail .navButton:hover,
    .mainRail .navButton:focus-visible,
    .mainRail .navButton[data-section],
    #desktopUpdateNav,
    #desktopUpdateNav:hover,
    #desktopUpdateNav.active,
    #adminNav,
    #adminNav:hover,
    #adminNav.active {
      background: #eaf8ff !important;
      border: 1px solid #cfefff !important;
      color: #196f93 !important;
      box-shadow: 0 8px 18px rgba(185, 232, 251, .22) !important;
      filter: none !important;
    }

    .mainRail .navButton strong,
    .mainRail .navButton span,
    .mainRail .navButton.active strong,
    .mainRail .navButton.active span,
    .mainRail .navButton:hover strong,
    .mainRail .navButton:hover span {
      color: #196f93 !important;
      text-shadow: none !important;
    }

    #roomList .roomButton,
    #roomList .roomButton.active,
    #roomList .roomButton:hover,
    #roomList .roomButton.unreadRoom,
    #roomList .roomButton.unreadRoom:hover,
    #roomList .roomButton.unreadRoom.active,
    .chatListPane .roomButton,
    .chatListPane .roomButton.active,
    .chatListPane .roomButton:hover,
    .chatListPane .roomButton.unreadRoom,
    .chatListPane .userButton,
    .chatListPane .userButton.active,
    .chatListPane .userButton:hover {
      background: #eaf8ff !important;
      border: 1px solid #cfefff !important;
      color: #196f93 !important;
      box-shadow: 0 10px 22px rgba(185, 232, 251, .20) !important;
      filter: none !important;
    }

    #roomList .roomButton *,
    .chatListPane .roomButton *,
    .chatListPane .userButton *,
    #roomList .roomButton .roomText,
    #roomList .roomButton .roomText strong,
    #roomList .roomButton .roomText small,
    #roomList .roomButton .hint,
    #roomList .roomButton .roomMeta {
      color: #196f93 !important;
      text-shadow: none !important;
    }

    #sendButton,
    .primaryDownload,
    .modernFilePickerButton,
    button:not(.ghost):not(.danger):not(.linkButton):not(.composerIconButton):not(.attachOption):not(.readReceiptButton) {
      background: #dff3ff !important;
      border-color: #cfefff !important;
      color: #196f93 !important;
      box-shadow: 0 8px 18px rgba(185, 232, 251, .24) !important;
      filter: none !important;
    }

    #sendButton:hover,
    .primaryDownload:hover,
    .modernFilePickerButton:hover,
    button:not(.ghost):not(.danger):not(.linkButton):not(.composerIconButton):not(.attachOption):not(.readReceiptButton):hover {
      background: #ccefff !important;
      border-color: #b9e8fb !important;
      color: #196f93 !important;
      filter: none !important;
    }

    /* Keep download actions distinct from the surrounding light controls. */
    .primaryDownload,
    .imageAlbumDownload {
      background: #196f93 !important;
      border-color: #196f93 !important;
      color: #ffffff !important;
      text-shadow: none !important;
    }

    .primaryDownload:hover,
    .primaryDownload:focus-visible,
    .imageAlbumDownload:hover,
    .imageAlbumDownload:focus-visible {
      background: #125a78 !important;
      border-color: #125a78 !important;
      color: #ffffff !important;
      outline: 3px solid rgba(25, 111, 147, .28);
      outline-offset: 2px;
    }

    .imageAlbumDownload:disabled {
      background: #196f93 !important;
      border-color: #196f93 !important;
      color: #ffffff !important;
      opacity: .72;
    }

    .roomInfoDrawerToggle,
    .createRoomDrawerToggle,
    .roomInfoDrawerClose,
    .jumpToLatest {
      background: #dff3ff !important;
      border-color: #cfefff !important;
      color: #196f93 !important;
      box-shadow: 0 8px 18px rgba(185, 232, 251, .24) !important;
    }
    /* END_PLCHAT_REMOVE_DARK_NAVY_TO_PASTEL_BLUE_V1 */
    /* PLCHAT_READABLE_PASTEL_NAV_AND_MENTIONS_V1 */
    .mainRail {
      background: #f3fbff !important;
      border-right: 1px solid #cfefff !important;
    }

    .mainRail .navButton,
    .mainRail .navButton.hidden,
    .mainRail .navButton[data-section],
    .mainRail .navButton.active,
    .mainRail .navButton:hover,
    .mainRail .navButton:focus-visible {
      background: #eaf8ff !important;
      border: 1px solid #cfefff !important;
      color: #196f93 !important;
      opacity: 1 !important;
      box-shadow: 0 8px 18px rgba(185, 232, 251, .20) !important;
      filter: none !important;
    }

    .mainRail .navButton strong,
    .mainRail .navButton span:not(.badge),
    .mainRail .navButton svg,
    .mainRail .navButton i {
      display: block !important;
      visibility: visible !important;
      opacity: 1 !important;
      color: #196f93 !important;
      fill: #196f93 !important;
      stroke: #196f93 !important;
      text-shadow: none !important;
    }

    .mainRail .navButton .badge {
      color: #ffffff !important;
      background: #ff5a7a !important;
      text-shadow: none !important;
    }

    .mentionSuggestions {
      background: #f8fdff !important;
      border: 1px solid #cfefff !important;
      box-shadow: 0 14px 32px rgba(185, 232, 251, .36) !important;
    }

    .msgText .mentionToken {
      display: inline-block;
      color: #0b729c !important;
      background: #d7f3ff !important;
      border: 1px solid #a9e4fa;
      border-radius: 6px;
      padding: 0 4px;
      font-weight: 800;
      line-height: 1.35;
    }

    .mine .msgText .mentionToken {
      color: #075b68 !important;
      background: #bff4e8 !important;
      border-color: #8de5d2;
    }

    /* PLCHAT_MESSAGE_BUBBLE_CONTENT_FIT_V1
       Keep each bubble compact for short text, while constraining long text
       and every attachment to the available chat width. */
    .messages .message {
      width: fit-content !important;
      max-width: min(76%, 720px) !important;
      min-width: 0 !important;
    }

    .messages .message.mine {
      margin-left: auto !important;
      margin-right: 0 !important;
    }

    .messages .message .bubble {
      width: fit-content !important;
      max-width: 100% !important;
      min-width: 0 !important;
      overflow: hidden !important;
      justify-self: start !important;
    }

    .messages .message:not(.mine) {
      grid-template-columns: 34px minmax(0, fit-content(720px)) !important;
    }

    .messages .message.mine {
      grid-template-columns: minmax(0, fit-content(720px)) !important;
    }

    /* Flex makes the bubble itself, rather than the row's grid track, decide
       the width. This prevents short replies from becoming wide empty cards. */
    .messages .message,
    .messages .message.mine {
      display: flex !important;
      align-items: flex-start !important;
      width: fit-content !important;
      max-width: min(76%, 720px) !important;
    }

    .messages .message.mine {
      justify-content: flex-end !important;
    }

    .messages .message .bubble {
      flex: 0 1 auto !important;
    }

    .messages .msgText {
      max-width: 100%;
      overflow-wrap: anywhere;
      word-break: break-word;
    }

    .messages .bubble > .attachment,
    .messages .bubble > .imageAttachment,
    .messages .bubble > .imageAlbum,
    .messages .bubble > .aiImageResult,
    .messages .bubble > video,
    .messages .bubble > img {
      width: auto !important;
      max-width: 100% !important;
    }

    .messages .bubble .imageAttachment img,
    .messages .bubble .imageAttachment video,
    .messages .bubble .imageAlbum img,
    .messages .bubble .aiImageResult img {
      max-width: 100% !important;
      height: auto !important;
    }

    .messages .bubble .fileCard,
    .messages .bubble .attachmentActions,
    .messages .bubble .imageAttachmentFooter,
    .messages .bubble .imageAlbumFooter {
      min-width: 0 !important;
      max-width: 100%;
      flex-wrap: wrap;
    }

    .messages .bubble .fileMeta,
    .messages .bubble .fileMeta strong,
    .messages .bubble .fileMeta span {
      min-width: 0;
      max-width: 100%;
      overflow-wrap: anywhere;
      word-break: break-word;
    }

    @media (max-width: 700px) {
      .messages .message {
        max-width: 88% !important;
      }
    }

    .mentionSuggestions .mentionOption,
    .mentionOption,
    button.mentionOption {
      display: flex !important;
      background: #eaf8ff !important;
      border: 1px solid #cfefff !important;
      color: #196f93 !important;
      opacity: 1 !important;
      box-shadow: none !important;
      filter: none !important;
    }

    .mentionSuggestions .mentionOption *,
    .mentionOption *,
    .mentionOption strong,
    .mentionOption .hint {
      color: #196f93 !important;
      opacity: 1 !important;
      text-shadow: none !important;
    }

    .mentionSuggestions .mentionOption:hover,
    .mentionSuggestions .mentionOption:focus-visible,
    .mentionOption:hover,
    .mentionOption:focus-visible {
      background: #ccefff !important;
      border-color: #b9e8fb !important;
      color: #196f93 !important;
    }

    .commandSuggestions {
      background: #f8fdff !important;
      border: 1px solid #cfefff !important;
      box-shadow: 0 14px 32px rgba(185, 232, 251, .36) !important;
    }

    .commandSuggestions .commandOption,
    button.commandOption {
      display: grid !important;
      background: #eaf8ff !important;
      border: 1px solid #cfefff !important;
      color: #196f93 !important;
      opacity: 1 !important;
      box-shadow: none !important;
    }

    .commandSuggestions .commandOption *,
    .commandOption strong,
    .commandOption .hint {
      color: #196f93 !important;
      opacity: 1 !important;
      text-shadow: none !important;
    }

    .commandSuggestions .commandOption:hover,
    .commandSuggestions .commandOption:focus-visible,
    .commandSuggestions .commandOption.isActive {
      background: #ccefff !important;
      border-color: #b9e8fb !important;
    }
    /* END_PLCHAT_READABLE_PASTEL_NAV_AND_MENTIONS_V1 */
    /* PLCHAT_DARK_BLUE_FRAME_TEXT_WHITE_ONLY_V1 */
    .mainRail .navButton strong,
    .mainRail .navButton span:not(.badge),
    .mainRail .navButton svg,
    .mainRail .navButton i,
    .mainRail .navButton.active strong,
    .mainRail .navButton.active span:not(.badge),
    .mainRail .navButton:hover strong,
    .mainRail .navButton:hover span:not(.badge) {
      color: #ffffff !important;
      fill: #ffffff !important;
      stroke: #ffffff !important;
      opacity: 1 !important;
      visibility: visible !important;
      text-shadow: 0 1px 2px rgba(25, 111, 147, .28) !important;
    }

    .mainRail .navButton,
    .mainRail .navButton.active,
    .mainRail .navButton:hover,
    .mainRail .navButton:focus-visible,
    .mainRail .navButton::before,
    .mainRail .navButton::after {
      color: #ffffff !important;
      fill: #ffffff !important;
      stroke: #ffffff !important;
      -webkit-text-fill-color: #ffffff !important;
    }

    .mentionSuggestions .mentionOption,
    .mentionSuggestions .mentionOption *,
    .mentionSuggestions .mentionOption strong,
    .mentionSuggestions .mentionOption .hint,
    .mentionOption,
    .mentionOption *,
    .mentionOption strong,
    .mentionOption .hint,
    button.mentionOption,
    button.mentionOption * {
      color: #ffffff !important;
      fill: #ffffff !important;
      stroke: #ffffff !important;
      opacity: 1 !important;
      visibility: visible !important;
      -webkit-text-fill-color: #ffffff !important;
      text-shadow: 0 1px 2px rgba(25, 111, 147, .28) !important;
    }

    .mentionSuggestions .mentionOption .presenceDot,
    .mentionOption .presenceDot {
      text-shadow: none !important;
    }
    /* END_PLCHAT_DARK_BLUE_FRAME_TEXT_WHITE_ONLY_V1 */
    /* KAVEEP puppy mascot: stays crisp in the chat list, header, and message stream. */
    .avatar.kaveepAvatar {
      border-radius: 50% !important;
      background: #dff6ff !important;
      box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #73c9f3, 0 5px 14px rgba(29, 142, 199, .25) !important;
    }
    .avatar.kaveepAvatar img { border-radius: inherit; }

    /* An opt-in, non-blocking living KAVEEP companion. */
    #kaveepLivingMascot {
      position: fixed;
      left: 18px;
      bottom: 20px;
      z-index: 45;
      width: 88px;
      height: 112px;
      padding: 0;
      border: 0;
      background: transparent;
      cursor: pointer;
      opacity: 0;
      pointer-events: none;
      border: 0 !important;
      background: transparent !important;
      box-shadow: none !important;
      color: transparent !important;
      touch-action: none;
      user-select: none;
      transition: left 1.6s cubic-bezier(.28, .7, .2, 1), bottom .65s ease, opacity .25s ease;
    }
    #kaveepLivingMascot.isVisible { opacity: 1; pointer-events: auto; }
    #kaveepLivingMascot, #kaveepImageMasterMascot { transform: scale(var(--kaveep-avatar-scale, 1)); transform-origin: right bottom; }
    #kaveepLivingMascot:focus-visible { outline: 3px solid #43b7ec; outline-offset: 5px; border-radius: 50%; }
    /* Each Mini Friend owns a native-size render surface and a separate safe
       position.  This avoids scaling a tiny WebGL canvas into a blurry cluster. */
    .kaveepMiniFriends {
      position: fixed;
      inset: 0;
      z-index: 38;
      display: block;
      opacity: 0;
      pointer-events: none;
      transition: opacity .22s ease;
    }
    .kaveepMiniFriends.isVisible { opacity: 1; }
    /* The game is owned by the profile; the three characters remain visible
       in PL CHAT as the player's Mini Friends. */
    #kaveepDailyFoodDrop, .kaveepMiniFriendsSettings { display:none !important; }
    .kaveepDailyFoodDrop { position:fixed; right:22px; bottom:22px; z-index:46; padding:10px 13px; border:1px solid #f0c04f; border-radius:14px; background:linear-gradient(135deg,#fff6b8,#ffd76b); color:#7a4e00; box-shadow:0 7px 18px rgba(137,96,0,.24); font:800 13px/1.2 system-ui,sans-serif; cursor:pointer; animation:kaveepDailyFoodPulse 1.8s ease-in-out infinite; }
    .kaveepDailyFoodDrop:hover { filter:brightness(1.04); }
    @keyframes kaveepDailyFoodPulse { 50% { transform:translateY(-4px) scale(1.03); box-shadow:0 11px 24px rgba(137,96,0,.34); } }
    html[data-kaveep-mini-friends="off"] .kaveepMiniFriends,
    html[data-kaveep-living-motion="off"] .kaveepMiniFriends { display: none; }
    html[data-kaveep-distraction-free="on"] .kaveepMiniFriends { opacity: 0; pointer-events: none; }
    html[data-kaveep-mini-friends-count="1"] .kaveepMiniFriend:nth-child(n + 2),
    html[data-kaveep-mini-friends-count="2"] .kaveepMiniFriend:nth-child(n + 3) { display: none; }
    .kaveepMiniFriend {
      display: block;
      position: fixed;
      width: calc(112px * var(--kaveep-mini-friends-scale, .85));
      height: calc(126px * var(--kaveep-mini-friends-scale, .85));
      pointer-events: auto;
      cursor: grab;
      touch-action: none;
      user-select: none;
      filter: drop-shadow(0 6px 8px rgba(18, 89, 126, .28));
      animation: kaveepMiniFriendBob 2.9s ease-in-out infinite;
    }
    .kaveepMiniFriend.isDragging { cursor: grabbing; animation-play-state: paused; }
    .kaveepMiniFriend.isActing { animation-play-state: paused; }
    .kaveepMiniFriend[data-stage="2"] { filter:drop-shadow(0 7px 10px rgba(18, 132, 175, .36)) saturate(1.08); }
    .kaveepMiniFriend[data-stage="3"] { filter:drop-shadow(0 8px 12px rgba(177, 102, 222, .48)) saturate(1.16) brightness(1.04); }
    .kaveepMiniFriend[data-stage="2"] model-viewer { transform:scale(1.10); }
    .kaveepMiniFriend[data-stage="3"] model-viewer { transform:scale(1.20); }
    .kaveepMiniFriend:focus-visible { outline: 3px solid #43b7ec; outline-offset: 5px; border-radius: 18px; }
    /* Every friend needs both dimensions.  The duck previously had only a
       height, so its model-viewer was allowed to collapse horizontally. */
    /* Minimal companions: readable faces without taking over chat content. */
    .kaveepMiniFriendDuck { right:188px; bottom:168px; width:calc(41px * var(--kaveep-mini-friends-scale, .85)); height:calc(50px * var(--kaveep-mini-friends-scale, .85)); animation-delay:0s; }
    .kaveepMiniFriendPup { right:66px; bottom:82px; width:calc(42px * var(--kaveep-mini-friends-scale, .85)); height:calc(49px * var(--kaveep-mini-friends-scale, .85)); animation-delay:-.9s; }
    .kaveepMiniFriendBear { right:326px; bottom:64px; width:calc(42px * var(--kaveep-mini-friends-scale, .85)); height:calc(49px * var(--kaveep-mini-friends-scale, .85)); animation-delay:-1.8s; }
    .kaveepMiniFriend model-viewer {
      display: block;
      width: 100%;
      height: 100%;
      background: transparent;
      pointer-events: none;
      --poster-color: transparent;
    }
    .kaveepMiniFriend model-viewer::part(default-ar-button),
    .kaveepMiniFriend model-viewer::part(default-progress-mask),
    .kaveepMiniFriend model-viewer::part(default-progress-bar) { display: none; }
    .kaveepMiniFriendReaction {
      position: absolute;
      left: 50%;
      bottom: 100%;
      z-index: 2;
      max-width: 132px;
      padding: 4px 7px;
      border: 1px solid #b9e6fa;
      border-radius: 10px 10px 10px 3px;
      background: rgba(255, 255, 255, .96);
      color: #17688d;
      font: 800 11px/1.1 system-ui, sans-serif;
      white-space: nowrap;
      opacity: 0;
      pointer-events: none;
      transform: translate(-50%, 8px) scale(.88);
    }
    .kaveepMiniFriend.isActing .kaveepMiniFriendReaction { animation: kaveepMiniFriendReaction 2.1s ease both; }
    .kaveepMiniFriend.isWaving model-viewer { animation: kaveepMiniFriendWave .52s ease-in-out 4; }
    .kaveepMiniFriend.isBouncing model-viewer { animation: kaveepMiniFriendBounce .42s ease-in-out 5; }
    .kaveepMiniFriend.isJiggling model-viewer { animation: kaveepMiniFriendJiggle .48s ease-in-out 5; }
    @keyframes kaveepMiniFriendBob {
      0%, 100% { transform: translateY(0) rotate(-2deg); }
      50% { transform: translateY(-7px) rotate(2deg); }
    }
    @keyframes kaveepMiniFriendWave {
      0%, 100% { transform: rotate(-4deg) translateY(0); }
      50% { transform: rotate(7deg) translateY(-3px); }
    }
    @keyframes kaveepMiniFriendBounce {
      0%, 100% { transform: translateY(0) scale(1); }
      45% { transform: translateY(-12px) scale(1.05, .96); }
      70% { transform: translateY(1px) scale(.96, 1.05); }
    }
    @keyframes kaveepMiniFriendJiggle {
      0%, 100% { transform: rotate(0) scale(1); }
      25% { transform: rotate(-9deg) translateX(-2px) scale(1.04, .96); }
      75% { transform: rotate(9deg) translateX(2px) scale(.96, 1.04); }
    }
    @keyframes kaveepMiniFriendReaction {
      0% { opacity: 0; transform: translate(-50%, 8px) scale(.88); }
      15%, 76% { opacity: 1; transform: translate(-50%, 0) scale(1); }
      100% { opacity: 0; transform: translate(-50%, -7px) scale(.94); }
    }
    @media (prefers-reduced-motion: reduce) {
      .kaveepMiniFriend, .kaveepMiniFriend.isActing .kaveepMiniFriendReaction, .kaveepMiniFriend.isWaving model-viewer, .kaveepMiniFriend.isBouncing model-viewer, .kaveepMiniFriend.isJiggling model-viewer { animation: none; }
    }
    .kaveepLivingSpeech {
      position: absolute;
      right: 62px;
      bottom: 58px;
      width: max-content;
      max-width: min(230px, 56vw);
      padding: 7px 10px;
      border: 1px solid #b9e6fa;
      border-radius: 13px 13px 4px 13px;
      background: rgba(255, 255, 255, .96);
      color: #166284;
      font: 700 12px/1.3 system-ui, sans-serif;
      box-shadow: 0 7px 20px rgba(31, 130, 178, .16);
      opacity: 0;
      transform: translateY(4px) scale(.96);
      transition: opacity .22s ease, transform .22s ease;
      pointer-events: none;
    }
    #kaveepLivingMascot.isSpeaking .kaveepLivingSpeech { opacity: 1; transform: translateY(0) scale(1); }
    .kaveepLivingPet {
      position: absolute;
      right: 0;
      bottom: 0;
      width: 84px;
      height: 106px;
      overflow: visible;
      border: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
      animation: none;
    }
    #kaveepImageMasterMascot { position:fixed; right:18px; bottom:20px; z-index:44; width:62px; height:68px; padding:0; border:0; border-radius:0; background:transparent !important; background-image:none !important; box-shadow:none !important; cursor:grab; opacity:0; pointer-events:none; transition:left 7.2s cubic-bezier(.23,.73,.22,1),top 7.2s cubic-bezier(.23,.73,.22,1),opacity .25s ease; touch-action:none; user-select:none; }
    #kaveepImageMasterMascot.isVisible { opacity:1; pointer-events:auto; }
    #kaveepImageMasterMascot:focus-visible { outline:3px solid #7d5cff; outline-offset:4px; border-radius:50%; }
    .kaveepImageMasterPet { position:absolute; right:0; bottom:0; width:58px; height:58px; border:0 !important; border-radius:0 !important; background:transparent !important; box-shadow:none !important; transform-origin:50% 88%; animation:kaveepImageMasterWiggle 1.15s ease-in-out infinite; filter:drop-shadow(0 4px 5px rgba(87,18,164,.22)); }
    .kaveepImageMasterPet model-viewer { position:absolute; inset:0; width:100%; height:100%; border:0 !important; border-radius:0 !important; --poster-color:rgba(0,0,0,0); background-color:transparent !important; background:transparent !important; box-shadow:none !important; pointer-events:none; }
    .kaveepImageMasterPet model-viewer::part(default-ar-button), .kaveepImageMasterPet model-viewer::part(default-progress-mask) { display:none; }
    .kaveepImageMasterPet model-viewer::part(default-progress-bar) { display:none; }
    #kaveepImageMasterMascot.isWorking .kaveepImageMasterPet { animation-duration:1.75s; filter:drop-shadow(0 0 13px rgba(70,213,255,.9)); }
    #kaveepImageMasterMascot.isCrawling .kaveepImageMasterPet { animation-duration:1.2s; filter:drop-shadow(0 4px 7px rgba(52,39,174,.28)); }
    #kaveepImageMasterMascot.isDragging { cursor:grabbing; transition:none !important; }
    #kaveepImageMasterMascot[data-expression="expressionHappy"] .kaveepImageMasterPet, #kaveepImageMasterMascot[data-expression="expressionExcited"] .kaveepImageMasterPet { filter:drop-shadow(0 0 11px rgba(110,234,255,.78)) saturate(1.18); }
    #kaveepImageMasterMascot[data-expression="expressionSad"] .kaveepImageMasterPet, #kaveepImageMasterMascot[data-expression="expressionSleepy"] .kaveepImageMasterPet { filter:saturate(.72) brightness(.9); }
    #kaveepImageMasterMascot[data-expression="expressionAngry"] .kaveepImageMasterPet, #kaveepImageMasterMascot[data-expression="expressionSurprise"] .kaveepImageMasterPet { filter:saturate(1.25) hue-rotate(12deg); }
    @keyframes kaveepImageMasterWiggle {
      0%, 100% { transform: translateY(0) scaleX(1) scaleY(1); }
      35% { transform: translateY(-3px) scaleX(1.035) scaleY(.965); }
      60% { transform: translateY(1px) scaleX(.975) scaleY(1.04); }
    }
    .kaveepImageMasterSpeech { position:absolute; right:65px; bottom:66px; width:max-content; max-width:min(230px,56vw); padding:7px 10px; border:1px solid #b9c3ff; border-radius:13px 13px 4px 13px; background:rgba(255,255,255,.96); color:#4832a0; font:700 12px/1.3 system-ui,sans-serif; box-shadow:0 7px 20px rgba(71,58,173,.18); opacity:0; transform:translateY(4px) scale(.96); transition:opacity .22s ease,transform .22s ease; pointer-events:none; }
    #kaveepImageMasterMascot.isSpeaking .kaveepImageMasterSpeech { opacity:1; transform:translateY(0) scale(1); }
    .kaveepLivingPet canvas,
    .kaveepLivingPet img,
    .kaveepLivingPet model-viewer { width: 100%; height: 100%; display: block; object-fit: contain; }
    .kaveepLivingPet model-viewer {
      --poster-color: transparent;
      position: absolute;
      inset: 0;
      background: transparent;
      pointer-events: none;
    }
    .kaveepLivingPet canvas { position: absolute; inset: 0; z-index: 2; }
    .kaveepLivingPet img { position: relative; z-index: 1; }
    .kaveepLivingPet.is3dModelReady model-viewer + img { display: none; }
    .kaveepCosmeticScarf { display:none; position:absolute; z-index:3; left:26%; top:46%; width:48%; height:8%; border:1px solid rgba(255,255,255,.92); border-radius:52% 52% 46% 46%; background:linear-gradient(155deg,#a9192a 0 34%,#fff7f5 35% 48%,#dc3042 49% 100%); box-shadow:0 1px 3px rgba(80,20,25,.3); transform:rotate(-2deg); pointer-events:none; }
    .kaveepCosmeticScarf::after { content:''; position:absolute; z-index:-1; right:13%; top:55%; width:12px; height:26px; border:1px solid rgba(255,255,255,.85); border-radius:2px 3px 7px 7px; background:linear-gradient(100deg,#be2032 0 37%,#fff8f5 38% 51%,#dc3042 52%); transform:rotate(14deg); transform-origin:top; }
    #kaveepLivingMascot.isWalking .kaveepCosmeticScarf::after { animation:kaveepScarfFlutter .55s ease-in-out infinite alternate; }
    @keyframes kaveepScarfFlutter { to { transform:rotate(25deg) translateX(2px); } }
    .kaveepCosmeticAwards { display:none; position:absolute; z-index:7; left:50%; top:7%; transform:translateX(-50%); font-size:17px; letter-spacing:-5px; white-space:nowrap; filter:drop-shadow(0 2px 2px rgba(80,60,20,.25)); pointer-events:none; }
    #kaveepLivingMascot.hasScarf .kaveepCosmeticScarf { display:block; }
    #kaveepLivingMascot.hasAwards .kaveepCosmeticAwards { display:block; }
    #kaveepLivingMascot.isWalking .kaveepLivingPet { transform: scaleX(var(--kaveep-facing, 1)); }
    #kaveepLivingMascot.isThinking .kaveepLivingPet { filter: saturate(.88) brightness(.96); }
    #kaveepLivingMascot.isHappy .kaveepLivingPet { filter: saturate(1.15) brightness(1.06); }
    #kaveepLivingMascot.isDragging { cursor: grabbing; transition: none !important; }
    .kaveepHomePanel {
      position: fixed;
      z-index: 46;
      box-sizing: border-box;
      width: min(252px, calc(100vw - 20px));
      max-height: calc(100vh - 20px);
      padding: 12px;
      border: 1px solid #aee2f6;
      border-radius: 12px;
      background: rgba(255,255,255,.98);
      box-shadow: 0 8px 22px rgba(20,116,160,.16);
      color: #145e82;
      font: 600 12px/1.35 system-ui, sans-serif;
      overflow-x: hidden;
      overflow-y: auto;
      opacity: 0;
      visibility: hidden;
      transform: translateY(5px) scale(.97);
      transition: opacity .16s ease, transform .16s ease, visibility .16s;
    }
    .kaveepHomePanel.isOpen { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
    .kaveepHomeHeader { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; }
    .kaveepHomeHeader strong { display:block; color:#0f668c; font-size:15px; letter-spacing:-.01em; }
    .kaveepHomeHeader small { display:block; max-width:165px; overflow:hidden; color:#5b8396; font-size:10px; font-weight:600; text-overflow:ellipsis; white-space:nowrap; }
    .kaveepHomeHeader > span { flex:0 0 auto; padding:4px 7px; border-radius:999px; background:#e9f8fe; color:#08779e; font-size:11px; font-weight:800; }
    .kaveepHomeStats { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-bottom:9px; color:#28779b; font-size:11px; }
    .kaveepHomeStats span { padding:5px 7px; border-radius:7px; background:#f3fbff; }
    .kaveepExp { margin:0 0 10px; padding:7px 8px; border:1px solid #c6edf9; border-radius:9px; background:#f7fdff; }
    .kaveepExpMeta { display:flex; justify-content:space-between; gap:6px; margin-bottom:5px; color:#247292; font-size:10px; white-space:nowrap; overflow:hidden; }
    .kaveepExpMeta span { overflow: hidden; text-overflow: ellipsis; }
    .kaveepExpTrack { height:7px; overflow:hidden; border-radius:999px; background:#dff4fb; }
    .kaveepExpFill { width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #32bce8, #8bd5ff); transition: width .35s ease; }
    #kaveepProgress { display:block; padding-top:3px; border-top:1px solid #e2f5fc; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .kaveepQuest { margin:0 0 6px; padding:6px 7px; border-radius:7px; background:#f3fbff; color:#247292; font-size:11px; line-height:1.35; overflow-wrap:anywhere; }
    .kaveepCosmetics { box-sizing:border-box; width:100%; height:32px; margin:0 0 6px; padding:4px 7px; border:1px solid #b7e7f8; border-radius:7px; background:#fff; color:#17698f; font:600 11px system-ui,sans-serif; min-width:0; }
    .kaveepHomeActions { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
    .kaveepHomeActions button {
      min-width: 0;
      min-height:34px;
      padding:5px 4px;
      border: 1px solid #b7e7f8;
      border-radius: 7px;
      background: #eefaff;
      color: #17698f;
      font:700 11px/1.1 system-ui,sans-serif;
      cursor: pointer;
    }
    .kaveepHomeActions button:hover { background: #d9f5ff; }
    .kaveepHomeActions button:disabled { cursor: not-allowed; opacity: .52; }
    .kaveepPrimaryActions { margin-bottom:6px; }
    .kaveepPrimaryActions button:first-child { grid-column:span 2; background:#087ba4; color:#fff; border-color:#087ba4; }
    .kaveepCareActions { margin-bottom:8px; }
    .kaveepHomeDetails { margin:8px 0; border-top:1px solid #e0f2f8; }
    .kaveepHomeDetails summary { padding:8px 1px; color:#3e7891; font-size:11px; font-weight:800; cursor:pointer; list-style:none; }
    .kaveepHomeDetails summary::-webkit-details-marker { display:none; }
    .kaveepHomeDetails summary::after { content:'⌄'; float:right; color:#62a4bc; transition:transform .15s ease; }
    .kaveepHomeDetails[open] summary::after { transform:rotate(180deg); }
    .kaveepHomeDetails > .kaveepHomeStats { display:block; margin:0 0 6px; font-size:10px; }
    .kaveepHomeDetails > .kaveepHomeStats span { padding:0; background:transparent; }
    .kaveepAdvancedDetails { margin-bottom:0; }
    .kaveepAvatarSettings { margin:7px 0; padding:0 0 2px; border-top:1px dashed #cdebf6; }
    .kaveepAvatarSettings summary { padding:7px 1px; color:#3e7891; font-size:11px; font-weight:800; cursor:pointer; list-style:none; }
    .kaveepAvatarSettings summary::-webkit-details-marker { display:none; }
    .kaveepAvatarSettings input[type="range"] { display:block; width:100%; margin:5px 0 1px; accent-color:#147da4; }
    .kaveepAvatarSettings output { float:right; color:#3382a2; font-size:10px; }
    .kaveepMiniFriendsSettings { border-top:1px dashed #cdebf6; }
    .kaveepMiniFriendsSettings .kaveepQuest { margin:6px 0; }
    .kaveepMiniFriendsSettings select { display:block; width:100%; margin-top:4px; }
    .kaveepMiniFriendsCare { display:grid; gap:7px; margin:8px 0 10px; }
    .kaveepMiniFriendCareCard { padding:8px; border:1px solid #cdebf6; border-radius:10px; background:linear-gradient(135deg,#f9fdff,#edfaff); }
    .kaveepMiniFriendCareTitle { display:flex; justify-content:space-between; gap:8px; font-size:12px; color:#17688d; }
    .kaveepMiniFriendCareBars { display:flex; gap:5px; margin:6px 0; font-size:11px; color:#39738e; }
    .kaveepMiniFriendCareBars span { flex:1; white-space:nowrap; }
    .kaveepMiniFriendCareActions { display:flex; flex-wrap:wrap; gap:5px; }
    .kaveepMiniFriendCareActions button { padding:4px 7px; border:1px solid #a8dff6; border-radius:7px; background:#fff; color:#17688d; font:700 11px/1.2 system-ui,sans-serif; cursor:pointer; }
    .kaveepMiniFriendCareActions button:hover { background:#dff5ff; }
    .kaveepMiniFriendCareActions select { max-width:142px; padding:4px; border:1px solid #a8dff6; border-radius:7px; background:#fff; color:#17688d; font:700 11px/1.2 system-ui,sans-serif; }
    .kaveepMiniFriendEvent, .kaveepMiniFriendRare { padding:7px 8px; border-radius:9px; font-size:11px; color:#765000; background:#fff7cc; border:1px solid #f2dc83; }
    .kaveepMiniFriendEvent small { display:block; margin:3px 0 0 18px; color:#8b6a20; }
    .kaveepMiniFriendRare { color:#643c8a; background:#f7edff; border-color:#dfbef9; }
    .kaveepMiniFriendItemActions { display:flex; flex-wrap:wrap; align-items:center; gap:5px; margin-top:7px; }
    .kaveepMiniFriendItemActions small { color:#7d668d; font-weight:700; }
    .kaveepMiniFriendItemActions button { padding:3px 6px; border:1px solid #d9b8ef; border-radius:7px; background:#fff; color:#6a3b8d; font:700 10px/1.2 system-ui,sans-serif; cursor:pointer; }
    .kaveepHomeSettings { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; margin-top:8px; }
    .kaveepHomeSettings button { min-width:0; min-height:30px; border:1px solid #d7eff8; border-radius:7px; background:#f8fdff; color:#3484a7; font:700 10px/1.15 system-ui,sans-serif; cursor:pointer; padding:5px 3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .kaveepHomeSettings button:hover { background: #d9f5ff; }
    .kaveepDialog {
      position: fixed; z-index: 80; inset: 0; display: none; place-items: center;
      padding: 16px; background: rgba(10, 57, 77, .35);
    }
    .kaveepDialog.isOpen { display: grid; }
    .kaveepDialogCard {
      box-sizing: border-box; width: min(330px, 100%); max-height: min(520px, calc(100vh - 32px)); overflow: auto;
      padding: 13px; border: 1px solid #aee2f6; border-radius: 13px; background: #fff; color: #145e82;
      box-shadow: 0 16px 38px rgba(10, 73, 103, .28); font: 700 12px/1.4 system-ui, sans-serif;
    }
    .kaveepDialogHeader { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 9px; }
    .kaveepDialogClose { border: 0; border-radius: 7px; padding: 4px 8px; background: #eaf8fe; color: #17698f; font: inherit; cursor: pointer; }
    .kaveepRankList, .kaveepAppearanceList { display: grid; gap: 6px; }
    .kaveepArcadeHero { display:grid; grid-template-columns:1fr auto; gap:10px; padding:14px; border-radius:14px; color:#fff; background:linear-gradient(135deg,#086b98,#14a3bd 58%,#69cfca); box-shadow:0 10px 22px rgba(12,119,157,.22); }
    .kaveepArcadeHero span { color:#d8fbff; font-size:10px; letter-spacing:.08em; } .kaveepArcadeHero h3 { margin:3px 0; font-size:16px; } .kaveepArcadeHero p { margin:0; max-width:190px; color:#e9ffff; font-size:10px; font-weight:600; }
    .kaveepArcadeStats { display:grid; grid-template-columns:repeat(3,1fr); align-content:center; gap:5px; } .kaveepArcadeStats b { display:grid; min-width:36px; padding:5px 2px; border-radius:8px; text-align:center; background:rgba(255,255,255,.18); color:#defaff; font-size:9px; } .kaveepArcadeStats strong { display:block; color:#fff; font-size:16px; }
    .kaveepArcadeSection { margin-top:12px; } .kaveepArcadeSection h4 { display:flex; justify-content:space-between; align-items:baseline; margin:0 0 6px; color:#17698f; font-size:12px; } .kaveepArcadeSection h4 small { color:#5995a9; font-size:9px; font-weight:700; }
    .kaveepArcadeGameGrid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }
    .kaveepArcadeGame { display:grid; grid-template-columns:30px 1fr; position:relative; min-height:73px; padding:8px; border:1px solid #b9e7f7; border-radius:11px; text-align:left; color:#17698f; background:linear-gradient(145deg,#faffff,#e8f8ff); cursor:pointer; font:700 10px/1.25 system-ui,sans-serif; transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease; }
    .kaveepArcadeGame:hover { transform:translateY(-1px); box-shadow:0 6px 12px rgba(14,113,151,.14); } .kaveepArcadeGame.isSelected { border-color:#ffbe42; background:linear-gradient(145deg,#fffdf1,#e8fbff); box-shadow:0 0 0 2px rgba(255,190,66,.3); }
    .kaveepArcadeGameIcon { display:grid; place-items:start center; font-size:22px; } .kaveepArcadeGame strong,.kaveepArcadeGame small { display:block; } .kaveepArcadeGame small { margin-top:3px; color:#5a93a7; font-size:9px; font-weight:600; } .kaveepArcadeGame b { position:absolute; right:6px; bottom:5px; color:#2080a0; font-size:8px; } .kaveepArcadeGame.isSelected b { color:#b36f00; }
    .kaveepArcadeOpponentList,.kaveepArcadeMatchList { display:grid; gap:7px; }.kaveepArcadeOpponent { display:grid; grid-template-columns:35px 1fr auto; align-items:center; gap:7px; padding:8px; border:1px solid #d4eef8; border-radius:10px; background:#f8fdff; }.kaveepArcadeAvatar { display:grid; place-items:center; width:34px; height:34px; border-radius:50%; background:#e1f6ff; font-size:18px; }.kaveepArcadeOpponent strong,.kaveepArcadeOpponent small { display:block; }.kaveepArcadeOpponent small { margin-top:2px; color:#5792a7; font-size:9px; }.kaveepArcadeAction,.kaveepArcadeAccept { border:0; border-radius:8px; padding:7px 8px; color:#fff; background:#147da4; font:800 10px system-ui,sans-serif; cursor:pointer; box-shadow:0 3px 7px rgba(12,107,147,.2); }.kaveepArcadeAction:hover,.kaveepArcadeAccept:hover { background:#0c6b8f; }
    .kaveepArcadeDifficulties { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }.kaveepArcadeDifficulty { min-height:32px; border:1px solid #b9e7f7; border-radius:8px; color:#277b99; background:#f5fcff; font:800 10px system-ui,sans-serif; cursor:pointer; }.kaveepArcadeDifficulty.isSelected { color:#8b5900; border-color:#f1bd4d; background:#fff3ce; box-shadow:0 0 0 2px rgba(244,184,63,.19); }
    .kaveepArcadeMatchCard { padding:10px; border:1px solid #b7e6f6; border-radius:12px; background:linear-gradient(145deg,#fff,#ebfaff); }.kaveepArcadeMatchCard.isPending { border-color:#f1cd83; background:linear-gradient(145deg,#fffdf6,#fff7df); }.kaveepArcadeMatchCard.isMyTurn { border-color:#45bf92; background:linear-gradient(145deg,#f6fffa,#e1fff0); animation:kaveepArcadeMyTurnPulse 1.25s ease-in-out infinite; }.kaveepArcadeMatchCard.isOpponentTurn { border-color:#9fc6ee; background:linear-gradient(145deg,#fbfdff,#e9f3ff); }.kaveepArcadeMatchTop { display:grid; grid-template-columns:32px 1fr auto; align-items:center; gap:7px; }.kaveepArcadeMatchIcon { display:grid; place-items:center; width:30px; height:30px; border-radius:9px; background:#d9f5ff; font-size:17px; }.kaveepArcadeMatchTop strong,.kaveepArcadeMatchTop small { display:block; }.kaveepArcadeMatchTop small { color:#568ea2; font-size:9px; }.kaveepArcadeTimer,.kaveepArcadeLive,.kaveepArcadeTurn { padding:4px 6px; border-radius:999px; color:#a15b00; background:#fff0bf; font-size:9px; }.kaveepArcadeLive { color:#0d8967; background:#d8f8e9; }.kaveepArcadeTurn.isMine { color:#087351; background:#bdf8db; animation:kaveepArcadeTurnFlash .9s ease-in-out infinite alternate; }.kaveepArcadeTurn.isOpponent { color:#386aa3; background:#dcecff; }.kaveepArcadeVs { display:flex; align-items:center; justify-content:space-between; gap:6px; margin:9px 0 2px; color:#267b99; font-size:11px; }.kaveepArcadeVs span { max-width:110px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.kaveepArcadeVs i { padding:2px 5px; border-radius:5px; color:#fff; background:#3195b5; font-size:8px; font-style:normal; }.kaveepArcadePendingActions { display:grid; grid-template-columns:1fr 80px; gap:6px; margin-top:9px; }.kaveepArcadeAccept { width:100%; margin-top:0; background:#eb9d24; }.kaveepArcadeAccept:hover { background:#d7890f; }.kaveepArcadeDecline { border:1px solid #f1b9b9; border-radius:8px; color:#aa4343; background:#fff5f5; font:800 10px system-ui,sans-serif; cursor:pointer; } @keyframes kaveepArcadeMyTurnPulse { 50% { transform:translateY(-1px); box-shadow:0 0 0 4px rgba(65,191,146,.15),0 8px 18px rgba(16,145,97,.18); } } @keyframes kaveepArcadeTurnFlash { to { transform:scale(1.04); filter:brightness(1.05); } }
    .kaveepArcadeBoard { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-top:8px; }.kaveepArcadeBoard button,.kaveepArcadeRpsChoices button,.kaveepArcadeNumberChoices button { border:1px solid #b9e7f7; border-radius:9px; color:#17698f; background:#fff; font:800 13px system-ui,sans-serif; cursor:pointer; transition:transform .12s ease,background .12s ease; }.kaveepArcadeBoard button:not(:disabled):hover,.kaveepArcadeRpsChoices button:hover,.kaveepArcadeNumberChoices button:hover { transform:translateY(-1px); background:#e1f8ff; }.kaveepArcadeBoard button:disabled { cursor:default; opacity:1; }.kaveepArcadeGrid button { min-height:55px; font-size:26px; }.kaveepArcadeGrid button:disabled { color:#0d87a8; background:#edfaff; }.kaveepArcadeMemoryGrid button { min-height:47px; color:#fff; background:linear-gradient(145deg,#268bae,#0e6389); font-size:19px; }.kaveepArcadeMemoryGrid button:disabled { color:#187b98; background:#dff5fa; }.kaveepArcadeRpsChoices { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-top:8px; }.kaveepArcadeRpsChoices button { display:grid; gap:2px; min-height:62px; padding:5px; font-size:9px; }.kaveepArcadeRpsChoices button span { font-size:25px; }.kaveepArcadeNumberChoices { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-top:8px; }.kaveepArcadeNumberChoices button { min-height:35px; }.kaveepArcadeWaiting { margin:9px 0 0; padding:7px; border-radius:7px; color:#568ea2; background:#f2fbff; font-size:10px; text-align:center; }.kaveepArcadeEmpty { padding:14px; border:1px dashed #b9e4f4; border-radius:10px; color:#5b93a7; background:#fbfeff; text-align:center; font-size:10px; }.kaveepArcadeEmpty small { font-size:9px; }
    .kaveepArcadeWinnerEffect { position:fixed; inset:0; z-index:140; display:grid; place-items:center; padding:24px; pointer-events:none; opacity:0; visibility:hidden; transition:opacity .2s ease,visibility .2s; }
    .kaveepArcadeWinnerEffect.isVisible { display:grid !important; opacity:1 !important; visibility:visible !important; }
    .kaveepArcadeChallengeEffect { position:fixed; inset:0; z-index:141; display:grid; place-items:center; padding:24px; pointer-events:none; opacity:0; visibility:hidden; transition:opacity .18s ease,visibility .18s; background:radial-gradient(circle,rgba(255,215,80,.28),transparent 58%); }
    .kaveepArcadeChallengeEffect.isVisible { opacity:1; visibility:visible; }
    .kaveepArcadeChallengeCard { width:min(310px,calc(100vw - 48px)); padding:24px 20px; border:2px solid #fff2a9; border-radius:24px; color:#fff; text-align:center; background:linear-gradient(145deg,#7927a8,#b437a6 56%,#ef6a73); box-shadow:0 24px 60px rgba(92,25,111,.48); animation:kaveepArcadeChallengePop 5.8s ease both; }
    .kaveepArcadeChallengeCard span { display:block; font-size:58px; animation:kaveepArcadeChallengePulse .72s ease-in-out infinite alternate; }.kaveepArcadeChallengeCard strong,.kaveepArcadeChallengeCard small { display:block; }.kaveepArcadeChallengeCard strong { margin-top:4px; font-size:25px; }.kaveepArcadeChallengeCard small { margin-top:6px; color:#fff1d6; font-size:13px; }
    .kaveepArcadeWinnerCard { width:min(280px,calc(100vw - 48px)); padding:22px 18px; border:2px solid #fff0ad; border-radius:22px; color:#fff; text-align:center; background:linear-gradient(145deg,#0a719c,#11a2bb 62%,#62cfbf); box-shadow:0 22px 50px rgba(8,80,112,.42); transform:scale(.76) translateY(18px); }
    .kaveepArcadeWinnerEffect.isVisible .kaveepArcadeWinnerCard { animation:kaveepArcadeWinnerPop 5.4s ease both; }
    .kaveepArcadeWinnerCard.isLoss { border-color:#ffd0cf; background:linear-gradient(145deg,#99515a,#cf6c72 62%,#ef9a83); }
    .kaveepArcadeWinnerCard.isDraw { border-color:#d9ecff; background:linear-gradient(145deg,#407a99,#559cbd 62%,#86c5d5); }
    .kaveepArcadeWinnerIcon { display:block; margin-bottom:5px; font-size:52px; filter:drop-shadow(0 4px 3px rgba(0,0,0,.17)); animation:kaveepArcadeWinnerSpin .7s ease-out both; }
    .kaveepArcadeWinnerCard strong,.kaveepArcadeWinnerCard small { display:block; }.kaveepArcadeWinnerCard strong { font-size:25px; letter-spacing:.01em; }.kaveepArcadeWinnerCard small { margin-top:5px; color:#edffff; font-size:12px; }
    @keyframes kaveepArcadeWinnerPop { 0% { transform:scale(.76) translateY(18px); opacity:0; } 10%,82% { transform:scale(1) translateY(0); opacity:1; } 100% { transform:scale(.96) translateY(-8px); opacity:0; } }
    @keyframes kaveepArcadeWinnerSpin { from { transform:rotate(-22deg) scale(.45); } to { transform:rotate(0) scale(1); } }
    @keyframes kaveepArcadeChallengePop { 0% { transform:scale(.7) translateY(22px); opacity:0; } 10%,82% { transform:scale(1) translateY(0); opacity:1; } 100% { transform:scale(.96) translateY(-8px); opacity:0; } }
    @keyframes kaveepArcadeChallengePulse { from { transform:scale(.92) rotate(-6deg); } to { transform:scale(1.08) rotate(6deg); } }
    @media (prefers-reduced-motion: reduce) { .kaveepArcadeWinnerEffect.isVisible .kaveepArcadeWinnerCard,.kaveepArcadeWinnerIcon,.kaveepArcadeChallengeCard,.kaveepArcadeChallengeCard span { animation:none; transform:none; } }
    .kaveepRankRow, .kaveepAppearanceRow { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 7px; padding: 7px; border-radius: 8px; background: #f3fbff; }
    .kaveepRankRow.isMine { outline: 2px solid #83d7f4; background: #e7f8ff; }
    .kaveepAppearanceRow { grid-template-columns: 44px 1fr; }
    .kaveepRankNumber { color: #5b93aa; text-align: center; }
    .kaveepRankName { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .kaveepRankMeta, .kaveepAppearanceMeta { color: #4d88a1; font-size: 10px; }
    .kaveepDialogHint { margin: 8px 0 0; color: #4d88a1; font-size: 10px; }
    .kaveepMemoryAdd { display: grid; grid-template-columns: 1fr auto; gap: 6px; margin-bottom: 8px; }
    .kaveepMemoryAdd input { min-width: 0; padding: 7px; border: 1px solid #b7e7f8; border-radius: 7px; color: #145e82; font: 600 11px system-ui, sans-serif; }
    .kaveepMemoryAdd button, .kaveepMemoryRemove { border: 0; border-radius: 7px; padding: 6px 9px; background: #dff4fb; color: #17698f; font: 700 10px system-ui, sans-serif; cursor: pointer; }
    .kaveepComposeCard { width: min(440px, 100%); }
    .kaveepComposeForm, .kaveepComposeField { display: grid; gap: 7px; }
    .kaveepComposeField { margin: 10px 0; color: #17698f; font-size: 11px; }
    .kaveepComposeField textarea, .kaveepComposeField input[type="file"] { box-sizing: border-box; width: 100%; border: 1px solid #b7e7f8; border-radius: 8px; background: #fbfeff; color: #145e82; font: 600 12px/1.45 system-ui, sans-serif; padding: 8px; }
    .kaveepComposeField select { box-sizing: border-box; width: 100%; min-height: 36px; border: 1px solid #b7e7f8; border-radius: 8px; background: #fbfeff; color: #145e82; font: 600 12px/1.45 system-ui, sans-serif; padding: 8px; }
    .kaveepComposePosterOptions { display:grid; grid-template-columns:minmax(0,1fr) 74px; gap:10px; align-items:end; }
    .kaveepComposePosterOptions select, .kaveepComposePosterOptions input[type="color"] { box-sizing:border-box; width:100%; min-height:36px; border:1px solid #b7e7f8; border-radius:8px; background:#fbfeff; padding:4px; }
    .kaveepComposeField textarea { resize: vertical; min-height: 82px; }
    .kaveepComposeField input[type="file"] { cursor: pointer; }
    .kaveepComposeError { margin: 0; border: 1px solid #ffc2bd; border-radius: 8px; background: #fff2f1; color: #b34139; padding: 7px 8px; font-size: 11px; }
    .kaveepComposeActions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
    .kaveepComposeActions button { min-height: 34px; }
    #kaveepBallGame {
      position: fixed;
      z-index: 44;
      width: 38px;
      height: 38px;
      border: 0;
      border-radius: 50% !important;
      background: radial-gradient(circle at 30% 28%, #fff 0 7%, #ffd75e 8% 22%, #f59b25 23% 66%, #df651a 67%);
      box-shadow: 0 5px 12px rgba(187,94,18,.35);
      cursor: pointer;
      display: none;
      touch-action: manipulation;
    }
    #kaveepBallGame.isActive { display: block; }
    #kaveepTeamReward {
      position: fixed;
      right: 18px;
      top: 78px;
      z-index: 42;
      display: none;
      width: 44px;
      height: 44px;
      place-items: center;
      border-radius: 50%;
      background: rgba(255,255,255,.82);
      box-shadow: 0 5px 14px rgba(26,130,173,.18);
      font-size: 26px;
      border: 0;
      padding: 0;
      min-height: 0;
      cursor: pointer;
      animation: kaveepTeamGlow 2.4s ease-in-out infinite;
    }
    #kaveepTeamReward.isUnlocked { display: grid; }
    @keyframes kaveepTeamGlow { 50% { transform: translateY(-3px) scale(1.08); box-shadow: 0 8px 20px rgba(255,177,35,.35); } }
    .kaveepNook {
      position: fixed;
      top: 72px;
      right: 16px;
      z-index: 47;
      width: min(290px, calc(100vw - 32px));
      max-height: calc(100vh - 92px);
      overflow: auto;
      padding: 14px;
      border: 1px solid #aee2f6;
      border-radius: 18px;
      background: linear-gradient(160deg, #faffff, #e7f8ff);
      box-shadow: 0 16px 40px rgba(20,116,160,.22);
      color: #145e82;
      opacity: 0;
      visibility: hidden;
      transform: translateX(12px);
      transition: opacity .18s ease, transform .18s ease, visibility .18s;
    }
    .kaveepNook.isOpen { opacity: 1; visibility: visible; transform: translateX(0); }
    .kaveepNookHeader { display:flex; align-items:center; justify-content:space-between; gap:8px; font:800 14px system-ui,sans-serif; }
    .kaveepNookClose { border:0; border-radius:8px; background:#dff5ff; color:#17698f; cursor:pointer; font-weight:800; padding:4px 8px; }
    .kaveepNookRoom { position:relative; height:145px; margin:10px 0; overflow:hidden; border-radius:14px; background:linear-gradient(#bceeff 0 69%, #d5f5cf 70%); }
    .kaveepNookRoom::after { content:''; position:absolute; inset:auto 0 0; height:38px; background:repeating-linear-gradient(90deg,#c7ebbc 0 24px,#d9f5cd 24px 48px); }
    .kaveepNookPet { position:absolute; left:42%; bottom:20px; z-index:2; width:68px; height:92px; object-fit:contain; transition:left .25s ease, right .25s ease, bottom .25s ease, transform .18s ease; }
    .kaveepNookItem { position:absolute; z-index:3; font-size:27px; filter:drop-shadow(0 3px 2px rgba(20,100,80,.18)); }
    .kaveepNookItem.ball { left:12%; bottom:26px; } .kaveepNookItem.star { right:13%; top:17px; } .kaveepNookItem.bed { right:12%; bottom:19px; }
    .kaveepNookSleepingScene { display:none; position:absolute; inset:0; z-index:5; width:100%; height:100%; object-fit:cover; object-position:center; }
    .kaveepNookWakeZone { display:none; position:absolute; inset:0; z-index:6; cursor:grab; touch-action:none; }
    .kaveepNookWakeZone:active { cursor:grabbing; }
    .kaveepNookWakeZone:focus-visible { outline:2px solid #fff; outline-offset:-4px; }
    .kaveepNook.isResting .kaveepNookPet, .kaveepNook.isResting .kaveepNookItem { display:none; }
    .kaveepNook.isResting .kaveepNookSleepingScene, .kaveepNook.isResting .kaveepNookWakeZone { display:block; }
    .kaveepNookSleepHint { display:none; position:absolute; left:10px; bottom:9px; z-index:7; padding:3px 6px; border-radius:8px; background:rgba(255,255,255,.9); color:#277799; font:800 11px system-ui,sans-serif; pointer-events:none; }
    .kaveepNook.isResting .kaveepNookSleepHint { display:block; animation:kaveepSleepFloat 1.8s ease-in-out infinite; }
    @keyframes kaveepSleepFloat { 50% { transform:translateY(-5px); opacity:.65; } }
    .kaveepNookCollection { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
    .kaveepNookCollection div { padding:7px; border-radius:9px; background:#fff; font:700 11px/1.2 system-ui,sans-serif; color:#28779b; }
    .kaveepNookCollection .locked { opacity:.45; }
    @keyframes kaveepPetIdle { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-5px) rotate(2deg); } }
    @keyframes kaveepPetWalk { from { transform: translateY(1px) rotate(-7deg) scaleX(1); } to { transform: translateY(-8px) rotate(7deg) scaleX(.98); } }
    @keyframes kaveepPetThinking { 0%, 100% { transform: scale(1) rotate(-3deg); } 50% { transform: scale(1.08) rotate(3deg); } }
    @keyframes kaveepPetHappy { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-13px) rotate(8deg); } }
    @media (max-width: 700px) {
      #kaveepLivingMascot { width: 68px; height: 88px; bottom: 72px; }
      #kaveepImageMasterMascot { width:52px; height:58px; right:10px; bottom:72px; }
      .kaveepMiniFriendDuck { right:88px; bottom:132px; }
      .kaveepMiniFriendPup { right:20px; bottom:70px; }
      .kaveepMiniFriendBear { right:196px; bottom:48px; }
      .kaveepImageMasterPet { width:48px; height:48px; }
      .kaveepImageMasterSpeech { right:48px; bottom:52px; font-size:11px; }
      .kaveepLivingPet { width: 64px; height: 82px; }
      .kaveepLivingSpeech { right: 46px; bottom: 48px; font-size: 11px; }
    }

    /* PLCHAT_MOBILE_USABILITY_V1: keep every feature reachable without wasting chat space. */
    @media (max-width: 760px) {
      html { -webkit-text-size-adjust: 100%; }
      body { min-width: 0; font-size: 12px !important; line-height: 1.42; }

      /* Safari must never retain the desktop three-column grid on a phone. */
      .app {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        height: 100% !important;
        grid-template-columns: minmax(0, 1fr) !important;
      }
      .mainRail, #infoPane { display: none !important; }
      #chatListPane, #chatPanel, #moduleView {
        grid-column: 1 !important;
        grid-row: 1 !important;
        width: 100% !important;
        min-width: 0 !important;
        height: 100% !important;
      }
      #chatListPane.mobileHidden, #chatPanel.mobileHidden, #moduleView.mobileHidden {
        display: none !important;
      }
      #chatListPane:not(.mobileHidden), #chatPanel:not(.mobileHidden), #moduleView:not(.mobileHidden) {
        width: 100% !important;
      }

      /* Compact, calm mobile typography.  Text remains at a readable 12px
         baseline; headings provide hierarchy without the desktop-scale jump.
         Inputs keep a 16px font to prevent iOS from zooming on focus. */
      .topbar .brand h1 { font-size: 14px !important; letter-spacing: -.2px; }
      .paneTitle h2, .moduleHead h2, .chatTitle h2 { font-size: 13px !important; letter-spacing: -.15px; }
      .hint, small, .roomText small, .userMain small, .bottomNavLabel { font-size: 9px !important; line-height: 1.3; }
      .roomText strong, .userMain strong, .panel strong, .postCard strong { font-size: 10.5px !important; }
      .bubble, .moduleBody p, .moduleBody li, .moduleBody label, .moduleBody td { font-size: 12px !important; line-height: 1.45; }
      .messageMeta, .messageTime, .messageActions button { font-size: 9px !important; }
      .moduleBody { font-size: 12px !important; }
      .moduleBody h2 { font-size: 15px !important; line-height: 1.25; }
      .moduleBody h3 { font-size: 12px !important; line-height: 1.3; }
      .moduleBody h4 { font-size: 11px !important; line-height: 1.32; }
      button { font-size: 10.5px !important; }
      input, textarea, select { font-size: 16px; }
      .composerIconButton { font-size: 16px; }

      .chatHead {
        min-width: 0;
        margin: 0 !important;
        border-radius: 0 !important;
      }
      .chatTitle { min-width: 0; }
      .headActions {
        min-width: 0;
        max-width: 38vw;
        display: flex;
        gap: 4px;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
      }
      .headActions::-webkit-scrollbar { display: none; }
      .headActions button { flex: 0 0 auto; }

      /* Attachment, AI, voice, emoji and sticker tools stay available in one swipeable row. */
      .composerTools {
        flex-wrap: nowrap !important;
        min-width: 0;
        overflow-x: auto;
        overflow-y: hidden;
        padding-bottom: 2px;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
      }
      .composerTools::-webkit-scrollbar { display: none; }
      .composerTools > * { flex: 0 0 auto; }
      .composerTools .composerIconButton { width: 42px; height: 42px; min-height: 42px; }
      .composerToolSpacer { display: none; }
      .composerTools .fileName {
        max-width: 120px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .attachMenu {
        position: fixed;
        right: max(10px, var(--safe-right));
        left: max(10px, var(--safe-left));
        bottom: calc(128px + var(--safe-bottom));
        max-height: min(58dvh, 420px);
        overflow-y: auto;
      }
      .emojiPicker, .stickerPicker, .mentionSuggestions {
        max-width: calc(100vw - max(20px, var(--safe-left) + var(--safe-right)));
        max-height: min(48dvh, 360px);
        overflow: auto;
      }
      .stickerPicker { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }

      /* Long file names, tables, and media never push the page wider than the phone. */
      .moduleBody, .chatListPane, .messages, .bubble, .attachment, .fileCard,
      .postCard, .panel, .modalCard, .actionDetailsPanel { min-width: 0; max-width: 100%; }
      .attachment, .fileCard, .bubble, .messageText, .hint { overflow-wrap: anywhere; }
      .tableWrap, .dataTableWrap, .activityTableWrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
      table { max-width: 100%; }
      pre { max-width: 100%; overflow-x: auto; }
      .mediaGrid, .mediaCenterGrid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
      .imageAttachment img, .imageAlbum img, .postCard img { max-width: 100%; height: auto; }

      .bottomNav {
        display: flex !important;
        gap: 4px;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
      }
      .bottomNav::-webkit-scrollbar { display: none; }
      .bottomNav button { flex: 0 0 58px; min-height: 56px; font-size: 10px; }
      .bottomNavIcon { font-size: 18px; line-height: 1; }
      .notificationDropdown {
        position: fixed;
        top: calc(60px + var(--safe-top));
        right: max(10px, var(--safe-right));
        left: max(10px, var(--safe-left));
        max-height: min(65dvh, 560px);
        overflow-y: auto;
      }

      /* Mobile is a compact view of the exact same workspace.  Keep primary
         destinations in reach, while the remaining tools stay one horizontal
         swipe away instead of consuming a permanent second toolbar. */
      .bottomNav {
        scroll-snap-type: x proximity;
        scroll-padding-inline: max(6px, var(--safe-left));
      }
      .bottomNav button {
        scroll-snap-align: start;
        border-radius: 10px;
        -webkit-tap-highlight-color: transparent;
      }
      .bottomNav button:active { transform: scale(.96); }
      .chatHead, .composer, .moduleHead { padding-inline: max(10px, var(--safe-left)) max(10px, var(--safe-right)); }
      .moduleBody { padding-bottom: calc(24px + var(--safe-bottom)); }
    }
    /* Final download-action contrast guard: these links sit beside the detail action. */
    .attachmentActions > a.primaryDownload,
    .fileToolbar > a.primaryDownload,
    a.primaryDownload {
      display: inline-flex !important;
      background-color: #0f6286 !important;
      background-image: none !important;
      border: 1px solid #0f6286 !important;
      color: #ffffff !important;
      opacity: 1 !important;
    }

    .attachmentActions > a.primaryDownload:hover,
    .attachmentActions > a.primaryDownload:focus-visible,
    .fileToolbar > a.primaryDownload:hover,
    .fileToolbar > a.primaryDownload:focus-visible,
    a.primaryDownload:hover,
    a.primaryDownload:focus-visible {
      background-color: #084966 !important;
      border-color: #084966 !important;
      color: #ffffff !important;
    }

    /* Slash-command menu: preserve high contrast regardless of the active theme. */
    #commandSuggestions .commandOption,
    #commandSuggestions button.commandOption {
      background: #083b5c !important;
      border-color: #0f6286 !important;
      color: #ffffff !important;
    }

    #commandSuggestions .commandOption *,
    #commandSuggestions .commandOption strong,
    #commandSuggestions .commandOption .hint {
      color: #ffffff !important;
      opacity: 1 !important;
    }

    #commandSuggestions .commandOption:hover,
    #commandSuggestions .commandOption:focus-visible,
    #commandSuggestions .commandOption.isActive {
      background: #0f6286 !important;
      border-color: #7bdeef !important;
      color: #ffffff !important;
    }

    /* Profile feeling badges must not inherit the pale global brand token. */
    .profilePostFeeling,
    .postCard .profilePostFeeling {
      background: #dff3ff !important;
      border: 1px solid #8ed5f2 !important;
      color: #084966 !important;
      -webkit-text-fill-color: #084966 !important;
      text-shadow: none !important;
    }

    /* Post controls are persistent actions, not hover-only chat controls. */
    .postCard .messageActions {
      position: static !important;
      width: auto !important;
      max-width: 100% !important;
      display: flex !important;
      flex-wrap: wrap !important;
      align-items: center !important;
      margin-top: 8px !important;
      padding: 0 !important;
      border: 0 !important;
      border-radius: 0 !important;
      background: transparent !important;
      box-shadow: none !important;
      opacity: 1 !important;
      transform: none !important;
      pointer-events: auto !important;
      overflow: visible !important;
    }

    .postCard .messageActions button {
      background: #ffffff !important;
      border: 1px solid #9fdcec !important;
      color: #075d80 !important;
    }

    .postCard .messageActions button.danger {
      border-color: #e8a3b5 !important;
      color: #a61f45 !important;
    }
 .statsGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:8px;margin-top:10px}.statsGrid>div{padding:10px;border:1px solid var(--line,#dbe4ee);border-radius:10px;background:var(--card-soft,#f8fafc)}.statsGrid strong,.statsGrid small{display:block}.statsGrid small{margin-top:3px;color:var(--muted,#64748b);font-size:12px}
 .profileMiniPityMeter { margin:7px 0; padding:7px 9px; border:1px solid #ffd978; border-radius:9px; background:linear-gradient(100deg,#fff6d4,#f6dcff); color:#704b19; font-size:11px; font-weight:700; }
 .profileMiniCompetitive { display:grid; gap:8px; margin:8px 0; padding:10px; border:1px solid #9d8cff; border-radius:12px; background:linear-gradient(135deg,#28195dcc,#623995cc); color:#fff; box-shadow:0 10px 22px #30126b33; }.profileMiniCompetitive header,.profileMiniCompetitiveOpponents,.profileMiniWeeklyModes{display:flex;gap:7px;align-items:center;justify-content:space-between;flex-wrap:wrap}.profileMiniCompetitive header small,.profileMiniCompetitive article small{display:block;color:#e4dcff;font-size:10px}.profileMiniCompetitiveOpponents article,.profileMiniWeeklyModes article{flex:1 1 160px;display:grid;gap:4px;padding:8px;border:1px solid #ffffff33;border-radius:9px;background:#ffffff12}.profileMiniCompetitive button{background:#ffda67;color:#40256c;border-color:#ffe9a7}.profileMiniBattleReplay{padding:7px;border:1px solid #ffffff33;border-radius:9px;background:#130b3e66}.profileMiniBattleReplay summary{cursor:pointer;font-weight:700}.profileMiniBattleReplay article{margin-top:6px;padding:6px;border-left:3px solid #ffcc68;background:#ffffff12}.profileMiniBattleReplay article.lost{border-left-color:#ff8fab}.profileMiniBattleReplay ol{margin:4px 0 0;padding-left:18px;font-size:10px}.profileMiniCompetitiveEmpty{margin:0;color:#e4dcff;font-size:10px}
 .profileMiniGuild{display:grid;gap:7px;margin:8px 0;padding:9px;border:1px solid #7bd7b4;border-radius:12px;background:linear-gradient(120deg,#e9fff4,#f4edff);color:#245d4a}.profileMiniGuild header{display:flex;justify-content:space-between;gap:8px;align-items:center}.profileMiniGuild header small{font-size:10px}.profileMiniGuild>div{display:flex;gap:6px;flex-wrap:wrap}.profileMiniGuild article{flex:1 1 150px;display:grid;gap:4px;padding:7px;border:1px solid #9ae1c6;border-radius:8px;background:#ffffffbb}.profileMiniGuild article.joined{border-color:#ffcc5e;box-shadow:0 0 0 2px #fff0bf}.profileMiniGuild small{font-size:10px}.profileMiniGuild button{justify-self:start;padding:3px 7px;font-size:10px}.profileMiniGuildProgress{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding-top:6px;border-top:1px dashed #8ed7bc;font-size:9px}.profileMiniGuildProgress span{color:#507466}.profileMiniGuildProgress small{color:#876d47}
.profileMiniLiveOpsHub{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:7px;margin:8px 0}.profileMiniLiveOpsHub article{display:grid;gap:6px;padding:9px;border:1px solid #c6b0f1;border-radius:11px;background:linear-gradient(145deg,#fbf8ff,#f4edff);color:#4a356d}.profileMiniLiveOpsHub article.season{border-color:#e8bb5e;background:linear-gradient(145deg,#fff7dc,#fff1b5)}.profileMiniLiveOpsHub article.difficulty{border-color:#8fd4c0;background:linear-gradient(145deg,#effff7,#e5f9ff)}.profileMiniLiveOpsHub article.operations{border-color:#b9c5e8;background:linear-gradient(145deg,#f4f7ff,#eef0ff)}.profileMiniLiveOpsHub header{display:grid;gap:2px}.profileMiniLiveOpsHub header b{font-size:11px}.profileMiniLiveOpsHub header small,.profileMiniLiveOpsHub footer,.profileMiniLiveOpsHub span{font-size:9px;line-height:1.3}.profileMiniLiveOpsHub>article>div{display:flex;gap:4px;flex-wrap:wrap}.profileMiniLiveOpsHub .season span{padding:3px 5px;border:1px solid #e8cc7d;border-radius:999px;background:#fffdf3}.profileMiniLiveOpsHub .season span.done{border-color:#82c98b;background:#efffeb}.profileMiniLiveOpsHub button{padding:4px 7px!important;font-size:9px!important}
.profileMiniLevel,.profileMiniAscension{display:grid;gap:4px;margin:3px 0;padding:6px;border:1px solid #b7c5ef;border-radius:8px;background:#f7f8ff}.profileMiniLevel{grid-template-columns:auto 1fr}.profileMiniLevel b{font-size:10px;color:#4b5488}.profileMiniLevel span{height:7px;align-self:center;overflow:hidden;border-radius:99px;background:#dee4ff}.profileMiniLevel span i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#8d6cf3,#f48ac2)}.profileMiniLevel small{grid-column:1/-1;font-size:8px;color:#697397}.profileMiniAscension{border-color:#e3ad43;background:linear-gradient(135deg,#fff9df,#fff0bf);color:#705014}.profileMiniAscension.ascended{border-color:#bd7cf0;background:linear-gradient(135deg,#fff2ff,#e6dcff);animation:miniAscendedGlow 2.4s ease-in-out infinite}.profileMiniAscension b{font-size:10px}.profileMiniAscension small,.profileMiniAscension span{font-size:8px}.profileMiniAscension>div{display:flex;gap:3px;flex-wrap:wrap}.profileMiniAscension span{padding:2px 4px;border:1px solid #e8cd86;border-radius:99px;background:#fffdf3}.profileMiniAscension span.done{border-color:#8bcb91;background:#effff1}.profileMiniAscension .classChoices button{background:linear-gradient(135deg,#704bd2,#d14b9b)!important;color:#fff!important;box-shadow:0 3px 9px #7441a744}.profileMiniFriendCard.is-ascended .profileMiniFriendModel{filter:drop-shadow(0 0 9px #e9b5ff)}@keyframes miniAscendedGlow{50%{box-shadow:0 0 0 3px #f4dbff,0 0 17px #e4a0ff}}
@media(max-width:900px){.profileMiniLiveOpsHub{grid-template-columns:1fr}.profileMiniProDirector>div,.profileMiniDeckCoach>div{grid-template-columns:1fr}}
 .profileMiniEndgame{display:grid;gap:8px;margin:8px 0;padding:10px;border:1px solid #f1bb5a;border-radius:12px;background:linear-gradient(135deg,#fff8d9,#ffe5f0);color:#70421c}.profileMiniEndgame header,.profileMiniEndgameGrid,.profileMiniStoryChoices,.profileMiniShowcase>div,.profileMiniEventShop{display:flex;gap:7px;align-items:center;justify-content:space-between;flex-wrap:wrap}.profileMiniEndgameGrid article,.profileMiniStoryChoices article{flex:1 1 200px;display:grid;gap:4px;padding:7px;border:1px solid #edc775;border-radius:9px;background:#ffffffb8}.profileMiniEndgame small{font-size:10px}.profileMiniEndgame strong{font-size:11px}.profileMiniStoryChoices button,.profileMiniEventShop button{padding:3px 7px;font-size:10px}.profileMiniShowcase span{padding:3px 5px;border-radius:999px;background:#fff;border:1px solid #e3c373;font-size:9px}
 .profileMiniCardMerge{display:grid;gap:6px;margin:7px 0;padding:8px;border:1px solid #be91e8;border-radius:10px;background:linear-gradient(135deg,#fbf1ff,#eee8ff);color:#4d2864}.profileMiniCardMerge.ready{border-color:#8a57dd;box-shadow:0 0 0 2px #dcbcff88}.profileMiniCardMerge header{display:flex;align-items:center;justify-content:space-between;gap:6px}.profileMiniCardMerge b{font-size:11px}.profileMiniCardMerge strong,.profileMiniCardMerge p{margin:0;font-size:9px;line-height:1.35}.profileMiniCardMerge>div{display:flex;flex-wrap:wrap;gap:5px}.profileMiniCardMerge span{padding:3px 6px;border:1px solid #ceb4ec;border-radius:99px;background:#fff;font-size:9px}.profileMiniCardMerge button:not(:disabled){background:linear-gradient(110deg,#7949d8,#d24aa1)!important;color:#fff!important;box-shadow:0 4px 12px #9941ae55}.profileMiniCardEvolution{display:grid;gap:6px;margin:7px 0;padding:8px;border:1px solid #d7a65b;border-radius:10px;background:linear-gradient(135deg,#fff9de,#fff0cc);color:#694313}.profileMiniCardEvolution.ready{border-color:#8a57dd;background:linear-gradient(135deg,#f8eaff,#e7f5ff);box-shadow:0 0 0 2px #dcbcff88}.profileMiniCardEvolution.complete{border-color:#64b998;background:linear-gradient(135deg,#e9fff3,#e7f1ff)}.profileMiniCardEvolution header{display:flex;justify-content:space-between;gap:6px;align-items:center}.profileMiniCardEvolution b{font-size:11px}.profileMiniCardEvolution strong,.profileMiniCardEvolution small{font-size:9px;line-height:1.35}.profileMiniCardEvolution>div{display:flex;gap:5px;flex-wrap:wrap}.profileMiniCardEvolution span{padding:3px 6px;border:1px solid #e0c88e;border-radius:99px;background:#fffdf4;font-size:9px}.profileMiniCardEvolution span.done{border-color:#65b896;background:#e8fff2;color:#176343}.profileMiniCardDetailFrame.awakened{box-shadow:0 0 0 3px #f5dcff,0 18px 48px #bd5ee988}.profileMiniEvolveButton:not(:disabled){background:linear-gradient(110deg,#7848d9,#e04aa0)!important;color:#fff!important;box-shadow:0 5px 14px #9941ae66}.profileMiniShowcaseButton.active{background:#177c61!important;color:#fff!important}.profileMiniShowcase{display:grid;gap:7px;width:100%;padding:8px;border:1px solid #e3c373;border-radius:10px;background:#fffdf3}.profileMiniShowcase header{display:flex;justify-content:space-between;align-items:center}.profileMiniShowcase header span{padding:2px 6px;border-radius:99px;background:#fff1bd;font-size:9px;font-weight:700}.profileMiniShowcaseShelf{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:7px!important;align-items:stretch!important;justify-content:initial!important}.profileMiniShowcaseShelf article{display:grid;gap:3px;overflow:hidden;padding:4px;border:1px solid #dfc177;border-radius:8px;background:#fff;box-shadow:0 3px 8px #6a491522}.profileMiniShowcaseShelf article.rare{border-color:#b365da}.profileMiniShowcaseShelf article.champion{border-color:#27bfae}.profileMiniShowcaseShelf article.legendary{border-color:#d79323;background:#fff7d2}.profileMiniShowcaseShelf img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:5px}.profileMiniShowcaseShelf b{overflow:hidden;font-size:8px;line-height:1.2;text-overflow:ellipsis;white-space:nowrap}.profileMiniShowcaseShelf small{font-size:7px;line-height:1.2}
 .profileMiniCombatRoles{display:flex;justify-content:center;gap:5px;flex-wrap:wrap}.profileMiniCombatRoles span{padding:3px 6px;border:1px solid #ffffff44;border-radius:999px;background:#ffffff18;font-size:9px;cursor:help}.profileMiniUltimate{display:grid;gap:3px}.profileMiniUltimate span{position:relative;display:block;height:18px;overflow:hidden;border:1px solid #ffefa8;border-radius:99px;background:#130c39}.profileMiniUltimate i{display:block;height:100%;background:linear-gradient(90deg,#a765ff,#ffdc68);box-shadow:0 0 12px #ffcf50}.profileMiniUltimate b{position:absolute;inset:3px 0;text-align:center;color:#fff;font-size:9px;text-shadow:0 1px 2px #1c1044}.profileMiniUltimate small{text-align:center;color:#eee1ff;font-size:9px}.profileMiniCombatMoves{grid-template-columns:repeat(5,1fr)!important}.profileMiniCombatMoves button.ultimate:not(:disabled){background:linear-gradient(135deg,#eed0ff,#ffcf61)!important;box-shadow:0 0 12px #ffdc7899}
 .profileMiniPolicyBadge{display:block;margin:6px 0;padding:5px 7px;border:1px solid #dfc574;border-radius:8px;background:#fff8dc;color:#6e5312;font-size:9px;line-height:1.35}.profileMiniCompetitive .profileMiniPolicyBadge{margin:0;border-color:#ffffff44;background:#ffffff18;color:#fff3be}
 .profileMiniGuestbook{display:grid;gap:5px;margin-top:8px;padding:7px;border:1px solid #e2a4cb;border-radius:9px;background:#fff5fb;color:#6e315c}.profileMiniGuestbook>div,.profileMiniGuestbook footer{display:flex;gap:4px;flex-wrap:wrap}.profileMiniGuestbook small{padding:3px 5px;border-radius:99px;background:#fff;border:1px solid #f0c6df;font-size:9px}.profileMiniGuestbook button{min-width:28px;padding:3px 6px;border-color:#e2a4cb;background:#fff;color:#6e315c}
 .profileMiniOnboarding{display:grid;gap:6px;margin:7px 0;padding:9px;border:1px solid #8acbb3;border-radius:11px;background:linear-gradient(135deg,#effff6,#edf7ff);color:#265c4c}.profileMiniOnboarding header{display:flex;align-items:center;justify-content:space-between;gap:8px}.profileMiniOnboarding header span{padding:2px 6px;border-radius:99px;background:#d8f8e9;font-size:9px;font-weight:700}.profileMiniOnboarding>div{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:5px}.profileMiniOnboarding button{display:grid;gap:2px;text-align:left;padding:6px;border:1px solid #a8dcc7;border-radius:8px;background:#fff;color:#265c4c}.profileMiniOnboarding button.done{opacity:.62;border-color:#86caa8;background:#f2fff7}.profileMiniOnboarding b,.profileMiniOnboarding small{font-size:9px;line-height:1.3}
 @media (prefers-reduced-motion: reduce){.profileMiniCardDetailAura,.profileMiniPackOpening,.profileMiniActionEffect,.profileMiniHouseFriend,.profileMiniEggNest,.profileMiniCollectibleCard{animation:none!important;transition:none!important}.profileMiniCardDetailFrame{transform:none!important}}

/* PLCHAT_MESSAGE_BUBBLE_CONTENT_FIT_V2 */
.messages { align-items: flex-start !important; }
.messages .message { align-self: flex-start !important; display: flex !important; width: auto !important; max-width: min(76%, 720px) !important; }
.messages .message.mine { align-self: flex-end !important; width: auto !important; }
.messages .message .bubble { display: table !important; width: auto !important; max-width: 100% !important; min-width: 0 !important; }
.messages .message .bubble .msgText { max-width: 100% !important; }
@media (max-width: 700px) {
  .messages .message { max-width: 88% !important; }
}

.kaveeRepublicHero{padding:24px;border:1px solid #59749a;border-radius:16px;background:linear-gradient(135deg,#10263f,#284a6c);color:#eef8ff}.kaveeRepublicHero span{font-weight:800;letter-spacing:.08em}.kaveeRepublicHero h2{max-width:720px;margin:9px 0;font-size:clamp(22px,3vw,36px)}.kaveeRepublicHero p{max-width:720px;margin:0;color:#c7e4f7}.kaveeRepublicStats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:14px 0}.kaveeRepublicStats article{display:grid;gap:3px;padding:14px;border:1px solid #cbdce9;border-radius:12px;background:#f7fbff}.kaveeRepublicStats b{font-size:20px;color:#1d537b}.kaveeRepublicStats small,.kaveeCitizen small,.kaveeInstitution small{color:#597084}.kaveeRepublicGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.kaveeCitizen,.kaveeInstitution{display:flex;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px solid #e3edf4}.kaveeCitizen span,.kaveeInstitution{display:grid}.kaveeCitizen em{align-self:center;padding:3px 7px;border-radius:999px;font-size:11px;font-style:normal}.kaveeCitizen em.active{background:#ddf8e7;color:#17643d}.kaveeCitizen em.pending{background:#fff1d1;color:#7b5510}.kaveeRepublicCharter{margin-top:14px}.kaveeRepublicCharter p{line-height:1.6}@media(max-width:700px){.kaveeRepublicStats,.kaveeRepublicGrid{grid-template-columns:1fr}.kaveeRepublicHero{padding:17px}}
.kaveeRepublicRoadmap{margin:14px 0}.kaveeRepublicRoadmap>.settingRow{align-items:center}.kaveeRepublicRoadmap>.settingRow small{color:#597084;text-align:right}.kaveeRepublicPhases{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:12px}.kaveeRepublicPhases article{display:grid;gap:5px;padding:13px;border:1px solid #cbdce9;border-radius:10px;background:#f7fbff}.kaveeRepublicPhases article>b{color:#1d537b}.kaveeRepublicPhases article>span{font-size:12px;font-weight:700;color:#17643d}.kaveeRepublicPhases article:last-child>span{color:#72518b}.kaveeRepublicPhases small{color:#597084;line-height:1.5}@media(max-width:700px){.kaveeRepublicPhases{grid-template-columns:1fr}.kaveeRepublicRoadmap>.settingRow{align-items:flex-start;flex-direction:column}.kaveeRepublicRoadmap>.settingRow small{text-align:left}}
.kaveeElectionCard{display:grid;gap:7px;margin:14px 0;padding:16px;border:1px solid #b5a0da;border-radius:14px;background:linear-gradient(135deg,#f9f4ff,#edf7ff);color:#34265b}.kaveeElectionCard>div{display:flex;align-items:center;justify-content:space-between;gap:8px}.kaveeElectionCard small{display:block;color:#685b84}.kaveeElectionCard>span{justify-self:start;padding:3px 8px;border-radius:999px;background:#e8dbff;color:#543c85;font-size:12px;font-weight:700}.kaveeElectionCard p{margin:0}