/*
 * app.css — EnergizeOS Commissioning Copilot V1
 * Slate & Volt design tokens. Industrial tool aesthetic, light theme.
 * Mobile-responsive: 900px tablet + 480px mobile breakpoints.
 */
:root{
  --slate:#1A2B3C; --mid:#2E4A6E; --volt:#D4840A; --tint:#FDF4E7;
  --paper:#FCFCFA; --ink:#27313C; --muted:#5E6B78; --line:#E3E0D8;
  --good:#1A7A4A; --good-bg:#EAF7EF; --warn:#B45309; --warn-bg:#FEF3C7;
  --bad:#B91C1C; --bad-bg:#FEE2E2; --info:#1D4ED8; --info-bg:#EFF6FF;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
body{font-family:'DM Sans',Arial,sans-serif;background:var(--paper);color:var(--ink);
  line-height:1.55;overflow-x:hidden}
h1,h2,h3,h4,p,li,td,th,div,span{word-wrap:break-word;overflow-wrap:break-word}
a{color:var(--mid)}
code{font-family:'IBM Plex Mono',monospace;font-size:.86em;background:#F0F0EC;
  padding:1px 5px;border-radius:4px}

/* header */
header{position:sticky;top:0;z-index:60;background:rgba(252,252,250,.95);
  backdrop-filter:blur(6px);border-bottom:1px solid var(--line)}
.hwrap{max-width:1440px;margin:0 auto;padding:0 24px;height:58px;
  display:flex;align-items:center;justify-content:space-between;gap:14px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;flex-shrink:0}
.brand .mark{width:20px;height:20px;display:grid;
  grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:2px}
.brand .mark i{display:block}
.brand .mark i:nth-child(1),.brand .mark i:nth-child(4){background:var(--slate)}
.brand .mark i:nth-child(2),.brand .mark i:nth-child(3){background:var(--volt)}
.brand b{font-family:'Playfair Display',serif;font-size:.96rem;color:var(--slate)}
.brand span{font-family:'IBM Plex Mono',monospace;font-size:.62rem;
  letter-spacing:.14em;color:var(--muted);text-transform:uppercase;
  border-left:1px solid var(--line);padding-left:10px}
.header-actions{display:flex;align-items:center;gap:10px}
.header-actions a{font-size:.78rem;text-decoration:none;color:var(--muted)}

/* pills & buttons */
.pill{display:inline-block;font-family:'IBM Plex Mono',monospace;font-size:.68rem;
  font-weight:600;letter-spacing:.06em;padding:3px 9px;border-radius:20px;
  text-transform:uppercase;vertical-align:middle}
.pill.good{background:var(--good-bg);color:var(--good)}
.pill.warn{background:var(--warn-bg);color:var(--warn)}
.pill.bad{background:var(--bad-bg);color:var(--bad)}
.pill.info{background:var(--info-bg);color:var(--info)}
.pill.neutral{background:#F0F0EC;color:var(--muted)}
.btn{display:inline-flex;align-items:center;gap:6px;font-size:.84rem;font-weight:600;
  padding:9px 16px;border-radius:6px;border:none;cursor:pointer;font-family:inherit;
  transition:opacity .15s,transform .1s}
.btn:active{transform:scale(.97)}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn-primary{background:var(--slate);color:#fff}
.btn-ghost{background:transparent;color:var(--slate);border:1px solid var(--line)}
.btn-ghost:hover{border-color:var(--slate)}
.btn-warn{background:var(--volt);color:#fff}
.btn-sm{font-size:.76rem;padding:6px 11px}

/* workspace layout */
.workspace{max-width:1440px;margin:0 auto;padding:20px 24px 60px;
  display:grid;grid-template-columns:320px 1fr 360px;gap:18px;align-items:start}
.col{display:flex;flex-direction:column;gap:14px}
.card{background:#fff;border:1px solid var(--line);border-radius:10px;padding:18px}
.card h2{font-family:'Playfair Display',serif;font-size:1.04rem;color:var(--slate);
  margin-bottom:12px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.card h2 .pill{font-size:.6rem}
.eyebrow{font-family:'IBM Plex Mono',monospace;font-size:.64rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--volt);margin-bottom:6px}

/* project setup */
.field{margin-bottom:12px}
.field label{display:block;font-size:.76rem;font-weight:600;color:var(--muted);
  margin-bottom:4px;text-transform:uppercase;letter-spacing:.06em}
.field input,.field select{width:100%;border:1px solid var(--line);border-radius:6px;
  padding:9px 11px;font-size:.88rem;font-family:inherit;background:var(--paper)}
.field input:focus,.field select:focus{outline:none;border-color:var(--mid)}
.status-detail{font-size:.74rem;color:var(--muted);margin-top:6px}

/* upload */
.dropzone{border:2px dashed var(--line);border-radius:9px;padding:22px 14px;
  text-align:center;cursor:pointer;transition:border-color .15s,background .15s;
  font-size:.84rem;color:var(--muted)}
.dropzone:hover,.dropzone.drag{border-color:var(--volt);background:var(--tint)}
.dropzone strong{color:var(--slate)}
.dropzone .formats{font-size:.7rem;margin-top:6px;font-family:'IBM Plex Mono',monospace}

/* file list */
.file-list{display:flex;flex-direction:column;gap:8px;max-height:340px;overflow-y:auto}
.file-row{border:1px solid var(--line);border-radius:7px;padding:9px 11px;background:var(--paper)}
.file-row-main{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.file-name{font-size:.82rem;font-weight:600;flex:1;min-width:100px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.file-detail{font-size:.7rem;color:var(--muted);font-family:'IBM Plex Mono',monospace}
.file-warn{font-size:.72rem;color:var(--warn);margin-top:3px}
.file-del{background:none;border:none;cursor:pointer;color:var(--muted);
  font-size:1.05rem;line-height:1;padding:2px 6px}
.file-del:hover{color:var(--bad)}

/* chat */
.chat-card{display:flex;flex-direction:column;min-height:520px;max-height:calc(100vh - 130px)}
.chat-messages{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:12px;
  padding:4px 2px;min-height:280px}
.msg{max-width:92%;padding:11px 14px;border-radius:10px;font-size:.87rem;line-height:1.55}
.msg.user{background:var(--slate);color:#fff;align-self:flex-end;border-bottom-right-radius:3px}
.msg.assistant{background:var(--paper);border:1px solid var(--line);
  align-self:flex-start;border-bottom-left-radius:3px}
.msg.assistant h2,.msg.assistant h3,.msg.assistant h4{margin:10px 0 4px;color:var(--slate)}
.msg.assistant h2{font-size:1rem}.msg.assistant h3{font-size:.92rem}.msg.assistant h4{font-size:.86rem}
.msg.assistant ul{margin:4px 0 8px 18px}
.msg.assistant table{width:100%;border-collapse:collapse;font-size:.78rem;margin:8px 0}
.msg.assistant th,.msg.assistant td{border:1px solid var(--line);padding:5px 8px;text-align:left}
.msg.assistant th{background:#F5F5F1;font-family:'IBM Plex Mono',monospace;font-size:.66rem;
  text-transform:uppercase;letter-spacing:.06em}
.msg.assistant blockquote{border-left:3px solid var(--volt);padding-left:10px;
  color:var(--muted);font-size:.8rem;margin:8px 0}
.answer-card{border-left:3px solid var(--mid)}
.answer-sources{margin-top:10px;padding-top:8px;border-top:1px dashed var(--line);
  font-size:.74rem;color:var(--muted)}
.msg-typing{font-size:.8rem;color:var(--muted);font-style:italic;display:none;padding:4px 2px}
.chat-input-row{display:flex;gap:8px;margin-top:12px}
.chat-input{flex:1;border:1px solid var(--line);border-radius:7px;padding:10px 12px;
  font-size:.88rem;font-family:inherit;resize:none;max-height:90px;background:var(--paper)}
.chat-input:focus{outline:none;border-color:var(--mid)}
.chat-send{background:var(--volt);color:#fff;border:none;border-radius:7px;
  padding:10px 16px;cursor:pointer;font-size:1rem;flex-shrink:0}
.chat-send:disabled{opacity:.4}
.quick-questions{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.q-chip{font-size:.72rem;padding:4px 10px;border:1px solid var(--line);border-radius:20px;
  cursor:pointer;background:var(--paper);color:var(--muted);font-family:inherit}
.q-chip:hover{background:var(--tint);color:var(--volt);border-color:var(--volt)}

/* reports panel */
.report-buttons{display:flex;flex-wrap:wrap;gap:7px}
.report-preview{margin-top:12px;border:1px solid var(--line);border-radius:8px;
  padding:14px;max-height:420px;overflow-y:auto;font-size:.82rem;background:var(--paper)}
.report-preview h2{font-size:1.02rem;margin:10px 0 6px;color:var(--slate)}
.report-preview h3{font-size:.92rem;margin:10px 0 4px;color:var(--slate)}
.report-preview h4{font-size:.84rem;margin:8px 0 4px}
.report-preview ul{margin:4px 0 8px 18px}
.report-preview table{width:100%;border-collapse:collapse;font-size:.74rem;margin:8px 0}
.report-preview th,.report-preview td{border:1px solid var(--line);padding:4px 7px;text-align:left}
.report-preview blockquote{border-left:3px solid var(--volt);padding-left:10px;
  color:var(--muted);font-size:.76rem;margin:8px 0}
.report-actions{display:none;gap:8px;margin-top:10px}
.empty-state{color:var(--muted);font-size:.82rem;text-align:center;padding:24px 10px}

/* templates */
.template-list{display:flex;flex-direction:column;gap:6px;max-height:260px;overflow-y:auto}
.tpl-item{text-align:left;background:var(--paper);border:1px solid var(--line);
  border-radius:7px;padding:8px 11px;font-size:.8rem;cursor:pointer;font-family:inherit;
  color:var(--ink)}
.tpl-item:hover{border-color:var(--volt)}
.template-view{margin-top:12px;font-size:.82rem;max-height:360px;overflow-y:auto}
.template-view h3{font-family:'Playfair Display',serif;color:var(--slate);margin-bottom:8px}
.template-view h4{font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;
  color:var(--muted);margin:12px 0 6px}
.tpl-checklist{list-style:none;margin:0 0 8px}
.tpl-checklist li{padding:3px 0;border-bottom:1px solid #F0F0EC}
.tpl-checklist label{display:flex;gap:8px;align-items:start;cursor:pointer}
.tpl-checklist input{margin-top:3px;accent-color:var(--volt)}

/* settings modal */
.modal{display:none;position:fixed;inset:0;background:rgba(26,43,60,.45);
  z-index:200;align-items:center;justify-content:center;padding:20px}
.modal-box{background:#fff;border-radius:12px;padding:24px;max-width:480px;width:100%}
.modal-box h2{font-family:'Playfair Display',serif;color:var(--slate);margin-bottom:14px}
.modal-box .note{background:var(--tint);border-left:3px solid var(--volt);
  padding:10px 14px;border-radius:0 6px 6px 0;font-size:.78rem;margin-bottom:14px}
.modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:16px}

/* safety banner */
.safety-banner{background:var(--tint);border-bottom:1px solid var(--line);
  padding:8px 24px;font-size:.74rem;color:var(--warn);text-align:center}

/* toasts */
.toast-container{position:fixed;top:70px;right:20px;display:flex;flex-direction:column;
  gap:8px;z-index:300;pointer-events:none}
.toast{background:var(--slate);color:#fff;padding:11px 16px;border-radius:8px;
  font-size:.82rem;max-width:330px;box-shadow:0 4px 16px rgba(0,0,0,.18);
  animation:slideIn .2s ease,fadeOut .4s ease 3.6s forwards}
.toast.warn{background:var(--warn)}.toast.error{background:var(--bad)}
.toast.success{background:var(--good)}
@keyframes slideIn{from{transform:translateX(120px);opacity:0}to{transform:none;opacity:1}}
@keyframes fadeOut{to{opacity:0;transform:translateX(40px)}}

/* footer */
footer{border-top:1px solid var(--line);padding:22px 24px;font-size:.76rem;color:var(--muted)}
footer .fwrap{max-width:1440px;margin:0 auto;display:flex;justify-content:space-between;
  gap:12px;flex-wrap:wrap}
footer a{color:var(--muted)}

/* burger nav */
.burger{display:none;background:none;border:1px solid var(--line);border-radius:6px;
  width:40px;height:36px;cursor:pointer;flex-direction:column;align-items:center;
  justify-content:center;gap:4px}
.burger i{width:16px;height:2px;background:var(--slate);display:block}
.mnav{display:none;background:var(--paper);border-bottom:1px solid var(--line);
  padding:8px 24px 14px}
.mnav a{display:block;padding:9px 0;text-decoration:none;color:var(--ink);
  font-size:.9rem;border-bottom:1px solid var(--line)}

/* ============ responsive: 900px tablet ============ */
@media (max-width:900px){
  .workspace{grid-template-columns:1fr}
  .header-actions .hide-mobile{display:none}
  .burger{display:flex}
  .mnav.open{display:block}
  .chat-card{min-height:420px;max-height:none}
}
/* ============ responsive: 480px mobile ============ */
@media (max-width:480px){
  .hwrap{padding:0 14px}
  .workspace{padding:14px 14px 60px}
  .brand span{display:none}
  .card{padding:14px}
  .btn{width:100%;justify-content:center}
  .report-buttons .btn{width:auto;flex:1 1 45%}
  .msg{max-width:100%;font-size:.84rem}
  .chat-send{padding:10px 14px}
  .safety-banner{font-size:.68rem;padding:7px 14px}
}