/* Agent tab kebab menu (Refresh / Disconnect overflow) */
.v10-agent-tab-menu {
  position: relative;
  display: inline-flex;
  align-items: stretch;
}
.v10-agent-tab-menu-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  min-height: 32px;
  padding: 0 4px;
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1;
  border-radius: 0 4px 4px 0;
  cursor: pointer;
}
.v10-agent-tab-menu-trigger:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}
.v10-agent-subtab-group.active .v10-agent-tab-menu-trigger {
  color: var(--text-primary);
}
.v10-agent-tab-menu-popover {
  position: absolute;
  top: calc(100% + 6px);
  /* Anchor to the LEFT edge of the trigger so the popover grows rightward
     into the panel — left-most agent tabs (the common case) used to clip
     against the panel's left edge with right:0. AgentTabMenu measures
     after open and flips to .align-right when the projected right edge
     would overflow the panel (rightmost tabs on narrow layouts). */
  left: 0;
  min-width: 200px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  z-index: 200;
  overflow: hidden;
  padding: 4px;
}
.v10-agent-tab-menu-popover.align-right {
  /* Right-anchored fallback when the left-anchored popover would
     overflow the panel's right edge (rightmost tabs on narrow layouts).
     AgentTabMenu measures after open and toggles this class. */
  left: auto;
  right: 0;
}
.v10-agent-tab-menu-status {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  font-size: 11px;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: 4px;
}
.v10-agent-tab-menu-item {
  display: block;
  width: 100%;
  padding: 8px 10px;
  background: transparent;
  border: 0;
  text-align: left;
  font-size: 12px;
  color: var(--text-primary);
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.1s;
}
.v10-agent-tab-menu-item:hover:not(:disabled) {
  background: var(--bg-hover);
}
.v10-agent-tab-menu-item:disabled {
  color: var(--text-tertiary);
  cursor: default;
}
.v10-agent-tab-menu-item.danger {
  color: var(--text-danger);
}
.v10-agent-tab-menu-item.danger:hover:not(:disabled) {
  background: color-mix(in srgb, #ef4444 12%, var(--bg-hover));
  color: var(--text-danger-hover);
}

/* Custom Select (replaces native <select> for theme-aware dropdowns) */
.v10-select {
  position: relative;
  display: inline-block;
  width: 100%;
  min-width: 0;
}
.v10-select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  height: 36px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-elevated);
  color: var(--text-primary);
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  text-align: left;
}
.v10-select-trigger:hover:not(:disabled) {
  border-color: var(--border-default);
  background: var(--bg-hover);
}
.v10-select-trigger:focus-visible {
  outline: none;
  border-color: var(--accent-blue);
  box-shadow: 0 0 0 1px var(--accent-blue);
}
.v10-select.open .v10-select-trigger {
  border-color: var(--border-strong);
}
.v10-select-trigger:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.v10-select-value {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.v10-select-value.placeholder {
  color: var(--text-secondary);
}
.v10-select-caret {
  flex-shrink: 0;
  font-size: 10px;
  color: var(--text-tertiary);
  transition: transform 0.15s;
}
.v10-select.open .v10-select-caret {
  transform: rotate(180deg);
}
.v10-select-menu {
  max-height: 240px;
  overflow-y: auto;
  list-style: none;
  margin: 0;
  padding: 4px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  z-index: 1000;
}
.v10-select-menu:focus { outline: none; }
.v10-select-menu-above {
  margin-top: -4px;
}
.v10-select-menu-below {
  margin-top: 4px;
}
.v10-select-option {
  padding: 8px 10px;
  font-size: 12px;
  color: var(--text-primary);
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.v10-select-option.highlighted,
.v10-select-option:hover {
  background: var(--bg-hover);
}
.v10-select-option.selected {
  background: var(--bg-active);
  color: var(--text-primary);
}
.v10-select-option.disabled {
  color: var(--text-tertiary);
  cursor: not-allowed;
}
.v10-select-option.empty {
  color: var(--text-tertiary);
  cursor: default;
}
.v10-local-agent-messages {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 12px 14px;
}

/* Floating "scroll to latest" pill — sticks to the bottom-center of the
   visible portion of the messages region while the user is scrolled away
   from the bottom. Sticky inside the scroll container means it rides
   along automatically with no scroll listener positioning math. */
.v10-scroll-to-bottom {
  position: sticky;
  /* Lift above the composer so there's breathing room between the pill
     and the input shell below. */
  bottom: 16px;
  align-self: center;
  /* Lock the box to 32x32 in every direction. The messages region is a
     flex column with default `align-items: stretch`; without min/max
     and flex: none, the cross-axis sizing can drift the button into a
     horizontal pill instead of a circle. */
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  max-width: 32px;
  max-height: 32px;
  flex: none;
  aspect-ratio: 1;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid var(--border-default);
  background: var(--bg-elevated);
  color: var(--text-secondary);
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity 150ms ease-out, background 0.15s, color 0.15s;
  z-index: 5;
  /* Negative top margin so the pill overlays the previous message instead
     of forcing extra vertical space when invisible. */
  margin-top: -32px;
  margin-bottom: 0;
}
.v10-scroll-to-bottom.visible {
  opacity: 1;
  pointer-events: auto;
}
.v10-scroll-to-bottom:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}
@media (prefers-reduced-motion: reduce) {
  .v10-scroll-to-bottom { transition: none; }
}
.v10-local-agent-msg-time {
  /* Bumped from `--text-tertiary` to `--text-secondary` after PR4's
     timestamp-expansion change made these strings noticeably more
     visible (full date + time vs. previous time-only). Pre-existing
     AA fail surfaced by PR4: tertiary clears only 2.31-2.66:1 against
     bg-panel; secondary clears 5.58/7.17. UI-lead Task #68. */
  margin-top: 4px;
  font-size: 10px;
  color: var(--text-secondary);
  font-family: var(--font-mono);
  /* Hidden by default, revealed on message hover/focus — same recipe
     as `.v10-md-copy`. Reduces transcript noise now that PR4 made
     assistant turns full-width with no bubble. Colour/contrast (AA per
     Task #68) is unchanged; only visibility toggles. */
  opacity: 0;
  transition: opacity 120ms ease-out;
}
.v10-chat-msg:hover .v10-local-agent-msg-time,
.v10-chat-msg:focus-within .v10-local-agent-msg-time {
  opacity: 1;
}
.v10-local-agent-msg-time.user {
  align-self: flex-end;
}
.v10-local-agent-msg-time.assistant {
  align-self: flex-start;
}
/* Touch (no hover) and reduced-motion users always see the timestamp —
   mirrors the `.v10-md-copy` accessibility fallbacks. */
@media (hover: none) {
  .v10-local-agent-msg-time { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .v10-local-agent-msg-time { opacity: 1; transition: none; }
}
.v10-local-agent-setup {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.v10-local-agent-warning {
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 11px;
  line-height: 1.55;
  border: 1px solid var(--border-default);
}
.v10-local-agent-warning.connecting {
  color: #bfdbfe;
  background: color-mix(in srgb, var(--accent-blue) 12%, var(--bg-surface));
  border-color: color-mix(in srgb, var(--accent-blue) 28%, var(--border-subtle));
}
.v10-local-agent-warning.offline {
  color: #fcd34d;
  background: color-mix(in srgb, #f59e0b 10%, var(--bg-surface));
  border-color: color-mix(in srgb, #f59e0b 28%, var(--border-subtle));
}
.v10-local-agent-copy {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.55;
}
.v10-local-agent-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.v10-local-agent-target-picker {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  width: 100%;
  margin: 0;
}
.v10-local-agent-target-label {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  flex-shrink: 0;
}
.v10-local-agent-target-select {
  flex: 1;
  width: 100%;
  min-width: 0;
}
.v10-local-agent-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.v10-local-agent-composer-row {
  display: flex;
  align-items: stretch;
  gap: 8px;
}
