/* ═══════════════════════════════════════
   RIGHT PANEL & CONSOLE
   ═══════════════════════════════════════ */

/* ─── RIGHT PANEL (LIVE PREVIEW) ─── */
.right-panel {
  grid-area: right;
  background: var(--bg-sidebar);
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

.resizer {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 4px;
  cursor: ew-resize;
  background: transparent;
  z-index: 10;
  transition: background 0.2s ease;
}
.resizer:hover, .resizer.dragging {
  background: var(--accent);
}

#code-preview-section {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

#code-preview-section .panel-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  text-transform: uppercase;
  padding: 12px 16px 6px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

#copy-code-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px;
  border-radius: 3px;
  display: flex;
  align-items: center;
  transition: all 0.2s;
}
#copy-code-btn svg { width: 14px; height: 14px; fill: currentColor; }
#copy-code-btn:hover { color: var(--text-primary); background: var(--bg-toolbar); }
#copy-code-btn.copied { color: var(--console-success); }

#code-preview {
  margin: 0;
  padding: 10px 14px;
  background: var(--bg-main);
  border: none;
  overflow: auto;
  flex: 1;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.7;
  color: var(--text-primary);
  white-space: pre;
  min-width: 0;
}

/* Syntax highlight classes applied by JS (Dark Theme Arduino Specs) */
.kw  { color: #9ebb3e; }   /* Data Structures & Keywords (Readable Muted Olive Green) */
.lit { color: #00979C; }   /* Variables, Constants & System Literals (Arduino Teal) */
.fn  { color: #D35400; }   /* Functions & Methods (Pumpkin Orange) */
.num { color: #FFCD22; }   /* Numbers (Bright Amber Gold) */
.cm  { color: #95A5A6; font-style: italic; }  /* Comments (Asbestos Gray) */
.pn  { color: #DAE3E3; }   /* Standard Foreground Punctuation */

#code-preview::-webkit-scrollbar { width: 4px; height: 4px; }
#code-preview::-webkit-scrollbar-thumb { background: var(--scrollbar) !important; border-radius: 4px; }
#code-preview::-webkit-scrollbar-track { background: transparent; }

/* ─── STATUS BAR ─── */
.status-bar {
  grid-area: statusbar;
  background: var(--bg-statusbar);
  border-top: 1px solid var(--border);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  font-size: 11px;
  user-select: none;
  height: 24px;
  box-sizing: border-box;
}

.snap-notice {
  font-size: 11px;
  display: none;
}
.snap-notice.visible {
  display: block;
}

.progress-wrapper {
  display: none;
  align-items: center;
  gap: 8px;
  width: 240px;
}
.progress-wrapper.visible {
  display: flex;
}

.progress-label {
  display: flex;
  gap: 6px;
  font-size: 10px;
  white-space: nowrap;
  color: var(--text-muted);
}

.progress-track {
  flex: 1;
  height: 3px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 1.5px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  width: 0%;
  background: var(--accent); /* Premium green/teal progress fill */
  transition: width 0.1s ease;
}

/* ─── NOTIFICATION POPOVER ─── */
.notification-popover {
  display: none;
  flex-direction: column;
  position: absolute;
  bottom: 28px;
  right: 0;
  width: 320px;
  max-height: 360px;
  background-color: #1a2024;
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  z-index: 10000;
  font-family: var(--font-ui);
}

.notification-item {
  display: flex;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
  transition: background-color 0.15s ease;
  align-items: flex-start;
  cursor: default;
}

.notification-item:hover {
  background-color: rgba(255, 255, 255, 0.03);
}

.notification-item-icon {
  flex-shrink: 0;
  margin-top: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.notification-item-msg {
  font-size: 11px;
  color: var(--text-primary);
  line-height: 1.4;
  word-break: break-word;
}

.notification-item-time {
  font-size: 9px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  margin-top: 2px;
}

/* Custom scrollbar for notifications list */
#notification-list::-webkit-scrollbar {
  width: 5px;
}
#notification-list::-webkit-scrollbar-thumb {
  background: var(--scrollbar) !important;
  border-radius: 2.5px;
}
#notification-list::-webkit-scrollbar-track {
  background: transparent;
}

/* \u2500\u2500\u2500 CONSOLE PANEL \u2500\u2500\u2500 */
.console-panel {
  grid-area: console;
  background: var(--bg-main);
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  position: relative;
  min-height: 80px;
  overflow: hidden;
}

/* Vertical drag-resize handle on top edge */
.console-resizer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  cursor: ns-resize;
  background: transparent;
  z-index: 20;
  transition: background 0.2s ease;
}
.console-resizer:hover,
.console-resizer.dragging {
  background: var(--accent);
}

/* \u2500\u2500\u2500 Console header with tabs \u2500\u2500\u2500 */
.console-header {
  height: 32px;
  background: var(--bg-sidebar);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  flex-shrink: 0;
}

.console-tabs {
  display: flex;
  align-items: stretch;
}

.console-tab {
  background: transparent;
  border: none;
  border-right: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0 14px;
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
  font-family: var(--font-ui);
  position: relative;
}
.console-tab:hover {
  color: var(--text-primary);
  background: rgba(255,255,255,0.04);
}
.console-tab.active {
  color: var(--accent);
  background: var(--bg-main);
}
.console-tab.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--accent);
}

.console-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 8px;
}

.console-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 3px;
  transition: color 0.15s, background 0.15s;
}
.console-btn svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
  pointer-events: none;
}
.console-btn:hover { color: var(--text-primary); background: rgba(255,255,255,0.07); }
.console-btn.active { color: var(--accent); }

/* \u2500\u2500\u2500 Output log \u2500\u2500\u2500 */
.log-container {
  flex: 1;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.6;
  padding: 8px 12px;
  overflow-y: auto;
  color: var(--console-text);
}

.log-line {
  display: flex;
}
.log-time {
  color: var(--console-time);
  min-width: 60px;
  margin-right: 12px;
  flex-shrink: 0;
}
.log-msg {
  word-break: break-all;
}

.log-line.success .log-msg { color: var(--console-success); }
.log-line.error   .log-msg { color: var(--console-error); }
.log-line.warn    .log-msg { color: var(--console-warning); }
.log-line.info    .log-msg { color: #9cdcfe; }

/* Info Log Message Light Mode Override */
body:not(.theme-dark) .log-line.info .log-msg {
  color: #005a9c !important; /* Highly legible premium dark blue in light mode */
}

/* ─── Serial Monitor Panel ─── */
.serial-monitor-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

/* Status bar */
.serial-status-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 10px;
  background: var(--bg-sidebar);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.serial-status-left {
  display: flex;
  align-items: center;
  gap: 7px;
}

.serial-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-muted);
  flex-shrink: 0;
  transition: background 0.2s;
}
.serial-status-dot.active {
  background: var(--accent);
  animation: pulse 2s infinite;
}

.serial-status-text {
  font-size: 11px;
  color: var(--text-muted);
}

.serial-connect-btn {
  background: var(--accent);
  border: none;
  color: var(--btn-primary-text) !important;
  padding: 4px 14px;
  border-radius: 6px;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s, opacity 0.15s;
  flex-shrink: 0;
}
.serial-connect-btn:hover { background: var(--accent-hover); }
.serial-connect-btn.connected {
  background: #ef4444 !important;
  color: #ffffff !important;
}
.serial-connect-btn.connected:hover { opacity: 0.9 !important; }

/* RX log */
.serial-log {
  flex: 1;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.6;
  padding: 6px 0;
  overflow-y: auto;
  color: var(--console-text);
}

.serial-line {
  display: flex;
  padding: 1px 12px;
  gap: 10px;
}
.serial-time {
  color: var(--console-time);
  min-width: 58px;
  flex-shrink: 0;
  font-size: 11px;
  padding-top: 1px;
}
.serial-msg {
  word-break: break-all;
  flex: 1;
}
.serial-rx  .serial-msg { color: #c8e6c9; }
.serial-tx  .serial-msg { color: var(--accent); font-style: italic; }
.serial-sys .serial-msg { color: var(--text-muted); font-style: italic; }

/* Serial Monitor Light Mode Overrides */
body:not(.theme-dark) .serial-rx .serial-msg {
  color: #1b5e20 !important; /* Premium legible dark forest green in light mode */
}
body:not(.theme-dark) .serial-tx .serial-msg {
  color: #005a9c !important; /* Premium dark blue for transmitted text in light mode */
}
body:not(.theme-dark) .serial-sys .serial-msg {
  color: #4a4a4a !important; /* Dark grey for system messages in light mode */
}


/* Send bar */
.serial-input-row {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 8px;
  border-top: 1px solid var(--border);
  background: var(--bg-sidebar);
  flex-shrink: 0;
}

.serial-baud,
.serial-line-ending {
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  color: var(--input-text);
  padding: 4px 6px;
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  outline: none;
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color 0.15s;
}
.serial-baud { min-width: 80px; }
.serial-line-ending { min-width: 72px; }

.serial-baud:disabled,
.serial-line-ending:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.serial-input {
  flex: 1;
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  color: var(--input-text);
  padding: 5px 10px;
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 12px;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  min-width: 0;
}
.serial-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 15%, transparent) !important;
}
.serial-input:disabled { opacity: 0.5; }

.serial-send-btn {
  background: var(--accent);
  border: none;
  color: var(--btn-primary-text) !important;
  padding: 5px 14px;
  border-radius: 6px;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s, opacity 0.15s;
  flex-shrink: 0;
}
.serial-send-btn:hover:not(:disabled) { background: var(--accent-hover); }
.serial-send-btn:disabled {
  background: var(--btn-disabled);
  color: var(--text-muted);
  cursor: not-allowed;
}

/* Timestamps defaultly hidden */
.log-time, .serial-time {
  display: none !important;
}

/* Timestamps shown if enabled on the console panel */
.show-timestamps .log-time,
.show-timestamps .serial-time {
  display: inline-block !important;
}