:root {
  --r: 14px;
  --r2: 22px;
  --top: 88px;
  --glass: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.085),
    rgba(255, 255, 255, 0.025)
  );
  --edge: rgba(255, 255, 255, 0.13);
}
body {
  background: var(--bg);
  background-attachment: fixed;
}
.topbar {
  top: 16px;
}
.brand {
  font-size: 19px;
  letter-spacing: -0.6px;
}
.brand img {
  box-shadow: none;
}
.topnav a.on::after {
  display: none;
}
.nav-new {
  font-size: 12px;
  color: var(--accent);
}
.top-search {
  border-radius: 12px;
}
.top-search:focus-within {
  box-shadow: 0 0 0 2px var(--accent);
}
.top-search input {
  font-size: 12px;
}
.clock {
  font-size: 12px;
}
.icon-btn {
  width: 32px;
  height: 32px;
}
.swatch {
  width: 16px;
  height: 16px;
}
#app {
  max-width: 1360px;
  padding: 38px 48px 88px;
}
.hero {
  position: relative;
  display: grid;
  gap: 48px;
  align-items: center;
  min-height: 440px;
  padding: 38px 44px;
  margin-bottom: 40px;
  border: 1px solid var(--edge);
  border-radius: 28px;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.hero-copy,
.hero-art {
  position: relative;
  z-index: 1;
  min-width: 0;
}
.eyebrow {
  color: var(--accent);
  font-size: 10px;
  letter-spacing: 2px;
  font-weight: 600;
}
.hero-identity {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 20px 0;
}
.hero-logo {
  width: 132px;
  height: 132px;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
  filter: drop-shadow(0 12px 22px #0004);
}
.hero h1 {
  font: 600 clamp(30px, 3.6vw, 52px) / 1.1 var(--display);
  letter-spacing: -2px;
  color: var(--text);
  max-width: none;
}
.hero h1 span {
  display: block;
  font: 400 15px/1.5 var(--font);
  letter-spacing: 0;
  color: var(--muted);
  margin-top: 10px;
}
.hero-sub {
  color: var(--muted);
  font-size: 12px;
  max-width: 350px;
}
.hero-sub b {
  color: var(--text);
  font-weight: 500;
}
.hero-search {
  margin-top: 24px;
  gap: 6px;
  max-width: 410px;
  background: #ffffff08;
  border: 1px solid #ffffff18;
  border-radius: 13px;
  padding: 5px;
}
.hero-search input {
  font-size: 12px;
  padding: 0 10px;
  background: transparent;
  height: 36px;
}
.hero-search button {
  height: 36px;
  border-radius: 9px;
  background: var(--accent);
  color: #20101a;
  padding: 0 16px;
  font-size: 12px;
}
.hero-actions {
  gap: 10px;
  margin-top: 14px;
}
.btn {
  border-radius: 11px;
  font-size: 12px;
  min-height: 38px;
  padding: 10px 16px;
}
.btn.dark,
.btn.outline-dark {
  background: #ffffff06;
  border: 1px solid var(--edge);
  color: var(--text);
}
.btn.dark {
  background: #ffffff10;
}
.btn.accent {
  color: var(--on-accent);
}
.hero-art {
  height: 360px;
  perspective: 1000px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.collage {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  transform: rotate(-7deg);
  padding: 14px;
}
.collage .tile {
  animation: slipstream-float 7s ease-in-out infinite;
  min-width: 0;
  transform-style: preserve-3d;
}
.collage .tile:nth-child(2n) {
  animation-delay: -3.5s;
}
.collage .tile:nth-child(3n) {
  animation-delay: -1.8s;
}
.collage .cover {
  aspect-ratio: 1/1.1;
  border-radius: 16px;
  border: 1px solid #ffffff25;
  box-shadow: 0 12px 24px #0004;
  overflow: hidden;
  background: var(--panel);
}
.collage .tile-name {
  font-size: 10px;
  margin: 7px 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.collage .tile:hover {
  animation-play-state: paused;
}
.shuffle {
  position: relative;
  align-self: flex-end;
  bottom: auto;
  right: auto;
  margin-top: 4px;
  background: #ffffff08;
  border: 1px solid #ffffff14;
  font-size: 10px;
  padding: 7px 12px;
  color: var(--muted);
}
@keyframes slipstream-float {
  0%,
  100% {
    transform: translateY(-6px) rotateX(5deg);
  }
  50% {
    transform: translateY(9px) rotateX(-8deg);
  }
}
.hero-paused .collage .tile,
body.effects-reduced .collage .tile {
  animation-play-state: paused;
}
.block {
  margin-top: 32px;
}
.block-head {
  margin-bottom: 18px;
}
.block-head h2 {
  font-size: 18px;
  font-weight: 550;
  letter-spacing: -0.5px;
}
.more {
  font-size: 11px;
  color: var(--muted);
}
.row-track {
  gap: 16px;
  grid-auto-columns: 150px;
  padding: 3px 2px 16px;
}
.tile .cover {
  aspect-ratio: 1.15;
  border-radius: 14px;
  border: 1px solid #ffffff0e;
  box-shadow: none;
}
.cover-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 2;
}
.tile-name {
  font-size: 12px;
  font-weight: 500;
  margin-top: 9px;
}
.tile:hover .cover {
  box-shadow: 0 0 0 2px var(--accent);
  transform: translateY(-2px);
}
.cover .mono {
  line-height: 1.1;
  max-width: 90%;
  text-align: center;
}
.cover::before,
.cover::after {
  display: none;
}
.tile .fav {
  z-index: 3;
  background: #14101ec9;
  backdrop-filter: none;
}
.g-grid {
  gap: 22px 16px;
  grid-template-columns: repeat(auto-fill, minmax(145px, 1fr));
}
.g-section {
  content-visibility: auto;
  contain-intrinsic-size: auto 600px;
}
.page-head {
  margin: 18px 0 28px;
}
.page-head h1,
.g-head h1 {
  font-size: 38px;
  font-weight: 550;
  letter-spacing: -1.5px;
}
.page-head .muted {
  margin-top: 10px;
}
.card,
.app-tile,
.app-hero,
.stats,
.profile-card {
  background: var(--glass);
  border: 1px solid var(--edge);
  box-shadow: inset 0 1px #ffffff08;
  border-radius: 18px;
}
.app-tile {
  padding: 20px;
}
.app-ico {
  border-radius: 16px;
}
.app-grid {
  gap: 16px;
}
.input,
.g-search,
.select select {
  border-radius: 12px;
  background: #ffffff07;
  border: 1px solid var(--edge);
}
.icon-pick {
  border: 1px solid var(--edge);
  border-radius: 12px;
}
.icon-pick.on {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.icon-pick img {
  width: 32px;
  height: 32px;
}
.pop,
.suggest,
.sheet,
.community-chat-layout {
  background: color-mix(in srgb, var(--panel) 90%, transparent);
  backdrop-filter: blur(18px);
  border: 1px solid var(--edge);
  border-radius: 18px;
}
.ranked {
  gap: 16px;
}
.rank-item {
  border: 1px solid var(--edge);
  border-radius: 14px;
  background: var(--glass);
  padding: 16px;
}
.rank-n {
  font-size: 12px;
  color: var(--muted);
}
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
.ubgb-win {
  border: 1px solid var(--edge);
  border-radius: 20px;
  overflow: hidden;
  background: var(--panel);
}
.browser-toolbar {
  gap: 8px;
  padding: 12px;
  border-bottom: 1px solid var(--edge);
}
.browser-toolbar button {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: #ffffff09;
}
.browser-toolbar form {
  flex: 1;
  display: flex;
  gap: 8px;
}
.browser-toolbar input {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--edge);
  border-radius: 10px;
  background: #0002;
  padding: 7px 12px;
  font-size: 13px;
}
.browser-toolbar form button {
  width: 44px;
  background: var(--accent);
  color: var(--on-accent);
}
#ubgb-frame {
  flex: 1;
  width: 100%;
  border: 0;
  background: #fff;
}
.browser-welcome {
  flex: 1;
  display: grid;
  place-content: center;
  text-align: center;
  gap: 14px;
  color: var(--muted);
}
.browser-welcome img {
  margin: auto;
  width: 72px;
  aspect-ratio: 1;
  border-radius: 50%;
  object-fit: cover;
}
.browser-welcome h2 {
  font-size: 24px;
  color: var(--text);
}
.browser-status {
  padding: 10px 16px;
  color: var(--muted);
  font-size: 12px;
}
.browser-status:empty {
  display: none;
}
.ai-workspace {
  margin: 0 auto;
}
.ai-page-layout {
  display: grid;
  grid-template-columns: minmax(240px, 300px) minmax(0, 760px);
  justify-content: center;
  align-items: start;
  gap: clamp(28px, 5vw, 64px);
}
.ai-sidebar {
  position: sticky;
  top: 20px;
  display: grid;
  gap: 20px;
  align-self: start;
}
.ai-usage-panel {
  display: grid;
  gap: 18px;
  padding: 24px 26px;
  border: 1px solid var(--glass-edge);
  border-radius: 16px;
  background: var(--glass);
  box-shadow: var(--shadow);
}
.ai-usage-heading {
  display: flex;
  align-items: center;
  gap: 14px;
}
.ai-usage-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--accent);
  font-size: 19px;
}
.ai-usage-heading h2 {
  font-size: 15px;
  font-weight: 700;
}
.ai-usage-heading p,.ai-usage-note {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}
.ai-usage-numbers {
  display: grid;
  gap: 7px;
}
.ai-usage-numbers strong {
  font-size: 34px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.ai-usage-numbers span {
  color: var(--muted);
  font-size: 12px;
}
#ai-usage-progress {
  display: block;
  width: 100%;
  height: 11px;
  overflow: hidden;
  border: 0;
  border-radius: 99px;
  background: color-mix(in srgb, var(--text) 12%, transparent);
  accent-color: var(--accent);
}
#ai-usage-progress::-webkit-progress-bar {
  border-radius: 99px;
  background: color-mix(in srgb, var(--text) 12%, transparent);
}
#ai-usage-progress::-webkit-progress-value {
  border-radius: 99px;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  transition: width .25s ease;
}
#ai-usage-progress::-moz-progress-bar {
  border-radius: 99px;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
}
.ai-usage-status {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}
.ai-usage-note {
  padding-top: 16px;
  border-top: 1px solid var(--glass-edge);
}
.ai-usage-panel.is-limit-reached .ai-usage-numbers strong,
.ai-usage-panel.is-limit-reached .ai-usage-status {
  color: #ff9a8d;
}
.ai-usage-panel.is-limit-reached #ai-usage-progress::-webkit-progress-value,
.ai-usage-panel.is-limit-reached #ai-usage-progress::-moz-progress-bar {
  background: #e85d5d;
}
.ai-usage-panel.is-unlimited .ai-usage-numbers strong {
  color: var(--accent2);
}
.ai-usage-panel.is-unlimited #ai-usage-progress::-webkit-progress-value,
.ai-usage-panel.is-unlimited #ai-usage-progress::-moz-progress-bar {
  background: linear-gradient(90deg, var(--accent), var(--accent2));
}
.ai-screen-privacy {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.45;
}
.ai-screen-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.ai-compose-screen-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}
.ai-compose-screen-actions .ai-attach {
  border-color: color-mix(in srgb, var(--accent) 25%, var(--glass-edge));
  background: color-mix(in srgb, var(--accent) 9%, transparent);
  color: var(--text);
}
.ai-compose-screen-actions .ai-attach:hover,
.ai-voice-button.is-active {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--glass-edge));
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--text);
}
.ai-screen-actions button {
  min-height: 34px;
  padding: 0 10px;
  border-radius: 8px;
  font-size: 11px;
}
.ai-screen-actions button:disabled {
  cursor: not-allowed;
  opacity: .55;
}
.ai-screen-status {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
}
.ai-screen-status[data-state="error"] {
  color: #ff9a8d;
}
.ai-screen-privacy {
  padding: 8px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel) 70%, transparent);
}
.ai-screen-preview {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--glass-edge);
  border-radius: 10px;
  background: #08090d;
}
.ai-screen-preview img {
  display: block;
  width: 100%;
  max-height: 220px;
  object-fit: contain;
}
.ai-screen-markers {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.ai-screen-marker {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 5px;
  max-width: 85%;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 2px 4px #000);
}
.ai-screen-marker b {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  flex: none;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #e54343;
  color: #fff;
  font-size: 12px;
}
.ai-screen-marker span {
  overflow: hidden;
  padding: 3px 7px;
  border: 1px solid #ffffff70;
  border-radius: 5px;
  background: #151a22eF;
  color: #fff;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ai-conversation {
  display: flex;
  flex-direction: column;
  padding: 24px 0;
}
.ai-welcome {
  text-align: center;
  color: var(--muted);
}
.ai-welcome img {
  margin: 0 auto 20px;
  border-radius: 50%;
}
.ai-welcome h2 {
  color: var(--text);
  font-weight: 500;
  margin-bottom: 10px;
}
.ai-message {
  border: 1px solid var(--edge);
  border-radius: 18px;
  background: var(--glass);
  padding: 20px;
  overflow-wrap: anywhere;
  line-height: 1.8;
  font-size: 14px;
}
.ai-message.user {
  align-self: flex-end;
  max-width: 90%;
}
.ai-message small {
  display: block;
  color: var(--accent);
  font-size: 10px;
  letter-spacing: 1px;
  margin-bottom: 8px;
}
.ai-sources {
  margin-top: 14px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.ai-sources a {
  font-size: 11px;
  color: var(--accent);
  border: 1px solid var(--edge);
  border-radius: 7px;
  padding: 4px 8px;
  white-space: normal;
}
.ai-compose {
  border: 1px solid #ffffff24;
  box-shadow: 0 12px 40px #0002;
}
.ai-compose textarea {
  resize: vertical;
  max-height: 220px;
  background: none;
  border: 0;
  outline: none;
  width: 100%;
}
.ai-compose > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ai-compose span,
.ai-note {
  font-size: 10px;
  color: var(--muted);
}
.ai-note {
  text-align: center;
  margin-top: 12px;
}
.ai-compose button:disabled {
  opacity: 0.5;
  cursor: wait;
}
body.effects-reduced .topbar,
body.effects-reduced .pop,
body.effects-reduced .suggest {
  backdrop-filter: none;
  background: var(--panel);
}
@media (max-width: 1150px) {
  .clock {
    display: none;
  }
  .topbar {
    gap: 16px;
  }
  .top-search {
    width: 170px;
  }
  .top-search:focus-within {
    width: 170px;
  }
  .hero {
    gap: 20px;
    padding: 32px;
  }
  .hero-logo {
    width: 100px;
    height: 100px;
  }
  .hero h1 {
    font-size: 38px;
  }
  .topnav a {
    padding: 8px;
  }
}
@media (max-width: 900px) {
  .top-search {
    display: none;
  }
  .hero {
    grid-template-columns: 1fr 1fr;
  }
  .hero-logo {
    width: 76px;
    height: 76px;
  }
  .hero-identity {
    gap: 10px;
  }
  .hero h1 {
    font-size: 30px;
  }
  .hero-art {
    height: 300px;
  }
  .collage {
    gap: 8px;
  }
  .topbar {
    margin: 12px;
    top: 12px;
  }
  .row-track {
    grid-auto-columns: 140px;
  }
}
@media (max-width: 700px) {
  :root {
    --top: 76px;
  }
  .topbar {
    height: 56px;
    padding: 0 14px;
    justify-content: space-between;
  }
  .topnav {
    display: none;
  }
  .brand {
    font-size: 17px;
  }
  .top-actions {
    gap: 4px;
  }
  #app {
    padding: 24px 18px 100px;
  }
  .hero {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 26px 24px 16px;
    border-radius: 24px;
    min-height: 0;
    margin-bottom: 30px;
  }
  .hero-identity {
    gap: 18px;
    margin: 20px 0;
  }
  .hero-logo {
    width: 96px;
    height: 96px;
  }
  .hero h1 {
    font-size: 38px;
  }
  .hero-sub {
    max-width: none;
  }
  .hero-search {
    margin-top: 20px;
  }
  .hero-art {
    height: 230px;
    max-width: 380px;
    width: 100%;
    margin: 0 auto;
  }
  .collage {
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    padding: 4px 22px;
    transform: rotate(-5deg);
  }
  .collage .cover {
    aspect-ratio: 1.2;
  }
  .collage .tile-name {
    font-size: 9px;
  }
  .shuffle {
    font-size: 9px;
    margin-top: 0;
  }
  .row-track {
    grid-auto-columns: 132px;
    gap: 12px;
  }
  .block-head h2 {
    font-size: 17px;
  }
  .tabbar {
    background: color-mix(in srgb, var(--bg) 90%, transparent);
    backdrop-filter: blur(16px);
    border: 1px solid var(--edge);
    border-radius: 20px;
    bottom: 12px;
    left: 12px;
    right: 12px;
    width: auto;
    padding: 8px 6px;
  }
  .page-head h1 {
    font-size: 32px;
  }
  .g-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px 10px;
  }
  .g-grid .tile-name {
    font-size: 11px;
  }
  .g-letters {
    gap: 4px;
  }
  .ubgb-win {
    height: calc(100dvh - 190px);
    min-height: 350px;
  }
  .browser-toolbar {
    gap: 4px;
    padding: 8px;
  }
  .browser-toolbar button {
    width: 28px;
  }
  .browser-toolbar input {
    font-size: 12px;
    padding: 6px;
  }
  .ai-conversation {
    min-height: 300px;
  }
  .ai-message {
    padding: 14px;
  }
  .ai-compose span {
    max-width: 160px;
  }
  .hero-actions .btn {
    font-size: 11px;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  .topbar,
  .tabbar {
    backdrop-filter: none;
    background: var(--panel);
  }
}
@supports not (backdrop-filter: blur(1px)) {
  .topbar,
  .pop,
  .suggest,
  .sheet {
    background: var(--panel);
  }
}
.hero .btn.dark {
  background: #ffffff0c;
}
.hero .btn.outline-dark {
  box-shadow: none;
  border: 1px solid #ffffff25;
}
.hero-search input:focus {
  background: transparent;
  box-shadow: none;
}
.hero-search:focus-within {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.row-track > .tile {
  flex-basis: 150px;
}
.block-head h2::after {
  display: none;
}
.view[hidden]::before,
.view[hidden]::after {
  display: none;
}
.collage .tile.flipping {
  animation: none;
  transform: translateY(-12px) rotateX(90deg);
  opacity: 0.15;
  transition:
    transform 0.3s,
    opacity 0.3s;
}
.hero-art .collage .cover {
  aspect-ratio: 1.05;
}
.hero-art .collage .tile-name {
  color: var(--muted);
}
@media (max-width: 700px) {
  .row-track > .tile {
    flex-basis: 132px;
  }
}
.mobile-ai {
  display: none;
}
@media (max-width: 700px) {
  .brand span {
    display: inline;
  }
  .mobile-ai {
    display: block;
    margin-left: auto;
    min-height: 32px;
    padding: 6px 12px;
  }
  .top-actions {
    flex: none;
  }
  .top-actions > a[aria-label="Settings"] {
    display: grid;
  }
  .hero-search {
    flex-direction: row;
  }
  .hero-search input {
    width: auto;
    flex: 1;
  }
  .hero-search button {
    width: auto;
    flex: none;
  }
  .tabbar a.on {
    background: #ffffff0d;
    color: var(--accent);
  }
}
body:has(.player:not([hidden])) .collage .tile {
  animation-play-state: paused;
}

:root {
  --glass-edge: rgba(220, 232, 255, 0.25);
  --glass-fill: rgba(30, 42, 66, 0.44);
  --glass-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -1px 0 rgba(255, 255, 255, 0.04), 0 16px 48px rgba(0, 0, 0, 0.24);
}

body {
  background-image:
    radial-gradient(
      ellipse at 8% 10%,
      rgba(75, 123, 236, 0.27),
      transparent 48%
    ),
    radial-gradient(ellipse at 90% 55%, rgba(110, 82, 231, 0.2), transparent 40%);
}

.topbar {
  position: fixed;
  inset: auto auto 20px 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100% - 32px);
  height: 78px;
  margin: 0;
  padding: 8px 14px;
  gap: 14px;
  z-index: 250;
}

.brand span,
.mobile-ai,
.tabbar,
.clock {
  display: none !important;
}

.brand img {
  width: 42px;
  height: 42px;
}

.topnav {
  position: relative;
  display: flex;
  flex: none;
  gap: 4px;
  height: 58px;
  align-items: center;
}

.topnav a {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 62px;
  height: 58px;
  padding: 6px;
  border-radius: 16px;
  font-size: 10px;
  font-weight: 500;
  color: var(--muted);
  transition:
    color 0.2s,
    transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
  z-index: 1;
}

.topnav a svg {
  width: 23px;
  height: 23px;
}

.topnav a.on {
  background: transparent;
  color: var(--text);
}

.topnav a:hover {
  transform: translateY(-3px);
  color: var(--text);
}

.dock-selection {
  position: absolute;
  left: 0;
  top: 0;
  height: 58px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.19);
  transition:
    transform 0.4s cubic-bezier(0.2, 0.85, 0.2, 1),
    width 0.3s;
  pointer-events: none;
}

.top-actions {
  display: flex;
  flex: none;
  border-left: 1px solid #ffffff16;
  gap: 4px;
  padding-left: 12px;
}

.top-actions .icon-btn {
  display: grid;
  border-radius: 12px;
}

.top-search {
  position: absolute;
  inset: auto 0 calc(100% + 12px) auto;
  display: flex;
  width: min(390px, calc(100vw - 40px));
  height: 48px;
  background: rgba(35, 27, 36, 0.96);
  border: 1px solid var(--glass-edge);
  backdrop-filter: blur(20px);
  box-shadow: var(--glass-shadow);
}

.top-search:focus-within {
  width: min(390px, calc(100vw - 40px));
}

.suggest {
  top: auto;
  bottom: calc(100% + 10px);
}

.pop {
  top: auto;
  bottom: calc(100% + 20px);
}

#app {
  padding-top: 42px;
  padding-bottom: 140px;
}

.hero {
  border-color: var(--glass-edge);
  background:
    linear-gradient(
      125deg,
      rgba(255, 240, 242, 0.1),
      rgba(255, 255, 255, 0.025) 65%
    ),
    rgba(34, 26, 36, 0.38);
  box-shadow: var(--glass-shadow);
}

.hero::before {
  background: radial-gradient(
    ellipse at 15% 80%,
    rgba(244, 123, 143, 0.16),
    transparent 60%
  );
}

.hero .hero-art {
  perspective: 1100px;
}

.hero-art .collage {
  transform: rotate(-5deg);
}

.hero-art .collage > .tile {
  position: relative;
  animation: none;
  perspective: 700px;
  transform-style: preserve-3d;
}

.hero-art .collage .cover {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform-origin: center;
  transition: none;
  border: 1px solid #ffffff35;
  box-shadow: 0 12px 25px #0004;
}

.hero-art .collage .flip-back {
  position: absolute;
  inset: 0 0 auto;
  width: 100%;
  pointer-events: none;
}

.hero-art .collage .tile:hover .cover {
  transform: none;
}

.hero-art .turning {
  pointer-events: none;
}

.tile .cover {
  background: linear-gradient(145deg, #3c3038, #241e28);
}

.cover .mono {
  font-size: 30px;
  font-weight: 550;
  color: #c9aeb4;
  opacity: 1;
}

.g-search,
.input,
.ai-compose,
.card,
.p-card,
.rank-item,
.app-tile,
.ubgb-win {
  border: 1px solid var(--glass-edge);
  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.085),
      rgba(255, 255, 255, 0.018)
    ),
    var(--glass-fill);
  box-shadow: var(--glass-shadow);
}

.g-search,
.ai-compose {
  backdrop-filter: blur(14px) saturate(135%);
}

.g-letters {
  padding: 6px;
  border: 1px solid #ffffff12;
  border-radius: 16px;
  background: #ffffff04;
}

.g-letter {
  border-radius: 9px;
  transition:
    background 0.2s,
    color 0.2s;
}

.g-letter.on {
  background: #7aa6ff1c;
  color: var(--accent);
  border-color: #7aa6ff2e;
}

.g-filters {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.g-filters .g-letters { flex: 1; min-width: 0; }

.p-tabs {
  gap: 4px;
  padding: 5px;
  border: 1px solid #ffffff18;
  border-radius: 14px;
  background: #ffffff04;
}

.p-tab {
  border-radius: 9px;
}

.p-tab.on {
  background: #ffffff0e;
  border-color: transparent;
}

.p-pill {
  background: #ffffff08;
  border-color: #ffffff18;
  color: var(--muted);
}

.view {
  animation: none;
}

.ubgb-win {
  height: calc(100dvh - 184px);
  min-height: 360px;
  display: flex;
  flex-direction: column;
  isolation: isolate;
}

.ubgb-win #ubgb-frame {
  position: relative;
  inset: auto;
  display: block;
  width: 100%;
  height: 0;
  min-height: 0;
  flex: 1 1 auto;
  z-index: 0;
}

.browser-toolbar {
  position: relative;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  z-index: 2;
  min-height: 60px;
  background: rgba(43, 32, 43, 0.95);
}

.browser-exit {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 10px;
  color: var(--muted);
  font-size: 24px;
}

.browser-exit:hover {
  background: #ffffff12;
}

.browser-toolbar button:disabled {
  opacity: 0.3;
  cursor: default;
}

.browser-toolbar form {
  min-width: 0;
}

.browser-status {
  flex: none;
}

.ai-workspace {
  width: 100%;
  max-width: 760px;
}

.ai-conversation {
  min-height: min(46vh, 360px);
}

.ai-welcome {
  margin: 48px 0;
}

.ai-welcome h2 {
  font-size: 21px;
}

.ai-compose {
  background:
    linear-gradient(145deg, #ffffff13, #ffffff03), rgba(34, 25, 34, 0.6);
}

.ai-compose textarea {
  font-size: 15px;
  min-height: 76px;
  padding: 8px 4px;
}

.ai-compose > div {
  padding: 0 2px 2px;
}

#ai-send {
  display: grid;
  place-items: center;
  width: 38px;
  min-height: 38px;
  height: 38px;
  padding: 0;
  border-radius: 50%;
  font-size: 24px;
  font-weight: 400;
  box-shadow: inset 0 1px 0 #ffffff50;
}

.ai-note {
  margin: 12px 30px;
  font-size: 11px;
}

.ai-message.user {
  background: #ffffff08;
  border-color: #ffffff14;
}

.rank-item .rank-n {
  display: none;
}

.rank-ph {
  width: 48px;
  height: 48px;
}

.leaderboard-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 20px;
}

.leaderboard-list {
  list-style: none;
  display: grid;
}

.leaderboard-row {
  display: grid;
  grid-template-columns: 32px 38px 1fr auto;
  align-items: center;
  gap: 14px;
  min-height: 62px;
  border-top: 1px solid #ffffff0b;
}

.leaderboard-row:first-child {
  color: #d3ddff;
}

.leaderboard-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  display: grid;
  place-items: center;
  background: #ffffff0b;
  font-size: 12px;
  color: var(--muted);
}

.leaderboard-rank,
.leaderboard-xp {
  font-variant-numeric: tabular-nums;
  font-size: 13px;
}

.leaderboard-vacant {
  color: var(--muted);
  opacity: 0.5;
}

.leaderboard-status {
  margin: 12px 0;
  color: var(--muted);
  font-size: 13px;
}

.p-card.wide.leaderboard-card {
  grid-column: 1 / -1;
}

@media (max-width: 850px) {
  .topbar {
    gap: 7px;
    padding: 7px 9px;
  }
  .topnav a {
    width: 52px;
  }
  .top-actions {
    padding-left: 7px;
    gap: 0;
  }
}

@media (max-width: 650px) {
  #app {
    padding: 24px 18px 120px;
  }
  .topbar {
    bottom: max(12px, env(safe-area-inset-bottom));
    max-width: calc(100% - 20px);
    height: 70px;
    gap: 0;
    border-radius: 23px;
    padding: 6px;
  }
  .brand,
  .top-actions,
  .topnav a[data-nav="links"] {
    display: none;
  }
  .topnav {
    gap: 1px;
    display: flex;
    height: 56px;
  }
  .topnav a {
    display: flex;
    width: clamp(45px, 14vw, 58px);
    height: 56px;
    font-size: 9px;
  }
  .dock-selection {
    height: 56px;
  }
  .dock-mobile-settings {
    width: 40px;
    height: 50px;
    place-items: center;
  }
  .ubgb-win {
    height: calc(100dvh - 150px);
    min-height: 320px;
  }
  .browser-toolbar {
    padding: 8px;
    gap: 2px;
    min-height: 52px;
  }
  .browser-toolbar button,
  .browser-exit {
    width: 28px;
    height: 32px;
    flex: none;
  }
  .browser-toolbar form {
    gap: 4px;
  }
  .browser-toolbar input {
    padding: 6px 8px;
  }
  .ai-message {
    font-size: 14px;
  }
  .leaderboard-row {
    gap: 10px;
    grid-template-columns: 24px 34px 1fr auto;
  }
  .hero-identity h1 {
    font-size: 35px;
  }
}

.dock-mobile-settings {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .topbar,
  .g-search,
  .ai-compose {
    backdrop-filter: none;
    background-color: #241d28;
  }

  .ai-compose,
  .ai-compose::before,
  .ai-compose .ai-attach,
  .ai-compose #ai-send {
    transition: none;
  }
}

body.effects-reduced .topbar,
body.effects-reduced .ai-compose,
.reduce-motion .topbar,
.reduce-motion .ai-compose {
  backdrop-filter: none;
  background-color: #241d28;
}

.reduce-motion *,
body.effects-reduced * {
  transition: none !important;
  animation: none !important;
}
@media (max-width: 650px) {
  .dock-mobile-settings {
    display: grid;
  }
}
.cover .mono {
  filter: none;
  text-shadow: none;
  background: none;
  -webkit-text-fill-color: currentColor;
}

.tile:hover .mono {
  transform: none;
}

.tile-name {
  text-shadow: none;
}
#hero-eyebrow:empty {
  display: none;
}

.p-avatar img {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
}

.ai-page-head {
  justify-content: space-between;
  align-items: flex-end;
}
.ai-model-picker {
  display: grid;
  gap: 5px;
  min-width: min(320px, 65vw);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}
.ai-model-picker select {
  width: 100%;
  min-height: 42px;
  padding: 8px 38px 8px 12px;
  border: 1px solid var(--glass-edge);
  border-radius: 12px;
  background: color-mix(in srgb, var(--panel) 90%, transparent);
  color: var(--text);
  color-scheme: dark;
  font: inherit;
  font-size: 13px;
}
.ai-model-picker select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.ai-model-picker select:disabled {
  cursor: wait;
  opacity: 0.7;
}
.ai-model-legend {
  color: var(--muted);
  font-size: 11px;
  font-weight: 400;
}
.ai-model-status {
  min-height: 1.4em;
  margin: -4px 0 12px;
  color: var(--muted);
  font-size: 12px;
  text-align: right;
}
@media (max-width: 900px) {
  .ai-page-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .ai-sidebar {
    position: static;
    gap: 14px;
  }
  .ai-usage-panel {
    position: static;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    padding: 20px;
  }
  .ai-usage-note {
    padding-top: 14px;
    border-top: 1px solid var(--glass-edge);
    text-align: left;
  }
}
.hero {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
}

.hero .hero-art {
  height: auto;
  min-height: 360px;
  width: 100%;
}

.hero-art .collage {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 8px;
}

.hero-art .collage .tile-name {
  font-size: 11px;
}

@media (max-width: 900px) {
  .hero {
    gap: 24px;
  }
  .hero-art .collage {
    gap: 12px;
  }
}

@media (max-width: 700px) {
  .hero {
    grid-template-columns: minmax(0, 1fr);
  }
  .hero .hero-art {
    min-height: 0;
    max-width: none;
    margin-top: 12px;
  }
  .hero-art .collage {
    padding: 6px;
    gap: 12px;
  }
  .hero-art .collage .tile-name {
    font-size: 10px;
  }
}

.hero-art .flip-face {
  display: block;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform-origin: center;
}

:root {
  color-scheme: dark;
  --scrollbar-track: #211b24;
  --scrollbar-thumb: #9b7b85;
  --scrollbar-thumb-hover: #c29da6;
}

* {
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track,
::-webkit-scrollbar-corner {
  background: var(--scrollbar-track);
  border-radius: 8px;
}

::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border: 2px solid var(--scrollbar-track);
  border-radius: 8px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
}

::-webkit-scrollbar-button {
  display: none;
  width: 0;
  height: 0;
}

.g-bar {
  top: 0;
  background: transparent;
  border-radius: 0;
  isolation: isolate;
}

.p-hero,
.app-hero {
  border: 1px solid var(--glass-edge);
  background: linear-gradient(145deg, #ffffff0c, #ffffff03), var(--glass-fill);
  box-shadow: var(--glass-shadow);
}

.p-tab.on {
  color: var(--text);
}

.p-avatar {
  color: var(--text);
  background: #ffffff0b;
  border: 1px solid #ffffff20;
  font-weight: 500;
}

.p-row {
  background: #ffffff04;
  border-bottom: 1px solid #ffffff08;
}

.p-pill {
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

.p-hero h1,
.page-head h1,
.g-head h1 {
  font-weight: 550;
}

.tile:hover,
.tile:focus-visible,
.app-tile:hover,
.app-tile:focus-visible,
.rank-item:hover {
  transform: translateY(-2px);
}

.tile:hover .cover,
.tile:focus-visible .cover {
  box-shadow: 0 0 0 2px var(--accent);
}

.hero-art .tile:hover,
.hero-art .tile:focus-visible {
  transform: none;
}

.p-label,
.settings .muted,
.app-tile p {
  line-height: 1.6;
}

.input,
.select select {
  min-height: 44px;
}

.community-chat-layout input:focus {
  box-shadow: none;
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.pbtn,
#ai-send {
  min-height: 44px;
  min-width: 44px;
}

.community-chat-layout {
  background:
    linear-gradient(145deg, #ffffff0c, #ffffff02), rgba(32, 25, 34, 0.96);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-shadow);
}

.community-chat-note {
  font-size: 13px;
}

.community-chat-join-row input,
.community-chat-compose input {
  min-width: 0;
}

.community-chat-setup,
.community-chat-room-ui {
  min-width: 0;
}

.toast {
  bottom: 116px;
  background: var(--panel2);
  border: 1px solid var(--glass-edge);
  border-radius: 14px;
  box-shadow: var(--glass-shadow);
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
}

.top-actions .icon-btn {
  width: 42px;
  height: 44px;
}

.sheet-themes button {
  width: 36px;
  height: 36px;
}

.player-stage {
  min-height: 0;
}

#ai-input {
  resize: vertical;
}

#v-ai .page-head {
  min-height: 44px;
}

@media (max-width: 850px) {
  .top-actions .icon-btn {
    width: 36px;
  }
}

@media (max-width: 650px) {
  .topnav a {
    min-width: 44px;
  }
  .dock-mobile-settings {
    min-width: 44px;
    min-height: 44px;
  }
  .g-letter {
    min-width: 36px;
    min-height: 40px;
  }
  .g-letters {
    scrollbar-width: thin;
  }
  .g-letters::-webkit-scrollbar {
    display: block;
  }
  .p-tabs {
    scrollbar-width: thin;
  }
  .p-tab {
    min-height: 44px;
  }
  .player-bar {
    gap: 6px;
    overflow-x: auto;
    min-height: 56px;
    flex: none;
  }
  .player-bar .pbtn {
    flex: none;
    white-space: nowrap;
  }
  .player-bar h2 {
    min-width: 100px;
  }
  .p-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-contrast: more) {
  :root {
    --muted: #ddd3dc;
    --glass-edge: #baa5b4;
    --glass-fill: #261f2a;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .topbar,
  .ai-compose,
  .pop,
  .suggest,
  .sheet,
  .hero,
  .p-card,
  .card,
  .app-tile {
    backdrop-filter: none;
    background-color: var(--panel);
  }
}

@media (forced-colors: active) {
  .topbar,
  .card,
  .p-card,
  .hero,
  .ai-compose {
    background: Canvas;
    border: 1px solid CanvasText;
    box-shadow: none;
  }
  .dock-selection {
    border: 2px solid Highlight;
  }
}
.tile-launch {
  display: block;
  width: 100%;
  text-align: left;
  border-radius: inherit;
}

.tile-launch:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--accent);
}

.ai-compose {
  position: relative;
  isolation: isolate;
  display: grid;
  gap: 0;
  padding: 16px 18px 12px;
  border: 1px solid color-mix(in srgb, var(--glass-edge) 82%, var(--accent));
  border-radius: 24px;
  background:
    radial-gradient(ellipse at 8% 0, color-mix(in srgb, var(--accent) 12%, transparent), transparent 44%),
    linear-gradient(155deg, color-mix(in srgb, var(--panel) 95%, white 5%), var(--bg2));
  box-shadow: var(--glass-shadow), 0 16px 48px #0003;
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease,
    background 180ms ease;
}
.ai-compose::before {
  position: absolute;
  z-index: -1;
  inset: -2px;
  border-radius: inherit;
  background: linear-gradient(
    125deg,
    color-mix(in srgb, var(--accent) 80%, transparent),
    color-mix(in srgb, var(--accent2) 75%, transparent) 55%,
    color-mix(in srgb, var(--accent) 70%, transparent)
  );
  content: "";
  opacity: 0;
  filter: blur(22px);
  pointer-events: none;
  transition: opacity 180ms ease;
}
.ai-compose:focus-within {
  border-color: color-mix(in srgb, var(--accent) 72%, white);
  background:
    radial-gradient(ellipse at 8% 0, color-mix(in srgb, var(--accent) 17%, transparent), transparent 48%),
    linear-gradient(155deg, color-mix(in srgb, var(--panel) 96%, white 4%), var(--bg2));
  box-shadow:
    var(--glass-shadow),
    0 0 0 1px color-mix(in srgb, var(--accent) 42%, transparent),
    0 0 34px color-mix(in srgb, var(--accent) 26%, transparent),
    0 18px 54px #0004;
}
.ai-compose:focus-within::before {
  opacity: 0.46;
}
.ai-compose .ai-compose-heading {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 9px;
  min-height: 28px;
  margin-bottom: 8px;
  padding: 0;
}
.ai-compose-mark {
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  flex: none;
  border: 1px solid color-mix(in srgb, var(--accent) 36%, transparent);
  border-radius: 9px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 28%, var(--panel)), color-mix(in srgb, var(--accent2) 18%, var(--panel)));
  color: color-mix(in srgb, var(--accent2) 74%, white);
}
.ai-compose-mark svg {
  width: 16px;
  height: 16px;
}
.ai-compose .ai-compose-title {
  color: var(--text);
  font-size: 12px;
  font-weight: 750;
  letter-spacing: 0.015em;
}
.ai-compose .ai-compose-shortcut {
  margin-left: auto;
  padding: 4px 7px;
  border: 1px solid color-mix(in srgb, var(--glass-edge) 70%, transparent);
  border-radius: 7px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.ai-compose #ai-input {
  color: var(--text);
  outline: none;
  min-height: 60px;
  height: 60px;
  max-height: 180px;
  padding: 8px 2px 12px;
  border: 0;
  background: transparent;
  font-size: 15px;
  line-height: 1.65;
  resize: none;
}
.ai-compose #ai-input::placeholder {
  color: color-mix(in srgb, var(--muted) 84%, transparent);
}
.ai-compose .ai-compose-actions {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  min-height: 50px;
  margin: 0 -5px -2px;
  padding: 10px 0 0;
  border-top: 1px solid color-mix(in srgb, var(--glass-edge) 60%, transparent);
}
.ai-compose .ai-attach {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 40px;
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: 11px;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  transition:
    background 140ms ease,
    border-color 140ms ease,
    color 140ms ease,
    transform 140ms ease;
}
.ai-compose .ai-voice-button {
  white-space: nowrap;
}
.ai-voice-status {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.45;
}
.ai-compose .ai-attach svg {
  width: 16px;
  height: 16px;
  flex: none;
}
.ai-compose .ai-attach:hover {
  border-color: color-mix(in srgb, var(--glass-edge) 65%, transparent);
  background: color-mix(in srgb, var(--panel2) 70%, transparent);
  color: var(--text);
}
.ai-compose .ai-attach:active {
  transform: scale(0.97);
}
.ai-compose .ai-compose-hint {
  margin-left: auto;
  color: color-mix(in srgb, var(--muted) 75%, transparent);
  font-size: 10px;
}
.ai-compose #ai-send {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  min-width: 42px;
  min-height: 42px;
  margin-left: 4px;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--accent2) 55%, var(--accent));
  border-radius: 15px;
  background: linear-gradient(145deg, var(--accent2), var(--accent));
  color: var(--on-accent, #fff);
  box-shadow:
    inset 0 1px 0 #ffffff66,
    0 5px 16px color-mix(in srgb, var(--accent) 32%, transparent);
  transition:
    transform 140ms ease,
    box-shadow 140ms ease,
    filter 140ms ease,
    opacity 140ms ease;
}
.ai-compose #ai-send svg {
  width: 19px;
  height: 19px;
}
.ai-compose #ai-send:not(:disabled):hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
  box-shadow:
    inset 0 1px 0 #ffffff75,
    0 7px 22px color-mix(in srgb, var(--accent) 48%, transparent);
}
.ai-compose #ai-send:disabled {
  filter: saturate(0.65);
}
.ai-compose #ai-files {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 7px;
}
.ai-compose #ai-files:empty {
  display: none;
}
.ai-compose .ai-file {
  margin: 0 0 8px;
  border-color: color-mix(in srgb, var(--accent) 22%, var(--glass-edge));
  border-radius: 10px;
  background: color-mix(in srgb, var(--panel2) 70%, transparent);
}
.ai-note {
  max-width: 64ch;
  margin: 12px auto;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
  text-align: center;
}
@media (max-width: 520px) {
  .ai-compose {
    padding: 13px 13px 10px;
    border-radius: 20px;
  }
  .ai-compose .ai-compose-heading {
    margin-bottom: 4px;
  }
  .ai-compose .ai-compose-shortcut,
  .ai-compose .ai-compose-hint {
    display: none;
  }
  .ai-compose #ai-input {
    min-height: 54px;
    height: 54px;
    padding-inline: 1px;
    font-size: 14px;
  }
  .ai-compose .ai-compose-actions {
    gap: 5px;
    min-height: 46px;
    padding-top: 7px;
  }
  .ai-compose .ai-attach {
    gap: 4px;
    min-width: 36px;
    padding-inline: 6px;
    font-size: 10px;
  }
  .ai-compose .ai-compose-actions {
    flex-wrap: wrap;
    justify-content: flex-start;
  }
  .ai-compose .ai-compose-hint {
    display: none;
  }
  .ai-compose-actions #ai-send {
    margin-left: auto;
  }
  .ai-compose #ai-send {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    border-radius: 14px;
  }
}
@media (forced-colors: active) {
  .ai-compose:focus-within {
    outline: 2px solid Highlight;
    outline-offset: 3px;
    box-shadow: none;
  }
  .ai-compose::before {
    display: none;
  }
}
.ai-attach {
  display: grid;
  place-items: center;
  flex: none;
}
.ai-compose-actions #ai-send {
  margin-left: auto;
}
.p-avatar {
  overflow: hidden;
}
.p-picture-field {
  display: grid;
  justify-items: start;
  gap: 8px;
  margin: 16px 0;
}
.p-picture-upload {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid var(--glass-edge);
  border-radius: 12px;
  background: #ffffff08;
  color: var(--text);
  cursor: pointer;
  font-size: 14px;
}
.p-picture-upload:hover {
  background: #ffffff12;
}
.p-picture-upload:focus-within {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.p-picture-field #p-picture-status {
  font-size: 12px;
  line-height: 1.5;
  margin: 0;
}
#v-settings {
  width: 100%;
  max-width: 820px;
  margin-inline: auto;
}
#v-settings .settings {
  width: 100%;
  max-width: none;
}
.p-picture-field .p-picture-upload {
  display: inline-flex;
  width: auto;
  min-height: 44px;
  padding: 10px 16px;
  border-radius: 12px;
  font: inherit;
  font-size: 14px;
  line-height: 1.4;
}
.p-avatar-studio {
  display: grid;
  grid-template-columns: minmax(180px, 0.8fr) minmax(240px, 1.2fr);
  gap: 24px;
  align-items: start;
  margin-top: 20px;
}
.p-avatar-preview-wrap {
  display: grid;
  justify-items: center;
  gap: 12px;
  text-align: center;
}
.p-avatar-preview {
  width: min(100%, 220px);
  aspect-ratio: 1;
  border: 1px solid var(--glass-edge);
  border-radius: 50%;
  background: var(--panel2);
  box-shadow: 0 16px 40px #0005;
}
.p-avatar-preview-wrap p {
  max-width: 32ch;
  min-height: 2.8em;
  font-size: 12px;
}
.p-avatar-controls {
  display: grid;
  gap: 14px;
}
.p-avatar-controls .input {
  width: 100%;
  min-height: 42px;
  padding: 8px 12px;
}
.p-avatar-controls .p-picture-field {
  margin: 0;
}
.p-shop-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}
.p-shop-balance {
  display: grid;
  min-width: 88px;
  padding: 10px 14px;
  border: 1px solid var(--glass-edge);
  border-radius: 14px;
  background: var(--bg2);
  text-align: center;
}
.p-shop-balance strong {
  color: var(--accent2);
  font: 800 24px/1.1 var(--display);
}
.p-shop-balance span,
.p-shop-earn,
.p-shop-category {
  color: var(--muted);
  font-size: 12px;
}
.p-shop-earn {
  margin: 18px 0;
  line-height: 1.5;
}
.p-shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 12px;
}
.p-shop-item {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 14px;
  border: 1px solid var(--glass-edge);
  border-radius: 14px;
  background: #ffffff05;
}
.p-shop-swatch {
  width: 58px;
  aspect-ratio: 1;
  border: 1px solid #ffffff25;
  border-radius: 16px;
  background: linear-gradient(145deg, #393264, #1d5e66);
}
.p-shop-frame {
  border: 7px solid #d6e5f4;
  background: var(--panel);
}
.p-shop-frame-none {
  border: 1px solid var(--glass-edge);
  background: linear-gradient(145deg, #393264, #1d5e66);
}
.p-shop-frame.p-shop-frame-neon {
  border-color: #74f4d0;
  box-shadow: 0 0 16px #74f4d088;
}
.p-shop-frame.p-shop-frame-gold {
  border-color: #f7cb62;
}
.p-shop-accessory {
  background:
    radial-gradient(circle at 70% 30%, #ffe27a 0 12%, transparent 13%),
    linear-gradient(145deg, #393264, #1d5e66);
}
.p-shop-accessory-leaf {
  background:
    radial-gradient(ellipse at 70% 30%, #a6e68a 0 14%, transparent 15%),
    linear-gradient(145deg, #393264, #1d5e66);
}
.p-shop-accessory-crown {
  background:
    linear-gradient(135deg, transparent 38%, #ffd568 39% 57%, transparent 58%),
    linear-gradient(145deg, #393264, #1d5e66);
}
.p-shop-copy {
  min-width: 0;
}
.p-shop-copy h4 {
  margin: 3px 0 5px;
  font-size: 15px;
}
.p-shop-copy p {
  min-height: 2.8em;
  font-size: 12px;
  line-height: 1.45;
}
.p-shop-copy .p-actions {
  margin-top: 10px;
}
.p-shop-copy .p-btn:disabled {
  cursor: default;
  opacity: 0.65;
}
.p-account-form {
  display: grid;
  gap: 12px;
  max-width: 520px;
  margin-top: 20px;
}
.p-account-form .input {
  width: 100%;
  min-height: 42px;
  padding: 8px 12px;
}
.p-account-session {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 18px;
}
.p-account-session p {
  overflow-wrap: anywhere;
}
.p-account-status,
.p-account-unavailable {
  min-height: 1.5em;
  margin-top: 14px;
  color: var(--accent2);
}
.p-account-note {
  max-width: 75ch;
  margin-top: 12px;
  line-height: 1.55;
}
.account-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 56%, var(--glass-edge));
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}
.account-nav:hover {
  background: color-mix(in srgb, var(--accent) 24%, transparent);
}
.p-account-link {
  color: var(--accent2);
  font-weight: 700;
}
.account-page {
  display: grid;
  justify-items: center;
  gap: 20px;
  min-height: min(78vh, 760px);
  padding: clamp(24px, 7vh, 72px) 0;
}
.account-back {
  width: min(100%, 480px);
  color: var(--muted);
  font-size: 14px;
}
.account-back:hover {
  color: var(--text);
}
.account-page-card {
  width: min(100%, 480px);
  padding: clamp(24px, 5vw, 40px);
  border: 1px solid var(--glass-edge);
  border-radius: 24px;
  background:
    radial-gradient(ellipse at 100% 0, color-mix(in srgb, var(--accent) 18%, transparent), transparent 48%),
    color-mix(in srgb, var(--panel) 92%, transparent);
  box-shadow: var(--glass-shadow), 0 24px 70px #0004;
}
.account-page-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 30px;
  font-size: 17px;
  font-weight: 800;
}
.account-page-brand img {
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--accent2);
}
.account-page-card > .eyebrow {
  margin-bottom: 7px;
  color: var(--accent2);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.account-page-card h1 {
  font: 800 clamp(26px, 7vw, 34px)/1.15 var(--display);
}
.account-page-intro {
  margin-top: 12px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}
.account-page-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin: 26px 0 22px;
  padding: 4px;
  border: 1px solid var(--glass-edge);
  border-radius: 12px;
  background: color-mix(in srgb, var(--bg) 42%, transparent);
}
.account-page-switch a {
  padding: 10px 8px;
  border-radius: 9px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}
.account-page-switch a:hover,
.account-page-switch a.on {
  background: color-mix(in srgb, var(--accent) 20%, var(--panel));
  color: var(--text);
}
.account-page-form {
  display: grid;
  gap: 10px;
}
.account-page-form .p-label {
  margin-top: 6px;
  font-size: 13px;
  font-weight: 700;
}
.account-page-form .input {
  width: 100%;
  min-height: 48px;
  padding: 10px 14px;
  border: 1px solid var(--glass-edge);
  border-radius: 11px;
  background: color-mix(in srgb, var(--bg) 42%, var(--panel));
}
.account-page-form .input:focus-visible {
  border-color: var(--accent);
}
.account-page-name-note {
  margin: -4px 0 4px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}
.account-page-submit {
  width: 100%;
  min-height: 48px;
  margin-top: 10px;
  font-weight: 800;
}
.account-page-submit:disabled,
.account-page-session button:disabled {
  cursor: wait;
  opacity: 0.65;
}
.account-page-session {
  display: grid;
  gap: 16px;
  padding: 18px;
  border: 1px solid var(--glass-edge);
  border-radius: 14px;
  background: color-mix(in srgb, var(--bg) 36%, transparent);
}
.account-page-session strong {
  overflow-wrap: anywhere;
}
.account-page-status,
.account-page-unavailable {
  min-height: 1.5em;
  margin-top: 14px;
  color: var(--accent2);
  font-size: 13px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.account-page-note {
  margin-top: 14px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}
@media (max-width: 650px) {
  .p-avatar-studio {
    grid-template-columns: minmax(0, 1fr);
  }
  .p-avatar-preview {
    width: min(64vw, 220px);
  }
  .p-shop-heading {
    align-items: center;
  }
}
.topbar {
  border-radius: 38px;
  border: 1px solid #ffffff20;
  background: rgba(28, 22, 30, 0.38);
  backdrop-filter: url("#dock-lens") saturate(145%);
  -webkit-backdrop-filter: url("#dock-lens") saturate(145%);
  box-shadow:
    inset 0 1px 2px #ffffff25,
    inset 0 -1px 2px #ffffff12,
    0 8px 26px #0003;
}
.topbar::before,
.topbar::after {
  content: none;
}
.topbar .topnav a,
.topbar .icon-btn {
  color: var(--text);
}
.dock-selection {
  background: linear-gradient(160deg, #ffffff23, #ffffff08);
  border-color: #ffffff30;
  box-shadow:
    inset 0 1px 2px #ffffff38,
    0 2px 6px #0002;
}
body.effects-reduced .topbar,
.reduce-motion .topbar {
  background: var(--panel);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
@media (prefers-reduced-motion: reduce),
  (prefers-reduced-transparency: reduce),
  (prefers-contrast: more),
  (forced-colors: active) {
  .topbar {
    background: var(--panel);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

.ai-thinking {
  display: inline-flex;
  white-space: nowrap;
  padding-block: 4px;
}
.ai-thinking > span {
  display: inline-block;
  animation: thinking-letter 1.65s ease-in-out infinite;
  animation-delay: var(--letter-delay);
}
@keyframes thinking-letter {
  0%,
  12%,
  48%,
  100% {
    transform: translateY(0);
    opacity: 1;
  }
  28% {
    transform: translateY(-5px);
    opacity: 0.4;
  }
}
body.effects-reduced .ai-thinking > span,
.reduce-motion .ai-thinking > span {
  animation: none;
}
@media (prefers-reduced-motion: reduce) {
  .ai-thinking > span {
    animation: none;
  }
}
.ai-message {
  display: flex;
  flex-direction: column;
  gap: 8px;
  white-space: normal;
}
.ai-message.assistant {
  padding: 12px 4px;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.ai-message > small {
  display: block;
  margin: 0;
  padding: 0;
  line-height: 1.2;
  color: var(--muted);
  font-size: 10px;
  letter-spacing: 0.08em;
}
.ai-message-body {
  white-space: pre-wrap;
  line-height: 1.65;
  margin: 0;
  padding: 0;
}
.ai-message-body:empty {
  display: none;
}
.ai-conversation {
  gap: 20px;
}

.player-bar {
  gap: 10px;
  padding: 12px 18px;
  background: rgba(32, 26, 35, 0.84);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--glass-edge);
}
.player-bar h2 {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px;
}
.player-bar .pbtn {
  min-width: 44px;
  min-height: 44px;
  border-radius: 12px;
}
.player-bar .pbtn:disabled {
  opacity: 0.3;
  cursor: default;
}
body.browser-active #app {
  max-width: none;
  width: 100%;
  padding: 16px 20px 112px;
}
body.browser-active .ubgb-win {
  height: calc(100dvh - 128px);
  min-height: 0;
}
@media (max-width: 700px) {
  body.browser-active #app {
    padding: 10px 10px 100px;
  }
  body.browser-active .ubgb-win {
    height: calc(100dvh - 110px);
    border-radius: 16px;
  }
}
html:has(body.browser-active) {
  overflow: hidden;
}
body.browser-active {
  overflow: hidden;
  height: 100dvh;
}

.ai-jump-latest {
  position: fixed;
  left: 50%;
  bottom: 118px;
  transform: translateX(-50%);
  z-index: 240;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid #ffffff30;
  color: var(--text);
  background: rgba(28, 22, 30, 0.38);
  backdrop-filter: url("#dock-lens") saturate(145%);
  -webkit-backdrop-filter: url("#dock-lens") saturate(145%);
  box-shadow:
    inset 0 1px 2px #ffffff25,
    0 4px 18px #0004;
}
.ai-jump-latest[hidden] {
  display: none;
}
.ai-jump-latest:hover {
  background-color: rgba(65, 47, 59, 0.6);
}
@media (max-width: 700px) {
  .ai-jump-latest {
    bottom: 102px;
  }
}
body.effects-reduced .ai-jump-latest,
.reduce-motion .ai-jump-latest {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: var(--panel);
}
@media (prefers-reduced-motion: reduce),
  (prefers-reduced-transparency: reduce),
  (forced-colors: active) {
  .ai-jump-latest {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--panel);
  }
}

.ai-file {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.ai-file img {
  width: 36px;
  height: 36px;
  object-fit: cover;
  border-radius: 6px;
  flex: none;
}

.hero-art .collage {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.collage-row {
  overflow: hidden;
  width: 100%;
}
.collage-track {
  display: flex;
  gap: 18px;
  width: 100%;
}
.hero-art .collage-track > .tile {
  flex: 0 0 calc((100% - 36px) / 3);
  min-width: 0;
  position: relative;
  perspective: 700px;
  transform-style: preserve-3d;
  animation: none;
}
@media (max-width: 700px) {
  .hero-art .collage,
  .collage-track {
    gap: 12px;
  }
  .hero-art .collage-track > .tile {
    flex-basis: calc((100% - 24px) / 3);
  }
}
.hero-art .collage-track > .tile:nth-child(n) {
  transform: none;
}
.collage-row {
  padding: 6px 0 10px;
}
.hero-art .collage-track .tile-name {
  display: block;
  min-height: 2.8em;
  line-height: 1.4;
  white-space: normal;
}
.collage-row {
  -webkit-mask-image: linear-gradient(
    to right,
    transparent,
    #000 6%,
    #000 94%,
    transparent
  );
  mask-image: linear-gradient(
    to right,
    transparent,
    #000 6%,
    #000 94%,
    transparent
  );
}

.g-provider-option:disabled { opacity: .45; cursor: default; }

.g-provider-select { flex: none; position: relative; max-width: 42%; }
.g-provider-select select { width: 180px; max-width: 100%; height: 44px; padding: 0 32px 0 12px; border: 1px solid var(--glass-edge); border-radius: 12px; background: rgba(43, 33, 43, .6); color: var(--text); font: inherit; font-size: 13px; color-scheme: dark; cursor: pointer; }
.g-provider-select option { background: #241d28; color: var(--text); }
@media (max-width: 700px) { .g-provider-select select { width: 138px; } }

#age-dialog { width: min(420px, calc(100vw - 32px)); padding: 26px; border: 1px solid var(--glass-edge); border-radius: 24px; background: var(--panel); color: var(--text); box-shadow: 0 24px 80px #0006; }
#age-dialog::backdrop { background: #100d1680; backdrop-filter: blur(8px); }
#age-dialog h2 { font-size: 21px; margin-bottom: 20px; }
.age-confirm { display: flex; align-items: flex-start; gap: 12px; line-height: 1.6; margin-bottom: 24px; cursor: pointer; }
.age-confirm input { flex: none; width: 20px; height: 20px; margin-top: 3px; accent-color: var(--accent); }
#age-dialog .btn { width: 100%; }

.ai-terminal {
  margin-top: 12px;
  border: 1px solid var(--glass-edge);
  border-radius: 18px;
  overflow: hidden;
  background: rgba(30, 24, 32, .86);
}
.ai-terminal[hidden] { display: none; }
.ai-terminal header, .ai-terminal footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
}
.ai-terminal header div { display: grid; gap: 3px; }
.ai-terminal-status { color: var(--muted); font-size: 12px; }
.ai-terminal button, .ai-terminal label, .ai-terminal-path {
  font: inherit;
  color: inherit;
  background: rgba(255, 255, 255, .06);
  border: 1px solid var(--glass-edge);
  border-radius: 9px;
  padding: 8px 10px;
}
.ai-terminal button, .ai-terminal label { cursor: pointer; }
.ai-terminal-path { flex: 1; min-width: 50px; }
.ai-terminal-screen { padding: 12px; background: #17141a; }
.ai-terminal-file { display: flex; align-items: center; gap: 12px; margin: 10px 0; }
.ai-terminal-file button { color: inherit; background: transparent; border: 1px solid var(--glass-edge); border-radius: 9px; padding: 8px 12px; cursor: pointer; }
@media (max-width: 480px) { .ai-terminal footer { flex-wrap: wrap; } }
.ai-terminal-preview { display: block; max-width: 100%; max-height: 420px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; border: 1px solid var(--glass-edge); border-radius: 12px; padding: 12px; }

/* AI chat layout */
#v-ai .ai-page-head {
  width: min(100%, 1120px);
  margin: 18px auto 10px;
  align-items: center;
}

#v-ai .ai-model-picker {
  min-width: min(320px, 65vw);
}

#v-ai .ai-model-picker select {
  border-radius: 10px;
  background: var(--panel);
}

#v-ai .ai-page-head > #ai-clear {
  min-height: 40px;
  border-radius: 10px;
}

#v-ai .ai-model-status {
  width: min(100%, 1120px);
  margin: 0 auto 12px;
  text-align: left;
}

#v-ai .ai-page-layout {
  width: min(100%, 1120px);
  margin-inline: auto;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
}

#v-ai .ai-usage-panel {
  padding: 16px 18px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--panel) 94%, transparent);
  box-shadow: none;
}

#v-ai .ai-usage-panel {
  gap: 12px;
}

#v-ai .ai-usage-heading {
  gap: 10px;
}

#v-ai .ai-usage-icon {
  width: 32px;
  height: 32px;
  border-radius: 10px;
}

#v-ai .ai-usage-numbers strong {
  font-size: 27px;
}

#v-ai .ai-usage-note {
  padding-top: 10px;
}

#v-ai .ai-screen-privacy {
  padding: 0;
  background: none;
}

#v-ai .ai-workspace {
  width: min(100%, 860px);
  max-width: none;
  margin-inline: auto;
}

#v-ai .ai-conversation {
  min-height: min(48vh, 480px);
  gap: 22px;
  padding: 32px 0 24px;
}

#v-ai .ai-welcome {
  display: grid;
  justify-items: center;
  gap: 12px;
  margin: auto 0;
}

#v-ai .ai-welcome img {
  width: 48px;
  height: 48px;
  margin: 0 0 4px;
}

#v-ai .ai-welcome h2 {
  margin: 0;
  font-size: clamp(24px, 3vw, 30px);
  font-weight: 600;
  letter-spacing: -0.035em;
}

#v-ai .ai-message {
  max-width: 100%;
  font-size: 15px;
  line-height: 1.75;
}

#v-ai .ai-message.assistant {
  padding: 4px 0 12px;
}

#v-ai .ai-message.assistant > small {
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.02em;
}

#v-ai .ai-message.user {
  align-self: flex-end;
  max-width: min(82%, 680px);
  padding: 12px 18px;
  border: 1px solid color-mix(in srgb, var(--glass-edge) 70%, transparent);
  border-radius: 22px;
  background: color-mix(in srgb, var(--panel2) 88%, transparent);
}

#v-ai .ai-message.user > small {
  display: none;
}

#v-ai .ai-message-body {
  line-height: 1.75;
}

#v-ai .ai-compose {
  padding: 10px 14px;
  border: 1px solid color-mix(in srgb, var(--glass-edge) 76%, transparent);
  border-radius: 24px;
  background: var(--panel);
  box-shadow: 0 8px 28px #0002;
}

#v-ai .ai-compose::before {
  display: none;
}

#v-ai .ai-compose:focus-within {
  border-color: color-mix(in srgb, var(--glass-edge) 76%, transparent);
  background: var(--panel);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent);
}

#v-ai .ai-compose .ai-compose-heading {
  display: none;
}

#v-ai .ai-compose #ai-input {
  min-height: 48px;
  height: 48px;
  max-height: 200px;
  padding: 8px 4px;
  font-size: 15px;
}

#v-ai .ai-compose .ai-compose-actions {
  min-height: 40px;
  margin: 0;
  padding-top: 6px;
  border-top: 0;
}

#v-ai .ai-compose .ai-attach {
  min-height: 34px;
  border-radius: 9px;
}

#v-ai .ai-compose #ai-send {
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  border: 0;
  border-radius: 50%;
  background: var(--text);
  color: var(--bg);
  box-shadow: none;
}

#v-ai .ai-compose #ai-send:not(:disabled):hover {
  transform: none;
  filter: brightness(0.9);
  box-shadow: none;
}

#v-ai .ai-voice-status,
#v-ai .ai-note {
  font-size: 11px;
}

#v-ai .ai-note {
  margin: 10px 0 14px;
}

@media (max-width: 900px) {
  #v-ai .ai-sidebar {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 520px) {
  #v-ai .ai-page-head {
    align-items: flex-start;
  }

  #v-ai .ai-model-picker {
    min-width: min(100%, 240px);
    flex: 1 1 180px;
  }

  #v-ai .ai-page-head > #ai-clear {
    min-height: 42px;
  }

  #v-ai .ai-conversation {
    min-height: 38vh;
    padding-top: 24px;
  }

  #v-ai .ai-message.user {
    max-width: 92%;
  }

  #v-ai .ai-compose {
    padding: 10px 12px;
  }

  #v-ai .ai-compose .ai-compose-actions {
    align-items: flex-start;
  }
}

/* Center the empty-chat experience and keep secondary controls out of the way. */
#v-ai .ai-page-head {
  width: min(100%, 1120px);
  margin-bottom: 4px;
}

#v-ai .ai-model-picker {
  min-width: min(260px, 55vw);
}

#v-ai .ai-model-picker > span {
  display: block;
  font-size: 11px;
}

#v-ai .ai-model-legend {
  display: none;
}

#v-ai .ai-model-picker select {
  min-height: 38px;
}

#v-ai .ai-model-status {
  min-height: 0;
  margin-bottom: 6px;
  font-size: 11px;
}

#v-ai .ai-page-layout {
  display: flex;
  flex-direction: column;
  min-height: max(420px, calc(100svh - 250px));
  align-content: stretch;
  gap: 0;
}

#v-ai .ai-workspace {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: min(100%, 760px);
  min-height: 0;
  flex: 1;
}

#v-ai .ai-workspace:has(.ai-welcome) {
  justify-content: center;
}

#v-ai .ai-conversation {
  min-height: 0;
  flex: 1 1 auto;
  padding: 24px 0;
}

#v-ai .ai-conversation:has(.ai-welcome) {
  min-height: 0;
  flex: 0 0 auto;
  margin: 0 0 20px;
  padding: 0;
}

#v-ai .ai-welcome {
  gap: 10px;
}

#v-ai .ai-welcome img {
  display: none;
}

#v-ai .ai-welcome h2 {
  font-size: clamp(25px, 3vw, 32px);
  font-weight: 500;
  letter-spacing: -0.035em;
}

#v-ai .ai-compose {
  padding: 10px 14px;
  border-radius: 28px;
  background: color-mix(in srgb, var(--panel) 95%, white 5%);
}

#v-ai .ai-compose .ai-compose-actions {
  flex-wrap: wrap;
}

#v-ai .ai-compose .ai-attach {
  color: var(--muted);
}

#v-ai .ai-compose .ai-compose-hint {
  font-size: 10px;
}

#v-ai .ai-compose #ai-send {
  background: var(--accent);
  color: var(--on-accent, #fff);
}

#v-ai .ai-suggestions {
  display: none;
}

#v-ai .ai-workspace:has(.ai-welcome) .ai-suggestions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

#v-ai .ai-suggestions button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--glass-edge);
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease;
}

#v-ai .ai-suggestions button:hover {
  border-color: color-mix(in srgb, var(--glass-edge) 65%, var(--text));
  background: color-mix(in srgb, var(--panel) 85%, transparent);
}

#v-ai .ai-suggestions button span {
  color: var(--muted);
}

#v-ai .ai-workspace:has(.ai-welcome) .ai-note {
  order: 4;
  margin-top: 14px;
}

@media (max-width: 520px) {
  #v-ai .ai-page-layout {
    min-height: max(380px, calc(100svh - 300px));
  }

  #v-ai .ai-compose .ai-compose-actions {
    row-gap: 4px;
  }

  #v-ai .ai-suggestions {
    justify-content: flex-start;
  }
}

#v-ai #ai-screen-status:empty,
#v-ai #ai-voice-status:empty {
  display: none;
}

#v-ai #ai-voice-status:has(.sr-only) {
  margin: 0;
}

/* ChatGPT-style AI-only conversation sidebar. */
#v-ai .ai-page-layout {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  width: 100%;
  min-height: max(440px, calc(100svh - 230px));
  margin: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--glass-edge) 66%, transparent);
  border-radius: 18px;
  background: color-mix(in srgb, var(--bg) 94%, #000);
}

#v-ai .ai-chat-sidebar {
  position: relative;
  display: flex;
  flex: 0 0 238px;
  flex-direction: column;
  align-self: stretch;
  gap: 8px;
  min-width: 0;
  min-height: 100%;
  padding: 16px 12px 12px;
  border-right: 1px solid color-mix(in srgb, var(--glass-edge) 58%, transparent);
  background: var(--panel);
  transition: flex-basis 180ms ease, padding 180ms ease;
}

#v-ai .ai-sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 36px;
  padding: 0 4px 8px;
  color: var(--text);
  font-size: 15px;
  font-weight: 700;
}

#v-ai .ai-sidebar-brand img {
  flex: none;
  border-radius: 50%;
}

#v-ai .ai-sidebar-toggle {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin-left: auto;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  font-size: 22px;
  cursor: pointer;
}

#v-ai .ai-sidebar-toggle:hover,
#v-ai .ai-sidebar-action:hover,
#v-ai .ai-sidebar-chat:hover {
  background: color-mix(in srgb, var(--text) 8%, transparent);
  color: var(--text);
}

#v-ai .ai-sidebar-action,
#v-ai .ai-sidebar-chat {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 40px;
  padding: 0 10px;
  overflow: hidden;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

#v-ai .ai-sidebar-action:first-of-type {
  border: 1px solid color-mix(in srgb, var(--glass-edge) 75%, transparent);
  color: var(--text);
}

#v-ai .ai-sidebar-action > span:first-child,
#v-ai .ai-sidebar-chat-icon {
  display: grid;
  place-items: center;
  width: 20px;
  flex: none;
  font-size: 17px;
}

#v-ai .ai-sidebar-section-title {
  margin: 18px 8px 2px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
}

#v-ai .ai-sidebar-chat.is-current {
  background: color-mix(in srgb, var(--text) 8%, transparent);
  color: var(--text);
}

#v-ai .ai-sidebar-chat > span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
}

#v-ai .ai-sidebar-spacer {
  flex: 1;
}

#v-ai .ai-sidebar-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 6px 8px;
  border-top: 1px solid color-mix(in srgb, var(--glass-edge) 58%, transparent);
  color: var(--text);
  font-size: 12px;
}

#v-ai .ai-sidebar-avatar {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 25%, var(--panel));
  color: var(--text);
  font-weight: 700;
}

#v-ai .ai-main {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  padding: 14px clamp(16px, 3vw, 36px) 12px;
}

#v-ai .ai-main .ai-page-head,
#v-ai .ai-main .ai-model-status {
  width: min(100%, 900px);
}

#v-ai .ai-main .ai-workspace {
  width: min(100%, 760px);
}

#v-ai.ai-sidebar-collapsed .ai-chat-sidebar {
  flex-basis: 62px;
  align-items: center;
  padding-inline: 8px;
}

#v-ai.ai-sidebar-collapsed .ai-sidebar-brand {
  width: 100%;
  justify-content: center;
  padding-inline: 0;
}

#v-ai.ai-sidebar-collapsed .ai-sidebar-brand > span,
#v-ai.ai-sidebar-collapsed .ai-sidebar-action > span:last-child,
#v-ai.ai-sidebar-collapsed .ai-sidebar-section-title,
#v-ai.ai-sidebar-collapsed .ai-sidebar-chat > span:last-child,
#v-ai.ai-sidebar-collapsed .ai-sidebar-footer > span:last-child {
  display: none;
}

#v-ai.ai-sidebar-collapsed .ai-sidebar-toggle {
  position: absolute;
  top: 54px;
  left: 16px;
  width: 32px;
  margin: 0;
}

#v-ai.ai-sidebar-collapsed .ai-sidebar-action,
#v-ai.ai-sidebar-collapsed .ai-sidebar-chat {
  justify-content: center;
  width: 42px;
  padding: 0;
}

#v-ai.ai-sidebar-collapsed .ai-sidebar-action > span:first-child,
#v-ai.ai-sidebar-collapsed .ai-sidebar-chat-icon {
  font-size: 18px;
}

#v-ai.ai-sidebar-collapsed .ai-sidebar-footer {
  justify-content: center;
  width: 100%;
  padding-inline: 0;
}

@media (max-width: 700px) {
  #v-ai .ai-page-layout {
    flex-direction: column;
    min-height: max(420px, calc(100svh - 250px));
  }

  #v-ai .ai-chat-sidebar {
    flex: 0 0 auto;
    flex-direction: row;
    align-items: center;
    min-height: 58px;
    padding: 8px 10px;
    border-right: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--glass-edge) 58%, transparent);
  }

  #v-ai .ai-sidebar-brand {
    flex: 1;
    padding: 0;
  }

  #v-ai .ai-sidebar-toggle {
    order: 2;
  }

  #v-ai .ai-sidebar-action {
    width: auto;
    min-height: 38px;
    padding-inline: 9px;
  }

  #v-ai .ai-sidebar-section-title,
  #v-ai .ai-sidebar-chat,
  #v-ai .ai-sidebar-spacer,
  #v-ai .ai-sidebar-footer {
    display: none;
  }

  #v-ai.ai-sidebar-collapsed .ai-chat-sidebar {
    min-height: 50px;
  }

  #v-ai.ai-sidebar-collapsed .ai-sidebar-brand {
    flex: 0 0 auto;
  }

  #v-ai.ai-sidebar-collapsed .ai-sidebar-brand > span {
    display: none;
  }

  #v-ai.ai-sidebar-collapsed .ai-sidebar-toggle {
    position: static;
    order: 0;
    margin-left: auto;
  }

  #v-ai.ai-sidebar-collapsed .ai-sidebar-action {
    display: none;
  }

  #v-ai .ai-main {
    min-height: 0;
    flex: 1;
    padding: 10px 12px 12px;
  }
}

/* The AI workspace owns the viewport while active. */
body.ai-active {
  height: 100dvh;
  overflow: hidden;
}

body.ai-active .topbar {
  display: flex !important;
}

body.ai-active #app,
body[data-layout="os"].ai-active #app {
  width: 100%;
  max-width: none;
  height: 100dvh;
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

body.ai-active #v-ai {
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
}

body.ai-active #v-ai .ai-page-layout {
  width: 100%;
  height: 100%;
  min-height: 0;
  max-width: none;
  border: 0;
  border-radius: 0;
}

body.ai-active #v-ai .ai-chat-sidebar {
  flex-basis: 260px;
  min-height: 0;
  padding: 20px 14px 14px;
}

body.ai-active #v-ai .ai-usage-panel {
  gap: 12px;
  padding: 16px;
  border-color: color-mix(in srgb, var(--glass-edge) 66%, transparent);
  background: color-mix(in srgb, var(--panel2) 72%, transparent);
  box-shadow: none;
}

body.ai-active #v-ai .ai-usage-heading {
  gap: 10px;
}

body.ai-active #v-ai .ai-usage-icon {
  width: 32px;
  height: 32px;
  border-radius: 10px;
}

body.ai-active #v-ai .ai-usage-numbers strong {
  font-size: 27px;
}

body.ai-active #v-ai .ai-usage-status {
  font-size: 11px;
}

body.ai-active #v-ai.ai-sidebar-collapsed .ai-chat-sidebar {
  flex: 0 0 62px;
  width: 62px;
  align-items: center;
  padding: 20px 8px 14px;
}

body.ai-active #v-ai.ai-sidebar-collapsed .ai-usage-panel {
  display: none;
}

body.ai-active #v-ai.ai-sidebar-collapsed .ai-sidebar-brand {
  width: 100%;
  justify-content: center;
  padding-inline: 0;
}

body.ai-active #v-ai.ai-sidebar-collapsed .ai-sidebar-toggle {
  position: absolute;
  top: 54px;
  left: 15px;
  width: 32px;
  margin: 0;
}

body.ai-active #v-ai.ai-sidebar-collapsed .ai-sidebar-action,
body.ai-active #v-ai.ai-sidebar-collapsed .ai-sidebar-chat {
  justify-content: center;
  width: 42px;
  padding: 0;
}

body.ai-active #v-ai.ai-sidebar-collapsed .ai-sidebar-footer {
  justify-content: center;
  width: 100%;
  padding-inline: 0;
}

body.ai-active #v-ai .ai-main {
  min-height: 0;
  padding: 18px clamp(24px, 5vw, 72px) 112px;
}

body.ai-active #v-ai .ai-main .ai-page-head,
body.ai-active #v-ai .ai-main .ai-model-status {
  width: min(100%, 1120px);
}

body.ai-active #v-ai .ai-main .ai-workspace {
  width: min(100%, 900px);
  min-height: 0;
  flex: 1 1 auto;
}

body.ai-active #v-ai .ai-conversation:has(.ai-welcome) {
  margin-bottom: 24px;
}

@media (max-width: 700px) {
  body.ai-active #v-ai .ai-page-layout {
    flex-direction: column;
    min-height: 0;
  }

  body.ai-active #v-ai .ai-chat-sidebar {
    flex: 0 0 auto;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    min-height: 58px;
    padding: 8px 12px;
  }

  body.ai-active #v-ai .ai-sidebar-brand {
    flex: 1;
  }

  body.ai-active #v-ai .ai-usage-panel {
    order: 3;
    flex: 1 0 100%;
  }

  body.ai-active #v-ai .ai-main {
    padding: 10px 14px calc(100px + env(safe-area-inset-bottom));
  }
}

/* Friendly model effort control and readable conversation styling. */
#v-ai .ai-effort-control {
  position: relative;
  z-index: 20;
}

#v-ai .ai-effort-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 188px;
  min-height: 48px;
  padding: 6px 12px;
  border: 1px solid color-mix(in srgb, var(--glass-edge) 82%, transparent);
  border-radius: 15px;
  background: color-mix(in srgb, var(--panel) 76%, transparent);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  backdrop-filter: blur(18px) saturate(135%);
  -webkit-backdrop-filter: blur(18px) saturate(135%);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text) 10%, transparent),
    0 8px 24px #0002;
  transition: border-color 140ms ease, background 140ms ease;
}

#v-ai .ai-effort-button:hover:not(:disabled),
#v-ai .ai-effort-button[aria-expanded="true"] {
  border-color: color-mix(in srgb, var(--accent) 54%, var(--glass-edge));
  background: color-mix(in srgb, var(--panel2) 84%, transparent);
}

#v-ai .ai-effort-button:focus-visible,
#v-ai .ai-effort-close:focus-visible,
#v-ai .ai-suggestions button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

#v-ai .ai-effort-button:disabled {
  cursor: wait;
  opacity: 0.65;
}

#v-ai .ai-effort-spark {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 18%, var(--panel));
  color: var(--accent2);
  font-size: 17px;
}

#v-ai .ai-effort-button-copy {
  display: grid;
  gap: 1px;
  flex: 1;
}

#v-ai .ai-effort-button-copy small {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.2;
}

#v-ai .ai-effort-button-copy strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.3;
}

#v-ai .ai-effort-chevron {
  color: var(--muted);
  font-size: 17px;
}

#v-ai .ai-effort-popover {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  width: min(390px, calc(100vw - 32px));
  padding: 18px;
  border: 1px solid color-mix(in srgb, var(--glass-edge) 88%, transparent);
  border-radius: 20px;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--text) 9%, transparent), transparent 58%),
    color-mix(in srgb, var(--panel) 82%, transparent);
  color: var(--text);
  backdrop-filter: blur(28px) saturate(150%);
  -webkit-backdrop-filter: blur(28px) saturate(150%);
  box-shadow: 0 20px 60px #0005, inset 0 1px 0 #ffffff17;
}

#v-ai .ai-effort-popover[hidden] {
  display: none;
}

#v-ai .ai-effort-popover-heading {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 20px;
}

#v-ai .ai-effort-popover-heading h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 650;
  letter-spacing: -0.02em;
}

#v-ai .ai-effort-popover-heading p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

#v-ai .ai-effort-close {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: none;
  margin: -4px -6px 0 auto;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  font-size: 22px;
  cursor: pointer;
}

#v-ai .ai-effort-close:hover {
  background: color-mix(in srgb, var(--text) 9%, transparent);
  color: var(--text);
}

#v-ai #ai-effort-range {
  display: block;
  width: 100%;
  height: 28px;
  margin: 4px 0 10px;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  cursor: pointer;
}

#v-ai #ai-effort-range::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
}

#v-ai #ai-effort-range::-moz-range-track {
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
}

#v-ai #ai-effort-range::-webkit-slider-thumb {
  width: 20px;
  height: 20px;
  margin-top: -7px;
  appearance: none;
  -webkit-appearance: none;
  border: 2px solid var(--text);
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 2px 10px #0005, 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent);
}

#v-ai #ai-effort-range::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border: 2px solid var(--text);
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 2px 10px #0005, 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent);
}

#v-ai .ai-effort-labels {
  display: flex;
  justify-content: space-between;
  gap: 4px;
  color: var(--muted);
  font-size: 10px;
}

#v-ai .ai-effort-labels span {
  text-align: center;
}

#v-ai .ai-effort-labels span:nth-child(2),
#v-ai .ai-effort-labels span:nth-child(3) {
  color: var(--text);
}

#v-ai .ai-effort-model-note {
  min-height: 1em;
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

#v-ai .ai-model-status:empty {
  display: none;
}

#v-ai .ai-conversation {
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-color: color-mix(in srgb, var(--muted) 32%, transparent) transparent;
}

#v-ai .ai-message {
  max-width: min(100%, 820px);
  gap: 10px;
  font-size: 15px;
}

#v-ai .ai-message > small {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--text);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0;
}

#v-ai .ai-message-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 18%, var(--panel));
}

#v-ai .ai-message.assistant {
  padding: 8px 0 20px;
}

#v-ai .ai-message.assistant > small {
  color: var(--text);
}

#v-ai .ai-message.user {
  max-width: min(82%, 720px);
  padding: 13px 18px;
  border: 1px solid color-mix(in srgb, var(--glass-edge) 52%, transparent);
  border-radius: 22px 22px 7px 22px;
  background: color-mix(in srgb, var(--panel2) 78%, transparent);
}

#v-ai .ai-message-body {
  overflow-wrap: anywhere;
  font-size: 15px;
  line-height: 1.8;
}

#v-ai .ai-message.assistant .ai-message-body {
  padding-left: 33px;
}

#v-ai .ai-sources {
  padding-left: 33px;
}

#v-ai .ai-sources a {
  border-color: color-mix(in srgb, var(--accent) 30%, var(--glass-edge));
  border-radius: 999px;
}

#v-ai .ai-terminal {
  max-height: 32vh;
  overflow: auto;
}

#v-ai .ai-terminal-status {
  color: var(--muted);
}

@media (max-width: 560px) {
  #v-ai .ai-effort-popover {
    position: fixed;
    top: auto;
    right: 12px;
    bottom: max(88px, calc(env(safe-area-inset-bottom) + 72px));
    left: 12px;
    width: auto;
  }

  #v-ai .ai-effort-labels {
    font-size: 9px;
  }

  #v-ai .ai-message.user {
    max-width: 92%;
  }

  #v-ai .ai-message.assistant .ai-message-body,
  #v-ai .ai-sources {
    padding-left: 0;
  }
}

@media (prefers-reduced-transparency: reduce), (forced-colors: active) {
  #v-ai .ai-effort-button,
  #v-ai .ai-effort-popover {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--panel);
  }
}


/* AI refresh: calmer hierarchy, clearer conversation rhythm, theme-aware liquid glass. */
#v-ai .ai-main{gap:12px}
#v-ai .ai-page-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:4px 0 12px;border-bottom:1px solid color-mix(in srgb,var(--glass-edge) 55%,transparent)}
#v-ai .ai-effort-button{min-width:206px;min-height:54px;padding:8px 14px;border-radius:17px;background:linear-gradient(145deg,color-mix(in srgb,var(--text) 12%,transparent),transparent 62%),color-mix(in srgb,var(--panel) 62%,transparent);border-color:color-mix(in srgb,var(--text) 17%,transparent);box-shadow:inset 0 1px 0 color-mix(in srgb,var(--text) 24%,transparent),inset 0 -1px 0 color-mix(in srgb,var(--text) 5%,transparent),0 12px 30px #0002;backdrop-filter:blur(30px) saturate(175%);-webkit-backdrop-filter:blur(30px) saturate(175%)}
#v-ai .ai-effort-button-copy small{font-size:10px;letter-spacing:.045em;text-transform:uppercase}
#v-ai .ai-effort-button-copy strong{font-size:14px}
#v-ai .ai-effort-popover{width:min(420px,calc(100vw - 28px));padding:20px;border-radius:24px;background:radial-gradient(ellipse at 0 0,color-mix(in srgb,var(--accent) 17%,transparent),transparent 60%),linear-gradient(145deg,color-mix(in srgb,var(--text) 13%,transparent),transparent 56%),color-mix(in srgb,var(--panel) 76%,transparent);border-color:color-mix(in srgb,var(--text) 22%,transparent);box-shadow:0 26px 80px #0006,inset 0 1px 0 color-mix(in srgb,var(--text) 22%,transparent);backdrop-filter:blur(38px) saturate(185%);-webkit-backdrop-filter:blur(38px) saturate(185%);animation:ai-glass-arrive 180ms cubic-bezier(.2,.8,.2,1) both}
#v-ai .ai-effort-popover-heading{margin-bottom:18px}
#v-ai .ai-effort-popover-heading h2{font-size:17px;letter-spacing:-.035em}
#v-ai .ai-effort-popover-heading p{max-width:320px;font-size:12px}
#v-ai #ai-effort-range{height:34px;margin:2px 0 12px;touch-action:pan-y}
#v-ai #ai-effort-range::-webkit-slider-runnable-track,#v-ai #ai-effort-range::-moz-range-track{height:8px;border:1px solid color-mix(in srgb,var(--text) 15%,transparent);background:linear-gradient(90deg,var(--accent),var(--accent2));box-shadow:inset 0 1px 2px #0003}
#v-ai #ai-effort-range::-webkit-slider-thumb{width:23px;height:23px;margin-top:-8px;border:2px solid color-mix(in srgb,var(--text) 94%,white);background:linear-gradient(145deg,var(--accent2),var(--accent));box-shadow:0 3px 12px #0005,0 0 0 5px color-mix(in srgb,var(--accent) 20%,transparent)}
#v-ai #ai-effort-range::-moz-range-thumb{width:19px;height:19px;border:2px solid color-mix(in srgb,var(--text) 94%,white);background:linear-gradient(145deg,var(--accent2),var(--accent));box-shadow:0 3px 12px #0005,0 0 0 5px color-mix(in srgb,var(--accent) 20%,transparent)}
#v-ai .ai-effort-labels{gap:8px;font-size:11px;font-weight:600}
#v-ai .ai-effort-labels span{padding:5px 7px;border-radius:8px}
#v-ai .ai-effort-labels span:nth-child(2),#v-ai .ai-effort-labels span:nth-child(3){color:var(--muted)}
#v-ai .ai-effort-model-note{padding:10px 12px;border:1px solid color-mix(in srgb,var(--text) 10%,transparent);border-radius:12px;background:color-mix(in srgb,var(--text) 4%,transparent);font-size:11px}
#v-ai .ai-conversation{width:min(100%,860px);margin-inline:auto;padding:22px clamp(8px,2vw,24px) 34px;scroll-padding-block:24px}
#v-ai .ai-message{width:100%;max-width:100%;margin:0 auto 22px;gap:9px}
#v-ai .ai-message>small{gap:10px;font-size:12px;color:var(--muted)}
#v-ai .ai-message-avatar{width:27px;height:27px;padding:3px;border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);background:color-mix(in srgb,var(--accent) 14%,var(--panel))}
#v-ai .ai-message.assistant{padding:6px 0 18px}
#v-ai .ai-message.assistant .ai-message-body{max-width:760px;padding-left:37px;color:var(--text);line-height:1.82;letter-spacing:.002em;white-space:pre-wrap}
#v-ai .ai-message.user{width:fit-content;max-width:min(82%,680px);margin:0 0 22px auto;padding:13px 17px;border:1px solid color-mix(in srgb,var(--accent) 20%,var(--glass-edge));border-radius:20px 20px 6px 20px;background:color-mix(in srgb,var(--accent) 9%,var(--panel2));box-shadow:inset 0 1px 0 color-mix(in srgb,var(--text) 8%,transparent)}
#v-ai .ai-message.user>small{color:var(--muted)}
#v-ai .ai-message.user .ai-message-body{line-height:1.7;white-space:pre-wrap}
#v-ai .ai-thinking{color:var(--muted)}
#v-ai .ai-sources{display:flex;flex-wrap:wrap;gap:8px;padding-left:37px;margin-top:12px}
#v-ai .ai-sources a{padding:6px 11px;border:1px solid color-mix(in srgb,var(--accent) 26%,var(--glass-edge));background:color-mix(in srgb,var(--panel) 70%,transparent);font-size:11px;text-decoration:none}
#v-ai .ai-compose{width:min(100%,860px);margin:0 auto;border-radius:23px;border-color:color-mix(in srgb,var(--text) 16%,var(--glass-edge));background:linear-gradient(145deg,color-mix(in srgb,var(--text) 8%,transparent),transparent 65%),color-mix(in srgb,var(--panel) 82%,transparent);box-shadow:0 16px 40px #0002,inset 0 1px 0 color-mix(in srgb,var(--text) 12%,transparent);backdrop-filter:blur(24px) saturate(140%);-webkit-backdrop-filter:blur(24px) saturate(140%)}
#v-ai .ai-compose:focus-within{border-color:color-mix(in srgb,var(--accent) 64%,var(--glass-edge));box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 12%,transparent),0 18px 44px #0003}
#v-ai .ai-compose .ai-compose-heading{padding-inline:4px}
#v-ai .ai-compose #ai-input{min-height:62px;max-height:190px;font-size:15px;line-height:1.65}
#v-ai .ai-compose .ai-compose-actions{gap:8px;flex-wrap:wrap}
#v-ai .ai-compose .ai-attach{min-height:38px;border-radius:12px;padding-inline:11px}
#v-ai .ai-compose #ai-send{width:42px;height:42px;border-radius:14px}
#v-ai .ai-suggestions{width:min(100%,860px);margin:10px auto 0}
#v-ai .ai-suggestions button{min-height:38px;border-radius:12px;background:color-mix(in srgb,var(--panel) 48%,transparent)}
#v-ai .ai-model-status:not(:empty){padding:7px 11px;border-radius:10px;background:color-mix(in srgb,var(--panel) 76%,transparent);font-size:12px}
@keyframes ai-glass-arrive{from{opacity:0;transform:translateY(-7px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(max-width:700px){#v-ai .ai-page-head{align-items:flex-start}#v-ai .ai-effort-button{min-width:190px}#v-ai .ai-conversation{padding:14px 4px 24px}#v-ai .ai-message.user{max-width:92%}#v-ai .ai-message.assistant .ai-message-body,#v-ai .ai-sources{padding-left:0}#v-ai .ai-compose{border-radius:19px}}
@media(prefers-reduced-motion:reduce){#v-ai .ai-effort-popover{animation:none}}
@media(prefers-reduced-transparency:reduce),(forced-colors:active){#v-ai .ai-effort-button,#v-ai .ai-effort-popover,#v-ai .ai-compose{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--panel)}}


/* AI page: subtle custom cursor that follows the site's accent palette. */
@media (hover: hover) and (pointer: fine) {
  #v-ai {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Ccircle cx='13' cy='13' r='7' fill='%238b7cff' fill-opacity='.22' stroke='%23c9c0ff' stroke-width='1.5'/%3E%3Ccircle cx='13' cy='13' r='2.5' fill='%23ffffff'/%3E%3Cpath d='M18 18l7 7' stroke='%23c9c0ff' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E") 13 13, auto;
  }

  #v-ai button,
  #v-ai a,
  #v-ai [role="button"],
  #v-ai input[type="range"],
  #v-ai label {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Ccircle cx='13' cy='13' r='8' fill='%238b7cff' fill-opacity='.3' stroke='%23e2ddff' stroke-width='1.5'/%3E%3Ccircle cx='13' cy='13' r='3' fill='%23ffffff'/%3E%3Cpath d='M18 18l7 7' stroke='%23e2ddff' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E") 13 13, pointer;
  }

  #v-ai input:not([type="range"]),
  #v-ai textarea,
  #v-ai [contenteditable="true"] {
    cursor: text;
  }

  #v-ai button:disabled,
  #v-ai [aria-disabled="true"] {
    cursor: not-allowed;
  }
}

@media (prefers-reduced-motion: reduce), (pointer: coarse) {
  #v-ai,
  #v-ai button,
  #v-ai a,
  #v-ai [role="button"] {
    cursor: auto;
  }
}