/* public/css/app.css — Pin2Code dark theme */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:      #0D1117;
  --bg2:     #161B22;
  --bg3:     #21262D;
  --bg4:     #30363D;
  --cyan:    #00D4FF;
  --amber:   #F5A623;
  --green:   #3FB950;
  --purple:  #BC8CFF;
  --red:     #FF7B72;
  --text:    #E6EDF3;
  --text2:   #8B949E;
  --text3:   #484F58;
  --border:  #30363D;
  --border2: #21262D;
  --mono:    'JetBrains Mono', monospace;
  --sans:    'Inter', sans-serif;
  --r:       8px;
  --r2:      12px;
}

html, body { height: 100%; overflow: hidden; }
body { background: var(--bg); color: var(--text); font-family: var(--sans); font-size: 13px; line-height: 1.5; }

/* Hide mobile elements on desktop */
.mobile-toggle, .mobile-overlay { display: none; }

/* ── App shell ── */
.app-shell { display: grid; grid-template-rows: 44px 1fr; height: 100vh; }

/* ── Topbar ── */
.topbar {
  display: flex; align-items: center; gap: 10px;
  padding: 0 14px; border-bottom: 1px solid var(--border);
  background: var(--bg2); flex-shrink: 0;
}
.logo { 
  font-family: var(--mono);
  font-size: 16px;          
  font-weight: 700; 
  color: #ffffff;           
  text-decoration: none; 
}
.logo span { color: var(--purple); }
.tb-sep  { width: 1px; height: 18px; background: var(--border); margin: 0 2px; }
.tb-label { font-family: var(--mono); font-size: 10px; color: var(--text3); letter-spacing: .08em; }
.mcu-select {
  font-family: var(--mono); font-size: 11px;
  background: var(--bg3); border: 1px solid var(--border);
  color: var(--text); padding: 3px 8px; border-radius: 6px;
  cursor: pointer; max-width: 200px;
}
.mcu-select:focus { outline: 1px solid var(--cyan); }
.tb-meta { font-family: var(--mono); font-size: 10px; color: var(--text3); }
.tb-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.plan-badge {
  font-family: var(--mono); font-size: 10px; padding: 2px 8px;
  border-radius: 4px; background: rgba(245,166,35,.15);
  border: 1px solid rgba(245,166,35,.3); color: var(--amber);
  letter-spacing: .06em;
}
.plan-badge.pro { background: rgba(0,212,255,.1); border-color: rgba(0,212,255,.3); color: var(--cyan); }
.upgrade-btn { font-family: var(--mono); font-size: 10px; color: var(--cyan); cursor: pointer; background: none; border: none; letter-spacing: .06em; text-decoration: none; }
.tb-link { font-size: 12px; color: var(--text2); text-decoration: none; }
.tb-link:hover { color: var(--text); }
.tb-btn { font-family: var(--mono); font-size: 11px; padding: 4px 10px; border-radius: 6px; background: var(--cyan); color: #000; font-weight: 600; border: none; cursor: pointer; text-decoration: none; }

/* ── Body layout ── */
.app-body { display: grid; grid-template-columns: 210px 1fr 300px; height: 100%; overflow: hidden; }

/* ── Sidebar ── */
.sidebar { background: var(--bg2); border-right: 1px solid var(--border); display: flex; flex-direction: column; overflow: hidden; }
.sb-section { padding: 8px 12px 4px; font-family: var(--mono); font-size: 9px; color: var(--text3); letter-spacing: .12em; text-transform: uppercase; }
.periph-scroll { flex: 1; overflow-y: auto; }
.periph-scroll::-webkit-scrollbar { width: 3px; }
.periph-scroll::-webkit-scrollbar-thumb { background: var(--border); }
.cat-header {
  padding: 5px 12px 3px; font-family: var(--mono); font-size: 9px; color: var(--text3);
  letter-spacing: .1em; text-transform: uppercase; cursor: pointer; user-select: none;
  display: flex; align-items: center; gap: 5px;
}
.cat-header:hover { color: var(--text2); }
.cat-arrow { transition: transform .12s; font-size: 8px; }
.cat-header.collapsed .cat-arrow { transform: rotate(-90deg); }
.cat-header.collapsed + .cat-items { display: none; }
.pb {
  display: flex; align-items: center; gap: 6px; padding: 5px 12px;
  cursor: pointer; border: none; background: transparent; width: 100%;
  text-align: left; color: var(--text2); font-size: 11px; transition: background .08s;
}
.pb:hover     { background: var(--bg3); color: var(--text); }
.pb.active    { color: var(--green); background: rgba(63,185,80,.06); }
.pb.conflict  { color: var(--amber); }
.pb-dot  { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.pb-name { font-size: 11px; font-weight: 500; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pb-proto { font-family: var(--mono); font-size: 9px; color: var(--text3); }
.pb-info { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.pb-add  { font-size: 13px; color: var(--text3); flex-shrink: 0; }
.pb.active .pb-add { color: var(--red); font-size: 11px; }

/* ── Main area ── */
.main-area { display: flex; flex-direction: column; overflow: hidden; background: var(--bg); }
.tabs { display: flex; border-bottom: 1px solid var(--border); background: var(--bg2); flex-shrink: 0; }
.tab {
  padding: 9px 14px; font-family: var(--mono); font-size: 11px;
  color: var(--text2); cursor: pointer; border: none; background: transparent;
  border-bottom: 2px solid transparent; transition: all .1s; letter-spacing: .04em;
}
.tab.active  { color: var(--cyan); border-bottom-color: var(--cyan); background: var(--bg); }
.tab:hover:not(.active) { color: var(--text); }
.tab-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; border-radius: 50%;
  font-size: 9px; margin-left: 4px; background: var(--red); color: #fff;
}

.pane { display: none; flex: 1; overflow-y: auto; padding: 12px; flex-direction: column; gap: 10px; }
.pane.show { display: flex; }
.pane::-webkit-scrollbar { width: 3px; }
.pane::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

/* Stats */
.stats-row { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; flex-shrink: 0; }
.stat { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--r); padding: 8px 10px; }
.stat-label { font-family: var(--mono); font-size: 9px; color: var(--text3); letter-spacing: .08em; text-transform: uppercase; margin-bottom: 3px; }
.stat-val { font-family: var(--mono); font-size: 17px; font-weight: 600; color: var(--text); }
.stat-val.ok   { color: var(--green); }
.stat-val.warn { color: var(--amber); }
.stat-val.info { color: var(--cyan);  }

/* Canvas */
.canvas-wrap { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--r2); overflow: hidden; flex-shrink: 0; }
.canvas-bar  { padding: 7px 12px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; }
.canvas-title { font-family: var(--mono); font-size: 10px; color: var(--text2); letter-spacing: .06em; }
.canvas-hint  { font-family: var(--mono); font-size: 9px; color: var(--text3); }
#pin-canvas   { display: block; width: 100%; height: 280px; }

/* Pin detail */
.pin-detail-card { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--r2); padding: 12px; flex-shrink: 0; }
.pdc-name  { font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 8px; }
.pdc-row   { display: flex; justify-content: space-between; padding: 4px 0; border-bottom: 1px solid var(--border2); font-size: 11px; }
.pdc-row:last-child { border-bottom: none; }
.pdc-label { color: var(--text2); }
.pdc-val   { font-family: var(--mono); font-size: 10px; color: var(--text); }
.func-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.fc { font-family: var(--mono); font-size: 9px; padding: 2px 6px; border-radius: 3px; border: 1px solid var(--border); color: var(--text2); }
.fc.hl { border-color: var(--cyan); color: var(--cyan); background: rgba(0,212,255,.08); }

/* Added list */
.added-wrap { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--r2); overflow: hidden; }
.added-bar  { padding: 7px 10px; border-bottom: 1px solid var(--border); font-family: var(--mono); font-size: 10px; color: var(--text2); display: flex; align-items: center; justify-content: space-between; }
.clear-btn  { font-family: var(--mono); font-size: 9px; background: none; border: none; color: var(--text3); cursor: pointer; padding: 2px 4px; }
.clear-btn:hover { color: var(--red); }
.added-item { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-bottom: 1px solid var(--border2); font-size: 11px; }
.added-item:last-child { border-bottom: none; }
.ai-name   { font-family: var(--mono); font-size: 11px; font-weight: 500; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-pins   { font-family: var(--mono); font-size: 10px; color: var(--text2); }
.ai-proto  { font-family: var(--mono); font-size: 9px; color: var(--green); padding: 1px 5px; border-radius: 3px; background: rgba(63,185,80,.1); }
.ai-rm     { background: none; border: none; cursor: pointer; color: var(--text3); font-size: 12px; padding: 2px 4px; }
.ai-rm:hover { color: var(--red); }
.empty-state { padding: 16px; text-align: center; color: var(--text3); font-size: 12px; }

/* Conflict */
.conflict-card { border-left: 3px solid var(--amber); background: rgba(245,166,35,.06); border-radius: 0 var(--r) var(--r) 0; padding: 10px 12px; margin-bottom: 8px; }
.cc-title { font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--amber); margin-bottom: 3px; }
.cc-desc  { font-size: 11px; color: var(--text2); line-height: 1.5; }
.no-conflicts { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px; gap: 8px; color: var(--green); font-size: 13px; }

/* Code pane */
.code-bar { display: flex; align-items: center; gap: 6px; flex-shrink: 0; flex-wrap: wrap; }
.lang-group { display: flex; gap: 4px; flex-wrap: wrap; }
.lang-btn { font-family: var(--mono); font-size: 10px; padding: 4px 10px; border-radius: 5px; border: 1px solid var(--border); background: transparent; color: var(--text2); cursor: pointer; }
.lang-btn.active { background: var(--bg3); border-color: var(--border2); color: var(--text); font-weight: 500; }
.lang-btn:hover:not(.active) { color: var(--text); }
.code-actions { margin-left: auto; display: flex; gap: 6px; }
.icon-btn { font-family: var(--mono); font-size: 10px; padding: 4px 10px; border-radius: 5px; border: 1px solid var(--border); background: transparent; color: var(--text2); cursor: pointer; }
.icon-btn:hover { background: var(--bg3); color: var(--text); }
.code-block { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--r2); padding: 14px; font-family: var(--mono); font-size: 11px; line-height: 1.9; overflow: auto; white-space: pre; flex: 1; min-height: 200px; }
.kw { color: #FF7B72; } .fn { color: #00D4FF; } .num { color: #F5A623; }
.cm { color: #484F58; } .str { color: #A5D6FF; } .ok { color: #3FB950; } .pp { color: #BC8CFF; }

/* BOM */
.bom-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.bom-table th { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--border); font-family: var(--mono); font-size: 10px; color: var(--text2); letter-spacing: .06em; text-transform: uppercase; }
.bom-table td { padding: 6px 8px; border-bottom: 1px solid var(--border2); }
.bom-table tr:last-child td { border-bottom: none; }
.bom-total { font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--green); }

/* AI Panel */
.ai-panel { display: flex; flex-direction: column; background: var(--bg2); border-left: 1px solid var(--border); overflow: hidden; }
.ai-head  { padding: 10px 12px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.ai-icon  { font-size: 18px; }
.ai-title { font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--text); }
.ai-subtitle { font-size: 10px; color: var(--text2); }
.ai-badge { margin-left: auto; font-family: var(--mono); font-size: 9px; padding: 2px 6px; border-radius: 3px; background: rgba(188,140,255,.15); border: 1px solid rgba(188,140,255,.3); color: var(--purple); }

.ai-messages { flex: 1; overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.ai-messages::-webkit-scrollbar { width: 3px; }
.ai-messages::-webkit-scrollbar-thumb { background: var(--border); }
.ai-msg { display: flex; flex-direction: column; gap: 3px; }
.ai-role { font-family: var(--mono); font-size: 9px; color: var(--text3); letter-spacing: .08em; text-transform: uppercase; }
.ai-bubble { padding: 8px 10px; border-radius: var(--r); font-size: 12px; line-height: 1.6; word-break: break-word; }
.ai-msg.user      .ai-bubble { background: rgba(0,212,255,.07); border: 1px solid rgba(0,212,255,.15); }
.ai-msg.assistant .ai-bubble { background: var(--bg3); border: 1px solid var(--border); }
.ai-msg.system    .ai-bubble { background: rgba(63,185,80,.06); border: 1px solid rgba(63,185,80,.2); color: var(--green); font-family: var(--mono); font-size: 10px; }
.ai-bubble pre.ai-code { background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: 8px; margin: 6px 0; overflow-x: auto; font-size: 10px; line-height: 1.7; white-space: pre; font-family: var(--mono); color: var(--text); }
.ai-bubble code { font-family: var(--mono); font-size: 10px; background: var(--bg); padding: 1px 4px; border-radius: 3px; color: var(--cyan); }

.ai-typing { display: flex; align-items: center; gap: 6px; padding: 8px 12px; color: var(--text3); font-size: 11px; flex-shrink: 0; }
.dots span { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--cyan); animation: bounce .9s ease-in-out infinite; }
.dots span:nth-child(2) { animation-delay: .15s; }
.dots span:nth-child(3) { animation-delay: .3s;  }
@keyframes bounce { 0%,80%,100% { transform:translateY(0); } 40% { transform:translateY(-5px); } }

.ai-input-area { padding: 8px 10px; border-top: 1px solid var(--border); flex-shrink: 0; display: flex; flex-direction: column; gap: 6px; }
.ai-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.ai-chip { font-family: var(--mono); font-size: 9px; padding: 3px 7px; border-radius: 4px; border: 1px solid var(--border); background: transparent; color: var(--text2); cursor: pointer; transition: all .1s; text-align: left; }
.ai-chip:hover { border-color: var(--cyan); color: var(--cyan); background: rgba(0,212,255,.05); }
.ai-row { display: flex; gap: 6px; }
.ai-textarea { flex: 1; background: var(--bg3); border: 1px solid var(--border); border-radius: 7px; padding: 7px 10px; font-family: var(--sans); font-size: 12px; color: var(--text); resize: none; line-height: 1.4; outline: none; }
.ai-textarea:focus { border-color: var(--cyan); }
.ai-textarea::placeholder { color: var(--text3); }
.ai-send { background: var(--cyan); border: none; border-radius: 7px; padding: 7px 12px; cursor: pointer; color: #000; font-family: var(--mono); font-size: 13px; font-weight: 700; flex-shrink: 0; align-self: flex-end; }
.ai-send:hover    { background: #33DDFF; }
.ai-send:disabled { opacity: .4; cursor: not-allowed; }
.ai-footer { display: flex; justify-content: space-between; align-items: center; font-size: 10px; color: var(--text3); }
.save-config-btn { font-family: var(--mono); font-size: 10px; background: none; border: 1px solid var(--border); color: var(--text2); padding: 3px 8px; border-radius: 4px; cursor: pointer; }
.save-config-btn:hover { border-color: var(--cyan); color: var(--cyan); }

/* Global scrollbar */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

/* ── Mobile Slide-Out Menus ── */
@media (max-width: 900px) {
  .app-shell { display: flex; flex-direction: column; }
  .app-body { display: flex; height: 100%; position: relative; overflow: hidden; }
  
  /* Make main area take full screen */
  .main-area { width: 100%; min-width: 100%; flex: 1; }
  .tabs { overflow-x: auto; white-space: nowrap; }
  .stats-row { grid-template-columns: repeat(2, 1fr); }
  .ai-textarea {font-size: 16px !important;}
  #pin-canvas { height: 240px; } 

  /* Topbar buttons */
  .mobile-toggle {
    display: flex; align-items: center; justify-content: center;
    background: var(--bg3); border: 1px solid var(--border); color: var(--text);
    border-radius: 6px; width: 32px; height: 32px; cursor: pointer;
  }
  .topbar { padding: 10px; gap: 8px; flex-wrap: wrap; }
  .tb-right { flex: 1; justify-content: flex-end; }
  .mcu-select { max-width: 110px; }

  /* Sidebar (Left Drawer) */
  .sidebar {
    position: absolute; top: 0; left: -300px; width: 280px; height: 100%;
    z-index: 1000; transition: left 0.3s ease;
    box-shadow: 5px 0 15px rgba(0,0,0,0.7);
  }
  .sidebar.open { left: 0; }

  /* AI Panel (Right Drawer) */
  .ai-panel {
    position: absolute; top: 0; right: -350px; width: 320px; max-width: 85vw; height: 100%;
    z-index: 1000; transition: right 0.3s ease;
    box-shadow: -5px 0 15px rgba(0,0,0,0.7); border-left: 1px solid var(--border);
  }
  .ai-panel.open { right: 0; }

  /* Dark Overlay background */
  .mobile-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.6); z-index: 999;
    opacity: 0; pointer-events: none; transition: opacity 0.3s ease;
  }
  .mobile-overlay.show {
    opacity: 1; pointer-events: auto; display: block;
  }
}
/* ── UI Polish: Toasts & Empty States ── */
.toast-container {
  position: fixed; bottom: 20px; right: 20px;
  display: flex; flex-direction: column; gap: 10px; z-index: 9999;
}
.toast {
  background: var(--bg3); border-left: 4px solid var(--cyan);
  color: var(--text); padding: 12px 16px; border-radius: 6px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.5);
  font-family: var(--sans); font-size: 13px; font-weight: 500;
  display: flex; align-items: center; gap: 10px;
  animation: slideIn 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), fadeOut 0.4s ease 2.6s forwards;
}
.toast.success { border-left-color: var(--green); }
.toast.error { border-left-color: var(--red); }

@keyframes slideIn { from { transform: translateX(120%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }

/* Polish the Empty States */
.empty-state {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 40px 20px; color: var(--text3); font-size: 12px; font-family: var(--mono);
  text-align: center; border: 1px dashed var(--border); border-radius: var(--r); margin: 10px 0;
  background: rgba(255,255,255,0.02);
}