/* 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;
  left: 0;
  right: 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-right: 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-left: 1px solid var(--border-base);
  border-right: 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-left: 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-3 py-2.5 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: var(--surface-base);
  box-shadow: inset 0 0 0 1px var(--accent-primary);
}

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

.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%;
}

.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-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;
}

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

.section-label {
  margin-left: 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-left 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);
  }
}