@font-face {font-family:Barlow;src:url('/xixi/fonts/barlow-latin-700-normal.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face {font-family:Barlow;src:url('/xixi/fonts/barlow-latin-800-normal.woff2') format('woff2');font-weight:800;font-display:swap}
@font-face {font-family:'Chakra Petch';src:url('/xixi/fonts/chakra-petch-latin-700-normal.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face {font-family:Barlow;src:url('/xixi/fonts/barlow-latin-400-normal.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face {font-family:Barlow;src:url('/xixi/fonts/barlow-latin-600-normal.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face {font-family:'Chakra Petch';src:url('/xixi/fonts/chakra-petch-latin-600-normal.woff2') format('woff2');font-weight:600;font-display:swap}
:root {
  --ink: #202120;
  --on-accent: #202120;
  --accent-text: #f1ca43;
  --glow: #35362d;
  --raised: #30322c;
  --message-surface: #393b32;
  --dialog: #242720;
  --card: #2b3027;
  --file: #2a2e26;
  --code: #141614;
  --soft: #bfc4b2;
  --error: #ffbc9f;
  --shadow: #141612;
  --hover: #ffffff0a;
  --panel: #2a2b29;
  --line: #44463c;
  --paper: #eeede4;
  --muted: #aaa99d;
  --yellow: #f1ca43;
  --orange: #e46e3f;
  --green: #b7d594;
  color-scheme: dark;
  font-family: "Barlow", "Segoe UI", sans-serif;
  color: var(--paper);
  background: var(--ink);
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
}
button,
input,
textarea {
  font: inherit;
}
button,
a,
input,
textarea {
  -webkit-tap-highlight-color: transparent;
}
button {
  cursor: pointer;
  color: inherit;
  border: 0;
  background: none;
  transition:
    background 0.12s,
    transform 0.12s;
}
button:disabled {
  opacity: 0.35;
  cursor: default;
}
button:hover:not(:disabled) {
  background-color: var(--hover);
}
button:active:not(:disabled) {
  transform: translateY(2px);
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--yellow);
  outline-offset: 4px;
}
a {
  color: inherit;
}
[hidden] {
  display: none !important;
}
.app {
  height: 100dvh;
  overflow: hidden;
}
.main {
  height: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: radial-gradient(
    ellipse at 65% 0%,
    var(--glow) 0,
    transparent 55%
  );
  position: relative;
}
.main::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(#898d6529 0.6px, transparent 0.6px);
  background-size: 12px 12px;
  mask-image: linear-gradient(transparent, #0002);
  z-index: 0;
}
.main > * {
  position: relative;
}

.wordmark {
  font-family: "Chakra Petch", sans-serif;
  font-weight: 900;
  font-style: italic;
  letter-spacing: -3px;
  font-size: 42px;
  line-height: 1;
  text-decoration: none;
  color: var(--accent-text);
  display: flex;
  align-items: center;
  gap: 12px;
}
.wordmark span {
  font-size: 26px;
  font-style: normal;
  letter-spacing: 0;
}

.signal-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--green);
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 0 4px #b7d5940e;
}
.signal-dot.offline {
  background: var(--orange);
}

.icon {
  width: 37px;
  height: 37px;
  display: inline-grid;
  place-items: center;
  font-size: 26px;
  border-radius: 8px;
  flex-shrink: 0;
  color: var(--soft);
}
.icon svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

kbd {
  font:
    11px "SFMono-Regular",
    Consolas,
    monospace;
  white-space: nowrap;
}

.quiet {
  color: var(--muted);
  font-size: 12px;
  padding: 8px;
}
.welcome {
  margin: auto;
  text-align: center;
  padding: 25px 0 35px;
}
.frequency {
  width: 218px;
  height: 166px;
  background: var(--yellow);
  border-radius: 36px 36px 27px 27px;
  transform: rotate(-7deg);
  color: var(--on-accent);
  padding: 18px 24px;
  box-shadow: 9px 10px 0 #10130e;
  position: relative;
  margin: 0 auto;
  border: 1px solid #ffe38b;
}
.frequency::after {
  content: "";
  position: absolute;
  bottom: -7px;
  left: 28px;
  right: 28px;
  height: 4px;
  border-radius: 4px;
  background: #6f601c;
}
.frequency-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 15px;
}
.frequency-top i {
  width: 17px;
  height: 4px;
  background: var(--ink);
  border-radius: 3px;
}
.eyes {
  display: flex;
  gap: 23px;
  justify-content: center;
  padding: 16px 0 22px;
}
.eyes i {
  display: block;
  width: 44px;
  height: 45px;
  border-radius: 14px;
  background: var(--ink);
  transform: skew(-12deg);
}

.frequency-bars {
  text-align: right;
  font-size: 9px;
  letter-spacing: 3px;
}

.compose-dock {
  padding: 14px 28px max(18px, env(safe-area-inset-bottom));
  width: min(100%, 920px);
  align-self: center;
  flex-shrink: 0;
}
.composer {
  display: flex;
  align-items: flex-end;
  gap: 13px;
  border: 1px solid #68695a;
  background: var(--raised);
  border-radius: 16px;
  padding: 12px 13px;
  box-shadow: 0 6px 0 var(--shadow);
}
.composer:focus-within {
  border-color: var(--accent-text);
}
.composer textarea {
  flex: 1;
  min-width: 0;
  resize: none;
  max-height: 150px;
  min-height: 36px;
  background: none;
  border: 0;
  color: var(--paper);
  padding: 8px 0;
  font-size: 14px;
  line-height: 1.5;
  outline: none;
}
.composer textarea::placeholder {
  color: var(--soft);
}
.call-dock {
  display: flex;
  justify-content: center;
  padding-top: 14px;
}
.composer-call {
  color: var(--accent-text);
}
.composer-call[aria-pressed="true"] {
  color: var(--error);
  background: #bc4c3529;
}
.send {
  flex-shrink: 0;
  height: 37px;
  width: 40px;
  background: var(--yellow);
  color: var(--on-accent);
  font-size: 26px;
  border-radius: 8px;
}
.send:hover:not(:disabled),
.primary:hover:not(:disabled) {
  background: var(--yellow);
  filter: brightness(1.08);
}

.messages {
  flex: 1;
  overflow: auto;
  scroll-behavior: smooth;
  padding: 28px max(26px, calc((100% - 820px) / 2));
  min-height: 0;
}
.messages:empty {
  display: none;
}
.message {
  margin-bottom: 27px;
  max-width: 88%;
  font-size: 14px;
  line-height: 1.75;
  overflow-wrap: anywhere;
}
.meta {
  font:
    9px Consolas,
    monospace;
  letter-spacing: 1px;
  color: var(--accent-text);
  margin-bottom: 8px;
}
.message.user {
  margin-left: auto;
  max-width: 78%;
  background: var(--message-surface);
  border: 1px solid #535548;
  border-radius: 15px 15px 3px 15px;
  padding: 14px 18px;
}
.message.user .meta {
  color: var(--soft);
}
.message.notice {
  color: var(--muted);
}
.message p {
  margin: 6px 0;
  white-space: pre-wrap;
}
.message pre {
  overflow: auto;
  background: var(--code);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
  font:
    12px/1.6 Consolas,
    monospace;
}
.message a {
  color: var(--accent-text);
  text-underline-offset: 3px;
}
.message img,
.message video {
  display: block;
  max-height: 380px;
  max-width: 100%;
  border-radius: 12px;
  margin: 10px 0;
}
.message audio {
  max-width: 100%;
  display: block;
  margin-top: 10px;
}
.file-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  margin: 8px 0;
  text-decoration: none;
  font-size: 12px;
  overflow-wrap: anywhere;
}
.file-link small {
  font:
    9px Consolas,
    monospace;
  color: var(--muted);
  white-space: nowrap;
}
.attachments {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.attachment {
  background: var(--raised);
  padding: 7px 10px;
  border-radius: 7px;
  font-size: 11px;
  display: flex;
  align-items: center;
  gap: 10px;
}
#background-work .attachment::before {
  content: "";
  width: 5px;
  height: 5px;
  background: var(--yellow);
  border-radius: 50%;
}
.working {
  font-size: 11px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 4px 10px;
}
.working button {
  margin-left: auto;
}
.error {
  font-size: 12px;
  color: var(--error);
  margin: 5px 0 12px;
}
.call-panel {
  width: min(calc(100% - 48px), 864px);
  align-self: center;
  margin: 18px 0 0;
  padding: 12px 18px;
  display: flex;
  align-items: center;
  gap: 17px;
  background: var(--card);
  border: 1px solid #7b8361;
  border-radius: 14px;
}
.call-panel strong {
  font-size: 12px;
}
.call-panel p {
  font-size: 11px;
  color: var(--soft);
  margin: 5px 0;
  max-height: 44px;
  overflow: auto;
}
.call-panel > div:nth-child(2) {
  flex: 1;
}
.voice-orb {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  color: var(--accent-text);
  font-size: 35px;
  animation: rotate 10s linear infinite;
}
.danger {
  background: #bc4c35;
  padding: 9px 17px;
  border-radius: 20px;
  font-size: 11px;
}
dialog {
  background: var(--dialog);
  color: var(--paper);
  border: 1px solid #747760;
  border-radius: 16px;
  box-shadow: 0 18px 90px #0009;
  padding: 0;
  max-height: 80dvh;
  width: min(calc(100% - 32px), 560px);
}
dialog::backdrop {
  background: #10130cbb;
  backdrop-filter: blur(8px);
}
.palette {
  margin-top: 16dvh;
}
.palette-search {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 17px 19px;
  border-bottom: 1px solid var(--line);
}
.palette-search > span {
  font-size: 25px;
  color: var(--accent-text);
}
.palette-search input {
  flex: 1;
  min-width: 0;
  background: none;
  color: var(--paper);
  border: 0;
  outline: none;
  font-size: 16px;
}
.palette-search input::placeholder {
  color: var(--muted);
}
#command-list {
  padding: 8px;
  overflow: auto;
  max-height: 50dvh;
}
.command {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  text-align: left;
  padding: 13px 15px;
  border-radius: 8px;
  font-size: 13px;
  color: var(--soft);
}
.command[aria-selected="true"] {
  background: var(--yellow);
  color: var(--on-accent);
}
.command kbd {
  opacity: 0.6;
  font-size: 10px;
}
.command .command-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.palette footer {
  padding: 12px 22px;
  border-top: 1px solid var(--line);
  font:
    10px Consolas,
    monospace;
  color: var(--accent-text);
}
.palette footer span {
  color: var(--muted);
  margin: 0 15px 0 5px;
}
.files-panel {
  padding: 22px;
}
.files-panel header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 15px;
}
.files-panel h2 {
  font-size: 20px;
  margin: 0;
}
#file-list {
  max-height: 60dvh;
  overflow: auto;
}
#file-list > p {
  color: var(--muted);
  font-size: 13px;
}
.login {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px;
  background: repeating-linear-gradient(
    -45deg,
    #252722 0,
    #252722 2px,
    #202120 2px,
    #202120 10px
  );
}
.login-card {
  width: 320px;
  max-width: 100%;
  padding: 34px;
  border-radius: 22px;
  border: 1px solid var(--line);
  background: var(--ink);
  box-shadow: 10px 10px 0 #121412;
}
.login .wordmark {
  font-size: 65px;
  margin-bottom: 35px;
}
.login label {
  display: block;
  font-size: 12px;
  color: var(--muted);
}
.login input {
  display: block;
  margin: 10px 0 18px;
  width: 100%;
  height: 45px;
  background: var(--panel);
  border: 1px solid #68695a;
  border-radius: 6px;
  color: var(--paper);
  padding: 10px;
}
.primary {
  background: var(--yellow);
  color: var(--on-accent);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 17px;
  font-weight: 750;
  border-radius: 8px;
  box-shadow: 0 3px 0 #aa8a1e;
  width: 100%;
  font-size: 13px;
}
.primary span {
  font-size: 22px;
}
.login-card > p {
  font-size: 12px;
  color: var(--error);
  line-height: 1.6;
  margin-bottom: 0;
}
.drop {
  position: fixed;
  inset: 18px;
  border: 3px dashed var(--yellow);
  border-radius: 22px;
  background: #202120ed;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  font-size: 30px;
  pointer-events: none;
}
.drop span {
  font-size: 12px;
  color: var(--muted);
  margin-top: 12px;
}
@keyframes rotate {
  to {
    transform: rotate(360deg);
  }
}
@media (max-width: 700px) {
  .wordmark {
    font-size: 29px;
    letter-spacing: -2px;
    gap: 6px;
  }
  .wordmark span {
    font-size: 19px;
  }

  .icon {
    width: 30px;
    height: 34px;
  }

  .icon svg {
    width: 16px;
    height: 16px;
  }

  .frequency {
    width: 181px;
    height: 142px;
    border-radius: 30px;
    margin-bottom: 0;
    padding: 16px 20px;
  }
  .eyes {
    gap: 20px;
    padding: 12px 0 18px;
  }
  .eyes i {
    width: 36px;
    height: 37px;
  }

  .frequency-bars {
    font-size: 7px;
  }

  .compose-dock {
    padding: 12px 15px max(16px, env(safe-area-inset-bottom));
  }

  .messages {
    padding: 24px 20px;
  }
  .message {
    max-width: 95%;
  }
  .message.user {
    max-width: 90%;
  }
  .call-panel {
    width: calc(100% - 30px);
    margin-top: 12px;
    gap: 10px;
    padding: 10px 12px;
  }
  .call-panel p {
    max-width: 170px;
  }
  .voice-orb {
    width: 27px;
    font-size: 27px;
  }
  .palette {
    margin-top: 10dvh;
  }
  .command {
    font-size: 12px;
  }
  .main::before {
    top: 0;
  }
}
@media (max-height: 620px) {
  .frequency {
    width: 130px;
    height: 98px;
    border-radius: 23px;
    padding: 8px 16px;
    margin-bottom: 0;
  }
  .frequency-top {
    font-size: 10px;
  }
  .eyes {
    padding: 9px 0 13px;
    gap: 14px;
  }
  .eyes i {
    width: 28px;
    height: 29px;
    border-radius: 9px;
  }

  .frequency-bars {
    font-size: 5px;
  }

  .welcome {
    padding: 12px 0 22px;
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* Xixi is a small idle character: breath, glance, blink, then the occasional wink. */
.frequency {
  animation: xixi-float 5.6s ease-in-out infinite;
  transform-origin: 50% 70%;
}
.eyes {
  animation: xixi-look 13.6s ease-in-out infinite;
}
.eyes i {
  transform-origin: center;
  animation: xixi-blink 6.8s ease-in-out infinite;
}
.eyes i:last-child {
  animation-name: xixi-wink;
  animation-duration: 13.6s;
}
.frequency-top span {
  animation: xixi-spark 13.6s ease-in-out infinite;
}
.frequency-bars {
  animation: xixi-breathe 2.8s ease-in-out infinite;
}
.composer.offline {
  border-color: var(--orange);
}
.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
@keyframes xixi-float {
  0%,
  100% {
    transform: translateY(0) rotate(-7deg);
  }
  50% {
    transform: translateY(-9px) rotate(-3deg);
  }
}
@keyframes xixi-look {
  0%,
  20%,
  42%,
  72%,
  100% {
    transform: translateX(0);
  }
  25%,
  36% {
    transform: translateX(5px);
  }
  78%,
  88% {
    transform: translateX(-4px);
  }
}
@keyframes xixi-blink {
  0%,
  38%,
  42%,
  46%,
  50%,
  100% {
    transform: skew(-12deg) scaleY(1);
  }
  40%,
  48% {
    transform: skew(-12deg) scaleY(0.08);
  }
}
@keyframes xixi-wink {
  0%,
  19%,
  21%,
  23%,
  25%,
  69%,
  71%,
  73%,
  75%,
  87%,
  94%,
  100% {
    transform: skew(-12deg) scaleY(1);
  }
  20%,
  24%,
  70%,
  74%,
  89%,
  92% {
    transform: skew(-12deg) scaleY(0.08);
  }
}
@keyframes xixi-spark {
  0%,
  80%,
  100% {
    transform: rotate(0);
  }
  90% {
    transform: rotate(90deg);
  }
}
@keyframes xixi-breathe {
  0%,
  100% {
    opacity: 0.45;
  }
  50% {
    opacity: 1;
  }
}

.send {
  display: grid;
  place-items: center;
}
.send svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
}
.send.recording {
  background: #e46e3f;
}
.dictation-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: 12px;
  color: var(--muted);
  padding-top: 12px;
}
.dictation-status button {
  font-size: 22px;
}

/* The companion steps aside when the conversation begins. */
.welcome {
  transition:
    transform 0.7s ease,
    left 0.7s ease,
    top 0.7s ease;
  pointer-events: auto;
}
.has-conversation .welcome {
  position: absolute;
  left: 24px;
  top: 22%;
  margin: 0;
  padding: 0;
  transform: scale(0.42);
  transform-origin: top left;
  z-index: 1;
}
.has-conversation .messages {
  display: block;
  padding-left: max(140px, calc((100% - 820px) / 2));
}
.welcome[data-mood="active"] .frequency,
.welcome[data-mood="thinking"] .frequency {
  animation-duration: 2s;
}
.welcome[data-mood="speaking"] .frequency {
  animation: xixi-talk 1s ease-in-out infinite;
}
.welcome[data-mood="listening"] .frequency {
  animation-duration: 3s;
}
.welcome[data-mood="resting"] .frequency {
  animation-duration: 9s;
}
.welcome[data-mood="resting"] .eyes i {
  animation: none;
  transform: skew(-12deg) scaleY(0.18);
}
.welcome[data-mood="resting"] .eyes {
  animation: none;
}
@keyframes xixi-talk {
  0%,
  100% {
    transform: rotate(-5deg) translateY(0);
  }
  50% {
    transform: rotate(-2deg) translateY(-5px);
  }
}
.activity-card {
  border: 1px solid #61674d;
  border-radius: 14px;
  background: var(--card);
  padding: 17px 19px;
  margin: 12px 0;
  min-width: 0;
}
.activity-card header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  font:
    10px Consolas,
    monospace;
  margin-bottom: 13px;
}
.activity-card > strong {
  display: block;
  font-size: 16px;
  line-height: 1.35;
  color: var(--paper);
}
.activity-card > p {
  font-size: 12px;
  line-height: 1.6;
  color: var(--soft);
  white-space: pre-wrap;
}
.card-status {
  color: var(--accent-text);
  white-space: nowrap;
}
.activity-card[data-status="running"] .card-status::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--yellow);
  margin-right: 5px;
  animation: xixi-breathe 1s infinite;
}
.activity-card[data-status="failed"] .card-status {
  color: var(--error);
}
.card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.card-actions:empty {
  display: none;
}
.card-actions a,
.card-actions button {
  border: 1px solid #757d5a;
  border-radius: 7px;
  padding: 7px 11px;
  font-size: 12px;
  text-decoration: none;
  line-height: 1.4;
}
.card-actions button:not(:disabled) {
  background: var(--yellow);
  color: var(--on-accent);
}
.card-confirm {
  border-left: 2px solid var(--orange);
  padding-left: 12px;
}
.artifact-file {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--file);
  border: 1px solid #505645;
  border-radius: 10px;
  padding: 8px 12px;
  margin: 8px 0;
}
.artifact-file .file-link {
  flex: 1;
  border: 0;
  padding: 4px 0;
  margin: 0;
  min-width: 0;
}
.file-type {
  font:
    9px Consolas,
    monospace;
  color: var(--accent-text);
  min-width: 28px;
}
.reuse-file {
  font-size: 21px;
}
.call-panel {
  margin: 12px 0;
  width: min(calc(100% - 40px), 800px);
}
.call-waves {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 40px;
  --level: 0;
}
.call-waves i {
  width: 3px;
  height: calc(5px + var(--level) * 30px);
  background: var(--yellow);
  border-radius: 2px;
  transition: height 0.08s;
}
.call-waves i:nth-child(2n) {
  height: calc(4px + var(--level) * 19px);
  animation-delay: -0.3s !important;
}
.call-waves i:nth-child(3n) {
  height: calc(6px + var(--level) * 25px);
  animation-delay: -0.6s !important;
}
.call-panel[data-mode="speaking"] .call-waves i,
.call-panel[data-mode="thinking"] .call-waves i,
.call-panel[data-mode="connecting"] .call-waves i {
  height: 24px;
  animation: call-wave 0.9s ease-in-out infinite alternate;
}
.call-panel[data-mode="muted"] .call-waves i {
  height: 4px;
  opacity: 0.35;
}
@keyframes call-wave {
  from {
    transform: scaleY(0.2);
  }
  to {
    transform: scaleY(1);
  }
}
.live-transcript {
  width: min(calc(100% - 50px), 780px);
  align-self: center;
  color: var(--muted);
  font-size: 13px;
  padding: 8px 15px;
  border-left: 2px solid var(--yellow);
}
.live-transcript p {
  margin: 4px 0;
}
#file-list img,
#file-list video {
  max-width: 100%;
  max-height: 220px;
  border-radius: 10px;
}
#file-list audio {
  max-width: 100%;
}
@media (max-width: 700px) {
  .has-conversation .welcome {
    left: 9px;
    top: 19%;
    transform: scale(0.25);
  }
  .has-conversation .messages {
    padding-left: 68px;
    padding-right: 15px;
  }
  .activity-card {
    padding: 13px 12px;
  }
  .activity-card > strong {
    font-size: 14px;
  }
  .artifact-file {
    gap: 7px;
    padding: 8px;
  }
  .artifact-file .file-link {
    display: block;
  }
  .artifact-file .file-link small {
    display: block;
    margin-top: 4px;
  }
  .call-waves {
    gap: 2px;
  }
  .call-panel {
    width: calc(100% - 24px);
  }
}

/* Keep the input pinned while the companion travels between center and rail. */
.messages:empty {
  display: block;
}
.welcome {
  position: absolute;
  left: 50%;
  top: 42%;
  margin: 0;
  padding: 0;
  transform: translate(-50%, -50%);
}
.has-conversation .welcome {
  transform: translate(0, 0) scale(0.42);
}
.compose-dock .call-panel {
  width: 100%;
  margin: 0 0 12px;
}
@media (max-width: 700px) {
  .has-conversation .welcome {
    transform: translate(0, 0) scale(0.25);
  }
}

/* Xixi is the menu control; its character animation stays inside the button. */
.welcome {
  border: 0;
  background: none;
  cursor: pointer;
}
.welcome:hover:not(:disabled) {
  background: none;
}
.welcome:active:not(:disabled) {
  transform: translate(-50%, -50%);
}
.has-conversation .welcome:active:not(:disabled) {
  transform: scale(0.42);
}
.welcome:focus-visible {
  outline: 3px solid var(--accent-text);
  outline-offset: 10px;
  border-radius: 18px;
}
#panel-search {
  width: 100%;
  padding: 12px 0;
  margin-bottom: 12px;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line);
  color: var(--paper);
  font-size: 16px;
}
.panel-row {
  padding: 17px 0;
  border-bottom: 1px solid var(--line);
}
.panel-row > strong {
  font-size: 15px;
}
.panel-row p {
  font-size: 12px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.panel-action {
  display: inline-block;
  padding: 10px 14px;
  margin: 8px 8px 0 0;
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--accent-text);
  font-size: 12px;
  text-decoration: none;
}
.vault-request {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.vault-request input {
  min-width: 150px;
  flex: 1;
  background: var(--panel);
  color: var(--paper);
  border: 1px solid var(--line);
  padding: 12px;
  border-radius: 9px;
}
.panel-row img,
.panel-row video {
  max-width: 100%;
  max-height: 220px;
  border-radius: 8px;
}
.panel-row audio {
  max-width: 100%;
}
@media (max-width: 700px) {
  .palette,
  .files-panel {
    margin: auto 0 0;
    width: 100%;
    max-width: none;
    max-height: 85dvh;
    border-radius: 24px 24px 0 0;
    border-bottom: 0;
    padding-bottom: max(16px, env(safe-area-inset-bottom));
  }
  .palette::before,
  .files-panel::before {
    content: "";
    display: block;
    width: 34px;
    height: 4px;
    background: var(--line);
    border-radius: 3px;
    margin: 10px auto 0;
  }
  .files-panel::before {
    margin: -10px auto 20px;
  }
  .palette footer {
    display: none;
  }
  #command-list {
    max-height: 60dvh;
  }
  .command {
    min-height: 46px;
    font-size: 14px;
  }
  .has-conversation .welcome:active:not(:disabled) {
    transform: scale(0.25);
  }
}
@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;
    --ink: #f3f3eb;
    --panel: #e8e9de;
    --line: #c8ccba;
    --paper: #25281e;
    --muted: #626855;
    --accent-text: #786014;
    --orange: #a74124;
    --green: #426727;
    --glow: #e6e8d2;
    --raised: #fafbf4;
    --message-surface: #e8ebdc;
    --dialog: #f8f9f0;
    --card: #edf0e2;
    --file: #f9fbf2;
    --code: #e2e5d8;
    --soft: #515b43;
    --error: #a13d22;
    --shadow: #d4d8c7;
    --hover: #20212008;
  }
  .frequency {
    color: var(--on-accent);
    box-shadow: 9px 10px 0 #c7cbbb;
  }
  .eyes i,
  .eyes::after {
    background: var(--on-accent);
  }
  .composer,
  .message.user,
  .call-panel,
  .activity-card,
  .artifact-file,
  .card-actions a,
  .card-actions button,
  dialog {
    border-color: var(--line);
  }
  dialog::backdrop {
    background: #38412844;
  }
  .drop {
    background: #f3f3ebed;
  }
  .login {
    background: repeating-linear-gradient(
      -45deg,
      #ebeddf 0,
      #ebeddf 2px,
      #f3f3eb 2px,
      #f3f3eb 10px
    );
  }
  .login-card {
    box-shadow: 10px 10px 0 #d4d8c7;
  }
  .danger {
    color: #fff;
  }
}
.panel-tabs {
  display: flex;
  gap: 8px;
  position: sticky;
  top: 0;
  background: var(--dialog);
  padding-bottom: 12px;
}
.panel-tabs [aria-pressed="true"] {
  color: var(--on-accent);
  background: var(--yellow);
}
.panel-row details {
  font-size: 12px;
  margin: 12px 0;
}
.panel-row summary {
  color: var(--muted);
  cursor: pointer;
}
.panel-row input,
.peer-editor input,
.peer-editor textarea,
.peer-editor select,
#file-list > textarea {
  width: 100%;
  background: var(--panel);
  color: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  font: inherit;
}
.peer-editor label {
  display: block;
  margin: 16px 0;
  font-size: 13px;
}
.peer-editor input,
.peer-editor textarea,
.peer-editor select {
  display: block;
  margin-top: 8px;
}
.peer-editor p,
#file-list > p,
.panel-row details p {
  font-size: 12px;
  line-height: 1.6;
  color: var(--muted);
  overflow-wrap: anywhere;
}
@media (prefers-color-scheme: light) { .frequency-top i { background:var(--on-accent); } }
/* Xixi's control surfaces: stamped typography, real app identities, tactile controls. */
.ph-icon {display:inline-flex;align-items:center;justify-content:center;flex:none;width:22px;height:22px;vertical-align:middle}
.ph-icon svg {width:100%;height:100%;fill:currentColor;stroke:none}
.send .ph-icon svg,.composer-call .ph-icon svg {fill:currentColor;stroke:none}
h1,h2,h3,.connector-heading strong,.contact-heading strong,.command-title {font-family:'Chakra Petch',sans-serif;font-weight:600}
.command .ph-icon {margin-right:12px;opacity:.8;width:20px;height:20px}
.command-title {flex:1}
.files-panel {width:min(820px,calc(100vw - 48px));max-width:820px;padding:28px;border-radius:22px}
.files-panel h2 {font-size:28px;letter-spacing:-.8px}
#file-list {max-height:65dvh;padding:0 4px 4px 0;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
#panel-search {background:var(--ink);border:1px solid var(--line);border-radius:12px;padding:13px 16px;margin:0 0 20px}
.panel-tabs {padding:0 0 20px;gap:6px}
.panel-tabs button {margin:0;font-family:'Chakra Petch',sans-serif;font-size:14px;border-radius:20px;padding:9px 22px}
.connector-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:start}
.connector-tile {padding:20px;border:1px solid var(--line);border-radius:16px;background:var(--card);min-width:0}
.connector-heading {display:flex;align-items:center;gap:13px}
.connector-heading strong {font-size:20px;letter-spacing:-.4px;display:block}
.connector-category {display:block;font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:1px;margin-top:3px}
.connector-logo {display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--line);border-radius:12px;background:#fff;color:#202120;flex:none;overflow:hidden}
.connector-logo img {width:28px;height:28px;object-fit:contain;max-height:none}
.panel-row .connector-description {font-size:14px;line-height:1.45;color:var(--soft);margin:16px 0 12px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.connector-meta {display:flex;flex-wrap:wrap;gap:6px;margin-bottom:18px;font-size:11px;color:var(--muted)}
.connector-meta span {border:1px solid var(--line);border-radius:5px;padding:3px 6px}
.connector-account {display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 0;border-top:1px solid var(--line)}
.connector-account strong {font-size:13px}
.connection-status {display:block;font-size:12px;color:var(--muted);margin-top:5px}
.connection-status.is-live {color:var(--green)}
.connection-status.is-live::before {content:'';width:5px;height:5px;border-radius:50%;display:inline-block;margin-right:5px;background:currentColor}
.account-toggle {font-size:0;width:36px;height:22px;min-width:36px;border-radius:20px;padding:3px;margin:0;color:var(--muted);background:var(--line);border:0}
.account-toggle::after {content:'';display:block;width:16px;height:16px;border-radius:50%;background:var(--paper);transition:transform .15s}
.account-toggle[aria-checked=true] {background:var(--yellow)}
.account-toggle[aria-checked=true]::after {transform:translateX(14px);background:var(--on-accent)}
.panel-action {font-size:13px;font-weight:600;border-radius:8px;padding:10px 13px}
.connector-tile > .panel-action:last-child {background:var(--yellow);border-color:var(--yellow);color:var(--on-accent)}
.connector-tile details {border-top:1px solid var(--line);padding-top:12px;color:var(--soft);font-size:13px}
.connector-tile summary {cursor:pointer}
.contacts-toolbar {display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px}
.contacts-toolbar .panel-action {margin:0}
.contacts-toolbar .panel-action:first-child {background:var(--yellow);color:var(--on-accent);border-color:var(--yellow)}
.section-label {font-family:Barlow,sans-serif;text-transform:uppercase;letter-spacing:1.5px;font-size:11px;color:var(--muted);margin:24px 0 12px}
.contact-tile {border:1px solid var(--line);background:var(--card);border-radius:15px;margin:12px 0;padding:20px}
.contact-heading {display:flex;align-items:center;gap:12px;font-size:20px}
.contact-heading>.ph-icon {width:38px;height:38px;border-radius:10px;background:var(--yellow);color:var(--on-accent);padding:8px}
.contact-tile>p {color:var(--soft)}
.empty-note {padding:32px 24px;border:1px dashed var(--line);border-radius:15px;text-align:center;line-height:1.6}
.peer-editor {gap:20px}
.peer-editor label {color:var(--soft);font-size:13px}
select {font:inherit;color:var(--paper);background:var(--ink)}
.contact-chat {display:flex;flex-direction:column;height:55dvh;min-height:250px}
.contact-messages {flex:1;overflow:auto;padding:20px 0;scrollbar-width:thin}
.contact-message {padding:16px 20px;margin:10px 0;border-radius:14px;background:var(--card);max-width:92%}
.contact-message.user {margin-left:auto;background:var(--message-surface)}
.contact-message>span {font-family:'Chakra Petch',sans-serif;font-size:11px;color:var(--muted)}
.contact-message>p {white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.6;margin:8px 0 0;font-size:16px}
.contact-state {font-size:12px;margin:8px 0}
.contact-composer {flex:none;position:relative;min-height:58px}
.contact-composer textarea {width:100%;resize:none;color:var(--paper);background:none;border:0;outline:none;padding:12px;max-height:180px}
.contact-empty {text-align:center;margin:8vh auto;max-width:320px;color:var(--muted)}
.contact-empty .ph-icon {color:var(--accent-text);width:34px;height:34px}
.contact-empty h2 {color:var(--paper);font-size:24px}
.guest-main {height:100dvh;padding:32px 24px 18px;max-width:780px;margin:auto}
.guest-main #guest-chat {height:100%}
.guest-main .contact-chat {height:100%;padding-bottom:env(safe-area-inset-bottom)}
.guest-main .contact-messages {padding-top:60px}
.guest-main .guest-mascot {position:fixed;top:30px;left:30px;transform:scale(.34);transform-origin:top left;right:auto;bottom:auto;z-index:2}
#guest-info {max-width:460px}
#guest-info p {font-size:14px;line-height:1.6;color:var(--soft)}
#guest-info input {width:100%;padding:12px;margin-top:8px;background:var(--ink);color:var(--paper);border:1px solid var(--line);border-radius:8px}
#guest-info details {margin-top:24px}
#guest-error {position:fixed;bottom:24px;color:var(--error);max-width:90vw}
@media(prefers-color-scheme:light) {.connection-status.is-live {color:#386239}}
@media(max-width:600px) {
 .files-panel {width:100%;max-width:100%;padding:24px 20px;border-radius:24px 24px 0 0;max-height:90dvh}
 .files-panel h2 {font-size:25px}
 .connector-grid {grid-template-columns:1fr}
 .connector-tile {padding:18px}
 #file-list {max-height:64dvh}
 .guest-main {padding:12px 16px}
 .guest-main .guest-mascot {top:12px;left:16px;transform:scale(.27)}
 .contact-message {padding:14px 16px}
}
@media(prefers-reduced-motion:reduce){.account-toggle::after{transition:none}}

.guest-disclosure {position:fixed;bottom:6px;left:0;right:0;margin:0;text-align:center;font-size:10px;color:var(--muted);pointer-events:none}
.guest-main .contact-chat {padding-bottom:20px}

.panel-action.account-toggle {font-size:0;line-height:0;padding:3px}

.activity-card header>span:first-child {display:inline-flex;align-items:center;gap:7px}
.activity-card header .ph-icon {width:15px;height:15px}
[data-droid-color=yellow]{--droid-color:#f1ca43}
[data-droid-color=coral]{--droid-color:#ef8d78}
[data-droid-color=mint]{--droid-color:#a9dba1}
[data-droid-color=blue]{--droid-color:#87b9ed}
[data-droid-color=lavender]{--droid-color:#c0a9e8}
/* Hub: centered arrival, a quiet account header and a shelf of droids. */
.hub-page {min-height:100dvh;background:var(--ink)}
#hub {max-width:1120px;margin:0 auto;padding:28px 40px 64px}
.hub-header {display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:48px}
.hub-brand {font-family:'Chakra Petch',sans-serif;font-size:24px;font-weight:600;letter-spacing:-1px;display:inline-flex;gap:10px;align-items:center;text-decoration:none}
.hub-brand span {color:var(--yellow);font-size:28px}
#hub-navigation {display:flex;align-items:center;gap:8px}
#hub-navigation .panel-action {margin:0;min-height:44px}
#hub-navigation button:last-child {border-color:transparent;color:var(--muted)}
.hub-loading {text-align:center;margin:25vh auto;color:var(--muted)}
.auth-surface {width:min(100%,440px);margin:clamp(32px,7vh,88px) auto 0;text-align:center;background:var(--card);border:1px solid var(--line);border-radius:28px;padding:36px 32px 28px}
.auth-mascot {display:flex;justify-content:center;margin-bottom:24px}
.auth-mascot .droid-avatar {width:84px;height:76px;border-radius:20px;transform:rotate(-6deg);margin:0}
.auth-mascot .droid-avatar .eyes {gap:13px}
.auth-mascot .droid-avatar .eyes i {width:12px;height:19px}
.auth-mascot .droid-antenna {font-size:14px;top:5px;right:10px}
.auth-surface h1 {font-size:30px;line-height:1.2;letter-spacing:-.8px;margin:0 0 12px}
.auth-intro {font-size:17px;line-height:1.5;color:var(--soft);margin:0 0 28px}
.auth-surface .primary {justify-content:center;min-height:48px;width:100%;border-radius:12px;font-weight:600;padding:12px 18px}
.auth-device-hint {font-size:13px;line-height:1.5;color:var(--muted);max-width:280px;margin:12px auto 24px}
.auth-key {border-top:1px solid var(--line);border-bottom:1px solid var(--line);text-align:left;padding:16px 0}
.auth-key summary {cursor:pointer;color:var(--soft);font-size:14px;min-height:24px;list-style:none;display:flex;justify-content:space-between;align-items:center}
.auth-key summary::-webkit-details-marker {display:none}
.auth-key summary::after {content:'+';font-size:20px;line-height:1}
.auth-key[open] summary::after {content:'−'}
.auth-key form {display:grid;gap:10px;padding:18px 0 2px}
.auth-key label {font-size:13px;color:var(--soft)}
.auth-key input {width:100%;min-width:0;padding:14px;background:var(--ink);border:1px solid var(--line);color:var(--paper);border-radius:10px}
.auth-create {display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;font-size:14px;margin-top:22px;color:var(--muted)}
.text-action {color:var(--paper);text-decoration:underline;text-underline-offset:4px;padding:8px 2px}
.auth-footnote {font-size:12px;line-height:1.5;color:var(--muted);margin:10px auto 0;max-width:300px}
#hub-error {max-width:520px;margin:24px auto;text-align:center;line-height:1.5;overflow-wrap:anywhere}
#hub-error .panel-action {display:block;margin:12px auto}
.hub-overview {text-align:center;margin:64px auto 40px;max-width:520px}
.hub-overview h1 {font-size:clamp(32px,5vw,44px);letter-spacing:-1px;margin:0 0 12px;line-height:1.15}
.hub-overview p {line-height:1.5;font-size:17px;color:var(--muted);margin:0 0 24px}
.hub-new {width:auto;display:inline-flex;justify-content:center;align-items:center;gap:8px;min-height:46px;padding:12px 20px;border-radius:12px;font-weight:600}
.droid-grid {display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),320px));justify-content:center;gap:24px}
.droid-card {min-width:0;display:flex;flex-direction:column;text-align:center;background:var(--card);border:1px solid var(--line);border-radius:24px;overflow:hidden}
.droid-card-stage {display:grid;place-items:center;min-height:180px;border-bottom:1px solid var(--line);background:var(--panel)}
.droid-card-stage .droid-avatar {transform:rotate(-4deg)}
.droid-card:nth-child(even) .droid-card-stage .droid-avatar {transform:rotate(4deg)}
.droid-card-info {padding:24px 24px 0;flex:1}
.droid-card h2 {font-size:25px;line-height:1.2;margin:0 0 10px;overflow-wrap:anywhere}
.droid-status {display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--muted)}
.droid-status::before {content:'';width:6px;height:6px;border-radius:50%;background:var(--muted)}
.droid-status[data-ready=true]::before {background:var(--green)}
.droid-card p {font-size:15px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere;color:var(--soft);margin:16px 0 0;min-height:45px}
.droid-card-actions {display:flex;align-items:center;gap:10px;padding:24px}
.droid-card-actions button {margin:0;min-height:44px;flex:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:10px;padding:10px;font-size:14px}
.droid-card-actions .ph-icon {width:18px;height:18px}
.hub-empty {display:flex;align-items:center;flex-direction:column;text-align:center;margin:0 auto;padding:32px 20px 40px;max-width:520px;border:1px dashed var(--line);border-radius:24px}
.hub-empty h2 {margin:20px 0 0;font-size:24px}
.hub-empty p {color:var(--muted);line-height:1.5;max-width:290px;margin:12px 0 24px}
.droid-avatar{position:relative;width:120px;height:110px;border-radius:27px 27px 32px 32px;background:var(--droid-color,var(--yellow));box-shadow:inset 0 -9px 0 #0002;display:grid;place-items:center;margin:10px 0}
.droid-avatar .eyes{position:static;display:flex;gap:18px;transform:none;margin:15px 0 0}
.droid-avatar .eyes i{position:static;background:#202120;width:17px;height:27px;border-radius:8px;animation:blink 7s infinite}
.droid-antenna{position:absolute;right:16px;top:9px;font-size:20px;color:#202120}
[data-droid-eyes=sleepy] .eyes i{height:10px;border-radius:3px}
[data-droid-eyes=visor] .eyes{gap:0}
[data-droid-eyes=visor] .eyes i{width:28px;height:14px;border-radius:3px}
.droid-preview{display:grid;place-items:center;padding:10px 0 25px}
.droid-swatches{display:flex;gap:10px;flex-wrap:wrap}
.droid-swatches button{background:var(--droid-color);width:38px;height:38px;border-radius:50%;font-size:0;padding:0;margin:0;border:3px solid transparent}
.droid-swatches [aria-pressed=true]{outline:2px solid var(--paper);outline-offset:3px}
#hub-dialog-content{max-height:70dvh;overflow:auto}
#hub-dialog-content>textarea{width:100%;background:var(--ink);color:var(--paper);border:1px solid var(--line);padding:14px;resize:vertical}
@media(max-width:600px) {
 #hub {padding:20px 20px 40px}
 .hub-header {gap:12px}
 .hub-brand {font-size:22px;gap:6px}
 #hub-navigation {gap:2px}
 #hub-navigation .panel-action {font-size:13px;padding:10px}
 .auth-surface {margin:32px auto 0;padding:28px 22px 24px;border-radius:24px}
 .auth-surface h1 {font-size:27px}
 .hub-overview {margin:40px auto 28px}
 .droid-grid {grid-template-columns:minmax(0,360px);gap:20px}
 .droid-card-stage {min-height:160px}
 #hub-dialog {margin:auto;max-height:90dvh;border-radius:24px;width:calc(100% - 24px)}
}
@media(prefers-reduced-motion:reduce){.droid-avatar .eyes i{animation:none}}

.welcome[data-droid-color] .frequency {background:var(--droid-color,var(--yellow))}

/* Native select semantics, consistent closed controls and progressive picker styling.
   Unsupported browsers retain their accessible platform popup. */
select {
 min-height:46px;cursor:pointer;appearance:none;
 background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
 background-size:5px 5px,5px 5px;background-repeat:no-repeat;
 background-position:calc(100% - 19px) center,calc(100% - 14px) center;
}
.peer-editor select {padding-right:42px;background-color:var(--panel)}
select:focus-visible,summary:focus-visible {outline:2px solid var(--yellow);outline-offset:4px}
select:disabled {opacity:.5;cursor:default}
@supports (appearance:base-select) {
 select,select::picker(select) {appearance:base-select}
 select {background-image:none}
 select::picker-icon {color:var(--muted);transition:rotate .15s}
 select:open::picker-icon {rotate:180deg}
 select::picker(select) {background:var(--dialog);color:var(--paper);border:1px solid var(--line);border-radius:12px;padding:6px;margin-block:6px;box-shadow:0 10px 24px #0003}
 select option {padding:10px 12px;min-height:42px;border-radius:7px;gap:10px}
 select option:hover,select option:focus {background:var(--raised)}
 select option:checked {background:var(--raised);font-weight:600}
 select option::checkmark {color:var(--accent-text)}
 .peer-editor select {padding-right:14px;display:flex;align-items:center;justify-content:space-between}
}
@media(prefers-reduced-motion:reduce) {select::picker-icon {transition:none}}

#hub-dialog[open] {display:flex;flex-direction:column;max-height:90dvh}
#hub-dialog>header {flex-shrink:0}
#hub-dialog-content {min-height:0;max-height:none;overflow:auto;padding:4px}
#hub-dialog-error {flex-shrink:0;margin:12px 0 0}

#hub-dialog {width:min(560px,calc(100vw - 32px));max-width:560px}
#hub-dialog .droid-preview {padding:4px 0 12px}
#hub-dialog .droid-preview .droid-avatar {width:96px;height:88px;margin:0}
#hub-dialog .peer-editor>.primary {justify-content:center;min-height:46px;border-radius:10px}
.droid-traits {display:grid;grid-template-columns:1fr 1fr;gap:16px}
.droid-traits label {min-width:0}

.droid-swatches button:hover:not(:disabled) {background-color:var(--droid-color)}

/* Proxima: substantial controls, quiet surroundings, one expressive companion. */
h1,h2,h3,.hub-brand,.command-title,.connector-heading strong {font-weight:700}
button,.panel-action,.card-actions a,.file-name {font-weight:700}
.primary {box-shadow:0 3px 0 #9d812b;min-height:46px}
.primary:active:not(:disabled) {box-shadow:0 1px 0 #9d812b}
.ph-icon {width:24px;height:24px;min-width:24px;flex:0 0 24px}
.ph-icon svg {display:block;min-width:100%;min-height:100%}
.command .ph-icon {width:38px;height:38px;flex-basis:38px;padding:8px;border-radius:12px;background:var(--raised);opacity:1}
.icon {width:44px;height:44px;border-radius:13px;background:var(--raised);color:var(--paper)}
.card-actions {display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.card-actions a,.card-actions button {display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:12px 16px;margin:0}
.card-actions>:first-child {background:var(--yellow);color:var(--on-accent);border-color:var(--yellow)}
.file-link {border:0;padding:8px;margin:0;flex:1;min-width:0;gap:12px;font-size:15px}
.file-name {min-width:0;flex:1;overflow-wrap:anywhere;line-height:1.4}
.file-link small {font:600 12px Barlow,sans-serif;flex:none}
.file-link .ph-icon {color:var(--paper);width:36px;height:36px;flex-basis:36px;padding:7px;border-radius:10px;background:var(--raised)}
.artifact-file {display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:16px;min-width:0}
.file-type {flex:none;min-width:44px;min-height:44px;display:grid;place-items:center;font:800 11px Barlow,sans-serif;border-radius:12px;background:var(--yellow);color:var(--on-accent);letter-spacing:.3px}
.reuse-file {flex:0 0 40px;width:40px;height:40px;display:grid;place-items:center;padding:8px;border-radius:10px}
.attachment-preview {min-width:0;margin:14px 0}
.attachment-preview:empty,.message-card:empty,.message-files:empty {display:none}
.message-files video,.message-files audio {width:100%;max-width:560px}
.working {font-size:15px;font-weight:700;min-height:36px;gap:12px}
.working-label,.contact-state:not(:empty) {background:linear-gradient(105deg,var(--muted) 20%,var(--paper) 42%,var(--accent-text) 50%,var(--muted) 70%);background-size:260% 100%;background-clip:text;color:transparent;animation:working-sheen 2.8s linear infinite}
@keyframes working-sheen {from{background-position:160% 0}to{background-position:-100% 0}}
.working .quiet {font-size:13px;font-weight:700;padding:8px 14px;border-radius:9px;background:var(--raised)}
select {font-weight:600;min-height:48px;border-radius:12px}
select::picker-icon {font-size:20px;line-height:1;flex:none}
.panel-row {padding:20px 0}
.panel-row>strong {display:block;margin-bottom:12px;font-size:17px}
.panel-row>.panel-action {margin:6px 8px 6px 0;min-height:44px}

/* Illustrated enamel shell, inset face and drawn insignia. */
.mascot-art {background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important;display:block!important;position:relative;color:#223b37;animation:none!important;transform:none!important}
.mascot-art::after {display:none}
.mascot-art>svg {display:block;width:100%;height:100%;overflow:visible}
.mascot-art .mascot-body {transform-origin:120px 180px;animation:companion-breathe 6s ease-in-out infinite}
.mascot-gaze {animation:companion-glance 12s ease-in-out infinite}
.mascot-eye {transform-box:fill-box;transform-origin:center;animation:companion-blink 7.4s ease-in-out infinite}
.right-eye {animation-delay:.08s}
.mascot-brow {opacity:.55;transition:transform .3s}
.mascot-emblem {filter:drop-shadow(0 2px 0 #0002)}
.emblem-heart,.emblem-bolt {display:none}
[data-droid-antenna=heart] .emblem-star,[data-droid-antenna=bolt] .emblem-star {display:none}
[data-droid-antenna=heart] .emblem-heart,[data-droid-antenna=bolt] .emblem-bolt {display:block}
[data-droid-eyes=sleepy] .mascot-eye {scale:1 .6}
[data-droid-eyes=visor] .mascot-eye {scale:1.22 .65}
@keyframes companion-breathe {0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-5px) rotate(-1deg)}}
@keyframes companion-glance {0%,25%,55%,100%{transform:translate(0,0)}30%,45%{transform:translate(5px,-2px)}72%,85%{transform:translate(-3px,1px)}}
@keyframes companion-blink {0%,43%,47%,90%,94%,100%{transform:scaleY(1)}45%,92%{transform:scaleY(.08)}}
@keyframes companion-listen {0%,100%{transform:rotate(-5deg)}50%{transform:rotate(2deg) translateY(-3px)}}
@keyframes companion-speak {0%,100%{transform:translateY(0) rotate(-2deg)}35%{transform:translateY(-4px) rotate(1deg)}70%{transform:translateY(-1px) rotate(-3deg)}}
[data-mood=listening] .mascot-body {animation:companion-listen 3s ease-in-out infinite}
[data-mood=listening] .mascot-brow {transform:translateY(-4px);opacity:1}
[data-mood=thinking] .mascot-gaze,[data-mood=active] .mascot-gaze {transform:translate(4px,-4px);animation:none}
[data-mood=thinking] .right-eye,[data-mood=active] .right-eye {scale:1 .72}
[data-mood=speaking] .mascot-body {animation:companion-speak .85s ease-in-out infinite}
[data-mood=speaking] .mascot-smile {stroke-width:5}
[data-mood=resting] .mascot-eye {scale:1 .25;animation:none}
[data-mood=resting] .mascot-gaze {animation:none}

.chat-navigation {display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 28px;flex:none;z-index:2}
.chat-navigation>span {font-family:'Chakra Petch',sans-serif;font-size:17px;font-weight:700;color:var(--soft)}
.back-control {display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:10px 14px;border:1px solid var(--line);border-radius:13px;background:var(--raised);font-size:14px}
.companion-dock {display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;margin:auto;flex-shrink:0}
.companion-dock .welcome {position:static!important;inset:auto!important;transform:none!important;padding:0;margin:0;transition:none;width:260px;height:240px;background:none}
.companion-dock .frequency {width:100%;height:100%;margin:0}
.companion-settings {display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--line);background:var(--raised);border-radius:14px;color:var(--soft)}
.has-conversation .companion-dock {position:absolute;top:106px;left:24px;gap:4px;z-index:2}
.has-conversation .companion-dock .welcome {width:100px;height:96px}
.has-conversation .messages {padding-top:12px}

/* Home is a cast of characters, each with a single destination. */
.hub-overview {max-width:none;display:grid;grid-template-columns:1fr auto;text-align:left;align-items:center;margin:72px 0 36px}
.hub-overview h1 {font-size:42px;margin:0;grid-column:1}
.hub-overview p {font-size:17px;margin:12px 0 0;grid-column:1}
.hub-new {grid-column:2;grid-row:1 / span 2;margin-left:24px}
.droid-grid {grid-template-columns:repeat(auto-fit,minmax(180px,240px));justify-content:start;gap:40px;margin:30px 0}
.droid-choice {padding:18px 8px 22px;display:flex;flex-direction:column;align-items:center;border-radius:24px;min-width:0;text-align:center}
.droid-choice .droid-avatar {width:200px;height:184px;margin:0;transition:translate .2s}
.droid-choice:hover .droid-avatar {translate:0 -6px}
.droid-choice h2 {font-size:23px;margin:16px 0 0;line-height:1.2}
.droid-choice .droid-status {margin-top:8px}
.droid-choice:nth-child(2n) .mascot-body {animation-delay:-2s}
.droid-choice:nth-child(3n) .mascot-gaze {animation-delay:-5s}
.droid-preview .droid-avatar,#hub-dialog .droid-preview .droid-avatar {width:170px;height:156px}

/* Arrival: one illustrated stage, one clear authentication area. */
.auth-surface {display:grid;grid-template-columns:1.2fr 1fr;gap:64px;align-items:center;width:100%;max-width:1080px;margin:70px auto 30px;padding:0;border:0;background:none;border-radius:0;text-align:left}
.landing-story {position:relative;padding:20px 0}
.landing-eyebrow {font-weight:800;color:var(--accent-text);font-size:13px;letter-spacing:.8px}
.auth-surface h1 {font:800 clamp(40px,5vw,62px)/1.04 Barlow,sans-serif;letter-spacing:-1.8px;margin:20px 0}
.landing-description {font-size:18px;line-height:1.6;color:var(--soft);margin:0}
.auth-mascot {justify-content:flex-start;margin:24px 0 0}
.auth-mascot .droid-avatar {width:260px;height:240px;margin:0}
.auth-controls {background:var(--card);border:1px solid var(--line);border-radius:26px;padding:34px;box-shadow:0 6px 0 var(--shadow);text-align:center}
.auth-controls h2 {font-size:25px;line-height:1.2;margin:0 0 14px}
.auth-intro {font-size:16px;line-height:1.5;margin:0 0 28px}
.auth-surface .primary {font-weight:800}
.auth-create .text-action {font-weight:800}
@media(max-width:700px) {
 .auth-surface {grid-template-columns:1fr;gap:20px;margin:28px auto}
 .landing-story {padding:0 100px 0 0}
 .auth-surface h1 {font-size:37px;letter-spacing:-1px;margin:12px 0}
 .landing-description {font-size:15px}
 .landing-eyebrow {font-size:11px}
 .auth-mascot {position:absolute;right:-4px;top:40px;margin:0}
 .auth-mascot .droid-avatar {width:108px;height:100px}
 .auth-controls {padding:26px 22px}
 .hub-overview {margin:40px 0 24px;gap:0}
 .hub-overview h1 {font-size:32px}
 .hub-overview p {font-size:15px;max-width:200px}
 .hub-new {margin-left:10px;padding:10px 12px;font-size:13px}
 .droid-grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 8px}
 .droid-choice .droid-avatar {width:100%;max-width:170px;height:auto;aspect-ratio:240/220}
 .droid-choice h2 {font-size:20px}
 .chat-navigation {padding:12px 16px}
 .has-conversation .companion-dock {top:76px;left:auto;right:12px;gap:0}
 .has-conversation .companion-dock .welcome {width:58px;height:54px}
 .has-conversation .companion-settings {width:40px;height:40px;border-radius:12px}
 .has-conversation .messages {padding:12px 86px 20px 16px}
 .file-link {flex-wrap:wrap;gap:6px;font-size:14px}
 .file-link .file-name {flex-basis:100%}
 .file-link .ph-icon {width:30px;height:30px;flex-basis:30px;padding:5px;margin-left:auto}
 .artifact-file {padding:8px;gap:4px}
 .file-type {min-width:36px;min-height:38px;font-size:10px}
 .reuse-file {width:36px;flex-basis:36px}
}
@media(prefers-reduced-motion:reduce) {
 .mascot-art * {animation:none!important;transition:none!important}
 .working-label,.contact-state:not(:empty) {animation:none;background:none;color:var(--soft)}
 .droid-choice .droid-avatar {transition:none}
}

.droid-grid {justify-content:center}
.composer textarea {font-size:16px;line-height:1.5}
#background-work .attachment::before {display:none}
#background-work .attachment {font-size:13px;font-weight:700}