/* ═══════════════════════════════════════════════════════════════════════
   AI-assistenten (apps/assistant) - chatt, förslagskort, orb, historik.

   Ligger i egen fil ovanpå manage.css och lånar panelens tokens
   (--accent, --r, --fs ...). Prefix "a-" för att inte krocka.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Undermeny ──────────────────────────────────────────────────────── */
.a-subnav{display:flex;gap:6px;flex-wrap:wrap;margin:-6px 0 22px}
.a-subnav__item{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:999px;
  border:1px solid var(--line);background:var(--surface);font-weight:700;font-size:var(--fs-sm);color:var(--ink-2)}
.a-subnav__item:hover{border-color:var(--line-strong);color:var(--ink)}
.a-subnav__item.on{background:var(--accent);border-color:var(--accent);color:var(--accent-fg,#fff)}
.a-subnav__item.on .a-pill--alert{background:var(--accent-fg,#fff);color:var(--accent)}

/* ── Små etiketter ──────────────────────────────────────────────────── */
.a-pill{display:inline-flex;align-items:center;padding:2px 10px;border-radius:999px;font-size:var(--fs-xs);
  font-weight:700;background:var(--surface-3);color:var(--ink-2);line-height:1.5}
.a-pill--alert{background:var(--danger);color:#fff}
.a-pill--business{background:var(--warn-soft);color:var(--warn)}
.a-pill--ai{background:var(--plum-soft);color:var(--plum)}
.a-hint{color:var(--ink-3);font-size:var(--fs-xs)}
.a-error{color:var(--danger);background:var(--danger-soft);padding:10px 14px;border-radius:var(--r-sm);font-size:var(--fs-sm);margin:10px 0 0}
.a-empty{padding:48px 26px;text-align:center;color:var(--ink-2)}
.a-empty p{margin:18px auto 0;max-width:48ch}
.a-head{align-items:center;gap:18px}
.a-head .lede .a-hint{display:inline-block;margin-left:10px}

/* ── Orben ──────────────────────────────────────────────────────────── */
/* Genomskinligt glas: ljus botten, tre mjuka moln i olika takt, en glans.
   Allt ritas INUTI elementets egen låda (overflow hidden + isolation), så
   blurret aldrig klipps av skarpt mot kanten. */
.a-orb{position:relative;display:inline-block;width:56px;height:56px;border-radius:50%;overflow:hidden;
  isolation:isolate;flex:0 0 auto;vertical-align:middle;
  background:radial-gradient(circle at 35% 30%,#ffffff 0%,var(--accent-soft) 45%,var(--surface-3) 100%);
  box-shadow:inset 0 -4px 10px rgba(13,23,46,.14),inset 0 1px 2px rgba(255,255,255,.9),0 2px 6px rgba(13,23,46,.10);
  border:1px solid var(--line-strong)}
.a-orb__cloud{position:absolute;inset:-10%;border-radius:46% 54% 50% 50%;filter:blur(7px);opacity:.55}
/* Molnens färger följer panelens accent (grönt på CS Auto, blått på BD). */
.a-orb__cloud--a{background:radial-gradient(circle at 30% 40%,var(--accent) 0%,transparent 65%);animation:a-spin 9s linear infinite}
.a-orb__cloud--b{background:radial-gradient(circle at 70% 65%,var(--accent-deep) 0%,transparent 60%);animation:a-spin 13s linear infinite reverse}
.a-orb__cloud--c{background:radial-gradient(circle at 55% 25%,var(--accent-soft) 0%,transparent 60%);animation:a-spin 6.5s linear infinite}
.a-orb__gloss{position:absolute;left:16%;top:8%;width:44%;height:30%;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.95),rgba(255,255,255,0) 70%)}
.a-orb--sm{width:26px;height:26px;border-width:1px}
.a-orb--sm .a-orb__cloud{filter:blur(3px)}
.a-orb--head{width:56px;height:56px}
.a-orb--lg{width:96px;height:96px}
.a-orb.is-thinking .a-orb__cloud--a{animation-duration:2.2s}
.a-orb.is-thinking .a-orb__cloud--b{animation-duration:3.1s}
.a-orb.is-thinking .a-orb__cloud--c{animation-duration:1.6s}
@keyframes a-spin{to{transform:rotate(360deg)}}

/* ── Chattens layout ────────────────────────────────────────────────── */
.a-chat{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:22px;align-items:start}
@media (max-width:1100px){.a-chat{grid-template-columns:1fr}}
.a-chat__main{display:flex;flex-direction:column;min-height:60vh}
.a-chat__log{flex:1;padding:22px 26px;overflow-y:auto;max-height:70vh;display:flex;flex-direction:column;gap:18px}
.a-chat__log--empty{max-height:none;flex:0 0 auto}
.a-chat__form{border-top:1px solid var(--line);padding:18px 26px 22px}
.a-chat__form textarea{width:100%;border:2px solid var(--line-strong);border-radius:var(--r-sm);padding:14px 16px;
  font:inherit;font-size:var(--fs);line-height:1.5;resize:none;min-height:64px;background:var(--surface)}
.a-chat__form textarea:focus{outline:none;border-color:var(--accent)}
.a-chat__form textarea[disabled]{background:var(--surface-2);color:var(--ink-3)}
.a-chat__actions{display:flex;align-items:center;gap:12px;margin-top:12px;flex-wrap:wrap}
.a-chat__actions kbd{font:inherit;font-size:var(--fs-xs);padding:1px 7px;border:1px solid var(--line-strong);border-radius:6px;background:var(--surface-2)}
.a-send{background:linear-gradient(120deg,var(--accent-deep),var(--accent) 50%,var(--accent-deep));background-size:200% 100%;
  border-color:transparent;color:var(--accent-fg,#fff);animation:a-prism 6s linear infinite}
.a-send:hover{filter:brightness(1.06)}
@keyframes a-prism{to{background-position:-200% 0}}
.a-side-drafts h3{color:var(--accent-deep)}
.a-recent{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}
.a-recent:last-of-type{border-bottom:0}
.a-recent.on > div > a{color:var(--accent);font-weight:800}
.a-recent > div{min-width:0;display:flex;flex-direction:column}
.a-recent > div > a{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}
.a-recent .iconbtn{width:32px;height:32px}

/* ── Meddelanden ────────────────────────────────────────────────────── */
.a-msg{max-width:86%;display:flex;flex-direction:column;gap:6px}
.a-msg--user{align-self:flex-end;max-width:70%}
.a-msg--assistant{align-self:flex-start}
.a-msg__meta{display:flex;align-items:center;gap:10px;font-size:var(--fs-xs);color:var(--ink-3)}
.a-msg--user .a-msg__meta{justify-content:flex-end}
.a-msg__who{font-weight:700;color:var(--ink-2)}
.a-msg__body{padding:14px 18px;border-radius:var(--r);background:var(--surface-2);line-height:1.55;white-space:normal}
.a-msg--user .a-msg__body{background:var(--accent);color:var(--accent-fg,#fff);border-bottom-right-radius:6px}
.a-msg--assistant .a-msg__body{border-bottom-left-radius:6px;border:1px solid var(--line);background:var(--surface)}
.a-msg__body--working{display:flex;align-items:center;gap:10px;color:var(--ink-2)}
.a-elapsed{color:var(--ink-3);font-size:var(--fs-xs);font-variant-numeric:tabular-nums}
.a-dots{display:inline-flex;gap:4px}
.a-dots i{width:7px;height:7px;border-radius:50%;background:var(--accent);animation:a-bounce 1.2s infinite}
.a-dots i:nth-child(2){animation-delay:.15s}.a-dots i:nth-child(3){animation-delay:.3s}
@keyframes a-bounce{0%,80%,100%{transform:translateY(0);opacity:.4}40%{transform:translateY(-5px);opacity:1}}

/* Renderad markdown i assistentens svar - kompakta marginaler. */
.a-prose p{margin:0 0 10px}.a-prose p:last-child{margin-bottom:0}
.a-prose ul,.a-prose ol{margin:6px 0 10px;padding-left:22px}
.a-prose li{margin:2px 0}
.a-prose code{font-family:var(--mono);font-size:.92em;background:var(--surface-3);padding:1px 6px;border-radius:6px}
.a-prose pre{background:var(--surface-3);padding:12px 14px;border-radius:var(--r-sm);overflow-x:auto;font-size:var(--fs-xs)}
.a-prose table{border-collapse:collapse;margin:8px 0;font-size:var(--fs-sm);width:100%}
.a-prose th,.a-prose td{border:1px solid var(--line);padding:6px 10px;text-align:left;vertical-align:top}
.a-prose th{background:var(--surface-2);font-weight:800}
.a-prose blockquote{margin:8px 0;padding:6px 14px;border-left:4px solid var(--line-strong);color:var(--ink-2)}
.a-prose a{color:var(--accent);text-decoration:underline}
.a-prose strong{font-weight:800}

/* @-chips */
.m-chip{display:inline-flex;align-items:center;gap:4px;padding:1px 9px;border-radius:999px;background:var(--accent-soft);
  color:var(--accent-deep);font-size:.92em;font-weight:600;vertical-align:baseline}
.a-msg--user .m-chip{background:rgba(255,255,255,.35);color:var(--accent-fg,#fff)}
.m-chip b{font-weight:800}

/* Stegen: en tidslinje. */
.a-steps{list-style:none;margin:0;padding:4px 0 0 6px;display:flex;flex-direction:column;gap:4px;font-size:var(--fs-xs);color:var(--ink-2)}
.a-step{display:flex;align-items:baseline;gap:10px;position:relative}
.a-step__dot{width:9px;height:9px;border-radius:50%;background:var(--ok);flex:0 0 auto;position:relative;top:1px}
.a-step--running .a-step__dot{background:var(--accent);animation:a-pulse 1s infinite}
.a-step--fail .a-step__dot{background:var(--danger)}
.a-step--note .a-step__dot{background:var(--line-strong);width:7px;height:7px}
.a-step--note .a-step__label{font-style:italic;color:var(--ink-3)}
.a-step__label b{font-weight:700;color:var(--ink)}
.a-step__error{color:var(--danger);margin-left:6px}
@keyframes a-pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.5);opacity:.5}}

/* @-menyn */
.a-mention-anchor{position:relative}
.a-mention-menu{position:absolute;left:0;right:0;bottom:calc(100% + 6px);background:var(--surface);border:1px solid var(--line-strong);
  border-radius:var(--r-sm);box-shadow:var(--shadow-lg);max-height:320px;overflow-y:auto;z-index:30;padding:6px}
.a-mention-menu__item{display:flex;flex-direction:column;gap:2px;width:100%;text-align:left;padding:8px 12px;border:0;
  background:none;border-radius:8px;cursor:pointer}
.a-mention-menu__item b{font-weight:700}
.a-mention-menu__item span{font-size:var(--fs-xs);color:var(--ink-3)}
.a-mention-menu__item.on,.a-mention-menu__item:hover{background:var(--accent-soft)}

/* ── Förslagskort i chatten ─────────────────────────────────────────── */
.a-inline-drafts{display:flex;flex-direction:column;gap:10px;margin-top:8px}
.a-inline-draft{border:1px solid var(--line-strong);border-left:5px solid var(--accent);border-radius:var(--r-sm);
  background:var(--surface);padding:12px 16px}
.a-inline-draft--business{border-left-color:var(--warn)}
.a-inline-draft__head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.a-inline-draft__title{font-weight:800;display:inline-flex;align-items:center;gap:8px}
.a-inline-draft__list{margin:8px 0 10px;padding-left:20px;font-size:var(--fs-sm);color:var(--ink-2)}
.a-inline-draft__actions{display:flex;gap:8px;flex-wrap:wrap}

/* ── Granskning: kort, diff, klumpmarkering ─────────────────────────── */
.a-draft{background:var(--surface);border:1px solid var(--line);border-left:5px solid var(--accent);border-radius:var(--r);
  padding:18px 22px;margin-bottom:14px;box-shadow:var(--shadow)}
.a-draft--business{border-left-color:var(--warn)}
.a-draft--ai{border-left-color:var(--plum)}
.a-draft:target{outline:3px solid var(--accent);outline-offset:2px}
.a-draft__head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:10px}
.a-draft__title{display:flex;align-items:center;gap:12px;font-weight:800;font-size:var(--fs-md)}
.a-draft__check input{width:22px;height:22px;accent-color:var(--accent)}
.a-draft__meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.a-draft__op{font-family:var(--mono);font-size:var(--fs-xs);color:var(--ink-3)}
.a-draft__actions{display:flex;gap:10px;align-items:center;margin-top:14px;flex-wrap:wrap}
.a-draft__actions form{display:flex;gap:10px}
.a-diff{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
.a-diff th{text-align:left;vertical-align:top;padding:8px 12px 8px 0;width:190px;color:var(--ink-2);font-weight:700;white-space:nowrap}
.a-diff td{padding:8px 0;border-top:1px solid var(--line)}
.a-diff tr:first-child td{border-top:0}
.a-diff__value{white-space:pre-wrap;line-height:1.55}
.a-diff ins{background:var(--ok-soft);color:var(--ok);text-decoration:none;padding:0 2px;border-radius:3px}
.a-diff del{background:var(--danger-soft);color:var(--danger);padding:0 2px;border-radius:3px}
.a-bulkbar{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:12px 18px;
  margin-bottom:16px;background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r);box-shadow:var(--shadow)}
.a-bulkbar__all{display:inline-flex;align-items:center;gap:10px;font-weight:700}
.a-bulkbar__all input,.a-group-check input{width:22px;height:22px;accent-color:var(--accent)}
.a-bulkbar__count{color:var(--ink-2);font-size:var(--fs-sm)}
.a-group-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:24px 0 12px}
.a-group-head h2{font-size:var(--fs-lg);font-weight:800;letter-spacing:-.01em}
.a-group-check{display:inline-flex;align-items:center;gap:10px;cursor:pointer}
.a-prompt{margin-bottom:18px}
.a-followups{margin-top:18px}
.a-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.a-chipbtn{display:inline-flex;flex-direction:column;gap:2px;padding:10px 16px;border-radius:var(--r-sm);
  border:1px solid var(--line-strong);background:var(--surface);font-weight:700;font-size:var(--fs-sm)}
.a-chipbtn span{font-weight:400;color:var(--ink-3);font-size:var(--fs-xs)}
.a-chipbtn:hover{border-color:var(--accent);color:var(--accent)}

/* ── Skrivguide, förhandsgranskning ─────────────────────────────────── */
.a-guide-input{width:100%;min-height:220px;border:2px solid var(--line-strong);border-radius:var(--r-sm);padding:14px 16px;font:inherit;line-height:1.55}
.a-guide-input:focus{outline:none;border-color:var(--accent)}
.a-preview{padding:0;overflow:hidden;margin-top:14px}
.a-preview__frame{display:block;width:100%;height:78vh;border:0;background:#fff}

@media (prefers-reduced-motion:reduce){.a-orb__cloud,.a-send,.a-dots i,.a-step--running .a-step__dot{animation:none!important}}
@media (max-width:720px){
  .a-chat__log{padding:16px}
  .a-msg,.a-msg--user{max-width:100%}
  .a-diff th{width:120px;white-space:normal}
}