/* Preznta assistant — a dock beside the stage. The slide stays the hero: nothing the editor shows
   (the assistant, the element toolbar, the selection bar) is ever drawn over the slide. */

/* Stage lanes: the element toolbar lives above the slide, the selection bar and zoom below it. */
#editor-view .stage-wrapper { padding-top: 70px; padding-bottom: 74px; }
@media (max-width: 1200px) { #editor-view .stage-wrapper { padding-top: 66px; padding-bottom: 70px; } }
#editor-view .selection-tools { bottom: calc(var(--pz-stage-bottom, 26px) + 12px) !important; left: var(--pz-stage-center, 50%); max-width: var(--pz-stage-room, 92vw); overflow-x: auto; scrollbar-width: none; }
#editor-view .selection-tools::-webkit-scrollbar { display: none; }
/* With the assistant open the zoom steps aside while something is selected: the lane is the selection's. */
#editor-view:has(#selection-tools.visible) .assistant-open .editor-view-controls { opacity: 0; pointer-events: none; }

/* The launch pill in the editor header. */
.assistant-launch { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 15px; margin-inline-end: 6px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--brand-primary, #08786d) 30%, #fff); background: color-mix(in srgb, var(--brand-primary, #08786d) 8%, #fff); color: var(--brand-primary, #08786d); font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; transition: background .15s, box-shadow .15s; white-space: nowrap; }
.assistant-launch:hover { background: color-mix(in srgb, var(--brand-primary, #08786d) 14%, #fff); }
.assistant-launch[aria-expanded="true"] { background: var(--brand-primary, #08786d); color: #fff; border-color: transparent; box-shadow: 0 6px 18px color-mix(in srgb, var(--brand-primary, #08786d) 30%, transparent); }
.assistant-launch svg { width: 16px; height: 16px; }
.assistant-launch:focus-visible { outline: 3px solid color-mix(in srgb, var(--brand-primary, #08786d) 40%, transparent); outline-offset: 2px; }

/* The dock has its own lane. Its width is capped so the slide retains room at laptop sizes. */
.assistant-dock { flex: 0 0 clamp(264px, 22vw, 320px); width: clamp(264px, 22vw, 320px); min-width: 0; display: flex; flex-direction: column; background: #fff; border-inline-start: 1px solid #e3eae7; box-shadow: none; z-index: 320; font-family: inherit; direction: rtl; min-height: 0; }
.assistant-dock[hidden] { display: none !important; }
#editor-view .assistant-open .stage-wrapper { padding-inline: 20px; }
.assistant-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px 12px; border-bottom: 1px solid #edf2ef; }
.assistant-mark { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; background: color-mix(in srgb, var(--brand-primary, #08786d) 12%, #fff); color: var(--brand-primary, #08786d); flex-shrink: 0; }
.assistant-mark svg { width: 17px; height: 17px; }
.assistant-title { display: grid; min-width: 0; flex: 1; line-height: 1.35; }
.assistant-title strong { font-size: 14px; font-weight: 900; color: #1c2b27; }
.assistant-title small { font-size: 11px; font-weight: 700; color: #7a8b85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.assistant-close { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; border: 0; background: transparent; color: #6b7d76; cursor: pointer; }
.assistant-close:hover { background: #f1f5f3; color: #1c2b27; }
.assistant-close svg { width: 17px; height: 17px; }

.assistant-thread { flex: 1; min-height: 0; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; scroll-behavior: smooth; }
.assistant-msg { display: grid; gap: 6px; max-width: 92%; }
.assistant-msg.is-author { align-self: flex-start; }
.assistant-msg.is-assistant { align-self: flex-end; }
.assistant-bubble { padding: 10px 13px; border-radius: 14px; font-size: 13px; line-height: 1.85; white-space: pre-wrap; word-break: break-word; }
.is-author .assistant-bubble { background: var(--brand-primary, #08786d); color: #fff; border-end-start-radius: 4px; }
.is-assistant .assistant-bubble { background: #f3f7f5; color: #1f2d2a; border-end-end-radius: 4px; }
.assistant-notes { margin: 0; padding: 0 14px 0 0; font-size: 11.5px; line-height: 1.8; color: #6a7c75; }
.assistant-undo { justify-self: end; font: inherit; font-size: 11.5px; font-weight: 800; padding: 3px 11px; border-radius: 999px; border: 1px solid #dfe8e4; background: #fff; color: #3d5a4c; cursor: pointer; }
.assistant-undo:hover:not(:disabled) { background: #eef5f1; }
.assistant-undo:disabled { opacity: .55; cursor: default; }

.assistant-thinking { display: flex; align-items: center; gap: 5px; padding: 2px 18px 10px; font-size: 12px; color: #4f6a5e; }
.assistant-thinking[hidden] { display: none; }
.assistant-thinking i { width: 6px; height: 6px; border-radius: 50%; background: var(--brand-primary, #08786d); animation: assistant-dot 1.1s ease-in-out infinite; }
.assistant-thinking i:nth-child(2) { animation-delay: .15s; }
.assistant-thinking i:nth-child(3) { animation-delay: .3s; }
.assistant-thinking span { margin-inline-start: 6px; }
@keyframes assistant-dot { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }

.assistant-chips { display: flex; flex-wrap: nowrap; gap: 6px; padding: 0 14px 10px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.assistant-chips::-webkit-scrollbar { display: none; }
.assistant-chips:empty { display: none; }
.assistant-chip { flex: 0 0 auto; font: inherit; font-size: 11.5px; line-height: 1.6; padding: 4px 11px; border-radius: 999px; border: 1px solid #e0e9e4; background: #f7faf8; color: #36574a; cursor: pointer; }
.assistant-chip:hover { background: #eaf3ee; border-color: #bfd5c8; }

.assistant-compose { display: flex; align-items: flex-end; gap: 8px; margin: 0 12px 12px; padding: 8px 8px 8px 8px; border: 1px solid #dbe5e0; border-radius: 16px; background: #fff; box-shadow: 0 6px 20px rgba(15, 35, 30, .06); }
.assistant-compose:focus-within { border-color: color-mix(in srgb, var(--brand-primary, #08786d) 55%, #fff); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary, #08786d) 14%, transparent); }
.assistant-compose textarea { flex: 1; min-width: 0; resize: none; border: 0 !important; outline: none !important; box-shadow: none !important; background: transparent; font: inherit; font-size: 13.5px; line-height: 1.7; color: #1f2d2a; padding: 5px 6px; max-height: 140px; }
.assistant-compose textarea::placeholder { color: #93a39c; }
.assistant-send { display: grid; place-items: center; width: 34px; height: 34px; flex-shrink: 0; border-radius: 11px; border: 0; background: var(--brand-primary, #08786d); color: #fff; cursor: pointer; }
.assistant-send svg { width: 17px; height: 17px; }
.assistant-dock.is-busy .assistant-chip, .assistant-dock.is-busy .assistant-send { opacity: .5; pointer-events: none; }

/* Zoom controls move with the dock so they never sit on it, and fold into a slim column. */
.assistant-open .editor-view-controls { left: calc(clamp(264px, 22vw, 320px) + 12px); flex-direction: column; padding: 4px; }
.assistant-open .editor-view-controls button { min-width: 38px; padding: 2px 4px; }
.assistant-open .editor-view-controls #editor-zoom-value { min-width: 44px; font-size: 11px; }
.assistant-open .editor-view-controls button[data-fit]:not(#editor-zoom-value), .assistant-open .editor-view-controls [data-guide] { display: none; }

/* The alternate top navigation is a grid. Give the assistant an explicit grid area. */
html[data-editor-nav=top] #editor-view .assistant-open.editor-workspace {
  grid-template-columns: auto auto minmax(0, 1fr) clamp(264px, 22vw, 320px);
  grid-template-areas: "nav nav nav nav" "slides drawer stage assistant";
}
html[data-editor-nav=top] #editor-view .assistant-open .assistant-dock { grid-area: assistant; }

/* On a narrow screen, the conversation uses a short, reserved row below the stage.
   A fixed bottom sheet would hide the slide and its editing controls. */
@media (max-width: 1160px) {
  #editor-view .assistant-open.editor-workspace {
    --pz-assistant-tray: clamp(168px, 26vh, 202px);
    display: grid !important;
    grid-template-columns: auto auto auto minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) var(--pz-assistant-tray);
    column-gap: 0;
    row-gap: 0;
  }
  #editor-view .assistant-open .editor-section-rail { grid-column: 1; grid-row: 1 / 3; }
  #editor-view .assistant-open #slides-panel { grid-column: 2; grid-row: 1 / 3; }
  #editor-view .assistant-open #drawer { grid-column: 3; grid-row: 1 / 3; }
  #editor-view .assistant-open .stage-wrapper { grid-column: 4; grid-row: 1; padding: 28px 16px 48px; }
  #editor-view .assistant-open .assistant-dock {
    grid-column: 4; grid-row: 2; width: auto; height: auto; min-height: 0;
    border-inline-start: 0; border-top: 1px solid #e3eae7;
  }
  #editor-view .assistant-open .editor-view-controls {
    left: 12px; bottom: calc(var(--pz-assistant-tray) + 8px);
    flex-direction: row;
  }
  #editor-view .assistant-open .assistant-chips { display: none; }
  #editor-view .assistant-open .assistant-head { padding: 8px 14px; }
  #editor-view .assistant-open .assistant-thread { padding: 8px 14px; gap: 8px; }
  #editor-view .assistant-open .assistant-compose { margin: 0 12px 8px; }

  html[data-editor-nav=top] #editor-view .assistant-open.editor-workspace {
    grid-template-columns: auto auto minmax(0, 1fr);
    grid-template-rows: 72px minmax(0, 1fr) var(--pz-assistant-tray);
    grid-template-areas: "nav nav nav" "slides drawer stage" "slides drawer assistant";
  }
  html[data-editor-nav=top] #editor-view .assistant-open .editor-section-rail { grid-area: nav; }
  html[data-editor-nav=top] #editor-view .assistant-open #slides-panel { grid-area: slides; }
  html[data-editor-nav=top] #editor-view .assistant-open #drawer { grid-area: drawer; }
  html[data-editor-nav=top] #editor-view .assistant-open .stage-wrapper { grid-area: stage; }
  html[data-editor-nav=top] #editor-view .assistant-open .assistant-dock { grid-area: assistant; }
}
@media (max-width: 700px) {
  #editor-view .assistant-open #slides-panel,
  #editor-view .assistant-open #drawer { display: none !important; }
  #editor-view .assistant-open.editor-workspace { grid-template-columns: auto minmax(0, 1fr); }
  #editor-view .assistant-open .stage-wrapper,
  #editor-view .assistant-open .assistant-dock { grid-column: 2; }
  #editor-view .assistant-open .editor-section-rail { grid-column: 1; }
  #editor-view .assistant-open .editor-view-controls { left: 8px; }
  html[data-editor-nav=top] #editor-view .assistant-open.editor-workspace {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 72px minmax(0, 1fr) var(--pz-assistant-tray);
    grid-template-areas: "nav" "stage" "assistant";
  }
}
@media (max-width: 820px) {
  .assistant-launch span { display: none; }
  .assistant-launch { padding: 0 11px; }
}

html[data-editor-theme=midnight] .assistant-dock { background: #111a22; border-color: #24313c; }
html[data-editor-theme=midnight] .assistant-head { border-color: #1f2b35; }
html[data-editor-theme=midnight] .assistant-title strong { color: #e8eef2; }
html[data-editor-theme=midnight] .is-assistant .assistant-bubble { background: #1b2630; color: #dce6ec; }
html[data-editor-theme=midnight] .assistant-compose { background: #16212b; border-color: #2a3945; }
html[data-editor-theme=midnight] .assistant-compose textarea { color: #e6eef3; }
html[data-editor-theme=midnight] .assistant-chip { background: #1b2732; border-color: #2c3b47; color: #cfdde6; }
html[data-editor-theme=midnight] .assistant-undo { background: #16212b; border-color: #2c3b47; color: #cfdde6; }
@media (prefers-reduced-motion: reduce) { .assistant-dock *, .assistant-launch { animation: none !important; transition: none !important; } }
@media print { .assistant-dock, .assistant-launch { display: none !important; } }
body.exporting .assistant-dock, body.exporting .assistant-launch { display: none !important; }