/* Forsiden, AI-seksjonen: en illustrasjon av saksassistenten i SmartSupport (sak 27025).
 * Effektene er hentet fra SmartSupport: Root/new/ticket-assistant.css og Root/custom.css (.ss-magic).
 * Alt er en illustrasjon: vinduet er merket, ingenting kan klikkes, og en animert peker gjør valgene.
 * Uten skript (eller med redusert bevegelse) står den ferdig utfylt. forside-ai.js spiller av regien i løkke. */

.aid { position: relative; max-width: 34rem; margin: 0 0 0 auto; isolation: isolate; user-select: none; }
@media (max-width: 991px) { .aid { margin: 0 auto; } }
.aid, .aid * { pointer-events: none; cursor: default; }

/* Stjernestøv og glød bak vinduet */
.aid-stov { position: absolute; inset: -18% -12%; z-index: -2;
    background-image: radial-gradient(1.4px 1.4px at 8% 14%, rgba(255,255,255,.9), transparent), radial-gradient(1px 1px at 22% 68%, rgba(200,200,255,.85), transparent),
        radial-gradient(1.6px 1.6px at 37% 31%, rgba(255,255,255,.8), transparent), radial-gradient(1px 1px at 49% 86%, rgba(170,220,255,.85), transparent),
        radial-gradient(1.3px 1.3px at 63% 18%, rgba(190,180,255,.9), transparent), radial-gradient(1px 1px at 76% 57%, rgba(255,255,255,.75), transparent),
        radial-gradient(1.5px 1.5px at 88% 34%, rgba(200,210,255,.85), transparent), radial-gradient(1px 1px at 94% 79%, rgba(255,255,255,.8), transparent);
    background-size: 240px 210px; animation: aid-drift 46s linear infinite, aid-glimt 3.4s ease-in-out infinite; }
@property --aid-v { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.aid-aura { position: absolute; inset: -8%; z-index: -1; border-radius: 40%;
    background: conic-gradient(from var(--aid-v), rgba(31,59,179,.6), rgba(121,120,233,.6), rgba(82,205,255,.55), rgba(167,139,250,.6), rgba(31,59,179,.6));
    filter: blur(50px); opacity: .42; animation: aid-spin 12s linear infinite; transition: opacity .6s ease; }
.aid.busy .aid-aura { opacity: .75; animation-duration: 3s; }

/* Vinduet: tydelig en illustrasjon av et program */
.aid-win { position: relative; border-radius: 16px; background: #eef1f8; overflow: hidden;
    box-shadow: 0 30px 70px -30px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.08); animation: aid-float 7s ease-in-out infinite; }
.aid-bar { display: flex; align-items: center; gap: .35rem; height: 30px; padding: 0 .75rem; background: #dfe4f0; }
.aid-bar > i { width: 9px; height: 9px; border-radius: 50%; background: #c3cadb; }
.aid-bar > i:first-child { background: #f39a8f; } .aid-bar > i:nth-child(2) { background: #f5cf7a; } .aid-bar > i:nth-child(3) { background: #8fd3a6; }
.aid-tag { margin-left: auto; font-size: .62rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #5653c9;
    background: rgba(121,120,233,.14); border-radius: 999px; padding: .12rem .55rem; }
.aid-app { display: grid; grid-template-columns: 34% 1fr; gap: .7rem; padding: .7rem; }

/* Saken til venstre: bare antydet */
.aid-thread { display: flex; flex-direction: column; gap: .55rem; min-width: 0; }
.aid-mail { background: #fff; border-radius: 10px; padding: .55rem; display: flex; flex-direction: column; gap: .35rem; }
.aid-who { display: flex; align-items: center; gap: .35rem; }
.aid-who b { width: 18px; height: 18px; border-radius: 50%; background: linear-gradient(135deg, #f5b37a, #ef7a6c); flex: none; }
.aid-who u { display: block; height: 6px; width: 60%; border-radius: 3px; background: #d7dcea; text-decoration: none; }
.aid-l { display: block; height: 5px; border-radius: 3px; background: #e4e8f2; }
.aid-l.k { width: 70%; } .aid-l.kk { width: 45%; }
.aid-editor { position: relative; margin-top: auto; background: #fff; border-radius: 10px; border: 1.5px solid #dee2ec; padding: .5rem; min-height: 4.6rem;
    display: flex; flex-direction: column; gap: .3rem; transition: border-color .4s ease; }
.aid-editor .aid-l { background: linear-gradient(90deg, #7978E9, #52CDFF); opacity: .55; transform-origin: left; }
.aid-editor small { position: absolute; left: .55rem; top: .45rem; font-size: .58rem; color: #a2abbf; transition: opacity .3s ease; }
.aid-editor.fylt small { opacity: 0; }
.aid-editor.blink { animation: aid-flash 1.4s ease-out; border-color: #7978E9; }

/* Assistentpanelet (ticket-assistant.css) */
.aid-card { position: relative; display: flex; flex-direction: column; min-width: 0; border-radius: 14px; background: #fff; color: #1f2937; text-align: left;
    box-shadow: 0 10px 30px rgba(31,59,179,.14), 0 1px 3px rgba(16,24,40,.06); }
.aid-card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px;
    background: conic-gradient(from var(--aid-v), #1F3BB3, #7978E9, #52CDFF, #a78bfa, #1F3BB3);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
    opacity: .6; animation: aid-spin 9s linear infinite; transition: opacity .4s ease; }
.aid-card::after { content: ""; position: absolute; inset: -10px; border-radius: 22px; z-index: -1; opacity: 0;
    background: conic-gradient(from var(--aid-v), rgba(31,59,179,.45), rgba(121,120,233,.45), rgba(82,205,255,.45), rgba(31,59,179,.45));
    filter: blur(20px); animation: aid-spin 2.2s linear infinite; transition: opacity .5s ease; }
.aid.busy .aid-card::before { opacity: 1; animation-duration: 2.2s; }
.aid.busy .aid-card::after { opacity: .8; }

.aid-head { display: flex; align-items: center; gap: .55rem; padding: .7rem .75rem .5rem; }
.aid-orb { flex: none; width: 30px; height: 30px; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: #fff;
    background: linear-gradient(135deg, #1F3BB3, #7978E9 55%, #52CDFF); background-size: 200% 200%; box-shadow: 0 6px 16px rgba(121,120,233,.4); animation: aid-orb 6s ease-in-out infinite; }
.aid-orb svg { width: 16px; height: 16px; }
.aid.busy .aid-orb { animation: aid-orb 1.6s ease-in-out infinite, aid-pulse 1.6s ease-in-out infinite; }
.aid.busy .aid-orb svg { animation: aid-twinkle 1.6s ease-in-out infinite; }
.aid-titles { min-width: 0; flex: 1 1 auto; line-height: 1.2; }
.aid-titles b { display: block; font-size: .8rem; }
.aid-titles small { display: block; font-size: .62rem; color: #8a94a6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aid-body { padding: 0 .75rem .75rem; display: flex; flex-direction: column; gap: .55rem; font-size: .72rem; }
.aid-stack { display: grid; } .aid-stack > * { grid-area: 1 / 1; }

.aid-skel { display: flex; flex-direction: column; gap: .4rem; padding: .15rem 0; opacity: 0; transition: opacity .3s ease; }
.aid-skel i { display: block; height: 8px; border-radius: 5px; background: linear-gradient(90deg, #eef0f8 0%, #e2e5f7 20%, #d9dcfb 40%, #eef0f8 60%); background-size: 300% 100%; animation: aid-shimmer 1.4s ease-in-out infinite; }
.aid-skel i:first-child { height: 11px; width: 85%; } .aid-skel i.k { width: 55%; }
.aid-headline { font-size: .8rem; line-height: 1.35; font-weight: 700; margin: 0 0 .4rem; }
.aid-meta { display: flex; flex-wrap: wrap; gap: .25rem; margin-bottom: .45rem; }
.aid-pill { font-size: .6rem; font-weight: 600; padding: .12rem .45rem; border-radius: 999px; background: #f1f3f8; color: #4b5563; }
.aid-pill.warn { background: rgba(242,159,103,.16); color: #b4561a; } .aid-pill.ok { background: rgba(23,166,115,.1); color: #11744f; } .aid-pill.info { background: rgba(82,205,255,.16); color: #0f6f95; }
.aid-points { margin: 0 0 .45rem; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .2rem; }
.aid-points li { position: relative; padding-left: .8rem; line-height: 1.4; color: #374151; }
.aid-points li::before { content: ""; position: absolute; left: .05rem; top: .5em; width: 5px; height: 5px; border-radius: 50%; background: linear-gradient(135deg, #7978E9, #52CDFF); }
.aid-next { display: flex; gap: .4rem; padding: .45rem .55rem; border-radius: 10px; background: linear-gradient(135deg, rgba(31,59,179,.06), rgba(82,205,255,.09)); line-height: 1.4; }
.aid-next svg { flex: none; width: 13px; height: 13px; color: #5653c9; margin-top: .1rem; }
.aid-next b { display: block; font-size: .56rem; text-transform: uppercase; letter-spacing: .05em; color: #5653c9; }

/* Forslagene ser ut som SmartSupport sine .ss-magic-soft-knapper */
.aid-chips { display: flex; flex-direction: column; gap: .3rem; }
.aid-chip { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; gap: .45rem; padding: .4rem .55rem; border-radius: 10px; font-weight: 600; color: #3b3fb6;
    background: linear-gradient(#fff, #fff) padding-box, linear-gradient(120deg, #1F3BB3, #7978E9, #52CDFF) border-box; border: 1.5px solid transparent;
    transition: color .3s ease, box-shadow .35s ease, transform .3s cubic-bezier(.2,.8,.2,1); }
.aid-chip > * { position: relative; z-index: 2; }
.aid-chip i { flex: none; width: 20px; height: 20px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; color: #5653c9; background: rgba(121,120,233,.1); transition: background .3s ease, color .3s ease, transform .5s cubic-bezier(.2,.8,.2,1); }
.aid-chip i svg { width: 12px; height: 12px; }
.aid-chip::after, .aid-btn::after { content: ""; position: absolute; z-index: 1; top: 0; bottom: 0; left: -60%; width: 45%; background: linear-gradient(105deg, transparent 0%, rgba(255,255,255,.6) 50%, transparent 100%); transform: skewX(-20deg); opacity: 0; }
.aid-chip::before, .aid-btn::before { content: ""; position: absolute; z-index: 1; inset: 0; opacity: 0;
    background: radial-gradient(circle at 18% 28%, #fff 0 1.2px, transparent 2px), radial-gradient(circle at 72% 22%, #fff 0 1px, transparent 1.8px), radial-gradient(circle at 86% 74%, #fff 0 1.3px, transparent 2.2px), radial-gradient(circle at 40% 80%, #fff 0 .9px, transparent 1.6px), radial-gradient(circle at 58% 50%, #fff 0 .8px, transparent 1.5px); }
/* Pekeren står over: kortet fylles med flytende gradient, glans, gnister og et blinkende ikon */
.aid-chip.hover { color: #fff; transform: translateY(-1px); box-shadow: 0 6px 20px rgba(121,120,233,.45), 0 0 0 3px rgba(121,120,233,.15);
    background: linear-gradient(120deg, #1F3BB3 0%, #7978E9 35%, #52CDFF 50%, #7978E9 65%, #1F3BB3 100%) padding-box, linear-gradient(120deg, #1F3BB3, #7978E9, #52CDFF) border-box;
    background-size: 250% 100%; animation: aid-flow 3s ease-in-out infinite alternate; }
.aid-chip.hover i { color: #fff; background: rgba(255,255,255,.18); transform: rotate(-8deg) scale(1.08); animation: aid-twinkle 1.6s ease-in-out .2s infinite; }
.aid-chip.hover::after, .aid-btn.hover::after { animation: aid-shine 1.1s ease-out; }
.aid-chip.hover::before, .aid-btn.hover::before { animation: aid-sparkle 1.6s ease-in-out infinite; }
.aid-chip.trykk, .aid-btn.trykk { transform: scale(.97); }

.aid-thinking { align-self: flex-start; display: flex; align-items: center; gap: .45rem; padding: .45rem .65rem; border-radius: 12px; color: #5653c9;
    background: linear-gradient(110deg, #f6f7fb 30%, #eceefe 50%, #f6f7fb 70%); background-size: 250% 100%; animation: aid-shimmer 1.6s ease-in-out infinite; opacity: 0; transition: opacity .3s ease; }
.aid-dots { display: inline-flex; gap: 3px; }
.aid-dots i { width: 5px; height: 5px; border-radius: 50%; background: linear-gradient(135deg, #7978E9, #52CDFF); animation: aid-bounce 1.2s infinite ease-in-out; }
.aid-dots i:nth-child(2) { animation-delay: .15s; } .aid-dots i:nth-child(3) { animation-delay: .3s; }

.aid-draft { border-radius: 12px; border: 1px solid #e3e6f3; background: #fff; overflow: hidden; box-shadow: 0 6px 18px rgba(16,24,40,.06); transition: border-color .4s ease; }
.aid-draft.brukt { border-color: rgba(23,166,115,.45); }
.aid-draft-head { display: flex; align-items: center; gap: .35rem; padding: .4rem .6rem; font-size: .66rem; background: linear-gradient(135deg, rgba(31,59,179,.06), rgba(82,205,255,.09)); color: #3b3fb6; }
.aid-draft-head svg { width: 12px; height: 12px; }
.aid-state { margin-left: auto; display: inline-flex; align-items: center; gap: .2rem; font-weight: 600; color: #17a673; }
.aid-state svg { width: 11px; height: 11px; }
.aid-draft-body { padding: .5rem .6rem; line-height: 1.5; margin: 0; }
.aid-draft-body .w { display: inline; transition: opacity .25s ease; }
.aid-caret { display: inline-block; width: 2px; height: 1em; margin-left: 1px; vertical-align: -.15em; background: #7978E9; animation: aid-blink 1s steps(1) infinite; }
.aid-foot { display: flex; align-items: center; gap: .3rem; padding: 0 .6rem .55rem; flex-wrap: wrap; }
.aid-src { display: inline-flex; align-items: center; gap: .2rem; padding: .1rem .4rem; border-radius: 5px; background: #f1f3f8; color: #374151; font-size: .6rem; transition: opacity .3s ease, transform .3s ease; }
.aid-src svg { width: 9px; height: 9px; color: #7978E9; }
.aid-btn { position: relative; isolation: isolate; overflow: hidden; margin-left: auto; display: inline-flex; align-items: center; gap: .3rem; padding: .3rem .65rem; border-radius: 8px; font-size: .64rem; font-weight: 600; color: #fff;
    background: linear-gradient(120deg, #1F3BB3 0%, #7978E9 35%, #52CDFF 50%, #7978E9 65%, #1F3BB3 100%); background-size: 250% 100%; box-shadow: 0 3px 10px rgba(31,59,179,.25);
    transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, background .4s ease; }
.aid-btn > * { position: relative; z-index: 2; }
.aid-btn svg { width: 11px; height: 11px; }
.aid-btn.hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(121,120,233,.5), 0 0 0 3px rgba(121,120,233,.15); animation: aid-flow 3s ease-in-out infinite alternate; }
.aid-btn.ferdig { background: #17a673; box-shadow: 0 3px 10px rgba(23,166,115,.3); animation: aid-pop .5s cubic-bezier(.2,1.6,.4,1); }
.aid-btn .ja { display: none; } .aid-btn.ferdig .ja { display: inline-flex; } .aid-btn.ferdig .nei { display: none; }

/* Pekeren som gjør valgene */
.aid-cursor { position: absolute; left: 0; top: 0; z-index: 20; width: 22px; height: 22px; opacity: 0; filter: drop-shadow(0 2px 4px rgba(0,0,0,.35));
    transform: translate(var(--cx, 90%), var(--cy, 110%)); transition: transform .75s cubic-bezier(.55,0,.25,1), opacity .4s ease; }
.aid-cursor.vis { opacity: 1; }
.aid-ring { position: absolute; z-index: 19; width: 30px; height: 30px; margin: -15px; border-radius: 50%; border: 2px solid rgba(121,120,233,.8); animation: aid-ring .6s ease-out forwards; }
.aid-burst { position: absolute; z-index: 19; width: 0; height: 0; }
.aid-burst i { position: absolute; width: 6px; height: 6px; margin: -3px; border-radius: 50%; background: linear-gradient(135deg, #7978E9, #52CDFF); transform: rotate(var(--a)) translateX(0); animation: aid-burst .8s cubic-bezier(.2,.8,.2,1) forwards; }

.aid-cap { margin: .9rem 0 0; font-size: .78rem; color: rgba(232,236,246,.6); text-align: center; }

/* Skjult før regien slipper fram elementene (bare med skript) */
.aid-js .aid-hide { opacity: 0 !important; transform: translateY(6px); }
.aid-js .aid-in { transition: opacity .45s cubic-bezier(.2,.8,.2,1), transform .45s cubic-bezier(.2,.8,.2,1); }
.aid-js .aid-win > .aid-app { transition: opacity .6s ease; }
.aid-js.reset .aid-app { opacity: 0; }

@keyframes aid-spin { to { --aid-v: 360deg; } }
@keyframes aid-orb { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes aid-pulse { 0%, 100% { box-shadow: 0 6px 16px rgba(121,120,233,.4); } 50% { box-shadow: 0 0 0 6px rgba(121,120,233,.15), 0 6px 22px rgba(82,205,255,.55); } }
@keyframes aid-twinkle { 0%, 100% { transform: rotate(0) scale(1); filter: drop-shadow(0 0 0 rgba(255,255,255,0)); } 50% { transform: rotate(20deg) scale(1.2); filter: drop-shadow(0 0 5px rgba(255,255,255,.9)); } }
@keyframes aid-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
@keyframes aid-bounce { 0%, 80%, 100% { transform: scale(.6); opacity: .4; } 40% { transform: scale(1); opacity: 1; } }
@keyframes aid-flow { from { background-position: 100% 50%; } to { background-position: 0% 50%; } }
@keyframes aid-shine { 0% { left: -60%; opacity: 1; } 100% { left: 130%; opacity: 1; } }
@keyframes aid-sparkle { 0%, 100% { opacity: 0; transform: scale(.8); } 30% { opacity: 1; transform: scale(1); } 60% { opacity: .35; } 80% { opacity: .9; } }
@keyframes aid-flash { 0% { box-shadow: 0 0 0 0 rgba(121,120,233,0); } 20% { box-shadow: 0 0 0 5px rgba(121,120,233,.25), 0 0 24px rgba(82,205,255,.4); } 100% { box-shadow: 0 0 0 0 rgba(121,120,233,0); } }
@keyframes aid-pop { from { transform: scale(.85); } to { transform: none; } }
@keyframes aid-blink { 50% { opacity: 0; } }
@keyframes aid-ring { from { transform: scale(.3); opacity: 1; } to { transform: scale(1.4); opacity: 0; } }
@keyframes aid-burst { to { transform: rotate(var(--a)) translateX(30px) scale(.3); opacity: 0; } }
@keyframes aid-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes aid-drift { to { background-position: 240px -210px; } }
@keyframes aid-glimt { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
    .aid-stov, .aid-aura, .aid-win, .aid-card::before, .aid-card::after, .aid-orb, .aid-orb svg, .aid-skel i, .aid-dots i, .aid-thinking, .aid-caret { animation: none !important; }
    .aid-cursor, .aid-thinking, .aid-skel { display: none; }
}

/* Svarfeltet fylles når utkastet settes inn */
.aid-editor .aid-l { opacity: 0; transform: scaleX(0); transition: opacity .35s ease, transform .5s cubic-bezier(.2,.8,.2,1); }
.aid-editor.fylt .aid-l { opacity: .55; transform: none; }
.aid-editor.fylt .aid-l:nth-of-type(2) { transition-delay: .1s; } .aid-editor.fylt .aid-l:nth-of-type(3) { transition-delay: .2s; }

/* Tilbakestilling mellom rundene skjer uten overganger */
.aid-nt *, .aid-nt *::before, .aid-nt *::after { transition: none !important; }
.aid-nt .aid-cursor { transition: none !important; }

/* Mobil: saken til venstre skjules, og assistentkortet får hele bredden. I to smale kolonner brøt teksten i kortet
 * over mange linjer, og illustrasjonen ble over 700 px høy (sak 27025, 2026-10-24). */
@media (max-width: 575.98px) {
    .aid-app { grid-template-columns: 1fr; }
    .aid-thread { display: none; }
    .aid-aura { filter: blur(36px); }
    /* Bare det første valget (det pekeren klikker på) og uten neste-steg-boksen, så kortet blir lavere */
    .aid-chip:not(:first-child), .aid-next { display: none !important; }
}