/* No top padding, unlike left/right/bottom - the LS sidebar's equivalent
   wrapper ([data-sidebar-tool-panel] in main.css) has no padding at all,
   so its content (and, critically, the JS custom-scrollbar-runtime's faux
   scrollbar rail, which clamps its bounds against every overflow:hidden
   ancestor's real rect - a CSS margin trick on the inner content doesn't
   fool it) starts flush at the top. Panes that want breathing room at the
   top provide it themselves instead (.v1-ai-panel, .v1-shellcraft-inspector,
   .tool-detail below). */
.v1-right-content {
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  height: 100%;
  min-height: 0;
  box-sizing: border-box;
  overflow: hidden;
  padding: 0 10px 10px;
  background: var(--bg-elev);
}

/* RS "generic content slot" (ShellCraft Inspector, Lorem Ipsum right, ...) -
   index.html no longer gives this element class="tool-detail" (that's a
   CS-card style: 10px padding + ".tool-detail ul"'s 6px margin-top, meant
   for prose-style About/License/Versions panels). Mirrors LS's
   #v1SidebarGenericContent rule in layout/main.css - same properties,
   different file because this one lives under the RS wrapper this file
   owns. */
#v1RightGenericContent {
  background: var(--bg-elev);
  color: var(--txt-dim);
  font-size: 12px;
  line-height: 1.5;
}

.v1-right-tabs {
  min-width: 0;
  display: inline-flex;
  align-items: stretch;
  gap: 0;
  flex-wrap: nowrap;
  font-size: 12px;
  letter-spacing: normal;
  text-transform: none;
  padding: 0;
}

.v1-right-tool-tab-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  max-width: 240px;
  padding: 7px 10px;
  color: var(--txt-dim);
  background: var(--bg-elev);
  font-family: var(--font-ui);
  line-height: 1.2;
  position: relative;
}

.v1-right-tool-tab-wrap.right-tab-closed {
  display: none;
}

/* border-top instead of inset box-shadow - see main.css's .v1-tab.active
   comment for why (subpixel vertical seam bleed at the active tab's edges). */
.v1-right-tool-tab-wrap.is-right-active {
  color: var(--txt);
  background: var(--bg-elev);
  border-top: 2px solid var(--brand);
  padding-top: 5px;
}

.v1-right-tool-tab-wrap:hover:not(.is-right-active) {
  color: #ffffff;
  background: #222326;
}

.v1-right-tool-tab-wrap .v1-right-tab {
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  padding: 0;
  cursor: pointer;
  white-space: nowrap;
}

.v1-right-tool-tab-wrap .v1-right-tab.active {
  color: var(--txt);
}

.v1-right-tool-tab-wrap .v1-right-tool-tab-close {
  display: none;
  width: 16px;
  height: 16px;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  color: #c6c9d0;
  cursor: pointer;
  line-height: 1;
  font-size: 12px;
  flex: 0 0 auto;
}

.v1-right-tool-tab-wrap .v1-right-tool-tab-close:hover {
  border-color: #4a4f58;
  background: #2c3139;
  color: #ffffff;
}

.v1-right-tool-tab-wrap.is-right-active .v1-right-tool-tab-close {
  display: inline-flex;
}

.v1-rightbar.right-tabs-empty {
  background: var(--v1-tabs-strip-bg);
}

.v1-rightbar.right-tabs-empty .v1-side-head {
  justify-content: flex-start;
  padding: 0 0 0 6px;
}

html[dir="rtl"] .v1-rightbar.right-tabs-empty .v1-side-head {
  padding: 0 6px 0 0;
}

.v1-rightbar.right-tabs-empty .v1-right-tabs {
  display: none;
}

.v1-rightbar.right-tabs-empty .v1-right-content {
  display: none;
}

.v1-right-tab {
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 12px;
  font-family: inherit;
  padding: 0;
  cursor: pointer;
}

.v1-right-tab.active {
  color: var(--txt);
}

.v1-right-pane {
  display: none;
  height: 100%;
  min-height: 0;
}

.v1-right-pane.active {
  display: block;
  overflow: hidden;
}

/* AI Properties is the one RS pane with content AFTER its .v1-tool-list
   (the token-counter checkbox row, moved outside the collapsible section
   so it stays visible even when that section is collapsed) - .v1-tool-list
   normally assumes it's the pane's only content and takes height:100%
   (global rule, shared by every other LS/RS tool list, not safe to change),
   which would push this sibling row below the pane's visible bottom edge
   and clip it under overflow:hidden. Scoped to just this pane: turn it into
   a flex column so the list shrinks to share space instead of claiming it
   all, and higher specificity than .v1-right-pane.active above so this
   wins regardless of declaration order. */
.v1-right-pane[data-v1-right-pane="ai-properties"].active {
  display: flex;
  flex-direction: column;
}

.v1-right-pane[data-v1-right-pane="ai-properties"] .v1-tool-list {
  height: auto;
  flex: 1 1 auto;
  min-height: 0;
}

.v1-right-pane[data-v1-right-pane="ai-properties"] .v1-ai-prop-token-counter-row {
  flex: 0 0 auto;
}

.v1-ai-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  /* .v1-right-content lost its top padding (see comment there) so RS
     content can start flush at the top like LS - this pane had no
     padding of its own and relied entirely on the wrapper's, so restore
     it here to avoid the Mode row landing flush against the tab strip. */
  padding-top: 10px;
}

.v1-ai-badge {
  border: 0;
  padding: 3px 8px;
  font-size: 11px;
  color: var(--txt-dim);
  background: #2f2f33;
  font-family: var(--font-mono);
}

.v1-ai-mode {
  margin: 0;
  padding: 6px 8px;
  border: 0;
  background: #212124;
  display: flex;
  align-items: center;
  gap: 12px;
}

.v1-ai-mode-label {
  color: var(--txt-dim);
  font-size: 12px;
}

.v1-ai-mode-option {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--txt);
  font-size: 12px;
}

/* #v1AiModeUiCheckbox/#v1AiModePsCheckbox - disabled for now, reserved
   for tool-use access still being designed (see their title attribute). */
.v1-ai-mode-option:has(input:disabled) {
  color: var(--txt-dim);
  cursor: not-allowed;
}

.v1-ai-mode-option input:disabled {
  cursor: not-allowed;
}

.v1-ai-mode-badge {
  margin-left: auto;
  cursor: pointer;
}

.v1-ai-mode-badge:hover,
.v1-ai-mode-badge:focus-visible {
  background: #3a3a40;
  color: var(--txt);
}

html[dir="rtl"] .v1-ai-mode-badge {
  margin-left: 0;
  margin-right: auto;
}

.v1-ai-chat-wrap {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
}

.v1-ai-chat {
  border: 0;
  background: #1a1a1c;
  padding: 8px;
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  gap: 8px;
  align-content: start;
}

/* Floating in the fixed center of the chat pane (not the scrolled
   content - it's a sibling of .v1-ai-chat, not a child, specifically so
   scrolling the message list doesn't drag it along) rather than a toolbar
   row, to avoid carving out layout space for a button that's only
   occasionally needed. Dimmed until hovered so it doesn't compete for
   attention with real messages sitting behind it. */
.v1-ai-clear-history-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 32px;
  height: 32px;
  border: 1px solid #3d424d;
  border-radius: 6px;
  background: #22242a;
  color: var(--txt);
  font-size: 14px;
  cursor: pointer;
  opacity: 0.35;
}

.v1-ai-clear-history-btn:hover {
  opacity: 1;
  background: #c94b4b;
  border-color: #c94b4b;
  color: #ffffff;
}

/* Sibling of .v1-ai-chat (like the clear-history button above), not a
   child - stays fixed in the pane's bottom-left corner regardless of
   scroll position. Toggled via the same "Estimated tokens counter"
   checkbox as the per-message and prompt-draft counters. */
.v1-ai-chat-total-tokens {
  position: absolute;
  left: 8px;
  bottom: 6px;
  padding: 1px 5px;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.35);
  color: var(--txt-dim);
  font-size: 10px;
  line-height: 1.4;
  pointer-events: none;
}

.v1-ai-msg {
  position: relative;
  border: 0;
  padding: 7px 8px 16px;
  font-size: 12px;
  line-height: 1.45;
  color: #d7d9de;
  background: #202024;
}

/* Estimated token count for this one message - bottom-right corner,
   small/italic/white so it reads as a quiet watermark, not real content
   competing with the message text. */
.v1-ai-msg-tokens {
  position: absolute;
  right: 8px;
  bottom: 3px;
  font-size: 9px;
  font-style: italic;
  color: #ffffff;
  opacity: 0.7;
  pointer-events: none;
}

.v1-ai-msg.user {
  background: #212b3b;
  color: #d8e6ff;
}

.v1-ai-msg.assistant {
  background: #1a2a27;
  color: #cff3ec;
}

.v1-ai-input {
  position: relative;
  border: 0;
  background: transparent;
  display: grid;
  grid-template-columns: 1fr;
  flex: 0 0 auto;
  gap: 8px;
  padding: 0;
  align-items: end;
}

.v1-ai-prompt {
  border: 0;
  background: #18181a;
  color: var(--txt);
  padding: 7px 8px;
  resize: none;
  min-height: 64px;
  max-height: 180px;
  line-height: 1.4;
  font-size: 12px;
  font-family: var(--font-ui);
}

.v1-ai-input button {
  border: 0;
  background: color-mix(in oklab, var(--brand) 20%, var(--bg-soft));
  color: var(--txt);
  padding: 6px 10px;
  font-size: 12px;
  font-family: var(--font-ui);
  cursor: pointer;
}

.v1-ai-input button:hover {
  background: color-mix(in oklab, var(--brand) 34%, var(--bg-soft));
  color: #ffffff;
}

/* Overlaid on the prompt textarea's own bottom-right corner rather than
   given its own layout row - only shown while a reply (which may be up to
   MAX_ROUNDS sequential API calls, see ai-tools-engine-runtime.js) is
   in flight, via the same [hidden] toggle sendPrompt() already flips. */
.v1-ai-stop-btn {
  position: absolute;
  right: 6px;
  bottom: 6px;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: 3px;
  background: #c94b4b;
  color: #ffffff;
  font-size: 10px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.v1-ai-stop-btn:hover {
  background: #e15d5d;
  color: #ffffff;
}

/* Always visible now (not shown/hidden per in-flight request) - disabled
   instead while there's nothing to stop, so it stays a stable landmark
   instead of popping in/out of the layout on every send. */
.v1-ai-stop-btn:disabled {
  background: #4a4a4e;
  color: var(--txt-dim);
  cursor: default;
}

/* Overlaid on the prompt textarea's own bottom-left corner (Stop takes the
   bottom-right) - a rough character-count estimate (~4 chars/token), not a
   real per-provider tokenizer (see updateTokenCounter() in
   navigation-runtime.js). Toggled via RS "AI Properties" -> "Estimated
   tokens counter" checkbox. */
.v1-ai-token-counter {
  position: absolute;
  left: 6px;
  bottom: 6px;
  padding: 1px 5px;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.35);
  color: var(--txt-dim);
  font-size: 10px;
  line-height: 1.4;
  pointer-events: none;
}

/* RS "Config" tab (opened alongside the IP Scanner's LS/CS tabs). Most
   fields are still static scaffolding, not wired to real scan behavior -
   the exception is Performance's Host timeout / Max concurrent hosts,
   which are real, localStorage-backed settings (migrated from the old
   Default Scan Values tool - see initConfigPerformanceInputs() in
   scanner-sidebar-runtime.js). */
.v1-config-checkbox-row {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--txt-dim);
  font-size: 12px;
  cursor: pointer;
  margin-top: 6px;
}

/* Email Recon Sources group: label+checkbox next to a "?" help icon - the
   icon has to sit OUTSIDE .v1-config-checkbox-row's own <label>, since a
   native <label> toggles its checkbox on any click inside it, including a
   help icon that should only show a tooltip. */
.v1-config-checkbox-row-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 6px;
}

.v1-config-checkbox-row-wrap .v1-config-checkbox-row {
  margin-top: 0;
}

.v1-emailrecon-src-help {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid #3d424d;
  color: var(--txt-dim);
  font-size: 10px;
  cursor: help;
  flex: 0 0 auto;
}

.v1-emailrecon-src-help:hover {
  color: var(--txt);
  border-color: #565c68;
}

/* This class's own display:flex above beats the browser's default
   [hidden]{display:none} UA rule (author style always wins over UA style,
   regardless of hidden being a boolean attribute) - same specificity
   gotcha documented elsewhere in this codebase. Needed for
   #v1ConfigProtocolTcpSynRow's hidden-until-"Show unfinished tools"
   toggle to actually hide it. */
.v1-config-checkbox-row[hidden] {
  display: none !important;
}

.v1-config-checkbox-row:first-child {
  margin-top: 0;
}

/* Sits outside AI Properties' collapsible section (a sibling of .v1-tool-list,
   not inside its .v1-section-body) so it stays visible even when that
   section is collapsed - a top border marks it as its own, separate
   control rather than part of the list above. */
.v1-ai-prop-token-counter-row {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.v1-config-checkbox-row input[type="checkbox"],
.v1-config-checkbox-row input[type="radio"] {
  accent-color: var(--brand);
  cursor: pointer;
}

/* TCP SYN/UDP/OS Detection aren't implemented yet - grayed out (disabled,
   not hidden) until "Show unfinished tools" is on, see menu-runtime.js's
   unfinishedDisabledSelectors. */
.v1-config-checkbox-row:has(input:disabled) {
  opacity: 0.5;
  cursor: not-allowed;
}

.v1-config-checkbox-row input:disabled {
  cursor: not-allowed;
}

.v1-config-field-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 6px;
}

.v1-config-field-row:first-child {
  margin-top: 0;
}

.v1-config-field-row label,
.v1-config-field-row-note {
  color: var(--txt-dim);
  font-size: 12px;
}

.v1-config-field-row input[type="number"] {
  width: 84px;
  box-sizing: border-box;
  border: 1px solid #3f3f46;
  border-radius: 6px;
  background: #1f1f23;
  color: var(--txt);
  font-size: 12px;
  font-family: var(--font-ui);
  padding: 4px 6px;
  outline: none;
}

.v1-config-field-row input[type="number"]:focus {
  border-color: var(--brand);
}

.v1-config-subgroup-heading {
  margin-top: 10px;
  color: var(--txt-dim);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.v1-config-subgroup-heading:first-child {
  margin-top: 0;
}

/* RS "Config" tab's "Profiles" section (moved here from the LS scan-runner
   panel - it's a Config-tab feature, so its CSS belongs alongside the rest
   of Config's styles instead of the ip-scanner-tool-scoped stylesheet). */
.v1-profile-add-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.v1-profile-color-input {
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  border: 1px solid #3f3f46;
  border-radius: 6px;
  background: #1f1f23;
  padding: 2px;
  cursor: pointer;
}

.v1-profile-name-input {
  flex: 1;
  min-width: 0;
  box-sizing: border-box;
  border: 1px solid #3f3f46;
  border-radius: 6px;
  background: #1f1f23;
  color: var(--txt);
  font-size: 12px;
  font-family: var(--font-ui);
  padding: 5px 8px;
  outline: none;
}

.v1-profile-name-input:focus {
  border-color: var(--brand);
}

.v1-profile-add-btn {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border: 1px solid #3f3f46;
  border-radius: 6px;
  background: transparent;
  color: var(--txt);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}

.v1-profile-add-btn:hover {
  border-color: var(--brand);
  color: var(--brand);
}

.v1-profiles-list {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.v1-profile-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  border: 1px solid #3f3f46;
  border-radius: 8px;
  background: #22252a;
  padding: 5px 6px;
  cursor: pointer;
}

.v1-profile-item.is-active {
  border-color: var(--brand);
  box-shadow: 0 0 0 1px var(--brand) inset;
}

.v1-profile-swatch {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  flex: 0 0 auto;
}

/* LS IP Scanner "Profile" dropdown (custom, not a native <select> - a
   native <option> can't show a colored swatch separately from its text,
   and the closed-select display ignores an <option>'s own color, only
   using the <select>'s own style - see scanner-sidebar-runtime.js's
   renderProfileSelectOptions()). */
.v1-profile-dropdown {
  position: relative;
}

.v1-profile-dropdown-trigger {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 6px;
  background: #1f1f23;
  border: 1px solid #3f3f46;
  border-radius: 6px;
  color: var(--txt);
  font-size: 11px;
  font-family: var(--font-ui);
  padding: 4px 6px;
  cursor: pointer;
  outline: none;
}

.v1-profile-dropdown-trigger:focus {
  border-color: var(--brand);
}

.v1-profile-swatch--select {
  width: 11px;
  height: 11px;
  border-radius: 3px;
}

.v1-profile-dropdown-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
  color: var(--txt);
}

.v1-profile-dropdown-arrow {
  flex: 0 0 auto;
  color: var(--txt-dim);
  font-size: 10px;
}

.v1-profile-dropdown-menu {
  /* position:fixed with left/top/width set in JS (see
     positionProfileDropdownMenu() in scanner-sidebar-runtime.js) - a local
     position:absolute was found to paint behind later sidebar sections
     (sibling <li> content with no z-index still wins locally in some
     stacking contexts); fixed positioning escapes that entirely, mirroring
     panels-runtime.js's positionFloatingMenu(). */
  position: fixed;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 220px;
  overflow-y: auto;
  background: #252526;
  border: 1px solid #3c3c3c;
  border-radius: 8px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45);
  padding: 6px;
  box-sizing: border-box;
}

.v1-profile-dropdown-menu[hidden] {
  display: none;
}

.v1-profile-dropdown-menu .v1-profile-item:hover {
  border-color: var(--brand);
}

.v1-profile-name {
  min-width: 0;
  font-size: 12px;
  color: var(--txt);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.v1-profile-delete-btn {
  border: 1px solid #3f3f46;
  border-radius: 5px;
  background: transparent;
  color: var(--txt);
  font-size: 10px;
  font-family: var(--font-ui);
  padding: 2px 6px;
  cursor: pointer;
}

.v1-profile-delete-btn:hover {
  border-color: #c94b4b;
  color: #ffd2d2;
}

/* shell: AI Tools & Permissions tab (Options -> General's "Manage..."
   button) - a simple indented tree, one row per node, using the same
   select styling as the AI Assistant provider blocks above. */
.v1-ai-perm-tree {
  margin-top: 6px;
  border: 1px solid #2a2a2e;
  border-radius: 6px;
  overflow: hidden;
}

.v1-ai-perm-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border-bottom: 1px solid #2a2a2e;
}

.v1-ai-perm-row:last-child {
  border-bottom: none;
}

.v1-ai-perm-label {
  flex: 1;
  color: var(--txt);
  font-size: 12px;
}

.v1-ai-perm-select {
  border: 1px solid #3d424d;
  background: #22242a;
  color: var(--txt);
  font-size: 12px;
  padding: 3px 6px;
  min-width: 90px;
}

.v1-ai-perm-select:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.v1-ai-perm-lock {
  cursor: help;
}

/* Groups not yet wired to a real AI tool adapter (Network Monitor, IP
   Scanner) - shown so the tree stays a complete map of the app, but
   dimmed and non-interactive until that integration lands. */
.v1-ai-perm-row--unavailable {
  opacity: 0.45;
}

.v1-ai-perm-row--unavailable .v1-ai-perm-label {
  cursor: help;
}

.v1-ai-perm-log {
  margin-top: 6px;
  max-height: 200px;
  overflow-y: auto;
  border: 1px solid #2a2a2e;
  border-radius: 6px;
  background: #1b1d22;
  font-size: 11px;
  font-family: var(--font-mono);
}

.v1-ai-perm-log-item {
  padding: 4px 8px;
  border-bottom: 1px solid #2a2a2e;
  color: var(--txt-dim);
}

.v1-ai-perm-log-item:last-child {
  border-bottom: none;
}
