/* ============================================================
   ENGINE ROOM — design-system (oversat fra dc-koncept, 2026-09-03)
   Deep jungle × antique copper. Cormorant Garamond + Inter.
   ============================================================ */

:root{
  --bg:#0a120e;
  --bg2:#0b1712;
  --panel:#0d1a14;
  --cell1:#153125; --cell2:#0e211a; --cell3:#0a1610;
  --cell-sel1:#25402c; --cell-sel2:#14281d; --cell-sel3:#0d1c14;
  --copper:#b87333; --ember:#e8935a; --ember-hi:#d9a05b;
  --mint:#7a9e8e; --emerald:#2e7d5b; --emerald-hi:#4d9b7a;
  --text:#f0ebe3; --line:rgba(184,115,51,.16);
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:Inter,system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:var(--sans);-webkit-font-smoothing:antialiased}
::selection{background:rgba(184,115,51,.35)}
a{color:var(--ember);text-decoration:none}
button{font-family:var(--sans);cursor:pointer}
input,select,textarea{font-family:var(--sans)}

/* animationer (fra dc-konceptet) */
@keyframes spinCW{to{transform:rotate(360deg)}}
@keyframes spinCCW{to{transform:rotate(-360deg)}}
@keyframes breath{0%,100%{opacity:.35;transform:scale(1)}50%{opacity:.75;transform:scale(1.035)}}
@keyframes emberPulse{0%,100%{opacity:.45;box-shadow:0 0 0 0 rgba(232,147,90,.5)}50%{opacity:1;box-shadow:0 0 0 7px rgba(232,147,90,0)}}
@keyframes glowDrift{0%,100%{opacity:.5}50%{opacity:.9}}
@keyframes barFlux{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){[data-spin],[data-anim]{animation:none!important}}

/* baggrundsatmosfære: gradient + korn + hex-wireframe */
.atmo{position:fixed;inset:0;pointer-events:none;z-index:1}
.atmo-grad{position:absolute;inset:0;background:radial-gradient(120% 90% at 18% -10%,#12291f 0%,#0b1712 42%,#0a120e 100%)}
.atmo-grain{position:absolute;inset:-50%;opacity:.055;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E")}
.atmo-wire{position:absolute;inset:0;opacity:.055;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='51.96' height='90' viewBox='0 0 51.96 90'%3E%3Cg fill='none' stroke='%23b87333' stroke-width='0.7'%3E%3Cpath d='M25.98 0 L51.96 15 L51.96 45 L25.98 60 L0 45 L0 15 Z'/%3E%3Cpath d='M0 45 L25.98 60 L25.98 90 L0 105 L-25.98 90 L-25.98 60 Z'/%3E%3Cpath d='M51.96 45 L77.94 60 L77.94 90 L51.96 105 L25.98 90 L25.98 60 Z'/%3E%3C/g%3E%3C/svg%3E")}
.atmo-vig{position:absolute;inset:0;background:radial-gradient(75% 60% at 50% 40%,transparent 40%,rgba(6,11,9,.75) 100%)}

/* ============ layout-skal ============ */
.shell{position:relative;z-index:10;min-height:100vh}

/* nav (80px, fast) */
.nav{position:fixed;left:0;top:0;bottom:0;width:80px;z-index:20;display:flex;flex-direction:column;align-items:center;gap:22px;padding:22px 0;background:linear-gradient(180deg,rgba(13,31,26,.92),rgba(10,18,14,.92));border-right:1px solid var(--line);backdrop-filter:blur(8px)}
.nav-logo{width:34px;height:30px;position:relative}
.nav-rule{width:26px;height:1px;background:rgba(184,115,51,.25)}
.nav-items{display:flex;flex-direction:column;gap:10px;align-items:center}
.nav-item{position:relative;width:48px;height:42px;cursor:pointer;transition:transform 1.1s cubic-bezier(.4,0,.2,1)}
.nav-item:hover{transform:scale(1.09)}
.nav-item svg.hex{position:absolute;inset:0;width:100%;height:100%}
.nav-item svg.hex-spin{position:absolute;inset:0;width:100%;height:100%;overflow:visible;transform-box:view-box;transform-origin:center;animation:spinCW 90s linear infinite;opacity:0;transition:opacity 1.2s ease}
.nav-item.active svg.hex-spin{opacity:1}
.nav-item.active svg.hex .b{stroke:#b87333;stroke-width:1.8;filter:drop-shadow(0 0 6px rgba(232,147,90,.5))}
.nav-item .ico{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.nav-foot{margin-top:auto;writing-mode:vertical-rl;font:500 8.5px/1 Inter,sans-serif;letter-spacing:.34em;color:rgba(122,158,142,.55);text-transform:uppercase}

/* header */
.headwrap{position:relative;z-index:10;margin-left:80px;padding:0 40px 40px}
.header{position:sticky;top:0;z-index:15;display:flex;align-items:center;gap:26px;padding:20px 0 18px;background:linear-gradient(180deg,rgba(10,18,14,.96) 60%,rgba(10,18,14,0));backdrop-filter:blur(6px)}
.h-brand{display:flex;flex-direction:column;gap:5px}
.h-eyebrow{font:500 9px/1 Inter,sans-serif;letter-spacing:.36em;text-transform:uppercase;color:var(--mint)}
.h-title{font-family:var(--serif);font-size:27px;line-height:1;color:var(--text);letter-spacing:.01em}
.h-right{margin-left:auto;display:flex;align-items:center;gap:18px}
.h-status{display:flex;align-items:center;gap:11px;padding:9px 16px 9px 13px;border:1px solid rgba(184,115,51,.22);border-radius:999px;background:rgba(13,31,26,.6)}
.h-status .dot{width:7px;height:7px;border-radius:50%;background:var(--ember);animation:emberPulse 3.2s ease-in-out infinite}
.h-status .txt{font:500 9.5px/1 Inter,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--text)}
.h-status .bars{display:flex;align-items:flex-end;gap:2.5px;height:14px}
.h-status .bars i{width:2px;height:14px;background:var(--emerald);transform-origin:bottom;animation:barFlux 2.8s ease-in-out infinite}
.h-status .bars i:nth-child(2){animation-delay:.35s}
.h-status .bars i:nth-child(3){background:var(--copper);animation-delay:.7s}
.h-status .bars i:nth-child(4){animation-delay:1.05s}
.h-status .bars i:nth-child(5){background:var(--ember);animation-delay:1.4s}
.h-cycle{font:400 11px/1 Inter,sans-serif;letter-spacing:.14em;color:var(--mint)}
.h-user{position:relative;width:38px;height:33px}
.h-user .mono{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:500 11px/1 Inter,sans-serif;color:var(--text)}

/* ============ generiske komponenter ============ */
.kicker{font:500 9px/1 Inter,sans-serif;letter-spacing:.34em;text-transform:uppercase;color:var(--copper)}
.kicker.mint{color:var(--mint)}
.card{border:1px solid rgba(184,115,51,.18);border-radius:4px;background:linear-gradient(155deg,rgba(19,40,32,.85),rgba(10,22,16,.9));box-shadow:inset 0 1px 0 rgba(240,235,227,.05),0 32px 70px -40px rgba(0,0,0,.9)}
.btn{border-radius:2px;font:500 9.5px/1 Inter,sans-serif;letter-spacing:.2em;text-transform:uppercase;padding:11px 20px;transition:background 1s ease,border-color 1s ease,color 1s ease}
.btn-copper{border:1px solid rgba(184,115,51,.45);background:rgba(184,115,51,.12);color:var(--text)}
.btn-copper:hover{background:rgba(232,147,90,.24);border-color:var(--ember)}
.btn-ghost{border:1px solid rgba(122,158,142,.28);color:var(--mint)}
.btn-ghost:hover{color:var(--text);border-color:rgba(240,235,227,.4)}
.btn-danger{border:1px solid rgba(163,93,74,.5);background:rgba(163,93,74,.12);color:#d9a08a}
.btn-danger:hover{background:rgba(163,93,74,.25);border-color:#c97a5e}
.btn-sm{padding:8px 14px;font-size:8.5px}
.status-pill{display:flex;align-items:center;gap:9px;padding:8px 14px;border-radius:999px;border:1px solid rgba(46,125,91,.4);background:rgba(46,125,91,.1);font:500 8.5px/1 Inter,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--mint);animation:glowDrift 4s ease-in-out infinite}
.status-pill .d{width:5px;height:5px;border-radius:50%;background:var(--emerald)}

/* ============ oversigt: engine pulse ============ */
.grid-hero{display:grid;grid-template-columns:1.618fr 1fr;gap:26px;margin-top:14px}
.pulse{position:relative;overflow:hidden;min-height:560px;display:flex;align-items:center;justify-content:center}
.pulse-head{position:absolute;top:26px;left:30px;display:flex;flex-direction:column;gap:6px}
.pulse-head .sub{font:300 11.5px/1.5 Inter,sans-serif;color:var(--mint);max-width:230px}
.pulse-stage{position:absolute;width:min(96%,620px);aspect-ratio:1/1;display:flex;align-items:center;justify-content:center}
.pulse-stage svg{position:absolute;width:100%;height:100%;overflow:visible}
.pulse-num{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center}
.pulse-num .n{font-family:var(--serif);font-size:86px;line-height:.9;color:var(--text);letter-spacing:-.02em;text-shadow:0 0 34px rgba(232,147,90,.35)}
.pulse-num .l{font:500 8.5px/1 Inter,sans-serif;letter-spacing:.32em;text-transform:uppercase;color:var(--copper)}
.pulse-foot{position:absolute;bottom:0;left:0;right:0;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid rgba(184,115,51,.14)}
.pulse-foot>div{padding:15px 18px;border-right:1px solid rgba(184,115,51,.14)}
.pulse-foot>div:last-child{border-right:0}
.pulse-foot .k{font:500 8.5px/1 Inter,sans-serif;letter-spacing:.24em;text-transform:uppercase;color:var(--mint)}
.pulse-foot .v{font-family:var(--serif);font-size:25px;color:var(--text);margin-top:5px}

.gauges{display:grid;grid-template-rows:repeat(3,1fr);gap:26px}
.gauge-card{display:flex;align-items:center;gap:22px;padding:22px 26px;border:1px solid rgba(184,115,51,.16);border-radius:4px;background:linear-gradient(150deg,rgba(19,40,32,.7),rgba(10,22,16,.85));box-shadow:0 24px 50px -38px rgba(0,0,0,.9);transition:border-color 1.4s ease}
.gauge-card:hover{border-color:rgba(232,147,90,.45)}
.gauge-card .ring{width:132px;flex:none}
.gauge-card .meta{display:flex;flex-direction:column;gap:8px}
.gauge-card .g-title{font:500 9px/1 Inter,sans-serif;letter-spacing:.3em;text-transform:uppercase;color:var(--copper)}
.gauge-card .g-num{font-family:var(--serif);font-size:38px;line-height:1;color:var(--text)}
.gauge-card .g-num small{font-size:15px;color:var(--mint)}
.gauge-card .g-sub{font:300 11px/1.5 Inter,sans-serif;color:var(--mint)}

/* ============ honeycomb (moduler) ============ */
.grid-modules{display:grid;grid-template-columns:590px 1.618fr;gap:34px;margin-top:44px;align-items:start}
.module-head{display:flex;align-items:baseline;gap:12px;margin-bottom:18px}
.module-head .rule{flex:1;height:1px;background:var(--line)}
.hive{position:relative;width:590px;height:510px}
.cell{position:absolute;width:236px;height:204px;cursor:pointer;transition:transform 1.2s cubic-bezier(.4,0,.2,1)}
.cell:hover{transform:scale(1.035)}
.cell .inner{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;padding:0 46px;text-align:center}
.cell .c-ico{width:18px;height:18px}
.cell .c-name{font:500 8.5px/1 Inter,sans-serif;letter-spacing:.28em;text-transform:uppercase;color:var(--mint)}
.cell .c-val{font-family:var(--serif);font-size:34px;line-height:1;color:var(--text)}
.cell .c-sub{font:300 9.5px/1 Inter,sans-serif;color:var(--copper)}
.cell .c-sub.dim{color:rgba(122,158,142,.5)}
.cell.inert .c-name,.cell.inert .c-val{color:rgba(122,158,142,.45)}
.cell .hexspin{position:absolute;inset:22px;width:calc(100% - 44px);height:calc(100% - 44px);overflow:visible;transform-box:view-box;transform-origin:center;animation:spinCW 60s linear infinite;opacity:0;transition:opacity 1.6s ease}
.cell.active .hexspin{opacity:1}

/* modul-detalje */
.detail{margin-top:37px}
.detail-head{display:flex;align-items:flex-start;gap:20px;padding:26px 30px 22px;border-bottom:1px solid var(--line)}
.detail-head .dh-main{flex:1;display:flex;flex-direction:column;gap:8px}
.detail-head h2{font-family:var(--serif);font-size:44px;line-height:1;color:var(--text);letter-spacing:.01em;margin:0;font-weight:500}
.detail-head .desc{font:300 12.5px/1.65 Inter,sans-serif;color:var(--mint);max-width:52ch;text-wrap:pretty}
.detail-body{display:grid;grid-template-columns:1fr 1.618fr}
.detail-gauge{display:flex;flex-direction:column;align-items:center;gap:26px;padding:30px 26px;border-right:1px solid var(--line)}
.detail-rows{display:flex;flex-direction:column}
.detail-rows .rrow{display:grid;grid-template-columns:26px 1.618fr 1fr 110px;align-items:center;gap:16px;padding:15px 24px;border-bottom:1px solid rgba(184,115,51,.08);transition:background 1.1s ease}
.detail-rows .rrow:hover{background:rgba(184,115,51,.07)}
.detail-rows .hexdot{width:20px;height:17px}
.detail-rows .r-label{font:400 12.5px/1.3 Inter,sans-serif;color:var(--text)}
.detail-rows .r-meta{font:300 11px/1.3 Inter,sans-serif;color:var(--mint)}
.detail-rows .r-val{font:500 10px/1 Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--copper);text-align:right}
.detail-rows .r-val.green{color:var(--emerald-hi)}
.detail-foot{display:flex;align-items:center;gap:12px;padding:18px 24px;border-top:1px solid var(--line)}

/* ============ Applications-view (fuldt modul) ============ */
.appview{animation:fadeUp .5s ease}
.appview-top{display:flex;align-items:flex-end;gap:20px;margin:26px 0 22px;flex-wrap:wrap}
.appview-top h1{font-family:var(--serif);font-size:52px;font-weight:500;line-height:.95;margin:6px 0 0;letter-spacing:.01em}
.stat-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px;margin-bottom:24px}
.stat-box{padding:16px 18px}
.stat-box .k{font:500 8.5px/1 Inter,sans-serif;letter-spacing:.24em;text-transform:uppercase;color:var(--mint)}
.stat-box .v{font-family:var(--serif);font-size:30px;color:var(--text);margin-top:6px}
.stat-box .v small{font-size:13px;color:var(--mint)}
.stat-box.hot{border-color:rgba(232,147,90,.4)}
.filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px;align-items:center}
.filters select,.filters input{background:rgba(13,31,26,.7);border:1px solid rgba(184,115,51,.2);color:var(--text);border-radius:2px;padding:9px 12px;font-size:12px;letter-spacing:.02em;outline:none}
.filters select:focus,.filters input:focus{border-color:rgba(232,147,90,.55)}
.filters input{min-width:200px}
.filters .lbl{font:500 8.5px/1 Inter,sans-serif;letter-spacing:.24em;text-transform:uppercase;color:var(--mint);margin-right:-4px}
.app-table{width:100%;border-collapse:collapse}
.app-table th{font:500 8.5px/1 Inter,sans-serif;letter-spacing:.22em;text-transform:uppercase;color:var(--mint);text-align:left;padding:12px 16px;border-bottom:1px solid var(--line)}
.app-table td{padding:13px 16px;border-bottom:1px solid rgba(184,115,51,.08);vertical-align:middle;font-size:13px}
.app-table tr{transition:background .8s ease}
.app-table tbody tr:hover{background:rgba(184,115,51,.06)}
.app-table .t-title{font-weight:400;color:var(--text)}
.app-table .t-mut{color:var(--mint);font-weight:300;font-size:11.5px}
.chip{display:inline-block;padding:4px 10px;border-radius:999px;font:500 8px/1 Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase;border:1px solid}
.chip-s{background:rgba(122,158,142,.08)}
.chip-deadline{font:400 11px/1 Inter,sans-serif;color:var(--mint)}
.chip-deadline.over{color:#d9a08a}
.amt{font-family:var(--serif);font-size:15px;color:var(--text)}
.row-actions{display:flex;gap:6px;opacity:0;transition:opacity .3s}
.app-table tr:hover .row-actions{opacity:1}
.icon-btn{background:none;border:1px solid transparent;color:var(--mint);padding:4px 6px;border-radius:2px;font-size:13px}
.icon-btn:hover{border-color:rgba(232,147,90,.4);color:var(--ember)}
.empty{padding:60px 20px;text-align:center;color:var(--mint);font:300 13px/1.6 Inter,sans-serif}
.empty .e-ico{font-size:30px;opacity:.5;margin-bottom:10px}

/* modal (opret/rediger) */
.modal-back{position:fixed;inset:0;background:rgba(6,11,9,.7);backdrop-filter:blur(4px);z-index:50;display:flex;align-items:center;justify-content:center;padding:24px}
.modal{width:100%;max-width:640px;max-height:92vh;overflow:auto;border:1px solid rgba(184,115,51,.28);border-radius:6px;background:linear-gradient(160deg,#132a21,#0a1610);padding:30px 34px;box-shadow:0 60px 120px -40px rgba(0,0,0,.95)}
.modal h3{font-family:var(--serif);font-size:34px;font-weight:500;margin:4px 0 24px;letter-spacing:.01em}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-grid .full{grid-column:1/-1}
.fld{display:flex;flex-direction:column;gap:6px}
.fld label{font:500 8.5px/1 Inter,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--mint)}
.fld input,.fld select,.fld textarea{background:rgba(10,18,14,.8);border:1px solid rgba(184,115,51,.22);color:var(--text);border-radius:2px;padding:10px 12px;font-size:13px;outline:none}
.fld input:focus,.fld select:focus,.fld textarea:focus{border-color:rgba(232,147,90,.6)}
.fld textarea{min-height:80px;resize:vertical}
.modal-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:26px}

/* status-flow-stribe */
.flow{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.flow .step{display:flex;align-items:center;gap:4px;font:500 8px/1 Inter,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:rgba(122,158,142,.45)}
.flow .step.done{color:var(--emerald-hi)}
.flow .step.cur{color:var(--ember)}
.flow .step .dot{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.8}
.flow .arrow{color:rgba(184,115,51,.3);font-size:9px}

/* login */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;position:relative;z-index:10;padding:24px}
.login-card{width:100%;max-width:420px;padding:44px 42px;text-align:center;position:relative}
.login-card .logo{width:52px;height:46px;margin:0 auto 18px}
.login-card h1{font-family:var(--serif);font-size:38px;font-weight:500;margin:0 0 4px}
.login-card .sub{font:300 12px/1.6 Inter,sans-serif;color:var(--mint);margin-bottom:28px}
.login-card input{width:100%;background:rgba(10,18,14,.8);border:1px solid rgba(184,115,51,.25);color:var(--text);border-radius:2px;padding:13px 14px;font-size:14px;text-align:center;letter-spacing:.2em;outline:none}
.login-card input:focus{border-color:rgba(232,147,90,.6)}
.login-card .err{color:#d9a08a;font-size:12px;min-height:18px;margin-top:10px}
.login-card .btn{width:100%;margin-top:14px}

/* ============ CHAT POPUP ============ */
.chat-fab{
  position:fixed;right:28px;bottom:28px;z-index:70;width:56px;height:56px;border-radius:50%;
  background:linear-gradient(150deg,rgba(184,115,51,.85),rgba(122,70,25,.9));
  border:1px solid rgba(232,147,90,.7);display:flex;align-items:center;justify-content:center;
  cursor:pointer;box-shadow:0 0 0 0 rgba(232,147,90,.4),0 18px 40px -14px rgba(0,0,0,.85);
  transition:box-shadow .6s ease,transform .4s ease;
  animation:fabGlow 4s ease-in-out infinite;
}
.chat-fab:hover{transform:scale(1.07)}
@keyframes fabGlow{0%,100%{box-shadow:0 0 0 0 rgba(232,147,90,.35),0 18px 40px -14px rgba(0,0,0,.85)}50%{box-shadow:0 0 0 12px rgba(232,147,90,0),0 18px 40px -14px rgba(0,0,0,.85)}}
.chat-popup{
  position:fixed;right:28px;bottom:96px;z-index:70;width:400px;max-width:calc(100vw - 40px);height:560px;max-height:calc(100vh - 140px);
  display:flex;flex-direction:column;border:1px solid rgba(184,115,51,.3);border-radius:10px;
  background:linear-gradient(165deg,rgba(19,40,32,.97),rgba(10,16,14,.99));
  box-shadow:0 60px 130px -40px rgba(0,0,0,.95),inset 0 1px 0 rgba(240,235,227,.05);
  opacity:0;pointer-events:none;transform:translateY(14px) scale(.98);transform-origin:bottom right;
  transition:opacity .35s ease,transform .35s cubic-bezier(.16,1,.3,1);
  overflow:hidden;
}
.chat-popup.open{opacity:1;pointer-events:auto;transform:none}
.chat-head{display:flex;align-items:center;gap:14px;padding:16px 18px 13px;border-bottom:1px solid rgba(184,115,51,.16);background:linear-gradient(180deg,rgba(184,115,51,.07),transparent)}
.chat-agents{display:flex;gap:6px;margin-left:auto}
.chat-agent{padding:6px 10px;border:1px solid;border-radius:999px;font:500 8.5px/1 Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;transition:all .3s ease;background:rgba(10,18,14,.5)}
.chat-agent.on{background:rgba(184,115,51,.16)}
.chat-close{color:rgba(122,158,142,.7);cursor:pointer;font-size:13px;padding:4px;transition:color .3s}
.chat-close:hover{color:#f0ebe3}
.chat-body{flex:1;overflow-y:auto;padding:18px 16px;display:flex;flex-direction:column;gap:12px}
.chat-bubble{max-width:82%;display:flex;flex-direction:column;gap:4px;animation:fadeUp .35s ease}
.chat-bubble.user{align-self:flex-end;align-items:flex-end}
.chat-bubble.agent{align-self:flex-start;align-items:flex-start}
.chat-bubble-head{font:500 8px/1 Inter,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:rgba(122,158,142,.75);display:flex;gap:8px;align-items:center}
.chat-time{font-weight:300;opacity:.6}
.chat-bubble-body{padding:10px 14px;border-radius:8px;font:400 12.5px/1.55 Inter,sans-serif;color:var(--text);white-space:pre-wrap;word-break:break-word}
.chat-bubble.user .chat-bubble-body{background:rgba(184,115,51,.18);border:1px solid rgba(184,115,51,.28);border-bottom-right-radius:2px}
.chat-bubble.agent .chat-bubble-body{background:rgba(46,125,91,.14);border:1px solid rgba(46,125,91,.3);border-bottom-left-radius:2px}
.chat-foot{display:flex;gap:10px;padding:13px 14px;border-top:1px solid rgba(184,115,51,.16);background:rgba(8,14,11,.6)}
.chat-foot input{flex:1;background:rgba(10,18,14,.85);border:1px solid rgba(184,115,51,.25);color:var(--text);border-radius:4px;padding:10px 12px;font-size:12.5px;outline:none}
.chat-foot input:focus{border-color:rgba(232,147,90,.6)}

/* skjult */
.hidden{display:none!important}

/* scrollbar */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(184,115,51,.25);border-radius:5px}
::-webkit-scrollbar-thumb:hover{background:rgba(232,147,90,.4)}

/* responsiv (groft) */
@media(max-width:1240px){
  .grid-hero{grid-template-columns:1fr}
  .pulse{min-height:440px}
  .grid-modules{grid-template-columns:1fr}
  .hive{margin:0 auto}
}
@media(max-width:700px){
  .headwrap{padding:0 16px 24px;margin-left:0}
  .nav{width:60px}
  .hive{transform:scale(.55);transform-origin:top center;width:590px;margin-left:auto;margin-right:auto;height:300px}
}