:root {
  --rail-width: 4.75rem;
  --profile-width: clamp(20rem, 24vw, 23rem);
  --ink: #03050b;
  --panel: rgba(5, 9, 18, 0.92);
  --line: rgba(133, 196, 214, 0.17);
  --line-strong: rgba(132, 223, 242, 0.44);
  --cyan: #8cecff;
  --cyan-soft: rgba(140, 236, 255, 0.68);
  --gold: #d9b965;
  --text: #f1f6f9;
  --muted: #8898a4;
  --cursor-x: 50%;
  --cursor-y: 50%;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  width: 100%;
  min-width: 20rem;
  height: 100%;
  overflow: hidden;
  background: var(--ink);
  color: var(--text);
  font-family: "Space Grotesk", "Segoe UI Variable", "Segoe UI", ui-sans-serif, system-ui, sans-serif;
}

body {
  isolation: isolate;
}

button,
input {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

a {
  color: inherit;
  text-decoration: none;
}

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

button:focus-visible,
a:focus-visible,
input:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}

/* Left social rail */
#socialRail {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 40;
  width: var(--rail-width);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: max(1rem, env(safe-area-inset-top)) 0 max(1rem, env(safe-area-inset-bottom));
  border-right: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(140, 236, 255, 0.035), transparent 22%),
    rgba(2, 5, 11, 0.94);
  box-shadow: 1.2rem 0 4rem rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(20px) saturate(125%);
}

#socialRail::after {
  content: "";
  position: absolute;
  top: 0;
  right: -1px;
  width: 1px;
  height: 22%;
  background: linear-gradient(180deg, var(--cyan), transparent);
  box-shadow: 0 0 1rem rgba(140, 236, 255, 0.46);
}

.rail-mark {
  position: relative;
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  border: 1px solid rgba(140, 236, 255, 0.5);
  color: var(--cyan);
  background: rgba(8, 25, 34, 0.56);
  clip-path: polygon(0.5rem 0, 100% 0, 100% calc(100% - 0.5rem), calc(100% - 0.5rem) 100%, 0 100%, 0 0.5rem);
  transition: color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.rail-mark span {
  font-size: 1rem;
  font-weight: 350;
  letter-spacing: -0.07em;
}

.rail-mark:hover {
  color: #fff;
  background: rgba(22, 93, 109, 0.45);
  box-shadow: 0 0 1.6rem rgba(80, 213, 236, 0.2);
}

.rail-axis {
  width: 1px;
  height: clamp(2.5rem, 9vh, 5.2rem);
  margin: 0.8rem 0;
  background: linear-gradient(transparent, var(--line-strong), transparent);
}

.rail-axis span {
  display: block;
  width: 0.25rem;
  height: 0.25rem;
  margin: 50% 0 0 -0.1rem;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 0.7rem var(--cyan);
  animation: signalPulse 2.8s ease-in-out infinite;
}

.rail-links {
  display: grid;
  gap: 0.62rem;
}

.rail-link {
  position: relative;
  width: 2.65rem;
  height: 2.65rem;
  display: grid;
  place-items: center;
  border: 1px solid transparent;
  color: rgba(188, 205, 214, 0.68);
  transition:
    color 180ms ease,
    border-color 180ms ease,
    background 180ms ease,
    transform 180ms ease;
}

.rail-link::before {
  content: "";
  position: absolute;
  left: -1.08rem;
  width: 2px;
  height: 0;
  background: var(--cyan);
  box-shadow: 0 0 0.7rem var(--cyan);
  transition: height 180ms ease;
}

.rail-link::after,
.rail-mark::after {
  content: attr(data-label);
  position: absolute;
  left: calc(100% + 0.85rem);
  z-index: 50;
  padding: 0.42rem 0.62rem;
  color: rgba(226, 246, 250, 0.92);
  border: 1px solid var(--line);
  background: rgba(2, 7, 15, 0.94);
  box-shadow: 0 0.8rem 2.5rem rgba(0, 0, 0, 0.32);
  font-size: 0.62rem;
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translateX(-0.35rem);
  transition: opacity 160ms ease, transform 160ms ease;
}

.rail-link:hover::after,
.rail-link:focus-visible::after,
.rail-mark:hover::after,
.rail-mark:focus-visible::after {
  opacity: 1;
  transform: translateX(0);
}

.rail-link:hover,
.rail-link:focus-visible {
  color: var(--cyan);
  border-color: rgba(140, 236, 255, 0.25);
  background: rgba(14, 49, 61, 0.32);
  transform: translateX(0.15rem);
}

.rail-link:hover::before,
.rail-link:focus-visible::before {
  height: 1.35rem;
}

.rail-link svg {
  width: 1.12rem;
  height: 1.12rem;
  fill: currentColor;
}

.rail-link-spotify svg {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 2.2;
}

.rail-link-upwork span {
  margin-top: -0.1rem;
  font-family: Arial, sans-serif;
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: -0.12em;
}

.rail-signal {
  display: grid;
  justify-items: center;
  gap: 0.34rem;
  margin-top: auto;
  color: rgba(140, 236, 255, 0.65);
}

.rail-signal span {
  width: 0.38rem;
  height: 0.38rem;
  border-radius: 50%;
  background: #57f2c0;
  box-shadow: 0 0 0.8rem rgba(87, 242, 192, 0.76);
}

.rail-signal b {
  font-size: 0.48rem;
  font-weight: 700;
  letter-spacing: 0.18em;
}

/* Central intelligence stage */
#orbStage {
  --voice-level: 0;
  position: fixed;
  inset: 0 var(--profile-width) 0 var(--rail-width);
  z-index: 1;
  min-width: 0;
  overflow: hidden;
  background: #02040a;
}

#orbStage[data-agent-state="listening"] #thinkingIndicator,
#orbStage[data-agent-state="tool"] #thinkingIndicator,
#orbStage[data-agent-state="speaking"] #thinkingIndicator {
  opacity: 1;
  filter: saturate(1.08) brightness(1.02);
  transform: translate(-50%, -50%) scale(calc(0.985 + var(--voice-level) * 0.085));
}

#orbStage[data-agent-state="listening"] #container canvas {
  filter: saturate(1.45) contrast(1.08) brightness(0.9) hue-rotate(5deg);
  transform: scale(calc(0.99 + var(--voice-level) * 0.012));
}

#orbStage[data-agent-state="speaking"] #container canvas {
  filter: saturate(calc(1.2 + var(--voice-level) * 0.4)) contrast(calc(1.04 + var(--voice-level) * 0.12)) brightness(calc(0.78 + var(--voice-level) * 0.42));
  transform: translate3d(calc(var(--voice-level) * 4px), calc(var(--voice-level) * -3px), 0) scale(calc(0.985 + var(--voice-level) * 0.07));
  transition: filter 65ms linear, transform 55ms linear;
}

#orbStage[data-agent-state="tool"] #container canvas {
  filter: sepia(0.28) saturate(1.55) hue-rotate(340deg) brightness(0.82);
}

#orbStage[data-agent-state="listening"] .cognition-ring-outer {
  animation: cognitionListening 1.25s ease-in-out infinite;
}

#orbStage[data-agent-state="speaking"] .cognition-ring-middle {
  animation: cognitionSpeaking 0.86s ease-in-out infinite alternate;
}

#orbStage[data-agent-state="tool"] .cognition-ring,
#orbStage[data-agent-state="tool"] .cognition-sweep {
  border-color: rgba(217, 185, 101, 0.58);
}

#orbStage[data-agent-state="error"] .stage-readout b {
  color: #fda4af;
}

#orbStage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(circle at var(--cursor-x) var(--cursor-y), rgba(100, 220, 242, 0.07), transparent 22rem),
    linear-gradient(90deg, rgba(0, 0, 0, 0.35), transparent 16%, transparent 84%, rgba(0, 0, 0, 0.28));
  mix-blend-mode: screen;
}

#orbStage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(2, 4, 10, 0.3), transparent 18%, transparent 76%, rgba(2, 4, 10, 0.58));
}

#container {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  outline: none;
}

#container canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
  transition: filter 420ms ease, transform 520ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.stage-grid {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.42;
  background-image:
    linear-gradient(rgba(130, 218, 235, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(130, 218, 235, 0.035) 1px, transparent 1px);
  background-size: 4rem 4rem;
  mask-image: radial-gradient(circle at center, transparent 18%, #000 86%);
}

.stage-corners {
  position: absolute;
  inset: clamp(1rem, 2vw, 1.7rem);
  z-index: 5;
  pointer-events: none;
  border: 1px solid transparent;
  background:
    linear-gradient(var(--line-strong), var(--line-strong)) left top / 3.5rem 1px no-repeat,
    linear-gradient(var(--line-strong), var(--line-strong)) left top / 1px 3.5rem no-repeat,
    linear-gradient(var(--line-strong), var(--line-strong)) right top / 3.5rem 1px no-repeat,
    linear-gradient(var(--line-strong), var(--line-strong)) right top / 1px 3.5rem no-repeat,
    linear-gradient(var(--line-strong), var(--line-strong)) left bottom / 3.5rem 1px no-repeat,
    linear-gradient(var(--line-strong), var(--line-strong)) left bottom / 1px 3.5rem no-repeat,
    linear-gradient(var(--line-strong), var(--line-strong)) right bottom / 3.5rem 1px no-repeat,
    linear-gradient(var(--line-strong), var(--line-strong)) right bottom / 1px 3.5rem no-repeat;
  opacity: 0.42;
}

.stage-header {
  position: absolute;
  top: clamp(1.4rem, 4vh, 2.5rem);
  left: clamp(1.65rem, 4vw, 3.75rem);
  right: clamp(1.65rem, 4vw, 3.75rem);
  z-index: 12;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  pointer-events: none;
}

.stage-kicker {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  color: rgba(164, 192, 202, 0.62);
  font-size: 0.56rem;
  font-weight: 650;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.stage-kicker span {
  width: 0.34rem;
  height: 0.34rem;
  border-radius: 50%;
  background: #57f2c0;
  box-shadow: 0 0 0.8rem rgba(87, 242, 192, 0.72);
}

.stage-name {
  margin-top: 0.28rem;
  font-size: clamp(1rem, 1.6vw, 1.35rem);
  font-weight: 280;
  letter-spacing: 0.22em;
}

.stage-name span {
  margin-left: 0.18rem;
  color: var(--cyan);
  font-size: 0.54em;
  vertical-align: top;
}

.stage-readout {
  display: grid;
  justify-items: end;
  gap: 0.26rem;
  font-size: 0.5rem;
  letter-spacing: 0.2em;
}

.stage-readout span {
  color: rgba(157, 180, 190, 0.52);
}

.stage-readout b {
  color: rgba(140, 236, 255, 0.78);
  font-weight: 650;
}

.stage-index {
  position: absolute;
  top: 50%;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  color: rgba(150, 183, 194, 0.28);
  font-size: 0.44rem;
  letter-spacing: 0.18em;
  writing-mode: vertical-rl;
  pointer-events: none;
}

.stage-index i {
  width: 1px;
  height: 3.2rem;
  background: linear-gradient(transparent, rgba(140, 236, 255, 0.42), transparent);
}

.stage-index-left {
  left: 1.15rem;
  transform: translateY(-50%) rotate(180deg);
}

.stage-index-right {
  right: 1.15rem;
  transform: translateY(-50%);
}

/* Orb cognition state */
#thinkingIndicator {
  --orbit-radius: clamp(6.5rem, 34vmin, 21rem);
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 13;
  width: clamp(15rem, 76vmin, 47rem);
  aspect-ratio: 1;
  opacity: 0.38;
  pointer-events: none;
  filter: saturate(0.72) brightness(0.78);
  transform: translate(-50%, -50%) scale(0.96);
  transition:
    opacity 320ms ease,
    filter 420ms ease,
    transform 520ms cubic-bezier(0.2, 0.85, 0.2, 1);
}

#orbStage.is-thinking #thinkingIndicator {
  opacity: 1;
  filter: saturate(1) brightness(1);
  transform: translate(-50%, -50%) scale(1);
}

#orbStage.is-thinking #container canvas {
  filter: saturate(1.24) contrast(1.06) brightness(0.78);
  transform: scale(0.985);
}

.cognition-field {
  position: absolute;
  inset: 0;
}

.cognition-ring,
.cognition-sweep {
  position: absolute;
  border-radius: 50%;
}

.cognition-ring-outer {
  inset: 0;
  border: 1px dashed rgba(140, 236, 255, 0.43);
  box-shadow:
    inset 0 0 2.4rem rgba(65, 211, 237, 0.04),
    0 0 2rem rgba(65, 211, 237, 0.04);
  animation: cognitionRotate 36s linear infinite;
}

.cognition-ring-outer::before,
.cognition-ring-outer::after {
  content: "";
  position: absolute;
  inset: -0.28rem;
  border: 0.45rem solid transparent;
  border-top-color: rgba(140, 236, 255, 0.82);
  border-bottom-color: rgba(140, 236, 255, 0.18);
  border-radius: 50%;
  filter: drop-shadow(0 0 0.55rem rgba(140, 236, 255, 0.5));
}

.cognition-ring-outer::after {
  inset: 1.05rem;
  border-width: 1px;
  border-right-color: rgba(217, 185, 101, 0.62);
  border-top-color: transparent;
  border-bottom-color: transparent;
  animation: cognitionRotateReverse 19.2s linear infinite;
}

.cognition-ring-middle {
  inset: 14%;
  border: 1px solid rgba(140, 236, 255, 0.2);
  background: repeating-conic-gradient(
    from 15deg,
    rgba(140, 236, 255, 0.54) 0deg 0.65deg,
    transparent 0.65deg 9deg
  );
  mask: radial-gradient(circle, transparent 68%, #000 69% 71%, transparent 72%);
  animation: cognitionRotateReverse 48s linear infinite;
}

.cognition-ring-inner {
  inset: 28%;
  border: 1px dotted rgba(217, 185, 101, 0.38);
  animation: cognitionBreathe 6.8s ease-in-out infinite;
}

.cognition-sweep {
  inset: 5%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg 306deg,
    rgba(140, 236, 255, 0.03) 316deg,
    rgba(140, 236, 255, 0.25) 351deg,
    rgba(140, 236, 255, 0.76) 359deg,
    transparent 360deg
  );
  mask: radial-gradient(circle, transparent 56%, #000 88%, transparent 89%);
  animation: cognitionRotate 12.9s linear infinite;
}

.cognition-axis {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  opacity: 0.3;
  background: linear-gradient(90deg, transparent, rgba(140, 236, 255, 0.46), transparent);
}

.cognition-axis-x {
  width: 108%;
  height: 1px;
  transform: translate(-50%, -50%);
}

.cognition-axis-y {
  width: 1px;
  height: 108%;
  background: linear-gradient(transparent, rgba(140, 236, 255, 0.36), transparent);
  transform: translate(-50%, -50%);
}

.cognition-node {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.48rem;
  height: 0.48rem;
  display: block;
  margin: -0.24rem;
  border: 1px solid rgba(225, 252, 255, 0.92);
  border-radius: 50%;
  background: var(--cyan);
  box-shadow:
    0 0 0.4rem var(--cyan),
    0 0 1.4rem rgba(140, 236, 255, 0.7);
}

.cognition-node-a {
  animation: cognitionNodeA 14.5s linear infinite;
}

.cognition-node-b {
  width: 0.34rem;
  height: 0.34rem;
  margin: -0.17rem;
  background: var(--gold);
  box-shadow: 0 0 1rem rgba(217, 185, 101, 0.68);
  animation: cognitionNodeB 22s linear infinite;
}

.cognition-node-c {
  width: 0.28rem;
  height: 0.28rem;
  margin: -0.14rem;
  animation: cognitionNodeC 11s linear infinite;
}

#orbStage.is-thinking .cognition-ring-outer {
  animation-duration: 9s;
}

#orbStage.is-thinking .cognition-ring-outer::after {
  animation-duration: 4.8s;
}

#orbStage.is-thinking .cognition-ring-middle {
  animation-duration: 12s;
}

#orbStage.is-thinking .cognition-ring-inner {
  animation-duration: 1.7s;
}

#orbStage.is-thinking .cognition-sweep {
  animation-duration: 2.15s;
}

#orbStage.is-thinking .cognition-node-a {
  animation-duration: 2.9s;
}

#orbStage.is-thinking .cognition-node-b {
  animation-duration: 4.4s;
}

#orbStage.is-thinking .cognition-node-c {
  animation-duration: 2.2s;
}

.cognition-readout {
  position: absolute;
  left: 50%;
  bottom: -2.4rem;
  min-width: 14rem;
  display: grid;
  justify-items: center;
  gap: 0.34rem;
  color: rgba(160, 192, 202, 0.62);
  opacity: 0;
  text-align: center;
  transform: translateX(-50%) translateY(0.5rem);
  transition: opacity 220ms ease, transform 320ms ease;
}

.cognition-readout::before {
  content: "";
  width: 8rem;
  height: 1px;
  margin-bottom: 0.12rem;
  background: linear-gradient(90deg, transparent, var(--cyan), transparent);
  box-shadow: 0 0 0.8rem rgba(140, 236, 255, 0.42);
  animation: cognitionSignal 1.15s ease-in-out infinite;
}

.cognition-readout span {
  font-size: 0.45rem;
  font-weight: 700;
  letter-spacing: 0.28em;
}

.cognition-readout b {
  min-width: 11rem;
  color: rgba(213, 244, 249, 0.88);
  font-size: 0.58rem;
  font-weight: 520;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

#orbStage.is-thinking .cognition-readout {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Unified text and voice response stream above the composer. */
#voiceCaption {
  position: absolute;
  left: 50%;
  bottom: clamp(11.6rem, 22vh, 14.5rem);
  z-index: 19;
  width: min(80%, 43rem);
  max-height: min(68vh, 36rem);
  overflow: auto;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.7rem;
  align-items: start;
  padding: 0.7rem 0.85rem;
  border-left: 1px solid rgba(140, 236, 255, 0.66);
  color: rgba(228, 244, 248, 0.9);
  background: linear-gradient(90deg, rgba(7, 28, 39, 0.82), rgba(3, 8, 15, 0.52));
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.34);
  backdrop-filter: blur(16px);
  transform: translateX(-50%);
  pointer-events: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(140, 236, 255, 0.38) transparent;
}

#voiceCaption[hidden] {
  display: none;
}

#voiceCaptionSpeaker {
  color: var(--cyan);
  font-size: 0.48rem;
  font-weight: 750;
  letter-spacing: 0.2em;
}

#voiceCaptionText {
  min-width: 0;
  max-width: 100%;
  font-size: clamp(0.92rem, 1.12vw, 1.08rem);
  line-height: 1.5;
  overflow-wrap: anywhere;
  word-break: break-word;
}

#voiceCaption[data-live="true"] {
  border-left-color: rgba(140, 236, 255, 0.96);
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.34), 0 0 1.4rem rgba(61, 205, 232, 0.08);
}

#voiceCaption[data-state="error"] {
  border-left-color: rgba(251, 113, 133, 0.78);
  color: #fecdd3;
}

/* Safe Markdown shared by the Orb and conversation archive */
.markdown-body {
  overflow-wrap: anywhere;
}

.markdown-body > * + * {
  margin-top: 0.7em;
}

.markdown-body h2,
.markdown-body h3,
.markdown-body h4 {
  color: #f5fcff;
  font-weight: 540;
  line-height: 1.2;
}

.markdown-body h2 {
  font-size: 1.24em;
}

.markdown-body h3,
.markdown-body h4 {
  font-size: 1.08em;
}

.markdown-body strong {
  color: #fff;
  font-weight: 650;
}

.markdown-body em {
  color: rgba(198, 230, 236, 0.88);
}

.markdown-body a {
  color: var(--cyan);
  text-decoration: underline;
  text-decoration-color: rgba(140, 236, 255, 0.38);
  text-underline-offset: 0.2em;
}

.markdown-body a:hover {
  text-decoration-color: currentColor;
}

.markdown-body code {
  padding: 0.12em 0.34em;
  border: 1px solid rgba(140, 236, 255, 0.13);
  border-radius: 0.2rem;
  color: rgba(198, 246, 255, 0.92);
  background: rgba(1, 11, 18, 0.62);
  font-family: "Cascadia Code", "SFMono-Regular", Consolas, monospace;
  font-size: 0.86em;
}

.markdown-body pre {
  max-width: 100%;
  overflow: auto;
  padding: 0.72rem 0.82rem;
  border: 1px solid rgba(140, 236, 255, 0.15);
  border-left-color: rgba(140, 236, 255, 0.54);
  background: rgba(1, 7, 13, 0.78);
  text-align: left;
  scrollbar-width: thin;
}

.markdown-body pre code {
  padding: 0;
  border: 0;
  background: transparent;
  white-space: pre-wrap;
}

.markdown-body ul,
.markdown-body ol {
  padding-left: 1.3em;
  text-align: left;
}

.markdown-body li + li {
  margin-top: 0.28em;
}

.markdown-body li::marker {
  color: var(--cyan-soft);
}

.markdown-body blockquote {
  padding: 0.3em 0.72em;
  border-left: 2px solid rgba(217, 185, 101, 0.72);
  color: rgba(213, 224, 228, 0.82);
  background: rgba(52, 40, 13, 0.16);
  text-align: left;
}

.markdown-body hr {
  height: 1px;
  border: 0;
  background: linear-gradient(90deg, transparent, rgba(140, 236, 255, 0.42), transparent);
}

.markdown-orb > p {
  width: fit-content;
  max-width: 100%;
  display: block;
  padding: 0.06em 0.3em;
  border-radius: 0.18rem;
  background: rgba(2, 5, 12, 0.52);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.markdown-orb > h2,
.markdown-orb > h3,
.markdown-orb > h4,
.markdown-orb > ul,
.markdown-orb > ol,
.markdown-orb > blockquote,
.markdown-orb > pre {
  width: min(100%, 38rem);
  margin-right: auto;
  margin-left: auto;
  padding: 0.4rem 0.65rem;
  background: rgba(2, 5, 12, 0.62);
}

.markdown-orb > ul,
.markdown-orb > ol {
  padding-right: 0.8rem;
  padding-left: 2rem;
}

/* Expandable conversation archive */
#chatHistoryPanel {
  position: absolute;
  left: 50%;
  bottom: max(7.25rem, calc(env(safe-area-inset-bottom) + 6.7rem));
  z-index: 22;
  width: min(80%, 43rem);
  max-height: min(59vh, 32rem);
  display: flex;
  flex-direction: column;
  visibility: hidden;
  overflow: hidden;
  border: 1px solid rgba(137, 211, 226, 0.28);
  border-top-color: rgba(140, 236, 255, 0.58);
  background:
    linear-gradient(135deg, rgba(13, 41, 51, 0.25), transparent 34%),
    rgba(2, 7, 15, 0.91);
  box-shadow:
    0 2rem 6rem rgba(0, 0, 0, 0.58),
    0 0 3rem rgba(64, 206, 232, 0.06);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 1.25rem) scale(0.98);
  backdrop-filter: blur(24px) saturate(135%);
  clip-path: polygon(0 0, calc(100% - 1rem) 0, 100% 1rem, 100% 100%, 1rem 100%, 0 calc(100% - 1rem));
  transition:
    opacity 200ms ease,
    transform 320ms cubic-bezier(0.2, 0.85, 0.2, 1),
    visibility 0s linear 320ms;
}

#chatHistoryPanel::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 2px;
  background: linear-gradient(var(--cyan), transparent 34%, transparent 66%, rgba(140, 236, 255, 0.42));
  box-shadow: 0 0 0.75rem rgba(140, 236, 255, 0.36);
}

#chatHistoryPanel.is-open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0) scale(1);
  transition-delay: 0s;
}

.history-header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.9rem 0.95rem 0.82rem 1.1rem;
  border-bottom: 1px solid rgba(140, 236, 255, 0.13);
  background: rgba(6, 20, 29, 0.42);
}

.history-header p {
  color: rgba(140, 236, 255, 0.6);
  font-size: 0.44rem;
  font-weight: 700;
  letter-spacing: 0.24em;
}

.history-header h2 {
  margin-top: 0.18rem;
  color: rgba(239, 249, 251, 0.96);
  font-size: 0.88rem;
  font-weight: 430;
  letter-spacing: 0.02em;
}

.history-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

#chatHistoryClear,
#chatHistoryClose {
  width: 2.2rem;
  height: 2.2rem;
  display: grid;
  place-items: center;
  border: 1px solid rgba(177, 215, 225, 0.23);
  border-radius: 50%;
  color: rgba(220, 239, 243, 0.82);
  background: rgba(1, 8, 14, 0.48);
  cursor: pointer;
  transition: color 160ms ease, border-color 160ms ease, transform 160ms ease;
}

#chatHistoryClear:hover,
#chatHistoryClear:focus-visible {
  color: #ff9b8e;
  border-color: rgba(255, 107, 94, 0.62);
  transform: translateY(-1px);
}

#chatHistoryClear[data-armed="true"] {
  color: #fff;
  border-color: rgba(255, 85, 72, 0.88);
  background: rgba(101, 19, 18, 0.64);
  box-shadow: 0 0 1.15rem rgba(255, 79, 67, 0.28);
  animation: historyClearArmed 900ms ease-in-out infinite alternate;
}

#chatHistoryClear:disabled {
  opacity: 0.45;
  cursor: wait;
}

#chatHistoryClose:hover {
  color: #fff;
  border-color: rgba(140, 236, 255, 0.58);
  transform: rotate(5deg);
}

#chatHistoryClear svg,
#chatHistoryClose svg {
  width: 0.95rem;
  height: 0.95rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 1.5;
}

@keyframes historyClearArmed {
  to {
    box-shadow: 0 0 1.6rem rgba(255, 79, 67, 0.48);
  }
}

#chatHistoryLog {
  min-height: 8rem;
  overflow: auto;
  padding: 1rem 1rem 1.2rem;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(140, 236, 255, 0.32) transparent;
}

.history-empty {
  min-height: 7rem;
  display: grid;
  place-content: center;
  justify-items: center;
  color: rgba(152, 177, 187, 0.55);
  text-align: center;
}

.history-empty span {
  color: rgba(140, 236, 255, 0.32);
  font-size: 1.6rem;
  font-weight: 250;
}

.history-empty p {
  margin-top: 0.35rem;
  font-size: 0.73rem;
}

.history-empty small {
  margin-top: 0.24rem;
  font-size: 0.52rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.history-message {
  width: 88%;
}

.history-message + .history-message {
  margin-top: 0.9rem;
}

.history-message-user {
  margin-left: auto;
}

.history-message > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.28rem;
  color: rgba(143, 171, 181, 0.52);
  font-size: 0.44rem;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.history-message-assistant > header span {
  color: rgba(140, 236, 255, 0.72);
}

.history-message-user > header span {
  color: rgba(217, 185, 101, 0.72);
}

.history-message-content {
  padding: 0.72rem 0.82rem;
  border: 1px solid rgba(140, 236, 255, 0.11);
  border-left-color: rgba(140, 236, 255, 0.48);
  color: rgba(214, 229, 234, 0.88);
  background: rgba(9, 27, 35, 0.42);
  font-size: 0.76rem;
  line-height: 1.55;
}

.history-message-user .history-message-content {
  border-right-color: rgba(217, 185, 101, 0.46);
  border-left-color: rgba(217, 185, 101, 0.12);
  background: rgba(45, 34, 12, 0.2);
}

.history-message[data-state="error"] .history-message-content {
  border-left-color: rgba(248, 113, 113, 0.54);
  color: rgba(254, 202, 202, 0.9);
}

.history-activity-timeline {
  position: relative;
  width: 94%;
  margin: 1rem 0;
  overflow: hidden;
  border: 1px solid rgba(128, 218, 237, 0.2);
  border-left-color: rgba(140, 236, 255, 0.58);
  background:
    radial-gradient(circle at 0 0, rgba(71, 211, 238, 0.1), transparent 38%),
    linear-gradient(145deg, rgba(7, 24, 33, 0.88), rgba(3, 12, 20, 0.74));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.035),
    0 0.85rem 2.4rem rgba(0, 0, 0, 0.22);
  clip-path: polygon(0 0, calc(100% - 0.72rem) 0, 100% 0.72rem, 100% 100%, 0.72rem 100%, 0 calc(100% - 0.72rem));
}

.history-activity-timeline::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 1px;
  background: linear-gradient(transparent, rgba(140, 236, 255, 0.9) 18%, rgba(140, 236, 255, 0.16) 78%, transparent);
  box-shadow: 0 0 0.7rem rgba(140, 236, 255, 0.42);
}

.history-activity-timeline > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.72rem 0.8rem 0.65rem;
  border-bottom: 1px solid rgba(140, 236, 255, 0.11);
  background: linear-gradient(90deg, rgba(37, 111, 128, 0.1), transparent 62%);
  cursor: pointer;
  list-style: none;
  transition: background 160ms ease, border-color 160ms ease;
  user-select: none;
}

.history-activity-timeline > summary::-webkit-details-marker {
  display: none;
}

.history-activity-timeline > summary:hover {
  background: linear-gradient(90deg, rgba(48, 139, 158, 0.16), rgba(11, 35, 44, 0.08) 72%);
}

.history-activity-timeline > summary:focus-visible {
  outline: 1px solid rgba(140, 236, 255, 0.72);
  outline-offset: -2px;
}

.history-activity-timeline:not([open]) > summary {
  border-bottom-color: transparent;
}

.history-activity-timeline:not([open]) > .activity-timeline-items {
  display: none;
}

.activity-timeline-identity {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.62rem;
}

.activity-timeline-identity > div {
  min-width: 0;
  display: grid;
  gap: 0.08rem;
}

.activity-timeline-identity small,
.activity-change-summary small {
  color: rgba(140, 236, 255, 0.58);
  font-size: 0.42rem;
  font-weight: 750;
  letter-spacing: 0.2em;
}

.activity-timeline-identity strong {
  color: rgba(235, 249, 252, 0.94);
  font-size: 0.7rem;
  font-weight: 540;
  letter-spacing: 0.015em;
}

.activity-live-beacon {
  position: relative;
  width: 0.48rem;
  height: 0.48rem;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #82edff;
  box-shadow: 0 0 0.75rem rgba(130, 237, 255, 0.7);
}

.history-activity-timeline[data-state="running"] .activity-live-beacon::after {
  content: "";
  position: absolute;
  inset: -0.32rem;
  border: 1px solid rgba(130, 237, 255, 0.45);
  border-radius: 50%;
  animation: activityBeacon 1.55s ease-out infinite;
}

.history-activity-timeline[data-state="completed"] .activity-live-beacon {
  background: #6ee7b7;
  box-shadow: 0 0 0.65rem rgba(110, 231, 183, 0.5);
}

.history-activity-timeline[data-state="failed"] .activity-live-beacon,
.history-activity-timeline[data-state="stopped"] .activity-live-beacon {
  background: #fb8b83;
  box-shadow: 0 0 0.65rem rgba(251, 139, 131, 0.5);
}

.activity-timeline-state {
  flex: 0 0 auto;
  padding: 0.25rem 0.42rem;
  border: 1px solid rgba(140, 236, 255, 0.24);
  border-radius: 999px;
  color: rgba(165, 241, 255, 0.84);
  background: rgba(14, 71, 85, 0.22);
  font-size: 0.39rem;
  font-weight: 780;
  letter-spacing: 0.13em;
}

.activity-timeline-controls {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.52rem;
}

.activity-timeline-count {
  color: rgba(151, 180, 190, 0.58);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 0.43rem;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.activity-timeline-chevron {
  color: rgba(150, 189, 200, 0.58);
  font-size: 0.84rem;
  line-height: 1;
  transition: transform 160ms ease, color 160ms ease;
}

.history-activity-timeline[open] .activity-timeline-chevron {
  color: rgba(180, 239, 250, 0.82);
  transform: rotate(180deg);
}

.history-activity-timeline[data-state="completed"] .activity-timeline-state {
  border-color: rgba(110, 231, 183, 0.3);
  color: #9ff3d0;
  background: rgba(15, 83, 62, 0.22);
}

.history-activity-timeline[data-state="failed"] .activity-timeline-state,
.history-activity-timeline[data-state="stopped"] .activity-timeline-state {
  border-color: rgba(251, 139, 131, 0.3);
  color: #ffb5ae;
  background: rgba(105, 33, 34, 0.22);
}

.activity-timeline-items {
  position: relative;
  display: grid;
  gap: 0.42rem;
  padding: 0.62rem 0.64rem 0.72rem 1rem;
}

.activity-timeline-items::before {
  content: "";
  position: absolute;
  top: 0.9rem;
  bottom: 0.95rem;
  left: 0.78rem;
  width: 1px;
  background: linear-gradient(rgba(140, 236, 255, 0.26), rgba(140, 236, 255, 0.035));
}

.activity-waiting {
  min-height: 3.2rem;
  display: flex;
  align-items: center;
  gap: 0.62rem;
  padding: 0.66rem 0.75rem;
  color: rgba(178, 206, 215, 0.72);
  font-size: 0.66rem;
}

.activity-waiting > span {
  width: 0.42rem;
  height: 0.42rem;
  border: 1px solid rgba(140, 236, 255, 0.7);
  border-radius: 50%;
  box-shadow: 0 0 0.55rem rgba(140, 236, 255, 0.35);
  animation: activityWaiting 1.05s ease-in-out infinite alternate;
}

.activity-card {
  position: relative;
  z-index: 1;
  min-width: 0;
  border: 1px solid rgba(151, 207, 219, 0.13);
  border-radius: 0.28rem;
  background: rgba(2, 11, 18, 0.62);
  transition: border-color 150ms ease, background 150ms ease, box-shadow 150ms ease;
}

.activity-card[open],
.activity-card:hover {
  border-color: rgba(140, 236, 255, 0.27);
  background: rgba(5, 20, 28, 0.78);
  box-shadow: 0 0.65rem 1.4rem rgba(0, 0, 0, 0.18);
}

.activity-card[data-state="failed"] {
  border-color: rgba(251, 139, 131, 0.28);
}

.activity-card > summary {
  min-width: 0;
  display: grid;
  grid-template-columns: 1.7rem minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.48rem;
  padding: 0.56rem 0.58rem 0.56rem 0.48rem;
  cursor: pointer;
  list-style: none;
}

.activity-card > summary::-webkit-details-marker {
  display: none;
}

.activity-card > summary:focus-visible {
  outline: 1px solid rgba(140, 236, 255, 0.72);
  outline-offset: 2px;
}

.activity-card-icon {
  width: 1.7rem;
  height: 1.7rem;
  display: grid;
  place-items: center;
  border: 1px solid rgba(140, 236, 255, 0.18);
  border-radius: 0.32rem;
  color: rgba(162, 239, 253, 0.85);
  background: rgba(25, 85, 99, 0.16);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 0.54rem;
  font-weight: 780;
  letter-spacing: -0.08em;
}

.activity-card-file .activity-card-icon {
  color: #8debc1;
  border-color: rgba(110, 231, 183, 0.2);
  background: rgba(24, 99, 72, 0.16);
}

.activity-card-copy {
  min-width: 0;
  display: grid;
  gap: 0.06rem;
}

.activity-card-copy small {
  color: rgba(140, 236, 255, 0.5);
  font-size: 0.38rem;
  font-weight: 760;
  letter-spacing: 0.17em;
}

.activity-card-copy strong {
  overflow: hidden;
  color: rgba(225, 241, 245, 0.9);
  font-size: 0.64rem;
  font-weight: 560;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.activity-card-copy > span {
  overflow: hidden;
  color: rgba(151, 180, 190, 0.63);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 0.52rem;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.activity-card[data-state="running"] .activity-card-icon {
  animation: activityIconGlow 1.35s ease-in-out infinite alternate;
}

.activity-card-chevron {
  color: rgba(150, 189, 200, 0.52);
  font-size: 0.78rem;
  transition: transform 150ms ease, color 150ms ease;
}

.activity-card[open] .activity-card-chevron {
  color: rgba(180, 239, 250, 0.78);
  transform: rotate(180deg);
}

.activity-card-details {
  display: grid;
  gap: 0.52rem;
  padding: 0 0.6rem 0.62rem 2.66rem;
  color: rgba(190, 213, 220, 0.76);
  font-size: 0.61rem;
  line-height: 1.5;
}

.activity-card-details > p {
  white-space: pre-wrap;
}

.activity-code-block {
  min-width: 0;
  display: grid;
  gap: 0.24rem;
}

.activity-code-block > small {
  color: rgba(140, 236, 255, 0.48);
  font-size: 0.37rem;
  font-weight: 760;
  letter-spacing: 0.17em;
}

.activity-code-block pre {
  max-height: 12rem;
  margin: 0;
  overflow: auto;
  padding: 0.56rem 0.62rem;
  border: 1px solid rgba(137, 211, 226, 0.1);
  border-radius: 0.22rem;
  color: rgba(216, 235, 240, 0.84);
  background: rgba(0, 5, 10, 0.72);
  scrollbar-width: thin;
  scrollbar-color: rgba(140, 236, 255, 0.24) transparent;
}

.activity-code-block code {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 0.52rem;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
}

.activity-command-meta {
  overflow: hidden;
  color: rgba(139, 170, 180, 0.58);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 0.45rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.activity-diff-metrics {
  display: inline-flex;
  align-items: center;
  gap: 0.36rem;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 0.5rem;
  font-weight: 760;
}

.activity-additions {
  color: #62d89b;
}

.activity-deletions {
  color: #ff817a;
}

.activity-change-summary {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.16rem;
  padding: 0.66rem 0.72rem;
  border: 1px solid rgba(110, 231, 183, 0.24);
  border-left: 2px solid rgba(110, 231, 183, 0.72);
  border-radius: 0.24rem;
  background: linear-gradient(90deg, rgba(20, 92, 67, 0.22), rgba(2, 13, 18, 0.62));
  box-shadow: inset 0 1px 0 rgba(173, 255, 220, 0.035);
}

.activity-change-summary > div:first-child {
  min-width: 0;
  display: grid;
  gap: 0.08rem;
}

.activity-change-summary strong {
  color: rgba(218, 248, 234, 0.92);
  font-size: 0.68rem;
  font-weight: 590;
}

.activity-changed-files {
  grid-column: 1 / -1;
  padding-top: 0.12rem;
}

.activity-changed-files > summary {
  width: max-content;
  color: rgba(151, 209, 195, 0.66);
  cursor: pointer;
  font-size: 0.46rem;
  font-weight: 650;
  letter-spacing: 0.08em;
  list-style: none;
  text-transform: uppercase;
}

.activity-changed-files > summary::after {
  content: "  +";
  color: rgba(140, 236, 255, 0.62);
}

.activity-changed-files[open] > summary::after {
  content: "  −";
}

.activity-changed-files ul {
  display: grid;
  gap: 0.34rem;
  margin-top: 0.52rem;
  padding: 0;
  list-style: none;
}

.activity-changed-files li {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
  padding-top: 0.34rem;
  border-top: 1px solid rgba(151, 207, 219, 0.08);
}

.activity-changed-files code {
  overflow: hidden;
  color: rgba(190, 219, 214, 0.74);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 0.48rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@keyframes activityBeacon {
  from { opacity: 0.8; transform: scale(0.6); }
  to { opacity: 0; transform: scale(1.45); }
}

@keyframes activityWaiting {
  to { background: rgba(140, 236, 255, 0.62); transform: scale(1.2); }
}

@keyframes activityIconGlow {
  to {
    border-color: rgba(140, 236, 255, 0.42);
    box-shadow: 0 0 0.72rem rgba(140, 236, 255, 0.12);
  }
}

.history-gif {
  position: relative;
  width: min(100%, 23rem);
  display: block;
  margin-top: 0.7rem;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(140, 236, 255, 0.28);
  color: var(--cyan);
  background: rgba(1, 8, 14, 0.76);
  cursor: pointer;
  clip-path: polygon(0 0, calc(100% - 0.65rem) 0, 100% 0.65rem, 100% 100%, 0.65rem 100%, 0 calc(100% - 0.65rem));
  transition: border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

.history-gif:hover,
.history-gif:focus-visible {
  border-color: rgba(140, 236, 255, 0.68);
  box-shadow: 0 0 1.4rem rgba(72, 215, 240, 0.13);
  transform: translateY(-2px);
}

.history-gif img {
  width: 100%;
  max-height: 12rem;
  display: block;
  object-fit: contain;
  background: #01050a;
}

.history-gif span {
  position: absolute;
  right: 0;
  bottom: 0;
  padding: 0.34rem 0.48rem;
  color: rgba(224, 250, 255, 0.92);
  background: rgba(2, 11, 18, 0.86);
  font-size: 0.4rem;
  font-weight: 750;
  letter-spacing: 0.18em;
}

/* Draggable, non-modal GIF response window */
#gifViewer {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 70;
  width: min(48vw, 38rem);
  max-width: none;
  max-height: calc(100dvh - 1rem);
  margin: 0;
  padding: 0;
  overflow: visible;
  border: 0;
  color: var(--text);
  background: transparent;
  filter: drop-shadow(0 1.5rem 3rem rgba(0, 0, 0, 0.5));
}

#gifViewer[hidden] {
  display: none;
}

#gifViewer:not([hidden]) {
  animation: gifViewerEnter 360ms cubic-bezier(0.16, 0.84, 0.26, 1) both;
}

#gifViewer[data-dragging="true"],
#gifViewer[data-resizing="true"] {
  animation-play-state: paused;
  filter: drop-shadow(0 2rem 4rem rgba(0, 0, 0, 0.62));
  user-select: none;
}

#gifViewer[data-resized="true"] .gif-viewer-frame {
  width: 100%;
  height: 100%;
}

.gif-resize-handle {
  position: absolute;
  z-index: 12;
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--cyan);
  background: transparent;
  touch-action: none;
}

.gif-resize-handle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.34rem;
  height: 0.34rem;
  border: 1px solid currentColor;
  opacity: 0.28;
  transform: translate(-50%, -50%) rotate(45deg);
  transition: opacity 140ms ease, box-shadow 140ms ease, background 140ms ease;
}

.gif-resize-handle:hover::after,
.gif-resize-handle:focus-visible::after,
#gifViewer[data-resizing="true"] .gif-resize-handle::after {
  opacity: 0.92;
  background: rgba(140, 236, 255, 0.18);
  box-shadow: 0 0 0.8rem rgba(140, 236, 255, 0.65);
}

.gif-resize-handle:focus-visible {
  outline: 1px solid rgba(140, 236, 255, 0.72);
  outline-offset: -2px;
}

.gif-resize-handle-n,
.gif-resize-handle-s {
  right: 1rem;
  left: 1rem;
  height: 0.85rem;
}

.gif-resize-handle-n { top: -0.42rem; cursor: n-resize; }
.gif-resize-handle-s { bottom: -0.42rem; cursor: s-resize; }

.gif-resize-handle-e,
.gif-resize-handle-w {
  top: 1rem;
  bottom: 1rem;
  width: 0.85rem;
}

.gif-resize-handle-e { right: -0.42rem; cursor: e-resize; }
.gif-resize-handle-w { left: -0.42rem; cursor: w-resize; }

.gif-resize-handle-ne,
.gif-resize-handle-se,
.gif-resize-handle-sw,
.gif-resize-handle-nw {
  width: 1.25rem;
  height: 1.25rem;
}

.gif-resize-handle-ne { top: -0.42rem; right: -0.42rem; cursor: ne-resize; }
.gif-resize-handle-se { right: -0.42rem; bottom: -0.42rem; cursor: se-resize; }
.gif-resize-handle-sw { bottom: -0.42rem; left: -0.42rem; cursor: sw-resize; }
.gif-resize-handle-nw { top: -0.42rem; left: -0.42rem; cursor: nw-resize; }

.gif-viewer-frame {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(140, 236, 255, 0.34);
  border-top-color: rgba(140, 236, 255, 0.82);
  background:
    linear-gradient(135deg, rgba(27, 98, 112, 0.18), transparent 30%),
    rgba(2, 7, 14, 0.96);
  box-shadow:
    0 1.6rem 4rem rgba(0, 0, 0, 0.62),
    0 0 4rem rgba(79, 220, 244, 0.1),
    inset 0 0 2.5rem rgba(79, 220, 244, 0.035);
  clip-path: polygon(0 0, calc(100% - 1.25rem) 0, 100% 1.25rem, 100% 100%, 1.25rem 100%, 0 calc(100% - 1.25rem));
}

.gif-viewer-frame::before,
.gif-viewer-frame::after {
  content: "";
  position: absolute;
  z-index: 4;
  pointer-events: none;
}

.gif-viewer-frame::before {
  inset: 0 auto 0 0;
  width: 2px;
  background: linear-gradient(var(--cyan), transparent 36%, transparent 68%, var(--gold));
  box-shadow: 0 0 0.9rem rgba(140, 236, 255, 0.52);
}

.gif-viewer-frame::after {
  inset: 0;
  opacity: 0.16;
  background-image: linear-gradient(rgba(140, 236, 255, 0.08) 1px, transparent 1px);
  background-size: 100% 4px;
  mix-blend-mode: screen;
}

.gif-viewer-header {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 4rem;
  padding: 0.75rem 0.8rem 0.72rem 1.1rem;
  border-bottom: 1px solid rgba(140, 236, 255, 0.14);
  background: rgba(4, 19, 27, 0.72);
  cursor: grab;
  touch-action: none;
}

#gifViewer[data-dragging="true"] .gif-viewer-header {
  cursor: grabbing;
}

.gif-viewer-header p {
  color: rgba(140, 236, 255, 0.58);
  font-size: 0.43rem;
  font-weight: 750;
  letter-spacing: 0.24em;
}

.gif-viewer-header h2 {
  margin-top: 0.2rem;
  font-size: 0.92rem;
  font-weight: 420;
  letter-spacing: 0.03em;
}

.gif-viewer-actions {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

#gifViewerDragHandle,
#gifViewerClose {
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  border: 1px solid rgba(180, 220, 230, 0.3);
  border-radius: 50%;
  color: rgba(226, 243, 247, 0.86);
  background: rgba(0, 7, 13, 0.64);
  cursor: pointer;
  transition: color 160ms ease, border-color 160ms ease, transform 160ms ease;
}

#gifViewerDragHandle {
  color: rgba(140, 236, 255, 0.58);
  cursor: grab;
}

#gifViewerDragHandle:hover,
#gifViewerDragHandle:focus-visible {
  color: var(--cyan);
  border-color: rgba(140, 236, 255, 0.55);
}

#gifViewerClose:hover,
#gifViewerClose:focus-visible {
  color: #fff;
  border-color: rgba(140, 236, 255, 0.68);
  transform: rotate(6deg);
}

#gifViewerDragHandle svg,
#gifViewerClose svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 1.5;
}

#gifViewerDragHandle svg {
  fill: currentColor;
  stroke: none;
}

.gif-viewer-media {
  position: relative;
  min-height: min(34vh, 16rem);
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: clamp(0.65rem, 1.6vw, 1.2rem);
  background:
    radial-gradient(circle at center, rgba(57, 197, 224, 0.11), transparent 58%),
    #01050a;
}

#gifViewer[data-resized="true"] .gif-viewer-media {
  flex: 1 1 auto;
  min-height: 0;
}

.gif-viewer-media::before {
  content: "INITIALIZING VISUAL CHANNEL";
  position: absolute;
  color: rgba(140, 236, 255, 0.52);
  font-size: 0.48rem;
  font-weight: 750;
  letter-spacing: 0.24em;
  animation: cognitionSignal 1.15s ease-in-out infinite;
}

#gifViewerImage {
  position: relative;
  z-index: 2;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: min(50vh, 30rem);
  display: block;
  object-fit: contain;
  opacity: 0;
  filter: saturate(0.95) contrast(1.02);
  transition: opacity 220ms ease;
}

#gifViewer[data-resized="true"] #gifViewerImage {
  max-height: 100%;
}

#gifViewer[data-state="ready"] #gifViewerImage {
  opacity: 1;
}

#gifViewer[data-state="ready"] .gif-viewer-media::before {
  display: none;
}

#gifViewer[data-state="error"] .gif-viewer-media::before {
  content: "VISUAL SIGNAL LOST";
  color: rgba(254, 202, 202, 0.84);
  animation: none;
}

.gif-viewer-scan {
  position: absolute;
  inset: -35% 0 auto;
  z-index: 3;
  height: 30%;
  pointer-events: none;
  background: linear-gradient(transparent, rgba(140, 236, 255, 0.09), transparent);
  mix-blend-mode: screen;
  animation: gifScan 4.8s linear infinite;
}

.gif-viewer-frame > footer {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.65rem;
  min-height: 2.6rem;
  padding: 0.55rem 0.95rem;
  border-top: 1px solid rgba(140, 236, 255, 0.13);
  color: rgba(151, 184, 194, 0.62);
  background: rgba(4, 16, 23, 0.72);
}

.gif-viewer-frame > footer > span {
  color: var(--cyan);
  text-shadow: 0 0 0.7rem rgba(140, 236, 255, 0.65);
}

#gifViewerStatus {
  font-size: 0.52rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.gif-viewer-frame > footer small {
  color: rgba(217, 185, 101, 0.65);
  font-size: 0.42rem;
  font-weight: 750;
  letter-spacing: 0.18em;
}

/* Chat composer */
#chatDock {
  position: absolute;
  left: 50%;
  bottom: max(1.65rem, calc(env(safe-area-inset-bottom) + 1rem));
  z-index: 20;
  width: min(80%, 43rem);
  pointer-events: none;
  transform: translateX(-50%);
}

.composer-label {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 0.5rem 0.8rem;
  color: rgba(143, 178, 189, 0.46);
  font-size: 0.47rem;
  font-weight: 650;
  letter-spacing: 0.16em;
}

.composer-label i {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(140, 236, 255, 0.25), transparent);
}

#orbChatReply {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

#conversationStarters {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.45rem;
  margin: 0 0 0.65rem;
  pointer-events: auto;
  transition: opacity 180ms ease, transform 180ms ease;
}

#conversationStarters[data-hidden="true"] {
  opacity: 0;
  transform: translateY(0.35rem);
  pointer-events: none;
}

#conversationStarters button {
  position: relative;
  min-width: 0;
  display: grid;
  gap: 0.16rem;
  padding: 0.55rem 0.62rem 0.58rem;
  border: 1px solid rgba(140, 236, 255, 0.22);
  border-left-color: rgba(140, 236, 255, 0.55);
  color: rgba(211, 236, 241, 0.8);
  background:
    linear-gradient(135deg, rgba(31, 114, 131, 0.15), transparent 46%),
    rgba(3, 12, 20, 0.72);
  text-align: left;
  cursor: pointer;
  backdrop-filter: blur(12px);
  clip-path: polygon(0 0, calc(100% - 0.45rem) 0, 100% 0.45rem, 100% 100%, 0.45rem 100%, 0 calc(100% - 0.45rem));
  transition: border-color 150ms ease, color 150ms ease, transform 150ms ease, background 150ms ease;
}

#conversationStarters button > span {
  color: rgba(140, 236, 255, 0.55);
  font-size: 0.39rem;
  font-weight: 760;
  letter-spacing: 0.17em;
}

#conversationStarters button > b {
  overflow: hidden;
  color: rgba(238, 250, 253, 0.9);
  font-size: 0.61rem;
  font-weight: 520;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#conversationStarters button > small {
  overflow: hidden;
  color: rgba(148, 175, 184, 0.62);
  font-size: 0.43rem;
  letter-spacing: 0.02em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#conversationStarters button:hover {
  border-color: rgba(140, 236, 255, 0.58);
  color: #f2fdff;
  background:
    linear-gradient(135deg, rgba(50, 181, 207, 0.22), transparent 52%),
    rgba(4, 20, 29, 0.84);
  transform: translateY(-1px);
}

.skill-composer-helper {
  position: relative;
  max-height: min(27rem, 52vh);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  margin: 0 0 0.58rem;
  overflow: hidden;
  border: 1px solid rgba(151, 123, 255, 0.42);
  border-top-color: rgba(238, 140, 255, 0.72);
  border-radius: 0.9rem;
  color: rgba(239, 245, 255, 0.94);
  background:
    radial-gradient(circle at 86% -20%, rgba(237, 100, 255, 0.2), transparent 42%),
    linear-gradient(145deg, rgba(14, 20, 41, 0.98), rgba(3, 8, 18, 0.97));
  box-shadow: 0 1.4rem 4.8rem rgba(0, 0, 0, 0.58), 0 0 2.5rem rgba(142, 95, 255, 0.1);
  backdrop-filter: blur(24px) saturate(140%);
  pointer-events: auto;
  animation: skill-helper-enter 160ms ease-out both;
}

.skill-composer-helper[hidden],
body:not([data-owner="true"]) .skill-composer-helper {
  display: none;
}

.skill-composer-helper > header,
.skill-composer-helper > footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.72rem 0.9rem;
  color: rgba(207, 190, 255, 0.76);
  font-size: 0.67rem;
  font-weight: 760;
  letter-spacing: 0.12em;
}

.skill-composer-helper > header {
  border-bottom: 1px solid rgba(161, 139, 237, 0.18);
  background: rgba(120, 82, 208, 0.08);
}

.skill-composer-helper > header i {
  margin-right: 0.35rem;
  color: #f09cff;
  font-style: normal;
  text-shadow: 0 0 0.9rem rgba(240, 156, 255, 0.65);
}

.skill-composer-helper > header small {
  color: rgba(149, 226, 255, 0.72);
  font-size: inherit;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.skill-composer-list {
  display: grid;
  align-content: start;
  padding: 0.36rem;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-color: rgba(218, 132, 255, 0.34) transparent;
  scrollbar-width: thin;
}

.skill-helper-option {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.82rem 0.78rem;
  border: 1px solid transparent;
  border-radius: 0.62rem;
  color: inherit;
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease, transform 120ms ease;
}

.skill-helper-option:hover,
.skill-helper-option[aria-selected="true"] {
  border-color: rgba(217, 137, 255, 0.38);
  background: linear-gradient(90deg, rgba(184, 93, 255, 0.16), rgba(73, 181, 255, 0.06));
  transform: translateX(2px);
}

.skill-helper-glyph {
  display: grid;
  width: 1.8rem;
  height: 1.8rem;
  place-items: center;
  border: 1px solid rgba(232, 147, 255, 0.35);
  border-radius: 50%;
  color: #f3a7ff;
  background: rgba(172, 76, 255, 0.1);
  font-size: 0.74rem;
}

.skill-helper-copy {
  min-width: 0;
  display: grid;
  gap: 0.16rem;
}

.skill-helper-copy strong {
  overflow: hidden;
  color: rgba(247, 248, 255, 0.97);
  font-size: 1rem;
  font-weight: 650;
  letter-spacing: 0.01em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.skill-helper-copy small {
  overflow: hidden;
  color: rgba(184, 194, 218, 0.76);
  font-size: 1rem;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.skill-helper-meta {
  padding: 0.3rem 0.42rem;
  border: 1px solid rgba(121, 196, 255, 0.2);
  border-radius: 999px;
  color: rgba(153, 218, 255, 0.72);
  font-size: 0.59rem;
  font-weight: 760;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.skill-helper-state {
  min-height: 5.6rem;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 0.55rem;
  padding: 1.2rem;
  color: rgba(187, 201, 225, 0.7);
  font-size: 0.94rem;
  letter-spacing: 0.08em;
  text-align: center;
}

.skill-helper-state i {
  width: 1.15rem;
  height: 1.15rem;
  border: 2px solid rgba(218, 137, 255, 0.22);
  border-top-color: rgba(218, 137, 255, 0.9);
  border-radius: 50%;
  animation: skill-helper-spin 720ms linear infinite;
}

.skill-helper-state small {
  color: rgba(163, 177, 202, 0.6);
  font-size: 0.9rem;
  letter-spacing: 0;
}

.skill-helper-state.is-error {
  color: rgba(255, 154, 171, 0.82);
}

.skill-composer-helper > footer {
  justify-content: flex-start;
  border-top: 1px solid rgba(161, 139, 237, 0.14);
  color: rgba(148, 159, 189, 0.58);
  font-size: 0.59rem;
}

@keyframes skill-helper-enter {
  from { opacity: 0; transform: translateY(0.35rem) scale(0.99); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes skill-helper-spin {
  to { transform: rotate(360deg); }
}

#orbChatForm {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.47rem 0.48rem 0.47rem 0.82rem;
  border: 1px solid rgba(134, 202, 218, 0.3);
  border-left-color: rgba(140, 236, 255, 0.72);
  background:
    linear-gradient(90deg, rgba(13, 37, 48, 0.43), rgba(3, 7, 15, 0.72) 30%),
    rgba(2, 5, 12, 0.72);
  box-shadow:
    0 1.2rem 4rem rgba(0, 0, 0, 0.48),
    inset 0 1px 0 rgba(255, 255, 255, 0.025);
  backdrop-filter: blur(20px) saturate(135%);
  clip-path: polygon(0 0, calc(100% - 0.85rem) 0, 100% 0.85rem, 100% 100%, 0.85rem 100%, 0 calc(100% - 0.85rem));
  pointer-events: auto;
  transition: border-color 180ms ease, box-shadow 180ms ease, opacity 180ms ease;
}

#orbChatForm::after {
  content: "";
  position: absolute;
  right: 7.25rem;
  bottom: 0;
  width: 22%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(140, 236, 255, 0.5));
}

#orbChatForm:focus-within {
  border-color: rgba(140, 236, 255, 0.62);
  box-shadow:
    0 1.2rem 4rem rgba(0, 0, 0, 0.52),
    0 0 2.5rem rgba(65, 202, 228, 0.08);
}

#orbChatForm.is-busy {
  opacity: 0.68;
}

#orbChatForm.is-busy.has-run-controls {
  opacity: 1;
}

.composer-prompt {
  color: var(--cyan);
  font-size: 1.05rem;
  font-weight: 280;
  text-shadow: 0 0 0.7rem rgba(140, 236, 255, 0.6);
}

#orbChatInput {
  flex: 1;
  min-width: 0;
  min-height: 2.28rem;
  max-height: min(9rem, 24vh);
  padding: 0.52rem 0.1rem;
  overflow-x: hidden;
  overflow-y: hidden;
  border: 0;
  outline: 0;
  color: rgba(236, 247, 250, 0.94);
  background: transparent;
  font-size: 0.9rem;
  font-weight: 350;
  letter-spacing: 0.01em;
  line-height: 1.42;
  resize: none;
  scrollbar-color: rgba(140, 236, 255, 0.28) transparent;
  scrollbar-width: thin;
}

#orbChatInput::placeholder {
  color: rgba(147, 166, 176, 0.74);
}

#orbChatInput[data-mode="secret"] {
  -webkit-text-security: disc;
}

#conciergeToggle,
#chatHistoryToggle {
  position: relative;
  width: 2.55rem;
  height: 2.55rem;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 1px solid rgba(148, 185, 196, 0.24);
  border-radius: 50%;
  color: rgba(176, 207, 216, 0.72);
  background: rgba(4, 17, 25, 0.54);
  cursor: pointer;
  transition:
    color 160ms ease,
    border-color 160ms ease,
    background 160ms ease,
    transform 160ms ease;
}

#conciergeToggle:hover,
#conciergeToggle[aria-expanded="true"],
#chatHistoryToggle:hover,
#chatHistoryToggle[aria-expanded="true"] {
  color: var(--cyan);
  border-color: rgba(140, 236, 255, 0.46);
  background: rgba(10, 48, 60, 0.52);
  transform: translateY(-1px);
}

#conciergeToggle svg,
#chatHistoryToggle svg {
  width: 1.02rem;
  height: 1.02rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.55;
}

#chatHistoryCount {
  position: absolute;
  top: -0.2rem;
  right: -0.15rem;
  min-width: 0.9rem;
  height: 0.9rem;
  display: grid;
  place-items: center;
  padding: 0 0.18rem;
  border: 1px solid rgba(2, 8, 14, 0.9);
  border-radius: 999px;
  color: #031016;
  background: var(--cyan);
  box-shadow: 0 0 0.75rem rgba(140, 236, 255, 0.4);
  font-size: 0.44rem;
  font-weight: 800;
}

#chatHistoryCount[hidden] {
  display: none;
}

#orbChatSend,
#orbChatQueue {
  position: relative;
  width: 2.55rem;
  height: 2.55rem;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 1px solid rgba(140, 236, 255, 0.55);
  border-radius: 50%;
  color: #eaffff;
  background: radial-gradient(circle at 40% 35%, rgba(68, 202, 229, 0.5), rgba(6, 45, 60, 0.78));
  box-shadow:
    0 0 1.35rem rgba(68, 211, 237, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.13);
  cursor: pointer;
  transition: transform 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

#orbChatQueue {
  width: auto;
  min-width: 4.2rem;
  padding: 0 0.78rem;
  border-color: rgba(148, 185, 196, 0.36);
  border-radius: 999px;
  color: rgba(202, 226, 232, 0.88);
  background: rgba(4, 17, 25, 0.76);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  font-size: 0.54rem;
  font-weight: 720;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

#orbChatQueue:hover {
  border-color: rgba(140, 236, 255, 0.6);
  color: #eaffff;
  background: rgba(10, 48, 60, 0.72);
  transform: translateY(-1px);
}

#orbChatQueue[hidden] {
  display: none;
}

#orbChatSend::after {
  content: "";
  position: absolute;
  inset: -0.28rem;
  border: 1px solid rgba(140, 236, 255, 0.09);
  border-radius: 50%;
}

#orbChatSend svg {
  width: 1rem;
  height: 1rem;
}

#orbChatSend > span {
  font-size: 0.52rem;
  font-weight: 760;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

#orbChatSend[data-mode="steer"],
#orbChatSend[data-mode="stop"] {
  width: auto;
  min-width: 4.65rem;
  padding: 0 0.72rem;
  grid-auto-flow: column;
  gap: 0.38rem;
  border-radius: 999px;
}

#orbChatSend[data-mode="stop"] {
  border-color: rgba(255, 151, 151, 0.64);
  color: #fff4f4;
  background: radial-gradient(circle at 40% 35%, rgba(217, 86, 94, 0.48), rgba(72, 20, 29, 0.86));
}

#orbChatSend[data-mode="stop"]::after,
#orbChatSend[data-mode="steer"]::after {
  border-radius: 999px;
}

#orbChatSend[data-mode="voice"] svg {
  width: 1.16rem;
  height: 1.16rem;
}

#orbChatSend[data-mode="voice"] {
  touch-action: none;
}

#orbChatSend[data-recording="true"] {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.92);
  background: radial-gradient(circle at center, rgba(84, 229, 252, 0.9), rgba(8, 74, 91, 0.96));
  box-shadow: 0 0 0 0.4rem rgba(140, 236, 255, 0.1), 0 0 2.8rem rgba(89, 226, 250, 0.72);
  transform: scale(1.08);
}

#orbChatSend:hover {
  background: radial-gradient(circle at 40% 35%, rgba(91, 229, 252, 0.66), rgba(9, 61, 76, 0.86));
  box-shadow: 0 0 1.8rem rgba(68, 211, 237, 0.3);
  transform: rotate(-4deg) scale(1.04);
}

#orbChatSend:active {
  transform: scale(0.97);
}

#orbChatSend:disabled {
  opacity: 0.46;
  cursor: wait;
  transform: none;
}

#orbChatHint {
  margin-top: 0.45rem;
  color: rgba(149, 171, 181, 0.72);
  font-size: 0.68rem;
  letter-spacing: 0.03em;
  text-align: center;
}

#orbChatQueueStatus {
  margin: 0.38rem 0 0;
  color: rgba(140, 236, 255, 0.78);
  font-size: 0.57rem;
  font-weight: 620;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
}

#orbChatQueueStatus[hidden] {
  display: none;
}

#voicePrivacy {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.42rem;
  margin-top: 0.42rem;
  color: rgba(142, 169, 180, 0.62);
  font-size: 0.51rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  pointer-events: auto;
}

#voicePrivacy span {
  width: 0.32rem;
  height: 0.32rem;
  border-radius: 50%;
  background: #57f2c0;
  box-shadow: 0 0 0.6rem rgba(87, 242, 192, 0.68);
}

#voicePrivacy p {
  margin: 0;
}

#voiceModeToggle {
  padding: 0.14rem 0.34rem;
  border: 1px solid rgba(140, 236, 255, 0.2);
  color: rgba(170, 216, 226, 0.72);
  background: rgba(4, 18, 26, 0.48);
  font: inherit;
  letter-spacing: 0.11em;
  cursor: pointer;
}

#voiceModeToggle:hover,
#voiceModeToggle[aria-pressed="true"] {
  border-color: rgba(140, 236, 255, 0.52);
  color: #e9fcff;
  background: rgba(12, 55, 68, 0.58);
}

/* Live voice telemetry */
#voiceControlDeck {
  position: absolute;
  top: clamp(4.8rem, 9vh, 6.5rem);
  right: clamp(1rem, 2vw, 1.6rem);
  z-index: 24;
  width: min(19rem, calc(100% - 2rem));
  padding: 0.72rem 0.78rem 0.68rem;
  border: 1px solid rgba(140, 236, 255, 0.28);
  border-top-color: rgba(140, 236, 255, 0.82);
  color: rgba(224, 246, 250, 0.88);
  background:
    linear-gradient(135deg, rgba(21, 100, 118, 0.24), transparent 45%),
    rgba(2, 9, 16, 0.86);
  box-shadow: 0 1.4rem 4rem rgba(0, 0, 0, 0.46);
  backdrop-filter: blur(18px) saturate(135%);
  clip-path: polygon(0 0, calc(100% - 0.8rem) 0, 100% 0.8rem, 100% 100%, 0.8rem 100%, 0 calc(100% - 0.8rem));
  animation: gifViewerEnter 260ms cubic-bezier(0.16, 0.84, 0.26, 1) both;
}

#voiceControlDeck[hidden] {
  display: none;
}

#voiceControlDeck > header,
#voiceControlDeck > footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

#voiceControlDeck > header p,
#voiceControlDeck > footer span {
  color: rgba(140, 236, 255, 0.55);
  font-size: 0.4rem;
  font-weight: 760;
  letter-spacing: 0.15em;
}

#voiceDeckState {
  display: block;
  margin-top: 0.16rem;
  color: #eafbfe;
  font-size: 0.68rem;
  font-weight: 520;
  letter-spacing: 0.12em;
}

#voiceElapsed {
  color: var(--cyan);
  font-family: "Cascadia Code", "SFMono-Regular", Consolas, monospace;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-shadow: 0 0 0.8rem rgba(140, 236, 255, 0.4);
}

.voice-spectral-meter {
  height: 2.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  margin: 0.62rem 0;
  padding: 0.25rem 0;
  border-block: 1px solid rgba(140, 236, 255, 0.09);
}

.voice-spectral-meter i {
  width: 2px;
  height: 100%;
  background: linear-gradient(180deg, rgba(217, 185, 101, 0.5), var(--cyan), rgba(140, 236, 255, 0.14));
  box-shadow: 0 0 0.55rem rgba(140, 236, 255, 0.38);
  transform: scaleY(calc(0.12 + var(--voice-level) * 0.88));
  transition: transform 70ms linear;
}

.voice-spectral-meter i:nth-child(3n + 1) { height: 58%; }
.voice-spectral-meter i:nth-child(3n + 2) { height: 82%; }
.voice-spectral-meter i:nth-child(4n) { height: 42%; }

#voiceControlDeck > footer {
  justify-content: flex-end;
  flex-wrap: wrap;
}

#voiceControlDeck > footer span {
  margin-right: auto;
}

#voiceMute,
#voiceDeckAction {
  padding: 0.34rem 0.46rem;
  border: 1px solid rgba(140, 236, 255, 0.24);
  color: rgba(205, 235, 241, 0.8);
  background: rgba(5, 26, 35, 0.66);
  font-size: 0.42rem;
  font-weight: 740;
  letter-spacing: 0.09em;
  cursor: pointer;
}

#voiceMute:hover,
#voiceMute[aria-pressed="true"],
#voiceDeckAction:hover {
  border-color: rgba(140, 236, 255, 0.62);
  color: #fff;
}

#voiceDeckAction {
  border-color: rgba(217, 185, 101, 0.36);
  color: rgba(238, 215, 151, 0.84);
}

/* Intent-driven client concierge */
#conciergePanel {
  position: fixed;
  top: max(1rem, env(safe-area-inset-top));
  right: calc(var(--profile-width) + 1rem);
  z-index: 86;
  width: min(34rem, calc(100vw - var(--rail-width) - var(--profile-width) - 2rem));
  max-height: calc(100dvh - 2rem);
  overflow: auto;
  filter: drop-shadow(0 2rem 5rem rgba(0, 0, 0, 0.7));
  scrollbar-width: thin;
  scrollbar-color: rgba(140, 236, 255, 0.35) transparent;
  animation: conciergeEnter 340ms cubic-bezier(0.16, 0.84, 0.26, 1) both;
}

#conciergePanel[hidden] {
  display: none;
}

.concierge-frame {
  position: relative;
  padding: 1rem;
  overflow: hidden;
  border: 1px solid rgba(140, 236, 255, 0.32);
  border-top-color: rgba(140, 236, 255, 0.9);
  background:
    linear-gradient(135deg, rgba(25, 118, 138, 0.24), transparent 34%),
    radial-gradient(circle at 88% 12%, rgba(217, 185, 101, 0.09), transparent 26%),
    rgba(2, 7, 14, 0.97);
  clip-path: polygon(0 0, calc(100% - 1.2rem) 0, 100% 1.2rem, 100% 100%, 1.2rem 100%, 0 calc(100% - 1.2rem));
}

.concierge-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.28;
  background-image:
    linear-gradient(rgba(140, 236, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(140, 236, 255, 0.035) 1px, transparent 1px);
  background-size: 2.2rem 2.2rem;
  mask-image: linear-gradient(180deg, #000, transparent 70%);
}

.concierge-frame > * {
  position: relative;
  z-index: 1;
}

.concierge-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid rgba(140, 236, 255, 0.13);
}

#conciergeKind {
  color: rgba(140, 236, 255, 0.58);
  font-size: 0.44rem;
  font-weight: 760;
  letter-spacing: 0.2em;
}

#conciergeTitle {
  margin-top: 0.22rem;
  color: #f2fcfe;
  font-size: 1.08rem;
  font-weight: 430;
}

#conciergeClose {
  width: 2rem;
  height: 2rem;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 1px solid rgba(140, 236, 255, 0.22);
  border-radius: 50%;
  color: rgba(214, 238, 243, 0.74);
  background: rgba(3, 16, 23, 0.62);
  cursor: pointer;
}

#conciergeClose:hover {
  border-color: rgba(140, 236, 255, 0.58);
  color: #fff;
}

#conciergeClose svg {
  width: 0.9rem;
  height: 0.9rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 1.6;
}

#conciergeStatus {
  margin: 0.7rem 0 0;
  padding: 0.55rem 0.65rem;
  border-left: 2px solid #fb7185;
  color: #fecdd3;
  background: rgba(127, 29, 29, 0.18);
  font-size: 0.68rem;
}

.concierge-view {
  padding-top: 0.9rem;
}

.concierge-view[hidden] {
  display: none;
}

.concierge-lede {
  color: rgba(189, 213, 219, 0.76);
  font-size: 0.74rem;
  line-height: 1.55;
}

.concierge-intent-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.58rem;
  margin-top: 0.85rem;
}

.concierge-intent-grid button {
  min-height: 6.1rem;
  display: grid;
  align-content: start;
  gap: 0.36rem;
  padding: 0.78rem;
  border: 1px solid rgba(140, 236, 255, 0.18);
  border-left-color: rgba(140, 236, 255, 0.5);
  color: rgba(233, 247, 250, 0.92);
  background:
    linear-gradient(135deg, rgba(33, 128, 146, 0.14), transparent 50%),
    rgba(3, 15, 23, 0.72);
  text-align: left;
  cursor: pointer;
  clip-path: polygon(0 0, calc(100% - 0.7rem) 0, 100% 0.7rem, 100% 100%, 0.7rem 100%, 0 calc(100% - 0.7rem));
  transition: transform 170ms ease, border-color 170ms ease, background 170ms ease;
}

.concierge-intent-grid button:first-child {
  grid-row: span 2;
  min-height: 12.8rem;
  align-content: end;
  background:
    radial-gradient(circle at 70% 22%, rgba(83, 220, 245, 0.22), transparent 24%),
    linear-gradient(145deg, rgba(26, 135, 158, 0.25), transparent 58%),
    rgba(3, 15, 23, 0.78);
}

.concierge-intent-grid button:hover {
  border-color: rgba(140, 236, 255, 0.58);
  background:
    linear-gradient(135deg, rgba(44, 175, 199, 0.23), transparent 52%),
    rgba(4, 23, 32, 0.86);
  transform: translateY(-2px);
}

.concierge-intent-grid span,
.concierge-choice-grid legend,
.concierge-field > span,
.schedule-slot > span {
  color: rgba(140, 236, 255, 0.56);
  font-size: 0.43rem;
  font-weight: 760;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.concierge-intent-grid b {
  font-size: 0.83rem;
  font-weight: 510;
}

.concierge-intent-grid small {
  color: rgba(153, 182, 191, 0.66);
  font-size: 0.59rem;
  line-height: 1.45;
}

.concierge-back,
.schedule-add {
  padding: 0;
  border: 0;
  color: rgba(140, 236, 255, 0.72);
  background: transparent;
  font-size: 0.55rem;
  letter-spacing: 0.08em;
  cursor: pointer;
}

.concierge-back:hover,
.schedule-add:hover {
  color: #fff;
}

.concierge-form > .concierge-lede {
  margin-top: 0.62rem;
}

.concierge-choice-grid {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.85rem;
  padding: 0;
  border: 0;
}

.concierge-choice-grid legend {
  width: 100%;
  margin-bottom: 0.1rem;
}

.concierge-choice-grid label {
  cursor: pointer;
}

.concierge-choice-grid input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.concierge-choice-grid label span {
  display: block;
  padding: 0.44rem 0.62rem;
  border: 1px solid rgba(140, 236, 255, 0.2);
  color: rgba(192, 221, 227, 0.76);
  background: rgba(4, 20, 28, 0.58);
  font-size: 0.57rem;
  transition: border-color 150ms ease, color 150ms ease, background 150ms ease;
}

.concierge-choice-grid input:focus-visible + span,
.concierge-choice-grid input:checked + span {
  border-color: rgba(140, 236, 255, 0.72);
  color: #f1fdff;
  background: rgba(18, 78, 92, 0.64);
  box-shadow: 0 0 1.2rem rgba(69, 205, 231, 0.09);
}

.concierge-field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.58rem;
  margin-top: 0.58rem;
}

.concierge-field {
  min-width: 0;
  display: grid;
  gap: 0.28rem;
  margin-top: 0.7rem;
}

.concierge-field-grid .concierge-field {
  margin-top: 0;
}

.concierge-field-wide {
  grid-column: 1 / -1;
}

.concierge-field input,
.concierge-field select,
.concierge-field textarea,
.schedule-slot input {
  width: 100%;
  min-width: 0;
  padding: 0.58rem 0.62rem;
  border: 1px solid rgba(140, 236, 255, 0.18);
  border-left-color: rgba(140, 236, 255, 0.46);
  outline: 0;
  color: rgba(235, 248, 251, 0.92);
  background: rgba(2, 14, 21, 0.82);
  font: inherit;
  font-size: 0.69rem;
  color-scheme: dark;
}

.concierge-field textarea {
  min-height: 5.5rem;
  resize: vertical;
  line-height: 1.45;
}

.concierge-field input:focus,
.concierge-field select:focus,
.concierge-field textarea:focus,
.schedule-slot input:focus {
  border-color: rgba(140, 236, 255, 0.68);
  box-shadow: 0 0 1.2rem rgba(69, 205, 231, 0.08);
}

.concierge-duration-grid label {
  flex: 1 1 4.5rem;
}

.concierge-duration-grid label span {
  text-align: center;
}

.schedule-slots {
  display: grid;
  gap: 0.5rem;
  margin-top: 0.7rem;
}

.schedule-slot {
  display: grid;
  grid-template-columns: 4.4rem 1fr 1fr;
  align-items: end;
  gap: 0.5rem;
  padding: 0.52rem;
  border: 1px solid rgba(140, 236, 255, 0.13);
  background: rgba(2, 13, 20, 0.58);
}

.schedule-slot[hidden] {
  display: none;
}

.schedule-slot > span {
  align-self: center;
}

.schedule-slot label {
  display: grid;
  gap: 0.25rem;
  color: rgba(166, 194, 202, 0.64);
  font-size: 0.48rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.schedule-add {
  margin-top: 0.58rem;
}

.concierge-submit-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  margin-top: 0.92rem;
  padding-top: 0.78rem;
  border-top: 1px solid rgba(140, 236, 255, 0.13);
}

.concierge-submit-row small {
  max-width: 13rem;
  color: rgba(133, 164, 174, 0.56);
  font-size: 0.4rem;
  line-height: 1.45;
  letter-spacing: 0.12em;
}

.concierge-submit-row button {
  min-width: 10.5rem;
  padding: 0.62rem 0.72rem;
  border: 1px solid rgba(140, 236, 255, 0.58);
  color: #eefcff;
  background: linear-gradient(100deg, rgba(17, 93, 110, 0.86), rgba(5, 38, 49, 0.88));
  font-size: 0.64rem;
  text-align: left;
  cursor: pointer;
}

.concierge-submit-row button span {
  float: right;
  color: var(--cyan);
}

.concierge-submit-row button:hover {
  border-color: rgba(140, 236, 255, 0.92);
  background: linear-gradient(100deg, rgba(24, 120, 139, 0.92), rgba(6, 50, 63, 0.92));
}

.availability-options {
  display: grid;
  gap: 0.58rem;
  margin-top: 0.8rem;
}

.availability-card {
  display: grid;
  grid-template-columns: 1.15fr 1fr auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.78rem;
  border: 1px solid rgba(140, 236, 255, 0.24);
  border-left: 2px solid rgba(87, 242, 192, 0.78);
  color: #effcff;
  background:
    linear-gradient(90deg, rgba(29, 122, 104, 0.14), transparent 36%),
    rgba(3, 18, 25, 0.8);
  text-align: left;
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.availability-card:hover:not(:disabled) {
  border-color: rgba(87, 242, 192, 0.66);
  background: rgba(7, 37, 41, 0.88);
  transform: translateX(0.18rem);
}

.availability-card:disabled {
  border-left-color: rgba(148, 163, 184, 0.3);
  color: rgba(156, 174, 180, 0.45);
  cursor: not-allowed;
  filter: saturate(0.4);
}

.availability-date {
  font-size: 0.7rem;
}

.availability-card strong {
  font-size: 0.75rem;
  font-weight: 520;
}

.availability-card small {
  color: rgba(87, 242, 192, 0.72);
  font-size: 0.4rem;
  font-weight: 760;
  letter-spacing: 0.12em;
}

.availability-card:disabled small {
  color: rgba(184, 199, 204, 0.46);
}

.availability-privacy {
  display: flex;
  align-items: center;
  gap: 0.42rem;
  margin-top: 0.8rem;
  color: rgba(146, 176, 184, 0.62);
  font-size: 0.52rem;
  letter-spacing: 0.06em;
}

.availability-privacy span {
  width: 0.34rem;
  height: 0.34rem;
  border-radius: 50%;
  background: #57f2c0;
  box-shadow: 0 0 0.65rem rgba(87, 242, 192, 0.58);
}

@keyframes conciergeEnter {
  from { opacity: 0; transform: translateY(-0.7rem) scale(0.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Consequential-action confirmation */
#actionConfirmation {
  position: fixed;
  top: max(1.1rem, env(safe-area-inset-top));
  right: calc(var(--profile-width) + 1.1rem);
  z-index: 90;
  width: min(27rem, calc(100vw - var(--rail-width) - var(--profile-width) - 2.2rem));
  filter: drop-shadow(0 2rem 4rem rgba(0, 0, 0, 0.65));
  animation: gifViewerEnter 300ms cubic-bezier(0.16, 0.84, 0.26, 1) both;
}

#actionConfirmation[hidden] {
  display: none;
}

.action-confirmation-frame {
  padding: 1rem;
  overflow: hidden;
  border: 1px solid rgba(140, 236, 255, 0.38);
  border-top-color: rgba(140, 236, 255, 0.88);
  background:
    linear-gradient(135deg, rgba(29, 105, 121, 0.2), transparent 35%),
    rgba(2, 7, 14, 0.97);
  clip-path: polygon(0 0, calc(100% - 1.15rem) 0, 100% 1.15rem, 100% 100%, 1.15rem 100%, 0 calc(100% - 1.15rem));
}

.action-confirmation-frame > header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.78rem;
  border-bottom: 1px solid rgba(140, 236, 255, 0.13);
}

#actionConfirmationKind,
.action-confirmation-lock {
  color: rgba(140, 236, 255, 0.62);
  font-size: 0.45rem;
  font-weight: 750;
  letter-spacing: 0.18em;
}

#actionConfirmationTitle {
  margin-top: 0.2rem;
  color: #f1fbfd;
  font-size: 1rem;
  font-weight: 430;
}

.action-confirmation-lock {
  padding: 0.28rem 0.42rem;
  border: 1px solid rgba(217, 185, 101, 0.32);
  color: rgba(230, 202, 129, 0.78);
}

#actionConfirmationSummary {
  margin: 0.78rem 0;
  color: rgba(206, 226, 232, 0.76);
  font-size: 0.72rem;
  line-height: 1.5;
}

#actionConfirmationDetails {
  max-height: min(42vh, 20rem);
  overflow: auto;
  display: grid;
  gap: 0.6rem;
  padding: 0.75rem;
  border: 1px solid rgba(140, 236, 255, 0.12);
  background: rgba(1, 5, 10, 0.58);
}

#actionConfirmationDetails div {
  display: grid;
  grid-template-columns: 5.2rem 1fr;
  gap: 0.7rem;
}

#actionConfirmationDetails dt {
  color: rgba(140, 236, 255, 0.58);
  font-size: 0.49rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

#actionConfirmationDetails dd {
  color: rgba(238, 247, 249, 0.9);
  font-size: 0.7rem;
  line-height: 1.42;
  overflow-wrap: anywhere;
}

.action-confirmation-frame > footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.55rem;
  margin-top: 0.8rem;
}

.action-confirmation-frame > footer button {
  min-height: 2.45rem;
  padding: 0.55rem 0.85rem;
  border: 1px solid rgba(140, 236, 255, 0.28);
  color: rgba(220, 237, 241, 0.82);
  background: rgba(4, 18, 27, 0.76);
  font-size: 0.64rem;
  cursor: pointer;
}

#actionConfirmationAccept {
  border-color: rgba(140, 236, 255, 0.72);
  color: #f2fdff;
  background: linear-gradient(135deg, rgba(31, 126, 146, 0.82), rgba(7, 54, 69, 0.92));
}

.action-confirmation-note {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.65rem;
  color: rgba(144, 169, 178, 0.6);
  font-size: 0.46rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.action-confirmation-note span {
  width: 0.32rem;
  height: 0.32rem;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0.6rem rgba(217, 185, 101, 0.55);
}

/* Profile dossier */
#profilePanel {
  position: fixed;
  inset: 0 0 0 auto;
  z-index: 35;
  width: var(--profile-width);
  display: flex;
  flex-direction: column;
  overflow: hidden auto;
  border-left: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(18, 29, 40, 0.16), transparent 35%),
    var(--panel);
  box-shadow: -1.5rem 0 4rem rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(24px) saturate(125%);
  scrollbar-width: thin;
  scrollbar-color: rgba(140, 236, 255, 0.24) transparent;
}

#profilePanel::before {
  content: "";
  position: absolute;
  top: 0;
  left: -1px;
  z-index: 4;
  width: 1px;
  height: 28%;
  background: linear-gradient(180deg, var(--cyan), transparent);
  box-shadow: 0 0 1rem rgba(140, 236, 255, 0.4);
}

.public-profile-dossier {
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
}

.public-profile-dossier[hidden],
.owner-workspace[hidden] {
  display: none;
}

.profile-visual {
  position: relative;
  flex: 0 0 auto;
  height: clamp(13.5rem, 32vh, 18rem);
  overflow: hidden;
  background: #080d14;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 1.7rem 100%, 0 calc(100% - 1.7rem));
}

.profile-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 50%, rgba(4, 9, 17, 0.92)),
    linear-gradient(90deg, rgba(21, 65, 79, 0.25), transparent 55%);
  pointer-events: none;
}

.profile-portrait {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 50% 28%;
  filter: saturate(0.82) contrast(1.06) brightness(0.88);
  transform: scale(1.025);
  transition: transform 700ms cubic-bezier(0.2, 0.8, 0.2, 1), filter 700ms ease;
}

#profilePanel:hover .profile-portrait {
  filter: saturate(0.96) contrast(1.03) brightness(0.93);
  transform: scale(1.055);
}

.profile-scanline {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 0%, rgba(140, 236, 255, 0.15) 49.5%, transparent 50.5%);
  background-size: 100% 9rem;
  opacity: 0.35;
  animation: profileScan 7s linear infinite;
}

.profile-image-code {
  position: absolute;
  right: 1rem;
  bottom: 0.75rem;
  z-index: 3;
  color: rgba(176, 215, 224, 0.46);
  font-size: 0.46rem;
  font-weight: 650;
  letter-spacing: 0.2em;
}

.profile-content {
  padding: clamp(1.2rem, 3vh, 1.75rem) clamp(1.25rem, 2.4vw, 1.8rem) 1.25rem;
}

.profile-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--cyan-soft);
  font-size: 0.54rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.profile-eyebrow::before {
  content: "";
  width: 1.7rem;
  height: 1px;
  background: var(--cyan);
  box-shadow: 0 0 0.5rem rgba(140, 236, 255, 0.4);
}

.profile-content h1 {
  margin-top: 0.58rem;
  font-size: clamp(2.1rem, 3.4vw, 3.05rem);
  font-weight: 320;
  letter-spacing: -0.065em;
  line-height: 0.84;
}

.profile-content h1 span {
  color: var(--cyan);
}

.profile-description {
  margin-top: 1.15rem;
  color: rgba(190, 204, 211, 0.76);
  font-size: clamp(0.74rem, 0.9vw, 0.84rem);
  font-weight: 350;
  line-height: 1.6;
}

.profile-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.38rem;
  margin-top: 1rem;
}

.profile-tags span {
  padding: 0.36rem 0.5rem;
  color: rgba(177, 212, 220, 0.72);
  border: 1px solid rgba(132, 204, 218, 0.14);
  background: rgba(8, 25, 34, 0.28);
  font-size: 0.5rem;
  font-weight: 620;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.resume-link {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.2rem 1rem;
  align-items: center;
  margin-top: 1.15rem;
  padding: 0.75rem 2.8rem 0.72rem 0.85rem;
  overflow: hidden;
  border: 1px solid rgba(140, 236, 255, 0.28);
  background: linear-gradient(90deg, rgba(16, 62, 73, 0.34), rgba(4, 13, 20, 0.2));
  transition: border-color 180ms ease, background 180ms ease, transform 180ms ease;
}

.resume-link::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 2px;
  background: var(--cyan);
  box-shadow: 0 0 0.7rem rgba(140, 236, 255, 0.5);
}

.resume-link span {
  color: rgba(235, 249, 252, 0.94);
  font-size: 0.78rem;
  font-weight: 540;
}

.resume-link small {
  grid-row: 2;
  color: rgba(141, 172, 182, 0.55);
  font-size: 0.45rem;
  font-weight: 650;
  letter-spacing: 0.18em;
}

.resume-link svg {
  position: absolute;
  right: 0.9rem;
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: var(--cyan);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.5;
  transition: transform 180ms ease;
}

.resume-link:hover {
  border-color: rgba(140, 236, 255, 0.55);
  background: linear-gradient(90deg, rgba(20, 86, 99, 0.42), rgba(5, 19, 28, 0.25));
  transform: translateY(-2px);
}

.resume-link:hover svg {
  transform: translate(0.14rem, -0.14rem);
}

#awardFeature {
  position: relative;
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: minmax(6.8rem, 0.8fr) minmax(8rem, 1.2fr);
  align-items: center;
  gap: 0.2rem;
  margin: auto 1rem max(1rem, env(safe-area-inset-bottom));
  padding: 0.7rem 0.35rem 0.7rem 0.9rem;
  border-top: 1px solid rgba(217, 185, 101, 0.28);
  border-bottom: 1px solid rgba(217, 185, 101, 0.13);
  background:
    radial-gradient(circle at 80% 50%, rgba(158, 115, 29, 0.2), transparent 54%),
    rgba(14, 12, 8, 0.26);
  overflow: hidden;
}

#awardFeature::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 3.8rem;
  height: 1px;
  background: var(--gold);
  box-shadow: 0 0 1rem rgba(217, 185, 101, 0.35);
}

.award-copy {
  position: relative;
  z-index: 2;
}

.award-copy p {
  color: rgba(217, 185, 101, 0.72);
  font-size: 0.45rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

#awardFeature figcaption {
  margin-top: 0.35rem;
  color: rgba(231, 225, 203, 0.82);
  font-size: clamp(0.58rem, 0.75vw, 0.7rem);
  font-weight: 560;
  letter-spacing: 0.045em;
  line-height: 1.35;
  text-transform: uppercase;
}

.award-emblem {
  width: 100%;
  max-height: 8.25rem;
  object-fit: contain;
  filter:
    drop-shadow(0 0.6rem 0.8rem rgba(0, 0, 0, 0.42))
    drop-shadow(0 0 1rem rgba(217, 185, 101, 0.08));
}

/* Authenticated owner workspace */
.owner-workspace {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  min-height: 100%;
  flex-direction: column;
  gap: 1rem;
  padding: clamp(1.35rem, 3vh, 2rem) clamp(1.15rem, 2vw, 1.6rem) 1.2rem;
  overflow: hidden;
  background:
    radial-gradient(circle at 100% 0%, rgba(140, 236, 255, 0.09), transparent 32%),
    linear-gradient(180deg, rgba(6, 17, 27, 0.9), rgba(3, 8, 15, 0.96));
}

.owner-workspace::after {
  content: "OWNER / SC-01";
  position: absolute;
  top: 0.65rem;
  right: 1.15rem;
  color: rgba(140, 236, 255, 0.2);
  font-family: ui-monospace, "Cascadia Code", monospace;
  font-size: 0.42rem;
  letter-spacing: 0.18em;
  pointer-events: none;
}

.owner-workspace-header {
  display: flex;
  flex: 0 0 auto;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.95rem;
  border-bottom: 1px solid rgba(140, 236, 255, 0.18);
}

.owner-workspace-header p,
.workspace-browser-heading p {
  color: rgba(140, 236, 255, 0.68);
  font-family: ui-monospace, "Cascadia Code", monospace;
  font-size: 0.48rem;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.owner-workspace-header p span {
  display: inline-block;
  width: 0.38rem;
  height: 0.38rem;
  margin-right: 0.35rem;
  border-radius: 50%;
  background: #63f3bb;
  box-shadow: 0 0 0.6rem rgba(99, 243, 187, 0.72);
}

.owner-workspace-header h1 {
  margin-top: 0.5rem;
  color: rgba(241, 251, 253, 0.96);
  font-size: clamp(1.8rem, 2.8vw, 2.55rem);
  font-weight: 310;
  letter-spacing: -0.055em;
  line-height: 0.88;
}

.owner-workspace-header h1 b {
  color: var(--cyan);
  font-weight: 510;
}

.owner-workspace-lock {
  margin-bottom: 0.15rem;
  padding: 0.42rem 0.55rem;
  border: 1px solid rgba(99, 243, 187, 0.3);
  color: rgba(145, 255, 211, 0.8);
  font-family: ui-monospace, "Cascadia Code", monospace;
  font-size: 0.43rem;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.owner-workspace-actions {
  display: grid;
  flex: 0 0 auto;
  grid-template-columns: 1fr auto;
  align-items: stretch;
  gap: 0.55rem;
}

.owner-console-link.resume-link {
  margin-top: 0;
  min-width: 0;
}

#ownerLogout,
#workspaceRefresh,
.workspace-breadcrumbs button,
.workspace-entry,
#workspacePreviewBack {
  border: 0;
  color: inherit;
  background: transparent;
  cursor: pointer;
}

#ownerLogout {
  padding: 0.65rem;
  border: 1px solid rgba(138, 158, 170, 0.18);
  color: rgba(164, 180, 189, 0.62);
  font-family: ui-monospace, "Cascadia Code", monospace;
  font-size: 0.44rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: border-color 160ms ease, color 160ms ease, background 160ms ease;
}

#ownerLogout:hover {
  border-color: rgba(255, 135, 135, 0.38);
  color: rgba(255, 184, 184, 0.82);
  background: rgba(103, 25, 34, 0.14);
}

.workspace-browser {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  flex-direction: column;
  border: 1px solid rgba(140, 236, 255, 0.15);
  background: rgba(1, 6, 12, 0.48);
  overflow: hidden;
}

.workspace-browser-heading {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.82rem 0.85rem 0.72rem;
  border-bottom: 1px solid rgba(140, 236, 255, 0.1);
}

.workspace-browser-heading span {
  display: block;
  max-width: 13rem;
  margin-top: 0.24rem;
  overflow: hidden;
  color: rgba(176, 196, 205, 0.46);
  font-family: ui-monospace, "Cascadia Code", monospace;
  font-size: 0.48rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspace-browser-controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.28rem;
}

.workspace-browser-controls button {
  min-height: 1.65rem;
  padding: 0 0.38rem;
  color: rgba(140, 236, 255, 0.52);
  font-family: ui-monospace, "Cascadia Code", monospace;
  font-size: 0.39rem;
  font-weight: 700;
  letter-spacing: 0.07em;
}

.workspace-browser-controls button:hover {
  color: var(--cyan);
  background: rgba(140, 236, 255, 0.07);
}

.workspace-browser-controls button:disabled {
  cursor: wait;
  opacity: 0.35;
}

.workspace-breadcrumbs {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.25rem;
  min-height: 2.25rem;
  padding: 0.55rem 0.75rem;
  overflow-x: auto;
  border-bottom: 1px solid rgba(140, 236, 255, 0.08);
  scrollbar-width: thin;
}

.workspace-breadcrumbs button,
.workspace-breadcrumbs span {
  flex: 0 0 auto;
  color: rgba(178, 205, 214, 0.54);
  font-family: ui-monospace, "Cascadia Code", monospace;
  font-size: 0.49rem;
}

.workspace-breadcrumbs button:hover,
.workspace-breadcrumbs button:last-child {
  color: var(--cyan);
}

.workspace-status {
  margin: auto;
  padding: 1rem;
  color: rgba(172, 195, 204, 0.56);
  font-size: 0.68rem;
  line-height: 1.45;
  text-align: center;
}

.workspace-status[data-state="error"] {
  color: rgba(255, 158, 158, 0.8);
}

.workspace-entries {
  flex: 1 1 auto;
  min-height: 0;
  padding: 0.3rem;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(140, 236, 255, 0.24) transparent;
}

.workspace-entry {
  display: grid;
  width: 100%;
  grid-template-columns: 1.25rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.55rem;
  padding: 0.58rem 0.55rem;
  border-left: 1px solid transparent;
  text-align: left;
  transition: border-color 140ms ease, background 140ms ease;
}

.workspace-entry:hover {
  border-left-color: var(--cyan);
  background: rgba(140, 236, 255, 0.055);
}

.workspace-entry.is-drop-target,
.workspace-entries.is-drop-target {
  border-color: rgba(99, 215, 255, 0.72);
  background: rgba(50, 156, 211, 0.13);
  box-shadow: inset 0 0 0 1px rgba(99, 215, 255, 0.18);
}

.workspace-entry-icon {
  position: relative;
  width: 1.25rem;
  height: 1.25rem;
  display: grid;
  place-items: center;
  color: rgba(140, 236, 255, 0.52);
  text-align: center;
}

.workspace-entry-icon svg {
  width: 1.1rem;
  height: 1.1rem;
}

.workspace-entry-icon .file-manager-extension {
  right: -0.15rem;
  bottom: -0.05rem;
  min-width: 0.8rem;
  padding: 0.08rem 0.1rem;
  font-size: 0.25rem;
}

.workspace-entry[data-type="directory"] .workspace-entry-icon {
  color: rgba(217, 185, 101, 0.72);
}

.workspace-entry-name {
  overflow: hidden;
  color: rgba(222, 235, 240, 0.82);
  font-family: ui-monospace, "Cascadia Code", monospace;
  font-size: 0.58rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspace-entry small {
  color: rgba(137, 158, 168, 0.38);
  font-family: ui-monospace, "Cascadia Code", monospace;
  font-size: 0.4rem;
  letter-spacing: 0.08em;
}

.workspace-preview {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  flex-direction: column;
}

.workspace-preview[hidden] {
  display: none;
}

.workspace-preview header {
  display: grid;
  flex: 0 0 auto;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.65rem;
  padding: 0.65rem 0.75rem;
  border-bottom: 1px solid rgba(140, 236, 255, 0.08);
}

#workspacePreviewBack {
  color: var(--cyan-soft);
  font-size: 0.55rem;
}

.workspace-preview header div {
  min-width: 0;
}

.workspace-preview strong,
.workspace-preview small {
  display: block;
  overflow: hidden;
  font-family: ui-monospace, "Cascadia Code", monospace;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspace-preview strong {
  color: rgba(230, 242, 246, 0.88);
  font-size: 0.58rem;
}

.workspace-preview small {
  margin-top: 0.18rem;
  color: rgba(142, 164, 174, 0.45);
  font-size: 0.42rem;
}

#workspacePreviewContent {
  flex: 1 1 auto;
  min-height: 0;
  padding: 0.9rem;
  overflow: auto;
  color: rgba(196, 218, 225, 0.72);
  font-family: ui-monospace, "Cascadia Code", monospace;
  font-size: 0.54rem;
  line-height: 1.55;
  tab-size: 2;
  white-space: pre-wrap;
  word-break: break-word;
  scrollbar-width: thin;
  scrollbar-color: rgba(140, 236, 255, 0.24) transparent;
}

body[data-owner="true"] #conversationStarters,
body[data-owner="true"] #conciergeToggle {
  display: none !important;
}

body[data-owner="true"] .profile-toggle::before {
  content: "FILES";
  position: absolute;
  right: calc(100% + 0.45rem);
  padding: 0.28rem 0.38rem;
  border: 1px solid rgba(140, 236, 255, 0.2);
  color: rgba(140, 236, 255, 0.62);
  background: rgba(3, 9, 15, 0.86);
  font-family: ui-monospace, "Cascadia Code", monospace;
  font-size: 0.4rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.profile-toggle,
.profile-close,
.profile-scrim {
  display: none;
}

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

@keyframes cognitionListening {
  0%, 100% { transform: scale(0.96); opacity: 0.58; }
  50% { transform: scale(calc(1.01 + var(--voice-level) * 0.05)); opacity: 1; }
}

@keyframes cognitionSpeaking {
  from { transform: scale(0.98); opacity: 0.55; }
  to { transform: scale(calc(1.01 + var(--voice-level) * 0.15)); opacity: 1; }
}

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

@keyframes cognitionBreathe {
  0%,
  100% {
    opacity: 0.28;
    transform: scale(0.96);
  }
  50% {
    opacity: 0.72;
    transform: scale(1.03);
  }
}

@keyframes cognitionSignal {
  0%,
  100% {
    opacity: 0.3;
    transform: scaleX(0.45);
  }
  50% {
    opacity: 1;
    transform: scaleX(1);
  }
}

@keyframes cognitionNodeA {
  from {
    transform: rotate(0deg) translateX(var(--orbit-radius)) rotate(0deg);
  }
  to {
    transform: rotate(360deg) translateX(var(--orbit-radius)) rotate(-360deg);
  }
}

@keyframes cognitionNodeB {
  from {
    transform: rotate(135deg) translateX(clamp(5rem, 25vmin, 15rem)) rotate(-135deg);
  }
  to {
    transform: rotate(-225deg) translateX(clamp(5rem, 25vmin, 15rem)) rotate(225deg);
  }
}

@keyframes cognitionNodeC {
  from {
    transform: rotate(250deg) translateX(clamp(3.6rem, 18vmin, 10.5rem)) rotate(-250deg);
  }
  to {
    transform: rotate(610deg) translateX(clamp(3.6rem, 18vmin, 10.5rem)) rotate(-610deg);
  }
}

@keyframes signalPulse {
  0%,
  100% {
    opacity: 0.45;
    transform: scale(0.82);
  }
  50% {
    opacity: 1;
    transform: scale(1.15);
  }
}

@keyframes profileScan {
  from {
    background-position: 0 -9rem;
  }
  to {
    background-position: 0 18rem;
  }
}

@keyframes gifViewerEnter {
  from {
    opacity: 0;
    transform: translateY(1.25rem) scale(0.965);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes gifScan {
  to {
    transform: translateY(450%);
  }
}

@media (max-width: 1100px) {
  :root {
    --rail-width: 4.15rem;
    --profile-width: 19.25rem;
  }

  .profile-content {
    padding-inline: 1.25rem;
  }

  #chatDock {
    width: min(86%, 40rem);
  }
}

/* The profile becomes a deliberate drawer on tablets and phones. */
@media (max-width: 840px) {
  :root {
    --rail-width: 3.7rem;
    --profile-width: min(21rem, calc(100vw - var(--rail-width)));
  }

  #orbStage {
    right: 0;
  }

  #actionConfirmation {
    right: 1rem;
    width: min(27rem, calc(100vw - var(--rail-width) - 2rem));
  }

  #conciergePanel {
    right: 1rem;
    width: min(34rem, calc(100vw - var(--rail-width) - 2rem));
  }

  #profilePanel {
    z-index: 60;
    visibility: hidden;
    transform: translateX(102%);
    transition:
      transform 360ms cubic-bezier(0.2, 0.85, 0.2, 1),
      visibility 0s linear 360ms;
  }

  body.profile-open #profilePanel {
    visibility: visible;
    transform: translateX(0);
    transition-delay: 0s;
  }

  .profile-toggle {
    position: absolute;
    top: max(1rem, env(safe-area-inset-top));
    right: 1rem;
    z-index: 25;
    width: 3rem;
    height: 3rem;
    display: block;
    padding: 0;
    overflow: visible;
    border: 1px solid rgba(140, 236, 255, 0.42);
    border-radius: 50%;
    background: rgba(4, 11, 18, 0.78);
    box-shadow: 0 0.8rem 2.4rem rgba(0, 0, 0, 0.36);
    cursor: pointer;
    backdrop-filter: blur(14px);
  }

  .profile-toggle img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border-radius: 50%;
    filter: saturate(0.8) brightness(0.88);
  }

  .profile-toggle span {
    position: absolute;
    right: -0.02rem;
    bottom: 0.1rem;
    width: 0.58rem;
    height: 0.58rem;
    border: 2px solid #061019;
    border-radius: 50%;
    background: #57f2c0;
    box-shadow: 0 0 0.7rem rgba(87, 242, 192, 0.64);
  }

  .profile-close {
    position: absolute;
    top: max(0.85rem, env(safe-area-inset-top));
    right: 0.85rem;
    z-index: 8;
    width: 2.35rem;
    height: 2.35rem;
    display: grid;
    place-items: center;
    border: 1px solid rgba(217, 235, 240, 0.3);
    border-radius: 50%;
    color: #fff;
    background: rgba(3, 8, 15, 0.66);
    cursor: pointer;
    backdrop-filter: blur(12px);
  }

  .profile-close svg {
    width: 1rem;
    height: 1rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-width: 1.5;
  }

  .profile-scrim {
    position: fixed;
    inset: 0;
    z-index: 55;
    display: block;
    visibility: hidden;
    border: 0;
    background: rgba(0, 3, 8, 0.68);
    opacity: 0;
    cursor: default;
    backdrop-filter: blur(6px);
    transition:
      opacity 280ms ease,
      visibility 0s linear 280ms;
  }

  body.profile-open .profile-scrim {
    visibility: visible;
    opacity: 1;
    transition-delay: 0s;
  }

  .stage-readout {
    margin-right: 3.9rem;
  }
}

@media (max-width: 600px) {
  :root {
    --rail-width: 3.35rem;
  }

  #socialRail {
    padding-top: max(0.72rem, env(safe-area-inset-top));
  }

  .rail-mark {
    width: 2.25rem;
    height: 2.25rem;
  }

  .rail-axis {
    height: clamp(1.4rem, 5vh, 2.4rem);
    margin-block: 0.45rem;
  }

  .rail-links {
    gap: 0.38rem;
  }

  .rail-link {
    width: 2.25rem;
    height: 2.25rem;
  }

  .rail-link svg {
    width: 1rem;
    height: 1rem;
  }

  .rail-link::after,
  .rail-mark::after {
    display: none;
  }

  .stage-grid {
    background-size: 2.75rem 2.75rem;
    opacity: 0.28;
  }

  .stage-corners {
    inset: 0.7rem;
    opacity: 0.24;
  }

  .stage-header {
    top: max(0.9rem, env(safe-area-inset-top));
    left: 1rem;
    right: 0.75rem;
  }

  .stage-kicker {
    max-width: 10rem;
    font-size: 0.42rem;
    letter-spacing: 0.15em;
    line-height: 1.4;
  }

  .stage-name {
    margin-top: 0.18rem;
    font-size: 0.85rem;
  }

  .stage-readout,
  .stage-index {
    display: none;
  }

  .profile-toggle {
    top: max(0.7rem, env(safe-area-inset-top));
    right: 0.7rem;
    width: 2.65rem;
    height: 2.65rem;
  }

  #voiceCaption {
    bottom: 13.8rem;
    width: calc(100% - 1.5rem);
  }

  #actionConfirmation {
    top: max(0.7rem, env(safe-area-inset-top));
    right: 0.55rem;
    width: calc(100vw - var(--rail-width) - 1.05rem);
  }

  .action-confirmation-frame {
    padding: 0.82rem;
  }

  #actionConfirmationDetails {
    max-height: 34vh;
  }

  #actionConfirmationDetails div {
    grid-template-columns: 4.3rem 1fr;
  }

  .cognition-readout {
    bottom: -2rem;
  }

  .cognition-readout span {
    font-size: 0.39rem;
  }

  .cognition-readout b {
    font-size: 0.5rem;
  }

  #chatHistoryPanel {
    bottom: max(5.75rem, calc(env(safe-area-inset-bottom) + 5.25rem));
    width: calc(100% - 1.35rem);
    max-height: calc(100% - 8.5rem);
  }

  .history-header {
    padding: 0.72rem 0.75rem 0.68rem 0.86rem;
  }

  #chatHistoryLog {
    padding: 0.8rem 0.72rem 0.95rem;
  }

  .history-message {
    width: 94%;
  }

  .history-activity-timeline {
    width: 100%;
  }

  .history-activity-timeline > summary {
    gap: 0.55rem;
    padding-right: 0.58rem;
    padding-left: 0.65rem;
  }

  .activity-timeline-count {
    display: none;
  }

  .activity-timeline-controls {
    gap: 0.4rem;
  }

  .activity-timeline-items {
    padding-right: 0.5rem;
    padding-left: 0.82rem;
  }

  .activity-timeline-items::before {
    left: 0.62rem;
  }

  .activity-card > summary {
    grid-template-columns: 1.55rem minmax(0, 1fr) auto auto;
    gap: 0.38rem;
    padding-right: 0.46rem;
    padding-left: 0.38rem;
  }

  .activity-card-icon {
    width: 1.55rem;
    height: 1.55rem;
  }

  .activity-card-details {
    padding-left: 2.28rem;
  }

  .activity-card-copy > span {
    max-width: 13rem;
  }

  .history-message-content {
    font-size: 0.71rem;
  }

  #gifViewer {
    width: calc(100vw - 1.1rem);
  }

  .gif-viewer-header {
    min-height: 3.6rem;
    padding-left: 0.85rem;
  }

  .gif-viewer-media {
    min-height: 10rem;
    padding: 0.45rem;
  }

  #gifViewerImage {
    max-height: min(36vh, 19rem);
  }

  .gif-viewer-frame > footer {
    grid-template-columns: auto 1fr;
  }

  .gif-viewer-frame > footer small {
    display: none;
  }

  #chatDock {
    bottom: max(0.85rem, calc(env(safe-area-inset-bottom) + 0.55rem));
    width: calc(100% - 1.35rem);
  }

  #conversationStarters {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    padding: 0 0.15rem 0.2rem;
    scrollbar-width: none;
  }

  #conversationStarters::-webkit-scrollbar {
    display: none;
  }

  #conversationStarters button {
    flex: 0 0 10.75rem;
    min-height: 4.2rem;
  }

  #conversationStarters button > small {
    display: none;
  }

  .skill-composer-helper {
    max-height: min(23rem, 56vh);
    margin-bottom: 0.42rem;
  }

  .skill-composer-helper > header,
  .skill-composer-helper > footer {
    padding: 0.62rem 0.68rem;
  }

  .skill-composer-helper > footer span:last-child,
  .skill-helper-meta {
    display: none;
  }

  .skill-helper-option {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.58rem;
    padding: 0.65rem 0.6rem;
  }

  .skill-helper-copy small {
    white-space: normal;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  #voicePrivacy {
    font-size: 0.43rem;
  }

  .composer-label {
    gap: 0.4rem;
    margin: 0 0 0.38rem 0.55rem;
    font-size: 0.39rem;
    letter-spacing: 0.11em;
  }

  .composer-label span:last-child {
    display: none;
  }

  #orbChatForm {
    gap: 0.4rem;
    min-height: 3.55rem;
    padding: 0.4rem 0.42rem 0.4rem 0.7rem;
    clip-path: polygon(0 0, calc(100% - 0.7rem) 0, 100% 0.7rem, 100% 100%, 0.7rem 100%, 0 calc(100% - 0.7rem));
  }

  .composer-prompt {
    font-size: 0.9rem;
  }

  #orbChatInput {
    max-height: min(7rem, 22vh);
    padding: 0.5rem 0;
    font-size: 0.84rem;
  }

  #orbChatSend,
  #orbChatQueue,
  #chatHistoryToggle,
  #conciergeToggle {
    width: 2.45rem;
    height: 2.45rem;
  }

  #orbChatForm.is-busy.has-run-controls #conciergeToggle,
  #orbChatForm.is-busy.has-run-controls #chatHistoryToggle {
    display: none;
  }

  #voiceControlDeck {
    top: max(4.25rem, calc(env(safe-area-inset-top) + 3.7rem));
    right: 0.55rem;
    width: calc(100vw - var(--rail-width) - 1.05rem);
  }

  #voiceControlDeck > footer span:nth-of-type(2) {
    display: none;
  }

  #conciergePanel {
    top: max(0.55rem, env(safe-area-inset-top));
    right: 0.55rem;
    width: calc(100vw - var(--rail-width) - 1.05rem);
    max-height: calc(100dvh - max(1.1rem, env(safe-area-inset-top)));
  }

  .concierge-frame {
    padding: 0.78rem;
  }

  .concierge-intent-grid {
    grid-template-columns: 1fr;
  }

  .concierge-intent-grid button,
  .concierge-intent-grid button:first-child {
    grid-row: auto;
    min-height: 5.25rem;
    align-content: start;
  }

  .concierge-field-grid {
    grid-template-columns: 1fr;
  }

  .schedule-slot {
    grid-template-columns: 3.55rem 1fr 0.78fr;
    gap: 0.35rem;
    padding: 0.42rem;
  }

  .concierge-submit-row {
    align-items: stretch;
    flex-direction: column;
  }

  .concierge-submit-row small {
    max-width: none;
  }

  .concierge-submit-row button {
    width: 100%;
  }

  .availability-card {
    grid-template-columns: 1fr auto;
  }

  .availability-card small {
    grid-column: 1 / -1;
  }

  .profile-visual {
    height: min(42vh, 19rem);
  }

  .profile-content h1 {
    font-size: 2.65rem;
  }

  #awardFeature {
    grid-template-columns: 0.9fr 1.1fr;
  }
}

/* Authenticated owner desktop ------------------------------------------------ */

.owner-app-rail[hidden],
.owner-desktop[hidden] {
  display: none !important;
}

.owner-app-rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.owner-app-icon {
  --app-accent: #75d7ff;
  appearance: none;
  cursor: pointer;
  border-color: color-mix(in srgb, var(--app-accent) 20%, transparent);
  border-radius: 11px;
  background:
    radial-gradient(circle at 50% 18%, color-mix(in srgb, var(--app-accent) 17%, transparent), transparent 72%),
    rgba(5, 11, 23, 0.78);
  color: color-mix(in srgb, var(--app-accent) 86%, white);
  font: inherit;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22), inset 0 0 0 1px rgba(255, 255, 255, 0.018);
}

.owner-app-icon:hover,
.owner-app-icon:focus-visible {
  color: #ffffff;
  border-color: color-mix(in srgb, var(--app-accent) 62%, transparent);
  background:
    radial-gradient(circle at 50% 18%, color-mix(in srgb, var(--app-accent) 32%, transparent), transparent 76%),
    color-mix(in srgb, var(--app-accent) 12%, rgba(5, 11, 23, 0.88));
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28), 0 0 18px color-mix(in srgb, var(--app-accent) 22%, transparent);
}

.owner-app-icon svg {
  width: 1.22rem;
  height: 1.22rem;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.55;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

#ownerAppExplorer { --app-accent: #62d8ff; }
#ownerAppEditor { --app-accent: #b69cff; }
#ownerAppTerminal { --app-accent: #63edb7; }
#ownerAppRemotes { --app-accent: #58e4dc; }
#ownerAppAutomations { --app-accent: #ffc766; }
#ownerAppCode { --app-accent: #65a7ff; }
#ownerAppConsole { --app-accent: #ffae68; }

.owner-app-icon::before {
  background: var(--app-accent);
  box-shadow: 0 0 0.7rem var(--app-accent);
}

body[data-owner="true"] #socialRail {
  z-index: 130;
}

body[data-owner="true"] #socialRail .rail-links[hidden] {
  display: none !important;
}

/* Durable owner conversations ------------------------------------------------ */

.owner-conversation-pane[hidden],
.owner-conversation-browser[hidden],
.owner-project-picker[hidden],
.owner-chat-search-results[hidden],
#ownerProjectCreateForm[hidden] {
  display: none !important;
}

.owner-conversation-pane {
  position: relative;
  flex: 1 1 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(140, 236, 255, 0.13);
  background: rgba(2, 9, 16, 0.58);
}

.owner-conversation-pane-header {
  display: grid;
  flex: 0 0 auto;
  gap: 0.7rem;
  padding: 0.7rem;
  border-bottom: 1px solid rgba(140, 236, 255, 0.12);
  background: rgba(6, 17, 28, 0.58);
}

#ownerConversationBack {
  justify-self: start;
  min-height: 2rem;
  padding: 0.35rem 0.55rem;
  border: 1px solid rgba(140, 236, 255, 0.16);
  color: rgba(205, 233, 239, 0.78);
  background: rgba(4, 15, 24, 0.78);
  cursor: pointer;
}

.owner-conversation-pane-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.7rem;
}

.owner-conversation-pane-heading > div {
  min-width: 0;
  overflow: hidden;
}

.owner-conversation-pane-header p,
.owner-conversation-pane-heading > span {
  color: rgba(140, 236, 255, 0.62);
  font-family: ui-monospace, "Cascadia Code", monospace;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.owner-conversation-pane-header h2 {
  max-width: 100%;
  margin-top: 0.22rem;
  overflow: hidden;
  color: rgba(242, 250, 252, 0.96);
  font-size: clamp(1rem, 2vw, 1.35rem);
  font-weight: 430;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.owner-conversation-log {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  flex-direction: column;
  gap: 0.7rem;
  overflow: auto;
  padding: 0.75rem 0.45rem 1rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(140, 236, 255, 0.2) transparent;
}

.owner-conversation-jump-latest[hidden] {
  display: none !important;
}

.owner-conversation-jump-latest {
  position: absolute;
  right: 0.9rem;
  bottom: 0.9rem;
  z-index: 3;
  width: 2.25rem;
  height: 2.25rem;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(140, 236, 255, 0.28);
  border-radius: 50%;
  color: rgba(202, 240, 247, 0.8);
  background: rgba(4, 15, 24, 0.88);
  box-shadow: 0 0.5rem 1.3rem rgba(0, 0, 0, 0.32), 0 0 0.8rem rgba(99, 220, 245, 0.08);
  cursor: pointer;
  backdrop-filter: blur(12px);
  transition: color 160ms ease, border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.owner-conversation-jump-latest svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.owner-conversation-jump-latest:hover,
.owner-conversation-jump-latest:focus-visible {
  color: #fff;
  border-color: rgba(140, 236, 255, 0.62);
  background: rgba(10, 33, 48, 0.96);
  transform: translateY(1px);
}

.owner-conversation-empty {
  width: 100%;
  margin: auto;
  padding: 1rem 0.6rem;
  text-align: center;
}

.owner-conversation-empty > span {
  width: 2.8rem;
  height: 2.8rem;
  display: grid;
  place-items: center;
  margin: 0 auto 0.8rem;
  border: 1px solid rgba(140, 236, 255, 0.28);
  border-radius: 50%;
  color: var(--cyan);
}

.owner-conversation-empty h2 {
  color: rgba(241, 250, 252, 0.94);
  font-size: 1.2rem;
  font-weight: 420;
}

.owner-conversation-empty p {
  margin-top: 0.55rem;
  color: rgba(174, 195, 202, 0.65);
  font-size: 0.92rem;
  line-height: 1.6;
}

.owner-message {
  width: 96%;
  padding: 0.7rem;
  border: 1px solid rgba(140, 236, 255, 0.1);
  color: rgba(227, 238, 241, 0.9);
  background: rgba(5, 16, 25, 0.7);
  font-size: 0.96rem;
  line-height: 1.62;
  overflow-wrap: anywhere;
}

.owner-message[data-role="user"] {
  align-self: flex-end;
  border-color: rgba(217, 185, 101, 0.2);
  background: rgba(39, 33, 20, 0.56);
}

.owner-message[data-role="assistant"] {
  align-self: flex-start;
}

.owner-message.is-streaming {
  border-color: rgba(140, 236, 255, 0.35);
  box-shadow: 0 0 1.4rem rgba(78, 209, 236, 0.06);
}

.owner-message-meta {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.45rem;
  color: rgba(140, 236, 255, 0.46);
  font-family: ui-monospace, "Cascadia Code", monospace;
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.owner-message[data-role="user"] .owner-message-meta {
  color: rgba(217, 185, 101, 0.54);
}

.owner-message-body { min-width: 0; max-width: 100%; }
.owner-message-body > :first-child { margin-top: 0; }
.owner-message-body > :last-child { margin-bottom: 0; }
.owner-message-body pre { overflow: auto; padding: 0.8rem; background: rgba(0, 0, 0, 0.34); }
.owner-message-body code { font-family: ui-monospace, "Cascadia Code", monospace; }

.owner-message-activities {
  margin-top: 0.72rem;
  padding-top: 0.62rem;
  border-top: 1px solid rgba(140, 236, 255, 0.12);
}

.owner-message-activities-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.45rem;
  min-height: 2rem;
  padding: 0.25rem 0.35rem;
  border-radius: 0.28rem;
  color: rgba(140, 236, 255, 0.56);
  font-family: ui-monospace, "Cascadia Code", monospace;
  font-size: 0.58rem;
  font-weight: 720;
  letter-spacing: 0.14em;
  list-style: none;
  cursor: pointer;
  transition: color 160ms ease, background 160ms ease;
}

.owner-message-activities-summary::-webkit-details-marker {
  display: none;
}

.owner-message-activities-summary:hover,
.owner-message-activities-summary:focus-visible {
  color: rgba(221, 249, 253, 0.94);
  background: rgba(88, 210, 236, 0.06);
}

.owner-message-activities-summary:focus-visible {
  outline: 1px solid rgba(140, 236, 255, 0.56);
  outline-offset: 1px;
}

.owner-message-activities-summary b {
  padding: 0.12rem 0.32rem;
  border: 1px solid rgba(140, 236, 255, 0.18);
  border-radius: 999px;
  color: rgba(202, 243, 250, 0.82);
  font-size: 0.52rem;
  letter-spacing: 0.08em;
  text-align: center;
}

.owner-message-activities-summary svg {
  width: 0.85rem;
  height: 0.85rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 160ms ease;
}

.owner-message-activities[open] > .owner-message-activities-summary svg {
  transform: rotate(90deg);
}

.owner-message-activity-cards {
  display: grid;
  gap: 0.38rem;
  padding-top: 0.38rem;
}

.owner-message-activity {
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(140, 236, 255, 0.13);
  border-radius: 0.3rem;
  background: rgba(1, 9, 15, 0.5);
}

.owner-message-activity[data-state="failed"] {
  border-color: rgba(251, 139, 131, 0.3);
}

.owner-message-activity > summary {
  min-width: 0;
  display: grid;
  grid-template-columns: 1.55rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.45rem;
  padding: 0.48rem 0.5rem;
  cursor: pointer;
  list-style: none;
}

.owner-message-activity > summary::-webkit-details-marker {
  display: none;
}

.owner-message-activity > summary:focus-visible {
  outline: 1px solid rgba(140, 236, 255, 0.68);
  outline-offset: -2px;
}

.owner-message-activity-icon {
  width: 1.55rem;
  height: 1.55rem;
  display: grid;
  place-items: center;
  border: 1px solid rgba(140, 236, 255, 0.18);
  border-radius: 0.3rem;
  color: rgba(161, 238, 252, 0.86);
  background: rgba(25, 85, 99, 0.16);
  font-family: ui-monospace, "Cascadia Code", monospace;
  font-size: 0.52rem;
  font-weight: 780;
}

.owner-message-activity[data-state="running"] .owner-message-activity-icon {
  animation: activityIconGlow 1.35s ease-in-out infinite alternate;
}

.owner-message-activity-copy {
  min-width: 0;
  display: grid;
  gap: 0.04rem;
}

.owner-message-activity-copy small {
  color: rgba(140, 236, 255, 0.5);
  font-size: 0.48rem;
  font-weight: 730;
  letter-spacing: 0.12em;
}

.owner-message-activity-copy strong {
  overflow: hidden;
  color: rgba(227, 241, 245, 0.9);
  font-size: 0.75rem;
  font-weight: 560;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.owner-message-activity-preview {
  min-width: 0;
  overflow: hidden;
  color: rgba(160, 196, 205, 0.56);
  font-family: ui-monospace, "Cascadia Code", monospace;
  font-size: 0.62rem;
  font-weight: 450;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.owner-message-activity[open] .owner-message-activity-preview {
  display: none;
}

.owner-message-activity-status {
  color: rgba(153, 188, 198, 0.58);
  font-family: ui-monospace, "Cascadia Code", monospace;
  font-size: 0.48rem;
  letter-spacing: 0.08em;
}

.owner-message-activity[data-state="running"] .owner-message-activity-status {
  color: rgba(140, 236, 255, 0.82);
}

.owner-message-activity-body {
  display: grid;
  gap: 0.44rem;
  padding: 0 0.52rem 0.55rem 2.5rem;
  color: rgba(183, 208, 215, 0.74);
  font-size: 0.72rem;
  line-height: 1.48;
}

.owner-message-activity-body > p,
.owner-message-activity-body > code {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.owner-message-activity-meta {
  color: rgba(140, 236, 255, 0.52);
  font-family: ui-monospace, "Cascadia Code", monospace;
  font-size: 0.55rem;
  letter-spacing: 0.035em;
}

.owner-message-activity-body > section {
  min-width: 0;
  display: grid;
  gap: 0.2rem;
}

.owner-message-activity-body > section > small {
  color: rgba(140, 236, 255, 0.46);
  font-size: 0.48rem;
  font-weight: 720;
  letter-spacing: 0.12em;
}

.owner-message-activity-body pre {
  max-height: 11rem;
  margin: 0;
  overflow: auto;
  padding: 0.48rem 0.52rem;
  border: 1px solid rgba(140, 236, 255, 0.1);
  border-radius: 0.24rem;
  background: rgba(0, 4, 8, 0.72);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.owner-message-activity-files {
  display: grid;
  gap: 0.28rem;
  padding: 0;
  list-style: none;
}

.owner-message-activity-files li {
  min-width: 0;
  display: flex;
  justify-content: space-between;
  gap: 0.55rem;
  padding-top: 0.28rem;
  border-top: 1px solid rgba(140, 236, 255, 0.08);
}

.owner-message-activity-files code {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.owner-message-activity-files span {
  flex: 0 0 auto;
  color: rgba(123, 224, 178, 0.76);
  font-family: ui-monospace, "Cascadia Code", monospace;
}

.owner-message-expand {
  justify-self: start;
  border: 0;
  padding: 0.25rem 0;
  color: rgba(132, 203, 255, 0.88);
  background: transparent;
  font: 650 0.72rem/1 ui-monospace, "Cascadia Code", monospace;
  letter-spacing: 0.06em;
  cursor: pointer;
}
.owner-message-expand:hover,
.owner-message-expand:focus-visible { color: #fff; }
.owner-message-expand:disabled { cursor: progress; opacity: 0.62; }

.owner-conversation-older {
  position: absolute;
  top: 6.5rem;
  left: 50%;
  z-index: 2;
  padding: 0.42rem 0.7rem;
  transform: translateX(-50%);
  border: 1px solid rgba(140, 236, 255, 0.2);
  color: rgba(194, 228, 235, 0.78);
  background: rgba(4, 15, 24, 0.94);
  font-size: 0.54rem;
  cursor: pointer;
}

.owner-chat-navigator {
  gap: 0.65rem;
  padding: max(0.85rem, env(safe-area-inset-top)) 0.8rem max(0.7rem, env(safe-area-inset-bottom));
}

.owner-chat-navigator::after {
  content: none;
}

.owner-conversation-browser {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  flex-direction: column;
  gap: 0.5rem;
}

.owner-chat-toolbar {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding-right: 2.45rem;
}

.owner-chat-primary-actions,
.owner-project-picker-actions,
.owner-chat-filter,
.owner-chat-navigator-footer {
  display: flex;
  flex: 0 0 auto;
  gap: 0.45rem;
}

.owner-chat-navigator button,
.owner-chat-navigator input,
.owner-chat-navigator a {
  font: inherit;
}

.owner-chat-primary-actions button,
.owner-project-picker button,
.owner-chat-filter button,
.owner-chat-navigator-footer button,
.owner-chat-navigator-footer a {
  min-height: 1.82rem;
  padding: 0.32rem 0.48rem;
  border: 1px solid rgba(140, 236, 255, 0.13);
  border-radius: 0.34rem;
  color: rgba(210, 234, 239, 0.76);
  background: rgba(5, 18, 28, 0.5);
  font-size: 0.54rem;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 160ms ease, color 160ms ease, background 160ms ease;
}

.owner-chat-primary-actions button:hover,
.owner-project-picker button:hover,
.owner-chat-filter button:hover,
.owner-chat-navigator-footer button:hover,
.owner-chat-navigator-footer a:hover {
  border-color: rgba(140, 236, 255, 0.34);
  color: rgba(241, 252, 255, 0.95);
  background: rgba(18, 55, 69, 0.52);
}

#ownerConversationNew {
  flex: 0 0 auto;
  border-color: rgba(140, 236, 255, 0.27);
  color: #effcff;
  background: linear-gradient(135deg, rgba(28, 103, 125, 0.48), rgba(6, 37, 51, 0.64));
}

.owner-chat-search {
  position: relative;
  display: flex;
  align-items: center;
  color: rgba(140, 236, 255, 0.54);
}

.owner-chat-search > span {
  position: absolute;
  left: 0.58rem;
  z-index: 1;
  color: rgba(140, 236, 255, 0.42);
  font-size: 0.9rem;
  pointer-events: none;
}

.owner-chat-search input,
.owner-project-picker input {
  width: 100%;
  min-width: 0;
  padding: 0.46rem 0.58rem;
  border: 1px solid rgba(140, 236, 255, 0.16);
  border-radius: 0.34rem;
  outline: 0;
  color: rgba(234, 246, 249, 0.92);
  background: rgba(1, 8, 14, 0.58);
  font-size: 0.66rem;
}

.owner-chat-search input {
  padding-left: 1.75rem;
}

.owner-chat-search input:focus,
.owner-project-picker input:focus {
  border-color: rgba(140, 236, 255, 0.54);
}

.owner-chat-filter button {
  flex: 0 0 auto;
  min-width: 0;
  min-height: 1.65rem;
  padding: 0.26rem 0.48rem;
  border-color: transparent;
  background: transparent;
}

.owner-chat-filter button[aria-pressed="true"] {
  color: #effcff;
  border-color: rgba(140, 236, 255, 0.42);
  background: rgba(28, 94, 113, 0.42);
}

.owner-conversation-tree {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding-right: 0.18rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(140, 236, 255, 0.18) transparent;
}

.owner-tree-section {
  margin-bottom: 0.58rem;
}

.owner-tree-section > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.18rem;
  color: rgba(140, 236, 255, 0.5);
  font-size: 0.45rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.owner-tree-section > header button {
  min-height: 1.3rem;
  padding: 0.12rem 0.35rem;
  border: 0;
}

.owner-conversation-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0.12rem;
  border: 1px solid transparent;
  border-radius: 0.34rem;
  transition: border-color 160ms ease, background 160ms ease;
}

.owner-conversation-row:hover {
  border-color: rgba(140, 236, 255, 0.1);
  background: rgba(25, 69, 82, 0.12);
}

.owner-conversation-row.is-selected {
  border-color: rgba(140, 236, 255, 0.25);
  background: rgba(37, 95, 112, 0.22);
}

.owner-conversation-select {
  min-width: 0;
  display: grid;
  gap: 0.16rem;
  padding: 0.4rem 0.48rem;
  border: 0 !important;
  text-align: left;
  background: transparent !important;
}

.owner-conversation-select strong {
  overflow: hidden;
  color: rgba(225, 239, 242, 0.86);
  font-size: 0.63rem;
  font-weight: 470;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.owner-conversation-select small {
  overflow: hidden;
  color: rgba(143, 166, 175, 0.58);
  font-size: 0.48rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.owner-conversation-row[data-status="running"] .owner-conversation-select strong::before,
.owner-conversation-row[data-unread="true"] .owner-conversation-select strong::before {
  content: "";
  width: 0.36rem;
  height: 0.36rem;
  display: inline-block;
  margin-right: 0.38rem;
  border-radius: 50%;
  background: #63f3bb;
  box-shadow: 0 0 0.55rem rgba(99, 243, 187, 0.65);
}

.owner-conversation-menu {
  min-height: 1.5rem !important;
  padding: 0.18rem 0.32rem !important;
  border: 0 !important;
  background: transparent !important;
}

.owner-chat-search-results {
  max-height: 13rem;
  overflow: auto;
  padding: 0.4rem;
  border: 1px solid rgba(140, 236, 255, 0.14);
  background: rgba(2, 9, 16, 0.94);
}

.owner-search-result {
  width: 100%;
  display: grid;
  gap: 0.2rem;
  padding: 0.55rem;
  border: 0 !important;
  text-align: left;
  background: transparent !important;
}

.owner-search-result strong { color: rgba(230, 243, 246, 0.88); font-size: 0.58rem; }
.owner-search-result small { color: rgba(148, 173, 181, 0.62); font-size: 0.5rem; line-height: 1.4; }

.owner-project-picker {
  display: grid;
  gap: 0.55rem;
  max-height: 52vh;
  overflow: auto;
  padding: 0.7rem;
  border: 1px solid rgba(140, 236, 255, 0.2);
  background: rgba(2, 10, 17, 0.94);
}

.owner-registered-projects {
  display: grid;
  gap: 0.3rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(140, 236, 255, 0.1);
}

.owner-registered-projects > p {
  color: rgba(140, 236, 255, 0.52);
  letter-spacing: 0.12em;
}

#ownerRegisteredProjects {
  display: grid;
  gap: 0.2rem;
  max-height: 9rem;
  overflow: auto;
}

.owner-registered-project {
  min-width: 0;
  display: grid;
  gap: 0.08rem;
  padding: 0.38rem 0.48rem !important;
  text-align: left;
}

.owner-registered-project strong,
.owner-registered-project small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.owner-registered-project small {
  color: rgba(143, 166, 175, 0.58);
}

.owner-project-picker > header,
.owner-project-picker form > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
}

.owner-project-picker > header p,
.owner-project-picker label {
  color: rgba(140, 236, 255, 0.52);
  font-size: 0.42rem;
  letter-spacing: 0.12em;
}

.owner-project-picker > header strong { color: rgba(226, 241, 244, 0.86); font-size: 0.6rem; }
.owner-project-picker form { display: grid; gap: 0.28rem; }
.owner-project-picker form button { flex: 0 0 auto; }
.owner-project-path-status { color: rgba(164, 190, 198, 0.68); font-size: 0.52rem; overflow-wrap: anywhere; }
.owner-project-directories { display: grid; gap: 0.2rem; max-height: 12rem; overflow: auto; }
.owner-project-directories button { width: 100%; min-height: 1.9rem; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.owner-conversation-navigation-status {
  min-height: 0.5rem;
  color: rgba(171, 194, 201, 0.6);
  font-size: 0.5rem;
}

.owner-chat-navigator-footer {
  flex-wrap: nowrap;
  border-top: 1px solid rgba(140, 236, 255, 0.1);
  padding-top: 0.45rem;
}

.owner-chat-navigator-footer > * { flex: 0 0 auto; text-align: center; }

.owner-chat-navigator-footer #ownerLogout {
  margin-left: auto;
}

.owner-chat-navigator-footer button {
  min-height: 1.7rem;
  padding: 0.28rem 0.45rem;
  border-color: transparent;
  background: transparent;
}

body[data-owner="true"] #chatHistoryPanel {
  display: none !important;
}

body[data-owner="true"] #chatDock {
  z-index: 14;
}

@media (max-width: 840px) {
  .owner-conversation-log {
    padding: 0.75rem 0.45rem 1rem;
  }

  .owner-message {
    width: 94%;
  }

  .owner-conversation-jump-latest {
    right: 0.75rem;
    bottom: max(0.75rem, env(safe-area-inset-bottom));
    width: 2.75rem;
    height: 2.75rem;
  }

  body[data-owner="true"] #profilePanel {
    width: min(28rem, calc(100vw - var(--rail-width)));
  }
}

body[data-owner="true"] #socialRail .rail-axis {
  background: linear-gradient(180deg, transparent, rgba(84, 198, 255, 0.7), transparent);
}

body[data-owner="true"] #socialRail .rail-mark span {
  color: #9dddff;
}

.owner-desktop {
  position: fixed;
  inset: 0;
  z-index: 70;
  overflow: hidden;
  pointer-events: none;
}

.owner-desktop-window {
  --window-accent: #60a5fa;
  position: absolute;
  display: flex;
  flex-direction: column;
  min-width: 340px;
  min-height: 260px;
  overflow: hidden;
  pointer-events: auto;
  color: #e8f2ff;
  background:
    linear-gradient(135deg, rgba(13, 26, 47, 0.97), rgba(3, 7, 15, 0.985) 38%),
    #030711;
  border: 1px solid rgba(105, 184, 255, 0.34);
  border-radius: 3px;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.62), 0 0 0 1px rgba(255, 255, 255, 0.025) inset;
  backdrop-filter: blur(24px);
  opacity: 0.97;
  transition: box-shadow 150ms ease, opacity 150ms ease;
}

.owner-desktop-window.is-active {
  opacity: 1;
  box-shadow: 0 34px 110px rgba(0, 0, 0, 0.72), 0 0 36px rgba(61, 160, 255, 0.12);
}

.owner-desktop-window.is-maximized {
  inset: 10px 10px 10px 74px !important;
  width: auto !important;
  height: auto !important;
}

.owner-desktop-window[data-dirty="true"] {
  --window-accent: #ff8a3d;
}

.owner-desktop-window-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 52px;
  padding: 8px 9px 8px 16px;
  cursor: move;
  user-select: none;
  touch-action: none;
  border-bottom: 1px solid rgba(148, 193, 255, 0.16);
  background: linear-gradient(90deg, rgba(36, 102, 166, 0.21), rgba(5, 10, 20, 0.5));
}

.owner-desktop-window-header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--window-accent), transparent 68%);
}

.owner-desktop-window-header p,
.owner-desktop-window-header h2 {
  margin: 0;
}

.owner-desktop-window-header p {
  color: var(--window-accent);
  font: 600 0.58rem/1.2 "IBM Plex Mono", monospace;
  letter-spacing: 0.18em;
}

.owner-desktop-window-header h2 {
  max-width: min(56vw, 620px);
  overflow: hidden;
  color: #f3f8ff;
  font: 560 0.86rem/1.45 "IBM Plex Mono", monospace;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.owner-desktop-window-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 4px 0 12px;
}

.desktop-editor-toolbar button,
.desktop-preview-toolbar button,
.desktop-editor-welcome button {
  min-width: 34px;
  min-height: 32px;
  border: 1px solid rgba(138, 192, 255, 0.2);
  border-radius: 2px;
  color: #bcd8f8;
  background: rgba(5, 12, 24, 0.68);
  cursor: pointer;
  font: 600 0.64rem/1 "IBM Plex Mono", monospace;
  letter-spacing: 0.08em;
}

.desktop-editor-toolbar button:hover,
.desktop-preview-toolbar button:hover,
.desktop-editor-welcome button:hover {
  color: white;
  border-color: rgba(93, 190, 255, 0.7);
  background: rgba(22, 76, 124, 0.42);
}

.owner-window-control {
  --control-top: #7dd3fc;
  --control-bottom: #258ad8;
  width: 25px;
  min-width: 25px;
  height: 25px;
  min-height: 25px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  color: rgba(2, 17, 28, 0.78);
  background: linear-gradient(145deg, var(--control-top), var(--control-bottom));
  box-shadow:
    0 5px 12px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.38),
    inset 0 -1px 0 rgba(0, 0, 0, 0.14);
  cursor: pointer;
  transition: transform 140ms ease, filter 140ms ease, box-shadow 140ms ease;
}

.owner-window-control svg {
  width: 11px;
  height: 11px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

.owner-window-control:hover,
.owner-window-control:focus-visible {
  color: rgba(0, 12, 20, 0.92);
  filter: saturate(1.1) brightness(1.08);
  transform: translateY(-1px) scale(1.055);
  box-shadow:
    0 7px 16px rgba(0, 0, 0, 0.38),
    0 0 16px color-mix(in srgb, var(--control-top) 34%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.46);
}

.owner-window-control:active {
  transform: translateY(0) scale(0.94);
}

.owner-window-control.is-maximize {
  --control-top: #75efbf;
  --control-bottom: #18aa72;
}

.owner-window-control.is-close {
  --control-top: #ff9a82;
  --control-bottom: #e34f42;
}

.owner-desktop-window-content {
  position: relative;
  display: flex;
  flex: 1;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
}

.owner-desktop-resize {
  position: absolute;
  z-index: 7;
  touch-action: none;
  background: transparent;
}

.owner-desktop-resize[data-resize-direction="n"] {
  top: 0;
  right: 12px;
  left: 12px;
  height: 8px;
  cursor: ns-resize;
}

.owner-desktop-resize[data-resize-direction="ne"] {
  top: 0;
  right: 0;
  width: 14px;
  height: 14px;
  cursor: nesw-resize;
}

.owner-desktop-resize[data-resize-direction="e"] {
  top: 12px;
  right: 0;
  bottom: 12px;
  width: 8px;
  cursor: ew-resize;
}

.owner-desktop-resize[data-resize-direction="se"] {
  right: 0;
  bottom: 0;
  width: 17px;
  height: 17px;
  cursor: nwse-resize;
}

.owner-desktop-resize[data-resize-direction="s"] {
  right: 12px;
  bottom: 0;
  left: 12px;
  height: 8px;
  cursor: ns-resize;
}

.owner-desktop-resize[data-resize-direction="sw"] {
  bottom: 0;
  left: 0;
  width: 14px;
  height: 14px;
  cursor: nesw-resize;
}

.owner-desktop-resize[data-resize-direction="w"] {
  top: 12px;
  bottom: 12px;
  left: 0;
  width: 8px;
  cursor: ew-resize;
}

.owner-desktop-resize[data-resize-direction="nw"] {
  top: 0;
  left: 0;
  width: 14px;
  height: 14px;
  cursor: nwse-resize;
}

.owner-desktop-resize[data-resize-direction="se"]::after {
  content: "";
  position: absolute;
  right: 3px;
  bottom: 3px;
  width: 8px;
  height: 8px;
  border-right: 1px solid rgba(116, 199, 255, 0.58);
  border-bottom: 1px solid rgba(116, 199, 255, 0.58);
  opacity: 0.72;
}

.owner-desktop-window.is-maximized .owner-desktop-resize {
  display: none;
}

.remote-machines-toolbar {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 58px;
  padding: 9px 12px 9px 16px;
  border-bottom: 1px solid rgba(91, 226, 220, 0.17);
  background:
    radial-gradient(circle at 8% 0%, rgba(88, 228, 220, 0.12), transparent 38%),
    rgba(2, 8, 16, 0.86);
}

.remote-machines-toolbar p {
  margin: 0;
  color: #67e8df;
  font: 700 0.49rem/1.3 "IBM Plex Mono", monospace;
  letter-spacing: 0.17em;
}

.remote-machines-toolbar span {
  display: block;
  margin-top: 4px;
  color: #7795ad;
  font: 470 0.58rem/1.35 "IBM Plex Mono", monospace;
}

.remote-machines-toolbar-actions,
.remote-machine-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
}

.remote-machines-toolbar button,
.remote-machine-actions button,
.remote-machines-empty button {
  min-height: 31px;
  padding: 0 11px;
  border: 1px solid rgba(101, 208, 220, 0.23);
  border-radius: 6px;
  color: #a9cbd5;
  background: rgba(5, 18, 29, 0.72);
  cursor: pointer;
  font: 680 0.5rem/1 "IBM Plex Mono", monospace;
  letter-spacing: 0.08em;
  transition: border-color 140ms ease, color 140ms ease, background 140ms ease, transform 140ms ease;
}

.remote-machines-toolbar button:hover,
.remote-machine-actions button:hover,
.remote-machines-empty button:hover {
  color: #eaffff;
  border-color: rgba(88, 228, 220, 0.62);
  background: rgba(20, 93, 96, 0.34);
  transform: translateY(-1px);
}

.remote-machines-toolbar button:disabled,
.remote-machine-actions button:disabled {
  cursor: wait;
  opacity: 0.42;
  transform: none;
}

.remote-machines-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  padding: 14px;
  overflow: auto;
  background:
    linear-gradient(rgba(69, 145, 171, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(69, 145, 171, 0.04) 1px, transparent 1px),
    radial-gradient(circle at 90% 10%, rgba(43, 166, 177, 0.08), transparent 34%),
    #030711;
  background-size: 28px 28px, 28px 28px, auto, auto;
}

.remote-machines-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 310px), 1fr));
  gap: 12px;
}

.remote-machine-card {
  position: relative;
  min-width: 0;
  padding: 15px;
  overflow: hidden;
  border: 1px solid rgba(105, 174, 212, 0.19);
  border-radius: 11px;
  background:
    linear-gradient(145deg, rgba(15, 35, 53, 0.88), rgba(4, 10, 20, 0.94) 62%),
    #050b15;
  box-shadow: 0 15px 38px rgba(0, 0, 0, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

.remote-machine-card::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, #58e4dc, transparent 70%);
  opacity: 0.58;
}

.remote-machine-card[data-mounted="true"] {
  border-color: rgba(99, 237, 183, 0.34);
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.29), 0 0 28px rgba(35, 181, 145, 0.06);
}

.remote-machine-card > header {
  display: flex;
  align-items: flex-start;
  gap: 11px;
}

.remote-machine-signal {
  width: 10px;
  height: 10px;
  flex: 0 0 auto;
  margin-top: 6px;
  border: 2px solid rgba(88, 228, 220, 0.2);
  border-radius: 50%;
  background: #58e4dc;
  box-shadow: 0 0 15px rgba(88, 228, 220, 0.68);
}

.remote-machine-card[data-mounted="true"] .remote-machine-signal,
.remote-machine-card[data-connection="online"] .remote-machine-signal {
  background: #63edb7;
  box-shadow: 0 0 16px rgba(99, 237, 183, 0.72);
}

.remote-machine-card p,
.remote-machine-card h3,
.remote-machine-card small {
  margin: 0;
}

.remote-machine-card header p {
  color: #5edbd4;
  font: 700 0.44rem/1.25 "IBM Plex Mono", monospace;
  letter-spacing: 0.17em;
}

.remote-machine-card h3 {
  margin-top: 3px;
  overflow: hidden;
  color: #edfaff;
  font: 560 0.92rem/1.3 "Space Grotesk", sans-serif;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.remote-machine-card header small {
  display: block;
  margin-top: 2px;
  color: #69849c;
  font: 520 0.53rem/1.25 "IBM Plex Mono", monospace;
}

.remote-machine-endpoint {
  min-width: 0;
  margin-top: 14px;
  padding: 10px 11px;
  border: 1px solid rgba(116, 171, 209, 0.11);
  border-radius: 7px;
  background: rgba(1, 6, 13, 0.52);
}

.remote-machine-endpoint strong,
.remote-machine-endpoint span {
  display: block;
  overflow: hidden;
  font-family: "IBM Plex Mono", monospace;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.remote-machine-endpoint strong {
  color: #b8d9e8;
  font-size: 0.62rem;
  font-weight: 560;
}

.remote-machine-endpoint span {
  margin-top: 4px;
  color: #607f97;
  font-size: 0.45rem;
  font-weight: 650;
  letter-spacing: 0.11em;
}

.remote-machine-state {
  min-height: 23px;
  padding: 9px 1px 7px;
  overflow: hidden;
  color: #66869d;
  font: 650 0.46rem/1.35 "IBM Plex Mono", monospace;
  letter-spacing: 0.08em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.remote-machine-state[data-state="ok"] { color: #72e7bb; }
.remote-machine-state[data-state="error"] { color: #ff927b; white-space: normal; }
.remote-machine-state[data-state="working"] { color: #f0bd72; }

.remote-machine-actions {
  justify-content: flex-start;
}

.remote-machine-actions button {
  min-height: 29px;
  padding: 0 9px;
  font-size: 0.46rem;
}

.remote-machines-empty {
  min-height: 100%;
  display: grid;
  place-content: center;
  justify-items: center;
  padding: 32px;
  text-align: center;
}

.remote-machines-empty > span {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(88, 228, 220, 0.32);
  border-radius: 50%;
  color: #70ebe4;
  background: rgba(18, 82, 84, 0.2);
  box-shadow: 0 0 30px rgba(88, 228, 220, 0.1);
  font: 700 0.68rem/1 "IBM Plex Mono", monospace;
  letter-spacing: 0.1em;
}

.remote-machines-empty h3 {
  margin: 16px 0 0;
  color: #e9faff;
  font: 560 1rem/1.3 "Space Grotesk", sans-serif;
}

.remote-machines-empty p {
  max-width: 430px;
  margin: 8px 0 16px;
  color: #7894a8;
  font: 460 0.62rem/1.65 "IBM Plex Mono", monospace;
}

.remote-machines-empty code {
  color: #76ddd8;
}

.desktop-editor-toolbar,
.desktop-preview-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 42px;
  padding: 6px 10px 6px 14px;
  border-bottom: 1px solid rgba(148, 193, 255, 0.12);
  background: rgba(2, 7, 15, 0.78);
}

.desktop-editor-menubar {
  position: relative;
  z-index: 12;
  display: flex;
  flex: 0 0 auto;
  align-items: stretch;
  min-height: 35px;
  padding: 0 9px;
  border-bottom: 1px solid rgba(148, 193, 255, 0.1);
  background:
    linear-gradient(90deg, rgba(35, 102, 164, 0.13), transparent 44%),
    rgba(3, 8, 17, 0.96);
}

.desktop-editor-menu-loading,
.desktop-editor-mode {
  display: flex;
  align-items: center;
  color: #6689aa;
  font: 650 0.5rem/1 "IBM Plex Mono", monospace;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.desktop-editor-menu-spacer {
  flex: 1;
}

.desktop-editor-mode {
  max-width: 40%;
  overflow: hidden;
  color: #55bce9;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.desktop-editor-menu {
  position: relative;
  flex: 0 0 auto;
}

.desktop-editor-menu > summary {
  height: 35px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  color: #91acca;
  cursor: pointer;
  font: 570 0.61rem/1 "IBM Plex Mono", monospace;
  letter-spacing: 0.03em;
  list-style: none;
  transition: color 120ms ease, background 120ms ease;
}

.desktop-editor-menu > summary::-webkit-details-marker {
  display: none;
}

.desktop-editor-menu > summary:hover,
.desktop-editor-menu > summary:focus-visible,
.desktop-editor-menu[open] > summary {
  outline: none;
  color: #eef8ff;
  background: rgba(67, 155, 217, 0.16);
}

.desktop-editor-menu-panel {
  position: absolute;
  top: calc(100% + 1px);
  left: 0;
  width: 250px;
  padding: 6px;
  overflow: hidden;
  border: 1px solid rgba(102, 185, 245, 0.28);
  border-radius: 5px;
  background:
    linear-gradient(145deg, rgba(13, 30, 49, 0.985), rgba(3, 8, 16, 0.995)),
    #030811;
  box-shadow: 0 18px 52px rgba(0, 0, 0, 0.66), 0 0 0 1px rgba(255, 255, 255, 0.025) inset;
  backdrop-filter: blur(20px);
}

.desktop-editor-menu-item {
  width: 100%;
  min-height: 31px;
  display: grid;
  grid-template-columns: 17px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  padding: 0 8px;
  border: 0;
  border-radius: 3px;
  color: #b7cce1;
  background: transparent;
  cursor: pointer;
  text-align: left;
  font: 530 0.61rem/1.2 "IBM Plex Mono", monospace;
}

.desktop-editor-menu-item:hover,
.desktop-editor-menu-item:focus-visible {
  outline: none;
  color: #f4fbff;
  background: linear-gradient(90deg, rgba(52, 147, 212, 0.28), rgba(52, 147, 212, 0.09));
}

.desktop-editor-menu-item:disabled {
  color: #496078;
  cursor: default;
  background: transparent;
}

.desktop-editor-menu-check {
  color: #5ce0ba;
  font-size: 0.7rem;
}

.desktop-editor-menu-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.desktop-editor-menu-item kbd {
  color: #607c98;
  font: 520 0.52rem/1 "IBM Plex Mono", monospace;
}

.desktop-editor-menu-separator {
  display: block;
  height: 1px;
  margin: 5px 7px;
  background: linear-gradient(90deg, rgba(112, 178, 224, 0.18), transparent);
}

.desktop-editor-path,
.desktop-preview-toolbar span {
  overflow: hidden;
  color: #7fa7ce;
  font: 500 0.61rem/1.4 "IBM Plex Mono", monospace;
  letter-spacing: 0.06em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.desktop-editor-toolbar button,
.desktop-preview-toolbar button,
.desktop-editor-welcome button {
  padding: 0 13px;
  flex: 0 0 auto;
}

.desktop-editor-quick-actions {
  display: flex;
  flex: 0 0 auto;
  gap: 7px;
}

.desktop-editor-quick-actions button:first-child {
  color: #9bcfff;
}

.desktop-editor-welcome-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 9px;
}

.desktop-editor-welcome-actions button.is-primary {
  color: #effcff;
  border-color: rgba(85, 202, 248, 0.52);
  background: linear-gradient(135deg, rgba(24, 129, 181, 0.8), rgba(24, 81, 139, 0.76));
}

.desktop-editor-toolbar button:disabled {
  cursor: default;
  opacity: 0.35;
}

.desktop-editor-host,
.desktop-terminal-host,
.desktop-html-stage,
.desktop-image-stage {
  position: relative;
  flex: 1;
  min-width: 0;
  min-height: 0;
}

.desktop-editor-host {
  background: #080d17;
}

.desktop-terminal-host {
  padding: 10px 8px 4px 12px;
  background: #03060d;
}

.desktop-terminal-host .xterm,
.desktop-terminal-host .xterm-viewport {
  height: 100%;
}

.desktop-terminal-host .xterm-viewport {
  scrollbar-color: rgba(84, 168, 229, 0.42) transparent;
}

.desktop-image-stage {
  display: grid;
  place-items: center;
  overflow: auto;
  padding: 18px;
  background:
    linear-gradient(45deg, rgba(255, 255, 255, 0.025) 25%, transparent 25%) 0 0 / 18px 18px,
    linear-gradient(-45deg, rgba(255, 255, 255, 0.025) 25%, transparent 25%) 0 0 / 18px 18px,
    #050914;
}

.desktop-image-stage img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 18px 38px rgba(0, 0, 0, 0.48));
}

.desktop-html-stage {
  padding: 8px;
  background: #dfe5eb;
}

.desktop-html-stage iframe {
  width: 100%;
  height: 100%;
  border: 0;
  background: white;
}

.desktop-window-status {
  min-height: 27px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 7px 12px;
  overflow: hidden;
  color: #7095ba;
  border-top: 1px solid rgba(148, 193, 255, 0.12);
  background: #030710;
  font: 500 0.55rem/1.25 "IBM Plex Mono", monospace;
  letter-spacing: 0.09em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.desktop-window-status > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.desktop-editor-save-status {
  color: #69d7b0;
}

.desktop-editor-save-status[data-state="dirty"],
.desktop-editor-save-status[data-state="working"] {
  color: #f0b36c;
}

.desktop-editor-save-status[data-state="error"],
.desktop-editor-dialog-message[data-state="error"] {
  color: #ff8e75;
}

.desktop-editor-cursor-status {
  margin-left: auto;
  color: #6687a6;
}

.desktop-editor-document-status {
  color: #628dac;
  text-align: right;
}

.desktop-editor-dialog-overlay {
  position: absolute;
  z-index: 30;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(1, 5, 12, 0.78);
  backdrop-filter: blur(8px);
}

.desktop-editor-dialog {
  width: min(510px, 100%);
  padding: 21px;
  border: 1px solid rgba(94, 190, 247, 0.32);
  border-radius: 8px;
  background:
    radial-gradient(circle at 12% 0%, rgba(51, 153, 211, 0.16), transparent 38%),
    linear-gradient(145deg, rgba(13, 27, 45, 0.99), rgba(3, 8, 16, 0.995));
  box-shadow: 0 26px 80px rgba(0, 0, 0, 0.72), 0 0 30px rgba(39, 144, 211, 0.08);
}

.desktop-editor-dialog p,
.desktop-editor-dialog h3 {
  margin: 0;
}

.desktop-editor-dialog-eyebrow {
  color: #58c9f2;
  font: 700 0.5rem/1.2 "IBM Plex Mono", monospace;
  letter-spacing: 0.17em;
}

.desktop-editor-dialog h3 {
  margin-top: 7px;
  color: #f1f8ff;
  font: 570 1rem/1.35 "Space Grotesk", sans-serif;
}

.desktop-editor-dialog-description {
  margin-top: 8px !important;
  color: #849db6;
  font: 450 0.65rem/1.55 "IBM Plex Mono", monospace;
}

.desktop-editor-dialog-label {
  display: block;
  margin-top: 18px;
  color: #6e90ad;
  font: 650 0.5rem/1.2 "IBM Plex Mono", monospace;
  letter-spacing: 0.11em;
}

.desktop-editor-dialog-input {
  width: 100%;
  min-height: 39px;
  margin-top: 7px;
  padding: 0 11px;
  border: 1px solid rgba(104, 181, 233, 0.24);
  border-radius: 4px;
  outline: none;
  color: #eaf6ff;
  background: rgba(1, 6, 13, 0.74);
  box-shadow: inset 0 1px 7px rgba(0, 0, 0, 0.36);
  font: 540 0.68rem/1 "IBM Plex Mono", monospace;
}

.desktop-editor-dialog-input:focus {
  border-color: rgba(79, 195, 251, 0.66);
  box-shadow: 0 0 0 3px rgba(60, 175, 232, 0.09), inset 0 1px 7px rgba(0, 0, 0, 0.36);
}

.desktop-editor-dialog-message {
  min-height: 16px;
  margin-top: 7px !important;
  color: #6485a2;
  font: 500 0.53rem/1.45 "IBM Plex Mono", monospace;
}

.desktop-editor-dialog-message[data-state="working"] {
  color: #e9b56e;
}

.desktop-editor-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 17px;
}

.desktop-editor-dialog-actions button {
  min-height: 32px;
  padding: 0 13px;
  border: 1px solid rgba(111, 180, 227, 0.22);
  border-radius: 4px;
  color: #93adc4;
  background: rgba(5, 13, 24, 0.74);
  cursor: pointer;
  font: 650 0.54rem/1 "IBM Plex Mono", monospace;
  letter-spacing: 0.08em;
}

.desktop-editor-dialog-actions button.is-primary {
  color: #dffbff;
  border-color: rgba(72, 197, 239, 0.44);
  background: linear-gradient(135deg, rgba(25, 122, 171, 0.72), rgba(15, 72, 115, 0.72));
}

.desktop-editor-dialog-actions button:hover:not(:disabled) {
  color: white;
  border-color: rgba(80, 205, 249, 0.68);
  transform: translateY(-1px);
}

.desktop-editor-dialog-actions button:disabled {
  cursor: wait;
  opacity: 0.48;
}

.desktop-window-loading,
.desktop-window-error,
.desktop-editor-welcome {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 12px;
  padding: 30px;
  text-align: center;
  background: radial-gradient(circle at 50% 40%, rgba(35, 116, 184, 0.16), transparent 54%);
}

.desktop-window-loading {
  color: #8cb9e3;
  font: 500 0.66rem/1.4 "IBM Plex Mono", monospace;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.desktop-window-loading span {
  width: 26px;
  height: 26px;
  border: 1px solid rgba(102, 193, 255, 0.22);
  border-top-color: #60c9ff;
  border-radius: 50%;
  animation: owner-window-spin 800ms linear infinite;
}

/* Desktop file manager ----------------------------------------------------- */

.owner-file-manager-window {
  --window-accent: #69d6ff;
  border-color: rgba(116, 201, 255, 0.34);
  border-radius: 11px;
  background: #07101c;
}

.file-manager-app {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  color: #dce9f5;
  background:
    radial-gradient(circle at 15% -10%, rgba(66, 168, 223, 0.1), transparent 31%),
    #07101b;
}

.file-manager-navigation {
  display: grid;
  flex: 0 0 auto;
  grid-template-columns: auto minmax(220px, 1fr) minmax(170px, 240px);
  align-items: center;
  gap: 9px;
  min-height: 52px;
  padding: 8px 11px;
  border-bottom: 1px solid rgba(131, 187, 226, 0.12);
  background: rgba(9, 20, 34, 0.93);
}

.file-manager-history,
.file-manager-view-switch {
  display: flex;
  align-items: center;
  gap: 3px;
}

.file-manager-navigation button,
.file-manager-commandbar button,
.file-manager-sidebar button,
.file-manager-address button {
  border: 0;
  color: #a9bed0;
  background: transparent;
  cursor: pointer;
  font-family: "IBM Plex Mono", monospace;
}

.file-manager-history button,
.file-manager-view-switch button {
  width: 31px;
  height: 31px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  font-size: 0.86rem;
}

.file-manager-navigation button:hover:not(:disabled),
.file-manager-commandbar button:hover:not(:disabled),
.file-manager-view-switch button.is-active {
  color: #f1f9ff;
  background: rgba(99, 185, 240, 0.14);
}

.file-manager-navigation button:disabled,
.file-manager-commandbar button:disabled {
  cursor: default;
  opacity: 0.3;
}

.file-manager-address {
  min-width: 0;
  min-height: 34px;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px 5px;
  overflow-x: auto;
  border: 1px solid rgba(128, 181, 218, 0.16);
  border-radius: 7px;
  background: rgba(2, 8, 15, 0.58);
  scrollbar-width: none;
}

.file-manager-address button {
  min-height: 26px;
  flex: 0 0 auto;
  padding: 0 7px;
  border-radius: 4px;
  color: #c4d3e0;
  font-size: 0.57rem;
}

.file-manager-address button:last-of-type {
  color: #eef8ff;
  background: rgba(90, 170, 224, 0.1);
}

.file-manager-address-separator {
  color: #526b80;
  font-size: 0.72rem;
}

.file-manager-search {
  min-width: 0;
  min-height: 34px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  padding: 0 9px;
  border: 1px solid rgba(128, 181, 218, 0.16);
  border-radius: 7px;
  background: rgba(2, 8, 15, 0.58);
}

.file-manager-search:focus-within {
  border-color: rgba(86, 193, 250, 0.48);
  box-shadow: 0 0 0 3px rgba(70, 171, 230, 0.08);
}

.file-manager-search span {
  color: #75a5c5;
  font-size: 0.83rem;
}

.file-manager-search input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  color: #e4f0f8;
  background: transparent;
  font: 520 0.57rem/1 "IBM Plex Mono", monospace;
}

.file-manager-search input::placeholder {
  color: #536b7e;
}

.file-manager-commandbar {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  padding: 6px 11px;
  border-bottom: 1px solid rgba(131, 187, 226, 0.1);
  background: rgba(6, 15, 26, 0.9);
}

.file-manager-commandbar button {
  min-height: 31px;
  padding: 0 9px;
  border-radius: 5px;
  font-size: 0.51rem;
  font-weight: 570;
}

.file-manager-commandbar button span {
  color: #6bd7ff;
  font-size: 0.72rem;
}

.file-manager-commandbar button.is-danger:not(:disabled) {
  color: #e8a095;
}

.file-manager-command-divider {
  width: 1px;
  height: 23px;
  margin: 0 4px;
  background: rgba(139, 191, 226, 0.12);
}

.file-manager-command-spacer {
  flex: 1;
}

.file-manager-view-switch {
  padding: 2px;
  border: 1px solid rgba(126, 182, 220, 0.13);
  border-radius: 6px;
  background: rgba(1, 7, 13, 0.46);
}

.file-manager-view-switch button {
  width: 29px;
  height: 26px;
}

.file-manager-body {
  display: grid;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  grid-template-columns: 172px minmax(0, 1fr);
}

.file-manager-sidebar {
  display: flex;
  min-height: 0;
  flex-direction: column;
  gap: 3px;
  padding: 13px 9px 10px;
  overflow-y: auto;
  border-right: 1px solid rgba(128, 183, 222, 0.11);
  background: rgba(5, 14, 24, 0.75);
}

.file-manager-sidebar > p {
  margin: 0 8px 7px;
  color: #5e788d;
  font: 700 0.44rem/1 "IBM Plex Mono", monospace;
  letter-spacing: 0.15em;
}

.file-manager-sidebar button {
  min-height: 36px;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 0 9px;
  border-radius: 6px;
  text-align: left;
}

.file-manager-sidebar button:hover,
.file-manager-sidebar button.is-active {
  color: #f0f9ff;
  background: rgba(81, 169, 224, 0.13);
}

.file-manager-sidebar button.is-active {
  box-shadow: inset 2px 0 #63cfff;
}

.file-manager-sidebar button span,
.file-manager-sidebar button svg {
  width: 19px;
  height: 19px;
}

.file-manager-sidebar button svg {
  fill: rgba(103, 197, 245, 0.12);
  stroke: #73c7ee;
  stroke-width: 1.5;
}

.file-manager-sidebar button b {
  overflow: hidden;
  font-size: 0.55rem;
  font-weight: 540;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-manager-sidebar-note {
  margin-top: auto;
  padding: 10px;
  border: 1px solid rgba(92, 188, 232, 0.1);
  border-radius: 7px;
  background: rgba(4, 11, 19, 0.55);
}

.file-manager-sidebar-note span {
  color: #66d7b5;
  font: 700 0.4rem/1 "IBM Plex Mono", monospace;
  letter-spacing: 0.14em;
}

.file-manager-sidebar-note p {
  margin: 6px 0 0;
  color: #60788b;
  font: 480 0.46rem/1.45 "IBM Plex Mono", monospace;
}

.file-manager-content {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: auto;
  outline: none;
  background:
    linear-gradient(rgba(88, 160, 202, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(88, 160, 202, 0.025) 1px, transparent 1px),
    rgba(3, 9, 16, 0.73);
  background-size: 32px 32px;
  scrollbar-color: rgba(93, 170, 221, 0.33) transparent;
}

.file-manager-content.is-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(116px, 1fr));
  align-content: start;
  gap: 7px;
  padding: 14px;
}

.file-manager-content.is-list {
  display: block;
  padding: 7px;
}

.file-manager-content.is-drop-target {
  box-shadow: inset 0 0 0 2px rgba(85, 202, 255, 0.48), inset 0 0 45px rgba(51, 167, 224, 0.08);
}

.file-manager-item {
  position: relative;
  min-width: 0;
  border: 1px solid transparent;
  color: #dce8f1;
  background: transparent;
  cursor: default;
  font-family: "IBM Plex Mono", monospace;
  user-select: none;
}

.file-manager-content.is-grid .file-manager-item {
  min-height: 116px;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: flex-start;
  gap: 7px;
  padding: 10px 7px 8px;
  border-radius: 8px;
  text-align: center;
}

.file-manager-item:hover,
.file-manager-item:focus-visible {
  outline: none;
  border-color: rgba(106, 193, 242, 0.18);
  background: rgba(79, 158, 208, 0.08);
}

.file-manager-item.is-selected {
  border-color: rgba(91, 194, 249, 0.5);
  background: linear-gradient(145deg, rgba(62, 160, 218, 0.22), rgba(34, 105, 163, 0.1));
  box-shadow: 0 0 0 1px rgba(110, 210, 255, 0.06) inset;
}

.file-manager-item.is-drop-target {
  border-color: rgba(255, 207, 101, 0.66);
  background: rgba(201, 150, 46, 0.13);
  box-shadow: 0 0 22px rgba(231, 178, 66, 0.08);
}

.file-manager-item-icon {
  position: relative;
  display: grid;
  place-items: center;
}

.file-manager-content.is-grid .file-manager-item-icon {
  width: 58px;
  height: 57px;
}

.file-manager-item-icon svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.file-manager-item-icon .is-folder .folder-back {
  fill: #b78330;
  stroke: #f0c76c;
  stroke-width: 1.4;
}

.file-manager-item-icon .is-folder .folder-front {
  fill: url("#none");
  fill: #d6a448;
  stroke: #f4cf7d;
  stroke-width: 1.2;
}

.file-manager-item-icon .is-folder .folder-shine {
  fill: none;
  stroke: rgba(255, 241, 186, 0.72);
  stroke-linecap: round;
  stroke-width: 1.2;
}

.file-manager-item-icon .is-file .file-page {
  fill: #1f3c55;
  stroke: #8bc9ec;
  stroke-width: 1.2;
}

.file-manager-item-icon .is-file .file-fold,
.file-manager-item-icon .is-file .file-line {
  fill: none;
  stroke: #8bc9ec;
  stroke-width: 1.2;
}

.file-manager-item-icon .tone-image .file-page { fill: #254a3d; stroke: #7ce0b3; }
.file-manager-item-icon .tone-script .file-page { fill: #3f365c; stroke: #bea6ff; }
.file-manager-item-icon .tone-data .file-page { fill: #3e422c; stroke: #d3db77; }
.file-manager-item-icon .tone-web .file-page { fill: #24485a; stroke: #79d8ff; }
.file-manager-item-icon .tone-pdf .file-page { fill: #572e35; stroke: #ff8d98; }

.file-manager-extension {
  position: absolute;
  right: -3px;
  bottom: 4px;
  min-width: 31px;
  padding: 3px 4px;
  border: 1px solid rgba(131, 205, 244, 0.5);
  border-radius: 3px;
  color: #e9f8ff;
  background: #1d5777;
  box-shadow: 0 4px 9px rgba(0, 0, 0, 0.3);
  font: 750 0.37rem/1 "IBM Plex Mono", monospace;
  font-style: normal;
  letter-spacing: 0.05em;
}

.file-manager-extension.tone-image { border-color: #62cfa0; background: #236e55; }
.file-manager-extension.tone-script { border-color: #aa90ed; background: #5a4491; }
.file-manager-extension.tone-data { border-color: #c6cf66; background: #666b2e; }
.file-manager-extension.tone-web { border-color: #62c4ed; background: #246f91; }
.file-manager-extension.tone-pdf { border-color: #ef7882; background: #9d3d47; }

.file-manager-item-copy {
  min-width: 0;
}

.file-manager-item-copy strong,
.file-manager-item-copy small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}

.file-manager-item-copy strong {
  color: #dceaf4;
  font-size: 0.52rem;
  font-weight: 560;
}

.file-manager-content.is-grid .file-manager-item-copy strong {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-height: 1.3;
  white-space: normal;
  word-break: break-word;
}

.file-manager-item-copy small {
  margin-top: 3px;
  color: #5c768a;
  font-size: 0.4rem;
  font-weight: 450;
  white-space: nowrap;
}

.file-manager-content.is-grid .file-manager-item > time,
.file-manager-content.is-grid .file-manager-item-size,
.file-manager-content.is-grid .file-manager-item-copy small {
  display: none;
}

.file-manager-content.is-list .file-manager-item {
  width: 100%;
  min-height: 42px;
  display: grid;
  grid-template-columns: 34px minmax(160px, 1fr) 120px 76px;
  align-items: center;
  gap: 10px;
  padding: 4px 10px;
  border-radius: 5px;
  text-align: left;
}

.file-manager-content.is-list .file-manager-item-icon {
  width: 28px;
  height: 28px;
}

.file-manager-content.is-list .file-manager-extension {
  right: -7px;
  bottom: -2px;
  min-width: 20px;
  padding: 2px;
  font-size: 0.27rem;
}

.file-manager-item > time,
.file-manager-item-size {
  overflow: hidden;
  color: #688398;
  font-size: 0.43rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-manager-item-size {
  text-align: right;
}

.file-manager-empty,
.file-manager-loading {
  min-height: 100%;
  display: grid;
  grid-column: 1 / -1;
  place-content: center;
  justify-items: center;
  padding: 38px;
  text-align: center;
}

.file-manager-empty > span {
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  color: #70cfff;
  opacity: 0.72;
  font-size: 2rem;
}

.file-manager-empty > span svg {
  width: 55px;
  height: 55px;
  fill: rgba(80, 164, 213, 0.14);
  stroke: #70cfff;
  stroke-width: 1.2;
}

.file-manager-empty h3 {
  margin: 10px 0 0;
  color: #e2f1fa;
  font: 570 0.9rem/1.3 "Space Grotesk", sans-serif;
}

.file-manager-empty p {
  max-width: 360px;
  margin: 6px 0 0;
  color: #647e92;
  font: 460 0.54rem/1.55 "IBM Plex Mono", monospace;
}

.file-manager-empty.is-error > span,
.file-manager-empty.is-error p {
  color: #ef897c;
}

.file-manager-loading {
  color: #80b7d6;
  font: 540 0.57rem/1.4 "IBM Plex Mono", monospace;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.file-manager-loading i {
  width: 28px;
  height: 28px;
  margin-bottom: 10px;
  border: 2px solid rgba(91, 191, 239, 0.17);
  border-top-color: #6bd3ff;
  border-radius: 50%;
  animation: owner-window-spin 800ms linear infinite;
}

.file-manager-statusbar {
  min-height: 28px;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 0 11px;
  overflow: hidden;
  border-top: 1px solid rgba(129, 186, 224, 0.1);
  color: #5f798e;
  background: rgba(4, 11, 19, 0.94);
  font: 510 0.44rem/1 "IBM Plex Mono", monospace;
  letter-spacing: 0.04em;
}

.file-manager-statusbar span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-manager-statusbar [data-state="working"] { color: #edbb71; }
.file-manager-statusbar [data-state="ok"] { color: #6bd8af; }
.file-manager-statusbar [data-state="error"] { color: #f28c7d; }

.file-manager-dialog-overlay,
.owner-file-dialog-overlay {
  position: absolute;
  z-index: 180;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(1, 5, 10, 0.72);
  backdrop-filter: blur(9px);
}

.owner-file-dialog-overlay {
  position: fixed;
}

.file-manager-dialog,
.owner-file-dialog,
.desktop-new-file-stage form {
  width: min(470px, 100%);
  padding: 21px;
  border: 1px solid rgba(95, 190, 242, 0.3);
  border-radius: 10px;
  color: #e8f4fc;
  background:
    radial-gradient(circle at 10% 0%, rgba(62, 166, 221, 0.15), transparent 40%),
    linear-gradient(145deg, rgba(14, 29, 47, 0.99), rgba(4, 9, 16, 0.995));
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.7);
}

.file-manager-dialog p,
.file-manager-dialog h3,
.owner-file-dialog p,
.owner-file-dialog h3,
.desktop-new-file-stage p,
.desktop-new-file-stage h3 {
  margin: 0;
}

.file-manager-dialog > p,
.owner-file-dialog > p,
.desktop-new-file-stage > p {
  color: #63cfff;
  font: 700 0.46rem/1 "IBM Plex Mono", monospace;
  letter-spacing: 0.16em;
}

.file-manager-dialog h3,
.owner-file-dialog h3,
.desktop-new-file-stage h3 {
  margin-top: 7px;
  font: 580 1rem/1.25 "Space Grotesk", sans-serif;
}

.file-manager-dialog > span,
.owner-file-dialog > span,
.desktop-new-file-stage > span:not(.desktop-app-glyph) {
  display: block;
  margin-top: 7px;
  color: #8099ad;
  font: 460 0.58rem/1.5 "IBM Plex Mono", monospace;
}

.file-manager-dialog label,
.owner-file-dialog label,
.desktop-new-file-stage label {
  display: block;
  margin-top: 17px;
  color: #6f8da4;
  font: 680 0.46rem/1.2 "IBM Plex Mono", monospace;
  letter-spacing: 0.11em;
}

.file-manager-dialog input,
.owner-file-dialog input,
.desktop-new-file-stage input {
  width: 100%;
  min-height: 39px;
  margin-top: 7px;
  padding: 0 10px;
  border: 1px solid rgba(108, 184, 232, 0.26);
  border-radius: 6px;
  outline: 0;
  color: #edf8ff;
  background: rgba(1, 6, 12, 0.76);
  font: 540 0.64rem/1 "IBM Plex Mono", monospace;
}

.file-manager-dialog input:focus,
.owner-file-dialog input:focus,
.desktop-new-file-stage input:focus {
  border-color: rgba(91, 203, 255, 0.62);
  box-shadow: 0 0 0 3px rgba(72, 178, 230, 0.09);
}

.file-manager-dialog small,
.owner-file-dialog small,
.desktop-new-file-stage small {
  min-height: 17px;
  display: block;
  margin-top: 7px;
  color: #607b90;
  font: 480 0.47rem/1.45 "IBM Plex Mono", monospace;
}

.file-manager-dialog small[data-state="error"],
.owner-file-dialog small[data-state="error"],
.desktop-new-file-stage small[data-state="error"] { color: #f28b7c; }
.desktop-new-file-stage small[data-state="working"] { color: #e8b46c; }

.file-manager-dialog footer,
.owner-file-dialog footer,
.desktop-new-file-stage footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 17px;
}

.file-manager-dialog footer button,
.owner-file-dialog footer button,
.desktop-new-file-stage footer button {
  min-height: 33px;
  padding: 0 12px;
  border: 1px solid rgba(113, 183, 227, 0.2);
  border-radius: 5px;
  color: #91aabe;
  background: rgba(5, 13, 23, 0.72);
  cursor: pointer;
  font: 650 0.5rem/1 "IBM Plex Mono", monospace;
  letter-spacing: 0.07em;
}

.file-manager-dialog footer button.is-primary,
.owner-file-dialog footer button.is-primary,
.desktop-new-file-stage footer button.is-primary {
  color: #e8fbff;
  border-color: rgba(79, 198, 244, 0.46);
  background: linear-gradient(135deg, rgba(24, 128, 178, 0.8), rgba(18, 77, 126, 0.78));
}

.file-manager-context-menu {
  position: fixed;
  z-index: 220;
  width: 238px;
  padding: 6px;
  overflow: hidden;
  border: 1px solid rgba(105, 189, 240, 0.26);
  border-radius: 8px;
  background: rgba(8, 18, 30, 0.98);
  box-shadow: 0 20px 64px rgba(0, 0, 0, 0.68);
  backdrop-filter: blur(18px);
}

.file-manager-context-menu header {
  min-height: 39px;
  display: grid;
  grid-template-columns: 27px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 4px 7px 7px;
  border-bottom: 1px solid rgba(115, 185, 229, 0.11);
}

.file-manager-context-menu header svg {
  width: 25px;
  height: 25px;
}

.file-manager-context-menu header .file-manager-extension { display: none; }

.file-manager-context-menu header strong {
  overflow: hidden;
  color: #dcebf5;
  font: 560 0.55rem/1.3 "IBM Plex Mono", monospace;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-manager-context-menu > button {
  width: 100%;
  min-height: 38px;
  display: block;
  padding: 5px 8px;
  border: 0;
  border-radius: 5px;
  color: #b5c9d9;
  background: transparent;
  cursor: pointer;
  text-align: left;
}

.file-manager-context-menu > button:hover,
.file-manager-context-menu > button:focus-visible {
  outline: 0;
  color: #f2faff;
  background: rgba(75, 165, 221, 0.16);
}

.file-manager-context-menu > button strong,
.file-manager-context-menu > button small {
  display: block;
  font-family: "IBM Plex Mono", monospace;
}

.file-manager-context-menu > button strong { font-size: 0.53rem; font-weight: 570; }
.file-manager-context-menu > button small { margin-top: 2px; color: #617c91; font-size: 0.42rem; }
.file-manager-context-menu > button.is-destructive strong { color: #ef998e; }

.desktop-new-file-stage {
  flex: 1 1 auto;
  display: grid;
  align-content: center;
  justify-items: center;
  padding: 25px;
  overflow: auto;
  text-align: center;
  background: radial-gradient(circle at 50% 34%, rgba(49, 145, 203, 0.13), transparent 48%);
}

.desktop-new-file-stage form {
  margin-top: 16px;
  text-align: left;
}

.desktop-new-file-stage > .desktop-app-glyph {
  margin-bottom: 12px;
}

@media (max-width: 760px) {
  .file-manager-navigation {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .file-manager-search {
    grid-column: 1 / -1;
  }

  .file-manager-commandbar {
    overflow-x: auto;
    scrollbar-width: thin;
  }

  .file-manager-commandbar button {
    flex: 0 0 auto;
  }

  .file-manager-body {
    grid-template-columns: 1fr;
  }

  .file-manager-sidebar {
    min-height: auto;
    flex-direction: row;
    padding: 6px;
    overflow-x: auto;
    border-right: 0;
    border-bottom: 1px solid rgba(128, 183, 222, 0.11);
  }

  .file-manager-sidebar > p,
  .file-manager-sidebar-note {
    display: none;
  }

  .file-manager-sidebar button {
    min-width: max-content;
    grid-template-columns: 18px auto;
  }

  .file-manager-sidebar button span,
  .file-manager-sidebar button svg {
    width: 16px;
    height: 16px;
  }

  .file-manager-content.is-grid {
    grid-template-columns: repeat(auto-fill, minmax(94px, 1fr));
    padding: 9px;
  }

  .file-manager-content.is-list .file-manager-item {
    grid-template-columns: 32px minmax(0, 1fr) 62px;
  }

  .file-manager-content.is-list .file-manager-item > time {
    display: none;
  }
}

@keyframes owner-window-spin {
  to { transform: rotate(360deg); }
}

/* OpenClaw automations ------------------------------------------------------ */

.owner-automations-window {
  min-width: 360px;
  min-height: 480px;
}

.owner-automations-window .owner-desktop-window-content {
  overflow: hidden;
  background:
    radial-gradient(circle at 88% -10%, rgba(255, 184, 77, 0.09), transparent 34%),
    linear-gradient(160deg, rgba(8, 15, 27, 0.98), rgba(2, 6, 13, 0.99));
}

.automation-app {
  --automation-gold: #ffc766;
  --automation-cyan: #69dcff;
  --automation-green: #68e6ae;
  --automation-red: #ff806f;
  display: flex;
  flex: 1;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  color: #dceaff;
  font-family: "IBM Plex Mono", monospace;
}

.automation-app button,
.automation-context-menu button,
.automation-modal-overlay button,
.automation-modal-overlay input,
.automation-modal-overlay textarea,
.automation-modal-overlay select,
.automation-app input {
  font: inherit;
}

.automation-masthead {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 17px 22px 15px;
  border-bottom: 1px solid rgba(255, 203, 109, 0.1);
  background: linear-gradient(90deg, rgba(255, 180, 61, 0.055), transparent 54%);
}

.automation-masthead-copy h3,
.automation-masthead-copy p,
.automation-masthead-copy span {
  margin: 0;
}

.automation-eyebrow {
  display: flex;
  align-items: center;
  gap: 7px;
  color: rgba(255, 214, 141, 0.7);
  font-size: 0.56rem;
  letter-spacing: 0.18em;
}

.automation-eyebrow i,
.automation-live-state i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--automation-gold);
  box-shadow: 0 0 10px rgba(255, 199, 102, 0.75);
}

.automation-masthead-copy h3 {
  margin-top: 3px;
  color: #fff9ee;
  font: 620 clamp(1.3rem, 2.7vw, 1.85rem)/1.15 "IBM Plex Sans", sans-serif;
  letter-spacing: -0.025em;
}

.automation-masthead-copy p {
  margin-top: 5px;
  color: #7790af;
  font-size: 0.65rem;
}

.automation-masthead-actions,
.automation-detail-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.automation-button,
.automation-icon-action {
  min-height: 33px;
  padding: 0 13px;
  border: 1px solid rgba(154, 193, 235, 0.2);
  border-radius: 3px;
  color: #bdd0e8;
  background: rgba(6, 14, 26, 0.76);
  cursor: pointer;
  font: 650 0.61rem/1 "IBM Plex Mono", monospace;
  letter-spacing: 0.08em;
  transition: 150ms ease;
}

.automation-button:hover,
.automation-icon-action:hover {
  color: white;
  border-color: rgba(255, 199, 102, 0.62);
  background: rgba(88, 61, 18, 0.32);
  transform: translateY(-1px);
}

.automation-button.is-primary {
  border-color: rgba(255, 204, 112, 0.68);
  color: #1b1204;
  background: linear-gradient(135deg, #ffe0a1, #f4ab43);
  box-shadow: 0 8px 22px rgba(204, 122, 23, 0.16), inset 0 1px rgba(255, 255, 255, 0.55);
}

.automation-button.is-primary:hover {
  color: #150d02;
  background: linear-gradient(135deg, #ffebbc, #ffc45e);
}

.automation-button:disabled,
.automation-icon-action:disabled {
  opacity: 0.35;
  pointer-events: none;
}

.automation-button.is-spinning {
  animation: automation-refresh 800ms linear infinite;
}

@keyframes automation-refresh {
  to { transform: rotate(360deg); }
}

.automation-metrics {
  display: grid;
  flex: none;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-bottom: 1px solid rgba(142, 180, 222, 0.11);
  background: rgba(4, 10, 19, 0.42);
}

.automation-metrics article {
  min-width: 0;
  padding: 11px 16px 12px;
  border-right: 1px solid rgba(142, 180, 222, 0.09);
}

.automation-metrics article:last-child {
  border-right: 0;
}

.automation-metrics span,
.automation-next-run span,
.automation-definition-card > header span,
.automation-history > header span,
.automation-danger-zone span {
  display: block;
  color: #7187a4;
  font-size: 0.51rem;
  letter-spacing: 0.16em;
}

.automation-metrics strong {
  display: block;
  overflow: hidden;
  margin-top: 2px;
  color: #ddecff;
  font-size: 0.86rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.automation-metrics small {
  display: block;
  overflow: hidden;
  margin-top: 2px;
  color: #506681;
  font-size: 0.54rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.automation-metrics article[data-state="ok"] strong { color: var(--automation-green); }
.automation-metrics article[data-state="error"] strong { color: var(--automation-red); }
.automation-metrics article[data-state="accent"] strong { color: var(--automation-gold); }
.automation-metrics article[data-state="warn"] strong { color: #ff9c6c; }

.automation-control-bar {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 50px;
  padding: 8px 14px;
  border-bottom: 1px solid rgba(138, 181, 226, 0.12);
}

.automation-search {
  display: flex;
  width: min(290px, 35%);
  min-width: 180px;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 10px;
  border: 1px solid rgba(141, 184, 227, 0.15);
  border-radius: 3px;
  background: rgba(3, 8, 16, 0.6);
}

.automation-search:focus-within {
  border-color: rgba(255, 199, 102, 0.55);
  box-shadow: 0 0 0 2px rgba(255, 199, 102, 0.06);
}

.automation-search svg {
  width: 14px;
  fill: none;
  stroke: #647b98;
  stroke-width: 1.7;
}

.automation-search input {
  width: 100%;
  border: 0;
  outline: 0;
  color: #dceaff;
  background: transparent;
  font-size: 0.62rem;
}

.automation-filters {
  display: flex;
  gap: 4px;
  overflow-x: auto;
}

.automation-filters button {
  min-height: 29px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: 2px;
  color: #607893;
  background: transparent;
  cursor: pointer;
  font-size: 0.52rem;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.automation-filters button:hover,
.automation-filters button.is-active {
  color: #ffe2a7;
  border-color: rgba(255, 198, 93, 0.17);
  background: rgba(255, 183, 62, 0.08);
}

.automation-workspace {
  display: grid;
  flex: 1;
  min-width: 0;
  min-height: 0;
  grid-template-columns: minmax(260px, 0.34fr) minmax(0, 0.66fr);
}

.automation-list-pane {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  border-right: 1px solid rgba(137, 179, 223, 0.12);
  background: rgba(3, 8, 15, 0.34);
}

.automation-list-pane > header {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  min-height: 34px;
  padding: 0 13px;
  border-bottom: 1px solid rgba(137, 179, 223, 0.08);
  color: #617a97;
  font-size: 0.52rem;
  letter-spacing: 0.14em;
}

.automation-list-pane > header b {
  color: var(--automation-gold);
  font-weight: 500;
}

.automation-list {
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-color: rgba(255, 192, 89, 0.22) transparent;
  scrollbar-width: thin;
}

.automation-card {
  position: relative;
  display: grid;
  width: 100%;
  grid-template-columns: 8px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-height: 76px;
  padding: 10px 11px;
  border: 0;
  border-bottom: 1px solid rgba(133, 177, 220, 0.075);
  text-align: left;
  color: #cbdcf0;
  background: transparent;
  cursor: pointer;
  transition: 150ms ease;
}

.automation-card:hover,
.automation-card:focus-within {
  outline: 0;
  background: rgba(74, 122, 168, 0.08);
}

.automation-card[data-selected="true"] {
  background: linear-gradient(90deg, rgba(255, 184, 65, 0.12), rgba(255, 184, 65, 0.025));
  box-shadow: inset 2px 0 var(--automation-gold);
}

.automation-card-signal {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--automation-green);
  box-shadow: 0 0 9px rgba(104, 230, 174, 0.6);
}

.automation-card[data-status="paused"] .automation-card-signal { background: #63748a; box-shadow: none; }
.automation-card[data-status="error"] .automation-card-signal { background: var(--automation-red); box-shadow: 0 0 9px rgba(255, 128, 111, 0.7); }
.automation-card[data-status="running"] .automation-card-signal { background: var(--automation-cyan); animation: automation-pulse 1s ease infinite; }

@keyframes automation-pulse {
  50% { opacity: 0.35; transform: scale(0.8); }
}

.automation-card-copy {
  display: block;
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  outline: 0;
  text-align: left;
  color: inherit;
  background: transparent;
  cursor: pointer;
}

.automation-card-heading {
  display: flex;
  align-items: center;
  gap: 7px;
}

.automation-card-heading strong {
  flex: 1;
  overflow: hidden;
  color: #e5f0ff;
  font-size: 0.67rem;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.automation-card-heading i {
  flex: none;
  padding: 2px 4px;
  border: 1px solid rgba(143, 182, 225, 0.17);
  border-radius: 2px;
  color: #7890aa;
  font: normal 0.43rem/1 "IBM Plex Mono", monospace;
  letter-spacing: 0.08em;
}

.automation-card-copy > small {
  display: block;
  overflow: hidden;
  margin-top: 4px;
  color: #637892;
  font-size: 0.52rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.automation-card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 7px;
  color: #6c829c;
  font-size: 0.47rem;
  letter-spacing: 0.04em;
}

.automation-card-meta > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.automation-task-status {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 5px;
  padding: 2px 6px;
  border: 1px solid rgba(104, 230, 174, 0.2);
  border-radius: 999px;
  color: #80d9b3;
  background: rgba(38, 128, 92, 0.1);
  font-weight: 650;
  letter-spacing: 0.07em;
}

.automation-task-status i {
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: 50%;
  background: var(--automation-green);
}

.automation-task-status[data-task-state="running"] {
  border-color: rgba(105, 220, 255, 0.3);
  color: #8de4ff;
  background: rgba(31, 143, 184, 0.13);
}

.automation-task-status[data-task-state="running"] i {
  background: var(--automation-cyan);
  box-shadow: 0 0 8px rgba(105, 220, 255, 0.76);
  animation: automation-pulse 1s ease infinite;
}

.automation-card-next { margin-left: auto; }

.automation-card-controls {
  display: flex;
  align-items: center;
  gap: 5px;
}

.automation-card-controls button {
  display: grid;
  width: 32px;
  height: 32px;
  min-height: 32px;
  padding: 0;
  place-items: center;
  border: 1px solid rgba(125, 175, 220, 0.18);
  border-radius: 50%;
  color: #91a9c1;
  background: rgba(6, 15, 27, 0.72);
  cursor: pointer;
  transition: 150ms ease;
}

.automation-card-controls button:hover,
.automation-card-controls button:focus-visible {
  outline: 0;
  color: #fff;
  border-color: rgba(255, 199, 102, 0.52);
  background: rgba(92, 63, 20, 0.32);
}

.automation-card-controls button[data-card-action="stop"] {
  color: #ff9a8c;
  border-color: rgba(255, 128, 111, 0.28);
}

.automation-card-controls button:disabled {
  opacity: 0.3;
  pointer-events: none;
}

.automation-detail {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: radial-gradient(circle at 80% 4%, rgba(93, 169, 225, 0.045), transparent 34%);
}

.automation-detail-scroll {
  height: 100%;
  overflow-y: auto;
  padding: 19px 20px 24px;
  scrollbar-color: rgba(255, 192, 89, 0.22) transparent;
  scrollbar-width: thin;
}

.automation-detail-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.automation-live-state {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--automation-green);
  font-size: 0.5rem;
  letter-spacing: 0.13em;
}

.automation-detail-header[data-status="error"] .automation-live-state { color: var(--automation-red); }
.automation-detail-header[data-status="error"] .automation-live-state i { background: var(--automation-red); box-shadow: 0 0 9px rgba(255, 128, 111, 0.65); }
.automation-detail-header[data-status="paused"] .automation-live-state { color: #7e91a8; }
.automation-detail-header[data-status="paused"] .automation-live-state i { background: #718299; box-shadow: none; }
.automation-detail-header[data-task-state="running"] .automation-live-state { color: var(--automation-cyan); }
.automation-detail-header[data-task-state="running"] .automation-live-state i { background: var(--automation-cyan); box-shadow: 0 0 10px rgba(105, 220, 255, 0.72); animation: automation-pulse 1s ease infinite; }

.automation-detail-title h4 {
  margin: 5px 0 0;
  color: #f5f9ff;
  font: 620 clamp(1.15rem, 2.3vw, 1.48rem)/1.2 "IBM Plex Sans", sans-serif;
  letter-spacing: -0.02em;
}

.automation-detail-title > p {
  max-width: 620px;
  margin: 6px 0 0;
  color: #768da8;
  font-size: 0.6rem;
  line-height: 1.55;
}

.automation-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 10px;
}

.automation-badges span {
  padding: 3px 6px;
  border: 1px solid rgba(124, 172, 220, 0.14);
  border-radius: 2px;
  color: #7791ad;
  background: rgba(17, 36, 57, 0.32);
  font-size: 0.46rem;
  text-transform: uppercase;
}

.automation-badges span.is-managed { color: #d6b16f; border-color: rgba(255, 199, 102, 0.2); }

.automation-icon-action {
  width: 33px;
  min-width: 33px;
  padding: 0;
  color: #a7bdd7;
}

.automation-icon-action.is-stop {
  color: #ff9b8c;
  border-color: rgba(255, 128, 111, 0.3);
}

.automation-managed-note,
.automation-callout {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 15px;
  padding: 9px 11px;
  border: 1px solid rgba(255, 194, 92, 0.18);
  color: #8d7957;
  background: rgba(255, 185, 66, 0.055);
  font-size: 0.53rem;
  line-height: 1.5;
}

.automation-managed-note b,
.automation-callout b { flex: none; color: #e0bd7d; font-size: 0.49rem; letter-spacing: 0.1em; }

.automation-next-run {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 17px;
  border: 1px solid rgba(132, 179, 223, 0.13);
  border-radius: 3px;
  background: linear-gradient(140deg, rgba(19, 42, 66, 0.33), rgba(5, 12, 23, 0.28));
}

.automation-next-run > div {
  min-width: 0;
  padding: 11px 12px;
  border-right: 1px solid rgba(132, 179, 223, 0.1);
}

.automation-next-run > div:last-child { border-right: 0; }
.automation-next-run strong { display: block; overflow: hidden; margin-top: 3px; color: #e5effb; font-size: 0.72rem; text-overflow: ellipsis; white-space: nowrap; }
.automation-next-run > div:first-child strong { color: var(--automation-gold); }
.automation-next-run small { display: block; overflow: hidden; margin-top: 3px; color: #637892; font-size: 0.49rem; text-overflow: ellipsis; white-space: nowrap; }

.automation-definition-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: 10px;
  margin-top: 10px;
}

.automation-definition-card {
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(128, 174, 218, 0.12);
  border-radius: 3px;
  background: rgba(6, 14, 26, 0.55);
}

.automation-definition-card > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.automation-definition-card > header b {
  color: #6c849f;
  font-size: 0.48rem;
  font-weight: 500;
  text-transform: uppercase;
}

.automation-definition-card > strong {
  display: block;
  margin-top: 9px;
  color: #dbe9f8;
  font-size: 0.64rem;
  line-height: 1.45;
}

.automation-definition-card dl {
  margin: 10px 0 0;
  border-top: 1px solid rgba(130, 173, 215, 0.09);
}

.automation-definition-card dl > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-top: 7px;
}

.automation-definition-card dt { color: #607690; font-size: 0.5rem; }
.automation-definition-card dd { overflow: hidden; margin: 0; color: #9bb0c7; font-size: 0.5rem; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.automation-definition-card code { color: #c9dcf0; font: inherit; }

.automation-payload-preview,
.automation-command-preview {
  display: -webkit-box;
  overflow: hidden;
  margin: 9px 0 0;
  color: #9db3ca;
  font-size: 0.56rem;
  line-height: 1.55;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

.automation-command-preview {
  padding: 8px;
  border: 1px solid rgba(102, 217, 255, 0.1);
  color: #84d8f5;
  background: rgba(1, 7, 13, 0.72);
  white-space: pre-wrap;
}

.automation-attention-panel {
  display: flex;
  gap: 10px;
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 119, 99, 0.23);
  border-radius: 3px;
  background: rgba(111, 34, 28, 0.13);
}

.automation-attention-panel > span {
  display: grid;
  width: 22px;
  height: 22px;
  flex: none;
  place-items: center;
  border: 1px solid rgba(255, 128, 111, 0.35);
  border-radius: 50%;
  color: var(--automation-red);
  font-size: 0.65rem;
}

.automation-attention-panel b { color: #ff9b8b; font-size: 0.53rem; letter-spacing: 0.09em; }
.automation-attention-panel p { margin: 3px 0 0; color: #aa7c78; font-size: 0.53rem; line-height: 1.5; }
.automation-attention-panel small { color: #755c5d; font-size: 0.47rem; }

.automation-history { margin-top: 16px; }
.automation-history > header { display: flex; align-items: flex-end; justify-content: space-between; padding-bottom: 8px; border-bottom: 1px solid rgba(135, 178, 220, 0.12); }
.automation-history h5 { margin: 2px 0 0; color: #d8e6f6; font-size: 0.72rem; font-weight: 550; }
.automation-history > header button { border: 0; color: #7187a1; background: transparent; cursor: pointer; font-size: 0.49rem; }
.automation-history > header button:hover { color: var(--automation-gold); }

.automation-run-list { padding-top: 3px; }
.automation-run { display: grid; grid-template-columns: 8px minmax(0, 1fr); gap: 9px; padding: 9px 2px; border-bottom: 1px solid rgba(132, 175, 217, 0.075); }
.automation-run > i { width: 6px; height: 6px; margin-top: 4px; border-radius: 50%; background: var(--automation-green); box-shadow: 0 0 7px rgba(104, 230, 174, 0.5); }
.automation-run[data-status="error"] > i,
.automation-run[data-status="failed"] > i { background: var(--automation-red); box-shadow: 0 0 7px rgba(255, 128, 111, 0.5); }
.automation-run[data-status="skipped"] > i { background: #76879c; box-shadow: none; }
.automation-run header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.automation-run strong { color: #aec3da; font-size: 0.49rem; letter-spacing: 0.08em; }
.automation-run time { color: #5e748e; font-size: 0.47rem; }
.automation-run p { margin: 3px 0 0; color: #8ca2ba; font-size: 0.52rem; line-height: 1.4; }
.automation-run small { color: #536881; font-size: 0.46rem; }

.automation-no-runs,
.automation-empty-list,
.automation-empty-detail,
.automation-error {
  display: grid;
  min-height: 150px;
  place-content: center;
  padding: 24px;
  text-align: center;
}

.automation-empty-detail { height: 100%; }
.automation-empty-detail > span { color: rgba(255, 199, 102, 0.5); font-size: 2rem; }
.automation-empty-detail h4,
.automation-error h4 { margin: 8px 0 0; color: #d8e6f5; font: 550 0.92rem "IBM Plex Sans", sans-serif; }
.automation-empty-detail p,
.automation-empty-list p,
.automation-no-runs p,
.automation-error p { max-width: 330px; margin: 6px auto 0; color: #607690; font-size: 0.55rem; line-height: 1.55; }
.automation-empty-detail button { margin: 14px auto 0; }
.automation-empty-list > span,
.automation-no-runs > span,
.automation-error > span { color: #8fa4bc; font-size: 0.53rem; letter-spacing: 0.12em; }
.automation-error > span { color: var(--automation-red); }

.automation-loading {
  display: flex;
  min-height: 160px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #6b819a;
  font-size: 0.55rem;
  letter-spacing: 0.08em;
}

.automation-loading i {
  width: 12px;
  height: 12px;
  border: 1px solid rgba(255, 199, 102, 0.2);
  border-top-color: var(--automation-gold);
  border-radius: 50%;
  animation: automation-refresh 700ms linear infinite;
}

.automation-danger-zone {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 19px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 111, 91, 0.13);
}

.automation-danger-zone p { margin: 3px 0 0; color: #715d64; font-size: 0.49rem; }
.automation-danger-zone button { min-height: 30px; border: 1px solid rgba(255, 116, 95, 0.25); color: #c37971; background: rgba(94, 23, 20, 0.14); cursor: pointer; font: 0.49rem "IBM Plex Mono", monospace; letter-spacing: 0.08em; }
.automation-danger-zone button:hover { color: #ffb2a6; border-color: rgba(255, 116, 95, 0.55); }

.automation-statusbar {
  display: flex;
  min-height: 25px;
  flex: none;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 12px;
  border-top: 1px solid rgba(136, 178, 221, 0.1);
  color: #4f657f;
  background: rgba(2, 7, 13, 0.74);
  font-size: 0.45rem;
  letter-spacing: 0.08em;
}

.automation-toast {
  position: absolute;
  right: 18px;
  bottom: 38px;
  z-index: 20;
  max-width: min(360px, calc(100% - 36px));
  padding: 10px 13px;
  border: 1px solid rgba(104, 230, 174, 0.3);
  border-radius: 3px;
  color: #aef2d3;
  background: rgba(7, 33, 27, 0.96);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
  font-size: 0.56rem;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: 180ms ease;
}

.automation-toast[data-tone="error"] { color: #ffc0b6; border-color: rgba(255, 128, 111, 0.35); background: rgba(48, 15, 15, 0.96); }
.automation-toast.is-visible { opacity: 1; transform: translateY(0); }

/* Automation editor and confirmations */

.automation-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(0, 4, 10, 0.8);
  backdrop-filter: blur(10px);
}

.automation-editor-dialog,
.automation-confirm-dialog {
  display: flex;
  width: min(920px, 96vw);
  max-height: min(880px, 94vh);
  overflow: hidden;
  flex-direction: column;
  border: 1px solid rgba(255, 199, 102, 0.28);
  border-radius: 4px;
  color: #dceaff;
  background:
    radial-gradient(circle at 88% 0, rgba(255, 187, 73, 0.09), transparent 30%),
    linear-gradient(145deg, rgba(13, 24, 41, 0.995), rgba(3, 8, 16, 0.998));
  box-shadow: 0 40px 130px rgba(0, 0, 0, 0.76), 0 0 50px rgba(255, 178, 50, 0.06);
  font-family: "IBM Plex Mono", monospace;
}

.automation-editor-header {
  display: flex;
  flex: none;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 22px 16px;
  border-bottom: 1px solid rgba(255, 199, 102, 0.13);
}

.automation-editor-header span { color: #b08b52; font-size: 0.5rem; letter-spacing: 0.15em; }
.automation-editor-header h3 { margin: 4px 0 0; color: #fff8eb; font: 620 1.42rem/1.2 "IBM Plex Sans", sans-serif; letter-spacing: -0.02em; }
.automation-editor-header p { margin: 5px 0 0; color: #6e84a0; font-size: 0.57rem; }
.automation-editor-header > button { width: 28px; height: 28px; border: 1px solid rgba(150, 183, 219, 0.18); border-radius: 50%; color: #8fa4bc; background: rgba(4, 10, 19, 0.6); cursor: pointer; font-size: 1rem; }
.automation-editor-header > button:hover { color: white; border-color: rgba(255, 199, 102, 0.52); }

.automation-editor-form { display: flex; min-height: 0; flex: 1; flex-direction: column; }
.automation-editor-scroll { min-height: 0; overflow-y: auto; padding: 0 22px 26px; scrollbar-color: rgba(255, 192, 89, 0.25) transparent; scrollbar-width: thin; }

.automation-form-section { padding: 20px 0 4px; }
.automation-form-section + .automation-form-section { margin-top: 12px; border-top: 1px solid rgba(134, 176, 219, 0.11); }
.automation-form-section > header { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.automation-form-section > header i { display: grid; width: 26px; height: 26px; flex: none; place-items: center; border: 1px solid rgba(255, 199, 102, 0.23); border-radius: 50%; color: #d5a95d; background: rgba(255, 183, 58, 0.055); font: normal 0.5rem "IBM Plex Mono", monospace; }
.automation-form-section > header h4 { margin: 0; color: #dae8f8; font: 570 0.78rem "IBM Plex Sans", sans-serif; }
.automation-form-section > header p { margin: 3px 0 0; color: #637993; font-size: 0.52rem; }

.automation-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px 13px;
}

.automation-form-grid label,
.automation-textarea-label {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 5px;
}

.automation-form-grid label.is-wide { grid-column: 1 / -1; }
.automation-form-grid label > span:first-child,
.automation-textarea-label > span:first-child { color: #7188a3; font-size: 0.49rem; letter-spacing: 0.1em; }
.automation-form-grid label > span b,
.automation-textarea-label > span b { color: #ba9253; font-size: 0.42rem; font-weight: 500; }

.automation-form-grid input,
.automation-form-grid select,
.automation-textarea-label textarea,
.automation-confirm-dialog input {
  box-sizing: border-box;
  width: 100%;
  min-height: 36px;
  padding: 8px 10px;
  border: 1px solid rgba(133, 177, 220, 0.16);
  border-radius: 3px;
  outline: 0;
  color: #d7e6f6;
  background: rgba(2, 8, 16, 0.7);
  font-size: 0.59rem;
}

.automation-textarea-label textarea { min-height: 92px; resize: vertical; line-height: 1.55; }
.automation-instructions-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.automation-instructions-label > button {
  padding: 0;
  border: 0;
  color: #f2bd68;
  background: transparent;
  cursor: pointer;
  font: 0.46rem "IBM Plex Mono", monospace;
  letter-spacing: 0.08em;
}
.automation-instructions-label > button:hover { color: #ffe0a9; }
.automation-form-grid input:focus,
.automation-form-grid select:focus,
.automation-textarea-label textarea:focus,
.automation-confirm-dialog input:focus { border-color: rgba(255, 199, 102, 0.55); box-shadow: 0 0 0 2px rgba(255, 199, 102, 0.06); }
.automation-form-grid select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, #7390af 50%), linear-gradient(135deg, #7390af 50%, transparent 50%); background-position: calc(100% - 13px) 15px, calc(100% - 9px) 15px; background-size: 4px 4px; background-repeat: no-repeat; }

.automation-segmented { display: flex; gap: 5px; margin-bottom: 13px; }
.automation-segmented button { min-height: 32px; padding: 0 12px; border: 1px solid rgba(137, 178, 219, 0.14); border-radius: 2px; color: #6c829b; background: rgba(4, 11, 21, 0.58); cursor: pointer; font-size: 0.5rem; letter-spacing: 0.07em; }
.automation-segmented button:hover,
.automation-segmented button.is-active { color: #ffdc9d; border-color: rgba(255, 199, 102, 0.38); background: rgba(255, 183, 62, 0.1); }
.automation-segmented em { margin-left: 4px; color: #ff8978; font: normal 0.38rem "IBM Plex Mono", monospace; }

.automation-schedule-panel[hidden],
.automation-action-panel[hidden],
[data-delivery-field][hidden] { display: none !important; }
.automation-cron-hints { display: flex; align-items: end; gap: 5px; }
.automation-cron-hints button { min-height: 29px; padding: 0 7px; border: 1px solid rgba(120, 169, 215, 0.13); color: #68809b; background: rgba(3, 9, 18, 0.48); cursor: pointer; font-size: 0.42rem; }
.automation-cron-hints button:hover { color: #ffd58c; border-color: rgba(255, 199, 102, 0.3); }

.automation-readonly-field strong { display: flex; min-height: 36px; align-items: center; padding: 0 10px; border: 1px dashed rgba(133, 177, 220, 0.13); color: #8198b2; background: rgba(4, 9, 17, 0.35); font-size: 0.56rem; }

.automation-model-settings {
  margin-top: 12px;
  padding: 11px;
  border: 1px solid rgba(255, 199, 102, 0.18);
  border-radius: 3px;
  background: linear-gradient(135deg, rgba(255, 185, 66, 0.055), rgba(5, 12, 22, 0.48));
}
.automation-model-settings > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.automation-model-settings > header span { color: #d9ad63; font-size: 0.49rem; letter-spacing: 0.11em; }
.automation-model-settings > header p { margin: 3px 0 0; color: #687f99; font-size: 0.48rem; line-height: 1.45; }
.automation-model-settings > header b { flex: none; padding: 3px 6px; border: 1px solid rgba(100, 219, 255, 0.2); color: #70d8f8; background: rgba(37, 136, 174, 0.08); font-size: 0.42rem; font-weight: 500; letter-spacing: 0.1em; }
.automation-model-settings .is-model-grid { grid-template-columns: 0.72fr 1.28fr 1fr; }
.automation-model-settings > small { display: block; margin-top: 7px; color: #536b84; font-size: 0.44rem; line-height: 1.45; }

.automation-advanced { margin-top: 12px; border: 1px solid rgba(133, 175, 217, 0.11); border-radius: 3px; background: rgba(5, 12, 22, 0.38); }
.automation-advanced summary { padding: 9px 11px; color: #7087a0; cursor: pointer; font-size: 0.48rem; letter-spacing: 0.09em; list-style: none; }
.automation-advanced summary::after { content: "+"; float: right; color: #ba9150; }
.automation-advanced[open] summary::after { content: "−"; }
.automation-advanced .automation-form-grid { padding: 4px 11px 12px; }

.automation-form-grid label.automation-check { display: flex; flex-direction: row; align-items: center; gap: 9px; min-height: 36px; padding: 5px 8px; border: 1px solid rgba(132, 174, 215, 0.12); border-radius: 3px; background: rgba(2, 8, 15, 0.45); }
.automation-check input { width: 15px; min-height: 15px; accent-color: #efb858; }
.automation-check > span { display: flex; flex-direction: column; gap: 2px; }
.automation-check b { color: #96aac0; font-size: 0.48rem; font-weight: 550; }
.automation-check small { color: #536a83; font-size: 0.43rem; }

.automation-callout { margin: 0 0 12px; }
.automation-callout.is-danger { border-color: rgba(255, 119, 99, 0.23); color: #9e736f; background: rgba(101, 27, 22, 0.12); }
.automation-callout.is-danger b { color: #ff9787; }
.automation-callout.is-info { border-color: rgba(102, 218, 255, 0.18); color: #6689a0; background: rgba(34, 106, 137, 0.09); }
.automation-callout.is-info b { color: #78d7f3; }
.automation-callout code { color: #f5c270; }

.automation-editor-footer {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-height: 60px;
  padding: 9px 18px;
  border-top: 1px solid rgba(255, 199, 102, 0.13);
  background: rgba(2, 7, 14, 0.76);
}

.automation-editor-footer > div { margin-right: auto; }
.automation-editor-footer span { display: block; color: #8298b1; font-size: 0.48rem; letter-spacing: 0.09em; }
.automation-editor-footer span[data-state="error"] { color: #ff9483; }
.automation-editor-footer small { display: block; margin-top: 2px; color: #4e647d; font-size: 0.43rem; }

.automation-confirm-dialog {
  width: min(470px, 94vw);
  padding: 25px;
}

.automation-confirm-dialog > span { color: #c29654; font-size: 0.48rem; letter-spacing: 0.15em; }
.automation-confirm-dialog h3 { margin: 7px 0 0; color: #f6f9fd; font: 600 1.15rem/1.3 "IBM Plex Sans", sans-serif; }
.automation-confirm-dialog > p { margin: 9px 0 0; color: #7a8fa8; font-size: 0.57rem; line-height: 1.6; }
.automation-confirm-dialog > label { display: block; margin-top: 17px; color: #697e98; font-size: 0.47rem; letter-spacing: 0.07em; }
.automation-confirm-dialog > label b { color: #ffb7aa; font-weight: 500; }
.automation-confirm-dialog input { margin-top: 7px; }
.automation-confirm-dialog footer { display: flex; justify-content: flex-end; gap: 8px; margin-top: 21px; }
.automation-confirm-dialog footer button { min-height: 34px; padding: 0 13px; border: 1px solid rgba(137, 177, 217, 0.18); color: #9fb3ca; background: rgba(4, 10, 19, 0.7); cursor: pointer; font-size: 0.52rem; letter-spacing: 0.07em; }
.automation-confirm-dialog footer button[data-action="confirm"] { color: #191003; border-color: rgba(255, 199, 102, 0.52); background: linear-gradient(135deg, #ffdda0, #f3a940); }
.automation-confirm-dialog[data-tone="danger"] footer button[data-action="confirm"] { color: white; border-color: rgba(255, 116, 95, 0.6); background: linear-gradient(135deg, #ee826f, #bc4437); }
.automation-confirm-dialog footer button:disabled { opacity: 0.35; cursor: not-allowed; }

/* Owner Skills app */

#ownerAppSkills { --owner-app-accent: #ef8cff; }
.owner-skills-window { min-width: 520px; }
.skills-app {
  --skills-accent: #ef8cff;
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  color: #dceaff;
  background: radial-gradient(circle at 92% 0, rgba(230, 93, 255, 0.1), transparent 30%), rgba(3, 9, 18, 0.82);
  font-family: "IBM Plex Mono", monospace;
}
.skills-masthead { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 16px 18px 14px; border-bottom: 1px solid rgba(218, 130, 255, 0.14); }
.skills-masthead > div:first-child > span { color: #bd78db; font-size: 0.47rem; letter-spacing: 0.15em; }
.skills-masthead > div:first-child > span i { display: inline-block; width: 5px; height: 5px; margin-right: 6px; border-radius: 50%; background: var(--skills-accent); box-shadow: 0 0 10px var(--skills-accent); }
.skills-masthead h3 { margin: 4px 0 0; color: #f7eaff; font: 620 1.3rem/1.2 "IBM Plex Sans", sans-serif; }
.skills-masthead p { margin: 4px 0 0; color: #71869e; font-size: 0.53rem; }
.skills-masthead > div:last-child { display: flex; gap: 7px; }
.skills-masthead button,
.skills-detail-actions button,
.skills-create-dialog button { min-height: 32px; padding: 0 10px; border: 1px solid rgba(154, 187, 221, 0.18); color: #96abc1; background: rgba(3, 9, 18, 0.58); cursor: pointer; font: 0.48rem "IBM Plex Mono", monospace; letter-spacing: 0.07em; }
.skills-masthead button:hover,
.skills-detail-actions button:hover,
.skills-create-dialog button:hover { color: #f5d9ff; border-color: rgba(239, 140, 255, 0.42); }
.skills-masthead button.is-primary,
.skills-create-dialog button.is-primary { color: #1d0823; border-color: rgba(239, 140, 255, 0.65); background: linear-gradient(135deg, #f3b1ff, #bd65db); }
.skills-toolbar { display: flex; min-height: 44px; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 12px; border-bottom: 1px solid rgba(136, 179, 221, 0.1); background: rgba(4, 10, 19, 0.55); }
.skills-toolbar label { display: flex; width: min(320px, 60%); align-items: center; gap: 8px; padding: 0 9px; border: 1px solid rgba(142, 181, 221, 0.14); background: rgba(1, 6, 13, 0.6); }
.skills-toolbar input { width: 100%; min-height: 29px; border: 0; outline: 0; color: #d8e7f6; background: transparent; font: 0.54rem "IBM Plex Mono", monospace; }
.skills-toolbar p { margin: 0; color: #5f748c; font-size: 0.44rem; letter-spacing: 0.09em; }
.skills-toolbar strong { color: #d698ed; }
.skills-workspace { display: grid; min-height: 0; flex: 1; grid-template-columns: minmax(230px, 0.38fr) minmax(0, 1fr); }
.skills-workspace > aside { min-height: 0; overflow-y: auto; border-right: 1px solid rgba(141, 181, 222, 0.11); background: rgba(2, 7, 14, 0.42); }
.skills-workspace > main { min-width: 0; min-height: 0; overflow: hidden; }
.skills-list-item { display: grid; width: 100%; grid-template-columns: 17px minmax(0, 1fr) 12px; gap: 8px; padding: 11px 12px; text-align: left; border: 0; border-bottom: 1px solid rgba(133, 174, 216, 0.075); color: #b9cce0; background: transparent; cursor: pointer; }
.skills-list-item:hover,
.skills-list-item[data-selected="true"] { background: linear-gradient(90deg, rgba(218, 105, 244, 0.14), rgba(50, 112, 158, 0.05)); }
.skills-list-item[data-selected="true"] { box-shadow: 2px 0 0 var(--skills-accent) inset; }
.skills-list-item > i { color: #d982f0; font-style: normal; font-size: 0.48rem; }
.skills-list-item strong,
.skills-list-item small { display: block; overflow: hidden; text-overflow: ellipsis; }
.skills-list-item strong { color: #dce9f7; font-size: 0.55rem; white-space: nowrap; }
.skills-list-item small { margin-top: 4px; color: #637991; font-size: 0.46rem; line-height: 1.4; }
.skills-list-item > b { color: #5c7189; font-weight: 400; }
.skills-detail-scroll { box-sizing: border-box; height: 100%; overflow-y: auto; padding: 18px; }
.skills-detail-header > span { color: #b875d3; font-size: 0.46rem; letter-spacing: 0.13em; }
.skills-detail-header h4 { margin: 5px 0 0; color: #f0e6f5; font: 600 1.16rem/1.25 "IBM Plex Sans", sans-serif; }
.skills-detail-header p { max-width: 670px; margin: 7px 0 0; color: #7f94aa; font-size: 0.57rem; line-height: 1.6; }
.skills-detail-card { margin-top: 18px; padding: 13px; border: 1px solid rgba(203, 127, 234, 0.16); background: rgba(7, 14, 25, 0.64); }
.skills-detail-card > header { display: flex; justify-content: space-between; color: #7c91a8; font-size: 0.45rem; letter-spacing: 0.1em; }
.skills-detail-card > header b { color: #d78bed; }
.skills-detail-card > code { display: block; overflow: hidden; margin-top: 10px; color: #82dafa; font-size: 0.55rem; text-overflow: ellipsis; white-space: nowrap; }
.skills-detail-card dl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 13px 0 0; }
.skills-detail-card dl div { padding-top: 7px; border-top: 1px solid rgba(133, 175, 216, 0.1); }
.skills-detail-card dt { color: #536980; font-size: 0.43rem; }
.skills-detail-card dd { overflow: hidden; margin: 3px 0 0; color: #a8bad0; font-size: 0.49rem; text-overflow: ellipsis; white-space: nowrap; }
.skills-guidance { display: flex; gap: 11px; margin-top: 11px; padding: 12px; border: 1px solid rgba(93, 211, 244, 0.13); background: rgba(35, 123, 158, 0.055); }
.skills-guidance > i { color: #72dbf8; font-style: normal; }
.skills-guidance strong { color: #8cddf3; font-size: 0.47rem; letter-spacing: 0.09em; }
.skills-guidance p { margin: 4px 0 0; color: #668096; font-size: 0.5rem; line-height: 1.55; }
.skills-detail-actions { display: flex; justify-content: flex-end; margin-top: 16px; }
.skills-detail-actions button { color: #f0c2ff; border-color: rgba(239, 140, 255, 0.3); }
.skills-empty,
.skills-loading,
.skills-empty-list,
.skills-error { display: grid; min-height: 170px; place-content: center; padding: 20px; text-align: center; color: #687e96; font-size: 0.52rem; }
.skills-empty { height: 100%; box-sizing: border-box; }
.skills-empty > span { color: #c47adc; font-size: 1.7rem; }
.skills-empty h4 { margin: 7px 0 0; color: #dbe8f5; font: 550 0.9rem "IBM Plex Sans", sans-serif; }
.skills-empty p,
.skills-empty-list p,
.skills-error p { max-width: 340px; margin: 5px 0 0; color: #60768e; font-size: 0.5rem; line-height: 1.55; }
.skills-loading { display: flex; align-items: center; justify-content: center; gap: 9px; }
.skills-loading i { width: 11px; height: 11px; border: 1px solid rgba(239, 140, 255, 0.2); border-top-color: var(--skills-accent); border-radius: 50%; animation: automation-refresh 700ms linear infinite; }
.skills-status { display: flex; min-height: 25px; flex: none; align-items: center; justify-content: space-between; padding: 0 12px; border-top: 1px solid rgba(137, 178, 219, 0.1); color: #51677e; background: rgba(2, 7, 13, 0.7); font-size: 0.43rem; letter-spacing: 0.08em; }
.skills-toast { position: absolute; right: 16px; bottom: 36px; padding: 9px 12px; color: #f0cbfa; border: 1px solid rgba(239, 140, 255, 0.35); background: rgba(42, 16, 49, 0.96); font-size: 0.52rem; opacity: 0; pointer-events: none; transform: translateY(7px); transition: 170ms ease; }
.skills-toast.is-visible { opacity: 1; transform: none; }
.skills-modal-overlay { position: fixed; inset: 0; z-index: 1200; display: grid; place-items: center; padding: 20px; background: rgba(0, 4, 10, 0.8); backdrop-filter: blur(10px); }
.skills-create-dialog { display: flex; width: min(720px, 95vw); max-height: 92vh; flex-direction: column; overflow: hidden; color: #dceaff; border: 1px solid rgba(239, 140, 255, 0.3); background: linear-gradient(145deg, rgba(20, 18, 37, 0.995), rgba(3, 8, 16, 0.998)); box-shadow: 0 40px 120px rgba(0, 0, 0, 0.75); font-family: "IBM Plex Mono", monospace; }
.skills-create-dialog > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 17px 19px 14px; border-bottom: 1px solid rgba(239, 140, 255, 0.13); }
.skills-create-dialog > header span { color: #bd78d7; font-size: 0.46rem; letter-spacing: 0.14em; }
.skills-create-dialog > header h3 { margin: 5px 0 0; color: #f7ecfb; font: 600 1.18rem "IBM Plex Sans", sans-serif; }
.skills-create-dialog > header p { margin: 4px 0 0; color: #6c8198; font-size: 0.51rem; }
.skills-create-dialog > header > button { width: 29px; padding: 0; border-radius: 50%; font-size: 0.9rem; }
.skills-create-fields { display: grid; gap: 12px; overflow-y: auto; padding: 18px 19px; }
.skills-create-fields label { display: flex; flex-direction: column; gap: 5px; color: #71879e; font-size: 0.47rem; letter-spacing: 0.08em; }
.skills-create-fields label b { color: #c583da; font-size: 0.4rem; font-weight: 500; }
.skills-create-fields input,
.skills-create-fields textarea { box-sizing: border-box; width: 100%; padding: 9px 10px; color: #d9e7f5; border: 1px solid rgba(143, 179, 218, 0.17); outline: 0; background: rgba(2, 7, 15, 0.7); font: 0.58rem/1.55 "IBM Plex Mono", monospace; resize: vertical; }
.skills-create-fields input:focus,
.skills-create-fields textarea:focus { border-color: rgba(239, 140, 255, 0.5); box-shadow: 0 0 0 2px rgba(239, 140, 255, 0.06); }
.skills-create-fields > small { color: #5a7088; font-size: 0.46rem; line-height: 1.5; }
.skills-create-fields > small[data-state="error"] { color: #ff9a88; }
.skills-create-dialog > footer { display: flex; justify-content: flex-end; gap: 8px; padding: 10px 19px; border-top: 1px solid rgba(239, 140, 255, 0.12); background: rgba(2, 7, 14, 0.72); }
.skills-create-dialog button:disabled { opacity: 0.4; cursor: wait; }

@media (max-width: 760px) {
  .owner-automations-window { min-width: 300px; }
  .automation-masthead { align-items: flex-start; padding: 13px 13px 11px; }
  .automation-masthead-copy p { display: none; }
  .automation-masthead-actions .is-quiet span { display: none; }
  .automation-masthead-actions .automation-button { padding: 0 8px; font-size: 0.5rem; }
  .automation-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .automation-metrics article { padding: 8px 10px; border-bottom: 1px solid rgba(142, 180, 222, 0.08); }
  .automation-control-bar { align-items: stretch; flex-direction: column; gap: 6px; padding: 7px 9px; }
  .automation-search { width: auto; min-width: 0; }
  .automation-filters button { padding: 0 7px; font-size: 0.46rem; }
  .automation-workspace { display: block; overflow-y: auto; }
  .automation-list-pane { min-height: 210px; max-height: 275px; border-right: 0; border-bottom: 1px solid rgba(137, 179, 223, 0.12); }
  .automation-detail { min-height: 480px; overflow: visible; }
  .automation-detail-scroll { height: auto; padding: 14px 12px 20px; overflow: visible; }
  .automation-detail-header { flex-direction: column; }
  .automation-detail-actions { width: 100%; }
  .automation-detail-actions .automation-button { margin-left: auto; }
  .automation-next-run { grid-template-columns: 1fr; }
  .automation-next-run > div { border-right: 0; border-bottom: 1px solid rgba(132, 179, 223, 0.1); }
  .automation-definition-grid { grid-template-columns: 1fr; }
  .automation-statusbar span:last-child { display: none; }
  .automation-modal-overlay { padding: 0; }
  .automation-editor-dialog { width: 100vw; max-height: 100dvh; height: 100dvh; border: 0; border-radius: 0; }
  .automation-editor-header { padding: 14px 15px 12px; }
  .automation-editor-scroll { padding: 0 15px 20px; }
  .automation-form-grid { grid-template-columns: 1fr; }
  .automation-model-settings .is-model-grid { grid-template-columns: 1fr; }
  .automation-form-grid label.is-wide { grid-column: auto; }
  .automation-segmented { overflow-x: auto; }
  .automation-segmented button { flex: none; padding: 0 9px; }
  .automation-cron-hints { flex-wrap: wrap; }
  .automation-editor-footer { flex-wrap: wrap; padding: 9px 12px; }
  .automation-editor-footer > div { width: 100%; }
  .automation-confirm-dialog { width: calc(100vw - 24px); box-sizing: border-box; }
  .owner-skills-window { min-width: 300px; }
  .skills-masthead { padding: 12px; }
  .skills-masthead p,
  .skills-masthead button:not(.is-primary) { display: none; }
  .skills-workspace { display: block; overflow-y: auto; }
  .skills-workspace > aside { max-height: 230px; border-right: 0; border-bottom: 1px solid rgba(141, 181, 222, 0.11); }
  .skills-workspace > main { min-height: 380px; }
  .skills-detail-card dl { grid-template-columns: 1fr; }
  .skills-status span:last-child { display: none; }
}

.desktop-window-error span,
.desktop-app-glyph {
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  color: #ff9b72;
  border: 1px solid rgba(255, 132, 89, 0.48);
  background: rgba(100, 31, 15, 0.26);
  font: 600 0.72rem/1 "IBM Plex Mono", monospace;
  letter-spacing: 0.06em;
}

.desktop-window-error strong,
.desktop-editor-welcome h3 {
  color: #f2f7ff;
  font: 560 1rem/1.3 "Space Grotesk", sans-serif;
}

.desktop-window-error p,
.desktop-editor-welcome p {
  max-width: 440px;
  margin: 0;
  color: #8ca5bf;
  font: 400 0.76rem/1.75 "IBM Plex Mono", monospace;
}

.desktop-editor-welcome {
  position: relative;
  flex: 1;
}

.desktop-editor-welcome h3 {
  margin: 2px 0 0;
}

.workspace-context-menu {
  position: fixed;
  z-index: 180;
  width: min(270px, calc(100vw - 20px));
  overflow: hidden;
  color: #d9ecff;
  border: 1px solid rgba(100, 185, 255, 0.34);
  border-radius: 3px;
  background: rgba(3, 9, 19, 0.97);
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.72), 0 0 0 1px rgba(255, 255, 255, 0.025) inset;
  backdrop-filter: blur(22px);
}

.workspace-context-menu header {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 11px 12px;
  border-bottom: 1px solid rgba(139, 196, 255, 0.14);
  background: rgba(30, 93, 148, 0.14);
}

.workspace-context-menu header span {
  color: #55c9ff;
  font: 650 0.56rem/1 "IBM Plex Mono", monospace;
}

.workspace-context-menu header strong {
  overflow: hidden;
  font: 550 0.68rem/1.35 "IBM Plex Mono", monospace;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspace-context-menu > button {
  display: grid;
  width: 100%;
  gap: 3px;
  padding: 10px 13px;
  text-align: left;
  color: #cde4fb;
  border: 0;
  border-bottom: 1px solid rgba(139, 196, 255, 0.08);
  background: transparent;
  cursor: pointer;
}

.workspace-context-menu > button:hover,
.workspace-context-menu > button:focus-visible {
  outline: none;
  background: rgba(50, 130, 196, 0.2);
}

.workspace-context-menu > button strong {
  font: 650 0.61rem/1.2 "IBM Plex Mono", monospace;
  letter-spacing: 0.1em;
}

.workspace-context-menu > button small {
  color: #718aa5;
  font: 450 0.57rem/1.25 "IBM Plex Mono", monospace;
}

.workspace-context-menu > button.is-destructive strong {
  color: #ff9570;
}

.workspace-context-menu > button.is-destructive:hover {
  background: rgba(143, 44, 24, 0.25);
}

.automation-context-menu {
  position: fixed;
  z-index: 230;
  width: min(286px, calc(100vw - 20px));
  overflow: hidden;
  color: #e6effb;
  border: 1px solid rgba(255, 199, 102, 0.3);
  border-radius: 7px;
  background: rgba(5, 11, 21, 0.98);
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.72), 0 0 28px rgba(255, 179, 58, 0.05);
  backdrop-filter: blur(22px);
}

.automation-context-menu header {
  display: grid;
  gap: 4px;
  padding: 11px 13px;
  border-bottom: 1px solid rgba(255, 199, 102, 0.12);
  background: rgba(255, 178, 50, 0.075);
}

.automation-context-menu header span {
  color: #bf8e43;
  font-weight: 650;
  letter-spacing: 0.12em;
}

.automation-context-menu header strong {
  overflow: hidden;
  color: #fff4df;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.automation-context-menu > button {
  display: grid;
  width: 100%;
  gap: 3px;
  padding: 10px 13px;
  text-align: left;
  color: #d2e2f2;
  border: 0;
  border-bottom: 1px solid rgba(138, 181, 225, 0.08);
  background: transparent;
  cursor: pointer;
}

.automation-context-menu > button:hover,
.automation-context-menu > button:focus-visible {
  outline: 0;
  background: rgba(255, 188, 76, 0.13);
}

.automation-context-menu > button strong {
  font-weight: 650;
  letter-spacing: 0.09em;
}

.automation-context-menu > button small { color: #7288a1; }
.automation-context-menu > button.is-destructive strong { color: #ff9a8c; }
.automation-context-menu > button.is-destructive:hover { background: rgba(147, 49, 33, 0.22); }
.automation-context-menu > button:disabled { opacity: 0.44; cursor: not-allowed; }

.owner-delete-overlay {
  position: fixed;
  inset: 0;
  z-index: 220;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(0, 3, 9, 0.68);
  backdrop-filter: blur(10px);
}

.owner-delete-dialog {
  width: min(480px, 100%);
  padding: 24px;
  color: #eaf4ff;
  border: 1px solid rgba(255, 126, 82, 0.42);
  border-radius: 3px;
  background: linear-gradient(145deg, rgba(40, 17, 17, 0.97), rgba(4, 9, 18, 0.985) 52%);
  box-shadow: 0 30px 100px rgba(0, 0, 0, 0.76);
}

.owner-delete-dialog > p,
.owner-delete-dialog h2,
.owner-delete-dialog > span {
  display: block;
  margin: 0;
}

.owner-delete-dialog > p {
  color: #ff8e68;
  font: 650 0.58rem/1.3 "IBM Plex Mono", monospace;
  letter-spacing: 0.14em;
}

.owner-delete-dialog h2 {
  margin-top: 10px;
  font: 560 1.16rem/1.4 "Space Grotesk", sans-serif;
}

.owner-delete-dialog > span {
  margin-top: 12px;
  color: #8ca5bf;
  font: 430 0.72rem/1.7 "IBM Plex Mono", monospace;
}

.owner-delete-dialog footer {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  margin-top: 24px;
}

.owner-delete-dialog footer button {
  min-height: 38px;
  padding: 0 14px;
  color: #b8d1ea;
  border: 1px solid rgba(140, 190, 238, 0.24);
  background: rgba(4, 10, 21, 0.65);
  cursor: pointer;
  font: 650 0.59rem/1 "IBM Plex Mono", monospace;
  letter-spacing: 0.08em;
}

.owner-delete-dialog footer button.is-destructive {
  color: #fff2ec;
  border-color: rgba(255, 119, 72, 0.62);
  background: rgba(138, 40, 21, 0.55);
}

@media (max-width: 720px) {
  .remote-machines-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .remote-machines-toolbar-actions {
    justify-content: flex-start;
    width: 100%;
  }

  .remote-machines-stage {
    padding: 10px;
  }

  .owner-desktop-window {
    left: 68px !important;
    top: 58px !important;
    width: calc(100vw - 78px) !important;
    height: calc(100dvh - 128px) !important;
    min-width: 0;
    min-height: 0;
  }

  .owner-desktop-window.is-maximized {
    inset: 8px 8px 64px 68px !important;
  }

  .owner-desktop-resize,
  .owner-desktop-window-actions button:first-child {
    display: none;
  }

  .owner-desktop-window-header h2 {
    max-width: 50vw;
  }

  .desktop-editor-path {
    max-width: 54vw;
  }

  .desktop-editor-menu > summary {
    padding: 0 8px;
  }

  .desktop-editor-mode,
  .desktop-editor-cursor-status,
  .desktop-editor-quick-actions button:first-child {
    display: none;
  }

  .desktop-editor-menu-panel {
    width: min(238px, calc(100vw - 92px));
  }

  .desktop-editor-dialog-overlay {
    padding: 12px;
  }

  .desktop-editor-dialog {
    padding: 17px;
  }
}

@media (max-height: 760px) and (min-width: 841px) {
  .profile-visual {
    height: 12rem;
  }

  .profile-content {
    padding-top: 1rem;
    padding-bottom: 0.8rem;
  }

  .profile-content h1 {
    font-size: 2.15rem;
  }

  .profile-description {
    margin-top: 0.8rem;
    font-size: 0.72rem;
    line-height: 1.45;
  }

  .profile-tags,
  .resume-link {
    margin-top: 0.72rem;
  }

  #awardFeature {
    min-height: 6.4rem;
  }

  .award-emblem {
    max-height: 6rem;
  }
}

/* Owner application legibility pass -------------------------------------- */

.owner-desktop-window-content {
  font-size: 16px;
  line-height: 1.5;
}

.owner-desktop-window-content :where(
  button,
  input,
  textarea,
  select,
  option,
  label,
  span,
  p,
  small,
  strong,
  b,
  em,
  code,
  kbd,
  dt,
  dd,
  header,
  footer,
  pre,
  summary,
  time
) {
  font-size: 16px !important;
  line-height: 1.45;
}

.owner-desktop-window-title,
.owner-desktop-window-content :where(h1, h2, h3, h4, h5, h6),
.automation-card-heading strong,
.automation-detail-title > p,
.automation-definition-card > strong,
.automation-next-run strong,
.skills-list-item strong,
.skills-detail-header p,
.remote-machine-endpoint strong {
  font-size: 18px !important;
  line-height: 1.35;
}

.automation-card-meta,
.automation-badges,
.automation-segmented,
.automation-editor-footer,
.automation-model-settings > header,
.skills-toolbar,
.skills-detail-actions,
.file-manager-commandbar,
.remote-machines-toolbar,
.remote-machine-actions {
  flex-wrap: wrap;
}

.automation-form-grid input,
.automation-form-grid select,
.automation-textarea-label textarea,
.automation-confirm-dialog input,
.skills-toolbar input,
.skills-create-fields input,
.skills-create-fields textarea,
.file-manager-search input,
.desktop-editor-dialog-input {
  min-height: 44px;
}

/* Detached owner dialogs, menus, and the authenticated workspace rail live
   outside .owner-desktop-window-content, so keep the same readable scale. */
#ownerWorkspace {
  font-size: 14px;
  line-height: 1.4;
}

#ownerWorkspace :where(
  button,
  input,
  textarea,
  select,
  option,
  label,
  span,
  p,
  small,
  strong,
  b,
  em,
  code,
  kbd,
  dt,
  dd,
  header,
  footer,
  pre,
  summary,
  time
) {
  font-size: 14px !important;
  line-height: 1.4;
}

:is(
  .automation-modal-overlay,
  .skills-modal-overlay,
  .file-manager-dialog-overlay,
  .owner-file-dialog-overlay,
  .desktop-editor-dialog-overlay,
  .owner-delete-overlay,
  .workspace-context-menu,
  .file-manager-context-menu,
  .automation-context-menu
) {
  font-size: 16px;
  line-height: 1.5;
}

:is(
  .automation-modal-overlay,
  .skills-modal-overlay,
  .file-manager-dialog-overlay,
  .owner-file-dialog-overlay,
  .desktop-editor-dialog-overlay,
  .owner-delete-overlay,
  .workspace-context-menu,
  .file-manager-context-menu,
  .automation-context-menu
) :where(
  button,
  input,
  textarea,
  select,
  option,
  label,
  span,
  p,
  small,
  strong,
  b,
  em,
  code,
  kbd,
  dt,
  dd,
  header,
  footer,
  pre,
  summary,
  time
) {
  font-size: 16px !important;
  line-height: 1.45;
}

:is(
  .automation-modal-overlay,
  .skills-modal-overlay,
  .file-manager-dialog-overlay,
  .owner-file-dialog-overlay,
  .desktop-editor-dialog-overlay,
  .owner-delete-overlay,
  .workspace-context-menu,
  .file-manager-context-menu,
  .automation-context-menu
) :where(h1, h2, h3, h4, h5, h6) {
  font-size: 18px !important;
  line-height: 1.35;
}

:is(
  .automation-modal-overlay,
  .skills-modal-overlay,
  .file-manager-dialog-overlay,
  .owner-file-dialog-overlay,
  .desktop-editor-dialog-overlay,
  .owner-delete-overlay
) :where(input, textarea, select, button) {
  min-height: 44px;
}

@media (max-width: 760px) {
  .automation-model-settings > header { flex-direction: column; }
  .automation-model-settings > header b { align-self: flex-start; }
}

/* Mobile and tablet usability pass ----------------------------------------- */

@media (max-width: 840px) {
  html,
  body {
    min-width: 0;
  }

  #socialRail,
  #orbStage,
  #profilePanel,
  #ownerDesktop {
    top: var(--orb-viewport-top, 0px);
    bottom: auto;
    height: var(--orb-viewport-height, 100dvh);
  }

  #conversationStarters[data-hidden="true"] {
    display: none;
  }

  #orbChatInput,
  #ownerWorkspace input,
  #ownerWorkspace textarea,
  #ownerWorkspace select,
  .concierge-frame input,
  .concierge-frame textarea,
  .concierge-frame select,
  .action-confirmation-frame input,
  .action-confirmation-frame textarea,
  .action-confirmation-frame select {
    font-size: 16px !important;
  }

  #orbChatSend,
  #chatHistoryToggle,
  #conciergeToggle,
  .profile-toggle,
  .profile-close,
  .rail-link,
  .rail-mark {
    min-width: 44px;
    min-height: 44px;
  }

  #orbChatQueue,
  #voiceModeToggle,
  .concierge-frame button,
  .action-confirmation-frame button {
    min-height: 44px;
  }

  body[data-owner="true"] .profile-toggle::before {
    content: "CHATS";
  }

  .owner-chat-primary-actions button,
  .owner-chat-filter button,
  .owner-chat-navigator-footer button,
  .owner-project-picker button,
  #ownerConversationBack,
  .owner-tree-section > header button,
  .owner-search-result {
    min-height: 44px;
  }

  .owner-conversation-select {
    min-height: 56px;
    padding-block: 0.55rem;
  }

  .owner-conversation-menu {
    min-width: 44px;
    min-height: 44px !important;
  }
}

@media (max-width: 600px) {
  :root {
    --rail-width: 3.25rem;
  }

  #socialRail {
    gap: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-top: max(0.5rem, env(safe-area-inset-top));
    padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
    scrollbar-width: none;
  }

  #socialRail::-webkit-scrollbar {
    display: none;
  }

  .rail-mark,
  .rail-link {
    width: 44px;
    height: 44px;
  }

  .rail-axis {
    height: 1.25rem;
    margin-block: 0.28rem;
  }

  .rail-links,
  .owner-app-rail {
    gap: 0.2rem;
  }

  .rail-signal {
    flex: 0 0 auto;
    padding-top: 0.45rem;
  }

  #chatDock {
    bottom: max(0.65rem, calc(env(safe-area-inset-bottom) + 0.4rem));
    width: calc(100% - 0.9rem);
  }

  #voiceCaption {
    bottom: clamp(10.6rem, 25dvh, 13.8rem);
    width: calc(100% - 0.9rem);
    max-height: min(62dvh, 28rem);
    grid-template-columns: 1fr;
    gap: 0.35rem;
    padding: 0.7rem 0.78rem;
  }

  #voiceCaptionText {
    font-size: 1rem;
    line-height: 1.45;
  }

  #orbChatForm {
    min-height: 3.85rem;
  }

  #orbChatSend,
  #chatHistoryToggle,
  #conciergeToggle {
    width: 44px;
    height: 44px;
  }

  #orbChatInput {
    min-height: 44px;
    line-height: 1.4;
  }

  .profile-toggle,
  .profile-close {
    width: 44px;
    height: 44px;
  }

  body.profile-open #profilePanel {
    z-index: 140;
    width: 100vw;
  }

  .profile-content {
    padding-inline: 1.1rem;
  }

  .profile-description {
    font-size: 0.9rem;
    line-height: 1.55;
  }

  body[data-owner="true"] .owner-chat-navigator {
    gap: 0.55rem;
    padding: max(0.65rem, env(safe-area-inset-top)) 0.65rem max(0.55rem, env(safe-area-inset-bottom));
  }

  .owner-chat-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.45rem;
    padding-right: 3rem;
  }

  .owner-chat-primary-actions {
    grid-column: 1;
  }

  .owner-chat-filter {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.35rem;
  }

  .owner-chat-filter button {
    width: 100%;
  }

  .owner-chat-search input {
    min-height: 44px;
  }

  .owner-conversation-tree {
    padding-right: 0;
  }

  .owner-message {
    width: 100%;
  }

  .owner-message-activity > summary {
    grid-template-columns: 1.8rem minmax(0, 1fr) auto;
    min-height: 52px;
  }

  .owner-message-activity-body {
    padding-left: 0.62rem;
  }

  .owner-conversation-pane-header {
    gap: 0.55rem;
    padding: 0.65rem;
  }

  .owner-chat-navigator-footer {
    gap: 0.2rem;
  }

  .owner-desktop-window,
  .owner-desktop-window.is-maximized {
    top: max(0.45rem, env(safe-area-inset-top)) !important;
    right: 0.45rem !important;
    bottom: max(0.45rem, env(safe-area-inset-bottom)) !important;
    left: calc(var(--rail-width) + 0.45rem) !important;
    width: auto !important;
    height: auto !important;
    min-width: 0;
    min-height: 0;
  }
}

@media (max-width: 840px) and (max-height: 680px) {
  #conversationStarters,
  .composer-label,
  #voicePrivacy {
    display: none;
  }

  #chatDock {
    bottom: max(0.45rem, env(safe-area-inset-bottom));
  }

  #voiceCaption {
    bottom: 5.9rem;
    max-height: min(68dvh, 22rem);
  }

  .cognition-readout {
    display: none;
  }
}

@media (hover: none) and (pointer: coarse) {
  button,
  a,
  input,
  textarea,
  select,
  summary {
    touch-action: manipulation;
  }

  #orbChatSend[data-mode="voice"],
  .gif-viewer-header,
  .gif-resize-handle {
    touch-action: none;
  }
}

/* Public landing: give phones the full canvas and keep controls readable. */
@media (max-width: 600px) {
  body:not([data-owner="true"]) {
    --rail-width: 0px;
    --public-nav-height: calc(3.5rem + env(safe-area-inset-top));
  }

  body:not([data-owner="true"]) #socialRail {
    width: 100%;
    height: var(--public-nav-height);
    flex-direction: row;
    gap: 0.5rem;
    padding: env(safe-area-inset-top) max(0.5rem, env(safe-area-inset-right)) 0 max(0.5rem, env(safe-area-inset-left));
    overflow: visible;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  body:not([data-owner="true"]) #socialRail > .rail-mark {
    flex: 0 0 44px;
  }

  body:not([data-owner="true"]) #socialRail .rail-links {
    display: flex;
    min-width: 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    gap: 0.125rem;
    scrollbar-width: thin;
  }

  body:not([data-owner="true"]) #socialRail .rail-link {
    flex: 0 0 44px;
  }

  body:not([data-owner="true"]) #socialRail::after,
  body:not([data-owner="true"]) #socialRail .rail-axis,
  body:not([data-owner="true"]) #socialRail .rail-signal {
    display: none;
  }

  body:not([data-owner="true"]) .stage-header {
    top: calc(var(--public-nav-height) + 0.85rem);
    left: max(1rem, env(safe-area-inset-left));
    right: 4.5rem;
  }

  body:not([data-owner="true"]) .stage-kicker { font-size: 0.55rem; max-width: 15rem; }
  body:not([data-owner="true"]) .stage-name { font-size: 1rem; }
  body:not([data-owner="true"]) .profile-toggle { top: calc(var(--public-nav-height) + 0.65rem); }

  body:not([data-owner="true"]) #chatDock {
    width: calc(100% - max(1.25rem, env(safe-area-inset-left) + env(safe-area-inset-right)));
  }

  body:not([data-owner="true"]) #conversationStarters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.4rem;
  }

  body:not([data-owner="true"]) #conversationStarters button {
    min-height: 44px;
    padding: 0.55rem 0.65rem;
  }

  body:not([data-owner="true"]) #conversationStarters button > span { display: none; }
  body:not([data-owner="true"]) #conversationStarters button > b {
    font-size: 0.78rem;
    white-space: normal;
    overflow: visible;
  }

  body:not([data-owner="true"]) .composer-label { display: none; }
  body:not([data-owner="true"]) .composer-prompt { display: none; }
  body:not([data-owner="true"]) #orbChatForm {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    gap: 0.25rem 0.5rem;
    padding: 0.5rem 0.65rem;
  }

  body:not([data-owner="true"]) #orbChatInput {
    grid-column: 1 / -1;
    width: 100%;
    font-family: inherit;
    max-height: min(6rem, 18dvh);
  }

  body:not([data-owner="true"]) #chatHistoryToggle { justify-self: start; }
  body:not([data-owner="true"]) #orbChatSend { grid-column: 3; }
  body:not([data-owner="true"]) #voicePrivacy { font-size: 0.58rem; line-height: 1.45; }
  body:not([data-owner="true"]) #voiceModeToggle { font-size: 0.58rem; min-width: 52px; }

  body:not([data-owner="true"]) #voiceCaption {
    width: calc(100% - 1.25rem);
    bottom: calc(var(--orb-composer-height, 16rem) + max(0.65rem, env(safe-area-inset-bottom) + 0.4rem) + 0.65rem);
    max-height: max(3rem, calc(var(--orb-viewport-height, 100dvh) - var(--orb-composer-height, 16rem) - var(--public-nav-height) - 6rem));
  }

  body:not([data-owner="true"]) #chatHistoryPanel {
    width: calc(100% - 1.25rem);
  }
}

@media (max-width: 600px) and (max-height: 680px) {
  body:not([data-owner="true"]) #conversationStarters { display: grid; }
  body:not([data-owner="true"]) #chatDock { bottom: max(0.65rem, env(safe-area-inset-bottom) + 0.4rem); }
}

@media (max-width: 600px) and (max-height: 500px) {
  body:not([data-owner="true"]) #conversationStarters,
  body:not([data-owner="true"]) .stage-header { display: none; }
}

@media (max-width: 600px) {
  body:not([data-owner="true"]) #conversationStarters[data-hidden="true"] { display: none; }
}