/* ============================================================
   Legacy Terminal: Paper (Light) — Specific Overrides
   
   Loaded ONLY when data-legacy="light" is active.
   Handles: forced white bg, darker nav icons, black ORK logo.
   
   NOTE: tokens.css shared overrides already handle:
   - border-radius: 0 everywhere
   - monospace font everywhere
   - no backdrop-filter
   - flat borders
   - CRT scanlines
   ============================================================ */

/* ── Force pure white background — no background image allowed.
   :not(.overlay-mode) — the overlay-pill/popover windows share this
   stylesheet; their chrome must stay transparent or the pill's 14px
   shadow-bleed padding renders as a solid white rectangle. ── */
html[data-legacy='light']:not(.overlay-mode) {
  background: #ffffff !important;
}

/* Kill the dark gradient pseudo-element */
html[data-legacy='light'] .app::before,
html[data-legacy='light'] .app::after {
  background: none !important;
  display: none !important;
}

html[data-legacy='light'] .app,
html[data-legacy='light'] main,
html[data-legacy='light'] .conversation-area,
html[data-legacy='light'] .sidebar,
html[data-legacy='light'] .main-content {
  background: #ffffff !important;
  background-image: none !important;
}

/* ── Tab bar strip ── */
html[data-legacy='light'] .strip-overlay {
  background: #f5f5f0 !important;
}

/* ── Top action bar ── */
html[data-legacy='light'] .top-action-bar {
  background: #ffffff !important;
}

/* ── Input wrapper border (visible on light bg) ── */
html[data-legacy='light'] .input-wrapper {
  border-color: #cccccc !important;
}

html[data-legacy='light'] .input-wrapper:focus-within {
  border-color: #999999 !important;
}

/* ── Tab styling for light mode ── */
html[data-legacy='light'] .tab {
  color: #777777 !important;
}

html[data-legacy='light'] .tab:hover {
  background: rgba(0, 0, 0, 0.04) !important;
  color: #333333 !important;
}

html[data-legacy='light'] .tab.active {
  background: #ffffff !important;
  color: #1a1a1a !important;
  border-top: 1px solid #000000;
  border-left: 1px solid #000000;
  border-right: 1px solid #000000;
}

html[data-legacy='light'] .tab-close {
  color: #999999 !important;
}

html[data-legacy='light'] .tab-close:hover {
  color: #333333 !important;
  background: rgba(0, 0, 0, 0.06) !important;
}

html[data-legacy='light'] .tab-pin {
  color: #999999 !important;
}

html[data-legacy='light'] .tab-pin:hover {
  color: #333333 !important;
}

html[data-legacy='light'] .scroll-arrow {
  color: #777777 !important;
}

html[data-legacy='light'] .scroll-arrow:hover {
  color: #333333 !important;
}

html[data-legacy='light'] .tab-popup {
  background: #ffffff !important;
  border: 1px solid #cccccc !important;
  box-shadow: 2px 2px 0 #cccccc !important;
}

html[data-legacy='light'] .popup-item {
  color: #555555 !important;
}

html[data-legacy='light'] .popup-item:hover {
  background: rgba(0, 0, 0, 0.04) !important;
  color: #1a1a1a !important;
}

html[data-legacy='light'] .popup-empty {
  color: #999999 !important;
}

html[data-legacy='light'] .tab-group-label {
  color: #999999 !important;
}

html[data-legacy='light'] .drop-indicator {
  background: rgba(0, 0, 0, 0.3) !important;
  box-shadow: none !important;
}

/* ── Window controls (Windows) ── */
html[data-legacy='light'] .win-btn {
  color: rgba(0, 0, 0, 0.5) !important;
}

html[data-legacy='light'] .win-btn:hover {
  color: rgba(0, 0, 0, 0.8) !important;
}

/* ── User message bubble ── */
html[data-legacy='light'] .message-user .message-content {
  background: #f0f0ea !important;
  border-color: #dddddd !important;
}

/* ── Nav icons: much darker, hover makes them even darker ── */
html[data-legacy='light'] .nav-item svg,
html[data-legacy='light'] .nav-item img {
  opacity: 0.7 !important;
  filter: brightness(0.3) !important;
}

html[data-legacy='light'] .nav-item:hover svg,
html[data-legacy='light'] .nav-item:hover img {
  opacity: 1 !important;
  filter: brightness(0.1) !important;
}

html[data-legacy='light'] .nav-item.active svg,
html[data-legacy='light'] .nav-item.active img {
  opacity: 1 !important;
  filter: brightness(0) !important;
}

/* ── ORK logo in sidebar: no invert filter since the 2026-09 brand refresh.
   The drop icon ships a pre-colored paper variant (drop2_logo.png) and the
   wordmark (ork_white.png) is white in both themes — variant swapping lives
   in Sidebar.svelte (html[data-legacy] display swap), nothing to do here. ── */

/* ── Header icon buttons ── */
html[data-legacy='light'] .header-icon-btn {
  color: #1a1a1a !important;
}

html[data-legacy='light'] .header-icon-btn:hover {
  color: #000000 !important;
}

/* ── Session indicators ── */
html[data-legacy='light'] .session-indicator {
  background: #333333 !important;
}

html[data-legacy='light'] .sidebar-session-item.active .session-indicator {
  background: #000000 !important;
}

/* ── Sidebar footer icons ── */
html[data-legacy='light'] .sidebar-footer .nav-item svg,
html[data-legacy='light'] .sidebar-footer .nav-item img {
  opacity: 0.6 !important;
  filter: brightness(0.3) !important;
}

html[data-legacy='light'] .sidebar-footer .nav-item:hover svg,
html[data-legacy='light'] .sidebar-footer .nav-item:hover img {
  opacity: 1 !important;
  filter: brightness(0.1) !important;
}

/* ── Toggle switches ── */
html[data-legacy='light'] .toggle-switch {
  background: rgba(0, 0, 0, 0.08) !important;
  border-color: rgba(0, 0, 0, 0.2) !important;
}

html[data-legacy='light'] .toggle-switch.on {
  background: rgba(0, 0, 0, 0.15) !important;
  border-color: rgba(0, 0, 0, 0.35) !important;
}

html[data-legacy='light'] .toggle-thumb {
  background: #666666 !important;
  opacity: 0.7 !important;
}

html[data-legacy='light'] .toggle-switch.on .toggle-thumb {
  background: #000000 !important;
  opacity: 1 !important;
}

/* ── Scrollbars ── */
html[data-legacy='light'] ::-webkit-scrollbar-track {
  background: #f0f0f0 !important;
}

html[data-legacy='light'] ::-webkit-scrollbar-thumb {
  background: #bbbbbb !important;
  border-color: #f0f0f0 !important;
}

html[data-legacy='light'] ::-webkit-scrollbar-thumb:hover {
  background: #999999 !important;
}

html[data-legacy='light'] .sidebar::-webkit-scrollbar-thumb {
  background: #cccccc !important;
}

html[data-legacy='light'] .sidebar::-webkit-scrollbar-thumb:hover {
  background: #999999 !important;
}

/* ── Sub-panel header ── */
html[data-legacy='light'] .sub-panel-title {
  color: #1a1a1a !important;
}

html[data-legacy='light'] .back-btn {
  color: #333333 !important;
}

/* ── Sidebar border ── */
html[data-legacy='light'] .sidebar {
  border-right-color: #aaaaaa !important;
}

/* ── Credential cards ── */
html[data-legacy='light'] .credential-card {
  border-color: #cccccc !important;
  background: #fafafa !important;
}

/* ── Input fields ── */
html[data-legacy='light'] input,
html[data-legacy='light'] textarea,
html[data-legacy='light'] [contenteditable] {
  background: #fafafa !important;
  border-color: #cccccc !important;
  color: #1a1a1a !important;
}

html[data-legacy='light'] input:focus,
html[data-legacy='light'] textarea:focus,
html[data-legacy='light'] [contenteditable]:focus {
  border-color: #006400 !important;
}

/* ── Key select menu ── */
html[data-legacy='light'] .key-select-menu {
  background: #ffffff !important;
  border-color: #aaaaaa !important;
  box-shadow: 2px 2px 0 #cccccc !important;
}

html[data-legacy='light'] .select-menu-item:hover {
  background: #f0f0f0 !important;
}

/* ── Add key button ── */
html[data-legacy='light'] .add-key-btn {
  color: #006400 !important;
}

html[data-legacy='light'] .add-key-btn:hover {
  color: #004400 !important;
}

/* ── Section titles ── */
html[data-legacy='light'] .section-title {
  color: #555555 !important;
}

/* ── Setting labels ── */
html[data-legacy='light'] .setting-label {
  color: #1a1a1a !important;
}

/* ── Workspace path ── */
html[data-legacy='light'] .workspace-path {
  color: #333333 !important;
}

/* ── Action links ── */
html[data-legacy='light'] .action-link {
  color: #006400 !important;
}

html[data-legacy='light'] .action-link:hover {
  color: #004400 !important;
}

/* ── Background section: disable in Paper mode ── */
html[data-legacy='light'] .settings-section:has(.bg-grid) {
  opacity: 0.4;
  pointer-events: none;
}

/* ── Blur/brightness sliders: disable in Paper mode ── */
html[data-legacy='light'] .blur-slider-row {
  opacity: 0.4;
  pointer-events: none;
}

/* ── Legacy option buttons ── */
html[data-legacy='light'] .legacy-option {
  color: #333333 !important;
}

html[data-legacy='light'] .legacy-option:hover {
  color: #000000 !important;
}

html[data-legacy='light'] .legacy-option.active {
  color: #006400 !important;
}

/* ── Divider lines ── */
html[data-legacy='light'] .divider-line {
  background: #cccccc !important;
}

html[data-legacy='light'] .divider-label {
  color: #777777 !important;
}

/* ── Accent presets ── */
html[data-legacy='light'] .accent-preset {
  color: #333333 !important;
}

html[data-legacy='light'] .accent-preset:hover {
  color: #000000 !important;
}

html[data-legacy='light'] .accent-preset.active {
  color: #000000 !important;
}

/* ── Bar style options ── */
html[data-legacy='light'] .bar-style-option {
  color: #333333 !important;
}

html[data-legacy='light'] .bar-style-option:hover {
  color: #000000 !important;
}

html[data-legacy='light'] .bar-style-option.active {
  color: #000000 !important;
}

html[data-legacy='light'] .bar-style-option.active .bar-dot {
  border-color: #000000 !important;
}

/* ── Context hints ── */
html[data-legacy='light'] .context-hint {
  color: #888888 !important;
}

/* ── Legacy hint text ── */
html[data-legacy='light'] .legacy-hint {
  color: #888888 !important;
}

/* ── About section ── */
html[data-legacy='light'] .about-version {
  color: #555555 !important;
}

html[data-legacy='light'] .about-build {
  color: #888888 !important;
}

/* ── Empty hints ── */
html[data-legacy='light'] .empty-hint {
  color: #888888 !important;
}

/* ── Workspace hint ── */
html[data-legacy='light'] .workspace-hint {
  color: #888888 !important;
}

/* ── Workspace placeholder ── */
html[data-legacy='light'] .workspace-placeholder {
  color: #888888 !important;
}

/* ── Provider dot in select ── */
html[data-legacy='light'] .key-select-btn {
  background: rgba(0, 0, 0, 0.04) !important;
  color: #1a1a1a !important;
}

html[data-legacy='light'] .key-select-btn:hover {
  background: rgba(0, 0, 0, 0.08) !important;
}

/* ── Credential name ── */
html[data-legacy='light'] .credential-name {
  color: #1a1a1a !important;
}

/* ── Credential action buttons ── */
html[data-legacy='light'] .cred-action-btn {
  color: #333333 !important;
}

html[data-legacy='light'] .cred-action-btn.delete {
  color: #cc0000 !important;
}

/* ── Key error ── */
html[data-legacy='light'] .key-error {
  color: #cc0000 !important;
}

/* ── Form hint ── */
html[data-legacy='light'] .form-hint {
  color: #888888 !important;
}

/* ── Provider dot ── */
html[data-legacy='light'] .provider-dot {
  box-shadow: none !important;
}

/* ── Chevron in select ── */
html[data-legacy='light'] .chevron {
  color: #666666 !important;
}

/* ── Check mark in select ── */
html[data-legacy='light'] .check {
  color: #006400 !important;
}

/* ── Select menu item text ── */
html[data-legacy='light'] .select-menu-item {
  color: #333333 !important;
}

html[data-legacy='light'] .select-menu-item:hover {
  color: #000000 !important;
}

html[data-legacy='light'] .select-menu-item.active {
  color: #000000 !important;
}

/* ── Key input placeholder ── */
html[data-legacy='light'] .key-input::placeholder {
  color: #999999 !important;
}

/* ── Session search ── */
html[data-legacy='light'] .session-search-input {
  color: #1a1a1a !important;
}

html[data-legacy='light'] .session-search-input::placeholder {
  color: #999999 !important;
}

html[data-legacy='light'] .session-search-icon {
  color: #666666 !important;
}

/* ── Session items ── */
html[data-legacy='light'] .sidebar-session-item {
  color: #333333 !important;
}

html[data-legacy='light'] .sidebar-session-item:hover {
  color: #000000 !important;
  background: rgba(0, 0, 0, 0.03) !important;
}

html[data-legacy='light'] .sidebar-session-item.active {
  color: #000000 !important;
  background: rgba(0, 100, 0, 0.04) !important;
}

html[data-legacy='light'] .sidebar-session-item.confirming {
  background: rgba(204, 0, 0, 0.06) !important;
}

/* ── Session action buttons ── */
html[data-legacy='light'] .sidebar-session-action {
  color: #666666 !important;
}

html[data-legacy='light'] .sidebar-session-action:hover {
  color: #000000 !important;
}

html[data-legacy='light'] .sidebar-session-action.save {
  color: #006400 !important;
}

/* ── New session button ── */
html[data-legacy='light'] .sidebar-new-session-btn {
  color: #333333 !important;
}

html[data-legacy='light'] .sidebar-new-session-btn:hover {
  color: #000000 !important;
  background: rgba(0, 0, 0, 0.04) !important;
}

/* ── Page action buttons ── */
html[data-legacy='light'] .page-action-btn {
  background: rgba(0, 0, 0, 0.06) !important;
  color: #333333 !important;
}

html[data-legacy='light'] .page-action-btn:hover {
  background: rgba(0, 0, 0, 0.1) !important;
  color: #000000 !important;
}

/* ── Sessions page title ── */
html[data-legacy='light'] .sessions-page-title {
  color: #555555 !important;
}

/* ── Group header ── */
html[data-legacy='light'] .group-header:hover {
  background: rgba(0, 0, 0, 0.04) !important;
}

html[data-legacy='light'] .group-name {
  color: #333333 !important;
}

html[data-legacy='light'] .group-count {
  background: rgba(0, 0, 0, 0.06) !important;
  color: #555555 !important;
}

/* ── Group chevron ── */
html[data-legacy='light'] .group-chevron {
  color: #666666 !important;
}

/* ── Group actions ── */
html[data-legacy='light'] .group-actions button {
  color: #666666 !important;
}

html[data-legacy='light'] .group-actions button:hover {
  color: #000000 !important;
}

/* ── New group input ── */
html[data-legacy='light'] .new-group-input {
  background: #fafafa !important;
  border-color: #cccccc !important;
  color: #1a1a1a !important;
}

html[data-legacy='light'] .new-group-confirm {
  color: #006400 !important;
}

html[data-legacy='light'] .new-group-cancel:hover {
  color: #cc0000 !important;
}

/* ── Trash section ── */
html[data-legacy='light'] .trash-header {
  color: #555555 !important;
  border-top-color: #cccccc !important;
}

html[data-legacy='light'] .trash-header:hover {
  color: #000000 !important;
}

html[data-legacy='light'] .trash-count {
  background: rgba(0, 0, 0, 0.06) !important;
  color: #555555 !important;
}

html[data-legacy='light'] .trash-item:hover {
  background: rgba(0, 0, 0, 0.04) !important;
}

html[data-legacy='light'] .trash-item-name {
  color: #333333 !important;
}

html[data-legacy='light'] .trash-action {
  color: #666666 !important;
}

html[data-legacy='light'] .trash-action:hover {
  color: #000000 !important;
}

html[data-legacy='light'] .trash-action.restore:hover {
  color: #006400 !important;
}

html[data-legacy='light'] .trash-action.delete:hover {
  color: #cc0000 !important;
}

html[data-legacy='light'] .empty-trash-btn {
  border-color: #cccccc !important;
  color: #666666 !important;
}

html[data-legacy='light'] .empty-trash-btn:hover {
  background: rgba(204, 0, 0, 0.06) !important;
  color: #cc0000 !important;
  border-color: rgba(204, 0, 0, 0.2) !important;
}

/* ── Sidebar footer border ── */
html[data-legacy='light'] .sidebar-footer {
  border-top-color: #cccccc !important;
}

/* ── Sidebar badge ── */
html[data-legacy='light'] .sidebar-badge {
  background: rgba(0, 0, 0, 0.06) !important;
  color: #555555 !important;
}

/* ── Sessions nav divider ── */
html[data-legacy='light'] .sessions-nav-divider {
  background: #dddddd !important;
}

/* ── Onboarding text ── */
html[data-legacy='light'] .onboarding-text {
  color: #888888 !important;
}

/* ── Session search status ── */
html[data-legacy='light'] .session-search-status {
  color: #888888 !important;
}

/* ── Session search result ── */
html[data-legacy='light'] .session-search-result-name {
  color: #1a1a1a !important;
}

html[data-legacy='light'] .session-search-result-snippet {
  color: #888888 !important;
}

html[data-legacy='light'] .session-search-result:hover {
  background: rgba(0, 0, 0, 0.04) !important;
  color: #000000 !important;
}

/* ── Sidebar label ── */
html[data-legacy='light'] .sidebar-label {
  color: #1a1a1a !important;
}

/* ── Move popup ── */
html[data-legacy='light'] .move-popup {
  background: #ffffff !important;
  border-color: #aaaaaa !important;
  box-shadow: 2px 2px 0 #cccccc !important;
}

html[data-legacy='light'] .move-popup-title {
  color: #555555 !important;
}

html[data-legacy='light'] .move-popup-item {
  color: #333333 !important;
}

html[data-legacy='light'] .move-popup-item:hover {
  background: #f0f0f0 !important;
  color: #000000 !important;
}

/* ── Rename input ── */
html[data-legacy='light'] .sidebar-rename-input {
  color: #1a1a1a !important;
}

html[data-legacy='light'] .group-rename-input {
  color: #1a1a1a !important;
}

/* ── Compact nav items ── */
html[data-legacy='light'] .nav-item.compact {
  color: #555555 !important;
}

html[data-legacy='light'] .nav-item.compact:hover {
  color: #000000 !important;
  background: rgba(0, 0, 0, 0.04) !important;
}

html[data-legacy='light'] .nav-item.compact.active {
  color: #000000 !important;
}

/* ── Nav item states ── */
html[data-legacy='light'] .nav-item.active {
  background: rgba(0, 100, 0, 0.06) !important;
}

html[data-legacy='light'] .nav-item:hover {
  background: rgba(0, 0, 0, 0.04) !important;
}

/* ── Session group section ── */
html[data-legacy='light'] .session-group-section.drag-over {
  background: rgba(0, 100, 0, 0.06) !important;
}

/* ── Reorder ghost ── */
html[data-legacy='light'] .reorder-ghost {
  background: #ffffff !important;
  border-color: #aaaaaa !important;
}

/* ── Toggle arrow button ── */
html[data-legacy='light'] .toggle-arrow-btn {
  color: #666666 !important;
}

html[data-legacy='light'] .toggle-arrow-btn:hover {
  color: #000000 !important;
}

/* ── Workspace icon ── */
html[data-legacy='light'] .workspace-icon {
  color: #555555 !important;
}

html[data-legacy='light'] .workspace-row:hover .workspace-icon {
  color: #000000 !important;
}

html[data-legacy='light'] .workspace-row:hover .workspace-path {
  color: #000000 !important;
}

/* ── Workspace clear button ── */
html[data-legacy='light'] .workspace-clear {
  color: #888888 !important;
}

html[data-legacy='light'] .workspace-clear:hover {
  color: #cc0000 !important;
}

/* ── Background preview borders ── */
html[data-legacy='light'] .bg-preview {
  border: 1px solid #cccccc !important;
}

html[data-legacy='light'] .bg-name {
  color: #888888 !important;
}

html[data-legacy='light'] .bg-option:hover .bg-name {
  color: #333333 !important;
}

html[data-legacy='light'] .bg-option.active .bg-name {
  color: #000000 !important;
}

/* ── Blur label ── */
html[data-legacy='light'] .blur-label {
  color: #555555 !important;
}

/* ── Custom theme labels ── */
html[data-legacy='light'] .bar-style-name {
  color: #555555 !important;
}

html[data-legacy='light'] .bar-style-option:hover .bar-style-name,
html[data-legacy='light'] .bar-style-option.active .bar-style-name {
  color: #000000 !important;
}

/* ── Accent name ── */
html[data-legacy='light'] .accent-name {
  color: #555555 !important;
}

html[data-legacy='light'] .accent-preset:hover .accent-name,
html[data-legacy='light'] .accent-preset.active .accent-name {
  color: #000000 !important;
}

/* ── Legacy name ── */
html[data-legacy='light'] .legacy-name {
  color: #555555 !important;
}

html[data-legacy='light'] .legacy-option:hover .legacy-name {
  color: #000000 !important;
}

/* Active keeps the dark-green accent — it's the only selection cue now
   that the chip has no border or background. */
html[data-legacy='light'] .legacy-option.active .legacy-name {
  color: #006400 !important;
}

/* ── Custom darkness slider ── */
html[data-legacy='light'] .custom-darkness-slider::-webkit-slider-runnable-track {
  background: rgba(0, 0, 0, 0.12) !important;
}

html[data-legacy='light'] .custom-darkness-slider::-webkit-slider-thumb {
  background: #333333 !important;
}

/* ── Blur slider ── */
html[data-legacy='light'] .blur-slider::-webkit-slider-runnable-track {
  background: rgba(0, 0, 0, 0.12) !important;
}

html[data-legacy='light'] .blur-slider::-webkit-slider-thumb {
  background: #333333 !important;
  box-shadow: none !important;
}

/* ── Key input ── */
html[data-legacy='light'] .key-input {
  background: #fafafa !important;
  border-color: #cccccc !important;
  color: #1a1a1a !important;
}

html[data-legacy='light'] .key-input:focus {
  background: #ffffff !important;
  border-color: #006400 !important;
  outline: none !important;
}

/* ── Add key form ── */
html[data-legacy='light'] .add-key-form {
  background: #fafafa !important;
  border-color: #cccccc !important;
}

/* ── Session search row ── */
html[data-legacy='light'] .session-search-row {
  background: rgba(0, 0, 0, 0.03) !important;
}

/* ── Sidebar header ── */
html[data-legacy='light'] .sidebar-header {
  border-bottom-color: transparent !important;
}

/* ── Sub-panel header ── */
html[data-legacy='light'] .sub-panel-header {
  border-bottom-color: #cccccc !important;
}

/* ── Sidebar session items scrollbar ── */
html[data-legacy='light'] .sidebar-session-items::-webkit-scrollbar-thumb {
  background: #cccccc !important;
}

/* ── Sidebar content overflow ── */
html[data-legacy='light'] .sidebar-content {
  overflow: hidden !important;
}

/* ── Sidebar sub-panel padding ── */
html[data-legacy='light'] .sidebar-sub-panel {
  padding: 0 4px 0 0 !important;
}

/* ── Settings section margin ── */
html[data-legacy='light'] .settings-section {
  margin-bottom: 10px !important;
}

/* ── Context section ── */
html[data-legacy='light'] .settings-section-context {
  margin-bottom: 6px !important;
}

/* ── Credential list gap ── */
html[data-legacy='light'] .credential-list {
  gap: 2px !important;
}

/* ── Sidebar session items max-height ── */
html[data-legacy='light'] .sidebar-session-items {
  max-height: 240px !important;
}

/* ── Sessions page ── */
html[data-legacy='light'] .sessions-page {
  gap: 2px !important;
  padding: 2px 0 !important;
}

/* ── Sessions page header ── */
html[data-legacy='light'] .sessions-page-header {
  padding: 6px 8px 2px !important;
}

/* ── Sessions page header actions ── */
html[data-legacy='light'] .sessions-page-actions {
  gap: 4px !important;
}

/* ── Session search row ── */
html[data-legacy='light'] .session-search-row {
  margin: 0 4px 2px !important;
  padding: 5px 10px !important;
}

/* ── New group input row ── */
html[data-legacy='light'] .new-group-input-row {
  padding: 2px 8px !important;
}

/* ── Group header ── */
html[data-legacy='light'] .group-header {
  padding: 4px 8px !important;
}

/* ── Group sessions ── */
html[data-legacy='light'] .group-sessions {
  padding: 0 4px !important;
}

/* ── Sidebar session item padding ── */
html[data-legacy='light'] .sidebar-session-item {
  padding: 6px 8px !important;
}

/* ── New session button padding ── */
html[data-legacy='light'] .sidebar-new-session-btn {
  padding: 6px 8px !important;
}

/* ── Sessions nav divider ── */
html[data-legacy='light'] .sessions-nav-divider {
  margin: 4px 10px !important;
}

/* ── Sidebar session items padding ── */
html[data-legacy='light'] .sidebar-session-items {
  padding: 4px 0 !important;
}

/* ── Session search results padding ── */
html[data-legacy='light'] .session-search-results {
  padding: 0 4px !important;
}

/* ── Session search result padding ── */
html[data-legacy='light'] .session-search-result {
  padding: 4px 10px !important;
  gap: 1px !important;
}

/* ── Session search result name ── */
html[data-legacy='light'] .session-search-result-name {
  font-size: 12px !important;
}

/* ── Session search result snippet ── */
html[data-legacy='light'] .session-search-result-snippet {
  font-size: 10px !important;
}

/* ── Sidebar session name ── */
html[data-legacy='light'] .sidebar-session-name {
  font-size: 13px !important;
}

/* ── Sidebar session action size ── */
html[data-legacy='light'] .sidebar-session-action {
  width: 20px !important;
  height: 20px !important;
}

/* ── Sidebar rename input ── */
html[data-legacy='light'] .sidebar-rename-input {
  font-size: 13px !important;
  padding: 1px 6px !important;
}

/* ── Group rename input ── */
html[data-legacy='light'] .group-rename-input {
  font-size: 12px !important;
  padding: 1px 6px !important;
}

/* ── New group input ── */
html[data-legacy='light'] .new-group-input {
  font-size: 12px !important;
  padding: 3px 8px !important;
}

/* ── New group confirm/cancel size ── */
html[data-legacy='light'] .new-group-confirm,
html[data-legacy='light'] .new-group-cancel {
  width: 22px !important;
  height: 22px !important;
}

/* ── Move popup ── */
html[data-legacy='light'] .move-popup {
  padding: 2px !important;
}

html[data-legacy='light'] .move-popup-title {
  padding: 2px 10px 4px !important;
}

html[data-legacy='light'] .move-popup-item {
  padding: 4px 10px !important;
}

/* ── Sidebar badge ── */
html[data-legacy='light'] .sidebar-badge {
  font-size: 10px !important;
  padding: 1px 6px !important;
}

/* ── Sidebar label font ── */
html[data-legacy='light'] .sidebar-label {
  font-size: 13px !important;
}

/* ── Sidebar footer label ── */
html[data-legacy='light'] .sidebar-footer .sidebar-label {
  font-size: 13px !important;
}

/* ── Session indicator size ── */
html[data-legacy='light'] .session-indicator {
  width: 5px !important;
  height: 5px !important;
}

/* ── Sidebar session actions gap ── */
html[data-legacy='light'] .sidebar-session-actions {
  gap: 1px !important;
}

/* ── Sidebar footer nav item gap ── */
html[data-legacy='light'] .sidebar-footer .nav-item {
  gap: 10px !important;
}

/* ── Sidebar footer padding ── */
html[data-legacy='light'] .sidebar-footer {
  padding-top: 12px !important;
}

/* ── Trash section ── */
html[data-legacy='light'] .trash-section {
  margin-top: 6px !important;
  padding-top: 6px !important;
}

/* ── Trash header padding ── */
html[data-legacy='light'] .trash-header {
  padding: 4px 12px !important;
}

/* ── Trash items padding ── */
html[data-legacy='light'] .trash-items {
  padding: 2px 8px 6px !important;
}

/* ── Trash item padding ── */
html[data-legacy='light'] .trash-item {
  padding: 4px 8px !important;
  margin-bottom: 1px !important;
}

/* ── Empty trash button ── */
html[data-legacy='light'] .empty-trash-btn {
  margin-top: 4px !important;
  padding: 4px !important;
}

/* ── Sidebar nav gap ── */
html[data-legacy='light'] .sidebar-nav {
  gap: 2px !important;
}

/* ── Nav item font ── */
html[data-legacy='light'] .nav-item {
  font-size: 14px !important;
}

/* ── Nav item svg/img size ── */
html[data-legacy='light'] .nav-item svg,
html[data-legacy='light'] .nav-item img {
  width: 30px !important;
  height: 30px !important;
}

/* ── Sidebar logo sizes ──
   Paper matches the Phosphor sizes (36px drop / 35px wordmark, the base values
   in Sidebar.svelte). The previous 32/30 overrides made the brand mark read
   smaller in Paper than in Phosphor for no reason. */
html[data-legacy='light'] .sidebar-logo-icon {
  width: 36px !important;
  height: 36px !important;
}

html[data-legacy='light'] .sidebar-logo-rk {
  height: 35px !important;
}

/* ── Sidebar padding ── */
html[data-legacy='light'] .sidebar {
  padding: 20px 4px 20px 8px !important;
}

/* ── Sidebar header padding ── */
html[data-legacy='light'] .sidebar-header {
  padding: 20px 0 20px !important;
}

/* ── Hero welcome logo: no invert filter since the 2026-09 brand refresh —
   the hero ships a pre-colored paper composite (drop_ork_dark2_logo.png) and
   the variant swap lives in ConversationArea.svelte. The old ::after shadow
   was removed with the round orkv2 logo it was tuned for. ── */

/* ── Widget buttons (top action bar) — borderless text items on white,
   separated only by the pipe dividers already in the bar. ── */
html[data-legacy='light'] .widget-button {
  color: rgba(0, 0, 0, 0.55) !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;
}

html[data-legacy='light'] .widget-button:hover {
  color: rgba(0, 0, 0, 0.85) !important;
  border-color: transparent !important;
}

html[data-legacy='light'] .widget-btn-icon {
  opacity: 0.6 !important;
}

html[data-legacy='light'] .widget-button:hover .widget-btn-icon {
  opacity: 1 !important;
}

/* ── Pill text (bottom action bar) — dark text on light bg.
   The pill's inner .pill-title/.pill-value set explicit whites in
   ModelPillBar.svelte (they beat inheritance from .pill-text), so they
   need their own overrides — same colors as .widget-button above. ── */
html[data-legacy='light'] .pill-text {
  color: rgba(0, 0, 0, 0.55) !important;
}

html[data-legacy='light'] .pill-title {
  color: rgba(0, 0, 0, 0.45) !important;
}

html[data-legacy='light'] .pill-value {
  color: rgba(0, 0, 0, 0.55) !important;
}

html[data-legacy='light'] .pill-text:hover {
  color: rgba(0, 0, 0, 0.85) !important;
}

html[data-legacy='light'] .pill-text:hover .pill-title,
html[data-legacy='light'] .pill-text:hover .pill-value {
  color: rgba(0, 0, 0, 0.85) !important;
}

html[data-legacy='light'] .pill-dropdown.open .pill-text {
  background: rgba(0, 0, 0, 0.05) !important;
  color: rgba(0, 0, 0, 0.75) !important;
}

html[data-legacy='light'] .pill-dropdown.open .pill-title,
html[data-legacy='light'] .pill-dropdown.open .pill-value {
  color: rgba(0, 0, 0, 0.75) !important;
}

/* ── Tool cards — full paper sweep (all tool elements light grey) ── */

/* Streaming tool window (multi-entry container) */
html[data-legacy='light'] .tool-window {
  background: rgba(0, 0, 0, 0.04) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

html[data-legacy='light'] .tool-window::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15) !important;
}

html[data-legacy='light'] .tool-window-header {
  background: rgba(0, 0, 0, 0.02) !important;
}

html[data-legacy='light'] .tool-window-header[role='button']:hover {
  background: rgba(0, 0, 0, 0.05) !important;
}

html[data-legacy='light'] .tool-window-label {
  color: rgba(0, 0, 0, 0.5) !important;
}

html[data-legacy='light'] .tool-count {
  background: rgba(0, 0, 0, 0.08) !important;
  color: rgba(0, 0, 0, 0.55) !important;
}

/* Tool entries (rows inside the window) */
html[data-legacy='light'] .tool-entry:hover {
  background: rgba(0, 0, 0, 0.03) !important;
}

html[data-legacy='light'] .tool-entry-header {
  color: rgba(0, 0, 0, 0.85) !important;
}

html[data-legacy='light'] .tool-action {
  color: rgba(0, 0, 0, 0.85) !important;
}

html[data-legacy='light'] .tool-summary {
  color: rgba(0, 0, 0, 0.5) !important;
}

html[data-legacy='light'] .tool-duration {
  color: rgba(0, 0, 0, 0.4) !important;
}

/* Group entries (nested tool groups) */
html[data-legacy='light'] .group-entry:hover {
  background: rgba(0, 0, 0, 0.03) !important;
}

html[data-legacy='light'] .group-entry-header {
  color: rgba(0, 0, 0, 0.85) !important;
}

html[data-legacy='light'] .group-badge {
  background: rgba(0, 0, 0, 0.06) !important;
  color: rgba(0, 0, 0, 0.55) !important;
}

html[data-legacy='light'] .group-command {
  color: rgba(0, 0, 0, 0.5) !important;
}

/* Standalone tool card (single tool, not in a window) */
html[data-legacy='light'] .standalone-tool-card {
  background: rgba(0, 0, 0, 0.04) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

html[data-legacy='light'] .standalone-tool-card:hover {
  background: rgba(0, 0, 0, 0.07) !important;
}

html[data-legacy='light'] .standalone-tool-card .card-header {
  color: rgba(0, 0, 0, 0.85) !important;
}

/* Collapsed summary (already existed, kept here for completeness) */
html[data-legacy='light'] .tool-collapsed-summary {
  background: rgba(0, 0, 0, 0.04) !important;
  color: rgba(0, 0, 0, 0.5) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

html[data-legacy='light'] .tool-collapsed-summary:hover {
  background: rgba(0, 0, 0, 0.08) !important;
  color: rgba(0, 0, 0, 0.75) !important;
}

html[data-legacy='light'] .summary-duration {
  color: rgba(0, 0, 0, 0.4) !important;
}

/* ── Code block + copy button — match tool card lightness ── */
html[data-legacy='light'] .assistant-content .code-block,
html[data-legacy='light'] .code-block {
  background: rgba(0, 0, 0, 0.04) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

html[data-legacy='light'] .code-header {
  border-bottom-color: rgba(0, 0, 0, 0.06) !important;
}

html[data-legacy='light'] .code-lang {
  color: rgba(0, 0, 0, 0.5) !important;
}

html[data-legacy='light'] .code-copy-btn {
  color: rgba(0, 0, 0, 0.5) !important;
}

html[data-legacy='light'] .code-copy-btn:hover {
  color: rgba(0, 0, 0, 0.85) !important;
}

html[data-legacy='light'] .code-copy-btn.copied {
  color: #16a34a !important;
}

/* ── Paste toggle (long user messages "Show more") — paper mode ── */
html[data-legacy='light'] .paste-toggle {
  background: rgba(0, 0, 0, 0.04) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  color: rgba(0, 0, 0, 0.5) !important;
}

html[data-legacy='light'] .paste-toggle:hover {
  background: rgba(0, 0, 0, 0.08) !important;
  color: rgba(0, 0, 0, 0.85) !important;
}

html[data-legacy='light'] .paste-collapsed {
  color: rgba(0, 0, 0, 0.65) !important;
}

html[data-legacy='light'] .paste-collapsed:hover {
  background: rgba(0, 0, 0, 0.04) !important;
}

/* ── Feedback popup — paper mode (dialog, header, body, footer, inputs) ── */
html[data-legacy='light'] .popup-backdrop {
  background: rgba(0, 0, 0, 0.25) !important;
}

html[data-legacy='light'] .popup-dialog {
  background: rgba(252, 250, 245, 0.97) !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2) !important;
}

html[data-legacy='light'] .popup-header {
  border-bottom-color: rgba(0, 0, 0, 0.08) !important;
}

html[data-legacy='light'] .header-title {
  color: rgba(0, 0, 0, 0.85) !important;
}

html[data-legacy='light'] .close-btn {
  color: rgba(0, 0, 0, 0.5) !important;
}

html[data-legacy='light'] .close-btn:hover {
  background: rgba(0, 0, 0, 0.06) !important;
  color: rgba(0, 0, 0, 0.85) !important;
}

html[data-legacy='light'] .popup-body,
html[data-legacy='light'] .inline-root {
  background: transparent !important;
}

html[data-legacy='light'] .type-pill {
  border-color: rgba(0, 0, 0, 0.1) !important;
  color: rgba(0, 0, 0, 0.65) !important;
}

html[data-legacy='light'] .type-pill:hover {
  background: rgba(0, 0, 0, 0.04) !important;
}

html[data-legacy='light'] .type-pill.active {
  background: rgba(99, 102, 241, 0.12) !important;
  border-color: rgba(99, 102, 241, 0.4) !important;
  color: rgba(0, 0, 0, 0.85) !important;
}

html[data-legacy='light'] .fb-input,
html[data-legacy='light'] .fb-textarea {
  background: rgba(0, 0, 0, 0.03) !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
  color: rgba(0, 0, 0, 0.85) !important;
}

html[data-legacy='light'] .fb-input::placeholder,
html[data-legacy='light'] .fb-textarea::placeholder {
  color: rgba(0, 0, 0, 0.4) !important;
}

html[data-legacy='light'] .screenshot-preview {
  border-color: rgba(0, 0, 0, 0.1) !important;
}

html[data-legacy='light'] .meta-info {
  border-top-color: rgba(0, 0, 0, 0.06) !important;
  color: rgba(0, 0, 0, 0.5) !important;
}

html[data-legacy='light'] .popup-footer {
  border-top-color: rgba(0, 0, 0, 0.08) !important;
}

html[data-legacy='light'] .btn-ghost {
  border-color: rgba(0, 0, 0, 0.1) !important;
  color: rgba(0, 0, 0, 0.65) !important;
}

html[data-legacy='light'] .btn-ghost:hover {
  background: rgba(0, 0, 0, 0.04) !important;
  color: rgba(0, 0, 0, 0.85) !important;
}

/* ===== Sticky "last user message" header (Claude Code style) ===== */
html[data-legacy='light'] .last-user-bar {
  background: rgba(252, 250, 245, 0.82) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border-bottom-color: rgba(0, 0, 0, 0.08) !important;
}
html[data-legacy='light'] .last-user-bar:hover {
  background: rgba(248, 245, 238, 0.92) !important;
}
html[data-legacy='light'] .last-user-label {
  color: rgba(0, 0, 0, 0.5) !important;
  border-color: rgba(0, 0, 0, 0.12) !important;
}
html[data-legacy='light'] .last-user-text {
  color: rgba(0, 0, 0, 0.55) !important;
}
html[data-legacy='light'] .last-user-arrow {
  color: rgba(0, 0, 0, 0.4) !important;
}
html[data-legacy='light'] .last-user-bar:hover .last-user-arrow {
  color: rgba(0, 0, 0, 0.7) !important;
}