@import url("./assistant-tray-base.css");
@import url("./editor-typography.css");
@import url("./editor-focus.css");

/* Viewer-owned conversation palette configuration.
   Keep the active Voxia bubble neutral for now. A future editor state can
   switch data-voxia-bubble-theme to "violet" without changing tray layout. */
body.sp-app-shell.sv-viewer{
  --sv-voxia-ai-bubble-bg:var(--sp-surface-2);
  --sv-voxia-ai-bubble-border:color-mix(in srgb,var(--sp-border),#5c547f 20%);
  --sv-voxia-ai-bubble-text:var(--sp-text);

  --sv-voxia-ai-bubble-violet-bg:#352b5e;
  --sv-voxia-ai-bubble-violet-border:#4b7d82;
  --sv-voxia-ai-bubble-violet-text:#f5f2ff;

  --sv-voxia-conversation-max-w:46rem;
  --sv-voxia-composer-max-w:48rem;
  --sv-voxia-user-bubble-max-w:min(25rem,82%);
  --sv-voxia-composer-min-h:calc(var(--sp-10) - var(--sp-1));
  --sv-voxia-scrollbar-gutter:var(--sp-5);
}

body.sp-app-shell.sv-viewer[data-voxia-bubble-theme="violet"]{
  --sv-voxia-ai-bubble-bg:var(--sv-voxia-ai-bubble-violet-bg);
  --sv-voxia-ai-bubble-border:var(--sv-voxia-ai-bubble-violet-border);
  --sv-voxia-ai-bubble-text:var(--sv-voxia-ai-bubble-violet-text);
}

/* Center the conversation so both sides read as one exchange. */
body.sp-app-shell.sv-viewer #assistantFeed.sv-assistantFeed{
  max-width:var(--sv-voxia-conversation-max-w)!important;
  padding-right:calc(var(--sv-voxia-gutter) + var(--sv-voxia-scrollbar-gutter))!important;
  padding-bottom:calc(var(--sv-voxia-gap) + var(--sp-6))!important;
  scroll-padding-bottom:calc(var(--sv-voxia-composer-min-h) + var(--sp-8))!important;
  scrollbar-gutter:stable!important;
}

body.sp-app-shell.sv-viewer #assistantComposer.sv-assistantComposer{
  max-width:var(--sv-voxia-composer-max-w)!important;
}

/* Keep long user messages conversational instead of spanning the rail. */
body.sp-app-shell.sv-viewer #assistantTray .sv-assistantMessage--user .sv-assistantBubble{
  max-width:var(--sv-voxia-user-bubble-max-w)!important;
}

/* Keep Voxia neutral, but give the AI side a restrained identity cue. */
body.sp-app-shell.sv-viewer #assistantTray .sv-assistantMessage--assistant .sv-assistantBubble{
  border-color:var(--sv-voxia-ai-bubble-border)!important;
  border-left-width:calc(var(--sp-border-w-1) * 2)!important;
  background:var(--sv-voxia-ai-bubble-bg)!important;
  color:var(--sv-voxia-ai-bubble-text)!important;
}

/* Quieter header hierarchy: compact shell and lower-emphasis Clear action. */
body.sp-app-shell.sv-viewer #assistantTray .sv-assistantTrayHeader{
  padding-block:var(--sp-3)!important;
}

body.sp-app-shell.sv-viewer #assistantTray .sv-assistantTrayHeaderActions .sp-btn:first-child{
  opacity:.76;
}

body.sp-app-shell.sv-viewer #assistantTray .sv-assistantTrayHeaderActions .sp-btn:first-child:hover,
body.sp-app-shell.sv-viewer #assistantTray .sv-assistantTrayHeaderActions .sp-btn:first-child:focus-visible{
  opacity:1;
}

/* One quieter composer focus treatment instead of stacked green and violet rings. */
body.sp-app-shell.sv-viewer #assistantComposer .sv-assistantComposerRow:focus-within{
  outline:none!important;
  box-shadow:none!important;
}

body.sp-app-shell.sv-viewer #assistantInput.sv-assistantInput{
  min-block-size:var(--sv-voxia-composer-min-h)!important;
}

body.sp-app-shell.sv-viewer #assistantSendBtn.sp-composer__submit{
  min-block-size:var(--sv-voxia-composer-min-h)!important;
}

body.sp-app-shell.sv-viewer #assistantInput.sv-assistantInput:focus,
body.sp-app-shell.sv-viewer #assistantInput.sv-assistantInput:focus-visible{
  outline:1px solid color-mix(in srgb,#6f62b5,var(--sp-border) 38%)!important;
  outline-offset:2px!important;
  box-shadow:none!important;
}

@media (max-width:52rem){
  body.sp-app-shell.sv-viewer{
    --sv-voxia-conversation-max-w:100%;
    --sv-voxia-composer-max-w:100%;
    --sv-voxia-user-bubble-max-w:min(24rem,88%);
    --sv-voxia-scrollbar-gutter:var(--sp-2);
  }
}