/* Marketer panel — global right-docked chat sidebar. Positioning + push-
   content (.drawer.drawer--right, body.has-drawer-right, top:56px below
   the brandbar) come from drawer.css, already in baseline — this file only
   styles content specific to this panel: the header's thread-select row,
   the thread-switcher popover (composes with chat.css's .agent-pop/
   .agent-row — same widget, narrower + reused as-is where the visuals
   are identical), and the message stream/composer layout inside
   #marketer-panel-body. */

/* kanban.css defines a competing bare `.drawer { top:0; width:560px;
   z-index:90; }` (legacy full-viewport overlay, unrelated to this panel —
   confirmed nothing in either repo consumes a bare `.drawer` class alone).
   Same specificity as drawer.css's `.drawer { top:56px; ... }`, so on any
   page whose per-page Stylesheets list includes "kanban" AFTER "drawer"
   (tasks, workflows, processes, workflow_templates — i.e. most pages this
   panel actually appears on), kanban.css wins the cascade tie by load
   order: panel covers the brandbar instead of docking under it, and its
   width gets hardcoded to 560px instead of following --drawer-right-width
   (breaking the resize handle below). An ID selector always beats a bare
   class selector regardless of load order, so pin the panel's own
   positioning here rather than relying on baseline ordering. */
#marketer-panel {
  top: 56px;
  right: 0;
  bottom: 0;
  width: var(--drawer-right-width);
  max-width: 100vw;
  z-index: 60;
}

/* Powłoka bez brandbara (.app.analysis-shell — nagłówek jest częścią
   strony): 56 px na brandbar zostawiało pusty pas nad panelem. */
body:has(.app.analysis-shell) #marketer-panel {
  top: 0;
}
/* Telefon: pod przyklejonym paskiem powłoki (marketer-panel.js _measureTop). */
@media (max-width: 720px) {
  body:has(.app.analysis-shell) #marketer-panel,
  body.mp-full #marketer-panel {
    top: var(--mp-top, 0px);
    left: 0;
  }
}

/* Push-content jak w drawer.css, ale na własnej klasie body: panel nie
   ustawia has-drawer-right (tę klasę zdejmuje każdy zamykany drawer), więc
   bez tej reguły panel zasłaniał prawą część strony — akurat to, o co user
   pyta Marketera z kontekstem ekranu. Wąskie ekrany: nakładka. */
body.has-marketer-panel .app .view,
body.has-marketer-panel > .view {
  margin-right: var(--drawer-right-width);
}
@media (max-width: 720px) {
  body.has-marketer-panel .app .view,
  body.has-marketer-panel > .view { margin-right: 0; }
}

/* Drag-to-resize handle, left edge of the panel. .drawer is already
   position:fixed (a containing block), so this positions relative to it
   without needing an extra wrapper. Width/cursor styling mirrors the
   existing workflow-builder side panel handle (.sv2-panel-resize,
   static/css/workflows.css) — same interaction, different container
   (that one's a flex sibling; this one's fixed-positioned so it's
   absolute instead). */
.marketer-panel-resize {
  position: absolute;
  left: -3px;
  top: 0;
  bottom: 0;
  width: 6px;
  cursor: col-resize;
  background: transparent;
  z-index: 5;
  transition: background 0.15s;
}
.marketer-panel-resize:hover {
  background: var(--accent, #3b82f6);
}

.marketer-panel-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.marketer-panel-loading {
  padding: 18px;
  color: var(--ink-3);
  font-size: 13px;
}

.marketer-panel-head-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  min-width: 0;
}

.marketer-thread-select {
  position: relative;
  min-width: 0;
  /* flex:0 1 auto (NOT 1 1 auto) — shrink-only, zero grow. With grow:1
     this div is the only item in .marketer-panel-head-row with nonzero
     grow (#marketer-panel-new-thread only sets flex-shrink:0), so it
     greedily absorbs the row's entire free space into its OWN box while
     the trigger <button> inside (itself grow:0) stays shrink-wrapped at
     the left — the visible gap is that oversized box's empty right side,
     not overlap. Mirrors tasks.css's .tdrawer-acc-head-right (Job
     accordion header): shrink-only wrapper + max-width:100% child, no
     grow, so the pair hugs at natural width and only shrinks together
     when the row is genuinely too narrow. */
  flex: 0 1 auto;
}

.marketer-thread-select > button {
  /* .btn (components.css) is plain inline-flex with no width tie to its
     parent — without this cap the trigger renders at its natural
     (label-capped-at-160px) width regardless of how narrow the panel
     gets, overflowing past .marketer-thread-select and overlapping
     #marketer-panel-new-thread. max-width:100% resolves against the
     containing block regardless of the parent's own display, so
     .marketer-thread-select doesn't need to be display:flex for this. */
  max-width: 100%;
}

.marketer-thread-select-label {
  /* display:inline-block is required — text-overflow:ellipsis has no
     effect on a plain (display:inline) span. min-width:0 is ALSO
     required — this span is a flex item of .btn (display:inline-flex),
     and flex items default to min-width:auto (their content's intrinsic
     width as a hard floor), which silently overrides max-width for
     layout purposes even though the overflow:hidden still visually
     clips the text. Without both, the trigger button's LAYOUT box grew
     to the full untruncated title width and pushed/overlapped the
     close/open-full buttons in the row above. */
  display: inline-block;
  max-width: 160px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}

/* Never let the trigger squeeze this out of view. */
#marketer-panel-new-thread {
  flex-shrink: 0;
}

/* .marketer-thread-pop composes with .agent-pop (chat.css, already
   baseline) for position/background/border/radius/shadow/padding — this
   only overrides the handful of properties that genuinely differ (this
   popover is narrower, sits above a higher stack of overlays, and needs
   its own scroll cap since thread lists can run long). Same for
   .marketer-thread-row/-row-body composing with .agent-row/-row-body:
   hover/active states and row layout are pixel-identical to the agent
   picker, so those are reused as-is rather than re-declared. */
.marketer-thread-pop {
  width: 280px;
  z-index: 70;
  max-height: 360px;
  overflow-y: auto;
}

.marketer-thread-pop-empty {
  font-size: 12px;
  color: var(--ink-4);
  padding: 10px;
  text-align: center;
}

.marketer-thread-row-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.marketer-thread-row-title--empty { color: var(--ink-4); font-weight: 500; font-style: italic; }
.marketer-thread-row-time { font-size: 11px; color: var(--ink-4); }

.marketer-panel-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 12px 18px;
}

.marketer-panel-stream {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Composer w wąskim panelu — kompaktowy, bez wewnętrznego marginu strony. */
.marketer-panel-body .composer {
  flex: 0 0 auto;
  border-top: 1px solid var(--line);
  padding: 10px 14px;
}

/* Kontekst następnej wiadomości nad composerem (strona + koszyk). Chip
 * dziedziczy wygląd .msg-ctx-chip z chat.css, tu tylko układ i „×”. */
.marketer-ctx {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  padding: 6px 12px 0;
}
.marketer-ctx[hidden] {
  display: none;
}
.marketer-ctx-label {
  font-size: 11.5px;
  color: var(--ink-3);
  margin-right: 2px;
}
.marketer-ctx-chip {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding-right: 2px;
}
.marketer-ctx-chip-label {
  overflow: hidden;
  text-overflow: ellipsis;
}
.marketer-ctx-chip-x {
  border: 0;
  background: none;
  color: var(--ink-3);
  cursor: pointer;
  padding: 0 4px;
  font-size: 13px;
  line-height: 1;
}
.marketer-ctx-chip-x:hover {
  color: var(--ink);
}

/* organisms.AskMarketer — kafelek „AI” przy klockach, wierszach i
 * nagłówkach. Menu (#ask-mk-menu) rysuje marketer-panel.js jako jeden
 * element pod <body>, position:fixed przy przycisku. */
.ask-mk-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink-2);
  cursor: pointer;
  font: inherit;
  font-size: 12.5px;
}
.ask-mk-ai {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 20px;
  min-width: 24px;
  padding: 0 5px;
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  background: var(--bg-elev);
  color: var(--ink-3);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .04em;
  line-height: 1;
}
.ask-mk-btn:hover .ask-mk-ai,
.ask-mk-btn:focus-visible .ask-mk-ai,
.ask-mk-btn.is-open .ask-mk-ai {
  color: var(--ink);
  background: var(--accent-wash);
  border-color: var(--accent);
}
.ask-mk-btn--label {
  height: 32px;
  padding: 0 10px 0 6px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--bg-elev);
}
.ask-mk-btn--label:hover,
.ask-mk-btn--label.is-open {
  border-color: var(--accent);
}
.ask-mk-pop {
  position: fixed;
  z-index: 200;
  min-width: 220px;
  max-width: 320px;
  padding: 4px;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
}
.ask-mk-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 7px 10px;
  border: 0;
  border-radius: var(--r-xs);
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.ask-mk-item:hover,
.ask-mk-item:focus-visible {
  background: var(--bg-sunk);
  outline: none;
}
.ask-mk-sep {
  height: 1px;
  margin: 4px 6px;
  background: var(--line);
}

/* Kafelek AI w wierszu tabeli — widoczny po najechaniu/fokusie wiersza,
 * żeby kolumna nazw nie zamieniła się w rząd przycisków. */
.ctable-td--name .ask-mk-btn {
  margin-left: 6px;
  vertical-align: middle;
  opacity: 0;
  transition: opacity .12s;
}
.ctable-row:hover .ask-mk-btn,
.ctable-row:focus-within .ask-mk-btn,
.ctable-td--name .ask-mk-btn.is-open {
  opacity: 1;
}
@media (hover: none) {
  .ctable-td--name .ask-mk-btn { opacity: 1; }
}

/* Kafelek AI przy tytule strony (molecules.AskMarketerPage). */
.view-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

/* Przejścia panelu. drawer.css animuje .drawer przy każdym pokazaniu
 * (drawer-slide), co przy otwartym panelu dawało wjazd przy KAŻDEJ zmianie
 * strony. Panel animujemy tylko przy otwieraniu/zamykaniu przez usera
 * (x-transition w marketer_panel.templ), tym samym tempem co zwężanie
 * treści (.app .view margin-right .2s). */
#marketer-panel {
  animation: none;
}
#marketer-panel.mp-slide {
  transition: transform .2s cubic-bezier(.2, .8, .2, 1), opacity .2s ease-out;
}
#marketer-panel.mp-slide-out {
  transform: translateX(100%);
  opacity: .6;
}
#marketer-panel.mp-slide-in {
  transform: translateX(0);
  opacity: 1;
}

/* Nowe wiadomości (wysłane, dociągnięte, strumień) wjeżdżają łagodnie;
 * historia po załadowaniu wątku pojawia się bez animacji. */
@keyframes mp-msg-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
#marketer-panel-stream .mp-new,
#marketer-panel-stream .msg-optimistic > .msg,
#marketer-panel-stream > .msg-thinking,
#marketer-panel-stream .mp-nav {
  animation: mp-msg-in .22s ease-out;
}
@media (prefers-reduced-motion: reduce) {
  #marketer-panel.mp-slide { transition: none; }
  #marketer-panel-stream .mp-new,
  #marketer-panel-stream .msg-optimistic > .msg,
  #marketer-panel-stream > .msg-thinking,
  #marketer-panel-stream .mp-nav { animation: none; }
}

/* Pasek tymczasowego widoku Marketera nad klockami (dashViewNotice). */
.mk-view-notice {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
  padding: 8px 12px;
  border: 1px solid var(--accent-soft);
  border-radius: var(--r-sm);
  background: var(--accent-wash);
  animation: mp-msg-in .22s ease-out;
}
.mk-view-notice-text {
  flex: 1;
  min-width: 200px;
  font-size: 13px;
  color: var(--ink-2);
}

/* Tryb pełnego ekranu panelu (przycisk w nagłówku albo narzędzie Marketera
 * sembot_panel_mode): panel zajmuje cały obszar treści obok menu, rozmowa
 * w czytelnej kolumnie. Strona pod spodem zostaje (nawigacja i kontekst
 * działają dalej), bez zwężania — jest przykryta. */
body.mp-full #marketer-panel {
  left: var(--mp-full-left, 0px);
  top: 0;
  width: auto;
  max-width: none;
  transition: left .2s cubic-bezier(.2, .8, .2, 1);
}
body.mp-full.has-marketer-panel .app .view,
body.mp-full.has-marketer-panel > .view {
  margin-right: 0;
}
body.mp-full .marketer-panel-resize {
  display: none;
}
body.mp-full #marketer-panel-stream,
body.mp-full #marketer-panel-composer,
body.mp-full .marketer-ctx {
  width: 100%;
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
}

/* Zakres dat klocka w nagłówku (DashboardWidget.RangeLabel, widget-range.js). */
.dash-widget-range {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 45%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 1px 6px;
  border: 1px solid transparent;
  border-radius: var(--r-xs);
  background: none;
  color: var(--ink-3);
  font: inherit;
  font-size: 11.5px;
  cursor: pointer;
}
.dash-widget-range:hover,
.dash-widget-range.is-open {
  border-color: var(--line);
  color: var(--ink);
}
.dash-widget-range.is-own {
  color: var(--ink-2);
  background: var(--accent-wash);
  border-color: var(--accent-soft);
}
.widget-range-pop .ask-mk-item[aria-checked="true"] {
  font-weight: 600;
}
.widget-range-pop .ask-mk-item[aria-checked="true"]::after {
  content: " ✓";
}

/* Tytuł klocka ma pierwszeństwo przed podpisem zakresu w wąskich klockach. */
.dash-widget-head .dash-widget-title {
  flex: 1 1 auto;
  min-width: 3.5em;
}

/* Status narzędzia w dymku odpowiedzi w panelu („Pobieram dane z Google
 * Ads…”, window.chatStreamKit.setToolStatus). Te same reguły co w pełnym
 * czacie, zawężone do panelu — panel nie zależy od stylów strony czatu. */
#marketer-panel .msg-tool-status {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--ink-3);
}
#marketer-panel .msg-tool-status .thinking { font-size: 12px; }
#marketer-panel .msg-streaming:has(.msg-tool-status) .msg-streaming-body:empty::after { content: none; }

/* Wąskie klocki: nagłówek (tytuł, „Otwórz w Kanałach”, podpis zakresu,
 * kafelek AI, akcje) wystawał poza kartę — przy otwartym panelu wchodził
 * pod niego (zgłoszone 2026-09-30). Klocek jest kontenerem (dashboard.css
 * ma już @container dla linku, ale bez container-type nigdy nie działał);
 * w wąskich klockach podpis zakresu znika (zakres jest w dymku kafelka AI
 * i w pickerze strony), a link zostaje samą ikoną. */
.dash-widget {
  container-type: inline-size;
}
.dash-widget-head {
  min-width: 0;
}
@container (max-width: 340px) {
  .dash-widget-range { display: none; }
  .dash-widget-link span { display: none; }
}