:root {
      --bg-0: #0b0b0f;
      --bg-1: #121217;
      --panel: #1a1a21;
      --muted: #9ca3af;
      --text: #e6eef8;

      --accent-1: #ffb86b;
      --accent-2: #ffb86b;
      --btn-text: #1f2937;
      --link: #ffb86b;
      --border: #2b2b2d;
      --glow: rgba(255, 184, 107, 0.34);

      --auth-accent-1: #ffb86b;
      --auth-accent-2: #ffb86b;
      --auth-link: #ffb86b;
      --auth-glow: rgba(255, 184, 107, 0.32);

      --input-bg: rgba(0, 0, 0, 0.45);
      --typing: var(--accent-1);

      --chat-messages-bg: #0b0b0f;
      --chat-input-bg: #0f0f14;

      --wrapW: min(1000px, 92vw);

      --radius: 16px;
      --radius-sm: 12px;
      --radius-lg: 22px;
      --app-corner: 12px;

      --gap: clamp(8px, 1vw, 12px);

      --fz: clamp(14px, 0.95vw, 16px);
      --fz-small: clamp(12px, 0.8vw, 14px);

      --btnH: 48px;
      --btnFw: 800;
      --btnFz: calc(var(--fz) - 1px);
      --modalW: 90vw;

      --shadow-1: 0 10px 24px rgba(0, 0, 0, 0.35);
      --shadow-2: 0 18px 50px rgba(0, 0, 0, 0.55);
      --shadow-3: 0 26px 80px rgba(0, 0, 0, 0.70);
      --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.06);

      --ring: 0 0 0 3px var(--glow);

      --shine: linear-gradient(
        120deg,
        rgba(255, 255, 255, 0.12),
        rgba(255, 255, 255, 0) 35%,
        rgba(255, 255, 255, 0.10)
      );

      --safeT: env(safe-area-inset-top);
      --safeB: env(safe-area-inset-bottom);
      --safeL: env(safe-area-inset-left);
      --safeR: env(safe-area-inset-right);
      --screen-edge-x: max(12px, var(--safeL), var(--safeR));
      --screen-edge-top: calc(8px + var(--safeT));
      --screen-edge-bottom: calc(10px + var(--safeB));
      --edge-fade-top: rgba(0, 0, 0, 0);
      --edge-fade-bottom: rgba(0, 0, 0, 0);
      --edge-fade-size: clamp(22px, 4.5vh, 56px);
      --content-edge-x: 24px;
      --mPadX: var(--content-edge-x);
      --menu-four-edge: var(--content-edge-x);
      --app-shell-max-width: 900px;
      --app-shell-w: min(var(--app-shell-max-width), 92vmin);
      --app-shell-h: min(var(--app-shell-max-width), 92vmin);
      --app-bg-image-max-size: 900px;
      --app-bg-image-size: min(100vh, var(--app-bg-image-max-size)) min(100vh, var(--app-bg-image-max-size));
      --app-frame-radius: 12px;
      --app-frame-border: rgba(255, 255, 255, 0.24);
      --app-frame-border-light: rgba(15, 23, 42, 0.24);

      --chatFontMul: 1;
      --chatFontWeight: 500;

      --ui-text-main: var(--text);
      --ui-text-soft: rgba(230, 238, 248, 0.84);
      --ui-text-muted: rgba(184, 196, 214, 0.72);
      --ui-icon: #f2f6fb;
      --ui-surface-1: rgba(18, 18, 24, 0.48);
      --ui-surface-2: rgba(22, 22, 30, 0.60);
      --ui-surface-3: rgba(28, 28, 38, 0.70);
      --ui-border-1: rgba(255, 255, 255, 0.14);
      --ui-border-2: rgba(255, 255, 255, 0.24);

      --app-bg-mix-a: #07070a;
      --app-bg-mix-b: #0f1015;
      --app-bg-mix-c: #191a22;
      --app-bg-solid: #050509;
      --app-bg-image: none;
      --app-bg-overlay: rgba(0, 0, 0, 0.40);
      --app-grad-start: #17181f;
      --app-grad-mid: #0d0d12;
      --app-grad-end: #000000;
      --app-bg-before-tail: rgba(0,0,0,0.74);
      --app-bg-before-opacity: 0.64;
      --app-bg-after-a: rgba(0,0,0,0.18);
      --app-bg-after-c: rgba(0,0,0,0.54);
      --app-bg-spot-a: rgba(255,255,255,0.06);
      --app-bg-spot-b: rgba(255,255,255,0.04);
      --app-bg-spot-a-soft: rgba(255,255,255,0.04);
      --app-bg-spot-b-soft: rgba(255,255,255,0.03);
      --onb-tagline-grad: linear-gradient(90deg, rgba(255, 184, 107, 0.88) 0%, rgba(255, 184, 107, 0.88) 24%, rgba(255, 184, 107, 0.82) 52%, rgba(255, 184, 107, 0.86) 76%, rgba(255, 184, 107, 0.88) 100%);
      --google-text-grad: linear-gradient(90deg, #2f5fbf 0%, #2d8a4e 30%, #c58b10 62%, #c23b34 100%);
    }
    @media (max-width: 520px){
      :root{--modalW: 94vw;}
    }

    #gptlike-chat[data-font="sm"] {
      --chatFontMul: 0.90;
    }

    #gptlike-chat[data-font="md"] {
      --chatFontMul: 1;
    }

    #gptlike-chat[data-font="lg"] {
      --chatFontMul: 1.14;
    }

    #gptlike-chat[data-font="xl"] {
      --chatFontMul: 1.28;
    }
    #gptlike-chat[data-theme-light="1"] {
      --app-frame-border: var(--app-frame-border-light);
    }

    *,
    *:before,
    *:after {
      box-sizing: border-box;
    }

    html,
    body {
      margin: 0;
      padding: 0;
      background: #000000;
      background: var(--bg-0);
      width: 100%;
      min-height: 100%;
    }

    body {
      font-family: "Manrope", system-ui;
      background: #000000;
      background: var(--bg-0);
      color: rgba(230, 238, 248, 0.9);
      min-height: 100dvh;
      position: relative;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      -webkit-tap-highlight-color: transparent;
    }

    #appGlobalBackground {
      position: fixed;
      inset: 0;
      z-index: 0;
      isolation: isolate;
      pointer-events: none;
      background:
        linear-gradient(0deg, var(--app-bg-overlay), var(--app-bg-overlay)),
        radial-gradient(78% 62% at 12% 10%, var(--app-bg-spot-a), transparent 72%),
        radial-gradient(72% 58% at 86% 86%, var(--app-bg-spot-b), transparent 74%),
        var(--app-bg-image),
        linear-gradient(180deg, var(--app-grad-start) 0%, var(--app-grad-mid) 46%, var(--app-grad-end) 100%);
      background-size: 100% 100%, 124% 124%, 124% 124%, var(--app-bg-image-size), 100% 100%;
      background-position: 50% 50%, 0% 0%, 100% 100%, 50% 50%, 50% 50%;
      background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
      background-color: var(--bg-0);
      animation: appBgFlow 42s ease-in-out infinite alternate;
    }
    #appGlobalBackground #spaceBackground {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      display: none;
    }
    body[data-theme="dark"]:not(.onboarding-main) #appGlobalBackground {
      background: var(--app-bg-solid) !important;
      animation: none !important;
    }
    body[data-theme="dark"]:not(.onboarding-main) #appGlobalBackground::before,
    body[data-theme="dark"]:not(.onboarding-main) #appGlobalBackground::after {
      opacity: 0 !important;
      background: none !important;
    }
    body[data-theme="dark"]:not(.onboarding-main) #appGlobalBackground #spaceBackground {
      display: block;
    }
    body.onboarding-main #appGlobalBackground #spaceBackground {
      display: block;
      opacity: 0.5;
    }
    body.onboarding-active #appGlobalBackground {
      background: #050509 !important;
      animation: none !important;
    }
    body.onboarding-active #appGlobalBackground::before,
    body.onboarding-active #appGlobalBackground::after {
      opacity: 0 !important;
      background: none !important;
    }
    body.onboarding-active #appGlobalBackground #spaceBackground {
      display: block;
      opacity: 0.6;
    }
    /* Isolation: prevent global app button/card styles from bleeding into main screen */
    body.onboarding-main #gptlike-chat #onboardingScreen{
      isolation: isolate;
    }
body.onboarding-main #gptlike-chat #onboardingScreen button,
body.onboarding-main #gptlike-chat #onboardingScreen [role="button"]{
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;
}
    body[data-theme="dark"]:not(.onboarding-main) {
      background: var(--app-bg-solid) !important;
      background-image: none !important;
    }
    body[data-theme="dark"]:not(.onboarding-main) #gptlike-chat.gptlike-wrapper {
      background: transparent !important;
      background-image: none !important;
    }
    body.app-booting #appGlobalBackground {
      opacity: 0;
    }
    #appGlobalBackground::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 1;
      pointer-events: none;
      background:
        linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0) 48%, var(--app-bg-before-tail) 100%),
        radial-gradient(70% 58% at 18% 20%, var(--app-bg-spot-a-soft), transparent 78%),
        radial-gradient(66% 54% at 82% 32%, var(--app-bg-spot-b-soft), transparent 80%);
      opacity: var(--app-bg-before-opacity, 0.64);
    }
    #appGlobalBackground::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 2;
      pointer-events: none;
      background:
        linear-gradient(180deg, var(--edge-fade-top) 0%, rgba(0,0,0,0) var(--edge-fade-size)),
        linear-gradient(0deg, var(--edge-fade-bottom) 0%, rgba(0,0,0,0) var(--edge-fade-size)),
        linear-gradient(180deg, var(--app-bg-after-a) 0%, var(--app-bg-after-c) 100%);
    }
    /* Ensure safe-area (PWA/standalone) uses the same background as the app */
    html,
    body {
      background:
        linear-gradient(0deg, var(--app-bg-overlay), var(--app-bg-overlay)),
        radial-gradient(78% 62% at 12% 10%, var(--app-bg-spot-a), transparent 72%),
        radial-gradient(72% 58% at 86% 86%, var(--app-bg-spot-b), transparent 74%),
        var(--app-bg-image),
        linear-gradient(180deg, var(--app-grad-start) 0%, var(--app-grad-mid) 46%, var(--app-grad-end) 100%);
      background-size: 100% 100%, 124% 124%, 124% 124%, var(--app-bg-image-size), 100% 100%;
      background-position: 50% 50%, 0% 0%, 100% 100%, 50% 50%, 50% 50%;
      background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
    }

    :where(button, [role=button], input, textarea, select):focus-visible {
      outline: none;
      box-shadow: var(--ring);
      border-color: var(--accent-1) !important;
    }

    .auth-center :where(button, [role=button], input, textarea, select):focus-visible {
      outline: none;
      box-shadow: 0 0 0 3px var(--auth-glow);
      border-color: var(--auth-accent-1) !important;
    }

    * {
      scrollbar-width: thin;
      scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
    }

    *::-webkit-scrollbar {
      height: 10px;
      width: 10px;
    }

    *::-webkit-scrollbar-thumb {
      background: rgba(255, 255, 255, 0.16);
      border-radius: 999px;
      border: 2px solid transparent;
      background-clip: content-box;
    }

    *::-webkit-scrollbar-thumb:hover {
      background: rgba(255, 255, 255, 0.22);
    }

    *::-webkit-scrollbar-track {
      background: var(--bg-0);
    }

    /* screen outline (disabled) */
    body::before {
      display: none !important;
    }
    body.onb-no-outline::before{
      display: none !important;
    }
    body.scan-screen-active::before{
      display: none !important;
    }

    .gptlike-wrapper {
      position: fixed;
      inset: 1px;
      width: calc(100vw - 2px);
      height: calc(100vh - 2px);
      margin: 0;
      border-radius: 14px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      background: transparent;
      transform: translateZ(0);
      z-index: 9999;
      box-shadow: 0 0 16px rgba(0, 0, 0, 0.22);
      position: fixed;
    }
    .gptlike-wrapper::after {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      border-radius: 14px;
      border: 1px solid rgba(255, 255, 255, 0.4);
      box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25);
    }
    .gptlike-wrapper.onboarding-active,
    .gptlike-wrapper.auth-active {
      position: fixed;
      inset: 1px;
      width: calc(100vw - 2px);
      height: calc(100dvh - 2px);
      margin: 0;
      border-radius: 14px;
      box-shadow: none;
      background: transparent;
      clip-path: inset(0 round 14px);
      isolation: isolate;
      transform: none;
    }

    .gptlike-wrapper::before,
    .gptlike-wrapper::after {
      display: none;
    }

    /* Desktop clamp: windowed app size on tablets/pc */
    @media (min-width: 641px) {
      .gptlike-wrapper,
      .gptlike-wrapper.chat-mode,
      .gptlike-wrapper.onboarding-active,
      .gptlike-wrapper.auth-active {
        inset: 50% auto auto 50% !important;
        width: var(--app-shell-w) !important;
        height: var(--app-shell-h) !important;
        margin: 0 !important;
        border-radius: 16px !important;
        overflow: hidden;
      }
      .gptlike-wrapper {
        transform: translate(-50%, -50%) translateZ(0) !important;
      }
      .gptlike-wrapper.chat-mode,
      .gptlike-wrapper.onboarding-active,
      .gptlike-wrapper.auth-active {
        transform: translate(-50%, -50%) !important;
      }
    }

    @keyframes liquidFloat {
      0% {
        transform: translate3d(-2%, -3%, 0) rotate(0) scale(1.05);
      }
      35% {
        transform: translate3d(3%, 1%, 0) rotate(8deg) scale(1.12);
      }
      70% {
        transform: translate3d(-1%, 4%, 0) rotate(-6deg) scale(1.08);
      }
      100% {
        transform: translate3d(2%, -1%, 0) rotate(10deg) scale(1.14);
      }
    }

    @keyframes liquidDrift {
      0% {
        transform: translate3d(0, 0, 0) rotate(0) scale(1);
      }
      100% {
        transform: translate3d(2%, -2%, 0) rotate(360deg) scale(1.02);
      }
    }

    @keyframes gradientPan {
      0% {
        background-position: 0% 50%, 18% 25%, 82% 30%, 55% 85%, 35% 70%, 0% 0%;
      }
      50% {
        background-position: 100% 50%, 24% 32%, 76% 22%, 60% 78%, 42% 62%, 0% 0%;
      }
      100% {
        background-position: 0% 50%, 18% 25%, 82% 30%, 55% 85%, 35% 70%, 0% 0%;
      }
    }

    @keyframes appBgFlow {
      0% {
        background-position: 0% 0%, 100% 0%, 50% 50%, 50% 50%;
      }
      50% {
        background-position: 14% 10%, 86% 6%, 50% 50%, 50% 50%;
      }
      100% {
        background-position: 8% 14%, 92% 12%, 50% 50%, 50% 50%;
      }
    }

    @keyframes spin {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }

    @keyframes popIn {
      from {
        opacity: 0;
        transform: translateY(10px) scale(0.98);
      }
      to {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }

    @keyframes titleGradientFlow {
      0% {
        background-position: 0% 50%;
      }
      50% {
        background-position: 100% 50%;
      }
      100% {
        background-position: 0% 50%;
      }
    }

    @keyframes waitShimmer {
      0% {
        transform: translateX(-120%);
      }
      100% {
        transform: translateX(120%);
      }
    }

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

    @keyframes caretBlink {
      50% {
        opacity: 0;
      }
    }

    @keyframes revealIn {
      from {
        opacity: 0;
        transform: translateY(6px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @keyframes chatWipeOut {
      to {
        opacity: 0;
        transform: translateY(10px) scale(0.98);
        filter: blur(2px);
      }
    }

    /* мягкий пульс подсветки заголовка */
    @keyframes titlePulse {
      0% {
        text-shadow:
          0 8px 20px rgba(0, 0, 0, 1),
          0 0 12px rgba(0, 0, 0, 1),
          0 0 8px rgba(249, 115, 22, 0.08);
        transform: translateY(0) scale(0.97);
      }
      50% {
        text-shadow:
          0 26px 86px rgba(0, 0, 0, 1),
          0 0 30px rgba(0, 0, 0, 1),
          0 0 36px rgba(249, 115, 22, 0.55),
          0 0 70px rgba(255, 140, 70, 0.35);
        transform: translateY(-1px) scale(1.04);
      }
      100% {
        text-shadow:
          0 8px 20px rgba(0, 0, 0, 1),
          0 0 12px rgba(0, 0, 0, 1),
          0 0 8px rgba(249, 115, 22, 0.08);
        transform: translateY(0) scale(0.97);
      }
    }

    @keyframes logoReveal {
      from {
        opacity: 0;
        transform: translateY(6px) scale(0.98);
        filter: blur(4px);
      }
      to {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
      }
    }
    @keyframes logoScan {
      0% {
        background-position: 0% 50%;
      }
      50% {
        background-position: 100% 50%;
      }
      100% {
        background-position: 0% 50%;
      }
    }



    /* New lightweight motion */
    @keyframes msgRise {
      from {
        opacity: 0;
        transform: translateY(10px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @keyframes imgPop {
      from {
        opacity: 0;
        transform: translateY(6px) scale(0.98);
      }
      to {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }

    @keyframes dropdownIn {
      from {
        opacity: 0;
        transform: translateY(-6px) scale(0.99) translateZ(0);
        filter: blur(6px);
      }
      to {
        opacity: 1;
        transform: translateY(0) scale(1) translateZ(0);
        filter: blur(0);
      }
    }

    .gptlike-wrapper.chat-mode {
      position: fixed;
      inset: 1px;
      width: calc(100vw - 2px);
      height: calc(100dvh - 2px);
      margin: 0;
      --app-radius: 14px;
      border-radius: var(--app-radius);
      overflow: hidden;
      clip-path: inset(0 round var(--app-radius));
      isolation: isolate;
      background: transparent;
      box-shadow: none;
    }
    .gptlike-wrapper.chat-mode::before {
      display: none;
      content: "";
      position: absolute;
      inset: -35%;
      pointer-events: none;
      background:
        linear-gradient(
          120deg,
          rgba(255, 255, 255, 0.035),
          rgba(255, 255, 255, 0) 24%,
          rgba(255, 255, 255, 0.028) 48%,
          rgba(255, 255, 255, 0) 72%,
          rgba(255, 255, 255, 0.035)
        ),
        radial-gradient(closest-side at 18% 25%, var(--accent-1) 0%, transparent 64%),
        radial-gradient(closest-side at 82% 30%, var(--accent-2) 0%, transparent 66%),
        radial-gradient(closest-side at 55% 85%, var(--link) 0%, transparent 62%),
        radial-gradient(closest-side at 35% 70%, var(--accent-2) 0%, transparent 68%),
        linear-gradient(180deg, var(--panel), var(--bg-1));
      border-radius: inherit;
      opacity: 0.20;
      filter: blur(30px) saturate(1.10);
      mix-blend-mode: screen;
      transform-origin: center;
      background-size: 220% 220%, 140% 140%, 150% 150%, 150% 150%, 150% 150%, 100% 100%;
      animation:
        liquidFloat 34s ease-in-out infinite alternate,
        gradientPan 62s ease-in-out infinite;
    }

    .gptlike-wrapper.chat-mode::after {
      display: none;
      content: "";
      position: absolute;
      inset: -25%;
      pointer-events: none;
      border-radius: inherit;
      background: conic-gradient(
        from 180deg at 50% 50%,
        transparent 0deg,
        rgba(255, 255, 255, 0.12) 40deg,
        transparent 88deg,
        rgba(255, 255, 255, 0.07) 132deg,
        transparent 210deg,
        rgba(255, 255, 255, 0.09) 260deg,
        transparent 360deg
      );
      opacity: 0.10;
      filter: blur(20px);
      mix-blend-mode: soft-light;
      animation: liquidDrift 78s linear infinite;
    }

    #gptlike-chat[data-theme-light="1"].chat-mode::before {
      opacity: 0.09;
      mix-blend-mode: multiply;
      filter: blur(24px) saturate(1.02);
    }

    #gptlike-chat[data-theme-light="1"].chat-mode::after {
      opacity: 0.07;
      mix-blend-mode: overlay;
    }

    /* =========================
       AUTH
       ========================= */
    .auth-center {
      position: fixed;
      inset: 0;
      display: flex;
      justify-content: stretch;
      align-items: stretch;
      transition: opacity 0.45s;
      padding: var(--screen-edge-top) var(--screen-edge-x) var(--screen-edge-bottom);
      z-index: 2;
      background: transparent;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      overflow: hidden;
      --auth-edge: var(--content-edge-x);
      --auth-inner-w: calc(100% - (var(--auth-edge) * 2));
      --auth-control-w: min(520px, 100%);
      --auth-control-h: clamp(38px, 5.6vh, 46px);
      --lang-w: min(360px, 100%);
      --lang-h: calc(var(--auth-control-h) - 2px);
      --auth-gap: clamp(6px, 1.2vh, 10px);
      --auth-pad-v: clamp(8px, 1.2vh, 12px);
      --auth-btn-bg: #f4f4f4;
      --auth-btn-text: #0f172a;
      --auth-btn-shadow: 0 10px 18px rgba(0, 0, 0, 0.28);
      --auth-accent-1: #ffb86b;
      --auth-accent-2: #ffb86b;
      --auth-link: #ffb86b;
      --auth-glow: rgba(255, 184, 107, 0.32);
      --text: #e6eef8;
      --muted: #b8c4d6;
      --btnFz: clamp(15px, 2.8vw, 19px);
      --fz: clamp(15px, 2.5vw, 18px);
      --fz-small: clamp(14px, 2.3vw, 16px);
      --auth-text-xs: clamp(13px, 2.2vw, 15px);
      --auth-text-sm: clamp(14px, 2.4vw, 16px);
      --auth-text-md: clamp(15px, 2.7vw, 18px);
      width: 100vw;
      height: 100dvh;
      min-height: 100dvh;
    }
    #gptlike-chat.auth-active #authContainer{
      isolation: isolate;
    }
    .auth-center::before {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background: none;
      opacity: 0;
    }
    .auth-layout{
      width: 100%;
      height: 100%;
      min-height: 100%;
      display: grid;
      grid-template-rows: 5% 95%;
      align-items: stretch;
      position: relative;
      z-index: 1;
      padding: 0;
      box-sizing: border-box;
      justify-items: center;
      row-gap: 0;
    }
    .auth-panel{
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0;
      border: 1px solid rgba(255,255,255,0.24);
      border-radius: 12px;
      background: transparent;
      box-sizing: border-box;
    }
    .auth-top{
      background: transparent;
      justify-content: center;
      padding-inline: 0;
    }
    .auth-mini-bar{
      width: var(--auth-inner-w);
      margin-inline: auto;
      display: flex;
      align-items: center;
      justify-content: flex-start;
    }
    .auth-body{
      align-items: stretch;
      justify-content: center;
      height: 100%;
      min-height: 0;
      overflow: hidden;
    }
    .auth-form{
      width: 100%;
      max-width: min(720px, 100%);
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 0;
      overflow: hidden;
      padding: 0;
      box-sizing: border-box;
    }

    .auth-box {
      background: transparent;
      border: 0;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      padding: 8px 0;
      border-radius: 0;
      display: flex;
      flex-direction: column;
      gap: var(--auth-gap);
      min-width: 0;
      width: min(720px, 100%);
      max-width: min(720px, 100%);
      height: auto;
      max-height: 100%;
      margin: 0 auto;
      align-items: center;
      justify-content: center;
      box-shadow: none;
      position: relative;
      overflow: visible;
      animation: none;
      z-index: 1;
    }

    .auth-block {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: var(--auth-gap);
    }

    .auth-block--mid {
      flex: 0 0 auto;
      justify-content: center;
    }

    .auth-box::before {
      display: none;
    }

    .auth-box::after {
      display: none;
    }

    .auth-box .title { display: none; }

    .auth-center :where(a, .bot-cmd) {
      color: var(--auth-link);
    }

    .lang-row {
      margin: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: clamp(8px, 1.6vh, 12px);
      user-select: none;
      line-height: 1.1;
      z-index: 1;
      width: 100%;
      max-width: var(--lang-w);
      margin-inline: auto;
    }

    .lang-label {
      font-size: var(--auth-text-md);
      color: rgba(230, 238, 248, 0.70);
      font-weight: 800;
      line-height: 1.2;
    }

    .auth-center .lang-seg {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      width: 100%;
      max-width: var(--lang-w);
      height: auto;
      border: none;
      background: transparent;
      border-radius: 999px;
      padding: 0;
      gap: 10px;
      box-shadow: none;
    }

    .auth-center .lang-btn {
      appearance: none;
      border: 1px solid rgba(220, 220, 220, 0.42);
      background: #000000;
      color: rgba(229, 229, 229, 0.62);
      -webkit-text-fill-color: rgba(229, 229, 229, 0.62);
      font-weight: 800;
      font-size: clamp(14px, 2.1vw, 16px);
      height: var(--lang-h);
      min-width: var(--lang-h);
      padding: 0 12px;
      border-radius: 999px;
      box-shadow: none;
      cursor: pointer;
      transition: background 0.18s, color 0.18s, transform 0.12s, border-color 0.18s;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      position: relative;
    }

    .auth-center .lang-btn:hover {
      background: #0c0e13;
      color: #f8fbff;
      -webkit-text-fill-color: #f8fbff;
      border-color: rgba(255, 255, 255, 0.30);
    }

    .auth-center .lang-btn:active {
      transform: scale(0.98);
    }

    .auth-center .lang-btn.active {
      background: #000000;
      background-image: none;
      border: 1px solid #ffb86b;
      color: #ffb86b;
      -webkit-text-fill-color: #ffb86b;
      text-shadow: none;
      box-shadow: none;
      animation: none;
    }

    .auth-center .lang-btn.active::before,
    .auth-center .lang-btn.active::after {
      content: none;
      display: none;
    }
    .auth-social {
      width: 100%;
      max-width: var(--auth-control-w);
      display: flex;
      flex-direction: column;
      gap: 8px;
      align-items: center;
      margin-top: 0;
      z-index: 1;
    }

    .google-btn {
      width: 100%;
      height: var(--auth-control-h);
      border-radius: 14px;
      border: none;
      background: #f4f4f4;
      color: #0f172a;
      font-weight: var(--btnFw);
      font-size: var(--btnFz);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      cursor: pointer;
      transition: transform 0.15s, box-shadow 0.15s, filter 0.15s, background 0.15s;
      box-shadow: 0 10px 18px rgba(0, 0, 0, 0.28);
      position: relative;
      overflow: hidden;
    }

    .google-btn::before {
      content: none;
    }

    .google-btn:hover {
      filter: brightness(1.02);
      transform: translateY(-1px);
      box-shadow: none;
    }

    .google-btn:active {
      transform: translateY(0);
    }

    .google-btn svg {
      width: 18px;
      height: 18px;
      flex: 0 0 18px;
      animation: googleIconFloat 2.8s ease-in-out infinite;
      transform-origin: 50% 50%;
    }

    .telegram-btn {
      width: 100%;
      height: var(--auth-control-h);
      border-radius: 14px;
      border: none;
      background: #2aabee;
      color: #ffffff;
      font-weight: var(--btnFw);
      font-size: var(--btnFz);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      cursor: pointer;
      transition: transform 0.15s, box-shadow 0.15s, filter 0.15s, background 0.15s;
      box-shadow: 0 10px 18px rgba(0, 0, 0, 0.28);
      position: relative;
      overflow: hidden;
    }

    .telegram-btn:hover {
      filter: brightness(1.02);
      transform: translateY(-1px);
      box-shadow: none;
    }

    .telegram-btn:active {
      transform: translateY(0);
    }

    .telegram-btn svg {
      width: 18px;
      height: 18px;
      flex: 0 0 18px;
    }
    .telegram-btn .telegram-icon,
    .telegram-btn .telegram-icon * {
      color: #ffffff !important;
      fill: #ffffff !important;
    }

    .telegram-btn:disabled {
      opacity: 0.6;
      pointer-events: none;
      cursor: not-allowed;
      filter: saturate(0.7);
      box-shadow: none;
    }

    @keyframes googleIconFloat {
      0%, 100% {
        transform: translateY(0) scale(1);
      }
      50% {
        transform: translateY(-1px) scale(1.05);
      }
    }

    .auth-divider {
      width: 100%;
      max-width: var(--auth-control-w);
      display: flex;
      align-items: center;
      gap: 10px;
      color: rgba(200, 200, 200, 0.7);
      font-size: var(--auth-text-sm);
      font-weight: 900;
      opacity: 0.95;
      margin: 0;
    }

    .auth-divider:before,
    .auth-divider:after {
      content: "";
      height: 1px;
      flex: 1;
      background: rgba(255, 255, 255, 0.18);
    }

    .auth-divider span {
      padding: 0 2px;
    }

    .auth-inputs {
      display: flex;
      flex-direction: column;
      gap: var(--auth-gap);
      width: 100%;
      align-items: center;
      z-index: 1;
      margin-top: 0;
    }

    .auth-field {
      width: 100%;
      max-width: var(--auth-control-w);
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(160px, 48%);
      grid-template-areas:
        "label err"
        "input input";
      row-gap: 4px;
      column-gap: 8px;
    }

    .field-label {
      grid-area: label;
      font-size: var(--auth-text-sm);
      color: rgba(230, 238, 248, 0.72);
      font-weight: 900;
      letter-spacing: 0.2px;
      padding-left: 6px;
      align-self: end;
      line-height: 1.2;
    }

    .field-error {
      grid-area: err;
      min-height: 14px;
      font-size: var(--auth-text-sm);
      color: var(--auth-accent-2);
      line-height: 1.2;
      text-align: right;
      padding-right: 6px;
      align-self: end;
      white-space: normal;
      text-wrap: balance;
      hyphens: auto;
    }

    .auth-input {
      grid-area: input;
      position: relative;
      width: 100%;
    }

    .auth-inputs input {
      width: 100%;
      max-width: var(--auth-control-w);
      text-align: left;
    }

    .input {
      padding: 10px 14px;
      border: 1px solid rgba(255, 255, 255, 0.22);
      border-radius: 14px;
      font-size: var(--fz);
      line-height: 1.6;
      background: rgba(0,0,0,0.55);
      color: var(--text);
      box-shadow: none;
      caret-color: var(--text);
      width: 100%;
      transition: border-color 0.18s, box-shadow 0.18s, background 0.18s, transform 0.12s;
    }

    .input::placeholder {
      color: rgba(166, 175, 186, 0.85);
    }

    .input:hover {
      border-color: rgba(255, 255, 255, 0.18);
    }

    .input:focus {
      outline: none;
      border-color: #ffb86b;
      box-shadow: none;
      background: rgba(0,0,0,0.6);
    }

    .input.is-error {
      border-color: rgba(255, 90, 61, 0.95) !important;
      box-shadow: 0 0 0 3px rgba(255, 90, 61, 0.18) !important;
    }

    /* предотвращаем авто-зум на iOS при фокусе */
    /* смартфоны / узкие экраны: единая геометрия приложения на весь экран */
    @media (max-width: 640px) {
      :root { --mPadX: var(--content-edge-x); --wrapW: calc(100vw - 2 * var(--mPadX)); }
      .gptlike-wrapper,
      .gptlike-wrapper.chat-mode,
      .gptlike-wrapper.onboarding-active,
      .gptlike-wrapper.auth-active {
        position: fixed;
        inset: 0;
        margin: 0;
        padding: 0;
        width: 100vw;
        max-width: 100vw;
        height: 100dvh;
        min-height: 100dvh;
        max-height: 100dvh;
        transform: none;
        --app-radius: 0px;
        border-radius: 0;
        clip-path: none;
        box-shadow: none;
      }
      html,
      body {
        height: 100dvh;
        min-height: 100dvh;
      }
      #appGlobalBackground {
        height: 100dvh;
      }
      #appGlobalBackground::after {
        background:
          linear-gradient(180deg, var(--edge-fade-top) 0%, rgba(0,0,0,0) var(--edge-fade-size)),
          linear-gradient(0deg, var(--edge-fade-bottom) 0%, rgba(0,0,0,0) var(--edge-fade-size)),
          linear-gradient(180deg, var(--app-bg-after-a) 0%, var(--app-bg-after-c) 100%);
      }
    }

    /* iOS PWA/standalone: use largest viewport height to avoid top/bottom gaps */
    @supports (height: 100lvh) {
      html,
      body {
        height: 100lvh;
        min-height: 100lvh;
      }
      #appGlobalBackground {
        height: 100lvh;
      }
      @media (max-width: 640px) {
        .gptlike-wrapper,
        .gptlike-wrapper.chat-mode,
        .gptlike-wrapper.onboarding-active,
        .gptlike-wrapper.auth-active {
          height: 100lvh;
          min-height: 100lvh;
          max-height: 100lvh;
        }
      }
    }

@media (max-width: 640px) {
      :root {
        /* мобильные размеры: чуть меньше, но крупные */
        --btnH: 70px;
        --btnFz: clamp(16px, 4.8vw, 18px);
      }
      .input { font-size: 16px; }
    }

    /* кнопка второго очистителя — тот же стиль */
    #clearPostsHistory.btn-secondary {
      border-radius: var(--radius);
    }

    #authEmail,
    #authPassword {
      height: var(--auth-control-h);
      min-height: var(--auth-control-h);
      max-height: var(--auth-control-h);
      padding: 10px 12px;
      border-radius: 14px;
      text-align: left;
    }

    #authPassword {
      padding-right: 12px;
    }
    #authContainer .input,
    #authContainer #authEmail,
    #authContainer #authPassword {
      background: #000000;
      background-color: #000000;
      border-color: rgba(255, 184, 107, 0.6);
    }
    #authContainer .input:focus,
    #authContainer #authEmail:focus,
    #authContainer #authPassword:focus {
      background: #000000;
      background-color: #000000;
      border-color: rgba(255, 184, 107, 0.7);
    }
    #authContainer .input:hover,
    #authContainer #authEmail:hover,
    #authContainer #authPassword:hover {
      border-color: rgba(255, 184, 107, 0.65);
    }
    #authContainer .input::placeholder,
    #authContainer #authEmail::placeholder,
    #authContainer #authPassword::placeholder {
      color: rgba(184, 196, 214, 0.70);
      -webkit-text-fill-color: rgba(184, 196, 214, 0.70);
    }

    .auth-input--password {
      display: flex;
      align-items: stretch;
      gap: 0;
      --pw-toggle-size: 40px;
      width: 100%;
    }

    .auth-input--password #authPassword {
      flex: 1 1 auto;
      width: 100%;
      max-width: 100%;
      padding-right: 12px;
      border-radius: 14px 0 0 14px;
      border-right: 0;
    }

    .pw-toggle {
      position: relative;
      right: auto;
      top: auto;
      transform: none;
      width: var(--pw-toggle-size);
      min-width: var(--pw-toggle-size);
      height: auto;
      border: 1px solid rgba(255, 184, 107, 0.6);
      border-left: 1px solid rgba(255, 184, 107, 0.6);
      border-radius: 0 14px 14px 0;
      background: #000000;
      color: rgba(230, 238, 248, 0.85);
      display: grid;
      place-items: center;
      cursor: pointer;
      transition: none;
      box-shadow: none;
    }

    .pw-toggle:hover,
    .pw-toggle:active,
    .pw-toggle:focus,
    .pw-toggle:focus-visible {
      background: #000000;
      color: #ffb86b;
      border-color: rgba(255, 184, 107, 0.7);
      transform: none;
    }

    .pw-toggle svg {
      width: 18px;
      height: 18px;
    }

    /* Keep browser autofill icon area free; our toggle is outside input area */
    #authPassword::-ms-reveal,
    #authPassword::-ms-clear {
      display: none;
    }

    #authEmail:-webkit-autofill,
    #authPassword:-webkit-autofill {
      -webkit-text-fill-color: var(--text) !important;
      transition: background-color 5000s ease-in-out 0s;
      box-shadow: 0 0 0px 1000px rgba(0, 0, 0, 0.62) inset !important;
      caret-color: var(--text);
    }

    #authEmail:-webkit-autofill:focus,
    #authPassword:-webkit-autofill:focus {
      box-shadow:
        0 0 0px 1000px rgba(0, 0, 0, 0.72) inset,
        0 0 0 3px rgba(249, 115, 22, 0.18) !important;
    }

    .auth-msg {
      font-size: var(--auth-text-sm);
      min-height: 18px;
      color: var(--auth-accent-2);
      text-align: center;
      width: 100%;
      margin: 0;
      z-index: 1;
    }

    .btn-primary,
    .btn-secondary {
      border: none;
      cursor: pointer;
      font-weight: var(--btnFw);
      font-size: var(--btnFz);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      transition: transform 0.18s, box-shadow 0.18s, filter 0.18s, background 0.18s, border-color 0.18s;
      will-change: transform;
      user-select: none;
      position: relative;
      overflow: hidden;
    }
    .btn-secondary.btn-wide {
      width: 100%;
      height: var(--btnH);
      justify-content: center;
      border-radius: var(--radius);
      padding: 0 14px;
      gap: 10px;
    }

    .btn-with-icon svg {
      width: 18px;
      height: 18px;
      flex-shrink: 0;
    }

    /* ===== Posts mode (используем основной messages) ===== */
    .gptlike-wrapper.posts-open .composer-wrapper {
      display: none;
    }
    /* оставляем грид, но прячем содержимое селектора, чтобы кнопки не сдвигались */
    .gptlike-wrapper.posts-open .header-left {
      visibility: hidden;
    }
    .gptlike-wrapper.posts-open .chat-spread-row {
      display: none !important;
    }

.posts-cards {
  display: flex;
  gap: 10px;
  padding: 6px 0 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}

    .post-card-btn {
      appearance: none;
      border: 1px solid rgba(255,255,255,0.14);
      background: color-mix(in srgb, var(--panel) 78%, transparent);
      color: var(--text);
      border-radius: 14px;
      padding: 12px 14px;
      font-weight: 400;
      min-width: 140px;
      min-height: 88px;
      scroll-snap-align: start;
      cursor: pointer;
      box-shadow: var(--shadow-1);
      transition: transform 0.12s, border-color 0.16s, background 0.16s;
      white-space: nowrap;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 6px;
    }

    .post-card-btn:hover {
      transform: translateY(-1px);
      border-color: rgba(255,255,255,0.26);
    }

    .post-card-meta {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }
    .post-card-date {
      font-size: 12px;
      font-weight: 500;
      color: rgba(255,255,255,0.65);
      opacity: 0.8;
      text-align: left;
      flex: 0 0 auto;
      min-width: auto;
    }
    .post-card-time {
      font-size: 12px;
      font-weight: 500;
      color: rgba(255,255,255,0.65);
      opacity: 0.86;
      text-align: right;
      flex: 0 0 auto;
    }
    .post-card-snippet {
      font-size: 14px;
      line-height: 1.35;
      color: var(--text);
      white-space: pre; /* сохраняем переносы, не центруем */
      max-height: calc(1.35em * 3);
      overflow: hidden;
      font-weight: 400;
      text-align: left;
    }
    .post-card-read {
      margin-top: auto;
      align-self: flex-end;
      font-size: 12px;
      line-height: 1.2;
      font-weight: 600;
      color: rgba(184, 196, 214, 0.84);
      text-align: right;
    }

    .post-btn {
      border: 1px solid rgba(255,255,255,0.16);
      background: color-mix(in srgb, var(--panel) 78%, rgba(255,255,255,0.05));
      color: var(--text);
      border-radius: 14px;
      padding: 8px 12px;
      font-weight: 800;
      cursor: pointer;
      transition: transform 0.12s, border-color 0.16s, background 0.16s;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      height: 42px;
    }

    .post-btn.icon-only {
      min-width: 42px;
      width: 42px;
      justify-content: center;
      gap: 0;
      padding: 8px;
    }

    .post-btn:hover { transform: translateY(-1px); border-color: rgba(255,255,255,0.26); }

    .post-actions {
      display: inline-flex;
      gap: 8px;
    }

    .post-action {
      border: 1px solid rgba(255,255,255,0.12);
      background: rgba(255,255,255,0.04);
      color: var(--text);
      border-radius: 12px;
      padding: 6px 10px;
      font-weight: 700;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      transition: transform 0.12s, border-color 0.16s, background 0.16s;
    }

    .post-action:hover {
      transform: translateY(-1px);
      border-color: rgba(255,255,255,0.2);
      background: rgba(255,255,255,0.08);
    }

    .post-action[data-active="1"] {
      border-color: var(--accent-1);
      background: color-mix(in srgb, var(--accent-1) 18%, transparent);
      color: var(--text);
    }
    .post-btn[data-active="1"] {
      border-color: var(--accent-1);
      background: color-mix(in srgb, var(--accent-1) 18%, transparent);
      color: var(--text);
    }

    .posts-empty,
    .posts-error {
      width: 100%;
      min-height: 120px;
      border: 1px dashed var(--border);
      border-radius: var(--radius);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--muted);
      text-align: center;
      padding: 18px;
    }

    .btn-wide {
      width: 100%;
      height: var(--btnH);
      justify-content: center;
    }

    .btn-primary::before,
    .btn-secondary::before {
      content: "";
      position: absolute;
      inset: -2px;
      background: var(--shine);
      opacity: 0;
      transition: opacity 0.18s ease;
      pointer-events: none;
    }

    .btn-primary:hover::before,
    .btn-secondary:hover::before {
      opacity: 0.7;
    }

    .btn-primary {
      background:
        radial-gradient(120px 60px at 15% 30%, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 55%),
        linear-gradient(90deg, var(--accent-1), var(--accent-2));
      color: var(--btn-text, #ffffff);
      box-shadow:
        0 10px 22px rgba(0, 0, 0, 0.28);
    }

    .btn-primary:hover {
      filter: brightness(1.05);
      transform: translateY(-2px);
    }

    .btn-primary:active {
      transform: translateY(0);
      filter: brightness(0.98);
    }

    .btn-secondary {
      background:
        radial-gradient(120px 60px at 20% 20%, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0) 60%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
      color: var(--text);
      border: 1px solid rgba(255, 255, 255, 0.10);
      box-shadow: 0 8px 18px rgba(0, 0, 0, 0.22);
    }

    .btn-secondary:hover {
      transform: translateY(-1px);
      border-color: rgba(255, 255, 255, 0.16);
    }

    .btn-secondary:active {
      transform: translateY(0);
    }

    /* Auth screen buttons: match main CTA outline style + inner glow */
    .auth-center .btn-primary {
      background: var(--auth-btn-bg);
      color: var(--auth-btn-text);
      border: none;
      box-shadow: var(--auth-btn-shadow);
    }
    .auth-center .btn-primary:hover {
      filter: brightness(1.02);
      transform: translateY(-1px);
    }
    .auth-center .btn-secondary{
      background: var(--auth-btn-bg);
      color: var(--auth-btn-text);
      border: none;
      box-shadow: var(--auth-btn-shadow);
    }
    .auth-center .btn-secondary:hover,
    .auth-center .btn-secondary:active{
      filter: brightness(1.02);
      transform: translateY(-1px);
    }
    .auth-center .btn-primary::before,
    .auth-center .btn-secondary::before{
      display: none;
    }

    .auth-buttons {
      width: 100%;
      max-width: var(--auth-control-w);
      margin-top: 0;
      display: grid;
      grid-template-columns: 1fr;
      gap: var(--auth-gap);
      align-items: center;
      z-index: 1;
    }

    .auth-buttons .btn-primary,
    .auth-buttons .btn-secondary {
      height: var(--auth-control-h);
      width: 100%;
      padding: 0 14px;
      border-radius: 14px;
      font-size: var(--btnFz);
      line-height: var(--auth-control-h);
      white-space: normal;
      text-align: center;
    }

    .auth-trial-note {
      width: 100%;
      max-width: var(--auth-control-w);
      margin: 2px auto 0;
      color: rgba(197, 202, 210, 0.62);
      font-size: clamp(11px, 1.75vw, 13px);
      line-height: 1.35;
      font-weight: 500;
      text-align: center;
      text-wrap: balance;
    }
    #authContainer[data-auth-mode="login"] #registerBtn {
      display: none !important;
    }
    #authContainer .auth-trial-note {
      display: none !important;
    }
    #authContainer[data-auth-mode="register"] .auth-trial-note {
      display: block !important;
    }
    #authContainer[data-auth-mode="register"] #loginBtn,
    #authContainer[data-auth-mode="register"] #resetPasswordBtn {
      display: none !important;
    }

    .reset-pass {
      cursor: pointer;
      background: none;
      color: #ffb86b;
      -webkit-text-fill-color: currentColor;
      font-size: clamp(13px, 2.2vw, 15px);
      font-weight: 600;
      white-space: nowrap;
      line-height: 1.25;
      margin: 6px 0 0;
      justify-self: end;
      transition: none;
      animation: none;
      border: 0;
      outline: none;
      box-shadow: none;
      text-decoration: none;
    }

    .auth-msg {
      font-size: var(--fz-small);
      min-height: 18px;
      color: var(--auth-accent-2);
      text-align: center;
      width: 100%;
      margin: 0;
      z-index: 1;
      padding: 0;
      border-radius: 0;
      background: none;
      border: none;
    }

    .reset-pass:hover,
    .reset-pass:active {
      filter: none;
      transform: none;
    }

    .icon-only {
      width: 100%;
      min-width: 0;
      height: var(--btnH);
      min-height: var(--btnH);
      padding: 0 12px;
      border: 1px solid rgba(255, 255, 255, 0.10);
      box-shadow: 0 8px 18px rgba(0, 0, 0, 0.22);
      position: relative;
      border-radius: 14px;
      gap: 6px;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }

    .icon-only svg {
      width: 20px;
      height: 20px;
      flex: 0 0 20px;
      opacity: 0.95;
    }
    #gptlike-chat[data-theme-light="1"] .icon-only svg,
    #gptlike-chat[data-theme-light="1"] #messagesBtn svg,
    #gptlike-chat[data-theme-light="1"] .btn-with-icon svg {
      color: #1f2937 !important;
      opacity: 1;
    }
    /* Dark themes: make icons lighter so they don't get lost */
    #gptlike-chat:not([data-theme-light="1"]) .icon-only svg,
    #gptlike-chat:not([data-theme-light="1"]) .btn-with-icon svg,
    #gptlike-chat:not([data-theme-light="1"]) .onb-btn-ico svg {
      color: #f8fafc;
      opacity: 1;
    }

    /* NB: держим стили счётчика глобальными.
       Раньше @keyframes/цвет лежали внутри media (max-width:640px),
       из‑за этого на десктопе не было ни анимации, ни цвета темы.
       При будущих правках не переносить unreadPulse/цветы в mobile‑only блоки. */
    /* глобальный стиль счётчика непрочитанных */
    .unread-number{
      font-size: 12px;
      font-weight: 800; /* чуть жирнее */
      color: var(--link) !important; /* берём акцент темы */
      -webkit-text-fill-color: var(--link) !important;
      line-height: 1;
      pointer-events: none;
      text-shadow:
        0 1px 6px rgba(0,0,0,0.35),
        0 0 18px currentColor,
        0 0 28px currentColor;
      margin-left: 4px;
      display: inline-flex;
      align-items: center;
    }
    /* стандартные цвета счётчика (на случай, если понадобится в других местах) */
    #messagesBtn .unread-number {color: var(--link) !important; -webkit-text-fill-color: var(--link) !important;}

    /* медленное мигание числа (анимация только если есть непрочитанные) */
    @keyframes unreadPulse {
      0%   { opacity: 1;   text-shadow: 0 0 22px currentColor, 0 0 32px currentColor; }
      50%  { opacity: 0.55; text-shadow: 0 0 6px currentColor; }
      100% { opacity: 1;   text-shadow: 0 0 22px currentColor, 0 0 32px currentColor; }
    }
    @-webkit-keyframes unreadPulse {
      0%   { opacity: 1;   text-shadow: 0 0 22px currentColor, 0 0 32px currentColor; }
      50%  { opacity: 0.55; text-shadow: 0 0 6px currentColor; }
      100% { opacity: 1;   text-shadow: 0 0 22px currentColor, 0 0 32px currentColor; }
    }
    .unread-anim {
      animation: unreadPulse 1.8s ease-in-out infinite !important;
      -webkit-animation: unreadPulse 1.8s ease-in-out infinite !important;
      animation-play-state: running !important;
      -webkit-animation-play-state: running !important;
    }
    /* гарантируем анимацию на десктопе/мобайле через более конкретный селектор */
    #messagesBtn[data-badge]:not([data-badge=\"\"]):not([data-badge=\"0\"]) .unread-number {
      animation: unreadPulse 1.8s ease-in-out infinite !important;
      -webkit-animation: unreadPulse 1.8s ease-in-out infinite !important;
      animation-play-state: running !important;
      -webkit-animation-play-state: running !important;
    }

    #uploadBtn svg {
      color: color-mix(in srgb, var(--link) 70%, #ffffff 30%);
    }

    #gptlike-chat[data-theme-light="1"] #uploadBtn svg {
      color: color-mix(in srgb, var(--link) 65%, #1f2937 35%);
    }

    .sr {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }

    /* =========================
       CHAT
       ========================= */
    .chat-wrapper {
      display: none;
      flex: 1;
      flex-direction: column;
      opacity: 0;
      transform: translateY(8px);
      transition: opacity 0.35s, transform 0.35s;
      min-height: 0;
      position: relative;
      z-index: 1;
      width: 100%;
      height: 100%;
      background: transparent;
    }

    .chat-wrapper.show {
      display: flex;
      opacity: 1;
      transform: translateY(0);
    }

    .chat-header {
      position: sticky;
      top: 0;
      z-index: 10;
      background: transparent;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      border-top-left-radius: var(--app-radius);
      border-top-right-radius: var(--app-radius);
    }

    #gptlike-chat[data-theme-light="1"] .chat-header {
      background: transparent;
    }

    .header-row {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px var(--content-edge-x);
      position: relative;
      flex-wrap: nowrap;
    }

    .header-left {
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 0;
      flex: 2 1 0;
    }
    .header-right {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 10px;
      flex: 1 1 0;
      min-width: 0;
    }

    .mode-select-wrap {
      display: flex;
      align-items: center;
      gap: 8px;
      user-select: none;
      min-width: 0;
    }

    .mode-label {
      font-size: var(--fz-small);
      color: var(--link);
      white-space: nowrap;
      font-weight: 800;
      display: inline-flex;
      align-items: center;
      gap: 4px;
    }

    .mode-label::after {
      content: "➜";
      font-weight: 900;
      font-size: 13px;
      display: inline-block;
      transform-origin: center;
      animation: arrowPulse 1.35s ease-in-out infinite;
    }

    @keyframes arrowPulse {
      0%, 100% { transform: translateX(0); opacity: 0.85; }
      50% { transform: translateX(4px); opacity: 1; }
    }


    .mode-select {
      background: rgba(0, 0, 0, 0.22);
      color: var(--text);
      border: 1px solid rgba(255, 255, 255, 0.10);
      border-radius: 14px;
      padding: 10px 34px 10px 12px;
      font-size: var(--fz-small);
      min-width: 260px;
      max-width: 52vw;
      appearance: none;
      position: relative;
      background-image:
        linear-gradient(45deg, transparent 50%, rgba(230, 238, 248, 0.65) 50%),
        linear-gradient(135deg, rgba(230, 238, 248, 0.65) 50%, transparent 50%);

      background-position:
        calc(100% - 18px) 50%,
        calc(100% - 13px) 50%;

      background-size:
        5px 5px,
        5px 5px;

      background-repeat: no-repeat;
      transition: border-color 0.18s, box-shadow 0.18s, background 0.18s;
      box-shadow:
        0 0 0 1px rgba(255,255,255,0.05),
        var(--shadow-inset);
    }

    .mode-select:focus,
    .mode-select:focus-visible,
    .mode-select:active {
      outline: none;
      border-color: rgba(255, 255, 255, 0.10) !important;
      box-shadow: var(--shadow-inset) !important;
    }

    .mode-select.glow {
      animation: modeGlow 0.32s ease-out 1;
      border-color: var(--accent-1) !important;
    }

    @keyframes modeGlow {
      0% {
        box-shadow:
          0 0 0 1px rgba(249,115,22,0.85),
          0 0 8px rgba(255,120,40,0.55),
          0 0 12px rgba(255,90,61,0.38),
          var(--shadow-inset);
        border-color: var(--accent-1);
      }
      70% {
        box-shadow:
          0 0 0 1px rgba(249,115,22,0.35),
          0 0 6px rgba(255,120,40,0.28),
          0 0 10px rgba(255,90,61,0.18),
          var(--shadow-inset);
        border-color: var(--accent-1);
      }
      100% {
        box-shadow:
          0 0 0 1px rgba(255,255,255,0.05),
          var(--shadow-inset);
        border-color: rgba(255,255,255,0.10);
      }
    }

    #gptlike-chat[data-theme-light="1"] .mode-select {
      background: #ffffff;
      color: #1f2937;
      border-color: var(--border);
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.06);
    }

    .chat-body {
      display: flex;
      flex-direction: column;
      flex: 1;
      min-height: 0;
      background: transparent !important;
      position: relative;
    }

    .messages {
      flex: 1 1 auto;
      overflow: auto;
      padding: 12px 16px;
      display: flex;
      flex-direction: column;
      gap: 14px;
      scroll-behavior: smooth;
      overscroll-behavior: contain;
      touch-action: pan-y;
      -webkit-overflow-scrolling: touch;
      background: transparent;
      border: 1px solid rgba(255, 255, 255, 0.10);
      border-radius: 14px;
      box-shadow: var(--shadow-inset);
      position: relative;
      margin: 10px var(--content-edge-x);
      user-select: none;
      -webkit-user-select: none;
      -ms-user-select: none;
    }

    #gptlike-chat[data-theme-light="1"] .messages {
      background: transparent;
      border-color: var(--border);
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.06);
    }

    .message {
      position: relative;
      display: flex;
      flex-direction: column;
      opacity: 0;
      transform: translateY(12px) scale(0.985);
      transition: opacity 0.28s ease, transform 0.28s ease;
      max-width: 100%;
      line-height: 1.65;
      background: transparent;
    }

    .message.show {
      opacity: 1;
      transform: translateY(0) scale(1);
    }

    .message.user,
    .message.bot {
      align-self: stretch;
    }

    .bubble {
      font-size: calc(clamp(14px, 0.95vw, 15px) * var(--chatFontMul));
      font-weight: var(--chatFontWeight);
      color: var(--text);
      white-space: pre-wrap;
      overflow-wrap: break-word;
      box-shadow: none;
      border: none;
      background: transparent;
      display: block;
      max-width: 100%;
      user-select: none;
      -webkit-user-select: none;
      -ms-user-select: none;
      animation: msgRise 0.16s cubic-bezier(0.25, 0.8, 0.4, 1) both;
    }

    /* в тёмных темах слегка приглушаем основной текст, чтобы не слепил */
    #gptlike-chat:not([data-theme-light="1"]) .bubble,
    #gptlike-chat:not([data-theme-light="1"]) .time-badge {
      color: color-mix(in srgb, #e6eef8 80%, #9ca3af 20%);
    }

    .message.menu-reply .bubble {
      padding: 10px 12px;
      border-radius: 12px;
      border: 1px solid transparent;
      box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
      background: transparent;
      display: block;
      line-height: 1.55;
    }

    .message.menu-reply .bubble p {
      margin: 0;
      line-height: 1.55;
    }

    .bubble:empty {
      display: none;
    }

    .message.user .bubble {
      margin-left: auto;
      text-align: right;
      padding: 8px 12px;
      border-radius: 12px;
      background: transparent;
      border: 1px solid transparent;
    }

    .message.bot .bubble {
      margin-right: auto;
      text-align: left;
    }

    .bubble[data-nocopy="1"] {
      user-select: none;
      -webkit-user-select: none;
      -ms-user-select: none;
    }

    .bubble p {
      margin: 0 0 10px;
    }

    .bubble p:last-child {
      margin-bottom: 0;
    }

    .bubble ul,
    .bubble ol {
      margin: 0 0 10px 18px;
      padding: 0;
    }

    .bubble li {
      margin: 0 0 6px;
    }

    .bubble li:last-child {
      margin-bottom: 0;
    }

    .bubble code {
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
      font-size: 0.95em;
      padding: 2px 6px;
      border-radius: 10px;
      background: rgba(0, 0, 0, 0.22);
      border: 1px solid rgba(255, 255, 255, 0.10);
    }

    .bubble pre {
      margin: 10px 0;
      padding: 12px;
      border-radius: 16px;
      overflow: auto;
      background: rgba(0, 0, 0, 0.26);
      border: 1px solid rgba(255, 255, 255, 0.10);
      box-shadow: 0 14px 30px rgba(0, 0, 0, 0.22);
    }

    #gptlike-chat[data-theme-light="1"] .bubble code {
      background: rgba(0, 0, 0, 0.06);
      border-color: var(--border);
      color: #0f172a;
    }

    #gptlike-chat[data-theme-light="1"] .bubble pre {
      background: #ffffff;
      border-color: var(--border);
      box-shadow: 0 12px 26px rgba(0, 0, 0, 0.08);
    }

    #gptlike-chat[data-theme-light="1"] .message.user .bubble {
      background: transparent;
      border-color: transparent;
    }

    .message.typing .bubble {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      min-height: 44px;
      min-width: 220px;
      padding: 10px 12px;
      border-radius: 999px;
      border: 1px solid rgba(255, 255, 255, 0.10);
      background: rgba(0, 0, 0, 0.18);
      box-shadow: 0 12px 26px rgba(0, 0, 0, 0.20);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      overflow: hidden;
    }

    .message.typing .bubble::after {
      content: "";
      position: absolute;
      top: -20%;
      bottom: -20%;
      width: 42%;
      left: 0;
      background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0));
      opacity: 0.55;
      filter: blur(6px);
      transform: translateX(-120%);
      animation: waitShimmer 1.6s ease-in-out infinite;
      pointer-events: none;
    }

    #gptlike-chat[data-theme-light="1"] .message.typing .bubble {
      background: rgba(255, 255, 255, 0.92);
      border-color: var(--border);
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
    }

    #gptlike-chat[data-theme-light="1"] .message.typing .bubble::after {
      opacity: 0.28;
    }

    .typing-ui {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      position: relative;
      z-index: 1;
    }

    .typing-dots {
      display: inline-flex;
      gap: 4px;
      transform: translateY(1px);
    }

    .typing-dots i {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--typing);
      opacity: 0.35;
      animation: td 1.2s infinite ease-in-out;
    }

    .typing-dots i:nth-child(2) {
      animation-delay: 0.2s;
    }

    .typing-dots i:nth-child(3) {
      animation-delay: 0.4s;
    }

    .time-badge {
      font-size: 12px;
      color: rgba(230, 238, 248, 0.78);
      opacity: 0.98;
      padding: 3px 10px;
      border-radius: 999px;
      border: 1px solid rgba(255, 255, 255, 0.12);
      background: rgba(0, 0, 0, 0.18);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      font-variant-numeric: tabular-nums;
      min-width: 68px;
      text-align: center;
      white-space: nowrap;
      position: relative;
      z-index: 1;
    }

    #gptlike-chat[data-theme-light="1"] .time-badge {
      border-color: var(--border);
      background: rgba(255, 255, 255, 0.92);
      color: #475569;
    }

    .cancel-btn-inline {
      appearance: none;
      border: none;
      cursor: pointer;
      user-select: none;
      height: 28px;
      padding: 0 10px;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background:
        radial-gradient(120px 60px at 20% 20%, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0) 60%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
      color: rgba(230, 238, 248, 0.90);
      border: 1px solid rgba(255, 255, 255, 0.12);
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.22);
      transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s, filter 0.15s, background 0.15s;
      position: relative;
      z-index: 1;
      font-weight: var(--btnFw);
      font-size: 12.5px;
    }

    .cancel-btn-inline svg {
      width: 14px;
      height: 14px;
      opacity: 0.95;
    }

    .cancel-btn-inline:hover {
      transform: translateY(-1px);
      border-color: rgba(255, 255, 255, 0.18);
      box-shadow:
        0 12px 26px rgba(0, 0, 0, 0.26),
        0 0 0 1px var(--glow);
    }

    .cancel-btn-inline:active {
      transform: translateY(0);
    }

    #gptlike-chat[data-theme-light="1"] .cancel-btn-inline {
      background: #ffffff;
      color: #1f2937;
      border: 1px solid var(--border);
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
    }

    .reveal-in {
      animation: revealIn 0.22s ease-out both;
    }

    .typed-block {
      display: block;
    }

    .typed-text {
      white-space: pre-wrap;
    }

    .typed-caret {
      display: inline-block;
      width: 10px;
      height: 1em;
      margin-left: 2px;
      border-right: 2px solid var(--typing);
      transform: translateY(2px);
      animation: caretBlink 1s steps(1) infinite;
      opacity: 0.9;
    }

    #gptlike-chat:not([data-theme-light="1"]) .messages a,
    #gptlike-chat:not([data-theme-light="1"]) .bubble a {
      color: var(--link);
      text-decoration: underline;
    }

    #gptlike-chat[data-theme-light="1"] .messages a,
    #gptlike-chat[data-theme-light="1"] .bubble a {
      color: var(--link);
      text-decoration: underline;
    }

    .bot-cmd {
      color: var(--link);
      text-decoration: underline;
      cursor: pointer;
      display: inline-block;
      margin: 2px 0;
      transition: background-color 0.16s, transform 0.16s, box-shadow 0.16s;
      border-radius: 10px;
      padding: 3px 8px;
      user-select: none;
      -webkit-user-select: none;
      -ms-user-select: none;
    }

    .bot-cmd:hover {
      background-color: rgba(127, 127, 127, 0.14);
      transform: translateY(-1px);
      box-shadow: 0 10px 22px rgba(0, 0, 0, 0.18);
    }

    .bot-cmd:active {
      transform: translateY(0);
    }

    #gptlike-chat[data-theme-light="1"] .bot-cmd {
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 8px 12px;
      margin: 4px 0;
      border-radius: 14px;
      background: #ffffff;
      border: 1px solid var(--border);
      color: var(--link);
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.06);
    }

    #gptlike-chat[data-theme-light="1"] .bot-cmd:hover {
      border-color: rgba(0, 0, 0, 0.12);
      transform: translateY(-1px);
      box-shadow:
        0 14px 30px rgba(0, 0, 0, 0.10),
        0 0 0 1px var(--glow);
    }

    /* ✅ QUICK REPLIES (Да/Нет/Мужской/Женский/м/ж) */
    .quick-reply {
      appearance: none;
      border: 1px solid rgba(255, 255, 255, 0.18);
      background: linear-gradient(90deg, rgba(249, 115, 22, 0.20), rgba(255, 90, 61, 0.16));
      color: var(--text);
      font-weight: 900;
      font-size: 0.88em; /* чуть меньше по высоте и ширине */
      line-height: 1;
      padding: 5px 9px;
      border-radius: 999px;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      box-shadow: 0 10px 22px rgba(0, 0, 0, 0.20);
      transition: transform 0.12s, box-shadow 0.12s, filter 0.12s, background 0.12s, border-color 0.12s;
      user-select: none;
      -webkit-user-select: none;
    }

    .quick-reply:hover {
      transform: translateY(-1px);
      filter: brightness(1.05);
      border-color: rgba(255, 255, 255, 0.26);
      box-shadow:
        0 14px 30px rgba(0, 0, 0, 0.26),
        0 0 0 1px var(--glow);
    }

    .quick-reply:active {
      transform: translateY(0);
      filter: brightness(0.98);
    }

    #gptlike-chat[data-theme-light="1"] .quick-reply {
      background: linear-gradient(90deg, rgba(36, 48, 65, 0.14), rgba(58, 71, 90, 0.10));
      border-color: rgba(0, 0, 0, 0.12);
      color: #1f2937;
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
    }

    #gptlike-chat[data-theme-light="1"] .quick-reply:hover {
      border-color: rgba(0, 0, 0, 0.18);
      box-shadow:
        0 14px 30px rgba(0, 0, 0, 0.10),
        0 0 0 1px rgba(36, 48, 65, 0.14);
    }
    /* ✅ /QUICK REPLIES */

    .message.placeholder {
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0;
      padding: 0;
    }

    .message.placeholder .bubble {
      display: none !important;
    }

    .message.placeholder.chat-placeholder {
      align-items: flex-start;
      justify-content: flex-start;
      padding: 0;
    }

    .message.placeholder.chat-placeholder .bubble {
      display: block !important;
      padding: 0;
      border-radius: 0;
      background: transparent;
      border: none;
      color: var(--ui-text-muted);
      font-weight: var(--chatFontWeight);
      line-height: 1.6;
      margin-right: auto;
      text-align: left;
    }

    #gptlike-chat[data-theme-light="1"] .message.placeholder.chat-placeholder .bubble {
      color: #4b5563;
    }

    .url-block {
      margin: 10px 0;
      display: flex;
      flex-direction: column;
      gap: 8px;
      max-width: min(560px, 70vw);
    }

    .url-label {
      font-size: 12px;
      color: rgba(230, 238, 248, 0.72);
      font-weight: 900;
      letter-spacing: 0.2px;
    }

    #gptlike-chat[data-theme-light="1"] .url-label {
      color: #475569;
    }

    .url-btn {
      width: fit-content;
      max-width: 100%;
    }

    .url-a {
      font-size: 12.5px;
      opacity: 0.95;
      word-break: break-all;
    }

    /* composer */
    .composer-wrapper {
      padding: 10px var(--content-edge-x);
      padding-bottom: calc(var(--screen-edge-bottom) + var(--keyboard-inset, 0px));
      background: linear-gradient(0deg, rgba(0, 0, 0, 0.34), rgba(0, 0, 0, 0));
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border-bottom-left-radius: var(--app-radius);
      border-bottom-right-radius: var(--app-radius);
    }

    #gptlike-chat[data-theme-light="1"] .composer-wrapper {
      background: linear-gradient(0deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0));
    }

    .composer {
      max-width: var(--wrapW);
      margin: 0 auto;
      display: flex;
      gap: var(--gap);
      align-items: flex-end;
    }

    .composer .btn-primary,
    .composer .btn-secondary {
      height: var(--btnH);
      border-radius: 14px;
    }

    #chatContainer .input {
      background: var(--chat-input-bg);
      border-color: rgba(255, 255, 255, 0.10);
      box-shadow: var(--shadow-inset);
      font-weight: 500;
    }

    #chatContainer .input:hover {
      border-color: rgba(255, 255, 255, 0.16);
    }

    #chatContainer .input:focus {
      border-color: var(--accent-1);
      box-shadow:
        0 0 0 3px var(--glow),
        0 16px 40px rgba(0, 0, 0, 0.35);
      background: var(--chat-input-bg);
    }

    #gptlike-chat[data-theme-light="1"] #chatContainer .input {
      background: #ffffff;
      color: #1f2937;
      border-color: var(--border);
      caret-color: #1f2937;
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.06);
    }

    #gptlike-chat[data-theme-light="1"] #chatContainer .input:focus {
      background: #ffffff;
      border-color: var(--accent-1);
      box-shadow:
        0 0 0 3px rgba(36, 48, 65, 0.12),
        0 14px 30px rgba(0, 0, 0, 0.08);
    }

    /* ===== Onboarding screen ===== */
    #onboardingScreen {
      --onb-btn-h: clamp(36px, 6.2vh, 54px);
      position: fixed;
      inset: 0;
      border-radius: 0;
      background: transparent;
      border: none;
      box-shadow: none;
      display: none;
      flex-direction: column;
      padding: var(--screen-edge-top) var(--screen-edge-x) var(--screen-edge-bottom);
      z-index: 10000;
      color: var(--text);
      transition: opacity 0.2s ease, transform 0.2s ease;
      opacity: 0;
      transform: translateY(12px);
      overflow: hidden;
      isolation: isolate;
    }
    #onboardingScreen::before {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 0;
      background: transparent;
    }
    #onboardingScreen[data-page="1"]::before {
      background: transparent;
    }
    #onboardingScreen.show {
      display: flex;
      opacity: 1;
      transform: translateY(0);
    }
    #onboardingScreen.hide {
      opacity: 0;
      pointer-events: none;
    }
    .onb-list {
      flex: 1 1 auto;
      display: flex;
      flex-direction: column;
      gap: 8px;
      overflow: hidden;
      padding-bottom: 4px;
      margin-bottom: 0;
      width: 100%;
      max-width: 1080px;
      padding-inline: var(--content-edge-x);
      margin-inline: auto;
      box-sizing: border-box;
    }
    .onb-intro {
      margin: 0 auto;
      padding: 16px 18px 14px;
      color: var(--text);
      border: none;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
      max-width: 1080px;
      width: 100%;
      box-sizing: border-box;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 10px;
      text-align: left;
      overflow: hidden;
    }
    .onb-hero {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0;
      margin: 8px 0 2px;
      text-align: center;
      position: relative;
      z-index: 13010;
      pointer-events: none;
    }
    .onb-logo {
      font-weight: 300;
      font-size: clamp(30px, 3.7vw, 41px);
      letter-spacing: 1px;
      text-transform: uppercase;
      line-height: 0.98;
      margin-bottom: 0;
      background: linear-gradient(90deg,
        #ffb86b 0%,
        #ffb86b 14%,
        #ffb86b 28%,
        #ffb86b 42%,
        #ffb86b 50%,
        #ffb86b 58%,
        #ffb86b 72%,
        #ffb86b 86%,
        #ffb86b 100%);
      background-size: 200% 100%;
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      text-shadow: none;
      opacity: 0;
      animation: none;
      position: relative;
      z-index: 1;
      will-change: transform, filter, opacity;
    }
    .onb-page.cards-ready .onb-logo{
      animation: logoReveal 1200ms ease-out both, logoScan 12s ease-in-out infinite;
      opacity: 1;
    }
    @media (prefers-reduced-motion: reduce) {
      .onb-logo { animation: none; opacity: 1; }
    }
    .onb-logo-shadow{
      position: absolute;
      left: 50%;
      top: 56%;
      transform: translate(-50%, -50%);
      width: clamp(280px, 78vw, 640px);
      aspect-ratio: 1;
      border-radius: 50%;
      background: radial-gradient(circle,
        rgba(0, 0, 0, 0.2) 0%,
        rgba(0, 0, 0, 0.12) 45%,
        rgba(0, 0, 0, 0.04) 70%,
        rgba(0, 0, 0, 0) 100%);
      filter: blur(3px);
      pointer-events: none;
      z-index: 11000;
    }
    .onb-tagline {
      display: inline-block;
      font-size: clamp(14px, 2.6vw, 18px);
      font-weight: 750;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: transparent;
      background: var(--onb-tagline-grad);
      background-size: 260% 260%;
      -webkit-background-clip: text;
      background-clip: text;
      line-height: 1.25;
      white-space: nowrap; /* без переносов */
      padding: 0 3px;
      margin: 0 auto;
      text-shadow: 0 0 14px rgba(255, 184, 107, 0.32);
      animation:
        titleGradientFlow 12s ease-in-out infinite,
        titlePulse 3.2s ease-in-out infinite;
      position: relative;
      z-index: 1;
      pointer-events: none;
    }
    .onb-tagline-row{
      display:none;
    }
    .onb-hero::after{
      content:"";
      position:absolute;
      left:50%;
      top:55%;
      width:75vw;
      max-width:900px;
      aspect-ratio:1;
      transform:translate(-50%,-50%);
      pointer-events:none;
      z-index:0;
      display:none;
    }
    .onb-intro ul {
      margin: 0;
      padding-left: 0;
      list-style: none;
      color: rgba(230, 238, 248, 0.9);
      font-size: clamp(14px, 2.5vw, 16.8px);
      line-height: 1.55;
      display: grid;
      gap: 8px;
      width: 100%;
      text-align: left;
      word-break: normal;
      hyphens: none;
      align-content: center;
    }
    .onb-intro-title{
      margin: 0 0 6px;
      font-size: clamp(13px, 3.2vw, 19px);
      font-weight: 700;
      letter-spacing: 0.02em;
      text-transform: uppercase;
      color: rgba(255, 184, 107, 0.82);
      text-align: center;
      word-break: keep-all;
      white-space: nowrap;
      line-height: 1.12;
    }
    .onb-intro li {
      position: relative;
      padding-left: 18px;
      font-weight: 640;
    }
    .onb-intro li::before {
      content: "";
      position: absolute;
      top: 0.54em;
      left: 5px;
      width: 6.5px;
      height: 6.5px;
      border-radius: 50%;
      background: var(--accent-1);
      box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.05);
    }
    @media (max-width: 480px) {
      .onb-intro { padding: 12px 14px; }
      .onb-intro ul { font-size: 14px; gap: 7px; line-height: 1.5; }
    }
    /* двухстраничный онбординг */
    .onb-pages {
      flex: 1 1 auto;
      display: grid;
      height: 100%;
      min-height: 0;
      position: relative;
      z-index: 2;
    }
    .onb-page {
      display: none;
      flex-direction: column;
      gap: 0;
      min-height: 0;
      height: 100%;
      position: relative;
    }
    .onb-page.active { display: flex; }
    .onb-page{
      --onb-edge: var(--menu-four-edge);
      --onb-bottom-edge: var(--menu-four-edge);
      --onb-item-pad: 6px;
      --onb-bottom-w: calc(100% - (var(--onb-bottom-edge) * 2));
      --onb-inner-w: calc(100% - (var(--onb-edge) * 2));
      --onb-list-w: calc(var(--onb-inner-w) + (var(--onb-item-pad) * 2));
    }
    .onb-frame{
      position: relative;
      inset: auto;
      width: 100%;
      height: 100%;
      min-height: 0;
      flex: 1 1 auto;
      margin: 0;
      overflow: hidden;
      display: flex;
      align-items: stretch;
      justify-content: center;
      box-sizing: border-box;
      background: transparent;
      z-index: 2;
    }
    .onb-page[data-page="1"] .onb-frame{
      background: transparent;
    }
    .onb-grid{
      display: grid;
      /* Чёткие доли экрана: 10/2.5/35/2.5/40/5/5 = 100% */
      grid-template-rows: 10% 2.5% 35% 2.5% 40% 5% 5%;
      height: 100%;
      width: 100%;
      align-items: stretch;
      justify-items: center;
      row-gap: 0;
      position: relative;
      z-index: 3;
    }
    .onb-page[data-page="2"] .onb-frame::before,
    .onb-page[data-page="3"] .onb-frame::before{
      content: "";
      position: absolute;
      inset: -35%;
      pointer-events: none;
      background:
        radial-gradient(closest-side at 18% 25%, var(--accent-1) 0%, transparent 64%),
        radial-gradient(closest-side at 82% 30%, var(--accent-2) 0%, transparent 66%),
        radial-gradient(closest-side at 55% 85%, var(--link) 0%, transparent 62%),
        radial-gradient(closest-side at 35% 70%, var(--accent-2) 0%, transparent 68%),
        linear-gradient(180deg, var(--panel), var(--bg-1));
      opacity: 0.20;
      filter: blur(30px) saturate(1.10);
      mix-blend-mode: screen;
      z-index: 0;
    }
    .onb-page[data-page="2"] .onb-frame::after,
    .onb-page[data-page="3"] .onb-frame::after{
      content: "";
      position: absolute;
      inset: -25%;
      pointer-events: none;
      background: conic-gradient(
        from 180deg at 50% 50%,
        transparent 0deg,
        rgba(255, 255, 255, 0.12) 40deg,
        transparent 88deg,
        rgba(255, 255, 255, 0.07) 132deg,
        transparent 210deg,
        rgba(255, 255, 255, 0.09) 260deg,
        transparent 360deg
      );
      opacity: 0.08;
      filter: blur(20px);
      mix-blend-mode: soft-light;
      z-index: 0;
    }
    #gptlike-chat[data-theme-light="1"] .onb-page[data-page="2"] .onb-frame::before,
    #gptlike-chat[data-theme-light="1"] .onb-page[data-page="3"] .onb-frame::before{
      opacity: 0.10;
      mix-blend-mode: multiply;
      filter: blur(24px) saturate(1.02);
    }
    #gptlike-chat[data-theme-light="1"] .onb-page[data-page="2"] .onb-frame::after,
    #gptlike-chat[data-theme-light="1"] .onb-page[data-page="3"] .onb-frame::after{
      opacity: 0.06;
      mix-blend-mode: overlay;
    }
    .onb-grid--page2{
      grid-template-rows: auto 1fr auto;
    }
    .onb-grid--page3{
      grid-template-rows: auto auto 1fr auto;
    }
    .onb-grid--page2 .onb-zone--top{ grid-row: 1; }
    .onb-grid--page2 .onb-zone--mid{ grid-row: 2; }
    .onb-grid--page2 .onb-zone--bottom{ grid-row: 3; }

    .onb-grid--page3 .onb-zone--top{ grid-row: 1; }
    .onb-grid--page3 .onb-zone--helper{ grid-row: 2; }
    .onb-grid--page3 .onb-zone--mid{ grid-row: 3; }
    .onb-grid--page3 .onb-zone--bottom{ grid-row: 4; }

    /* Align top bar + title + CTA with button edges */
    .onb-page[data-page="1"] .onb-zone0,
    .onb-page[data-page="1"] .onb-zone6,
    .onb-page[data-page="2"] .onb-zone--top,
    .onb-page[data-page="2"] .onb-zone--bottom,
    .onb-page[data-page="3"] .onb-zone--top,
    .onb-page[data-page="3"] .onb-zone--title,
    .onb-page[data-page="3"] .onb-zone--bottom{
      padding-inline: 0;
    }
    .onb-page .onb-mini-bar{
      width: var(--onb-inner-w);
      margin-inline: auto;
      padding-inline: 0;
      box-sizing: border-box;
    }
    .onb-page[data-page="1"] .onb-cta-row{
      width: var(--onb-inner-w);
      margin-inline: auto;
      padding-inline: 0;
      box-sizing: border-box;
    }
    .onb-page[data-page="3"] .onb-section-title{
      width: var(--onb-inner-w);
      margin-inline: auto;
      padding-inline: 0;
      box-sizing: border-box;
      font-size: clamp(12px, 2.2vw, 15px);
      text-transform: uppercase;
      letter-spacing: 0.12em;
      color: rgba(255,255,255,0.55);
      text-align: left;
    }
    .onb-page[data-page="2"] .onb-zone--mid,
    .onb-page[data-page="3"] .onb-zone--mid,
    .onb-page[data-page="3"] .onb-zone--helper{
      padding-inline: 0;
    }
    .onb-page[data-page="3"] .onb-zone--title{
      display: none;
    }

    .onb-grid--page2 .onb-zone--mid,
    .onb-grid--page3 .onb-zone--mid{
      align-items: stretch;
      justify-content: flex-start;
      padding-block: 10px;
      overflow: hidden;
    }
    .onb-grid--page2 .onb-zone--bottom,
    .onb-grid--page3 .onb-zone--bottom{
      align-items: center;
      justify-content: center;
    }
    .onb-grid--page2 .onb-list{
      max-width: 100%;
      padding-inline: 0;
      overflow-y: auto;
    }
    .onb-grid--page3 .onb-list{
      max-width: 100%;
      padding-inline: 0;
    }
    .onb-grid--page3 .onb-zone--helper{
      align-items: stretch;
      justify-content: center;
      padding-inline: 0;
      padding-block: 0;
    }
    .onb-grid--page3 .onb-zone--title{
      align-items: center;
      justify-content: flex-start;
      padding-inline: 0;
    }
    .onb-page[data-page="3"] .onb-zone--helper .onb-item{
      width: var(--onb-list-w);
      margin-inline: auto;
      height: 100%;
      min-height: 0;
      position: relative;
      display: grid;
      grid-template-areas: "stack";
      place-items: stretch;
      padding: var(--onb-item-pad);
      overflow: hidden;
      container-type: size;
      --onb-help-slice: 68px;
      --onb-scan-left: calc(100% - var(--onb-help-slice));
      --onb-scan-scale: 1;
    }
    .onb-page[data-page="3"] .onb-zone--helper .onb-item::before{
      content: "";
      position: absolute;
      top: 6px;
      right: 6px;
      bottom: 6px;
      width: var(--onb-help-slice);
      border-radius: 12px;
      background: var(--onb-help-slice-bg, rgba(255,255,255,0.06));
      pointer-events: none;
      z-index: 0;
    }
    .onb-page[data-page="3"] .onb-zone--helper .onb-item::after{
      content: "";
      position: absolute;
      top: 50%;
      left: var(--onb-scan-left);
      width: 1px;
      height: 30px;
      background: var(--onb-help-divider, rgba(255,255,255,0.22));
      transform: translateY(-50%) scaleY(var(--onb-scan-scale));
      transform-origin: center;
      transition: left 420ms ease, transform 420ms ease, opacity 200ms ease;
      pointer-events: none;
      opacity: 0.9;
      z-index: 1;
    }
    .onb-page[data-page="3"] .onb-zone--helper .onb-btn{
      grid-area: stack;
      justify-content: flex-start;
      text-align: left;
      padding-left: 14px;
      padding-right: 96px;
      position: relative;
      z-index: 1;
    }
    .onb-page[data-page="3"] .onb-zone--helper .onb-item-desc{
      grid-area: stack;
      align-self: stretch;
      justify-self: stretch;
      padding: 6px 96px 6px 14px;
      display: grid;
      align-items: center;
      font-size: clamp(10px, 1.2vh, 12px);
      line-height: 1.24;
      text-wrap: balance;
      opacity: 0;
      pointer-events: none;
      transition: opacity 180ms ease;
      overflow: hidden;
      clip-path: inset(0 0 0 var(--onb-scan-left));
      transition: opacity 180ms ease, clip-path 420ms ease;
      position: relative;
      z-index: 2;
    }
    .onb-page[data-page="3"] .onb-zone--helper .onb-desc-text{
      display: -webkit-box;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .onb-page[data-page="3"] .onb-zone--helper .onb-help{
      position: absolute;
      right: 28px;
      top: 50%;
      transform: translateY(-50%);
      width: auto;
      height: auto;
      border: 0;
      background: transparent;
      color: rgba(255,255,255,0.45);
      font-size: 26px;
      font-weight: 800;
      line-height: 1;
      padding: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      z-index: 2;
    }
    .onb-page[data-page="3"] .onb-zone--helper .onb-help:hover{
      color: rgba(255,255,255,0.7);
      text-shadow: 0 0 8px rgba(255,255,255,0.3);
    }
    .onb-page[data-page="3"] .onb-zone--helper .onb-item.is-help-open .onb-btn{
      visibility: visible;
      pointer-events: none;
      text-shadow: none;
      color: transparent;
      -webkit-text-fill-color: transparent;
    }
    .onb-page[data-page="3"] .onb-zone--helper .onb-item.is-help-open .onb-item-desc{
      opacity: 1;
      pointer-events: auto;
      clip-path: inset(0 0 0 0);
    }
    .onb-page[data-page="3"] .onb-zone--helper .onb-item.is-help-open .onb-help{
      color: var(--accent-1);
      text-shadow:
        0 0 8px var(--accent-1),
        0 0 18px var(--accent-2),
        0 0 28px var(--accent-1);
    }
    .onb-page[data-page="3"] .onb-zone--helper .onb-item.is-help-open{
      --onb-scan-left: 10px;
      --onb-scan-scale: 0.7;
    }
    /* page 2: равномерное распределение кнопок и подписи по высоте */
    .onb-page[data-page="2"] .onb-zone--mid{ padding-block: 10px; }
    .onb-page[data-page="2"] .onb-list{
      height: 100%;
      overflow: hidden;
      display: grid;
      grid-template-columns: 1fr;
      grid-template-rows: repeat(8, 1fr);
      gap: clamp(6px, 1.1vh, 10px);
      width: var(--onb-list-w);
      margin-inline: auto;
    }
    .onb-page[data-page="2"] .onb-list .onb-item{
      flex: 1 1 0;
      min-height: 0;
      position: relative;
      display: grid;
      grid-template-areas: "stack";
      place-items: stretch;
      padding: var(--onb-item-pad);
      overflow: hidden;
      container-type: size;
      --onb-help-slice: 72px;
      --onb-scan-left: calc(100% - var(--onb-help-slice));
      --onb-scan-scale: 1;
    }
    .onb-page[data-page="2"] .onb-list .onb-item::before{
      content: "";
      position: absolute;
      top: 6px;
      right: 6px;
      bottom: 6px;
      width: var(--onb-help-slice);
      border-radius: 12px;
      background: var(--onb-help-slice-bg, rgba(255,255,255,0.06));
      pointer-events: none;
      z-index: 0;
    }
    .onb-page[data-page="2"] .onb-list .onb-item::after{
      content: "";
      position: absolute;
      top: 50%;
      left: var(--onb-scan-left);
      width: 1px;
      height: 30px;
      background: var(--onb-help-divider, rgba(255,255,255,0.22));
      transform: translateY(-50%) scaleY(var(--onb-scan-scale));
      transform-origin: center;
      transition: left 420ms ease, transform 420ms ease, opacity 200ms ease;
      pointer-events: none;
      opacity: 0.9;
      z-index: 1;
    }
    .onb-page[data-page="2"] .onb-list .onb-btn{
      grid-area: stack;
      height: auto;
      min-height: 0;
      padding-left: 14px;
      padding-right: 104px;
      position: relative;
      z-index: 1;
    }
    .onb-page[data-page="2"] .onb-list .onb-item--notify::before,
    .onb-page[data-page="2"] .onb-list .onb-item--notify::after{
      display: block;
    }
    .onb-page[data-page="2"] .onb-list .onb-btn--spreads{
      position: relative;
      padding-right: 104px;
    }
    .onb-page[data-page="2"] .onb-list .onb-btn--counted{
      position: relative;
      padding-left: 62px;
    }
    .onb-page[data-page="2"] .onb-list .onb-btn--thumb{
      position: relative;
      padding-left: 62px;
    }
    .onb-page[data-page="2"] .onb-list .onb-btn-thumb{
      position: absolute;
      left: 16px;
      top: 50%;
      transform: translateY(-50%);
      inline-size: clamp(34px, 5.2vw, 40px);
      block-size: clamp(34px, 5.2vw, 40px);
      border-radius: 999px;
      overflow: hidden;
      background: rgba(0,0,0,0.18);
      box-shadow: 0 6px 12px rgba(0,0,0,0.18), inset 0 0 0 1px rgba(255,255,255,0.14);
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }
    .onb-page[data-page="2"] .onb-list .onb-btn-thumb img{
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    .onb-page[data-page="2"] .onb-list .onb-btn--thumb:active .onb-btn-thumb img,
    .onb-page[data-page="2"] .onb-list .onb-btn--thumb.is-pressed .onb-btn-thumb img{
      filter: brightness(0.5);
    }
    .onb-page[data-page="2"] .onb-list .onb-btn-count{
      position: absolute;
      left: 14px;
      top: 50%;
      --onb-count-translate: translateY(-50%);
      --onb-count-glow: rgba(255, 184, 107, 0.45);
      --onb-count-glow-soft: rgba(255, 184, 107, 0.22);
      transform: var(--onb-count-translate) scale(1);
      inline-size: clamp(34px, 5.2vw, 40px);
      block-size: clamp(34px, 5.2vw, 40px);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 999px;
      border: 1px solid rgba(255, 255, 255, 0.26);
      background: rgba(9, 13, 20, 0.22);
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
      font-size: clamp(14px, 2.4vw, 17px);
      font-weight: 900;
      line-height: 1;
      letter-spacing: 0;
      color: rgba(255,255,255,0.98);
      text-shadow: none;
      opacity: 0;
      pointer-events: none;
      white-space: nowrap;
      will-change: transform, filter, box-shadow, opacity;
    }
    .onb-page[data-page="2"] .onb-list .onb-btn-count--static{
      opacity: 1;
      animation: onbCountGlow 1.8s ease-in-out infinite;
    }
    .onb-page[data-page="2"] .onb-list .onb-btn--spreads.has-available .onb-spread-count{
      opacity: 1;
      animation: onbCountGlow 1.8s ease-in-out infinite;
    }
    .onb-page[data-page="2"] .onb-list .onb-btn--spreads .onb-spread-count{
      animation: none !important;
    }
    .onb-page[data-page="2"] .onb-list .onb-btn--counted[data-onb-action="readings"] .onb-btn-count{
      animation: none !important;
    }
@keyframes onbCountGlow{
      0%,100%{
        opacity: 0.72;
        filter: brightness(0.9);
        box-shadow:
          inset 0 0 0 1px rgba(255, 255, 255, 0.06),
          0 0 0 rgba(0,0,0,0);
      }
      50%{
        opacity: 1;
        filter: brightness(1.45);
        box-shadow:
          0 0 14px var(--onb-count-glow),
          0 0 28px var(--onb-count-glow-soft),
          inset 0 0 0 1px rgba(255, 255, 255, 0.18);
      }
    }
    #gptlike-chat[data-theme-light="1"] .onb-page[data-page="2"] .onb-list .onb-btn-count{
      color: #111827;
      border-color: rgba(23, 32, 46, 0.22);
      background: rgba(255, 255, 255, 0.64);
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.78);
      --onb-count-glow: rgba(196, 152, 92, 0.45);
      --onb-count-glow-soft: rgba(196, 152, 92, 0.22);
    }
#gptlike-chat[data-theme="dark"] .onb-page[data-page="2"] .onb-list .onb-btn-count{
  color: #111827;
  border-color: rgba(23, 32, 46, 0.22);
  background: rgba(255, 255, 255, 0.64);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.78);
  --onb-count-glow: rgba(196, 152, 92, 0.45);
  --onb-count-glow-soft: rgba(196, 152, 92, 0.22);
}
    .onb-page[data-page="2"] .onb-list .onb-item-desc{
      grid-area: stack;
      align-self: stretch;
      justify-self: stretch;
      padding: 8px 104px 8px 14px;
      display: grid;
      align-items: center;
      font-size: clamp(11px, 1.35vh, 13px);
      line-height: 1.28;
      text-wrap: balance;
      opacity: 0;
      pointer-events: none;
      transition: opacity 180ms ease;
      overflow: hidden;
      clip-path: inset(0 0 0 var(--onb-scan-left));
      transition: opacity 180ms ease, clip-path 420ms ease;
      position: relative;
      z-index: 2;
    }
    @supports (font-size: 1cqh){
      .onb-page[data-page="2"] .onb-list .onb-item-desc{
        font-size: clamp(11px, 16cqh, 13px);
      }
    }
    .onb-page[data-page="2"] .onb-list .onb-desc-text{
      display: -webkit-box;
      -webkit-line-clamp: 3;
      line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .onb-page[data-page="2"] .onb-list .onb-item.is-help-open .onb-item-desc{
      opacity: 1;
      pointer-events: auto;
      clip-path: inset(0 0 0 0);
    }
    .onb-page[data-page="2"] .onb-list .onb-btn-label{
      display: block;
      width: 100%;
      max-width: none;
      margin: 0;
      text-align: left;
      pointer-events: none;
    }
    .onb-page[data-page="2"] .onb-list .onb-help{
      position: absolute;
      right: 32px;
      top: 50%;
      transform: translateY(-50%);
      width: auto;
      height: auto;
      border: 0;
      background: transparent;
      color: rgba(255,255,255,0.45);
      font-size: 26px;
      font-weight: 800;
      line-height: 1;
      padding: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      z-index: 2;
    }
    .onb-page[data-page="2"] .onb-list .onb-help:hover{
      color: rgba(255,255,255,0.7);
      text-shadow: 0 0 8px rgba(255,255,255,0.3);
    }
    .onb-page[data-page="2"] .onb-list .onb-item.is-help-open .onb-btn{
      visibility: visible;
      pointer-events: none;
    }
    .onb-page[data-page="2"] .onb-list .onb-item.is-help-open .onb-btn-label{
      opacity: 0;
    }
    .onb-page[data-page="2"] .onb-list .onb-item.is-help-open .onb-btn{
      color: transparent;
      -webkit-text-fill-color: transparent;
    }
    .onb-page[data-page="2"] .onb-list .onb-item.is-help-open .onb-btn-count{
      opacity: 0 !important;
      animation: none !important;
    }
    .onb-page[data-page="2"] .onb-list .onb-item.is-help-open .onb-help{
      color: var(--accent-1);
      text-shadow:
        0 0 8px var(--accent-1),
        0 0 18px var(--accent-2),
        0 0 28px var(--accent-1);
    }
    .onb-page[data-page="2"] .onb-list .onb-item.is-help-open{
      --onb-scan-left: 12px;
      --onb-scan-scale: 0.7;
    }
    /* page 3: равномерно растягиваем кнопки раскладов по высоте */
    .onb-page[data-page="3"] .onb-zone--mid{
      padding-block: 10px;
      padding-inline: 0;
    }
    .onb-page[data-page="3"] .onb-zone--helper .onb-btn{
      height: 100%;
      min-height: 0;
    }
    .onb-page[data-page="3"] .onb-list{
      flex: 1 1 auto;
      min-height: 0;
      overflow: hidden;
      gap: 0;
      justify-content: flex-start;
      height: 100%;
      padding-top: 0;
      padding-bottom: 0;
      display: grid;
      grid-template-rows: repeat(10, 1fr);
      grid-template-columns: 1fr;
      justify-items: stretch;
      align-items: stretch;
      width: var(--onb-list-w);
      margin-inline: auto;
    }
    .onb-page[data-page="3"] .onb-item{
      height: 100%;
      min-height: 0;
      position: relative;
      display: grid;
      grid-template-areas: "stack";
      place-items: stretch;
      padding: var(--onb-item-pad);
      overflow: hidden;
      container-type: size;
      --onb-help-slice: 68px;
      --onb-scan-left: calc(100% - var(--onb-help-slice));
      --onb-scan-scale: 1;
    }
    .onb-page[data-page="3"] .onb-item::before{
      content: "";
      position: absolute;
      top: 6px;
      right: 6px;
      bottom: 6px;
      width: var(--onb-help-slice);
      border-radius: 12px;
      background: var(--onb-help-slice-bg, rgba(255,255,255,0.06));
      pointer-events: none;
      z-index: 0;
    }
    .onb-page[data-page="3"] .onb-item::after{
      content: "";
      position: absolute;
      top: 50%;
      left: var(--onb-scan-left);
      width: 1px;
      height: 30px;
      background: var(--onb-help-divider, rgba(255,255,255,0.22));
      transform: translateY(-50%) scaleY(var(--onb-scan-scale));
      transform-origin: center;
      transition: left 420ms ease, transform 420ms ease, opacity 200ms ease;
      pointer-events: none;
      opacity: 0.9;
      z-index: 1;
    }
    .onb-page[data-page="3"] .onb-btn{
      height: 100%;
      min-height: 0;
      font-size: clamp(12px, 2.1vw, 15px);
      letter-spacing: 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      padding-inline: 12px;
      position: relative;
      z-index: 1;
    }
    .onb-page[data-page="2"] .onb-btn{
      font-size: clamp(12px, 2.3vw, 15px);
      letter-spacing: 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .onb-page[data-page="2"] .onb-btn-label,
    .onb-page[data-page="3"] .onb-btn-label{
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .onb-page[data-page="2"] .onb-list .onb-btn--spreads .onb-btn-label{
      white-space: pre-line !important;
      line-height: 1.14 !important;
      text-overflow: clip !important;
    }
    .onb-page[data-page="2"] .onb-btn,
    .onb-page[data-page="3"] .onb-btn{
      background:
        radial-gradient(120px 60px at 20% 25%, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 60%),
        linear-gradient(90deg, var(--accent-1), var(--accent-2));
      color: var(--btn-text, #ffffff);
      border-color: rgba(255, 255, 255, 0.12);
      box-shadow:
        0 10px 22px rgba(0, 0, 0, 0.26),
        0 0 0 1px rgba(255, 255, 255, 0.06) inset;
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
    }
    #onboardingScreen .onb-page[data-page="2"] .onb-btn,
    #onboardingScreen .onb-page[data-page="3"] .onb-btn,
    #onboardingScreen .onb-page[data-page="2"] .onb-btn-label,
    #onboardingScreen .onb-page[data-page="3"] .onb-btn-label{
      text-shadow: none !important;
    }

    #onboardingScreen .onb-page[data-page="2"] .onb-btn,
    #onboardingScreen .onb-page[data-page="3"] .onb-btn{
      text-shadow: none !important;
    }

    /* standard accent on dark mode -> light buttons, no text shadow (prevents blur) */
    #gptlike-chat[data-theme-mode="dark"][data-theme-accent="standard"] .btn-primary,
    #gptlike-chat[data-theme-mode="dark"][data-theme-accent="standard"] .onb-page[data-page="2"] .onb-btn,
    #gptlike-chat[data-theme-mode="dark"][data-theme-accent="standard"] .onb-page[data-page="3"] .onb-btn{
      text-shadow: none;
    }
    .onb-page[data-page="2"] .onb-btn:hover,
    .onb-page[data-page="3"] .onb-btn:hover{
      filter: brightness(1.05);
    }
    .onb-page[data-page="2"] .onb-row-four .onb-btn,
    .onb-page[data-page="3"] .onb-row-four .onb-btn{
      background: transparent;
      border: 0;
      box-shadow: none;
      text-shadow: none;
    }
    .onb-page[data-page="2"] .onb-row-four .onb-btn::before,
    .onb-page[data-page="3"] .onb-row-four .onb-btn::before{
      content: none;
    }
    .onb-page[data-page="3"] .onb-list .onb-btn{
      grid-area: stack;
      justify-content: flex-start;
      text-align: left;
      padding-left: 14px;
      padding-right: 96px;
    }
    .onb-page[data-page="3"] .onb-list .onb-item-desc{
      grid-area: stack;
      align-self: stretch;
      justify-self: stretch;
      padding: 6px 96px 6px 14px;
      display: grid;
      align-items: center;
      font-size: clamp(10px, 1.2vh, 12px);
      line-height: 1.24;
      text-wrap: balance;
      opacity: 0;
      pointer-events: none;
      transition: opacity 180ms ease;
      overflow: hidden;
      clip-path: inset(0 0 0 var(--onb-scan-left));
      transition: opacity 180ms ease, clip-path 420ms ease;
      position: relative;
      z-index: 2;
    }
    .onb-page[data-page="3"] .onb-list .onb-desc-text{
      display: -webkit-box;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .onb-page[data-page="3"] .onb-list .onb-help{
      position: absolute;
      right: 28px;
      top: 50%;
      transform: translateY(-50%);
      width: auto;
      height: auto;
      border: 0;
      background: transparent;
      color: rgba(255,255,255,0.45);
      font-size: 26px;
      font-weight: 800;
      line-height: 1;
      padding: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      z-index: 2;
    }
    .onb-page[data-page="3"] .onb-list .onb-help:hover{
      color: rgba(255,255,255,0.7);
      text-shadow: 0 0 8px rgba(255,255,255,0.3);
    }
    .onb-page[data-page="3"] .onb-list .onb-item.is-help-open .onb-btn{
      visibility: visible;
      pointer-events: none;
      text-shadow: none;
    }
    .onb-page[data-page="3"] .onb-list .onb-item.is-help-open .onb-btn-label{
      opacity: 0;
    }
    .onb-page[data-page="3"] .onb-list .onb-item.is-help-open .onb-btn{
      color: transparent;
      -webkit-text-fill-color: transparent;
    }
    .onb-page[data-page="3"] .onb-list .onb-item.is-help-open .onb-item-desc{
      opacity: 1;
      pointer-events: auto;
      clip-path: inset(0 0 0 0);
    }
    .onb-page[data-page="3"] .onb-list .onb-item.is-help-open .onb-help{
      color: var(--accent-1);
      text-shadow:
        0 0 8px var(--accent-1),
        0 0 18px var(--accent-2),
        0 0 28px var(--accent-1);
    }
    .onb-page[data-page="3"] .onb-list .onb-item.is-help-open{
      --onb-scan-left: 10px;
      --onb-scan-scale: 0.7;
    }
    .onb-page[data-page="2"] .onb-list .onb-help,
    .onb-page[data-page="3"] .onb-list .onb-help,
    .onb-page[data-page="3"] .onb-zone--helper .onb-help{
      width: 28px;
      height: 28px;
      border-radius: 6px;
      transform: translateY(-50%) rotate(0deg);
      transform-origin: 50% 50%;
      transition: transform 0.35s ease, color 0.2s ease, text-shadow 0.2s ease;
      background: transparent;
      border: 0;
    }
    .onb-page[data-page="2"] .onb-list .onb-help::before,
    .onb-page[data-page="3"] .onb-list .onb-help::before,
    .onb-page[data-page="3"] .onb-zone--helper .onb-help::before{
      content: none;
    }
    .onb-page[data-page="2"] .onb-list .onb-item::after,
    .onb-page[data-page="3"] .onb-list .onb-item::after,
    .onb-page[data-page="3"] .onb-zone--helper .onb-item::after{
      content: none;
    }
    .onb-page[data-page="2"] .onb-list .onb-item.is-help-open .onb-help,
    .onb-page[data-page="3"] .onb-list .onb-item.is-help-open .onb-help,
    .onb-page[data-page="3"] .onb-zone--helper .onb-item.is-help-open .onb-help{
      transform: translateY(-50%) rotate(180deg);
      color: var(--onb-help-active, #ffb86b);
      text-shadow:
        0 0 6px var(--onb-help-active-shadow, rgba(243,201,105,0.35)),
        0 0 14px var(--onb-help-active-shadow-strong, rgba(243,201,105,0.55));
      background: var(--onb-help-active-bg, rgba(243,201,105,0.12));
    }
    #gptlike-chat .onb-page[data-page="2"] .onb-item-desc,
    #gptlike-chat .onb-page[data-page="3"] .onb-item-desc{
      color: var(--onb-help-text, rgba(232, 239, 248, 0.92));
    }
    .onb-zone{
      width: 100%;
      max-width: 100%;
      box-sizing: border-box;
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      padding-inline: var(--content-edge-x);
      height: 100%;
      border: 1px solid rgba(255,255,255,0.28);
      border-radius: 12px;
      background: transparent;
      z-index: 4;
    }
    .onb-page[data-page="1"] .onb-zone{
      background: transparent;
    }
    .onb-zone0,
    .onb-zone2{
      background: rgba(255,255,255,0.03);
    }
    .onb-zone1,
    .onb-zone3,
    .onb-zone4{
      background: rgba(255,255,255,0.02);
    }
    .onb-zone5{ grid-row: 2; }
    .onb-zone6{ grid-row: 6; }
    .onb-page[data-page="1"] .onb-zone6{
      flex-direction: column;
      align-items: center;
      gap: 8px;
    }
    .onb-zone0{
      justify-content: flex-end;
      align-items: center;
      height: 100%;
      padding-inline: var(--content-edge-x);
      grid-row: 1;
      position: relative;
      z-index: 30;
    }
    .onb-page[data-page="1"] .onb-zone0{
      justify-content: center;
    }
    /* Page 1: soft black gradient shadow under the top (language) container */
    .onb-page[data-page="1"] .onb-zone0{
      position: relative;
      z-index: 6;
    }
    .onb-page[data-page="1"] .onb-zone0::before{
      content: "";
      position: absolute;
      inset: -10px -10px -18px -10px;
      background:
        radial-gradient(140% 110% at 50% 100%,
          rgba(0,0,0,0.45) 0%,
          rgba(0,0,0,0.28) 45%,
          rgba(0,0,0,0.14) 70%,
          rgba(0,0,0,0.04) 85%,
          rgba(0,0,0,0.0) 100%);
      filter: blur(10px);
      opacity: 0.9;
      pointer-events: none;
      z-index: 0;
    }
    .onb-page[data-page="1"] .onb-zone0 .onb-mini-bar{
      position: relative;
      z-index: 1;
    }
    .onb-zone1{
      overflow: visible;
      align-items: center;
      justify-content: center;
      grid-row: 3;
      position: relative;
      z-index: 1;
    }
    .onb-zone2{
      padding: 0 var(--content-edge-x);
      justify-content: center;
      align-items: center;
      width: 100%;
      grid-row: 4;
    }
    .onb-zone3{
      align-items: stretch;
      justify-content: flex-start;
      width: 100%;
      padding: 0 var(--content-edge-x) 8px;
      display: flex;
      flex-direction: column;
      grid-row: 5;
    }
    /* Page 1: soft black gradient shadow under the bottom text container */
    .onb-page[data-page="1"] .onb-zone3{
      position: relative;
      z-index: 5;
    }
    .onb-page[data-page="1"] .onb-zone3::before{
      content: "";
      position: absolute;
      inset: -12px -10px -18px -10px;
      background:
        radial-gradient(140% 105% at 50% 0%,
          rgba(0,0,0,0.45) 0%,
          rgba(0,0,0,0.28) 45%,
          rgba(0,0,0,0.14) 70%,
          rgba(0,0,0,0.04) 85%,
          rgba(0,0,0,0.0) 100%);
      filter: blur(10px);
      opacity: 0.9;
      pointer-events: none;
      z-index: 0;
    }
    .onb-page[data-page="1"] .onb-intro{
      position: relative;
      z-index: 1;
      transform: translateY(-5%);
    }
    .onb-zone4{
      width: 100%;
      padding: 0 var(--content-edge-x) 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      grid-row: 7;
    }
    .onb-mini-bar{
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }
    .onb-page[data-page="1"] .onb-mini-bar{
      justify-content: center;
    }
    #onboardingScreen .onb-page[data-page="2"] .onb-mini-bar{
      position: relative;
      justify-content: flex-start;
    }
    .onb-menu-title{
      display: none;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      align-items: center;
      justify-content: center;
      font-size: clamp(14px, 2.4vw, 16px);
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: rgba(232, 239, 248, 0.62);
      text-shadow: none;
      white-space: nowrap;
      max-width: 70%;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .onb-page[data-page="2"] .onb-menu-title{
      top: calc(50% + 5px);
    }
    .onb-top-title{
      display: inline-flex;
      margin-left: auto;
      align-items: center;
      gap: 6px;
      font-size: clamp(14px, 2.4vw, 16px);
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: color-mix(in srgb, var(--accent-1) 80%, #000 20%);
      text-shadow: none;
      white-space: nowrap;
      max-width: 60%;
      min-width: 0;
    }
    .onb-top-title-text{
      display: inline-block;
      max-width: 100%;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .onb-top-count{
      display: inline-flex;
      align-items: center;
      justify-content: center;
      --onb-count-glow: rgba(255, 184, 107, 0.45);
      --onb-count-glow-soft: rgba(255, 184, 107, 0.22);
      inline-size: clamp(30px, 4.6vw, 34px);
      block-size: clamp(30px, 4.6vw, 34px);
      border-radius: 999px;
      border: 1px solid rgba(255, 255, 255, 0.26);
      background: rgba(9, 13, 20, 0.22);
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
      font-size: clamp(13px, 2.1vw, 15px);
      font-weight: 900;
      line-height: 1;
      letter-spacing: 0;
      color: rgba(255,255,255,0.98);
      text-shadow: none;
      opacity: 0;
      pointer-events: none;
      white-space: nowrap;
      --onb-count-translate: translateY(0);
      transform: var(--onb-count-translate) scale(1);
      will-change: transform, filter, box-shadow, opacity;
    }
    .onb-top-title.has-available .onb-top-count{
      opacity: 1;
      animation: onbCountGlow 1.8s ease-in-out infinite;
    }
    #gptlike-chat[data-theme-light="1"] .onb-top-count{
      color: #111827;
      border-color: rgba(23, 32, 46, 0.22);
      background: rgba(255, 255, 255, 0.64);
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.78);
    }
    #gptlike-chat[data-theme="gold"] .onb-top-count{
      color: #3a2a10;
      border-color: rgba(255, 184, 107, 0.34);
      background: rgba(255, 184, 107, 0.26);
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
      --onb-count-glow: rgba(255, 184, 107, 0.5);
      --onb-count-glow-soft: rgba(255, 184, 107, 0.24);
    }
#gptlike-chat[data-theme="dark"] .onb-top-count{
  color: #111827;
  border-color: rgba(23, 32, 46, 0.22);
  background: rgba(255, 255, 255, 0.64);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.78);
  --onb-count-glow: rgba(196, 152, 92, 0.45);
  --onb-count-glow-soft: rgba(196, 152, 92, 0.22);
}
    .onb-top-title-arrow{
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-weight: 900;
      line-height: 1;
      position: relative;
      top: -2px;
      animation: onbTitleArrowDown 1.25s ease-in-out infinite;
    }
    #gptlike-chat[data-theme="gold"] .onb-top-title,
    #gptlike-chat[data-theme="gold"] .onb-top-title-arrow{
      color: #6b4b19;
      text-shadow: none;
    }
    .onb-mini-bar.onb-mini-bar--solo{
      justify-content: flex-end;
    }
    .onb-mini-bar .lang-btn{
      height: auto;
      padding: 0 2px;
      font-size: 13px;
      font-weight: 800;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.7);
      border: none;
      border-radius: 0;
      background: transparent;
      cursor: pointer;
      text-shadow: 0 0 6px rgba(0,0,0,0.35);
      box-shadow: none;
      outline: none;
      -webkit-tap-highlight-color: transparent;
      transition: color 0.16s ease, text-shadow 0.16s ease, transform 0.12s ease;
    }
    .onb-mini-bar .lang-btn:hover{
      color: rgba(255,255,255,0.92);
      transform: translateY(-1px);
      background: transparent;
      box-shadow: none;
    }
    .onb-mini-bar .lang-btn:active{
      background: transparent;
      box-shadow: none;
    }
    .onb-mini-bar .lang-btn:focus-visible{
      outline: none;
      box-shadow: none;
      background: transparent;
    }
    .onb-mini-bar .lang-btn.active{
      color: #ffb86b;
      text-shadow:
        0 0 10px rgba(255,154,60,0.75),
        0 0 22px rgba(255,122,69,0.55);
      background: transparent;
      box-shadow: none;
    }
    .onb-skip-top{
      background: none;
      border: none;
      color: rgba(255,255,255,0.72);
      font-weight: 700;
      font-size: clamp(14px, 2.4vw, 16px);
      letter-spacing: 0.02em;
      padding: 8px 0;
      cursor: pointer;
      transition: opacity 0.15s ease, transform 0.12s ease;
    }
    #onbSkipTop{
      position: relative;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      color: rgba(190,190,190,0.65);
      white-space: nowrap;
      font-size: clamp(11px, 2.1vw, 14px);
      letter-spacing: 0.01em;
    }
    #onbSkipTop::after{
      content: none;
      display: none;
    }
    @keyframes guestArrow{
      0%, 100% { transform: translateX(0); opacity: 0.7; }
      50% { transform: translateX(6px); opacity: 1; }
    }
    /* Light themes: keep "Назад / Пропустить" in a light style on pages 2-3 */
    #gptlike-chat[data-theme-light="1"] .onb-page[data-page="2"] .onb-skip-top,
    #gptlike-chat[data-theme-light="1"] .onb-page[data-page="3"] .onb-skip-top{
      color: rgba(238, 243, 250, 0.94);
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.42);
    }
    #gptlike-chat[data-theme-light="1"] .onb-menu-title{
      color: rgba(31, 41, 55, 0.70);
      text-shadow: none;
    }
    #gptlike-chat[data-theme="gold"] .onb-menu-title{
      color: #6b4b19;
      text-shadow: none;
    }
    #gptlike-chat[data-theme="dark"] .onb-menu-title{
      color: #ffffff;
      text-shadow: none;
    }
    #gptlike-chat[data-theme-light="1"] .onb-page[data-page="2"] .onb-item-desc,
    #gptlike-chat[data-theme-light="1"] .onb-page[data-page="3"] .onb-item-desc{
      color: #1f2937;
    }
    /* Light themes: bottom menu icons must be dark */
    #gptlike-chat[data-theme-light="1"] .onb-row-four .onb-btn-ico svg{
      color: #1f2937 !important;
      opacity: 1;
    }
    /* Main screen should stay dark even in light themes */
    #gptlike-chat[data-theme-light="1"] .onb-page[data-page="1"]{
      --bg-0: #0f0f11;
      --bg-1: #151518;
      --panel: #1e1e20;
      --muted: #9ca3af;
      --text: #e6eef8;
      --border: #2b2b2d;
      --input-bg: #0b0b0f;
      --chat-messages-bg: #0b0b0f;
      --chat-input-bg: #0f0f14;
      color: var(--text);
    }
    .onb-skip-top:hover,
    .onb-skip-top:focus-visible{
      opacity: 0.9;
      transform: translateY(-1px);
      outline: none;
    }
    .onb-cta-row{
      width: 100%;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
      align-items: center;
    }
    .onb-page[data-page="1"] .onb-cta-note{
      margin-top: 8px;
      font-size: clamp(11px, 2vw, 12.5px);
      line-height: 1.3;
      color: rgba(190, 190, 190, 0.46);
      text-align: center;
    }
    .onb-cta{
      position: relative;
      overflow: hidden;
      border: none;
      border-radius: 14px;
      width: 100%;
      min-width: 0;
      height: clamp(44px, 6.5vh, 52px);
      padding: 0 18px;
      font-weight: 820;
      font-size: clamp(15px, 2.6vw, 17.2px);
      letter-spacing: 0.02em;
      color: #0b0b0f;
      background: linear-gradient(120deg, #ffb86b 0%, #ffb86b 50%, #ffb86b 100%);
      box-shadow:
        0 8px 18px rgba(255, 122, 69, 0.26),
        inset 0 1px 0 rgba(255,255,255,0.32);
      cursor: pointer;
      transition: transform 0.16s ease, filter 0.16s ease, box-shadow 0.16s ease;
    }
    .onb-cta:hover,
    .onb-cta:focus-visible{
      transform: translateY(-2px);
      filter: brightness(1.05);
      box-shadow:
        0 14px 30px rgba(255, 122, 69, 0.42),
        inset 0 1px 0 rgba(255,255,255,0.32),
        0 0 0 1px rgba(255, 255, 255, 0.12);
      outline: none;
    }
    .onb-cta:active{
      transform: translateY(0);
      filter: brightness(0.96);
    }
    /* Главный экран: весь UI (кроме логотипа) в ч/б */
    .onb-page[data-page="1"]{
      --text: #e6e6e6;
      --muted: #bdbdbd;
      --border: rgba(255,255,255,0.22);
      color: var(--text);
    }
    .onb-page[data-page="1"] .onb-skip-top{
      color: rgba(230,230,230,0.75);
    }
    .onb-page[data-page="1"] .onb-lang-inline{
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      width: auto;
      max-width: none;
    }
    .onb-page[data-page="1"] .onb-mini-bar .lang-btn{
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 48px;
      min-height: 42px;
      padding: 0 12px;
      border-radius: 10px;
      font-size: clamp(14px, 2.6vw, 16px);
      font-weight: 900 !important;
      font-variation-settings: "wght" 820;
      line-height: 1;
      touch-action: manipulation;
      color: rgba(229, 229, 229, 0.62);
      -webkit-text-fill-color: rgba(229, 229, 229, 0.62) !important;
      background: #000000;
      border: 1px solid rgba(220, 220, 220, 0.42);
      -webkit-text-stroke: 0 !important;
      text-shadow: none !important;
    }
    .onb-page[data-page="1"] .onb-mini-bar .lang-btn.active{
      background: #000000;
      color: #ffb86b;
      -webkit-text-fill-color: #ffb86b !important;
      border-color: #ffb86b;
      text-shadow: none;
      animation: none;
    }
    /* Hard override: main screen language buttons (no app bleed) */
    body.onboarding-main #gptlike-chat #onboardingScreen .onb-page[data-page="1"] .lang-btn{
      background: #000000 !important;
      background-image: none !important;
      border: 1px solid rgba(220, 220, 220, 0.42) !important;
      color: rgba(229, 229, 229, 0.62) !important;
      -webkit-text-fill-color: rgba(229, 229, 229, 0.62) !important;
      box-shadow: none !important;
      -webkit-text-stroke: 0 !important;
      text-shadow: none !important;
    }
    body.onboarding-main #gptlike-chat #onboardingScreen .onb-page[data-page="1"] .lang-btn.active{
      border-color: #ffb86b !important;
      color: #ffb86b !important;
      -webkit-text-fill-color: #ffb86b !important;
      text-shadow: none !important;
    }
    @media (max-width: 640px){
      .onb-page[data-page="1"] .onb-mini-bar .lang-btn{
        min-width: 48px;
        min-height: 40px;
        padding: 0 10px;
        font-size: 14px;
      }
      .onb-page[data-page="1"] .onb-lang-inline{
        gap: 10px;
        width: auto;
        max-width: none;
      }
    }
    .onb-page[data-page="1"] .onb-cta{
      background: #0b0b0f;
      color: #ffb86b;
      border: 1.5px solid #ffb86b;
      box-shadow:
        0 0 0 0 rgba(0,0,0,0),
        0 0 12px 4px rgba(255, 184, 107, 0.12),
        0 0 28px 12px rgba(255, 184, 107, 0.08);
      position: relative;
      isolation: isolate;
      overflow: visible;
      background-clip: padding-box;
      animation: ctaPulse 6.8s ease-in-out infinite;
    }
    @keyframes ctaPulse {
      0% {
        box-shadow:
          0 0 0 0 rgba(0,0,0,0),
          0 0 6px 2px rgba(255, 184, 107, 0.12),
          0 0 12px 5px rgba(255, 110, 50, 0.08);
      }
      50% {
        box-shadow:
          0 0 0 0 rgba(0,0,0,0),
          0 0 12px 4px rgba(255, 184, 107, 0.45),
          0 0 22px 8px rgba(255, 110, 50, 0.26);
      }
      100% {
        box-shadow:
          0 0 0 0 rgba(0,0,0,0),
          0 0 6px 2px rgba(255, 184, 107, 0.12),
          0 0 12px 5px rgba(255, 110, 50, 0.08);
      }
    }
    .onb-page[data-page="1"] .onb-cta:hover,
    .onb-page[data-page="1"] .onb-cta:focus-visible{
      box-shadow: none;
      filter: brightness(1.02);
    }
    .onb-page[data-page="1"] .onb-intro-title{
      background: none;
      -webkit-background-clip: initial;
      background-clip: initial;
      color: #ffb86b;
      -webkit-text-fill-color: #ffb86b;
      text-shadow: none;
      animation: none !important;
      font-size: clamp(14px, 3.5vw, 21px);
      white-space: pre-line;
      line-height: 1.15;
    }
    body.onboarding-main #gptlike-chat #onboardingScreen .onb-page[data-page="1"] .onb-intro-title{
      white-space: pre-line !important;
      word-break: keep-all;
      overflow-wrap: normal;
    }
    .onb-page[data-page="1"] .onb-intro li{
      color: rgba(230,230,230,0.92);
      padding-left: 22px;
      font-size: clamp(16px, 3.05vw, 19px);
      position: relative;
      top: -3px;
    }
    .onb-page[data-page="1"] .onb-intro li::before{
      content: "⍌";
      width: auto;
      height: auto;
      left: 0;
      top: 0.12em;
      border-radius: 0;
      background: none;
      box-shadow: none;
      color: #ffb86b;
      font-size: 19px;
      opacity: 0.75;
    }
    .onb-page[data-page="1"] .onb-intro li:nth-child(2)::before{ content: "⌺"; }
    .onb-page[data-page="1"] .onb-intro li:nth-child(3)::before{ content: "⌼"; }
    .onb-page[data-page="1"] .onb-intro li:nth-child(4)::before{ content: "⌻"; }
    .onb-page[data-page="1"] .onb-intro li:nth-child(5)::before{ content: "⍌"; }
    .onb-page-content{
      width: 100%;
      max-width: 1080px;
      margin: 0 auto;
      padding-inline: var(--content-edge-x);
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      gap: 12px;
      align-items: stretch;
    }
    /* анимация карт на первом экране онбординга */
    #onbAnim {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      z-index: 1;
      pointer-events: none;
      display:flex; align-items:center; justify-content:center;
      padding: 0;
      overflow: hidden;
      box-sizing: border-box;
    }
    #onbAnimWrap, #onbAnimWrap *{
      -webkit-user-select:none; user-select:none; -webkit-touch-callout:none;
      box-sizing:border-box;
    }
    #onbAnimWrap{
      position:relative;
      width:100%;
      height:100%;
      border-radius:0;
      overflow:hidden;
      background: transparent;
    }
    #onbAnimStage{ position:absolute; inset:0; z-index:10; }
    #onbAnimWrap .ttC{
      position:absolute;
      left:0; top:0;
      width: var(--cw);
      height: var(--ch);
      transform: translate3d(var(--x), var(--y), 0) rotate(var(--rz)) scale(var(--sc));
      transform-origin: 50% 50%;
      border-radius:14px;
      perspective: 900px;
      transform-style: preserve-3d;
      will-change: transform, opacity;
      opacity: 0;
      pointer-events:none;
      touch-action: none;
    }
    #onbAnimWrap .ttInner{
      position:absolute; inset:0;
      border-radius:14px;
      transform-style: preserve-3d;
      will-change: transform;
      transform: rotateX(var(--ix, 0deg)) rotateZ(var(--iz, 0deg));
      transition: transform 720ms cubic-bezier(0.22, 0.61, 0.36, 1);
    }
    #onbAnimWrap .ttFace{
      position:absolute;
      inset:-2px;
      border-radius:14px;
      backface-visibility:hidden;
      background-size: 103% 103%;
      background-position: center;
      box-shadow: none;
      z-index: 1;
    }
    /* вспышка на логотипе */
    #onbAnimWrap .ttBack{
      background-image: var(--back);
      filter: brightness(1.14) contrast(1.09);
      box-shadow: 0 0 0 1px rgba(70,140,255,0.08);
    }
    #onbAnimWrap .ttFront{ transform: rotateY(180deg); background-image: var(--front); }
    #onbAnimWrap .ttC.flip .ttInner{
      transform: rotateY(180deg) rotateX(var(--ix, 0deg)) rotateZ(var(--iz, 0deg));
    }
    /* Card border: appears after each card flips to back */
    #onboardingScreen #onbAnimWrap .ttBack::after{
      content: "";
      position: absolute;
      inset: 1px;
      border-radius: 14px;
      pointer-events: none;
      opacity: 0;
      border: 1px solid rgba(255, 184, 107, 0.5);
      transition: opacity 520ms ease-out;
      z-index: 2;
    }
    #onboardingScreen #onbAnimWrap .ttC:not(.flip) .ttBack::after{
      opacity: 0.28;
    }
    .onb-item {
      display: flex;
      width: 100%;
      flex: 0 0 auto;
      min-height: var(--onb-btn-h);
      border: 1px solid rgba(255,255,255,0.16);
      border-radius: 12px;
      padding: 4px;
      background: rgba(255,255,255,0.01);
    }
    .onb-item-desc{
      color: rgba(230, 238, 248, 0.62);
      padding-inline: 10px;
      text-align: left;
    }
    .onb-row-four{
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      align-items: stretch;
      gap: clamp(6px, 1vw, 10px);
      width: 100%;
      height: 100%;
      margin-inline: 0;
      box-sizing: border-box;
    }
    .onb-bottom-wrap{
      width: var(--onb-bottom-w);
      max-width: 100%;
      margin-inline: auto;
      height: 100%;
      display: flex;
      align-items: center;
      box-sizing: border-box;
    }
    .onb-row-four .onb-btn{
      width: 100%;
      min-width: 0;
      height: 100%;
      min-height: 0;
      padding: 0;
      border: 0;
      background: transparent;
      box-shadow: none;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0;
      color: var(--text);
      touch-action: manipulation;
    }
    .onb-row-four .onb-btn:hover,
    .onb-row-four .onb-btn:focus-visible {
      transform: none;
      box-shadow: none;
      border-color: transparent;
    }
    .onb-row-four .onb-btn:focus-visible {
      outline: 2px solid var(--accent-1);
      outline-offset: 4px;
    }
    .onb-row-four .onb-btn-ico{
      width: 37px;
      height: 37px;
      flex: 0 0 37px;
    }
    .onb-row-four .onb-btn-ico svg{
      width: 34px;
      height: 34px;
    }
    .onb-row-four .onb-btn-label{
      display: none;
    }
    .onb-auth-btn .onb-ico-login,
    .onb-auth-btn .onb-ico-logout{
      display: none;
    }
    .onb-auth-btn[data-auth="out"] .onb-ico-login{
      display: inline-flex;
    }
    .onb-auth-btn[data-auth="in"] .onb-ico-logout{
      display: inline-flex;
    }
    .onb-row-two {
      display: grid !important;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 6px;
      width: 100%;
      grid-auto-flow: row;
      grid-auto-rows: var(--onb-btn-h);
    }
    .onb-row-two .onb-btn {
      width: 100%;
      height: var(--onb-btn-h);
      min-height: var(--onb-btn-h);
    }
    .onb-btn {
      width: 100%;
      height: var(--onb-btn-h);
      min-height: var(--onb-btn-h);
      border-radius: 14px;
      border: 1px solid rgba(255, 255, 255, 0.08);
      background: linear-gradient(120deg, rgba(249, 115, 22, 0.16), rgba(255, 90, 61, 0.10));
      color: var(--text);
      font-weight: 700;
      font-size: clamp(15px, 2.7vw, 18px);
      letter-spacing: 0.01em;
      cursor: pointer;
      transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 14px;
      box-sizing: border-box;
    }
    .onb-actions {
      display: flex;
      flex-direction: column;
      gap: 8px;
      width: 100%;
      margin-top: 0;
      grid-auto-rows: var(--onb-btn-h);
    }
    .onb-icon-btn {
      justify-content: center;
      align-items: center;
      padding: 0;
      display: inline-flex;
      height: var(--onb-btn-h);
      min-height: var(--onb-btn-h);
    }
    .onb-icon-btn svg { width: 22px; height: 22px; }
    .onb-btn-wide{
      justify-content: flex-start;
      gap: 10px;
      padding: 12px 14px;
    }
    .onb-btn-ico{
      display: inline-flex;
      width: 24px;
      height: 24px;
      align-items: center;
      justify-content: center;
      flex: 0 0 24px;
    }
    .onb-btn-ico svg{ width: 22px; height: 22px; }
    .onb-btn-label{
      text-align: left;
      flex: 1 1 auto;
    }
    .onb-btn:hover,
    .onb-btn:focus-visible {
      transform: translateY(-2px);
      box-shadow: var(--shadow-2);
      border-color: var(--accent-1);
      outline: none;
    }
    @media (max-width: 640px) {
      #onboardingSkip { font-size: 13px; }
    }

    /* Flat UI: remove shadows everywhere (performance) */
    #gptlike-chat,
    #gptlike-chat *:not(.onb-cta){
      box-shadow: none !important;
    }
    #gptlike-chat *:not(.onb-logo):not(.onb-tagline){
      text-shadow: none !important;
    }
    #onbAnimWrap .ttBack{
      box-shadow: 0 0 0 1px rgba(70,140,255,0.08) !important;
    }

    textarea#userInput.input {
      flex: 1 1 auto;
      min-height: var(--btnH);
      height: auto;
      max-height: none;
      overflow-y: auto;
      overflow-x: hidden;
      resize: none;
      font-size: var(--fz);
      line-height: 1.55;
      padding: 12px 14px;
    }

    #uploadBtn {
      flex: 0 0 var(--btnH);
      width: var(--btnH);
    }

    #sendBtn {
      flex: 0 0 var(--btnH);
      width: var(--btnH);
    }

    /* modals */
    .style-modal-backdrop,
    .confirm-backdrop {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.74);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 10020;
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
    }
    #styleModalBackdrop{
      align-items: center;
      justify-content: center;
    }

    .style-modal {
      width: min(520px, var(--modalW));
      max-width: min(520px, var(--modalW));
      background: rgba(21, 23, 28, 0.90);
      border: 1px solid rgba(255, 255, 255, 0.2);
      border-radius: 18px;
      padding: 12px;
      box-shadow: var(--shadow-3);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      animation: popIn 0.22s ease-out both;
      position: relative;
      overflow: hidden;
      max-height: calc(100dvh - 90px);
      overflow: auto;
    }
    .style-modal--fullscreen{
      width: 100vw;
      max-width: none;
      height: 100dvh;
      max-height: none;
      border-radius: 0;
      padding: var(--screen-edge-top) var(--screen-edge-x) var(--screen-edge-bottom);
      animation: none;
      display: grid;
      grid-template-rows: repeat(20, minmax(0, 1fr));
      gap: 0;
      overflow: hidden;
      overscroll-behavior: contain;
    }

    /* Spread deck: ensure iframe fills the modal */
    .spread-deck-modal.style-modal--fullscreen{
      position: relative;
      grid-template-rows: 1fr;
      background: transparent;
      padding: 0;
      border: 0;
      border-radius: 0;
      box-shadow: none !important;
      overflow: hidden;
    }
    .spread-deck-modal.style-modal--fullscreen::before{
      display: none;
    }
    .spread-deck-header{
      position: absolute;
      top: var(--screen-edge-top);
      left: 0;
      right: 0;
      z-index: 3;
      border: 0 !important;
      border-bottom: 0 !important;
      background: transparent !important;
      padding: 0 var(--shell-inner-x) !important;
      min-height: 0 !important;
      height: clamp(56px, 10%, 96px);
      margin: 0 !important;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 10px;
      border-radius: 0 !important;
      box-shadow: none !important;
    }
    .spread-deck-controls{
      display: inline-flex;
      align-items: center;
      gap: 10px;
    }
    .spread-deck-header .ttBtn{
      display: inline-flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 10px 16px;
      min-height: 40px;
      border: 1px solid var(--gold-ui-border);
      border-radius: 14px;
      cursor: pointer;
      color: var(--gold-ui-text);
      font-weight: 700;
      letter-spacing: .01em;
      background: var(--gold-ui-bg);
      box-shadow: var(--gold-ui-shadow);
      transform: translateZ(0);
      transition: transform 180ms ease, filter 180ms ease, opacity 180ms ease;
    }
    #gptlike-chat:is([data-theme="dark"], [data-theme="gold"]) .spread-deck-header .ttBtn{
      background: var(--gold-ui-bg) !important;
      border: 1px solid var(--gold-ui-border) !important;
      color: var(--gold-ui-text) !important;
      box-shadow: var(--gold-ui-shadow) !important;
    }
    #gptlike-chat:is([data-theme="dark"], [data-theme="gold"]) .spread-deck-header .ttBtn:hover,
    #gptlike-chat:is([data-theme="dark"], [data-theme="gold"]) .spread-deck-header .ttBtn:focus,
    #gptlike-chat:is([data-theme="dark"], [data-theme="gold"]) .spread-deck-header .ttBtn:focus-visible,
    #gptlike-chat:is([data-theme="dark"], [data-theme="gold"]) .spread-deck-header .ttBtn:active{
      border-color: var(--gold-ui-border) !important;
      box-shadow: var(--gold-ui-shadow) !important;
    }
    .spread-deck-header .ttBtn:hover{
      filter: brightness(1.08);
      transform: translateZ(0) scale(1.02);
    }
    .spread-deck-header .ttBtn:active{
      transform: translateZ(0) scale(0.99);
    }
    .spread-deck-header .ttBtn[disabled]{
      opacity: .45;
      cursor: default;
      filter: saturate(.7);
      transform: none;
    }
    .spread-deck-header .ttHide{
      display: none !important;
    }
    .spread-deck-header .style-modal-title{
      display: none !important;
    }
    #gptlike-chat[data-theme] .spread-deck-header .style-close{
      font-size: 0;
      line-height: 0;
      width: 40px;
      height: 40px;
      min-height: 40px;
      border-radius: 14px;
      padding: 0;
      background: linear-gradient(155deg, rgba(255, 184, 107, 0.90), rgba(255, 184, 107, 0.86), rgba(255, 184, 107, 0.84)) !important;
      border: 1px solid rgba(255, 184, 107, 0.28) !important;
      color: #0f172a !important;
      box-shadow: none !important;
      margin-left: auto;
      margin-right: 0;
    }
    #gptlike-chat[data-theme] .spread-deck-header .style-close::before{
      content: "×";
      font-size: 24px;
      line-height: 1;
      font-weight: 700;
    }
    #spreadDeckBackdrop[data-deck-select="1"] .spread-deck-controls{
      display: none !important;
    }
    #spreadDeckBackdrop[data-deck-select="1"] .spread-deck-header{
      display: none !important;
    }
    #spreadDeckBackdrop[data-deck-select="1"] .spread-deck-modal{
      grid-template-rows: 0 minmax(0, 1fr) !important;
    }
    .spread-deck-body{
      position: absolute;
      inset: 0;
      grid-row: 1 / -1;
      min-height: 0;
      padding: 0;
      z-index: 1;
    }
    #spreadDeckHost{
      width: 100%;
      height: 100%;
      display: block;
      position: relative;
      overflow: hidden;
      background: #0b0b0f;
    }
    #spreadDeckHost .spread-deck-frame{
      width: 100%;
      height: 100%;
      border: 0;
      display: block;
      background: #0b0b0f;
    }
    #spreadDeckBackdrop{
      padding: 0 !important;
      align-items: stretch !important;
      justify-content: stretch !important;
      background: transparent;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }
    #spreadDeckBackdrop > .spread-deck-modal{
      width: 100%;
      height: 100%;
      max-width: none;
      max-height: none;
      border-radius: 0;
      border: 0;
      margin: 0;
      background: transparent;
    }

    /* Spread deck: force dark backdrop to avoid light-theme edge bleed */
    body.spread-deck-open #spreadDeckBackdrop{
      background: #0b0b0f !important;
      background-color: #0b0b0f !important;
    }
    body.spread-deck-open #appGlobalBackground{
      background: #0b0b0f !important;
      background-color: #0b0b0f !important;
      animation: none !important;
    }
    body.spread-deck-open #appGlobalBackground::before,
    body.spread-deck-open #appGlobalBackground::after{
      opacity: 0 !important;
      background: none !important;
    }
    body.spread-deck-open #appGlobalBackground #spaceBackground{
      display: none !important;
    }


    .style-modal::before {
      content: "";
      position: absolute;
      inset: -2px;
      background:
        radial-gradient(600px 260px at 20% 0%, var(--accent-1) 0%, transparent 70%),
        radial-gradient(560px 240px at 85% 20%, var(--accent-2) 0%, transparent 72%);
      opacity: 0.12;
      filter: blur(18px);
      pointer-events: none;
    }

    .settings-modal {
      width: min(560px, var(--modalW));
      max-width: min(560px, var(--modalW));
      max-height: calc(100dvh - (var(--screen-edge-top) + var(--screen-edge-bottom)));
      display: flex;
      flex-direction: column;
      gap: 8px;
      padding: 12px var(--shell-inner-x) 14px;
      overflow: auto;
    }
    .settings-modal .style-modal-header {
      margin-bottom: 4px;
    }
    .settings-modal .settings-section {
      margin-top: 8px;
    }
    .settings-modal .font-preview,
    .settings-modal .font-weight-seg {
      background: rgba(0, 0, 0, 0.46);
    }
    .settings-modal .font-preview {
      height: 92px;
      min-height: 92px;
      max-height: 92px;
      box-sizing: border-box;
      overflow: hidden;
      display: flex;
      align-items: center;
    }
    .settings-modal .font-preview-text {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      overflow: hidden;
    }
    .settings-modal .theme-mode-seg button {
      background:
        linear-gradient(90deg, var(--mode-layer-1), var(--mode-layer-2)),
        rgba(0, 0, 0, 0.42);
    }

    /* Account modal (same geometry as settings) */
    .account-modal {
      width: min(520px, var(--modalW));
      max-width: min(520px, var(--modalW));
    }

    /* Spread scheme modal */
    .scheme-modal {
      width: min(680px, var(--modalW));
      max-width: min(680px, var(--modalW));
      max-height: calc(100dvh - (var(--screen-edge-top) + var(--screen-edge-bottom)));
      display: flex;
      flex-direction: column;
      gap: 8px;
      padding: 12px var(--shell-inner-x) 14px;
      overflow: hidden;
    }
    .scheme-modal-body {
      flex: 1 1 auto;
      min-height: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 4px 0 8px;
    }
    .scheme-modal-body img {
      width: 100%;
      height: auto;
      max-height: calc(100dvh - 220px);
      object-fit: contain;
      border-radius: 14px;
      border: 1px solid rgba(255, 255, 255, 0.18);
      background: rgba(0, 0, 0, 0.24);
      box-shadow: var(--shadow-inset);
      display: block;
    }
    #gptlike-chat[data-theme-light="1"] .scheme-modal-body img {
      border-color: rgba(15, 23, 42, 0.16);
      background: rgba(255, 255, 255, 0.78);
    }

    /* Spread instruction modal (text) */
    .spread-instruction-modal {
      width: min(720px, var(--modalW));
      max-width: min(720px, var(--modalW));
      max-height: calc(100dvh - (var(--screen-edge-top) + var(--screen-edge-bottom)));
      display: flex;
      flex-direction: column;
      gap: 8px;
      padding: 12px var(--shell-inner-x) 14px;
      overflow: hidden;
    }
    .spread-instruction-body {
      flex: 1 1 auto;
      min-height: 0;
      overflow: hidden;
      border-radius: 14px;
      border: 1px solid color-mix(in srgb, var(--chat-frame-border, rgba(255, 255, 255, 0.22)) 70%, rgba(255, 255, 255, 0.12) 30%);
      background: linear-gradient(180deg, color-mix(in srgb, var(--chat-frame-bg, rgba(0, 0, 0, 0.35)) 92%, rgba(0, 0, 0, 0.4) 8%), color-mix(in srgb, var(--chat-frame-bg, rgba(0, 0, 0, 0.35)) 86%, rgba(0, 0, 0, 0.5) 14%));
      box-shadow: var(--chat-frame-shadow, inset 0 0 0 1px rgba(255, 255, 255, 0.08));
    }
    .spread-instruction-text {
      height: 100%;
      overflow-y: auto;
      padding: 16px 14px;
      font-size: clamp(14px, 2.4vw, 17px);
      line-height: 1.55;
      color: rgba(221, 229, 239, 0.84);
      white-space: pre-wrap;
    }
    #gptlike-chat[data-theme-light="1"] .spread-instruction-body {
      background: #ffffff;
      border-color: rgba(15, 23, 42, 0.24);
      box-shadow: inset 0 0 0 1px rgba(178, 146, 98, 0.16);
    }
    #gptlike-chat[data-theme-light="1"] .spread-instruction-text {
      color: #1f2937;
    }

    /* Image scan screen */
    .image-scan-screen {
      position: absolute;
      inset: 0;
      display: none;
      align-items: stretch;
      justify-content: stretch;
      padding: 0;
      z-index: 3;
      background: rgba(10, 12, 18, 0.92);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      box-sizing: border-box;
      border-radius: inherit;
      overflow: hidden;
    }
    #gptlike-chat.scan-screen-active #chatContainer {
      display: none !important;
      visibility: hidden !important;
      pointer-events: none !important;
    }
    #gptlike-chat.scan-screen-active {
      box-shadow: none !important;
    }

    /* Image scan layout */
    .image-scan-modal {
      width: min(560px, var(--modalW));
      max-width: min(560px, var(--modalW));
      height: min(640px, calc(100dvh - (var(--screen-edge-top) + var(--screen-edge-bottom))));
      max-height: calc(100dvh - (var(--screen-edge-top) + var(--screen-edge-bottom)));
      display: grid;
      grid-template-rows: 10fr 40fr 10fr 50fr;
      gap: 8px;
      padding: calc(var(--screen-edge-top) + 10px) var(--shell-inner-x) calc(var(--screen-edge-bottom) + 12px);
      overflow: hidden;
    }
    .image-scan-panel {
      width: 100%;
      max-width: none;
      height: 100%;
      max-height: none;
      border-radius: inherit;
      box-shadow: none;
      animation: none;
      border: none;
    }
    .image-scan-panel::before {
      content: none;
    }
    .image-scan-panel.image-scan-modal {
      grid-template-rows: 10fr 40fr 10fr 50fr;
    }
    .image-scan-header {
      grid-row: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 0;
      min-height: 0;
    }
    .image-scan-top {
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 0;
    }
    .image-scan-anim {
      position: relative;
      width: clamp(44px, 12vw, 54px);
      height: clamp(44px, 12vw, 54px);
      border-radius: 14px;
      border: 1px solid rgba(255,255,255,0.18);
      background: radial-gradient(circle at 20% 20%, rgba(255,255,255,0.18), rgba(0,0,0,0.2));
      overflow: hidden;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
    }
    .image-scan-anim::before {
      content: "";
      position: absolute;
      inset: -50%;
      background: conic-gradient(from 0deg, color-mix(in srgb, var(--accent-1) 80%, transparent), transparent 30%, color-mix(in srgb, var(--accent-2) 70%, transparent), transparent 60%);
      opacity: 0.7;
      animation: imageScanSpin 1.6s linear infinite;
    }
    .image-scan-anim::after {
      content: "";
      position: absolute;
      inset: 6px;
      border-radius: 10px;
      background: rgba(10, 12, 18, 0.72);
      box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12);
    }
    .image-scan-line {
      position: absolute;
      left: 10px;
      right: 10px;
      height: 2px;
      top: 10px;
      border-radius: 999px;
      background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent-1) 85%, #ffffff 15%), transparent);
      animation: imageScanLine 1.4s ease-in-out infinite;
      z-index: 2;
      filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accent-2) 65%, transparent));
    }
    .image-scan-preview {
      width: clamp(48px, 13vw, 58px);
      height: clamp(48px, 13vw, 58px);
      border-radius: 12px;
      border: 1px solid rgba(255,255,255,0.22);
      background: rgba(0,0,0,0.4);
      overflow: hidden;
      box-shadow: 0 8px 18px rgba(0,0,0,0.28);
    }
    .image-scan-preview img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    .image-scan-body {
      grid-row: 2;
      display: grid;
      grid-template-rows: auto 1fr;
      gap: 8px;
      min-height: 0;
      z-index: 1;
    }
    .image-scan-status {
      position: relative;
      isolation: isolate;
      flex: 1 1 auto;
      min-width: 0;
      text-align: center;
      font-size: clamp(13px, 2.4vw, 15px);
      font-weight: 700;
      color: var(--text);
      letter-spacing: 0.2px;
      line-height: 1.2;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      transition: opacity 0.35s ease, transform 0.35s ease;
    }
    .image-scan-status.is-loading {
      color: transparent;
      background-image: linear-gradient(
        120deg,
        color-mix(in srgb, var(--accent-1) 85%, #ffffff 15%) 0%,
        color-mix(in srgb, var(--accent-2) 85%, #ffffff 15%) 40%,
        #ffffff 55%,
        color-mix(in srgb, var(--accent-1) 85%, #ffffff 15%) 80%,
        color-mix(in srgb, var(--accent-2) 85%, #ffffff 15%) 100%
      );
      background-size: 320% 100%;
      background-position: 0% 50%;
      -webkit-background-clip: text;
      background-clip: text;
      filter:
        drop-shadow(0 0 10px color-mix(in srgb, var(--accent-1) 55%, transparent))
        drop-shadow(0 0 24px color-mix(in srgb, var(--accent-2) 55%, transparent));
      text-shadow:
        0 0 18px color-mix(in srgb, var(--accent-1) 60%, transparent),
        0 0 44px color-mix(in srgb, var(--accent-2) 65%, transparent),
        0 0 90px color-mix(in srgb, var(--accent-1) 45%, transparent);
      animation:
        imageScanShimmer 0.95s linear infinite,
        imageScanFloat 1.2s ease-in-out infinite,
        imageScanGlow 1.5s ease-in-out infinite,
        imageScanPulse 1.4s ease-in-out infinite;
    }
    .image-scan-status.is-loading::before,
    .image-scan-status.is-loading::after {
      content: attr(data-text);
      position: absolute;
      inset: 0;
      color: transparent;
      -webkit-background-clip: text;
      background-clip: text;
      pointer-events: none;
      mix-blend-mode: screen;
      opacity: 0.6;
      filter:
        blur(0.5px)
        drop-shadow(0 0 14px color-mix(in srgb, var(--accent-1) 60%, transparent))
        drop-shadow(0 0 32px color-mix(in srgb, var(--accent-2) 60%, transparent));
    }
    .image-scan-status.is-loading::before {
      background-image: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent-1) 75%, #ffffff 25%), transparent);
      background-size: 200% 100%;
      animation: imageScanSweep 1.1s ease-in-out infinite;
    }
    .image-scan-status.is-loading::after {
      background-image: linear-gradient(120deg, color-mix(in srgb, var(--accent-2) 70%, #ffffff 30%), transparent 70%);
      background-size: 160% 100%;
      animation: imageScanFlicker 2.4s steps(1) infinite;
      opacity: 0.35;
      transform: translateX(1px);
    }
    .image-scan-status.is-hidden {
      opacity: 0;
      transform: translateY(-6px);
      pointer-events: none;
    }
    .image-scan-help {
      font-size: 13px;
      color: var(--muted);
      line-height: 1.4;
    }
    .image-scan-input {
      flex: 1 1 auto;
      width: 100%;
      height: 100%;
      resize: none;
      border-radius: 14px;
      border: 1px solid var(--border);
      padding: 12px 14px;
      background: rgba(0,0,0,0.3);
      color: var(--text);
      font-family: "Manrope", -apple-system, system-ui, sans-serif;
      font-size: 15px;
      line-height: 1.4;
      box-shadow: var(--shadow-inset);
      transition: text-shadow 0.35s ease;
    }
    .image-scan-input.is-typing {
      text-shadow:
        0 0 10px color-mix(in srgb, var(--accent-1) 45%, transparent),
        0 0 24px color-mix(in srgb, var(--accent-2) 35%, transparent);
    }
    .image-scan-input::placeholder {
      color: color-mix(in srgb, var(--muted) 70%, transparent);
    }
    .image-scan-actions {
      grid-row: 3;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 1;
    }
    .image-scan-actions .btn-primary {
      width: 100%;
      min-height: 28px;
      padding: 4px 12px;
      border-radius: 14px;
    }
    .image-scan-actions .btn-primary[disabled] {
      opacity: 0.6;
      cursor: not-allowed;
      filter: grayscale(0.2);
    }
    .image-scan-spacer {
      grid-row: 4;
      min-height: 0;
    }
    @keyframes imageScanSpin {
      to { transform: rotate(360deg); }
    }
    @keyframes imageScanLine {
      0% { transform: translateY(0); opacity: 0.5; }
      50% { transform: translateY(24px); opacity: 1; }
      100% { transform: translateY(0); opacity: 0.5; }
    }
    @keyframes imageScanShimmer {
      0% { background-position: 0% 50%; }
      100% { background-position: 320% 50%; }
    }
    @keyframes imageScanFloat {
      0%, 100% { opacity: 0.75; transform: translateY(0); }
      50% { opacity: 1; transform: translateY(-1px); }
    }
    @keyframes imageScanPulse {
      0%, 100% { transform: translateY(0) scale(1); letter-spacing: 0.2px; }
      50% { transform: translateY(-1px) scale(1.03); letter-spacing: 0.7px; }
    }
    @keyframes imageScanSweep {
      0% { background-position: -120% 50%; }
      100% { background-position: 220% 50%; }
    }
    @keyframes imageScanFlicker {
      0%, 5% { opacity: 0.15; }
      6%, 12% { opacity: 0.6; }
      13%, 55% { opacity: 0.25; }
      56%, 70% { opacity: 0.7; }
      71%, 100% { opacity: 0.35; }
    }
    @keyframes imageScanGlow {
      0%, 100% {
        text-shadow:
          0 0 20px color-mix(in srgb, var(--accent-1) 55%, transparent),
          0 0 46px color-mix(in srgb, var(--accent-2) 60%, transparent),
          0 0 90px color-mix(in srgb, var(--accent-1) 40%, transparent);
      }
      50% {
        text-shadow:
          0 0 34px color-mix(in srgb, var(--accent-1) 80%, transparent),
          0 0 72px color-mix(in srgb, var(--accent-2) 80%, transparent),
          0 0 120px color-mix(in srgb, var(--accent-1) 55%, transparent);
      }
    }

    #gptlike-chat[data-theme-light="1"] .image-scan-modal {
      background: rgba(255,255,255,0.94);
      border-color: var(--border);
    }
    #gptlike-chat[data-theme-light="1"] .image-scan-anim::after {
      background: rgba(255,255,255,0.9);
      box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08);
    }
    #gptlike-chat[data-theme-light="1"] .image-scan-preview {
      background: rgba(255,255,255,0.9);
      border-color: rgba(0,0,0,0.08);
    }
    #gptlike-chat[data-theme-light="1"] .image-scan-input {
      background: rgba(255,255,255,0.96);
      color: #1f2937;
    }
    #gptlike-chat[data-theme-light="1"] .image-scan-status {
      color: #1f2937;
    }
    #gptlike-chat[data-theme-light="1"] .image-scan-status.is-loading {
      text-shadow:
        0 0 18px color-mix(in srgb, var(--accent-1) 55%, transparent),
        0 0 42px color-mix(in srgb, var(--accent-2) 55%, transparent);
      filter:
        drop-shadow(0 0 10px color-mix(in srgb, var(--accent-1) 45%, transparent))
        drop-shadow(0 0 22px color-mix(in srgb, var(--accent-2) 45%, transparent));
    }
    #gptlike-chat[data-theme-light="1"] .image-scan-help {
      color: rgba(51, 65, 85, 0.9);
    }

    .account-body {
      display: flex;
      flex-direction: column;
      gap: 6px;
      margin-top: 4px;
      flex: 1 1 auto;
      min-height: 0;
      overflow: auto;
      position: relative;
      z-index: 1;
    }
    .account-body.account-empty {
      align-items: center;
      justify-content: center;
      min-height: 120px;
      text-align: center;
    }
    .account-note {
      font-size: 14px;
      color: var(--muted);
      line-height: 1.5;
    }
    .account-auth-row {
      width: min(100%, 360px);
      margin-top: 10px;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }

    .account-auth-btn {
      margin-top: 0;
      width: 100%;
      min-height: 44px;
      border: 1px solid color-mix(in srgb, var(--accent-2) 30%, rgba(255,255,255,0.14));
      border-radius: 999px;
      padding: 10px 18px;
      background: linear-gradient(120deg, var(--accent-1), var(--accent-2));
      color: #ffffff;
      font-family: "Manrope", -apple-system, system-ui, sans-serif;
      font-size: 14px;
      font-weight: 800;
      font-variation-settings: "wght" 800;
      letter-spacing: 0.01em;
      cursor: pointer;
      box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
      transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
    }
    .account-auth-btn:hover {
      transform: translateY(-1px);
      box-shadow: 0 12px 28px rgba(0, 0, 0, 0.3);
    }
    .account-auth-btn:active {
      transform: translateY(0);
      filter: brightness(.98);
    }
    .account-auth-btn:focus-visible {
      outline: 2px solid color-mix(in srgb, var(--accent-1) 72%, #ffffff);
      outline-offset: 2px;
    }
    @media (max-width: 420px) {
      .account-auth-row {
        grid-template-columns: 1fr;
      }
    }

    .account-line {
      padding: 10px 12px;
      border: 1px solid var(--border);
      background: rgba(0, 0, 0, 0.12);
      border-radius: 12px;
      color: color-mix(in srgb, var(--text) 88%, transparent);
      font-family: "Manrope", -apple-system, system-ui, sans-serif;
      font-weight: 620;
      font-variation-settings: "wght" 620;
      font-size: 16px;
      line-height: 1.6;
      white-space: pre-line;
      box-shadow: var(--shadow-inset);
    }

    .account-status {
      min-height: 18px;
      font-size: 12px;
      color: var(--auth-accent-2);
      margin: 4px 2px 0;
      z-index: 1;
    }

    .account-other {
      margin-top: 6px;
      padding: 10px 12px;
      border: 1px solid var(--border);
      background: rgba(0, 0, 0, 0.12);
      border-radius: 12px;
      color: color-mix(in srgb, var(--text) 86%, transparent);
      font-family: "Manrope", -apple-system, system-ui, sans-serif;
      font-weight: 600;
      font-variation-settings: "wght" 600;
      font-size: 14px;
      line-height: 1.55;
      white-space: pre-line;
      box-shadow: var(--shadow-inset);
    }
    .account-other.is-empty {
      display: none;
    }

    .account-loading {
      height: 32px;
      border-radius: 10px;
      border: 1px solid var(--border);
      background: linear-gradient(90deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.05));
      background-size: 220% 100%;
      animation: waitShimmer 1.4s ease-in-out infinite;
    }

    #gptlike-chat[data-theme-light="1"] .account-line {
      background: rgba(255, 255, 255, 0.96);
      border-color: var(--border);
      color: #1f2937;
    }

    #gptlike-chat[data-theme-light="1"] .account-other {
      background: rgba(255, 255, 255, 0.96);
      border-color: var(--border);
      color: #1f2937;
    }

    #gptlike-chat[data-theme-light="1"] .account-loading {
      background: linear-gradient(90deg, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.10), rgba(0, 0, 0, 0.04));
      border-color: var(--border);
    }

    .style-modal-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10px;
      position: relative;
      z-index: 1;
    }

    .style-modal-title {
      font-weight: 900;
      font-size: 16px;
      color: #e6edf3;
      letter-spacing: 0.2px;
    }

    .style-close {
      background: linear-gradient(120deg, var(--accent-1), var(--accent-2));
      border: 1px solid color-mix(in srgb, var(--accent-2) 32%, rgba(255,255,255,0.18));
      color: var(--btn-text, #ffffff);
      cursor: pointer;
      font-weight: 800;
      border-radius: 14px;
      padding: 10px 14px;
      transition: background 0.18s, border-color 0.18s, color 0.18s;
      box-shadow: none !important;
      text-shadow: none;
      animation: none;
    }

    .style-close:hover {
      transform: none;
      filter: none;
      box-shadow: none !important;
    }

    .style-close:active {
      transform: translateY(0);
    }

    .style-modal--fullscreen > .style-modal-header {
      grid-row: 1;
      margin: 0;
      min-height: 0;
      border: 1px solid rgba(255,255,255,0.30);
      border-radius: 12px;
      background: rgba(255,255,255,0.03);
      padding: 0 10px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .style-modal--fullscreen .style-modal-title {
      font-size: 15px;
    }
    .style-modal--fullscreen .style-close {
      padding: 6px 10px;
      border-radius: 12px;
      font-size: 12px;
      line-height: 1.1;
      animation: none;
    }
    .style-modal--fullscreen > .settings-section {
      display: contents;
    }

    .style-modal--fullscreen > .settings-section:nth-of-type(2) > .settings-h { grid-row: 2; }
    .style-modal--fullscreen > .settings-section:nth-of-type(2) > .font-slider { grid-row: 3 / span 5; }
    .style-modal--fullscreen > .settings-section:nth-of-type(3) > .settings-h { grid-row: 8; }
    .style-modal--fullscreen > .settings-section:nth-of-type(3) > .theme-mode-block { display: contents; }
    .style-modal--fullscreen > .settings-section:nth-of-type(3) > .theme-mode-block > .settings-sub { grid-row: 9; }
    .style-modal--fullscreen > .settings-section:nth-of-type(3) > .theme-mode-block > .theme-mode-seg { grid-row: 10 / span 2; }
    .style-modal--fullscreen > .settings-section:nth-of-type(4) > .btn-secondary.btn-wide { grid-row: 20; }

    .style-modal--fullscreen > .settings-section:nth-of-type(2) > .settings-h,
    .style-modal--fullscreen > .settings-section:nth-of-type(3) > .settings-h,
    .style-modal--fullscreen > .settings-section:nth-of-type(4) > .settings-h,
    .style-modal--fullscreen > .settings-section:nth-of-type(3) > .theme-mode-block > .settings-sub {
      margin: 0;
      min-height: 0;
      width: 100%;
      border: 1px solid rgba(255,255,255,0.30);
      border-radius: 12px;
      background: rgba(255,255,255,0.03);
      padding: 0 10px;
      display: flex;
      align-items: center;
      font-size: 12px;
      line-height: 1.15;
    }
    .style-modal--fullscreen > .settings-section:nth-of-type(2) > .font-slider,
    .style-modal--fullscreen > .settings-section:nth-of-type(3) > .theme-mode-block > .theme-mode-seg,
    .style-modal--fullscreen > .settings-section:nth-of-type(4) > .btn-secondary.btn-wide {
      margin: 0;
      min-height: 0;
      width: 100%;
      border: 1px solid rgba(255,255,255,0.30);
      border-radius: 12px;
      background: rgba(255,255,255,0.03);
    }
    .style-modal--fullscreen > .settings-section:nth-of-type(2) > .font-slider {
      height: 100%;
      display: grid;
      grid-template-rows: 2fr 1fr 2fr;
      gap: 6px;
      padding: 6px;
    }
    .style-modal--fullscreen .font-preview {
      padding: 8px 10px;
      min-height: 0;
    }
    .style-modal--fullscreen .font-preview-text {
      line-height: 1.3;
    }
    .style-modal--fullscreen .font-slider-row {
      gap: 6px;
      min-height: 0;
    }
    .style-modal--fullscreen .font-size-chip {
      width: 18px;
    }
    .style-modal--fullscreen .font-weight-seg {
      min-height: 0;
      height: 100%;
      padding: 5px;
      gap: 5px;
      border-radius: 12px;
    }
    .style-modal--fullscreen .font-weight-btn {
      min-height: 0;
      height: 100%;
      border-radius: 10px;
      font-size: 12px;
    }
    .style-modal--fullscreen > .settings-section:nth-of-type(3) > .theme-mode-block > .theme-mode-seg {
      min-height: 0;
      height: 100%;
      gap: 6px;
      padding: 6px;
    }
    .style-modal--fullscreen .theme-mode-seg button {
      min-height: 0;
      height: 100%;
      border-radius: 12px;
      font-size: 12px;
      padding: 6px 8px;
    }
    .style-modal--fullscreen .theme-mode-seg button::before {
      width: 18px;
      height: 18px;
      flex: 0 0 18px;
    }
    .style-modal--fullscreen > .settings-section:nth-of-type(4) > .btn-secondary.btn-wide {
      min-height: 0;
      height: 100%;
      border-radius: 12px;
      padding: 0 10px;
      gap: 6px;
      font-size: 12px;
      line-height: 1.1;
    }
    .style-modal--fullscreen .btn-with-icon svg {
      width: 15px;
      height: 15px;
    }

    @keyframes savePulse {
      0%,100% { box-shadow: 0 14px 28px rgba(0,0,0,0.32), 0 0 0 0 color-mix(in srgb, var(--accent-1) 12%, transparent); }
      50%     { box-shadow: 0 14px 28px rgba(0,0,0,0.32), 0 0 0 4px color-mix(in srgb, var(--accent-2) 10%, transparent); }
    }

    .style-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
      gap: 8px;
      place-items: stretch;
      position: relative;
      z-index: 1;
    }

    .style-cell {
      width: 100%;
      aspect-ratio: 1 / 1;
      min-height: 64px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      border-radius: 14px;
      transition: transform 0.18s, box-shadow 0.18s, outline-color 0.18s, filter 0.18s, background 0.18s;
      background: rgba(0, 0, 0, 0.18);
      border: 1px solid rgba(255, 255, 255, 0.12);
      outline: 2px solid transparent;
      box-shadow:
        0 12px 26px rgba(0, 0, 0, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
      position: relative;
      overflow: hidden;
    }
    .style-cell .style-num {
      position: absolute;
      top: 6px;
      left: 8px;
      font-size: 11px;
      font-weight: 800;
      color: rgba(230, 238, 248, 0.65);
      pointer-events: none;
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
    }

    .style-cell::before {
      content: "";
      position: absolute;
      inset: 0;
      background: var(--shine);
      opacity: 0.22;
      pointer-events: none;
    }

    .style-cell:hover {
      transform: translateY(-1px);
      box-shadow: 0 18px 40px rgba(0, 0, 0, 0.36);
      filter: saturate(1.05);
    }

    .style-cell[data-active="true"] {
      outline-color: var(--accent-1);
    }

    .style-swatch {
      width: 18px;
      height: 18px;
      border-radius: 999px;
      border: 1px solid rgba(255, 255, 255, 0.22);
      box-shadow:
        0 10px 20px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
      position: relative;
      z-index: 1;
    }

    .style-cell[data-active="true"] .style-swatch {
      box-shadow:
        0 0 0 3px var(--glow),
        0 12px 26px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
    }

    .style-cell::after {
      content: "";
      position: absolute;
      right: 10px;
      top: 50%;
      width: 10px;
      height: 10px;
      border-radius: 999px;
      transform: translateY(-50%);
      background: rgba(255, 255, 255, 0.14);
      border: 1px solid rgba(255, 255, 255, 0.14);
      opacity: 0.0;
      transition: opacity 0.18s ease, transform 0.18s ease, background 0.18s ease;
      z-index: 1;
    }

    .style-cell[data-active="true"]::after {
      opacity: 1;
      background: linear-gradient(90deg, var(--accent-1), var(--accent-2));
      border-color: rgba(255, 255, 255, 0.22);
      transform: translateY(-50%) scale(1.02);
    }

    .settings-section {
      margin-top: 12px;
      position: relative;
      z-index: 1;
    }
    .settings-h {
      font-weight: 900;
      font-size: 13px;
      color: rgba(230, 238, 248, 0.78);
      letter-spacing: 0.2px;
      margin: 0 0 8px;
    }
    .settings-sub{
      font-weight: 800;
      font-size: 12px;
      color: rgba(230, 238, 248, 0.62);
      margin: 0 0 6px;
    }
    .font-slider{
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .font-preview{
      border: 1px solid rgba(255, 255, 255, 0.14);
      background: rgba(0, 0, 0, 0.22);
      border-radius: 14px;
      padding: 12px 14px;
      box-shadow: var(--shadow-inset);
    }
    .font-preview-text{
      font-size: calc(var(--fz) * var(--chatFontMul));
      font-weight: var(--chatFontWeight);
      line-height: 1.4;
      color: var(--text);
    }
    .font-slider-row{
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .font-size-chip{
      width: 24px;
      text-align: center;
      font-weight: 800;
      color: rgba(230, 238, 248, 0.7);
    }
    .font-size-chip--sm{ font-size: 12px; }
    .font-size-chip--xl{ font-size: 18px; }
    .font-weight-seg{
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 6px;
      border: 1px solid rgba(255, 255, 255, 0.14);
      background: rgba(0, 0, 0, 0.22);
      border-radius: 14px;
      padding: 6px;
      box-shadow: var(--shadow-inset);
      width: 100%;
    }
    .font-weight-btn{
      appearance: none;
      border: none;
      background: transparent;
      color: rgba(230, 238, 248, 0.78);
      font-weight: 800;
      font-size: 13px;
      height: 40px;
      border-radius: 12px;
      cursor: pointer;
      transition: background 0.18s, color 0.18s, transform 0.12s, box-shadow 0.18s;
    }
    .font-weight-btn:hover{
      background: rgba(255, 255, 255, 0.08);
      color: var(--text);
    }
    .font-weight-btn:active{
      transform: scale(0.98);
    }
    .font-weight-btn[data-active="true"]{
      background: linear-gradient(90deg, rgba(148, 163, 184, 0.34), rgba(51, 65, 85, 0.54));
      color: var(--text);
      box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.28),
        0 10px 22px rgba(0, 0, 0, 0.34),
        0 0 0 1px rgba(148, 163, 184, 0.22);
    }
    .theme-mode-block{
      margin-top: 10px;
    }
    .theme-mode-seg{
      display: grid;
      grid-template-columns: 1fr;
      gap: 8px;
      width: 100%;
    }
    .theme-mode-seg button{
      appearance: none;
      border: 1px solid rgba(255,255,255,0.14);
      background:
        linear-gradient(90deg, var(--mode-layer-1), var(--mode-layer-2)),
        rgba(0,0,0,0.18);
      color: rgba(230, 238, 248, 0.78);
      font-weight: 800;
      font-size: 13px;
      height: 44px;
      border-radius: 14px;
      cursor: pointer;
      transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s, color 0.18s;
      display: inline-flex;
      align-items: center;
      justify-content: flex-start;
      gap: 8px;
      padding: 10px 12px;
      position: relative;
      overflow: hidden;
      text-align: left;
    }
    .theme-mode-seg button::before{
      content: "";
      width: 24px;
      height: 24px;
      border-radius: 999px;
      flex: 0 0 24px;
      border: 1px solid rgba(255,255,255,0.30);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.22),
        0 8px 18px rgba(0,0,0,0.28);
      position: relative;
      z-index: 1;
    }
    .theme-mode-seg button[data-theme-mode="dark"]{
      --mode-layer-1: rgba(75, 85, 99, 0.24);
      --mode-layer-2: rgba(17, 24, 39, 0.24);
    }
    .theme-mode-seg button[data-theme-mode="light"]{
      --mode-layer-1: rgba(248, 250, 252, 0.24);
      --mode-layer-2: rgba(203, 213, 225, 0.24);
    }
    .theme-mode-seg button[data-theme-mode="dark"]::before{
      background: #374151;
    }
    .theme-mode-seg button[data-theme-mode="light"]::before{
      background: #ffffff;
    }
    .theme-mode-seg button:hover{
      transform: translateY(-1px);
      box-shadow: 0 14px 30px rgba(0,0,0,0.32);
      color: var(--text);
    }
    .theme-mode-seg button:active{
      transform: scale(0.98);
    }
    .theme-mode-seg button[data-active="true"]{
      color: var(--text);
      border-color: color-mix(in srgb, var(--accent-1) 44%, rgba(255,255,255,0.18));
      box-shadow:
        inset 0 0 0 2px color-mix(in srgb, var(--accent-1) 72%, rgba(255,255,255,0.18));
    }
    .theme-mode-seg button[data-active="true"]::before{
      box-shadow:
        0 0 0 2px color-mix(in srgb, var(--accent-1) 68%, rgba(255,255,255,0.2)),
        inset 0 1px 0 rgba(255,255,255,0.22),
        0 8px 18px rgba(0,0,0,0.28);
    }
    .font-range{
      -webkit-appearance: none;
      appearance: none;
      width: 100%;
      height: 4px;
      border-radius: 999px;
      background: linear-gradient(
        90deg,
        var(--accent-1) 0%,
        var(--accent-2) var(--range-progress, 50%),
        rgba(255,255,255,0.14) var(--range-progress, 50%),
        rgba(255,255,255,0.14) 100%
      );
      outline: none;
    }
    .font-range::-webkit-slider-thumb{
      -webkit-appearance: none;
      appearance: none;
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background: #ffffff;
      border: 2px solid color-mix(in srgb, var(--accent-2) 45%, rgba(255,255,255,0.4));
      box-shadow: 0 8px 18px rgba(0,0,0,0.35);
      cursor: pointer;
    }
    .font-range::-moz-range-thumb{
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background: #ffffff;
      border: 2px solid color-mix(in srgb, var(--accent-2) 45%, rgba(255,255,255,0.4));
      box-shadow: 0 8px 18px rgba(0,0,0,0.35);
      cursor: pointer;
    }
    .font-range::-moz-range-track{
      height: 4px;
      border-radius: 999px;
      background: rgba(255,255,255,0.14);
    }

    .settings-seg {
      display: inline-grid;
      grid-auto-flow: column;
      grid-auto-columns: minmax(86px, 1fr);
      gap: 6px;
      border: 1px solid rgba(255, 255, 255, 0.14);
      background: rgba(0, 0, 0, 0.22);
      border-radius: 14px;
      padding: 6px;
      box-shadow: var(--shadow-inset);
      width: 100%;
    }

    .settings-seg button {
      appearance: none;
      border: none;
      background: transparent;
      color: rgba(230, 238, 248, 0.78);
      font-weight: 800;
      font-size: 13px;
      height: 44px;
      border-radius: 14px;
      cursor: pointer;
      transition: background 0.18s, color 0.18s, transform 0.12s, box-shadow 0.18s;
    }

    .settings-seg button[data-font="sm"] {font-size: 12px;}
    .settings-seg button[data-font="md"] {font-size: 13px;}
    .settings-seg button[data-font="lg"] {font-size: 15px;}
    .settings-seg button[data-font="xl"] {font-size: 16px;}

    .settings-seg button:hover {
      background: rgba(255, 255, 255, 0.08);
      color: var(--text);
    }

    .settings-seg button:active {
      transform: scale(0.98);
    }

    .settings-seg button[data-active="true"] {
      background: linear-gradient(90deg, rgba(249, 115, 22, 0.25), rgba(255, 90, 61, 0.18));
      color: var(--text);
      box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.14),
        0 10px 22px rgba(0, 0, 0, 0.28);
    }

    #gptlike-chat[data-theme-light="1"] .style-modal {
      background: rgba(255, 255, 255, 0.96);
      border-color: var(--border);
      box-shadow: 0 18px 50px rgba(0, 0, 0, 0.14);
    }

    #gptlike-chat[data-theme-light="1"] .style-modal::before {
      opacity: 0.08;
    }

    #gptlike-chat[data-theme-light="1"] .style-modal-title {
      color: #1f2937;
    }

    #gptlike-chat[data-theme-light="1"] .settings-h {
      color: #475569;
    }
    #gptlike-chat[data-theme-light="1"] .settings-sub{
      color: #64748b;
    }
    #gptlike-chat[data-theme-light="1"] .style-modal--fullscreen > .style-modal-header,
    #gptlike-chat[data-theme-light="1"] .style-modal--fullscreen > .settings-section:nth-of-type(2) > .settings-h,
    #gptlike-chat[data-theme-light="1"] .style-modal--fullscreen > .settings-section:nth-of-type(3) > .settings-h,
    #gptlike-chat[data-theme-light="1"] .style-modal--fullscreen > .settings-section:nth-of-type(4) > .settings-h,
    #gptlike-chat[data-theme-light="1"] .style-modal--fullscreen > .settings-section:nth-of-type(3) > .theme-mode-block > .settings-sub {
      border-color: rgba(15, 23, 42, 0.34);
      background: rgba(255,255,255,0.68);
    }
    #gptlike-chat[data-theme-light="1"] .style-modal--fullscreen > .settings-section:nth-of-type(2) > .font-slider,
    #gptlike-chat[data-theme-light="1"] .style-modal--fullscreen > .settings-section:nth-of-type(3) > .theme-mode-block > .theme-mode-seg,
    #gptlike-chat[data-theme-light="1"] .style-modal--fullscreen > .settings-section:nth-of-type(4) > .btn-secondary.btn-wide{
      border-color: rgba(15, 23, 42, 0.24);
      background: rgba(255,255,255,0.88);
    }
    #gptlike-chat[data-theme-light="1"] .style-modal--fullscreen > .settings-section:nth-of-type(3) > .theme-mode-block > .theme-mode-seg{
      background: transparent !important;
      border-color: transparent !important;
    }
    #gptlike-chat[data-theme-light="1"] .font-preview{
      background: rgba(255,255,255,0.92);
      border-color: var(--border);
    }
    #gptlike-chat[data-theme-light="1"] .font-size-chip{
      color: #475569;
    }
    #gptlike-chat[data-theme-light="1"] .font-weight-seg{
      background: #ffffff;
      border-color: var(--border);
    }
    #gptlike-chat[data-theme-light="1"] .font-weight-btn{
      color: #1f2937;
    }
    #gptlike-chat[data-theme-light="1"] .font-weight-btn:hover{
      background: rgba(36, 48, 65, 0.06);
      color: #1f2937;
    }
    #gptlike-chat[data-theme-light="1"] .font-weight-btn[data-active="true"]{
      background: linear-gradient(90deg, rgba(148, 163, 184, 0.34), rgba(71, 85, 105, 0.22));
      color: #0f172a;
      box-shadow:
        inset 0 0 0 1px rgba(15, 23, 42, 0.24),
        0 10px 22px rgba(0, 0, 0, 0.14),
        0 0 0 1px rgba(71, 85, 105, 0.18);
    }
    #gptlike-chat[data-theme-light="1"] .theme-mode-seg button{
      border-color: var(--border);
      background:
        linear-gradient(90deg, var(--mode-layer-light-1), var(--mode-layer-light-2)),
        #ffffff;
      color: #1f2937;
    }
    #gptlike-chat[data-theme-light="1"] .theme-mode-seg button[data-theme-mode="dark"]{
      --mode-layer-light-1: rgba(71, 85, 105, 0.22);
      --mode-layer-light-2: rgba(15, 23, 42, 0.24);
    }
    #gptlike-chat[data-theme-light="1"] .theme-mode-seg button[data-theme-mode="light"]{
      --mode-layer-light-1: rgba(248, 250, 252, 0.92);
      --mode-layer-light-2: rgba(203, 213, 225, 0.40);
    }
    #gptlike-chat[data-theme-light="1"] .theme-mode-seg button::before{
      border-color: rgba(0,0,0,0.18);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.22),
        0 8px 18px rgba(0,0,0,0.14);
    }
    #gptlike-chat[data-theme-light="1"] .theme-mode-seg button:hover{
      box-shadow: 0 10px 22px rgba(0,0,0,0.12);
      color: #1f2937;
    }
    #gptlike-chat[data-theme-light="1"] .theme-mode-seg button[data-active="true"]{
      color: #1f2937;
      border-color: color-mix(in srgb, var(--accent-1) 44%, rgba(0,0,0,0.18));
      box-shadow:
        inset 0 0 0 2px color-mix(in srgb, var(--accent-1) 58%, rgba(0,0,0,0.2));
    }
    #gptlike-chat[data-theme-light="1"] .theme-mode-seg button[data-active="true"]::before{
      box-shadow:
        0 0 0 2px color-mix(in srgb, var(--accent-1) 58%, rgba(0,0,0,0.22)),
        inset 0 1px 0 rgba(255,255,255,0.22),
        0 8px 18px rgba(0,0,0,0.14);
    }
    #gptlike-chat[data-theme-light="1"] .font-range{
      background: linear-gradient(
        90deg,
        var(--accent-1) 0%,
        var(--accent-2) var(--range-progress, 50%),
        rgba(0,0,0,0.08) var(--range-progress, 50%),
        rgba(0,0,0,0.08) 100%
      );
    }
    #gptlike-chat[data-theme-light="1"] .font-range::-webkit-slider-thumb,
    #gptlike-chat[data-theme-light="1"] .font-range::-moz-range-thumb{
      box-shadow: 0 6px 16px rgba(0,0,0,0.16);
      border-color: rgba(0,0,0,0.12);
    }

    #gptlike-chat[data-theme-light="1"] .style-close {
      background: linear-gradient(120deg, var(--accent-1), var(--accent-2));
      color: #ffffff;
      border-color: color-mix(in srgb, var(--accent-2) 32%, rgba(0,0,0,0.12));
      box-shadow: none !important;
      text-shadow: none;
    }
    /* Светлые темы (9–12): убираем любое осветление на hover/active */
    #gptlike-chat[data-theme-light="1"] .style-close:hover,
    #gptlike-chat[data-theme-light="1"] .style-close:active {
      filter: none !important;
      box-shadow: none !important;
      background: linear-gradient(120deg, var(--accent-1), var(--accent-2)) !important;
      color: #ffffff !important;
    }

    #gptlike-chat[data-theme-light="1"] .style-close:hover {
      background: linear-gradient(120deg, var(--accent-1), var(--accent-2));
      border-color: color-mix(in srgb, var(--accent-2) 32%, rgba(0,0,0,0.12));
      box-shadow: none !important;
    }

    /* Account modal */
    .account-modal {
      max-width: 560px;
      width: min(560px, 92vw);
    }

    .account-body {
      display: flex;
      flex-direction: column;
      gap: 10px;
      margin-top: 6px;
      position: relative;
      z-index: 1;
    }

    .account-line {
      padding: 10px 12px;
      border: 1px solid var(--border);
      background: rgba(0, 0, 0, 0.18);
      border-radius: 14px;
      color: var(--text);
      font-weight: 900;
      box-shadow: var(--shadow-inset);
    }

    .account-status {
      min-height: 18px;
      font-size: 12px;
      color: var(--auth-accent-2);
      margin: 4px 2px 0;
      z-index: 1;
    }

    .account-loading {
      height: 42px;
      border-radius: 12px;
      border: 1px solid var(--border);
      background: linear-gradient(90deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.06));
      background-size: 220% 100%;
      animation: waitShimmer 1.4s ease-in-out infinite;
    }

    #gptlike-chat[data-theme-light="1"] .account-line {
      background: rgba(255, 255, 255, 0.92);
      border-color: var(--border);
      color: #1f2937;
    }

    #gptlike-chat[data-theme-light="1"] .account-loading {
      background: linear-gradient(90deg, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.10), rgba(0, 0, 0, 0.04));
      border-color: var(--border);
    }

    #gptlike-chat[data-theme-light="1"] .settings-seg {
      background: #ffffff;
      border-color: var(--border);
    }

    #gptlike-chat[data-theme-light="1"] .settings-seg button {
      color: #1f2937;
    }

    #gptlike-chat[data-theme-light="1"] .settings-seg button:hover {
      background: rgba(36, 48, 65, 0.06);
      color: #1f2937;
    }

    #gptlike-chat[data-theme-light="1"] .settings-seg button[data-active="true"] {
      background: linear-gradient(90deg, rgba(36, 48, 65, 0.14), rgba(58, 71, 90, 0.10));
      color: #1f2937;
      box-shadow:
        inset 0 0 0 1px rgba(0, 0, 0, 0.10),
        0 10px 22px rgba(0, 0, 0, 0.10);
    }
    #gptlike-chat[data-theme-light="1"] #clearHistorySettings.btn-secondary.btn-wide{
      border: 1px solid rgba(15, 23, 42, 0.42);
      background:
        linear-gradient(180deg, rgba(255,255,255,0.98), rgba(241,245,249,0.92));
      color: #1f2937;
      box-shadow:
        inset 0 0 0 1px rgba(15, 23, 42, 0.10);
    }
    #gptlike-chat[data-theme-light="1"] #clearHistorySettings.btn-secondary.btn-wide:hover{
      border-color: rgba(15, 23, 42, 0.56);
      background:
        linear-gradient(180deg, rgba(255,255,255,1), rgba(236,242,248,0.96));
      box-shadow:
        inset 0 0 0 1px rgba(15, 23, 42, 0.14);
    }

    .confirm {
      width: min(540px, 92vw);
      background: rgba(21, 23, 28, 0.90);
      border: 1px solid rgba(255, 255, 255, 0.2);
      border-radius: 20px;
      padding: 14px;
      box-shadow: var(--shadow-3);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      animation: popIn 0.22s ease-out both;
      position: relative;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .confirm::before {
      content: "";
      position: absolute;
      inset: -2px;
      background:
        radial-gradient(520px 220px at 20% 0%, var(--accent-1) 0%, transparent 70%),
        radial-gradient(520px 220px at 85% 20%, var(--accent-2) 0%, transparent 72%);
      opacity: 0.12;
      filter: blur(18px);
      pointer-events: none;
    }

    .confirm .txt {
      color: var(--text);
      margin: 0;
      position: relative;
      z-index: 1;
      line-height: 1.25;
      font-weight: 900;
    }

    .confirm .note {
      position: relative;
      z-index: 1;
      font-size: 12px;
      line-height: 1.35;
      color: rgba(230, 238, 248, 0.72);
    }

    .confirm .row {
      display: flex;
      gap: 8px;
      justify-content: flex-end;
      position: relative;
      z-index: 1;
      flex-wrap: wrap;
    }

    .confirm .row .btn-primary,
    .confirm .row .btn-secondary {
      height: 40px;
      border-radius: 14px;
      padding: 0 12px;
    }

    #gptlike-chat[data-theme-light="1"] .confirm {
      background: rgba(255, 255, 255, 0.96);
      border-color: var(--border);
      box-shadow: 0 18px 50px rgba(0, 0, 0, 0.18);
    }

    #gptlike-chat[data-theme-light="1"] .confirm::before {
      opacity: 0.08;
    }

    #gptlike-chat[data-theme-light="1"] .confirm .txt {
      color: #1f2937;
    }

    #gptlike-chat[data-theme-light="1"] .confirm .note {
      color: #475569;
    }

    .message.is-clearing {
      animation: chatWipeOut 0.22s ease forwards;
    }

    .img-wrap {
      animation: imgPop 0.18s ease-out both;
      position: relative;
      max-width: min(560px, 70vw);
      border-radius: 16px;
      overflow: hidden;
      margin: 8px 0;
      border: 1px solid rgba(255, 255, 255, 0.10);
      box-shadow: 0 18px 44px rgba(0, 0, 0, 0.30);
    }

    .img-wrap img {
      animation: imgPop 0.2s ease-out both;
      display: block;
      width: 70%;
      height: auto;
      margin: 0 auto;
      -webkit-user-drag: none;
      user-select: none;
      pointer-events: none;
    }

    .img-shield {
      position: absolute;
      inset: 0;
      background: transparent;
      user-select: none;
    }

    @media (max-width: 640px) {
      :root {
        /* финальные крупные размеры для мобилы */
        --btnH: 82px;
        --btnFz: clamp(16px, 4.8vw, 18px);
      }

      .auth-box {
        min-width: 0;
        width: 100%;
        padding: 18px 16px;
        border-radius: 18px;
      }

      .lang-row {
        flex-direction: column;
        gap: 8px;
        margin: 2px 0 6px;
      }

      .lang-seg {
        width: 100%;
        max-width: var(--lang-w);
        height: var(--lang-h);
      }

      .auth-social,
      .auth-divider {
        max-width: var(--auth-control-w);
      }

      .auth-field {
        max-width: var(--auth-control-w);
      }

      .google-btn {
        height: var(--auth-control-h);
      }

      .auth-buttons {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
        max-width: var(--auth-control-w);
      }

      .auth-buttons .btn-primary,
      .auth-buttons .btn-secondary {
        height: var(--auth-control-h);
        line-height: var(--auth-control-h);
        font-size: var(--btnFz);
        width: 100%;
      }

      .reset-pass {
        width: 100%;
        text-align: right;
        line-height: 1.2;
        margin-top: 2px;
      }

      /* единый горизонтальный паддинг для верхнего блока/контента на мобилках */
      :root { --mPadX: var(--content-edge-x); }

      .header-row {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        grid-template-areas:
          "account settings messages logout"
          "mode mode mode mode";
        gap: 12px;
        padding: 8px 0 14px;
        margin: 0 var(--mPadX);
        align-items: stretch;
        position: relative;
      }

      .header-left { grid-area: mode; }

      .header-right { display: contents; }

      .icon-only {
        width: 100%;
        height: var(--btnH);
        min-height: var(--btnH);
        padding: 0 16px;
        flex-direction: row;
        gap: 10px;
        overflow: visible;
        align-items: center;
      }

      #messagesBtn { flex-direction: row; justify-content: center; gap: 10px; }
      .icon-only svg,
      #messagesBtn svg {
        width: 28px;
        height: 28px;
      }

      /* на мобильных показываем подпись/стрелку и кладём над селектором */
      .mode-label {
        display: block;
        margin: 0 0 8px 4px; /* чуть правее */
        font-weight: 800;
        color: var(--link);
        align-items: center;
        gap: 6px;
        text-align: left;
        font-size: clamp(16px, 4.5vw, 18px);
        position: relative;
      }
      /* дропдаун на всю ширину */
      .mode-select-wrap {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        width: 100%;
        grid-column: 1 / -1; /* растягиваем на все 4 колонки сетки */
        padding: 0;
      }
      .mode-select {
        width: 100%;
        min-width: 0;
        max-width: none;
        height: 60px; /* селектор чуть ниже кнопок */
        line-height: 52px; /* ровная вертикаль */
        padding: 0 40px 0 16px; /* кликабельная зона */
        font-size: clamp(15px, 4.2vw, 17px);
      }
      .mode-select-wrap select {
        width: 100%;
        min-width: 0;
        max-width: none;
        height: 60px;
        line-height: 52px;
        padding: 0 40px 0 16px;
        font-size: clamp(15px, 4.2vw, 17px);
      }

      /* стрелка вниз-влево и мягкая анимация */
      .mode-label::after {
        content: "↓";
        display: inline-block;
        margin-left: 8px;
        font-size: 20px;
        transform: translateY(-8px); /* ещё выше */
        animation: arrowPulseMobile 1.35s ease-in-out infinite;
      }
      @keyframes arrowPulseMobile {
        0%,100% { transform: translateY(0px); opacity: 0.8; }
        50% { transform: translateY(4px); opacity: 1; }
      }

      #messagesBtn {
        flex-direction: row;
        justify-content: center;
        gap: 10px;
      }
      .unread-label {
        display: inline-block;
        margin-left: 6px;
        margin-top: 0;
        position: static;
        transform: none;
        bottom: auto;
        left: auto;
      }

      .icon-only {
        width: 100%;
        height: var(--btnH);
        min-height: var(--btnH);
        padding: 0 16px;
        flex-direction: row;
        gap: 10px;
        overflow: visible;
        align-items: center;
      }

    .gptlike-wrapper.posts-open .header-left {
      display: none;
    }

    @media (max-height: 720px) {
      .auth-center{
        --auth-control-h: 40px;
        --lang-h: calc(var(--auth-control-h) - 2px);
        --auth-gap: 6px;
      }
      .auth-title{
        font-size: clamp(24px, 3vw, 32px);
      }
      .lang-label,
      .auth-divider{
        font-size: 13px;
      }
      .field-label,
      .field-error{
        font-size: 11px;
      }
    }

      #accountBtn {
        grid-area: account;
      }

      #settingsBtn {
        grid-area: settings;
      }

      #messagesBtn {
        grid-area: messages;
      }

      #logoutBtn {
        grid-area: logout;
      }

    #messagesBtn { position: relative; flex-direction: row; gap: 6px; align-items: center; justify-content: center; }
    #messagesBtn svg { width: 28px; height: 28px; color: #ffffff !important; }

      .header-row {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-template-areas:
          "account settings messages logout"
          "mode mode mode mode";
        gap: 12px;
        padding: 12px var(--mPadX);
        align-items: stretch;
      }
      .header-left { grid-area: mode; display: contents; }
      .header-right { display: contents; }

      .messages {
        padding: 12px 0;
        gap: 12px;
        margin: 12px var(--mPadX) 12px;
        padding-left: var(--mPadX);
        padding-right: var(--mPadX);
      }

      .composer-wrapper {
        padding: 12px 0;
        padding-bottom: calc(12px + var(--safeB));
        margin: 0 var(--mPadX);
      }

      .composer { align-items: center; gap: 12px; }

      .input {
        min-height: var(--btnH);
        height: var(--btnH);
        line-height: calc(var(--btnH) - 10px);
        font-size: clamp(17px, 5vw, 19px);
        padding: 0 20px;
      }

      .btn-primary,
      .btn-secondary {
        padding: 14px 18px;
        height: var(--btnH);
        font-size: clamp(16px, 4.5vw, 18px);
      }

      /* жёсткие мобильные размеры, чтобы точно применилось (слегка уменьшили) */
      .icon-only,
      #messagesBtn {
        height: 70px !important;
        min-height: 70px !important;
      }
      .icon-only svg,
      #messagesBtn svg {
        width: 36px !important;
        height: 36px !important;
      }
      .input,
      .composer .btn-primary,
      .composer .btn-secondary {
        height: 70px !important;
        min-height: 70px !important;
        line-height: 52px !important; /* центрируем текст */
        font-size: 18px !important;
        padding: 9px 20px !important;
      }

      /* мобильные: сетка 4 кнопки, ширина по ячейке */
      .header-row {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-template-areas:
          "account settings messages logout"
          "mode mode mode mode";
        gap: 12px;
        padding: 8px var(--mPadX) 14px;
        align-items: stretch;
      }
      .header-left { grid-area: mode; display: contents; }
      .header-right { display: contents; }

      .icon-only {
        width: 100%;
        min-width: 0;
        height: var(--btnH);
        min-height: var(--btnH);
        padding: 0 10px;
        flex-direction: row;
        gap: 6px;
        align-items: center;
        justify-content: center;
        overflow: hidden;
      }
      #messagesBtn { flex-direction: row; justify-content: center; gap: 6px; }
      #messagesBtn svg { width: 20px; height: 20px; color: #ffffff !important; flex: 0 0 20px; }
      .unread-number {
        margin-left: 4px;
        color: var(--link) !important;
        -webkit-text-fill-color: var(--link) !important;
      }
      #messagesBtn .unread-number {color: var(--link) !important; -webkit-text-fill-color: var(--link) !important;}

      .message.typing .bubble {
        min-width: 0;
        width: 100%;
        max-width: 100%;
      }

      .confirm {
        padding: 12px;
      }

      .style-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
      }

      .style-cell {
        height: 40px;
    }

    textarea#userInput.input {
      min-height: var(--btnH);
    }
  }

  @media (max-width: 360px) {
    .header-row { gap: 6px; }

    .btn-primary,
    .btn-secondary {
      font-size: clamp(12px, 3.4vw, 13.5px);
    }

    .field-error {
      white-space: normal;
      max-width: 46vw;
    }
  }

  /* === Desktop layout: left 2/3 mode, right 1/3 buttons equally spaced === */
  @media (min-width: 901px) {
    .header-row {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px var(--content-edge-x);
      flex-wrap: nowrap;
    }
    .header-left {
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 0;
      flex: 2 1 0;
    }
    .header-right {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 10px;
      flex: 1 1 0;
    }
    .icon-only {
      width: 100%;
      min-width: 0;
      height: var(--btnH);
      min-height: var(--btnH);
      padding: 0 12px;
      border-radius: 14px;
      gap: 6px;
    }
    #messagesBtn { gap: 6px; }
    #messagesBtn svg { width: 20px; height: 20px; color: #ffffff !important; }
    .unread-number { margin-left: 4px; }
  }


    @media (prefers-reduced-motion: reduce) {
      * {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
      }
      /* оставляем мигание счётчика непрочитанных даже при reduce-motion */
      #messagesBtn .unread-number {
        animation-name: unreadPulse !important;
        animation-duration: 1.8s !important;
        animation-timing-function: ease-in-out !important;
        animation-iteration-count: infinite !important;
        -webkit-animation-name: unreadPulse !important;
        -webkit-animation-duration: 1.8s !important;
        -webkit-animation-timing-function: ease-in-out !important;
        -webkit-animation-iteration-count: infinite !important;
      }
    }

    /* ===== Финальный слой переопределений для мобилок (fix конфликтов) ===== */
    @media (max-width: 640px) {
      /* размеры кнопок/иконок */
      .icon-only,
      #messagesBtn {
        height: 70px !important;
        min-height: 70px !important;
      }
      .icon-only svg,
      #messagesBtn svg {
        width: 28px !important;
        height: 28px !important;
        flex: 0 0 28px !important;
      }
      /* поле ввода и кнопки снизу */
      .input,
      .composer .btn-primary,
      .composer .btn-secondary {
        height: 64px !important;          /* ещё -2px сверху/снизу */
        min-height: 64px !important;
        line-height: 46px !important;
        font-size: 18px !important;
        padding: 6px 18px !important;
      }
      .composer .btn-primary,
      .composer .btn-secondary {
        line-height: 46px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 18px !important;
      }
      /* селектор чуть ниже, но компактнее */
      .mode-select,
      .mode-select-wrap select {
        height: 60px !important;
        line-height: 52px !important;
        padding: 0 40px 0 16px !important;
        font-size: clamp(15px, 4.2vw, 17px) !important;
      }
    }

    /* ===== Final Layout Normalization =====
       Unified shell for all app screens:
       - one outer inset from screen edges
       - one inner content inset
       - full-height container chain
    */
    :root {
      --shell-edge-x: var(--screen-edge-x);
      --shell-edge-bottom: var(--screen-edge-bottom);
      --shell-inner-x: var(--content-edge-x);
    }

    #authContainer,
    #onboardingScreen,
    #chatContainer {
      width: 100%;
      height: 100%;
      min-height: 100%;
      background: transparent;
      box-sizing: border-box;
    }

#authContainer {
  --auth-edge: var(--shell-inner-x);
}

/* Auth as modal: isolate from app + remove star background */
body.auth-lock-active #appGlobalBackground,
body.auth-lock-active #appGlobalBackground::before,
body.auth-lock-active #appGlobalBackground::after{
  display: none !important;
}
body.auth-lock-active #appGlobalBackground #spaceBackground{
  display: none !important;
}
body.auth-lock-active #authContainer{
  position: fixed;
  inset: 0;
  display: flex !important;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.74);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: var(--screen-edge-top) var(--screen-edge-x) var(--screen-edge-bottom);
}
body.auth-lock-active #authContainer .auth-layout{
  width: min(520px, var(--modalW));
  max-width: min(520px, var(--modalW));
  height: auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: rgba(21, 23, 28, 0.90);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 18px;
  padding: 12px;
  box-shadow: var(--shadow-3);
  overflow: hidden;
}
body.auth-lock-active #authContainer .auth-mini-bar{
  justify-content: flex-end;
  width: 100%;
}
body.auth-lock-active #authContainer #authBackBtn{
  margin-left: auto;
  width: 40px;
  height: 40px;
  padding: 0;
  font-size: 0 !important;
  line-height: 0 !important;
  text-indent: -9999px !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  color: var(--gold-ui-text);
  background: var(--gold-ui-bg);
  border: 1px solid var(--gold-ui-border);
  box-shadow: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
body.auth-lock-active #authContainer #authBackBtn::before{
  content: "";
  width: 22px;
  height: 22px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round' fill='none'><path d='M6 6l12 12M18 6L6 18'/></svg>") center/contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round' fill='none'><path d='M6 6l12 12M18 6L6 18'/></svg>") center/contain no-repeat;
}
body.auth-lock-active #authContainer .auth-panel{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}
body.auth-lock-active #authContainer .auth-body{
  overflow: auto;
}

    #onboardingScreen {
      padding: var(--screen-edge-top) var(--shell-edge-x) var(--screen-edge-bottom) !important;
      box-sizing: border-box;
    }
    #chatContainer {
      padding: var(--screen-edge-top) var(--shell-edge-x) var(--shell-edge-bottom) !important;
      box-sizing: border-box;
    }

    #onboardingScreen .onb-pages,
    #onboardingScreen .onb-page,
    #onboardingScreen .onb-frame,
    #onboardingScreen .onb-grid,
    #chatContainer,
    #chatContainer .chat-shell,
    #chatContainer .chat-body {
      height: 100%;
      min-height: 0;
    }

    #onboardingScreen .onb-page {
      --onb-edge: 0px;
      --onb-bottom-edge: 0px;
      --onb-inner-w: 100%;
      --onb-list-w: 100%;
    }

    #onboardingScreen .onb-zone {
      padding-inline: var(--shell-inner-x) !important;
    }

    #onboardingScreen[data-page="2"] .onb-frame::before,
    #onboardingScreen[data-page="2"] .onb-frame::after,
    #onboardingScreen[data-page="3"] .onb-frame::before,
    #onboardingScreen[data-page="3"] .onb-frame::after {
      content: none !important;
      display: none !important;
    }

    #onboardingScreen .onb-mini-bar,
    #onboardingScreen .onb-cta-row,
    #onboardingScreen .onb-section-title,
    #onboardingScreen .onb-list,
    #onboardingScreen .onb-bottom-wrap {
      width: 100% !important;
      max-width: 100% !important;
      margin-inline: 0 !important;
      padding-inline: 0 !important;
      box-sizing: border-box;
    }

    #onboardingScreen .onb-page[data-page="3"] .onb-list--arcana {
      display: none;
    }
    #onboardingScreen .onb-page[data-page="3"] .onb-spreads-spacer {
      display: none;
    }
    #onboardingScreen[data-submenu="spreads"] .onb-page[data-page="3"] {
      --onb-item-pad: 3px;
    }
    #onboardingScreen[data-submenu="spreads"] .onb-page[data-page="3"] .onb-grid--page3 {
      grid-template-rows: auto 1fr;
    }
    #onboardingScreen[data-submenu="spreads"] .onb-page[data-page="3"] .onb-zone--bottom {
      display: none;
    }
    #onboardingScreen[data-submenu="spreads"] .onb-page[data-page="3"] .onb-zone--mid {
      grid-row: 2;
      padding-bottom: 0;
      flex-direction: column;
    }
    #onboardingScreen[data-submenu="spreads"] .onb-page[data-page="3"] .onb-list--spreads {
      flex: 1 1 auto;
    }
    #onboardingScreen[data-submenu="spreads"] .onb-page[data-page="3"] .onb-spreads-spacer {
      display: block;
      flex: 0 0 5%;
      height: 5%;
      min-height: 5%;
      width: var(--onb-list-w);
      margin-inline: auto;
      pointer-events: none;
    }
    #onboardingScreen[data-submenu="arcana"] .onb-page[data-page="3"] .onb-grid--page3 {
      grid-template-rows: auto 1fr auto;
    }
    #onboardingScreen[data-submenu="arcana"] .onb-page[data-page="3"] .onb-list--spreads {
      display: none;
    }
    #onboardingScreen[data-submenu="arcana"] .onb-page[data-page="3"] .onb-list--arcana {
      display: grid;
      grid-template-rows: repeat(2, 1fr);
      height: 100%;
      gap: 0;
    }
    #onboardingScreen[data-submenu="arcana"] .onb-page[data-page="3"] .onb-zone--mid {
      grid-row: 2;
      padding-block: 0;
    }
    #onboardingScreen[data-submenu="arcana"] .onb-page[data-page="3"] .onb-zone--helper {
      display: none;
    }
    #onboardingScreen[data-submenu="arcana"] .onb-page[data-page="3"] .onb-zone--bottom {
      grid-row: 3;
    }
    #onboardingScreen[data-submenu="arcana"] .onb-page[data-page="3"] .onb-list--arcana .onb-btn {
      white-space: normal;
      overflow: visible;
      text-overflow: clip;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
      gap: 2px;
      line-height: 1.18;
    }
    #onboardingScreen[data-submenu="arcana"] .onb-page[data-page="3"] .onb-list--arcana .onb-arcana-btn {
      font-size: clamp(16px, 2.8vw, 19px);
      line-height: 1.2;
    }
    #onboardingScreen[data-submenu="arcana"] .onb-page[data-page="3"] .onb-list--arcana .onb-arcana-main {
      display: block;
      font-size: clamp(12px, 2.2vw, 15px);
      font-weight: 700;
      line-height: 1.15;
    }
    #onboardingScreen[data-submenu="arcana"] .onb-page[data-page="3"] .onb-list--arcana .onb-arcana-sub {
      display: block;
      font-size: clamp(11px, 2vw, 13px);
      font-weight: 620;
      line-height: 1.15;
      opacity: 0.86;
    }

    #chatContainer.chat-wrapper.show {
      display: block !important;
    }
    .gptlike-wrapper.onboarding-active #chatContainer {
      visibility: hidden !important;
      pointer-events: none !important;
    }
    .gptlike-wrapper.auth-active #chatContainer {
      display: none !important;
      visibility: hidden !important;
      pointer-events: none !important;
    }
    #chatContainer {
      display: block;
      padding: var(--screen-edge-top) var(--shell-edge-x) var(--shell-edge-bottom) !important;
      box-sizing: border-box;
      overflow: hidden;
    }
    #chatContainer .chat-shell {
      width: 100%;
      height: 100%;
      min-height: 0;
      display: grid;
      grid-template-rows: clamp(56px, 10%, 96px) minmax(0, 1fr);
      row-gap: 0;
      border: 1px solid rgba(255,255,255,0.24);
      border-radius: 12px;
      overflow: hidden;
    }
    #chatContainer[data-screen="posts"] .chat-shell {
      grid-template-rows: clamp(56px, 10%, 96px) minmax(0, 1fr);
    }
    #chatContainer .chat-backbar,
    #chatContainer .chat-titlebar,
    #chatContainer .chat-lower,
    #chatContainer .chat-body,
    #chatContainer .composer-wrapper {
      width: 100%;
      max-width: 100%;
      margin-inline: 0 !important;
      box-sizing: border-box;
    }
    #chatContainer .chat-backbar {
      grid-row: 1;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 10px;
      padding: 0 var(--shell-inner-x) !important;
      min-height: 0;
      height: 100%;
      border: 0;
      border-bottom: 1px solid rgba(255,255,255,0.24);
      border-radius: 0;
      background: rgba(255,255,255,0.03);
    }
    #chatContainer .chat-titlebar {
      display: none !important;
    }
    #chatContainer .chat-scenario-meta {
      margin-left: auto;
      min-width: 0;
      max-width: 100%;
      flex: 1 1 auto;
      display: inline-flex;
      align-items: center;
      justify-content: flex-end;
      gap: 4px;
      overflow: hidden;
    }
    #chatContainer .chat-scenario-arrow {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 auto;
      font-size: clamp(15px, 2.5vw, 18px);
      line-height: 1;
      font-weight: 900;
      color: var(--accent-1);
      text-shadow: none;
      position: relative;
      top: 0;
      animation: none;
      order: -1;
    }
    @keyframes chatScenarioArrowDown {
      0%, 100% { transform: translateY(-2px); opacity: 0.9; }
      50% { transform: translateY(2px); opacity: 1; }
    }
    #chatContainer .chat-scenario-title {
      font-weight: 700;
      font-size: clamp(14px, 2.4vw, 15px);
      line-height: 1.2;
      color: var(--accent-1);
      text-shadow: none;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: clip;
      width: auto;
      max-width: 100%;
      min-width: 0;
      flex: 0 1 auto;
      text-align: left;
    }
    #chatContainer .chat-clear-btn {
      margin-left: 4px;
      flex: 0 0 auto;
    }
    #chatContainer .chat-clear-btn{
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 36px;
      height: 36px;
      padding: 0;
      margin-left: 4px;
      background: transparent;
      border: 0;
      outline: none;
      box-shadow: none;
      cursor: pointer;
      color: inherit;
      opacity: 0.9;
    }
    #chatContainer .chat-clear-btn svg{
      width: 20px;
      height: 20px;
      flex: 0 0 20px;
    }
    #chatContainer .chat-clear-btn:hover{
      opacity: 1;
      transform: translateY(-1px);
    }
    #chatContainer .chat-clear-btn:active{
      transform: translateY(0);
      opacity: 0.8;
    }
    #chatContainer[data-screen="posts"] .chat-clear-btn{
      display: none;
    }
    #chatContainer[data-screen="instruction"] .chat-clear-btn{
      display: none;
    }
    #chatContainer[data-support-view] .chat-clear-btn{
      display: none;
    }
    #chatContainer .chat-lower {
      grid-row: 2;
      display: flex;
      flex-direction: column;
      min-height: 0;
      height: auto;
      padding: 0 !important;
      overflow: hidden;
    }

    /* ===== Spread-only extra rows (between top bar and chat) ===== */
    #chatContainer .chat-spread-row {
      display: none;
      align-items: stretch;
      justify-content: center;
      gap: 10px;
      padding: 0 !important;
      min-height: 0;
      height: 100%;
      border: 0;
      background: transparent;
      box-sizing: border-box;
      width: 100%;
    }
    #chatContainer .chat-spread-btn {
      width: 100%;
      height: 100%;
      min-height: 0;
    }
    #chatContainer .chat-spread-row .onb-btn {
      height: calc(100% - 6px) !important;
      margin-block: 3px;
      min-height: 0 !important;
      justify-content: center !important;
      text-align: center !important;
      padding-inline: 14px !important;
      position: relative;
      z-index: 1;
      font-size: clamp(12px, 2.1vw, 15px);
      letter-spacing: 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    #chatContainer .chat-spread-row .onb-btn-label {
      display: block;
      width: 100%;
      max-width: none;
      margin: 0;
      text-align: center;
      pointer-events: none;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    #chatContainer .chat-spread-row--actions {
      display: none;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }
    #chatContainer .chat-support-note {
      display: none;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 0 var(--shell-inner-x);
      font-size: clamp(18px, 4.2vw, 22px);
      line-height: 1.45;
      color: rgba(180, 196, 214, 0.78);
    }
    #chatContainer[data-spread-ui="1"] .chat-shell {
      grid-template-rows: clamp(56px, 10%, 96px) 5% 5% minmax(0, 1fr);
    }
#chatContainer[data-spread-ui="1"] .chat-spread-row {
  display: flex;
}
    #chatContainer[data-spread-ui="1"] .chat-support-note {
      display: none;
    }
    #chatContainer[data-spread-ui="1"] .chat-spread-row--support {
      display: none;
    }
#chatContainer[data-spread-ui="1"] .chat-spread-row--deck {
  grid-row: 2;
}
#chatContainer[data-spread-ui="1"] .chat-spread-row--actions {
  display: grid;
  grid-row: 3;
}
#chatContainer:is([data-spread-form="spread1"], [data-spread-form="spread2"], [data-spread-form="spread3"], [data-spread-form="spread4"], [data-spread-form="spread5"], [data-spread-form="spread6"], [data-spread-form="spread7"], [data-spread-form="spread8"], [data-spread-form="spread9"]) .chat-spread-row--deck {
  display: none !important;
}
#chatContainer[data-spread-ui="1"] .chat-lower {
  grid-row: 4;
}
#chatContainer:is([data-spread-form="spread1"], [data-spread-form="spread2"], [data-spread-form="spread3"], [data-spread-form="spread4"], [data-spread-form="spread5"], [data-spread-form="spread6"], [data-spread-form="spread7"], [data-spread-form="spread8"], [data-spread-form="spread9"]) .chat-shell {
  grid-template-rows:
    clamp(56px, 10%, 96px)
    clamp(40px, 5%, 64px)
    clamp(12px, 2%, 24px)
    minmax(0, 1fr)
    clamp(44px, 10%, 72px);
}
#chatContainer:is([data-spread-form="spread1"], [data-spread-form="spread2"], [data-spread-form="spread3"], [data-spread-form="spread4"], [data-spread-form="spread5"], [data-spread-form="spread6"], [data-spread-form="spread7"], [data-spread-form="spread8"], [data-spread-form="spread9"]) .chat-spread-row--actions {
  display: grid !important;
  grid-row: 2;
}
#chatContainer .chat-spread-spacer {
  display: none;
}
#chatContainer:is([data-spread-form="spread1"], [data-spread-form="spread2"], [data-spread-form="spread3"], [data-spread-form="spread4"], [data-spread-form="spread5"], [data-spread-form="spread6"], [data-spread-form="spread7"], [data-spread-form="spread8"], [data-spread-form="spread9"]) .chat-spread-spacer {
  display: block;
  grid-row: 3;
}
#chatContainer:is([data-spread-form="spread1"], [data-spread-form="spread2"], [data-spread-form="spread3"], [data-spread-form="spread4"], [data-spread-form="spread5"], [data-spread-form="spread6"], [data-spread-form="spread7"], [data-spread-form="spread8"], [data-spread-form="spread9"]) .chat-lower {
  grid-row: 4;
  grid-template-rows: minmax(0, 1fr);
  padding: 0 !important;
}
#chatContainer:is([data-spread-form="spread1"], [data-spread-form="spread2"], [data-spread-form="spread3"], [data-spread-form="spread4"], [data-spread-form="spread5"], [data-spread-form="spread6"], [data-spread-form="spread7"], [data-spread-form="spread8"], [data-spread-form="spread9"]) .chat-spread-row--send {
  display: none !important;
  grid-row: 5;
}
#chatContainer .chat-spread-row--send.is-active {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
#chatContainer:is([data-spread-form="spread1"], [data-spread-form="spread2"], [data-spread-form="spread3"], [data-spread-form="spread4"], [data-spread-form="spread5"], [data-spread-form="spread6"], [data-spread-form="spread7"], [data-spread-form="spread8"], [data-spread-form="spread9"]) .chat-spread-row--deck,
#chatContainer:is([data-spread-form="spread1"], [data-spread-form="spread2"], [data-spread-form="spread3"], [data-spread-form="spread4"], [data-spread-form="spread5"], [data-spread-form="spread6"], [data-spread-form="spread7"], [data-spread-form="spread8"], [data-spread-form="spread9"]) .chat-spread-row--support,
#chatContainer:is([data-spread-form="spread1"], [data-spread-form="spread2"], [data-spread-form="spread3"], [data-spread-form="spread4"], [data-spread-form="spread5"], [data-spread-form="spread6"], [data-spread-form="spread7"], [data-spread-form="spread8"], [data-spread-form="spread9"]) .chat-support-note {
  display: none !important;
}

    /* ===== Support-only row (between top bar and chat) ===== */
    #chatContainer .chat-spread-row--support {
      display: none;
    }
    #chatContainer[data-support-ui="1"] .chat-shell {
      grid-template-rows:
        clamp(56px, 10%, 96px)
        minmax(52px, 8%)
        minmax(0, 1fr);
    }
    #chatContainer[data-support-ui="1"] .chat-spread-row--support {
      display: flex;
      grid-row: 2;
    }
    #chatContainer[data-support-ui="1"] .chat-support-note {
      display: none;
    }
    #chatContainer[data-support-ui="1"] .chat-lower {
      grid-row: 3;
    }

    #chatContainer .chat-body {
      display: flex;
      flex-direction: column;
      flex: 1 1 auto;
      height: auto !important;
      min-height: 0;
      padding: 0 !important;
      overflow: hidden;
    }
    #chatContainer .messages {
      margin: 0 !important;
      flex: 1 1 auto;
      display: flex;
      flex-direction: column;
      gap: 12px;
      height: auto;
      min-height: 0;
      width: 100%;
      padding: 12px 14px !important;
      box-sizing: border-box;
      overflow-y: auto;
      scrollbar-gutter: stable both-edges;
      scrollbar-width: auto;
      scrollbar-color: rgba(255, 255, 255, 0.55) rgba(255, 255, 255, 0.08);
    }
    #chatContainer .messages::-webkit-scrollbar {
      width: 12px;
    }
    #chatContainer .messages::-webkit-scrollbar-track {
      background: rgba(255, 255, 255, 0.08);
      border-radius: 999px;
    }
    #chatContainer .messages::-webkit-scrollbar-thumb {
      background: rgba(255, 255, 255, 0.55);
      border-radius: 999px;
      border: 3px solid rgba(0, 0, 0, 0.35);
      background-clip: padding-box;
    }
    #chatContainer .messages::-webkit-scrollbar-thumb:hover {
      background: rgba(255, 255, 255, 0.75);
    }
    #chatContainer .composer-wrapper {
      display: flex;
      align-items: flex-end;
      justify-content: center;
      margin: 0 !important;
      min-height: 0;
      padding: 8px var(--shell-inner-x) calc(10px + var(--keyboard-inset, 0px)) !important;
      background: transparent !important;
      box-shadow: none !important;
      border: none !important;
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
    }
    #chatContainer .composer {
      width: 100%;
      max-width: 100% !important;
      margin: 0 !important;
      gap: clamp(6px, 1.3vw, 10px);
      align-items: flex-end;
      background: transparent !important;
      box-shadow: none !important;
    }
    #chatContainer .composer .icon-only {
      width: clamp(40px, 5.4vh, 46px) !important;
      height: clamp(40px, 5.4vh, 46px) !important;
      min-height: clamp(40px, 5.4vh, 46px) !important;
      padding: 0 !important;
    }
    #chatContainer .composer .icon-only svg {
      width: clamp(19px, 2.6vw, 22px) !important;
      height: clamp(19px, 2.6vw, 22px) !important;
    }
    #chatContainer .composer .btn-primary,
    #chatContainer .composer .btn-secondary {
      box-shadow: none !important;
      filter: none !important;
    }
    #chatContainer .composer .btn-primary:hover,
    #chatContainer .composer .btn-secondary:hover,
    #chatContainer .composer .btn-primary:focus,
    #chatContainer .composer .btn-secondary:focus {
      box-shadow: none !important;
      filter: none !important;
      transform: none !important;
    }
    #chatContainer .input {
      min-height: clamp(40px, 5.4vh, 46px) !important;
      height: auto !important;
      max-height: min(40vh, 240px) !important;
      padding: 8px 12px !important;
      line-height: 1.2 !important;
      font-size: clamp(13px, 2.2vw, 15px) !important;
      background: transparent !important;
      box-shadow: none !important;
    }
    #chatContainer .input::placeholder {
      font-size: clamp(12px, 1.95vw, 14px) !important;
      letter-spacing: 0;
    }
    #chatContainer .input:hover,
    #chatContainer .input:focus {
      box-shadow: none !important;
      background: transparent !important;
    }
    #chatContainer .input.is-single-line {
      padding-top: 0 !important;
      padding-bottom: 0 !important;
      line-height: var(--chat-input-single-h, 40px) !important;
      height: var(--chat-input-single-h, 40px) !important;
    }
    #chatContainer .input.is-single-line::placeholder {
      line-height: var(--chat-input-single-h, 40px) !important;
    }
    @media (max-width: 640px) {
      #chatContainer .composer-wrapper {
        padding: 8px 10px calc(12px + var(--keyboard-inset, 0px)) !important;
      }
      #chatContainer .composer .icon-only {
        width: 46px !important;
        height: 46px !important;
        min-height: 46px !important;
      }
      #chatContainer .input {
        min-height: 58px !important;
        height: auto !important;
        max-height: min(40vh, 220px) !important;
        padding: 12px 12px !important;
        font-size: 16px !important;
        line-height: 1.35 !important;
      }
      #chatContainer .input::placeholder {
        font-size: 14px !important;
      }
    }
    #chatContainer[data-screen="posts"] .composer-wrapper {
      display: none !important;
      padding: 0 !important;
    }
    #chatContainer[data-screen="instruction"] .composer-wrapper {
      display: none !important;
      padding: 0 !important;
    }
    #chatContainer[data-support-view] .composer-wrapper {
      display: none !important;
      padding: 0 !important;
    }
    #chatContainer .chat-legacy-controls {
      display: none !important;
    }
    #gptlike-chat[data-theme-light="1"] #chatContainer .chat-backbar,
    #gptlike-chat[data-theme-light="1"] #chatContainer .chat-titlebar {
      border-color: rgba(15, 23, 42, 0.34);
      background: rgba(255, 255, 255, 0.84);
    }
    #gptlike-chat[data-theme-light="1"] #chatContainer .messages {
      scrollbar-color: rgba(15, 23, 42, 0.5) rgba(15, 23, 42, 0.08);
    }
    #gptlike-chat[data-theme-light="1"] #chatContainer .messages::-webkit-scrollbar-track {
      background: rgba(15, 23, 42, 0.08);
    }
    #gptlike-chat[data-theme-light="1"] #chatContainer .messages::-webkit-scrollbar-thumb {
      background: rgba(15, 23, 42, 0.5);
      border: 3px solid rgba(255, 255, 255, 0.7);
    }
    #gptlike-chat[data-theme-light="1"] #chatContainer .messages::-webkit-scrollbar-thumb:hover {
      background: rgba(15, 23, 42, 0.7);
    }
    #gptlike-chat[data-theme-light="1"] #chatContainer .chat-shell {
      border-color: rgba(15, 23, 42, 0.34);
    }
    #gptlike-chat[data-theme-light="1"] #chatContainer .chat-scenario-title {
      color: var(--accent-1);
    }
    #gptlike-chat[data-theme-light="1"] #chatContainer .chat-clear-btn {
      color: #1f2937;
    }
    #gptlike-chat:not([data-theme-light="1"]) #chatContainer .chat-clear-btn {
      color: #f8fafc;
    }
    #gptlike-chat[data-theme="gold"] #chatContainer .chat-scenario-title,
    #gptlike-chat[data-theme="gold"] #chatContainer .chat-scenario-arrow {
      color: #6b4b19;
      text-shadow: none;
    }
    #gptlike-chat[data-theme="gold"] #chatContainer .chat-clear-btn,
    #gptlike-chat[data-theme="dark"] #chatContainer .chat-clear-btn {
      color: #6b4b19;
    }

    /* ===== Visual Container Outlines =====
       Temporary visible outlines for all main containers.
    */
    :root {
      --container-outline-stroke: rgba(255, 255, 255, 0.34);
      --container-outline-radius: 12px;
    }
    #gptlike-chat #authContainer .auth-layout,
    #gptlike-chat #authContainer .auth-topbar,
    #gptlike-chat #authContainer .auth-panel,
    #gptlike-chat #onboardingScreen .onb-frame,
    #gptlike-chat #onboardingScreen .onb-zone,
    #gptlike-chat #onboardingScreen .onb-mini-bar,
    #gptlike-chat #onboardingScreen .onb-list,
    #gptlike-chat #onboardingScreen .onb-bottom-wrap,
    #gptlike-chat #chatContainer,
    #gptlike-chat #chatContainer .chat-shell,
    #gptlike-chat #chatContainer .chat-backbar,
    #gptlike-chat #chatContainer .chat-titlebar,
    #gptlike-chat #chatContainer .chat-body,
    #gptlike-chat #chatContainer .messages,
    #gptlike-chat #chatContainer .composer-wrapper,
    #gptlike-chat #styleModalBackdrop .style-modal,
    #gptlike-chat #accountModalBackdrop .style-modal,
    #gptlike-chat #confirmBackdrop .confirm {
      outline: none !important;
      outline-offset: 0;
      border-radius: var(--container-outline-radius);
    }
    #gptlike-chat[data-theme-light="1"] #authContainer .auth-layout,
    #gptlike-chat[data-theme-light="1"] #authContainer .auth-topbar,
    #gptlike-chat[data-theme-light="1"] #authContainer .auth-panel,
    #gptlike-chat[data-theme-light="1"] #onboardingScreen .onb-frame,
    #gptlike-chat[data-theme-light="1"] #onboardingScreen .onb-zone,
    #gptlike-chat[data-theme-light="1"] #onboardingScreen .onb-mini-bar,
    #gptlike-chat[data-theme-light="1"] #onboardingScreen .onb-list,
    #gptlike-chat[data-theme-light="1"] #onboardingScreen .onb-bottom-wrap,
    #gptlike-chat[data-theme-light="1"] #chatContainer,
    #gptlike-chat[data-theme-light="1"] #chatContainer .chat-shell,
    #gptlike-chat[data-theme-light="1"] #chatContainer .chat-backbar,
    #gptlike-chat[data-theme-light="1"] #chatContainer .chat-titlebar,
    #gptlike-chat[data-theme-light="1"] #chatContainer .chat-body,
    #gptlike-chat[data-theme-light="1"] #chatContainer .messages,
    #gptlike-chat[data-theme-light="1"] #chatContainer .composer-wrapper,
    #gptlike-chat[data-theme-light="1"] #styleModalBackdrop .style-modal,
    #gptlike-chat[data-theme-light="1"] #accountModalBackdrop .style-modal,
    #gptlike-chat[data-theme-light="1"] #confirmBackdrop .confirm {
      outline-color: rgba(15, 23, 42, 0.34);
    }

    /* Preview mode: no screen edge and no container outlines */
    body.app-preview::before {
      display: none !important;
    }
    body.app-preview .gptlike-wrapper,
    body.app-preview .gptlike-wrapper.chat-mode,
    body.app-preview .gptlike-wrapper.onboarding-active,
    body.app-preview .gptlike-wrapper.auth-active {
      inset: 0 !important;
      width: 100vw !important;
      height: 100dvh !important;
      border-radius: 0 !important;
      clip-path: none !important;
    }
    body.app-preview #gptlike-chat #authContainer .auth-panel,
    body.app-preview #gptlike-chat #onboardingScreen .onb-frame,
    body.app-preview #gptlike-chat #onboardingScreen .onb-zone,
    body.app-preview #gptlike-chat #onboardingScreen .onb-mini-bar,
    body.app-preview #gptlike-chat #onboardingScreen .onb-list,
    body.app-preview #gptlike-chat #onboardingScreen .onb-bottom-wrap,
    body.app-preview #gptlike-chat #chatContainer .chat-shell,
    body.app-preview #gptlike-chat #chatContainer .chat-backbar,
    body.app-preview #gptlike-chat #chatContainer .chat-titlebar,
    body.app-preview #gptlike-chat #chatContainer .chat-body,
    body.app-preview #gptlike-chat #chatContainer .messages,
    body.app-preview #gptlike-chat #chatContainer .composer-wrapper,
    body.app-preview #gptlike-chat #styleModalBackdrop .style-modal,
    body.app-preview #gptlike-chat #accountModalBackdrop .style-modal,
    body.app-preview #gptlike-chat #confirmBackdrop .confirm {
      border: none !important;
      outline: none !important;
      box-shadow: none !important;
    }

    /* ===== Global Modal Normalization =====
       Unified modals without changing screen layout width.
    */
    :root {
      --modal-shell-top: var(--screen-edge-top);
      --modal-shell-bottom: var(--screen-edge-bottom);
      --modal-shell-x: var(--screen-edge-x);
      --modal-text-base: clamp(15px, 1.9vw, 17px);
      --modal-text-small: clamp(14px, 1.7vw, 16px);
    }

    .style-modal-backdrop,
    .confirm-backdrop {
      padding: var(--modal-shell-top) var(--modal-shell-x) var(--modal-shell-bottom) !important;
      box-sizing: border-box;
      align-items: center !important;
      justify-content: center !important;
    }

    .style-modal-backdrop > .style-modal.settings-modal,
    .style-modal-backdrop > .style-modal.account-modal,
    .confirm-backdrop > .confirm {
      width: min(560px, var(--modalW)) !important;
      max-width: min(560px, var(--modalW)) !important;
      height: auto !important;
      max-height: calc(100dvh - var(--modal-shell-top) - var(--modal-shell-bottom)) !important;
      border-radius: 16px !important;
      overflow: auto;
    }

    .style-modal-backdrop > .style-modal.settings-modal,
    .style-modal-backdrop > .style-modal.account-modal {
      display: flex;
      flex-direction: column;
      gap: 8px;
      padding: 12px var(--shell-inner-x) 14px !important;
    }

    .confirm-backdrop > .confirm {
      justify-content: center;
      padding: 14px clamp(12px, 2.8vw, 18px) !important;
    }

    .style-modal--fullscreen {
      padding: var(--screen-edge-top) var(--screen-edge-x) var(--screen-edge-bottom) !important;
    }

    .confirm {
      padding: clamp(14px, 2.2vh, 20px) clamp(14px, 4.8vw, 24px) !important;
      border-radius: 16px;
    }

    .style-modal--fullscreen .style-modal-title {
      font-size: clamp(18px, 2.5vw, 21px) !important;
    }

    .settings-h {
      font-size: clamp(14px, 2vw, 16px) !important;
    }

    .settings-sub {
      font-size: clamp(12px, 1.8vw, 14px) !important;
    }

    .style-close {
      font-size: clamp(13px, 1.7vw, 15px) !important;
      padding: 7px 11px !important;
    }
    .style-modal--fullscreen .style-close {
      font-size: clamp(12px, 1.6vw, 13px) !important;
      padding: 5px 9px !important;
      border-radius: 10px !important;
      min-height: 30px;
    }

    .style-modal--fullscreen .font-weight-btn,
    .style-modal--fullscreen .theme-mode-seg button,
    .style-modal--fullscreen > .settings-section:nth-of-type(4) > .btn-secondary.btn-wide {
      font-size: clamp(13px, 1.7vw, 15px) !important;
      line-height: 1.25 !important;
    }

    .style-modal--fullscreen .theme-mode-seg button::before {
      width: 18px !important;
      height: 18px !important;
      flex: 0 0 18px !important;
    }

    .style-modal--fullscreen > .style-modal-header {
      border-radius: 10px;
      padding: 0 8px;
    }

    .style-modal--fullscreen > .settings-section:nth-of-type(2) > .settings-h,
    .style-modal--fullscreen > .settings-section:nth-of-type(3) > .settings-h,
    .style-modal--fullscreen > .settings-section:nth-of-type(4) > .settings-h,
    .style-modal--fullscreen > .settings-section:nth-of-type(3) > .theme-mode-block > .settings-sub {
      border-radius: 10px;
      padding: 0 8px;
    }

    .style-modal--fullscreen > .settings-section:nth-of-type(2) > .font-slider,
    .style-modal--fullscreen > .settings-section:nth-of-type(3) > .theme-mode-block > .theme-mode-seg,
    .style-modal--fullscreen > .settings-section:nth-of-type(4) > .btn-secondary.btn-wide {
      border-radius: 10px;
    }

    .style-modal--fullscreen > .settings-section:nth-of-type(2) > .font-slider {
      gap: 4px;
      padding: 4px;
    }

    .style-modal--fullscreen .font-preview {
      padding: 6px 8px;
    }

    .style-modal--fullscreen .font-preview-text {
      font-size: clamp(13px, 1.8vw, 15px);
      line-height: 1.28;
    }

    .style-modal--fullscreen .font-slider-row {
      gap: 4px;
    }

    .style-modal--fullscreen .font-size-chip {
      width: 16px;
    }

    .style-modal--fullscreen .font-weight-seg {
      gap: 4px;
      padding: 4px;
      border-radius: 10px;
    }

    .style-modal--fullscreen .font-weight-btn {
      border-radius: 8px;
    }

    .style-modal--fullscreen > .settings-section:nth-of-type(3) > .theme-mode-block > .theme-mode-seg {
      gap: 4px;
      padding: 4px;
    }

    .style-modal--fullscreen .theme-mode-seg button {
      border-radius: 10px;
      padding: 4px 6px;
      gap: 6px;
    }
    .style-modal--fullscreen > .settings-section:nth-of-type(4) > .btn-secondary.btn-wide {
      border-radius: 10px;
      padding: 0 8px;
      gap: 5px;
    }

    .style-modal--fullscreen .btn-with-icon svg {
      width: 14px;
      height: 14px;
    }

    .confirm .txt {
      font-size: clamp(18px, 2.6vw, 22px) !important;
      line-height: 1.28 !important;
    }

    .confirm .note {
      font-size: clamp(15px, 2vw, 17px) !important;
      line-height: 1.45 !important;
    }

    .confirm .row .btn-primary,
    .confirm .row .btn-secondary {
      min-height: 46px;
      font-size: clamp(15px, 2vw, 17px);
    }

    .account-line,
    .account-note {
      font-size: var(--modal-text-base) !important;
      line-height: 1.4 !important;
    }

    .account-status {
      font-size: var(--modal-text-small) !important;
      line-height: 1.35 !important;
    }

    @media (max-width: 640px) {
      .style-modal--fullscreen .font-size-chip {
        width: 18px !important;
      }
      .style-modal--fullscreen .font-size-chip--sm {
        font-size: 12px !important;
      }
      .style-modal--fullscreen .font-size-chip--xl {
        font-size: 16px !important;
      }
    }

    /* ===== Theme Harmony: brighter themed buttons, better contrast ===== */
    #gptlike-chat {
      --ui-btn-accent-a: color-mix(in srgb, var(--accent-1) 88%, #ffffff 12%);
      --ui-btn-accent-b: color-mix(in srgb, var(--accent-2) 86%, #f8fafc 14%);
      --ui-btn-soft-a: color-mix(in srgb, var(--accent-1) 46%, var(--ui-surface-3) 54%);
      --ui-btn-soft-b: color-mix(in srgb, var(--accent-2) 42%, var(--ui-surface-2) 58%);
      --ui-btn-soft-border: color-mix(in srgb, var(--accent-1) 62%, var(--ui-border-2) 38%);
    }

    .btn-primary {
      background:
        radial-gradient(120px 58px at 16% 24%, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 62%),
        linear-gradient(128deg, var(--ui-btn-accent-a), var(--ui-btn-accent-b)) !important;
      border: 1px solid color-mix(in srgb, var(--accent-2) 62%, var(--ui-border-2)) !important;
      color: var(--btn-text, #ffffff) !important;
      box-shadow:
        0 10px 24px rgba(0, 0, 0, 0.24),
        0 0 0 1px color-mix(in srgb, var(--accent-1) 30%, transparent) inset !important;
    }

    .btn-secondary,
    .post-card-btn,
    .post-btn,
    .post-action,
    .theme-mode-seg button,
    .font-weight-btn
     {
      background: linear-gradient(138deg, var(--ui-btn-soft-a), var(--ui-btn-soft-b)) !important;
      border-color: var(--ui-btn-soft-border) !important;
      color: var(--ui-text-main) !important;
      box-shadow:
        0 8px 18px rgba(0, 0, 0, 0.22),
        inset 0 0 0 1px color-mix(in srgb, var(--accent-1) 22%, transparent) !important;
    }

    .icon-only,
    .onb-row-four .onb-btn {
      background:
        linear-gradient(145deg,
          color-mix(in srgb, var(--ui-surface-3) 58%, var(--accent-1) 42%),
          color-mix(in srgb, var(--ui-surface-2) 64%, var(--accent-2) 36%)) !important;
      border: 1px solid color-mix(in srgb, var(--accent-1) 66%, var(--ui-border-2)) !important;
      box-shadow:
        0 8px 18px rgba(0, 0, 0, 0.24),
        inset 0 0 0 1px color-mix(in srgb, var(--accent-1) 26%, transparent) !important;
    }
    .mode-select {
      background: linear-gradient(180deg, var(--ui-surface-2), var(--ui-surface-1)) !important;
      border-color: var(--ui-border-1) !important;
      color: var(--ui-text-main) !important;
    }
    .btn-primary:hover,
    .btn-secondary:hover,
    .post-card-btn:hover,
    .post-btn:hover,
    .post-action:hover,
    .theme-mode-seg button:hover,
    .font-weight-btn:hover
    :hover,
    .icon-only:hover,
    .onb-row-four .onb-btn:hover {
      border-color: color-mix(in srgb, var(--accent-1) 78%, var(--ui-border-2)) !important;
      filter: saturate(1.14) brightness(1.06);
      transform: translateY(-1px);
    }

    .messages,
    #chatContainer .input,
    .style-modal,
    .confirm,
    .account-line,
    .font-preview,
    .font-weight-seg,
    .theme-mode-seg button
     {
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
    }

    .messages {
      background: transparent !important;
      border-color: color-mix(in srgb, var(--accent-1) 22%, rgba(255, 255, 255, 0.10)) !important;
      box-shadow: none !important;
    }

    #chatContainer .messages .bubble,
    #chatContainer .messages .time-badge {
      color: #edf3fb !important;
    }
    #chatContainer .messages .message.user .bubble {
      background: transparent !important;
      border-color: transparent !important;
    }

    #chatContainer .input {
      background: linear-gradient(180deg, var(--ui-surface-3), var(--ui-surface-2)) !important;
      color: var(--ui-text-main) !important;
      border-color: var(--ui-border-1) !important;
      caret-color: var(--ui-text-main) !important;
    }

    .mode-select {
      box-shadow:
        0 0 0 1px color-mix(in srgb, var(--ui-border-1) 90%, transparent),
        var(--shadow-inset) !important;
    }
    .mode-select.glow {
      animation: modeGlowSoft 0.36s ease-out 1 !important;
      border-color: color-mix(in srgb, var(--accent-1) 62%, var(--ui-border-2)) !important;
    }
    @keyframes modeGlowSoft {
      0% {
        box-shadow:
          0 0 0 1px color-mix(in srgb, var(--accent-1) 78%, transparent),
          0 0 10px color-mix(in srgb, var(--accent-1) 38%, transparent),
          0 0 16px color-mix(in srgb, var(--accent-2) 24%, transparent),
          var(--shadow-inset);
      }
      100% {
        box-shadow:
          0 0 0 1px color-mix(in srgb, var(--ui-border-1) 90%, transparent),
          var(--shadow-inset);
      }
    }

    .onb-page[data-page="2"] .onb-btn,
    .onb-page[data-page="3"] .onb-btn {
      background:
        radial-gradient(140px 68px at 14% 22%, rgba(255, 255, 255, 0.20), rgba(255, 255, 255, 0) 62%),
        linear-gradient(128deg,
          color-mix(in srgb, var(--accent-1) 72%, var(--ui-surface-3) 28%),
          color-mix(in srgb, var(--accent-2) 66%, var(--ui-surface-2) 34%)) !important;
      border-color: color-mix(in srgb, var(--accent-1) 70%, var(--ui-border-2)) !important;
      color: var(--btn-text, #ffffff) !important;
      text-shadow: none !important;
      box-shadow:
        0 10px 20px rgba(0, 0, 0, 0.20),
        inset 0 0 0 1px color-mix(in srgb, var(--accent-1) 34%, transparent) !important;
    }
    .mode-label,
    .settings-h,
    .settings-sub,
    .account-note,
    .account-status,
    .confirm .note,
    .post-card-date,
    .onb-item-desc,
    .onb-page[data-page="2"] .onb-list .onb-help,
    .onb-page[data-page="3"] .onb-list .onb-help,
    .onb-page[data-page="3"] .onb-zone--helper .onb-help {
      color: var(--ui-text-soft) !important;
    }

    .onb-btn-label,
    .post-card-snippet
    ,
    .font-preview-text,
    .theme-mode-seg button,
    .font-weight-btn,
    .mode-select,
    .account-line,
    .confirm .txt,
    .bubble {
      color: var(--ui-text-main) !important;
    }

    /* Explicit per-theme text contrast for glass/light surfaces */
    #gptlike-chat[data-theme-light="1"] .btn-secondary,
    #gptlike-chat[data-theme-light="1"] .mode-select,
    #gptlike-chat[data-theme-light="1"] .theme-mode-seg button,
    #gptlike-chat[data-theme-light="1"] .font-weight-btn
    ,
    #gptlike-chat[data-theme-light="1"] .onb-btn-label,
    #gptlike-chat[data-theme-light="1"] .post-card-snippet
    ,
    #gptlike-chat[data-theme-light="1"] .font-preview-text,
    #gptlike-chat[data-theme-light="1"] .account-line,
    #gptlike-chat[data-theme-light="1"] .confirm .txt,
    #gptlike-chat[data-theme-light="1"] .mode-label,
    #gptlike-chat[data-theme-light="1"] .settings-h {
      color: #0f172a !important;
    }
    #gptlike-chat[data-theme-light="1"] .settings-sub,
    #gptlike-chat[data-theme-light="1"] .account-note,
    #gptlike-chat[data-theme-light="1"] .account-status,
    #gptlike-chat[data-theme-light="1"] .confirm .note,
    #gptlike-chat[data-theme-light="1"] .post-card-date,
    #gptlike-chat[data-theme-light="1"] .onb-item-desc,
    #gptlike-chat[data-theme-light="1"] .onb-page[data-page="2"] .onb-list .onb-help,
    #gptlike-chat[data-theme-light="1"] .onb-page[data-page="3"] .onb-list .onb-help,
    #gptlike-chat[data-theme-light="1"] .onb-page[data-page="3"] .onb-zone--helper .onb-help {
      color: #334155 !important;
    }
    #gptlike-chat:not([data-theme-light="1"]) .btn-secondary,
    #gptlike-chat:not([data-theme-light="1"]) .mode-select,
    #gptlike-chat:not([data-theme-light="1"]) .theme-mode-seg button,
    #gptlike-chat:not([data-theme-light="1"]) .font-weight-btn
    ,
    #gptlike-chat:not([data-theme-light="1"]) .onb-btn-label,
    #gptlike-chat:not([data-theme-light="1"]) .post-card-snippet
    ,
    #gptlike-chat:not([data-theme-light="1"]) .font-preview-text,
    #gptlike-chat:not([data-theme-light="1"]) .account-line,
    #gptlike-chat:not([data-theme-light="1"]) .confirm .txt,
    #gptlike-chat:not([data-theme-light="1"]) .mode-label,
    #gptlike-chat:not([data-theme-light="1"]) .settings-h {
      color: #edf3fb !important;
    }
    #gptlike-chat:not([data-theme-light="1"]) .settings-sub,
    #gptlike-chat:not([data-theme-light="1"]) .account-note,
    #gptlike-chat:not([data-theme-light="1"]) .account-status,
    #gptlike-chat:not([data-theme-light="1"]) .confirm .note,
    #gptlike-chat:not([data-theme-light="1"]) .post-card-date,
    #gptlike-chat:not([data-theme-light="1"]) .onb-item-desc,
    #gptlike-chat:not([data-theme-light="1"]) .onb-page[data-page="2"] .onb-list .onb-help,
    #gptlike-chat:not([data-theme-light="1"]) .onb-page[data-page="3"] .onb-list .onb-help,
    #gptlike-chat:not([data-theme-light="1"]) .onb-page[data-page="3"] .onb-zone--helper .onb-help {
      color: rgba(226, 234, 246, 0.86) !important;
    }

    .icon-only svg,
    #messagesBtn svg,
    .btn-with-icon svg,
    .onb-btn-ico svg {
      color: var(--ui-icon) !important;
      opacity: 1;
    }

    #gptlike-chat[data-theme-light="1"] #chatContainer .input,
    #gptlike-chat[data-theme-light="1"] .style-modal,
    #gptlike-chat[data-theme-light="1"] .confirm {
      box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08);
    }

    /* Light themes: clean, bright surfaces without dirty gray gradients */
    #gptlike-chat[data-theme-light="1"] .btn-secondary,
    #gptlike-chat[data-theme-light="1"] .icon-only,
    #gptlike-chat[data-theme-light="1"] .post-card-btn,
    #gptlike-chat[data-theme-light="1"] .post-btn,
    #gptlike-chat[data-theme-light="1"] .post-action,
    #gptlike-chat[data-theme-light="1"] .theme-mode-seg button,
    #gptlike-chat[data-theme-light="1"] .font-weight-btn
    ,
    #gptlike-chat[data-theme-light="1"] .onb-row-four .onb-btn {
      background: linear-gradient(145deg,
        color-mix(in srgb, #ffffff 93%, var(--accent-1) 7%),
        color-mix(in srgb, #ffffff 96%, var(--accent-2) 4%)) !important;
      border-color: color-mix(in srgb, var(--accent-2) 34%, rgba(15, 23, 42, 0.26)) !important;
      box-shadow:
        0 8px 18px rgba(15, 23, 42, 0.08),
        inset 0 0 0 1px rgba(255, 255, 255, 0.72) !important;
    }
    #gptlike-chat[data-theme-light="1"] .mode-select {
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.92)) !important;
      border-color: rgba(15, 23, 42, 0.22) !important;
      box-shadow:
        0 0 0 1px rgba(15, 23, 42, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.65) !important;
    }
    #gptlike-chat[data-theme-light="1"] .onb-page[data-page="2"] .onb-btn,
    #gptlike-chat[data-theme-light="1"] .onb-page[data-page="3"] .onb-btn {
      background:
        radial-gradient(130px 62px at 14% 22%, rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0) 62%),
        linear-gradient(128deg,
          color-mix(in srgb, var(--accent-1) 54%, #ffffff 46%),
          color-mix(in srgb, var(--accent-2) 50%, #ffffff 50%)) !important;
      color: #0f172a !important;
      border-color: color-mix(in srgb, var(--accent-2) 48%, rgba(15, 23, 42, 0.24)) !important;
    }
    #gptlike-chat[data-theme-light="1"] #chatContainer .input {
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(255, 255, 255, 0.93)) !important;
      color: #0f172a !important;
      border-color: rgba(15, 23, 42, 0.20) !important;
      caret-color: #0f172a !important;
    }
    #gptlike-chat[data-theme-light="1"] .messages {
      background: transparent !important;
      border-color: color-mix(in srgb, var(--accent-2) 26%, rgba(15, 23, 42, 0.18)) !important;
      box-shadow: 0 8px 16px rgba(15, 23, 42, 0.06) !important;
    }
    #gptlike-chat[data-theme-light="1"] #chatContainer .messages .bubble,
    #gptlike-chat[data-theme-light="1"] #chatContainer .messages .time-badge {
      color: #0f172a !important;
    }
    #gptlike-chat[data-theme-light="1"] #chatContainer .messages .message.user .bubble {
      background: transparent !important;
      border-color: transparent !important;
    }
    #gptlike-chat[data-theme-light="1"] #chatContainer .chat-scenario-title,
    #gptlike-chat[data-theme-light="1"] #chatContainer .messages,
    #gptlike-chat[data-theme-light="1"] #chatContainer .messages *,
    #gptlike-chat[data-theme-light="1"] #chatContainer .messages .bubble,
    #gptlike-chat[data-theme-light="1"] #chatContainer .messages .post-text,
    #gptlike-chat[data-theme-light="1"] #chatContainer .messages .time-badge {
      text-shadow: none !important;
    }

    /* Back navigation on onboarding/auth/chat is theme-independent (always light). */
    #gptlike-chat[data-theme-light="1"] .onb-skip-top,
    #gptlike-chat[data-theme-light="1"] #chatBackBtn,
    #gptlike-chat[data-theme-light="1"] #authBackBtn,
    #gptlike-chat[data-theme-light="1"] #onbBackTop2,
    #gptlike-chat[data-theme-light="1"] #onbBackTop3 {
      color: rgba(238, 243, 250, 0.94) !important;
      -webkit-text-fill-color: rgba(238, 243, 250, 0.94) !important;
      opacity: 1 !important;
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.42) !important;
    }
    /* Main screen keeps its own dark look */
    #gptlike-chat[data-theme-light="1"] .onb-page[data-page="1"] .onb-skip-top,
    #gptlike-chat[data-theme-light="1"] .onb-page[data-page="1"] #onbSkipTop {
      color: rgba(230,230,230,0.74) !important;
    }
    /* Dark theme hard-fix: "Пропустить / Назад" must be pure white */
    #gptlike-chat:not([data-theme-light="1"]) .onb-skip-top,
    #gptlike-chat:not([data-theme-light="1"]) #chatBackBtn,
    #gptlike-chat:not([data-theme-light="1"]) #authBackBtn,
    #gptlike-chat:not([data-theme-light="1"]) #onbBackTop2,
    #gptlike-chat:not([data-theme-light="1"]) #onbBackTop3,
    #gptlike-chat:not([data-theme-light="1"]) #onbSkipTop {
      color: rgba(238, 243, 250, 0.94) !important;
      -webkit-text-fill-color: rgba(238, 243, 250, 0.94) !important;
      opacity: 1 !important;
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.42) !important;
    }

    /* Light theme hard-fix: remove dirty gray decorative gradients */
    #gptlike-chat[data-theme-light="1"].chat-mode::before,
    #gptlike-chat[data-theme-light="1"].chat-mode::after {
      display: none !important;
    }
    #gptlike-chat[data-theme-light="1"] #chatContainer .chat-backbar,
    #gptlike-chat[data-theme-light="1"] #chatContainer .chat-titlebar,
    #gptlike-chat[data-theme-light="1"] #chatContainer .composer-wrapper,
    #gptlike-chat[data-theme-light="1"] .style-modal,
    #gptlike-chat[data-theme-light="1"] .confirm,
    #gptlike-chat[data-theme-light="1"] .account-line,
    #gptlike-chat[data-theme-light="1"] .font-preview,
    #gptlike-chat[data-theme-light="1"] .font-weight-seg,
    #gptlike-chat[data-theme-light="1"] .theme-mode-seg
     {
      background-image: none !important;
      background-color: rgba(255, 255, 255, 0.93) !important;
    }
    #gptlike-chat[data-theme-light="1"] .message.menu-reply .bubble {
      background: transparent !important;
      border-color: transparent !important;
      box-shadow: none !important;
    }

    /* Light theme final polish: only white + very slight beige, no gray gradients */
    #gptlike-chat[data-theme-light="1"] .style-modal,
    #gptlike-chat[data-theme-light="1"] .confirm,
    #gptlike-chat[data-theme-light="1"] .account-line,
    #gptlike-chat[data-theme-light="1"] .font-preview,
    #gptlike-chat[data-theme-light="1"] .font-weight-seg,
    #gptlike-chat[data-theme-light="1"] .theme-mode-seg
    ,
    #gptlike-chat[data-theme-light="1"] .settings-seg {
      background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(255,247,236,0.95)) !important;
      border-color: rgba(136, 101, 52, 0.24) !important;
    }
    #gptlike-chat[data-theme-light="1"] .theme-mode-seg button,
    #gptlike-chat[data-theme-light="1"] .font-weight-btn,
    #gptlike-chat[data-theme-light="1"] .settings-seg button
    ,
    #gptlike-chat[data-theme-light="1"] #clearHistorySettings.btn-secondary.btn-wide {
      background: linear-gradient(180deg, rgba(255,255,255,0.99), rgba(255,246,232,0.96)) !important;
      border-color: rgba(136, 101, 52, 0.30) !important;
      color: #0f172a !important;
    }
    #gptlike-chat[data-theme-light="1"] .settings-seg button:hover,
    #gptlike-chat[data-theme-light="1"] .theme-mode-seg button:hover,
    #gptlike-chat[data-theme-light="1"] .font-weight-btn:hover,
    #gptlike-chat[data-theme-light="1"] #clearHistorySettings.btn-secondary.btn-wide:hover {
      background: linear-gradient(180deg, rgba(255,255,255,1), rgba(255,243,225,0.97)) !important;
      border-color: rgba(136, 101, 52, 0.38) !important;
      box-shadow: 0 8px 18px rgba(143, 108, 60, 0.10) !important;
    }
    #gptlike-chat[data-theme-light="1"] .settings-seg button[data-active="true"],
    #gptlike-chat[data-theme-light="1"] .theme-mode-seg button[data-active="true"],
    #gptlike-chat[data-theme-light="1"] .font-weight-btn[data-active="true"] {
      background: linear-gradient(180deg, rgba(255,255,255,1), rgba(255,239,214,0.97)) !important;
      border-color: rgba(136, 101, 52, 0.46) !important;
      color: #0f172a !important;
      box-shadow:
        inset 0 0 0 1px rgba(255, 184, 107, 0.34),
        0 10px 20px rgba(143, 108, 60, 0.12) !important;
    }
    #gptlike-chat[data-theme-light="1"] .account-loading {
      background: linear-gradient(90deg,
        rgba(255, 255, 255, 0.82),
        rgba(255, 245, 228, 0.98),
        rgba(255, 255, 255, 0.82)) !important;
      border-color: rgba(136, 101, 52, 0.22) !important;
    }

    /* Mobile-first typography normalization */
    #gptlike-chat{
      --fs-2xs: clamp(11px, 2.8vw, 12px);
      --fs-xs: clamp(12px, 3.2vw, 13px);
      --fs-sm: clamp(13px, 3.6vw, 14px);
      --fs-md: clamp(14px, 4.0vw, 16px);
      --fs-lg: clamp(16px, 4.6vw, 18px);
      --fs-xl: clamp(18px, 5.4vw, 21px);
      --fs-topbar: clamp(14px, 3.8vw, 15px);
      --lh-tight: 1.22;
      --lh-base: 1.38;
      --lh-relaxed: 1.48;
      --fw-regular: 560;
      --fw-medium: 650;
      --fw-strong: 760;
      --mobile-chat-base: clamp(14px, 3.9vw, 16px);
    }
    #gptlike-chat,
    #gptlike-chat input,
    #gptlike-chat textarea,
    #gptlike-chat select,
    #gptlike-chat button {
      font-size: var(--fs-md);
      line-height: var(--lh-base);
      font-weight: var(--fw-regular);
    }
    #gptlike-chat .style-modal-title,
    #gptlike-chat .settings-h,
    #gptlike-chat .onb-section-title,
    #gptlike-chat .confirm .txt,
    #gptlike-chat .auth-title {
      font-size: var(--fs-lg) !important;
      line-height: var(--lh-tight) !important;
      font-weight: 800 !important;
    }
    #gptlike-chat .settings-sub,
    #gptlike-chat .mode-label,
    #gptlike-chat .account-status,
    #gptlike-chat .post-card-date,
    #gptlike-chat .onb-item-desc,
    #gptlike-chat .font-size-chip,
    #gptlike-chat .reset-pass {
      font-size: var(--fs-sm) !important;
      line-height: var(--lh-base) !important;
      font-weight: var(--fw-medium) !important;
    }
    /* Unified typography for all top 5% bars across screens */
    #gptlike-chat .onb-skip-top,
    #gptlike-chat #chatContainer .chat-scenario-title {
      font-size: var(--fs-topbar) !important;
      line-height: var(--lh-tight) !important;
      font-weight: 700 !important;
    }
    #gptlike-chat .onb-btn,
    #gptlike-chat .btn-primary,
    #gptlike-chat .btn-secondary,
    #gptlike-chat .theme-mode-seg button,
    #gptlike-chat .font-weight-btn
    ,
    #gptlike-chat .style-close,
    #gptlike-chat .onb-cta {
      font-size: var(--fs-md) !important;
      line-height: var(--lh-tight) !important;
      font-weight: var(--fw-strong) !important;
    }
    #gptlike-chat .onb-btn-label,
    #gptlike-chat .account-line,
    #gptlike-chat .font-preview-text,
    #gptlike-chat .post-card-snippet,
    #gptlike-chat .confirm .note {
      font-size: var(--fs-md) !important;
      line-height: var(--lh-relaxed) !important;
      font-weight: var(--fw-regular) !important;
    }
    #gptlike-chat .onb-help {
      font-size: clamp(22px, 5.1vw, 26px) !important;
      line-height: 1 !important;
      font-weight: 800 !important;
    }
    #gptlike-chat #chatContainer .messages .bubble {
      font-size: calc(var(--mobile-chat-base) * var(--chatFontMul)) !important;
      line-height: var(--lh-relaxed) !important;
      font-weight: var(--chatFontWeight) !important;
    }
    #gptlike-chat #chatContainer .messages .post-text {
      font-size: calc(var(--mobile-chat-base) * var(--chatFontMul)) !important;
      line-height: var(--lh-relaxed) !important;
      font-weight: var(--chatFontWeight) !important;
      color: inherit !important;
      white-space: pre-wrap;
      overflow-wrap: break-word;
    }
    #gptlike-chat #chatContainer .input {
      font-size: clamp(13px, 2.8vw, 14px) !important;
      line-height: 1.22 !important;
      font-weight: 500 !important;
    }
    #gptlike-chat #chatContainer .input::placeholder {
      font-size: clamp(12px, 2.6vw, 13px) !important;
      line-height: 1.22 !important;
      font-weight: 500 !important;
      opacity: 0.9;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    #gptlike-chat .unread-number {
      font-size: var(--fs-sm) !important;
      font-weight: 800 !important;
    }
    @media (max-width: 640px){
      #gptlike-chat{
        --fs-2xs: 11px;
        --fs-xs: 12px;
        --fs-sm: 13px;
        --fs-md: 15px;
        --fs-lg: 17px;
        --fs-xl: 20px;
        --mobile-chat-base: 15px;
      }
      #gptlike-chat .onb-item-desc{
        font-size: var(--fs-xs) !important;
      }
      #gptlike-chat .mode-label{
        font-size: var(--fs-md) !important;
      }
    }

    /* Global UX: no hover shadows on buttons anywhere */
    #gptlike-chat button:hover,
    #gptlike-chat [role="button"]:hover,
    #gptlike-chat .btn-primary:hover,
    #gptlike-chat .btn-secondary:hover,
    #gptlike-chat .style-close:hover,
    #gptlike-chat .onb-btn:hover,
    #gptlike-chat .onb-cta:hover,
    #gptlike-chat .font-weight-btn:hover,
    #gptlike-chat .theme-mode-seg button:hover
    :hover,
    #gptlike-chat .settings-seg button:hover,
    #gptlike-chat #clearHistorySettings.btn-secondary.btn-wide:hover,
    #gptlike-chat #chatContainer .composer .btn-primary:hover,
    #gptlike-chat #chatContainer .composer .btn-secondary:hover {
      box-shadow: none !important;
      text-shadow: none !important;
    }
#gptlike-chat .btn-primary:hover::before,
#gptlike-chat .btn-secondary:hover::before {
  box-shadow: none !important;
  text-shadow: none !important;
  opacity: 0 !important;
}

    /* Restore auth buttons glow on hover/focus */
    #gptlike-chat #authContainer .btn-primary:hover,
    #gptlike-chat #authContainer .btn-secondary:hover,
    #gptlike-chat #authContainer .btn-primary:focus,
    #gptlike-chat #authContainer .btn-secondary:focus,
    #gptlike-chat #authContainer .btn-primary:active,
    #gptlike-chat #authContainer .btn-secondary:active {
      box-shadow:
        0 14px 26px rgba(0, 0, 0, 0.32),
        0 0 20px rgba(255, 184, 107, 0.22) !important;
    }

    /* Newsletters cards: flat style + robust text wrapping inside buttons */
    #gptlike-chat .posts-cards{
      align-items: stretch;
    }
    #gptlike-chat .posts-cards .post-card-btn{
      min-width: clamp(164px, 62vw, 248px) !important;
      max-width: min(82vw, 320px) !important;
      width: auto !important;
      white-space: normal !important;
      overflow: hidden !important;
      align-items: stretch !important;
      box-shadow: none !important;
    }
    #gptlike-chat .posts-cards .post-card-btn:hover{
      box-shadow: none !important;
    }
    #gptlike-chat .posts-cards .post-card-meta{
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }
    #gptlike-chat .posts-cards .post-card-date{
      flex: 0 0 auto;
      min-width: auto;
      white-space: nowrap;
      overflow: visible;
      text-overflow: clip;
      font-size: var(--fs-xs) !important;
      line-height: 1.25 !important;
      text-align: left;
    }
    #gptlike-chat .posts-cards .post-card-time{
      flex: 0 0 auto;
      white-space: nowrap;
      font-size: var(--fs-xs) !important;
      line-height: 1.25 !important;
      text-align: right;
      color: var(--ui-text-muted) !important;
      opacity: 0.9;
    }
#gptlike-chat .posts-cards .post-card-snippet{
  width: 100%;
  white-space: normal !important;
  overflow-wrap: anywhere;
  word-break: break-word;
      display: -webkit-box;
      -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  max-height: none !important;
  font-size: calc(var(--fs-sm) + 1px) !important;
  line-height: 1.35 !important;
  text-align: left;
}
    #gptlike-chat .posts-cards .post-card-snippet-row{
      width: 100%;
      display: flex;
      align-items: flex-start;
      gap: 8px;
    }
    #gptlike-chat .posts-cards .post-card-status{
      width: 18px;
      height: 18px;
      flex: 0 0 auto;
      display: inline-block;
      position: relative;
      margin-top: 1px;
      color: #9ca3af;
    }
    #gptlike-chat .posts-cards .post-card-status::after{
      content: "";
      position: absolute;
      left: 4px;
      top: 1px;
      width: 8px;
      height: 12px;
      border-right: 2.6px solid currentColor;
      border-bottom: 2.6px solid currentColor;
      transform: rotate(45deg);
      opacity: 1;
    }
    #gptlike-chat .posts-cards .post-card-status[data-read="1"]{
      color: #4ade80;
    }
    #gptlike-chat .posts-cards .post-card-status[data-read="0"]{
      color: #9ca3af;
    }
    #gptlike-chat .posts-cards .post-card-read{
      width: 100%;
      margin-top: auto;
      text-align: right;
      font-size: var(--fs-xs) !important;
      line-height: 1.2 !important;
      color: var(--ui-text-muted) !important;
      opacity: 0.92;
    }

    /* Dark theme: chat/newsletters viewport container is solid black */
    #gptlike-chat:not([data-theme-light="1"]):not([data-theme-mode="light"]) #chatContainer .messages {
      background: #000000 !important;
      background-color: #000000 !important;
      background-image: none !important;
    }
    /* Gold theme: composer input is light */
    #gptlike-chat[data-theme="gold"] #chatContainer .input {
      background: #ffffff !important;
      background-color: #ffffff !important;
      background-image: none !important;
      border-color: rgba(15, 23, 42, 0.30) !important;
      color: #1f2937 !important;
      caret-color: #1f2937 !important;
      box-shadow: none !important;
    }
    #gptlike-chat[data-theme="gold"] #chatContainer .input::placeholder {
      color: rgba(51, 65, 85, 0.72) !important;
      -webkit-text-fill-color: rgba(51, 65, 85, 0.72) !important;
      opacity: 1 !important;
    }
    /* Dark theme: input area should be dark */
    #gptlike-chat[data-theme="dark"] #chatContainer .input {
      background: rgba(8, 10, 14, 0.92) !important;
      background-color: rgba(8, 10, 14, 0.92) !important;
      border-color: rgba(110, 78, 32, 0.45) !important;
      color: #eef3ff !important;
      caret-color: #eef3ff !important;
      box-shadow: none !important;
    }
    #gptlike-chat[data-theme="dark"] #chatContainer .input::placeholder {
      color: rgba(226, 233, 245, 0.58) !important;
      -webkit-text-fill-color: rgba(226, 233, 245, 0.58) !important;
      opacity: 1 !important;
    }
    #gptlike-chat:not([data-theme-light="1"]) #chatContainer .composer .icon-only,
    #gptlike-chat:not([data-theme-light="1"]) #chatContainer .composer .btn-primary.icon-only,
    #gptlike-chat:not([data-theme-light="1"]) #chatContainer .composer .btn-secondary.icon-only {
      background: #ffffff !important;
      background-color: #ffffff !important;
      background-image: none !important;
      border: 1px solid rgba(15, 23, 42, 0.30) !important;
      color: #1f2937 !important;
      box-shadow: none !important;
      filter: none !important;
    }
    #gptlike-chat:not([data-theme-light="1"]) #chatContainer .composer .icon-only:hover,
    #gptlike-chat:not([data-theme-light="1"]) #chatContainer .composer .icon-only:focus,
    #gptlike-chat:not([data-theme-light="1"]) #chatContainer .composer .icon-only:active,
    #gptlike-chat:not([data-theme-light="1"]) #chatContainer .composer .btn-primary.icon-only:hover,
    #gptlike-chat:not([data-theme-light="1"]) #chatContainer .composer .btn-secondary.icon-only:hover {
      background: #ffffff !important;
      border-color: rgba(15, 23, 42, 0.38) !important;
      color: #1f2937 !important;
      box-shadow: none !important;
      transform: none !important;
      filter: none !important;
    }
    #gptlike-chat[data-theme-light="1"] #chatContainer .input::placeholder {
      color: rgba(15,23,42,0.62) !important;
      -webkit-text-fill-color: rgba(15,23,42,0.62) !important;
      opacity: 1 !important;
    }
    #gptlike-chat[data-theme-light="1"] #chatContainer .composer .icon-only,
    #gptlike-chat[data-theme-light="1"] #chatContainer .composer .btn-primary.icon-only,
    #gptlike-chat[data-theme-light="1"] #chatContainer .composer .btn-secondary.icon-only {
      background: transparent !important;
      border: 1px solid rgba(15,23,42,0.32) !important;
      box-shadow: none !important;
      color: #0f172a !important;
    }
    #gptlike-chat[data-theme-light="1"] #chatContainer .composer .icon-only svg {
      color: #0f172a !important;
    }
    #gptlike-chat #chatContainer .input.is-single-line {
      padding-top: 0 !important;
      padding-bottom: 0 !important;
      line-height: var(--chat-input-single-h, 40px) !important;
    }
    #gptlike-chat #chatContainer .input.is-single-line::placeholder {
      line-height: var(--chat-input-single-h, 40px) !important;
    }

    /* Final override: keep main menu borderless + mute chat/newsletter text */
    #gptlike-chat .onb-page[data-page="2"] .onb-item,
    #gptlike-chat .onb-page[data-page="3"] .onb-item,
    #gptlike-chat .onb-page[data-page="2"] .onb-btn,
    #gptlike-chat .onb-page[data-page="3"] .onb-btn,
    #gptlike-chat .onb-page[data-page="2"] .onb-list .onb-btn,
    #gptlike-chat .onb-page[data-page="3"] .onb-list .onb-btn,
    #gptlike-chat .onb-page[data-page="2"] .onb-row-four .onb-btn,
    #gptlike-chat .onb-page[data-page="3"] .onb-row-four .onb-btn {
      border: 0 !important;
      border-color: transparent !important;
      outline: none !important;
      box-shadow: none !important;
    }
    #gptlike-chat .onb-page[data-page="2"] .onb-btn:hover,
    #gptlike-chat .onb-page[data-page="2"] .onb-btn:focus,
    #gptlike-chat .onb-page[data-page="2"] .onb-btn:focus-visible,
    #gptlike-chat .onb-page[data-page="2"] .onb-btn:active,
    #gptlike-chat .onb-page[data-page="3"] .onb-btn:hover,
    #gptlike-chat .onb-page[data-page="3"] .onb-btn:focus,
    #gptlike-chat .onb-page[data-page="3"] .onb-btn:focus-visible,
    #gptlike-chat .onb-page[data-page="3"] .onb-btn:active {
      border: 0 !important;
      border-color: transparent !important;
      outline: none !important;
      box-shadow: none !important;
    }
    #gptlike-chat:not([data-theme-light="1"]) #chatContainer .messages .bubble,
    #gptlike-chat:not([data-theme-light="1"]) #chatContainer .messages .post-text {
      color: rgba(221, 229, 239, 0.84) !important;
      text-shadow: none !important;
    }
    #gptlike-chat[data-theme-light="1"] #chatContainer .messages .bubble,
    #gptlike-chat[data-theme-light="1"] #chatContainer .messages .post-text {
      color: rgba(30, 41, 59, 0.82) !important;
      text-shadow: none !important;
    }

    /* Final menu cleanup: no returned outlines in main menu blocks/buttons */
    #gptlike-chat .onb-page[data-page="2"] .onb-item,
    #gptlike-chat .onb-page[data-page="3"] .onb-item,
    #gptlike-chat .onb-page[data-page="2"] .onb-btn,
    #gptlike-chat .onb-page[data-page="3"] .onb-btn,
    #gptlike-chat .onb-page[data-page="2"] .onb-list .onb-btn,
    #gptlike-chat .onb-page[data-page="3"] .onb-list .onb-btn {
      border: 0 !important;
      border-color: transparent !important;
      outline: none !important;
      box-shadow: none !important;
    }
    #gptlike-chat .onb-page[data-page="2"] .onb-btn:hover,
    #gptlike-chat .onb-page[data-page="2"] .onb-btn:focus,
    #gptlike-chat .onb-page[data-page="2"] .onb-btn:focus-visible,
    #gptlike-chat .onb-page[data-page="2"] .onb-btn:active,
    #gptlike-chat .onb-page[data-page="3"] .onb-btn:hover,
    #gptlike-chat .onb-page[data-page="3"] .onb-btn:focus,
    #gptlike-chat .onb-page[data-page="3"] .onb-btn:focus-visible,
    #gptlike-chat .onb-page[data-page="3"] .onb-btn:active {
      border: 0 !important;
      border-color: transparent !important;
      outline: none !important;
      box-shadow: none !important;
    }

    /* Chat/newsletters readability: soften overly bright text */
    #gptlike-chat:not([data-theme-light="1"]) #chatContainer .messages .bubble,
    #gptlike-chat:not([data-theme-light="1"]) #chatContainer .messages .post-text {
      color: rgba(221, 229, 239, 0.84) !important;
      text-shadow: none !important;
    }
    #gptlike-chat[data-theme-light="1"] #chatContainer .messages .bubble,
    #gptlike-chat[data-theme-light="1"] #chatContainer .messages .post-text {
      color: rgba(30, 41, 59, 0.82) !important;
      text-shadow: none !important;
    }

    /* Post detail actions: icon reactions without button blocks + subtle back button */
    #gptlike-chat #chatContainer .message[data-from-posts="1"] .post-actions {
      display: inline-flex !important;
      align-items: center !important;
      gap: 10px !important;
    }
    #gptlike-chat #chatContainer .message[data-from-posts="1"] .post-actions .post-btn[data-reaction] {
      width: 42px !important;
      min-width: 42px !important;
      height: 42px !important;
      min-height: 42px !important;
      padding: 0 !important;
      border: 0 !important;
      border-color: transparent !important;
      border-radius: 12px !important;
      outline: none !important;
      box-shadow: none !important;
      background: transparent !important;
      color: color-mix(in srgb, var(--ui-icon) 88%, var(--ui-text-muted) 12%) !important;
      transform: none !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      position: relative !important;
      overflow: hidden !important;
      cursor: pointer !important;
    }
    #gptlike-chat #chatContainer .message[data-from-posts="1"] .post-actions .post-btn[data-reaction] .post-reaction-icon {
      width: 22px !important;
      height: 22px !important;
      display: block !important;
      color: currentColor !important;
      flex: 0 0 22px !important;
    }
    #gptlike-chat #chatContainer .message[data-from-posts="1"] .post-actions .post-btn[data-reaction]::before {
      content: "" !important;
      width: 22px !important;
      height: 22px !important;
      background: currentColor !important;
      display: block !important;
      -webkit-mask-repeat: no-repeat !important;
      mask-repeat: no-repeat !important;
      -webkit-mask-position: center !important;
      mask-position: center !important;
      -webkit-mask-size: contain !important;
      mask-size: contain !important;
      transition: opacity 0.16s ease, transform 0.16s ease !important;
    }
    #gptlike-chat #chatContainer .message[data-from-posts="1"] .post-actions .post-btn[data-reaction="1"]::before {
      -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M2 22h4V10H2v12zm20-11a2 2 0 0 0-2-2h-6.3l.95-4.57.03-.32a1.5 1.5 0 0 0-.44-1.06L13.17 2 7.6 7.57A2 2 0 0 0 7 9v11a2 2 0 0 0 2 2h8.46a2 2 0 0 0 1.84-1.22l2.53-5.9c.11-.27.17-.56.17-.85v-3.03z'/%3E%3C/svg%3E") !important;
      mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M2 22h4V10H2v12zm20-11a2 2 0 0 0-2-2h-6.3l.95-4.57.03-.32a1.5 1.5 0 0 0-.44-1.06L13.17 2 7.6 7.57A2 2 0 0 0 7 9v11a2 2 0 0 0 2 2h8.46a2 2 0 0 0 1.84-1.22l2.53-5.9c.11-.27.17-.56.17-.85v-3.03z'/%3E%3C/svg%3E") !important;
    }
    #gptlike-chat #chatContainer .message[data-from-posts="1"] .post-actions .post-btn[data-reaction="-1"]::before {
      -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M22 2h-4v12h4V2zM2 13a2 2 0 0 0 2 2h6.3l-.95 4.57-.03.32c0 .4.16.78.44 1.06L10.83 22l5.57-5.57A2 2 0 0 0 17 15V4a2 2 0 0 0-2-2H6.54A2 2 0 0 0 4.7 3.22l-2.53 5.9c-.11.27-.17.56-.17.85V13z'/%3E%3C/svg%3E") !important;
      mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M22 2h-4v12h4V2zM2 13a2 2 0 0 0 2 2h6.3l-.95 4.57-.03.32c0 .4.16.78.44 1.06L10.83 22l5.57-5.57A2 2 0 0 0 17 15V4a2 2 0 0 0-2-2H6.54A2 2 0 0 0 4.7 3.22l-2.53 5.9c-.11.27-.17.56-.17.85V13z'/%3E%3C/svg%3E") !important;
    }
    #gptlike-chat #chatContainer .message[data-from-posts="1"] .post-actions .post-btn[data-reaction]:hover::before,
    #gptlike-chat #chatContainer .message[data-from-posts="1"] .post-actions .post-btn[data-reaction]:focus-visible::before {
      opacity: 0.96 !important;
      transform: scale(1.03) !important;
    }
    #gptlike-chat #chatContainer .message[data-from-posts="1"] .post-actions .post-btn[data-reaction][data-active="1"]::before {
      background: var(--onb-tagline-grad) !important;
      background-size: 220% 220% !important;
      animation: titleGradientFlow 4.4s ease-in-out infinite !important;
      opacity: 1 !important;
    }
    #gptlike-chat #chatContainer .message[data-from-posts="1"] .post-actions .post-btn[data-reaction][data-active="1"] {
      color: #ffb86b !important;
    }
    @supports ((-webkit-mask-image: url("")) or (mask-image: url(""))) {
      #gptlike-chat #chatContainer .message[data-from-posts="1"] .post-actions .post-btn[data-reaction] .post-reaction-icon {
        display: none !important;
      }
    }
#gptlike-chat[data-theme-light="1"] #chatContainer .message[data-from-posts="1"] .post-actions .post-btn[data-reaction] {
  color: rgba(15, 23, 42, 0.78) !important;
}
#gptlike-chat[data-theme="gold"] #chatContainer .message[data-from-posts="1"] .post-actions .post-btn[data-reaction],
#gptlike-chat[data-theme="dark"] #chatContainer .message[data-from-posts="1"] .post-actions .post-btn[data-reaction] {
  color: rgba(15, 23, 42, 0.78) !important;
}
    #gptlike-chat #chatContainer .message[data-from-posts="1"] .post-actions .post-btn[data-role="back"] {
      min-height: 38px !important;
      height: 38px !important;
      padding: 0 12px !important;
      border-radius: 12px !important;
      border: 1px solid rgba(116, 132, 154, 0.26) !important;
      background: transparent !important;
      box-shadow: none !important;
      color: var(--ui-text-main) !important;
      font-size: clamp(12px, 1.85vh, 13px) !important;
      font-weight: 600 !important;
      letter-spacing: 0.01em !important;
      transform: none !important;
    }
    #gptlike-chat #chatContainer .message[data-from-posts="1"] .post-actions .post-btn[data-role="back"]:hover,
    #gptlike-chat #chatContainer .message[data-from-posts="1"] .post-actions .post-btn[data-role="back"]:focus-visible {
      border-color: rgba(126, 145, 169, 0.36) !important;
      background: transparent !important;
      box-shadow: none !important;
      transform: none !important;
    }
    #gptlike-chat[data-theme-light="1"] #chatContainer .message[data-from-posts="1"] .post-actions .post-btn[data-role="back"] {
      border-color: rgba(15, 23, 42, 0.24) !important;
      color: rgba(15, 23, 42, 0.88) !important;
    }

    /* Dark theme: neutral gray outline for chat text viewport */
    #gptlike-chat:not([data-theme-light="1"]) #chatContainer[data-screen="chat"] .messages {
      border: 1px solid rgba(103, 111, 123, 0.54) !important;
      border-radius: var(--app-corner) !important;
      box-shadow: inset 0 0 0 1px rgba(34, 38, 45, 0.34) !important;
    }

    /* Posts screen: remove residual outlines/borders from cards and layout blocks */
    #gptlike-chat #chatContainer[data-screen="posts"] .chat-backbar,
    #gptlike-chat #chatContainer[data-screen="posts"] .chat-body,
    #gptlike-chat #chatContainer[data-screen="posts"] .posts-cards {
      border: none !important;
      border-color: transparent !important;
      outline: none !important;
      box-shadow: none !important;
      background-image: none !important;
    }

    /* Posts text viewport outline only (do not include top header container) */
    #gptlike-chat #chatContainer[data-screen="posts"] .chat-shell {
      border: none !important;
      border-color: transparent !important;
      box-shadow: none !important;
      overflow: visible !important;
    }
    #gptlike-chat #chatContainer[data-screen="posts"] .posts-cards {
      width: 100% !important;
      flex-direction: column !important;
      align-items: stretch !important;
      overflow-x: hidden !important;
      scroll-snap-type: none !important;
    }
    #gptlike-chat #chatContainer[data-screen="posts"] .posts-cards .post-card-btn {
      width: 100% !important;
      max-width: 100% !important;
      min-width: 0 !important;
    }
    #gptlike-chat #chatContainer[data-support-view="list"] .posts-cards {
      width: 100% !important;
      flex-direction: column !important;
      align-items: stretch !important;
      overflow-x: hidden !important;
      scroll-snap-type: none !important;
    }
    #gptlike-chat #chatContainer[data-support-view="list"] .posts-cards .post-card-btn {
      width: 100% !important;
      max-width: 100% !important;
      min-width: 0 !important;
    }
    #gptlike-chat #chatContainer[data-screen="posts"] .messages {
      border: 1px solid rgba(103, 111, 123, 0.44) !important;
      border-radius: var(--app-corner) !important;
      box-shadow: inset 0 0 0 1px rgba(34, 38, 45, 0.26) !important;
    }
    #gptlike-chat[data-theme-light="1"] #chatContainer[data-screen="posts"] .chat-shell {
      border: none !important;
      border-color: transparent !important;
      box-shadow: none !important;
    }
    #gptlike-chat[data-theme-light="1"] #chatContainer[data-screen="posts"] .messages {
      border-color: rgba(79, 88, 102, 0.24) !important;
      box-shadow: inset 0 0 0 1px rgba(79, 88, 102, 0.10) !important;
    }

    #gptlike-chat .theme-mode-seg button[data-active="true"],
    #gptlike-chat .font-weight-btn[data-active="true"]
    [data-active="true"],
    #gptlike-chat .mode-select.glow {
      border-color: color-mix(in srgb, var(--accent-1) 58%, var(--ui-border-2) 42%) !important;
    }
    #gptlike-chat .icon-only svg,
    #gptlike-chat #messagesBtn svg,
    #gptlike-chat .btn-with-icon svg,
    #gptlike-chat .onb-btn-ico svg {
      color: var(--ui-icon) !important;
    }
    #gptlike-chat:not([data-theme-light="1"]) #chatContainer .composer .icon-only svg {
      color: #1f2937 !important;
    }

    /* I18N width safety: keep container widths stable across all languages */
    #gptlike-chat {
      overflow-x: hidden;
    }
    #gptlike-chat .auth-layout,
    #gptlike-chat .auth-panel,
    #gptlike-chat .auth-form,
    #gptlike-chat .auth-box,
    #gptlike-chat .auth-mini-bar,
    #gptlike-chat .auth-block,
    #gptlike-chat .auth-field,
    #gptlike-chat .auth-input,
    #gptlike-chat .auth-buttons,
    #gptlike-chat .lang-row,
    #gptlike-chat .lang-seg,
    #gptlike-chat .onb-pages,
    #gptlike-chat .onb-page,
    #gptlike-chat .onb-frame,
    #gptlike-chat .onb-zone,
    #gptlike-chat .onb-mini-bar,
    #gptlike-chat .onb-list,
    #gptlike-chat .onb-item,
    #gptlike-chat .onb-bottom-wrap,
    #gptlike-chat .onb-row-two,
    #gptlike-chat .onb-row-four,
    #gptlike-chat .onb-btn,
    #gptlike-chat .onb-btn-label,
    #gptlike-chat .chat-shell,
    #gptlike-chat .chat-backbar,
    #gptlike-chat .chat-titlebar,
    #gptlike-chat .chat-lower,
    #gptlike-chat .chat-body,
    #gptlike-chat .composer-wrapper,
    #gptlike-chat .composer,
    #gptlike-chat .mode-select-wrap,
    #gptlike-chat .mode-label,
    #gptlike-chat .settings-section,
    #gptlike-chat .style-modal-header,
    #gptlike-chat .style-modal-title {
      min-width: 0 !important;
      max-width: 100%;
      box-sizing: border-box;
    }
    #gptlike-chat #onbSkipTop,
    #gptlike-chat .reset-pass,
    #gptlike-chat .mode-label,
    #gptlike-chat .auth-buttons .btn-primary,
    #gptlike-chat .auth-buttons .btn-secondary,
    #gptlike-chat .google-btn > span {
      min-width: 0;
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    #gptlike-chat .field-error,
    #gptlike-chat .onb-intro-title {
      min-width: 0;
      max-width: 100%;
      white-space: normal !important;
      overflow-wrap: anywhere;
      word-break: break-word;
    }
    #gptlike-chat .mode-select-wrap {
      flex-wrap: wrap;
      row-gap: 6px;
    }
    #gptlike-chat .mode-select,
    #gptlike-chat .mode-select-wrap select {
      min-width: 0 !important;
      width: 100%;
      max-width: 100% !important;
    }
    #gptlike-chat .onb-mini-bar {
      min-width: 0;
      overflow: hidden;
    }
    #gptlike-chat #onbSkipTop {
      margin-left: auto;
    }

    body.auth-lock-active #appGlobalBackground {
      background:
        radial-gradient(78% 62% at 12% 10%, rgba(255, 255, 255, 0.06), transparent 72%),
        radial-gradient(72% 58% at 86% 86%, rgba(255, 255, 255, 0.04), transparent 74%),
        linear-gradient(180deg, #17181f 0%, #0d0d12 46%, #000000 100%) !important;
      background-size: 124% 124%, 124% 124%, 100% 100% !important;
      background-position: 0% 0%, 100% 100%, 50% 50% !important;
      background-repeat: no-repeat, no-repeat, no-repeat !important;
      animation: appBgFlow 42s ease-in-out infinite alternate !important;
    }
    body.auth-lock-active #appGlobalBackground::before {
      display: block !important;
      opacity: 0.56 !important;
    }
    body.auth-lock-active #appGlobalBackground::after {
      display: block !important;
      background: linear-gradient(180deg, rgba(0, 0, 0, 0.28) 0%, rgba(0, 0, 0, 0.58) 100%) !important;
    }
    #gptlike-chat[data-auth-lock="1"] #authContainer.auth-center::before {
      background: none !important;
      opacity: 0 !important;
    }
    #gptlike-chat[data-auth-lock="1"] #authContainer .auth-panel {
      background: transparent !important;
      background-color: transparent !important;
      background-image: none !important;
      border-color: rgba(255, 255, 255, 0.24) !important;
      box-shadow: none !important;
    }
    /* Font settings apply strictly to chat + newsletter reading and visible preview */
    #gptlike-chat #chatContainer .messages .bubble,
    #gptlike-chat #chatContainer .messages .post-text {
      font-size: calc(var(--mobile-chat-base) * var(--chatFontMul, 1)) !important;
      font-weight: var(--chatFontWeight, 500) !important;
      line-height: var(--lh-relaxed, 1.48) !important;
    }
    #gptlike-chat #fontPreview.font-preview-text {
      font-size: calc(var(--mobile-chat-base) * var(--chatFontMul, 1)) !important;
      font-weight: var(--chatFontWeight, 500) !important;
      line-height: var(--lh-relaxed, 1.48) !important;
    }

    /* Settings theme picker: fixed 3 presets (dark / white / gold), no accent grid */
    #gptlike-chat .theme-mode-seg{
      grid-template-columns: 1fr;
      grid-auto-rows: minmax(42px, auto);
    }
    #gptlike-chat .theme-mode-seg button[data-theme-mode="gold"]{
      --mode-layer-1: rgba(255, 184, 107, 0.24);
      --mode-layer-2: rgba(176, 132, 54, 0.24);
    }
    #gptlike-chat .theme-mode-seg button[data-theme-mode="gold"]::before{
      background: #ffb86b;
    }
    #gptlike-chat[data-theme-light="1"] .theme-mode-seg button[data-theme-mode="gold"]{
      --mode-layer-light-1: rgba(255, 184, 107, 0.84);
      --mode-layer-light-2: rgba(255, 184, 107, 0.42);
    }
    #gptlike-chat .style-modal--fullscreen > .settings-section:nth-of-type(3) > .settings-h { grid-row: 8; }
    #gptlike-chat .style-modal--fullscreen > .settings-section:nth-of-type(3) > .theme-mode-block { display: contents; }
    #gptlike-chat .style-modal--fullscreen > .settings-section:nth-of-type(3) > .theme-mode-block > .theme-mode-seg {
      grid-row: 9 / span 6;
      grid-template-columns: 1fr;
      grid-template-rows: repeat(3, minmax(0, 1fr));
    }

    /* Gold preset: stronger active state contrast for font-weight buttons */
    #gptlike-chat[data-theme="gold"] .font-weight-btn {
      color: #2a1a05 !important;
    }
    #gptlike-chat[data-theme="gold"] .font-weight-btn[data-active="true"] {
      color: #1b1204 !important;
      background: linear-gradient(180deg, rgba(255, 184, 107,0.98), rgba(255, 184, 107,0.94)) !important;
      border-color: rgba(158, 107, 24, 0.86) !important;
      box-shadow:
        inset 0 0 0 2px rgba(158, 107, 24, 0.52),
        0 0 0 1px rgba(255, 184, 107, 0.58) !important;
    }
    #gptlike-chat .style-modal--fullscreen > .settings-section:nth-of-type(4) > .settings-h { grid-row: 15; }
    #gptlike-chat .style-modal--fullscreen > .settings-section:nth-of-type(4) > .btn-secondary.btn-wide { grid-row: 16 / span 5; }

    /* Menu buttons: no outlines/borders on button blocks */
    #gptlike-chat .header-row .icon-only,
    #gptlike-chat .header-row #accountBtn,
    #gptlike-chat .header-row #settingsBtn,
    #gptlike-chat .header-row #messagesBtn,
    #gptlike-chat .header-row #logoutBtn,
    #gptlike-chat .onb-row-four .onb-btn,
    #gptlike-chat .onb-item {
      border: 0 !important;
      border-color: transparent !important;
      outline: none !important;
      box-shadow: none !important;
    }
    #gptlike-chat .header-row .icon-only:hover,
    #gptlike-chat .header-row #accountBtn:hover,
    #gptlike-chat .header-row #settingsBtn:hover,
    #gptlike-chat .header-row #messagesBtn:hover,
    #gptlike-chat .header-row #logoutBtn:hover,
    #gptlike-chat .header-row .icon-only:focus,
    #gptlike-chat .header-row .icon-only:focus-visible,
    #gptlike-chat .header-row #accountBtn:focus,
    #gptlike-chat .header-row #settingsBtn:focus,
    #gptlike-chat .header-row #messagesBtn:focus,
    #gptlike-chat .header-row #logoutBtn:focus,
    #gptlike-chat .header-row #accountBtn:focus-visible,
    #gptlike-chat .header-row #settingsBtn:focus-visible,
    #gptlike-chat .header-row #messagesBtn:focus-visible,
    #gptlike-chat .header-row #logoutBtn:focus-visible,
    #gptlike-chat .onb-row-four .onb-btn:hover,
    #gptlike-chat .onb-row-four .onb-btn:focus,
    #gptlike-chat .onb-row-four .onb-btn:focus-visible,
    #gptlike-chat .onb-row-four .onb-btn:active {
      border: 0 !important;
      border-color: transparent !important;
      outline: none !important;
      box-shadow: none !important;
    }

    /* Final adaptive control normalization: prevent drifting sizes from legacy overrides */
    #gptlike-chat .header-row .icon-only,
    #gptlike-chat .header-row #messagesBtn {
      height: clamp(46px, 6vh, 54px) !important;
      min-height: clamp(46px, 6vh, 54px) !important;
      padding: 0 12px !important;
      line-height: 1 !important;
    }
    #gptlike-chat .header-row .icon-only svg,
    #gptlike-chat .header-row #messagesBtn svg {
      width: clamp(20px, 2.8vh, 24px) !important;
      height: clamp(20px, 2.8vh, 24px) !important;
      flex: 0 0 clamp(20px, 2.8vh, 24px) !important;
    }

    #gptlike-chat #authContainer .google-btn,
    #gptlike-chat #authContainer .telegram-btn,
    #gptlike-chat #authContainer .auth-buttons .btn-primary,
    #gptlike-chat #authContainer .auth-buttons .btn-secondary,
    #gptlike-chat #authContainer .input {
      height: var(--auth-control-h) !important;
      min-height: var(--auth-control-h) !important;
      line-height: 1.2 !important;
    }

    #gptlike-chat #chatContainer .composer .icon-only {
      width: clamp(40px, 5.4vh, 46px) !important;
      height: clamp(40px, 5.4vh, 46px) !important;
      min-height: clamp(40px, 5.4vh, 46px) !important;
      padding: 0 !important;
    }
#gptlike-chat #chatContainer .composer .btn-primary,
#gptlike-chat #chatContainer .composer .btn-secondary {
  height: clamp(40px, 5.4vh, 46px) !important;
  min-height: clamp(40px, 5.4vh, 46px) !important;
  padding: 0 14px !important;
  font-size: clamp(13px, 2vw, 15px) !important;
  line-height: 1.2 !important;
}
    #gptlike-chat #chatContainer .input {
      min-height: clamp(40px, 5.4vh, 46px) !important;
      padding: 0 12px !important;
      font-size: clamp(13px, 2vw, 15px) !important;
      line-height: 1.25 !important;
    }
    #gptlike-chat #chatContainer .input::placeholder {
      font-size: clamp(12px, 1.9vw, 14px) !important;
    }
    #gptlike-chat #chatContainer .input.is-single-line {
      line-height: var(--chat-input-single-h, 40px) !important;
      padding-top: 0 !important;
      padding-bottom: 0 !important;
    }
    #gptlike-chat #chatContainer .input.is-single-line::placeholder {
      line-height: var(--chat-input-single-h, 40px) !important;
    }

/* Final override (tail): keep main menu borderless + mute chat/newsletter text */
#gptlike-chat .onb-page[data-page="2"] .onb-item,
#gptlike-chat .onb-page[data-page="3"] .onb-item,
#gptlike-chat .onb-page[data-page="2"] .onb-btn,
#gptlike-chat .onb-page[data-page="3"] .onb-btn,
#gptlike-chat .onb-page[data-page="2"] .onb-list .onb-btn,
#gptlike-chat .onb-page[data-page="3"] .onb-list .onb-btn,
#gptlike-chat .onb-page[data-page="2"] .onb-row-four .onb-btn,
#gptlike-chat .onb-page[data-page="3"] .onb-row-four .onb-btn {
  border: 0 !important;
  border-color: transparent !important;
  outline: none !important;
  box-shadow: none !important;
}
#gptlike-chat .onb-page[data-page="2"] .onb-btn:hover,
#gptlike-chat .onb-page[data-page="2"] .onb-btn:focus,
#gptlike-chat .onb-page[data-page="2"] .onb-btn:focus-visible,
#gptlike-chat .onb-page[data-page="2"] .onb-btn:active,
#gptlike-chat .onb-page[data-page="3"] .onb-btn:hover,
#gptlike-chat .onb-page[data-page="3"] .onb-btn:focus,
#gptlike-chat .onb-page[data-page="3"] .onb-btn:focus-visible,
#gptlike-chat .onb-page[data-page="3"] .onb-btn:active {
  border: 0 !important;
  border-color: transparent !important;
  outline: none !important;
  box-shadow: none !important;
}
#gptlike-chat:not([data-theme-light="1"]) #chatContainer .messages .bubble,
#gptlike-chat:not([data-theme-light="1"]) #chatContainer .messages .post-text {
  color: rgba(221, 229, 239, 0.84) !important;
  text-shadow: none !important;
}
#gptlike-chat[data-theme-light="1"] #chatContainer .messages .bubble,
#gptlike-chat[data-theme-light="1"] #chatContainer .messages .post-text {
  color: rgba(30, 41, 59, 0.82) !important;
  text-shadow: none !important;
}

/* White/Gold: softer spreads buttons + no blue cast in white theme */
#gptlike-chat[data-theme="white"] .onb-page[data-page="2"] .onb-list .onb-btn,
#gptlike-chat[data-theme="white"] .onb-page[data-page="3"] .onb-list .onb-btn,
#gptlike-chat[data-theme="white"] .onb-page[data-page="3"] .onb-zone--helper .onb-btn {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 249, 251, 0.94)) !important;
  color: #111827 !important;
  border: 1px solid rgba(36, 46, 58, 0.14) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78) !important;
}
#gptlike-chat[data-theme="white"] .onb-page[data-page="2"] .onb-list .onb-btn:hover,
#gptlike-chat[data-theme="white"] .onb-page[data-page="3"] .onb-list .onb-btn:hover,
#gptlike-chat[data-theme="white"] .onb-page[data-page="3"] .onb-zone--helper .onb-btn:hover {
  border-color: rgba(36, 46, 58, 0.18) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82) !important;
}
#gptlike-chat[data-theme="gold"] .onb-page[data-page="2"] .onb-list .onb-btn,
#gptlike-chat[data-theme="gold"] .onb-page[data-page="3"] .onb-list .onb-btn,
#gptlike-chat[data-theme="gold"] .onb-page[data-page="3"] .onb-zone--helper .onb-btn {
  color: #1f2937 !important;
  border: 1px solid rgba(255, 184, 107, 0.20) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.62) !important;
}
#gptlike-chat[data-theme="dark"] .onb-page[data-page="2"] .onb-list .onb-btn,
#gptlike-chat[data-theme="dark"] .onb-page[data-page="3"] .onb-list .onb-btn,
#gptlike-chat[data-theme="dark"] .onb-page[data-page="3"] .onb-zone--helper .onb-btn,
#gptlike-chat[data-theme="dark"] .onb-page[data-page="2"] .onb-row-four .onb-btn,
#gptlike-chat[data-theme="dark"] .onb-page[data-page="3"] .onb-row-four .onb-btn {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}
#gptlike-chat[data-theme="dark"] .onb-page[data-page="2"] .onb-list .onb-btn-label,
#gptlike-chat[data-theme="dark"] .onb-page[data-page="3"] .onb-list .onb-btn-label,
#gptlike-chat[data-theme="dark"] .onb-page[data-page="3"] .onb-zone--helper .onb-btn-label,
#gptlike-chat[data-theme="dark"] .onb-page[data-page="2"] .onb-list .onb-btn-count {
  color: #0f172a !important;
}

/* "Индивидуальный расклад": black text, slightly smaller + narrower */
#gptlike-chat:is([data-theme="white"], [data-theme="gold"]) .onb-page[data-page="2"] .onb-list [data-i18n="onbIndSpread"] {
  color: #111827 !important;
  font-size: clamp(12px, 2.0vw, 14px) !important;
  font-weight: 680 !important;
  letter-spacing: -0.01em !important;
  max-width: 100% !important;
  width: 100% !important;
  text-align: left !important;
}
#gptlike-chat:is([data-theme="white"], [data-theme="gold"]) #onbPage3Title {
  color: #111827 !important;
  font-size: clamp(13px, 2.0vh, 15px) !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  max-width: 92% !important;
  margin-inline: auto !important;
}

/* Absolute borderless blocks (final tail override) */
body::before {
  display: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

#gptlike-chat .onb-item,
#gptlike-chat .onb-btn,
#gptlike-chat .onb-list,
#gptlike-chat .onb-zone,
#gptlike-chat .onb-mini-bar,
#gptlike-chat .onb-bottom-wrap,
#gptlike-chat #chatContainer .chat-shell,
#gptlike-chat #chatContainer .chat-backbar,
#gptlike-chat #chatContainer .chat-titlebar,
#gptlike-chat #chatContainer .chat-body,
#gptlike-chat #chatContainer .messages,
#gptlike-chat #chatContainer .composer-wrapper,
#gptlike-chat #chatContainer .composer,
#gptlike-chat #chatContainer .message[data-from-posts="1"] .post-actions .post-btn[data-role="back"],
#gptlike-chat .style-modal,
#gptlike-chat .confirm,
#gptlike-chat .settings-section,
#gptlike-chat .auth-panel,
#gptlike-chat .account-line,
#gptlike-chat .font-preview,
#gptlike-chat .font-weight-seg,
#gptlike-chat .theme-mode-seg {
  border: 0 !important;
  border-color: transparent !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Main screen guest button matches back-button size and typography. */
#gptlike-chat #onboardingScreen .onb-page[data-page="1"] #onbSkipTop {
  color: rgba(182, 186, 193, 0.48) !important;
  -webkit-text-fill-color: rgba(182, 186, 193, 0.48) !important;
  background: rgba(255, 255, 255, 0.015) !important;
  border-color: rgba(214, 219, 226, 0.10) !important;
  font-size: clamp(14px, 2.4vw, 16px) !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  text-shadow: none !important;
  box-shadow: none !important;
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}
#gptlike-chat #onboardingScreen .onb-page[data-page="1"] #onbSkipTop:hover,
#gptlike-chat #onboardingScreen .onb-page[data-page="1"] #onbSkipTop:focus,
#gptlike-chat #onboardingScreen .onb-page[data-page="1"] #onbSkipTop:focus-visible,
#gptlike-chat #onboardingScreen .onb-page[data-page="1"] #onbSkipTop:active {
  color: rgba(190, 194, 201, 0.56) !important;
  -webkit-text-fill-color: rgba(190, 194, 201, 0.56) !important;
  background: rgba(255, 255, 255, 0.02) !important;
  border-color: rgba(214, 219, 226, 0.12) !important;
  text-shadow: none !important;
  box-shadow: none !important;
  transform: none !important;
  outline: none !important;
}

/* Guest flow in light themes: top Back button must be dark text. */
#gptlike-chat[data-theme-light="1"] #onboardingScreen .onb-page[data-page="2"] #onbBackTop2,
#gptlike-chat[data-theme-light="1"] #onboardingScreen .onb-page[data-page="3"] #onbBackTop3,
#gptlike-chat[data-theme-light="1"] #chatBackBtn {
  color: #1f2937 !important;
  -webkit-text-fill-color: #1f2937 !important;
  text-shadow: none !important;
}
#gptlike-chat[data-theme-light="1"] #onboardingScreen .onb-page[data-page="2"] #onbBackTop2:hover,
#gptlike-chat[data-theme-light="1"] #onboardingScreen .onb-page[data-page="2"] #onbBackTop2:focus,
#gptlike-chat[data-theme-light="1"] #onboardingScreen .onb-page[data-page="2"] #onbBackTop2:focus-visible,
#gptlike-chat[data-theme-light="1"] #onboardingScreen .onb-page[data-page="2"] #onbBackTop2:active,
#gptlike-chat[data-theme-light="1"] #onboardingScreen .onb-page[data-page="3"] #onbBackTop3:hover,
#gptlike-chat[data-theme-light="1"] #onboardingScreen .onb-page[data-page="3"] #onbBackTop3:focus,
#gptlike-chat[data-theme-light="1"] #onboardingScreen .onb-page[data-page="3"] #onbBackTop3:focus-visible,
#gptlike-chat[data-theme-light="1"] #onboardingScreen .onb-page[data-page="3"] #onbBackTop3:active,
#gptlike-chat[data-theme-light="1"] #chatBackBtn:hover,
#gptlike-chat[data-theme-light="1"] #chatBackBtn:focus,
#gptlike-chat[data-theme-light="1"] #chatBackBtn:focus-visible,
#gptlike-chat[data-theme-light="1"] #chatBackBtn:active {
  color: #1f2937 !important;
  -webkit-text-fill-color: #1f2937 !important;
  text-shadow: none !important;
}

/* Back buttons: very subtle outline */
#gptlike-chat #onbBackTop2,
#gptlike-chat #onbBackTop3,
#gptlike-chat #onbSkipTop,
#gptlike-chat #chatBackBtn,
#gptlike-chat #authBackBtn {
  border: 1px solid rgba(232, 240, 250, 0.16) !important;
  border-radius: var(--app-corner) !important;
  padding: 6px 12px !important;
  background: transparent !important;
  box-shadow: none !important;
  position: relative !important;
  z-index: 13050 !important;
}
#gptlike-chat #onbBackTop2:hover,
#gptlike-chat #onbBackTop2:focus,
#gptlike-chat #onbBackTop2:focus-visible,
#gptlike-chat #onbBackTop2:active,
#gptlike-chat #onbBackTop3:hover,
#gptlike-chat #onbBackTop3:focus,
#gptlike-chat #onbBackTop3:focus-visible,
#gptlike-chat #onbBackTop3:active,
#gptlike-chat #onbSkipTop:hover,
#gptlike-chat #onbSkipTop:focus,
#gptlike-chat #onbSkipTop:focus-visible,
#gptlike-chat #onbSkipTop:active,
#gptlike-chat #chatBackBtn:hover,
#gptlike-chat #chatBackBtn:focus,
#gptlike-chat #chatBackBtn:focus-visible,
#gptlike-chat #chatBackBtn:active,
#gptlike-chat #authBackBtn:hover,
#gptlike-chat #authBackBtn:focus,
#gptlike-chat #authBackBtn:focus-visible,
#gptlike-chat #authBackBtn:active {
  border-color: rgba(232, 240, 250, 0.2) !important;
  box-shadow: none !important;
}
#gptlike-chat[data-theme-light="1"] #onbBackTop2,
#gptlike-chat[data-theme-light="1"] #onbBackTop3,
#gptlike-chat[data-theme-light="1"] #onbSkipTop,
#gptlike-chat[data-theme-light="1"] #chatBackBtn,
#gptlike-chat[data-theme-light="1"] #authBackBtn {
  border-color: rgba(31, 41, 55, 0.16) !important;
}
#gptlike-chat[data-theme="gold"] #onbBackTop2,
#gptlike-chat[data-theme="gold"] #onbBackTop3,
#gptlike-chat[data-theme="gold"] #chatBackBtn,
#gptlike-chat[data-theme="gold"] #authBackBtn,
#gptlike-chat[data-theme="dark"] #onbBackTop2,
#gptlike-chat[data-theme="dark"] #onbBackTop3,
#gptlike-chat[data-theme="dark"] #chatBackBtn,
#gptlike-chat[data-theme="dark"] #authBackBtn {
  border-color: rgba(255, 184, 107, 0.36) !important;
  color: #6b4b19 !important;
  -webkit-text-fill-color: #6b4b19 !important;
  text-shadow: none !important;
}
#gptlike-chat[data-theme-light="1"] #onbBackTop2:hover,
#gptlike-chat[data-theme-light="1"] #onbBackTop2:focus,
#gptlike-chat[data-theme-light="1"] #onbBackTop2:focus-visible,
#gptlike-chat[data-theme-light="1"] #onbBackTop2:active,
#gptlike-chat[data-theme-light="1"] #onbBackTop3:hover,
#gptlike-chat[data-theme-light="1"] #onbBackTop3:focus,
#gptlike-chat[data-theme-light="1"] #onbBackTop3:focus-visible,
#gptlike-chat[data-theme-light="1"] #onbBackTop3:active,
#gptlike-chat[data-theme-light="1"] #onbSkipTop:hover,
#gptlike-chat[data-theme-light="1"] #onbSkipTop:focus,
#gptlike-chat[data-theme-light="1"] #onbSkipTop:focus-visible,
#gptlike-chat[data-theme-light="1"] #onbSkipTop:active,
#gptlike-chat[data-theme-light="1"] #chatBackBtn:hover,
#gptlike-chat[data-theme-light="1"] #chatBackBtn:focus,
#gptlike-chat[data-theme-light="1"] #chatBackBtn:focus-visible,
#gptlike-chat[data-theme-light="1"] #chatBackBtn:active,
#gptlike-chat[data-theme-light="1"] #authBackBtn:hover,
#gptlike-chat[data-theme-light="1"] #authBackBtn:focus,
#gptlike-chat[data-theme-light="1"] #authBackBtn:focus-visible,
#gptlike-chat[data-theme-light="1"] #authBackBtn:active {
  border-color: rgba(31, 41, 55, 0.22) !important;
}
#gptlike-chat[data-theme="gold"] #onbBackTop2:hover,
#gptlike-chat[data-theme="gold"] #onbBackTop2:focus,
#gptlike-chat[data-theme="gold"] #onbBackTop2:focus-visible,
#gptlike-chat[data-theme="gold"] #onbBackTop2:active,
#gptlike-chat[data-theme="gold"] #onbBackTop3:hover,
#gptlike-chat[data-theme="gold"] #onbBackTop3:focus,
#gptlike-chat[data-theme="gold"] #onbBackTop3:focus-visible,
#gptlike-chat[data-theme="gold"] #onbBackTop3:active,
#gptlike-chat[data-theme="gold"] #chatBackBtn:hover,
#gptlike-chat[data-theme="gold"] #chatBackBtn:focus,
#gptlike-chat[data-theme="gold"] #chatBackBtn:focus-visible,
#gptlike-chat[data-theme="gold"] #chatBackBtn:active,
#gptlike-chat[data-theme="gold"] #authBackBtn:hover,
#gptlike-chat[data-theme="gold"] #authBackBtn:focus,
#gptlike-chat[data-theme="gold"] #authBackBtn:focus-visible,
#gptlike-chat[data-theme="gold"] #authBackBtn:active,
#gptlike-chat[data-theme="dark"] #onbBackTop2:hover,
#gptlike-chat[data-theme="dark"] #onbBackTop2:focus,
#gptlike-chat[data-theme="dark"] #onbBackTop2:focus-visible,
#gptlike-chat[data-theme="dark"] #onbBackTop2:active,
#gptlike-chat[data-theme="dark"] #onbBackTop3:hover,
#gptlike-chat[data-theme="dark"] #onbBackTop3:focus,
#gptlike-chat[data-theme="dark"] #onbBackTop3:focus-visible,
#gptlike-chat[data-theme="dark"] #onbBackTop3:active,
#gptlike-chat[data-theme="dark"] #chatBackBtn:hover,
#gptlike-chat[data-theme="dark"] #chatBackBtn:focus,
#gptlike-chat[data-theme="dark"] #chatBackBtn:focus-visible,
#gptlike-chat[data-theme="dark"] #chatBackBtn:active,
#gptlike-chat[data-theme="dark"] #authBackBtn:hover,
#gptlike-chat[data-theme="dark"] #authBackBtn:focus,
#gptlike-chat[data-theme="dark"] #authBackBtn:focus-visible,
#gptlike-chat[data-theme="dark"] #authBackBtn:active {
  border-color: rgba(255, 184, 107, 0.44) !important;
}

/* Dark theme: back buttons styled like gold close button with dark text. */
#gptlike-chat[data-theme="dark"] #onbBackTop2,
#gptlike-chat[data-theme="dark"] #onbBackTop3,
#gptlike-chat[data-theme="dark"] #chatBackBtn,
#gptlike-chat[data-theme="dark"] #authBackBtn,
#gptlike-chat[data-theme="dark"] #postsBackTopBtn {
  background: linear-gradient(155deg, rgba(255, 184, 107, 0.90), rgba(255, 184, 107, 0.86), rgba(255, 184, 107, 0.84)) !important;
  border: 1px solid rgba(255, 184, 107, 0.28) !important;
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
  text-shadow: none !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
}
#gptlike-chat[data-theme="dark"] #onbBackTop2:hover,
#gptlike-chat[data-theme="dark"] #onbBackTop2:focus,
#gptlike-chat[data-theme="dark"] #onbBackTop2:focus-visible,
#gptlike-chat[data-theme="dark"] #onbBackTop2:active,
#gptlike-chat[data-theme="dark"] #onbBackTop3:hover,
#gptlike-chat[data-theme="dark"] #onbBackTop3:focus,
#gptlike-chat[data-theme="dark"] #onbBackTop3:focus-visible,
#gptlike-chat[data-theme="dark"] #onbBackTop3:active,
#gptlike-chat[data-theme="dark"] #chatBackBtn:hover,
#gptlike-chat[data-theme="dark"] #chatBackBtn:focus,
#gptlike-chat[data-theme="dark"] #chatBackBtn:focus-visible,
#gptlike-chat[data-theme="dark"] #chatBackBtn:active,
#gptlike-chat[data-theme="dark"] #authBackBtn:hover,
#gptlike-chat[data-theme="dark"] #authBackBtn:focus,
#gptlike-chat[data-theme="dark"] #authBackBtn:focus-visible,
#gptlike-chat[data-theme="dark"] #authBackBtn:active,
#gptlike-chat[data-theme="dark"] #postsBackTopBtn:hover,
#gptlike-chat[data-theme="dark"] #postsBackTopBtn:focus,
#gptlike-chat[data-theme="dark"] #postsBackTopBtn:focus-visible,
#gptlike-chat[data-theme="dark"] #postsBackTopBtn:active {
  border-color: rgba(255, 184, 107, 0.34) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.38) !important;
}

/* Keep back-button outline above all container layers (no clipping by mini-bar). */
#gptlike-chat #onboardingScreen .onb-page[data-page="2"] .onb-zone--top,
#gptlike-chat #onboardingScreen .onb-page[data-page="3"] .onb-zone--top,
#gptlike-chat #authContainer .auth-top,
#gptlike-chat #chatContainer .chat-backbar {
  position: relative !important;
  z-index: 13040 !important;
  overflow: visible !important;
}
#gptlike-chat #onboardingScreen .onb-page[data-page="2"] .onb-mini-bar,
#gptlike-chat #onboardingScreen .onb-page[data-page="3"] .onb-mini-bar,
#gptlike-chat #authContainer .auth-mini-bar {
  position: relative !important;
  z-index: 13045 !important;
  overflow: visible !important;
}

/* Full-bleed shell: remove residual corner highlights on main screen edges. */
.gptlike-wrapper,
.gptlike-wrapper.chat-mode,
.gptlike-wrapper.onboarding-active,
.gptlike-wrapper.auth-active {
  inset: 0;
  width: 100vw;
  height: 100dvh;
  border-radius: 0;
  clip-path: none;
  box-shadow: none !important;
}
@media (min-width: 641px) {
  .gptlike-wrapper,
  .gptlike-wrapper.chat-mode,
  .gptlike-wrapper.onboarding-active,
  .gptlike-wrapper.auth-active {
    width: var(--app-shell-w) !important;
    height: var(--app-shell-h) !important;
    inset: 50% auto auto 50% !important;
    transform: translate(-50%, -50%) !important;
    border-radius: 16px !important;
    box-shadow:
      0 28px 80px rgba(0, 0, 0, 0.45),
      0 0 0 1px rgba(0, 0, 0, 0.4) inset !important;
    overflow: hidden;
  }
}

@media (min-width: 641px) {
  html,
  body {
    background: var(--bg-0) !important;
    background-image: none !important;
  }
  #appGlobalBackground {
    background: var(--bg-0);
    background-image: none !important;
    animation: none !important;
  }
  #appGlobalBackground::before,
  #appGlobalBackground::after {
    background: none !important;
    opacity: 0 !important;
  }
  #gptlike-chat.gptlike-wrapper {
    background:
      linear-gradient(0deg, var(--app-bg-overlay), var(--app-bg-overlay)),
      radial-gradient(78% 62% at 12% 10%, var(--app-bg-spot-a), transparent 72%),
      radial-gradient(72% 58% at 86% 86%, var(--app-bg-spot-b), transparent 74%),
      var(--app-bg-image),
      linear-gradient(180deg, var(--app-grad-start) 0%, var(--app-grad-mid) 46%, var(--app-grad-end) 100%) !important;
    background-size: 100% 100%, 124% 124%, 124% 124%, var(--app-bg-image-size), 100% 100% !important;
    background-position: 50% 50%, 0% 0%, 100% 100%, 50% 50%, 50% 50% !important;
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat !important;
    background-color: var(--bg-0) !important;
  }
}

/* Page 3 menu title: centered inside its own zone + animated down arrow on the right. */
#onboardingScreen .onb-page[data-page="3"] .onb-zone--title {
  overflow: hidden;
}
#onboardingScreen #onbPage3Title {
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  line-height: 1.1;
  margin-block: 0;
  padding-block: 0;
}
#onboardingScreen #onbPage3Title::before {
  content: "↓";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  font-size: 1.06em;
  font-weight: 900;
  line-height: 1;
  color: currentColor;
  position: relative;
  top: -2px;
  animation: onbTitleArrowDown 1.25s ease-in-out infinite;
}
#onboardingScreen #onbPage3Title::after {
  content: none;
}
@keyframes onbTitleArrowDown {
  0%, 100% { transform: translateY(-2px); opacity: 0.9; }
  50% { transform: translateY(2px); opacity: 1; }
}

/* Keep long localized labels readable in page-2/page-3 menu buttons. */
#gptlike-chat .onb-page[data-page="2"] .onb-list .onb-btn,
#gptlike-chat .onb-page[data-page="3"] .onb-list .onb-btn,
#gptlike-chat .onb-page[data-page="3"] .onb-zone--helper .onb-btn {
  white-space: normal !important;
  text-overflow: clip !important;
}
#gptlike-chat .onb-page[data-page="2"] .onb-list .onb-btn-label,
#gptlike-chat .onb-page[data-page="3"] .onb-list .onb-btn-label,
#gptlike-chat .onb-page[data-page="3"] .onb-zone--helper .onb-btn-label {
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  white-space: normal !important;
  overflow: hidden !important;
  text-overflow: clip !important;
  text-wrap: balance;
  line-height: 1.14 !important;
}
#gptlike-chat .onb-page[data-page="2"] .onb-list .onb-btn--spreads .onb-btn-label {
  display: block !important;
  -webkit-line-clamp: unset;
  line-clamp: unset;
  white-space: pre-line !important;
}

/* Dark theme: remove residual container outlines and use dark navy buttons
   with very soft dark-gold borders. */
#gptlike-chat[data-theme="dark"] .onb-page[data-page="2"] .onb-item,
#gptlike-chat[data-theme="dark"] .onb-page[data-page="3"] .onb-item,
#gptlike-chat[data-theme="dark"] .onb-page[data-page="2"] .onb-list,
#gptlike-chat[data-theme="dark"] .onb-page[data-page="3"] .onb-list,
#gptlike-chat[data-theme="dark"] .onb-page[data-page="3"] .onb-zone--helper {
  background: transparent !important;
  border: 0 !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
#gptlike-chat[data-theme="dark"] .onb-page[data-page="2"] .onb-list .onb-btn,
#gptlike-chat[data-theme="dark"] .onb-page[data-page="3"] .onb-list .onb-btn,
#gptlike-chat[data-theme="dark"] .onb-page[data-page="3"] .onb-zone--helper .onb-btn {
  background: linear-gradient(160deg, rgba(6, 9, 14, 0.98), rgba(5, 7, 12, 0.96) 58%, rgba(4, 6, 10, 0.98)) !important;
  border: 1px solid rgba(110, 78, 32, 0.72) !important;
  box-shadow: inset 0 1px 0 rgba(110, 78, 32, 0.18) !important;
  color: #e4ebf4 !important;
}
#gptlike-chat[data-theme="dark"] .onb-page[data-page="2"] .onb-list .onb-btn:hover,
#gptlike-chat[data-theme="dark"] .onb-page[data-page="2"] .onb-list .onb-btn:focus,
#gptlike-chat[data-theme="dark"] .onb-page[data-page="2"] .onb-list .onb-btn:focus-visible,
#gptlike-chat[data-theme="dark"] .onb-page[data-page="2"] .onb-list .onb-btn:active,
#gptlike-chat[data-theme="dark"] .onb-page[data-page="3"] .onb-list .onb-btn:hover,
#gptlike-chat[data-theme="dark"] .onb-page[data-page="3"] .onb-list .onb-btn:focus,
#gptlike-chat[data-theme="dark"] .onb-page[data-page="3"] .onb-list .onb-btn:focus-visible,
#gptlike-chat[data-theme="dark"] .onb-page[data-page="3"] .onb-list .onb-btn:active,
#gptlike-chat[data-theme="dark"] .onb-page[data-page="3"] .onb-zone--helper .onb-btn:hover,
#gptlike-chat[data-theme="dark"] .onb-page[data-page="3"] .onb-zone--helper .onb-btn:focus,
#gptlike-chat[data-theme="dark"] .onb-page[data-page="3"] .onb-zone--helper .onb-btn:focus-visible,
#gptlike-chat[data-theme="dark"] .onb-page[data-page="3"] .onb-zone--helper .onb-btn:active {
  border-color: rgba(124, 90, 40, 0.86) !important;
  box-shadow: inset 0 1px 0 rgba(124, 90, 40, 0.22) !important;
  filter: none !important;
}

/* "Индивидуальный расклад": avoid bold/blurred look on button and title. */
#gptlike-chat .onb-page[data-page="2"] .onb-list [data-i18n="onbIndSpread"],
#gptlike-chat #onbPage3Title {
  font-weight: 560 !important;
  text-shadow: none !important;
  filter: none !important;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
}
#gptlike-chat #onbPage3Title {
  text-transform: none !important;
  letter-spacing: 0.01em !important;
}
#gptlike-chat[data-theme-light="1"] .onb-page[data-page="2"] .onb-list [data-i18n="onbIndSpread"],
#gptlike-chat[data-theme-light="1"] #onbPage3Title {
  color: #1f2937 !important;
}
#gptlike-chat:not([data-theme-light="1"]) .onb-page[data-page="2"] .onb-list [data-i18n="onbIndSpread"],
#gptlike-chat:not([data-theme-light="1"]) #onbPage3Title {
  color: rgba(232, 239, 248, 0.92) !important;
}
#gptlike-chat[data-theme-light="1"] .onb-page[data-page="2"] .onb-list .onb-btn--spreads {
  border: 1px solid rgba(31, 41, 55, 0.16) !important;
  padding-left: 56px !important;
}
#gptlike-chat:not([data-theme-light="1"]) .onb-page[data-page="2"] .onb-list .onb-btn--spreads {
  border: 1px solid rgba(110, 78, 32, 0.68) !important;
}

/* Light themes: chat window is white. */
#gptlike-chat[data-theme-light="1"] #chatContainer .messages {
  background: #ffffff !important;
  background-color: #ffffff !important;
}

/* White theme: chat composer controls are white with dark text/icons. */
#gptlike-chat[data-theme="white"] #chatContainer .input {
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
  border-color: rgba(15, 23, 42, 0.20) !important;
  color: #0f172a !important;
  caret-color: #0f172a !important;
}
#gptlike-chat[data-theme="white"] #chatContainer .input::placeholder {
  color: rgba(15, 23, 42, 0.60) !important;
  -webkit-text-fill-color: rgba(15, 23, 42, 0.60) !important;
  opacity: 1 !important;
}
#gptlike-chat[data-theme="white"] #chatContainer .composer .icon-only,
#gptlike-chat[data-theme="white"] #chatContainer .composer .btn-primary.icon-only,
#gptlike-chat[data-theme="white"] #chatContainer .composer .btn-secondary.icon-only {
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
  border: 1px solid rgba(15, 23, 42, 0.20) !important;
  color: #0f172a !important;
}
#gptlike-chat[data-theme="white"] #chatContainer .composer .icon-only svg,
#gptlike-chat[data-theme="white"] #chatContainer #sendBtn svg {
  color: #0f172a !important;
}

/* Gold theme: make close button and menu buttons a soft gold gradient (not too bright). */
#gptlike-chat[data-theme="gold"] .style-close,
#gptlike-chat[data-theme="dark"] .style-close {
  background: linear-gradient(135deg, rgba(255, 184, 107, 0.92), rgba(255, 184, 107, 0.88), rgba(255, 184, 107, 0.86)) !important;
  border-color: rgba(255, 184, 107, 0.30) !important;
  color: #3a2a10 !important;
}
#gptlike-chat[data-theme="gold"] .onb-page[data-page="2"] .onb-list .onb-btn,
#gptlike-chat[data-theme="gold"] .onb-page[data-page="3"] .onb-list .onb-btn,
#gptlike-chat[data-theme="gold"] .onb-page[data-page="3"] .onb-zone--helper .onb-btn,
#gptlike-chat[data-theme="dark"] .onb-page[data-page="2"] .onb-list .onb-btn,
#gptlike-chat[data-theme="dark"] .onb-page[data-page="3"] .onb-list .onb-btn,
#gptlike-chat[data-theme="dark"] .onb-page[data-page="3"] .onb-zone--helper .onb-btn {
  background: linear-gradient(155deg, rgba(255, 184, 107, 0.90), rgba(255, 184, 107, 0.86), rgba(255, 184, 107, 0.84)) !important;
  border: 1px solid rgba(255, 184, 107, 0.28) !important;
  color: #3a2a10 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
}
#gptlike-chat[data-theme="gold"] #chatContainer .composer .icon-only,
#gptlike-chat[data-theme="gold"] #chatContainer .composer .btn-primary.icon-only,
#gptlike-chat[data-theme="gold"] #chatContainer .composer .btn-secondary.icon-only {
  background: linear-gradient(155deg, rgba(255, 184, 107, 0.90), rgba(255, 184, 107, 0.86), rgba(255, 184, 107, 0.84)) !important;
  border: 1px solid rgba(255, 184, 107, 0.28) !important;
  color: #3a2a10 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
}
#gptlike-chat[data-theme="gold"] #chatContainer .composer .icon-only svg,
#gptlike-chat[data-theme="gold"] #chatContainer #sendBtn svg,
#gptlike-chat[data-theme="gold"] #chatContainer #uploadBtn svg {
  color: #3a2a10 !important;
}
#gptlike-chat[data-theme="dark"] #chatContainer .composer .icon-only,
#gptlike-chat[data-theme="dark"] #chatContainer .composer .btn-primary.icon-only,
#gptlike-chat[data-theme="dark"] #chatContainer .composer .btn-secondary.icon-only {
  background: linear-gradient(155deg, rgba(255, 184, 107, 0.90), rgba(255, 184, 107, 0.86), rgba(255, 184, 107, 0.84)) !important;
  border: 1px solid rgba(255, 184, 107, 0.28) !important;
  color: #3a2a10 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
}
#gptlike-chat[data-theme="dark"] #chatContainer .composer .icon-only svg,
#gptlike-chat[data-theme="dark"] #chatContainer #sendBtn svg,
#gptlike-chat[data-theme="dark"] #chatContainer #uploadBtn svg {
  color: #3a2a10 !important;
}

/* Final lock: composer buttons are never transparent in any theme. */
#gptlike-chat[data-theme="white"] #chatContainer .composer .icon-only,
#gptlike-chat[data-theme="white"] #chatContainer .composer .btn-primary.icon-only,
#gptlike-chat[data-theme="white"] #chatContainer .composer .btn-secondary.icon-only{
  background: #ffffff !important;
  background-image: none !important;
  border: 1px solid rgba(15, 23, 42, 0.20) !important;
}
#gptlike-chat[data-theme="gold"] #chatContainer .composer .icon-only,
#gptlike-chat[data-theme="gold"] #chatContainer .composer .btn-primary.icon-only,
#gptlike-chat[data-theme="gold"] #chatContainer .composer .btn-secondary.icon-only{
  background: linear-gradient(155deg, rgba(255, 184, 107, 0.90), rgba(255, 184, 107, 0.86), rgba(255, 184, 107, 0.84)) !important;
  border: 1px solid rgba(255, 184, 107, 0.28) !important;
}
#gptlike-chat[data-theme="dark"] #chatContainer .composer .icon-only,
#gptlike-chat[data-theme="dark"] #chatContainer .composer .btn-primary.icon-only,
#gptlike-chat[data-theme="dark"] #chatContainer .composer .btn-secondary.icon-only{
  background: linear-gradient(155deg, rgba(255, 184, 107, 0.90), rgba(255, 184, 107, 0.86), rgba(255, 184, 107, 0.84)) !important;
  border: 1px solid rgba(255, 184, 107, 0.28) !important;
}
#gptlike-chat[data-theme="gold"] .onb-page[data-page="2"] .onb-list .onb-btn:hover,
#gptlike-chat[data-theme="gold"] .onb-page[data-page="3"] .onb-list .onb-btn:hover,
#gptlike-chat[data-theme="gold"] .onb-page[data-page="3"] .onb-zone--helper .onb-btn:hover,
#gptlike-chat[data-theme="gold"] .onb-page[data-page="2"] .onb-list .onb-btn:focus,
#gptlike-chat[data-theme="gold"] .onb-page[data-page="3"] .onb-list .onb-btn:focus,
#gptlike-chat[data-theme="gold"] .onb-page[data-page="3"] .onb-zone--helper .onb-btn:focus,
#gptlike-chat[data-theme="gold"] .onb-page[data-page="2"] .onb-list .onb-btn:focus-visible,
#gptlike-chat[data-theme="gold"] .onb-page[data-page="3"] .onb-list .onb-btn:focus-visible,
#gptlike-chat[data-theme="gold"] .onb-page[data-page="3"] .onb-zone--helper .onb-btn:focus-visible,
#gptlike-chat[data-theme="gold"] .onb-page[data-page="2"] .onb-list .onb-btn:active,
#gptlike-chat[data-theme="gold"] .onb-page[data-page="3"] .onb-list .onb-btn:active,
#gptlike-chat[data-theme="gold"] .onb-page[data-page="3"] .onb-zone--helper .onb-btn:active,
#gptlike-chat[data-theme="dark"] .onb-page[data-page="2"] .onb-list .onb-btn:hover,
#gptlike-chat[data-theme="dark"] .onb-page[data-page="3"] .onb-list .onb-btn:hover,
#gptlike-chat[data-theme="dark"] .onb-page[data-page="3"] .onb-zone--helper .onb-btn:hover,
#gptlike-chat[data-theme="dark"] .onb-page[data-page="2"] .onb-list .onb-btn:focus,
#gptlike-chat[data-theme="dark"] .onb-page[data-page="3"] .onb-list .onb-btn:focus,
#gptlike-chat[data-theme="dark"] .onb-page[data-page="3"] .onb-zone--helper .onb-btn:focus,
#gptlike-chat[data-theme="dark"] .onb-page[data-page="2"] .onb-list .onb-btn:focus-visible,
#gptlike-chat[data-theme="dark"] .onb-page[data-page="3"] .onb-list .onb-btn:focus-visible,
#gptlike-chat[data-theme="dark"] .onb-page[data-page="3"] .onb-zone--helper .onb-btn:focus-visible,
#gptlike-chat[data-theme="dark"] .onb-page[data-page="2"] .onb-list .onb-btn:active,
#gptlike-chat[data-theme="dark"] .onb-page[data-page="3"] .onb-list .onb-btn:active,
#gptlike-chat[data-theme="dark"] .onb-page[data-page="3"] .onb-zone--helper .onb-btn:active {
  border-color: rgba(255, 184, 107, 0.34) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.38) !important;
}

/* Dark theme: menu button text is black-blue. */
#gptlike-chat[data-theme="dark"] .onb-page[data-page="2"] .onb-list .onb-btn,
#gptlike-chat[data-theme="dark"] .onb-page[data-page="3"] .onb-list .onb-btn,
#gptlike-chat[data-theme="dark"] .onb-page[data-page="3"] .onb-zone--helper .onb-btn,
#gptlike-chat[data-theme="dark"] .onb-page[data-page="2"] .onb-row-four .onb-btn,
#gptlike-chat[data-theme="dark"] .onb-page[data-page="3"] .onb-row-four .onb-btn {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}
#gptlike-chat[data-theme="dark"] .onb-page[data-page="2"] .onb-list .onb-btn-label,
#gptlike-chat[data-theme="dark"] .onb-page[data-page="3"] .onb-list .onb-btn-label,
#gptlike-chat[data-theme="dark"] .onb-page[data-page="3"] .onb-zone--helper .onb-btn-label,
#gptlike-chat[data-theme="dark"] .onb-page[data-page="2"] .onb-list .onb-btn-count {
  color: #0f172a !important;
}

/* White theme: back buttons have solid white background everywhere. */
#gptlike-chat[data-theme="white"] #onbBackTop2,
#gptlike-chat[data-theme="white"] #onbBackTop3,
#gptlike-chat[data-theme="white"] #chatBackBtn,
#gptlike-chat[data-theme="white"] #authBackBtn {
  background: #ffffff !important;
  background-color: #ffffff !important;
}

/* Posts (newsletters): cards + actions base (gold everywhere). */
#gptlike-chat {
  --posts-actions-border: rgba(255, 184, 107, 0.52);
  --posts-actions-bg: linear-gradient(155deg, #ffb86b 0%, #ffb86b 58%, #ffb86b 100%);
  --posts-actions-divider: rgba(255, 184, 107, 0.34);
}

#gptlike-chat #chatContainer .message[data-from-posts="1"] .post-actions {
  display: inline-flex !important;
  align-items: stretch !important;
  gap: 0 !important;
  padding: 0 !important;
  border: 1px solid var(--posts-actions-border) !important;
  border-radius: 14px !important;
  background: var(--posts-actions-bg) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
  overflow: hidden !important;
}
#gptlike-chat #chatContainer .message[data-from-posts="1"] .post-actions .post-btn {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  margin: 0 !important;
  min-height: 42px !important;
  height: 42px !important;
  flex: 0 0 auto !important;
}
#gptlike-chat #chatContainer .message[data-from-posts="1"] .post-actions .post-btn + .post-btn {
  border-left: 1px solid var(--posts-actions-divider) !important;
}
#gptlike-chat #chatContainer .message[data-from-posts="1"] .post-actions .post-btn[data-role="back"] {
  border: 0 !important;
  background: transparent !important;
}

/* Chat window outline per theme (chat screen only). */
#gptlike-chat[data-theme="gold"] #chatContainer[data-screen="chat"] .messages {
  border: 1px solid rgba(205, 170, 110, 0.58) !important;
  box-shadow: inset 0 0 0 1px rgba(205, 170, 110, 0.18) !important;
}
#gptlike-chat[data-theme="white"] #chatContainer[data-screen="chat"] .messages {
  border: 1px solid rgba(210, 186, 140, 0.54) !important;
  box-shadow: inset 0 0 0 1px rgba(210, 186, 140, 0.14) !important;
}
#gptlike-chat[data-theme="dark"] #chatContainer[data-screen="chat"] .messages {
  border: 1px solid rgba(110, 78, 32, 0.85) !important;
  box-shadow: inset 0 0 0 1px rgba(110, 78, 32, 0.28) !important;
}
#gptlike-chat #chatContainer .messages {
  background: var(--chat-messages-bg) !important;
}

#gptlike-chat[data-theme="gold"] #chatContainer[data-screen="posts"] .messages {
  border: 1px solid rgba(205, 170, 110, 0.58) !important;
  box-shadow: inset 0 0 0 1px rgba(205, 170, 110, 0.18) !important;
}
#gptlike-chat[data-theme="white"] #chatContainer[data-screen="posts"] .messages {
  border: 1px solid rgba(210, 186, 140, 0.54) !important;
  box-shadow: inset 0 0 0 1px rgba(210, 186, 140, 0.14) !important;
}
#gptlike-chat[data-theme="dark"] #chatContainer[data-screen="posts"] .messages {
  border: 1px solid rgba(110, 78, 32, 0.85) !important;
  box-shadow: inset 0 0 0 1px rgba(110, 78, 32, 0.28) !important;
}

#gptlike-chat #chatContainer .input {
  background: var(--chat-input-bg) !important;
}

/* Dark theme: solid black app background (no transparency). */
@media (max-width: 640px) {
  #gptlike-chat[data-theme="dark"] .gptlike-wrapper,
  #gptlike-chat[data-theme="dark"] .gptlike-wrapper.chat-mode,
  #gptlike-chat[data-theme="dark"] .gptlike-wrapper.onboarding-active,
  #gptlike-chat[data-theme="dark"] .gptlike-wrapper.auth-active {
    background: #000000 !important;
  }
}

/* Disable hover/active visual changes on buttons (keep only click behavior). */
#gptlike-chat button:not(.onb-help),
#gptlike-chat [role="button"]:not(.onb-help){
  transition: none !important;
}
#gptlike-chat button:hover,
#gptlike-chat button:active,
#gptlike-chat button:focus-visible,
#gptlike-chat [role="button"]:hover,
#gptlike-chat [role="button"]:active,
#gptlike-chat [role="button"]:focus-visible{
  background-image: var(--lock-bg-image, none) !important;
  background-color: var(--lock-bg-color, transparent) !important;
  color: var(--lock-color, inherit) !important;
  border-color: var(--lock-border, currentColor) !important;
  box-shadow: var(--lock-shadow, none) !important;
  text-shadow: var(--lock-text-shadow, none) !important;
  filter: none !important;
}
#gptlike-chat button:hover:not(.onb-help),
#gptlike-chat button:active:not(.onb-help),
#gptlike-chat button:focus-visible:not(.onb-help),
#gptlike-chat [role="button"]:hover:not(.onb-help),
#gptlike-chat [role="button"]:active:not(.onb-help),
#gptlike-chat [role="button"]:focus-visible:not(.onb-help){
  transform: none !important;
}

/* Hard lock: theme mode buttons never change on hover/focus. */
#gptlike-chat .theme-mode-seg button:hover,
#gptlike-chat .theme-mode-seg button:active,
#gptlike-chat .theme-mode-seg button:focus-visible{
  background: linear-gradient(180deg, var(--ui-surface-3), var(--ui-surface-2)) !important;
  border-color: var(--ui-btn-soft-border) !important;
  color: var(--ui-text-main) !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
}
/* keep pseudo-elements unchanged on hover (theme mode circles use ::before) */

/* Help tooltip colors per theme (question mark + description). */
#gptlike-chat{
  --onb-help-active: #ffb86b;
  --onb-help-active-shadow: rgba(255, 184, 107, 0.35);
  --onb-help-active-shadow-strong: rgba(255, 184, 107, 0.55);
  --onb-help-active-bg: rgba(255, 184, 107, 0.12);
  --onb-help-left-bg: var(--onb-help-active-bg);
  --onb-help-divider: rgba(255, 255, 255, 0.22);
  --onb-help-text: rgba(232, 239, 248, 0.92);
  --onb-help-idle: rgba(232, 239, 248, 0.70);
  --onb-help-idle-bg: rgba(255, 255, 255, 0.06);
  --onb-help-border: rgba(255, 255, 255, 0.18);
  --onb-help-panel-bg: rgba(12, 14, 20, 0.42);
  --onb-help-text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
  --onb-help-slice-bg: rgba(255, 255, 255, 0.06);
}
#gptlike-chat[data-theme="white"]{
  --onb-help-active: #7c5a2f;
  --onb-help-active-shadow: rgba(124, 90, 47, 0.30);
  --onb-help-active-shadow-strong: rgba(124, 90, 47, 0.45);
  --onb-help-active-bg: rgba(124, 90, 47, 0.10);
  --onb-help-left-bg: var(--onb-help-active-bg);
  --onb-help-divider: rgba(124, 90, 47, 0.22);
  --onb-help-text: rgba(31, 41, 55, 0.86);
  --onb-help-idle: rgba(76, 58, 34, 0.78);
  --onb-help-idle-bg: rgba(124, 90, 47, 0.06);
  --onb-help-border: rgba(124, 90, 47, 0.28);
  --onb-help-panel-bg: rgba(255, 255, 255, 0.88);
  --onb-help-text-shadow: 0 1px 6px rgba(15, 23, 42, 0.10);
  --onb-help-slice-bg: rgba(124, 90, 47, 0.08);
}
#gptlike-chat[data-theme="gold"]{
  --onb-help-active: #ffffff;
  --onb-help-active-shadow: rgba(255, 184, 107, 0.45);
  --onb-help-active-shadow-strong: rgba(255, 184, 107, 0.65);
  --onb-help-active-bg: rgba(255, 184, 107, 0.18);
  --onb-help-left-bg: var(--onb-help-active-bg);
  --onb-help-divider: rgba(15, 23, 42, 0.55);
  --onb-help-text: rgba(255, 250, 240, 0.96);
  --onb-help-idle: rgba(255, 255, 255, 0.92);
  --onb-help-idle-bg: rgba(255, 184, 107, 0.10);
  --onb-help-border: rgba(255, 255, 255, 0.46);
  --onb-help-panel-bg: rgba(70, 44, 14, 0.35);
  --onb-help-text-shadow: 0 1px 6px rgba(20, 12, 3, 0.45);
  --onb-help-slice-bg: rgba(255, 184, 107, 0.16);
}
#gptlike-chat[data-theme="dark"]{
  --onb-help-active: #0f172a;
  --onb-help-active-shadow: rgba(15, 23, 42, 0.18);
  --onb-help-active-shadow-strong: rgba(15, 23, 42, 0.28);
  --onb-help-active-bg: rgba(255, 184, 107, 0.22);
  --onb-help-left-bg: var(--onb-help-active-bg);
  --onb-help-divider: rgba(15, 23, 42, 0.7);
  --onb-help-text: #0f172a;
  --onb-help-idle: rgba(255, 184, 107, 0.92);
  --onb-help-idle-bg: rgba(255, 184, 107, 0.14);
  --onb-help-border: rgba(255, 184, 107, 0.52);
  --onb-help-panel-bg: rgba(255, 249, 237, 0.92);
  --onb-help-text-shadow: none;
  --onb-help-slice-bg: rgba(255, 184, 107, 0.18);
}

/* Onboarding help split: single button with a right "?" slice and full-height divider. */
#onboardingScreen .onb-page[data-page="2"] .onb-list .onb-item::before,
#onboardingScreen .onb-page[data-page="2"] .onb-list .onb-item::after,
#onboardingScreen .onb-page[data-page="3"] .onb-list .onb-item::before,
#onboardingScreen .onb-page[data-page="3"] .onb-list .onb-item::after,
#onboardingScreen .onb-page[data-page="3"] .onb-zone--helper .onb-item::before,
#onboardingScreen .onb-page[data-page="3"] .onb-zone--helper .onb-item::after{
  content: none !important;
}
#onboardingScreen .onb-page[data-page="2"] .onb-list .onb-item-desc,
#onboardingScreen .onb-page[data-page="3"] .onb-list .onb-item-desc,
#onboardingScreen .onb-page[data-page="3"] .onb-zone--helper .onb-item-desc{
  clip-path: none !important;
}
#onboardingScreen .onb-page[data-page="3"] .onb-item-desc,
#onboardingScreen .onb-page[data-page="3"] .onb-desc-text{
  text-shadow: none !important;
}

#onboardingScreen .onb-page[data-page="2"] .onb-list .onb-btn,
#onboardingScreen .onb-page[data-page="3"] .onb-list .onb-btn,
#onboardingScreen .onb-page[data-page="3"] .onb-zone--helper .onb-btn{
  position: relative;
  overflow: hidden;
}
#onboardingScreen .onb-page[data-page="2"] .onb-list .onb-btn::before,
#onboardingScreen .onb-page[data-page="3"] .onb-list .onb-btn::before,
#onboardingScreen .onb-page[data-page="3"] .onb-zone--helper .onb-btn::before{
  content: none;
}
#onboardingScreen .onb-page[data-page="2"] .onb-list .onb-btn::after,
#onboardingScreen .onb-page[data-page="3"] .onb-list .onb-btn::after,
#onboardingScreen .onb-page[data-page="3"] .onb-zone--helper .onb-btn::after{
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: var(--onb-help-slice);
  width: 1px;
  background: var(--onb-help-divider);
  pointer-events: none;
  z-index: 1;
}
#gptlike-chat[data-theme="dark"] #onboardingScreen .onb-page[data-page="2"] .onb-list .onb-btn::after,
#gptlike-chat[data-theme="dark"] #onboardingScreen .onb-page[data-page="3"] .onb-list .onb-btn::after,
#gptlike-chat[data-theme="dark"] #onboardingScreen .onb-page[data-page="3"] .onb-zone--helper .onb-btn::after{
  width: 1px;
  background: rgba(15, 23, 42, 0.55);
  opacity: 0.48;
}
#onboardingScreen .onb-page[data-page="2"] .onb-item--notify{
  --onb-help-slice: 72px;
  --onb-scan-left: calc(100% - var(--onb-help-slice));
}
#onboardingScreen .onb-page[data-page="2"] .onb-item--notify .onb-btn[data-notify-real-state="on"] .onb-btn-label{
  opacity: 0.5;
}
#onboardingScreen .onb-page[data-page="2"] .onb-item--notify .onb-btn[data-notify-real-state="off"] .onb-btn-label{
  opacity: 0.7;
}
#onboardingScreen .onb-page[data-page="2"] .onb-item--notify .onb-btn-label{
  position: relative;
  display: inline-block;
  transition: opacity 0.4s ease;
}
#onboardingScreen .onb-page[data-page="2"] .onb-item--notify .onb-notify-arrow{
  position: absolute;
  right: calc(var(--onb-help-slice) + 10px);
  top: 50%;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  --onb-notify-arrow-travel: 56px;
  --onb-notify-arrow-gap: 16px;
  color: currentColor;
  opacity: 0;
  transform: translate3d(0,-50%,0);
  pointer-events: none;
  transition: opacity 0.2s ease;
}
#onboardingScreen .onb-page[data-page="2"] .onb-item--notify .onb-notify-arrow svg{
  width: 100%;
  height: 100%;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
}
#onboardingScreen .onb-page[data-page="2"] .onb-item--notify .onb-btn[data-notify-real-state="off"] .onb-notify-arrow{
  opacity: 1;
  animation: onb-notify-arrow 2.6s ease-in-out infinite;
}
#onboardingScreen .onb-page[data-page="2"] .onb-item--notify .onb-btn[data-notify-real-state="off"][data-notify-busy="1"] .onb-notify-arrow{
  opacity: 0;
  animation: none;
}
#onboardingScreen .onb-page[data-page="2"] .onb-item--notify .onb-btn[data-notify-real-state="off"] .onb-btn-label::after{
  content: attr(data-text);
  position: absolute;
  inset: 0;
  color: transparent;
  background-image: linear-gradient(90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.75) 45%,
    rgba(255,255,255,0) 72%);
  background-size: 200% 100%;
  background-position: -120% 0;
  -webkit-background-clip: text;
  background-clip: text;
  animation: onb-notify-scan 3.6s ease-in-out infinite;
  opacity: 0.65;
  pointer-events: none;
}
#onboardingScreen .onb-page[data-page="2"] .onb-item--notify .onb-btn[data-notify-real-state="off"][data-notify-busy="1"] .onb-btn-label::after{
  animation: none;
  opacity: 0;
}
@keyframes onb-notify-scan{
  0%{background-position: -120% 0;}
  70%{background-position: 120% 0;}
  100%{background-position: 120% 0;}
}
@keyframes onb-notify-arrow{
  0%{transform: translate3d(calc(-1 * var(--onb-notify-arrow-travel) + var(--onb-notify-arrow-gap)),-50%,0); opacity: 0;}
  12%{opacity: 0.45;}
  28%{opacity: 0.95;}
  72%{opacity: 0.95;}
  100%{transform: translate3d(0,-50%,0); opacity: 0;}
}
#onboardingScreen .onb-page[data-page="2"] .onb-item--notify .onb-btn{
  padding-right: 104px !important;
  padding-left: 28px !important;
  justify-content: flex-start;
}
#onboardingScreen .onb-page[data-page="2"] .onb-item--notify .onb-btn-label{
  text-align: left;
  flex: 0 1 auto;
  width: 100%;
  padding-right: 34px;
}
/* Notify button: keep single-line label */
#onboardingScreen .onb-page[data-page="2"] .onb-item--notify .onb-btn,
#onboardingScreen .onb-page[data-page="2"] .onb-item--notify .onb-btn-label{
  white-space: nowrap !important;
}
#onboardingScreen .onb-page[data-page="2"] .onb-item--notify .onb-btn[data-notify-real-state="on"] .onb-btn-label::after{
  content: "";
  opacity: 0;
  animation: none;
}
#onboardingScreen .onb-page[data-page="2"] .onb-item--notify .onb-help--bell{
  pointer-events: none;
  cursor: default;
  color: var(--onb-help-idle);
  opacity: 0.8;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
#onboardingScreen .onb-page[data-page="2"] .onb-item--notify .onb-help--bell svg{
  width: 22px;
  height: 22px;
  display: block;
}
#onboardingScreen .onb-page[data-page="2"] .onb-item--notify .onb-btn[data-notify-state="off"] ~ .onb-help--bell{
  animation: onb-bell-wiggle 3.4s ease-in-out infinite;
  opacity: 0.82;
}
#onboardingScreen .onb-page[data-page="2"] .onb-item--notify .onb-btn[data-notify-state="on"] ~ .onb-help--bell{
  opacity: 0.18;
}
#onboardingScreen .onb-page[data-page="2"] .onb-item--notify .onb-btn[data-notify-state="blocked"] ~ .onb-help--bell,
#onboardingScreen .onb-page[data-page="2"] .onb-item--notify .onb-btn[data-notify-state="install"] ~ .onb-help--bell,
#onboardingScreen .onb-page[data-page="2"] .onb-item--notify .onb-btn[data-notify-state="unsupported"] ~ .onb-help--bell{
  opacity: 0.35;
  animation: none;
}
#onboardingScreen .onb-page[data-page="2"] .onb-list .onb-item.is-help-open .onb-btn::before,
#onboardingScreen .onb-page[data-page="3"] .onb-list .onb-item.is-help-open .onb-btn::before,
#onboardingScreen .onb-page[data-page="3"] .onb-zone--helper .onb-item.is-help-open .onb-btn::before{
  opacity: 1;
}
#onboardingScreen .onb-btn-label{
  position: relative;
  z-index: 2;
}
#onboardingScreen .onb-page[data-page="2"] .onb-list .onb-help,
#onboardingScreen .onb-page[data-page="3"] .onb-list .onb-help,
#onboardingScreen .onb-page[data-page="3"] .onb-zone--helper .onb-help{
  position: absolute;
  right: var(--onb-item-pad);
  top: 50%;
  width: var(--onb-help-slice);
  height: var(--onb-help-slice);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  transform: translateY(-50%) rotate(0deg);
  transition: transform 0.35s ease;
  z-index: 3;
  box-shadow: none !important;
  filter: none !important;
  outline: none !important;
  backface-visibility: hidden;
  text-shadow: none !important;
}
#onboardingScreen .onb-page[data-page="2"] .onb-list .onb-item.is-help-open .onb-help,
#onboardingScreen .onb-page[data-page="3"] .onb-list .onb-item.is-help-open .onb-help,
#onboardingScreen .onb-page[data-page="3"] .onb-zone--helper .onb-item.is-help-open .onb-help{
  transform: translateY(-50%) rotate(180deg);
  text-shadow: 0 0 8px var(--onb-help-active-shadow) !important;
}

#gptlike-chat #onboardingScreen .onb-page[data-page="2"] .onb-list .onb-help,
#gptlike-chat #onboardingScreen .onb-page[data-page="3"] .onb-list .onb-help,
#gptlike-chat #onboardingScreen .onb-page[data-page="3"] .onb-zone--helper .onb-help{
  color: var(--onb-help-idle) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
#gptlike-chat #onboardingScreen .onb-page[data-page="2"] .onb-list .onb-item.is-help-open .onb-help,
#gptlike-chat #onboardingScreen .onb-page[data-page="3"] .onb-list .onb-item.is-help-open .onb-help,
#gptlike-chat #onboardingScreen .onb-page[data-page="3"] .onb-zone--helper .onb-item.is-help-open .onb-help{
  color: var(--onb-help-idle) !important;
  background: transparent !important;
  border-color: transparent !important;
  text-shadow: none !important;
}
#gptlike-chat #onboardingScreen .onb-page[data-page="2"] .onb-list .onb-help::before,
#gptlike-chat #onboardingScreen .onb-page[data-page="3"] .onb-list .onb-help::before,
#gptlike-chat #onboardingScreen .onb-page[data-page="3"] .onb-zone--helper .onb-help::before{
  background: var(--onb-help-divider) !important;
}
#gptlike-chat #onboardingScreen .onb-page[data-page="2"] .onb-item-desc,
#gptlike-chat #onboardingScreen .onb-page[data-page="3"] .onb-item-desc{
  color: inherit !important;
  text-shadow: none !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 16px;
  position: relative;
  z-index: 1;
  mix-blend-mode: normal;
  backface-visibility: hidden;
  transition: none;
}

#gptlike-chat #onboardingScreen .onb-page[data-page="2"] .onb-btn,
#gptlike-chat #onboardingScreen .onb-page[data-page="3"] .onb-btn{
  position: relative;
  z-index: 0;
}
#gptlike-chat #onboardingScreen .onb-page[data-page="2"] .onb-list .onb-help,
#gptlike-chat #onboardingScreen .onb-page[data-page="3"] .onb-list .onb-help,
#gptlike-chat #onboardingScreen .onb-page[data-page="3"] .onb-zone--helper .onb-help{
  position: absolute;
  z-index: 2;
}

@keyframes onb-bell-wiggle{
  0%, 100%{ transform: translateY(-50%) rotate(0deg); }
  12%{ transform: translateY(-50%) rotate(-6deg); }
  24%{ transform: translateY(-50%) rotate(5deg); }
  36%{ transform: translateY(-50%) rotate(-4deg); }
  48%{ transform: translateY(-50%) rotate(3deg); }
  60%{ transform: translateY(-50%) rotate(0deg); }
}

/* FINAL: disable hover color changes on theme buttons and composer buttons. */
#gptlike-chat .theme-mode-seg button:hover,
#gptlike-chat .theme-mode-seg button:active,
#gptlike-chat .theme-mode-seg button:focus-visible{
  background: linear-gradient(180deg, var(--ui-surface-3), var(--ui-surface-2)) !important;
  border-color: var(--ui-btn-soft-border) !important;
  color: var(--ui-text-main) !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
}

#gptlike-chat[data-theme="white"] #chatContainer .composer .icon-only,
#gptlike-chat[data-theme="white"] #chatContainer .composer .btn-primary.icon-only,
#gptlike-chat[data-theme="white"] #chatContainer .composer .btn-secondary.icon-only,
#gptlike-chat[data-theme="white"] #chatContainer .composer .icon-only:hover,
#gptlike-chat[data-theme="white"] #chatContainer .composer .btn-primary.icon-only:hover,
#gptlike-chat[data-theme="white"] #chatContainer .composer .btn-secondary.icon-only:hover,
#gptlike-chat[data-theme="white"] #chatContainer .composer .icon-only:active,
#gptlike-chat[data-theme="white"] #chatContainer .composer .btn-primary.icon-only:active,
#gptlike-chat[data-theme="white"] #chatContainer .composer .btn-secondary.icon-only:active,
#gptlike-chat[data-theme="white"] #chatContainer .composer .icon-only:focus-visible,
#gptlike-chat[data-theme="white"] #chatContainer .composer .btn-primary.icon-only:focus-visible,
#gptlike-chat[data-theme="white"] #chatContainer .composer .btn-secondary.icon-only:focus-visible{
  --lock-bg-image: none;
  --lock-bg-color: #ffffff;
  background: #ffffff !important;
  background-image: none !important;
  background-color: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, 0.20) !important;
  color: #0f172a !important;
  box-shadow: none !important;
  filter: none !important;
}
#gptlike-chat[data-theme="white"] #chatContainer .composer .icon-only svg,
#gptlike-chat[data-theme="white"] #chatContainer #sendBtn svg,
#gptlike-chat[data-theme="white"] #chatContainer #uploadBtn svg{
  color: #0f172a !important;
}

#gptlike-chat[data-theme="gold"] #chatContainer .composer .icon-only,
#gptlike-chat[data-theme="gold"] #chatContainer .composer .btn-primary.icon-only,
#gptlike-chat[data-theme="gold"] #chatContainer .composer .btn-secondary.icon-only,
#gptlike-chat[data-theme="gold"] #chatContainer .composer .icon-only:hover,
#gptlike-chat[data-theme="gold"] #chatContainer .composer .btn-primary.icon-only:hover,
#gptlike-chat[data-theme="gold"] #chatContainer .composer .btn-secondary.icon-only:hover,
#gptlike-chat[data-theme="gold"] #chatContainer .composer .icon-only:active,
#gptlike-chat[data-theme="gold"] #chatContainer .composer .btn-primary.icon-only:active,
#gptlike-chat[data-theme="gold"] #chatContainer .composer .btn-secondary.icon-only:active,
#gptlike-chat[data-theme="gold"] #chatContainer .composer .icon-only:focus-visible,
#gptlike-chat[data-theme="gold"] #chatContainer .composer .btn-primary.icon-only:focus-visible,
#gptlike-chat[data-theme="gold"] #chatContainer .composer .btn-secondary.icon-only:focus-visible{
  --lock-bg-image: linear-gradient(155deg, rgb(255, 184, 107), rgb(255, 184, 107), rgb(255, 184, 107));
  --lock-bg-color: rgb(255, 184, 107);
  background: linear-gradient(155deg, rgb(255, 184, 107), rgb(255, 184, 107), rgb(255, 184, 107)) !important;
  background-color: rgb(255, 184, 107) !important;
  background-image: linear-gradient(155deg, rgb(255, 184, 107), rgb(255, 184, 107), rgb(255, 184, 107)) !important;
  border: 1px solid rgba(255, 184, 107, 0.28) !important;
  color: #3a2a10 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
  filter: none !important;
}
#gptlike-chat[data-theme="gold"] #chatContainer .composer .icon-only svg,
#gptlike-chat[data-theme="gold"] #chatContainer #sendBtn svg,
#gptlike-chat[data-theme="gold"] #chatContainer #uploadBtn svg{
  color: #3a2a10 !important;
}

#gptlike-chat[data-theme="dark"] #chatContainer .composer .icon-only,
#gptlike-chat[data-theme="dark"] #chatContainer .composer .btn-primary.icon-only,
#gptlike-chat[data-theme="dark"] #chatContainer .composer .btn-secondary.icon-only,
#gptlike-chat[data-theme="dark"] #chatContainer .composer .icon-only:hover,
#gptlike-chat[data-theme="dark"] #chatContainer .composer .btn-primary.icon-only:hover,
#gptlike-chat[data-theme="dark"] #chatContainer .composer .btn-secondary.icon-only:hover,
#gptlike-chat[data-theme="dark"] #chatContainer .composer .icon-only:active,
#gptlike-chat[data-theme="dark"] #chatContainer .composer .btn-primary.icon-only:active,
#gptlike-chat[data-theme="dark"] #chatContainer .composer .btn-secondary.icon-only:active,
#gptlike-chat[data-theme="dark"] #chatContainer .composer .icon-only:focus-visible,
#gptlike-chat[data-theme="dark"] #chatContainer .composer .btn-primary.icon-only:focus-visible,
#gptlike-chat[data-theme="dark"] #chatContainer .composer .btn-secondary.icon-only:focus-visible{
  --lock-bg-image: linear-gradient(155deg, rgb(255, 184, 107), rgb(255, 184, 107), rgb(255, 184, 107));
  --lock-bg-color: rgb(255, 184, 107);
  background: linear-gradient(155deg, rgb(255, 184, 107), rgb(255, 184, 107), rgb(255, 184, 107)) !important;
  background-color: rgb(255, 184, 107) !important;
  background-image: linear-gradient(155deg, rgb(255, 184, 107), rgb(255, 184, 107), rgb(255, 184, 107)) !important;
  border: 1px solid rgba(255, 184, 107, 0.28) !important;
  color: #3a2a10 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
  filter: none !important;
}
#gptlike-chat[data-theme="dark"] #chatContainer .composer .icon-only svg,
#gptlike-chat[data-theme="dark"] #chatContainer #sendBtn svg,
#gptlike-chat[data-theme="dark"] #chatContainer #uploadBtn svg{
  color: #3a2a10 !important;
}

/* ===== Image scan UX ===== */
#gptlike-chat{
  --scan-glow: rgba(255, 184, 107, 0.55);
  --scan-glow-strong: rgba(255, 184, 107, 0.95);
  --scan-glow-soft: rgba(255, 184, 107, 0.30);
  --composer-pill-bg: rgba(16, 18, 24, 0.72);
  --composer-pill-border: rgba(255, 255, 255, 0.12);
  --composer-pill-divider: rgba(255, 255, 255, 0.12);
  --composer-pill-top: rgba(255, 255, 255, 0.14);
  --composer-pill-bottom: rgba(0, 0, 0, 0.55);
}
#gptlike-chat[data-theme-light="1"]{
  --scan-glow: rgba(255, 184, 107, 0.45);
  --scan-glow-strong: rgba(255, 184, 107, 0.90);
  --scan-glow-soft: rgba(255, 184, 107, 0.26);
  --composer-pill-bg: #ffffff;
  --composer-pill-border: rgba(15, 23, 42, 0.16);
  --composer-pill-divider: rgba(15, 23, 42, 0.12);
  --composer-pill-top: rgba(255, 255, 255, 0.95);
  --composer-pill-bottom: rgba(15, 23, 42, 0.18);
}
#gptlike-chat[data-theme="gold"]{
  --composer-pill-bg: #ffffff;
  --composer-pill-border: rgba(255, 184, 107, 0.32);
  --composer-pill-divider: rgba(255, 184, 107, 0.26);
  --composer-pill-top: rgba(255, 255, 255, 0.98);
  --composer-pill-bottom: rgba(255, 184, 107, 0.26);
}
#gptlike-chat.scan-active #chatContainer .composer{
  position: relative !important;
  overflow: visible !important;
}
#gptlike-chat.scan-active #chatContainer .scan-host{
  position: relative !important;
  overflow: visible !important;
}
#gptlike-chat.scan-active #chatContainer #uploadBtn{
  position: relative;
  z-index: 3;
}
#gptlike-chat.scan-active #chatContainer .scan-divider{
  position: absolute;
  left: var(--scan-start, 0px);
  top: var(--scan-top, 0px);
  width: 3px;
  height: var(--scan-height, 30px);
  border-radius: 999px;
  background: linear-gradient(180deg, transparent 0%, var(--scan-glow-strong) 35%, var(--scan-glow-strong) 65%, transparent 100%);
  box-shadow:
    0 0 16px var(--scan-glow-strong),
    0 0 36px var(--scan-glow-soft);
  animation: scanDividerMove 1.9s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  pointer-events: none;
  z-index: 2;
}
#gptlike-chat.scan-active #chatContainer .scan-divider::after{
  content:"";
  position:absolute;
  left:50%;
  top:-10px;
  width: 14px;
  height: calc(100% + 20px);
  transform: translateX(-50%);
  background: linear-gradient(180deg, transparent 0%, var(--scan-glow) 50%, transparent 100%);
  filter: blur(7px);
  opacity: 0.9;
  pointer-events: none;
}
@keyframes scanDividerMove{
  0%{ transform: translateX(0); opacity: 0; }
  15%{ opacity: 1; }
  85%{ opacity: 1; }
  100%{ transform: translateX(var(--scan-distance, 140px)); opacity: 0; }
}

/* Larger rounded thumbnail for chat images */
#gptlike-chat .img-wrap{
  max-width: min(520px, 86vw) !important;
  border-radius: 18px !important;
  aspect-ratio: 4 / 3;
}
#gptlike-chat .img-wrap img{
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  object-fit: cover;
}

/* ===== Unified composer (input merged with buttons) ===== */
#gptlike-chat #chatContainer .composer{
  gap: 0 !important;
  padding: 4px !important;
  border-radius: 18px !important;
  background: var(--composer-pill-bg) !important;
  border: 1px solid var(--composer-pill-border) !important;
  box-shadow:
    inset 0 1px 0 var(--composer-pill-top),
    inset 0 -1px 0 var(--composer-pill-bottom) !important;
  position: relative !important;
  isolation: isolate;
}
#gptlike-chat #chatContainer .composer::before{
  content:"";
  position: absolute;
  inset: 1px;
  border-radius: 16px;
  box-shadow:
    inset 0 1px 0 var(--composer-pill-top),
    inset 0 -1px 0 var(--composer-pill-bottom);
  pointer-events: none;
  opacity: 1;
}
#gptlike-chat[data-theme="white"] #chatContainer .composer,
#gptlike-chat[data-theme="gold"] #chatContainer .composer{
  background: #ffffff !important;
}

/* White theme: dark composer buttons + white icons */
#gptlike-chat[data-theme="white"] #chatContainer .composer .icon-only,
#gptlike-chat[data-theme="white"] #chatContainer .composer .btn-primary.icon-only,
#gptlike-chat[data-theme="white"] #chatContainer .composer .btn-secondary.icon-only{
  background: #0b0b0f !important;
  border: 1px solid rgba(0, 0, 0, 0.25) !important;
  color: #ffffff !important;
}
#gptlike-chat[data-theme="white"] #chatContainer .composer .icon-only svg,
#gptlike-chat[data-theme="white"] #chatContainer #sendBtn svg,
#gptlike-chat[data-theme="white"] #chatContainer #uploadBtn svg{
  color: #ffffff !important;
}
#gptlike-chat #chatContainer .composer .icon-only,
#gptlike-chat #chatContainer .composer .btn-primary.icon-only,
#gptlike-chat #chatContainer .composer .btn-secondary.icon-only,
#gptlike-chat #chatContainer .composer .input{
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}
#gptlike-chat #chatContainer #uploadBtn{
  border-radius: 14px 0 0 14px !important;
  border-right: 1px solid var(--composer-pill-divider) !important;
}
#gptlike-chat #chatContainer #sendBtn{
  border-radius: 0 14px 14px 0 !important;
  border-left: 1px solid var(--composer-pill-divider) !important;
}
#gptlike-chat #chatContainer .input{
  border-radius: 0 !important;
}

/* Chat container: clean outer frame + unified lower area */
#gptlike-chat #chatContainer .chat-shell {
  border-radius: 12px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255,255,255,0.24) !important;
}
/* Chat layout final: 10% header + 90% lower, separate windows */
#gptlike-chat #chatContainer .chat-shell {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  grid-template-rows: 10% 90% !important;
}
#gptlike-chat #chatContainer[data-screen="posts"] .chat-shell {
  grid-template-rows: 10% 90% !important;
}
#gptlike-chat #chatContainer[data-spread-ui="1"] .chat-shell {
  grid-template-rows: 10% 5% 5% minmax(0, 1fr) !important;
}
#gptlike-chat #chatContainer:is([data-spread-form="spread1"], [data-spread-form="spread2"], [data-spread-form="spread3"], [data-spread-form="spread4"], [data-spread-form="spread5"], [data-spread-form="spread6"], [data-spread-form="spread7"], [data-spread-form="spread8"], [data-spread-form="spread9"]) .chat-shell {
  grid-template-rows:
    10%
    5%
    2%
    73%
    10% !important;
}
#gptlike-chat #chatContainer .chat-backbar {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  height: 100% !important;
  min-height: 0 !important;
  padding: 0 var(--shell-inner-x) !important;
}
#gptlike-chat #chatContainer[data-spread-ui="1"] .chat-backbar {
  grid-row: 1 !important;
}
#gptlike-chat #chatContainer[data-spread-ui="1"] .chat-spread-row {
  display: flex !important;
  height: 100% !important;
}
#gptlike-chat #chatContainer[data-spread-ui="1"] .chat-spread-row--support {
  display: none !important;
}
#gptlike-chat #chatContainer[data-spread-ui="1"] .chat-spread-row--deck {
  grid-row: 2 !important;
}
#gptlike-chat #chatContainer[data-spread-ui="1"] .chat-spread-row--actions {
  display: grid !important;
  grid-row: 3 !important;
}
#gptlike-chat #chatContainer:is([data-spread-form="spread1"], [data-spread-form="spread2"], [data-spread-form="spread3"], [data-spread-form="spread4"], [data-spread-form="spread5"], [data-spread-form="spread6"], [data-spread-form="spread7"], [data-spread-form="spread8"], [data-spread-form="spread9"]) .chat-spread-row--actions {
  grid-row: 2 !important;
}
#gptlike-chat #chatContainer .chat-spread-spacer {
  display: none;
}
#gptlike-chat #chatContainer:is([data-spread-form="spread1"], [data-spread-form="spread2"], [data-spread-form="spread3"], [data-spread-form="spread4"], [data-spread-form="spread5"], [data-spread-form="spread6"], [data-spread-form="spread7"], [data-spread-form="spread8"], [data-spread-form="spread9"]) .chat-spread-spacer {
  display: block;
  grid-row: 3 !important;
}
#gptlike-chat #chatContainer:is([data-spread-form="spread1"], [data-spread-form="spread2"], [data-spread-form="spread3"], [data-spread-form="spread4"], [data-spread-form="spread5"], [data-spread-form="spread6"], [data-spread-form="spread7"], [data-spread-form="spread8"], [data-spread-form="spread9"]) .chat-backbar {
  height: 100% !important;
  padding: 0 var(--shell-inner-x) !important;
}
#gptlike-chat #chatContainer:is([data-spread-form="spread1"], [data-spread-form="spread2"], [data-spread-form="spread3"], [data-spread-form="spread4"], [data-spread-form="spread5"], [data-spread-form="spread6"], [data-spread-form="spread7"], [data-spread-form="spread8"], [data-spread-form="spread9"]) .chat-spread-row {
  height: 100% !important;
}
#gptlike-chat #chatContainer:is([data-spread-form="spread1"], [data-spread-form="spread2"], [data-spread-form="spread3"], [data-spread-form="spread4"], [data-spread-form="spread5"], [data-spread-form="spread6"], [data-spread-form="spread7"], [data-spread-form="spread8"], [data-spread-form="spread9"]) .chat-spread-row--actions {
  display: grid !important;
  align-items: center !important;
  align-content: center !important;
  padding-block: 0 !important;
}
#gptlike-chat #chatContainer[data-spread-ui="1"] .chat-lower {
  grid-row: 4 !important;
}
#gptlike-chat #chatContainer:is([data-spread-form="spread1"], [data-spread-form="spread2"], [data-spread-form="spread3"], [data-spread-form="spread4"], [data-spread-form="spread5"], [data-spread-form="spread6"], [data-spread-form="spread7"], [data-spread-form="spread8"], [data-spread-form="spread9"]) .chat-lower {
  grid-row: 4 !important;
}
#gptlike-chat #chatContainer:is([data-spread-form="spread1"], [data-spread-form="spread2"], [data-spread-form="spread3"], [data-spread-form="spread4"], [data-spread-form="spread5"], [data-spread-form="spread6"], [data-spread-form="spread7"], [data-spread-form="spread8"], [data-spread-form="spread9"]) .chat-spread-row--send {
  grid-row: 5 !important;
}
#gptlike-chat #chatContainer:is([data-spread-form="spread1"], [data-spread-form="spread2"], [data-spread-form="spread3"], [data-spread-form="spread4"], [data-spread-form="spread5"], [data-spread-form="spread6"], [data-spread-form="spread7"], [data-spread-form="spread8"], [data-spread-form="spread9"]) .chat-spread-row--send {
  height: 100% !important;
  padding: 6px var(--shell-inner-x) calc(8px + var(--keyboard-inset, 0px)) !important;
}
#gptlike-chat #chatContainer:is([data-spread-form="spread1"], [data-spread-form="spread2"], [data-spread-form="spread3"], [data-spread-form="spread4"], [data-spread-form="spread5"], [data-spread-form="spread6"], [data-spread-form="spread7"], [data-spread-form="spread8"], [data-spread-form="spread9"]) .chat-spread-row--deck,
#gptlike-chat #chatContainer:is([data-spread-form="spread1"], [data-spread-form="spread2"], [data-spread-form="spread3"], [data-spread-form="spread4"], [data-spread-form="spread5"], [data-spread-form="spread6"], [data-spread-form="spread7"], [data-spread-form="spread8"], [data-spread-form="spread9"]) .chat-spread-row--support,
#gptlike-chat #chatContainer:is([data-spread-form="spread1"], [data-spread-form="spread2"], [data-spread-form="spread3"], [data-spread-form="spread4"], [data-spread-form="spread5"], [data-spread-form="spread6"], [data-spread-form="spread7"], [data-spread-form="spread8"], [data-spread-form="spread9"]) .chat-support-note {
  display: none !important;
}
#gptlike-chat #chatContainer[data-support-ui="1"] .chat-shell {
  grid-template-rows:
    clamp(56px, 10%, 96px)
    minmax(52px, 8%)
    minmax(0, 1fr) !important;
}
#gptlike-chat #chatContainer[data-support-ui="1"] .chat-spread-row--support .onb-btn {
  height: calc(100% - 2px) !important;
  margin-block: 1px !important;
}
#gptlike-chat #chatContainer[data-support-ui="1"] .chat-backbar {
  grid-row: 1 !important;
}
#gptlike-chat #chatContainer[data-support-ui="1"] .chat-spread-row--support {
  display: flex !important;
  height: 100% !important;
  grid-row: 2 !important;
}
#gptlike-chat #chatContainer[data-support-ui="1"] .chat-support-note {
  display: none !important;
}
#gptlike-chat #chatContainer[data-support-ui="1"] .chat-lower {
  grid-row: 3 !important;
}
#gptlike-chat #chatContainer:is([data-spread-ui="1"], [data-support-ui="1"]) .chat-spread-row {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
#gptlike-chat #chatContainer:is([data-spread-ui="1"], [data-support-ui="1"]) .chat-spread-row .onb-btn,
#gptlike-chat #chatContainer[data-spread-form^="spread"] .spread-form-deck .onb-btn,
#gptlike-chat #chatContainer[data-spread-form^="spread"] .spread-check-btn {
  background:
    radial-gradient(120px 60px at 20% 25%, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 60%),
    linear-gradient(90deg, var(--accent-1), var(--accent-2)) !important;
  color: var(--btn-text, #ffffff) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow:
    0 10px 22px rgba(0, 0, 0, 0.26),
    0 0 0 1px rgba(255, 255, 255, 0.06) inset !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}
#gptlike-chat #chatContainer:is([data-spread-ui="1"], [data-support-ui="1"]) .chat-spread-row .onb-btn:hover,
#gptlike-chat #chatContainer:is([data-spread-ui="1"], [data-support-ui="1"]) .chat-spread-row .onb-btn:focus,
#gptlike-chat #chatContainer:is([data-spread-ui="1"], [data-support-ui="1"]) .chat-spread-row .onb-btn:focus-visible,
#gptlike-chat #chatContainer:is([data-spread-ui="1"], [data-support-ui="1"]) .chat-spread-row .onb-btn:active,
#gptlike-chat #chatContainer[data-spread-form^="spread"] .spread-form-deck .onb-btn:hover,
#gptlike-chat #chatContainer[data-spread-form^="spread"] .spread-form-deck .onb-btn:focus,
#gptlike-chat #chatContainer[data-spread-form^="spread"] .spread-form-deck .onb-btn:focus-visible,
#gptlike-chat #chatContainer[data-spread-form^="spread"] .spread-form-deck .onb-btn:active,
#gptlike-chat #chatContainer[data-spread-form^="spread"] .spread-check-btn:hover,
#gptlike-chat #chatContainer[data-spread-form^="spread"] .spread-check-btn:focus,
#gptlike-chat #chatContainer[data-spread-form^="spread"] .spread-check-btn:focus-visible,
#gptlike-chat #chatContainer[data-spread-form^="spread"] .spread-check-btn:active {
  filter: brightness(1.05);
}
#gptlike-chat[data-theme="dark"] #chatContainer:is([data-spread-ui="1"], [data-support-ui="1"]) .chat-spread-row .onb-btn,
#gptlike-chat[data-theme="dark"] #chatContainer[data-spread-form^="spread"] .spread-form-deck .onb-btn,
#gptlike-chat[data-theme="dark"] #chatContainer[data-spread-form^="spread"] .spread-check-btn {
  background: linear-gradient(160deg, rgba(6, 9, 14, 0.98), rgba(5, 7, 12, 0.96) 58%, rgba(4, 6, 10, 0.98)) !important;
  border: 1px solid rgba(110, 78, 32, 0.72) !important;
  box-shadow: inset 0 1px 0 rgba(110, 78, 32, 0.18) !important;
  color: #e4ebf4 !important;
}
#gptlike-chat[data-theme="dark"] #chatContainer:is([data-spread-ui="1"], [data-support-ui="1"]) .chat-spread-row .onb-btn:hover,
#gptlike-chat[data-theme="dark"] #chatContainer:is([data-spread-ui="1"], [data-support-ui="1"]) .chat-spread-row .onb-btn:focus,
#gptlike-chat[data-theme="dark"] #chatContainer:is([data-spread-ui="1"], [data-support-ui="1"]) .chat-spread-row .onb-btn:focus-visible,
#gptlike-chat[data-theme="dark"] #chatContainer:is([data-spread-ui="1"], [data-support-ui="1"]) .chat-spread-row .onb-btn:active,
#gptlike-chat[data-theme="dark"] #chatContainer[data-spread-form^="spread"] .spread-form-deck .onb-btn:hover,
#gptlike-chat[data-theme="dark"] #chatContainer[data-spread-form^="spread"] .spread-form-deck .onb-btn:focus,
#gptlike-chat[data-theme="dark"] #chatContainer[data-spread-form^="spread"] .spread-form-deck .onb-btn:focus-visible,
#gptlike-chat[data-theme="dark"] #chatContainer[data-spread-form^="spread"] .spread-form-deck .onb-btn:active,
#gptlike-chat[data-theme="dark"] #chatContainer[data-spread-form^="spread"] .spread-check-btn:hover,
#gptlike-chat[data-theme="dark"] #chatContainer[data-spread-form^="spread"] .spread-check-btn:focus,
#gptlike-chat[data-theme="dark"] #chatContainer[data-spread-form^="spread"] .spread-check-btn:focus-visible,
#gptlike-chat[data-theme="dark"] #chatContainer[data-spread-form^="spread"] .spread-check-btn:active {
  border-color: rgba(124, 90, 40, 0.86) !important;
  box-shadow: inset 0 1px 0 rgba(124, 90, 40, 0.22) !important;
  filter: none !important;
}
#gptlike-chat[data-theme="white"] #chatContainer:is([data-spread-ui="1"], [data-support-ui="1"]) .chat-spread-row .onb-btn,
#gptlike-chat[data-theme="white"] #chatContainer[data-spread-form^="spread"] .spread-form-deck .onb-btn,
#gptlike-chat[data-theme="white"] #chatContainer[data-spread-form^="spread"] .spread-check-btn {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 249, 251, 0.94)) !important;
  color: #111827 !important;
  border: 1px solid rgba(36, 46, 58, 0.14) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78) !important;
}
#gptlike-chat[data-theme="white"] #chatContainer:is([data-spread-ui="1"], [data-support-ui="1"]) .chat-spread-row .onb-btn:hover,
#gptlike-chat[data-theme="white"] #chatContainer:is([data-spread-ui="1"], [data-support-ui="1"]) .chat-spread-row .onb-btn:focus,
#gptlike-chat[data-theme="white"] #chatContainer:is([data-spread-ui="1"], [data-support-ui="1"]) .chat-spread-row .onb-btn:focus-visible,
#gptlike-chat[data-theme="white"] #chatContainer:is([data-spread-ui="1"], [data-support-ui="1"]) .chat-spread-row .onb-btn:active,
#gptlike-chat[data-theme="white"] #chatContainer[data-spread-form^="spread"] .spread-form-deck .onb-btn:hover,
#gptlike-chat[data-theme="white"] #chatContainer[data-spread-form^="spread"] .spread-form-deck .onb-btn:focus,
#gptlike-chat[data-theme="white"] #chatContainer[data-spread-form^="spread"] .spread-form-deck .onb-btn:focus-visible,
#gptlike-chat[data-theme="white"] #chatContainer[data-spread-form^="spread"] .spread-form-deck .onb-btn:active,
#gptlike-chat[data-theme="white"] #chatContainer[data-spread-form^="spread"] .spread-check-btn:hover,
#gptlike-chat[data-theme="white"] #chatContainer[data-spread-form^="spread"] .spread-check-btn:focus,
#gptlike-chat[data-theme="white"] #chatContainer[data-spread-form^="spread"] .spread-check-btn:focus-visible,
#gptlike-chat[data-theme="white"] #chatContainer[data-spread-form^="spread"] .spread-check-btn:active {
  border-color: rgba(36, 46, 58, 0.18) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82) !important;
}
#gptlike-chat[data-theme="gold"] #chatContainer:is([data-spread-ui="1"], [data-support-ui="1"]) .chat-spread-row .onb-btn,
#gptlike-chat[data-theme="gold"] #chatContainer[data-spread-form^="spread"] .spread-form-deck .onb-btn,
#gptlike-chat[data-theme="gold"] #chatContainer[data-spread-form^="spread"] .spread-check-btn,
#gptlike-chat[data-theme="dark"] #chatContainer:is([data-spread-ui="1"], [data-support-ui="1"]) .chat-spread-row .onb-btn,
#gptlike-chat[data-theme="dark"] #chatContainer[data-spread-form^="spread"] .spread-form-deck .onb-btn,
#gptlike-chat[data-theme="dark"] #chatContainer[data-spread-form^="spread"] .spread-check-btn {
  background: linear-gradient(155deg, rgba(255, 184, 107, 0.90), rgba(255, 184, 107, 0.86), rgba(255, 184, 107, 0.84)) !important;
  border: 1px solid rgba(255, 184, 107, 0.28) !important;
  color: #3a2a10 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
}
#gptlike-chat[data-theme="gold"] #chatContainer:is([data-spread-ui="1"], [data-support-ui="1"]) .chat-spread-row .onb-btn:hover,
#gptlike-chat[data-theme="gold"] #chatContainer:is([data-spread-ui="1"], [data-support-ui="1"]) .chat-spread-row .onb-btn:focus,
#gptlike-chat[data-theme="gold"] #chatContainer:is([data-spread-ui="1"], [data-support-ui="1"]) .chat-spread-row .onb-btn:focus-visible,
#gptlike-chat[data-theme="gold"] #chatContainer:is([data-spread-ui="1"], [data-support-ui="1"]) .chat-spread-row .onb-btn:active,
#gptlike-chat[data-theme="gold"] #chatContainer[data-spread-form^="spread"] .spread-form-deck .onb-btn:hover,
#gptlike-chat[data-theme="gold"] #chatContainer[data-spread-form^="spread"] .spread-form-deck .onb-btn:focus,
#gptlike-chat[data-theme="gold"] #chatContainer[data-spread-form^="spread"] .spread-form-deck .onb-btn:focus-visible,
#gptlike-chat[data-theme="gold"] #chatContainer[data-spread-form^="spread"] .spread-form-deck .onb-btn:active,
#gptlike-chat[data-theme="gold"] #chatContainer[data-spread-form^="spread"] .spread-check-btn:hover,
#gptlike-chat[data-theme="gold"] #chatContainer[data-spread-form^="spread"] .spread-check-btn:focus,
#gptlike-chat[data-theme="gold"] #chatContainer[data-spread-form^="spread"] .spread-check-btn:focus-visible,
#gptlike-chat[data-theme="gold"] #chatContainer[data-spread-form^="spread"] .spread-check-btn:active,
#gptlike-chat[data-theme="dark"] #chatContainer:is([data-spread-ui="1"], [data-support-ui="1"]) .chat-spread-row .onb-btn:hover,
#gptlike-chat[data-theme="dark"] #chatContainer:is([data-spread-ui="1"], [data-support-ui="1"]) .chat-spread-row .onb-btn:focus,
#gptlike-chat[data-theme="dark"] #chatContainer:is([data-spread-ui="1"], [data-support-ui="1"]) .chat-spread-row .onb-btn:focus-visible,
#gptlike-chat[data-theme="dark"] #chatContainer:is([data-spread-ui="1"], [data-support-ui="1"]) .chat-spread-row .onb-btn:active,
#gptlike-chat[data-theme="dark"] #chatContainer[data-spread-form^="spread"] .spread-form-deck .onb-btn:hover,
#gptlike-chat[data-theme="dark"] #chatContainer[data-spread-form^="spread"] .spread-form-deck .onb-btn:focus,
#gptlike-chat[data-theme="dark"] #chatContainer[data-spread-form^="spread"] .spread-form-deck .onb-btn:focus-visible,
#gptlike-chat[data-theme="dark"] #chatContainer[data-spread-form^="spread"] .spread-form-deck .onb-btn:active,
#gptlike-chat[data-theme="dark"] #chatContainer[data-spread-form^="spread"] .spread-check-btn:hover,
#gptlike-chat[data-theme="dark"] #chatContainer[data-spread-form^="spread"] .spread-check-btn:focus,
#gptlike-chat[data-theme="dark"] #chatContainer[data-spread-form^="spread"] .spread-check-btn:focus-visible,
#gptlike-chat[data-theme="dark"] #chatContainer[data-spread-form^="spread"] .spread-check-btn:active {
  border-color: rgba(255, 184, 107, 0.34) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.38) !important;
}
#gptlike-chat #chatContainer .chat-lower {
  height: 100% !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) auto !important;
  padding: 10px 0 calc(12px + var(--keyboard-inset, 0px)) !important;
  gap: 10px !important;
  overflow: hidden !important;
}
#gptlike-chat #chatContainer .chat-body {
  min-height: 0 !important;
  height: auto !important;
  overflow: hidden !important;
}
#gptlike-chat #chatContainer[data-screen="chat"]{
  --chat-frame-radius: var(--app-corner);
  --chat-frame-bg: var(--chat-messages-bg);
  --chat-frame-border: rgba(110, 78, 32, 0.85);
  --chat-frame-shadow: inset 0 0 0 1px rgba(110, 78, 32, 0.28);
  --composer-icon-color: #ffb86b;
  --composer-frame-pad: 5px;
  --upload-icon-shadow-a: rgba(201, 168, 90, 0.55);
  --upload-icon-shadow-b: rgba(201, 168, 90, 0.35);
  --upload-icon-shadow-a-strong: rgba(201, 168, 90, 0.80);
  --upload-icon-shadow-b-strong: rgba(201, 168, 90, 0.50);
}
#gptlike-chat[data-theme-light="1"] #chatContainer[data-screen="chat"]{
  --chat-frame-bg: rgba(255, 255, 255, 0.90);
  --chat-frame-border: var(--gold-ui-border);
  --chat-frame-shadow: inset 0 0 0 1px var(--gold-ui-border);
}
#gptlike-chat[data-theme="dark"] #chatContainer[data-screen="chat"]{
  --chat-frame-border: rgba(110, 78, 32, 0.85);
  --chat-frame-shadow: inset 0 0 0 1px rgba(110, 78, 32, 0.28);
  --composer-icon-color: #ffb86b;
}
#gptlike-chat[data-theme="gold"] #chatContainer[data-screen="chat"]{
  --chat-frame-border: rgba(205, 170, 110, 0.58);
  --chat-frame-shadow: inset 0 0 0 1px rgba(205, 170, 110, 0.18);
  --composer-icon-color: #ffb86b;
  --upload-icon-shadow-a: rgba(224, 161, 58, 0.55);
  --upload-icon-shadow-b: rgba(224, 161, 58, 0.35);
  --upload-icon-shadow-a-strong: rgba(224, 161, 58, 0.85);
  --upload-icon-shadow-b-strong: rgba(224, 161, 58, 0.55);
}
#gptlike-chat[data-theme="white"] #chatContainer[data-screen="chat"]{
  --chat-frame-border: rgba(210, 186, 140, 0.54);
  --chat-frame-shadow: inset 0 0 0 1px rgba(210, 186, 140, 0.14);
  --composer-icon-color: #0f172a;
  --upload-icon-shadow-a: rgba(15, 23, 42, 0.24);
  --upload-icon-shadow-b: rgba(15, 23, 42, 0.16);
  --upload-icon-shadow-a-strong: rgba(15, 23, 42, 0.38);
  --upload-icon-shadow-b-strong: rgba(15, 23, 42, 0.22);
}

#gptlike-chat #chatContainer[data-screen="chat"] .messages {
  min-height: 0 !important;
  height: 100% !important;
  margin: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  border: 1px solid var(--chat-frame-border) !important;
  border-radius: var(--chat-frame-radius) !important;
  background: var(--chat-frame-bg) !important;
  box-shadow: var(--chat-frame-shadow) !important;
  clip-path: inset(0 round var(--chat-frame-radius));
}
#gptlike-chat #chatContainer[data-screen="chat"] .composer-wrapper {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}
#gptlike-chat #chatContainer[data-screen="chat"] .composer {
  align-items: stretch !important;
}
#gptlike-chat #chatContainer[data-screen="chat"] .composer .input {
  height: auto !important;
  align-self: stretch !important;
}
#gptlike-chat #chatContainer[data-screen="chat"] .composer .icon-only,
#gptlike-chat #chatContainer[data-screen="chat"] .composer .btn-primary,
#gptlike-chat #chatContainer[data-screen="chat"] .composer .btn-secondary {
  height: auto !important;
  min-height: clamp(40px, 5.4vh, 46px) !important;
  align-self: stretch !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Composer: buttons inside input outline, fixed size */
#gptlike-chat #chatContainer .composer {
  --composer-btn: clamp(34px, 4.2vh, 40px);
  padding: 4px !important;
  background: var(--composer-pill-bg) !important;
  border: 1px solid var(--composer-pill-border) !important;
  border-radius: 18px !important;
  box-shadow:
    inset 0 1px 0 var(--composer-pill-top),
    inset 0 -1px 0 var(--composer-pill-bottom) !important;
  gap: 8px !important;
  align-items: flex-end !important;
}
#gptlike-chat #chatContainer .composer::before {
  content: none !important;
  display: none !important;
}
#gptlike-chat #chatContainer .composer .icon-only,
#gptlike-chat #chatContainer .composer .btn-primary,
#gptlike-chat #chatContainer .composer .btn-secondary {
  width: var(--composer-btn) !important;
  height: var(--composer-btn) !important;
  min-width: var(--composer-btn) !important;
  min-height: var(--composer-btn) !important;
  flex: 0 0 var(--composer-btn) !important;
  border-radius: 999px !important;
  align-self: flex-end !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
#gptlike-chat #chatContainer .composer .icon-only svg {
  width: 20px !important;
  height: 20px !important;
}
#gptlike-chat #chatContainer .composer .input {
  border: 0 !important;
  border-radius: 12px !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 8px 10px !important;
  line-height: 1.25 !important;
}
#gptlike-chat[data-theme-light="1"] #chatContainer .composer .input {
  background: transparent !important;
}
 
@media (max-width: 640px) {
  #gptlike-chat #chatContainer .composer {
    --composer-btn: clamp(38px, 6vh, 44px);
  }
  #gptlike-chat #chatContainer .composer .icon-only svg {
    width: 22px !important;
    height: 22px !important;
  }
}

/* Disable single-line snapping to prevent jitter */
#gptlike-chat #chatContainer .input.is-single-line {
  height: auto !important;
  line-height: 1.25 !important;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}
#gptlike-chat #chatContainer .input.is-single-line::placeholder {
  line-height: 1.25 !important;
}

/* Chat composer: upload button separate, input frame matches chat window */
#gptlike-chat #chatContainer[data-screen="chat"] .composer {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  gap: 8px !important;
  overflow: visible !important;
  clip-path: none !important;
  align-items: flex-end !important;
}
#gptlike-chat #chatContainer[data-screen="chat"] .composer-frame {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  display: flex !important;
  align-items: flex-end !important;
  gap: 3px !important;
  background: var(--chat-frame-bg) !important;
  border: 1px solid var(--chat-frame-border) !important;
  border-radius: var(--chat-frame-radius) !important;
  box-shadow: var(--chat-frame-shadow) !important;
  padding: var(--composer-frame-pad) !important;
  overflow: hidden !important;
  clip-path: inset(0 round var(--chat-frame-radius));
}
#gptlike-chat #chatContainer[data-mode="support"] #uploadBtn {
  display: none !important;
}
#gptlike-chat #chatContainer[data-mode="support"] .composer-frame {
  flex: 1 1 auto !important;
  width: 100% !important;
}
#gptlike-chat #chatContainer[data-screen="chat"] #userInput.input {
  font-size: calc(var(--mobile-chat-base, clamp(14px, 0.95vw, 15px)) * var(--chatFontMul)) !important;
  font-weight: var(--chatFontWeight, 500) !important;
  min-height: var(--composer-btn) !important;
  line-height: var(--lh-relaxed, 1.65) !important;
  padding-top: calc((var(--composer-btn) - (1em * var(--lh-relaxed, 1.65))) / 2) !important;
  padding-bottom: calc((var(--composer-btn) - (1em * var(--lh-relaxed, 1.65))) / 2) !important;
  padding-left: 4px !important;
  padding-right: 4px !important;
}
#gptlike-chat #chatContainer[data-screen="chat"] #userInput.input::placeholder {
  font-size: inherit !important;
  line-height: inherit !important;
}

/* Spread 1 form inside chat */
#gptlike-chat #chatContainer .spread-form-card {
  display: none;
  align-self: stretch;
  width: 100%;
  flex: 1 1 auto;
  flex-direction: column;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--chat-frame-border) 70%, rgba(255, 255, 255, 0.12) 30%);
  background: linear-gradient(180deg, color-mix(in srgb, var(--chat-frame-bg) 92%, rgba(0, 0, 0, 0.4) 8%), color-mix(in srgb, var(--chat-frame-bg) 86%, rgba(0, 0, 0, 0.5) 14%));
  box-shadow: var(--chat-frame-shadow);
  padding: 14px;
  min-height: 0;
}
#gptlike-chat #chatContainer .spread-form-card.is-active {
  display: flex;
  border: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
  width: 100% !important;
  max-width: 100% !important;
  align-self: stretch;
}
#gptlike-chat #chatContainer .spread-form {
  width: 100%;
}
#gptlike-chat #chatContainer .spread-form-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
#gptlike-chat #chatContainer .spread-step {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
#gptlike-chat #chatContainer:is([data-spread-form="spread1"], [data-spread-form="spread2"], [data-spread-form="spread3"], [data-spread-form="spread4"], [data-spread-form="spread5"], [data-spread-form="spread6"], [data-spread-form="spread7"], [data-spread-form="spread8"], [data-spread-form="spread9"]) .spread-form-grid {
  gap: 10px;
}
#gptlike-chat #chatContainer:is([data-spread-form="spread1"], [data-spread-form="spread2"], [data-spread-form="spread3"], [data-spread-form="spread4"], [data-spread-form="spread5"], [data-spread-form="spread6"], [data-spread-form="spread7"], [data-spread-form="spread8"], [data-spread-form="spread9"]) .spread-step {
  gap: 10px;
}
#gptlike-chat #chatContainer:is([data-spread-form="spread1"], [data-spread-form="spread2"], [data-spread-form="spread3"], [data-spread-form="spread4"], [data-spread-form="spread5"], [data-spread-form="spread6"], [data-spread-form="spread7"], [data-spread-form="spread8"], [data-spread-form="spread9"]) .spread-form-row--dual .spread-form-label {
  display: none;
}
#gptlike-chat #chatContainer[data-spread-step="1"] .spread-step-2 {
  display: none !important;
}
#gptlike-chat #chatContainer[data-spread-step="2"] .spread-step-1 {
  display: none !important;
}
#gptlike-chat #chatContainer[data-spread3-step="1"] .spread3-step-2 {
  display: none !important;
}
#gptlike-chat #chatContainer[data-spread3-step="2"] .spread3-step-1 {
  display: none !important;
}
#gptlike-chat #chatContainer[data-spread4-step="1"] .spread4-step-2 {
  display: none !important;
}
#gptlike-chat #chatContainer[data-spread4-step="2"] .spread4-step-1 {
  display: none !important;
}
#gptlike-chat #chatContainer[data-spread5-step="1"] .spread5-step-2 {
  display: none !important;
}
#gptlike-chat #chatContainer[data-spread5-step="2"] .spread5-step-1 {
  display: none !important;
}
#gptlike-chat #chatContainer[data-spread6-step="1"] .spread6-step-2 {
  display: none !important;
}
#gptlike-chat #chatContainer[data-spread6-step="2"] .spread6-step-1 {
  display: none !important;
}
#gptlike-chat #chatContainer[data-spread7-step="1"] .spread7-step-2 {
  display: none !important;
}
#gptlike-chat #chatContainer[data-spread7-step="2"] .spread7-step-1 {
  display: none !important;
}
#gptlike-chat #chatContainer[data-spread8-step="1"] .spread8-step-2 {
  display: none !important;
}
#gptlike-chat #chatContainer[data-spread8-step="2"] .spread8-step-1 {
  display: none !important;
}
#gptlike-chat #chatContainer[data-spread9-step="1"] .spread9-step-2 {
  display: none !important;
}
#gptlike-chat #chatContainer[data-spread9-step="2"] .spread9-step-1 {
  display: none !important;
}
#gptlike-chat #chatContainer .spread-form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
#gptlike-chat #chatContainer[data-spread-form="spread3"] .spread-form-bottom-spacer {
  height: 24px;
  flex: 0 0 24px;
}
#gptlike-chat #chatContainer .spread-form-label {
  font-size: var(--fs-md);
  color: var(--ui-text-soft);
}
#gptlike-chat #chatContainer .spread-input-wrap {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  display: block;
  width: 100%;
}
#gptlike-chat #chatContainer .spread-input-wrap--question {
  border: 1px solid color-mix(in srgb, var(--chat-frame-border) 55%, rgba(255, 255, 255, 0.12) 45%);
  background: color-mix(in srgb, var(--chat-frame-bg) 80%, rgba(0, 0, 0, 0.4) 20%);
  border-radius: 10px;
  padding: 0;
  overflow: hidden;
}
#gptlike-chat #chatContainer .spread-input-wrap--question .spread-form-input {
  border: 0;
  background: transparent;
  box-shadow: none;
  padding: 10px 34px 10px 12px;
  border-radius: 0;
}
#gptlike-chat #chatContainer .spread-input-wrap--question .spread-form-input:focus {
  box-shadow: none;
}
#gptlike-chat #chatContainer .spread-input-wrap--question .spread-check-btn {
  width: 100%;
  height: clamp(34px, 5.2dvh, 42px);
  margin: 0;
  padding-block: 0;
  border-radius: 0 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: none;
  font-weight: 400;
}
#gptlike-chat #chatContainer .spread-input-wrap--question .spread-check-btn::before,
#gptlike-chat #chatContainer .spread-input-wrap--question .spread-check-btn::after {
  border-radius: 0 !important;
}
#gptlike-chat #chatContainer[data-spread-form^="spread"] .spread-check-btn.is-loading {
  cursor: progress;
  opacity: 0.92;
}
#gptlike-chat #chatContainer .spread-input-status {
  position: absolute;
  right: 8px;
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-left: 8px;
  border-left: 1px solid rgba(255, 255, 255, 0.16);
  color: rgba(160, 170, 185, 0.55);
  pointer-events: none;
}
#gptlike-chat #chatContainer[data-spread-form^="spread"] .spread-input-status {
  border-left: 0;
  padding-left: 0;
  width: 22px;
  min-width: 22px;
}
#gptlike-chat #chatContainer[data-spread-form^="spread"] .spread-input-status svg {
  width: 20px;
  height: 20px;
}
#gptlike-chat #chatContainer .spread-input-status svg {
  width: 18px;
  height: 18px;
}
#gptlike-chat #chatContainer .spread-form-input--name + .spread-input-status {
  top: 50%;
  bottom: auto;
}
#gptlike-chat #chatContainer .spread-input-wrap--question .spread-input-status {
  top: 10px;
  bottom: auto;
  right: 10px;
  transform: none;
}
#gptlike-chat #chatContainer .spread-form-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
#gptlike-chat #chatContainer .spread-form-field--advice {
  position: relative;
  gap: 0;
}
#gptlike-chat #chatContainer .spread-form-field--advice .spread-form-label-row {
  height: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow: visible;
  justify-content: flex-start;
  gap: 6px;
}
#gptlike-chat #chatContainer .spread-advice-spinner {
  width: 18px;
  height: 18px;
  position: absolute;
  top: 8px;
  right: 10px;
  border-radius: 999px;
  background: center/contain no-repeat;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e0a13a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M16.5 6.5a6 6 0 1 0 1.7 4.2'/><path d='M16.5 6.5V3.8'/><path d='M16.5 6.5h2.7'/></svg>");
  filter: drop-shadow(0 0 6px rgba(224, 161, 58, 0.65));
  opacity: 0;
  animation: spreadAdviceSpin 0.9s linear infinite;
  animation-play-state: paused;
}
#gptlike-chat #chatContainer .spread-form-field--advice.is-loading .spread-advice-spinner {
  opacity: 1;
  animation-play-state: running;
}
@keyframes spreadAdviceSpin {
  to { transform: rotate(360deg); }
}
#gptlike-chat #chatContainer .spread-input-wrap select + .spread-input-status {
  right: 30px;
}
#gptlike-chat #chatContainer[data-spread-form^="spread"] .spread-input-wrap select + .spread-input-status {
  right: 8px;
}
#gptlike-chat #chatContainer .spread-input-wrap.is-filled .spread-input-status {
  color: #38d07a;
  border-left-color: rgba(56, 208, 122, 0.35);
}
#gptlike-chat #chatContainer .spread-input-wrap.is-valid .spread-input-status {
  color: #38ff86;
  border-left-color: rgba(56, 255, 134, 0.45);
  text-shadow:
    0 0 6px rgba(255, 255, 255, 0.85),
    0 0 12px rgba(255, 255, 255, 0.45);
}
#gptlike-chat #chatContainer .spread-input-wrap.is-invalid .spread-input-status {
  color: #ff4b4b;
  border-left-color: rgba(255, 75, 75, 0.55);
  text-shadow:
    0 0 6px rgba(255, 255, 255, 0.85),
    0 0 12px rgba(255, 255, 255, 0.45);
}
#gptlike-chat #chatContainer .spread-input-wrap.is-valid .spread-input-status svg {
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.85)) drop-shadow(0 0 10px rgba(255, 255, 255, 0.45));
}
#gptlike-chat #chatContainer .spread-input-wrap.is-valid .spread-input-status svg path {
  stroke-width: 3.6;
}
#gptlike-chat #chatContainer .spread-input-wrap.is-invalid .spread-input-status {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff4b4b' stroke-width='3.8' stroke-linecap='round' stroke-linejoin='round'><path d='M6 6l12 12M18 6L6 18'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px 20px;
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.85)) drop-shadow(0 0 10px rgba(255, 255, 255, 0.45));
}
#gptlike-chat #chatContainer .spread-input-wrap.is-invalid .spread-input-status svg {
  opacity: 0;
}
#gptlike-chat #chatContainer .spread-form-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
#gptlike-chat #chatContainer .spread-form-field--arcana .spread-form-row {
  align-items: stretch;
}
#gptlike-chat #chatContainer .spread-form-field--arcana .spread-input-wrap {
  display: flex;
  align-self: stretch;
}
#gptlike-chat #chatContainer .spread-form-field--arcana .spread-form-input {
  height: 100%;
}
#gptlike-chat #chatContainer .spread-form-field--arcana .arcana-upload-btn {
  height: auto;
  min-height: 0;
  align-self: stretch;
  padding: 0;
}
#gptlike-chat #chatContainer .arcana-suggest {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  z-index: 40;
  display: none;
  padding: 6px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--chat-frame-border) 62%, rgba(255, 255, 255, 0.12) 38%);
  background: color-mix(in srgb, var(--chat-frame-bg) 92%, rgba(0, 0, 0, 0.4) 8%);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.28);
  max-height: 220px;
  overflow-y: auto;
}
#gptlike-chat #chatContainer .arcana-suggest.is-open {
  display: block;
}
#gptlike-chat #chatContainer .arcana-suggest-item {
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--ui-text-main);
  text-align: left;
  padding: 8px 10px;
  border-radius: 10px;
  cursor: pointer;
  font-size: var(--fs-md);
  line-height: var(--lh-base);
}
#gptlike-chat #chatContainer .arcana-suggest-item:hover,
#gptlike-chat #chatContainer .arcana-suggest-item.is-active {
  background: color-mix(in srgb, var(--chat-frame-bg) 70%, rgba(255, 255, 255, 0.18) 30%);
}
#gptlike-chat #chatContainer .spread-deck-hint {
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
  color: var(--ui-text-soft);
  margin-bottom: 6px;
}
#gptlike-chat #chatContainer .spread-form-deck {
  display: flex;
}
#gptlike-chat #chatContainer .spread-form-deck .onb-btn {
  width: 100%;
}
#gptlike-chat #chatContainer .spread-form-row--dual {
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 12px;
}
#gptlike-chat #chatContainer .spread-form-row--dual .spread-form-field {
  flex: 1 1 0;
  min-width: 0;
}
#gptlike-chat #chatContainer .arcana-upload-btn {
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--chat-frame-border) 55%, rgba(255, 255, 255, 0.12) 45%);
  background: color-mix(in srgb, var(--chat-frame-bg) 88%, rgba(0, 0, 0, 0.4) 12%);
  color: var(--composer-icon-color);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 34px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
#gptlike-chat #chatContainer .arcana-upload-btn svg {
  width: 18px;
  height: 18px;
}
#gptlike-chat #chatContainer .spread-form-input {
  width: 100%;
  padding: 12px 14px;
  padding-right: 64px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--chat-frame-border) 55%, rgba(255, 255, 255, 0.12) 45%);
  background: color-mix(in srgb, var(--chat-frame-bg) 80%, rgba(0, 0, 0, 0.4) 20%);
  color: var(--ui-text-main);
  font-size: var(--fs-md);
  line-height: var(--lh-base);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition: border-color 0.18s, box-shadow 0.18s, background 0.18s;
  user-select: text;
  -webkit-user-select: text;
}
#gptlike-chat #chatContainer .spread-form-input::placeholder {
  color: rgba(140, 150, 165, 0.7);
}
#gptlike-chat #chatContainer .spread-form-input--name {
  height: 40px;
  min-height: 40px;
  padding-top: 8px;
  padding-bottom: 8px;
}
#gptlike-chat #chatContainer .spread-form-input:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--chat-frame-border) 75%, rgba(255, 255, 255, 0.2) 25%);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.08);
}
#gptlike-chat #chatContainer .spread-form-textarea {
  min-height: calc(1em * var(--lh-base) * 3 + 24px);
  max-height: calc(1em * var(--lh-base) * 3 + 24px);
  resize: none;
}
#gptlike-chat #chatContainer .spread-form-textarea--question {
  min-height: calc(1em * var(--lh-base) * 3 + 6px);
  max-height: calc(1em * var(--lh-base) * 3 + 6px);
}
#gptlike-chat #chatContainer .spread-form-advice {
  padding-right: 14px;
  min-height: calc(1em * var(--lh-base) * 4 + 28px);
  max-height: calc(1em * var(--lh-base) * 4 + 28px);
  resize: none;
  overflow-y: auto;
}
#gptlike-chat #chatContainer[data-spread-form="spread8"] .spread-form-textarea--question {
  min-height: calc(1em * var(--lh-base) * 5 + 6px);
  max-height: calc(1em * var(--lh-base) * 5 + 6px);
}
#gptlike-chat #chatContainer[data-spread-form="spread8"] .spread-form-advice {
  min-height: calc(1em * var(--lh-base) * 2 + 28px);
  max-height: calc(1em * var(--lh-base) * 2 + 28px);
}
#gptlike-chat #chatContainer[data-spread-form^="spread"] select.spread-form-input {
  -webkit-appearance: none;
  appearance: none;
  height: 40px;
  min-height: 40px;
  padding-top: 8px;
  padding-bottom: 8px;
  padding-right: 64px;
  border-radius: 10px !important;
  background: color-mix(in srgb, var(--chat-frame-bg) 80%, rgba(0, 0, 0, 0.4) 20%) !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6' stroke='%23f5f6f7' stroke-width='3.2'/><path d='M6 9l6 6 6-6' stroke='%238a6b2d' stroke-width='1.8'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: calc(100% - 48px) center !important;
  background-size: 16px 16px !important;
  color: var(--ui-text-main) !important;
  border-color: color-mix(in srgb, var(--chat-frame-border) 55%, rgba(255, 255, 255, 0.12) 45%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}
#gptlike-chat #chatContainer .spread-input-wrap.is-empty select.spread-form-input {
  color: rgba(140, 150, 165, 0.7) !important;
}

/* Spread 1 send button instead of composer */
#gptlike-chat #chatContainer .chat-spread-row--send {
  display: none !important;
  margin: 0;
  padding: 0 var(--content-edge-x);
  height: clamp(44px, 7dvh, 56px);
  width: 100%;
  align-items: stretch;
  justify-content: center;
  gap: 10px;
}
#gptlike-chat #chatContainer[data-spread-ui="1"] .chat-spread-row--send {
  display: none;
}
#gptlike-chat #chatContainer .chat-spread-row--send.is-active {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
#chatContainer:is([data-spread-form="spread2"], [data-spread-form="spread3"], [data-spread-form="spread4"], [data-spread-form="spread5"], [data-spread-form="spread6"], [data-spread-form="spread7"], [data-spread-form="spread8"], [data-spread-form="spread9"]) .messages {
  align-items: stretch;
}
#chatContainer:is([data-spread-form="spread2"], [data-spread-form="spread3"], [data-spread-form="spread4"], [data-spread-form="spread5"], [data-spread-form="spread6"], [data-spread-form="spread7"], [data-spread-form="spread8"], [data-spread-form="spread9"]) .chat-shell,
#chatContainer:is([data-spread-form="spread2"], [data-spread-form="spread3"], [data-spread-form="spread4"], [data-spread-form="spread5"], [data-spread-form="spread6"], [data-spread-form="spread7"], [data-spread-form="spread8"], [data-spread-form="spread9"]) .chat-body,
#chatContainer:is([data-spread-form="spread2"], [data-spread-form="spread3"], [data-spread-form="spread4"], [data-spread-form="spread5"], [data-spread-form="spread6"], [data-spread-form="spread7"], [data-spread-form="spread8"], [data-spread-form="spread9"]) .messages {
  width: 100% !important;
  max-width: 100% !important;
}
#chatContainer:is([data-spread-form="spread2"], [data-spread-form="spread3"], [data-spread-form="spread4"], [data-spread-form="spread5"], [data-spread-form="spread6"], [data-spread-form="spread7"], [data-spread-form="spread8"], [data-spread-form="spread9"]) .messages > .message {
  width: 100%;
  max-width: 100%;
  align-self: stretch;
}
#chatContainer:is([data-spread-form="spread2"], [data-spread-form="spread3"], [data-spread-form="spread4"], [data-spread-form="spread5"], [data-spread-form="spread6"], [data-spread-form="spread7"], [data-spread-form="spread8"], [data-spread-form="spread9"]) .messages > .spread-form-card {
  width: 100%;
  max-width: 100%;
}
#gptlike-chat #chatContainer[data-spread-form^="spread"] .chat-lower {
  padding: 0 !important;
  gap: 0 !important;
}
#gptlike-chat #chatContainer[data-spread-form^="spread"] .chat-spread-row--actions,
#gptlike-chat #chatContainer[data-spread-form^="spread"] .chat-spread-row--send {
  align-items: center !important;
  padding-inline: 14px !important;
}
#gptlike-chat #chatContainer[data-spread-form^="spread"] .chat-spread-row--actions .onb-btn {
  height: 100% !important;
  max-height: clamp(32px, 5.2dvh, 40px) !important;
}
#gptlike-chat #chatContainer[data-spread-form^="spread"] .chat-spread-row--actions .onb-btn,
#gptlike-chat #chatContainer[data-spread-form^="spread"] .chat-spread-row--send .onb-btn,
#gptlike-chat #chatContainer[data-spread-form^="spread"] .spread-form-deck .onb-btn {
  height: clamp(36px, 5.5dvh, 44px) !important;
  margin-block: 0 !important;
}
#gptlike-chat #chatContainer[data-spread-form^="spread"] .spread-interpret-btn.is-disabled {
  opacity: 0.6;
  filter: saturate(0.7);
  cursor: not-allowed;
}
#gptlike-chat #chatContainer[data-spread-form^="spread"] .spread-form-deck .onb-btn {
  justify-content: center !important;
  text-align: center !important;
  padding-inline: 14px !important;
  font-size: clamp(12px, 2.1vw, 15px);
  letter-spacing: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#gptlike-chat #chatContainer[data-spread-form^="spread"] .spread-form-deck .onb-btn-label {
  display: block;
  width: 100%;
  max-width: none;
  margin: 0;
  text-align: center;
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#gptlike-chat #chatContainer[data-spread-form^="spread"] .spread-form-deck {
  margin-bottom: 8px;
}
#gptlike-chat #chatContainer .chat-spread-row--send .onb-btn {
  height: 100% !important;
  margin-block: 0 !important;
  width: 100% !important;
}
#gptlike-chat #chatContainer[data-spread-step="1"] .spread-back-btn,
#gptlike-chat #chatContainer[data-spread-step="1"] .spread-interpret-btn {
  display: none !important;
}
#gptlike-chat #chatContainer[data-spread-step="2"] .spread-clear-btn {
  display: none !important;
}
#gptlike-chat #chatContainer[data-spread-step="2"] .spread-next-btn {
  display: none !important;
}
#gptlike-chat #chatContainer[data-spread3-step="1"] .chat-spread-row--send[data-spread-send="spread3"] .spread-back-btn,
#gptlike-chat #chatContainer[data-spread3-step="1"] .chat-spread-row--send[data-spread-send="spread3"] .spread-interpret-btn {
  display: none !important;
}
#gptlike-chat #chatContainer[data-spread3-step="2"] .chat-spread-row--send[data-spread-send="spread3"] .spread-clear-btn,
#gptlike-chat #chatContainer[data-spread3-step="2"] .chat-spread-row--send[data-spread-send="spread3"] .spread-next-btn {
  display: none !important;
}
#gptlike-chat #chatContainer[data-spread4-step="1"] .chat-spread-row--send[data-spread-send="spread4"] .spread-back-btn,
#gptlike-chat #chatContainer[data-spread4-step="1"] .chat-spread-row--send[data-spread-send="spread4"] .spread-interpret-btn {
  display: none !important;
}
#gptlike-chat #chatContainer[data-spread4-step="2"] .chat-spread-row--send[data-spread-send="spread4"] .spread-clear-btn,
#gptlike-chat #chatContainer[data-spread4-step="2"] .chat-spread-row--send[data-spread-send="spread4"] .spread-next-btn {
  display: none !important;
}
#gptlike-chat #chatContainer[data-spread5-step="1"] .chat-spread-row--send[data-spread-send="spread5"] .spread-back-btn,
#gptlike-chat #chatContainer[data-spread5-step="1"] .chat-spread-row--send[data-spread-send="spread5"] .spread-interpret-btn {
  display: none !important;
}
#gptlike-chat #chatContainer[data-spread5-step="2"] .chat-spread-row--send[data-spread-send="spread5"] .spread-clear-btn,
#gptlike-chat #chatContainer[data-spread5-step="2"] .chat-spread-row--send[data-spread-send="spread5"] .spread-next-btn {
  display: none !important;
}
#gptlike-chat #chatContainer[data-spread6-step="1"] .chat-spread-row--send[data-spread-send="spread6"] .spread-back-btn,
#gptlike-chat #chatContainer[data-spread6-step="1"] .chat-spread-row--send[data-spread-send="spread6"] .spread-interpret-btn {
  display: none !important;
}
#gptlike-chat #chatContainer[data-spread6-step="2"] .chat-spread-row--send[data-spread-send="spread6"] .spread-clear-btn,
#gptlike-chat #chatContainer[data-spread6-step="2"] .chat-spread-row--send[data-spread-send="spread6"] .spread-next-btn {
  display: none !important;
}
#gptlike-chat #chatContainer[data-spread7-step="1"] .chat-spread-row--send[data-spread-send="spread7"] .spread-back-btn,
#gptlike-chat #chatContainer[data-spread7-step="1"] .chat-spread-row--send[data-spread-send="spread7"] .spread-interpret-btn {
  display: none !important;
}
#gptlike-chat #chatContainer[data-spread7-step="2"] .chat-spread-row--send[data-spread-send="spread7"] .spread-clear-btn,
#gptlike-chat #chatContainer[data-spread7-step="2"] .chat-spread-row--send[data-spread-send="spread7"] .spread-next-btn {
  display: none !important;
}
#gptlike-chat #chatContainer[data-spread8-step="1"] .chat-spread-row--send[data-spread-send="spread8"] .spread-back-btn,
#gptlike-chat #chatContainer[data-spread8-step="1"] .chat-spread-row--send[data-spread-send="spread8"] .spread-interpret-btn {
  display: none !important;
}
#gptlike-chat #chatContainer[data-spread8-step="2"] .chat-spread-row--send[data-spread-send="spread8"] .spread-clear-btn,
#gptlike-chat #chatContainer[data-spread8-step="2"] .chat-spread-row--send[data-spread-send="spread8"] .spread-next-btn {
  display: none !important;
}
#gptlike-chat #chatContainer[data-spread9-step="1"] .chat-spread-row--send[data-spread-send="spread9"] .spread-back-btn,
#gptlike-chat #chatContainer[data-spread9-step="1"] .chat-spread-row--send[data-spread-send="spread9"] .spread-interpret-btn {
  display: none !important;
}
#gptlike-chat #chatContainer[data-spread9-step="2"] .chat-spread-row--send[data-spread-send="spread9"] .spread-clear-btn,
#gptlike-chat #chatContainer[data-spread9-step="2"] .chat-spread-row--send[data-spread-send="spread9"] .spread-next-btn {
  display: none !important;
}
#gptlike-chat #chatContainer[data-spread-form^="spread"] .composer-wrapper {
  display: none !important;
}
#gptlike-chat #chatContainer[data-spread-form^="spread"] .messages {
  gap: 0 !important;
  padding: 12px 14px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
}
#gptlike-chat #chatContainer[data-spread-form^="spread"] .messages > .message:not(.spread-form-card) {
  display: none !important;
}
#gptlike-chat #chatContainer[data-spread-form^="spread"] .spread-form-card {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
}
#gptlike-chat #chatContainer[data-spread-form="spread1"] .spread-form {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
}
#gptlike-chat #chatContainer[data-spread-form^="spread"] .spread-form {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
}
#gptlike-chat #chatContainer[data-spread-form^="spread"] .spread-form-grid,
#gptlike-chat #chatContainer[data-spread-form="spread1"] .spread-step-1,
#gptlike-chat #chatContainer[data-spread-form="spread2"] .spread-step-1,
#gptlike-chat #chatContainer[data-spread-form="spread3"] .spread3-step-1,
#gptlike-chat #chatContainer[data-spread-form="spread4"] .spread4-step-1,
#gptlike-chat #chatContainer[data-spread-form="spread5"] .spread5-step-1,
#gptlike-chat #chatContainer[data-spread-form="spread6"] .spread6-step-1,
#gptlike-chat #chatContainer[data-spread-form="spread7"] .spread7-step-1,
#gptlike-chat #chatContainer[data-spread-form="spread8"] .spread8-step-1,
#gptlike-chat #chatContainer[data-spread-form="spread9"] .spread9-step-1 {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
}
#gptlike-chat #chatContainer[data-spread-form^="spread"] .spread-form-field--advice {
  margin-top: 0;
  flex: 1 1 auto;
  min-height: 0;
}
#gptlike-chat #chatContainer[data-spread-form^="spread"] .spread-form-field--advice .spread-form-advice {
  flex: 1 1 auto;
  height: 100%;
  min-height: 0;
  max-height: none;
}

/* Spread 1 incomplete modal */
.spread-incomplete-backdrop {
  display: none;
}
.spread-incomplete-modal {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  background: transparent;
  border: 0;
  box-shadow: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  position: relative;
}
.spread-incomplete-close {
  position: absolute;
  top: calc(var(--screen-edge-top) + 6px);
  right: calc(var(--screen-edge-x) + 6px);
  z-index: 2;
}
.spread-incomplete-content {
  max-width: min(520px, 92vw);
  padding: 22px 20px;
  border-radius: 16px;
  text-align: center;
  background: linear-gradient(180deg, color-mix(in srgb, var(--chat-frame-bg) 92%, rgba(0, 0, 0, 0.4) 8%), color-mix(in srgb, var(--chat-frame-bg) 86%, rgba(0, 0, 0, 0.5) 14%));
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: var(--shadow-3);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.spread-incomplete-text {
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
  color: var(--ui-text-main);
}
.spread-incomplete-check {
  position: relative;
  width: 72px;
  height: 72px;
}
.spread-incomplete-check svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.spread-incomplete-check .check-base {
  color: rgba(160, 170, 185, 0.55);
}
.spread-incomplete-check .check-anim {
  color: #38ff86;
  stroke-dasharray: 80;
  stroke-dashoffset: 80;
  animation: spreadCheckDraw 1.4s ease-in-out infinite;
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.7));
}
@keyframes spreadCheckDraw {
  0% { stroke-dashoffset: 80; opacity: 0; }
  25% { opacity: 1; }
  60% { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}
#gptlike-chat #chatContainer[data-spread-form^="spread"] #chatClearBtn,
#gptlike-chat #chatContainer[data-spread-form^="spread"] #postsMarkReadBtn {
  display: none !important;
}

/* Chat composer buttons: fixed size, pinned to bottom */
#gptlike-chat #chatContainer[data-screen="chat"] .composer .icon-only,
#gptlike-chat #chatContainer[data-screen="chat"] .composer .btn-primary,
#gptlike-chat #chatContainer[data-screen="chat"] .composer .btn-secondary {
  width: var(--composer-btn) !important;
  height: var(--composer-btn) !important;
  min-width: var(--composer-btn) !important;
  min-height: var(--composer-btn) !important;
  flex: 0 0 var(--composer-btn) !important;
  align-self: flex-end !important;
}

/* Chat composer buttons: icon-only */
#gptlike-chat #chatContainer[data-screen="chat"] #sendBtn,
#gptlike-chat #chatContainer[data-screen="chat"] #uploadBtn {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  color: var(--composer-icon-color) !important;
}
#gptlike-chat #chatContainer[data-screen="chat"] #uploadBtn {
  margin-bottom: calc(var(--composer-frame-pad) + 2px) !important;
}

#gptlike-chat #chatContainer[data-screen="chat"] #sendBtn svg,
#gptlike-chat #chatContainer[data-screen="chat"] #uploadBtn svg {
  color: inherit !important;
  width: 28px !important;
  height: 28px !important;
}
#gptlike-chat #chatContainer[data-screen="chat"] #uploadBtn svg {
  filter:
    drop-shadow(0 0 6px var(--upload-icon-shadow-a))
    drop-shadow(0 0 18px var(--upload-icon-shadow-b));
}
#gptlike-chat #chatContainer[data-screen="chat"] #uploadBtn:hover svg,
#gptlike-chat #chatContainer[data-screen="chat"] #uploadBtn:focus-visible svg {
  filter:
    drop-shadow(0 0 10px var(--upload-icon-shadow-a-strong))
    drop-shadow(0 0 28px var(--upload-icon-shadow-b-strong));
}

/* White-gold theme: make icons clearly gold (not brown) */
#gptlike-chat[data-theme="gold"] #chatContainer[data-screen="chat"] #sendBtn svg,
#gptlike-chat[data-theme="gold"] #chatContainer[data-screen="chat"] #uploadBtn svg,
#gptlike-chat[data-theme="dark"] #chatContainer[data-screen="chat"] #sendBtn svg,
#gptlike-chat[data-theme="dark"] #chatContainer[data-screen="chat"] #uploadBtn svg {
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.22));
}
@media (max-width: 640px) {
  #gptlike-chat #chatContainer[data-screen="chat"] #sendBtn svg,
  #gptlike-chat #chatContainer[data-screen="chat"] #uploadBtn svg {
    width: 30px !important;
    height: 30px !important;
  }
}

/* Chat topbar: keep scenario title on a single line (auto-fit via JS) */
#gptlike-chat #chatContainer[data-screen="chat"] .chat-scenario-title {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: clip !important;
  min-width: 0 !important;
}

/* Posts: open a newsletter as a dedicated detail screen */
#gptlike-chat #postsBackTopBtn {
  display: none !important;
}

#gptlike-chat #chatContainer:is([data-screen="posts"][data-posts-view="detail"], [data-support-view="detail"], [data-screen="instruction"][data-instruction-view="detail"], [data-screen="posts"][data-spread-quota-view="detail"]) .chat-shell {
  border: 0 !important;
  border-radius: 0 !important;
  grid-template-rows: clamp(56px, 10%, 96px) minmax(0, 1fr) !important;
}
#gptlike-chat #chatContainer[data-spread1-view="detail"] .chat-spread-row,
#gptlike-chat #chatContainer[data-spread2-view="detail"] .chat-spread-row,
#gptlike-chat #chatContainer[data-spread3-view="detail"] .chat-spread-row,
#gptlike-chat #chatContainer[data-spread4-view="detail"] .chat-spread-row,
#gptlike-chat #chatContainer[data-spread5-view="detail"] .chat-spread-row,
#gptlike-chat #chatContainer[data-spread6-view="detail"] .chat-spread-row,
#gptlike-chat #chatContainer[data-spread7-view="detail"] .chat-spread-row,
#gptlike-chat #chatContainer[data-spread8-view="detail"] .chat-spread-row,
#gptlike-chat #chatContainer[data-spread9-view="detail"] .chat-spread-row {
  display: none !important;
}
#gptlike-chat #chatContainer:is([data-screen="posts"][data-posts-view="detail"], [data-support-view="detail"], [data-screen="instruction"][data-instruction-view="detail"], [data-screen="posts"][data-spread-quota-view="detail"]) .chat-lower {
  grid-row: 2 !important;
}

#gptlike-chat #chatContainer:is([data-screen="posts"][data-posts-view="detail"], [data-screen="instruction"][data-instruction-view="detail"], [data-screen="posts"][data-spread-quota-view="detail"]) .messages {
  margin: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
  overflow: hidden !important;
  box-shadow: none !important;
  background: transparent !important;
}

#gptlike-chat #chatContainer:is([data-screen="posts"][data-posts-view="detail"], [data-support-view="detail"], [data-screen="instruction"][data-instruction-view="detail"], [data-screen="posts"][data-spread-quota-view="detail"]) .message.posts-detail {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  align-self: stretch;
  margin: 0 !important;
  padding: 0 !important;
  display: grid;
  grid-template-rows: minmax(0, 1fr) minmax(64px, 10dvh);
}

/* Readings detail: no action bar, so use full height for the text panel */
#gptlike-chat #chatContainer[data-readings-view="detail"] .message.readings-detail {
  grid-template-rows: minmax(44px, 7dvh) minmax(0, 1fr) !important;
}
#gptlike-chat #chatContainer[data-readings-view="detail"] .message.readings-detail .posts-detail-body {
  grid-row: 2 / -1;
}
#gptlike-chat #chatContainer[data-readings-view="detail"] .readings-detail-actions {
  grid-row: 1 / 2;
  display: flex;
  align-items: stretch;
  justify-content: center;
  width: 100%;
  height: clamp(44px, 7dvh, 56px);
  min-height: clamp(44px, 7dvh, 56px);
  margin: 0 0 10px;
  padding: 0;
  box-sizing: border-box;
}
#gptlike-chat #chatContainer[data-readings-view="detail"] .readings-detail-actions .onb-btn {
  height: calc(100% - 6px) !important;
  margin-block: 3px;
  min-height: 0 !important;
  justify-content: center !important;
  text-align: center !important;
  padding-inline: 14px !important;
  position: relative;
  z-index: 1;
  font-size: clamp(12px, 2.1vw, 15px);
  letter-spacing: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#gptlike-chat #chatContainer[data-readings-view="detail"] .readings-detail-actions .onb-btn {
  background:
    radial-gradient(120px 60px at 20% 25%, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 60%),
    linear-gradient(90deg, var(--accent-1), var(--accent-2)) !important;
  color: var(--btn-text, #ffffff) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow:
    0 10px 22px rgba(0, 0, 0, 0.26),
    0 0 0 1px rgba(255, 255, 255, 0.06) inset !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}
#gptlike-chat #chatContainer[data-readings-view="detail"] .readings-detail-actions .onb-btn:hover,
#gptlike-chat #chatContainer[data-readings-view="detail"] .readings-detail-actions .onb-btn:focus,
#gptlike-chat #chatContainer[data-readings-view="detail"] .readings-detail-actions .onb-btn:focus-visible,
#gptlike-chat #chatContainer[data-readings-view="detail"] .readings-detail-actions .onb-btn:active {
  filter: brightness(1.05);
}
#gptlike-chat[data-theme="dark"] #chatContainer[data-readings-view="detail"] .readings-detail-actions .onb-btn {
  background: linear-gradient(160deg, rgba(6, 9, 14, 0.98), rgba(5, 7, 12, 0.96) 58%, rgba(4, 6, 10, 0.98)) !important;
  border: 1px solid rgba(110, 78, 32, 0.72) !important;
  box-shadow: inset 0 1px 0 rgba(110, 78, 32, 0.18) !important;
  color: #e4ebf4 !important;
}
#gptlike-chat[data-theme="dark"] #chatContainer[data-readings-view="detail"] .readings-detail-actions .onb-btn:hover,
#gptlike-chat[data-theme="dark"] #chatContainer[data-readings-view="detail"] .readings-detail-actions .onb-btn:focus,
#gptlike-chat[data-theme="dark"] #chatContainer[data-readings-view="detail"] .readings-detail-actions .onb-btn:focus-visible,
#gptlike-chat[data-theme="dark"] #chatContainer[data-readings-view="detail"] .readings-detail-actions .onb-btn:active {
  border-color: rgba(124, 90, 40, 0.86) !important;
  box-shadow: inset 0 1px 0 rgba(124, 90, 40, 0.22) !important;
  filter: none !important;
}
#gptlike-chat[data-theme="white"] #chatContainer[data-readings-view="detail"] .readings-detail-actions .onb-btn {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 249, 251, 0.94)) !important;
  color: #111827 !important;
  border: 1px solid rgba(36, 46, 58, 0.14) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78) !important;
}
#gptlike-chat[data-theme="white"] #chatContainer[data-readings-view="detail"] .readings-detail-actions .onb-btn:hover,
#gptlike-chat[data-theme="white"] #chatContainer[data-readings-view="detail"] .readings-detail-actions .onb-btn:focus,
#gptlike-chat[data-theme="white"] #chatContainer[data-readings-view="detail"] .readings-detail-actions .onb-btn:focus-visible,
#gptlike-chat[data-theme="white"] #chatContainer[data-readings-view="detail"] .readings-detail-actions .onb-btn:active {
  border-color: rgba(36, 46, 58, 0.18) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82) !important;
}
#gptlike-chat[data-theme="gold"] #chatContainer[data-readings-view="detail"] .readings-detail-actions .onb-btn,
#gptlike-chat[data-theme="dark"] #chatContainer[data-readings-view="detail"] .readings-detail-actions .onb-btn {
  background: linear-gradient(155deg, rgba(255, 184, 107, 0.90), rgba(255, 184, 107, 0.86), rgba(255, 184, 107, 0.84)) !important;
  border: 1px solid rgba(255, 184, 107, 0.28) !important;
  color: #3a2a10 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
}
#gptlike-chat[data-theme="gold"] #chatContainer[data-readings-view="detail"] .readings-detail-actions .onb-btn:hover,
#gptlike-chat[data-theme="gold"] #chatContainer[data-readings-view="detail"] .readings-detail-actions .onb-btn:focus,
#gptlike-chat[data-theme="gold"] #chatContainer[data-readings-view="detail"] .readings-detail-actions .onb-btn:focus-visible,
#gptlike-chat[data-theme="gold"] #chatContainer[data-readings-view="detail"] .readings-detail-actions .onb-btn:active,
#gptlike-chat[data-theme="dark"] #chatContainer[data-readings-view="detail"] .readings-detail-actions .onb-btn:hover,
#gptlike-chat[data-theme="dark"] #chatContainer[data-readings-view="detail"] .readings-detail-actions .onb-btn:focus,
#gptlike-chat[data-theme="dark"] #chatContainer[data-readings-view="detail"] .readings-detail-actions .onb-btn:focus-visible,
#gptlike-chat[data-theme="dark"] #chatContainer[data-readings-view="detail"] .readings-detail-actions .onb-btn:active {
  border-color: rgba(255, 184, 107, 0.34) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.38) !important;
}

#gptlike-chat #chatContainer:is([data-screen="posts"][data-posts-view="detail"], [data-support-view="detail"], [data-screen="instruction"][data-instruction-view="detail"], [data-screen="posts"][data-spread-quota-view="detail"]) .posts-detail-body {
  display: flex;
  align-items: stretch;
  justify-content: center;
  min-height: 0;
  padding: 0;
  width: 100%;
  max-width: 100%;
  margin: 0;
}

#gptlike-chat #chatContainer:is([data-screen="posts"][data-posts-view="detail"], [data-support-view="detail"], [data-screen="instruction"][data-instruction-view="detail"], [data-screen="posts"][data-spread-quota-view="detail"]) .posts-detail-scroll {
  width: 100%;
  max-width: 100%;
  height: 100%;
  overflow: auto;
  padding: 16px 18px;
  border: 1px solid var(--posts-actions-border);
  border-radius: 16px;
  background: var(--posts-actions-bg);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  box-sizing: border-box;
  scrollbar-gutter: stable both-edges;
  scrollbar-width: auto;
  scrollbar-color: rgba(255, 255, 255, 0.55) rgba(255, 255, 255, 0.08);
}
#gptlike-chat #chatContainer:is([data-screen="posts"][data-posts-view="detail"], [data-support-view="detail"], [data-screen="instruction"][data-instruction-view="detail"]) .posts-detail-scroll::-webkit-scrollbar {
  width: 12px;
}
#gptlike-chat #chatContainer:is([data-screen="posts"][data-posts-view="detail"], [data-support-view="detail"], [data-screen="instruction"][data-instruction-view="detail"]) .posts-detail-scroll::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
}
#gptlike-chat #chatContainer:is([data-screen="posts"][data-posts-view="detail"], [data-support-view="detail"], [data-screen="instruction"][data-instruction-view="detail"]) .posts-detail-scroll::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.55);
  border-radius: 999px;
  border: 3px solid rgba(0, 0, 0, 0.35);
  background-clip: padding-box;
}
#gptlike-chat #chatContainer:is([data-screen="posts"][data-posts-view="detail"], [data-support-view="detail"], [data-screen="instruction"][data-instruction-view="detail"]) .posts-detail-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.75);
}
#gptlike-chat[data-theme-light="1"] #chatContainer:is([data-screen="posts"][data-posts-view="detail"], [data-support-view="detail"], [data-screen="instruction"][data-instruction-view="detail"], [data-screen="posts"][data-spread-quota-view="detail"]) .posts-detail-scroll {
  scrollbar-color: rgba(15, 23, 42, 0.55) rgba(15, 23, 42, 0.08);
  border-color: var(--posts-actions-border);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.46);
}
#gptlike-chat[data-theme-light="1"] #chatContainer:is([data-screen="posts"][data-posts-view="detail"], [data-support-view="detail"], [data-screen="instruction"][data-instruction-view="detail"], [data-screen="posts"][data-spread-quota-view="detail"]) .posts-detail-scroll::-webkit-scrollbar-track {
  background: rgba(15, 23, 42, 0.08);
}
#gptlike-chat[data-theme-light="1"] #chatContainer:is([data-screen="posts"][data-posts-view="detail"], [data-support-view="detail"], [data-screen="instruction"][data-instruction-view="detail"], [data-screen="posts"][data-spread-quota-view="detail"]) .posts-detail-scroll::-webkit-scrollbar-thumb {
  background: rgba(15, 23, 42, 0.45);
  border: 3px solid rgba(255, 255, 255, 0.55);
}
#gptlike-chat[data-theme-light="1"] #chatContainer:is([data-screen="posts"][data-posts-view="detail"], [data-support-view="detail"], [data-screen="instruction"][data-instruction-view="detail"], [data-screen="posts"][data-spread-quota-view="detail"]) .posts-detail-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(15, 23, 42, 0.62);
}
/* White theme: white text panel in newsletters. */
#gptlike-chat[data-theme="white"] #chatContainer:is([data-screen="posts"][data-posts-view="detail"], [data-support-view="detail"], [data-screen="instruction"][data-instruction-view="detail"], [data-screen="posts"][data-spread-quota-view="detail"]) .posts-detail-scroll {
  background: #ffffff !important;
  color: #1f2937 !important;
  border-color: rgba(178, 146, 98, 0.52) !important;
  box-shadow: inset 0 0 0 1px rgba(178, 146, 98, 0.16) !important;
  scrollbar-color: rgba(31, 41, 55, 0.48) rgba(31, 41, 55, 0.10);
}
#gptlike-chat[data-theme="white"] #chatContainer:is([data-screen="posts"][data-posts-view="detail"], [data-support-view="detail"], [data-screen="instruction"][data-instruction-view="detail"], [data-screen="posts"][data-spread-quota-view="detail"]) .posts-detail-scroll::-webkit-scrollbar-track {
  background: rgba(31, 41, 55, 0.10);
}
#gptlike-chat[data-theme="white"] #chatContainer:is([data-screen="posts"][data-posts-view="detail"], [data-support-view="detail"], [data-screen="instruction"][data-instruction-view="detail"], [data-screen="posts"][data-spread-quota-view="detail"]) .posts-detail-scroll::-webkit-scrollbar-thumb {
  background: rgba(31, 41, 55, 0.48);
  border: 3px solid rgba(255, 255, 255, 0.72);
}
#gptlike-chat[data-theme="white"] #chatContainer:is([data-screen="posts"][data-posts-view="detail"], [data-support-view="detail"], [data-screen="instruction"][data-instruction-view="detail"], [data-screen="posts"][data-spread-quota-view="detail"]) .posts-detail-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(31, 41, 55, 0.62);
}
#gptlike-chat[data-theme="white"] #chatContainer:is([data-screen="posts"][data-posts-view="detail"], [data-support-view="detail"], [data-screen="instruction"][data-instruction-view="detail"], [data-screen="posts"][data-spread-quota-view="detail"]) .posts-detail-scroll .post-text {
  color: #1f2937 !important;
}
/* Gold theme: white text panel in newsletters (open card). */
#gptlike-chat[data-theme="gold"] #chatContainer:is([data-screen="posts"][data-posts-view="detail"], [data-support-view="detail"], [data-screen="instruction"][data-instruction-view="detail"], [data-screen="posts"][data-spread-quota-view="detail"]) .posts-detail-scroll {
  background: #ffffff !important;
  color: #1f2937 !important;
  border-color: rgba(255, 184, 107, 0.52) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 184, 107, 0.16) !important;
  scrollbar-color: rgba(31, 41, 55, 0.48) rgba(31, 41, 55, 0.10);
}
#gptlike-chat[data-theme="gold"] #chatContainer:is([data-screen="posts"][data-posts-view="detail"], [data-support-view="detail"], [data-screen="instruction"][data-instruction-view="detail"], [data-screen="posts"][data-spread-quota-view="detail"]) .posts-detail-scroll::-webkit-scrollbar-track {
  background: rgba(31, 41, 55, 0.10);
}
#gptlike-chat[data-theme="gold"] #chatContainer:is([data-screen="posts"][data-posts-view="detail"], [data-support-view="detail"], [data-screen="instruction"][data-instruction-view="detail"], [data-screen="posts"][data-spread-quota-view="detail"]) .posts-detail-scroll::-webkit-scrollbar-thumb {
  background: rgba(31, 41, 55, 0.48);
  border: 3px solid rgba(255, 255, 255, 0.72);
}
#gptlike-chat[data-theme="gold"] #chatContainer:is([data-screen="posts"][data-posts-view="detail"], [data-support-view="detail"], [data-screen="instruction"][data-instruction-view="detail"], [data-screen="posts"][data-spread-quota-view="detail"]) .posts-detail-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(31, 41, 55, 0.62);
}
#gptlike-chat[data-theme="gold"] #chatContainer:is([data-screen="posts"][data-posts-view="detail"], [data-support-view="detail"], [data-screen="instruction"][data-instruction-view="detail"], [data-screen="posts"][data-spread-quota-view="detail"]) .posts-detail-scroll .post-text {
  color: #1f2937 !important;
}

/* Spread quota screen (full-screen, no outer padding) */
#gptlike-chat #chatContainer[data-spread-quota-view="detail"] .message.spread-quota-detail {
  grid-template-rows: minmax(0, 1fr) !important;
}
#gptlike-chat #chatContainer[data-spread-quota-view="detail"] .chat-lower {
  padding: 0 !important;
  gap: 0 !important;
}
#gptlike-chat #chatContainer[data-spread-quota-view="detail"] .posts-detail-body.spread-quota-body {
  flex-direction: column;
  justify-content: flex-start;
  gap: 8px;
  padding: 0;
}
#gptlike-chat #chatContainer[data-spread-quota-view="detail"] .spread-quota-detail-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  height: clamp(44px, 7dvh, 56px);
  min-height: clamp(44px, 7dvh, 56px);
  margin: 0;
  padding: 0;
}
#gptlike-chat #chatContainer[data-spread-quota-view="detail"] .spread-quota-detail-actions .onb-btn {
  height: 100% !important;
  margin: 0 !important;
  background:
    radial-gradient(120px 60px at 20% 25%, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 60%),
    linear-gradient(90deg, var(--accent-1), var(--accent-2)) !important;
  color: var(--btn-text, #ffffff) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow:
    0 10px 22px rgba(0, 0, 0, 0.26),
    0 0 0 1px rgba(255, 255, 255, 0.06) inset !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}
#gptlike-chat #chatContainer[data-spread-quota-view="detail"] .spread-quota-detail-actions .onb-btn:hover,
#gptlike-chat #chatContainer[data-spread-quota-view="detail"] .spread-quota-detail-actions .onb-btn:focus,
#gptlike-chat #chatContainer[data-spread-quota-view="detail"] .spread-quota-detail-actions .onb-btn:focus-visible,
#gptlike-chat #chatContainer[data-spread-quota-view="detail"] .spread-quota-detail-actions .onb-btn:active {
  filter: brightness(1.05);
}
#gptlike-chat[data-theme="dark"] #chatContainer[data-spread-quota-view="detail"] .spread-quota-detail-actions .onb-btn {
  background: linear-gradient(160deg, rgba(6, 9, 14, 0.98), rgba(5, 7, 12, 0.96) 58%, rgba(4, 6, 10, 0.98)) !important;
  border: 1px solid rgba(110, 78, 32, 0.72) !important;
  box-shadow: inset 0 1px 0 rgba(110, 78, 32, 0.18) !important;
  color: #e4ebf4 !important;
  text-shadow: none;
}
#gptlike-chat[data-theme="dark"] #chatContainer[data-spread-quota-view="detail"] .spread-quota-detail-actions .onb-btn:hover,
#gptlike-chat[data-theme="dark"] #chatContainer[data-spread-quota-view="detail"] .spread-quota-detail-actions .onb-btn:focus,
#gptlike-chat[data-theme="dark"] #chatContainer[data-spread-quota-view="detail"] .spread-quota-detail-actions .onb-btn:focus-visible,
#gptlike-chat[data-theme="dark"] #chatContainer[data-spread-quota-view="detail"] .spread-quota-detail-actions .onb-btn:active {
  border-color: rgba(124, 90, 40, 0.86) !important;
  box-shadow: inset 0 1px 0 rgba(124, 90, 40, 0.22) !important;
  filter: none !important;
}
#gptlike-chat[data-theme="white"] #chatContainer[data-spread-quota-view="detail"] .spread-quota-detail-actions .onb-btn {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 249, 251, 0.94)) !important;
  color: #111827 !important;
  border: 1px solid rgba(36, 46, 58, 0.14) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78) !important;
  text-shadow: none;
}
#gptlike-chat[data-theme="white"] #chatContainer[data-spread-quota-view="detail"] .spread-quota-detail-actions .onb-btn:hover,
#gptlike-chat[data-theme="white"] #chatContainer[data-spread-quota-view="detail"] .spread-quota-detail-actions .onb-btn:focus,
#gptlike-chat[data-theme="white"] #chatContainer[data-spread-quota-view="detail"] .spread-quota-detail-actions .onb-btn:focus-visible,
#gptlike-chat[data-theme="white"] #chatContainer[data-spread-quota-view="detail"] .spread-quota-detail-actions .onb-btn:active {
  border-color: rgba(36, 46, 58, 0.18) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82) !important;
}
#gptlike-chat[data-theme="gold"] #chatContainer[data-spread-quota-view="detail"] .spread-quota-detail-actions .onb-btn,
#gptlike-chat[data-theme="dark"] #chatContainer[data-spread-quota-view="detail"] .spread-quota-detail-actions .onb-btn {
  background: linear-gradient(155deg, rgba(255, 184, 107, 0.90), rgba(255, 184, 107, 0.86), rgba(255, 184, 107, 0.84)) !important;
  border: 1px solid rgba(255, 184, 107, 0.28) !important;
  color: #3a2a10 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
  text-shadow: none;
}
#gptlike-chat[data-theme="gold"] #chatContainer[data-spread-quota-view="detail"] .spread-quota-detail-actions .onb-btn:hover,
#gptlike-chat[data-theme="gold"] #chatContainer[data-spread-quota-view="detail"] .spread-quota-detail-actions .onb-btn:focus,
#gptlike-chat[data-theme="gold"] #chatContainer[data-spread-quota-view="detail"] .spread-quota-detail-actions .onb-btn:focus-visible,
#gptlike-chat[data-theme="gold"] #chatContainer[data-spread-quota-view="detail"] .spread-quota-detail-actions .onb-btn:active,
#gptlike-chat[data-theme="dark"] #chatContainer[data-spread-quota-view="detail"] .spread-quota-detail-actions .onb-btn:hover,
#gptlike-chat[data-theme="dark"] #chatContainer[data-spread-quota-view="detail"] .spread-quota-detail-actions .onb-btn:focus,
#gptlike-chat[data-theme="dark"] #chatContainer[data-spread-quota-view="detail"] .spread-quota-detail-actions .onb-btn:focus-visible,
#gptlike-chat[data-theme="dark"] #chatContainer[data-spread-quota-view="detail"] .spread-quota-detail-actions .onb-btn:active {
  border-color: rgba(255, 184, 107, 0.34) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.38) !important;
}
#gptlike-chat #chatContainer[data-spread-quota-view="detail"] .spread-quota-scroll {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  background: rgba(8, 10, 14, 0.92) !important;
  border: 1px solid rgba(110, 78, 32, 0.45) !important;
  border-radius: 14px;
  box-shadow: none !important;
  padding: 16px 14px;
  box-sizing: border-box;
}
#gptlike-chat[data-theme-light="1"] #chatContainer[data-spread-quota-view="detail"] .spread-quota-scroll {
  background: #ffffff !important;
  border-color: rgba(15, 23, 42, 0.24) !important;
}
#gptlike-chat #chatContainer[data-spread-quota-view="detail"] .spread-quota-text {
  color: rgba(221, 229, 239, 0.84);
}
#gptlike-chat[data-theme-light="1"] #chatContainer[data-spread-quota-view="detail"] .spread-quota-text {
  color: rgba(30, 41, 59, 0.82);
}

#gptlike-chat #chatContainer:is([data-screen="posts"][data-posts-view="detail"], [data-support-view="detail"], [data-screen="instruction"][data-instruction-view="detail"]) .posts-detail-bottom {
  display: grid;
  grid-template-rows: minmax(10px, 2.5dvh) minmax(44px, 5dvh) minmax(10px, 2.5dvh);
  align-items: stretch;
  width: 100%;
  max-width: 100%;
  margin: 0;
  gap: 0;
  padding: 0;
  box-sizing: border-box;
  min-height: 64px;
  height: 100%;
  position: relative;
  overflow: hidden;
  background: transparent;
}
#gptlike-chat #chatContainer:is([data-screen="posts"][data-posts-view="detail"], [data-support-view="detail"], [data-screen="instruction"][data-instruction-view="detail"]) .posts-detail-actions {
  position: relative;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  width: 100%;
  height: 100%;
  background: var(--posts-actions-bg);
  border: 1px solid var(--posts-actions-border);
  border-radius: 16px;
  overflow: hidden;
  box-sizing: border-box;
}
#gptlike-chat #chatContainer:is([data-screen="posts"][data-posts-view="detail"], [data-support-view="detail"], [data-screen="instruction"][data-instruction-view="detail"]) .posts-detail-actions::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  transform: translateX(-0.5px);
  background: var(--posts-actions-divider);
  pointer-events: none;
}
#gptlike-chat #chatContainer:is([data-screen="posts"][data-posts-view="detail"], [data-support-view="detail"], [data-screen="instruction"][data-instruction-view="detail"]) .posts-detail-actions .post-btn {
  flex: 1 1 50%;
  width: 50%;
  height: 100% !important;
  max-height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  line-height: 0 !important;
  font-size: 0 !important;
  overflow: hidden !important;
  transform: none !important;
}
#gptlike-chat #chatContainer[data-spread1-view="detail"] .posts-detail-actions.spread1-detail-actions .post-btn,
#gptlike-chat #chatContainer[data-spread2-view="detail"] .posts-detail-actions.spread2-detail-actions .post-btn,
#gptlike-chat #chatContainer[data-spread3-view="detail"] .posts-detail-actions.spread3-detail-actions .post-btn {
  font-size: clamp(12px, 2.6vw, 15px) !important;
  line-height: 1.15 !important;
  font-weight: 600 !important;
  letter-spacing: 0.2px !important;
  padding: 0 12px !important;
  text-transform: none !important;
}
#gptlike-chat #chatContainer[data-spread1-view="detail"] .posts-detail-actions.spread1-detail-actions .post-btn,
#gptlike-chat #chatContainer[data-spread2-view="detail"] .posts-detail-actions.spread2-detail-actions .post-btn,
#gptlike-chat #chatContainer[data-spread3-view="detail"] .posts-detail-actions.spread3-detail-actions .post-btn {
  background:
    radial-gradient(120px 60px at 20% 25%, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 60%),
    linear-gradient(90deg, var(--accent-1), var(--accent-2)) !important;
  color: var(--btn-text, #ffffff) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow:
    0 10px 22px rgba(0, 0, 0, 0.26),
    0 0 0 1px rgba(255, 255, 255, 0.06) inset !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}
#gptlike-chat #chatContainer[data-spread1-view="detail"] .posts-detail-actions.spread1-detail-actions .post-btn:hover,
#gptlike-chat #chatContainer[data-spread2-view="detail"] .posts-detail-actions.spread2-detail-actions .post-btn:hover,
#gptlike-chat #chatContainer[data-spread3-view="detail"] .posts-detail-actions.spread3-detail-actions .post-btn:hover,
#gptlike-chat #chatContainer[data-spread1-view="detail"] .posts-detail-actions.spread1-detail-actions .post-btn:focus,
#gptlike-chat #chatContainer[data-spread2-view="detail"] .posts-detail-actions.spread2-detail-actions .post-btn:focus,
#gptlike-chat #chatContainer[data-spread3-view="detail"] .posts-detail-actions.spread3-detail-actions .post-btn:focus,
#gptlike-chat #chatContainer[data-spread1-view="detail"] .posts-detail-actions.spread1-detail-actions .post-btn:focus-visible,
#gptlike-chat #chatContainer[data-spread2-view="detail"] .posts-detail-actions.spread2-detail-actions .post-btn:focus-visible,
#gptlike-chat #chatContainer[data-spread3-view="detail"] .posts-detail-actions.spread3-detail-actions .post-btn:focus-visible,
#gptlike-chat #chatContainer[data-spread1-view="detail"] .posts-detail-actions.spread1-detail-actions .post-btn:active,
#gptlike-chat #chatContainer[data-spread2-view="detail"] .posts-detail-actions.spread2-detail-actions .post-btn:active,
#gptlike-chat #chatContainer[data-spread3-view="detail"] .posts-detail-actions.spread3-detail-actions .post-btn:active {
  filter: brightness(1.05);
}
#gptlike-chat[data-theme="dark"] #chatContainer[data-spread1-view="detail"] .posts-detail-actions.spread1-detail-actions .post-btn,
#gptlike-chat[data-theme="dark"] #chatContainer[data-spread2-view="detail"] .posts-detail-actions.spread2-detail-actions .post-btn,
#gptlike-chat[data-theme="dark"] #chatContainer[data-spread3-view="detail"] .posts-detail-actions.spread3-detail-actions .post-btn {
  background: linear-gradient(160deg, rgba(6, 9, 14, 0.98), rgba(5, 7, 12, 0.96) 58%, rgba(4, 6, 10, 0.98)) !important;
  border: 1px solid rgba(110, 78, 32, 0.72) !important;
  box-shadow: inset 0 1px 0 rgba(110, 78, 32, 0.18) !important;
  color: #e4ebf4 !important;
}
#gptlike-chat[data-theme="dark"] #chatContainer[data-spread1-view="detail"] .posts-detail-actions.spread1-detail-actions .post-btn:hover,
#gptlike-chat[data-theme="dark"] #chatContainer[data-spread2-view="detail"] .posts-detail-actions.spread2-detail-actions .post-btn:hover,
#gptlike-chat[data-theme="dark"] #chatContainer[data-spread3-view="detail"] .posts-detail-actions.spread3-detail-actions .post-btn:hover,
#gptlike-chat[data-theme="dark"] #chatContainer[data-spread1-view="detail"] .posts-detail-actions.spread1-detail-actions .post-btn:focus,
#gptlike-chat[data-theme="dark"] #chatContainer[data-spread2-view="detail"] .posts-detail-actions.spread2-detail-actions .post-btn:focus,
#gptlike-chat[data-theme="dark"] #chatContainer[data-spread3-view="detail"] .posts-detail-actions.spread3-detail-actions .post-btn:focus,
#gptlike-chat[data-theme="dark"] #chatContainer[data-spread1-view="detail"] .posts-detail-actions.spread1-detail-actions .post-btn:focus-visible,
#gptlike-chat[data-theme="dark"] #chatContainer[data-spread2-view="detail"] .posts-detail-actions.spread2-detail-actions .post-btn:focus-visible,
#gptlike-chat[data-theme="dark"] #chatContainer[data-spread3-view="detail"] .posts-detail-actions.spread3-detail-actions .post-btn:focus-visible,
#gptlike-chat[data-theme="dark"] #chatContainer[data-spread1-view="detail"] .posts-detail-actions.spread1-detail-actions .post-btn:active,
#gptlike-chat[data-theme="dark"] #chatContainer[data-spread2-view="detail"] .posts-detail-actions.spread2-detail-actions .post-btn:active,
#gptlike-chat[data-theme="dark"] #chatContainer[data-spread3-view="detail"] .posts-detail-actions.spread3-detail-actions .post-btn:active {
  border-color: rgba(124, 90, 40, 0.86) !important;
  box-shadow: inset 0 1px 0 rgba(124, 90, 40, 0.22) !important;
  filter: none !important;
}
#gptlike-chat[data-theme="white"] #chatContainer[data-spread1-view="detail"] .posts-detail-actions.spread1-detail-actions .post-btn,
#gptlike-chat[data-theme="white"] #chatContainer[data-spread2-view="detail"] .posts-detail-actions.spread2-detail-actions .post-btn,
#gptlike-chat[data-theme="white"] #chatContainer[data-spread3-view="detail"] .posts-detail-actions.spread3-detail-actions .post-btn {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 249, 251, 0.94)) !important;
  color: #111827 !important;
  border: 1px solid rgba(36, 46, 58, 0.14) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78) !important;
}
#gptlike-chat[data-theme="white"] #chatContainer[data-spread1-view="detail"] .posts-detail-actions.spread1-detail-actions .post-btn:hover,
#gptlike-chat[data-theme="white"] #chatContainer[data-spread2-view="detail"] .posts-detail-actions.spread2-detail-actions .post-btn:hover,
#gptlike-chat[data-theme="white"] #chatContainer[data-spread3-view="detail"] .posts-detail-actions.spread3-detail-actions .post-btn:hover,
#gptlike-chat[data-theme="white"] #chatContainer[data-spread1-view="detail"] .posts-detail-actions.spread1-detail-actions .post-btn:focus,
#gptlike-chat[data-theme="white"] #chatContainer[data-spread2-view="detail"] .posts-detail-actions.spread2-detail-actions .post-btn:focus,
#gptlike-chat[data-theme="white"] #chatContainer[data-spread3-view="detail"] .posts-detail-actions.spread3-detail-actions .post-btn:focus,
#gptlike-chat[data-theme="white"] #chatContainer[data-spread1-view="detail"] .posts-detail-actions.spread1-detail-actions .post-btn:focus-visible,
#gptlike-chat[data-theme="white"] #chatContainer[data-spread2-view="detail"] .posts-detail-actions.spread2-detail-actions .post-btn:focus-visible,
#gptlike-chat[data-theme="white"] #chatContainer[data-spread3-view="detail"] .posts-detail-actions.spread3-detail-actions .post-btn:focus-visible,
#gptlike-chat[data-theme="white"] #chatContainer[data-spread1-view="detail"] .posts-detail-actions.spread1-detail-actions .post-btn:active,
#gptlike-chat[data-theme="white"] #chatContainer[data-spread2-view="detail"] .posts-detail-actions.spread2-detail-actions .post-btn:active,
#gptlike-chat[data-theme="white"] #chatContainer[data-spread3-view="detail"] .posts-detail-actions.spread3-detail-actions .post-btn:active {
  border-color: rgba(36, 46, 58, 0.18) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82) !important;
}
#gptlike-chat[data-theme="gold"] #chatContainer[data-spread1-view="detail"] .posts-detail-actions.spread1-detail-actions .post-btn,
#gptlike-chat[data-theme="gold"] #chatContainer[data-spread2-view="detail"] .posts-detail-actions.spread2-detail-actions .post-btn,
#gptlike-chat[data-theme="gold"] #chatContainer[data-spread3-view="detail"] .posts-detail-actions.spread3-detail-actions .post-btn,
#gptlike-chat[data-theme="dark"] #chatContainer[data-spread1-view="detail"] .posts-detail-actions.spread1-detail-actions .post-btn,
#gptlike-chat[data-theme="dark"] #chatContainer[data-spread2-view="detail"] .posts-detail-actions.spread2-detail-actions .post-btn,
#gptlike-chat[data-theme="dark"] #chatContainer[data-spread3-view="detail"] .posts-detail-actions.spread3-detail-actions .post-btn {
  background: linear-gradient(155deg, rgba(255, 184, 107, 0.90), rgba(255, 184, 107, 0.86), rgba(255, 184, 107, 0.84)) !important;
  border: 1px solid rgba(255, 184, 107, 0.28) !important;
  color: #3a2a10 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
}
#gptlike-chat[data-theme="gold"] #chatContainer[data-spread1-view="detail"] .posts-detail-actions.spread1-detail-actions .post-btn:hover,
#gptlike-chat[data-theme="gold"] #chatContainer[data-spread2-view="detail"] .posts-detail-actions.spread2-detail-actions .post-btn:hover,
#gptlike-chat[data-theme="gold"] #chatContainer[data-spread3-view="detail"] .posts-detail-actions.spread3-detail-actions .post-btn:hover,
#gptlike-chat[data-theme="gold"] #chatContainer[data-spread1-view="detail"] .posts-detail-actions.spread1-detail-actions .post-btn:focus,
#gptlike-chat[data-theme="gold"] #chatContainer[data-spread2-view="detail"] .posts-detail-actions.spread2-detail-actions .post-btn:focus,
#gptlike-chat[data-theme="gold"] #chatContainer[data-spread3-view="detail"] .posts-detail-actions.spread3-detail-actions .post-btn:focus,
#gptlike-chat[data-theme="gold"] #chatContainer[data-spread1-view="detail"] .posts-detail-actions.spread1-detail-actions .post-btn:focus-visible,
#gptlike-chat[data-theme="gold"] #chatContainer[data-spread2-view="detail"] .posts-detail-actions.spread2-detail-actions .post-btn:focus-visible,
#gptlike-chat[data-theme="gold"] #chatContainer[data-spread3-view="detail"] .posts-detail-actions.spread3-detail-actions .post-btn:focus-visible,
#gptlike-chat[data-theme="gold"] #chatContainer[data-spread1-view="detail"] .posts-detail-actions.spread1-detail-actions .post-btn:active,
#gptlike-chat[data-theme="gold"] #chatContainer[data-spread2-view="detail"] .posts-detail-actions.spread2-detail-actions .post-btn:active,
#gptlike-chat[data-theme="gold"] #chatContainer[data-spread3-view="detail"] .posts-detail-actions.spread3-detail-actions .post-btn:active,
#gptlike-chat[data-theme="dark"] #chatContainer[data-spread1-view="detail"] .posts-detail-actions.spread1-detail-actions .post-btn:hover,
#gptlike-chat[data-theme="dark"] #chatContainer[data-spread2-view="detail"] .posts-detail-actions.spread2-detail-actions .post-btn:hover,
#gptlike-chat[data-theme="dark"] #chatContainer[data-spread3-view="detail"] .posts-detail-actions.spread3-detail-actions .post-btn:hover,
#gptlike-chat[data-theme="dark"] #chatContainer[data-spread1-view="detail"] .posts-detail-actions.spread1-detail-actions .post-btn:focus,
#gptlike-chat[data-theme="dark"] #chatContainer[data-spread2-view="detail"] .posts-detail-actions.spread2-detail-actions .post-btn:focus,
#gptlike-chat[data-theme="dark"] #chatContainer[data-spread3-view="detail"] .posts-detail-actions.spread3-detail-actions .post-btn:focus,
#gptlike-chat[data-theme="dark"] #chatContainer[data-spread1-view="detail"] .posts-detail-actions.spread1-detail-actions .post-btn:focus-visible,
#gptlike-chat[data-theme="dark"] #chatContainer[data-spread2-view="detail"] .posts-detail-actions.spread2-detail-actions .post-btn:focus-visible,
#gptlike-chat[data-theme="dark"] #chatContainer[data-spread3-view="detail"] .posts-detail-actions.spread3-detail-actions .post-btn:focus-visible,
#gptlike-chat[data-theme="dark"] #chatContainer[data-spread1-view="detail"] .posts-detail-actions.spread1-detail-actions .post-btn:active,
#gptlike-chat[data-theme="dark"] #chatContainer[data-spread2-view="detail"] .posts-detail-actions.spread2-detail-actions .post-btn:active,
#gptlike-chat[data-theme="dark"] #chatContainer[data-spread3-view="detail"] .posts-detail-actions.spread3-detail-actions .post-btn:active {
  border-color: rgba(255, 184, 107, 0.34) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.38) !important;
}

#gptlike-chat #chatContainer:is([data-screen="posts"][data-posts-view="detail"], [data-support-view="detail"], [data-screen="instruction"][data-instruction-view="detail"]) .posts-detail-actions .post-btn .post-reaction-icon {
  display: block !important;
  margin: 0 !important;
}
#gptlike-chat #chatContainer:is([data-screen="posts"][data-posts-view="detail"], [data-support-view="detail"], [data-screen="instruction"][data-instruction-view="detail"]) .posts-detail-bottom .post-btn[data-active="1"] {
  border-color: var(--accent-1) !important;
  background: transparent !important;
  color: #ffb86b !important;
}
#gptlike-chat #chatContainer:is([data-screen="posts"][data-posts-view="detail"], [data-support-view="detail"], [data-screen="instruction"][data-instruction-view="detail"]) .posts-detail-actions .post-btn[data-reaction]:hover,
#gptlike-chat #chatContainer:is([data-screen="posts"][data-posts-view="detail"], [data-support-view="detail"], [data-screen="instruction"][data-instruction-view="detail"]) .posts-detail-actions .post-btn[data-reaction]:focus-visible {
  background: transparent !important;
  transform: none !important;
}
#gptlike-chat[data-theme-light="1"] #chatContainer:is([data-screen="posts"][data-posts-view="detail"], [data-support-view="detail"], [data-screen="instruction"][data-instruction-view="detail"]) .posts-detail-actions .post-btn {
  color: #0f172a !important;
}
#gptlike-chat[data-theme-light="1"] #chatContainer:is([data-screen="posts"][data-posts-view="detail"], [data-support-view="detail"], [data-screen="instruction"][data-instruction-view="detail"]) .posts-detail-actions .post-btn[data-reaction]:hover,
#gptlike-chat[data-theme-light="1"] #chatContainer:is([data-screen="posts"][data-posts-view="detail"], [data-support-view="detail"], [data-screen="instruction"][data-instruction-view="detail"]) .posts-detail-actions .post-btn[data-reaction]:focus-visible {
  background: transparent !important;
}
#gptlike-chat[data-theme-light="1"] #chatContainer:is([data-screen="posts"][data-posts-view="detail"], [data-support-view="detail"], [data-screen="instruction"][data-instruction-view="detail"]) .posts-detail-actions::after {
  background: var(--posts-actions-divider);
}
#gptlike-chat #chatContainer:is([data-screen="posts"][data-posts-view="detail"], [data-support-view="detail"], [data-screen="instruction"][data-instruction-view="detail"]) .posts-detail-bottom .post-reaction-icon {
  width: 18px !important;
  height: 18px !important;
}
/* Detail reactions: active state only (gold), no hover color shift */
#gptlike-chat #chatContainer:is([data-screen="posts"][data-posts-view="detail"], [data-support-view="detail"], [data-screen="instruction"][data-instruction-view="detail"]) .posts-detail-actions .post-btn[data-active="1"] {
  color: #ffb86b !important;
}
#gptlike-chat #chatContainer:is([data-screen="posts"][data-posts-view="detail"], [data-support-view="detail"], [data-screen="instruction"][data-instruction-view="detail"]) .posts-detail-actions .post-btn[data-active="1"] .post-reaction-icon {
  color: #ffb86b !important;
  stroke: #ffb86b !important;
}
#gptlike-chat #chatContainer:is([data-screen="posts"][data-posts-view="detail"], [data-support-view="detail"], [data-screen="instruction"][data-instruction-view="detail"]) .posts-detail-actions .post-btn[data-active="1"] .post-reaction-icon * {
  stroke: #ffb86b !important;
}
/* Gold theme: make inactive reactions dark and active reactions bright gold for contrast. */
#gptlike-chat[data-theme="gold"] #chatContainer:is([data-screen="posts"][data-posts-view="detail"], [data-support-view="detail"], [data-screen="instruction"][data-instruction-view="detail"]) .posts-detail-actions .post-btn,
#gptlike-chat[data-theme="dark"] #chatContainer:is([data-screen="posts"][data-posts-view="detail"], [data-support-view="detail"], [data-screen="instruction"][data-instruction-view="detail"]) .posts-detail-actions .post-btn {
  color: #0f172a !important;
}
#gptlike-chat[data-theme="gold"] #chatContainer:is([data-screen="posts"][data-posts-view="detail"], [data-support-view="detail"], [data-screen="instruction"][data-instruction-view="detail"]) .posts-detail-actions .post-btn .post-reaction-icon,
#gptlike-chat[data-theme="dark"] #chatContainer:is([data-screen="posts"][data-posts-view="detail"], [data-support-view="detail"], [data-screen="instruction"][data-instruction-view="detail"]) .posts-detail-actions .post-btn .post-reaction-icon {
  color: #0f172a !important;
  stroke: #0f172a !important;
}
#gptlike-chat[data-theme="gold"] #chatContainer:is([data-screen="posts"][data-posts-view="detail"], [data-support-view="detail"], [data-screen="instruction"][data-instruction-view="detail"]) .posts-detail-actions .post-btn .post-reaction-icon *,
#gptlike-chat[data-theme="dark"] #chatContainer:is([data-screen="posts"][data-posts-view="detail"], [data-support-view="detail"], [data-screen="instruction"][data-instruction-view="detail"]) .posts-detail-actions .post-btn .post-reaction-icon * {
  stroke: #0f172a !important;
}
#gptlike-chat[data-theme="gold"] #chatContainer:is([data-screen="posts"][data-posts-view="detail"], [data-support-view="detail"], [data-screen="instruction"][data-instruction-view="detail"]) .posts-detail-actions .post-btn[data-active="1"],
#gptlike-chat[data-theme="dark"] #chatContainer:is([data-screen="posts"][data-posts-view="detail"], [data-support-view="detail"], [data-screen="instruction"][data-instruction-view="detail"]) .posts-detail-actions .post-btn[data-active="1"] {
  color: #ffb86b !important;
  background: transparent !important;
}
#gptlike-chat[data-theme="gold"] #chatContainer:is([data-screen="posts"][data-posts-view="detail"], [data-support-view="detail"], [data-screen="instruction"][data-instruction-view="detail"]) .posts-detail-actions .post-btn[data-active="1"] .post-reaction-icon,
#gptlike-chat[data-theme="dark"] #chatContainer:is([data-screen="posts"][data-posts-view="detail"], [data-support-view="detail"], [data-screen="instruction"][data-instruction-view="detail"]) .posts-detail-actions .post-btn[data-active="1"] .post-reaction-icon {
  color: #ffb86b !important;
  stroke: #ffb86b !important;
  filter: none !important;
}
#gptlike-chat[data-theme="gold"] #chatContainer:is([data-screen="posts"][data-posts-view="detail"], [data-support-view="detail"], [data-screen="instruction"][data-instruction-view="detail"]) .posts-detail-actions .post-btn[data-active="1"] .post-reaction-icon *,
#gptlike-chat[data-theme="dark"] #chatContainer:is([data-screen="posts"][data-posts-view="detail"], [data-support-view="detail"], [data-screen="instruction"][data-instruction-view="detail"]) .posts-detail-actions .post-btn[data-active="1"] .post-reaction-icon * {
  stroke: #ffb86b !important;
}
/* Gold theme: make detail reaction container match white theme styling. */
#gptlike-chat[data-theme="gold"] #chatContainer:is([data-screen="posts"][data-posts-view="detail"], [data-support-view="detail"], [data-screen="instruction"][data-instruction-view="detail"]) .posts-detail-actions,
#gptlike-chat[data-theme="dark"] #chatContainer:is([data-screen="posts"][data-posts-view="detail"], [data-support-view="detail"], [data-screen="instruction"][data-instruction-view="detail"]) .posts-detail-actions {
  background: linear-gradient(155deg, rgba(255, 249, 237, 0.98), rgba(243, 228, 204, 0.96)) !important;
  border-color: rgba(184, 152, 104, 0.62) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
}
#gptlike-chat[data-theme="gold"] #chatContainer:is([data-screen="posts"][data-posts-view="detail"], [data-support-view="detail"], [data-screen="instruction"][data-instruction-view="detail"]) .posts-detail-actions::after,
#gptlike-chat[data-theme="dark"] #chatContainer:is([data-screen="posts"][data-posts-view="detail"], [data-support-view="detail"], [data-screen="instruction"][data-instruction-view="detail"]) .posts-detail-actions::after {
  background: rgba(178, 146, 98, 0.46) !important;
}
/* Gold theme: force read label + reactions to mirror white theme colors. */
#gptlike-chat[data-theme="gold"][data-theme-light="1"] #chatContainer[data-screen="posts"] .posts-cards .post-card-read {
  color: #ffffff !important;
  text-shadow: none !important;
}
#gptlike-chat[data-theme="gold"][data-theme-light="1"] #chatContainer:is([data-screen="posts"][data-posts-view="detail"], [data-support-view="detail"], [data-screen="instruction"][data-instruction-view="detail"]) .posts-detail-actions {
  background: linear-gradient(155deg, rgba(255, 249, 237, 0.98), rgba(243, 228, 204, 0.96)) !important;
  border-color: rgba(184, 152, 104, 0.62) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
}
#gptlike-chat[data-theme="gold"][data-theme-light="1"] #chatContainer:is([data-screen="posts"][data-posts-view="detail"], [data-support-view="detail"], [data-screen="instruction"][data-instruction-view="detail"]) .posts-detail-actions::after {
  background: rgba(178, 146, 98, 0.46) !important;
}
#gptlike-chat[data-theme="gold"][data-theme-light="1"] #chatContainer:is([data-screen="posts"][data-posts-view="detail"], [data-support-view="detail"], [data-screen="instruction"][data-instruction-view="detail"]) .posts-detail-actions .post-btn {
  color: rgba(15, 23, 42, 0.78) !important;
}
#gptlike-chat[data-theme="gold"][data-theme-light="1"] #chatContainer:is([data-screen="posts"][data-posts-view="detail"], [data-support-view="detail"], [data-screen="instruction"][data-instruction-view="detail"]) .posts-detail-actions .post-btn .post-reaction-icon {
  color: rgba(15, 23, 42, 0.78) !important;
  stroke: rgba(15, 23, 42, 0.78) !important;
}
#gptlike-chat[data-theme="gold"][data-theme-light="1"] #chatContainer:is([data-screen="posts"][data-posts-view="detail"], [data-support-view="detail"], [data-screen="instruction"][data-instruction-view="detail"]) .posts-detail-actions .post-btn .post-reaction-icon * {
  stroke: rgba(15, 23, 42, 0.78) !important;
}

/* Support replies: detail view without reaction bar */
#gptlike-chat #chatContainer[data-support-view="detail"] .message.posts-detail {
  grid-template-rows: minmax(0, 1fr);
  height: 100% !important;
  min-height: 0 !important;
  flex: 1 1 auto !important;
}
#gptlike-chat #chatContainer[data-support-view="detail"] .chat-shell {
  grid-template-rows: clamp(56px, 10%, 96px) minmax(0, 1fr) !important;
}
#gptlike-chat #chatContainer[data-support-view="detail"] .chat-lower {
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) auto !important;
  padding: 10px 0 calc(12px + var(--keyboard-inset, 0px)) !important;
  gap: 10px !important;
  height: 100% !important;
  min-height: 0 !important;
}
#gptlike-chat #chatContainer[data-support-view="detail"] .chat-body,
#gptlike-chat #chatContainer[data-support-view="detail"] .messages {
  height: 100% !important;
  min-height: 0 !important;
  flex: 1 1 auto !important;
}
#gptlike-chat #chatContainer[data-support-view="detail"] .messages {
  position: relative !important;
  inset: auto !important;
  padding: 12px 14px !important;
  margin: 0 !important;
  border: 1px solid var(--chat-frame-border) !important;
  border-radius: var(--chat-frame-radius) !important;
  background: var(--chat-frame-bg) !important;
  box-shadow: var(--chat-frame-shadow) !important;
  overflow: hidden !important;
  clip-path: inset(0 round var(--chat-frame-radius));
  box-sizing: border-box !important;
}
#gptlike-chat #chatContainer[data-support-view="detail"] .posts-detail-body {
  height: 100%;
  min-height: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
#gptlike-chat #chatContainer[data-support-view="detail"] .posts-detail-scroll {
  height: 100%;
  min-height: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
#gptlike-chat #chatContainer[data-support-view="detail"] .posts-detail-bottom {
  display: none !important;
}
#gptlike-chat #chatContainer[data-support-view="detail"] {
  padding: var(--screen-edge-top) var(--shell-edge-x) var(--shell-edge-bottom) !important;
}

/* Instructions: detail view without reaction bar */
#gptlike-chat #chatContainer[data-screen="instruction"][data-instruction-view="detail"] .message.posts-detail {
  grid-template-rows: minmax(0, 1fr);
  height: 100% !important;
  min-height: 0 !important;
  flex: 1 1 auto !important;
}
#gptlike-chat #chatContainer[data-screen="instruction"][data-instruction-view="detail"] .posts-detail-bottom {
  display: none !important;
}
#gptlike-chat #chatContainer[data-screen="instruction"][data-instruction-view="detail"] .post-text strong {
  font-weight: 800 !important;
}

/* Hard kill any screen/frame outline */
body::before,
body::after {
  content: none !important;
  display: none !important;
  border: 0 !important;
  box-shadow: none !important;
}
#appGlobalBackground,
#appGlobalBackground::before,
#appGlobalBackground::after {
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
@media (max-width: 640px) {
  #gptlike-chat.gptlike-wrapper {
    border: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
  }
}

/* Unified corners for all buttons and fields (Apple-like rounding) */
#gptlike-chat button,
#gptlike-chat [role="button"],
#gptlike-chat input,
#gptlike-chat textarea,
#gptlike-chat select,
#gptlike-chat .btn-primary,
#gptlike-chat .btn-secondary,
#gptlike-chat .post-btn,
#gptlike-chat .post-card-btn,
#gptlike-chat .post-action,
#gptlike-chat .onb-btn,
#gptlike-chat .input,
#gptlike-chat .composer,
#gptlike-chat .composer-frame,
#gptlike-chat .account-auth-btn,
#gptlike-chat .theme-mode-seg button,
#gptlike-chat .font-weight-btn,
#gptlike-chat .style-close,
#gptlike-chat .icon-only {
  border-radius: var(--app-corner) !important;
  background-clip: padding-box !important;
  -webkit-background-clip: padding-box !important;
}

#gptlike-chat button,
#gptlike-chat [role="button"],
#gptlike-chat .btn-primary,
#gptlike-chat .btn-secondary,
#gptlike-chat .post-btn,
#gptlike-chat .post-card-btn,
#gptlike-chat .post-action,
#gptlike-chat .onb-btn,
#gptlike-chat .composer,
#gptlike-chat .composer-frame,
#gptlike-chat .account-auth-btn,
#gptlike-chat .theme-mode-seg button,
#gptlike-chat .font-weight-btn,
#gptlike-chat .style-close,
#gptlike-chat .icon-only {
  overflow: hidden;
}

#gptlike-chat #chatContainer .messages,
#gptlike-chat #chatContainer .composer-frame,
#gptlike-chat #chatContainer .composer,
#gptlike-chat #chatContainer .input {
  border-radius: var(--app-corner) !important;
  background-clip: padding-box !important;
  -webkit-background-clip: padding-box !important;
}

#gptlike-chat #chatContainer .messages,
#gptlike-chat #chatContainer .composer-frame,
#gptlike-chat #chatContainer .composer,
#gptlike-chat #chatContainer .input {
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}

#gptlike-chat #chatContainer[data-screen="chat"] .messages,
#gptlike-chat #chatContainer[data-screen="chat"] .composer-frame {
  clip-path: none !important;
}

#gptlike-chat #chatContainer[data-screen="posts"] .messages,
#gptlike-chat #chatContainer[data-support-view="list"] .messages,
#gptlike-chat #chatContainer[data-support-view="detail"] .messages,
#gptlike-chat #chatContainer[data-screen="posts"] .post-card-btn,
#gptlike-chat #chatContainer[data-support-view="list"] .post-card-btn {
  border-radius: var(--app-corner) !important;
  background-clip: padding-box !important;
  -webkit-background-clip: padding-box !important;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}

#gptlike-chat #onbBackTop2,
#gptlike-chat #onbBackTop3,
#gptlike-chat #onbSkipTop,
#gptlike-chat #chatBackBtn,
#gptlike-chat #authBackBtn,
#gptlike-chat #postsBackTopBtn,
#gptlike-chat #chatContainer .message[data-from-posts="1"] .post-actions .post-btn[data-role="back"] {
  border-radius: var(--app-corner) !important;
}

#gptlike-chat .btn-primary::before,
#gptlike-chat .btn-primary::after,
#gptlike-chat .btn-secondary::before,
#gptlike-chat .btn-secondary::after,
#gptlike-chat .post-btn::before,
#gptlike-chat .post-btn::after,
#gptlike-chat .post-card-btn::before,
#gptlike-chat .post-card-btn::after,
#gptlike-chat .post-action::before,
#gptlike-chat .post-action::after,
#gptlike-chat .onb-btn::before,
#gptlike-chat .onb-btn::after,
#gptlike-chat .theme-mode-seg button::before,
#gptlike-chat .theme-mode-seg button::after,
#gptlike-chat .font-weight-btn::before,
#gptlike-chat .font-weight-btn::after,
#gptlike-chat .style-close::before,
#gptlike-chat .style-close::after,
#gptlike-chat .icon-only::before,
#gptlike-chat .icon-only::after,
#gptlike-chat .composer::before,
#gptlike-chat .composer::after,
#gptlike-chat .composer-frame::before,
#gptlike-chat .composer-frame::after {
  border-radius: inherit !important;
}


@supports (-webkit-touch-callout: none) {
  #gptlike-chat button,
  #gptlike-chat [role="button"],
  #gptlike-chat input,
  #gptlike-chat textarea,
  #gptlike-chat select,
  #gptlike-chat .btn-primary,
  #gptlike-chat .btn-secondary,
  #gptlike-chat .post-btn,
  #gptlike-chat .post-card-btn,
  #gptlike-chat .post-action,
  #gptlike-chat .onb-btn,
  #gptlike-chat .input,
  #gptlike-chat .composer,
  #gptlike-chat .composer-frame,
  #gptlike-chat .account-auth-btn,
  #gptlike-chat .theme-mode-seg button,
  #gptlike-chat .font-weight-btn,
  #gptlike-chat .style-close,
  #gptlike-chat .icon-only {
    -webkit-mask-image: -webkit-radial-gradient(white, black);
  }
}

/* Arcana menu: readable sizes tuned for mobile */
#onboardingScreen[data-submenu="arcana"] .onb-page[data-page="3"] .onb-list--arcana .onb-arcana-btn {
  font-size: clamp(14px, 2.6vw, 16px) !important;
  line-height: 1.22 !important;
}
#onboardingScreen[data-submenu="arcana"] .onb-page[data-page="3"] .onb-list--arcana .onb-arcana-main {
  font-size: clamp(15px, 2.8vw, 17px) !important;
  line-height: 1.2 !important;
}
#onboardingScreen[data-submenu="arcana"] .onb-page[data-page="3"] .onb-list--arcana .onb-arcana-sub {
  font-size: clamp(12px, 2.3vw, 14px) !important;
  line-height: 1.2 !important;
  opacity: 0.9 !important;
}
@media (max-width: 640px) {
  #onboardingScreen[data-submenu="arcana"] .onb-page[data-page="3"] .onb-list--arcana .onb-arcana-btn {
    font-size: clamp(15px, 3.5vw, 17px) !important;
  }
  #onboardingScreen[data-submenu="arcana"] .onb-page[data-page="3"] .onb-list--arcana .onb-arcana-main {
    font-size: clamp(16px, 3.9vw, 18px) !important;
  }
  #onboardingScreen[data-submenu="arcana"] .onb-page[data-page="3"] .onb-list--arcana .onb-arcana-sub {
    font-size: clamp(13px, 3.0vw, 15px) !important;
  }
}

/* Account modal: make account info larger */
#gptlike-chat .account-line {
  font-size: clamp(17px, 2.6vw, 20px) !important;
  line-height: 1.55 !important;
}
#gptlike-chat .account-other {
  font-size: clamp(15px, 2.4vw, 18px) !important;
  line-height: 1.5 !important;
}
#gptlike-chat .account-note {
  font-size: clamp(15px, 2.3vw, 17px) !important;
  line-height: 1.45 !important;
}
#gptlike-chat .account-status {
  font-size: clamp(13px, 2.1vw, 15px) !important;
  line-height: 1.4 !important;
}

/* Main menu: allow wrapping in other languages (no ellipsis cut-off) */
#onboardingScreen .onb-page[data-page="2"] .onb-btn,
#onboardingScreen .onb-page[data-page="2"] .onb-btn-label{
  white-space: normal !important;
  text-overflow: clip !important;
}
#onboardingScreen .onb-page[data-page="2"] .onb-btn-label{
  line-height: 1.18;
  overflow: visible !important;
}

/* Settings: bigger font slider touch area + more vertical spacing (mobile-friendly) */
#gptlike-chat .settings-modal .font-slider{
  gap: 16px;
}
#gptlike-chat .settings-modal .font-slider-row{
  padding-block: 8px;
  min-height: 44px;
  gap: 12px;
}
#gptlike-chat .settings-modal .font-range{
  height: 28px;
  background-size: 100% 8px;
  background-position: center;
  background-repeat: no-repeat;
}
#gptlike-chat .settings-modal .font-range::-webkit-slider-thumb{
  width: 28px;
  height: 28px;
}
#gptlike-chat .settings-modal .font-range::-moz-range-thumb{
  width: 28px;
  height: 28px;
}
#gptlike-chat .settings-modal .font-range::-moz-range-track{
  height: 8px;
}

/* Posts header: mark-read icon button */
#gptlike-chat #chatContainer .posts-mark-read-btn{
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid var(--posts-actions-border);
  background: var(--posts-actions-bg);
  color: var(--accent-1);
  line-height: 1;
  cursor: pointer;
  opacity: 0.92;
  box-shadow: none;
  margin-left: 4px;
}
#gptlike-chat #chatContainer .posts-mark-read-btn svg{
  width: 20px;
  height: 20px;
}
#gptlike-chat #chatContainer .posts-mark-read-btn:hover{
  opacity: 1;
  transform: translateY(-1px);
}
#gptlike-chat #chatContainer .posts-mark-read-btn:active{
  transform: translateY(0);
  opacity: 0.85;
}
#gptlike-chat #chatContainer .posts-mark-read-btn:disabled{
  cursor: default;
  opacity: 0.45;
  transform: none;
}
#gptlike-chat #chatContainer[data-screen="posts"][data-posts-view="list"][data-posts-mark="1"] .posts-mark-read-btn{
  display: inline-flex;
}
#gptlike-chat:not([data-theme-light="1"]) #chatContainer .posts-mark-read-btn{
  color: #f8fafc;
}
#gptlike-chat[data-theme-light="1"] #chatContainer .posts-mark-read-btn{
  color: #0f172a;
}


/* Menu text sizing: make labels and descriptions larger */
#gptlike-chat .onb-menu-title{
  font-size: clamp(15px, 2.8vw, 19px) !important;
}
#gptlike-chat .onb-page[data-page="2"] .onb-list .onb-btn-label,
#gptlike-chat .onb-page[data-page="3"] .onb-list .onb-btn-label,
#gptlike-chat .onb-page[data-page="3"] .onb-zone--helper .onb-btn-label{
  font-size: clamp(15px, 2.9vw, 19px) !important;
  line-height: 1.2 !important;
}
#gptlike-chat .onb-page[data-page="2"] .onb-item-desc,
#gptlike-chat .onb-page[data-page="3"] .onb-item-desc,
#gptlike-chat .onb-page[data-page="3"] .onb-zone--helper .onb-item-desc{
  font-size: clamp(12px, 2.4vw, 15px) !important;
  line-height: 1.3 !important;
}
#gptlike-chat .onb-page[data-page="2"] .onb-desc-text,
#gptlike-chat .onb-page[data-page="3"] .onb-desc-text,
#gptlike-chat .onb-page[data-page="3"] .onb-zone--helper .onb-desc-text{
  font-size: clamp(12px, 2.4vw, 15px) !important;
}

/* Back buttons: larger font and hit area */
#gptlike-chat #onbBackTop2,
#gptlike-chat #onbBackTop3,
#gptlike-chat #chatBackBtn,
#gptlike-chat #authBackBtn,
#gptlike-chat #postsBackTopBtn{
  font-size: clamp(15px, 2.8vw, 18px) !important;
  padding: 10px 10px !important;
  min-height: 38px !important;
}

/* Posts header: add a bit more breathing room between title and mark-read button */
#gptlike-chat #chatContainer[data-screen="posts"] .posts-mark-read-btn{
  margin-left: 10px;
}

/* Onboarding page 1: keep full-screen cards while padding UI */
#gptlike-chat #onboardingScreen[data-page="1"]{
  padding: 0 !important;
}
#gptlike-chat #onboardingScreen[data-page="1"] .onb-page[data-page="1"] .onb-frame{
  padding: var(--screen-edge-top) var(--shell-edge-x) var(--shell-edge-bottom);
  box-sizing: border-box;
}

/* Dark theme: gold buttons always use black-blue text. */
#gptlike-chat[data-theme="dark"] .style-close,
#gptlike-chat[data-theme="dark"] .btn-primary,
#gptlike-chat[data-theme="dark"] .btn-secondary,
#gptlike-chat[data-theme="dark"] .post-btn,
#gptlike-chat[data-theme="dark"] .post-action,
#gptlike-chat[data-theme="dark"] .icon-only,
#gptlike-chat[data-theme="dark"] .onb-btn,
#gptlike-chat[data-theme="dark"] .spread-deck-header .ttBtn,
#gptlike-chat[data-theme="dark"] #chatContainer .composer .icon-only,
#gptlike-chat[data-theme="dark"] #chatContainer .composer .btn-primary.icon-only,
#gptlike-chat[data-theme="dark"] #chatContainer .composer .btn-secondary.icon-only,
#gptlike-chat[data-theme="dark"] #chatContainer:is([data-spread-ui="1"], [data-support-ui="1"]) .chat-spread-row .onb-btn,
#gptlike-chat[data-theme="dark"] #chatContainer[data-spread-form^="spread"] .spread-form-deck .onb-btn,
#gptlike-chat[data-theme="dark"] #chatContainer[data-spread-form^="spread"] .spread-check-btn,
#gptlike-chat[data-theme="dark"] #chatContainer[data-readings-view="detail"] .readings-detail-actions .onb-btn,
#gptlike-chat[data-theme="dark"] #chatContainer[data-spread-quota-view="detail"] .spread-quota-detail-actions .onb-btn,
#gptlike-chat[data-theme="dark"] #chatContainer[data-spread1-view="detail"] .posts-detail-actions.spread1-detail-actions .post-btn,
#gptlike-chat[data-theme="dark"] #chatContainer[data-spread2-view="detail"] .posts-detail-actions.spread2-detail-actions .post-btn,
#gptlike-chat[data-theme="dark"] #chatContainer[data-spread3-view="detail"] .posts-detail-actions.spread3-detail-actions .post-btn,
#gptlike-chat[data-theme="dark"] #chatContainer[data-screen="posts"] .post-card-btn,
#gptlike-chat[data-theme="dark"] .onb-page[data-page="2"] .onb-list .onb-btn,
#gptlike-chat[data-theme="dark"] .onb-page[data-page="3"] .onb-list .onb-btn,
#gptlike-chat[data-theme="dark"] .onb-page[data-page="3"] .onb-zone--helper .onb-btn,
#gptlike-chat[data-theme="dark"] .onb-page[data-page="2"] .onb-row-four .onb-btn,
#gptlike-chat[data-theme="dark"] .onb-page[data-page="3"] .onb-row-four .onb-btn {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}
#gptlike-chat[data-theme="dark"] #chatContainer .composer .icon-only svg,
#gptlike-chat[data-theme="dark"] #chatContainer #sendBtn svg,
#gptlike-chat[data-theme="dark"] #chatContainer #uploadBtn svg,
#gptlike-chat[data-theme="dark"] .icon-only svg,
#gptlike-chat[data-theme="dark"] .btn-primary svg,
#gptlike-chat[data-theme="dark"] .btn-secondary svg,
#gptlike-chat[data-theme="dark"] .post-btn svg,
#gptlike-chat[data-theme="dark"] .post-action svg {
  color: #0f172a !important;
}

/* Spread deck close: cross only, no text. */
#gptlike-chat .spread-deck-header .style-close{
  font-size: 0 !important;
  line-height: 0 !important;
  padding: 0 !important;
  width: 36px !important;
  height: 36px !important;
}

#gptlike-chat[data-theme="dark"] .onb-btn-count,
#gptlike-chat[data-theme="dark"] .onb-btn-count--static {
  color: #111827 !important;
  border-color: rgba(23, 32, 46, 0.22) !important;
  background: rgba(255, 255, 255, 0.64) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.78) !important;
}

#gptlike-chat[data-theme="dark"] .onb-page[data-page="2"] .onb-list .onb-help,
#gptlike-chat[data-theme="dark"] .onb-page[data-page="3"] .onb-list .onb-help,
#gptlike-chat[data-theme="dark"] .onb-page[data-page="3"] .onb-zone--helper .onb-help {
  color: var(--onb-help-idle) !important;
  text-shadow: none !important;
}
#gptlike-chat[data-theme="dark"] .onb-page[data-page="2"] .onb-list .onb-help:hover,
#gptlike-chat[data-theme="dark"] .onb-page[data-page="3"] .onb-list .onb-help:hover,
#gptlike-chat[data-theme="dark"] .onb-page[data-page="3"] .onb-zone--helper .onb-help:hover {
  color: rgba(255, 184, 107, 0.98) !important;
}

#gptlike-chat[data-theme="dark"] .onb-item-desc,
#gptlike-chat[data-theme="dark"] .onb-desc-text {
  color: #0f172a !important;
  text-shadow: none !important;
}

#onboardingScreen .onb-item.is-help-open .onb-btn {
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow: none !important;
}
#onboardingScreen .onb-item.is-help-open .onb-btn-label,
#onboardingScreen .onb-item.is-help-open .onb-btn-count,
#onboardingScreen .onb-item.is-help-open .onb-btn-ico {
  opacity: 0 !important;
}

/* === GOLD UI LOCK: cards + buttons across all themes === */
/* NOTE: Gold button gradient must match main menu buttons in all themes. */
#gptlike-chat {
  --gold-ui-bg: linear-gradient(155deg, #ffd5a3 0%, #ffb86b 55%, #e79b43 100%);
  --gold-ui-bg-solid: #ffb86b;
  --gold-ui-border: rgba(255, 184, 107, 0.6);
  --gold-ui-soft-bg: linear-gradient(155deg, #ffe1b8 0%, #ffb86b 60%, #f0a455 100%);
  --gold-ui-soft-border: rgba(255, 184, 107, 0.45);
  --gold-ui-badge-bg: #ffb86b;
  --gold-ui-text: #0f172a;
  --gold-ui-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
  --posts-actions-bg: var(--gold-ui-bg);
  --posts-actions-border: var(--gold-ui-border);
  --posts-actions-divider: rgba(255, 184, 107, 0.35);
  --onb-help-divider: var(--gold-ui-border);
  --lock-bg-image: var(--gold-ui-bg);
  --lock-bg-color: var(--gold-ui-bg-solid);
  --lock-border: var(--gold-ui-border);
  --lock-color: var(--gold-ui-text);
  --lock-shadow: var(--gold-ui-shadow);
  --lock-text-shadow: none;
}

#gptlike-chat:not(.auth-active) button,
#gptlike-chat:not(.auth-active) [role="button"],
#gptlike-chat:not(.auth-active) .btn-primary,
#gptlike-chat:not(.auth-active) .btn-secondary,
#gptlike-chat:not(.auth-active) .post-btn,
#gptlike-chat:not(.auth-active) .post-action,
#gptlike-chat:not(.auth-active) .onb-btn,
#gptlike-chat:not(.auth-active) .style-close,
#gptlike-chat:not(.auth-active) .icon-only,
#gptlike-chat:not(.auth-active) .theme-mode-seg button,
#gptlike-chat:not(.auth-active) .font-weight-btn,
#gptlike-chat:not(.auth-active) #chatContainer .composer .icon-only,
#gptlike-chat:not(.auth-active) #chatContainer .composer .btn-primary.icon-only,
#gptlike-chat:not(.auth-active) #chatContainer .composer .btn-secondary.icon-only,
#gptlike-chat:not(.auth-active) #chatContainer:is([data-spread-ui="1"], [data-support-ui="1"]) .chat-spread-row .onb-btn,
#gptlike-chat:not(.auth-active) #chatContainer[data-spread-form^="spread"] .spread-form-deck .onb-btn,
#gptlike-chat:not(.auth-active) #chatContainer[data-spread-form^="spread"] .spread-check-btn,
#gptlike-chat:not(.auth-active) #chatContainer[data-readings-view="detail"] .readings-detail-actions .onb-btn,
#gptlike-chat:not(.auth-active) #chatContainer[data-spread-quota-view="detail"] .spread-quota-detail-actions .onb-btn {
  background: var(--gold-ui-bg) !important;
  background-color: var(--gold-ui-bg-solid) !important;
  background-image: var(--gold-ui-bg) !important;
  border: 1px solid var(--gold-ui-border) !important;
  color: var(--gold-ui-text) !important;
  -webkit-text-fill-color: var(--gold-ui-text) !important;
  box-shadow: var(--gold-ui-shadow) !important;
  text-shadow: none !important;
}

#gptlike-chat:not(.auth-active)[data-theme] .btn-primary:is(:hover, :focus, :focus-visible, :active),
#gptlike-chat:not(.auth-active)[data-theme] .btn-secondary:is(:hover, :focus, :focus-visible, :active),
#gptlike-chat:not(.auth-active)[data-theme] .post-btn:is(:hover, :focus, :focus-visible, :active),
#gptlike-chat:not(.auth-active)[data-theme] .post-action:is(:hover, :focus, :focus-visible, :active),
#gptlike-chat:not(.auth-active)[data-theme] .onb-btn:is(:hover, :focus, :focus-visible, :active),
#gptlike-chat:not(.auth-active)[data-theme] .style-close:is(:hover, :focus, :focus-visible, :active),
#gptlike-chat:not(.auth-active)[data-theme] .icon-only:is(:hover, :focus, :focus-visible, :active),
#gptlike-chat:not(.auth-active)[data-theme] .theme-mode-seg button:is(:hover, :focus, :focus-visible, :active),
#gptlike-chat:not(.auth-active)[data-theme] .font-weight-btn:is(:hover, :focus, :focus-visible, :active),
#gptlike-chat:not(.auth-active)[data-theme] #chatContainer .composer .icon-only:is(:hover, :focus, :focus-visible, :active),
#gptlike-chat:not(.auth-active)[data-theme] #chatContainer .composer .btn-primary.icon-only:is(:hover, :focus, :focus-visible, :active),
#gptlike-chat:not(.auth-active)[data-theme] #chatContainer .composer .btn-secondary.icon-only:is(:hover, :focus, :focus-visible, :active),
#gptlike-chat:not(.auth-active)[data-theme] #chatContainer:is([data-spread-ui="1"], [data-support-ui="1"]) .chat-spread-row .onb-btn:is(:hover, :focus, :focus-visible, :active),
#gptlike-chat:not(.auth-active)[data-theme] #chatContainer[data-spread-form^="spread"] .spread-form-deck .onb-btn:is(:hover, :focus, :focus-visible, :active),
#gptlike-chat:not(.auth-active)[data-theme] #chatContainer[data-spread-form^="spread"] .spread-check-btn:is(:hover, :focus, :focus-visible, :active),
#gptlike-chat:not(.auth-active)[data-theme] #chatContainer[data-readings-view="detail"] .readings-detail-actions .onb-btn:is(:hover, :focus, :focus-visible, :active),
#gptlike-chat:not(.auth-active)[data-theme] #chatContainer[data-spread-quota-view="detail"] .spread-quota-detail-actions .onb-btn:is(:hover, :focus, :focus-visible, :active),
#gptlike-chat:not(.auth-active)[data-theme] #chatContainer .posts-cards .post-card-btn:is(:hover, :focus, :focus-visible, :active),
#gptlike-chat:not(.auth-active)[data-theme-light] .btn-primary:is(:hover, :focus, :focus-visible, :active),
#gptlike-chat:not(.auth-active)[data-theme-light] .btn-secondary:is(:hover, :focus, :focus-visible, :active),
#gptlike-chat:not(.auth-active)[data-theme-light] .post-btn:is(:hover, :focus, :focus-visible, :active),
#gptlike-chat:not(.auth-active)[data-theme-light] .post-action:is(:hover, :focus, :focus-visible, :active),
#gptlike-chat:not(.auth-active)[data-theme-light] .onb-btn:is(:hover, :focus, :focus-visible, :active),
#gptlike-chat:not(.auth-active)[data-theme-light] .style-close:is(:hover, :focus, :focus-visible, :active),
#gptlike-chat:not(.auth-active)[data-theme-light] .icon-only:is(:hover, :focus, :focus-visible, :active),
#gptlike-chat:not(.auth-active)[data-theme-light] .theme-mode-seg button:is(:hover, :focus, :focus-visible, :active),
#gptlike-chat:not(.auth-active)[data-theme-light] .font-weight-btn:is(:hover, :focus, :focus-visible, :active),
#gptlike-chat:not(.auth-active)[data-theme-light] #chatContainer .composer .icon-only:is(:hover, :focus, :focus-visible, :active),
#gptlike-chat:not(.auth-active)[data-theme-light] #chatContainer .composer .btn-primary.icon-only:is(:hover, :focus, :focus-visible, :active),
#gptlike-chat:not(.auth-active)[data-theme-light] #chatContainer .composer .btn-secondary.icon-only:is(:hover, :focus, :focus-visible, :active),
#gptlike-chat:not(.auth-active)[data-theme-light] #chatContainer:is([data-spread-ui="1"], [data-support-ui="1"]) .chat-spread-row .onb-btn:is(:hover, :focus, :focus-visible, :active),
#gptlike-chat:not(.auth-active)[data-theme-light] #chatContainer[data-spread-form^="spread"] .spread-form-deck .onb-btn:is(:hover, :focus, :focus-visible, :active),
#gptlike-chat:not(.auth-active)[data-theme-light] #chatContainer[data-spread-form^="spread"] .spread-check-btn:is(:hover, :focus, :focus-visible, :active),
#gptlike-chat:not(.auth-active)[data-theme-light] #chatContainer[data-readings-view="detail"] .readings-detail-actions .onb-btn:is(:hover, :focus, :focus-visible, :active),
#gptlike-chat:not(.auth-active)[data-theme-light] #chatContainer[data-spread-quota-view="detail"] .spread-quota-detail-actions .onb-btn:is(:hover, :focus, :focus-visible, :active),
#gptlike-chat:not(.auth-active)[data-theme-light] #chatContainer .posts-cards .post-card-btn:is(:hover, :focus, :focus-visible, :active) {
  background: var(--gold-ui-bg) !important;
  background-color: var(--gold-ui-bg-solid) !important;
  background-image: var(--gold-ui-bg) !important;
  border-color: var(--gold-ui-border) !important;
  color: var(--gold-ui-text) !important;
  -webkit-text-fill-color: var(--gold-ui-text) !important;
  box-shadow: var(--gold-ui-shadow) !important;
  filter: none !important;
  transform: none !important;
}

#gptlike-chat:not(.auth-active) button svg,
#gptlike-chat:not(.auth-active) [role="button"] svg,
#gptlike-chat:not(.auth-active) .btn-primary svg,
#gptlike-chat:not(.auth-active) .btn-secondary svg,
#gptlike-chat:not(.auth-active) .post-btn svg,
#gptlike-chat:not(.auth-active) .post-action svg,
#gptlike-chat:not(.auth-active) .onb-btn svg,
#gptlike-chat:not(.auth-active) .icon-only svg,
#gptlike-chat:not(.auth-active) .theme-mode-seg button svg,
#gptlike-chat:not(.auth-active) .font-weight-btn svg,
#gptlike-chat:not(.auth-active) .style-close svg,
#gptlike-chat:not(.auth-active) #chatContainer .composer .icon-only svg,
#gptlike-chat:not(.auth-active) #chatContainer .composer .btn-primary.icon-only svg,
#gptlike-chat:not(.auth-active) #chatContainer .composer .btn-secondary.icon-only svg,
#gptlike-chat:not(.auth-active)[data-theme] #chatContainer button svg,
#gptlike-chat:not(.auth-active)[data-theme-light] #chatContainer button svg {
  color: var(--gold-ui-text) !important;
}

#gptlike-chat[data-theme] .onb-btn-count,
#gptlike-chat[data-theme] .onb-btn-count--static,
#gptlike-chat[data-theme-light] .onb-btn-count,
#gptlike-chat[data-theme-light] .onb-btn-count--static {
  background: var(--gold-ui-badge-bg) !important;
  border: 1px solid var(--gold-ui-soft-border) !important;
  color: var(--gold-ui-text) !important;
  box-shadow: none !important;
}

#gptlike-chat #chatContainer[data-screen] .posts-cards .post-card-btn,
#gptlike-chat[data-theme] #chatContainer[data-screen] .posts-cards .post-card-btn,
#gptlike-chat[data-theme-light] #chatContainer[data-screen] .posts-cards .post-card-btn,
#gptlike-chat #chatContainer .posts-cards .post-card-btn,
#gptlike-chat[data-theme] #chatContainer .posts-cards .post-card-btn,
#gptlike-chat[data-theme-light] #chatContainer .posts-cards .post-card-btn {
  background: var(--gold-ui-bg) !important;
  background-color: var(--gold-ui-bg-solid) !important;
  background-image: var(--gold-ui-bg) !important;
  border: 1px solid var(--gold-ui-border) !important;
  box-shadow: var(--gold-ui-shadow) !important;
  color: var(--gold-ui-text) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 0 !important;
  padding: 16px 14px !important;
  min-height: calc(38px + (1.3em * 6)) !important;
  white-space: normal !important;
}

#gptlike-chat #chatContainer .posts-cards .post-card-meta,
#gptlike-chat[data-theme] #chatContainer .posts-cards .post-card-meta,
#gptlike-chat[data-theme-light] #chatContainer .posts-cards .post-card-meta {
  margin-bottom: 6px !important;
}

#gptlike-chat #chatContainer .posts-cards .post-card-date,
#gptlike-chat #chatContainer .posts-cards .post-card-time,
#gptlike-chat #chatContainer .posts-cards .post-card-read,
#gptlike-chat[data-theme] #chatContainer .posts-cards .post-card-date,
#gptlike-chat[data-theme] #chatContainer .posts-cards .post-card-time,
#gptlike-chat[data-theme] #chatContainer .posts-cards .post-card-read,
#gptlike-chat[data-theme-light] #chatContainer .posts-cards .post-card-date,
#gptlike-chat[data-theme-light] #chatContainer .posts-cards .post-card-time,
#gptlike-chat[data-theme-light] #chatContainer .posts-cards .post-card-read {
  color: var(--gold-ui-text) !important;
  font-size: var(--fs-xs, 12px) !important;
  line-height: 1.3 !important;
  margin: 0 !important;
}

#gptlike-chat #chatContainer .posts-cards .post-card-snippet,
#gptlike-chat[data-theme] #chatContainer .posts-cards .post-card-snippet,
#gptlike-chat[data-theme-light] #chatContainer .posts-cards .post-card-snippet {
  color: var(--gold-ui-text) !important;
  font-size: calc(var(--fs-sm, 14px) + 1px) !important;
  line-height: 1.3 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  min-height: calc(1.3em * 3) !important;
  max-height: calc(1.3em * 3) !important;
}

#gptlike-chat #chatContainer .posts-cards .post-card-read,
#gptlike-chat[data-theme] #chatContainer .posts-cards .post-card-read,
#gptlike-chat[data-theme-light] #chatContainer .posts-cards .post-card-read {
  text-align: right !important;
  margin-top: calc(1.3em) !important;
}

#gptlike-chat #onboardingScreen .onb-btn-ico,
#gptlike-chat #chatContainer .onb-btn-ico,
#gptlike-chat[data-theme] #onboardingScreen .onb-btn-ico,
#gptlike-chat[data-theme] #chatContainer .onb-btn-ico,
#gptlike-chat[data-theme-light] #onboardingScreen .onb-btn-ico,
#gptlike-chat[data-theme-light] #chatContainer .onb-btn-ico {
  color: var(--gold-ui-text) !important;
}

#gptlike-chat #onboardingScreen .onb-help,
#gptlike-chat #onboardingScreen .onb-help svg {
  color: #ffffff !important;
}

/* Bottom menu (row of 4 icons): icons-only, no button background. */
#gptlike-chat #onboardingScreen .onb-row-four .onb-btn,
#gptlike-chat #onboardingScreen .onb-row-four .onb-btn:hover,
#gptlike-chat #onboardingScreen .onb-row-four .onb-btn:focus,
#gptlike-chat #onboardingScreen .onb-row-four .onb-btn:focus-visible,
#gptlike-chat #onboardingScreen .onb-row-four .onb-btn:active {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
}
#gptlike-chat #onboardingScreen .onb-row-four .onb-btn::before,
#gptlike-chat #onboardingScreen .onb-row-four .onb-btn::after {
  content: none !important;
  display: none !important;
}
#gptlike-chat #onboardingScreen .onb-row-four .onb-btn-ico,
#gptlike-chat #onboardingScreen .onb-row-four .onb-btn-ico svg {
  color: var(--gold-ui-text) !important;
}
#gptlike-chat[data-theme="dark"] #onboardingScreen .onb-row-four .onb-btn-ico,
#gptlike-chat[data-theme="dark"] #onboardingScreen .onb-row-four .onb-btn-ico svg {
  color: #ffffff !important;
}
#gptlike-chat[data-theme="gold"] #onboardingScreen .onb-row-four .onb-btn-ico,
#gptlike-chat[data-theme="gold"] #onboardingScreen .onb-row-four .onb-btn-ico svg {
  color: #0f172a !important;
}

#gptlike-chat .onb-row-four .onb-btn,
#gptlike-chat .onb-page[data-page="2"] .onb-row-four .onb-btn,
#gptlike-chat .onb-page[data-page="3"] .onb-row-four .onb-btn,
#gptlike-chat .onb-row-four .onb-btn:hover,
#gptlike-chat .onb-row-four .onb-btn:focus,
#gptlike-chat .onb-row-four .onb-btn:focus-visible,
#gptlike-chat .onb-row-four .onb-btn:active {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
}
#gptlike-chat .onb-row-four .onb-btn::before,
#gptlike-chat .onb-row-four .onb-btn::after {
  content: none !important;
  display: none !important;
}
#gptlike-chat .onb-row-four .onb-btn-ico{
  width: 37px !important;
  height: 37px !important;
  flex: 0 0 37px !important;
}
#gptlike-chat .onb-row-four .onb-btn-ico svg{
  width: 34px !important;
  height: 34px !important;
}
#gptlike-chat .onb-row-four .onb-btn-ico,
#gptlike-chat .onb-row-four .onb-btn-ico svg {
  color: var(--gold-ui-text) !important;
}
#gptlike-chat[data-theme="dark"] .onb-row-four .onb-btn-ico,
#gptlike-chat[data-theme="dark"] .onb-row-four .onb-btn-ico svg {
  color: #ffffff !important;
}
#gptlike-chat[data-theme="gold"] .onb-row-four .onb-btn-ico,
#gptlike-chat[data-theme="gold"] .onb-row-four .onb-btn-ico svg {
  color: #0f172a !important;
}

/* Settings gear icon: remove any visual artifacts. */
#gptlike-chat #settingsBtn svg,
#gptlike-chat #onboardingScreen [data-onb-action="settings"] .onb-btn-ico svg {
  opacity: 1 !important;
  filter: none !important;
  shape-rendering: geometricPrecision;
  fill: currentColor !important;
}
#gptlike-chat #onboardingScreen [data-onb-action="settings"] .onb-btn-ico svg{
  width: 34px !important;
  height: 34px !important;
  display: block !important;
  aspect-ratio: 1 / 1;
}
#gptlike-chat #settingsBtn svg path,
#gptlike-chat #onboardingScreen [data-onb-action="settings"] .onb-btn-ico svg path {
  fill: currentColor !important;
  stroke: none !important;
}
#gptlike-chat #onboardingScreen [data-onb-action="settings"] .onb-btn-ico svg.onb-gear-icon{
  width: 30px !important;
  height: 30px !important;
  display: block !important;
}
#gptlike-chat #onboardingScreen [data-onb-action="settings"] .onb-btn-ico svg.onb-gear-icon path,
#gptlike-chat #onboardingScreen [data-onb-action="settings"] .onb-btn-ico svg.onb-gear-icon circle{
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.5 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  vector-effect: non-scaling-stroke;
}

/* Dark theme: remove background image darkening outside the first main screen. */
#gptlike-chat[data-theme="dark"]:not(.onboarding-active) {
  --app-bg-overlay: rgba(0, 0, 0, 0);
  --app-bg-before-opacity: 0;
  --app-bg-after-a: rgba(0, 0, 0, 0);
  --app-bg-after-c: rgba(0, 0, 0, 0);
}

/* Remove all shadows/filters outside the main (onboarding page 1) screen. */
body:not(.onboarding-main):not(.onboarding-active):not(.auth-lock-active) {
  --app-bg-overlay: rgba(0, 0, 0, 0);
  --app-bg-before-opacity: 0;
  --app-bg-after-a: rgba(0, 0, 0, 0);
  --app-bg-after-c: rgba(0, 0, 0, 0);
}
body:not(.onboarding-main):not(.onboarding-active):not(.auth-lock-active) #appGlobalBackground,
body:not(.onboarding-main):not(.onboarding-active):not(.auth-lock-active) #appGlobalBackground::before,
body:not(.onboarding-main):not(.onboarding-active):not(.auth-lock-active) #appGlobalBackground::after,
body:not(.onboarding-main):not(.onboarding-active):not(.auth-lock-active) #gptlike-chat,
body:not(.onboarding-main):not(.onboarding-active):not(.auth-lock-active) #gptlike-chat * {
  box-shadow: none !important;
  text-shadow: none !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Modal unification: full-screen with inset, dark navy background, soft gold border. */
#gptlike-chat {
  --modal-inset: clamp(12px, 2.6vw, 24px);
  --modal-bg: #06080f;
}
#gptlike-chat .style-modal {
  background: var(--modal-bg) !important;
  border: 1px solid var(--gold-ui-border) !important;
  --modal-close-offset: 8px;
  --modal-pad-top: 12px;
  --modal-pad-right: 12px;
}
#gptlike-chat .style-modal.settings-modal,
#gptlike-chat .style-modal.account-modal {
  --modal-pad-right: var(--shell-inner-x);
}
#gptlike-chat .style-modal.style-modal--fullscreen {
  --modal-pad-top: var(--screen-edge-top);
  --modal-pad-right: var(--screen-edge-x);
}
#gptlike-chat .style-modal:not(.spread-deck-modal) .style-close {
  position: absolute !important;
  top: calc(var(--modal-close-offset) - var(--modal-pad-top)) !important;
  right: calc(var(--modal-close-offset) - var(--modal-pad-right)) !important;
  margin: 0 !important;
}
#gptlike-chat .style-modal:not(.spread-deck-modal) .style-modal-header {
  padding-right: 64px !important;
}
#gptlike-chat .style-modal:not(.spread-deck-modal) .style-modal-title {
  max-width: calc(100% - 64px) !important;
}
#gptlike-chat:not([data-theme-light="1"]) .confirm {
  background: var(--modal-bg) !important;
  border-color: var(--gold-ui-border) !important;
}
#gptlike-chat:not([data-theme-light="1"]) .confirm::before {
  display: none !important;
}
#gptlike-chat[data-theme-light="1"] #accountModalBackdrop {
  --modal-bg: #fffdf9;
}
#gptlike-chat .style-modal::before {
  display: none !important;
}
#gptlike-chat #spreadDeckBackdrop .spread-deck-modal {
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  max-height: none !important;
  border-radius: 0 !important;
  border: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}
#gptlike-chat #styleModalBackdrop .settings-modal,
#gptlike-chat #accountModalBackdrop .account-modal {
  width: min(560px, var(--modalW)) !important;
  max-width: min(560px, var(--modalW)) !important;
  height: auto !important;
  max-height: calc(100dvh - (var(--modal-inset) * 2)) !important;
  border-radius: 16px !important;
  margin: 0 !important;
  overflow: auto !important;
}

/* Settings modal: remove container outlines. */
#gptlike-chat #styleModalBackdrop .settings-modal .font-preview,
#gptlike-chat #styleModalBackdrop .settings-modal .font-weight-seg,
#gptlike-chat #styleModalBackdrop .settings-modal .theme-mode-seg button,
#gptlike-chat #styleModalBackdrop .settings-modal .settings-seg {
  border: 0 !important;
  box-shadow: none !important;
}
#gptlike-chat #styleModalBackdrop .settings-modal .theme-mode-seg button::before {
  border: 0 !important;
  box-shadow: none !important;
}

/* Settings modal: kill any remaining container borders/outlines (final override). */
#gptlike-chat #styleModalBackdrop .settings-modal .font-preview,
#gptlike-chat #styleModalBackdrop .settings-modal .font-weight-seg,
#gptlike-chat #styleModalBackdrop .settings-modal .theme-mode-seg,
#gptlike-chat #styleModalBackdrop .settings-modal .settings-seg {
  border: 0 !important;
  border-color: transparent !important;
  outline: 0 !important;
  box-shadow: none !important;
}

/* Settings: clean slider + preview field + active states. */
#gptlike-chat #styleModalBackdrop .settings-modal .font-preview {
  background: rgba(255, 255, 255, 0.06) !important;
  border-radius: 12px !important;
  padding: 12px 14px !important;
}
#gptlike-chat #styleModalBackdrop .settings-modal .font-slider-row {
  gap: 12px !important;
}
#gptlike-chat #styleModalBackdrop .settings-modal .font-range {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
}
#gptlike-chat #styleModalBackdrop .settings-modal .font-range::-webkit-slider-runnable-track {
  height: 4px !important;
  border: 0 !important;
  background: linear-gradient(
    90deg,
    var(--accent-1) 0%,
    var(--accent-2) var(--range-progress, 50%),
    rgba(255,255,255,0.14) var(--range-progress, 50%),
    rgba(255,255,255,0.14) 100%
  ) !important;
  border-radius: 999px !important;
}
#gptlike-chat #styleModalBackdrop .settings-modal .font-range::-moz-range-track {
  height: 4px !important;
  border: 0 !important;
  background: linear-gradient(
    90deg,
    var(--accent-1) 0%,
    var(--accent-2) var(--range-progress, 50%),
    rgba(255,255,255,0.14) var(--range-progress, 50%),
    rgba(255,255,255,0.14) 100%
  ) !important;
  border-radius: 999px !important;
}
#gptlike-chat #styleModalBackdrop .settings-modal .font-weight-btn,
#gptlike-chat #styleModalBackdrop .settings-modal .theme-mode-seg button {
  position: relative !important;
  background: var(--gold-ui-bg) !important;
  color: var(--gold-ui-text) !important;
  border: 0 !important;
  box-shadow: none !important;
}
#gptlike-chat #styleModalBackdrop .settings-modal .theme-mode-seg button[data-active="true"]::after {
  content: "" !important;
  width: 18px !important;
  height: 18px !important;
  position: absolute !important;
  right: 10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  background-color: var(--gold-ui-text) !important;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12l4 4 10-10'/></svg>") center/contain no-repeat !important;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12l4 4 10-10'/></svg>") center/contain no-repeat !important;
}
#gptlike-chat #styleModalBackdrop .settings-modal .theme-mode-seg button::before {
  background: #0f172a !important;
}
#gptlike-chat #styleModalBackdrop .settings-modal .theme-mode-seg button[data-theme-mode="gold"]::before {
  background: #ffffff !important;
}

#gptlike-chat #styleModalBackdrop .settings-modal .font-range::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  width: 20px !important;
  height: 20px !important;
  border-radius: 999px !important;
  background: var(--gold-ui-bg) !important;
  border: 1px solid var(--gold-ui-border) !important;
  margin-top: -8px !important;
}
#gptlike-chat #styleModalBackdrop .settings-modal .font-range::-moz-range-thumb {
  width: 20px !important;
  height: 20px !important;
  border-radius: 999px !important;
  background: var(--gold-ui-bg) !important;
  border: 1px solid var(--gold-ui-border) !important;
}

/* Settings buttons: same gold gradient as main menu. */
#gptlike-chat #styleModalBackdrop .settings-modal .btn-primary,
#gptlike-chat #styleModalBackdrop .settings-modal .btn-secondary,
#gptlike-chat #styleModalBackdrop .settings-modal .theme-mode-seg button {
  background: var(--gold-ui-bg) !important;
  border: 1px solid var(--gold-ui-border) !important;
  color: var(--gold-ui-text) !important;
  -webkit-text-fill-color: var(--gold-ui-text) !important;
}

/* Modal close button: square gold button with big centered cross. */
#gptlike-chat .style-close {
  font-size: 0 !important;
  line-height: 0 !important;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  padding: 0 !important;
  border-radius: 6px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-left: auto !important;
}
#gptlike-chat .style-close::before {
  content: "" !important;
  display: block !important;
  width: 22px !important;
  height: 22px !important;
  background-color: currentColor !important;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round' fill='none'><path d='M6 6l12 12M18 6L6 18'/></svg>") center/contain no-repeat !important;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round' fill='none'><path d='M6 6l12 12M18 6L6 18'/></svg>") center/contain no-repeat !important;
}

/* All borders in app: soft gold. */
#gptlike-chat,
#gptlike-chat * {
  border-color: var(--gold-ui-border) !important;
}

#gptlike-chat #onbBackTop2,
#gptlike-chat #onbBackTop3,
#gptlike-chat #chatBackBtn,
#gptlike-chat #authBackBtn,
#gptlike-chat #postsBackTopBtn,
#gptlike-chat #chatContainer .message[data-from-posts="1"] .post-actions .post-btn[data-role="back"] {
  background: var(--gold-ui-bg) !important;
  background-color: var(--gold-ui-bg-solid) !important;
  border: 1px solid var(--gold-ui-border) !important;
  color: var(--gold-ui-text) !important;
  -webkit-text-fill-color: var(--gold-ui-text) !important;
  box-shadow: var(--gold-ui-shadow) !important;
}
#gptlike-chat #onbBackTop2 svg,
#gptlike-chat #onbBackTop3 svg,
#gptlike-chat #chatBackBtn svg,
#gptlike-chat #authBackBtn svg,
#gptlike-chat #postsBackTopBtn svg {
  color: var(--gold-ui-text) !important;
}

#gptlike-chat #chatContainer .chat-clear-btn {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
#gptlike-chat #chatContainer .chat-clear-btn:hover,
#gptlike-chat #chatContainer .chat-clear-btn:focus,
#gptlike-chat #chatContainer .chat-clear-btn:focus-visible,
#gptlike-chat #chatContainer .chat-clear-btn:active {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
}
#gptlike-chat #chatContainer .chat-clear-btn svg {
  color: #ffb86b !important;
}

#gptlike-chat[data-theme="dark"] #chatContainer #uploadBtn svg,
#gptlike-chat[data-theme="dark"] #chatContainer #sendBtn svg {
  color: #ffb86b !important;
}

#gptlike-chat #onboardingScreen .onb-help,
#gptlike-chat #onboardingScreen .onb-help:hover,
#gptlike-chat #onboardingScreen .onb-help:focus,
#gptlike-chat #onboardingScreen .onb-help:focus-visible,
#gptlike-chat #onboardingScreen .onb-help:active {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-shadow: none !important;
}
#gptlike-chat #onboardingScreen .onb-help svg {
  color: #ffffff !important;
}

#gptlike-chat:not([data-theme="dark"]) #chatContainer:is([data-screen="posts"][data-posts-view="detail"], [data-support-view="detail"], [data-screen="instruction"][data-instruction-view="detail"], [data-screen="posts"][data-spread-quota-view="detail"]) .posts-detail-scroll {
  background: var(--gold-ui-bg) !important;
  color: var(--gold-ui-text) !important;
  border: 1px solid var(--gold-ui-border) !important;
  box-shadow: var(--gold-ui-shadow) !important;
}
#gptlike-chat:not([data-theme="dark"]) #chatContainer:is([data-screen="posts"][data-posts-view="detail"], [data-support-view="detail"], [data-screen="instruction"][data-instruction-view="detail"], [data-screen="posts"][data-spread-quota-view="detail"]) .posts-detail-scroll * {
  color: var(--gold-ui-text) !important;
}

#gptlike-chat[data-theme="dark"] #chatContainer:is([data-screen="posts"][data-posts-view="detail"], [data-support-view="detail"], [data-screen="instruction"][data-instruction-view="detail"], [data-screen="posts"][data-spread-quota-view="detail"]) .posts-detail-scroll {
  background: #0b1118 !important;
  color: #e6eef6 !important;
  border: 1px solid var(--gold-ui-border) !important;
  box-shadow: none !important;
}
#gptlike-chat[data-theme="dark"] #chatContainer:is([data-screen="posts"][data-posts-view="detail"], [data-support-view="detail"], [data-screen="instruction"][data-instruction-view="detail"], [data-screen="posts"][data-spread-quota-view="detail"]) .posts-detail-scroll * {
  color: #e6eef6 !important;
}

#gptlike-chat * {
  border-color: var(--gold-ui-border) !important;
}

#gptlike-chat .messages,
#gptlike-chat .input,
#gptlike-chat .composer,
#gptlike-chat .composer-frame,
#gptlike-chat input,
#gptlike-chat textarea,
#gptlike-chat select,
#gptlike-chat .style-modal,
#gptlike-chat .confirm,
#gptlike-chat .auth-panel,
#gptlike-chat .mode-select {
  border: 1px solid var(--gold-ui-border) !important;
}

/* Chat screens: borders match "My account" */
#gptlike-chat #chatContainer .chat-shell,
#gptlike-chat #chatContainer .chat-backbar,
#gptlike-chat #chatContainer .chat-titlebar,
#gptlike-chat #chatContainer .chat-body,
#gptlike-chat #chatContainer .messages,
#gptlike-chat #chatContainer .composer-wrapper,
#gptlike-chat #chatContainer .composer,
#gptlike-chat #chatContainer .input,
#gptlike-chat #chatContainer .chat-lower {
  border-color: var(--gold-ui-border) !important;
}
#gptlike-chat #chatContainer .chat-backbar {
  border-bottom-color: var(--gold-ui-border) !important;
}
/* Detail chat views: restore border color and radius */
#gptlike-chat #chatContainer:is([data-screen="posts"][data-posts-view="detail"], [data-support-view="detail"], [data-screen="instruction"][data-instruction-view="detail"], [data-screen="posts"][data-spread-quota-view="detail"]) .chat-shell {
  border: 1px solid var(--gold-ui-border) !important;
  border-radius: 12px !important;
}
#gptlike-chat #chatContainer:is([data-screen="posts"][data-posts-view="detail"], [data-screen="instruction"][data-instruction-view="detail"], [data-screen="posts"][data-spread-quota-view="detail"]) .messages {
  border: 1px solid var(--gold-ui-border) !important;
  border-radius: 12px !important;
}

/* Chat borders: unify to My Account gold in posts/support/consultant/spreads */
#gptlike-chat #chatContainer[data-screen="posts"] .messages,
#gptlike-chat #chatContainer[data-support-view] .messages,
#gptlike-chat #chatContainer[data-mode="consultant"] .messages,
#gptlike-chat #chatContainer[data-spread-ui="1"] .messages,
#gptlike-chat #chatContainer[data-spread-form^="spread"] .messages {
  border-color: var(--gold-ui-border) !important;
  box-shadow: inset 0 0 0 1px var(--gold-ui-border) !important;
}
#gptlike-chat #chatContainer[data-screen="posts"] .chat-shell,
#gptlike-chat #chatContainer[data-support-view] .chat-shell,
#gptlike-chat #chatContainer[data-mode="consultant"] .chat-shell,
#gptlike-chat #chatContainer[data-spread-ui="1"] .chat-shell,
#gptlike-chat #chatContainer[data-spread-form^="spread"] .chat-shell {
  border-color: var(--gold-ui-border) !important;
}
#gptlike-chat #chatContainer[data-screen="posts"] .post-card-btn,
#gptlike-chat #chatContainer[data-support-view="list"] .post-card-btn {
  border-color: var(--gold-ui-border) !important;
}
/* Support/Posts list: force vertical list without horizontal scroll */
#gptlike-chat #chatContainer[data-screen="posts"] .messages,
#gptlike-chat #chatContainer[data-support-view="list"] .messages{
  overflow-x: hidden !important;
}
#gptlike-chat #chatContainer[data-screen="posts"] .posts-cards,
#gptlike-chat #chatContainer[data-support-view="list"] .posts-cards{
  overflow-x: hidden !important;
  scroll-snap-type: none !important;
  flex-direction: column !important;
  align-items: stretch !important;
}

/* Opaque buttons everywhere (except main screen) */
body:not(.onboarding-main) #gptlike-chat button,
body:not(.onboarding-main) #gptlike-chat [role="button"] {
  background: var(--gold-ui-bg) !important;
  background-image: var(--gold-ui-bg) !important;
  background-color: var(--gold-ui-bg-solid) !important;
  opacity: 1 !important;
}
body:not(.onboarding-main) #gptlike-chat button::before,
body:not(.onboarding-main) #gptlike-chat button::after,
body:not(.onboarding-main) #gptlike-chat [role="button"]::before,
body:not(.onboarding-main) #gptlike-chat [role="button"]::after {
  content: none !important;
  opacity: 0 !important;
}
body:not(.onboarding-main) #gptlike-chat .onb-row-four .onb-btn,
body:not(.onboarding-main) #gptlike-chat #onboardingScreen .onb-row-four .onb-btn {
  background: transparent !important;
  background-image: none !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
body:not(.onboarding-main) #gptlike-chat .onb-row-four .onb-btn::before,
body:not(.onboarding-main) #gptlike-chat .onb-row-four .onb-btn::after {
  content: none !important;
  display: none !important;
}

/* =========================
   Remove transparency outside main screen
   ========================= */
body:not(.onboarding-main) #gptlike-chat {
  --ui-surface-1: #14151c;
  --ui-surface-2: #1a1b23;
  --ui-surface-3: #20212b;
  --panel: #1a1a21;
  --input-bg: #0f1016;
  --chat-input-bg: #0f1016;
}
body:not(.onboarding-main) #gptlike-chat[data-theme-light="1"] {
  --ui-surface-1: #fff3e4;
  --ui-surface-2: #fff7ee;
  --ui-surface-3: #fffaf5;
  --panel: #fff2df;
  --input-bg: #fff7ee;
  --chat-input-bg: #ffffff;
}
body:not(.onboarding-main) .style-modal-backdrop,
body:not(.onboarding-main) .confirm-backdrop {
  background: #000000 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
body:not(.onboarding-main) .style-modal {
  background: var(--ui-surface-2) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
body:not(.onboarding-main) .chat-header,
body:not(.onboarding-main) .composer-wrapper,
body:not(.onboarding-main) .messages {
  background: var(--ui-surface-1) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
body:not(.onboarding-main) .input,
body:not(.onboarding-main) input,
body:not(.onboarding-main) textarea,
body:not(.onboarding-main) select {
  background: var(--input-bg) !important;
}
body:not(.onboarding-main) #chatContainer .input {
  background: var(--chat-input-bg) !important;
}

/* Final: force opaque button backgrounds outside main screen */
body:not(.onboarding-main) #gptlike-chat #chatContainer button,
body:not(.onboarding-main) #gptlike-chat #chatContainer [role="button"],
body:not(.onboarding-main) #gptlike-chat #onboardingScreen button,
body:not(.onboarding-main) #gptlike-chat #onboardingScreen [role="button"],
body:not(.onboarding-main) #gptlike-chat .style-modal button,
body:not(.onboarding-main) #gptlike-chat .confirm button,
body:not(.onboarding-main) #gptlike-chat .auth-panel button,
body:not(.onboarding-main) #gptlike-chat .settings-seg button {
  background: var(--gold-ui-bg) !important;
  background-image: var(--gold-ui-bg) !important;
  background-color: var(--gold-ui-bg-solid) !important;
  border: 1px solid var(--gold-ui-border) !important;
  box-shadow: var(--gold-ui-shadow) !important;
  color: var(--gold-ui-text) !important;
  -webkit-text-fill-color: var(--gold-ui-text) !important;
  opacity: 1 !important;
  filter: none !important;
}
body:not(.onboarding-main) #gptlike-chat .auth-panel button.telegram-btn {
  background: #2aabee !important;
  background-image: none !important;
  background-color: #2aabee !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  box-shadow: 0 10px 18px rgba(0, 0, 0, 0.28) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
body:not(.onboarding-main) #gptlike-chat .auth-panel button.telegram-btn:disabled {
  opacity: 0.6 !important;
  filter: saturate(0.7) !important;
  box-shadow: none !important;
}
body:not(.onboarding-main) #gptlike-chat #onboardingScreen .onb-row-four .onb-btn,
body:not(.onboarding-main) #gptlike-chat #onboardingScreen .onb-row-four .onb-btn:hover,
body:not(.onboarding-main) #gptlike-chat #onboardingScreen .onb-row-four .onb-btn:focus,
body:not(.onboarding-main) #gptlike-chat #onboardingScreen .onb-row-four .onb-btn:focus-visible,
body:not(.onboarding-main) #gptlike-chat #onboardingScreen .onb-row-four .onb-btn:active {
  background: transparent !important;
  background-image: none !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

Local: Gold buttons + cards for specific sections (item 1)
   Scope: main menu list, posts/support/readings lists + actions
   ========================================================== */
#gptlike-chat #onboardingScreen .onb-page[data-page="2"] .onb-list{
  --local-gold-bg: linear-gradient(155deg, #ffd5a3 0%, #ffb86b 55%, #e79b43 100%);
  --local-gold-border: rgba(255, 184, 107, 0.6);
  --local-gold-text: #0f172a;
}
#gptlike-chat #onboardingScreen .onb-page[data-page="2"] .onb-list .onb-btn{
  background: var(--local-gold-bg) !important;
  background-image: var(--local-gold-bg) !important;
  background-color: #ffb86b !important;
  border: 1px solid var(--local-gold-border) !important;
  color: var(--local-gold-text) !important;
  -webkit-text-fill-color: var(--local-gold-text) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
  text-shadow: none !important;
}
#gptlike-chat #onboardingScreen .onb-page[data-page="2"] .onb-list .onb-btn-label,
#gptlike-chat #onboardingScreen .onb-page[data-page="2"] .onb-list .onb-btn-count{
  color: var(--local-gold-text) !important;
}

#gptlike-chat #chatContainer[data-screen="posts"],
#gptlike-chat #chatContainer[data-support-view],
#gptlike-chat #chatContainer[data-readings-view]{
  --local-gold-bg: linear-gradient(155deg, #ffd5a3 0%, #ffb86b 55%, #e79b43 100%);
  --local-gold-border: rgba(255, 184, 107, 0.6);
  --local-gold-text: #0f172a;
}
#gptlike-chat #chatContainer[data-screen="posts"] .post-card-btn,
#gptlike-chat #chatContainer[data-support-view] .post-card-btn,
#gptlike-chat #chatContainer[data-readings-view] .post-card-btn{
  background: var(--local-gold-bg) !important;
  background-image: var(--local-gold-bg) !important;
  background-color: #ffb86b !important;
  border: 1px solid var(--local-gold-border) !important;
  color: var(--local-gold-text) !important;
  -webkit-text-fill-color: var(--local-gold-text) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
  text-shadow: none !important;
}
#gptlike-chat #chatContainer[data-screen="posts"] .post-card-date,
#gptlike-chat #chatContainer[data-support-view] .post-card-date,
#gptlike-chat #chatContainer[data-readings-view] .post-card-date,
#gptlike-chat #chatContainer[data-screen="posts"] .post-card-time,
#gptlike-chat #chatContainer[data-support-view] .post-card-time,
#gptlike-chat #chatContainer[data-readings-view] .post-card-time,
#gptlike-chat #chatContainer[data-screen="posts"] .post-card-snippet,
#gptlike-chat #chatContainer[data-support-view] .post-card-snippet,
#gptlike-chat #chatContainer[data-readings-view] .post-card-snippet,
#gptlike-chat #chatContainer[data-screen="posts"] .post-card-read,
#gptlike-chat #chatContainer[data-support-view] .post-card-read,
#gptlike-chat #chatContainer[data-readings-view] .post-card-read{
  color: var(--local-gold-text) !important;
}
#gptlike-chat #chatContainer[data-screen="posts"] .post-actions .post-btn,
#gptlike-chat #chatContainer[data-support-view] .post-actions .post-btn,
#gptlike-chat #chatContainer[data-readings-view] .post-actions .post-btn,
#gptlike-chat #chatContainer[data-screen="posts"] .readings-detail-actions .onb-btn,
#gptlike-chat #chatContainer[data-support-view] .readings-detail-actions .onb-btn,
#gptlike-chat #chatContainer[data-readings-view] .readings-detail-actions .onb-btn{
  background: var(--local-gold-bg) !important;
  background-image: var(--local-gold-bg) !important;
  background-color: #ffb86b !important;
  border: 1px solid var(--local-gold-border) !important;
  color: var(--local-gold-text) !important;
  -webkit-text-fill-color: var(--local-gold-text) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
  text-shadow: none !important;
}
#gptlike-chat #chatContainer[data-screen="posts"] .post-actions .post-btn svg,
#gptlike-chat #chatContainer[data-support-view] .post-actions .post-btn svg,
#gptlike-chat #chatContainer[data-readings-view] .post-actions .post-btn svg{
  color: var(--local-gold-text) !important;
  fill: currentColor !important;
}

/* Local: cards spacing (equal top/bottom, no extra blank line) */
#gptlike-chat #chatContainer[data-screen="posts"] .post-card-btn,
#gptlike-chat #chatContainer[data-support-view] .post-card-btn,
#gptlike-chat #chatContainer[data-readings-view] .post-card-btn{
  padding-top: 16px !important;
  padding-bottom: 16px !important;
  gap: 0 !important;
  min-height: auto !important;
  height: auto !important;
}
#gptlike-chat #chatContainer[data-screen="posts"] .post-card-meta,
#gptlike-chat #chatContainer[data-support-view] .post-card-meta,
#gptlike-chat #chatContainer[data-readings-view] .post-card-meta{
  margin: 0 0 6px !important;
}
#gptlike-chat #chatContainer[data-screen="posts"] .post-card-snippet,
#gptlike-chat #chatContainer[data-support-view] .post-card-snippet,
#gptlike-chat #chatContainer[data-readings-view] .post-card-snippet{
  margin: 0 !important;
}
#gptlike-chat #chatContainer[data-screen="posts"] .post-card-read,
#gptlike-chat #chatContainer[data-support-view] .post-card-read,
#gptlike-chat #chatContainer[data-readings-view] .post-card-read{
  margin: 0 !important;
  margin-top: 0 !important;
  line-height: 1.25 !important;
}
#gptlike-chat #chatContainer[data-screen="posts"] .post-card-date,
#gptlike-chat #chatContainer[data-support-view] .post-card-date,
#gptlike-chat #chatContainer[data-readings-view] .post-card-date,
#gptlike-chat #chatContainer[data-screen="posts"] .post-card-time,
#gptlike-chat #chatContainer[data-support-view] .post-card-time,
#gptlike-chat #chatContainer[data-readings-view] .post-card-time{
  line-height: 1.25 !important;
}

/* Local: cards list should not shrink on pull + safe scrollbar padding */
#gptlike-chat #chatContainer[data-screen="posts"] .messages,
#gptlike-chat #chatContainer[data-support-view="list"] .messages,
#gptlike-chat #chatContainer[data-readings-view="list"] .messages{
  overscroll-behavior-y: contain !important;
  overscroll-behavior-x: none !important;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable !important;
  scrollbar-width: thin !important;
  scrollbar-color: var(--gold-ui-border) rgba(0, 0, 0, 0.22) !important;
  padding-right: 8px !important;
}
#gptlike-chat #chatContainer[data-screen="posts"] .posts-cards,
#gptlike-chat #chatContainer[data-support-view="list"] .posts-cards,
#gptlike-chat #chatContainer[data-readings-view="list"] .posts-cards{
  padding-right: 8px !important;
  box-sizing: border-box !important;
  flex: 0 0 auto !important;
  min-height: 100% !important;
}
#gptlike-chat #chatContainer[data-screen="posts"] .messages::-webkit-scrollbar,
#gptlike-chat #chatContainer[data-support-view="list"] .messages::-webkit-scrollbar,
#gptlike-chat #chatContainer[data-readings-view="list"] .messages::-webkit-scrollbar{
  width: 12px !important;
}
#gptlike-chat #chatContainer[data-screen="posts"] .messages::-webkit-scrollbar-track,
#gptlike-chat #chatContainer[data-support-view="list"] .messages::-webkit-scrollbar-track,
#gptlike-chat #chatContainer[data-readings-view="list"] .messages::-webkit-scrollbar-track{
  background: rgba(255, 184, 107, 0.12) !important;
  border-radius: 999px !important;
}
#gptlike-chat #chatContainer[data-screen="posts"] .messages::-webkit-scrollbar-thumb,
#gptlike-chat #chatContainer[data-support-view="list"] .messages::-webkit-scrollbar-thumb,
#gptlike-chat #chatContainer[data-readings-view="list"] .messages::-webkit-scrollbar-thumb{
  background: var(--gold-ui-border) !important;
  border-radius: 999px !important;
  border: 2px solid rgba(0, 0, 0, 0.35) !important;
  background-clip: padding-box !important;
}

/* Final: unify border color across the app to match My Account */
#gptlike-chat{
  --border: var(--gold-ui-border);
  --ui-border-1: var(--gold-ui-border);
  --ui-border-2: var(--gold-ui-border);
  --shadow-inset: inset 0 0 0 1px var(--gold-ui-border);
}
#gptlike-chat,
#gptlike-chat *{
  border-color: var(--gold-ui-border) !important;
}
#gptlike-chat #chatContainer .messages{
  border-color: var(--gold-ui-border) !important;
  box-shadow: inset 0 0 0 1px var(--gold-ui-border) !important;
}
#gptlike-chat .posts-empty,
#gptlike-chat .posts-error{
  border-color: var(--gold-ui-border) !important;
}

/* Local: trash icon buttons (icon-only, no background) */
#gptlike-chat #chatContainer .chat-clear-btn,
#gptlike-chat #chatContainer .chat-clear-btn:hover,
#gptlike-chat #chatContainer .chat-clear-btn:focus,
#gptlike-chat #chatContainer .chat-clear-btn:focus-visible,
#gptlike-chat #chatContainer .chat-clear-btn:active{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
}
#gptlike-chat[data-theme-light="1"] #chatContainer .chat-clear-btn svg,
#gptlike-chat[data-theme-light="1"] #chatContainer .chat-clear-btn svg *{
  color: #0f172a !important;
  fill: currentColor !important;
  stroke: none !important;
}
#gptlike-chat:not([data-theme-light="1"]) #chatContainer .chat-clear-btn svg,
#gptlike-chat:not([data-theme-light="1"]) #chatContainer .chat-clear-btn svg *{
  color: #ffb86b !important;
  fill: currentColor !important;
  stroke: none !important;
}

/* Local: main menu bottom row (4 icons) are icon-only buttons */
#gptlike-chat #onboardingScreen .onb-page[data-page="2"] .onb-row-four .onb-btn,
#gptlike-chat #onboardingScreen .onb-page[data-page="2"] .onb-row-four .onb-btn:hover,
#gptlike-chat #onboardingScreen .onb-page[data-page="2"] .onb-row-four .onb-btn:focus,
#gptlike-chat #onboardingScreen .onb-page[data-page="2"] .onb-row-four .onb-btn:focus-visible,
#gptlike-chat #onboardingScreen .onb-page[data-page="2"] .onb-row-four .onb-btn:active{
  background: transparent !important;
  background-image: none !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
}
#gptlike-chat #onboardingScreen .onb-page[data-page="2"] .onb-row-four .onb-btn::before,
#gptlike-chat #onboardingScreen .onb-page[data-page="2"] .onb-row-four .onb-btn::after{
  content: none !important;
  display: none !important;
}
/* Local: bottom menu icon colors by theme */
#gptlike-chat[data-theme="dark"] #onboardingScreen .onb-page[data-page="2"] .onb-row-four .onb-btn-ico,
#gptlike-chat[data-theme="dark"] #onboardingScreen .onb-page[data-page="2"] .onb-row-four .onb-btn-ico svg,
#gptlike-chat[data-theme="dark"] #onboardingScreen .onb-page[data-page="2"] .onb-row-four .onb-btn-ico svg *{
  color: #ffffff !important;
  fill: currentColor !important;
  stroke: none !important;
}
#gptlike-chat[data-theme-light="1"] #onboardingScreen .onb-page[data-page="2"] .onb-row-four .onb-btn-ico,
#gptlike-chat[data-theme-light="1"] #onboardingScreen .onb-page[data-page="2"] .onb-row-four .onb-btn-ico svg,
#gptlike-chat[data-theme-light="1"] #onboardingScreen .onb-page[data-page="2"] .onb-row-four .onb-btn-ico svg *{
  color: #0f172a !important;
  fill: currentColor !important;
  stroke: none !important;
}

/* Local: light theme text color + no text shadows */
#gptlike-chat[data-theme-light="1"]{
  color: #0f172a !important;
}
#gptlike-chat[data-theme-light="1"] *{
  text-shadow: none !important;
}
#gptlike-chat[data-theme-light="1"] #onboardingScreen .onb-help,
#gptlike-chat[data-theme-light="1"] #onboardingScreen .onb-help *{
  color: #ffffff !important;
}

/* Local: dark theme reading text (chats + opened newsletters/support/readings) */
#gptlike-chat[data-theme="dark"] #chatContainer .messages .bubble,
#gptlike-chat[data-theme="dark"] #chatContainer .messages .post-text,
#gptlike-chat[data-theme="dark"] #chatContainer .messages .time-badge{
  color: #f2f6fb !important;
  text-shadow: none !important;
}
#gptlike-chat[data-theme="dark"] #chatContainer:is([data-screen="posts"][data-posts-view="detail"], [data-support-view="detail"], [data-readings-view="detail"], [data-screen="instruction"][data-instruction-view="detail"], [data-screen="posts"][data-spread-quota-view="detail"]) .posts-detail-scroll,
#gptlike-chat[data-theme="dark"] #chatContainer:is([data-screen="posts"][data-posts-view="detail"], [data-support-view="detail"], [data-readings-view="detail"], [data-screen="instruction"][data-instruction-view="detail"], [data-screen="posts"][data-spread-quota-view="detail"]) .posts-detail-scroll *{
  color: #f2f6fb !important;
  text-shadow: none !important;
}

/* Local: light theme reading backgrounds are white */
#gptlike-chat:is([data-theme-light="1"], [data-theme-mode="light"]) #chatContainer .messages{
  background: #ffffff !important;
}
#gptlike-chat:is([data-theme-light="1"], [data-theme-mode="light"]) #chatContainer:is([data-screen="posts"][data-posts-view="detail"], [data-support-view="detail"], [data-readings-view="detail"], [data-screen="instruction"][data-instruction-view="detail"], [data-screen="posts"][data-spread-quota-view="detail"]) .posts-detail-scroll{
  background: #ffffff !important;
}

/* Local: dark theme reading backgrounds are deep black-blue */
#gptlike-chat[data-theme="dark"] #chatContainer .messages{
  background: #0b1118 !important;
}
#gptlike-chat[data-theme="dark"] #chatContainer:is([data-screen="posts"][data-posts-view="detail"], [data-support-view="detail"], [data-readings-view="detail"], [data-screen="instruction"][data-instruction-view="detail"], [data-screen="posts"][data-spread-quota-view="detail"]) .posts-detail-scroll{
  background: #0b1118 !important;
}

/* Local: modal close buttons — centered, visible cross */
#gptlike-chat .style-modal .style-close,
#gptlike-chat .help-modal .style-close{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  height: 40px !important;
  padding: 0 !important;
  font-size: 0 !important;
  line-height: 0 !important;
}
#gptlike-chat .style-modal .style-close::before,
#gptlike-chat .help-modal .style-close::before{
  content: "" !important;
  display: block !important;
  width: 22px !important;
  height: 22px !important;
  margin: 0 !important;
  background-color: currentColor !important;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round' fill='none'><path d='M6 6l12 12M18 6L6 18'/></svg>") center/contain no-repeat !important;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round' fill='none'><path d='M6 6l12 12M18 6L6 18'/></svg>") center/contain no-repeat !important;
}

/* Local: question buttons divider (full height, subtle, no animation) */
#onboardingScreen .onb-page[data-page="2"] .onb-list .onb-item,
#onboardingScreen .onb-page[data-page="3"] .onb-list .onb-item,
#onboardingScreen .onb-page[data-page="3"] .onb-zone--helper .onb-item{
  position: relative !important;
}
#onboardingScreen .onb-page[data-page="2"] .onb-list .onb-item::after,
#onboardingScreen .onb-page[data-page="3"] .onb-list .onb-item::after,
#onboardingScreen .onb-page[data-page="3"] .onb-zone--helper .onb-item::after{
  content: "" !important;
  position: absolute !important;
  top: 6px !important;
  bottom: 6px !important;
  right: var(--onb-help-slice) !important;
  width: 1px !important;
  height: auto !important;
  background: rgba(15, 23, 42, 0.6) !important;
  opacity: 0.6 !important;
  transform: none !important;
  transition: none !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

/* Local: isolate onboarding + auth screens from selected theme */
#gptlike-chat #onboardingScreen,
#gptlike-chat #authContainer{
  --accent-1: #ffb86b;
  --accent-2: #ffb86b;
}
body.onboarding-active #onboardingScreen,
body.auth-lock-active #authContainer{
  --ui-text-main: #eaf0f8;
  --ui-text-soft: rgba(226, 234, 246, 0.84);
  --ui-text-muted: rgba(184, 196, 214, 0.72);
  --ui-icon: #f2f6fb;
  --ui-surface-1: rgba(18, 18, 24, 0.48);
  --ui-surface-2: rgba(22, 22, 30, 0.60);
  --ui-surface-3: rgba(28, 28, 38, 0.70);
  --ui-border-1: rgba(255, 255, 255, 0.14);
  --ui-border-2: rgba(255, 255, 255, 0.24);
  --text: #e6eef8;
  --muted: #b8c4d6;
  --panel: #1a1a21;
  --bg-0: #0b0b0f;
  --bg-1: #121217;
  --border: #2a2c35;
  --input-bg: #0b0b0f;
  --btn-text: #1f2937;
  --link: #ffb86b;
  color-scheme: dark;
}
/* Light theme: force light app background outside entry/auth screens */
body:is([data-theme-light="1"], [data-theme-mode="light"]):not(.onboarding-main):not(.onboarding-active):not(.auth-lock-active),
body[data-theme="gold"]:not(.onboarding-main):not(.onboarding-active):not(.auth-lock-active) {
  background: #fffdf9 !important;
  background-image: none !important;
}
body:is([data-theme-light="1"], [data-theme-mode="light"]):not(.onboarding-main):not(.onboarding-active):not(.auth-lock-active) #appGlobalBackground,
body[data-theme="gold"]:not(.onboarding-main):not(.onboarding-active):not(.auth-lock-active) #appGlobalBackground {
  background:
    linear-gradient(0deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)),
    radial-gradient(78% 62% at 12% 10%, rgba(255, 184, 107, 0.20), transparent 72%),
    radial-gradient(72% 58% at 86% 86%, rgba(255, 184, 107, 0.16), transparent 74%),
    none,
    linear-gradient(180deg, #fffefb 0%, #fff9ef 46%, #fff3e3 100%) !important;
  background-color: #fffdf9 !important;
}
#gptlike-chat #onboardingScreen{
  --onb-help-active: #ffb86b;
  --onb-help-active-shadow: rgba(255, 184, 107, 0.35);
  --onb-help-active-shadow-strong: rgba(255, 184, 107, 0.55);
  --onb-help-active-bg: rgba(255, 184, 107, 0.12);
  --onb-help-left-bg: var(--onb-help-active-bg);
  --onb-help-divider: rgba(255, 255, 255, 0.22);
  --onb-help-text: rgba(232, 239, 248, 0.92);
  --onb-help-idle: rgba(232, 239, 248, 0.70);
  --onb-help-idle-bg: rgba(255, 255, 255, 0.06);
  --onb-help-border: rgba(255, 255, 255, 0.18);
  --onb-help-panel-bg: rgba(12, 14, 20, 0.42);
  --onb-help-text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
  --onb-help-slice-bg: rgba(255, 255, 255, 0.06);
}
#gptlike-chat #onboardingScreen .onb-page[data-page="2"] .onb-list .onb-btn,
#gptlike-chat #onboardingScreen .onb-page[data-page="3"] .onb-zone--helper .onb-btn,
#gptlike-chat #onboardingScreen .onb-page[data-page="3"] .onb-list .onb-btn{
  background:
    radial-gradient(120px 60px at 20% 25%, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 60%),
    linear-gradient(90deg, var(--accent-1), var(--accent-2)) !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  box-shadow:
    0 10px 22px rgba(0, 0, 0, 0.26),
    0 0 0 1px rgba(255, 255, 255, 0.06) inset !important;
  text-shadow: none !important;
}
#gptlike-chat #onboardingScreen .onb-row-four .onb-btn{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
#gptlike-chat #onboardingScreen .onb-menu-title{
  color: rgba(232, 239, 248, 0.62) !important;
  text-shadow: none !important;
}
#gptlike-chat #onboardingScreen .onb-page[data-page="2"] .onb-item-desc,
#gptlike-chat #onboardingScreen .onb-page[data-page="3"] .onb-item-desc,
#gptlike-chat #onboardingScreen .onb-page[data-page="3"] .onb-zone--helper .onb-item-desc{
  color: var(--onb-help-text) !important;
}
#gptlike-chat #onboardingScreen .onb-page[data-page="2"] .onb-skip-top,
#gptlike-chat #onboardingScreen .onb-page[data-page="3"] .onb-skip-top{
  color: rgba(255,255,255,0.72) !important;
  text-shadow: none !important;
}

/* Local: settings sliders visible + labels readable */
#gptlike-chat #styleModalBackdrop .settings-modal .font-range{
  background: transparent !important;
}
#gptlike-chat #styleModalBackdrop .settings-modal .font-range::-webkit-slider-runnable-track{
  height: 4px !important;
  background: linear-gradient(90deg, rgba(255, 184, 107, 0.9) 0%, rgba(255, 184, 107, 0.9) var(--range-progress, 50%), rgba(15, 23, 42, 0.2) var(--range-progress, 50%), rgba(15, 23, 42, 0.2) 100%) !important;
  border-radius: 999px !important;
}
#gptlike-chat #styleModalBackdrop .settings-modal .font-range::-moz-range-track{
  height: 4px !important;
  background: linear-gradient(90deg, rgba(255, 184, 107, 0.9) 0%, rgba(255, 184, 107, 0.9) var(--range-progress, 50%), rgba(15, 23, 42, 0.2) var(--range-progress, 50%), rgba(15, 23, 42, 0.2) 100%) !important;
  border-radius: 999px !important;
}
#gptlike-chat #styleModalBackdrop .settings-modal .font-range::-webkit-slider-thumb,
#gptlike-chat #styleModalBackdrop .settings-modal .font-range::-moz-range-thumb{
  background: var(--gold-ui-bg) !important;
  border: 1px solid rgba(255, 184, 107, 0.8) !important;
}
#gptlike-chat #styleModalBackdrop .settings-modal .settings-h,
#gptlike-chat #styleModalBackdrop .settings-modal .settings-sub,
#gptlike-chat #styleModalBackdrop .settings-modal .font-preview-text{
  color: #0f172a !important;
  text-shadow: none !important;
}

/* Local: dark theme settings labels must be white and isolated */
#gptlike-chat[data-theme="dark"] #styleModalBackdrop .settings-modal .settings-h,
#gptlike-chat[data-theme="dark"] #styleModalBackdrop .settings-modal .settings-sub,
#gptlike-chat[data-theme="dark"] #styleModalBackdrop .settings-modal .font-preview-text{
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-shadow: none !important;
}

/* Local: settings theme buttons — left circles + right check (item 26) */
#gptlike-chat #styleModalBackdrop .settings-modal .theme-mode-seg button::before{
  width: 22px !important;
  height: 22px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(15, 23, 42, 0.18) !important;
  box-shadow: none !important;
}
#gptlike-chat #styleModalBackdrop .settings-modal .theme-mode-seg button[data-theme-mode="dark"]::before{
  background: #0b1220 !important;
}
#gptlike-chat #styleModalBackdrop .settings-modal .theme-mode-seg button[data-theme-mode="gold"]::before{
  background: #ffffff !important;
}
#gptlike-chat #styleModalBackdrop .settings-modal .theme-mode-seg button[data-active="true"]::after{
  background-color: #0a0a0a !important;
}

/* Local: main menu counters — white background, keep animation (item 27) */
#gptlike-chat #onboardingScreen .onb-page[data-page="2"] .onb-list .onb-btn-count,
#gptlike-chat #onboardingScreen .onb-page[data-page="2"] .onb-list .onb-btn-count--static{
  background: #ffffff !important;
  color: #000000 !important;
  border: 1px solid rgba(255, 184, 107, 0.55) !important;
  box-shadow: none !important;
}

/* Chat composer: send icon only (no button background) + left divider */
#gptlike-chat #chatContainer #sendBtn,
#gptlike-chat #chatContainer #sendBtn:hover,
#gptlike-chat #chatContainer #sendBtn:focus,
#gptlike-chat #chatContainer #sendBtn:focus-visible,
#gptlike-chat #chatContainer #sendBtn:active{
  background: transparent !important;
  background-image: none !important;
  background-color: transparent !important;
  border: 0 !important;
  border-left: 1px solid var(--composer-pill-divider) !important;
  box-shadow: none !important;
  filter: none !important;
}
#gptlike-chat #chatContainer #sendBtn svg,
#gptlike-chat #chatContainer #sendBtn svg *{
  color: #ffb86b !important;
  fill: currentColor !important;
  stroke: none !important;
}

/* Onboarding: arcana submenu (card meanings) — hide bottom 4-icon menu */
#onboardingScreen[data-submenu="arcana"] .onb-page[data-page="3"] .onb-zone--bottom{
  display: none !important;
}

/* Counters: numbers must be black in all themes */
#gptlike-chat .onb-btn-count,
#gptlike-chat .onb-btn-count--static{
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
}

/* Onboarding help "?" must be white in all themes (override theme vars). */
#gptlike-chat #onboardingScreen .onb-help,
#gptlike-chat #onboardingScreen .onb-help:hover,
#gptlike-chat #onboardingScreen .onb-help:focus,
#gptlike-chat #onboardingScreen .onb-help:focus-visible,
#gptlike-chat #onboardingScreen .onb-help:active,
#gptlike-chat #onboardingScreen .onb-item.is-help-open .onb-help{
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-shadow: none !important;
}
#gptlike-chat #onboardingScreen .onb-help svg,
#gptlike-chat #onboardingScreen .onb-help svg *{
  color: #ffffff !important;
  fill: currentColor !important;
  stroke: none !important;
}

/* Local: main menu (page 2) button text must be dark */
#gptlike-chat #onboardingScreen .onb-page[data-page="2"] .onb-list .onb-btn,
#gptlike-chat #onboardingScreen .onb-page[data-page="2"] .onb-list .onb-btn-label,
#gptlike-chat #onboardingScreen .onb-page[data-page="2"] .onb-list .onb-btn-count{
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
  text-shadow: none !important;
}

/* Fix: restore close "X" (was removed by global button ::before/::after reset) */
body:not(.onboarding-main) #gptlike-chat .style-close::before,
body:not(.onboarding-main) #gptlike-chat .style-close::after{
  content: "" !important;
  opacity: 1 !important;
  display: block !important;
}

/* Fix: dark theme chat text must be light (cards stay gold + dark text) */
#gptlike-chat[data-theme="dark"] #chatContainer .messages .bubble,
#gptlike-chat[data-theme="dark"] #chatContainer .messages .post-text,
#gptlike-chat[data-theme="dark"] #chatContainer .messages .time-badge {
  color: #f2f6fb !important;
  -webkit-text-fill-color: #f2f6fb !important;
  text-shadow: none !important;
}
#gptlike-chat[data-theme="dark"] #chatContainer .input,
#gptlike-chat[data-theme="dark"] #chatContainer textarea,
#gptlike-chat[data-theme="dark"] #chatContainer input,
#gptlike-chat[data-theme="dark"] #chatContainer select,
#gptlike-chat[data-theme="dark"] #chatContainer .spread-form-input {
  color: #eef3ff !important;
  caret-color: #eef3ff !important;
}
#gptlike-chat[data-theme="dark"] #chatContainer .input::placeholder,
#gptlike-chat[data-theme="dark"] #chatContainer .spread-form-input::placeholder {
  color: rgba(226, 233, 245, 0.58) !important;
  -webkit-text-fill-color: rgba(226, 233, 245, 0.58) !important;
}

/* Main onboarding screen: animation visuals only. */
#onbAnim{
  position: fixed !important;
  inset: 0 !important;
}
#onbAnimWrap .ttFace{
  box-shadow: 0 14px 28px rgba(0,0,0,.42) !important;
}
#onbAnimWrap .ttBack{
  filter: none !important;
  box-shadow: none !important;
}
#onbAnimWrap .ttC.flash::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 14px;
  pointer-events: none;
  animation: ttFlash 240ms ease-out 1;
}
@keyframes ttFlash{
  0%{ opacity:0; box-shadow:0 0 0 0 rgba(255, 184, 107,0); }
  30%{ opacity:1; box-shadow:0 0 0 2px rgba(255, 184, 107,.34); }
  100%{ opacity:0; box-shadow:0 0 0 8px rgba(255, 184, 107,0); }
}

/* Main screen CTA: force visible orange glow under Login/Register. */
#onboardingScreen .onb-page[data-page="1"] .onb-cta{
  background: #000000 !important;
  background-image: none !important;
  background-color: #000000 !important;
  color: #ffb86b !important;
  -webkit-text-fill-color: #ffb86b !important;
  border: 1.5px solid #ffb86b !important;
  box-shadow: none !important;
  position: relative !important;
  isolation: isolate !important;
  overflow: visible !important;
  animation: none !important;
  opacity: 1 !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  mix-blend-mode: normal !important;
  z-index: 1 !important;
  background-clip: padding-box !important;
  outline: 1px solid #000000 !important;
}
#onboardingScreen .onb-page[data-page="1"] .onb-cta::before{
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 999px;
  pointer-events: none;
  z-index: -1;
  box-shadow: 0 0 0 0 rgba(255, 184, 107, 0);
  opacity: 0.02;
  filter: blur(8px);
  animation: ctaIncandescent 6.2s ease-in-out infinite;
  background: transparent;
}
#onboardingScreen .onb-page[data-page="1"] .onb-cta::after{
  content: none !important;
}
#onboardingScreen .onb-page[data-page="1"] .onb-cta > *{
  position: relative;
  z-index: 1;
}
@keyframes ctaIncandescent{
  0%{
    opacity: 0.04;
    box-shadow:
      0 0 0 0 rgba(255, 184, 107, 0),
      0 0 0 0 rgba(255, 140, 70, 0);
  }
  32%{
    opacity: 0.35;
    box-shadow:
      0 0 8px 4px rgba(255, 184, 107, 0.20),
      0 0 14px 7px rgba(255, 140, 70, 0.14);
  }
  44%{
    opacity: 1;
    box-shadow:
      0 0 14px 6px rgba(255, 184, 107, 0.55),
      0 0 22px 10px rgba(255, 184, 107, 0.40);
  }
  58%{
    opacity: 0.55;
    box-shadow:
      0 0 10px 5px rgba(255, 184, 107, 0.28),
      0 0 18px 8px rgba(255, 140, 70, 0.22);
  }
  66%{
    opacity: 0.72;
    box-shadow:
      0 0 12px 5px rgba(255, 184, 107, 0.36),
      0 0 20px 9px rgba(255, 184, 107, 0.28);
  }
  100%{
    opacity: 0.03;
    box-shadow:
      0 0 0 0 rgba(255, 184, 107, 0),
      0 0 0 0 rgba(255, 140, 70, 0);
  }
}
/* iOS/PWA: fallback glow directly on the button (pseudo blur can be inconsistent) */
@supports (-webkit-touch-callout: none) {
  #onboardingScreen .onb-page[data-page="1"] .onb-cta{
    box-shadow:
      0 0 0 0 rgba(255, 184, 107, 0),
      0 0 0 0 rgba(255, 140, 70, 0) !important;
    animation: ctaIncandescentShadow 6.2s ease-in-out infinite !important;
    will-change: box-shadow;
  }
}
@keyframes ctaIncandescentShadow{
  0%{
    box-shadow:
      0 0 0 0 rgba(255, 184, 107, 0),
      0 0 0 0 rgba(255, 140, 70, 0);
  }
  32%{
    box-shadow:
      0 0 8px 4px rgba(255, 184, 107, 0.20),
      0 0 14px 7px rgba(255, 140, 70, 0.14);
  }
  44%{
    box-shadow:
      0 0 14px 6px rgba(255, 184, 107, 0.55),
      0 0 22px 10px rgba(255, 184, 107, 0.40);
  }
  58%{
    box-shadow:
      0 0 10px 5px rgba(255, 184, 107, 0.28),
      0 0 18px 8px rgba(255, 140, 70, 0.22);
  }
  66%{
    box-shadow:
      0 0 12px 5px rgba(255, 184, 107, 0.36),
      0 0 20px 9px rgba(255, 184, 107, 0.28);
  }
  100%{
    box-shadow:
      0 0 0 0 rgba(255, 184, 107, 0),
      0 0 0 0 rgba(255, 140, 70, 0);
  }
}

/* Absolute lock: force black background for the two main CTA buttons */
#onbLoginCta,
#onbRegisterCta{
  background: #000000 !important;
  background-image: none !important;
  background-color: #000000 !important;
}

/* Local: onboarding/auth must ignore selected theme (force default look) */
#gptlike-chat.onboarding-active #onboardingScreen{
  --accent-1: #ffb86b;
  --accent-2: #ffb86b;
  --onb-help-active: #ffb86b;
  --onb-help-active-shadow: rgba(255, 184, 107, 0.35);
  --onb-help-active-shadow-strong: rgba(255, 184, 107, 0.55);
  --onb-help-active-bg: rgba(255, 184, 107, 0.12);
  --onb-help-left-bg: var(--onb-help-active-bg);
  --onb-help-divider: rgba(255, 255, 255, 0.22);
  --onb-help-text: rgba(232, 239, 248, 0.92);
  --onb-help-idle: rgba(232, 239, 248, 0.70);
  --onb-help-idle-bg: rgba(255, 255, 255, 0.06);
  --onb-help-border: rgba(255, 255, 255, 0.18);
  --onb-help-panel-bg: rgba(12, 14, 20, 0.42);
  --onb-help-text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
  --onb-help-slice-bg: rgba(255, 255, 255, 0.06);
}
#gptlike-chat.onboarding-active #onboardingScreen .onb-page[data-page="2"] .onb-frame::before,
#gptlike-chat.onboarding-active #onboardingScreen .onb-page[data-page="3"] .onb-frame::before{
  opacity: 0.20 !important;
  mix-blend-mode: screen !important;
  filter: blur(30px) saturate(1.10) !important;
}
#gptlike-chat.onboarding-active #onboardingScreen .onb-page[data-page="2"] .onb-frame::after,
#gptlike-chat.onboarding-active #onboardingScreen .onb-page[data-page="3"] .onb-frame::after{
  opacity: 0.08 !important;
  mix-blend-mode: soft-light !important;
  filter: blur(20px) !important;
}
#gptlike-chat.onboarding-active #onboardingScreen .onb-page[data-page="2"] .onb-list .onb-btn,
#gptlike-chat.onboarding-active #onboardingScreen .onb-page[data-page="3"] .onb-zone--helper .onb-btn,
#gptlike-chat.onboarding-active #onboardingScreen .onb-page[data-page="3"] .onb-list .onb-btn{
  background:
    radial-gradient(120px 60px at 20% 25%, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 60%),
    linear-gradient(90deg, var(--accent-1), var(--accent-2)) !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  box-shadow:
    0 10px 22px rgba(0, 0, 0, 0.26),
    0 0 0 1px rgba(255, 255, 255, 0.06) inset !important;
  text-shadow: none !important;
}
#gptlike-chat.onboarding-active #onboardingScreen .onb-row-four .onb-btn{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
#gptlike-chat.onboarding-active #onboardingScreen .onb-menu-title{
  color: rgba(232, 239, 248, 0.62) !important;
  text-shadow: none !important;
}
#gptlike-chat.onboarding-active #onboardingScreen .onb-page[data-page="2"] .onb-item-desc,
#gptlike-chat.onboarding-active #onboardingScreen .onb-page[data-page="3"] .onb-item-desc,
#gptlike-chat.onboarding-active #onboardingScreen .onb-page[data-page="3"] .onb-zone--helper .onb-item-desc{
  color: var(--onb-help-text) !important;
}
#gptlike-chat.onboarding-active #onboardingScreen .onb-page[data-page="2"] .onb-skip-top,
#gptlike-chat.onboarding-active #onboardingScreen .onb-page[data-page="3"] .onb-skip-top{
  color: rgba(255,255,255,0.72) !important;
  text-shadow: none !important;
}
#gptlike-chat.onboarding-active #onboardingScreen .onb-help,
#gptlike-chat.onboarding-active #onboardingScreen .onb-help:hover,
#gptlike-chat.onboarding-active #onboardingScreen .onb-help:focus,
#gptlike-chat.onboarding-active #onboardingScreen .onb-help:focus-visible,
#gptlike-chat.onboarding-active #onboardingScreen .onb-help:active,
#gptlike-chat.onboarding-active #onboardingScreen .onb-item.is-help-open .onb-help{
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-shadow: none !important;
}

/* FINAL OVERRIDE (last in file): unify all outlines to My Account gold + remove input top highlight */
#gptlike-chat{
  --border: var(--gold-ui-border) !important;
  --ui-border-1: var(--gold-ui-border) !important;
  --ui-border-2: var(--gold-ui-border) !important;
  --shadow-inset: inset 0 0 0 1px var(--gold-ui-border) !important;
  --chat-frame-border: var(--gold-ui-border) !important;
  --chat-frame-shadow: inset 0 0 0 1px var(--gold-ui-border) !important;
  --composer-pill-border: var(--gold-ui-border) !important;
  --composer-pill-divider: var(--gold-ui-border) !important;
  --composer-pill-top: transparent !important;
  --composer-pill-bottom: transparent !important;
}
#gptlike-chat,
#gptlike-chat *{
  border-color: var(--gold-ui-border) !important;
  outline-color: var(--gold-ui-border) !important;
}
#gptlike-chat #chatContainer .messages{
  box-shadow: inset 0 0 0 1px var(--gold-ui-border) !important;
}
#gptlike-chat #chatContainer .composer{
  box-shadow: none !important;
}

/* Hard override: chat window borders (any screen) must match My Account gold */
#gptlike-chat[data-theme] #chatContainer[data-screen] .messages,
#gptlike-chat[data-theme] #chatContainer[data-support-view] .messages,
#gptlike-chat[data-theme] #chatContainer[data-readings-view] .messages,
#gptlike-chat[data-theme] #chatContainer[data-posts-view] .messages,
#gptlike-chat[data-theme] #chatContainer[data-instruction-view] .messages,
#gptlike-chat[data-theme] #chatContainer[data-spread-ui] .messages,
#gptlike-chat[data-theme] #chatContainer[data-spread-form] .messages{
  border: 1px solid var(--gold-ui-border) !important;
  box-shadow: inset 0 0 0 1px var(--gold-ui-border) !important;
}

/* Final hard override: chat frame + empty/error boxes use My Account gold */
#gptlike-chat #chatContainer{
  --chat-frame-border: var(--gold-ui-border) !important;
  --chat-frame-shadow: inset 0 0 0 1px var(--gold-ui-border) !important;
  --border: var(--gold-ui-border) !important;
  --composer-pill-border: var(--gold-ui-border) !important;
  --composer-pill-divider: var(--gold-ui-border) !important;
  --composer-pill-top: transparent !important;
  --composer-pill-bottom: transparent !important;
}
#gptlike-chat #chatContainer .posts-empty,
#gptlike-chat #chatContainer .posts-error{
  border-color: var(--gold-ui-border) !important;
}

/* Final override: settings gear icon must be outlined and smaller */
#gptlike-chat #onboardingScreen .onb-row-four [data-onb-action="settings"] .onb-btn-ico svg.onb-gear-icon{
  width: 28px !important;
  height: 28px !important;
  display: block !important;
}
#gptlike-chat #onboardingScreen .onb-row-four [data-onb-action="settings"] .onb-btn-ico svg.onb-gear-icon,
#gptlike-chat #onboardingScreen .onb-row-four [data-onb-action="settings"] .onb-btn-ico svg.onb-gear-icon *{
  fill: currentColor !important;
  stroke: none !important;
}

/* Final: force same font size for onboarding menu buttons */
#gptlike-chat #onboardingScreen .onb-btn,
#gptlike-chat #onboardingScreen .onb-btn-label,
#gptlike-chat #onboardingScreen .onb-btn-count,
#gptlike-chat #onboardingScreen .onb-spread-count{
  font-size: var(--btnFz) !important;
  line-height: 1.2 !important;
}

/* Final: modal close buttons must show only the cross (no text) */
#gptlike-chat .style-close{
  font-size: 0 !important;
  line-height: 0 !important;
  text-indent: -9999px !important;
  white-space: nowrap !important;
}
#gptlike-chat .style-close::before{
  text-indent: 0 !important;
}

/* Spread step 2: question + advice should share space evenly */
#gptlike-chat #chatContainer:is([data-spread-step="2"], [data-spread3-step="2"], [data-spread5-step="2"], [data-spread6-step="2"], [data-spread7-step="2"], [data-spread8-step="2"], [data-spread9-step="2"]) .spread-form,
#gptlike-chat #chatContainer:is([data-spread-step="2"], [data-spread3-step="2"], [data-spread5-step="2"], [data-spread6-step="2"], [data-spread7-step="2"], [data-spread8-step="2"], [data-spread9-step="2"]) .spread-form-grid{
  flex: 1 1 auto;
  min-height: 0;
}
#gptlike-chat #chatContainer .spread-step-2,
#gptlike-chat #chatContainer .spread3-step-2,
#gptlike-chat #chatContainer .spread5-step-2,
#gptlike-chat #chatContainer .spread6-step-2,
#gptlike-chat #chatContainer .spread7-step-2,
#gptlike-chat #chatContainer .spread8-step-2,
#gptlike-chat #chatContainer .spread9-step-2{
  flex: 1 1 auto;
  min-height: 0;
}
#gptlike-chat #chatContainer .spread-step-2 .spread-form-field,
#gptlike-chat #chatContainer .spread3-step-2 .spread-form-field,
#gptlike-chat #chatContainer .spread5-step-2 .spread-form-field,
#gptlike-chat #chatContainer .spread6-step-2 .spread-form-field,
#gptlike-chat #chatContainer .spread7-step-2 .spread-form-field,
#gptlike-chat #chatContainer .spread8-step-2 .spread-form-field,
#gptlike-chat #chatContainer .spread9-step-2 .spread-form-field{
  flex: 1 1 0;
  min-height: 0;
}
#gptlike-chat #chatContainer .spread-step-2 .spread-input-wrap--question,
#gptlike-chat #chatContainer .spread3-step-2 .spread-input-wrap--question,
#gptlike-chat #chatContainer .spread5-step-2 .spread-input-wrap--question,
#gptlike-chat #chatContainer .spread6-step-2 .spread-input-wrap--question,
#gptlike-chat #chatContainer .spread7-step-2 .spread-input-wrap--question,
#gptlike-chat #chatContainer .spread8-step-2 .spread-input-wrap--question,
#gptlike-chat #chatContainer .spread9-step-2 .spread-input-wrap--question{
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}
#gptlike-chat #chatContainer .spread-step-2 .spread-input-wrap--question .spread-form-input,
#gptlike-chat #chatContainer .spread3-step-2 .spread-input-wrap--question .spread-form-input,
#gptlike-chat #chatContainer .spread5-step-2 .spread-input-wrap--question .spread-form-input,
#gptlike-chat #chatContainer .spread6-step-2 .spread-input-wrap--question .spread-form-input,
#gptlike-chat #chatContainer .spread7-step-2 .spread-input-wrap--question .spread-form-input,
#gptlike-chat #chatContainer .spread8-step-2 .spread-input-wrap--question .spread-form-input,
#gptlike-chat #chatContainer .spread9-step-2 .spread-input-wrap--question .spread-form-input{
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
#gptlike-chat #chatContainer .spread-step-2 .spread-form-textarea--question,
#gptlike-chat #chatContainer .spread3-step-2 .spread-form-textarea--question,
#gptlike-chat #chatContainer .spread5-step-2 .spread-form-textarea--question,
#gptlike-chat #chatContainer .spread6-step-2 .spread-form-textarea--question,
#gptlike-chat #chatContainer .spread7-step-2 .spread-form-textarea--question,
#gptlike-chat #chatContainer .spread8-step-2 .spread-form-textarea--question,
#gptlike-chat #chatContainer .spread9-step-2 .spread-form-textarea--question{
  max-height: none;
}
#gptlike-chat #chatContainer .spread-step-2 .spread-form-field--advice,
#gptlike-chat #chatContainer .spread3-step-2 .spread-form-field--advice,
#gptlike-chat #chatContainer .spread5-step-2 .spread-form-field--advice,
#gptlike-chat #chatContainer .spread6-step-2 .spread-form-field--advice,
#gptlike-chat #chatContainer .spread7-step-2 .spread-form-field--advice,
#gptlike-chat #chatContainer .spread8-step-2 .spread-form-field--advice,
#gptlike-chat #chatContainer .spread9-step-2 .spread-form-field--advice{
  flex: 1 1 0;
  min-height: 0;
}
#gptlike-chat #chatContainer .spread-step-2 .spread-form-advice,
#gptlike-chat #chatContainer .spread3-step-2 .spread-form-advice,
#gptlike-chat #chatContainer .spread5-step-2 .spread-form-advice,
#gptlike-chat #chatContainer .spread6-step-2 .spread-form-advice,
#gptlike-chat #chatContainer .spread7-step-2 .spread-form-advice,
#gptlike-chat #chatContainer .spread8-step-2 .spread-form-advice,
#gptlike-chat #chatContainer .spread9-step-2 .spread-form-advice{
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
}

/* Light theme: spread inputs should be white (no gray fields) */
#gptlike-chat[data-theme-light="1"] #chatContainer .spread-form-input,
#gptlike-chat[data-theme="white"] #chatContainer .spread-form-input,
#gptlike-chat[data-theme-mode="light"] #chatContainer .spread-form-input{
  background: #ffffff !important;
  color: #1f2937 !important;
  -webkit-text-fill-color: #1f2937 !important;
}
#gptlike-chat[data-theme-light="1"] #chatContainer select.spread-form-input,
#gptlike-chat[data-theme="white"] #chatContainer select.spread-form-input,
#gptlike-chat[data-theme-mode="light"] #chatContainer select.spread-form-input{
  background: #ffffff !important;
}

/* Main menu + spreads list: prevent squashing on shorter heights */
#onboardingScreen .onb-page[data-page="2"] .onb-list{
  overflow-y: auto;
}
#onboardingScreen .onb-page[data-page="2"] .onb-list .onb-item,
#onboardingScreen .onb-page[data-page="2"] .onb-list .onb-btn{
  min-height: var(--onb-btn-h);
}
#onboardingScreen .onb-page[data-page="3"] .onb-list{
  grid-template-rows: repeat(9, minmax(var(--onb-btn-h), 1fr));
  overflow-y: auto;
}
#onboardingScreen .onb-page[data-page="3"] .onb-item,
#onboardingScreen .onb-page[data-page="3"] .onb-btn{
  min-height: var(--onb-btn-h);
}

/* Narrow screens: reduce button text size instead of ellipsis */
@media (max-width: 420px) {
  #onboardingScreen .onb-page[data-page="2"] .onb-btn,
  #onboardingScreen .onb-page[data-page="3"] .onb-btn{
    font-size: clamp(11px, 3.6vw, 13px) !important;
    white-space: normal !important;
  }
  #onboardingScreen .onb-page[data-page="2"] .onb-btn-label,
  #onboardingScreen .onb-page[data-page="3"] .onb-btn-label{
    white-space: normal !important;
    text-overflow: clip !important;
    overflow: visible !important;
  }
}

@media (max-height: 720px) {
  #onboardingScreen {
    --onb-btn-h: clamp(28px, 5vh, 42px);
  }
  #onboardingScreen .onb-grid--page2{
    grid-template-rows: minmax(32px, auto) 1fr minmax(48px, auto) !important;
  }
  #onboardingScreen .onb-grid--page3{
    grid-template-rows: minmax(32px, auto) minmax(32px, auto) 1fr minmax(48px, auto) !important;
  }
  #onboardingScreen .onb-zone--top{
    min-height: clamp(42px, 7vh, 72px) !important;
  }
  #onboardingScreen .onb-zone--bottom{
    min-height: clamp(64px, 11vh, 96px) !important;
  }
  #onboardingScreen .onb-page[data-page="2"] .onb-zone--mid,
  #onboardingScreen .onb-page[data-page="3"] .onb-zone--mid{
    padding-block: clamp(4px, 0.8vh, 8px) !important;
  }
  #onboardingScreen .onb-page[data-page="2"] .onb-list{
    gap: clamp(3px, 0.6vh, 6px) !important;
  }
  #onboardingScreen[data-submenu="spreads"] .onb-page[data-page="3"] .onb-list--spreads{
    gap: clamp(3px, 0.6vh, 6px) !important;
  }
  #onboardingScreen .onb-page[data-page="2"] .onb-btn,
  #onboardingScreen .onb-page[data-page="3"] .onb-btn{
    font-size: clamp(10px, 2vh, 13px) !important;
  }
  #onboardingScreen .onb-page[data-page="2"] .onb-item-desc,
  #onboardingScreen .onb-page[data-page="3"] .onb-item-desc{
    font-size: clamp(9px, 1.7vh, 11px) !important;
  }
}

/* Helper button moved into spreads list: collapse helper row and use full space */
#onboardingScreen[data-submenu="spreads"] .onb-page[data-page="3"] .onb-zone--helper{
  display: none !important;
}
#onboardingScreen[data-submenu="spreads"] .onb-page[data-page="3"] .onb-zone--mid{
  grid-row: 2 !important;
}

/* Unified button font size across the app */
#gptlike-chat{
  --btnFz: clamp(13px, 2.6vw, 16px);
}
@media (max-width: 360px){
  #gptlike-chat{ --btnFz: clamp(12px, 3.4vw, 14px); }
}
#gptlike-chat button,
#gptlike-chat [role="button"],
#gptlike-chat .btn-primary,
#gptlike-chat .btn-secondary,
#gptlike-chat .onb-btn,
#gptlike-chat .post-btn,
#gptlike-chat .post-action,
#gptlike-chat .theme-mode-seg button,
#gptlike-chat .font-weight-btn,
#gptlike-chat .settings-seg button,
#gptlike-chat .chat-spread-btn,
#gptlike-chat .spread-check-btn,
#gptlike-chat .google-btn,
#gptlike-chat .telegram-btn,
#gptlike-chat .icon-only{
  font-size: var(--btnFz) !important;
}
#gptlike-chat .onb-btn-label{
  font-size: inherit !important;
}

/* Click safety: keep interactive controls above decorative layers */
#gptlike-chat button,
#gptlike-chat [role="button"],
#gptlike-chat input[type="button"],
#gptlike-chat input[type="submit"]{
  position: relative;
  z-index: 2;
  touch-action: manipulation;
}

/* Light theme: dark divider inside question-mark buttons (main menu) */
#gptlike-chat:is([data-theme-light="1"], [data-theme-mode="light"], [data-theme="white"]) #onboardingScreen{
  --onb-help-divider: rgba(15, 23, 42, 0.55);
}

/* Final override: enforce one adaptive font size for all button text */
#gptlike-chat :is(
  button,
  [role="button"],
  input[type="button"],
  input[type="submit"],
  input[type="reset"],
  .btn-primary,
  .btn-secondary,
  .onb-btn,
  .post-btn,
  .post-action,
  .theme-mode-seg button,
  .font-weight-btn,
  .settings-seg button,
  .chat-spread-btn,
  .spread-check-btn,
  .google-btn,
  .telegram-btn,
  .icon-only,
  #onbBackTop2,
  #onbBackTop3,
  #chatBackBtn,
  #authBackBtn,
  #postsBackTopBtn
){
  font-size: var(--btnFz) !important;
}
#gptlike-chat :is(button, [role="button"]) :is(
  .onb-btn-label,
  .btn-label,
  .btn-text,
  .onb-btn-count,
  .onb-spread-count,
  .unread-label,
  .unread-number,
  span,
  strong,
  em,
  b,
  i
){
  font-size: inherit !important;
}

/* Light theme: inputs on spreads must be white with consistent bright border */
#gptlike-chat:is([data-theme-light="1"], [data-theme-mode="light"], [data-theme="white"]) #chatContainer .spread-form-input,
#gptlike-chat:is([data-theme-light="1"], [data-theme-mode="light"], [data-theme="white"]) #chatContainer select.spread-form-input{
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
  border-color: var(--gold-ui-border) !important;
  box-shadow: none !important;
}
#gptlike-chat:is([data-theme-light="1"], [data-theme-mode="light"], [data-theme="white"]) #chatContainer .spread-input-wrap--question{
  border-color: var(--gold-ui-border) !important;
  background: #ffffff !important;
}

/* Ultra-specific override for bottom menu gear (wins over theme fill rules) */
#gptlike-chat[data-theme] #onboardingScreen .onb-page[data-page] .onb-row-four [data-onb-action="settings"] .onb-btn-ico svg.onb-gear-icon{
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  aspect-ratio: 1 / 1 !important;
  display: block !important;
}
#gptlike-chat[data-theme] #onboardingScreen .onb-page[data-page] .onb-row-four [data-onb-action="settings"] .onb-btn-ico svg.onb-gear-icon,
#gptlike-chat[data-theme] #onboardingScreen .onb-page[data-page] .onb-row-four [data-onb-action="settings"] .onb-btn-ico svg.onb-gear-icon *{
  fill: currentColor !important;
  stroke: none !important;
}

/* Final light-theme fixes: main menu + settings */
#gptlike-chat[data-theme-light="1"] #onboardingScreen .onb-menu-title,
#gptlike-chat[data-theme-light="1"] #onboardingScreen .onb-menu-title .onb-menu-label{
  color: #1f2937 !important;
  -webkit-text-fill-color: #1f2937 !important;
  text-shadow: none !important;
}
#gptlike-chat[data-theme-light="1"] #onboardingScreen .onb-page[data-page="2"] .onb-list .onb-btn,
#gptlike-chat[data-theme-light="1"] #onboardingScreen .onb-page[data-page="3"] .onb-list .onb-btn,
#gptlike-chat[data-theme-light="1"] #onboardingScreen .onb-page[data-page="3"] .onb-zone--helper .onb-btn{
  box-shadow: none !important;
}
#gptlike-chat[data-theme-light="1"] #styleModalBackdrop .settings-modal .settings-seg button[data-active="true"]{
  background: linear-gradient(180deg, rgba(255,255,255,0.99), rgba(255,246,232,0.96)) !important;
  border-color: rgba(136, 101, 52, 0.30) !important;
  color: #0f172a !important;
  box-shadow: none !important;
}
#gptlike-chat[data-theme-light="1"] #styleModalBackdrop .settings-modal .font-preview{
  border: 1px solid var(--gold-ui-border) !important;
  box-shadow: inset 0 0 0 1px var(--gold-ui-border) !important;
}
#gptlike-chat[data-theme-light="1"] #styleModalBackdrop #clearHistorySettings.btn-secondary.btn-wide,
#gptlike-chat[data-theme-light="1"] #styleModalBackdrop #clearHistorySettings.btn-secondary.btn-wide:hover,
#gptlike-chat[data-theme-light="1"] #styleModalBackdrop #clearHistorySettings.btn-secondary.btn-wide:focus,
#gptlike-chat[data-theme-light="1"] #styleModalBackdrop #clearHistorySettings.btn-secondary.btn-wide:active{
  background: var(--gold-ui-bg) !important;
  background-image: var(--gold-ui-bg) !important;
  background-color: var(--gold-ui-bg-solid) !important;
  border: 1px solid var(--gold-ui-border) !important;
  color: var(--gold-ui-text) !important;
  -webkit-text-fill-color: var(--gold-ui-text) !important;
  box-shadow: var(--gold-ui-shadow) !important;
}

/* Light theme fixes (local, no layout changes) */
#gptlike-chat[data-theme-light="1"] #onboardingScreen .onb-menu-title{
  color: #1f2937 !important;
  text-shadow: none !important;
}
#gptlike-chat[data-theme-light="1"] #onboardingScreen .onb-page[data-page="2"] .onb-item::before,
#gptlike-chat[data-theme-light="1"] #onboardingScreen .onb-page[data-page="2"] .onb-item::after,
#gptlike-chat[data-theme-light="1"] #onboardingScreen .onb-page[data-page="3"] .onb-item::before,
#gptlike-chat[data-theme-light="1"] #onboardingScreen .onb-page[data-page="3"] .onb-item::after{
  display: none !important;
}
#gptlike-chat[data-theme-light="1"] #styleModalBackdrop .settings-modal .settings-seg button[data-active="true"]{
  background: linear-gradient(180deg, rgba(255,255,255,0.99), rgba(255,246,232,0.96)) !important;
  border-color: rgba(136, 101, 52, 0.30) !important;
  color: #0f172a !important;
  box-shadow: none !important;
}
#gptlike-chat[data-theme-light="1"] #styleModalBackdrop .settings-modal .font-preview{
  border: 1px solid var(--gold-ui-border) !important;
  box-shadow: inset 0 0 0 1px var(--gold-ui-border) !important;
}
#gptlike-chat[data-theme-light="1"] #styleModalBackdrop #clearHistorySettings.btn-secondary.btn-wide,
#gptlike-chat[data-theme-light="1"] #styleModalBackdrop #clearHistorySettings.btn-secondary.btn-wide:hover{
  background: var(--gold-ui-bg) !important;
  background-image: var(--gold-ui-bg) !important;
  background-color: var(--gold-ui-bg-solid) !important;
  border: 1px solid var(--gold-ui-border) !important;
  color: var(--gold-ui-text) !important;
  -webkit-text-fill-color: var(--gold-ui-text) !important;
  box-shadow: var(--gold-ui-shadow) !important;
}

/* Light theme: font size buttons must not change when selected */
#gptlike-chat[data-theme-light="1"] #styleModalBackdrop .settings-modal .font-size-seg .font-size-btn[data-active="true"],
#gptlike-chat[data-theme-light="1"] #styleModalBackdrop .settings-modal .font-size-seg .font-size-btn[data-active="true"]:hover{
  background: linear-gradient(180deg, rgba(255,255,255,0.99), rgba(255,246,232,0.96)) !important;
  border-color: rgba(136, 101, 52, 0.30) !important;
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
  box-shadow: none !important;
  transform: none !important;
}

/* Light theme: selected font size must stay gold (no white switch) */
#gptlike-chat[data-theme-light="1"] #styleModalBackdrop .settings-modal .settings-seg button[data-active="true"],
#gptlike-chat[data-theme-light="1"] #styleModalBackdrop .settings-modal .settings-seg button[data-active="true"]:hover,
#gptlike-chat[data-theme-light="1"] #styleModalBackdrop .settings-modal .font-size-seg .font-size-btn[data-active="true"],
#gptlike-chat[data-theme-light="1"] #styleModalBackdrop .settings-modal .font-size-seg .font-size-btn[data-active="true"]:hover{
  background: var(--gold-ui-bg) !important;
  background-image: var(--gold-ui-bg) !important;
  background-color: var(--gold-ui-bg-solid) !important;
  border: 1px solid var(--gold-ui-border) !important;
  color: var(--gold-ui-text) !important;
  -webkit-text-fill-color: var(--gold-ui-text) !important;
  box-shadow: var(--gold-ui-shadow) !important;
  transform: none !important;
}

/* Light theme: restore vertical divider on question buttons */
#gptlike-chat[data-theme-light="1"] #onboardingScreen .onb-page[data-page="2"] .onb-list .onb-item::after,
#gptlike-chat[data-theme-light="1"] #onboardingScreen .onb-page[data-page="3"] .onb-list .onb-item::after,
#gptlike-chat[data-theme-light="1"] #onboardingScreen .onb-page[data-page="3"] .onb-zone--helper .onb-item::after{
  display: block !important;
  content: "" !important;
  background: var(--onb-help-divider) !important;
  opacity: 0.6 !important;
}

/* Spread forms: 3-step flow (info -> question -> arcana). */
#gptlike-chat #chatContainer[data-spread-step="1"] .spread-step-2,
#gptlike-chat #chatContainer[data-spread-step="1"] .spread-step-3{
  display: none !important;
}
#gptlike-chat #chatContainer[data-spread-step="2"] .spread-step-1,
#gptlike-chat #chatContainer[data-spread-step="2"] .spread-step-3{
  display: none !important;
}
#gptlike-chat #chatContainer[data-spread-step="3"] .spread-step-1,
#gptlike-chat #chatContainer[data-spread-step="3"] .spread-step-2{
  display: none !important;
}

#gptlike-chat #chatContainer[data-spread3-step="1"] .spread3-step-2,
#gptlike-chat #chatContainer[data-spread3-step="1"] .spread3-step-3{
  display: none !important;
}
#gptlike-chat #chatContainer[data-spread3-step="2"] .spread3-step-1,
#gptlike-chat #chatContainer[data-spread3-step="2"] .spread3-step-3{
  display: none !important;
}
#gptlike-chat #chatContainer[data-spread3-step="3"] .spread3-step-1,
#gptlike-chat #chatContainer[data-spread3-step="3"] .spread3-step-2{
  display: none !important;
}

#gptlike-chat #chatContainer[data-spread5-step="1"] .spread5-step-2,
#gptlike-chat #chatContainer[data-spread5-step="1"] .spread5-step-3{
  display: none !important;
}
#gptlike-chat #chatContainer[data-spread5-step="2"] .spread5-step-1,
#gptlike-chat #chatContainer[data-spread5-step="2"] .spread5-step-3{
  display: none !important;
}
#gptlike-chat #chatContainer[data-spread5-step="3"] .spread5-step-1,
#gptlike-chat #chatContainer[data-spread5-step="3"] .spread5-step-2{
  display: none !important;
}

#gptlike-chat #chatContainer[data-spread6-step="1"] .spread6-step-2,
#gptlike-chat #chatContainer[data-spread6-step="1"] .spread6-step-3{
  display: none !important;
}
#gptlike-chat #chatContainer[data-spread6-step="2"] .spread6-step-1,
#gptlike-chat #chatContainer[data-spread6-step="2"] .spread6-step-3{
  display: none !important;
}
#gptlike-chat #chatContainer[data-spread6-step="3"] .spread6-step-1,
#gptlike-chat #chatContainer[data-spread6-step="3"] .spread6-step-2{
  display: none !important;
}

#gptlike-chat #chatContainer[data-spread7-step="1"] .spread7-step-2,
#gptlike-chat #chatContainer[data-spread7-step="1"] .spread7-step-3{
  display: none !important;
}
#gptlike-chat #chatContainer[data-spread7-step="2"] .spread7-step-1,
#gptlike-chat #chatContainer[data-spread7-step="2"] .spread7-step-3{
  display: none !important;
}
#gptlike-chat #chatContainer[data-spread7-step="3"] .spread7-step-1,
#gptlike-chat #chatContainer[data-spread7-step="3"] .spread7-step-2{
  display: none !important;
}

#gptlike-chat #chatContainer[data-spread8-step="1"] .spread8-step-2,
#gptlike-chat #chatContainer[data-spread8-step="1"] .spread8-step-3{
  display: none !important;
}
#gptlike-chat #chatContainer[data-spread8-step="2"] .spread8-step-1,
#gptlike-chat #chatContainer[data-spread8-step="2"] .spread8-step-3{
  display: none !important;
}
#gptlike-chat #chatContainer[data-spread8-step="3"] .spread8-step-1,
#gptlike-chat #chatContainer[data-spread8-step="3"] .spread8-step-2{
  display: none !important;
}

#gptlike-chat #chatContainer[data-spread9-step="1"] .spread9-step-2,
#gptlike-chat #chatContainer[data-spread9-step="1"] .spread9-step-3{
  display: none !important;
}
#gptlike-chat #chatContainer[data-spread9-step="2"] .spread9-step-1,
#gptlike-chat #chatContainer[data-spread9-step="2"] .spread9-step-3{
  display: none !important;
}
#gptlike-chat #chatContainer[data-spread9-step="3"] .spread9-step-1,
#gptlike-chat #chatContainer[data-spread9-step="3"] .spread9-step-2{
  display: none !important;
}

/* Spread step 2 should fill available height (question + advice). */
#gptlike-chat #chatContainer[data-spread-form="spread1"] .spread-step-2,
#gptlike-chat #chatContainer[data-spread-form="spread2"] .spread-step-2,
#gptlike-chat #chatContainer[data-spread-form="spread3"] .spread3-step-2,
#gptlike-chat #chatContainer[data-spread-form="spread5"] .spread5-step-2,
#gptlike-chat #chatContainer[data-spread-form="spread6"] .spread6-step-2,
#gptlike-chat #chatContainer[data-spread-form="spread7"] .spread7-step-2,
#gptlike-chat #chatContainer[data-spread-form="spread8"] .spread8-step-2,
#gptlike-chat #chatContainer[data-spread-form="spread9"] .spread9-step-2{
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
}

/* Spread buttons visibility for 3-step flow. */
#gptlike-chat #chatContainer[data-spread-step="1"] .spread-back-btn,
#gptlike-chat #chatContainer[data-spread-step="1"] .spread-interpret-btn{
  display: none !important;
}
#gptlike-chat #chatContainer[data-spread-step="2"] .spread-clear-btn,
#gptlike-chat #chatContainer[data-spread-step="2"] .spread-interpret-btn{
  display: none !important;
}
#gptlike-chat #chatContainer[data-spread-step="2"] .spread-next-btn{
  display: inline-flex !important;
}
#gptlike-chat #chatContainer[data-spread-step="3"] .spread-clear-btn,
#gptlike-chat #chatContainer[data-spread-step="3"] .spread-next-btn{
  display: none !important;
}
#gptlike-chat #chatContainer[data-spread-step="2"] .spread-back-btn{ order: 1; }
#gptlike-chat #chatContainer[data-spread-step="2"] .spread-next-btn{ order: 2; }

#gptlike-chat #chatContainer[data-spread3-step="1"] .chat-spread-row--send[data-spread-send="spread3"] .spread-back-btn,
#gptlike-chat #chatContainer[data-spread3-step="1"] .chat-spread-row--send[data-spread-send="spread3"] .spread-interpret-btn{
  display: none !important;
}
#gptlike-chat #chatContainer[data-spread3-step="2"] .chat-spread-row--send[data-spread-send="spread3"] .spread-clear-btn,
#gptlike-chat #chatContainer[data-spread3-step="2"] .chat-spread-row--send[data-spread-send="spread3"] .spread-interpret-btn{
  display: none !important;
}
#gptlike-chat #chatContainer[data-spread3-step="2"] .chat-spread-row--send[data-spread-send="spread3"] .spread-next-btn{
  display: inline-flex !important;
}
#gptlike-chat #chatContainer[data-spread3-step="3"] .chat-spread-row--send[data-spread-send="spread3"] .spread-clear-btn,
#gptlike-chat #chatContainer[data-spread3-step="3"] .chat-spread-row--send[data-spread-send="spread3"] .spread-next-btn{
  display: none !important;
}
#gptlike-chat #chatContainer[data-spread3-step="2"] .chat-spread-row--send[data-spread-send="spread3"] .spread-back-btn{ order: 1; }
#gptlike-chat #chatContainer[data-spread3-step="2"] .chat-spread-row--send[data-spread-send="spread3"] .spread-next-btn{ order: 2; }

#gptlike-chat #chatContainer[data-spread5-step="1"] .chat-spread-row--send[data-spread-send="spread5"] .spread-back-btn,
#gptlike-chat #chatContainer[data-spread5-step="1"] .chat-spread-row--send[data-spread-send="spread5"] .spread-interpret-btn{
  display: none !important;
}
#gptlike-chat #chatContainer[data-spread5-step="2"] .chat-spread-row--send[data-spread-send="spread5"] .spread-clear-btn,
#gptlike-chat #chatContainer[data-spread5-step="2"] .chat-spread-row--send[data-spread-send="spread5"] .spread-interpret-btn{
  display: none !important;
}
#gptlike-chat #chatContainer[data-spread5-step="2"] .chat-spread-row--send[data-spread-send="spread5"] .spread-next-btn{
  display: inline-flex !important;
}
#gptlike-chat #chatContainer[data-spread5-step="3"] .chat-spread-row--send[data-spread-send="spread5"] .spread-clear-btn,
#gptlike-chat #chatContainer[data-spread5-step="3"] .chat-spread-row--send[data-spread-send="spread5"] .spread-next-btn{
  display: none !important;
}
#gptlike-chat #chatContainer[data-spread5-step="2"] .chat-spread-row--send[data-spread-send="spread5"] .spread-back-btn{ order: 1; }
#gptlike-chat #chatContainer[data-spread5-step="2"] .chat-spread-row--send[data-spread-send="spread5"] .spread-next-btn{ order: 2; }

#gptlike-chat #chatContainer[data-spread6-step="1"] .chat-spread-row--send[data-spread-send="spread6"] .spread-back-btn,
#gptlike-chat #chatContainer[data-spread6-step="1"] .chat-spread-row--send[data-spread-send="spread6"] .spread-interpret-btn{
  display: none !important;
}
#gptlike-chat #chatContainer[data-spread6-step="2"] .chat-spread-row--send[data-spread-send="spread6"] .spread-clear-btn,
#gptlike-chat #chatContainer[data-spread6-step="2"] .chat-spread-row--send[data-spread-send="spread6"] .spread-interpret-btn{
  display: none !important;
}
#gptlike-chat #chatContainer[data-spread6-step="2"] .chat-spread-row--send[data-spread-send="spread6"] .spread-next-btn{
  display: inline-flex !important;
}
#gptlike-chat #chatContainer[data-spread6-step="3"] .chat-spread-row--send[data-spread-send="spread6"] .spread-clear-btn,
#gptlike-chat #chatContainer[data-spread6-step="3"] .chat-spread-row--send[data-spread-send="spread6"] .spread-next-btn{
  display: none !important;
}
#gptlike-chat #chatContainer[data-spread6-step="2"] .chat-spread-row--send[data-spread-send="spread6"] .spread-back-btn{ order: 1; }
#gptlike-chat #chatContainer[data-spread6-step="2"] .chat-spread-row--send[data-spread-send="spread6"] .spread-next-btn{ order: 2; }

#gptlike-chat #chatContainer[data-spread7-step="1"] .chat-spread-row--send[data-spread-send="spread7"] .spread-back-btn,
#gptlike-chat #chatContainer[data-spread7-step="1"] .chat-spread-row--send[data-spread-send="spread7"] .spread-interpret-btn{
  display: none !important;
}
#gptlike-chat #chatContainer[data-spread7-step="2"] .chat-spread-row--send[data-spread-send="spread7"] .spread-clear-btn,
#gptlike-chat #chatContainer[data-spread7-step="2"] .chat-spread-row--send[data-spread-send="spread7"] .spread-interpret-btn{
  display: none !important;
}
#gptlike-chat #chatContainer[data-spread7-step="2"] .chat-spread-row--send[data-spread-send="spread7"] .spread-next-btn{
  display: inline-flex !important;
}
#gptlike-chat #chatContainer[data-spread7-step="3"] .chat-spread-row--send[data-spread-send="spread7"] .spread-clear-btn,
#gptlike-chat #chatContainer[data-spread7-step="3"] .chat-spread-row--send[data-spread-send="spread7"] .spread-next-btn{
  display: none !important;
}
#gptlike-chat #chatContainer[data-spread7-step="2"] .chat-spread-row--send[data-spread-send="spread7"] .spread-back-btn{ order: 1; }
#gptlike-chat #chatContainer[data-spread7-step="2"] .chat-spread-row--send[data-spread-send="spread7"] .spread-next-btn{ order: 2; }

#gptlike-chat #chatContainer[data-spread8-step="1"] .chat-spread-row--send[data-spread-send="spread8"] .spread-back-btn,
#gptlike-chat #chatContainer[data-spread8-step="1"] .chat-spread-row--send[data-spread-send="spread8"] .spread-interpret-btn{
  display: none !important;
}
#gptlike-chat #chatContainer[data-spread8-step="2"] .chat-spread-row--send[data-spread-send="spread8"] .spread-clear-btn,
#gptlike-chat #chatContainer[data-spread8-step="2"] .chat-spread-row--send[data-spread-send="spread8"] .spread-interpret-btn{
  display: none !important;
}
#gptlike-chat #chatContainer[data-spread8-step="2"] .chat-spread-row--send[data-spread-send="spread8"] .spread-next-btn{
  display: inline-flex !important;
}
#gptlike-chat #chatContainer[data-spread8-step="3"] .chat-spread-row--send[data-spread-send="spread8"] .spread-clear-btn,
#gptlike-chat #chatContainer[data-spread8-step="3"] .chat-spread-row--send[data-spread-send="spread8"] .spread-next-btn{
  display: none !important;
}
#gptlike-chat #chatContainer[data-spread8-step="2"] .chat-spread-row--send[data-spread-send="spread8"] .spread-back-btn{ order: 1; }
#gptlike-chat #chatContainer[data-spread8-step="2"] .chat-spread-row--send[data-spread-send="spread8"] .spread-next-btn{ order: 2; }

#gptlike-chat #chatContainer[data-spread9-step="1"] .chat-spread-row--send[data-spread-send="spread9"] .spread-back-btn,
#gptlike-chat #chatContainer[data-spread9-step="1"] .chat-spread-row--send[data-spread-send="spread9"] .spread-interpret-btn{
  display: none !important;
}
#gptlike-chat #chatContainer[data-spread9-step="2"] .chat-spread-row--send[data-spread-send="spread9"] .spread-clear-btn,
#gptlike-chat #chatContainer[data-spread9-step="2"] .chat-spread-row--send[data-spread-send="spread9"] .spread-interpret-btn{
  display: none !important;
}
#gptlike-chat #chatContainer[data-spread9-step="2"] .chat-spread-row--send[data-spread-send="spread9"] .spread-next-btn{
  display: inline-flex !important;
}
#gptlike-chat #chatContainer[data-spread9-step="3"] .chat-spread-row--send[data-spread-send="spread9"] .spread-clear-btn,
#gptlike-chat #chatContainer[data-spread9-step="3"] .chat-spread-row--send[data-spread-send="spread9"] .spread-next-btn{
  display: none !important;
}
#gptlike-chat #chatContainer[data-spread9-step="2"] .chat-spread-row--send[data-spread-send="spread9"] .spread-back-btn{ order: 1; }
#gptlike-chat #chatContainer[data-spread9-step="2"] .chat-spread-row--send[data-spread-send="spread9"] .spread-next-btn{ order: 2; }

/* Small height screens: prevent overlap and keep content readable */
@media (max-height: 720px) {
  :root {
    --screen-edge-top: calc(4px + var(--safeT));
    --screen-edge-bottom: calc(6px + var(--safeB));
    --content-edge-x: 16px;
    --menu-four-edge: 16px;
    --btnH: clamp(46px, 10vw, 64px);
  }

  #onboardingScreen {
    --onb-btn-h: clamp(42px, 10vw, 52px);
  }
  #onboardingScreen .onb-frame {
    overflow-y: auto;
    align-items: flex-start;
  }
  #onboardingScreen .onb-frame,
  #onboardingScreen .onb-list{
    scrollbar-width: none;
  }
  #onboardingScreen .onb-frame::-webkit-scrollbar,
  #onboardingScreen .onb-list::-webkit-scrollbar{
    width: 0;
    height: 0;
  }
  #onboardingScreen .onb-grid,
  #onboardingScreen .onb-grid--page2,
  #onboardingScreen .onb-grid--page3 {
    flex: 0 0 auto;
  }
  #onboardingScreen .onb-page[data-page="1"] .onb-grid {
    height: auto;
    min-height: 100%;
    grid-template-rows: repeat(7, auto);
    row-gap: 8px;
    padding-bottom: 10px;
  }
  #onboardingScreen .onb-grid--page2,
  #onboardingScreen .onb-grid--page3 {
    height: auto;
    min-height: 100%;
    row-gap: 8px;
  }
  #onboardingScreen .onb-grid--page2 {
    grid-template-rows: auto auto auto;
  }
  #onboardingScreen .onb-grid--page3 {
    grid-template-rows: auto auto auto auto;
  }
  #onboardingScreen .onb-page[data-page="1"] .onb-intro {
    transform: none;
  }
  #onboardingScreen .onb-zone2,
  #onboardingScreen .onb-zone3,
  #onboardingScreen .onb-zone4 {
    padding-bottom: 4px;
  }
  #onboardingScreen .onb-zone {
    padding-inline: max(12px, var(--screen-edge-x)) !important;
  }
  #onboardingScreen .onb-menu-title,
  #onboardingScreen .onb-top-title,
  #onboardingScreen .onb-top-title-text {
    font-size: clamp(13px, 3vw, 15px);
  }
  #onboardingScreen .onb-intro-title,
  #onboardingScreen .onb-intro li,
  #onboardingScreen .onb-item-desc,
  #onboardingScreen .onb-btn-label,
  #onboardingScreen .onb-tagline {
    font-size: clamp(12px, 2.6vw, 14px);
  }
  #onboardingScreen .onb-logo {
    transform: scale(0.92);
  }

  #chatContainer .chat-shell {
    grid-template-rows: clamp(48px, 8%, 72px) minmax(0, 1fr);
  }
  #chatContainer .chat-backbar {
    padding: 0 10px !important;
    gap: 6px;
  }
  #chatContainer .messages {
    margin: 8px var(--content-edge-x);
    padding: 10px 12px;
    gap: 10px;
  }
  .composer-wrapper {
    padding: 6px var(--content-edge-x);
    padding-bottom: calc(var(--screen-edge-bottom) + var(--keyboard-inset, 0px));
  }
  .composer {
    gap: 8px;
  }

  /* Settings modal: fit height without visible scrollbars */
  #styleModalBackdrop .settings-modal{
    max-height: calc(100dvh - var(--modal-shell-top) - var(--modal-shell-bottom)) !important;
    overflow: auto !important;
    scrollbar-width: none;
  }
  #styleModalBackdrop .settings-modal::-webkit-scrollbar{
    width: 0;
    height: 0;
  }
}

@media (max-height: 820px) {
  #onboardingScreen {
    --onb-btn-h: clamp(32px, 5.4vh, 48px);
  }
  #onboardingScreen .onb-grid--page2{
    height: 100%;
    min-height: 100%;
    grid-template-rows: auto 1fr auto !important;
  }
  #onboardingScreen .onb-grid--page3{
    height: 100%;
    min-height: 100%;
    grid-template-rows: auto auto 1fr auto !important;
  }
  #onboardingScreen .onb-frame {
    overflow: hidden;
    align-items: flex-start;
  }
  #onboardingScreen .onb-page[data-page="2"] .onb-list,
  #onboardingScreen .onb-page[data-page="3"] .onb-list {
    overflow: hidden !important;
  }
  #gptlike-chat #onboardingScreen .onb-page[data-page="2"] .onb-list{
    display: grid !important;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(8, 1fr) !important;
    gap: clamp(4px, 0.9vh, 8px) !important;
    height: 100% !important;
    min-height: 0 !important;
  }
  #onboardingScreen .onb-page[data-page="2"] .onb-list .onb-item{
    min-height: 0 !important;
  }
  #gptlike-chat #onboardingScreen .onb-page[data-page="2"] .onb-list .onb-btn{
    height: 100% !important;
    min-height: 0 !important;
    padding-block: clamp(8px, 1.6vh, 14px) !important;
  }
  #onboardingScreen[data-submenu="spreads"] .onb-page[data-page="3"] .onb-list--spreads{
    display: grid !important;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(10, 1fr);
    gap: clamp(4px, 0.9vh, 8px) !important;
    height: 100% !important;
    min-height: 0 !important;
    align-content: stretch;
    overflow: hidden !important;
  }
  #onboardingScreen[data-submenu="spreads"] .onb-page[data-page="3"] .onb-list--spreads .onb-item{
    height: 100% !important;
    min-height: var(--onb-btn-h) !important;
  }
  #gptlike-chat #onboardingScreen[data-submenu="spreads"] .onb-page[data-page="3"] .onb-list--spreads .onb-btn{
    height: 100% !important;
    min-height: var(--onb-btn-h) !important;
    padding-block: clamp(8px, 1.6vh, 14px) !important;
  }
  #onboardingScreen .onb-page[data-page="2"] .onb-btn,
  #onboardingScreen .onb-page[data-page="3"] .onb-btn{
    font-size: clamp(11px, 2.1vh, 14px) !important;
  }
  #onboardingScreen .onb-page[data-page="2"] .onb-btn-label,
  #onboardingScreen .onb-page[data-page="3"] .onb-btn-label{
    font-size: inherit !important;
  }
  #onboardingScreen .onb-page[data-page="2"] .onb-item-desc,
  #onboardingScreen .onb-page[data-page="3"] .onb-item-desc{
    font-size: clamp(10px, 1.9vh, 12px) !important;
  }
  #onboardingScreen .onb-frame,
  #onboardingScreen .onb-list{
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  #onboardingScreen .onb-frame::-webkit-scrollbar,
  #onboardingScreen .onb-list::-webkit-scrollbar{
    width: 0;
    height: 0;
  }
}

@media (max-height: 720px) {
  #onboardingScreen .onb-page[data-page="2"]{
    --onb-item-pad: clamp(2px, 0.6vh, 4px);
  }
  #onboardingScreen .onb-page[data-page="2"] .onb-list{
    gap: clamp(2px, 0.5vh, 5px) !important;
  }
  #onboardingScreen .onb-page[data-page="2"] .onb-list .onb-btn{
    padding-block: clamp(6px, 1.2vh, 10px) !important;
  }
}

/* Bottom menu icons: keep square aspect and avoid squashing */
#gptlike-chat #onboardingScreen .onb-row-four .onb-btn-ico{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  overflow: visible;
}
#gptlike-chat #onboardingScreen .onb-row-four .onb-btn-ico svg{
  display: block;
  width: 34px;
  height: 34px;
}

body.onboarding-active {
  overflow: hidden;
}

/* Arcana submenu: keep buttons same as normal menu (no special layout) */
#gptlike-chat #onboardingScreen[data-submenu="arcana"] .onb-page[data-page="3"] .onb-list--arcana{
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  height: auto !important;
  min-height: 0 !important;
  align-content: stretch;
}
#gptlike-chat #onboardingScreen[data-submenu="arcana"] .onb-page[data-page="3"] .onb-list--arcana .onb-item{
  height: auto !important;
  min-height: var(--onb-btn-h) !important;
}
#gptlike-chat #onboardingScreen[data-submenu="arcana"] .onb-page[data-page="3"] .onb-list--arcana .onb-btn{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  white-space: normal !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  font-size: var(--btnFz) !important;
  line-height: 1.2 !important;
  height: auto !important;
  min-height: var(--onb-btn-h) !important;
  padding-block: clamp(10px, 1.6vh, 14px) !important;
}
#gptlike-chat #onboardingScreen[data-submenu="arcana"] .onb-page[data-page="3"] .onb-list--arcana .onb-arcana-main,
#gptlike-chat #onboardingScreen[data-submenu="arcana"] .onb-page[data-page="3"] .onb-list--arcana .onb-arcana-sub{
  display: inline !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  opacity: 1 !important;
}

/* Spreads menu: allow scroll without visible scrollbar */
#gptlike-chat #onboardingScreen .onb-page[data-page="3"] .onb-list--spreads{
  overflow-y: auto;
  scrollbar-width: none;
}
#gptlike-chat #onboardingScreen .onb-page[data-page="3"] .onb-list--spreads::-webkit-scrollbar{
  width: 0;
  height: 0;
}
#gptlike-chat #onboardingScreen:not([data-submenu="arcana"]) .onb-page[data-page="3"] .onb-list--arcana{
  display: none !important;
}

/* Settings modal: prevent button flicker/disappear on focus/hover */
#gptlike-chat #styleModalBackdrop .settings-modal button,
#gptlike-chat #styleModalBackdrop .settings-modal [role="button"]{
  visibility: visible !important;
  opacity: 1 !important;
  --lock-bg-image: var(--gold-ui-bg);
  --lock-bg-color: var(--gold-ui-bg-solid);
  --lock-border: var(--gold-ui-border);
  --lock-color: var(--gold-ui-text);
  --lock-shadow: var(--gold-ui-shadow);
  --lock-text-shadow: none;
}

/* Bottom auth icon: show only one (login OR logout), never both */
#gptlike-chat #onboardingScreen .onb-row-four .onb-auth-btn .onb-ico-login,
#gptlike-chat #onboardingScreen .onb-row-four .onb-auth-btn .onb-ico-logout{
  display: none !important;
}
#gptlike-chat #onboardingScreen .onb-row-four .onb-auth-btn[data-auth="out"] .onb-ico-login{
  display: inline-flex !important;
}
#gptlike-chat #onboardingScreen .onb-row-four .onb-auth-btn[data-auth="in"] .onb-ico-logout{
  display: inline-flex !important;
}

/* Menu height fix: equal distribution + strict submenu visibility */
#onboardingScreen .onb-page[data-page="2"] .onb-list{
  height: 100% !important;
  display: grid !important;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(8, 1fr);
}
#onboardingScreen .onb-page[data-page="2"] .onb-list .onb-item{
  min-height: 0 !important;
}
#onboardingScreen .onb-page[data-page="2"] .onb-list .onb-btn{
  height: 100% !important;
  min-height: 0 !important;
}
#onboardingScreen[data-submenu="spreads"] .onb-page[data-page="3"] .onb-list--spreads{
  display: grid !important;
  grid-template-rows: repeat(10, 1fr) !important;
  height: 100% !important;
}
#onboardingScreen[data-submenu="spreads"] .onb-page[data-page="3"] .onb-list--spreads .onb-item,
#onboardingScreen[data-submenu="spreads"] .onb-page[data-page="3"] .onb-list--spreads .onb-btn{
  height: 100% !important;
  min-height: var(--onb-btn-h) !important;
}
#onboardingScreen[data-submenu="arcana"] .onb-page[data-page="3"] .onb-list--spreads{
  display: none !important;
}
#onboardingScreen[data-submenu="spreads"] .onb-page[data-page="3"] .onb-list--arcana{
  display: none !important;
}

/* Small screens: stack dual date fields to avoid overlap */
@media (max-width: 420px), (max-height: 820px) {
  #gptlike-chat #chatContainer .spread-form-row--dual{
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  #gptlike-chat #chatContainer .spread-form-row--dual .spread-form-field{
    width: 100%;
    min-width: 0;
  }
  #gptlike-chat #chatContainer input.spread-form-input[type="date"]{
    min-height: 44px;
  }
}