/* ================================================================== */
/* Mini tabs — S2 Tabs pattern                                         */
/* ================================================================== */
/* UXC: Pill-style tabs (artifact/sprinkle header) */
.mini-tabs {
  display: flex;
  gap: var(--s2-spacing-100);
  padding: var(--s2-spacing-200) var(--s2-spacing-300);
  flex-shrink: 0;
  overflow: hidden;
  align-items: center;
}
/* Scrollable region for text tabs — inserted by TabZone between separator and utility buttons */
.mini-tabs__scroll {
  display: flex;
  gap: var(--s2-spacing-100);
  overflow-x: auto;
  align-items: center;
  flex: 1;
  min-width: 0;
  scrollbar-width: none;
}
.mini-tabs__scroll::-webkit-scrollbar {
  display: none;
}
.mini-tabs__tab {
  position: relative;
  flex: none;
  padding: 7px var(--s2-spacing-300);
  border: 1px solid transparent;
  background: var(--s2-gray-100);
  color: var(--s2-content-default);
  font-size: 14px;
  font-weight: 500;
  font-family: var(--s2-font-family);
  line-height: 18px;
  letter-spacing: 0;
  cursor: pointer;
  white-space: nowrap;
  border-radius: var(--s2-radius-default);
  transition:
    color var(--s2-transition-default),
    background var(--s2-transition-default),
    border-color var(--s2-transition-default);
  height: 32px;
  display: inline-flex;
  align-items: center;
  gap: var(--s2-spacing-75);
}
.mini-tabs__tab::after {
  display: none;
}
.mini-tabs__tab:hover {
  color: var(--s2-content-default);
  background: var(--s2-gray-300);
  border-color: transparent;
}
.mini-tabs__tab--active {
  color: var(--s2-gray-25);
  background: var(--s2-gray-800);
  border-color: var(--s2-gray-800);
}
.mini-tabs__tab--active:hover {
  background: var(--s2-gray-800);
  border-color: var(--s2-gray-800);
  color: var(--s2-gray-25);
}
.mini-tabs__tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--s2-accent) 20%, #fff);
  color: var(--s2-accent);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}
.mini-tabs__tab--active .mini-tabs__tab-badge {
  background: color-mix(in srgb, var(--s2-gray-25) 18%, transparent);
  color: var(--s2-gray-25);
}
.mini-tabs__tab:focus-visible {
  outline: 2px solid var(--s2-accent);
  outline-offset: 2px;
  border-radius: var(--s2-radius-default);
}
.mini-tabs__tab:disabled {
  color: var(--s2-content-disabled);
  cursor: not-allowed;
}
.mini-tabs__tab--add {
  border-color: transparent;
  background: transparent;
  color: var(--s2-content-tertiary);
  font-size: 16px;
}
.mini-tabs__tab--add:hover {
  border-color: var(--s2-gray-200);
  background: var(--s2-gray-75);
  color: var(--s2-content-default);
}

/* Icon-only pinned mini-tabs (Terminal, Files, Memory) */
.mini-tabs__tab--icon {
  padding: 0;
  width: 32px;
  height: 32px;
  justify-content: center;
  background: transparent;
  border-color: transparent;
  color: var(--s2-content-default);
}
.mini-tabs__tab--icon svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.mini-tabs__tab--icon:hover {
  background: var(--s2-gray-200);
  border-color: transparent;
}
.mini-tabs__tab--icon.mini-tabs__tab--active {
  background: var(--s2-gray-800);
  color: var(--s2-gray-25);
}
.mini-tabs__tab--icon.mini-tabs__tab--active:hover {
  background: var(--s2-gray-800);
  color: var(--s2-gray-25);
}

/* Dimmed state — panel not yet opened */
.mini-tabs__tab--dimmed {
  opacity: 0.3;
}
.mini-tabs__tab--dimmed:hover {
  opacity: 0.65;
}

/* Separator between icon tabs and text tabs */
.mini-tabs__separator {
  width: 1px;
  height: 20px;
  background: var(--s2-border-subtle);
  margin: 0 var(--s2-spacing-75);
  flex-shrink: 0;
}
.mini-tabs__tab--fullpage {
  border-color: transparent;
  background: transparent;
  color: var(--s2-content-tertiary);
  margin-left: auto;
  padding: 0;
  width: 32px;
  justify-content: center;
}
.mini-tabs__tab--fullpage:hover {
  background: var(--s2-gray-75);
  color: var(--s2-content-default);
}
.mini-tabs__tab--fullpage svg {
  flex-shrink: 0;
}

/* ================================================================== */
/* Tab bar (extension mode) — S2 Tabs                                 */
/* ================================================================== */
.tab-bar {
  display: flex;
  background: var(--s2-bg-layer-1);
  border-bottom: 1px solid var(--s2-border-subtle);
  flex-shrink: 0;
}
.tab-bar__tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: var(--s2-spacing-100) 0;
  border: none;
  background: transparent;
  color: var(--s2-content-tertiary);
  font-size: var(--s2-font-size-75);
  font-weight: 600;
  font-family: var(--s2-font-family);
  cursor: pointer;
  text-align: center;
  border-bottom: 2px solid transparent;
  transition:
    color var(--s2-transition-default),
    border-color var(--s2-transition-default);
  letter-spacing: 0.02em;
}
.tab-bar__tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--s2-accent) 18%, transparent);
  color: var(--s2-accent);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}
.tab-bar__tab:hover {
  color: var(--s2-content-default);
}
.tab-bar__tab-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 6px;
  width: 16px;
  height: 16px;
  border-radius: var(--s2-radius-s);
  font-size: 11px;
  line-height: 1;
  color: var(--s2-content-tertiary);
  opacity: 0.6;
}
.tab-bar__tab-close:hover {
  opacity: 1;
  color: var(--s2-negative);
  background: color-mix(in srgb, var(--s2-negative) 10%, transparent);
}
.tab-bar__tab--active {
  color: var(--s2-content-default);
  border-bottom-color: var(--s2-accent);
}
.tab-bar__tab--active .tab-bar__tab-badge {
  background: color-mix(in srgb, var(--s2-accent) 22%, transparent);
  color: var(--s2-content-default);
}
.tab-content {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.tab-content__panel {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Utility button in mini-tabs — icon-only, right-aligned */
.mini-tabs__tab--utility {
  border-color: transparent;
  background: transparent;
  color: var(--s2-content-tertiary);
  padding: 0;
  width: 28px;
  height: 28px;
  justify-content: center;
  flex: none;
}
.mini-tabs__tab--utility:hover {
  background: var(--s2-gray-200);
  border-color: transparent;
  color: var(--s2-content-default);
}
.mini-tabs__tab--utility svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* ================================================================== */
/* SHTML Canvas Panel Components                                      */
/* ================================================================== */

/* Close button for panel tabs (standalone mode) */
.mini-tabs__tab-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 6px;
  width: 16px;
  height: 16px;
  border-radius: var(--s2-radius-s);
  font-size: 12px;
  line-height: 1;
  color: var(--s2-content-tertiary);
}
.mini-tabs__tab-close:hover {
  color: var(--s2-negative);
  background: color-mix(in srgb, var(--s2-negative) 10%, transparent);
}

/* ================================================================== */
/* Rail — vertical icon strip on the right edge (standalone mode)     */
/* ================================================================== */
.rail {
  display: flex;
  flex-direction: column;
  width: 48px;
  flex-shrink: 0;
  background: var(--s2-bg-layer-1);
  border-left: 1px solid var(--s2-border-subtle);
  padding: var(--s2-spacing-200) var(--s2-spacing-100);
  gap: var(--s2-spacing-100);
}
.rail__section {
  display: flex;
  flex-direction: column;
  gap: var(--s2-spacing-100);
  align-items: center;
}
.rail__section--top {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.rail__section--bottom {
  flex: none;
}
/* Rail header slot — hosts the user avatar in extension mode. Sized
   to match the thread header (56px) so the hairline separator below
   the avatar visually continues the gradient line at the bottom of
   the chat thread header on the left. */
.rail__section--header {
  flex: none;
  height: var(--uxc-thread-header-height);
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--s2-border-subtle);
  margin-bottom: var(--s2-spacing-100);
}
.rail__section--header .header__avatar {
  margin: 0 auto;
}
/* When the rail mounts a header widget we drop its own top padding
   so the widget aligns to Y=0 — the section's `height` matches the
   thread header so the separator lines up with the gradient on the
   left. */
.rail:has(.rail__section--header) {
  padding-top: 0;
}
.rail__avatar {
  /* The avatar already carries `.header__avatar` styles; this class
     just lets us re-target hover affordances if we ever want a
     rail-specific look. */
}
.rail__item {
  position: relative;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid transparent;
  background: transparent;
  color: var(--s2-content-default);
  border-radius: var(--s2-radius-default);
  cursor: pointer;
  transition:
    background var(--s2-transition-default),
    color var(--s2-transition-default),
    border-color var(--s2-transition-default);
  flex-shrink: 0;
}
.rail__item svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}
/* `<slicc-press-button>` — reusable click + long-press button. The
   host carries the parent's sizing/state classes (e.g. `.rail__item`,
   `.thread-header__panel-toggle`, `.msg__feedback-btn`); the inner
   `<button>` provided by the custom element fills the host so the
   ripple's bounding rect matches what the user sees. */
slicc-press-button {
  display: inline-flex;
}
.slicc-press-btn__btn {
  appearance: none;
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  position: relative;
}
/* Long-press ripple — fills the button as the user holds. The layer
   is clipped to the button radius so the growing circle never
   escapes the button shape. */
.slicc-press-btn__press-layer {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
/* Slotted icon content sits above the ripple in the stacking order. */
.slicc-press-btn__btn > :not(.slicc-press-btn__press-layer) {
  position: relative;
  z-index: 1;
}
.slicc-press-btn__press {
  position: absolute;
  border-radius: 50%;
  background: var(--s2-accent);
  opacity: 0.85;
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition-property: width, height;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  will-change: width, height;
}
.rail__item--active .slicc-press-btn__press {
  background: var(--s2-accent);
  opacity: 1;
}
.rail__item:hover {
  background: var(--s2-gray-200);
}
.rail__item--active {
  background: var(--s2-gray-800);
  color: var(--s2-gray-25);
}
.rail__item--active:hover {
  background: var(--s2-gray-800);
  color: var(--s2-gray-25);
}
/* Author-supplied icons render via <img> (see imgTag in
   sprinkle-icon.ts) so they can't inherit the active state's `color`
   the way inline Lucide SVGs can — they'd disappear into the dark
   active background. Recolor img-rendered icons to match the active
   foreground via filter (theme-aware). */
.rail__item--active img {
  filter: brightness(0);
}
:root.theme-light .rail__item--active img {
  filter: brightness(0) invert(1);
}
.rail__item:focus-visible {
  outline: 2px solid var(--s2-accent);
  outline-offset: 2px;
}
.rail__item--add {
  color: var(--s2-content-tertiary);
}
.rail__item--add:hover {
  color: var(--s2-content-default);
  background: var(--s2-gray-75);
}
/* Attention-pulse for auto-installed sprinkles in extension mode.
   The icon glows in accent colour and gently breathes until the user
   acknowledges it by clicking — see `RailZone.markItemAttention`. */
.rail__item--attention {
  color: var(--s2-accent);
  animation: rail-item-attention 1.6s ease-in-out infinite;
}
.rail__item--attention:hover {
  animation: none;
  background: var(--s2-gray-200);
}
.rail__item--attention::after {
  content: '';
  position: absolute;
  top: 4px;
  right: 4px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--s2-accent);
  box-shadow: 0 0 0 2px var(--s2-bg-layer-1);
  pointer-events: none;
  z-index: 2;
}
@keyframes rail-item-attention {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.06);
    opacity: 0.85;
  }
}
/* The collapsible content panel rendered LEFT of the rail. */
.rail-content {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  width: 360px;
  min-width: 280px;
  max-width: 50vw;
  overflow: hidden;
  border-left: 1px solid var(--s2-border-subtle);
  background: var(--s2-bg-base);
}
.rail-content--collapsed {
  display: none !important;
}
/* Hide the chat<->content divider while the content panel is
   collapsed. Otherwise we'd render a vestigial 1px hairline next to
   the rail that has nothing to drag against. */
.layout:has(.rail-content--collapsed) .layout__divider--vertical {
  display: none;
}
/* In fullpage mode the content panel grows to fill the chat area. */
.layout--rail-fullpage .layout__left,
.layout--rail-fullpage .layout__divider--vertical,
.layout--rail-fullpage .layout__scoops {
  display: none;
}
.layout--rail-fullpage .rail-content {
  flex: 1;
  width: auto;
  max-width: none;
}
