/* ── Tokens ──────────────────────────────────────────────────────────────── */
:root {
  /* Brand palette */
  --pine:    #273338;   /* darkest  */
  --forest:  #2B5748;   /* semi-dark */
  --sage:    #618764;   /* semi-light */
  --moss:    #9CB080;   /* lightest  */

  /* Derived surface colours */
  --bg:        #eef0e6;   /* sandy sage — page background */
  --card-bg:   #ffffff;
  --input-bg:  #f4f6f0;   /* very light sage for inputs */
  --border:    #d4dac8;
  --border2:   #c4cab6;
  --text:      #273338;   /* --pine */
  --muted:     #556655;
  --radius:    14px;
  --ease:      all .15s ease;
}

/* ── Reset ───────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
input,textarea,button{font-family:inherit}
textarea{resize:vertical}
::placeholder{color:#94a88e}

/* ── Scrollbar ───────────────────────────────────────────────────────────── */
.chat-messages::-webkit-scrollbar{width:6px}
.chat-messages::-webkit-scrollbar-thumb{background:#c8d4bc;border-radius:6px}

/* ── Page ────────────────────────────────────────────────────────────────── */
body{
  font-family:'Hanken Grotesk',system-ui,sans-serif;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}

.page{
  max-width:1200px;
  margin:0 auto;
  padding:clamp(16px,3vw,36px) clamp(14px,3vw,36px) 60px;
}

/* ── Header ──────────────────────────────────────────────────────────────── */
.header{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding-bottom:20px;
  border-bottom:1px solid var(--border);
  margin-bottom:22px;
}

.brand{display:flex;align-items:center;gap:14px}

.brand-mark{
  width:44px;height:44px;border-radius:12px;flex:none;
  background:linear-gradient(135deg,var(--forest),var(--sage));
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 14px rgba(43,87,72,.28);
}

.brand-name{
  font-family:'Spectral',serif;
  font-size:clamp(22px,3vw,30px);
  font-weight:600;letter-spacing:-.3px;line-height:1;
}

.brand-sub{font-size:13px;color:var(--muted);margin-top:4px;letter-spacing:.1px}

.btn-config{
  display:flex;align-items:center;gap:7px;
  background:transparent;border:1px solid var(--border2);
  color:var(--muted);padding:8px 13px;border-radius:9px;
  font-size:13px;font-weight:600;cursor:pointer;
  transition:var(--ease);
}
.btn-config:hover{background:rgba(156,176,128,.2);border-color:var(--moss);color:var(--text)}

.btn-lock{
  display:flex;align-items:center;gap:7px;
  background:transparent;border:1px solid var(--border2);
  color:var(--muted);padding:8px 13px;border-radius:9px;
  font-size:13px;font-weight:600;cursor:pointer;
  transition:var(--ease);
}
.btn-lock:hover{background:rgba(156,176,128,.2);border-color:var(--moss);color:var(--text)}
.btn-lock.unlocked{
  border-color:var(--forest);color:var(--forest);
  background:rgba(43,87,72,.08);
}
.btn-lock.unlocked:hover{background:rgba(43,87,72,.15)}

/* ── Config panel ────────────────────────────────────────────────────────── */
.config-panel{
  background:var(--pine);color:#e8ede1;
  border-radius:14px;padding:18px 20px;
  margin-bottom:22px;
  animation:fadeUp .2s ease;
}
.config-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.config-title{font-family:'Spectral',serif;font-size:17px;font-weight:600}
.config-close{background:none;border:none;color:#7a9a78;font-size:20px;cursor:pointer;line-height:1;padding:2px 6px}
.config-close:hover{color:#e8ede1}
.config-fields{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end}
.config-label{flex:1 1 220px;font-size:11.5px;color:#7a9a78;font-weight:700;letter-spacing:.4px}
.config-input{
  display:block;width:100%;margin-top:6px;
  background:#1d2a24;border:1px solid #3c5448;color:#eef2e8;
  border-radius:8px;padding:10px 12px;font-size:14px;outline:none;
}
.config-input:focus{border-color:var(--sage)}
.config-save{
  background:var(--forest);color:#f1f5ea;border:none;border-radius:8px;
  padding:10px 18px;font-size:13.5px;font-weight:700;cursor:pointer;
  white-space:nowrap;transition:var(--ease);
}
.config-save:hover{background:#1e3d2e}
.config-hint{font-size:12px;color:#607a60;margin-top:12px;line-height:1.6}
.config-hint code{color:var(--moss)}

/* ── Page nav tabs ───────────────────────────────────────────────────────── */
.page-nav{
  display:flex;gap:0;
  border-bottom:1px solid var(--border);
  margin-bottom:22px;
}
.nav-tab{
  padding:9px 18px;
  font-size:13.5px;font-weight:600;
  color:var(--muted);text-decoration:none;
  border-bottom:2px solid transparent;
  margin-bottom:-1px;
  transition:var(--ease);
}
.nav-tab:hover{color:var(--text)}
.nav-tab.active{color:var(--forest);border-bottom-color:var(--forest)}

/* ── Layout ──────────────────────────────────────────────────────────────── */
.main{
  display:flex;gap:24px;align-items:flex-start;flex-wrap:wrap;
}

.list-area{flex:1 1 500px;min-width:0}

/* ── Toolbar ─────────────────────────────────────────────────────────────── */
.toolbar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px}

.search-wrap{
  flex:1 1 220px;position:relative;display:flex;align-items:center;
}
.search-icon{position:absolute;left:13px;pointer-events:none;color:var(--muted)}
.search-input{
  width:100%;background:#fff;border:1px solid var(--border);
  border-radius:11px;padding:12px 13px 12px 40px;
  font-size:14.5px;outline:none;color:var(--text);
  box-shadow:0 1px 2px rgba(39,51,56,.04);
  transition:var(--ease);
}
.search-input:focus{border-color:var(--sage)}

.btn-add{
  display:flex;align-items:center;gap:7px;
  background:var(--forest);color:#f1f5ea;border:none;
  border-radius:11px;padding:0 18px;
  font-size:14.5px;font-weight:700;cursor:pointer;
  box-shadow:0 4px 12px rgba(43,87,72,.28);
  transition:var(--ease);white-space:nowrap;
}
.btn-add:hover{background:#1e3d2e}

/* ── Add / Edit form ─────────────────────────────────────────────────────── */
.app-form{
  background:#fff;border:1px solid var(--border);
  border-radius:var(--radius);padding:20px 22px;
  margin-bottom:20px;
  box-shadow:0 6px 20px rgba(39,51,56,.07);
  animation:fadeUp .2s ease;
}

.form-title{
  font-family:'Spectral',serif;font-size:19px;font-weight:600;
  margin-bottom:16px;
}

.field-label{
  display:block;font-size:11.5px;font-weight:700;
  letter-spacing:.4px;color:var(--muted);margin-bottom:6px;
}

.field-input{
  width:100%;margin-bottom:16px;
  background:var(--input-bg);border:1px solid var(--border);
  border-radius:9px;padding:11px 12px;font-size:14.5px;
  color:var(--text);outline:none;transition:var(--ease);
}
.field-input:focus{border-color:var(--sage);background:#fff}
.field-ta{min-height:72px}

.field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* Status toggle */
.status-toggle{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.seg{
  flex:1 1 80px;padding:9px 6px;border-radius:9px;
  font-size:13px;font-weight:600;cursor:pointer;
  border:1px solid var(--border);background:var(--input-bg);color:var(--muted);
  transition:var(--ease);
}
.seg:hover{background:rgba(156,176,128,.2);border-color:var(--moss)}
.seg.active-op  {background:var(--forest);border-color:var(--forest);color:#f1f5ea}
.seg.active-mnt {background:var(--sage);border-color:var(--sage);color:#f1f5ea}
.seg.active-brk {background:#c04030;border-color:#c04030;color:#fff}
.seg.active-off {background:var(--pine);border-color:var(--pine);color:#e8ede1}

.form-footer{display:flex;justify-content:flex-end;gap:10px;margin-top:4px}

.btn-cancel{
  background:transparent;border:1px solid var(--border);
  color:var(--muted);padding:10px 16px;border-radius:9px;
  font-size:14px;font-weight:600;cursor:pointer;transition:var(--ease);
}
.btn-cancel:hover{background:rgba(156,176,128,.15)}

.btn-save{
  background:var(--forest);color:#f1f5ea;border:none;
  padding:10px 22px;border-radius:9px;
  font-size:14px;font-weight:700;cursor:pointer;transition:var(--ease);
}
.btn-save:hover{background:#1e3d2e}
.btn-save:disabled{background:#a0b898;cursor:default}

/* ── Cards ───────────────────────────────────────────────────────────────── */
.card-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  gap:14px;
}

.card{
  background:var(--card-bg);border:1px solid var(--border);
  border-radius:var(--radius);overflow:hidden;
  display:flex;flex-direction:column;
  box-shadow:0 2px 8px rgba(39,51,56,.05);
  transition:var(--ease);cursor:pointer;
}
.card:hover{box-shadow:0 6px 20px rgba(39,51,56,.1);transform:translateY(-1px)}
.card.selected{border-color:var(--forest);box-shadow:0 0 0 2px rgba(43,87,72,.2),0 6px 20px rgba(39,51,56,.1)}

.card-thumb{
  height:80px;
  background:linear-gradient(135deg,var(--sage) 0%,var(--forest) 100%);
  display:flex;align-items:center;justify-content:center;
  opacity:.9;
}

.card-body{padding:14px 15px 15px;display:flex;flex-direction:column;flex:1}

.card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;margin-bottom:4px}

.card-name{
  font-family:'Spectral',serif;
  font-size:16.5px;font-weight:600;line-height:1.25;
}

.badge{
  flex:none;font-size:11px;font-weight:700;letter-spacing:.3px;
  padding:3px 9px;border-radius:20px;white-space:nowrap;
}
.badge-op  {background:rgba(43,87,72,.14);color:#1a3d2e}
.badge-mnt {background:rgba(97,135,100,.18);color:#3a5030}
.badge-brk {background:rgba(192,64,48,.13);color:#8a2a18}
.badge-off {background:rgba(39,51,56,.1);color:#3a4a4a}

.card-location{font-size:12.5px;color:var(--muted);margin-bottom:8px}

.card-notes{
  font-size:13px;color:#4a5e48;line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  flex:1;
}

.card-actions{
  display:flex;gap:6px;margin-top:13px;padding-top:12px;
  border-top:1px solid var(--border);
}

.btn-toggle{
  flex:1;background:var(--input-bg);border:1px solid var(--border);
  color:var(--text);padding:7px 6px;border-radius:8px;
  font-size:12.5px;font-weight:600;cursor:pointer;transition:var(--ease);
}
.btn-toggle:hover{background:rgba(156,176,128,.2);border-color:var(--moss)}

.btn-edit-card{
  background:var(--input-bg);border:1px solid var(--border);
  color:var(--muted);padding:7px 10px;border-radius:8px;
  font-size:12.5px;font-weight:600;cursor:pointer;transition:var(--ease);
}
.btn-edit-card:hover{background:rgba(156,176,128,.2);border-color:var(--moss)}

.btn-del-card{
  background:#fff;border:1px solid #e0d0cc;
  color:#8a3828;padding:7px 8px;border-radius:8px;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:var(--ease);
}
.btn-del-card:hover{background:#fdf0ec;border-color:#c89888}

/* ── Empty / no-results states ───────────────────────────────────────────── */
.empty-state{
  text-align:center;padding:50px 20px;
  background:#fff;border:1px dashed var(--border2);
  border-radius:var(--radius);
}
.empty-title{font-family:'Spectral',serif;font-size:20px;font-weight:600;margin-bottom:8px}
.empty-sub{font-size:14px;color:var(--muted);max-width:320px;margin:0 auto 20px;line-height:1.6}

/* ── Chat panel ──────────────────────────────────────────────────────────── */
.chat-panel{
  flex:1 1 300px;max-width:380px;
  position:sticky;top:24px;align-self:flex-start;
  background:#fff;border:1px solid var(--border);
  border-radius:var(--radius);overflow:hidden;
  display:flex;flex-direction:column;
  height:min(660px,calc(100vh - 60px));
  box-shadow:0 8px 28px rgba(39,51,56,.08);
}

/* Chat head */
.chat-head{
  background:var(--pine);padding:14px 16px;
  display:flex;align-items:center;gap:10px;flex:none;
}
.chat-head-icon{
  width:32px;height:32px;border-radius:8px;
  background:var(--sage);
  display:flex;align-items:center;justify-content:center;flex:none;
}
.chat-head-title{color:#eef3e7;font-family:'Spectral',serif;font-size:15.5px;font-weight:600;line-height:1}
.chat-head-sub{color:#7a9a78;font-size:11.5px;margin-top:3px}

.btn-clear-chat{
  margin-left:auto;background:rgba(255,255,255,.1);border:none;
  color:#7a9a78;width:28px;height:28px;border-radius:7px;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:var(--ease);
}
.btn-clear-chat:hover{background:rgba(255,255,255,.18);color:#eef3e7}

/* Selected appliance info */
.selected-info{
  background:#f4f6f0;border-bottom:1px solid var(--border);
  padding:12px 14px;flex:none;
  max-height:240px;overflow-y:auto;
}
.selected-row{display:flex;align-items:center;gap:8px;margin-bottom:8px;flex-wrap:wrap}
.selected-name{font-family:'Spectral',serif;font-size:15px;font-weight:600;line-height:1.2}
.selected-badge{font-size:11px;font-weight:700;padding:3px 9px;border-radius:20px}

/* Facts chips */
.facts-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.fact-chip{
  background:rgba(156,176,128,.22);border:1px solid rgba(97,135,100,.25);
  border-radius:6px;padding:3px 8px;font-size:12px;
  display:flex;align-items:center;gap:5px;
}
.fact-chip-key{color:var(--forest);font-weight:700}
.fact-chip-val{color:var(--text)}
.fact-chip-del{
  background:none;border:none;cursor:pointer;
  color:var(--moss);font-size:12px;line-height:1;padding:0 1px;
}
.fact-chip-del:hover{color:#8a3828}

/* Detail buttons */
.detail-btns{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.btn-detail{
  background:var(--input-bg);border:1px solid var(--border);
  color:var(--muted);padding:5px 10px;border-radius:7px;
  font-size:12px;font-weight:600;cursor:pointer;transition:var(--ease);
}
.btn-detail:hover{background:rgba(156,176,128,.2);border-color:var(--moss);color:var(--text)}
.btn-deselect{color:#8a3828;border-color:#e0d0cc}
.btn-deselect:hover{background:#fdf0ec;border-color:#c89888}

/* Mini forms */
.mini-form{
  background:#fff;border:1px solid var(--border);
  border-radius:9px;padding:10px 12px;margin-bottom:8px;
  animation:fadeUp .15s ease;
}
.mini-input{
  width:100%;margin-bottom:7px;background:var(--input-bg);
  border:1px solid var(--border);border-radius:7px;
  padding:8px 10px;font-size:13px;color:var(--text);outline:none;transition:var(--ease);
}
.mini-input:focus{border-color:var(--sage);background:#fff}
.mini-ta{min-height:56px;resize:vertical}
.mini-actions{display:flex;gap:7px;justify-content:flex-end}
.btn-mini-cancel{
  background:none;border:1px solid var(--border);color:var(--muted);
  padding:6px 12px;border-radius:7px;font-size:12.5px;font-weight:600;cursor:pointer;
}
.btn-mini-save{
  background:var(--forest);color:#f1f5ea;border:none;
  padding:6px 14px;border-radius:7px;font-size:12.5px;font-weight:700;cursor:pointer;
}

/* Docs list */
.docs-list{}
.doc-item{
  border:1px solid var(--border);border-radius:8px;
  margin-bottom:6px;overflow:hidden;
}
.doc-item-head{
  background:linear-gradient(135deg,var(--forest),#1e3d2e);
  color:#f1f5ea;padding:7px 12px;
  display:flex;justify-content:space-between;align-items:center;
  font-size:12.5px;font-weight:600;
}
.btn-del-doc{background:none;border:none;color:rgba(241,245,234,.65);cursor:pointer;font-size:13px}
.btn-del-doc:hover{color:#f1f5ea}
.doc-item-body{padding:9px 12px;font-size:12.5px;line-height:1.55;color:var(--text);white-space:pre-wrap}

/* Chat messages */
.chat-messages{
  flex:1;overflow-y:auto;padding:14px;
  display:flex;flex-direction:column;gap:10px;
  background:#f9faf6;
}

.chat-hint{
  margin:auto;text-align:center;max-width:230px;padding:10px;
}
.chat-hint p{font-size:13.5px;color:var(--muted);line-height:1.6}

.suggestions{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:14px}
.suggestion-btn{
  background:var(--input-bg);border:1px solid var(--border);
  color:var(--text);padding:6px 11px;border-radius:20px;
  font-size:12px;font-weight:500;cursor:pointer;transition:var(--ease);
}
.suggestion-btn:hover{background:rgba(156,176,128,.2);border-color:var(--moss)}

.msg{
  max-width:88%;padding:10px 13px;border-radius:13px;
  font-size:13.5px;line-height:1.55;white-space:pre-wrap;word-break:break-word;
}
.msg.user{
  background:var(--forest);color:#f1f5ea;
  align-self:flex-end;border-bottom-right-radius:4px;
}
.msg.ai{
  background:#eef2e8;color:#2c3a28;
  align-self:flex-start;border-bottom-left-radius:4px;
}

/* Typing dots */
.typing{
  display:flex;gap:5px;padding:12px 14px;
  background:#eef2e8;border-radius:13px;border-bottom-left-radius:4px;
  align-self:flex-start;
}
.typing span{
  width:7px;height:7px;border-radius:50%;
  background:var(--moss);animation:blink 1.2s infinite;
}
.typing span:nth-child(2){animation-delay:.2s}
.typing span:nth-child(3){animation-delay:.4s}

/* Chat input */
.chat-input-wrap{
  flex:none;padding:11px 12px;
  border-top:1px solid var(--border);background:#fff;
  display:flex;gap:8px;align-items:flex-end;
}
.chat-input{
  flex:1;background:var(--input-bg);border:1px solid var(--border);
  border-radius:10px;padding:10px 12px;
  font-size:13.5px;line-height:1.4;outline:none;
  max-height:110px;min-height:42px;transition:var(--ease);
  overflow-y:auto;
}
.chat-input:focus{border-color:var(--sage);background:#fff}

.btn-send{
  flex:none;width:42px;height:42px;border-radius:10px;border:none;
  background:var(--forest);color:#f1f5ea;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:var(--ease);box-shadow:0 3px 10px rgba(43,87,72,.28);
}
.btn-send:hover{background:#1e3d2e}
.btn-send:disabled{background:#a0b898;box-shadow:none;cursor:default}

/* ── Loading overlay ─────────────────────────────────────────────────────── */
.loading-overlay{
  position:fixed;inset:0;z-index:9999;
  background:rgba(26,30,22,.62);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:center;
  animation:fadeIn .18s ease;
}

.loading-ring{
  position:relative;width:100px;height:100px;
  display:flex;align-items:center;justify-content:center;
}

.loading-arc-outer{
  position:absolute;inset:0;
  animation:spin-cw 1.5s linear infinite;
  transform-origin:center;
}
.loading-arc-inner{
  position:absolute;inset:0;
  animation:spin-ccw 1s linear infinite;
  transform-origin:center;
}

.loading-drop{
  position:relative;z-index:1;
  animation:drop-pulse 2s ease-in-out infinite;
  display:flex;align-items:center;justify-content:center;
}

@keyframes spin-cw  {to{transform:rotate(360deg)}}
@keyframes spin-ccw {to{transform:rotate(-360deg)}}
@keyframes drop-pulse{
  0%,100%{transform:scale(1);filter:drop-shadow(0 0 0px rgba(156,176,128,0))}
  50%    {transform:scale(1.18);filter:drop-shadow(0 0 8px rgba(156,176,128,.7))}
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* ── Utility ─────────────────────────────────────────────────────────────── */
.hidden{display:none!important}

@keyframes fadeUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes blink{0%,80%,100%{opacity:.25}40%{opacity:1}}

/* Toast */
.toast{
  position:fixed;bottom:22px;right:22px;z-index:999;
  padding:10px 18px;border-radius:9px;
  font-size:13.5px;font-weight:600;color:#f1f5ea;
  background:var(--pine);box-shadow:0 6px 20px rgba(39,51,56,.25);
  animation:fadeUp .2s ease;pointer-events:none;
}
.toast.ok {background:var(--forest)}
.toast.err{background:#c04030}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media(max-width:720px){
  .main{flex-direction:column}
  .chat-panel{max-width:none;position:static;height:520px}
  .field-row{grid-template-columns:1fr}
}