:root {
  --bg-base: #02050f;
  --bg-layer: #081127;
  --bg-panel: #0f1b3a;
  --bg-panel-soft: color-mix(in srgb, var(--bg-panel) 80%, transparent);
  --line: #2a3f71;
  --line-soft: color-mix(in srgb, #2a3f71 56%, transparent);
  --txt: #edf4ff;
  --txt-dim: #90a6ce;
  --accent: #79b6ff;
  --accent-strong: #60d2ff;
  --accent-warm: #f7cf72;
  --warn: #ff6f7b;
  --ok: #8fd3ff;
  --overlay: rgba(6, 14, 24, 0.58);
  /* Fluent acrylic material */
  --acrylic-bg: color-mix(in srgb, var(--bg-panel) 62%, transparent);
  --acrylic-border: color-mix(in srgb, rgba(255, 255, 255, 0.12) 100%, transparent);
  --acrylic-highlight: rgba(255, 255, 255, 0.06);
  --shadow-depth-1: 0 2px 8px rgba(0, 0, 0, 0.24), 0 8px 24px rgba(0, 0, 0, 0.18);
  --shadow-depth-2: 0 4px 12px rgba(0, 0, 0, 0.32), 0 16px 40px rgba(0, 0, 0, 0.28), 0 1px 3px rgba(0, 0, 0, 0.16);
  --shadow-depth-3: 0 8px 20px rgba(0, 0, 0, 0.38), 0 28px 56px rgba(0, 0, 0, 0.36), 0 2px 6px rgba(0, 0, 0, 0.2);
}

* {
  box-sizing: border-box;
  scrollbar-width: thin;
  scrollbar-color:
    color-mix(in srgb, var(--accent) 58%, #c0dcff 42%)
    color-mix(in srgb, var(--bg-layer) 78%, transparent);
  -webkit-tap-highlight-color: transparent;
}

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

*::-webkit-scrollbar-track {
  background: color-mix(in srgb, var(--bg-layer) 74%, rgba(255, 255, 255, 0.02));
  border-radius: 999px;
}

*::-webkit-scrollbar-thumb {
  border-radius: 999px;
  border: 2px solid color-mix(in srgb, var(--bg-layer) 76%, transparent);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--accent) 74%, #ffffff 26%),
    color-mix(in srgb, var(--accent-strong) 78%, var(--accent-warm) 22%)
  );
}

*::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--accent) 82%, #ffffff 18%),
    color-mix(in srgb, var(--accent-strong) 82%, var(--accent-warm) 18%)
  );
}

html,
body {
  margin: 0;
  width: 100%;
  min-height: 100%;
  font-family: "IBM Plex Sans", "Space Grotesk", "Noto Sans", sans-serif;
  color: var(--txt);
  background:
    radial-gradient(circle at 14% 12%, rgba(121, 182, 255, 0.16) 0%, transparent 38%),
    radial-gradient(circle at 84% 16%, rgba(149, 120, 255, 0.14) 0%, transparent 38%),
    radial-gradient(circle at 70% 92%, rgba(247, 207, 114, 0.1) 0%, transparent 42%),
    var(--bg-base);
}

body {
  overflow: hidden;
  scrollbar-gutter: stable;
  overscroll-behavior: none;
}

body.orb-overlay-open {
  overflow: hidden;
}

.bg-orb {
  position: fixed;
  border-radius: 999px;
  filter: blur(68px);
  opacity: 0.24;
  pointer-events: none;
  z-index: 0;
}

.orb-a {
  width: 340px;
  height: 340px;
  top: -120px;
  left: -120px;
  background: #6fa9ff;
  animation: driftA 16s ease-in-out infinite alternate;
}

.orb-b {
  width: 300px;
  height: 300px;
  right: -90px;
  bottom: -90px;
  background: #e9be63;
  animation: driftB 14s ease-in-out infinite alternate;
}

@keyframes driftA {
  from {
    transform: translate(0, 0);
  }
  to {
    transform: translate(70px, 45px);
  }
}

@keyframes driftB {
  from {
    transform: translate(0, 0);
  }
  to {
    transform: translate(-52px, -34px);
  }
}

@keyframes orbFloat {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-3px);
  }
}

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

@keyframes orbNebulaDrift {
  0% {
    transform: translate(-2px, -1px) scale(0.91) rotate(-5deg);
    filter: blur(1.8px) brightness(0.88);
  }
  50% {
    transform: translate(1px, 2px) scale(1.09) rotate(4deg);
    filter: blur(1.1px) brightness(1.14);
  }
  100% {
    transform: translate(-1px, 1px) scale(0.96) rotate(-2deg);
    filter: blur(1.5px) brightness(1.02);
  }
}

@keyframes orbCoreShimmer {
  0%, 100% { filter: brightness(1) drop-shadow(0 0 3px rgba(255,240,200,0.4)); }
  50%      { filter: brightness(1.2) drop-shadow(0 0 6px rgba(255,240,200,0.6)); }
}

/* Subtle hue rotation — nebula color drift */
@keyframes orbHueShift {
  0%   { filter: blur(0.8px) hue-rotate(0deg); }
  50%  { filter: blur(0.6px) hue-rotate(18deg); }
  100% { filter: blur(0.8px) hue-rotate(0deg); }
}

/* Accretion disk rotation */
@keyframes accretionSpin {
  to { transform: rotateX(62deg) rotateZ(360deg); }
}

@keyframes orbPulse {
  0%, 100% {
    box-shadow:
      0 20px 48px rgba(0, 0, 0, 0.7),
      0 8px 16px rgba(0, 0, 0, 0.5),
      0 0 0 1px rgba(140, 160, 255, 0.25),
      0 0 28px rgba(100, 80, 200, 0.18),
      inset 0 4px 14px rgba(160, 180, 255, 0.12),
      inset 0 -6px 18px rgba(0, 0, 0, 0.5);
  }
  50% {
    box-shadow:
      0 22px 52px rgba(0, 0, 0, 0.75),
      0 8px 16px rgba(0, 0, 0, 0.5),
      0 0 0 1px rgba(180, 160, 255, 0.4),
      0 0 44px rgba(140, 120, 255, 0.3),
      inset 0 4px 14px rgba(180, 200, 255, 0.2),
      inset 0 -6px 18px rgba(0, 0, 0, 0.45);
  }
}

.login-screen {
  position: relative;
  z-index: 1;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 1.2rem;
}

.login-panel {
  width: min(460px, 100%);
  padding: 1.2rem;
  border-radius: 18px;
  border: 1px solid var(--acrylic-border);
  border-top-color: rgba(255, 255, 255, 0.16);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, transparent 40%),
    var(--acrylic-bg);
  box-shadow:
    var(--shadow-depth-3),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(24px) saturate(140%);
}

.login-panel h1 {
  margin: 0;
}

.muted {
  color: var(--txt-dim);
}

.stack {
  display: flex;
  flex-direction: column;
}

.gap {
  gap: 0.82rem;
}

label {
  display: flex;
  flex-direction: column;
  gap: 0.36rem;
  font-size: 0.95rem;
}

input,
textarea,
select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 0.62rem 0.75rem;
  font: inherit;
  color: var(--txt);
  background: color-mix(in srgb, var(--bg-layer) 82%, #06111d 18%);
  outline: none;
  transition: border-color 100ms ease, box-shadow 100ms ease;
}

input:focus,
textarea:focus,
select:focus {
  border-color: color-mix(in srgb, var(--accent) 85%, #ffffff 15%);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 24%, transparent);
}

textarea {
  resize: vertical;
  min-height: 64px;
  max-height: 240px;
}

.btn {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-top-color: rgba(255, 255, 255, 0.14);
  border-radius: 11px;
  padding: 0.62rem 0.9rem;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--shadow-depth-1);
  transition: transform 80ms ease, filter 100ms ease, border-color 100ms ease, box-shadow 120ms ease;
}

.btn:hover {
  filter: brightness(1.08);
  box-shadow: var(--shadow-depth-2);
}

.btn:active {
  transform: translateY(1px);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

.btn.primary {
  background: linear-gradient(125deg, var(--accent-strong), var(--accent), var(--accent-warm));
  color: #001827;
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
  box-shadow: var(--shadow-depth-1), 0 0 12px color-mix(in srgb, var(--accent) 20%, transparent);
}

.btn.ghost {
  background: color-mix(in srgb, var(--bg-panel) 50%, transparent);
  color: var(--txt);
  border-color: var(--line);
  backdrop-filter: blur(8px);
}

.btn.tiny {
  font-size: 0.82rem;
  padding: 0.36rem 0.58rem;
  border-radius: 9px;
}

.error {
  color: var(--warn);
  min-height: 1.15rem;
  margin: 0.3rem 0 0;
}

.os-shell {
  position: relative;
  z-index: 1;
  width: 100vw;
  height: 100dvh;
  overflow: hidden;
  contain: layout style;
}

.pane {
  position: absolute;
  inset: 0;
  padding: 1rem 1rem 1.2rem;
  transition: filter 140ms ease, opacity 140ms ease, transform 140ms ease;
  will-change: filter, opacity, transform;
}

body.orb-overlay-open .pane:not(.hidden) {
  filter: blur(1.7px) saturate(0.84);
  opacity: 0.62;
  transform: scale(0.992);
  pointer-events: none;
}

.pane-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.8rem;
}

.pane-header h2,
.pane-header h3 {
  margin: 0;
}

.row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.row.wrap {
  flex-wrap: wrap;
}

.chat-pane {
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
  transition: padding-left 120ms cubic-bezier(.4,0,.2,1);
}

/* Fluent Design depth layers in chat background — acrylic + parallax feel */
.chat-pane::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    /* Layer 1: Directional light source — top-left warmth (like sunlight through glass) */
    radial-gradient(ellipse 80% 60% at 5% 0%, rgba(140, 120, 200, 0.12) 0%, transparent 60%),
    /* Layer 2: Deep ambient glow — bottom-right cool (creates diagonal depth) */
    radial-gradient(ellipse 70% 80% at 95% 100%, rgba(40, 80, 160, 0.10) 0%, transparent 55%),
    /* Layer 3: Center-stage vignette — subtle darkening at edges = depth illusion */
    radial-gradient(ellipse 90% 80% at 50% 50%, transparent 40%, rgba(0, 0, 0, 0.12) 100%),
    /* Layer 4: Floating light sheet — mid-depth, like frosted glass catching light */
    linear-gradient(155deg,
      transparent 20%,
      rgba(100, 80, 180, 0.06) 35%,
      rgba(60, 100, 200, 0.04) 50%,
      transparent 65%
    );
  animation: chatDepthBreath 40s ease-in-out infinite alternate;
}

/* Second pseudo-element for the noise/grain texture (Fluent acrylic effect) */
.chat-pane::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 256px 256px;
  mix-blend-mode: overlay;
}

@keyframes chatDepthBreath {
  0%   { opacity: 0.85; }
  50%  { opacity: 1.0; }
  100% { opacity: 0.85; }
}

.os-shell.chat-sidebar-open .chat-pane {
  padding-left: 294px;
}

.chat-sidebar-toggle {
  position: fixed;
  left: 0;
  top: 4px;
  z-index: 71;
  width: 34px;
  height: 34px;
  border: 1px solid var(--acrylic-border);
  border-top-color: rgba(255, 255, 255, 0.18);
  border-radius: 10px;
  background:
    radial-gradient(ellipse 70% 50% at 30% 20%, rgba(140, 180, 255, 0.06) 0%, transparent 70%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, transparent 60%),
    var(--acrylic-bg);
  color: var(--txt);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(20px) saturate(140%);
  box-shadow:
    var(--shadow-depth-1),
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -1px 0 rgba(0, 0, 0, 0.1);
  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease, opacity 140ms ease;
}

.chat-sidebar-toggle:hover {
  border-color: color-mix(in srgb, var(--accent) 65%, transparent);
  transform: translateX(1px);
}

.chat-sidebar-toggle.active {
  border-color: color-mix(in srgb, var(--accent) 58%, transparent);
  background: color-mix(in srgb, var(--accent) 10%, var(--bg-panel));
}

.chat-sidebar-toggle.sidebar-open-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-14px);
}

.chat-sidebar-toggle-dot {
  width: 12px;
  height: 12px;
  border: 2px solid currentColor;
  border-radius: 4px 4px 4px 0;
  display: inline-block;
}

.chat-sidebar {
  position: fixed;
  left: 8px;
  top: 52px;
  bottom: 14px;
  width: 284px;
  z-index: 70;
  border: 1px solid var(--acrylic-border);
  border-top-color: rgba(255, 255, 255, 0.18);
  border-radius: 14px;
  background:
    /* Surface curvature — convex panel */
    radial-gradient(ellipse 60% 35% at 25% 12%, rgba(120, 160, 240, 0.05) 0%, transparent 70%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, transparent 40%),
    var(--acrylic-bg);
  backdrop-filter: blur(24px) saturate(140%);
  box-shadow:
    var(--shadow-depth-3),
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -1px 0 rgba(0, 0, 0, 0.14),
    inset 1px 0 0 rgba(255, 255, 255, 0.04),
    inset -1px 0 0 rgba(0, 0, 0, 0.06);
  padding: 0.55rem 0.42rem;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 0.45rem;
  transform: translateX(-118%);
  opacity: 0;
  pointer-events: none;
  transition: transform 140ms cubic-bezier(.4,0,.2,1), opacity 120ms ease;
  will-change: transform, opacity;
}

.chat-sidebar.open {
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
}

.chat-sidebar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  padding: 0 0.2rem;
}

.chat-sidebar-search-wrap {
  display: block;
  padding: 0 0.2rem;
}

.chat-sidebar-search-wrap input {
  width: 100%;
  border: 1px solid var(--line-soft);
  border-radius: 9px;
  background: color-mix(in srgb, var(--bg-layer) 80%, transparent);
  color: var(--txt);
  font: inherit;
  font-size: 0.78rem;
  padding: 0.28rem 0.48rem;
}

.chat-sidebar-folder-filter-wrap {
  display: block;
  padding: 0 0.2rem;
}

.chat-sidebar-folder-filter-wrap select {
  width: 100%;
  border: 1px solid var(--line-soft);
  border-radius: 9px;
  background: color-mix(in srgb, var(--bg-layer) 80%, transparent);
  color: var(--txt);
  font: inherit;
  font-size: 0.76rem;
  padding: 0.26rem 0.42rem;
}

.chat-sidebar-list {
  overflow: auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  align-content: flex-start;
  gap: 0.08rem;
  padding-right: 0.1rem;
}

.chat-thread-group {
  font-size: 0.72rem;
  color: var(--txt-dim);
  padding: 0.3rem 0.35rem 0.14rem;
}

.chat-thread-group.pinned {
  color: color-mix(in srgb, var(--accent) 72%, white 28%);
}

.chat-thread-group.folder {
  color: color-mix(in srgb, var(--accent) 62%, var(--txt-dim));
}

.chat-thread-item {
  display: flex;
  align-items: center;
  gap: 0.18rem;
}

.chat-thread-item.nested {
  margin-left: 1.42rem;
}

.chat-thread-item.dragging {
  opacity: 0.58;
}

.chat-thread-item.drag-over .chat-thread-main {
  border-color: color-mix(in srgb, var(--accent) 60%, transparent);
  background: color-mix(in srgb, var(--accent) 16%, transparent);
}

.chat-thread-item.pinned .chat-thread-main {
  border-color: color-mix(in srgb, var(--accent) 42%, transparent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

.chat-thread-main {
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--txt);
  font: inherit;
  text-align: left;
  width: 100%;
  cursor: pointer;
  padding: 0.22rem 0.38rem;
  display: block;
  line-height: 1.2;
  min-height: 2rem;
  flex: 1 1 auto;
}

.chat-thread-main:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 40%, transparent);
  outline-offset: 1px;
}

.chat-thread-main:hover {
  border-color: color-mix(in srgb, var(--line) 65%, transparent);
  background: color-mix(in srgb, var(--bg-layer) 65%, transparent);
}

.chat-thread-main.active {
  border-color: color-mix(in srgb, var(--accent) 58%, transparent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}

.chat-folder-row {
  margin-left: 0.46rem;
  margin-top: 0.05rem;
}

.chat-folder-main {
  min-height: 2rem;
}

.chat-folder-title {
  color: color-mix(in srgb, var(--accent) 76%, var(--txt));
}

.chat-folder-unfiled .chat-folder-title {
  color: color-mix(in srgb, var(--txt) 88%, var(--txt-dim));
}

.chat-folder-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 0.88rem;
  flex: 0 0 auto;
  color: var(--txt-dim);
  transition: transform 120ms ease;
}

.chat-folder-row.collapsed .chat-folder-chevron {
  transform: rotate(-90deg);
}

.chat-thread-actions {
  position: relative;
  flex: 0 0 auto;
}

.chat-thread-menu-trigger {
  border: 1px solid transparent;
  border-radius: 8px;
  width: 26px;
  height: 26px;
  padding: 0;
  background: transparent;
  color: var(--txt-dim);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 80ms ease, border-color 80ms ease, background 80ms ease, color 80ms ease;
}

.chat-thread-item:hover .chat-thread-menu-trigger,
.chat-thread-item.menu-open .chat-thread-menu-trigger,
.chat-thread-actions.open .chat-thread-menu-trigger {
  opacity: 1;
  pointer-events: auto;
}

.chat-thread-menu-trigger:hover {
  border-color: color-mix(in srgb, var(--line) 65%, transparent);
  background: color-mix(in srgb, var(--bg-layer) 65%, transparent);
  color: var(--txt);
}

.chat-thread-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  z-index: 95;
  min-width: 188px;
  border: 1px solid var(--line-soft);
  border-top-color: rgba(255, 255, 255, 0.14);
  border-radius: 11px;
  background:
    radial-gradient(ellipse 60% 35% at 25% 12%, rgba(120, 160, 240, 0.05) 0%, transparent 70%),
    color-mix(in srgb, var(--bg-panel) 93%, transparent);
  backdrop-filter: blur(16px) saturate(130%);
  box-shadow:
    0 16px 34px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -1px 0 rgba(0, 0, 0, 0.08);
  padding: 0.34rem;
  display: grid;
  gap: 0.2rem;
}

.chat-thread-menu-item {
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--txt);
  font: inherit;
  font-size: 0.82rem;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.42rem;
  width: 100%;
  text-align: left;
  padding: 0.34rem 0.46rem;
  cursor: pointer;
}

.chat-thread-menu-item:hover {
  border-color: color-mix(in srgb, var(--line) 65%, transparent);
  background: color-mix(in srgb, var(--bg-layer) 65%, transparent);
}

.chat-thread-menu-item .btn-icon {
  width: 16px;
  height: 16px;
  color: var(--txt-dim);
}

.chat-thread-menu-item:hover .btn-icon {
  color: var(--txt);
}

.chat-thread-line {
  display: flex;
  align-items: center;
  gap: 0.28rem;
  min-width: 0;
}

.chat-thread-title {
  min-width: 0;
  flex: 1 1 auto;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-thread-meta {
  flex: 0 0 auto;
  font-size: 0.68rem;
  color: var(--txt-dim);
  line-height: 1.15;
  white-space: nowrap;
}

.chat-thread-folder {
  flex: 0 0 auto;
  font-size: 0.62rem;
  color: color-mix(in srgb, var(--accent) 72%, white 22%);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 38%, transparent);
  border-radius: 999px;
  padding: 0.02rem 0.28rem;
  white-space: nowrap;
}

.chat-thread-pin {
  width: 0.78rem;
  height: 0.78rem;
  color: color-mix(in srgb, var(--accent) 78%, white 22%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.chat-thread-pin svg {
  width: 100%;
  height: 100%;
}

.messages {
  flex: 1 1 0;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0.34rem 0.36rem 0.16rem 0.28rem;
  scroll-behavior: smooth;
}
.messages::before {
  content: '';
  flex: 1 1 0;
}

@keyframes msgSlideIn {
  from { opacity: 0; transform: translateY(8px) scale(0.99); }
  to   { opacity: 1; transform: translateY(0)   scale(1); }
}

.msg.new-msg {
  animation: msgSlideIn 180ms cubic-bezier(.4,0,.2,1) both;
}

.chat-composer {
  flex: 0 0 auto;
  display: grid;
  gap: 0.38rem;
  padding-top: 0.24rem;
  z-index: 12;
  overflow: visible;
}

.chat-status,
.chat-error {
  margin: 0;
  min-height: 0;
}
.chat-status:empty,
.chat-error:empty {
  display: none;
}

.msg {
  border: 1px solid var(--acrylic-border);
  border-top-color: rgba(255, 255, 255, 0.18);
  border-radius: 14px;
  padding: 0.62rem 0.72rem;
  line-height: 1.44;
  word-break: break-word;
  overflow-wrap: anywhere;
  max-width: min(100%, 1020px);
  min-width: 0;
  backdrop-filter: blur(20px) saturate(140%);
  display: grid;
  gap: 0.45rem;
  box-shadow:
    var(--shadow-depth-2),
    /* 3D curvature — light rim top, shadow rim bottom */
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 -1px 0 rgba(0, 0, 0, 0.18),
    inset 1px 0 0 rgba(255, 255, 255, 0.04),
    inset -1px 0 0 rgba(0, 0, 0, 0.06);
  transition: box-shadow 220ms ease, border-color 220ms ease;
}

.msg:hover {
  border-color: color-mix(in srgb, var(--accent) 22%, var(--acrylic-border));
  border-top-color: color-mix(in srgb, var(--accent) 16%, rgba(255, 255, 255, 0.22));
  box-shadow:
    var(--shadow-depth-2),
    0 0 0 1px color-mix(in srgb, var(--accent) 12%, transparent),
    0 0 14px color-mix(in srgb, var(--accent) 8%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -1px 0 rgba(0, 0, 0, 0.14);
}

.msg.user {
  align-self: flex-end;
  background:
    /* Surface curvature highlight — convex panel illusion */
    radial-gradient(ellipse 80% 50% at 30% 18%, rgba(140, 180, 255, 0.08) 0%, transparent 70%),
    linear-gradient(168deg, rgba(50, 90, 160, 0.38) 0%, rgba(30, 60, 120, 0.28) 100%),
    var(--acrylic-bg);
}

.msg.assistant {
  align-self: flex-start;
  background:
    /* Surface curvature highlight */
    radial-gradient(ellipse 70% 45% at 25% 15%, rgba(120, 160, 240, 0.06) 0%, transparent 70%),
    linear-gradient(168deg, rgba(30, 50, 110, 0.36) 0%, rgba(18, 34, 78, 0.26) 100%),
    var(--acrylic-bg);
}

.msg.assistant.generating {
  position: relative;
  overflow: visible;
  isolation: isolate;
  border-color: color-mix(in srgb, var(--accent) 44%, var(--acrylic-border) 56%);
  box-shadow:
    var(--shadow-depth-3),
    0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent),
    0 0 18px color-mix(in srgb, var(--accent) 10%, transparent),
    0 0 40px rgba(80, 200, 255, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.msg.assistant.generating::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  background:
    /* Cyan nebula — matches orb inference */
    radial-gradient(circle at 18% 32%, rgba(80, 200, 255, 0.44) 0%, rgba(40, 140, 220, 0.08) 44%, transparent 68%),
    /* Magenta-violet cloud */
    radial-gradient(circle at 76% 68%, rgba(220, 80, 255, 0.32) 0%, rgba(160, 40, 200, 0.06) 42%, transparent 66%),
    /* Emerald pocket */
    radial-gradient(circle at 50% 22%, rgba(80, 255, 180, 0.28) 0%, rgba(80, 255, 180, 0.06) 40%, transparent 62%),
    /* Pink-gold warmth */
    radial-gradient(circle at 82% 30%, rgba(255, 160, 120, 0.22) 0%, transparent 50%);
  background-size: 200% 200%;
  background-position: 30% 40%;
  filter: blur(14px) saturate(140%);
  opacity: 0.82;
  animation: msgAuroraDrift 6s ease-in-out infinite, msgAuroraHue 24s linear infinite;
}

.msg.assistant.generating::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(
    118deg,
    transparent 8%,
    rgba(80, 200, 255, 0.18) 26%,
    rgba(80, 255, 180, 0.14) 40%,
    rgba(220, 80, 255, 0.16) 56%,
    rgba(255, 160, 120, 0.12) 70%,
    transparent 88%
  );
  background-size: 240% 100%;
  background-position: 0% 0%;
  mix-blend-mode: screen;
  opacity: 0.68;
  animation: msgAuroraSweep 5s ease-in-out infinite;
}

.msg.assistant.generating > * {
  position: relative;
  z-index: 1;
}


.msg-foot {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.55rem;
}

.msg .meta {
  display: block;
  margin-bottom: 0;
  font-size: 0.78rem;
  color: var(--txt-dim);
}

.msg-toolbar {
  display: inline-flex;
  align-items: center;
  gap: 0.24rem;
  flex-wrap: wrap;
}

.icon-btn {
  width: 28px;
  height: 28px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--txt-dim);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 80ms ease, background 80ms ease, color 80ms ease;
}

.icon-btn:hover {
  color: var(--txt);
  border-color: color-mix(in srgb, var(--line) 65%, transparent);
  background: color-mix(in srgb, var(--bg-layer) 55%, transparent);
}

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

.msg-body {
  white-space: pre-wrap;
  min-width: 0;
  overflow: hidden;
}

.msg-body.markdown {
  white-space: normal;
}

.msg-body.markdown p {
  margin: 0.28rem 0;
}

.msg-body.markdown p:first-child {
  margin-top: 0;
}

.msg-body.markdown p:last-child {
  margin-bottom: 0;
}

.msg-body.markdown ul {
  margin: 0.35rem 0 0.35rem 1.1rem;
  padding: 0;
}

.msg-body.markdown li {
  margin: 0.2rem 0;
}

.msg-body.markdown code {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  padding: 0.08rem 0.32rem;
  border-radius: 6px;
  background: color-mix(in srgb, var(--bg-layer) 82%, #02070d);
  border: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
  word-break: break-all;
}

.msg-body.markdown pre {
  margin: 0.45rem 0;
  padding: 0.6rem;
  border-radius: 10px;
  min-width: 0;
  max-width: 100%;
  background:
    /* Recessed surface — sunken panel */
    radial-gradient(ellipse 90% 40% at 50% 100%, rgba(80, 120, 200, 0.04) 0%, transparent 70%),
    color-mix(in srgb, var(--bg-layer) 88%, #01060b);
  border: 1px solid color-mix(in srgb, var(--line) 58%, transparent);
  border-top-color: rgba(0, 0, 0, 0.2);
  border-bottom-color: rgba(255, 255, 255, 0.05);
  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, 0.25),
    inset 0 -1px 0 rgba(255, 255, 255, 0.04),
    0 1px 0 rgba(255, 255, 255, 0.04);
  overflow-x: auto;
}

.msg-body.markdown pre code {
  padding: 0;
  border: 0;
  background: transparent;
}

.msg-body.markdown a {
  color: color-mix(in srgb, var(--accent) 75%, #ffffff 25%);
  text-decoration: underline;
}

.msg-thinking {
  border: 1px solid color-mix(in srgb, var(--line) 58%, transparent);
  border-top-color: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  background:
    radial-gradient(ellipse 80% 40% at 20% 10%, rgba(120, 160, 240, 0.04) 0%, transparent 70%),
    color-mix(in srgb, var(--bg-panel) 72%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    inset 0 -1px 0 rgba(0, 0, 0, 0.08),
    0 2px 6px rgba(0, 0, 0, 0.12);
  overflow: hidden;
}

.msg-thinking summary {
  list-style: none;
  cursor: pointer;
  font-size: 0.79rem;
  color: var(--txt-dim);
  padding: 0.42rem 0.56rem;
  user-select: none;
}

.msg-thinking-summary {
  display: inline-flex;
  align-items: center;
  gap: 0.44rem;
}

.msg-thinking-spinner {
  width: 0.78rem;
  height: 0.78rem;
  border: 2px solid color-mix(in srgb, var(--line) 78%, transparent);
  border-top-color: color-mix(in srgb, var(--accent) 80%, #ffffff 20%);
  border-radius: 999px;
  animation: msgThinkingSpin 820ms linear infinite;
  opacity: 0;
  transform: scale(0.92);
}

.msg-thinking-summary-text {
  display: inline-block;
}

.msg-thinking.thinking-active .msg-thinking-spinner {
  opacity: 1;
}

.msg-thinking summary::-webkit-details-marker {
  display: none;
}

.msg-thinking summary::before {
  content: "▸";
  display: inline-block;
  margin-right: 0.4rem;
  transition: transform 120ms ease;
}

.msg-thinking[open] summary::before {
  transform: rotate(90deg);
}

.msg-thinking-body {
  border-top: 1px solid color-mix(in srgb, var(--line) 55%, transparent);
  padding: 0.5rem 0.56rem;
  font-size: 0.85rem;
  color: color-mix(in srgb, var(--txt) 92%, #dce6ef);
}

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

/* Pipeline-Status-Fenster */
.msg-pipeline {
  border: 1px solid color-mix(in srgb, var(--line) 45%, transparent);
  border-top-color: rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  background:
    radial-gradient(ellipse 80% 40% at 20% 10%, rgba(100, 200, 160, 0.04) 0%, transparent 70%),
    color-mix(in srgb, var(--bg-panel) 55%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    inset 0 -1px 0 rgba(0, 0, 0, 0.06),
    0 2px 6px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  margin-bottom: 0.3rem;
}
.msg-pipeline summary {
  list-style: none;
  cursor: pointer;
  font-size: 0.79rem;
  color: var(--txt-dim);
  padding: 0.42rem 0.56rem;
  user-select: none;
}
.msg-pipeline-summary {
  display: inline-flex;
  align-items: center;
  gap: 0.44rem;
}
.msg-pipeline-spinner {
  width: 0.78rem;
  height: 0.78rem;
  border: 2px solid color-mix(in srgb, var(--line) 78%, transparent);
  border-top-color: color-mix(in srgb, var(--accent) 60%, #b0e0b8 40%);
  border-radius: 999px;
  animation: msgThinkingSpin 820ms linear infinite;
  opacity: 0;
  transform: scale(0.92);
}
.msg-pipeline.pipeline-active .msg-pipeline-spinner {
  opacity: 1;
}
.msg-pipeline summary::-webkit-details-marker {
  display: none;
}
.msg-pipeline summary::before {
  content: "▸";
  display: inline-block;
  margin-right: 0.4rem;
  transition: transform 120ms ease;
}
.msg-pipeline[open] summary::before {
  transform: rotate(90deg);
}
.msg-pipeline-body {
  border-top: 1px solid color-mix(in srgb, var(--line) 40%, transparent);
  padding: 0.4rem 0.56rem;
  font-size: 0.78rem;
  color: var(--txt-dim);
}
.msg-pipeline-step {
  padding: 0.12rem 0;
}
.msg-pipeline-step.active {
  color: var(--accent);
}

/* Quellen-Block */
.msg-sources {
  border: 1px solid color-mix(in srgb, var(--line) 40%, transparent);
  border-top-color: rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  background:
    radial-gradient(ellipse 80% 40% at 20% 10%, rgba(200, 180, 120, 0.03) 0%, transparent 70%),
    color-mix(in srgb, var(--bg-panel) 45%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 2px 6px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  margin-top: 0.4rem;
}
.msg-sources summary {
  list-style: none;
  cursor: pointer;
  font-size: 0.79rem;
  color: var(--txt-dim);
  padding: 0.38rem 0.56rem;
  user-select: none;
}
.msg-sources-summary {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.msg-sources summary::-webkit-details-marker {
  display: none;
}
.msg-sources summary::before {
  content: "▸";
  display: inline-block;
  margin-right: 0.4rem;
  transition: transform 120ms ease;
}
.msg-sources[open] summary::before {
  transform: rotate(90deg);
}
.msg-sources-body {
  border-top: 1px solid color-mix(in srgb, var(--line) 35%, transparent);
  padding: 0.35rem 0.56rem 0.45rem;
  display: flex;
  flex-direction: column;
  gap: 0.22rem;
}
.msg-source-item {
  font-size: 0.78rem;
}
.msg-source-item a {
  color: var(--accent);
  text-decoration: none;
  word-break: break-all;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  display: block;
}
.msg-source-item a:hover {
  text-decoration: underline;
}

/* Deep-Research Quellen-Karten (Perplexity-Stil) */
.msg-research-sources {
  margin-bottom: 0.6rem;
  max-width: 100%;
  overflow: hidden;
}
.msg-source-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  padding: 0.3rem 0;
  max-width: 100%;
}
.msg-source-chips::-webkit-scrollbar {
  height: 4px;
}
.msg-source-chips::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--txt-dim) 30%, transparent);
  border-radius: 2px;
}
.msg-source-chip {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.25rem 0.45rem;
  border-radius: 6px;
  border: 1px solid color-mix(in srgb, var(--line) 50%, transparent);
  background: color-mix(in srgb, var(--bg-panel) 60%, transparent);
  text-decoration: none;
  color: var(--txt);
  font-size: 0.72rem;
  white-space: nowrap;
  min-width: 0;
  max-width: 180px;
  overflow: hidden;
  transition: border-color 120ms, background 120ms;
  cursor: pointer;
}
.msg-source-chip:hover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, var(--bg-panel));
}
.msg-source-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  flex-shrink: 0;
}
/* Badge-Farben nach Quellen-Typ */
.msg-source-chip[data-type="academic"] .msg-source-badge { background: #7c4dff; }
.msg-source-chip[data-type="discussions"] .msg-source-badge { background: #ff6d00; }
.msg-source-chip[data-type="news"] .msg-source-badge { background: #00c853; }
.msg-source-chip[data-type="legal"] .msg-source-badge { background: #d50000; }
.msg-source-chip[data-type="decision"] .msg-source-badge { background: #c51162; }
.msg-source-chip[data-type="commentary"] .msg-source-badge { background: #aa00ff; }
.msg-source-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 0.05rem;
}
.msg-source-domain {
  font-size: 0.68rem;
  color: var(--txt-dim);
  overflow: hidden;
  text-overflow: ellipsis;
}
.msg-source-title {
  font-size: 0.72rem;
  color: var(--txt);
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Expandable full list */
.msg-sources-expand {
  margin-top: 0.3rem;
}
.msg-sources-expand summary {
  font-size: 0.74rem;
  color: var(--txt-dim);
  cursor: pointer;
  user-select: none;
  padding: 0.2rem 0;
}
.msg-sources-expand summary:hover {
  color: var(--accent);
}
.msg-sources-list {
  padding: 0.3rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.msg-source-list-item {
  font-size: 0.74rem;
}
.msg-source-list-idx {
  color: var(--accent);
  font-weight: 600;
  margin-right: 0.2rem;
}
.msg-source-list-item a {
  color: var(--txt);
  text-decoration: none;
}
.msg-source-list-item a:hover {
  color: var(--accent);
  text-decoration: underline;
}

/* ── Sandbox Output Files ── */
.msg-sandbox-outputs {
  margin: 0.5rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.msg-sandbox-image {
  margin: 0;
  max-width: 100%;
}
.msg-sandbox-image img {
  max-width: 100%;
  max-height: 480px;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--line) 50%, transparent);
  cursor: zoom-in;
  transition: border-color 150ms;
  display: block;
}
.msg-sandbox-image img:hover {
  border-color: var(--accent);
}
.msg-sandbox-image figcaption {
  font-size: 0.72rem;
  color: var(--txt-dim);
  margin-top: 0.2rem;
}
.msg-sandbox-textfile {
  border: 1px solid color-mix(in srgb, var(--line) 40%, transparent);
  border-radius: 6px;
  overflow: hidden;
}
.msg-sandbox-textfile summary {
  font-size: 0.78rem;
  padding: 0.35rem 0.5rem;
  cursor: pointer;
  user-select: none;
  color: var(--txt-dim);
  background: color-mix(in srgb, var(--bg-panel) 60%, transparent);
}
.msg-sandbox-textfile summary:hover {
  color: var(--accent);
}
.msg-sandbox-textfile pre {
  margin: 0;
  padding: 0.5rem;
  font-size: 0.74rem;
  max-height: 300px;
  overflow: auto;
  background: color-mix(in srgb, var(--bg) 80%, #000);
}

@keyframes msgAuroraDrift {
  0%, 100% { background-position: 30% 40%; }
  25%      { background-position: 68% 28%; }
  50%      { background-position: 45% 70%; }
  75%      { background-position: 72% 55%; }
}

@keyframes msgAuroraSweep {
  0%, 100% { background-position: -20% 0%; }
  50%      { background-position: 120% 0%; }
}

/* Aurora color drift — synced with orb hue shift */
@keyframes msgAuroraHue {
  0%        { filter: blur(14px) saturate(140%) hue-rotate(0deg); }
  33%       { filter: blur(12px) saturate(155%) hue-rotate(12deg); }
  66%       { filter: blur(15px) saturate(135%) hue-rotate(-8deg); }
  100%      { filter: blur(14px) saturate(140%) hue-rotate(0deg); }
}

.msg-edit-wrap {
  display: grid;
  gap: 0.45rem;
}

.msg-edit-wrap textarea {
  min-height: 72px;
}

.msg-edit-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.4rem;
}

.msg-regen-wrap {
  position: relative;
}

.msg-copy-wrap {
  position: relative;
}

.regen-menu {
  position: absolute;
  right: 0;
  bottom: 34px;
  z-index: 40;
  width: min(260px, 85vw);
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: color-mix(in srgb, var(--bg-panel) 92%, transparent);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.35);
  padding: 0.45rem;
  display: grid;
  gap: 0.4rem;
}

.regen-input-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.3rem;
  align-items: center;
}

.regen-input-row input {
  min-width: 0;
}

.regen-input-send {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  padding: 0;
}

.regen-menu-list {
  display: grid;
  gap: 0.24rem;
}

.regen-menu-item {
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--txt);
  font: inherit;
  font-size: 0.85rem;
  text-align: left;
  padding: 0.36rem 0.5rem;
  cursor: pointer;
}

.regen-menu-item:hover {
  border-color: color-mix(in srgb, var(--line) 65%, transparent);
  background: color-mix(in srgb, var(--bg-layer) 65%, transparent);
}

.copy-menu {
  position: absolute;
  right: 0;
  bottom: 34px;
  z-index: 40;
  width: min(220px, 80vw);
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: color-mix(in srgb, var(--bg-panel) 92%, transparent);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.35);
  padding: 0.4rem;
  display: grid;
  gap: 0.24rem;
}

.copy-menu-item {
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--txt);
  font: inherit;
  font-size: 0.83rem;
  text-align: left;
  padding: 0.34rem 0.48rem;
  cursor: pointer;
}

.copy-menu-item:hover {
  border-color: color-mix(in srgb, var(--line) 65%, transparent);
  background: color-mix(in srgb, var(--bg-layer) 65%, transparent);
}

.chat-input-wrap {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0.74rem;
  position: relative;
  overflow: visible;
  border: 1px solid var(--acrylic-border);
  border-top-color: rgba(255, 255, 255, 0.18);
  border-radius: 14px;
  background:
    /* Surface curvature — convex panel */
    radial-gradient(ellipse 60% 40% at 30% 14%, rgba(140, 180, 255, 0.05) 0%, transparent 70%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, transparent 50%),
    var(--acrylic-bg);
  backdrop-filter: blur(24px) saturate(140%);
  box-shadow:
    var(--shadow-depth-2),
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 -1px 0 rgba(0, 0, 0, 0.14),
    inset 1px 0 0 rgba(255, 255, 255, 0.04),
    inset -1px 0 0 rgba(0, 0, 0, 0.06);
  margin-bottom: 0;
}

.chat-input-wrap button {
  min-width: 0;
}

.chat-input-wrap:focus-within {
  border-color: color-mix(in srgb, var(--accent) 52%, rgba(255, 255, 255, 0.18));
  border-top-color: color-mix(in srgb, var(--accent) 32%, rgba(255, 255, 255, 0.22));
  box-shadow:
    var(--shadow-depth-3),
    0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent),
    0 0 22px color-mix(in srgb, var(--accent) 14%, transparent),
    0 0 48px color-mix(in srgb, var(--accent) 6%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -1px 0 rgba(0, 0, 0, 0.1);
}

/* --- Chat Input Row (textarea + buttons) --- */
.chat-input-row {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  gap: 0.48rem;
  align-items: end;
}
.chat-input-row textarea {
  width: auto;
  min-width: 0;
}

/* --- Attachment Button (Bueroklammer) --- */
.chat-attach-btn {
  border: 0;
  background: transparent;
  color: var(--txt-dim);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  min-width: 32px;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  transition: color 120ms ease, background 120ms ease;
  align-self: end;
  margin-bottom: 2px;
}
.chat-attach-btn:hover {
  color: var(--txt);
  background: color-mix(in srgb, var(--bg-layer) 60%, transparent);
}
.chat-attach-btn.has-files {
  color: var(--accent);
}
.chat-media-browse-btn {
  border: 0;
  background: transparent;
  color: var(--txt-dim);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  min-width: 32px;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  transition: color 120ms ease, background 120ms ease;
  align-self: end;
  margin-bottom: 2px;
}
.chat-media-browse-btn:hover {
  color: var(--txt);
  background: color-mix(in srgb, var(--bg-layer) 60%, transparent);
}

/* --- Paperless tab in media browser --- */
.media-browser-paperless-search {
  padding: 0.5rem;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.media-browser-paperless-input {
  width: 100%;
  padding: 0.5rem 0.7rem;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--txt);
  font-size: 0.85rem;
  font-family: inherit;
}
.media-browser-paperless-input:focus {
  outline: none;
  border-color: var(--accent);
}
.media-browser-paperless-results {
  flex: 1;
  overflow-y: auto;
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.media-browser-paperless-card {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.6rem;
  border-radius: 8px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}
.media-browser-paperless-card:hover {
  background: color-mix(in srgb, var(--bg-layer) 60%, transparent);
  border-color: color-mix(in srgb, var(--line) 50%, transparent);
}
.media-browser-paperless-card.selected {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}
.paperless-card-icon { font-size: 1.5rem; flex-shrink: 0; }
.paperless-card-body { flex: 1; min-width: 0; }
.paperless-card-title { font-size: 0.85rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.paperless-card-meta { font-size: 0.75rem; color: var(--txt-dim); display: flex; gap: 0.5rem; margin-top: 0.15rem; }
.paperless-card-tags { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.2rem; }
.paperless-tag {
  font-size: 0.65rem;
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  color: var(--accent);
}

/* --- Attachment Preview Strip --- */
.chat-attachment-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0.5rem 0.5rem 0.3rem;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 40%, transparent);
}
.chat-attachment-strip.hidden {
  display: none;
}
.chat-attachment-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.28rem 0.5rem;
  border-radius: 8px;
  background: color-mix(in srgb, var(--bg-layer) 70%, transparent);
  border: 1px solid color-mix(in srgb, var(--line) 50%, transparent);
  font-size: 0.78rem;
  max-width: 200px;
  transition: border-color 120ms ease;
}
.chat-attachment-item:hover {
  border-color: color-mix(in srgb, var(--accent) 50%, transparent);
}
.chat-attachment-thumb {
  width: 32px;
  height: 32px;
  border-radius: 4px;
  object-fit: cover;
  flex-shrink: 0;
}
.chat-attachment-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1.1rem;
}
.chat-attachment-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.chat-attachment-remove {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--bg-base);
  color: var(--txt-dim);
  font-size: 0.7rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  transition: color 120ms ease, background 120ms ease;
}
.chat-attachment-remove:hover {
  color: var(--danger, #f44);
  background: color-mix(in srgb, var(--danger, #f44) 12%, var(--bg-base));
}

/* --- Drag & Drop Overlay --- */
.chat-drop-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--bg-base) 85%, transparent);
  backdrop-filter: blur(8px);
  border-radius: 14px;
  border: 2px dashed var(--accent);
  pointer-events: none;
}
.chat-drop-overlay.hidden {
  display: none;
}
.chat-drop-overlay-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  color: var(--accent);
  font-size: 1rem;
  font-weight: 500;
}
.chat-drop-overlay-inner svg {
  opacity: 0.7;
}

/* --- Attachment Previews in Message Bubbles --- */
.msg-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
}
.msg-attachment-preview {
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--line) 50%, transparent);
  background: color-mix(in srgb, var(--bg-layer) 60%, transparent);
  overflow: hidden;
  transition: border-color 150ms ease;
}
.msg-attachment-preview:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
}

/* Image preview */
.msg-attachment-image {
  max-width: 260px;
  display: flex;
  flex-direction: column;
}
.msg-attachment-preview-img {
  width: 100%;
  max-height: 200px;
  object-fit: cover;
  cursor: zoom-in;
  display: block;
}
.msg-attachment-preview-img:hover {
  opacity: 0.9;
}

/* File preview */
.msg-attachment-file {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.65rem;
  min-width: 180px;
  max-width: 280px;
}
.msg-attachment-preview-icon {
  font-size: 1.6rem;
  flex-shrink: 0;
}
.msg-attachment-preview-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.3rem 0.45rem 0.25rem;
}
.msg-attachment-preview-name {
  font-size: 0.78rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.msg-attachment-preview-size {
  font-size: 0.68rem;
  color: var(--txt-dim);
}
.msg-attachment-preview-actions {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  flex-shrink: 0;
}
.msg-attachment-dl {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  color: var(--txt-dim);
  transition: color 120ms ease, background 120ms ease;
  text-decoration: none;
}
.msg-attachment-dl:hover {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.msg-attachment-import-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--txt-dim);
  cursor: pointer;
  padding: 0;
  transition: color 120ms ease, background 120ms ease;
}
.msg-attachment-import-btn:hover {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.msg-attachment-import-btn:disabled {
  opacity: 0.5;
  cursor: default;
}
.msg-attachment-import-btn.imported {
  color: #4caf50;
  opacity: 1;
}

/* --- Attachment Lightbox --- */
.attachment-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9500;
  display: flex;
  align-items: center;
  justify-content: center;
}
.attachment-lightbox.hidden {
  display: none;
}
.attachment-lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(6px);
}
.attachment-lightbox-content {
  position: relative;
  max-width: 92vw;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}
.attachment-lightbox-img {
  max-width: 92vw;
  max-height: calc(88vh - 44px);
  object-fit: contain;
  display: block;
}
.attachment-lightbox-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.45rem 0.7rem;
  background: color-mix(in srgb, var(--bg-panel) 90%, transparent);
  backdrop-filter: blur(12px);
  border-top: 1px solid color-mix(in srgb, var(--line) 40%, transparent);
}
.attachment-lightbox-title {
  font-size: 0.82rem;
  color: var(--txt-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.attachment-lightbox-actions {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
}
.attachment-lightbox-dl {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  color: var(--txt-dim);
  transition: color 120ms ease, background 120ms ease;
}
.attachment-lightbox-dl:hover {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.attachment-lightbox-close {
  border: none;
  background: transparent;
  color: var(--txt-dim);
  font-size: 1.3rem;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  cursor: pointer;
  transition: color 120ms ease, background 120ms ease;
}
.attachment-lightbox-close:hover {
  color: var(--txt);
  background: color-mix(in srgb, var(--bg-layer) 60%, transparent);
}

/* --- PDF Lightbox --- */
.pdf-lightbox-content {
  position: relative;
  width: 90vw;
  height: 88vh;
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
  background: var(--bg-panel);
}
.pdf-lightbox-content .attachment-lightbox-bar {
  border-top: none;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 40%, transparent);
}
.pdf-lightbox-frame {
  flex: 1;
  width: 100%;
  border: none;
  background: var(--bg);
}
.msg-attachment-pdf:hover {
  border-color: var(--accent);
}

/* --- Media Browser Modal --- */
.media-browser-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
}
.media-browser-overlay.hidden {
  display: none;
}
.media-browser {
  width: min(640px, 92vw);
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  border-radius: 14px;
  border: 1px solid var(--acrylic-border);
  background: var(--acrylic-bg);
  backdrop-filter: blur(24px) saturate(140%);
  box-shadow: var(--shadow-depth-3);
  overflow: hidden;
}
.media-browser-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid var(--line);
}
.media-browser-header h3 {
  margin: 0;
  font-size: 0.95rem;
}
.media-browser-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--line);
}
.media-browser-tab {
  flex: 1;
  padding: 0.5rem 0.8rem;
  border: none;
  background: transparent;
  color: var(--txt-dim);
  cursor: pointer;
  font-size: 0.82rem;
  border-bottom: 2px solid transparent;
  transition: color 120ms ease, border-color 120ms ease;
}
.media-browser-tab:hover {
  color: var(--txt);
}
.media-browser-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.media-browser-body {
  flex: 1;
  overflow-y: auto;
  padding: 0.7rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 0.5rem;
}
.media-browser-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  padding: 0.5rem 0.3rem;
  border-radius: 8px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
  text-align: center;
}
.media-browser-item:hover {
  background: color-mix(in srgb, var(--bg-layer) 60%, transparent);
  border-color: color-mix(in srgb, var(--line) 50%, transparent);
}
.media-browser-item.selected {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}
.media-browser-item-thumb {
  width: 72px;
  height: 72px;
  border-radius: 6px;
  object-fit: cover;
}
.media-browser-item-icon {
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  border-radius: 6px;
  background: color-mix(in srgb, var(--bg-layer) 50%, transparent);
}
.media-browser-item-name {
  font-size: 0.7rem;
  color: var(--txt-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.media-browser-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: 0.6rem 0.9rem;
  border-top: 1px solid var(--line);
}

.chat-input-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.3rem;
  flex-wrap: nowrap;
}

.chat-tools-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.chat-tools-wrap::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 100%;
  width: 126px;
  height: 18px;
}

.chat-tools-trigger,
.send-icon-btn {
  border: 0;
  background: transparent;
  color: var(--txt-dim);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  min-width: 32px;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  transition: color 120ms ease, background 120ms ease;
}

.chat-tools-trigger:hover,
.send-icon-btn:hover {
  color: var(--txt);
  background: color-mix(in srgb, var(--bg-layer) 60%, transparent);
}

.chat-tools-trigger:disabled,
.send-icon-btn:disabled {
  opacity: 0.58;
  cursor: not-allowed;
  background: transparent;
}

.btn-icon {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-icon svg {
  width: 18px;
  height: 18px;
}

#sendBtn .btn-icon svg {
  width: 19px;
  height: 19px;
}

#sendBtn.is-streaming {
  color: var(--danger, #e53935);
  filter: none;
  opacity: 1;
  cursor: pointer;
}

#sendBtn.is-streaming:hover {
  color: var(--danger-hover, #c62828);
  background: color-mix(in srgb, var(--danger, #e53935) 12%, transparent);
}

.chat-tools-menu {
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  z-index: 140;
  min-width: 220px;
  border: 1px solid var(--acrylic-border);
  border-top-color: rgba(255, 255, 255, 0.18);
  border-radius: 12px;
  background:
    radial-gradient(ellipse 60% 35% at 25% 12%, rgba(120, 160, 240, 0.05) 0%, transparent 70%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, transparent 40%),
    color-mix(in srgb, var(--bg-panel) 75%, transparent);
  box-shadow:
    var(--shadow-depth-2),
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -1px 0 rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(20px) saturate(140%);
  padding: 0.38rem;
  display: grid;
  gap: 0.24rem;
}

.chat-tools-item {
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: var(--txt);
  font: inherit;
  font-size: 0.84rem;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.48rem;
  width: 100%;
  text-align: left;
  padding: 0.36rem 0.5rem;
  cursor: pointer;
}

.chat-tools-item:hover {
  border-color: color-mix(in srgb, var(--line) 65%, transparent);
  background: color-mix(in srgb, var(--bg-layer) 65%, transparent);
}

.chat-tools-item .btn-icon {
  width: 17px;
  height: 17px;
  color: var(--txt-dim);
}

.chat-tools-item:hover .btn-icon {
  color: var(--txt);
}

.chat-tools-section-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--txt-dim);
  padding: 0.3rem 0.5rem 0.15rem;
  user-select: none;
}

.chat-tools-separator {
  height: 1px;
  background: var(--line-soft);
  margin: 0.2rem 0.3rem;
}

.chat-tools-item-active {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
}

.chat-tools-item-active .btn-icon {
  color: var(--accent);
}

.chat-tools-trigger.has-active-program {
  position: relative;
}

.chat-tools-trigger.has-active-program::after {
  content: '';
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  pointer-events: none;
}

.media-pane {
  display: grid;
  grid-template-rows: auto auto auto auto auto minmax(0, 1fr);
  gap: 0.6rem;
}

.media-toolbar {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: color-mix(in srgb, var(--bg-panel) 82%, transparent);
}

.media-toolbar .row {
  align-items: center;
}

.media-toolbar strong {
  font-size: 0.95rem;
}

.media-toolbar select {
  width: 160px;
}

.media-dropzone {
  min-height: 78px;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 0.7rem;
  border: 1px dashed color-mix(in srgb, var(--accent) 62%, var(--line));
  border-radius: 12px;
  color: var(--txt-dim);
  background: color-mix(in srgb, var(--bg-panel) 68%, transparent);
  transition: border-color 120ms ease, background 120ms ease, color 120ms ease;
}

.media-dropzone.drag-over {
  border-color: color-mix(in srgb, var(--accent-warm) 62%, var(--accent));
  color: var(--txt);
  background: color-mix(in srgb, var(--accent) 12%, var(--bg-panel));
}

/* --- Media Preview Grid --- */
.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.55rem;
  overflow: auto;
  padding: 0.15rem;
  align-content: start;
}
.media-grid-empty {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--txt-dim);
  padding: 2rem;
}
/* --- Media Selection Bar --- */
.media-selection-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.6rem;
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 10%, var(--bg-layer));
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  font-size: 0.82rem;
}
.media-selection-bar.hidden {
  display: none;
}
.media-selection-bar span {
  color: var(--accent);
  font-weight: 500;
  margin-right: auto;
}

.media-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--line) 50%, transparent);
  background: color-mix(in srgb, var(--bg-layer) 60%, transparent);
  overflow: hidden;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.media-card:hover {
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}
.media-card.selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent);
}

/* Checkbox overlay */
.media-card-checkbox {
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 2;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  border: 2px solid rgba(255, 255, 255, 0.5);
  background: rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity 150ms ease, background 150ms ease;
}
.media-card-checkbox svg {
  display: none;
}
.media-card:hover .media-card-checkbox {
  opacity: 1;
}
.media-card.selected .media-card-checkbox {
  opacity: 1;
  background: var(--accent);
  border-color: var(--accent);
}
.media-card.selected .media-card-checkbox svg {
  display: block;
  color: #fff;
}
.media-card-preview {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--bg-base) 50%, transparent);
}
.media-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: zoom-in;
  transition: transform 200ms ease;
}
.media-card-img:hover {
  transform: scale(1.04);
}
.media-card-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
}
.media-card-audio {
  width: 90%;
  height: 32px;
  margin-top: 0.3rem;
}
.media-card-icon {
  font-size: 2.5rem;
  opacity: 0.5;
}
.media-card-info {
  padding: 0.4rem 0.55rem 0.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  min-width: 0;
}
.media-card-name {
  font-size: 0.78rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.media-card-meta {
  font-size: 0.68rem;
  color: var(--txt-dim);
}
.media-card-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.2rem;
  padding: 0.15rem 0.4rem 0.35rem;
}
.media-card-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--txt-dim);
  cursor: pointer;
  text-decoration: none;
  transition: color 120ms ease, background 120ms ease;
}
.media-card-action-btn:hover {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.media-card-delete:hover {
  color: var(--danger, #f44);
  background: color-mix(in srgb, var(--danger, #f44) 12%, transparent);
}

.account-pane,
.settings-pane {
  display: grid;
  grid-auto-rows: min-content;
  gap: 0.5rem;
  overflow: auto;
}

/* ── Profile Card Accordion ── */
.profile-card {
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  background: color-mix(in srgb, var(--bg-panel) 82%, transparent);
  overflow: hidden;
  transition: border-color 0.2s ease;
}

.profile-card.open {
  border-color: color-mix(in srgb, var(--accent) 35%, var(--line-soft));
}

.profile-card-toggle {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.7rem 0.85rem;
  border: none;
  background: transparent;
  color: var(--txt);
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition: background 0.15s ease;
}

.profile-card-toggle:hover {
  background: color-mix(in srgb, var(--accent) 6%, transparent);
}

.profile-card-icon {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  color: var(--accent);
  opacity: 0.8;
}

.profile-card-title {
  font-weight: 600;
  font-size: 0.92rem;
  white-space: nowrap;
}

.profile-card-hint {
  flex: 1;
  color: var(--txt-dim);
  font-size: 0.8rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-card-chevron {
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  color: var(--txt-dim);
  transition: transform 0.25s ease;
}

.profile-card.open .profile-card-chevron {
  transform: rotate(180deg);
}

.profile-card-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease, padding 0.3s ease;
  padding: 0 0.85rem;
}

.profile-card-body > * {
  overflow: hidden;
}

.profile-card.open .profile-card-body {
  grid-template-rows: 1fr;
  padding: 0 0.85rem 0.85rem;
}

.profile-card-description {
  margin: 0 0 0.5rem;
  color: var(--txt-dim);
  font-size: 0.82rem;
  line-height: 1.45;
}

/* ── Profile Details (collapsible sub-sections) ── */
.profile-details {
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  overflow: hidden;
  margin-top: 0.5rem;
}

.profile-details summary {
  padding: 0.5rem 0.7rem;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--txt-dim);
  background: color-mix(in srgb, var(--bg-panel) 60%, transparent);
  transition: color 0.15s;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.profile-details summary::-webkit-details-marker {
  display: none;
}

.profile-details summary::before {
  content: '\25B6';
  font-size: 0.65rem;
  transition: transform 0.2s ease;
}

.profile-details[open] summary::before {
  transform: rotate(90deg);
}

.profile-details summary:hover {
  color: var(--txt);
}

.profile-details > :not(summary) {
  padding: 0.65rem;
}

/* ── Original section styles (simplified, no borders — card handles that) ── */
.account-form {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(220px, 1fr) minmax(220px, 1fr) auto;
  gap: 0.55rem;
  align-items: center;
}

.account-memory-section {
  display: grid;
  gap: 0.75rem;
}

.account-personality-section {
  display: grid;
  gap: 0.58rem;
}

.account-personality-form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.55rem;
}

.account-personality-form textarea {
  width: 100%;
  min-height: 120px;
  resize: vertical;
}

.account-focus-section {
  display: grid;
  gap: 0.58rem;
}

.account-mail-section {
  display: grid;
  gap: 0.58rem;
}

.mail-account-form {
  display: grid;
  gap: 0.55rem;
}

.mail-fieldset {
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  padding: 0.6rem;
  display: grid;
  gap: 0.45rem;
}

.mail-fieldset legend {
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0 0.3rem;
}

.mail-form-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.45rem;
}

.mail-form-row input[type="number"] {
  max-width: 90px;
}

.mail-checkbox {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.84rem;
  cursor: pointer;
}

.mail-checkbox input[type="checkbox"] {
  width: auto;
  margin: 0;
}

.mail-accounts-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.42rem;
}

.mail-account-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: var(--bg-panel);
  flex-wrap: wrap;
}

.mail-account-info {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.mail-account-info strong {
  font-size: 0.88rem;
}

.mail-account-info .muted {
  font-size: 0.78rem;
}

.mail-account-badge {
  font-size: 0.7rem;
  padding: 0.1rem 0.4rem;
  border-radius: 6px;
  background: var(--accent);
  color: #fff;
  font-weight: 600;
}

.mail-account-actions {
  display: flex;
  gap: 0.3rem;
  flex-wrap: wrap;
}

.account-focus-form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.55rem;
  align-items: stretch;
}

.focus-topics-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.42rem;
}

.focus-topic-entry {
  display: grid;
  gap: 0.42rem;
  padding: 0.56rem;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: color-mix(in srgb, var(--bg-panel) 84%, transparent);
}

.focus-topic-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.focus-topic-head strong {
  font-size: 0.9rem;
}

.focus-topic-anchor {
  margin: 0;
  color: var(--txt-dim);
  font-size: 0.83rem;
  line-height: 1.35;
  white-space: pre-wrap;
}

.focus-topic-keywords {
  margin: 0;
  color: var(--txt);
  font-size: 0.82rem;
  line-height: 1.3;
}

.focus-topic-badge {
  border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--line));
  border-radius: 999px;
  padding: 0.16rem 0.5rem;
  font-size: 0.74rem;
  color: color-mix(in srgb, var(--accent) 72%, #ffffff 28%);
}

/* ── Memory subsections ── */
.memory-subsection {
  display: grid;
  gap: 0.55rem;
  padding: 0.65rem;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: color-mix(in srgb, var(--bg-panel) 78%, transparent);
}

.memory-subsection-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.memory-subsection-header h4 {
  margin: 0;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--txt);
}

.btn-sm {
  padding: 0.2rem 0.5rem !important;
  font-size: 0.76rem !important;
  min-height: 0 !important;
}

.account-memory-form {
  display: grid;
  gap: 0.6rem;
}

.memory-dual-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
}

.memory-field {
  display: grid;
  gap: 0.35rem;
}

.memory-field span {
  color: var(--txt-dim);
  font-size: 0.82rem;
  font-weight: 500;
}

.memory-field textarea {
  width: 100%;
  min-height: 100px;
  resize: vertical;
}

/* ── Memory category select (styled) ── */
.memory-category-tabs {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.memory-category-select {
  font-size: 0.82rem;
  padding: 0.3rem 0.55rem;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: color-mix(in srgb, var(--bg-panel) 90%, transparent);
  color: var(--txt);
}

/* ── Memory history ── */
.memory-history-wrap {
  display: grid;
  gap: 0.45rem;
}

.memory-history-list {
  margin: 0;
  padding-left: 1rem;
  max-height: 180px;
  overflow: auto;
  display: grid;
  gap: 0.28rem;
}

.memory-history-list li {
  color: var(--txt-dim);
  font-size: 0.83rem;
  line-height: 1.3;
}

/* ── Memory items toolbar ── */
.memory-items-toolbar {
  display: flex;
  gap: 0.45rem;
  align-items: center;
  flex-wrap: wrap;
}

.memory-search-input {
  flex: 1;
  min-width: 160px;
  padding: 0.35rem 0.6rem;
  font-size: 0.84rem;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: color-mix(in srgb, var(--bg-panel) 90%, transparent);
  color: var(--txt);
  transition: border-color 0.15s;
}

.memory-search-input:focus {
  outline: none;
  border-color: var(--accent);
}

.memory-search-input::placeholder {
  color: var(--txt-dim);
  opacity: 0.7;
}

/* ── Memory grouped container ── */
.memory-items-grouped {
  display: grid;
  gap: 0.5rem;
}

/* ── Memory category group ── */
.memory-category-group {
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  overflow: hidden;
  background: color-mix(in srgb, var(--bg-panel) 70%, transparent);
}

.memory-category-summary {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.65rem;
  cursor: pointer;
  font-size: 0.85rem;
  background: color-mix(in srgb, var(--bg-panel) 55%, transparent);
  border-bottom: 1px solid var(--line-soft);
  transition: background 0.15s;
  list-style: none;
  user-select: none;
}

.memory-category-summary::-webkit-details-marker {
  display: none;
}

.memory-category-summary:hover {
  background: color-mix(in srgb, var(--accent) 6%, var(--bg-panel));
}

.memory-category-summary strong {
  font-size: 0.85rem;
}

.memory-cat-icon {
  font-size: 0.9rem;
  line-height: 1;
}

.memory-cat-count {
  margin-left: auto;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.1rem 0.42rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--accent);
}

.memory-category-group:not([open]) .memory-category-summary {
  border-bottom: none;
}

.memory-category-items {
  display: grid;
  gap: 0.35rem;
  padding: 0.4rem;
}

/* ── Memory bulk action bar ── */
.memory-bulk-bar {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.4rem 0.65rem;
  border: 1px solid color-mix(in srgb, var(--warn) 40%, var(--line-soft));
  border-radius: 8px;
  background: color-mix(in srgb, var(--warn) 6%, var(--bg-panel));
  animation: bulkBarSlideIn 0.2s ease;
}

@keyframes bulkBarSlideIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.memory-bulk-count {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--txt);
}

.memory-bulk-delete {
  color: var(--warn) !important;
  margin-left: auto;
}

/* ── Memory item checkbox ── */
.memory-item-check {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  cursor: pointer;
  accent-color: var(--accent);
  margin: 0;
}

/* ── Memory items (individual) ── */

.memory-item-entry {
  display: grid;
  gap: 0.3rem;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: color-mix(in srgb, var(--bg-panel) 85%, transparent);
  transition: border-color 0.15s;
}

.memory-item-entry:hover {
  border-color: color-mix(in srgb, var(--accent) 30%, var(--line-soft));
}

.memory-item-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.55rem;
  flex-wrap: wrap;
}

.memory-item-top strong {
  font-size: 0.88rem;
}

.memory-item-top span {
  color: var(--txt-dim);
  font-size: 0.74rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.memory-item-content {
  margin: 0;
  color: var(--txt);
  font-size: 0.84rem;
  line-height: 1.35;
}

.memory-item-form {
  display: grid;
  gap: 0.5rem;
  padding: 0.55rem;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line-soft));
  border-radius: 10px;
  background: color-mix(in srgb, var(--bg-panel) 88%, transparent);
}

.settings-nav {
  display: flex;
  gap: 0.45rem;
  flex-wrap: wrap;
}

.subtab-btn {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: transparent;
  color: var(--txt-dim);
  font: inherit;
  padding: 0.43rem 0.72rem;
  cursor: pointer;
}

.subtab-btn:hover {
  color: var(--txt);
  background: color-mix(in srgb, var(--bg-panel) 72%, transparent);
}

.subtab-btn.active {
  color: var(--txt);
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
  background: color-mix(in srgb, var(--accent) 18%, var(--bg-layer));
}

.subtab-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.settings-section {
  display: grid;
  gap: 0.72rem;
  min-height: 0;
}

.model-preset-bar {
  display: grid;
  grid-template-columns: auto minmax(190px, 1fr) auto auto;
  gap: 0.55rem;
  align-items: center;
  padding: 0.62rem 0.68rem;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: color-mix(in srgb, var(--bg-panel) 82%, transparent);
}

.model-preset-bar > label {
  font-size: 0.84rem;
  color: var(--txt-dim);
}

.model-preset-inline {
  grid-column: 1 / -1;
}

.model-preset-actions {
  justify-content: flex-start;
}

.model-preset-actions .btn {
  white-space: nowrap;
}

.model-preset-manage {
  position: relative;
}

.model-preset-manage summary {
  list-style: none;
  cursor: pointer;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  padding: 0.39rem 0.62rem;
  font-size: 0.83rem;
  color: var(--txt-dim);
  background: color-mix(in srgb, var(--bg-layer) 62%, transparent);
  user-select: none;
}

.model-preset-manage summary:hover {
  color: var(--txt);
  border-color: color-mix(in srgb, var(--line) 68%, var(--accent));
}

.model-preset-manage summary::-webkit-details-marker {
  display: none;
}

.model-preset-manage summary::after {
  content: " v";
  color: var(--txt-dim);
}

.model-preset-manage[open] {
  z-index: 30;
}

.model-preset-manage[open] summary {
  color: var(--txt);
  border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
}

.model-preset-manage[open] summary::after {
  content: " ^";
  color: var(--txt);
}

.model-preset-manage .model-preset-actions {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  min-width: 250px;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  padding: 0.45rem;
  background: color-mix(in srgb, var(--bg-panel) 94%, transparent);
  box-shadow: 0 16px 30px rgba(0, 0, 0, 0.32);
  display: grid;
  gap: 0.3rem;
}

.model-preset-manage .model-preset-actions .btn {
  width: 100%;
}

.profile-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.55rem;
}

.profile-card {
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: color-mix(in srgb, var(--bg-panel) 78%, transparent);
  color: var(--txt);
  text-align: left;
  padding: 0.68rem 0.72rem;
  cursor: pointer;
  display: grid;
  gap: 0.25rem;
}

.profile-card:hover {
  border-color: color-mix(in srgb, var(--accent) 58%, var(--line));
  background: color-mix(in srgb, var(--accent) 12%, var(--bg-panel));
}

.profile-card strong {
  font-size: 0.92rem;
}

.profile-card span {
  color: var(--txt-dim);
  font-size: 0.8rem;
}

.dms-form {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(220px, 1fr) minmax(240px, 1fr) minmax(220px, 1fr) minmax(220px, 1fr) auto;
  gap: 0.55rem;
  align-items: center;
}

.module-dms-props {
  padding: 0.7rem;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: color-mix(in srgb, var(--bg-panel) 82%, transparent);
}

.dms-checkbox {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.46rem;
  padding: 0.42rem 0.52rem;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: color-mix(in srgb, var(--bg-panel) 74%, transparent);
  min-height: 42px;
}

.dms-checkbox input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
}

.connections-form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.65rem;
  align-items: start;
  padding: 0.72rem;
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  background: color-mix(in srgb, var(--bg-panel) 84%, transparent);
}

.connection-form-intro {
  margin: 0;
  font-size: 0.82rem;
}

.connection-main-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(170px, 1fr));
  gap: 0.55rem;
  align-items: end;
}

.connection-field {
  display: grid;
  gap: 0.28rem;
  font-size: 0.83rem;
  color: var(--txt-dim);
}

.connection-field input,
.connection-field select {
  min-width: 0;
}

.connection-advanced {
  grid-column: 1 / -1;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: color-mix(in srgb, var(--bg-panel) 78%, transparent);
}

.connection-advanced > summary {
  cursor: pointer;
  list-style: none;
  user-select: none;
  padding: 0.58rem 0.68rem;
  font-size: 0.84rem;
  color: var(--txt-dim);
}

.connection-advanced > summary:hover {
  color: var(--txt);
}

.connection-advanced > summary::-webkit-details-marker {
  display: none;
}

.connection-advanced > summary::after {
  content: "v";
  float: right;
  color: var(--txt-dim);
}

.connection-advanced[open] > summary {
  color: var(--txt);
  border-bottom: 1px solid var(--line-soft);
}

.connection-advanced[open] > summary::after {
  content: "^";
  color: var(--txt);
}

.connection-advanced-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.55rem;
  align-items: center;
  padding: 0.62rem 0.68rem 0.68rem;
}

.connection-form-actions {
  grid-column: 1 / -1;
}

.connection-chat-mode {
  display: grid;
  gap: 0.28rem;
  font-size: 0.84rem;
  color: var(--txt-dim);
}

.connection-chat-mode.hidden {
  display: none;
}

.connection-chat-flag {
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 0.42rem;
}

#connectionPresetStatus,
#connectionKindHint {
  grid-column: 1 / -1;
  margin: 0;
}

.users-create-form {
  display: grid;
  grid-template-columns: minmax(170px, 1fr) minmax(170px, 1fr) 130px auto;
  gap: 0.55rem;
  align-items: center;
}

.workspace-upload-form {
  display: grid;
  grid-template-columns: 180px minmax(200px, 1fr) auto auto;
  gap: 0.55rem;
  align-items: center;
}

.workspace-admin-form {
  display: grid;
  grid-template-columns: 170px 170px minmax(160px, 1fr) minmax(200px, 1fr) auto auto;
  gap: 0.55rem;
  align-items: center;
}

.workspace-policy-form {
  display: grid;
  grid-template-columns: repeat(6, minmax(150px, 1fr)) auto;
  gap: 0.55rem;
  align-items: center;
}

.table-wrap {
  overflow: auto;
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  background: color-mix(in srgb, var(--bg-panel) 84%, transparent);
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

.data-table th,
.data-table td {
  border-bottom: 1px solid color-mix(in srgb, var(--line) 35%, transparent);
  padding: 0.56rem 0.62rem;
  text-align: left;
  vertical-align: top;
}

.data-table th {
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 0.75rem;
  color: var(--txt-dim);
  font-weight: 600;
  position: sticky;
  top: 0;
  background: var(--bg-panel);
  z-index: 2;
}

.data-table tbody tr {
  transition: background 80ms ease;
}

.data-table tbody tr:hover {
  background: color-mix(in srgb, var(--accent) 6%, transparent);
}

.data-table tbody tr:nth-child(even) {
  background: color-mix(in srgb, var(--bg-layer) 18%, transparent);
}

.data-table tbody tr:nth-child(even):hover {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

.data-table tr:last-child td {
  border-bottom: none;
}

/* ------------------------------------------------------------------ */
/* Orb — Galaxy sphere with deep space, spiral arms, star field        */
/* ------------------------------------------------------------------ */

.orb-btn {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 74px;
  height: 74px;
  border: none;
  border-radius: 46% 54% 52% 48% / 48% 46% 54% 52%;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    /* Deep space — near-black with subtle blue-violet tint */
    radial-gradient(ellipse at 50% 50%,
      rgba(12, 8, 28, 0.7) 0%,
      rgba(4, 2, 14, 0.95) 100%);
  box-shadow:
    /* Ground shadow — 3D elevation */
    0 20px 48px rgba(0, 0, 0, 0.7),
    0 8px 16px rgba(0, 0, 0, 0.5),
    /* Cosmic rim glow */
    0 0 0 1px rgba(140, 160, 255, 0.18),
    0 0 28px rgba(100, 80, 200, 0.14),
    0 0 60px rgba(80, 60, 180, 0.08),
    /* Inner 3D depth — sphere curvature */
    inset 0 4px 14px rgba(160, 180, 255, 0.15),
    inset 0 -6px 18px rgba(0, 0, 0, 0.6),
    inset 4px 0 12px rgba(100, 80, 200, 0.06),
    inset -4px 0 12px rgba(0, 0, 0, 0.3);
  cursor: grab;
  z-index: 1800;
  touch-action: none;
  transition: transform 140ms ease, box-shadow 160ms ease, filter 160ms ease, border-radius 4s ease;
  animation: orbFloat 5.8s ease-in-out infinite, orbMorph 12s ease-in-out infinite;
}

/* Outer glow / cosmic atmosphere */
.orb-btn::before {
  content: "";
  position: absolute;
  inset: -30%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%,
      rgba(120, 100, 220, 0.12) 0%,
      rgba(80, 60, 180, 0.06) 40%,
      transparent 70%);
  pointer-events: none;
  animation: orbNebulaSpin 22s linear infinite;
}

/* Glass highlight / specular — 3D sphere */
.orb-btn::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: inherit;
  background:
    /* Specular highlight */
    radial-gradient(ellipse 38% 28% at 32% 24%, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.05) 50%, transparent 70%),
    /* Bottom rim reflection */
    radial-gradient(ellipse 45% 16% at 62% 90%, rgba(160, 180, 255, 0.08) 0%, transparent 70%),
    /* Depth gradient */
    linear-gradient(165deg,
      rgba(255, 255, 255, 0.08) 0%,
      transparent 40%,
      rgba(0, 0, 0, 0.1) 80%,
      rgba(140, 160, 255, 0.03) 100%);
  pointer-events: none;
  z-index: 5;
}

/* Galactic nebula clouds — cosmic gas and dust */
.orb-nebula {
  position: absolute;
  inset: 4px;
  border-radius: inherit;
  background:
    /* Warm golden nebula cluster — off-center top */
    radial-gradient(ellipse 50% 35% at 28% 30%, rgba(255, 200, 100, 0.5) 0%, rgba(255, 160, 60, 0.12) 50%, transparent 72%),
    /* Blue-violet nebula arm */
    radial-gradient(ellipse 28% 55% at 70% 55%, rgba(100, 80, 220, 0.4) 0%, rgba(60, 40, 160, 0.1) 55%, transparent 70%),
    /* Teal dust cloud */
    radial-gradient(ellipse 20% 22% at 52% 20%, rgba(80, 200, 200, 0.28) 0%, transparent 65%),
    /* Deep rose pocket */
    radial-gradient(ellipse 30% 20% at 38% 76%, rgba(200, 80, 120, 0.22) 0%, transparent 60%),
    /* Scattered star dust — tiny bright spots via tight gradients */
    radial-gradient(circle at 18% 44%, rgba(255, 255, 240, 0.7) 0%, transparent 3%),
    radial-gradient(circle at 65% 28%, rgba(255, 255, 240, 0.6) 0%, transparent 2.5%),
    radial-gradient(circle at 78% 72%, rgba(255, 240, 200, 0.55) 0%, transparent 2%),
    radial-gradient(circle at 42% 62%, rgba(200, 220, 255, 0.5) 0%, transparent 2.5%),
    radial-gradient(circle at 30% 85%, rgba(255, 255, 255, 0.45) 0%, transparent 2%),
    radial-gradient(circle at 85% 40%, rgba(255, 220, 180, 0.4) 0%, transparent 2%),
    radial-gradient(circle at 55% 90%, rgba(200, 200, 255, 0.35) 0%, transparent 2%),
    /* Emerald dust veil */
    radial-gradient(ellipse 22% 18% at 72% 32%, rgba(60, 200, 160, 0.18) 0%, transparent 60%),
    /* Hot blue knot */
    radial-gradient(ellipse 16% 24% at 24% 60%, rgba(80, 140, 255, 0.22) 0%, transparent 55%);
  filter: blur(0.8px);
  mix-blend-mode: screen;
  animation: orbNebulaDrift 9s ease-in-out infinite alternate, orbHueShift 30s linear infinite;
  pointer-events: none;
  z-index: 1;
}

/* Spiral arms — galaxy structure */
.orb-ribbon {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  mix-blend-mode: screen;
  z-index: 2;
}

/* Primary spiral arm — golden-white */
.orb-ribbon-a {
  inset: 8% 5% 18% 14%;
  border-radius: 68% 32% 42% 58% / 38% 62% 38% 62%;
  background:
    conic-gradient(from 20deg at 45% 50%,
      transparent 0deg,
      rgba(255, 220, 140, 0.42) 40deg,
      rgba(255, 255, 220, 0.18) 80deg,
      transparent 130deg,
      rgba(200, 180, 255, 0.2) 200deg,
      transparent 260deg,
      rgba(255, 200, 120, 0.15) 310deg,
      transparent 360deg);
  filter: blur(1.8px);
  animation: galaxySpinDepthA 18s linear infinite;
}

/* Secondary spiral arm — blue-violet */
.orb-ribbon-b {
  inset: 14% 10% 12% 8%;
  border-radius: 44% 56% 62% 38% / 54% 46% 54% 46%;
  background:
    conic-gradient(from 140deg at 55% 48%,
      transparent 0deg,
      rgba(100, 120, 255, 0.35) 30deg,
      rgba(180, 140, 255, 0.15) 70deg,
      transparent 120deg,
      rgba(255, 200, 140, 0.18) 220deg,
      transparent 280deg,
      rgba(140, 180, 255, 0.12) 330deg,
      transparent 360deg);
  filter: blur(2px);
  animation: galaxySpinDepthB 24s linear infinite reverse;
}

/* Star dust layer — "near" stars that approach and recede */
.orb-ribbon-c {
  inset: 6px;
  border-radius: inherit;
  background:
    radial-gradient(circle at 12% 20%, rgba(255, 255, 255, 0.85) 0%, transparent 2.5%),
    radial-gradient(circle at 88% 15%, rgba(255, 240, 200, 0.75) 0%, transparent 2%),
    radial-gradient(circle at 35% 45%, rgba(200, 220, 255, 0.7) 0%, transparent 1.8%),
    radial-gradient(circle at 72% 82%, rgba(255, 255, 240, 0.65) 0%, transparent 2.2%),
    radial-gradient(circle at 22% 70%, rgba(255, 200, 160, 0.6) 0%, transparent 1.5%),
    radial-gradient(circle at 60% 38%, rgba(255, 255, 255, 0.55) 0%, transparent 1.8%),
    radial-gradient(circle at 48% 88%, rgba(220, 200, 255, 0.5) 0%, transparent 2%),
    radial-gradient(circle at 90% 55%, rgba(255, 240, 220, 0.55) 0%, transparent 1.5%),
    radial-gradient(circle at 8% 90%, rgba(200, 230, 255, 0.45) 0%, transparent 2%);
  filter: blur(0.3px);
  animation: starFieldNear 36s linear infinite;
}

/* Deep star field — "far" stars that recede while near stars approach */
.orb-ribbon-d {
  inset: 4px;
  border-radius: inherit;
  background:
    radial-gradient(circle at 42% 16%, rgba(255, 255, 255, 0.6) 0%, transparent 1.8%),
    radial-gradient(circle at 76% 42%, rgba(200, 210, 255, 0.55) 0%, transparent 1.5%),
    radial-gradient(circle at 18% 58%, rgba(255, 240, 220, 0.5) 0%, transparent 2%),
    radial-gradient(circle at 62% 68%, rgba(255, 255, 255, 0.5) 0%, transparent 1.6%),
    radial-gradient(circle at 86% 82%, rgba(220, 200, 255, 0.45) 0%, transparent 1.8%),
    radial-gradient(circle at 32% 86%, rgba(255, 230, 180, 0.4) 0%, transparent 1.5%),
    radial-gradient(circle at 52% 34%, rgba(180, 200, 255, 0.45) 0%, transparent 1.4%),
    radial-gradient(circle at 14% 36%, rgba(255, 255, 240, 0.4) 0%, transparent 1.6%);
  filter: blur(0.5px);
  animation: starFieldFar 28s linear infinite reverse;
}

/* Orb shape morphing */
@keyframes orbMorph {
  0%, 100% { border-radius: 46% 54% 52% 48% / 48% 46% 54% 52%; }
  25%      { border-radius: 52% 48% 46% 54% / 54% 48% 52% 48%; }
  50%      { border-radius: 48% 52% 54% 46% / 46% 54% 48% 52%; }
  75%      { border-radius: 54% 46% 48% 52% / 52% 46% 54% 48%; }
}

/* Galaxy rotation — smooth continuous spin */
@keyframes galaxySpin {
  to { transform: rotate(360deg); }
}

/* Spiral arms with subtle depth — rotation + scale breathing */
@keyframes galaxySpinDepthA {
  0%   { transform: rotate(0deg)   scale(1); }
  33%  { transform: rotate(120deg) scale(1.1); }
  66%  { transform: rotate(240deg) scale(0.9); }
  100% { transform: rotate(360deg) scale(1); }
}
@keyframes galaxySpinDepthB {
  0%   { transform: rotate(0deg)   scale(0.92); }
  33%  { transform: rotate(120deg) scale(1.06); }
  66%  { transform: rotate(240deg) scale(0.94); }
  100% { transform: rotate(360deg) scale(0.92); }
}

/* Star field depth — stars approach and recede as they orbit */
@keyframes starFieldNear {
  0%   { transform: rotate(0deg)   scale(1);    opacity: 0.8; }
  25%  { transform: rotate(90deg)  scale(1.25); opacity: 1; }
  50%  { transform: rotate(180deg) scale(0.7);  opacity: 0.5; }
  75%  { transform: rotate(270deg) scale(1.12); opacity: 0.92; }
  100% { transform: rotate(360deg) scale(1);    opacity: 0.8; }
}
@keyframes starFieldFar {
  0%   { transform: rotate(0deg)   scale(0.82); opacity: 0.65; }
  25%  { transform: rotate(90deg)  scale(0.6);  opacity: 0.4; }
  50%  { transform: rotate(180deg) scale(1.18); opacity: 0.95; }
  75%  { transform: rotate(270deg) scale(0.75); opacity: 0.55; }
  100% { transform: rotate(360deg) scale(0.82); opacity: 0.65; }
}

/* Accretion disk — luminous ring around the core */
.orb-accretion {
  position: absolute;
  inset: 22% 18% 22% 18%;
  border-radius: 50%;
  background:
    conic-gradient(from 0deg at 50% 50%,
      rgba(255, 200, 100, 0.0) 0deg,
      rgba(255, 220, 140, 0.25) 60deg,
      rgba(200, 160, 255, 0.12) 120deg,
      rgba(255, 200, 100, 0.0) 180deg,
      rgba(100, 180, 255, 0.2) 240deg,
      rgba(255, 180, 80, 0.15) 300deg,
      rgba(255, 200, 100, 0.0) 360deg);
  filter: blur(1.2px);
  mix-blend-mode: screen;
  transform: rotateX(62deg) rotateZ(0deg);
  animation: accretionSpin 14s linear infinite;
  pointer-events: none;
  z-index: 2;
}

/* Inner core — galactic center, diffuse white-gold glow */
.orb-core {
  position: relative;
  z-index: 3;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 46% 42%,
      rgba(255, 255, 255, 0.95) 0%,
      rgba(255, 250, 230, 0.8) 12%,
      rgba(255, 225, 150, 0.5) 30%,
      rgba(240, 190, 130, 0.25) 50%,
      rgba(160, 120, 200, 0.1) 72%,
      transparent 100%);
  box-shadow:
    0 0 6px rgba(255, 255, 255, 0.8),
    0 0 18px rgba(255, 240, 200, 0.65),
    0 0 40px rgba(220, 190, 130, 0.35),
    0 0 70px rgba(180, 160, 255, 0.15),
    inset 0 0 4px rgba(255, 255, 255, 0.5);
  animation: orbCoreShimmer 3.4s ease-in-out infinite;
}

.orb-btn:hover {
  filter: brightness(1.15) saturate(1.15);
  transform: scale(1.06);
}

.orb-btn.dragging {
  cursor: grabbing;
  transform: scale(1.06);
  animation-play-state: paused;
}

.orb-btn.active {
  box-shadow:
    0 20px 52px rgba(0, 0, 0, 0.65),
    0 0 0 1px rgba(140, 160, 255, 0.35),
    0 0 36px rgba(120, 100, 220, 0.25),
    inset 0 4px 14px rgba(160, 180, 255, 0.18),
    inset 0 -6px 18px rgba(0, 0, 0, 0.5);
}

/* --- Inference active: Cosmic aurora — galaxy comes alive --- */
.orb-btn.inference-active {
  animation:
    orbFloat 5.8s ease-in-out infinite,
    orbMorph 8s ease-in-out infinite,
    orbPulse 1.8s ease-in-out infinite;
}

.orb-btn.inference-active .orb-nebula {
  background:
    /* Bright cyan nebula */
    radial-gradient(ellipse 45% 35% at 24% 26%, rgba(80, 200, 255, 0.65) 0%, rgba(40, 140, 220, 0.15) 50%, transparent 70%),
    /* Magenta-violet cloud */
    radial-gradient(ellipse 30% 50% at 74% 52%, rgba(220, 80, 255, 0.55) 0%, rgba(160, 40, 200, 0.12) 50%, transparent 65%),
    /* Emerald pocket */
    radial-gradient(ellipse 22% 20% at 52% 18%, rgba(80, 255, 180, 0.4) 0%, transparent 60%),
    /* Pink-gold arm */
    radial-gradient(ellipse 28% 22% at 36% 78%, rgba(255, 140, 180, 0.35) 0%, transparent 55%),
    /* Active star field */
    radial-gradient(circle at 20% 40%, rgba(255, 255, 255, 0.85) 0%, transparent 3%),
    radial-gradient(circle at 68% 25%, rgba(255, 255, 255, 0.75) 0%, transparent 2.5%),
    radial-gradient(circle at 80% 70%, rgba(200, 240, 255, 0.65) 0%, transparent 2%),
    radial-gradient(circle at 40% 60%, rgba(255, 220, 255, 0.6) 0%, transparent 2.5%),
    radial-gradient(circle at 55% 88%, rgba(255, 255, 255, 0.5) 0%, transparent 2%);
  filter: blur(0.7px);
  animation: orbNebulaDrift 4s ease-in-out infinite alternate, orbHueShift 18s linear infinite;
}

.orb-btn.inference-active .orb-ribbon-a {
  background:
    conic-gradient(from 20deg at 45% 50%,
      transparent 0deg,
      rgba(80, 180, 255, 0.5) 35deg,
      rgba(200, 100, 255, 0.25) 75deg,
      transparent 130deg,
      rgba(100, 255, 200, 0.22) 200deg,
      transparent 260deg,
      rgba(255, 140, 200, 0.2) 320deg,
      transparent 360deg);
  animation: galaxySpinDepthA 8s linear infinite;
}

.orb-btn.inference-active .orb-ribbon-b {
  background:
    conic-gradient(from 140deg at 55% 48%,
      transparent 0deg,
      rgba(200, 80, 255, 0.45) 30deg,
      rgba(80, 255, 180, 0.2) 70deg,
      transparent 120deg,
      rgba(255, 160, 80, 0.22) 220deg,
      transparent 280deg,
      rgba(80, 200, 255, 0.18) 330deg,
      transparent 360deg);
  animation: galaxySpinDepthB 12s linear infinite reverse;
}

.orb-btn.inference-active .orb-ribbon-c {
  animation: starFieldNear 16s linear infinite;
}

.orb-btn.inference-active .orb-ribbon-d {
  animation: starFieldFar 12s linear infinite reverse;
}

.orb-btn.inference-active .orb-core {
  background:
    radial-gradient(circle at 46% 42%,
      rgba(255, 255, 255, 0.95) 0%,
      rgba(200, 220, 255, 0.75) 18%,
      rgba(160, 180, 255, 0.4) 40%,
      rgba(180, 120, 255, 0.18) 60%,
      transparent 100%);
  box-shadow:
    0 0 22px rgba(160, 180, 255, 0.6),
    0 0 10px rgba(255, 255, 255, 0.7),
    0 0 50px rgba(140, 120, 255, 0.3),
    0 0 80px rgba(120, 100, 255, 0.12),
    inset 0 0 5px rgba(255, 255, 255, 0.5);
  animation: orbCoreShimmer 1.6s ease-in-out infinite;
}

@keyframes tilePopIn {
  from {
    opacity: 0;
    transform: scale(0.82) translateY(14px) perspective(600px) rotateX(-3deg);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.orb-overlay {
  position: fixed;
  inset: 0;
  z-index: 1700;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

.orb-overlay:not(.hidden) .program-btn {
  animation: tilePopIn 220ms cubic-bezier(.4,0,.2,1) both;
}
.orb-overlay:not(.hidden) .program-btn:nth-child(1) { animation-delay: 20ms; }
.orb-overlay:not(.hidden) .program-btn:nth-child(2) { animation-delay: 50ms; }
.orb-overlay:not(.hidden) .program-btn:nth-child(3) { animation-delay: 80ms; }
.orb-overlay:not(.hidden) .program-btn:nth-child(4) { animation-delay: 110ms; }
.orb-overlay:not(.hidden) .program-btn:nth-child(5) { animation-delay: 140ms; }
.orb-overlay:not(.hidden) .program-btn:nth-child(6) { animation-delay: 170ms; }
.orb-overlay:not(.hidden) .program-btn:nth-child(7) { animation-delay: 200ms; }
.orb-overlay:not(.hidden) .program-btn:nth-child(8) { animation-delay: 230ms; }
.orb-overlay:not(.hidden) .program-btn:nth-child(9) { animation-delay: 260ms; }
.orb-overlay:not(.hidden) .program-btn:nth-child(10) { animation-delay: 290ms; }

.orb-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(2, 4, 12, 0.72);
  backdrop-filter: blur(16px) saturate(120%);
}

.launcher-cloud {
  position: relative;
  width: min(680px, 96vw);
  display: grid;
  justify-items: center;
}

.launcher-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
  gap: 0.75rem;
  width: 100%;
  max-width: min(680px, 95vw);
  justify-items: center;
}

.launcher-focus {
  gap: 0.56rem;
}

.launcher-focus-head {
  width: min(860px, 95vw);
  display: flex;
  justify-content: flex-start;
}

.launcher-focus-info {
  width: min(860px, 95vw);
  border: 1px solid var(--acrylic-border);
  border-top-color: rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, transparent 40%),
    var(--acrylic-bg);
  backdrop-filter: blur(20px) saturate(140%);
  box-shadow: var(--shadow-depth-1);
  padding: 0.68rem 0.76rem;
  display: grid;
  gap: 0.5rem;
}

.launcher-focus-info p {
  margin: 0;
  line-height: 1.44;
}

.focus-inline-link {
  border: 0;
  background: none;
  color: color-mix(in srgb, var(--accent-warm) 86%, white 14%);
  cursor: pointer;
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  padding: 0;
}

.focus-inline-link:hover {
  color: var(--txt);
}

.focus-inline-link:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent-warm) 72%, white 28%);
  outline-offset: 2px;
  border-radius: 3px;
}

.orb-focus-line {
  width: min(860px, 95vw);
  margin-top: 0.62rem;
  padding: 0.62rem 0.72rem;
  border: 1px solid var(--acrylic-border);
  border-top-color: rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, transparent 40%),
    var(--acrylic-bg);
  backdrop-filter: blur(20px) saturate(140%);
  box-shadow: var(--shadow-depth-1);
  display: grid;
  grid-template-columns: auto minmax(220px, 1fr);
  gap: 0.52rem 0.7rem;
  align-items: center;
}

.launcher-focus .orb-focus-line {
  margin-top: 0;
}

.orb-focus-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.84rem;
  color: var(--txt);
  white-space: nowrap;
}

.orb-focus-toggle input {
  width: 16px;
  height: 16px;
}

.orb-focus-select-wrap {
  display: grid;
  gap: 0.26rem;
}

.orb-focus-select-wrap > span {
  color: var(--txt-dim);
  font-size: 0.78rem;
}

#orbFocusHint {
  margin: 0;
  grid-column: 1 / -1;
  min-height: 1.1rem;
  font-size: 0.8rem;
}

.program-btn {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-top-color: rgba(255, 255, 255, 0.18);
  border-radius: 18px;
  width: 100%;
  min-height: 96px;
  padding: 0.7rem 0.5rem 0.55rem;
  background:
    /* Surface curvature — convex panel */
    radial-gradient(ellipse 70% 45% at 35% 16%, rgba(140, 180, 255, 0.05) 0%, transparent 70%),
    linear-gradient(170deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.01) 40%, transparent 100%),
    rgba(12, 18, 40, 0.55);
  backdrop-filter: blur(20px) saturate(140%);
  box-shadow:
    var(--shadow-depth-2),
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -1px 0 rgba(0, 0, 0, 0.16),
    inset 1px 0 0 rgba(255, 255, 255, 0.03),
    inset -1px 0 0 rgba(0, 0, 0, 0.05);
  color: var(--txt);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  text-align: center;
  transition: transform 120ms cubic-bezier(.4,0,.2,1), border-color 120ms ease, background 120ms ease, box-shadow 160ms ease;
}

.program-btn:hover {
  transform: translateY(-5px) scale(1.04) perspective(600px) rotateX(1deg);
  border-color: rgba(255, 255, 255, 0.2);
  border-top-color: rgba(255, 255, 255, 0.28);
  background:
    radial-gradient(ellipse 70% 45% at 35% 16%, rgba(140, 180, 255, 0.08) 0%, transparent 70%),
    linear-gradient(170deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.02) 40%, transparent 100%),
    rgba(16, 24, 52, 0.65);
  box-shadow:
    var(--shadow-depth-3),
    0 0 24px rgba(100, 140, 255, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    inset 0 -1px 0 rgba(0, 0, 0, 0.12);
}

.program-btn:active {
  transform: translateY(0) scale(0.97);
  box-shadow: var(--shadow-depth-1);
}

.program-btn.active {
  border-color: color-mix(in srgb, var(--accent) 50%, rgba(255, 255, 255, 0.12));
  border-top-color: color-mix(in srgb, var(--accent) 30%, rgba(255, 255, 255, 0.22));
  background:
    radial-gradient(ellipse 60% 40% at 30% 14%, color-mix(in srgb, var(--accent) 10%, transparent) 0%, transparent 70%),
    linear-gradient(170deg, rgba(121, 182, 255, 0.12) 0%, rgba(121, 182, 255, 0.03) 40%, transparent 100%),
    rgba(14, 22, 48, 0.65);
  box-shadow:
    var(--shadow-depth-2),
    0 0 20px color-mix(in srgb, var(--accent) 14%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -1px 0 rgba(0, 0, 0, 0.1);
}

.program-btn.active .program-icon {
  box-shadow:
    0 8px 20px rgba(80, 140, 255, 0.35),
    0 2px 5px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -1px 0 rgba(0, 0, 0, 0.2);
}

.program-btn.external-launch::after {
  content: '\2197';
  font-size: 9px;
  opacity: 0.4;
  position: absolute;
  top: 6px;
  right: 8px;
}

.program-btn.external-launch {
  position: relative;
}

.orb-app-mode-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.65rem 0 0.2rem;
}
.app-mode-label {
  color: var(--txt-dim);
  font-size: 0.72rem;
}

.program-icon {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(
    140deg,
    color-mix(in srgb, var(--accent) 50%, var(--accent-strong) 50%),
    color-mix(in srgb, var(--accent) 60%, #1a2a5e 40%)
  );
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-top-color: rgba(255, 255, 255, 0.38);
  box-shadow:
    0 8px 22px rgba(2, 5, 16, 0.55),
    0 2px 5px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    inset 0 -1px 0 rgba(0, 0, 0, 0.22),
    inset 1px 0 0 rgba(255, 255, 255, 0.06),
    inset -1px 0 0 rgba(0, 0, 0, 0.08);
  transition: transform 120ms ease, box-shadow 120ms ease;
  overflow: hidden;
  position: relative;
}

/* Specular highlight — 3D convex glass surface */
.program-icon::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    /* Specular spot — light source reflection */
    radial-gradient(ellipse 55% 45% at 32% 18%, rgba(255,255,255,0.32) 0%, rgba(255,255,255,0.06) 55%, transparent 72%),
    /* Bottom rim reflection */
    linear-gradient(to top, rgba(255,255,255,0.05) 0%, transparent 18%),
    /* Surface gradient — convex panel */
    linear-gradient(170deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0.02) 38%, transparent 58%);
  pointer-events: none;
}

.program-btn:hover .program-icon {
  transform: scale(1.1);
  box-shadow:
    0 12px 28px rgba(2, 5, 16, 0.6),
    0 2px 5px rgba(0, 0, 0, 0.3),
    0 0 20px var(--icon-glow, rgba(100, 160, 255, 0.2)),
    inset 0 1px 0 rgba(255, 255, 255, 0.36),
    inset 0 -1px 0 rgba(0, 0, 0, 0.18);
}

.program-icon svg {
  width: 24px;
  height: 24px;
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.35));
}

/* Individual app icon colors — 3-stop gradients for depth */
#tabChatBtn .program-icon {
  background: linear-gradient(145deg, #78c8ff 0%, #3a88e0 50%, #2660b8 100%);
  --icon-glow: rgba(60, 140, 255, 0.3);
}
#tabDocumentsBtn .program-icon {
  background: linear-gradient(145deg, #ffd87a 0%, #d4a030 50%, #b08020 100%);
  --icon-glow: rgba(220, 170, 50, 0.3);
}
#tabMediaBtn .program-icon {
  background: linear-gradient(145deg, #f08ce8 0%, #c050c8 50%, #9838a8 100%);
  --icon-glow: rgba(200, 80, 220, 0.3);
}
#tabMailBtn .program-icon {
  background: linear-gradient(145deg, #70daff 0%, #32a8d8 50%, #2280a8 100%);
  --icon-glow: rgba(50, 180, 255, 0.3);
}
#tabContactsBtn .program-icon {
  background: linear-gradient(145deg, #88e898 0%, #40c060 50%, #289848 100%);
  --icon-glow: rgba(60, 200, 90, 0.3);
}
#tabCalendarBtn .program-icon {
  background: linear-gradient(145deg, #ff8e7e 0%, #e04838 50%, #b83028 100%);
  --icon-glow: rgba(230, 70, 50, 0.3);
}
#tabAccountBtn .program-icon {
  background: linear-gradient(145deg, #b898ff 0%, #7858e0 50%, #5840b8 100%);
  --icon-glow: rgba(120, 90, 230, 0.3);
}
#tabPdfToolsBtn .program-icon {
  background: linear-gradient(145deg, #ffaa6e 0%, #d87030 50%, #b05020 100%);
  --icon-glow: rgba(220, 110, 40, 0.3);
}
#tabSettingsBtn .program-icon {
  background: linear-gradient(145deg, #98c0ff 0%, #6088d0 50%, #4468a8 100%);
  --icon-glow: rgba(90, 130, 210, 0.3);
}
#orbOpenFocusBtn .program-icon {
  background: linear-gradient(145deg, #ffe080 0%, #d0a828 50%, #a88018 100%);
  --icon-glow: rgba(210, 170, 40, 0.3);
}
#tabOfficeBtn .program-icon {
  background: linear-gradient(145deg, #70b8ff 0%, #3878d0 50%, #2858a8 100%);
  --icon-glow: rgba(50, 120, 220, 0.3);
}

.launcher-footer {
  display: flex;
  justify-content: flex-end;
}

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 2100;
  background: rgba(0, 0, 0, 0.62);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.modal-card {
  width: min(540px, 100%);
  border-radius: 18px;
  border: 1px solid var(--acrylic-border);
  border-top-color: rgba(255, 255, 255, 0.15);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, transparent 40%),
    color-mix(in srgb, var(--bg-panel) 78%, transparent);
  box-shadow:
    var(--shadow-depth-3),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  padding: 1rem;
  backdrop-filter: blur(24px) saturate(140%);
}

.modal-title {
  margin: 0;
}

.modal-message {
  color: var(--txt-dim);
  line-height: 1.45;
  white-space: pre-wrap;
}

.modal-input-wrap {
  margin-top: 0.82rem;
}

.modal-input-wrap label {
  font-size: 0.86rem;
  color: var(--txt-dim);
  margin-bottom: 0.35rem;
}

.modal-input-wrap input,
.modal-input-wrap select,
.modal-input-wrap textarea {
  width: 100%;
}

.modal-actions {
  margin-top: 0.72rem;
  display: flex;
  justify-content: flex-end;
  gap: 0.55rem;
}

.module-checklist {
  margin-top: 0.72rem;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  padding: 0.6rem 0.7rem;
  max-height: 280px;
  overflow: auto;
  display: grid;
  gap: 0.45rem;
}

.module-check-item {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--txt-main);
}

/* Loading spinner utility */
.loading-spinner {
  display: inline-block;
  width: 1.2rem;
  height: 1.2rem;
  border: 2px solid color-mix(in srgb, var(--line) 60%, transparent);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 600ms linear infinite;
}

.loading-spinner.sm {
  width: 0.9rem;
  height: 0.9rem;
  border-width: 1.5px;
}

.loading-spinner.lg {
  width: 2rem;
  height: 2rem;
  border-width: 2.5px;
}

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

/* Button loading state */
.btn.loading {
  pointer-events: none;
  opacity: 0.72;
  position: relative;
}

.btn.loading::after {
  content: '';
  display: inline-block;
  width: 0.9rem;
  height: 0.9rem;
  border: 2px solid color-mix(in srgb, currentColor 30%, transparent);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: spin 600ms linear infinite;
  margin-left: 0.4rem;
  vertical-align: middle;
}

/* Empty state placeholder */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 2rem 1rem;
  color: var(--txt-dim);
  text-align: center;
}

.empty-state-icon {
  font-size: 2.2rem;
  opacity: 0.4;
}

.empty-state-text {
  font-size: 0.88rem;
  max-width: 280px;
}

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

.hidden {
  display: none !important;
}

.visible {
  display: block;
}

@media (max-width: 1024px) {
  .os-shell.chat-sidebar-open .chat-pane {
    padding-left: 0.72rem;
  }

  .chat-sidebar {
    width: min(82vw, 310px);
  }

  .connections-form {
    grid-template-columns: 1fr;
  }

  .connection-main-grid {
    grid-template-columns: 1fr 1fr;
  }

  .connection-advanced-grid {
    grid-template-columns: 1fr;
  }

  .model-preset-bar {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .model-preset-manage .model-preset-actions {
    position: static;
    min-width: 0;
    box-shadow: none;
  }

  .dms-form {
    grid-template-columns: 1fr;
  }

  .users-create-form {
    grid-template-columns: 1fr 1fr;
  }

  .account-form,
  .account-focus-form,
  .workspace-upload-form,
  .workspace-admin-form,
  .workspace-policy-form {
    grid-template-columns: 1fr;
  }

  .memory-dual-fields {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .connection-main-grid {
    grid-template-columns: 1fr;
  }

  .chat-sidebar-toggle {
    left: 4px;
    top: 6px;
    width: 44px;
    height: 44px;
  }

  .chat-sidebar {
    left: 0;
    top: 0;
    bottom: 0;
    width: 100vw;
    max-width: 100vw;
    border-radius: 0;
    border: none;
    z-index: 80;
  }

  .chat-sidebar.open {
    box-shadow: none;
  }

  /* Reduce heavy effects on mobile — keep 3D shadows, lighter blur */
  .msg {
    backdrop-filter: blur(12px) saturate(120%);
    box-shadow: var(--shadow-depth-1), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  }

  .msg:hover {
    box-shadow: var(--shadow-depth-1), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  }

  .chat-input-wrap {
    backdrop-filter: blur(12px) saturate(120%);
    box-shadow: var(--shadow-depth-1), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  }

  .pane {
    padding: 0.55rem 0.6rem 0.85rem;
  }

  .chat-input-actions {
    flex-direction: row;
    align-items: center;
  }

  .chat-input-wrap button {
    width: auto;
    min-width: 0;
  }

  .chat-tools-menu {
    right: 0;
    min-width: min(220px, 88vw);
  }

  .chat-attachment-item {
    max-width: 160px;
  }
  .media-browser {
    width: 96vw;
    max-height: 75vh;
  }
  .media-browser-body {
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  }

  .messages {
    gap: 0.5rem;
    padding: 0.2rem 0.15rem;
  }

  .msg {
    padding: 0.5rem 0.6rem;
    border-radius: 12px;
  }

  .orb-btn {
    width: 58px;
    height: 58px;
    right: 12px;
    bottom: 12px;
  }

  .orb-core {
    width: 16px;
    height: 16px;
  }

  /* Simplify orb animations on mobile — keep galaxy spin but slower */
  .orb-btn::before {
    animation: none;
    opacity: 0.3;
  }

  .orb-ribbon-a {
    animation: galaxySpinDepthA 30s linear infinite !important;
  }
  .orb-ribbon-b {
    animation: galaxySpinDepthB 36s linear infinite reverse !important;
  }

  .orb-ribbon-c,
  .orb-ribbon-d {
    display: none;
  }

  .bg-orb {
    display: none;
  }

  .launcher-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 0.55rem;
    padding: 0 0.15rem;
  }

  .orb-focus-line {
    grid-template-columns: 1fr;
  }

  .media-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .media-toolbar select {
    width: 100%;
  }

  .media-grid {
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 0.4rem;
  }

  .program-btn {
    min-height: 82px;
    border-radius: 14px;
    padding: 0.55rem 0.4rem 0.45rem;
    font-size: 0.74rem;
    backdrop-filter: blur(12px);
  }

  .program-icon {
    width: 36px;
    height: 36px;
    border-radius: 11px;
  }

  .program-icon svg {
    width: 19px;
    height: 19px;
  }

  /* Touch-friendly controls: min 44px targets */
  .icon-btn {
    width: 44px;
    height: 44px;
  }

  .chat-thread-menu-trigger {
    width: 36px;
    height: 36px;
    opacity: 1;
    pointer-events: auto;
  }

  .subtab-btn {
    min-height: 44px;
    padding: 0.5rem 0.8rem;
  }

  .chat-thread-main {
    padding: 0.36rem 0.42rem;
    min-height: 2.6rem;
  }

  /* Modal full-width on mobile */
  .modal-card {
    width: 100%;
    max-height: 90dvh;
    overflow-y: auto;
    border-radius: 14px;
  }

  .login-panel {
    padding: 1rem;
    border-radius: 14px;
  }

  /* Account form mobile */
  .account-form {
    grid-template-columns: 1fr;
  }

  .memory-dual-fields {
    grid-template-columns: 1fr;
  }

  .profile-card-hint {
    display: none;
  }

  .profile-card-toggle {
    padding: 0.6rem 0.7rem;
  }

  .users-create-form {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 460px) {
  .launcher-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 0.45rem;
  }

  .program-btn {
    min-height: 76px;
    font-size: 0.7rem;
    padding: 0.5rem 0.3rem 0.4rem;
  }

  .program-icon {
    width: 32px;
    height: 32px;
    border-radius: 10px;
  }

  .orb-overlay {
    padding: 0.5rem;
  }

  .launcher-cloud {
    width: 100%;
  }

  .orb-focus-line {
    padding: 0.5rem;
  }

  .pane {
    padding: 0.4rem 0.45rem 0.7rem;
  }
}

/* Calendar grid */
/* ------------------------------------------------------------------ */
/* Smart Calendar                                                       */
/* ------------------------------------------------------------------ */
.calendar-pane { padding: 0 !important; overflow: hidden; }
.cal-layout { display: flex; height: 100%; min-height: 0; }
.cal-grid-area {
  flex: 1; display: flex; flex-direction: column; min-width: 0;
  padding: 0.75rem; overflow-y: auto;
}
.cal-sidebar {
  width: 300px; min-width: 260px; max-width: 360px;
  border-left: 1px solid var(--border); display: flex; flex-direction: column;
  overflow-y: auto; padding: 0.75rem;
}
/* Toolbar */
.cal-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.25rem;
}
.cal-nav { display: flex; align-items: center; gap: 0.25rem; }
.cal-month-label {
  font-size: 1.1rem; font-weight: 600; margin: 0; min-width: 10rem; text-align: center;
}
.cal-today-btn {
  background: none; border: 1px solid var(--border); color: var(--text);
  padding: 3px 10px; border-radius: 6px; font-size: 0.75rem; cursor: pointer;
  margin-left: 0.25rem;
}
.cal-today-btn:hover { background: var(--hover-bg, rgba(255,255,255,.06)); }
.cal-toolbar-right { display: flex; align-items: center; gap: 0.5rem; }
.cal-view-toggle {
  display: flex; border: 1px solid var(--border); border-radius: 6px; overflow: hidden;
}
.cal-view-btn {
  background: none; border: none; color: var(--text-secondary);
  padding: 3px 12px; font-size: 0.75rem; cursor: pointer; transition: all .12s;
}
.cal-view-btn.active { background: var(--accent, #4A90D9); color: #fff; }
.cal-view-btn:hover:not(.active) { background: var(--hover-bg, rgba(255,255,255,.06)); }
.cal-new-btn {
  display: flex; align-items: center; gap: 0.35rem;
  background: var(--accent, #4A90D9); color: #fff; border: none;
  padding: 5px 12px; border-radius: 6px; font-size: 0.8rem; cursor: pointer;
}
.cal-new-btn:hover { filter: brightness(1.1); }
.cal-status { font-size: 0.7rem; color: var(--text-secondary); margin: 0 0 0.35rem; }
/* Month grid */
.cal-grid {
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: 1px; flex: 1;
}
.cal-cell {
  border: 1px solid var(--border); border-radius: 4px;
  min-height: 5.5rem; padding: 0.25rem; cursor: pointer;
  transition: background .1s; display: flex; flex-direction: column;
  overflow: hidden;
}
.cal-cell:hover { background: var(--hover-bg, rgba(255,255,255,.04)); }
.cal-cell-hdr {
  font-weight: 600; font-size: 0.7rem; text-align: center;
  padding: 0.2rem; color: var(--text-secondary); cursor: default;
}
.cal-cell-hdr.cal-weekend { color: var(--accent, #4A90D9); opacity: .7; }
.cal-day-num {
  font-size: 0.75rem; font-weight: 500; width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; margin-bottom: 2px; flex-shrink: 0;
}
.cal-cell.cal-today .cal-day-num {
  background: var(--accent, #4A90D9); color: #fff; font-weight: 700;
}
.cal-cell.cal-selected { background: var(--accent-bg, rgba(74,144,217,.1)); }
.cal-cell.cal-muted { opacity: .3; }
.cal-cell.cal-muted:hover { opacity: .45; }
/* Event chips in cells */
.cal-chip {
  font-size: 0.65rem; padding: 1px 4px; border-radius: 3px;
  margin-bottom: 1px; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; line-height: 1.4;
}
.cal-chip-event { background: rgba(74,144,217,.2); color: var(--text); }
.cal-chip-birthday { background: rgba(231,76,60,.15); color: #e74c3c; }
.cal-chip-more {
  font-size: 0.6rem; color: var(--text-secondary); text-align: center;
  padding: 0; cursor: pointer;
}
/* Sidebar welcome */
.cal-sidebar-welcome {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; height: 100%; gap: 0.5rem; color: var(--text-secondary);
}
.cal-sidebar-welcome p { font-size: 0.85rem; margin: 0; }
/* Day panel */
.cal-day-label {
  font-size: 0.95rem; font-weight: 600; margin: 0 0 0.75rem;
  padding-bottom: 0.5rem; border-bottom: 1px solid var(--border);
}
.cal-day-list { list-style: none; margin: 0; padding: 0; }
.cal-day-item {
  display: flex; align-items: flex-start; gap: 0.5rem;
  padding: 0.5rem 0; border-bottom: 1px solid var(--border); cursor: pointer;
  transition: background .1s;
}
.cal-day-item:hover { background: var(--hover-bg, rgba(255,255,255,.04)); border-radius: 4px; }
.cal-day-item:last-child { border-bottom: none; }
.cal-day-time {
  font-size: 0.75rem; color: var(--accent, #4A90D9); font-weight: 600;
  min-width: 40px; flex-shrink: 0; padding-top: 1px;
}
.cal-day-time.cal-allday { color: var(--text-secondary); }
.cal-day-info { flex: 1; min-width: 0; }
.cal-day-title { font-size: 0.85rem; font-weight: 500; }
.cal-day-location { font-size: 0.7rem; color: var(--text-secondary); margin-top: 1px; }
.cal-day-item.cal-birthday .cal-day-title { color: #e74c3c; }
.cal-day-item.cal-birthday .cal-day-time { color: #e74c3c; }
/* Event detail */
.cal-event-title {
  font-size: 1rem; font-weight: 600; margin: 0 0 0.75rem;
  padding-bottom: 0.5rem; border-bottom: 1px solid var(--border);
}
.cal-event-body { font-size: 0.85rem; }
.cal-event-body p { margin: 0.3rem 0; }
.cal-event-body .cal-detail-label { color: var(--text-secondary); font-size: 0.75rem; }
.cal-event-actions { display: flex; gap: 0.35rem; margin-top: 1rem; }
/* Form */
.cal-form-title { font-size: 0.95rem; font-weight: 600; margin: 0 0 0.75rem; }
.cal-form { display: flex; flex-direction: column; }
.cal-form form { display: flex; flex-direction: column; gap: 0.5rem; }
.cal-form-row { display: flex; gap: 0.5rem; }
.cal-form-label {
  display: flex; flex-direction: column; font-size: 0.7rem;
  color: var(--text-secondary); flex: 1;
}
.cal-form-label input { margin-top: 2px; }
.cal-form-actions { display: flex; gap: 0.5rem; margin-top: 0.25rem; }
/* Agenda view */
.cal-agenda { flex: 1; overflow-y: auto; }
.cal-agenda-list { display: flex; flex-direction: column; }
.cal-agenda-group-header {
  font-size: 0.75rem; font-weight: 600; color: var(--text-secondary);
  padding: 0.5rem 0 0.25rem; border-bottom: 1px solid var(--border);
  text-transform: uppercase; letter-spacing: 0.04em;
  position: sticky; top: 0; background: var(--bg);
}
.cal-agenda-item {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.5rem 0.25rem; border-bottom: 1px solid var(--border);
  cursor: pointer; transition: background .1s;
}
.cal-agenda-item:hover { background: var(--hover-bg, rgba(255,255,255,.04)); border-radius: 4px; }
.cal-agenda-time { font-size: 0.75rem; color: var(--accent, #4A90D9); min-width: 40px; font-weight: 500; }
.cal-agenda-title { flex: 1; font-size: 0.85rem; }
.cal-agenda-location { font-size: 0.7rem; color: var(--text-secondary); }
.cal-agenda-item.cal-birthday .cal-agenda-title { color: #e74c3c; }
.cal-agenda-item.cal-birthday .cal-agenda-time { color: #e74c3c; }
/* Mobile */
@media (max-width: 768px) {
  .cal-layout { flex-direction: column; }
  .cal-grid-area { flex: none; height: 55%; }
  .cal-sidebar { width: 100%; max-width: none; height: 45%; border-left: none; border-top: 1px solid var(--border); }
  .cal-cell { min-height: 3.5rem; }
  .cal-chip { font-size: 0.55rem; }
  .cal-toolbar { flex-direction: column; align-items: flex-start; }
}
/* Calendar suggestion cards (in chat) */
.cal-suggest-card {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.6rem 0.75rem; margin-top: 0.5rem;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg-secondary, var(--bg));
  transition: all .15s; animation: lcFadeIn .2s ease;
}
.cal-suggest-card.cal-suggest-accepted {
  border-color: rgba(46, 204, 113, .3); background: rgba(46, 204, 113, .06);
}
.cal-suggest-icon { flex-shrink: 0; color: var(--accent, #4A90D9); }
.cal-suggest-info { flex: 1; min-width: 0; }
.cal-suggest-title { font-size: 0.85rem; font-weight: 600; }
.cal-suggest-meta { font-size: 0.75rem; color: var(--text-secondary); margin-top: 2px; }
.cal-suggest-actions { display: flex; gap: 0.35rem; flex-shrink: 0; }
.cal-suggest-accept {
  background: var(--accent, #4A90D9); color: #fff; border: none;
  padding: 4px 12px; border-radius: 6px; font-size: 0.75rem;
  cursor: pointer; transition: all .12s;
}
.cal-suggest-accept:hover { filter: brightness(1.15); }
.cal-suggest-accept:disabled { opacity: .6; cursor: default; }
.cal-suggest-dismiss {
  background: none; border: 1px solid var(--border); color: var(--text-secondary);
  padding: 4px 8px; border-radius: 6px; font-size: 0.75rem; cursor: pointer;
}
.cal-suggest-dismiss:hover { color: #e74c3c; border-color: #e74c3c; }
.cal-suggest-done { color: #2ecc71; font-size: 0.75rem; font-weight: 500; }
/* ------------------------------------------------------------------ */
/* Living Contacts                                                     */
/* ------------------------------------------------------------------ */
.contacts-pane { padding: 0 !important; overflow: hidden; }
.lc-layout {
  display: flex; height: 100%; min-height: 0;
}
.lc-sidebar {
  width: 300px; min-width: 240px; max-width: 360px;
  border-right: 1px solid var(--border); display: flex; flex-direction: column;
  background: var(--bg-secondary, var(--bg));
}
.lc-sidebar-header { padding: 0.75rem; border-bottom: 1px solid var(--border); }
.lc-search-row { display: flex; gap: 0.5rem; align-items: center; }
.lc-search {
  flex: 1; padding: 0.5rem 0.75rem; border-radius: 8px;
  border: 1px solid var(--border); background: var(--bg);
  color: var(--text); font-size: 0.875rem; outline: none;
}
.lc-search:focus { border-color: var(--accent, #4A90D9); }
.lc-status { font-size: 0.7rem; color: var(--text-secondary); margin: 0.35rem 0 0; }
.lc-btn-icon {
  background: none; border: none; color: var(--text-secondary);
  cursor: pointer; padding: 6px; border-radius: 6px; display: flex;
  align-items: center; justify-content: center; transition: all .15s;
}
.lc-btn-icon:hover { background: var(--hover-bg, rgba(255,255,255,.08)); color: var(--text); }
.lc-btn-danger:hover { color: #e74c3c; }
.lc-list-wrap { flex: 1; overflow-y: auto; }
.lc-list {
  list-style: none; margin: 0; padding: 0;
}
.lc-list-item {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.6rem 0.75rem; cursor: pointer; transition: background .12s;
  border-bottom: 1px solid var(--border);
}
.lc-list-item:hover { background: var(--hover-bg, rgba(255,255,255,.05)); }
.lc-list-item.active { background: var(--accent-bg, rgba(74,144,217,.15)); }
.lc-list-item.pinned .lc-item-name::before {
  content: ''; display: inline-block; width: 6px; height: 6px;
  background: var(--accent, #4A90D9); border-radius: 50%; margin-right: 6px;
  vertical-align: middle;
}
.lc-avatar {
  width: 36px; height: 36px; border-radius: 50%; display: flex;
  align-items: center; justify-content: center; font-size: 0.8rem;
  font-weight: 600; color: #fff; flex-shrink: 0;
  text-transform: uppercase; letter-spacing: 0.03em;
}
.lc-avatar-lg {
  width: 56px; height: 56px; border-radius: 50%; display: flex;
  align-items: center; justify-content: center; font-size: 1.2rem;
  font-weight: 600; color: #fff; flex-shrink: 0;
  text-transform: uppercase;
}
.lc-avatar-new {
  background: var(--border) !important; color: var(--text-secondary) !important;
  font-size: 1.5rem;
}
.lc-item-info { flex: 1; min-width: 0; }
.lc-item-name {
  font-size: 0.875rem; font-weight: 500; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lc-item-sub {
  font-size: 0.75rem; color: var(--text-secondary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px;
}
.lc-empty {
  padding: 2rem; text-align: center; color: var(--text-secondary); font-size: 0.85rem;
}
/* Main / Detail */
.lc-main {
  flex: 1; overflow-y: auto; padding: 1.5rem; min-width: 0;
}
.lc-welcome {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; height: 100%; gap: 0.75rem; color: var(--text-secondary);
}
.lc-welcome h3 { font-size: 1.1rem; font-weight: 500; margin: 0; color: var(--text); }
.lc-welcome p { font-size: 0.85rem; margin: 0; }
.lc-detail-header {
  display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem;
}
.lc-header-info { flex: 1; min-width: 0; }
.lc-name {
  font-size: 1.3rem; font-weight: 600; margin: 0;
  outline: none; border-bottom: 2px solid transparent;
  transition: border-color .15s; padding-bottom: 2px;
}
.lc-name[contenteditable="true"] {
  border-bottom-color: var(--accent, #4A90D9); cursor: text;
}
.lc-subtitle {
  font-size: 0.8rem; color: var(--text-secondary); margin: 2px 0 0;
}
.lc-header-actions { display: flex; gap: 0.25rem; }
/* Fact groups */
.lc-fact-groups { display: flex; flex-direction: column; gap: 0.25rem; }
.lc-fact-group { margin-bottom: 0.5rem; }
.lc-fact-group-header {
  display: flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0;
  font-size: 0.7rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--text-secondary);
}
.lc-fact-group-icon { display: flex; align-items: center; }
.lc-fact-group-icon svg { width: 14px; height: 14px; }
.lc-fact-item {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.45rem 0.5rem; border-radius: 6px; transition: background .12s;
  margin-left: 1.5rem;
}
.lc-fact-item:hover { background: var(--hover-bg, rgba(255,255,255,.04)); }
.lc-fact-label {
  font-size: 0.75rem; color: var(--text-secondary); min-width: 70px; flex-shrink: 0;
}
.lc-fact-value {
  font-size: 0.875rem; color: var(--text); flex: 1; min-width: 0;
  word-break: break-word;
}
.lc-fact-value a { color: var(--accent, #4A90D9); text-decoration: none; }
.lc-fact-value a:hover { text-decoration: underline; }
.lc-fact-source {
  font-size: 0.65rem; color: var(--text-secondary); opacity: .6;
  flex-shrink: 0;
}
.lc-fact-actions {
  display: flex; gap: 2px; opacity: 0; transition: opacity .15s;
}
.lc-fact-item:hover .lc-fact-actions { opacity: 1; }
.lc-fact-action-btn {
  background: none; border: none; color: var(--text-secondary);
  cursor: pointer; padding: 3px; border-radius: 4px; display: flex;
}
.lc-fact-action-btn:hover { color: var(--text); background: rgba(255,255,255,.08); }
.lc-fact-action-btn.danger:hover { color: #e74c3c; }
/* Inline edit */
.lc-fact-edit-input {
  flex: 1; background: var(--bg); border: 1px solid var(--accent, #4A90D9);
  border-radius: 4px; padding: 0.2rem 0.4rem; color: var(--text);
  font-size: 0.875rem; outline: none;
}
/* Add fact */
.lc-add-fact-btn {
  background: none; border: 1px dashed var(--border); color: var(--text-secondary);
  padding: 0.5rem 1rem; border-radius: 8px; cursor: pointer; font-size: 0.8rem;
  margin-top: 1rem; width: 100%; transition: all .15s;
}
.lc-add-fact-btn:hover { border-color: var(--accent, #4A90D9); color: var(--text); }
.lc-add-fact-form {
  margin-top: 0.75rem; padding: 0.75rem; border: 1px solid var(--border);
  border-radius: 8px; display: flex; flex-direction: column; gap: 0.5rem;
  background: var(--bg-secondary, var(--bg));
}
.lc-add-fact-actions { display: flex; gap: 0.5rem; }
.lc-input {
  padding: 0.4rem 0.6rem; border-radius: 6px; border: 1px solid var(--border);
  background: var(--bg); color: var(--text); font-size: 0.85rem; outline: none;
}
.lc-input:focus { border-color: var(--accent, #4A90D9); }
.btn-sm { padding: 0.3rem 0.8rem; font-size: 0.8rem; }
/* Create form */
.lc-create-form {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; height: 100%; gap: 1rem;
}
.lc-create-header { display: flex; align-items: center; gap: 1rem; }
.lc-name-input {
  font-size: 1.3rem; font-weight: 600; background: none;
  border: none; border-bottom: 2px solid var(--accent, #4A90D9);
  color: var(--text); outline: none; padding: 0.2rem 0; min-width: 250px;
}
.lc-create-hint { font-size: 0.8rem; color: var(--text-secondary); margin: 0; }
.lc-create-actions { display: flex; gap: 0.5rem; }
.lc-error {
  position: absolute; bottom: 0.5rem; left: 0.5rem; right: 0.5rem;
  color: #e74c3c; font-size: 0.8rem; text-align: center;
}
.lc-fact-verified { opacity: .7; }
/* Alert bar (sidebar) */
.lc-alert-bar {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.4rem 0.75rem; font-size: 0.75rem;
  background: rgba(243, 156, 18, .12); border-bottom: 1px solid var(--border);
  color: var(--text);
}
.lc-alert-bar span { flex: 1; }
.lc-alert-action {
  background: none; border: 1px solid rgba(243, 156, 18, .4);
  color: var(--text); padding: 2px 8px; border-radius: 4px;
  font-size: 0.7rem; cursor: pointer; white-space: nowrap;
}
.lc-alert-action:hover { background: rgba(243, 156, 18, .2); }
/* Panels (merge / review) */
.lc-panel-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1rem;
}
.lc-panel-header h3 { margin: 0; font-size: 1rem; font-weight: 600; }
.lc-merge-panel, .lc-review-panel {
  padding: 0; animation: lcFadeIn .2s ease;
}
@keyframes lcFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.lc-merge-item, .lc-review-item {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.6rem 0; border-bottom: 1px solid var(--border);
}
.lc-merge-item:last-child, .lc-review-item:last-child { border-bottom: none; }
.lc-merge-info { flex: 1; min-width: 0; }
.lc-merge-names { font-size: 0.85rem; font-weight: 500; }
.lc-merge-reason { font-size: 0.7rem; color: var(--text-secondary); margin-top: 2px; }
.lc-merge-actions { display: flex; gap: 0.35rem; flex-shrink: 0; }
.lc-merge-btn {
  padding: 3px 10px; border-radius: 4px; font-size: 0.75rem;
  border: 1px solid var(--border); background: none; color: var(--text);
  cursor: pointer; transition: all .12s;
}
.lc-merge-btn.primary { border-color: var(--accent, #4A90D9); color: var(--accent, #4A90D9); }
.lc-merge-btn.primary:hover { background: var(--accent, #4A90D9); color: #fff; }
.lc-merge-btn:hover { background: var(--hover-bg, rgba(255,255,255,.06)); }
/* Review items */
.lc-review-fact-type { font-size: 0.65rem; text-transform: uppercase; color: var(--text-secondary); min-width: 55px; }
.lc-review-value { flex: 1; font-size: 0.85rem; }
.lc-review-contact { font-size: 0.7rem; color: var(--text-secondary); }
.lc-review-confidence {
  font-size: 0.65rem; padding: 1px 6px; border-radius: 8px;
  background: rgba(243, 156, 18, .15); color: #f39c12;
}
.lc-review-actions { display: flex; gap: 0.25rem; }
.lc-verify-btn, .lc-reject-btn {
  padding: 3px 8px; border-radius: 4px; font-size: 0.7rem;
  border: none; cursor: pointer; transition: all .12s;
}
.lc-verify-btn { background: rgba(46, 204, 113, .15); color: #2ecc71; }
.lc-verify-btn:hover { background: #2ecc71; color: #fff; }
.lc-reject-btn { background: rgba(231, 76, 60, .1); color: #e74c3c; }
.lc-reject-btn:hover { background: #e74c3c; color: #fff; }
/* Stale indicator in list */
.lc-list-item.stale .lc-item-name { opacity: .55; }
.lc-list-item.stale .lc-item-sub::after {
  content: ' — veraltet?'; color: #f39c12; font-style: italic;
}
/* Confidence indicator on facts */
.lc-fact-item.unverified { border-left: 2px solid rgba(243, 156, 18, .5); padding-left: calc(0.5rem - 2px); }
.lc-fact-confidence {
  font-size: 0.6rem; padding: 0 5px; border-radius: 6px; margin-left: 4px;
  background: rgba(243, 156, 18, .12); color: #f39c12; white-space: nowrap;
}
/* Mobile */
@media (max-width: 640px) {
  .lc-layout { flex-direction: column; }
  .lc-sidebar { width: 100%; max-width: none; height: 45%; border-right: none; border-bottom: 1px solid var(--border); }
  .lc-main { height: 55%; }
  .lc-avatar-lg { width: 44px; height: 44px; font-size: 1rem; }
  .lc-name { font-size: 1.1rem; }
}

/* ------------------------------------------------------------------ */
/* PDF Tools                                                          */
/* ------------------------------------------------------------------ */

.pdf-tools-pane {
  padding: 0;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
}

.pdf-status-ok {
  color: var(--ok);
}

/* --- Toolbar --- */
.pdf-toolbar {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.35rem 0.6rem;
  background: var(--acrylic-bg);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line-soft);
  flex-wrap: wrap;
  min-height: 40px;
}

.pdf-toolbar-group {
  display: flex;
  align-items: center;
  gap: 0.2rem;
}

.pdf-toolbar-group + .pdf-toolbar-group {
  margin-left: 0.3rem;
  padding-left: 0.5rem;
  border-left: 1px solid color-mix(in srgb, var(--line) 40%, transparent);
}

.pdf-tb-btn {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: none;
  color: var(--txt);
  cursor: pointer;
  transition: background 80ms ease, border-color 80ms ease;
}

.pdf-tb-btn:hover:not(:disabled) {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
}

.pdf-tb-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.pdf-toolbar-filename {
  font-size: 0.8rem;
  color: var(--txt-dim);
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pdf-toolbar-pageinfo,
.pdf-toolbar-zoom {
  font-size: 0.75rem;
  color: var(--txt-dim);
  min-width: 3.5em;
  text-align: center;
  user-select: none;
}

.pdf-toolbar-nav {
  white-space: nowrap;
}

/* --- Operations Dropdown --- */
.pdf-ops-dropdown {
  position: relative;
}

.pdf-ops-menu {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 50;
  min-width: 180px;
  padding: 0.3rem 0;
  background: var(--acrylic-bg);
  backdrop-filter: blur(24px);
  border: 1px solid var(--acrylic-border);
  border-radius: 10px;
  box-shadow: var(--shadow-depth-2);
}

.pdf-ops-menu-item {
  display: block;
  width: 100%;
  padding: 0.45rem 0.8rem;
  border: none;
  background: none;
  color: var(--txt);
  text-align: left;
  font-size: 0.82rem;
  cursor: pointer;
  transition: background 60ms ease;
}

.pdf-ops-menu-item:hover {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}

/* --- Operation Bar --- */
.pdf-op-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.7rem;
  background: color-mix(in srgb, var(--accent) 8%, var(--bg-panel));
  border-bottom: 1px solid var(--line-soft);
  flex-wrap: wrap;
}

.pdf-op-bar-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--accent-strong);
}

.pdf-op-bar-params {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.pdf-op-bar .pdf-param-group {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  margin: 0;
}

.pdf-op-bar .pdf-param-group label {
  display: inline;
  margin: 0;
  font-size: 0.78rem;
  color: var(--txt-dim);
}

.pdf-op-bar .pdf-param-group input,
.pdf-op-bar .pdf-param-group select {
  width: auto;
  max-width: 120px;
  font-size: 0.78rem;
  padding: 0.2rem 0.4rem;
}

.pdf-op-bar .pdf-run-btn {
  margin: 0;
  padding: 0.25rem 0.7rem;
  font-size: 0.78rem;
}

.pdf-op-bar-close {
  border: none;
  background: none;
  color: var(--txt-dim);
  font-size: 1.1rem;
  cursor: pointer;
  margin-left: auto;
  padding: 0 4px;
}

.pdf-op-bar-close:hover {
  color: var(--txt);
}

.pdf-op-bar .error,
.pdf-op-bar .muted {
  font-size: 0.78rem;
  margin: 0;
}

/* --- PDF Viewer --- */
.pdf-viewer-container {
  position: relative;
  overflow: auto;
  background: color-mix(in srgb, #1a1a2e 80%, var(--bg-panel));
}

.pdf-viewer-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  height: 100%;
  cursor: pointer;
  transition: background 100ms ease;
}

.pdf-viewer-dropzone:hover,
.pdf-viewer-dropzone.dragover {
  background: color-mix(in srgb, var(--accent) 6%, transparent);
}

.pdf-viewer-dropzone .pdf-dropzone-text {
  margin: 0.75rem 0;
  color: var(--txt-dim);
  font-size: 0.9rem;
}

.pdf-viewer-pages {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 16px;
}

.pdf-viewer-pages canvas {
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.35);
  border-radius: 2px;
  max-width: 100%;
}

/* --- File Strip (multi-file) --- */
.pdf-file-strip {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.7rem;
  background: var(--bg-layer);
  border-top: 1px solid var(--line-soft);
  overflow-x: auto;
}

.pdf-file-chip {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.5rem;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: color-mix(in srgb, var(--bg-panel) 72%, transparent);
  font-size: 0.76rem;
  color: var(--txt);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 80ms ease, background 80ms ease;
}

.pdf-file-chip:hover {
  border-color: color-mix(in srgb, var(--accent) 50%, var(--line));
}

.pdf-file-chip.active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, var(--bg-panel));
}

.pdf-file-chip-remove {
  border: none;
  background: none;
  color: var(--txt-dim);
  font-size: 0.9rem;
  cursor: pointer;
  padding: 0 2px;
  line-height: 1;
}

.pdf-file-chip-remove:hover {
  color: var(--error);
}

.pdf-file-chip.result {
  border-color: color-mix(in srgb, #4caf50 40%, var(--line-soft));
}

.pdf-file-chip.result.active {
  border-color: #4caf50;
  background: color-mix(in srgb, #4caf50 14%, var(--bg-panel));
}

.pdf-file-chip.result:hover {
  border-color: color-mix(in srgb, #4caf50 60%, var(--line));
}

.pdf-file-chip-result-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4caf50;
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .pdf-toolbar {
    padding: 0.25rem 0.4rem;
  }
  .pdf-toolbar-filename {
    max-width: 100px;
  }
}

/* ------------------------------------------------------------------ */
/* PDF Chat Sidebar                                                     */
/* ------------------------------------------------------------------ */

.pdf-chat-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(380px, 40vw);
  border-left: 1px solid var(--acrylic-border);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, transparent 40%),
    var(--acrylic-bg);
  backdrop-filter: blur(24px) saturate(140%);
  box-shadow:
    -4px 0 20px rgba(0, 0, 0, 0.25),
    inset 1px 0 0 rgba(255, 255, 255, 0.06);
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  z-index: 200;
  transform: translateX(100%);
  opacity: 0;
  pointer-events: none;
  transition: transform 180ms cubic-bezier(.4,0,.2,1), opacity 140ms ease;
}

.pdf-chat-panel.open {
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
}

.pdf-chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.65rem 0.8rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.pdf-chat-title {
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--txt);
}

.pdf-chat-close {
  border: none;
  background: none;
  color: var(--txt-dim);
  font-size: 1.3rem;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
  transition: color 80ms ease;
}

.pdf-chat-close:hover {
  color: var(--txt);
}

.pdf-chat-context {
  padding: 0 0.8rem;
  font-size: 0.76rem;
  color: var(--txt-dim);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  max-height: 3.6rem;
  overflow: hidden;
}

.pdf-chat-context:empty {
  display: none;
}

.pdf-chat-context .pdf-chat-ctx-item {
  padding: 0.35rem 0;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.pdf-chat-ctx-icon {
  opacity: 0.6;
}

.pdf-chat-messages {
  overflow-y: auto;
  padding: 0.6rem 0.7rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  scroll-behavior: smooth;
  overscroll-behavior: contain;
}

.pdf-chat-msg {
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 0.5rem 0.65rem;
  font-size: 0.84rem;
  line-height: 1.48;
  word-break: break-word;
  max-width: 92%;
  backdrop-filter: blur(8px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.pdf-chat-msg-user {
  align-self: flex-end;
  background: color-mix(in srgb, #274b86 50%, transparent);
  border-top-color: rgba(255, 255, 255, 0.1);
}

.pdf-chat-msg-assistant {
  align-self: flex-start;
  background: color-mix(in srgb, #1d2f63 50%, transparent);
  border-top-color: rgba(255, 255, 255, 0.08);
  white-space: pre-wrap;
}

.pdf-chat-input-area {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.5rem;
  padding: 0.6rem 0.7rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  align-items: end;
}

.pdf-chat-input {
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: color-mix(in srgb, var(--bg-layer) 70%, transparent);
  color: var(--txt);
  font: inherit;
  font-size: 0.84rem;
  padding: 0.45rem 0.6rem;
  resize: none;
  min-height: 2.2rem;
  max-height: 6rem;
}

.pdf-chat-input:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--accent) 60%, var(--line));
}

.pdf-chat-send {
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 10px;
  background: linear-gradient(140deg, var(--accent-strong), var(--accent));
  color: #001827;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: filter 80ms ease, transform 60ms ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.pdf-chat-send:hover {
  filter: brightness(1.1);
}

.pdf-chat-send:active {
  transform: scale(0.94);
}

.pdf-chat-send:disabled {
  opacity: 0.4;
  cursor: default;
  filter: none;
}

/* Toggle button */
.pdf-chat-toggle {
  position: fixed;
  right: 14px;
  bottom: 14px;
  width: 48px;
  height: 48px;
  border: 1px solid var(--acrylic-border);
  border-top-color: rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  background:
    linear-gradient(140deg, var(--accent-strong), var(--accent));
  color: #001827;
  cursor: pointer;
  display: grid;
  place-items: center;
  box-shadow: var(--shadow-depth-2);
  z-index: 201;
  transition: transform 120ms ease, box-shadow 120ms ease;
  display: none;
}

.pdf-tools-pane:not(.hidden) ~ .pdf-chat-toggle:not(.chat-panel-open) {
  /* shown via JS */
}

.pdf-chat-toggle:hover {
  transform: scale(1.08);
  box-shadow: var(--shadow-depth-3);
}

@media (max-width: 720px) {
  .pdf-chat-panel {
    width: 100%;
    border-left: none;
    border-top: 1px solid var(--acrylic-border);
  }

  .pdf-chat-toggle {
    right: 10px;
    bottom: 10px;
    width: 44px;
    height: 44px;
  }
}

/* ── Skills Panel ──────────────────────────────────────────── */
.skills-pane { max-width: 760px; margin: 0 auto; overflow-y: auto; }

.skills-list { display: flex; flex-direction: column; gap: 0.5rem; }

.skills-item {
  background: var(--surface-2, rgba(255,255,255,.04));
  border: 1px solid var(--border, rgba(255,255,255,.08));
  border-radius: 8px;
  padding: 0.65rem 0.85rem;
}
.skills-item-header {
  display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
}
.skills-item-desc {
  margin: 0.25rem 0 0; font-size: 0.88rem; opacity: 0.8;
}
.skills-item-meta {
  margin-top: 0.35rem; display: flex; gap: 0.75rem; flex-wrap: wrap;
  font-size: 0.82rem;
}
.skills-item-actions {
  margin-top: 0.5rem; display: flex; gap: 0.4rem;
}

.badge {
  display: inline-block; padding: 0.1rem 0.45rem; border-radius: 4px;
  font-size: 0.75rem; font-weight: 600; text-transform: uppercase;
  background: var(--surface-3, rgba(255,255,255,.08));
  color: var(--text-muted, rgba(255,255,255,.6));
}
.badge--low { background: rgba(46,160,67,.2); color: #3fb950; }
.badge--medium { background: rgba(210,153,34,.2); color: #d29922; }
.badge--high { background: rgba(218,54,51,.2); color: #da3633; }

/* ── Autoflow Toast Notifications ── */
.autoflow-toast-container {
  position: fixed; top: 1rem; right: 1rem; z-index: 10000;
  display: flex; flex-direction: column; gap: 0.5rem;
  pointer-events: none; max-width: 420px;
}
.autoflow-toast {
  pointer-events: auto;
  background: var(--surface-2, #1e1e2e);
  border: 1px solid var(--border, rgba(255,255,255,.12));
  border-radius: 10px; padding: 0.75rem 1rem;
  box-shadow: 0 4px 24px rgba(0,0,0,.4);
  animation: autoflow-toast-in 0.3s ease-out;
  cursor: pointer; transition: opacity 0.3s;
  max-width: 100%;
}
.autoflow-toast:hover { opacity: 0.85; }
.autoflow-toast--dringend { border-left: 4px solid #da3633; }
.autoflow-toast--wichtig  { border-left: 4px solid #d29922; }
.autoflow-toast--normal   { border-left: 4px solid #3fb950; }
.autoflow-toast--info     { border-left: 4px solid #58a6ff; }
.autoflow-toast__header {
  display: flex; align-items: center; gap: 0.5rem;
  font-weight: 600; font-size: 0.85rem;
  color: var(--text-primary, #e6edf3);
}
.autoflow-toast__badge {
  font-size: 0.65rem; text-transform: uppercase; padding: 0.1rem 0.4rem;
  border-radius: 3px; font-weight: 700;
}
.autoflow-toast__badge--dringend { background: rgba(218,54,51,.25); color: #da3633; }
.autoflow-toast__badge--wichtig  { background: rgba(210,153,34,.25); color: #d29922; }
.autoflow-toast__body {
  font-size: 0.8rem; color: var(--text-muted, rgba(255,255,255,.6));
  margin-top: 0.3rem; line-height: 1.4;
  overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
}
@keyframes autoflow-toast-in {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ══════════════════════════════════════════════════════════════════════
   Canvas Panel (right side of chat-pane, mirrors chat-sidebar pattern)
   ══════════════════════════════════════════════════════════════════════ */

.os-shell.canvas-panel-open .chat-pane {
  padding-right: min(40vw, 390px);
  transition: padding-right 160ms cubic-bezier(.4,0,.2,1), padding-left 120ms cubic-bezier(.4,0,.2,1);
}
/* Canvas fullscreen: remove top/bottom/left padding but KEEP right padding for panel */
.chat-pane:has(.canvas-zoom-mode) {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  padding-left: 0 !important;
  gap: 0 !important;
}
/* Fallback for browsers without :has() — toggled via JS */
.chat-pane.canvas-fullscreen-active {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  padding-left: 0 !important;
  gap: 0 !important;
}
/* Composer in canvas mode: slim bottom bar, hide attach buttons, bigger input */
.chat-pane.canvas-fullscreen-active .chat-composer {
  padding: 0.4rem 0.8rem;
  border-top: 1px solid var(--line-soft, rgba(255,255,255,0.06));
}
.chat-pane.canvas-fullscreen-active .chat-attach-btn,
.chat-pane.canvas-fullscreen-active .chat-media-browse-btn {
  display: none !important;
}
.chat-pane.canvas-fullscreen-active .chat-input-row {
  grid-template-columns: minmax(0, 1fr) auto;
}
.chat-pane.canvas-fullscreen-active .chat-input-row textarea {
  min-height: 42px;
  max-height: 120px !important;
}
.chat-pane.canvas-fullscreen-active .chat-attachment-strip {
  display: none !important;
}

.canvas-panel {
  position: fixed;
  right: 8px;
  top: 52px;
  bottom: 14px;
  width: min(calc(40vw - 16px), 380px);
  z-index: 70;
  border: 1px solid var(--acrylic-border, var(--line));
  border-top-color: rgba(255, 255, 255, 0.18);
  border-radius: 14px;
  background:
    radial-gradient(ellipse 60% 35% at 75% 12%, rgba(120, 160, 240, 0.05) 0%, transparent 70%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, transparent 40%),
    var(--acrylic-bg, var(--bg-panel));
  backdrop-filter: blur(24px) saturate(140%);
  box-shadow:
    0 4px 24px rgba(0,0,0,0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -1px 0 rgba(0, 0, 0, 0.14);
  transform: translateX(118%);
  opacity: 0;
  pointer-events: none;
  transition: transform 160ms cubic-bezier(.4,0,.2,1), opacity 140ms ease;
  will-change: transform, opacity;
  overflow: hidden;
}

.canvas-panel.open {
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
}

.canvas-panel-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

/* Header */
.canvas-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.65rem;
  border-bottom: 1px solid var(--line-soft, rgba(255,255,255,0.06));
  flex-shrink: 0;
}
.canvas-header-title {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--txt);
}
.canvas-header-actions {
  display: flex;
  gap: 0.3rem;
  align-items: center;
}

/* Generic small button */
.canvas-btn-sm {
  padding: 0.18rem 0.45rem;
  border: 1px solid var(--line-soft, rgba(255,255,255,0.08));
  border-radius: 6px;
  background: transparent;
  color: var(--txt-dim);
  font-size: 0.7rem;
  cursor: pointer;
  transition: background 100ms, color 100ms;
}
.canvas-btn-sm:hover {
  background: rgba(255,255,255,0.06);
  color: var(--txt);
}
.canvas-btn-sm:disabled {
  opacity: 0.35;
  cursor: default;
}
.canvas-close { font-size: 1rem; line-height: 1; padding: 0.1rem 0.35rem; }

/* Artifact list */
.canvas-artifacts-list {
  max-height: 220px;
  overflow-y: auto;
  padding: 0.3rem 0.45rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  flex-shrink: 0;
}
.canvas-empty-list {
  font-size: 0.68rem;
  color: var(--txt-dim);
  text-align: center;
  padding: 0.6rem 0.3rem;
  opacity: 0.7;
  line-height: 1.5;
}
.canvas-card-delete {
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: var(--txt-dim);
  cursor: pointer;
  font-size: 0.8rem;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition: background 80ms, color 80ms;
}
.canvas-card-delete:hover {
  background: rgba(255,111,123,0.15);
  color: #ff6f7b;
}
.canvas-card-main {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex: 1;
  min-width: 0;
  cursor: pointer;
}

.canvas-artifact-card {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.45rem;
  border-radius: 7px;
  border: 1.5px solid transparent;
  cursor: pointer;
  font-size: 0.72rem;
  transition: background 80ms, border-color 80ms;
}
.canvas-artifact-card:hover {
  background: rgba(255,255,255,0.04);
}
.canvas-artifact-card.active {
  border-color: var(--accent);
  background: rgba(121,182,255,0.08);
}
.canvas-artifact-icon { font-size: 1rem; flex-shrink: 0; width: 20px; text-align: center; }
.canvas-artifact-info { flex: 1; min-width: 0; }
.canvas-artifact-name {
  font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.canvas-artifact-meta {
  font-size: 0.62rem; color: var(--txt-dim); margin-top: 1px;
}
.canvas-artifact-actions {
  display: flex; gap: 0.15rem;
}
.canvas-artifact-actions button {
  width: 20px; height: 20px; border: none; border-radius: 4px;
  background: transparent; color: var(--txt-dim); cursor: pointer;
  font-size: 0.65rem; display: grid; place-items: center;
}
.canvas-artifact-actions button:hover {
  background: rgba(255,255,255,0.08); color: var(--txt);
}

/* Section labels */
.canvas-section {
  padding: 0.45rem 0.6rem;
  border-bottom: 1px solid var(--line-soft, rgba(255,255,255,0.06));
}
.canvas-section-label {
  font-size: 0.62rem;
  font-weight: 600;
  color: var(--txt-dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.3rem;
}

/* Active artifact info */
.canvas-active-info { flex-shrink: 0; }
.canvas-active-title {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--txt);
  margin-bottom: 0.25rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.canvas-active-meta {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
}
.canvas-type-badge {
  font-size: 0.6rem;
  padding: 0.08rem 0.35rem;
  border-radius: 4px;
  background: rgba(121,182,255,0.15);
  color: var(--accent);
  font-weight: 600;
}
.canvas-version-info {
  font-size: 0.65rem;
  color: var(--txt-dim);
}

/* File upload drop zone */
.canvas-drop-zone, .canvas-file-drop {
  border: 2px dashed var(--line, rgba(255,255,255,0.08));
  border-radius: 8px;
  padding: 0.7rem;
  text-align: center;
  cursor: pointer;
  transition: border-color 120ms, background 120ms;
  font-size: 0.72rem;
  color: var(--txt-dim);
}
.canvas-drop-zone:hover, .canvas-file-drop:hover,
.canvas-drop-zone.drag-over, .canvas-file-drop.drag-over {
  border-color: var(--accent);
  background: rgba(121,182,255,0.04);
}
.canvas-drop-icon, .canvas-file-drop-icon {
  font-size: 1.3rem;
  margin-bottom: 0.2rem;
}
.canvas-drop-hint, .canvas-file-drop-hint {
  font-size: 0.62rem;
  color: var(--txt-dim);
  opacity: 0.7;
}
.canvas-file-hidden, .canvas-file-input { display: none; }
.canvas-upload-progress {
  font-size: 0.65rem;
  color: var(--accent);
  margin-top: 0.3rem;
}

/* Canvas zoom mode: hide all messages except the edited one */
.canvas-zoom-mode .msg.canvas-hidden {
  display: none !important;
}
.canvas-zoom-mode .msg.canvas-zoomed {
  flex: 1;
  display: flex;
  flex-direction: column;
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  align-self: stretch !important;
  min-height: 0;
}
.canvas-zoom-mode .msg.canvas-zoomed .msg-foot {
  display: none !important;
}
.messages.canvas-zoom-mode {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0 !important;
  gap: 0 !important;
  /* Ensure full height of flex parent */
  flex: 1 1 0;
  min-height: 0;
}
.messages.canvas-zoom-mode::before {
  display: none !important;
  content: none !important;
}

/* Canvas editing in chat bubble — fullscreen mode */
.msg-canvas-edit-wrap {
  flex: 1 1 0;
  position: relative;
  margin: 0;
  min-height: 0;
  overflow: hidden;
}
.msg-canvas-textarea {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  min-height: 0 !important;
  resize: none;
  background: var(--bg-base, #02050f);
  color: var(--txt);
  border: none;
  border-top: 1px solid var(--line-soft, rgba(255,255,255,0.06));
  border-radius: 0;
  padding: 1rem 1.2rem;
  font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 0.88rem;
  line-height: 1.7;
  outline: none;
  tab-size: 4;
  overflow-y: auto;
  box-sizing: border-box;
  z-index: 1;
}
.msg-canvas-textarea:focus {
  box-shadow: none;
}

/* Canvas badge on chat messages */
.msg.msg-canvas-active {
  border-left: 3px solid var(--accent);
  position: relative;
}
.msg-canvas-badge {
  position: absolute;
  top: 0.3rem;
  right: 0.3rem;
  font-size: 0.58rem;
  padding: 0.08rem 0.35rem;
  border-radius: 4px;
  background: rgba(121,182,255,0.15);
  color: var(--accent);
  font-weight: 600;
  pointer-events: none;
}
/* Placeholder */
.canvas-placeholder {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}
.canvas-placeholder-text {
  color: var(--txt-dim);
  font-size: 0.78rem;
  text-align: center;
  border-radius: 4px;
  background: rgba(121,182,255,0.2);
  color: var(--accent);
  pointer-events: none;
}

/* ── Canvas Version Timeline ── */
.canvas-timeline {
  max-height: 200px;
  overflow-y: auto;
  padding: 0.2rem 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
}
.canvas-timeline::before {
  content: '';
  position: absolute;
  left: 7px;
  top: 10px;
  bottom: 10px;
  width: 2px;
  background: var(--line-soft, rgba(255,255,255,0.08));
  border-radius: 1px;
}
.canvas-timeline-node {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.3rem 0.35rem 0.3rem 0;
  cursor: pointer;
  border-radius: 6px;
  transition: background 80ms;
  position: relative;
  padding-left: 1.4rem;
}
.canvas-timeline-node:hover {
  background: rgba(255,255,255,0.04);
}
.canvas-timeline-node.active {
  background: rgba(121,182,255,0.08);
}
.canvas-timeline-dot {
  position: absolute;
  left: 3px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--line, rgba(255,255,255,0.15));
  border: 2px solid var(--bg-panel, #111627);
  flex-shrink: 0;
  transition: background 120ms, box-shadow 120ms;
  z-index: 1;
}
.canvas-timeline-node.active .canvas-timeline-dot {
  background: var(--accent);
  box-shadow: 0 0 8px rgba(121,182,255,0.4);
}
.canvas-timeline-info {
  flex: 1;
  min-width: 0;
}
.canvas-timeline-label {
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--txt);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.canvas-timeline-time {
  font-size: 0.58rem;
  color: var(--txt-dim);
}
.canvas-timeline-source {
  font-size: 0.55rem;
  padding: 0.05rem 0.3rem;
  border-radius: 3px;
  font-weight: 600;
  flex-shrink: 0;
}
.canvas-timeline-source.ai {
  background: rgba(168,130,255,0.15);
  color: #a882ff;
}
.canvas-timeline-source.user {
  background: rgba(110,231,160,0.12);
  color: #6ee7a0;
}

/* ── Canvas Diff View ── */
.canvas-diff-view {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  white-space: pre-wrap;
  word-wrap: break-word;
  background: var(--bg-base, #02050f);
  color: var(--txt);
  border: none;
  border-top: 1px solid var(--line-soft, rgba(255,255,255,0.06));
  border-radius: 0;
  padding: 1rem 1.2rem;
  font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 0.88rem;
  line-height: 1.7;
  cursor: pointer;
  box-sizing: border-box;
  z-index: 2;
}
.canvas-diff-add {
  background: rgba(110,231,160,0.2);
  color: #6ee7a0;
  border-radius: 2px;
  padding: 0 1px;
}
.canvas-diff-del {
  background: rgba(255,111,123,0.15);
  color: #ff6f7b;
  text-decoration: line-through;
  border-radius: 2px;
  padding: 0 1px;
  opacity: 0.7;
}
.canvas-diff-view.canvas-diff-fade .canvas-diff-add,
.canvas-diff-view.canvas-diff-fade .canvas-diff-del {
  transition: background 500ms ease, color 500ms ease, text-decoration-color 500ms ease;
  background: transparent;
  color: var(--txt);
  text-decoration-color: transparent;
}

/* ── Canvas Toolbar (in zoomed message) ── */
.canvas-msg-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.8rem;
  background: linear-gradient(180deg, rgba(255,255,255,0.03) 0%, transparent 100%);
  border-bottom: 1px solid var(--line-soft, rgba(255,255,255,0.06));
  flex-shrink: 0;
  gap: 0.5rem;
}
.canvas-msg-toolbar-left {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.canvas-msg-toolbar-title {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--accent);
}
.canvas-msg-toolbar-version {
  font-size: 0.65rem;
  color: var(--txt-dim);
  padding: 0.1rem 0.4rem;
  background: rgba(121,182,255,0.1);
  border-radius: 4px;
}
.canvas-close-btn {
  padding: 0.3rem 0.8rem;
  border: 1px solid var(--accent);
  border-radius: 6px;
  background: rgba(121,182,255,0.1);
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 100ms;
}
.canvas-close-btn:hover {
  background: rgba(121,182,255,0.2);
}

/* ── Canvas Artifact Thumbnails ── */
.canvas-artifact-thumb {
  width: 40px;
  height: 40px;
  border-radius: 6px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid var(--line-soft, rgba(255,255,255,0.08));
  background: rgba(255,255,255,0.03);
}
.canvas-thumb-icon {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--txt-dim);
  text-align: center;
  line-height: 1;
}
.canvas-thumb-pdf { color: #ff6b6b; }
.canvas-thumb-word { color: #4a90d9; }
.canvas-thumb-excel { color: #6ec86e; }
.canvas-thumb-ppt { color: #e8963e; }

/* Canvas upload row: side-by-side upload + library button */
.canvas-upload-row {
  display: flex;
  gap: 0.35rem;
  align-items: stretch;
}
.canvas-upload-row .canvas-drop-zone {
  flex: 1;
  min-width: 0;
  padding: 0.5rem;
  font-size: 0.68rem;
}
.canvas-media-browse-btn {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  padding: 0.5rem 0.6rem;
  border: 2px dashed var(--line, rgba(255,255,255,0.08));
  border-radius: 8px;
  background: transparent;
  color: var(--txt-dim);
  font-size: 0.68rem;
  cursor: pointer;
  transition: border-color 120ms, background 120ms, color 120ms;
}
.canvas-media-browse-btn:hover {
  border-color: var(--accent);
  background: rgba(121,182,255,0.04);
  color: var(--txt);
}
.canvas-media-icon {
  font-size: 1.1rem;
}
.canvas-artifact-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 5px;
}

/* Canvas artifact preview overlay */
.canvas-preview-overlay {
  position: fixed;
  inset: 0;
  z-index: 9500;
  background: rgba(0,0,0,0.75);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  animation: canvas-preview-in 150ms ease;
}
@keyframes canvas-preview-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.canvas-preview-content {
  max-width: 90vw;
  max-height: 85vh;
  background: var(--bg-panel, #111627);
  border-radius: 12px;
  border: 1px solid var(--line, rgba(255,255,255,0.1));
  box-shadow: 0 8px 40px rgba(0,0,0,0.5);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  cursor: default;
}
.canvas-preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.8rem;
  border-bottom: 1px solid var(--line-soft, rgba(255,255,255,0.06));
  flex-shrink: 0;
}
.canvas-preview-title {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--txt);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.canvas-preview-close {
  background: none;
  border: none;
  color: var(--txt-dim);
  font-size: 1.1rem;
  cursor: pointer;
  padding: 0.2rem 0.4rem;
  border-radius: 4px;
}
.canvas-preview-close:hover {
  background: rgba(255,255,255,0.06);
  color: var(--txt);
}
.canvas-preview-body {
  flex: 1;
  overflow: auto;
  padding: 0;
  min-height: 0;
}
.canvas-preview-body img {
  max-width: 100%;
  max-height: 80vh;
  display: block;
  margin: 0 auto;
}
.canvas-preview-body pre {
  padding: 1rem;
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.6;
  white-space: pre-wrap;
  word-wrap: break-word;
  color: var(--txt);
  max-height: 70vh;
  overflow-y: auto;
}

/* Action result toasts */
.canvas-action-results {
  position: absolute;
  bottom: 3.5rem;
  right: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  z-index: 80;
  pointer-events: none;
}
.canvas-action-badge {
  padding: 0.25rem 0.6rem;
  border-radius: 6px;
  font-size: 0.7rem;
  font-weight: 500;
  animation: canvas-badge-in 200ms ease;
}
.canvas-action-badge.ok {
  background: rgba(110,231,160,0.15);
  color: #6ee7a0;
}
.canvas-action-badge.err {
  background: rgba(255,111,123,0.15);
  color: #ff6f7b;
}
@keyframes canvas-badge-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Responsive */
@media (max-width: 1024px) {
  .os-shell.canvas-panel-open .chat-pane {
    padding-right: 0;
  }
  .canvas-panel {
    right: 0;
    top: 0;
    bottom: 0;
    width: 100vw;
    border-radius: 0;
  }
}

@media (max-width: 768px) {
  .canvas-panel {
    width: 100vw;
  }
}