/* Right Panel / Drawer specific styles */

/* Right panel tab bar - browser-style tabs */
.right-panel-tab-bar {
  background-color: var(--surface-secondary);
  border-bottom: 1px solid var(--border-base);
  position: relative;
}

.right-panel-tab-bar::after {
  content: '';
  position: absolute;
  bottom: -1px;
  inset-inline-start: 0;
  inset-inline-end: 0;
  height: 1px;
  background-color: var(--border-base);
  z-index: 0;
}

.right-panel-tab-bar .tab-container {
  @apply flex items-center justify-between gap-1 px-2 pt-2 pb-0;
}

/* Keep the shortcuts (close/pin) fixed; only the tabs should scroll. */
.right-panel-tab-bar .tab-scroll {
  @apply flex-1;
  width: auto;
}

/* Shortcuts on the left side - match left drawer icon colors */
.tab-strip-shortcuts {
  @apply flex items-center gap-1 flex-shrink-0;
  color: var(--text-primary);
}

/* Browser-style tabs - using INSTANCE tab color scheme */
.right-panel-tab {
  @apply inline-flex items-center gap-2 px-4 py-2 text-xs font-medium transition-all duration-150 relative;
  font-family: var(--font-family-sans);
  outline: none;
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  margin-inline-end: 2px;
  z-index: 1;
}

.right-panel-tab:focus-visible {
  @apply ring-2 ring-offset-1;
  ring-color: var(--accent-primary);
  ring-offset-color: var(--surface-secondary);
}

.right-panel-tab-active {
  background-color: var(--tab-active-bg);
  border-color: transparent;
  border-bottom: 2px solid var(--accent-primary);
  color: var(--tab-active-text);
  z-index: 2;
}

.right-panel-tab-inactive {
  background-color: var(--tab-inactive-bg);
  color: var(--tab-inactive-text);
  border-color: transparent;
  border-bottom: 2px solid var(--tab-active-bg);
}

.right-panel-tab-inactive:hover {
  background-color: var(--tab-inactive-hover-bg);
  color: var(--text-secondary);
  border-color: var(--border-base);
  border-bottom-color: transparent;
}

/* Files tab layout */
.files-tab-container {
  @apply flex flex-col h-full min-h-0;
}

/* Split view (file list + viewer) */
.files-split {
  display: grid;
  grid-template-columns: var(--files-pane-width, 320px) 10px minmax(0, 1fr);
  min-height: 0;
  flex: 1 1 auto;
}

.file-split-handle {
  cursor: col-resize;
  background-color: transparent;
  border-inline-start: 1px solid var(--border-base);
  border-inline-end: 1px solid var(--border-base);
  user-select: none;
  touch-action: none;
}

.file-split-handle:hover {
  background-color: var(--surface-hover);
}

.files-tab-header {
  @apply flex items-center justify-between gap-2 px-3 py-2 border-b;
  border-color: var(--border-base);
}

.files-tab-header-row {
  @apply flex items-center gap-2 w-full min-w-0;
}

.files-toggle-button {
  @apply text-[11px] px-2 py-1 border border-base transition-colors;
  background-color: var(--surface-base);
  color: var(--text-secondary);
}

.files-toggle-button:hover {
  background-color: var(--surface-hover);
  color: var(--text-primary);
}

.files-header-icon-button {
  @apply inline-flex items-center justify-center shrink-0 w-7 h-7 border border-base transition-colors;
  background-color: var(--surface-base);
  color: var(--text-secondary);
}

.files-header-icon-button:hover {
  background-color: var(--surface-hover);
  color: var(--text-primary);
}

.files-header-icon-button:disabled {
  opacity: 0.55;
  cursor: default;
}

.files-tab-body {
  @apply flex flex-col flex-1 min-h-0;
  position: relative;
  isolation: isolate;
}

.file-list-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background-color: var(--surface-secondary);
  border-inline-start: 1px solid var(--border-base);
  /* Monaco uses layered positioned elements; keep overlay well above it. */
  z-index: 200;
}

/* Phone overlay: header removed; use main header toggle. */

.files-tab-stats {
  @apply flex items-center gap-3 text-[11px];
  color: var(--text-muted);
}

.files-tab-selected-path {
  @apply text-xs font-mono min-w-0 flex-1 overflow-hidden whitespace-nowrap;
  color: var(--text-primary);
  text-overflow: ellipsis;
  /* Truncate from the start; keep filename visible. */
  direction: rtl;
  text-align: left;
  unicode-bidi: isolate;
}

.files-tab-selected-path .file-path-text {
  direction: ltr;
  unicode-bidi: isolate;
}

.files-tab-stat {
  @apply flex items-center gap-1.5;
}

.files-tab-stat-value {
  @apply font-semibold;
}

.files-tab-stat-additions {
  color: var(--session-status-idle-fg);
}

.files-tab-stat-deletions {
  color: var(--session-status-working-fg);
}

/* File list panel */
.file-list-panel {
  @apply flex flex-col min-h-0;
  background-color: transparent;
}

.file-list-header {
  @apply flex items-center justify-between gap-2 px-3 py-2 border-b;
  border-color: var(--border-base);
  background-color: transparent;
}

.file-list-title {
  @apply text-[11px] font-semibold uppercase tracking-wide;
  color: var(--text-muted);
}

.file-list-count {
  @apply text-[10px] px-1.5 py-0.5 rounded-full;
  background-color: var(--surface-base);
  color: var(--text-muted);
  border: 1px solid var(--border-base);
}

.file-list-scroll {
  @apply flex-1 overflow-y-auto min-h-0;
}

.file-list-item {
  @apply px-2 py-1 border-b cursor-pointer transition-all duration-150;
  border-color: var(--border-base);
  background-color: transparent;
}

.file-list-item:last-child {
  @apply border-b-0;
}

.file-list-item:hover {
  background-color: var(--surface-hover);
}

.file-list-item-active {
  background-color: color-mix(in srgb, var(--surface-base) 88%, white);
  box-shadow: inset 0 0 0 1px var(--accent-primary);
}

.git-change-list-item-bulk-selected {
  background-color: color-mix(in srgb, var(--accent-primary) 12%, var(--surface-base));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-primary) 45%, transparent);
}

.git-change-list-item-bulk-selected:hover {
  background-color: color-mix(in srgb, var(--accent-primary) 12%, var(--surface-base));
}

.git-change-list-item-bulk-selected.file-list-item-active {
  background-color: color-mix(in srgb, var(--accent-primary) 18%, var(--surface-base));
  box-shadow:
    inset 0 0 0 1px var(--accent-primary),
    inset 0 0 0 2px color-mix(in srgb, var(--accent-primary) 20%, transparent);
}

.file-list-item-content {
  @apply flex items-center justify-between gap-3;
}

.git-change-list-item .file-list-item-content {
  gap: 0.5rem;
}

.git-change-sections {
  @apply flex flex-col;
}

.git-change-commit-box {
  @apply flex flex-col gap-2 px-2 py-2 border-b;
  border-color: var(--border-base);
  background-color: var(--surface-secondary);
}

.git-change-commit-input-wrap {
  position: relative;
}

.git-change-commit-input {
  @apply w-full min-h-[32px] px-2 py-1.5 pr-20 text-xs rounded border border-base resize-y;
  background-color: var(--surface-base);
  color: var(--text-primary);
}

.git-change-commit-input::placeholder {
  color: var(--text-muted);
}

.git-change-commit-button {
  @apply inline-flex items-center justify-center self-start px-3 py-1.5 text-xs font-medium rounded border border-base transition-colors;
  background-color: var(--surface-base);
  color: var(--text-primary);
}

.git-change-commit-button-overlay {
  position: absolute;
  bottom: 8px;
  right: 8px;
  z-index: 1;
  align-self: auto;
  padding: 0.25rem 0.5rem;
}

.git-change-commit-button-overlay:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 1px;
}

.git-change-commit-button-overlay:hover {
  background-color: var(--surface-hover);
}

.git-change-commit-button:hover:not(:disabled) {
  background-color: var(--surface-hover);
}

.git-change-commit-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.git-change-section {
  @apply border-b last:border-b-0;
  border-color: var(--border-base);
}

.git-change-section-header {
  @apply w-full flex items-center justify-between gap-2 px-2 py-1 text-left;
  background-color: var(--surface-secondary);
  color: var(--text-secondary);
}

.git-change-section-header:hover {
  background-color: var(--surface-hover);
  color: var(--text-primary);
}

.git-change-section-header-main {
  @apply flex items-center gap-2 min-w-0;
}

.git-change-section-chevron {
  @apply inline-flex items-center justify-center shrink-0;
}

.git-change-section-title {
  @apply text-[11px] font-semibold uppercase tracking-wide;
}

.git-change-section-title-row {
  @apply inline-flex items-center gap-2 min-w-0 flex-wrap;
}

.git-change-section-badge {
  flex-shrink: 1;
  min-width: 0;
}

.git-change-section-count {
  @apply text-[10px] px-1.5 py-0.5 rounded-full shrink-0;
  background-color: var(--surface-base);
  color: var(--text-muted);
  border: 1px solid var(--border-base);
}

.git-change-section-items {
  @apply flex flex-col;
}

.git-change-list-item {
  padding-inline-start: 0.25rem;
  position: relative;
}

.git-change-list-item-right {
  @apply flex items-center shrink-0;
  min-width: 0;
}

.git-change-list-item-actions-zone {
  @apply flex items-center justify-end;
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  width: 34px;
  z-index: 2;
}

.git-change-list-item-actions {
  @apply flex items-center justify-center;
  width: 32px;
}

.git-change-list-item .file-list-item-content {
  padding-inline-end: 2rem;
}

.git-change-row-action {
  @apply inline-flex items-center justify-center w-5 h-5 rounded border border-base leading-none;
  background-color: var(--surface-base);
  border-color: var(--border-base);
  color: var(--text-secondary);
  padding: 0;
  position: relative;
  overflow: hidden;
  transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}

.git-change-row-action:hover {
  background-color: var(--surface-hover);
  border-color: var(--border-base);
  color: var(--text-primary);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text-primary) 10%, transparent);
}

.file-list-item-active .git-change-row-action,
.git-change-list-item-bulk-selected .git-change-row-action {
  background-color: color-mix(in srgb, var(--surface-base) 94%, white);
  border-color: color-mix(in srgb, var(--accent-primary) 24%, var(--border-base));
}

.file-list-item-active .git-change-row-action:hover,
.git-change-list-item-bulk-selected .git-change-row-action:hover {
  background-color: var(--surface-base);
  border-color: color-mix(in srgb, var(--accent-primary) 42%, var(--border-base));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-primary) 24%, transparent);
}

.git-change-row-action:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 1px;
}

.git-change-row-action-glyph {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.git-change-row-action-bar {
  position: absolute;
  left: 50%;
  top: 50%;
  display: block;
  background-color: currentColor;
  border-radius: 999px;
  transform: translate(-50%, -50%);
}

.git-change-row-action-bar-horizontal {
  width: 12px;
  height: 1.5px;
}

.git-change-row-action-bar-vertical {
  width: 1.5px;
  height: 12px;
}

@media (hover: none), (pointer: coarse) {
  .git-change-list-item-actions-zone {
    width: 34px;
  }
}

.git-change-list-item-name {
  @apply text-[12px] leading-4 min-w-0 overflow-hidden whitespace-nowrap;
  color: var(--text-primary);
  text-overflow: ellipsis;
}

.git-change-list-item-parent {
  @apply text-[10px] leading-3 min-w-0 overflow-hidden whitespace-nowrap;
  color: var(--text-muted);
  text-overflow: ellipsis;
}

.git-change-context-widget-host {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  transform: translate(-50%, -50%);
  overflow: visible;
  z-index: 20;
  pointer-events: auto;
}

.git-change-context-widget {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background-color: var(--accent-primary);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-primary) 70%, white 30%);
  color: white;
  font-size: 16px;
  line-height: 1;
  font-weight: 500;
  border: 0;
  cursor: pointer;
  padding: 0;
}

.file-list-item-path {
  @apply text-xs font-mono min-w-0 flex-1 overflow-hidden whitespace-nowrap;
  color: var(--text-primary);
  text-overflow: ellipsis;
  /* Truncate from the start; keep filename visible. */
  direction: rtl;
  text-align: left;
  unicode-bidi: isolate;
}

.file-list-item-path .file-path-text {
  direction: ltr;
  unicode-bidi: isolate;
}

.file-list-item-stats {
  @apply flex items-center gap-2 text-[11px] flex-shrink-0;
}

.file-list-item-additions {
  color: var(--session-status-idle-fg);
}

.file-list-item-deletions {
  color: var(--session-status-working-fg);
}

/* File viewer panel */
.file-viewer-panel {
  @apply flex flex-col min-h-0;
  background-color: transparent;
}

.file-viewer-header {
  @apply flex items-center gap-2 px-3 py-2 border-b;
  border-color: var(--border-base);
  background-color: transparent;
}

.file-viewer-toolbar {
  @apply flex items-center gap-1;
}

.file-viewer-toolbar-button {
  @apply text-[11px] px-2 py-1 rounded border border-base transition-colors;
  background-color: var(--surface-base);
  color: var(--text-secondary);
}

.file-viewer-toolbar-icon-button {
  @apply inline-flex items-center justify-center shrink-0 w-7 h-7 border border-base transition-colors;
  background-color: var(--surface-base);
  color: var(--text-secondary);
}

.file-viewer-toolbar-icon-button:hover {
  background-color: var(--surface-hover);
  color: var(--text-primary);
}

.file-viewer-toolbar-icon-button.active {
  color: var(--text-primary);
  box-shadow: inset 0 0 0 1px var(--accent-primary);
}

.file-viewer-toolbar-button:hover {
  background-color: var(--surface-hover);
  color: var(--text-primary);
}

.file-viewer-toolbar-button.active {
  color: var(--text-primary);
  box-shadow: inset 0 0 0 1px var(--accent-primary);
}

.file-viewer-title {
  @apply text-[11px] font-semibold uppercase tracking-wide;
  color: var(--text-muted);
}

.file-viewer-content {
  @apply flex-1 p-4 overflow-auto min-h-0;
}

.file-viewer-content--monaco {
  @apply flex-1 overflow-hidden min-h-0;
  padding: 0;
}

.monaco-viewer {
  width: 100%;
  height: 100%;
  direction: ltr;
  position: relative;
}

.git-change-context-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 30;
}

.file-viewer-empty {
  @apply flex flex-col items-center justify-center h-full gap-3 text-center;
  color: var(--text-muted);
}

.file-viewer-empty-icon {
  @apply w-8 h-8 opacity-40;
  color: var(--text-muted);
}

.file-viewer-empty-text {
  @apply text-xs;
}

.file-viewer-placeholder {
  @apply text-xs leading-relaxed;
  color: var(--text-muted);
}

.file-viewer-selected-file {
  @apply flex flex-col gap-2;
}

.file-viewer-file-name {
  @apply text-xs font-mono px-2 py-1.5 rounded border;
  background-color: var(--surface-base);
  border-color: var(--border-base);
  color: var(--text-primary);
  word-break: break-all;
}

/* Mobile file selector */
.mobile-file-selector {
  @apply rounded-lg border flex flex-col gap-3 p-3;
  background-color: var(--surface-secondary);
  border-color: var(--border-base);
}

.mobile-file-selector-label {
  @apply text-[11px] font-semibold uppercase tracking-wide;
  color: var(--text-muted);
}

.mobile-file-selector-trigger {
  @apply w-full;
}

.mobile-file-viewer {
  @apply rounded-lg border flex flex-col min-h-[220px];
  background-color: var(--surface-secondary);
  border-color: var(--border-base);
}

/* Status tab layout */
.status-tab-container {
  @apply flex flex-col h-full min-h-0;
}

.status-tab-context-panel {
  @apply border-b;
  border-color: var(--border-base);
  background-color: var(--surface-secondary);
}

/* Accordion improvements for right panel */
.right-panel-accordion {
  @apply flex flex-col;
}

.right-panel-accordion-item {
  @apply border-b last:border-b-0;
  border-color: var(--border-base);
  background-color: var(--surface-secondary);
}

.right-panel-accordion-header-row {
  @apply flex items-center gap-2;
}

.right-panel-accordion-header-row .right-panel-accordion-trigger {
  flex: 1 1 auto;
}

.right-panel-accordion-header-row .section-info-trigger {
  flex: 0 0 auto;
  margin-inline-end: 0.75rem;
}

.right-panel-accordion-trigger {
  @apply w-full flex items-center justify-between px-3 py-2.5 text-[11px] font-semibold uppercase tracking-wide transition-colors duration-150;
  color: var(--text-secondary);
  background-color: transparent;
}

.right-panel-accordion-trigger:hover {
  background-color: var(--surface-hover);
  color: var(--text-primary);
}

.section-left {
  @apply flex items-center;
  flex-shrink: 0;
}

.right-panel-accordion-chevron {
  @apply h-4 w-4 transition-transform duration-200;
  color: var(--text-muted);
}

.right-panel-accordion-chevron-expanded {
  transform: rotate(180deg);
}

.right-panel-accordion-content {
  @apply w-full px-3 pb-3 text-sm;
  color: var(--text-primary);
  min-height: 0;
}

.right-panel-accordion-content [data-accordion-content] {
  min-height: 0;
}

/* Section info tooltip */
.section-info-trigger {
  @apply inline-flex items-center justify-center p-0.5 rounded transition-all duration-150;
  color: var(--text-muted);
  flex-shrink: 0;
  border: none;
  background-color: transparent;
}

.section-info-trigger:hover {
  color: var(--text-primary);
  background-color: var(--surface-hover);
}

.section-info-trigger:focus-visible {
  @apply ring-2 ring-offset-1;
  ring-color: var(--accent-primary);
  ring-offset-color: var(--surface-secondary);
}

.section-label {
  margin-inline-start: 2px;
}

.section-info-icon {
  @apply w-3.5 h-3.5;
}

.section-info-tooltip {
  @apply max-w-xs px-3 py-2 text-xs rounded-lg border shadow-lg;
  background-color: var(--surface-base);
  border-color: var(--border-base);
  color: var(--text-primary);
  animation: tooltipShow 150ms ease-out;
  transform-origin: var(--kb-tooltip-content-transform-origin);
  z-index: 9999;
}

.section-info-tooltip[data-expanded] {
  animation: tooltipShow 150ms ease-out;
}

@keyframes tooltipShow {
  from {
    opacity: 0;
    transform: scale(0.95);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Background process cards in status panel */
.status-process-card {
  @apply rounded-lg border flex flex-col gap-2 p-3 transition-all duration-150;
  background-color: var(--surface-base);
  border-color: var(--border-base);
}

.status-process-card:hover {
  border-color: var(--border-strong);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.status-process-header {
  @apply flex flex-col gap-1;
}

.status-process-title {
  @apply text-xs font-semibold;
  color: var(--text-primary);
}

.status-process-meta {
  @apply flex flex-wrap gap-2 text-[11px];
  color: var(--text-muted);
}

.status-process-actions {
  @apply grid grid-cols-3 gap-2;
}

/* Empty states */
.right-panel-empty {
  @apply flex flex-col items-center justify-center text-center gap-2;
  color: var(--text-muted);
}

.right-panel-empty--left {
  @apply items-start justify-start text-start w-full;
}

.right-panel-empty-text {
  @apply text-xs;
}

/* Dark mode adjustments */
[data-theme="dark"] .right-panel-tab-active {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .file-list-item-active {
  box-shadow: inset 0 0 0 1px var(--accent-primary), 0 0 0 1px var(--surface-secondary);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .right-panel-tab-active {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  }
}