/* Extracted styles from index.ejs - RealTime Clipboard 2.0 */
:root {
  /* Custom V2.0 Dark Blue Theme */
  --primary-blue     : #2563eb;
  --primary-dark-blue: #1d4ed8;
  --accent-navy      : #1e3a8a;
  --accent-light-blue: #3b82f6;
  --accent-cyan      : #0891b2;

  /* Sophisticated Background Gradients */
  --dark-bg      : #0a0a0a;
  --darker-bg    : #050505;
  --sidebar-bg   : linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  --card-bg      : linear-gradient(135deg, #1e293b 0%, #334155 100%);
  --card-hover-bg: linear-gradient(135deg, #334155 0%, #475569 100%);

  /* Enhanced Border System */
  --border-primary  : #374151;
  --border-secondary: #4b5563;
  --border-accent   : var(--primary-blue);
  --border-subtle   : #1f2937;

  /* Sophisticated Text Colors */
  --text-primary  : #f8fafc;
  --text-secondary: #e2e8f0;
  --text-muted    : #94a3b8;
  --text-accent   : var(--accent-light-blue);

  /* Status Colors */
  --success-green: #10b981;
  --danger-blue  : #dc2626;
  --warning-amber: #f59e0b;
  --info-blue    : var(--primary-blue);

  /* Shadow System */
  --shadow-subtle: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  --shadow-soft  : 0 4px 6px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.12);
  --shadow-medium: 0 10px 15px rgba(0, 0, 0, 0.2), 0 4px 6px rgba(0, 0, 0, 0.15);
  --shadow-strong: 0 20px 25px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.1);
  --shadow-glow  : 0 0 20px rgba(37, 99, 235, 0.3);

  /* Animation Curves */
  --ease-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

* {
  box-sizing: border-box;
}

body {
  font-family            : "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background             : linear-gradient(135deg, var(--dark-bg) 0%, #111827 50%, var(--darker-bg) 100%);
  background-attachment  : fixed;
  color                  : var(--text-primary);
  margin                 : 0;
  padding                : 0;
  overflow-x             : hidden;
  line-height            : 1.6;
  font-size              : 14px;
  -webkit-font-smoothing : antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.sidebar {
  width         : 400px;
  min-width     : 350px;
  max-width     : 1200px;
  background    : var(--sidebar-bg);
  border-right  : 1px solid var(--border-primary);
  position      : relative;
  height        : 100vh;
  overflow-y    : hidden;
  overflow-x    : hidden;
  box-shadow    : var(--shadow-strong);
  display       : flex;
  flex-direction: column;
  padding       : 32px 28px;
}

.sidebar::before {
  content   : '';
  position  : absolute;
  top       : 0;
  right     : 0;
  width     : 3px;
  height    : 100%;
  background: linear-gradient(180deg, var(--primary-blue) 0%, var(--accent-navy) 100%);
  box-shadow: 0 0 10px rgba(37, 99, 235, 0.3);
}

.resizer {
  width     : 8px;
  background: linear-gradient(90deg, transparent 0%, var(--primary-blue) 50%, transparent 100%);
  cursor    : ew-resize;
  position  : absolute;
  top       : 0;
  right     : -4px;
  bottom    : 0;
  z-index   : 10;
  transition: all 0.3s var(--ease-smooth);
  opacity   : 0.7;
}

.resizer:hover {
  background: linear-gradient(90deg, transparent 0%, var(--primary-dark-blue) 50%, transparent 100%);
  opacity   : 1;
  box-shadow: 0 0 15px rgba(37, 99, 235, 0.4);
}

.content-area {
  flex          : 1;
  background    : linear-gradient(135deg, var(--dark-bg) 0%, #0f172a 100%);
  display       : flex;
  flex-direction: column;
  min-height    : 100vh;
  position      : relative;
}

.brand-title {
  background             : linear-gradient(135deg, var(--primary-blue), var(--accent-light-blue));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip        : text;
  font-size              : 32px;
  font-weight            : 800;
  margin                 : 0;
  display                : flex;
  align-items            : center;
  gap                    : 16px;
  letter-spacing         : -0.5px;
}

.brand-subtitle {
  color      : var(--text-secondary);
  font-size  : 14px;
  margin     : 4px 0 0 0;
  font-weight: 500;
}

/* Main Editor Area - Premium Layout */
.main-editor {
  flex          : 1;
  padding       : 40px;
  display       : flex;
  flex-direction: column;
}

.editor-wrapper {
  flex          : 1;
  background    : var(--card-bg);
  border        : 1px solid var(--border-primary);
  border-radius : 20px;
  box-shadow    : var(--shadow-strong);
  overflow      : hidden;
  min-height    : 500px;
  display       : flex;
  flex-direction: column;
  position      : relative;
}

.editor-wrapper::before {
  content   : '';
  position  : absolute;
  top       : 0;
  left      : 0;
  right     : 0;
  height    : 2px;
  background: linear-gradient(90deg, var(--primary-blue) 0%, var(--accent-light-blue) 50%, var(--accent-cyan) 100%);
  transition: background 0.3s ease;
}

/* Change editor wrapper color based on connection status */
body[data-connection-status="online"] .editor-wrapper::before {
  background: linear-gradient(90deg, var(--success-green) 0%, #10b981 50%, #34d399 100%);
}

body[data-connection-status="reconnecting"] .editor-wrapper::before,
body[data-connection-status="offline"] .editor-wrapper::before {
  background: linear-gradient(90deg, #dc2626 0%, #ef4444 50%, #f87171 100%);
}

.editor-header {
  display        : block;
  background     : linear-gradient(135deg, var(--darker-bg) 0%, #1e293b 100%);
  padding        : 12px 32px;
  border-bottom  : 1px solid var(--border-primary);
  display        : flex;
  justify-content: space-between;
  align-items    : center;
}

.clipboard-actions {
  display              : flex;
  flex                  : 0 0 auto;
  flex-wrap             : wrap;
  gap                   : 12px;
  padding               : 12px 20px;
  background            : rgba(15, 23, 42, 0.96);
  border-bottom         : 1px solid var(--border-primary);
  position              : relative;
  z-index               : 3;
}

.clipboard-action-btn {
  flex                  : 1 1 130px;
  min-width             : 0;
  min-height            : 44px;
  display               : inline-flex;
  align-items           : center;
  justify-content       : center;
  gap                   : 8px;
  padding               : 10px 14px;
  border                : 1px solid var(--border-primary);
  border-radius         : 10px;
  background            : linear-gradient(135deg, rgba(37, 99, 235, 0.18), rgba(6, 182, 212, 0.12));
  color                 : var(--text-primary);
  font-size             : 14px;
  font-weight           : 600;
  cursor                : pointer;
  touch-action          : manipulation;
  white-space           : nowrap;
  transition            : border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.clipboard-action-btn:hover,
.clipboard-action-btn:focus-visible {
  border-color: var(--primary-blue);
  background  : linear-gradient(135deg, rgba(37, 99, 235, 0.3), rgba(6, 182, 212, 0.2));
  outline     : none;
}

.clipboard-action-btn:active {
  transform: translateY(1px);
}

.clipboard-action-btn i {
  color: var(--accent-cyan);
}

.clipboard-paste-guidance {
  flex       : 0 0 auto;
  padding    : 10px 20px;
  background : rgba(15, 23, 42, 0.84);
  border-bottom: 1px solid var(--border-subtle);
  color      : var(--text-secondary);
  font-size  : 13px;
  line-height: 1.5;
}

.clipboard-paste-help,
.clipboard-paste-status {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
}

.clipboard-paste-help i {
  flex: 0 0 auto;
  color: var(--accent-cyan);
  margin-top: 3px;
}

.clipboard-paste-status {
  min-height: 0;
  margin-top: 6px;
  font-weight: 600;
}

.clipboard-paste-status:empty {
  display: none;
}

.clipboard-paste-status[data-status="success"] {
  color: var(--success-green);
}

.clipboard-paste-status[data-status="warning"] {
  color: var(--warning-yellow);
}

.clipboard-paste-status[data-status="info"] {
  color: var(--text-secondary);
}

.clipboard-editor-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.editor-title {
  background             : linear-gradient(135deg, var(--text-primary), var(--text-secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip        : text;
  font-weight            : 700;
  font-size              : 18px;
  display                : flex;
  align-items            : center;
  gap                    : 12px;
  letter-spacing         : -0.2px;
}

.connection-status {
  --status-color-start : var(--success-green);
  --status-color-end   : #10b981;
  --status-border-color: rgba(16, 185, 129, 0.3);
  --status-dot-color   : var(--success-green);
  --status-dot-shadow  : rgba(16, 185, 129, 0.6);
  --status-dot-glow    : rgba(16, 185, 129, 0.3);
  --status-dot-animation: pulse 2s infinite;
  display                : flex;
  align-items            : center;
  gap                    : 10px;
  background             : linear-gradient(135deg, var(--status-color-start), var(--status-color-end));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip        : text;
  font-size              : 14px;
  font-weight            : 600;
  padding                : 8px 16px;
  border                 : 1px solid var(--status-border-color);
  border-radius          : 20px;
  backdrop-filter        : blur(10px);
  color                  : var(--text-primary);
  transition             : background 0.3s var(--ease-smooth), border-color 0.3s var(--ease-smooth), transform 0.3s var(--ease-smooth), color 0.3s var(--ease-smooth);
}

.connection-status.online {
  --status-color-start : var(--success-green);
  --status-color-end   : #10b981;
  --status-border-color: rgba(16, 185, 129, 0.3);
  --status-dot-color   : var(--success-green);
  --status-dot-shadow  : rgba(16, 185, 129, 0.6);
  --status-dot-glow    : rgba(16, 185, 129, 0.3);
  --status-dot-animation: pulse 2s infinite;
}

.connection-status.reconnecting,
.connection-status.offline {
  --status-color-start : #f87171;
  --status-color-end   : var(--danger-blue);
  --status-border-color: rgba(220, 38, 38, 0.35);
  --status-dot-color   : var(--danger-blue);
  --status-dot-shadow  : rgba(220, 38, 38, 0.55);
  --status-dot-glow    : rgba(220, 38, 38, 0.2);
  --status-dot-animation: none;
  -webkit-text-fill-color: rgba(248, 250, 252, 0.9);
  color                  : rgba(248, 250, 252, 0.9);
}

.status-dot {
  width        : 10px;
  height       : 10px;
  background   : radial-gradient(circle, var(--status-dot-color), var(--status-dot-color));
  border-radius: 50%;
  box-shadow   : 0 0 10px var(--status-dot-shadow), 0 0 20px var(--status-dot-glow);
  animation    : var(--status-dot-animation);
  transition   : background 0.3s var(--ease-smooth), box-shadow 0.3s var(--ease-smooth), opacity 0.3s var(--ease-smooth);
}

.connection-status.reconnecting .status-dot,
.connection-status.offline .status-dot {
  opacity: 0.7;
}

@keyframes pulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.7;
  }
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Loading overlay for textarea */
.textarea-loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(10, 10, 10, 0.7);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 100;
  border-radius: 0 0 16px 0;
  backdrop-filter: blur(2px);
  animation: fadeIn 0.3s var(--ease-smooth);
}

.textarea-loading-overlay.show {
  display: flex;
}

.loading-spinner-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}

.loading-spinner {
  width: 48px;
  height: 48px;
  border: 4px solid rgba(37, 99, 235, 0.2);
  border-top-color: var(--primary-blue);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.loading-text {
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 500;
}

.loading-subtext {
  color: var(--text-muted);
  font-size: 12px;
}

/* Disabled state for textarea */
#textarea:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.5) 0%, rgba(30, 41, 59, 0.5) 100%);
}

#textarea {
  flex         : 1;
  background   : linear-gradient(135deg, var(--darker-bg) 0%, #0f172a 100%);
  border       : none;
  color        : var(--text-primary);
  font-family  : "Fira Code", "SF Mono", Monaco, "Cascadia Code", monospace;
  font-size    : 16px;
  line-height  : 1.8;
  padding      : 32px;
  resize       : none;
  outline      : none;
  transition   : all 0.3s var(--ease-smooth);
  border-radius: 0 0 16px 0;
  position     : relative;
}

#textarea:focus {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  box-shadow: inset 0 0 30px rgba(37, 99, 235, 0.1);
}

#textarea::placeholder {
  color     : var(--text-muted);
  font-style: italic;
}

/* Make textarea scrollbar match the file-list scrollbar */
#textarea {
  /* Firefox */
  scrollbar-width: thin;
  scrollbar-color: var(--primary-blue) var(--darker-bg);
}

/* Webkit browsers */
#textarea::-webkit-scrollbar {
  width: 10px;
}

#textarea::-webkit-scrollbar-track {
  background   : var(--darker-bg);
  border-radius: 5px;
  margin       : 4px 0;
  border       : 1px solid var(--border-subtle);
}

#textarea::-webkit-scrollbar-thumb {
  background   : linear-gradient(180deg, var(--primary-blue) 0%, var(--accent-light-blue) 50%, var(--accent-cyan) 100%);
  border-radius: 5px;
  border       : 2px solid var(--darker-bg);
  box-shadow   : 0 0 6px rgba(37, 99, 235, 0.5), inset 0 0 3px rgba(0, 0, 0, 0.3);
  transition   : all 0.3s var(--ease-smooth);
}

#textarea::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--accent-light-blue) 0%, var(--primary-blue) 50%, var(--primary-dark-blue) 100%);
  box-shadow: 0 0 12px rgba(37, 99, 235, 0.8), inset 0 0 6px rgba(0, 0, 0, 0.4);
  border-color: var(--border-primary);
}

#textarea::-webkit-scrollbar-thumb:active {
  background: linear-gradient(180deg, var(--primary-dark-blue), var(--accent-navy));
  box-shadow: 0 0 8px rgba(37, 99, 235, 1), inset 0 0 8px rgba(0, 0, 0, 0.5);
}

.sidebar-content {
  height        : 100%;
  display       : flex;
  flex-direction: column;
  max-width     : 100%;
  min-height    : 0;
}

.sidebar-section {
  margin-bottom: 36px;
  padding      : 0;
  overflow-x   : hidden;
  word-wrap    : break-word;
  flex-shrink  : 0;
}

/* File list section should be flexible and scrollable */
.sidebar-section.flex-1 {
  flex       : 1;
  min-height : 0;
  display    : flex;
  flex-direction: column;
  margin-bottom: 0;
}

.section-title {
  background             : linear-gradient(135deg, var(--primary-blue), var(--accent-light-blue));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip        : text;
  font-size              : 20px;
  font-weight            : 700;
  margin-bottom          : 20px;
  display                : flex;
  align-items            : center;
  gap                    : 12px;
  letter-spacing         : -0.3px;
  position               : relative;
}

.section-title::after {
  content      : '';
  position     : absolute;
  bottom       : -8px;
  left         : 0;
  width        : 40px;
  height       : 2px;
  background   : linear-gradient(90deg, var(--primary-blue), var(--accent-light-blue));
  border-radius: 1px;
}

.upload-area {
  background   : var(--card-bg);
  border       : 2px dashed var(--border-secondary);
  border-radius: 16px;
  padding      : 16px;
  text-align   : center;
  transition   : all 0.4s var(--ease-smooth);
  cursor       : pointer;
  position     : relative;
  overflow     : hidden;
}

.upload-area::before {
  content   : '';
  position  : absolute;
  top       : 0;
  left      : -100%;
  width     : 100%;
  height    : 100%;
  background: linear-gradient(90deg, transparent, rgba(37, 99, 235, 0.1), transparent);
  transition: left 0.6s var(--ease-smooth);
}

.upload-area:hover,
.upload-area.dragover {
  background  : var(--card-hover-bg);
  border-color: var(--primary-blue);
  box-shadow  : var(--shadow-medium), var(--shadow-glow);
  transform   : translateY(-2px);
}

.upload-area:hover::before {
  left: 100%;
}

.upload-icon {
  font-size              : 32px;
  background             : linear-gradient(135deg, var(--primary-blue), var(--accent-light-blue));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip        : text;
  transition             : all 0.3s var(--ease-smooth);
}

.upload-text {
  color        : var(--text-primary);
  font-size    : 14px;
  font-weight  : 500;
  margin-bottom: 4px;
}

.upload-subtext {
  color        : var(--text-muted);
  font-size    : 12px;
  margin-bottom: 8px;
}

.btn {
  padding        : 14px 28px;
  border-radius  : 12px;
  border         : none;
  font-weight    : 600;
  font-size      : 14px;
  letter-spacing : 0.3px;
  cursor         : pointer;
  transition     : all 0.3s var(--ease-smooth);
  display        : inline-flex;
  align-items    : center;
  gap            : 10px;
  text-decoration: none;
  position       : relative;
  overflow       : hidden;
}

.btn::before {
  content   : '';
  position  : absolute;
  top       : 0;
  left      : -100%;
  width     : 100%;
  height    : 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  transition: left 0.5s var(--ease-smooth);
}

.btn:hover::before {
  left: 100%;
}

.btn-primary {
  background: linear-gradient(135deg, var(--primary-blue), var(--primary-dark-blue));
  color     : white;
  box-shadow: var(--shadow-soft);
}

.btn-primary:hover {
  background: linear-gradient(135deg, var(--primary-dark-blue), var(--accent-light-blue));
  transform : translateY(-3px);
  box-shadow: var(--shadow-medium), 0 0 20px rgba(37, 99, 235, 0.4);
}

.btn-secondary {
  background: var(--card-bg);
  color     : var(--text-primary);
  border    : 1px solid var(--border-secondary);
  box-shadow: var(--shadow-subtle);
}

.btn-secondary:hover {
  background  : var(--card-hover-bg);
  border-color: var(--primary-blue);
  transform   : translateY(-2px);
  box-shadow  : var(--shadow-soft);
}

.btn-danger {
  background-color: var(--danger-blue);
  color           : white;
}

.btn-danger:hover {
  background-color: #ff1529;
  transform       : translateY(-1px);
}

.file-list {
  overflow-y: auto;
  overflow-x: hidden;
  flex      : 1;
  min-height: 0;
  padding   : 4px;
  word-wrap : break-word;
  max-width : 100%;
  /* Beautiful custom scrollbar */
  scrollbar-width: thin;
  scrollbar-color: var(--primary-blue) var(--darker-bg);
}

/* Enhanced Scrollbar for file list - Webkit browsers */
.file-list::-webkit-scrollbar {
  width: 10px;
}

.file-list::-webkit-scrollbar-track {
  background   : var(--darker-bg);
  border-radius: 5px;
  margin       : 4px 0;
  border       : 1px solid var(--border-subtle);
}

.file-list::-webkit-scrollbar-thumb {
  background   : linear-gradient(180deg, var(--primary-blue) 0%, var(--accent-light-blue) 50%, var(--accent-cyan) 100%);
  border-radius: 5px;
  border       : 2px solid var(--darker-bg);
  box-shadow   : 0 0 6px rgba(37, 99, 235, 0.5), inset 0 0 3px rgba(0, 0, 0, 0.3);
  transition   : all 0.3s var(--ease-smooth);
}

.file-list::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--accent-light-blue) 0%, var(--primary-blue) 50%, var(--primary-dark-blue) 100%);
  box-shadow: 0 0 12px rgba(37, 99, 235, 0.8), inset 0 0 6px rgba(0, 0, 0, 0.4);
  border-color: var(--border-primary);
}

.file-list::-webkit-scrollbar-thumb:active {
  background: linear-gradient(180deg, var(--primary-dark-blue), var(--accent-navy));
  box-shadow: 0 0 8px rgba(37, 99, 235, 1), inset 0 0 8px rgba(0, 0, 0, 0.5);
}

.file-item {
  background     : var(--card-bg);
  border         : 1px solid var(--border-subtle);
  border-radius  : 12px;
  padding        : 18px 20px;
  margin-bottom  : 16px;
  display        : flex;
  align-items    : flex-start;
  justify-content: space-between;
  transition     : all 0.3s var(--ease-smooth);
  position       : relative;
  overflow       : visible;
  min-height     : auto;
}

.file-item::before {
  content   : '';
  position  : absolute;
  top       : 0;
  left      : 0;
  width     : 4px;
  height    : 100%;
  background: linear-gradient(180deg, var(--primary-blue), var(--accent-light-blue));
  transform : scaleY(0);
  transition: transform 0.3s var(--ease-smooth);
}

.file-item:hover {
  background  : var(--card-hover-bg);
  border-color: var(--border-secondary);
  transform   : translateY(-2px);
  box-shadow  : var(--shadow-medium);
}

.file-item:hover::before {
  transform: scaleY(1);
}

.file-info {
  display    : flex;
  align-items: flex-start;
  gap        : 12px;
  flex       : 1;
  min-width  : 0;
  max-width  : calc(100% - 60px);
}

.file-icon {
  font-size : 24px;
  color     : var(--primary-blue);
  width     : 30px;
  text-align: center;
}

.file-name {
  color          : var(--text-primary);
  font-weight    : 500;
  text-decoration: none;
  font-size      : 14px;
  white-space    : normal;
  word-wrap      : break-word;
  word-break     : break-all;
  line-height    : 1.4;
}

.file-name:hover {
  color: var(--primary-blue);
}

.progress-card {
  background   : linear-gradient(135deg, var(--card-bg) 0%, var(--darker-bg) 100%);
  border       : 2px solid var(--primary-blue);
  border-radius: 12px;
  padding      : 16px;
  box-shadow   : var(--shadow-medium);
}

.progress-section {
  margin-bottom: 20px;
  max-width    : 100%;
  overflow     : hidden;
}

.progress-header {
  display        : flex;
  justify-content: space-between;
  align-items    : center;
  margin-bottom  : 8px;
}

.progress-label {
  color      : var(--text-primary);
  font-weight: 500;
  font-size  : 14px;
}

.progress-percentage {
  color      : var(--primary-blue);
  font-weight: 600;
  font-family: "Fira Code", monospace;
}

.progress-track {
  width        : 100%;
  height       : 10px;
  background   : var(--card-bg);
  border-radius: 6px;
  overflow     : hidden;
  border       : 1px solid var(--border-primary);
  box-shadow   : inset 0 1px 3px rgba(0, 0, 0, 0.3);
  margin       : 0;
  position     : relative;
}

.progress-bar {
  height       : 100%;
  background   : linear-gradient(90deg, var(--primary-blue) 0%, var(--accent-light-blue) 100%);
  transition   : width 0.3s ease;
  border-radius: 5px;
  position     : relative;
  margin       : 0;
  box-shadow   : none;
}

.progress-bar::before {
  content      : '';
  position     : absolute;
  top          : 0;
  left         : 0;
  right        : 0;
  height       : 50%;
  background   : linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, transparent 100%);
  border-radius: 5px 5px 0 0;
}

.progress-bar.success {
  background: linear-gradient(90deg, var(--success-green) 0%, #10b981 100%);
}

#drop-zone {
  position        : fixed;
  top             : 0;
  left            : 0;
  width           : 100%;
  height          : 100%;
  background-color: rgba(26, 22, 37, 0.95);
  display         : none;
  align-items     : center;
  justify-content : center;
  z-index         : 9999;
}

.drop-zone-content {
  text-align      : center;
  color           : var(--text-primary);
  background-color: var(--card-bg);
  padding         : 60px;
  border-radius   : 16px;
  border          : 3px dashed var(--primary-blue);
  box-shadow      : var(--shadow-strong);
}

.drop-zone-icon {
  font-size    : 80px;
  color        : var(--primary-blue);
  margin-bottom: 20px;
}

.drop-zone-title {
  font-size    : 24px;
  font-weight  : 600;
  margin-bottom: 10px;
}

.drop-zone-text {
  color    : var(--text-secondary);
  font-size: 16px;
}

.stats-section {
  background-color: var(--card-bg);
  border-radius   : 8px;
  padding         : 15px;
  margin-top      : auto;
  border          : 1px solid var(--border-color);
}

.stat-item {
  display        : flex;
  justify-content: space-between;
  align-items    : center;
  padding        : 8px 0;
  border-bottom  : 1px solid var(--border-color);
}

.stat-item:last-child {
  border-bottom: none;
}

.stat-label {
  color    : var(--text-secondary);
  font-size: 14px;
}

.stat-value {
  color      : var(--primary-blue);
  font-weight: 600;
  font-family: "Fira Code", monospace;
}

.clear-btn {
  background   : none;
  border       : 1px solid var(--border-color);
  color        : var(--text-secondary);
  padding      : 8px 12px;
  border-radius: 6px;
  font-size    : 12px;
  cursor       : pointer;
  transition   : all 0.2s ease;
}

.clear-btn:hover {
  border-color: var(--primary-blue);
  color       : var(--primary-blue);
}

@media (max-width: 768px) {
  body {
    overflow: hidden;
    height: 100vh;
    position: fixed;
    width: 100%;
  }

  .main-container {
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
  }

  .sidebar {
    width       : 100%;
    max-width   : 100%;
    height      : 48vh;
    max-height  : 48vh;
    order       : 2;
    border-right: none;
    border-top  : 3px solid var(--primary-blue);
    padding     : 16px;
    flex-shrink : 0;
    position    : relative;
  }

  /* Make resizer horizontal and more touch-friendly on mobile */
  .resizer {
    display: block !important;
    width: 100%;
    height: 20px;
    background: linear-gradient(180deg, transparent 0%, var(--primary-blue) 50%, transparent 100%);
    cursor: ns-resize;
    position: absolute;
    top: -10px;
    left: 0;
    right: 0;
    z-index: 10;
    opacity: 0.8;
    touch-action: none;
  }

  .resizer:hover,
  .resizer:active {
    background: linear-gradient(180deg, transparent 0%, var(--primary-dark-blue) 50%, transparent 100%);
    opacity: 1;
    box-shadow: 0 0 15px rgba(37, 99, 235, 0.4);
  }

  /* Add visual indicator for resizer */
  .resizer::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 4px;
    background: var(--primary-blue);
    border-radius: 2px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  }

  .content-area {
    order     : 1;
    height    : 52vh;
    min-height: 52vh;
    max-height: 52vh;
    flex-shrink: 0;
    overflow  : hidden;
  }

  .main-container.mobile-actions-bottom .sidebar {
    height    : auto;
    min-height: 0;
    max-height: none;
    flex      : 1 1 0;
  }

  /* Freeze the actual pre-IME editor height before vh can be recalculated. */
  body.mobile-keyboard-pending .content-area,
  body.mobile-keyboard-open .content-area {
    flex      : 0 0 var(--mobile-keyboard-content-height) !important;
    height    : var(--mobile-keyboard-content-height) !important;
    min-height: var(--mobile-keyboard-content-height) !important;
    max-height: var(--mobile-keyboard-content-height) !important;
  }

  /* Only a confirmed software keyboard removes the lower controls pane. */
  body.mobile-keyboard-open .sidebar {
    display: none !important;
  }

  .main-editor {
    padding: 15px;
    height: 100%;
    overflow: hidden;
  }

  .sidebar-content {
    padding: 0;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    position: relative;
  }

  /* Compact mobile upload section */
  .sidebar-section {
    margin-bottom: 12px;
    flex-shrink: 0;
  }

  /* Files section needs to grow and be scrollable */
  .sidebar-section.flex-1 {
    flex: 1 1 0%;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    margin-bottom: 0;
    position: relative;
  }

  /* Ensure the title doesn't take flex space */
  .sidebar-section.flex-1 > .flex {
    flex-shrink: 0;
  }

  .section-title {
    font-size: 16px;
    margin-bottom: 12px;
    gap: 8px;
  }

  /* Make upload area compact on mobile */
  .upload-area {
    padding: 12px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }

  .upload-icon {
    font-size: 20px;
    margin: 0;
  }

  .upload-text {
    font-size: 12px;
    margin: 0;
    white-space: nowrap;
  }

  .upload-subtext {
    display: none;
  }

  /* Hide inline progress on mobile or make it more compact */
  #inline-progress-container {
    margin-top: 12px !important;
  }

  .progress-card {
    padding: 12px;
  }

  .progress-section {
    margin-bottom: 12px;
  }

  .file-list {
    /* Remove fixed max-height to allow adaptation to dynamic sidebar height */
    flex: 1 1 0%;
    min-height: 0;
    overflow-y: scroll;
    overflow-x: hidden;
    padding-bottom: 80px !important;
    /* Ensure proper scrolling with webkit overflow scrolling */
    -webkit-overflow-scrolling: touch;
    /* Force GPU acceleration for smoother scrolling */
    transform: translateZ(0);
  }

  .main-container.mobile-actions-bottom .file-list {
    padding-bottom: 4px !important;
  }

  .editor-wrapper {
    min-height: 300px;
    height: 100%;
    max-height: 100%;
  }

  .main-container.mobile-actions-bottom .main-editor,
  .main-container.mobile-actions-bottom .editor-wrapper {
    min-height: 0;
  }

  .main-container.mobile-actions-bottom .editor-wrapper {
    flex: 1 1 0;
  }

  .clipboard-actions {
    display              : grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    flex-wrap            : nowrap;
    gap                  : 8px;
    padding              : 10px;
    background           : rgba(15, 23, 42, 0.98);
  }

  .main-container.mobile-actions-bottom > .clipboard-actions {
    order         : 3;
    width         : 100%;
    flex          : 0 0 auto;
    flex-shrink   : 0;
    border-top    : 1px solid var(--border-primary);
    border-bottom : none;
    padding       : 10px 10px calc(10px + env(safe-area-inset-bottom, 0px));
    box-shadow    : 0 -8px 18px rgba(0, 0, 0, 0.24);
  }

  .clipboard-action-btn {
    width     : 100%;
    min-width : 0;
    min-height: 44px;
    padding   : 8px 6px;
    font-size : 13px;
    gap       : 6px;
  }

  .clipboard-paste-guidance {
    padding  : 8px 12px;
    font-size: 12px;
  }

  #textarea {
    padding   : 16px;
    font-size : 14px;
    height    : auto;
    min-height: 0;
  }

  .drop-zone-content {
    padding: 40px 30px;
    margin : 20px;
  }

  .drop-zone-icon {
    font-size: 60px;
  }

  .editor-wrapper::after {
    content   : '';
    position  : absolute;
    top       : 0;
    left      : 0;
    right     : 0;
    height    : 2px;
    background: linear-gradient(90deg, var(--primary-blue) 0%, var(--accent-light-blue) 50%, var(--accent-cyan) 100%);
    transition: background 0.3s ease;
  }

  /* Change editor wrapper color based on connection status on mobile */
  body[data-connection-status="online"] .editor-wrapper::after {
    background: linear-gradient(90deg, var(--success-green) 0%, #10b981 50%, #34d399 100%);
  }

  body[data-connection-status="reconnecting"] .editor-wrapper::after,
  body[data-connection-status="offline"] .editor-wrapper::after {
    background: linear-gradient(90deg, #dc2626 0%, #ef4444 50%, #f87171 100%);
  }

  .editor-header {
    display: none;
  }

  /* Compact file items on mobile */
  .file-item {
    padding: 10px 12px;
    margin-bottom: 10px;
  }

  .file-info {
    gap: 10px;
  }

  .image-thumbnail,
  .text-preview-icon,
  .pdf-preview-icon,
  .video-preview-icon,
  .file-icon {
    width: 45px;
    height: 45px;
    min-width: 45px;
    font-size: 20px;
  }

  .file-details {
    gap: 4px;
  }

  .file-name {
    font-size: 13px;
    line-height: 1.3;
  }

  .file-metadata {
    gap: 6px;
    font-size: 11px;
  }

  .file-actions {
    gap: 6px;
  }

  .file-actions button {
    width: 32px;
    height: 32px;
    font-size: 13px;
  }

}


@media (max-width: 480px) {
  .sidebar-content {
    padding: 0;
  }

  .sidebar {
    padding: 12px;
  }

  .main-editor {
    padding: 10px;
  }

  .clipboard-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap                  : 6px;
    padding              : 8px;
  }

  .main-container.mobile-actions-bottom > .clipboard-actions {
    padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px));
  }

  .clipboard-action-btn {
    width     : 100%;
    min-width : 0;
    min-height: 44px;
    padding   : 8px 4px;
    font-size : 12px;
    gap       : 4px;
  }

  .clipboard-paste-guidance {
    padding  : 8px 10px;
    font-size: 12px;
  }

  /* Ultra-compact upload area for small mobile screens */
  .upload-area {
    padding: 10px 12px;
    border-radius: 8px;
  }

  .upload-icon {
    font-size: 18px;
  }

  .upload-text {
    font-size: 11px;
  }

  .section-title {
    font-size: 14px;
    margin-bottom: 10px;
  }

  .file-list {
    /* Remove fixed max-height to allow adaptation to dynamic sidebar height */
    flex: 1 1 0%;
    min-height: 0;
    overflow-y: scroll;
    overflow-x: hidden;
    padding-bottom: 80px !important;
    -webkit-overflow-scrolling: touch;
  }

  .progress-card {
    padding: 10px;
  }

  .progress-label {
    font-size: 12px;
  }

  .progress-percentage {
    font-size: 11px;
  }

  .confirm-dialog {
    max-width: 90%;
    padding  : 24px;
    margin   : 20px;
  }

  .confirm-header {
    margin-bottom: 16px;
  }

  .confirm-title {
    font-size: 18px;
  }

  .confirm-message {
    font-size    : 14px;
    margin-bottom: 20px;
  }

  .confirm-buttons {
    flex-direction: column;
    gap           : 8px;
  }

  .confirm-btn {
    width  : 100%;
    padding: 14px;
  }

  /* More compact file items for small screens */
  .file-item {
    padding: 8px 10px;
    margin-bottom: 8px;
  }

  .image-thumbnail,
  .text-preview-icon,
  .pdf-preview-icon,
  .video-preview-icon,
  .file-icon {
    width: 40px;
    height: 40px;
    min-width: 40px;
    font-size: 18px;
  }

  .file-name {
    font-size: 12px;
  }

  .file-metadata {
    font-size: 10px;
  }

  .file-actions button {
    width: 30px;
    height: 30px;
    font-size: 12px;
  }

}

.confirm-overlay {
  position       : fixed;
  top            : 0;
  left           : 0;
  width          : 100%;
  height         : 100%;
  background     : rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
  display        : none;
  align-items    : center;
  justify-content: center;
  z-index        : 20000;  /* Higher than version modal (10000) */
  opacity        : 0;
  transition     : opacity 0.3s var(--ease-smooth);
}

.confirm-overlay.show {
  opacity: 1;
}

.confirm-dialog {
  background   : var(--card-bg);
  border       : 1px solid var(--border-primary);
  border-radius: 16px;
  padding      : 32px;
  max-width    : 450px;
  width        : 90%;
  box-shadow   : var(--shadow-strong);
  transform    : scale(0.9) translateY(20px);
  transition   : all 0.3s var(--ease-smooth);
  position     : relative;
}

.confirm-overlay.show .confirm-dialog {
  transform: scale(1) translateY(0);
}

.confirm-dialog::before {
  content      : '';
  position     : absolute;
  top          : 0;
  left         : 0;
  right        : 0;
  height       : 4px;
  background   : linear-gradient(90deg, var(--primary-blue) 0%, var(--accent-light-blue) 100%);
  border-radius: 16px 16px 0 0;
}

.confirm-header {
  display      : flex;
  align-items  : center;
  gap          : 16px;
  margin-bottom: 20px;
}

.confirm-icon {
  width          : 48px;
  height         : 48px;
  border-radius  : 50%;
  display        : flex;
  align-items    : center;
  justify-content: center;
  font-size      : 20px;
  color          : white;
}

.confirm-icon.warning {
  background: linear-gradient(135deg, #f59e0b, #d97706);
}

.confirm-icon.danger {
  background: linear-gradient(135deg, #dc2626, #b91c1c);
}

.confirm-icon.info {
  background: linear-gradient(135deg, var(--primary-blue), var(--accent-light-blue));
}

.confirm-title {
  font-size  : 20px;
  font-weight: 700;
  color      : var(--text-primary);
  margin     : 0;
}

.confirm-message {
  color        : var(--text-secondary);
  font-size    : 16px;
  line-height  : 1.5;
  margin-bottom: 24px;
  white-space  : pre-line;
}

.confirm-buttons {
  display        : flex;
  gap            : 12px;
  justify-content: flex-end;
}

.confirm-btn {
  padding      : 12px 24px;
  border-radius: 10px;
  border       : none;
  font-weight  : 600;
  font-size    : 14px;
  cursor       : pointer;
  transition   : all 0.3s var(--ease-smooth);
  min-width    : 100px;
}

.confirm-btn.secondary {
  background: var(--card-hover-bg);
  color     : var(--text-secondary);
  border    : 1px solid var(--border-secondary);
}

.confirm-btn.secondary:hover {
  background: var(--darker-bg);
  color     : var(--text-primary);
  transform : translateY(-1px);
}

.confirm-btn.primary {
  background: linear-gradient(135deg, var(--primary-blue), var(--primary-dark-blue));
  color     : white;
}

.confirm-btn.primary:hover {
  background: linear-gradient(135deg, var(--primary-dark-blue), var(--accent-light-blue));
  transform : translateY(-2px);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

.confirm-btn.danger {
  background: linear-gradient(135deg, #dc2626, #b91c1c);
  color     : white;
}

.confirm-btn.danger:hover {
  background: linear-gradient(135deg, #b91c1c, #991b1b);
  transform : translateY(-2px);
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
}


.image-thumbnail {
  position     : relative;
  display      : inline-block;
  width        : 60px;
  height       : 60px;
  border-radius: 8px;
  overflow     : hidden;
  cursor       : pointer;
  border       : 2px solid var(--border-primary);
  transition   : all 0.3s var(--ease-smooth);
  box-shadow   : var(--shadow-subtle);
}

.image-thumbnail:hover {
  border-color: var(--primary-blue);
  transform   : scale(1.05);
  box-shadow  : var(--shadow-medium);
}

.thumbnail-img {
  width     : 100%;
  height    : 100%;
  object-fit: cover;
  display   : block;
}

.image-overlay {
  position       : absolute;
  top            : 0;
  left           : 0;
  right          : 0;
  bottom         : 0;
  background     : rgba(37, 99, 235, 0.8);
  display        : flex;
  align-items    : center;
  justify-content: center;
  color          : white;
  font-size      : 16px;
  opacity        : 0;
  transition     : opacity 0.3s var(--ease-smooth);
  pointer-events : none;
}

.image-thumbnail:hover .image-overlay {
  opacity: 1;
}

/* Text Preview Styles */
.text-preview-icon {
  position     : relative;
  display      : inline-block;
  width        : 60px;
  height       : 60px;
  border-radius: 8px;
  overflow     : hidden;
  cursor       : pointer;
  border       : 2px solid var(--border-primary);
  transition   : all 0.3s var(--ease-smooth);
  box-shadow   : var(--shadow-subtle);
  background   : linear-gradient(135deg, #1e293b 0%, #334155 100%);
}

.text-preview-icon:hover {
  border-color: var(--accent-cyan);
  transform   : scale(1.05);
  box-shadow  : var(--shadow-medium);
}

.text-icon {
  position       : absolute;
  top            : 0;
  left           : 0;
  right          : 0;
  bottom         : 0;
  display        : flex;
  align-items    : center;
  justify-content: center;
  color          : var(--text-muted);
  font-size      : 24px;
  transition     : all 0.3s var(--ease-smooth);
}

.text-overlay {
  position       : absolute;
  top            : 0;
  left           : 0;
  right          : 0;
  bottom         : 0;
  background     : rgba(8, 145, 178, 0.85);
  display        : flex;
  align-items    : center;
  justify-content: center;
  color          : white;
  font-size      : 16px;
  opacity        : 0;
  transition     : opacity 0.3s var(--ease-smooth);
  pointer-events : none;
}

.text-preview-icon:hover .text-overlay {
  opacity: 1;
}

.text-preview-icon:hover .text-icon {
  color: var(--accent-cyan);
}

/* PDF Preview Styles */
.pdf-preview-icon {
  position     : relative;
  display      : inline-block;
  width        : 60px;
  height       : 60px;
  border-radius: 8px;
  overflow     : hidden;
  cursor       : pointer;
  border       : 2px solid var(--border-primary);
  transition   : all 0.3s var(--ease-smooth);
  box-shadow   : var(--shadow-subtle);
  background   : linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
}

/* Generic small badge to show file type (e.g., PDF) over thumbnails */
.file-type-badge {
  position: absolute;
  top: 4px;
  left: 4px;
  background: rgba(0,0,0,0.65);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  pointer-events: none;
  z-index: 2;
}

.pdf-preview-icon:hover {
  border-color: #dc2626;
  transform   : scale(1.05);
  box-shadow  : var(--shadow-medium);
}

.pdf-icon {
  position       : absolute;
  top            : 0;
  left           : 0;
  right          : 0;
  bottom         : 0;
  display        : flex;
  align-items    : center;
  justify-content: center;
  color          : white;
  font-size      : 24px;
  transition     : all 0.3s var(--ease-smooth);
}

/* Pure text variant for PDF thumbnails */
.pdf-icon-text {
  position       : absolute;
  inset          : 0;
  display        : flex;
  align-items    : center;
  justify-content: center;
  font-weight    : 700;
  font-size      : 18px;
  font-family    : 'Inter', system-ui, sans-serif;
  letter-spacing : 1px;
  color          : #fff;
  text-shadow    : 0 1px 2px rgba(0,0,0,0.4);
  pointer-events : none;
  user-select    : none;
}

.pdf-overlay {
  position       : absolute;
  top            : 0;
  left           : 0;
  right          : 0;
  bottom         : 0;
  background     : rgba(220, 38, 38, 0.85);
  display        : flex;
  align-items    : center;
  justify-content: center;
  color          : white;
  font-size      : 16px;
  opacity        : 0;
  transition     : opacity 0.3s var(--ease-smooth);
  pointer-events : none;
}

.pdf-preview-icon:hover .pdf-overlay {
  opacity: 1;
}

.pdf-preview-icon:hover .pdf-icon {
  color: #fecaca;
}

.file-item.has-pdf {
  align-items: center;
  padding    : 12px 16px;
}

.file-item.has-pdf .file-info {
  align-items: center;
}

.file-item.has-pdf .pdf-preview-icon {
  margin-right: 8px;
}

/* Video Preview Styles */
.video-preview-icon {
  position     : relative;
  display      : inline-block;
  width        : 60px;
  height       : 60px;
  border-radius: 8px;
  overflow     : hidden;
  cursor       : pointer;
  border       : 2px solid var(--border-primary);
  transition   : all 0.3s var(--ease-smooth);
  box-shadow   : var(--shadow-subtle);
  background   : linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%);
}

.video-preview-icon:hover {
  border-color: #7c3aed;
  transform   : scale(1.05);
  box-shadow  : var(--shadow-medium);
}

.video-icon {
  position       : absolute;
  top            : 0;
  left           : 0;
  right          : 0;
  bottom         : 0;
  display        : flex;
  align-items    : center;
  justify-content: center;
  color          : white;
  font-size      : 24px;
  transition     : all 0.3s var(--ease-smooth);
}

/* Pure text variant for video thumbnails */
.video-icon-text {
  position       : absolute;
  inset          : 0;
  display        : flex;
  align-items    : center;
  justify-content: center;
  font-weight    : 700;
  font-size      : 28px;
  font-family    : 'Inter', system-ui, sans-serif;
  color          : #fff;
  text-shadow    : 0 1px 2px rgba(0,0,0,0.4);
  pointer-events : none;
  user-select    : none;
}

.video-overlay {
  position       : absolute;
  top            : 0;
  left           : 0;
  right          : 0;
  bottom         : 0;
  background     : rgba(124, 58, 237, 0.85);
  display        : flex;
  align-items    : center;
  justify-content: center;
  color          : white;
  font-size      : 20px;
  opacity        : 0;
  transition     : opacity 0.3s var(--ease-smooth);
  pointer-events : none;
}

.video-preview-icon:hover .video-overlay {
  opacity: 1;
}

.video-preview-icon:hover .video-icon {
  color: #ddd6fe;
}

.file-item.has-video {
  align-items: center;
  padding    : 12px 16px;
}

.file-item.has-video .file-info {
  align-items: center;
}

.file-item.has-video .video-preview-icon {
  margin-right: 8px;
}

.image-modal {
  position       : fixed;
  top            : 0;
  left           : 0;
  width          : 100%;
  height         : 100%;
  background     : rgba(0, 0, 0, 0.8);
  display        : none;
  align-items    : center;
  justify-content: center;
  z-index        : 10000;
  cursor         : pointer;
}

.image-modal.show {
  display: flex !important;
}

.modal-content {
  max-width    : 90vw;
  max-height   : 90vh;
  background   : var(--card-bg);
  padding      : 20px;
  border-radius: 12px;
  box-shadow   : 0 20px 40px rgba(0, 0, 0, 0.5);
  position     : relative;
}

.modal-image {
  max-width    : 100%;
  max-height   : 70vh;
  object-fit   : contain;
  border-radius: 8px;
  display      : block;
}

.modal-close {
  position       : absolute;
  top            : 5px;
  right          : 5px;
  width          : 30px;
  height         : 30px;
  background     : var(--primary-blue);
  color          : white;
  border         : none;
  border-radius  : 50%;
  cursor         : pointer;
  font-size      : 16px;
  display        : flex;
  align-items    : center;
  justify-content: center;
}

.modal-close:hover {
  background: var(--primary-dark-blue);
}

.modal-filename {
  text-align : center;
  margin-top : 10px;
  color      : var(--text-primary);
  font-size  : 14px;
  font-weight: 500;
}

/* Text Modal Styles */
.text-modal-content {
  max-width : 90vw;
  max-height: 90vh;
  width     : 800px;
  height    : 600px;
}

#text-modal {
  z-index: 11000 !important;
}

.text-modal-header {
  display        : flex;
  justify-content: space-between;
  align-items    : center;
  margin-bottom  : 15px;
  padding-bottom : 10px;
  border-bottom  : 1px solid var(--border-primary);
}

.text-modal-info {
  font-size: 12px;
  color    : var(--text-muted);
}

.text-modal-body {
  height       : calc(100% - 60px);
  overflow     : auto;
  border       : 1px solid var(--border-primary);
  border-radius: 8px;
  background   : var(--darker-bg);
}

.text-content {
  margin         : 0;
  padding        : 20px;
  font-family    : 'Fira Code', 'Courier New', monospace;
  font-size      : 13px;
  line-height    : 1.6;
  color          : var(--text-secondary);
  background     : transparent;
  border         : none;
  outline        : none;
  white-space    : pre-wrap;
  word-wrap      : break-word;
  overflow-wrap  : anywhere;
  tab-size       : 2;
  -moz-tab-size  : 2;
  -o-tab-size    : 2;
  min-height     : 100%;
  box-sizing     : border-box;
}

.text-content::-webkit-scrollbar {
  width: 8px;
}

.text-content::-webkit-scrollbar-track {
  background   : var(--darker-bg);
  border-radius: 4px;
}

.text-content::-webkit-scrollbar-thumb {
  background   : var(--border-primary);
  border-radius: 4px;
}

.text-content::-webkit-scrollbar-thumb:hover {
  background: var(--border-secondary);
}

/* PDF Modal Styles */
.pdf-modal-content {
  max-width : 90vw;
  max-height: 90vh;
  width     : 900px;
  height    : 700px;
}

.pdf-modal-header {
  display        : flex;
  justify-content: space-between;
  align-items    : center;
  margin-bottom  : 15px;
  padding-bottom : 10px;
  border-bottom  : 1px solid var(--border-primary);
}

.pdf-modal-info {
  font-size: 12px;
  color    : var(--text-muted);
}

.pdf-modal-body {
  height       : calc(100% - 60px);
  overflow     : hidden;
  border       : 1px solid var(--border-primary);
  border-radius: 8px;
  background   : var(--darker-bg);
}

.pdf-viewer {
  width        : 100%;
  height       : 100%;
  border       : none;
  border-radius: 8px;
  background   : white;
}

/* Video Modal Styles */
.video-modal-content {
  max-width : 90vw;
  max-height: 90vh;
  width     : 900px;
  height    : 700px;
}

.video-modal-header {
  display        : flex;
  justify-content: space-between;
  align-items    : center;
  margin-bottom  : 15px;
  padding-bottom : 10px;
  border-bottom  : 1px solid var(--border-primary);
}

.video-modal-info {
  font-size: 12px;
  color    : var(--text-muted);
}

.video-modal-body {
  height       : calc(100% - 60px);
  overflow     : hidden;
  border       : 1px solid var(--border-primary);
  border-radius: 8px;
  background   : var(--darker-bg);
  display      : flex;
  align-items  : center;
  justify-content: center;
}

.video-player {
  width        : 100%;
  max-height   : 100%;
  border-radius: 8px;
  background   : black;
  outline      : none;
}

/* File type specific syntax highlighting hints */
.text-content.language-json {
  color: #e6db74;
}

.text-content.language-html {
  color: #f92672;
}

.text-content.language-css {
  color: #66d9ef;
}

.text-content.language-js,
.text-content.language-javascript {
  color: #a6e22e;
}

.file-item.has-text {
  align-items: center;
  padding    : 12px 16px;
}

.file-item.has-text .file-info {
  align-items: center;
}

.file-item.has-text .text-preview-icon {
  margin-right: 8px;
}

.preview-img {
  max-width    : 400px;
  max-height   : 400px;
  object-fit   : contain;
  border-radius: 8px;
  display      : block;
}

.file-item.has-image {
  align-items: center;
  padding    : 12px 16px;
}

.file-item.has-image .file-info {
  align-items: center;
}

.file-item.has-image .file-icon {
  width       : auto;
  margin-right: 8px;
}

.file-item.has-image .file-name {
  margin-left: 8px;
}

.file-icon.image-icon {
  background             : linear-gradient(135deg, var(--primary-blue), var(--accent-light-blue));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip        : text;
}

.hidden {
  display: none !important;
}

.flex {
  display: flex;
}

.flex-1 {
  flex: 1;
}

.items-center {
  align-items: center;
}

.justify-between {
  justify-content: space-between;
}

.gap-2 {
  gap: 8px;
}

.mb-2 {
  margin-bottom: 8px;
}

.mb-4 {
  margin-bottom: 16px;
}

.w-full {
  width: 100%;
}

.no-animate * {
  animation : none !important;
  transition: none !important;
}

/* Version management styles */
.file-item.has-versions {
  border-left: 3px solid var(--accent-light-blue);
}

.file-details {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}

.file-metadata {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}

.file-date {
  display: flex;
  align-items: center;
  gap: 4px;
}

.file-date i {
  font-size: 10px;
}

.file-size {
  font-weight: 500;
  color: var(--text-secondary);
}

.version-info {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text-muted);
}

.version-count {
  font-weight: 500;
  color: var(--accent-light-blue);
}

.btn-versions {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 3px;
  transition: all 0.2s var(--ease-smooth);
}

.btn-versions:hover {
  background: var(--card-hover-bg);
  color: var(--accent-light-blue);
}

.file-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.versions-button {
  background: var(--card-bg) !important;
  border: 1px solid var(--border-secondary) !important;
}

.versions-button:hover {
  background: var(--card-hover-bg) !important;
  border-color: var(--accent-light-blue) !important;
  color: var(--accent-light-blue) !important;
}

.version-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.version-item {
  background: var(--card-bg);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: all 0.3s var(--ease-smooth);
}

.version-item:hover {
  background: var(--card-hover-bg);
  border-color: var(--border-secondary);
}

.version-item.current {
  background: linear-gradient(135deg, var(--card-bg) 0%, rgba(37, 99, 235, 0.1) 100%);
  border-color: var(--primary-blue);
  position: relative;
}

.version-item.current::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(180deg, var(--primary-blue), var(--accent-light-blue));
  border-radius: 0 4px 4px 0;
}

.version-details {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.version-id {
  font-family: "Fira Code", monospace;
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 500;
}

.version-date {
  font-size: 13px;
  color: var(--text-primary);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;
}

.version-date i {
  color: var(--primary-blue);
  font-size: 12px;
}

.version-date-relative {
  font-size: 11px;
  color: var(--text-muted);
  font-style: italic;
}

.version-size {
  font-size: 11px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 4px;
}

.current-badge {
  background: linear-gradient(135deg, var(--success-green), #10b981);
  color: white;
  font-size: 10px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-left: 8px;
}

.version-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.version-btn {
  padding: 6px 12px;
  font-size: 11px;
  border-radius: 6px;
  border: 1px solid var(--border-secondary);
  background: var(--card-bg);
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.2s var(--ease-smooth);
  display: flex;
  align-items: center;
  gap: 4px;
}

.version-btn:hover {
  background: var(--card-hover-bg);
  border-color: var(--primary-blue);
  color: var(--primary-blue);
}

.version-btn.primary {
  background: linear-gradient(135deg, var(--primary-blue), var(--primary-dark-blue));
  color: white;
  border-color: var(--primary-blue);
}

.version-btn.primary:hover {
  background: linear-gradient(135deg, var(--primary-dark-blue), var(--accent-light-blue));
  border-color: var(--accent-light-blue);
  color: white;
}

.version-btn.danger {
  background: var(--danger-blue);
  color: white;
  border-color: var(--danger-blue);
}

.version-btn.danger:hover {
  background: #ff1529;
  border-color: #ff1529;
  color: white;
}