/* Kodelig Hub — restyled to match the "rå stil" of dev.kodelig.no/dev2: a
   dense, dark, monospace-forward developer-tool look, not an editorial
   marketing aesthetic. Tokens pulled directly from dev.kodelig.no's own
   real stylesheet (/opt/kodelig-dev-control/public/style.css) rather than
   invented, so Hub reads as a sibling of the tool it replaces. */

:root{
  --bg:#0c0d13;
  --bg-panel:#121420;
  --bg-elevated:#1a1c2a;
  --bg-input:#171927;
  --border:#262a3d;
  --border-soft:#1d2032;
  --text:#cdd0e3;
  --text-dim:#7d81a0;
  --text-faint:#4c5069;
  --accent:#8b7cf6;
  --accent-dim:#362f5e;
  --accent-soft:#2a2547;
  --cyan:#63d2ce;
  --green:#7fd88f;
  --amber:#e3b341;
  --red:#ef6b7a;
  --red-wash:#ef6b7a1f;
  --focus:#8b7cf6;
  --radius-lg:10px;
  --radius-md:6px;
  --radius-sm:4px;
  --radius-pill:6px;
  --font-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --header-h:52px;
  --nav-h:56px;
  color-scheme:dark;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-mono);
  font-size:13px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none;
}
a{color:inherit}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--focus);outline-offset:1px}
img{max-width:100%;display:block}
.mono{font-family:var(--font-mono)}
.eyebrow{
  font-size:9.5px;letter-spacing:.1em;font-weight:600;text-transform:uppercase;color:var(--text-dim);
}
h1,h2,h3{margin:0;letter-spacing:-.01em;font-weight:600}
.scroll{overflow-y:auto;-webkit-overflow-scrolling:touch}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:var(--radius-sm)}

/* ---------- App shell ---------- */
#app{min-height:100%;display:flex;flex-direction:column}

.topbar{
  height:var(--header-h);flex:0 0 auto;display:flex;align-items:center;gap:12px;
  padding:0 14px;border-bottom:1px solid var(--border-soft);background:var(--bg-panel);
  position:sticky;top:0;z-index:40;
}
.topbar .brand{display:flex;align-items:center;gap:8px;font-weight:600;font-size:13.5px;letter-spacing:-.01em}
.topbar .brand svg{width:19px;height:19px;color:var(--accent)}
.topbar .spacer{flex:1}
.topbar .back{
  display:flex;align-items:center;gap:8px;background:none;border:0;color:var(--text);
  font-size:13px;padding:6px 4px;
}
.topbar .back svg{width:18px;height:18px}
.icon-btn{
  background:none;border:1px solid var(--border);color:var(--text-dim);
  width:32px;height:32px;border-radius:var(--radius-sm);display:grid;place-items:center;
}
.icon-btn:hover{color:var(--text);border-color:var(--accent)}

main{flex:1;display:flex;flex-direction:column;min-height:0}

.bottom-nav{
  flex:0 0 auto;height:var(--nav-h);display:flex;border-top:1px solid var(--border-soft);
  background:var(--bg-panel);position:sticky;bottom:0;z-index:40;
  padding-bottom:env(safe-area-inset-bottom);
}
.bottom-nav button{
  flex:1;background:none;border:0;color:var(--text-faint);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:4px;font-size:9.5px;letter-spacing:.02em;
}
.bottom-nav button svg{width:19px;height:19px}
.bottom-nav button.active{color:var(--accent)}

/* ---------- Views ---------- */
.view{flex:1;display:flex;flex-direction:column;min-height:0}
[hidden]{display:none!important}

/* ---- Project list ---- */
.search-row{padding:12px 14px 6px;flex:0 0 auto}
.search-field{
  display:flex;align-items:center;gap:9px;background:var(--bg-input);border:1px solid var(--border);
  border-radius:var(--radius-sm);padding:9px 12px;
}
.search-field svg{width:16px;height:16px;color:var(--text-faint);flex:0 0 auto}
.search-field input{background:none;border:0;color:var(--text);width:100%;font-size:12.5px}
.search-field input::placeholder{color:var(--text-faint)}

.new-project-cta{
  margin:10px 14px;padding:11px 16px;border-radius:var(--radius-sm);background:var(--accent-dim);color:#e4defe;
  border:1px solid var(--accent);font-weight:600;font-size:12.5px;display:flex;align-items:center;justify-content:center;gap:9px;
}
.new-project-cta:hover{background:var(--accent-soft)}
.new-project-cta svg{width:16px;height:16px}

.project-list{flex:1;overflow-y:auto;padding:4px 14px 20px;display:flex;flex-direction:column;gap:8px}
.project-card{
  display:flex;align-items:center;gap:11px;padding:12px;border-radius:var(--radius-md);
  background:var(--bg-panel);border:1px solid var(--border-soft);text-align:left;width:100%;
}
.project-card:hover{border-color:var(--border)}
.project-card .avatar{
  width:36px;height:36px;border-radius:var(--radius-sm);background:var(--accent-soft);color:var(--accent);
  display:grid;place-items:center;font-weight:600;font-size:12px;flex:0 0 auto;
}
.project-card .info{flex:1;min-width:0}
.project-card .name{font-weight:600;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.project-card .meta{color:var(--text-dim);font-size:10.5px;margin-top:3px;display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.badge{
  display:inline-flex;align-items:center;gap:5px;padding:2px 7px;border-radius:var(--radius-sm);
  font-size:9.5px;font-weight:600;letter-spacing:.02em;white-space:nowrap;border:1px solid transparent;
}
.badge.status-live{background:#7fd88f1a;color:var(--green);border-color:#7fd88f33}
.badge.status-demo{background:#e3b3411a;color:var(--amber);border-color:#e3b34133}
.badge.status-dev{background:#ffffff0d;color:var(--text-dim);border-color:var(--border)}
.badge.source-kundegenerert{background:var(--accent-soft);color:#c8bdfb;border-color:var(--accent-dim)}
.empty-state{padding:36px 20px;text-align:center;color:var(--text-dim);font-size:12px}

/* ---- Workspace (chat) ---- */
.workspace-head{padding:11px 14px;border-bottom:1px solid var(--border-soft);flex:0 0 auto}
.workspace-head .title-row{display:flex;align-items:center;gap:10px}
.workspace-head h2{font-size:14px}
.workspace-head .url{color:var(--text-dim);font-size:10.5px;margin-top:2px}

.agent-tabs{display:flex;gap:2px;margin-top:10px;border-bottom:1px solid var(--border-soft)}
.agent-tab{
  background:none;border:0;border-bottom:2px solid transparent;color:var(--text-dim);
  padding:7px 12px 8px;font-size:11.5px;font-weight:600;font-family:var(--font-mono);
}
.agent-tab.active{color:var(--accent);border-bottom-color:var(--accent)}
.agent-tab:disabled{color:var(--text-faint);cursor:not-allowed}
.agent-tab:not(:disabled):not(.active):hover{color:var(--text)}

.quick-actions{display:flex;gap:7px;margin-top:10px;flex-wrap:wrap}
.quick-actions button{
  display:flex;align-items:center;gap:6px;padding:7px 11px;border-radius:var(--radius-sm);
  background:var(--bg-panel);border:1px solid var(--border);color:var(--text);font-size:11px;font-weight:600;
}
.quick-actions button svg{width:14px;height:14px}
.quick-actions button.danger{color:var(--red);border-color:#ef6b7a40}
.quick-actions button.danger:hover{background:var(--red-wash)}
.quick-actions button:hover{border-color:var(--accent);color:var(--accent)}

.chat-log{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:12px}
.msg{max-width:88%;display:flex;flex-direction:column;gap:4px}
.msg.user{align-self:flex-end;align-items:flex-end}
.msg.agent{align-self:flex-start;align-items:flex-start}
.bubble{padding:10px 13px;border-radius:var(--radius-md);font-size:12.5px;line-height:1.55;white-space:pre-wrap}
.msg.user .bubble{background:var(--accent-dim);color:#e4defe;border:1px solid var(--accent-dim)}
.msg.agent .bubble{background:var(--bg-panel);border:1px solid var(--border-soft)}
.msg .stamp{font-size:9.5px;color:var(--text-faint);padding:0 4px}
.status-line{
  align-self:flex-start;display:flex;align-items:center;gap:8px;color:var(--text-dim);font-size:11.5px;padding:2px 4px;
}
.status-line .dots{display:inline-flex;align-items:center;gap:3.5px;height:14px}
.status-line .dots span{width:5px;height:5px;border-radius:50%;background:var(--accent);animation:bounce 1.1s ease-in-out infinite}
.status-line .dots span:nth-child(2){animation-delay:.15s}
.status-line .dots span:nth-child(3){animation-delay:.3s}
@keyframes bounce{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-4px);opacity:1}}
.status-line span:last-child{animation:fade-text 1.6s ease-in-out infinite}
@keyframes fade-text{0%,100%{opacity:.65}50%{opacity:1}}
.tool-chip{
  align-self:flex-start;display:flex;align-items:center;gap:7px;padding:5px 10px;border-radius:var(--radius-sm);
  background:var(--bg-panel);border:1px solid var(--border-soft);color:var(--text-dim);font-size:10.5px;
}
.tool-chip svg{width:12px;height:12px;color:var(--cyan)}

details.detail-panel{margin:0 14px 10px;flex:0 0 auto}
details.detail-panel summary{
  list-style:none;cursor:pointer;color:var(--text-dim);font-size:10.5px;display:flex;align-items:center;gap:6px;
  padding:6px 2px;user-select:none;
}
details.detail-panel summary::-webkit-details-marker{display:none}
details.detail-panel summary svg{width:12px;height:12px;transition:transform .15s}
details.detail-panel[open] summary svg{transform:rotate(90deg)}
.detail-log{
  background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:12px;font-family:var(--font-mono);font-size:10.5px;color:var(--text-dim);max-height:240px;overflow-y:auto;
  white-space:pre-wrap;word-break:break-word;
}

.composer{
  flex:0 0 auto;padding:10px 12px;border-top:1px solid var(--border-soft);background:var(--bg-panel);
  display:flex;align-items:flex-end;gap:8px;padding-bottom:calc(10px + env(safe-area-inset-bottom));
}
.composer textarea{
  flex:1;resize:none;background:var(--bg-input);border:1px solid var(--border);
  border-radius:var(--radius-sm);padding:10px 12px;color:var(--text);font-size:12.5px;max-height:140px;
}
.composer textarea:focus-visible{border-color:var(--accent)}
.composer .attach-btn,.composer .send-btn{
  width:38px;height:38px;border-radius:var(--radius-sm);border:1px solid var(--border);display:grid;place-items:center;flex:0 0 auto;
}
.composer .attach-btn{background:var(--bg-input);color:var(--text-dim)}
.composer .send-btn{background:var(--accent-dim);border-color:var(--accent);color:#e4defe}
.composer .send-btn:disabled{opacity:.4}
.composer svg{width:17px;height:17px}
.attach-preview{display:flex;gap:6px;padding:0 12px 8px;flex-wrap:wrap}
.attach-preview .thumb{
  width:42px;height:42px;border-radius:var(--radius-sm);object-fit:cover;border:1px solid var(--border);
}

/* ---- New project form ---- */
.form-view{flex:1;overflow-y:auto;padding:16px 14px 32px;max-width:640px;width:100%;margin:0 auto}
.field{margin-bottom:16px}
.field label{display:block;font-size:11px;font-weight:600;color:var(--text-dim);margin-bottom:6px}
.field input[type=text],.field textarea{
  width:100%;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:10px 12px;color:var(--text);font-size:12.5px;
}
.field textarea{min-height:120px;resize:vertical}
.field .hint{font-size:10.5px;color:var(--text-faint);margin-top:5px}
.upload-row{display:flex;gap:8px;flex-wrap:wrap}
.upload-row .thumb-wrap{position:relative;width:60px;height:60px}
.upload-row img{width:60px;height:60px;border-radius:var(--radius-sm);object-fit:cover;border:1px solid var(--border)}
.upload-row .add-btn{
  width:60px;height:60px;border-radius:var(--radius-sm);border:1px dashed var(--border);
  background:var(--bg-input);color:var(--text-dim);display:grid;place-items:center;
}
.submit-btn{
  width:100%;padding:13px;border-radius:var(--radius-sm);background:var(--accent-dim);color:#e4defe;border:1px solid var(--accent);
  font-weight:600;font-size:13px;margin-top:4px;
}
.submit-btn:disabled{opacity:.5}

/* ---- More / secondary views ---- */
.more-list{padding:8px 14px;display:flex;flex-direction:column;gap:7px}
.more-list a,.more-list button{
  display:flex;align-items:center;justify-content:space-between;padding:12px 14px;background:var(--bg-panel);
  border:1px solid var(--border-soft);border-radius:var(--radius-md);text-align:left;color:var(--text);
  width:100%;font-size:12px;
}
.section-title{padding:16px 14px 6px;font-size:10.5px;font-weight:600;color:var(--text-dim);text-transform:uppercase;letter-spacing:.07em}
.grid-cards{display:grid;grid-template-columns:1fr;gap:9px;padding:0 14px}
.stat-card{background:var(--bg-panel);border:1px solid var(--border-soft);border-radius:var(--radius-md);padding:13px}
.stat-card .label{font-size:10px;color:var(--text-dim)}
.stat-card .value{font-size:18px;font-weight:650;margin-top:4px;font-variant-numeric:tabular-nums}
.log-row{
  display:flex;gap:10px;padding:9px 14px;border-bottom:1px solid var(--border-soft);font-size:11.5px;align-items:baseline;
}
.log-row time{color:var(--text-faint);font-family:var(--font-mono);font-size:10px;flex:0 0 auto}
.lead-row{padding:13px 14px;background:var(--bg-panel);border:1px solid var(--border-soft);border-radius:var(--radius-md)}

.toast{
  position:fixed;left:50%;bottom:calc(var(--nav-h) + 16px);transform:translateX(-50%);background:var(--bg-elevated);
  border:1px solid var(--border);color:var(--text);padding:9px 16px;border-radius:var(--radius-sm);
  font-size:11.5px;z-index:80;box-shadow:0 12px 30px #0007;
}

.login-view{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;background:var(--bg)}
.login-card{width:100%;max-width:360px;background:var(--bg-panel);border:1px solid var(--border-soft);border-radius:var(--radius-lg);padding:26px}
.login-card .brand{display:flex;align-items:center;gap:10px;font-size:15.5px;font-weight:600;margin-bottom:20px}
.login-card .brand svg{width:22px;height:22px;color:var(--accent)}
.login-error{color:var(--red);font-size:11.5px;margin-top:10px;min-height:16px}

/* ===================== Desktop breakpoint ===================== */
@media (min-width:900px){
  .topbar{padding:0 20px}
  .bottom-nav{display:none}

  #app{display:grid;grid-template-columns:260px 1fr;grid-template-rows:var(--header-h) 1fr;height:100vh}
  .topbar{grid-column:1 / -1}
  .desktop-rail{
    grid-row:2;grid-column:1;border-right:1px solid var(--border-soft);background:var(--bg-panel);
    display:flex;flex-direction:column;overflow-y:auto;
  }
  .desktop-rail button{
    display:flex;align-items:center;gap:11px;padding:11px 18px;background:none;border:0;color:var(--text-dim);
    font-size:12px;text-align:left;
  }
  .desktop-rail button.active{color:var(--accent);background:var(--accent-soft)}
  .desktop-rail button svg{width:16px;height:16px}
  .desktop-rail .rail-divider{height:1px;background:var(--border-soft);margin:8px 14px}

  main{grid-row:2;grid-column:2;overflow:hidden;display:flex}

  /* "hub" mode (Prosjekter + Nytt-fra-kort routes): list and detail side by
     side, both permanently visible, so opening a project never hides the
     list you picked it from. */
  main.hub-mode{display:grid;grid-template-columns:320px 1fr}
  main.hub-mode .view[data-view=projects]{border-right:1px solid var(--border-soft);height:100%;overflow:hidden;display:flex}
  main.hub-mode .view[data-view=workspace]{height:100%}
  .workspace-empty{
    flex:1;display:flex;align-items:center;justify-content:center;color:var(--text-faint);
    font-size:12px;flex-direction:column;gap:10px;
  }
  .workspace-empty svg{width:30px;height:30px;opacity:.5}
  .workspace-head .back{display:none}

  /* "single" mode (Nytt prosjekt, Mer): one wide pane, no split. */
  main.single-mode{display:block;overflow-y:auto}

  .form-view{max-width:680px;padding-top:28px;margin:0 auto}
  .grid-cards{grid-template-columns:repeat(3,1fr);padding:0 22px}
  .more-list{max-width:800px;margin:0 auto;padding:8px 22px}
  .section-title{padding-left:22px;padding-right:22px;max-width:800px;margin:0 auto}
  .log-row{max-width:800px;margin:0 auto}
}

@media (min-width:1300px){
  main.hub-mode{grid-template-columns:360px 1fr}
  .grid-cards{grid-template-columns:repeat(4,1fr)}
}