/* UI-RF-01 — responsive reale, touch e percorso di rendering composito. */

:root {
  --leo-ui-safe-top: max(0px, env(safe-area-inset-top));
  --leo-ui-safe-right: max(0px, env(safe-area-inset-right));
  --leo-ui-safe-bottom: max(0px, env(safe-area-inset-bottom));
  --leo-ui-safe-left: max(0px, env(safe-area-inset-left));
}

html.leoCoreV4Root,
body.leoCoreV4 {
  min-height: 100%;
  min-height: 100dvh;
}

body.leoCoreV4:not(.leoV4ChatMode) {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior-x: none;
}

body.leoCoreV4 button,
body.leoCoreV4 [role="button"] {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

body.leoCoreV4 .leoV4Brain {
  animation: none !important;
  contain: layout style;
  transition:
    transform .12s cubic-bezier(.2, .8, .2, 1),
    opacity .12s ease !important;
}

body.leoCoreV4 .leoV4Brain:hover,
body.leoCoreV4 .leoV4Brain.is-pointer,
body.leoCoreV4 .leoV4Brain:focus-visible {
  transform: translate(-50%, -54%) scale(1.055);
}

body.leoCoreV4 .leoV4BrainOrb {
  transition: transform .12s ease !important;
}

body.leoCoreV4 .leoV4Brain.is-inside,
body.leoCoreV4.leoCoreV41 .leoV4Brain.is-inside {
  top: var(--y) !important;
  left: var(--x) !important;
  transform:
    translate(
      calc(-50% + var(--leo-v4-inside-x, 0px)),
      calc(-50% + var(--leo-v4-inside-y, 0px))
    )
    scale(1.14) !important;
}

body.leoCoreV4 .leoV4Core {
  animation: none !important;
  transition: transform .18s ease, box-shadow .2s ease, background .2s ease !important;
}

body.leoCoreV4 .leoV4NeuralLines path {
  transition: none !important;
}

body.leoCoreV4.leoCoreV41 .leoV4Universe,
body.leoCoreV4 .leoV4Universe {
  background:
    radial-gradient(circle at 50% 52%, rgba(217, 190, 171, .22), transparent 23%),
    radial-gradient(circle at 16% 18%, rgba(255, 205, 179, .32), transparent 30%),
    radial-gradient(circle at 85% 17%, rgba(211, 205, 233, .30), transparent 30%),
    radial-gradient(circle at 80% 80%, rgba(129, 202, 192, .27), transparent 31%),
    linear-gradient(135deg, rgba(255, 251, 245, .62), rgba(234, 239, 235, .42) 48%, rgba(226, 237, 233, .48) 72%, rgba(248, 229, 220, .54)) !important;
}

body.leoCoreV4 .leoV4Universe::before,
body.leoCoreV4.leoCoreV41 .leoV4Universe::before {
  filter: none !important;
  transition: none !important;
}

body.leoCoreV4 .leoV4Universe,
body.leoCoreV4.leoCoreV41 .leoV4Universe,
body.leoCoreV4 .tabs,
body.leoCoreV4 .profilePill,
body.leoCoreV4 #profileName,
body.leoCoreV4 .leoV4ModeDock,
body.leoCoreV4 .leoV4HomeComposer,
body.leoCoreV4 .leoV4SidePanel > .card,
body.leoCoreV4 .leoV4SidePanel > .privateBox,
body.leoCoreV4 .leoV4SidePanel #privateBox,
body.leoCoreV4 .leoV4BrainOrb,
body.leoCoreV4 .leoV4Core,
body.leoCoreV4.leoV4ChatMode #chatPage .chatPanel,
body.leoCoreV4.leoV4ChatMode #chatPage .inputRow,
body.leoCoreV4 .leoV4SecondaryPage > .panel,
body.leoCoreV4 .leoV4SecondaryPage > .card {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

body.leoCoreV4 .leoV4BrainName strong,
body.leoCoreV4.leoCoreV41 .leoV4BrainName strong,
body.leoCoreV4 .leoV4BrainName small,
body.leoCoreV4.leoCoreV41 .leoV4BrainName small {
  width: 100%;
  max-width: 100% !important;
  overflow: visible;
  overflow-wrap: anywhere;
  text-overflow: clip;
  white-space: normal;
}

/* La presenza occupa una fascia propria: la ruota non passa sotto il testo. */
@media (min-width: 821px) {
  body.leoCoreV4.leoCoreV41 .leoV4Presence,
  body.leoCoreV4 .leoV4Presence {
    top: 22px;
    right: 32px;
    left: 32px;
    display: grid;
    width: auto !important;
    max-width: none !important;
    grid-template-columns: minmax(210px, 255px) minmax(260px, 1fr);
    grid-template-rows: auto auto auto;
    column-gap: 26px;
    align-items: start;
  }

  body.leoCoreV4 .leoV4Presence h1,
  body.leoCoreV4 .leoV4Presence > p,
  body.leoCoreV4 .leoV4Presence > .leoV4Health {
    grid-column: 1;
  }

  body.leoCoreV4 .leoV4Presence > p {
    margin: 4px 0 10px;
  }

  body.leoCoreV4.leoCoreV41 .leoV4Joke,
  body.leoCoreV4 .leoV4Joke {
    width: min(520px, 100%) !important;
    max-width: 520px !important;
    margin: 1px 0 0 auto;
    grid-column: 2;
    grid-row: 1 / 4;
  }

  body.leoCoreV4 .leoV4Stage {
    inset: 112px 12px 112px;
  }
}

/* Desktop/notebook compatti: ruota invariata, nodi più distanziati e area scrollabile. */
@media (min-width: 821px) and (max-width: 1440px) {
  body.leoCoreV4 .leoV4HomeGrid {
    height: auto;
    min-height: max(600px, calc(100dvh - 102px));
  }

  body.leoCoreV4 .leoV4Universe {
    min-height: max(600px, calc(100dvh - 102px));
  }

  body.leoCoreV4.leoCoreV41 .leoV4Brain,
  body.leoCoreV4 .leoV4Brain {
    width: 62px;
    height: 88px;
  }

  body.leoCoreV4.leoCoreV41 .leoV4BrainOrb,
  body.leoCoreV4 .leoV4BrainOrb {
    width: 58px;
    height: 58px;
  }

  body.leoCoreV4.leoCoreV41 .leoV4BrainOrb svg,
  body.leoCoreV4 .leoV4BrainOrb svg {
    width: 31px;
    height: 31px;
  }

  body.leoCoreV4 .leoV4BrainName strong { font-size: 11px; }
  body.leoCoreV4 .leoV4BrainName small { font-size: 7.5px; }
  body.leoCoreV4.leoCoreV41 .leoV4Core,
  body.leoCoreV4 .leoV4Core {
    width: clamp(174px, 16vw, 220px);
    height: clamp(174px, 16vw, 220px);
  }
}

@media (min-width: 1181px) and (max-height: 850px) {
  body.leoCoreV4 .leoV4HomeGrid,
  body.leoCoreV4 .leoV4Universe {
    min-height: max(580px, calc(100dvh - 96px));
  }

  body.leoCoreV4 .leoV4Presence { top: 14px; }
  body.leoCoreV4 .leoV4Presence h1 { font-size: 22px; }
  body.leoCoreV4 .leoV4Stage { inset: 94px 8px 104px; }
  body.leoCoreV4 .leoV4ModeDock { bottom: 91px; min-height: 58px; }
  body.leoCoreV4 .leoV4ChooseHint { display: none; }
  body.leoCoreV4 .leoV4HomeComposer { bottom: 12px; }
}

/* Neutralizza soltanto gli effetti originali paint-heavy. Le sostituzioni
   compositor-friendly sono definite più sotto e restano attive di default. */
@media (min-width: 0px) {
  body.leoCoreV4::before,
  body.leoCoreV4::after,
  body.leoCoreV4 .leoV4Ribbon,
  body.leoCoreV4 .leoV4Pearl,
  body.leoCoreV4 .leoV4NeuralLines path,
  body.leoCoreV4 .leoV4Core,
  body.leoCoreV4 .leoV4Core::before,
  body.leoCoreV4 .leoV4Core::after,
  body.leoCoreV4.leoCoreV41 .leoV41Texture,
  body.leoCoreV4.leoCoreV41 .leoV4BrainOrb::after,
  body.leoCoreV4.leoCoreV41 .leoV4CoreHalo::before,
  body.leoCoreV4.leoCoreV41 .leoV4CoreHalo::after {
    animation: none !important;
  }

  body.leoCoreV4 .leoV4Fluid,
  body.leoCoreV4.leoCoreV41 .leoV41Texture {
    display: none !important;
  }

  body.leoCoreV4 .leoV4NeuralLines,
  body.leoCoreV4.leoCoreV41 .leoV4NeuralLines {
    filter: none !important;
  }

  body.leoCoreV4 .leoV4BrainOrb svg,
  body.leoCoreV4.leoCoreV41 .leoV4BrainOrb svg {
    filter: none !important;
  }

  body.leoCoreV4 .leoV4BrainOrb,
  body.leoCoreV4.leoCoreV41 .leoV4BrainOrb {
    box-shadow:
      inset -7px -8px 14px color-mix(in srgb, var(--tone) 18%, rgba(66,83,78,.08)),
      inset 7px 8px 13px rgba(255,255,255,.65),
      0 0 0 4px rgba(255,255,255,.24),
      0 9px 20px color-mix(in srgb, var(--tone) 26%, rgba(58,76,71,.10)) !important;
  }

  body.leoCoreV4 .leoV4Core,
  body.leoCoreV4.leoCoreV41 .leoV4Core {
    box-shadow:
      inset -18px -20px 36px rgba(51,76,69,.20),
      inset 18px 18px 34px rgba(255,255,255,.45),
      0 0 0 7px rgba(255,255,255,.28),
      0 20px 46px rgba(72,87,81,.16) !important;
  }

  body.leoCoreV4 .leoV4Brain.is-selected .leoV4BrainOrb,
  body.leoCoreV4 .leoV4Brain.is-inside .leoV4BrainOrb,
  body.leoCoreV4.leoCoreV41 .leoV4Brain.is-selected .leoV4BrainOrb,
  body.leoCoreV4.leoCoreV41 .leoV4Brain.is-inside .leoV4BrainOrb {
    box-shadow:
      inset -7px -8px 14px color-mix(in srgb, var(--tone) 18%, rgba(66,83,78,.08)),
      inset 7px 8px 13px rgba(255,255,255,.65),
      0 0 0 5px color-mix(in srgb, var(--tone) 22%, rgba(255,255,255,.24)),
      0 9px 20px color-mix(in srgb, var(--tone) 26%, rgba(58,76,71,.10)) !important;
  }
}

/* Tablet e smartphone verticale: griglia 3x5, non una ruota desktop rimpicciolita. */
@media (max-width: 820px) {
  body.leoCoreV4 .app {
    width: 100% !important;
    padding:
      calc(7px + var(--leo-ui-safe-top))
      max(7px, var(--leo-ui-safe-right))
      calc(14px + var(--leo-ui-safe-bottom))
      max(7px, var(--leo-ui-safe-left)) !important;
  }

  body.leoCoreV4 .topbar {
    height: 60px !important;
    min-height: 60px !important;
    padding: 0 8px !important;
  }

  body.leoCoreV4 .brand { min-width: 0; gap: 7px !important; }
  body.leoCoreV4 .brand .sharkLogo,
  body.leoCoreV4 .brand .leoV4HomeControl {
    width: 66px !important;
    height: 52px !important;
  }
  body.leoCoreV4 .brand .leoName {
    display: flex;
    min-height: 44px;
    align-items: center;
    font-size: clamp(18px, 6vw, 22px) !important;
    letter-spacing: .24em !important;
  }
  body.leoCoreV4 .profilePill,
  body.leoCoreV4 #profileName {
    min-width: 96px !important;
    min-height: 44px !important;
    padding: 0 12px !important;
  }

  body.leoCoreV4 .tabs {
    width: 100% !important;
    height: 54px !important;
    margin: 4px 0 8px !important;
    padding: 5px !important;
  }
  body.leoCoreV4 .tabs .tab {
    min-height: 44px !important;
    height: 44px !important;
    padding: 0 4px !important;
    font-size: clamp(10px, 3vw, 12px) !important;
  }

  body.leoCoreV4 .leoV4HomeGrid {
    display: block;
    height: auto;
    min-height: 0;
  }

  body.leoCoreV4 .leoV4Universe,
  body.leoCoreV4.leoCoreV41 .leoV4Universe {
    min-height: 1010px;
    border-radius: 28px;
  }

  body.leoCoreV4.leoCoreV41 .leoV4Presence,
  body.leoCoreV4 .leoV4Presence {
    top: 20px;
    right: 18px;
    left: 18px;
    display: block;
    width: auto !important;
  }
  body.leoCoreV4 .leoV4Presence h1 { font-size: 22px; }
  body.leoCoreV4 .leoV4Presence > p { margin: 4px 0 12px; }
  body.leoCoreV4.leoCoreV41 .leoV4Joke,
  body.leoCoreV4 .leoV4Joke {
    width: min(100%, 440px) !important;
    max-width: none !important;
    margin-top: 12px;
  }

  body.leoCoreV4.leoCoreV41 .leoV4Stage,
  body.leoCoreV4 .leoV4Stage {
    position: absolute;
    inset: 190px 10px 142px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: 132px;
    grid-auto-rows: 110px;
    gap: 5px 4px;
    align-content: start;
    transform: none;
  }

  body.leoCoreV4 .leoV4NeuralLines { display: none; }

  body.leoCoreV4.leoCoreV41 .leoV4Brain,
  body.leoCoreV4 .leoV4Brain,
  body.leoCoreV4.leoCoreV41 .leoV4Brain.is-inside,
  body.leoCoreV4 .leoV4Brain.is-inside {
    position: relative;
    top: auto !important;
    left: auto !important;
    width: 100%;
    min-width: 0;
    height: 108px;
    pointer-events: auto;
    transform: none !important;
  }

  body.leoCoreV4 .leoV4Brain:hover,
  body.leoCoreV4 .leoV4Brain:focus-visible,
  body.leoCoreV4 .leoV4Brain.is-selected,
  body.leoCoreV4 .leoV4Brain.is-inside,
  body.leoCoreV4.leoCoreV41 .leoV4Brain:hover,
  body.leoCoreV4.leoCoreV41 .leoV4Brain:focus-visible,
  body.leoCoreV4.leoCoreV41 .leoV4Brain.is-selected,
  body.leoCoreV4.leoCoreV41 .leoV4Brain.is-inside {
    transform: translateY(-2px) scale(1.015) !important;
  }

  body.leoCoreV4.leoCoreV41 .leoV4BrainOrb,
  body.leoCoreV4 .leoV4BrainOrb {
    width: 62px;
    height: 62px;
  }
  body.leoCoreV4.leoCoreV41 .leoV4BrainOrb svg,
  body.leoCoreV4 .leoV4BrainOrb svg { width: 33px; height: 33px; }
  body.leoCoreV4 .leoV4BrainName { margin-top: 5px; }
  body.leoCoreV4 .leoV4BrainName strong { font-size: 11px; line-height: 1.08; }
  body.leoCoreV4 .leoV4BrainName small { margin-top: 2px; font-size: 8px; line-height: 1.05; }

  body.leoCoreV4.leoCoreV41 .leoV4Core,
  body.leoCoreV4 .leoV4Core {
    position: relative;
    top: auto;
    left: auto;
    order: -1;
    width: 126px;
    height: 126px;
    margin: 0 auto 3px;
    grid-column: 1 / -1;
    transform: none !important;
  }
  body.leoCoreV4.leoCoreV41 .leoV4CoreCopy small,
  body.leoCoreV4 .leoV4CoreCopy small { font-size: 20px; }
  body.leoCoreV4.leoCoreV41 .leoV4CoreCopy strong,
  body.leoCoreV4 .leoV4CoreCopy strong { font-size: 14px; }

  body.leoCoreV4 .leoV4ModeDock,
  body.leoCoreV4.leoCoreV41 .leoV4ModeDock {
    right: 12px;
    bottom: 76px;
    left: 12px;
    width: auto;
    min-height: 54px;
    padding: 8px 11px;
  }
  body.leoCoreV4 .leoV4ModeDock small { margin-top: 3px; }
  body.leoCoreV4 .leoV4ChooseHint { display: none; }
  body.leoCoreV4 .leoV4HomeComposer {
    right: 10px;
    bottom: max(10px, var(--leo-ui-safe-bottom));
    left: 10px;
    height: 50px;
    grid-template-columns: 46px minmax(0, 1fr) auto;
    gap: 6px;
  }
  body.leoCoreV4 .leoV4Plus { width: 46px; height: 46px; }
  body.leoCoreV4 #leoV4HomePrompt { height: 48px; padding: 0 13px; font-size: 13px; }
  body.leoCoreV4 .leoV4Send { min-width: 62px; height: 46px; padding: 0 11px; }

  body.leoCoreV4 .leoV4Rail { margin-top: 12px; overflow: visible; }
  body.leoCoreV4 .leoV4Rail > .sidePanel,
  body.leoCoreV4 .leoV4SidePanel {
    display: flex !important;
    height: auto !important;
    padding: 0 0 8px !important;
    flex-direction: column !important;
    gap: 12px !important;
    overflow: visible !important;
  }
  body.leoCoreV4 .leoV4SidePanel > .card,
  body.leoCoreV4 .leoV4SidePanel > .privateBox,
  body.leoCoreV4 .leoV4SidePanel #privateBox {
    width: 100% !important;
    padding: 18px !important;
  }
  body.leoCoreV4 .leoV4SidePanel .quickGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  body.leoCoreV4 .leoV4SidePanel .quickBtn {
    min-height: 116px !important;
    padding: 13px !important;
  }
  body.leoCoreV4 .leoV4SidePanel .ghostBtn,
  body.leoCoreV4 .leoV4SidePanel #privateBtn { min-height: 44px !important; }
  body.leoCoreV4 .leoActivityDrawerClose,
  body.leoCoreV4 .stageClose {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
  }

  body.leoCoreV4.leoV4ChatMode {
    min-height: 100dvh;
    overflow: hidden !important;
  }
  body.leoCoreV4.leoV4ChatMode .main {
    height: calc(100dvh - 133px - var(--leo-ui-safe-top)) !important;
    min-height: 410px;
  }
  body.leoCoreV4.leoV4ChatMode #chatPage .chatPanel { border-radius: 28px !important; }
  body.leoCoreV4.leoV4ChatMode #chatPage .leoV4ChatHead {
    min-height: 106px !important;
    padding: 10px !important;
  }
  body.leoCoreV4.leoV4ChatMode #chatPage .inputRow {
    min-height: 62px !important;
    margin: 0 7px max(7px, var(--leo-ui-safe-bottom)) !important;
    padding: 6px !important;
    grid-template-columns: 46px minmax(0, 1fr) auto !important;
  }
  body.leoCoreV4.leoV4ChatMode #chatPage .inputRow .plusBtn,
  body.leoCoreV4.leoV4ChatMode #chatPage .chatInput,
  body.leoCoreV4.leoV4ChatMode #chatPage #chatText,
  body.leoCoreV4.leoV4ChatMode #chatPage .sendBtn { min-height: 46px !important; height: 46px !important; }
  body.leoCoreV4.leoV4ChatMode #chatPage .sendBtn { min-width: 62px !important; padding: 0 10px !important; }
  body.leoCoreV4.leoV4ChatMode #chatPage #chatBox { padding: 13px 10px !important; }
  body.leoCoreV4.leoV4ChatMode #chatPage #chatBox > .msg,
  body.leoCoreV4.leoV4ChatMode #chatPage #chatBox .msg { max-width: 92% !important; }

  body.leoCoreV4 .leoV4SecondaryPage.active {
    min-height: calc(100dvh - 133px) !important;
  }
  body.leoCoreV4 .leoV4SecondaryPage > .panel,
  body.leoCoreV4 .leoV4SecondaryPage > .card,
  body.leoCoreV4 .leoV4SecondaryPage .panel.voicePanel,
  body.leoCoreV4 .leoV4SecondaryPage .settingsGrid {
    padding: 17px !important;
    border-radius: 28px !important;
  }
  body.leoCoreV4 #imagesPage .gridPage,
  body.leoCoreV4 #settingsPage .settingsGrid { grid-template-columns: 1fr !important; }
  body.leoCoreV4 #imagesPage .toolCard,
  body.leoCoreV4 #settingsPage .card,
  body.leoCoreV4 #voicePage button,
  body.leoCoreV4 .leoV4SecondaryPage button { min-height: 44px; }
}

@media (max-width: 360px) {
  body.leoCoreV4 .app {
    padding-right: max(5px, var(--leo-ui-safe-right)) !important;
    padding-left: max(5px, var(--leo-ui-safe-left)) !important;
  }
  body.leoCoreV4 .brand .leoV4HomeControl { width: 58px !important; }
  body.leoCoreV4 .brand .leoName { font-size: 18px !important; letter-spacing: .18em !important; }
  body.leoCoreV4 .profilePill,
  body.leoCoreV4 #profileName { min-width: 88px !important; padding: 0 9px !important; font-size: 11px !important; }
  body.leoCoreV4 .tabs .tab { font-size: 10px !important; }
  body.leoCoreV4 .leoV4Universe,
  body.leoCoreV4.leoCoreV41 .leoV4Universe { min-height: 990px; }
  body.leoCoreV4 .leoV4Stage,
  body.leoCoreV4.leoCoreV41 .leoV4Stage { right: 5px; left: 5px; }
  body.leoCoreV4 .leoV4BrainName small { display: none; }
  body.leoCoreV4 .leoV4BrainName strong { font-size: 10.5px; }
  body.leoCoreV4 .leoV4HomeComposer { right: 7px; left: 7px; grid-template-columns: 44px minmax(0, 1fr) 58px; }
  body.leoCoreV4 #leoV4HomePrompt { padding: 0 10px; font-size: 12px; }
  body.leoCoreV4 .leoV4Send { min-width: 58px; padding: 0 8px; }
}

/* Finestra desktop stretta e tablet largo: griglia 5x3 con nucleo separato. */
@media (min-width: 821px) and (max-width: 1100px),
       (pointer: coarse) and (min-width: 821px) and (max-width: 1180px) {
  body.leoCoreV4 .leoV4Universe,
  body.leoCoreV4.leoCoreV41 .leoV4Universe { min-height: 720px; }

  body.leoCoreV4 .leoV4Stage,
  body.leoCoreV4.leoCoreV41 .leoV4Stage {
    inset: 145px 12px 132px;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    grid-template-rows: 106px;
    grid-auto-rows: 92px;
    gap: 4px;
    align-content: start;
    transform: none;
  }

  body.leoCoreV4 .leoV4NeuralLines,
  body.leoCoreV4.leoCoreV41 .leoV4NeuralLines { display: none; }

  body.leoCoreV4 .leoV4Brain,
  body.leoCoreV4.leoCoreV41 .leoV4Brain,
  body.leoCoreV4 .leoV4Brain.is-inside,
  body.leoCoreV4.leoCoreV41 .leoV4Brain.is-inside {
    position: relative;
    top: auto !important;
    left: auto !important;
    width: 100%;
    height: 90px;
    transform: none !important;
    pointer-events: auto;
  }

  body.leoCoreV4 .leoV4Brain:hover,
  body.leoCoreV4 .leoV4Brain:focus-visible,
  body.leoCoreV4 .leoV4Brain.is-selected,
  body.leoCoreV4 .leoV4Brain.is-inside,
  body.leoCoreV4.leoCoreV41 .leoV4Brain:hover,
  body.leoCoreV4.leoCoreV41 .leoV4Brain:focus-visible,
  body.leoCoreV4.leoCoreV41 .leoV4Brain.is-selected,
  body.leoCoreV4.leoCoreV41 .leoV4Brain.is-inside {
    transform: translateY(-2px) scale(1.015) !important;
  }

  body.leoCoreV4 .leoV4BrainOrb,
  body.leoCoreV4.leoCoreV41 .leoV4BrainOrb { width: 54px; height: 54px; }
  body.leoCoreV4 .leoV4BrainOrb svg,
  body.leoCoreV4.leoCoreV41 .leoV4BrainOrb svg { width: 29px; height: 29px; }
  body.leoCoreV4 .leoV4BrainName { margin-top: 4px; }
  body.leoCoreV4 .leoV4BrainName strong { font-size: 10px; }
  body.leoCoreV4 .leoV4BrainName small { font-size: 7px; }

  body.leoCoreV4 .leoV4Core,
  body.leoCoreV4.leoCoreV41 .leoV4Core {
    position: relative;
    top: auto;
    left: auto;
    order: -1;
    width: 102px;
    height: 102px;
    margin: 0 auto;
    grid-column: 1 / -1;
    transform: none !important;
  }
  body.leoCoreV4 .leoV4ModeDock { bottom: 68px; min-height: 48px; }
  body.leoCoreV4 .leoV4ModeDock small { display: none; }
  body.leoCoreV4 .leoV4HomeComposer { bottom: 9px; }
}

/* Smartphone e tablet in orizzontale: griglia 5 colonne compatta e scroll verticale. */
@media (max-width: 960px) and (max-height: 600px) and (orientation: landscape) {
  body.leoCoreV4:not(.leoV4ChatMode) { overflow-y: auto !important; }
  body.leoCoreV4 .app {
    width: 100% !important;
    padding: 7px max(7px, var(--leo-ui-safe-right)) 14px max(7px, var(--leo-ui-safe-left)) !important;
  }
  body.leoCoreV4 .topbar { height: 60px !important; min-height: 60px !important; padding: 0 5px !important; }
  body.leoCoreV4 .brand { min-width: 72px; }
  body.leoCoreV4 .brand .leoName { display: none; }
  body.leoCoreV4 .brand .leoV4HomeControl { width: 66px !important; height: 52px !important; }
  body.leoCoreV4 .tabs {
    width: min(520px, calc(100vw - 210px)) !important;
    min-width: 0 !important;
  }
  body.leoCoreV4 .tabs .tab { min-width: 0; padding: 0 3px !important; font-size: 11px !important; }
  body.leoCoreV4 .profilePill,
  body.leoCoreV4 #profileName { min-width: 94px !important; min-height: 44px !important; padding: 0 10px !important; }

  body.leoCoreV4 .leoV4Universe,
  body.leoCoreV4.leoCoreV41 .leoV4Universe { min-height: 640px; }
  body.leoCoreV4.leoCoreV41 .leoV4Presence,
  body.leoCoreV4 .leoV4Presence {
    top: 14px;
    right: 18px;
    left: 18px;
    display: grid;
    grid-template-columns: minmax(180px, 230px) 1fr;
    grid-template-rows: auto auto auto;
    column-gap: 18px;
  }
  body.leoCoreV4 .leoV4Presence h1,
  body.leoCoreV4 .leoV4Presence > p,
  body.leoCoreV4 .leoV4Presence > .leoV4Health { grid-column: 1; }
  body.leoCoreV4.leoCoreV41 .leoV4Joke,
  body.leoCoreV4 .leoV4Joke {
    margin: 0;
    grid-column: 2;
    grid-row: 1 / 4;
  }

  body.leoCoreV4.leoCoreV41 .leoV4Stage,
  body.leoCoreV4 .leoV4Stage {
    inset: 130px 10px 132px;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    grid-template-rows: 92px;
    grid-auto-rows: 84px;
    gap: 4px;
    transform: none;
  }
  body.leoCoreV4.leoCoreV41 .leoV4Core,
  body.leoCoreV4 .leoV4Core {
    width: 88px;
    height: 88px;
    grid-column: 1 / -1;
  }
  body.leoCoreV4.leoCoreV41 .leoV4Brain,
  body.leoCoreV4 .leoV4Brain,
  body.leoCoreV4.leoCoreV41 .leoV4Brain.is-inside,
  body.leoCoreV4 .leoV4Brain.is-inside {
    position: relative;
    top: auto !important;
    left: auto !important;
    width: 100%;
    height: 82px;
    transform: none !important;
    pointer-events: auto;
  }
  body.leoCoreV4.leoCoreV41 .leoV4BrainOrb,
  body.leoCoreV4 .leoV4BrainOrb { width: 48px; height: 48px; }
  body.leoCoreV4.leoCoreV41 .leoV4BrainOrb svg,
  body.leoCoreV4 .leoV4BrainOrb svg { width: 26px; height: 26px; }
  body.leoCoreV4 .leoV4BrainName { margin-top: 3px; }
  body.leoCoreV4 .leoV4BrainName strong { font-size: 9px; }
  body.leoCoreV4 .leoV4BrainName small { display: none; }
  body.leoCoreV4 .leoV4ModeDock { bottom: 70px; min-height: 48px; }
  body.leoCoreV4 .leoV4ModeDock small { display: none; }
  body.leoCoreV4 .leoV4HomeComposer { bottom: max(9px, var(--leo-ui-safe-bottom)); }
}

@media (max-width: 640px) and (max-height: 600px) and (orientation: landscape) {
  body.leoCoreV4 .leoV41TabIcon { display: none !important; }
  body.leoCoreV4 .tabs .tab { font-size: 10px !important; }
}

/* Effetti identitari ottimizzati: solo transform e opacity sui layer mobili. */
body.leoCoreV4.leoCoreV41 .leoV41Texture {
  display: block !important;
  contain: layout paint style;
  filter: none !important;
  opacity: .48;
  mix-blend-mode: soft-light;
  animation: none !important;
  transform: translate3d(0, 0, 0) scale(1.045);
  transform-origin: center;
  will-change: transform;
}

body.leoCoreV4 .leoV4Universe::before,
body.leoCoreV4.leoCoreV41 .leoV4Universe::before {
  contain: paint;
  opacity: .46;
  animation: none !important;
  transform-origin: center;
}

body.leoCoreV4 .leoV4MotionLayer,
body.leoCoreV4.leoCoreV41 .leoV4MotionLayer {
  position: absolute;
  z-index: 1;
  inset: -5%;
  contain: layout paint style;
  border-radius: inherit;
  background:
    conic-gradient(from 36deg at 52% 48%, rgba(255,255,255,.03), rgba(255,211,184,.25), rgba(255,255,255,.40), rgba(136,202,195,.20), rgba(186,169,217,.18), rgba(255,255,255,.06)),
    radial-gradient(circle at 28% 32%, rgba(255,210,185,.24), transparent 34%),
    radial-gradient(circle at 75% 67%, rgba(129,202,192,.20), transparent 36%);
  opacity: .42;
  pointer-events: none;
  transform: translate3d(0, 0, 0) scale(1.055);
  transform-origin: center;
  will-change: transform, opacity;
}

body.leoCoreV4 .leoV4BrainOrb,
body.leoCoreV4.leoCoreV41 .leoV4BrainOrb {
  animation: none !important;
  will-change: transform;
}

body.leoCoreV4 .leoV4Brain::before,
body.leoCoreV4.leoCoreV41 .leoV4Brain::before {
  position: absolute;
  z-index: -1;
  top: -8px;
  left: 50%;
  width: min(96px, 112%);
  height: 96px;
  content: "";
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--tone) 34%, transparent), transparent 68%);
  opacity: .18;
  pointer-events: none;
  transform: translate3d(-50%, 0, 0) scale(.88);
  transition: opacity .12s ease, transform .12s ease;
  will-change: transform, opacity;
}

body.leoCoreV4 .leoV4Brain:hover::before,
body.leoCoreV4 .leoV4Brain.is-pointer::before,
body.leoCoreV4 .leoV4Brain:focus-visible::before,
body.leoCoreV4 .leoV4Brain.is-selected::before,
body.leoCoreV4 .leoV4Brain.is-inside::before,
body.leoCoreV4.leoCoreV41 .leoV4Brain:hover::before,
body.leoCoreV4.leoCoreV41 .leoV4Brain.is-pointer::before,
body.leoCoreV4.leoCoreV41 .leoV4Brain:focus-visible::before,
body.leoCoreV4.leoCoreV41 .leoV4Brain.is-selected::before,
body.leoCoreV4.leoCoreV41 .leoV4Brain.is-inside::before {
  opacity: .64;
  transform: translate3d(-50%, -2px, 0) scale(1.06);
}

body.leoCoreV4 .leoV4Core,
body.leoCoreV4.leoCoreV41 .leoV4Core {
  transition: transform .14s cubic-bezier(.2, .8, .2, 1) !important;
}

body.leoCoreV4 .leoV4Core:hover,
body.leoCoreV4 .leoV4Core:focus-visible,
body.leoCoreV4.leoCoreV41 .leoV4Core:hover,
body.leoCoreV4.leoCoreV41 .leoV4Core:focus-visible {
  box-shadow:
    inset -18px -20px 36px rgba(51,76,69,.20),
    inset 18px 18px 34px rgba(255,255,255,.45),
    0 0 0 8px rgba(255,255,255,.32),
    0 20px 46px rgba(72,87,81,.16) !important;
}

body.leoCoreV4 .leoV4CoreHalo,
body.leoCoreV4.leoCoreV41 .leoV4CoreHalo {
  animation: none !important;
  will-change: transform, opacity;
}

body.leoCoreV4 .leoV4NeuralLines,
body.leoCoreV4.leoCoreV41 .leoV4NeuralLines {
  animation: none !important;
  will-change: opacity;
}

/* Il riquadro privacy deve crescere con il contenuto: nessuna eredita della
   vecchia variante compatta puo imporre ellissi, nowrap o clipping. */
body.leoCoreV4 .leoV4SidePanel #privateBox.privateBox {
  display: block !important;
  position: relative !important;
  top: auto !important;
  right: auto !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  contain: layout style;
  box-sizing: border-box;
  flex: 0 0 auto !important;
}

/* Tutte le schede appartengono allo stesso asse della colonna. La privacy non
   ha offset o dimensioni proprie: condivide width, padding e box model con le
   card adiacenti. */
body.leoCoreV4 .leoV4SidePanel > .card,
body.leoCoreV4 .leoV4SidePanel > #privateBox.privateBox {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 22px !important;
  box-sizing: border-box !important;
  transform: none !important;
  align-self: stretch !important;
}

body.leoCoreV4 .leoV4SidePanel #privateBox.privateBox .privateTop {
  display: grid !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 12px !important;
  align-items: center !important;
}

body.leoCoreV4 .leoV4SidePanel #privateBox.privateBox .privateTop > div {
  min-width: 0 !important;
}

body.leoCoreV4 .leoV4SidePanel #privateTitle,
body.leoCoreV4 .leoV4SidePanel #privateSub {
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  overflow-wrap: anywhere !important;
  text-overflow: clip !important;
  white-space: normal !important;
}

body.leoCoreV4 .leoV4SidePanel #privateTitle {
  display: block !important;
  line-height: 1.25 !important;
}

body.leoCoreV4 .leoV4SidePanel #privateSub {
  margin: 4px 0 0 !important;
  line-height: 1.45 !important;
}

body.leoCoreV4 .leoV4SidePanel #privateBtn {
  width: auto !important;
  min-width: 112px !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 44px !important;
  padding: 8px 14px !important;
  overflow: visible !important;
  white-space: normal !important;
  margin: 0 !important;
  justify-self: end;
}

/* La pagina Home e l'unico proprietario dello scroll. Il rail e il pannello
   laterale devono contribuire alla sua altezza naturale: nessun antenato puo
   ritagliare la card privacy quando la finestra desktop si abbassa. */
body.leoCoreV4:not(.leoV4ChatMode) #leoV4HomePage {
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

body.leoCoreV4:not(.leoV4ChatMode) .leoV4Rail {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  align-self: start;
  overflow: visible !important;
}

body.leoCoreV4:not(.leoV4ChatMode) .leoV4Rail > .sidePanel,
body.leoCoreV4:not(.leoV4ChatMode) .leoV4SidePanel {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}

/* La variante legacy a due colonne fra 821 e 1180 px spezzava l'allineamento:
   la privacy occupava due track mentre Azioni rapide e Chat recenti una sola.
   In questa fascia il rail resta una colonna reale, come desktop e telefono. */
@media (max-width: 1180px) {
  body.leoCoreV4:not(.leoV4ChatMode) .leoV4Rail > .sidePanel,
  body.leoCoreV4:not(.leoV4ChatMode) .leoV4SidePanel {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
  }

  body.leoCoreV4 .leoV4SidePanel > .card,
  body.leoCoreV4 .leoV4SidePanel > #privateBox.privateBox {
    grid-column: auto !important;
  }
}

body.leoCoreV4.leoV4ChatMode #chatPage .chatPanel,
body.leoCoreV4.leoV4ChatMode #chatPage #chatBox,
body.leoCoreV4.leoV4ChatMode #chatPage .inputRow {
  min-width: 0 !important;
  box-sizing: border-box;
}

body.leoCoreV4.leoV4ChatMode #chatPage .inputRow {
  max-width: calc(100% - 14px) !important;
  align-self: center;
}

/* Tre profili vivi. Tutte le animazioni continue usano soltanto transform e
   opacity su superfici isolate; il testo centrale non appartiene ai layer che
   ruotano. */
body.leoCoreV4 {
  --leo-motion-bg-x: 12px;
  --leo-motion-bg-y: 9px;
  --leo-motion-bg-scale: 1.072;
  --leo-motion-layer-low: .42;
  --leo-motion-layer-high: .52;
  --leo-motion-texture-opacity: .74;
  --leo-motion-orb-drift: 3.6px;
  --leo-motion-orb-scale: 1.016;
  --leo-motion-wash-low: .39;
  --leo-motion-wash-high: .52;
  --leo-motion-ring-low: .76;
  --leo-motion-ring-high: .94;
  --leo-motion-bg-duration: 14s;
  --leo-motion-wash-duration: 17s;
  --leo-motion-orb-duration: 4.6s;
  --leo-motion-halo-duration: 5.2s;
  --leo-motion-ring-inner-duration: 12s;
  --leo-motion-ring-outer-duration: 19s;
  --leo-motion-neural-duration: 5.8s;
  --leo-motion-texture-duration: 15s;
  --leo-motion-texture-drift: 8px;
  --leo-motion-core-thread-duration: 12s;
  --leo-motion-core-orbit-duration: 18s;
  --leo-motion-ease: ease-in-out;
  --leo-motion-linear: linear;
}

body.leoCoreV4.leoV4MotionBalanced {
  --leo-motion-bg-x: 4.5px;
  --leo-motion-bg-y: 3.5px;
  --leo-motion-bg-scale: 1.058;
  --leo-motion-layer-low: .32;
  --leo-motion-layer-high: .40;
  --leo-motion-texture-opacity: .54;
  --leo-motion-orb-drift: 1.8px;
  --leo-motion-orb-scale: 1.008;
  --leo-motion-wash-low: .31;
  --leo-motion-wash-high: .40;
  --leo-motion-ring-low: .67;
  --leo-motion-ring-high: .82;
  --leo-motion-bg-duration: 25s;
  --leo-motion-wash-duration: 30s;
  --leo-motion-orb-duration: 7.8s;
  --leo-motion-halo-duration: 9.5s;
  --leo-motion-ring-inner-duration: 25s;
  --leo-motion-ring-outer-duration: 39s;
  --leo-motion-neural-duration: 10s;
  --leo-motion-texture-duration: 29s;
  --leo-motion-texture-drift: 3.5px;
  --leo-motion-core-thread-duration: 27s;
  --leo-motion-core-orbit-duration: 36s;
  --leo-motion-ease: steps(32, end);
  --leo-motion-linear: steps(32, end);
}

body.leoCoreV4.leoV4MotionSafety {
  --leo-motion-bg-x: 3px;
  --leo-motion-bg-y: 2.2px;
  --leo-motion-bg-scale: 1.056;
  --leo-motion-layer-low: .25;
  --leo-motion-layer-high: .31;
  --leo-motion-texture-opacity: .42;
  --leo-motion-orb-drift: 1.2px;
  --leo-motion-orb-scale: 1.006;
  --leo-motion-wash-low: .25;
  --leo-motion-wash-high: .31;
  --leo-motion-ring-low: .58;
  --leo-motion-ring-high: .70;
  --leo-motion-bg-duration: 38s;
  --leo-motion-wash-duration: 44s;
  --leo-motion-orb-duration: 12s;
  --leo-motion-halo-duration: 14s;
  --leo-motion-ring-inner-duration: 38s;
  --leo-motion-ring-outer-duration: 58s;
  --leo-motion-neural-duration: 16s;
  --leo-motion-texture-duration: 42s;
  --leo-motion-texture-drift: 2.4px;
  --leo-motion-core-thread-duration: 39s;
  --leo-motion-core-orbit-duration: 54s;
  --leo-motion-ease: steps(48, end);
  --leo-motion-linear: steps(48, end);
}

body.leoCoreV4.leoCoreV41 .leoV41Texture {
  --leo-texture-pointer-x: 0px;
  --leo-texture-pointer-y: 0px;
  opacity: var(--leo-motion-texture-opacity) !important;
  mix-blend-mode: normal;
  animation: leoV4TextureDrift var(--leo-motion-texture-duration) var(--leo-motion-ease) infinite alternate !important;
}

body.leoCoreV4 .leoV4MotionLayer,
body.leoCoreV4.leoCoreV41 .leoV4MotionLayer {
  animation: leoV4AmbientBackground var(--leo-motion-bg-duration) var(--leo-motion-ease) infinite alternate !important;
}

body.leoCoreV4 .leoV4Universe::before,
body.leoCoreV4.leoCoreV41 .leoV4Universe::before {
  will-change: transform, opacity;
  animation: leoV4AmbientWash var(--leo-motion-wash-duration) var(--leo-motion-ease) infinite alternate !important;
}

body.leoCoreV4 .leoV4BrainOrb,
body.leoCoreV4.leoCoreV41 .leoV4BrainOrb {
  animation: leoV4OrbAmbient var(--leo-motion-orb-duration) var(--leo-motion-ease) var(--delay, 0s) infinite alternate !important;
}

body.leoCoreV4 .leoV4CoreHalo,
body.leoCoreV4.leoCoreV41 .leoV4CoreHalo {
  animation: leoV4HaloBreathe var(--leo-motion-halo-duration) var(--leo-motion-ease) infinite alternate !important;
}

body.leoCoreV4 .leoV4CoreHalo::before,
body.leoCoreV4.leoCoreV41 .leoV4CoreHalo::before {
  filter: none !important;
  will-change: transform, opacity;
  animation: leoV4RingSpin var(--leo-motion-ring-inner-duration) var(--leo-motion-linear) infinite reverse !important;
}

body.leoCoreV4 .leoV4CoreHalo::after,
body.leoCoreV4.leoCoreV41 .leoV4CoreHalo::after {
  filter: none !important;
  will-change: transform, opacity;
  animation: leoV4RingSpin var(--leo-motion-ring-outer-duration) var(--leo-motion-linear) infinite !important;
}

body.leoCoreV4 .leoV4NeuralLines,
body.leoCoreV4.leoCoreV41 .leoV4NeuralLines {
  --leo-ray-duration: 8.8s;
  stroke-dashoffset: 0;
  animation:
    leoV4NeuralBreathe var(--leo-motion-neural-duration) var(--leo-motion-ease) infinite alternate,
    leoV4RayEnergyIn var(--leo-ray-duration) linear infinite !important;
}

/* I 15 path esistenti restano l'unica geometria dei collegamenti. Il flusso
   eredita una sola timeline dal parent e la sfasa staticamente per modello:
   nessun nuovo nodo, timer o ricalcolo layout. */
body.leoCoreV4 .leoV4NeuralLines path,
body.leoCoreV4.leoCoreV41 .leoV4NeuralLines path {
  --leo-ray-opacity: .72;
  --leo-ray-width: 2.3;
  filter: none !important;
  opacity: var(--leo-ray-opacity) !important;
  stroke-width: var(--leo-ray-width) !important;
  stroke-dasharray: 0 var(--leo-ray-phase, 0) .018 .046 .085 .155 !important;
  vector-effect: non-scaling-stroke;
  animation: none !important;
  transition: opacity .18s ease, stroke-width .18s ease !important;
}

body.leoCoreV4 .leoV4NeuralLines path.is-drained,
body.leoCoreV4.leoCoreV41 .leoV4NeuralLines path.is-drained {
  --leo-ray-opacity: .96;
  --leo-ray-width: 2.9;
  stroke-dasharray: 0 var(--leo-ray-phase, 0) .028 .032 .13 .11 !important;
}

body.leoCoreV4.leoV4MotionBalanced .leoV4NeuralLines path,
body.leoCoreV4.leoCoreV41.leoV4MotionBalanced .leoV4NeuralLines path {
  --leo-ray-opacity: .55;
  --leo-ray-width: 2.1;
}

body.leoCoreV4.leoV4MotionBalanced .leoV4NeuralLines path.is-drained,
body.leoCoreV4.leoCoreV41.leoV4MotionBalanced .leoV4NeuralLines path.is-drained {
  --leo-ray-opacity: .82;
  --leo-ray-width: 2.65;
}

body.leoCoreV4.leoV4MotionSafety .leoV4NeuralLines path,
body.leoCoreV4.leoCoreV41.leoV4MotionSafety .leoV4NeuralLines path {
  --leo-ray-opacity: .40;
  --leo-ray-width: 1.85;
}

body.leoCoreV4.leoV4MotionSafety .leoV4NeuralLines path.is-drained,
body.leoCoreV4.leoCoreV41.leoV4MotionSafety .leoV4NeuralLines path.is-drained {
  --leo-ray-opacity: .68;
  --leo-ray-width: 2.35;
}

body.leoCoreV4.leoCoreV41 .leoV4Core::before {
  filter: none !important;
  will-change: transform, opacity;
  animation: leoV4CoreThreadsOptimized var(--leo-motion-core-thread-duration) var(--leo-motion-linear) infinite !important;
}

body.leoCoreV4.leoCoreV41 .leoV4Core::after {
  filter: none !important;
  will-change: transform, opacity;
  animation: leoV4RingSpin var(--leo-motion-core-orbit-duration) var(--leo-motion-linear) infinite reverse !important;
}

/* Nei profili adattivi l'anello esterno mantiene una timeline CSS attiva e
   verificabile a step radi. Le altre superfici sono coordinate da un solo
   scheduler rAF: movimento completo senza 24 timeline continue sul renderer
   che ha richiesto il downgrade. */
body.leoCoreV4.leoV4MotionBalanced .leoV41Texture,
body.leoCoreV4.leoV4MotionBalanced .leoV4MotionLayer,
body.leoCoreV4.leoV4MotionBalanced .leoV4Universe::before,
body.leoCoreV4.leoV4MotionBalanced .leoV4BrainOrb,
body.leoCoreV4.leoV4MotionBalanced .leoV4Core::before,
body.leoCoreV4.leoV4MotionBalanced .leoV4Core::after,
body.leoCoreV4.leoV4MotionBalanced .leoV4CoreHalo,
body.leoCoreV4.leoV4MotionBalanced .leoV4CoreHalo::before,
body.leoCoreV4.leoV4MotionBalanced .leoV4NeuralLines,
body.leoCoreV4.leoV4MotionSafety .leoV41Texture,
body.leoCoreV4.leoV4MotionSafety .leoV4MotionLayer,
body.leoCoreV4.leoV4MotionSafety .leoV4Universe::before,
body.leoCoreV4.leoV4MotionSafety .leoV4BrainOrb,
body.leoCoreV4.leoV4MotionSafety .leoV4Core::before,
body.leoCoreV4.leoV4MotionSafety .leoV4Core::after,
body.leoCoreV4.leoV4MotionSafety .leoV4CoreHalo,
body.leoCoreV4.leoV4MotionSafety .leoV4CoreHalo::before,
body.leoCoreV4.leoV4MotionSafety .leoV4NeuralLines {
  animation: none !important;
}

body.leoCoreV4.leoV4MotionBalanced .leoV4NeuralLines,
body.leoCoreV4.leoCoreV41.leoV4MotionBalanced .leoV4NeuralLines {
  --leo-ray-duration: 12s;
  animation: leoV4RayEnergyIn var(--leo-ray-duration) steps(12, end) infinite !important;
}

body.leoCoreV4.leoV4MotionSafety .leoV4NeuralLines,
body.leoCoreV4.leoCoreV41.leoV4MotionSafety .leoV4NeuralLines {
  --leo-ray-duration: 16s;
  animation: leoV4RayEnergyIn var(--leo-ray-duration) steps(8, end) infinite !important;
}

body.leoCoreV4.leoV4MotionBalanced .leoV41Texture,
body.leoCoreV4.leoV4MotionSafety .leoV41Texture {
  transform: translate3d(
    calc(var(--leo-texture-pointer-x, 0px) + var(--leo-texture-ambient-x, 0px)),
    calc(var(--leo-texture-pointer-y, 0px) + var(--leo-texture-ambient-y, 0px)),
    0
  ) scale(var(--leo-texture-ambient-scale, 1.045)) !important;
}

body.leoCoreV4.leoV4MotionBalanced .leoV4BrainOrb,
body.leoCoreV4.leoV4MotionSafety .leoV4BrainOrb {
  transition: none !important;
}

body.leoCoreV4.leoV4MotionBalanced .leoV4Universe::before,
body.leoCoreV4.leoV4MotionSafety .leoV4Universe::before {
  opacity: var(--leo-wash-live-opacity, var(--leo-motion-wash-low)) !important;
  transform: translate3d(
    var(--leo-wash-live-x, 0px),
    var(--leo-wash-live-y, 0px),
    0
  ) scale(var(--leo-wash-live-scale, 1.04)) !important;
}

body.leoCoreV4.leoV4MotionBalanced .leoV4Core::after,
body.leoCoreV4.leoV4MotionSafety .leoV4Core::after {
  transform: rotate(var(--leo-core-orbit-angle, 0deg)) !important;
}

body.leoCoreV4.leoV4MotionBalanced .leoV4Core::before,
body.leoCoreV4.leoV4MotionSafety .leoV4Core::before {
  opacity: var(--leo-core-thread-opacity, .64) !important;
  transform: rotate(var(--leo-core-thread-angle, 0deg))
    scale(var(--leo-core-thread-scale, 1)) !important;
}

body.leoCoreV4.leoV4MotionBalanced .leoV4CoreHalo::before,
body.leoCoreV4.leoV4MotionSafety .leoV4CoreHalo::before {
  transform: rotate(var(--leo-ring-inner-angle, 0deg)) !important;
}

@keyframes leoV4AmbientBackground {
  from {
    opacity: var(--leo-motion-layer-low);
    transform: translate3d(calc(var(--leo-motion-bg-x) * -1), calc(var(--leo-motion-bg-y) * -1), 0) scale(1.052);
  }
  to {
    opacity: var(--leo-motion-layer-high);
    transform: translate3d(var(--leo-motion-bg-x), var(--leo-motion-bg-y), 0) scale(var(--leo-motion-bg-scale));
  }
}

@keyframes leoV4TextureDrift {
  from {
    opacity: calc(var(--leo-motion-texture-opacity) * .86);
    transform: translate3d(
      calc(var(--leo-texture-pointer-x) - var(--leo-motion-texture-drift)),
      calc(var(--leo-texture-pointer-y) - var(--leo-motion-texture-drift)),
      0
    ) scale(1.043);
  }
  to {
    opacity: var(--leo-motion-texture-opacity);
    transform: translate3d(
      calc(var(--leo-texture-pointer-x) + var(--leo-motion-texture-drift)),
      calc(var(--leo-texture-pointer-y) + var(--leo-motion-texture-drift)),
      0
    ) scale(1.049);
  }
}

@keyframes leoV4AmbientWash {
  from {
    opacity: var(--leo-motion-wash-low);
    transform: translate3d(-1.5%, -1%, 0) scale(1.035) rotate(-.4deg);
  }
  to {
    opacity: var(--leo-motion-wash-high);
    transform: translate3d(1.5%, 1%, 0) scale(1.055) rotate(.4deg);
  }
}

@keyframes leoV4OrbAmbient {
  from { transform: translate3d(0, calc(var(--leo-motion-orb-drift) * -1), 0) scale(1); }
  to { transform: translate3d(0, var(--leo-motion-orb-drift), 0) scale(var(--leo-motion-orb-scale)); }
}

@keyframes leoV4HaloBreathe {
  from { opacity: var(--leo-motion-ring-low); transform: translate3d(0, 0, 0) scale(.988); }
  to { opacity: var(--leo-motion-ring-high); transform: translate3d(0, 0, 0) scale(1.018); }
}

@keyframes leoV4RingSpin {
  to { transform: rotate(360deg); }
}

@keyframes leoV4CoreThreadsOptimized {
  0% { transform: rotate(0deg) scale(.985); opacity: .56; }
  50% { transform: rotate(180deg) scale(1.025); opacity: .78; }
  100% { transform: rotate(360deg) scale(.985); opacity: .56; }
}

@keyframes leoV4NeuralBreathe {
  from { opacity: .66; }
  to { opacity: .86; }
}

/* I path partono dal centro: un offset positivo sposta gli impulsi verso
   l'origine del tracciato, quindi dalle bolle a LEO. */
@keyframes leoV4RayEnergyIn {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: 1; }
}

/* Mobile non ha bisogno del puntatore per restare vivo: deriva, respiro e
   anelli continuano, con ampiezze bilanciate. */
@media (max-width: 820px), (pointer: coarse) {
  body.leoCoreV4:not(.leoV4MotionSafety) {
    --leo-motion-bg-x: 3.5px;
    --leo-motion-bg-y: 2.5px;
    --leo-motion-texture-opacity: .50;
    --leo-motion-orb-drift: 1.1px;
  }
}

@media (max-width: 520px) {
  body.leoCoreV4 .leoV4SidePanel #privateBox.privateBox .privateTop {
    grid-template-columns: 1fr !important;
  }
  body.leoCoreV4 .leoV4SidePanel #privateBtn {
    width: 100% !important;
    justify-self: stretch;
  }
  body.leoCoreV4.leoV4ChatMode .main {
    min-height: 0 !important;
  }
}

@media (min-width: 1181px) and (max-width: 1500px) {
  body.leoCoreV4 .leoV4Brain,
  body.leoCoreV4.leoCoreV41 .leoV4Brain {
    width: 54px;
    height: 80px;
  }
}

@media (max-width: 820px) {
  body.leoCoreV4 .leoV4SidePanel > .card,
  body.leoCoreV4 .leoV4SidePanel > #privateBox.privateBox {
    padding: 18px !important;
  }
  body.leoCoreV4.leoV4ChatMode .main {
    height: calc(100dvh - 149px - var(--leo-ui-safe-top)) !important;
    min-height: 0 !important;
  }
  body.leoCoreV4.leoV4ChatMode #chatPage .inputRow {
    margin-bottom: max(12px, var(--leo-ui-safe-bottom)) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.leoCoreV4 *,
  body.leoCoreV4 *::before,
  body.leoCoreV4 *::after {
    scroll-behavior: auto !important;
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }

  body.leoCoreV4.leoCoreV41 .leoV41Texture { transform: none !important; }

  body.leoCoreV4 .leoV4NeuralLines path,
  body.leoCoreV4.leoCoreV41 .leoV4NeuralLines path {
    animation: none !important;
    stroke-dashoffset: 0 !important;
  }

  body.leoCoreV4 .leoV4NeuralLines,
  body.leoCoreV4.leoCoreV41 .leoV4NeuralLines {
    animation: none !important;
    stroke-dashoffset: 0 !important;
  }
}