/* ============================================================
   Kalkulations-Assistent — styling
   Reuses host design tokens (--panel, --line, --orange, --mono…)
   Three placement modes driven by body[data-amode] + body.asst-open
   ============================================================ */

/* ---- Topbar entry button ---- */
.asst-topbtn{
  display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 13px;
  border-radius:8px;border:1px solid var(--line);background:var(--panel);
  color:var(--tx-mid);font-family:var(--sans);font-size:12.5px;font-weight:600;
  cursor:pointer;position:relative;transition:.12s;letter-spacing:-0.005em;
}
.asst-topbtn svg{width:15px;height:15px;stroke-width:1.7;color:var(--orange)}
.asst-topbtn:hover{color:var(--tx);border-color:var(--tx-dim)}
body.asst-open .asst-topbtn{background:var(--orange-soft);border-color:rgba(255,122,47,.4);color:var(--tx)}
.asst-topbtn .asst-dot{display:none;width:6px;height:6px;border-radius:50%;background:var(--orange);
  position:absolute;top:7px;right:8px;box-shadow:0 0 0 3px var(--panel)}
.asst-topbtn.has-news .asst-dot{display:block}

/* ---- Floating bubble (float mode, when closed) ---- */
#asstBubble{
  display:none;position:fixed;right:24px;bottom:24px;z-index:41;
  width:56px;height:56px;border-radius:16px;border:none;cursor:pointer;
  background:linear-gradient(150deg,#ff8a47,#e2560c);color:#160a02;
  box-shadow:0 14px 34px -10px rgba(255,122,47,.6),0 4px 10px rgba(0,0,0,.4);
  place-items:center;transition:transform .16s,box-shadow .16s;
}
#asstBubble svg{width:25px;height:25px;stroke-width:1.7}
#asstBubble:hover{transform:translateY(-2px) scale(1.03);box-shadow:0 20px 42px -10px rgba(255,122,47,.7)}
body[data-amode="float"]:not(.asst-open) #asstBubble{display:grid}

/* ---- Backdrop (drawer mode, when open) ---- */
/* Light dim only — the assistant references the live calculation, so the canvas must
   stay readable behind it (applied values flash on their field while the panel is open).
   Focus comes from the panel's elevation/shadow, not from blacking out the page. */
#asstBackdrop{
  display:none;position:fixed;inset:0;z-index:39;background:rgba(6,10,18,.34);
  -webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);opacity:0;transition:opacity .26s;
}
body[data-amode="drawer"].asst-open #asstBackdrop{display:block;opacity:1}

/* ============ PANEL SHELL ============ */
#asst{
  position:fixed;z-index:42;display:none;flex-direction:column;min-height:0;
  background:var(--panel);color:var(--tx);font-family:var(--sans);
  border:1px solid var(--line);overflow:hidden;
}
#asst.ready{display:flex}

/* DOCK — persistent right rail */
body[data-amode="dock"] #asst{
  top:0;right:0;bottom:0;width:384px;border-top:0;border-right:0;border-bottom:0;
  border-left:1px solid var(--line);transform:translateX(0);
  transition:transform .3s cubic-bezier(.4,0,.2,1);
}
body[data-amode="dock"]:not(.asst-open) #asst{transform:translateX(100%)}
body[data-amode="dock"].asst-open .content,
body[data-amode="dock"].asst-open .topbar{padding-right:408px}

/* DRAWER — slides over content */
body[data-amode="drawer"] #asst{
  top:0;right:0;bottom:0;width:480px;border:0;border-left:1px solid var(--line);
  transform:translateX(100%);transition:transform .3s cubic-bezier(.4,0,.2,1);
  box-shadow:-26px 0 60px -24px rgba(0,0,0,.7);
}
body[data-amode="drawer"].asst-open #asst{transform:translateX(0)}

/* FLOAT — card anchored bottom-right */
body[data-amode="float"] #asst{
  right:24px;bottom:24px;top:auto;width:396px;max-height:min(660px,80vh);
  border-radius:18px;box-shadow:0 28px 80px -22px rgba(0,0,0,.75),0 0 0 1px rgba(0,0,0,.3);
  transform:translateY(14px) scale(.985);opacity:0;pointer-events:none;
  transition:transform .22s cubic-bezier(.3,.8,.4,1),opacity .2s;
}
body[data-amode="float"].asst-open #asst{transform:none;opacity:1;pointer-events:auto}

/* ---- Header ---- */
.asst-hd{display:flex;align-items:center;gap:12px;padding:15px 14px 14px 18px;
  border-bottom:1px solid var(--line-soft);flex:none;
  background:linear-gradient(180deg,var(--panel-2),var(--panel))}
.asst-mark{width:34px;height:34px;border-radius:10px;flex:none;display:grid;place-items:center;
  background:linear-gradient(150deg,#ff8a47,#d44e0a);color:#160a02}
.asst-mark svg{width:19px;height:19px;stroke-width:1.7}
.asst-hd .asst-tt{flex:1;min-width:0}
.asst-hd .asst-name{font-size:14px;font-weight:600;letter-spacing:-0.01em}
.asst-hd .asst-sub{font-size:11px;color:var(--tx-dim);margin-top:1px}
.asst-x{width:30px;height:30px;border-radius:8px;border:1px solid var(--line-soft);
  background:transparent;color:var(--tx-mid);cursor:pointer;display:grid;place-items:center;flex:none}
.asst-x svg{width:15px;height:15px;stroke-width:2}
.asst-x:hover{background:var(--panel-3);color:var(--tx)}

/* ---- Scroll / message area ---- */
.asst-scroll{flex:1;overflow-y:auto;min-height:0;padding:18px 16px 8px;
  display:flex;flex-direction:column;gap:14px}
.asst-scroll::-webkit-scrollbar{width:9px}
.asst-scroll::-webkit-scrollbar-thumb{background:var(--panel-3);border-radius:9px;border:3px solid var(--panel)}

/* intro */
.asst-intro{font-size:12.5px;color:var(--tx-mid);line-height:1.55}
.asst-intro b{color:var(--tx);font-weight:600}
.asst-intro .il{display:flex;gap:9px;margin-top:9px;align-items:flex-start}
.asst-intro .il svg{width:14px;height:14px;stroke-width:2;color:var(--orange);flex:none;margin-top:2px}

/* generic message rows */
.msg{display:flex;gap:10px;max-width:100%}
.msg.user{justify-content:flex-end}
.msg .av{width:26px;height:26px;border-radius:8px;flex:none;display:grid;place-items:center;
  background:var(--orange-soft);color:var(--orange)}
.msg .av svg{width:14px;height:14px;stroke-width:1.8}
.bubble{font-size:12.8px;line-height:1.55;border-radius:12px;padding:10px 13px;max-width:86%}
.msg.ai .bubble{background:var(--panel-2);border:1px solid var(--line-soft);color:var(--tx);border-top-left-radius:4px}
.msg.user .bubble{background:var(--orange);color:#160a02;font-weight:500;border-top-right-radius:4px}
.bubble p{margin:0 0 7px}
.bubble p:last-child{margin:0}
.bubble strong{font-weight:600}
.bubble code{font-family:var(--mono);font-size:12px;background:var(--bg);padding:1px 5px;border-radius:5px}
.bubble .num{font-family:var(--mono)}

/* ---- Findings (Prüfen report) ---- */
.report{border:1px solid var(--line-soft);border-radius:13px;overflow:hidden;background:var(--panel-2)}
.report-hd{display:flex;align-items:center;gap:9px;padding:11px 14px;border-bottom:1px solid var(--line-soft);
  font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--tx-dim)}
.report-hd .sc{margin-left:auto;display:flex;gap:6px}
.sc .scd{font-family:var(--mono);font-size:11px;font-weight:700;padding:2px 7px;border-radius:20px}
.scd.risk{background:var(--red-soft);color:var(--red)}
.scd.warn{background:var(--amber-soft);color:var(--amber)}
.scd.ok{background:rgba(55,214,132,.1);color:var(--green)}
.report-sum{padding:11px 14px;font-size:12.5px;color:var(--tx-mid);border-bottom:1px solid var(--line-soft);line-height:1.5}
.finding{display:flex;gap:11px;padding:12px 14px;border-bottom:1px solid var(--line-soft)}
.finding:last-child{border-bottom:none}
.finding .dot{width:8px;height:8px;border-radius:50%;flex:none;margin-top:5px}
.finding.risk .dot{background:var(--red)}
.finding.warn .dot{background:var(--amber)}
.finding.tip .dot{background:var(--orange)}
.finding.ok .dot{background:var(--green)}
.finding .fc{flex:1;min-width:0}
.finding .ft{font-size:12.8px;font-weight:600;color:var(--tx);letter-spacing:-0.005em}
.finding .fd{font-size:12px;color:var(--tx-mid);margin-top:3px;line-height:1.5}

/* ---- Suggestion / Übernehmen ---- */
.sugg{margin-top:9px;border:1px dashed var(--line);border-radius:10px;padding:10px 11px;
  background:var(--bg);display:flex;align-items:center;gap:11px}
.sugg .sg-info{flex:1;min-width:0}
.sugg .sg-lab{font-size:10px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--tx-dim)}
.sugg .sg-val{font-family:var(--mono);font-size:16px;font-weight:700;color:var(--green);margin-top:1px;white-space:nowrap}
.sugg .sg-val .u{font-size:11px;color:var(--tx-mid);font-weight:500;margin-left:3px}
.sugg .sg-delta{margin-top:3px;font-size:10.5px;color:var(--tx-dim);display:flex;gap:5px;flex-wrap:wrap;line-height:1.35}
.sugg .sg-delta .arr{color:var(--tx-mid)}
.btn-apply{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;flex:none;
  border-radius:8px;border:1px solid var(--orange);background:var(--orange);color:#160a02;
  font-family:var(--sans);font-size:12px;font-weight:600;cursor:pointer;transition:.12s;white-space:nowrap}
.btn-apply svg{width:14px;height:14px;stroke-width:2.2}
.btn-apply:hover{background:#ff8a47;border-color:#ff8a47}
.btn-apply.done{background:transparent;color:var(--green);border-color:var(--green-dim);cursor:default}

/* prefill: grouped multi-field suggestions with an "Alle übernehmen" header */
.sugg-group{margin-top:10px;border:1px solid var(--line);border-radius:11px;padding:9px;background:var(--panel-2);display:flex;flex-direction:column;gap:0}
.sugg-group .sugg{margin-top:8px}
.sugg-group .sugg:first-of-type{margin-top:2px}
.btn-apply.all{width:100%;justify-content:center;height:36px;font-size:12.5px}
.sugg-group .sg-val{white-space:normal;word-break:break-word}

/* field-level suggestion inside a finding */
.finding .sugg{margin-top:10px}
.report-suggestions{margin-top:10px}
.sugg-section-title{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--tx-dim);margin:2px 0 0}

/* ---- Loading ---- */
.asst-loading{display:flex;align-items:center;gap:10px;color:var(--tx-dim);font-size:12px;padding:2px}
.asst-loading .dots{display:inline-flex;gap:4px}
.asst-loading .dots i{width:6px;height:6px;border-radius:50%;background:var(--orange);opacity:.4;
  animation:asstpulse 1.1s infinite ease-in-out}
.asst-loading .dots i:nth-child(2){animation-delay:.15s}
.asst-loading .dots i:nth-child(3){animation-delay:.3s}
@keyframes asstpulse{0%,100%{opacity:.3;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}

.asst-err{font-size:12px;color:var(--red);background:var(--red-soft);border-radius:9px;padding:9px 12px;line-height:1.5}
.asst-off{font-size:12px;color:var(--amber);background:var(--amber-soft);border-radius:9px;padding:10px 12px;line-height:1.5}

/* ---- Footer ---- */
.asst-foot{flex:none;border-top:1px solid var(--line-soft);padding:11px 14px 13px;
  background:linear-gradient(0deg,var(--panel-2),var(--panel))}
.asst-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.asst-chip{font-size:11.5px;font-weight:500;color:var(--tx-mid);background:var(--panel-3);
  border:1px solid var(--line-soft);border-radius:20px;padding:5px 11px;cursor:pointer;
  font-family:var(--sans);transition:.12s;white-space:nowrap}
.asst-chip:hover{color:var(--tx);border-color:var(--tx-dim)}
.asst-chip.primary{background:var(--orange-soft);border-color:rgba(255,122,47,.35);color:var(--orange);font-weight:600}
.asst-chip.primary:hover{background:rgba(255,122,47,.2)}
.asst-chip.spark{border-color:rgba(255,122,47,.3);color:var(--tx)}
.asst-chip.spark svg{color:var(--orange)}
.asst-chip svg{width:12px;height:12px;stroke-width:2;vertical-align:-2px;margin-right:4px}
.asst-chip:disabled{opacity:.45;cursor:not-allowed}
.asst-chip:disabled:hover{color:var(--tx-mid);border-color:var(--line-soft);background:var(--panel-3)}

.asst-inrow{display:flex;align-items:flex-end;gap:8px;background:var(--bg);
  border:1px solid var(--line-soft);border-radius:11px;padding:6px 6px 6px 12px;transition:.12s}
.asst-inrow:focus-within{border-color:var(--orange);box-shadow:0 0 0 3px var(--orange-soft)}
.asst-inrow textarea{flex:1;border:none;background:transparent;color:var(--tx);resize:none;
  font-family:var(--sans);font-size:13px;line-height:1.45;max-height:120px;outline:none;padding:6px 0}
.asst-inrow textarea::placeholder{color:var(--tx-dim)}
.asst-send{width:34px;height:34px;flex:none;border-radius:9px;border:none;cursor:pointer;
  background:var(--orange);color:#160a02;display:grid;place-items:center;transition:.12s}
.asst-send svg{width:16px;height:16px;stroke-width:2.2}
.asst-send:hover{background:#ff8a47}
.asst-send:disabled{background:var(--panel-3);color:var(--tx-dim);cursor:not-allowed}

.asst-disclaimer{font-size:10px;color:var(--tx-dim);text-align:center;margin-top:9px;line-height:1.4}

/* ---- Live suggestions ---- */
.live-sugg{background:var(--panel);border:1px solid var(--orange-soft);border-radius:14px;margin-bottom:16px;overflow:hidden}
.live-sugg .lsg-hd{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--line-soft);font-size:12.5px}
.live-sugg .lsg-hd svg{width:14px;height:14px;color:var(--orange)}
.live-sugg .lsg-hd .lsg-note{color:var(--tx-dim);font-size:11px}
.live-sugg .lsg-off{margin-left:auto;background:transparent;border:1px solid var(--line-soft);border-radius:6px;color:var(--tx-dim);font-size:10.5px;padding:2px 8px;cursor:pointer}
.live-sugg .lsg-chips{display:flex;flex-direction:column}
.lsg-chip{display:flex;align-items:center;gap:10px;padding:9px 14px;border-bottom:1px solid var(--line-soft);font-size:12.5px}
.lsg-chip:last-child{border-bottom:none}
.lsg-chip .lc-main{display:flex;align-items:baseline;gap:8px;min-width:0;flex:1}
.lsg-chip .lc-delta{font-family:var(--mono);color:var(--tx-mid);white-space:nowrap}
.lsg-chip small{color:var(--tx-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lsg-chip .lc-apply{border:1px solid var(--orange);background:var(--orange-soft);color:var(--orange);border-radius:7px;font-size:11.5px;font-weight:600;padding:4px 10px;cursor:pointer;white-space:nowrap}
.lsg-chip .lc-x{border:0;background:transparent;color:var(--tx-dim);font-size:15px;cursor:pointer;line-height:1}

/* field flash when a suggestion is applied */
@keyframes asstflash{0%{box-shadow:0 0 0 3px var(--orange-soft);border-color:var(--orange)}
  100%{box-shadow:0 0 0 0 transparent}}
.asst-flash{animation:asstflash 1.4s ease-out}

/* small screens: collapse dock reservation, treat panel as overlay */
@media(max-width:1200px){
  body[data-amode="dock"].asst-open .content,
  body[data-amode="dock"].asst-open .topbar{padding-right:26px}
  body[data-amode="dock"] #asst{box-shadow:-26px 0 60px -24px rgba(0,0,0,.7);width:min(432px,92vw)}
}
@media(max-width:560px){
  body[data-amode="float"] #asst,body[data-amode="drawer"] #asst,body[data-amode="dock"] #asst{
    width:100vw;right:0;left:0;border-radius:0;max-height:100vh;top:0;bottom:0}
}