:root { --lumina-w: 360px; }

.frame.has-lumina {
  grid-template-columns: 280px minmax(0, 1fr) var(--lumina-w);
  max-width: 1480px;
}
.lumina-dock {
  border-left: 1px solid var(--line);
  background: var(--paper);
  position: sticky;
  top: var(--appbar-h, 69px);
  height: calc(100vh - var(--appbar-h, 69px));
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.lumina-dock persona-chat-pane {
  flex: 1;
  min-height: 0;
  width: 100%;
  display: flex;
}
.lumina-disclosure {
  margin: 0;
  padding: 12px 16px;
  border-bottom: 1px solid var(--rule-soft);
  color: var(--ink-soft);
  font: 400 var(--fs-micro)/1.45 var(--sans);
  flex: none;
}
.lumina-sheet-head { display: none; }
.lumina-fab, .lumina-banner { display: none; }

body:not(.lumina-on) .tour-lumina-only { display: none; }
.tour-mics { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.tour-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-micro);
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid currentColor;
}
.tour-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.tour-chip.green { color: #7fd898; }
.tour-chip.green .tour-dot { background: rgb(42, 170, 34); }
.tour-chip.blue { color: #8fc2f5; }
.tour-chip.blue .tour-dot { background: rgb(59, 130, 246); }
.tour-chip.off { color: #f19a90; }
.tour-chip.off .tour-dot { background: #d84a4a; }

@media (max-width: 860px) {
  .frame.has-lumina { grid-template-columns: minmax(0, 1fr); }
  body.lumina-on .lumina-dock {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    height: 72vh;
    max-height: 82vh;
    z-index: 60;
    border-left: 0;
    border-top: 1px solid var(--line);
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -12px 40px -12px rgba(0, 0, 0, .28);
    transform: translateY(102%);
    transition: transform .28s ease;
  }
  body.lumina-on .lumina-dock.open { transform: none; }
  body.lumina-on .lumina-sheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid var(--line);
    font: 600 13px/1 var(--sans);
    color: var(--ink-soft);
    flex: none;
  }
  .lumina-sheet-head button {
    border: 0;
    background: none;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    color: var(--ink-soft);
  }
  body.lumina-on .lumina-fab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 61;
    padding: 12px 16px;
    max-width: calc(100vw - 32px);
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    background: var(--gold);
    color: var(--accent-ink);
    font: 600 14px/1.2 var(--sans);
    text-align: left;
    box-shadow: 0 8px 24px -8px rgba(15, 20, 25, .4);
  }
  body.lumina-on .lumina-fab .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--green);
    display: none;
  }
  body.lumina-on .lumina-fab.pulse .dot { display: inline-block; }
  body.lumina-on .lumina-banner {
    position: fixed;
    left: 16px;
    right: 92px;
    bottom: 20px;
    z-index: 61;
    padding: 10px 14px;
    border-radius: 12px;
    background: var(--paper);
    border: 1px solid var(--line);
    box-shadow: 0 8px 24px -8px rgba(0, 0, 0, .25);
    font-size: 13.5px;
    color: var(--ink);
    cursor: pointer;
  }
  body.lumina-on .lumina-banner.show { display: block; }
}

persona-chat-pane, persona-stage {
  --persona-font: var(--font-sans);
  --stage-font: var(--font-sans);
  --stage-title-font: var(--font-sans);
  --pvc-title-font: var(--font-sans);
  --persona-bg: var(--paper);
  --persona-bg-elevated: var(--paper);
  --persona-bg-sunken: var(--paper-2);
  --persona-text: var(--ink);
  --persona-text-dim: var(--ink-soft);
  --persona-border: var(--rule);
  --persona-shadow: var(--shadow-md);
  --persona-accent: var(--accent) !important;
  --persona-radius-lg: var(--rad-lg);
  --solo-header-bg: var(--paper);
  --solo-name-color: var(--ink);
  --solo-title-color: var(--ink-soft);
  --portrait-bg: var(--paper-2);
  --portrait-name-color: var(--ink);
  --portrait-tagline-color: var(--ink-soft);
}

persona-chat-pane {
  --persona-bg: #eff2f6;
  --pane-header-bg: var(--paper);
  --persona-input-area-bg: var(--paper);
  --persona-bubble-assistant-bg: var(--paper);
  --persona-bubble-assistant-text: var(--ink);
  --persona-bubble-font-size: var(--fs-0);
  --persona-bubble-padding: 8px 16px;
  --persona-bubble-max-width: calc(85% - 32px);
}
persona-chat-pane::part(header-area) { border-bottom: 1px solid var(--rule-soft); }
persona-chat-pane::part(default-portrait) { width: 36px; height: 36px; }
persona-chat-pane::part(chat-messages) { padding: var(--sp-4); gap: var(--sp-4); }
persona-chat-pane::part(bubble-user) { border-bottom-right-radius: 2px; max-width: 85%; }
persona-chat-pane::part(bubble-assistant) {
  position: relative;
  margin-left: 32px;
  border-bottom-left-radius: 2px;
}
persona-chat-pane::part(bubble-assistant)::before {
  content: '';
  position: absolute;
  left: -32px;
  top: 0;
  width: 24px;
  height: 24px;
  border-radius: var(--rad-full);
  background: var(--paper-3) url('/assets/img/lumina.png') center/cover no-repeat;
}