/* =========================================================================
   viden.css — knapperne under Buddys svar og emne-biblioteket i chatten.

   Ejes af viden-modulet og indlæses efter app.css. app.css ejes af PC-runden,
   så alt her er afgrænset til klasser chatten selv sætter (.viden-ramme,
   .svar-knap, .emne-*). Samme regler som resten: flader adskilles af tone og
   luft, aldrig af streger; kobolt er handling; solgul bruges ikke her.
   ========================================================================= */

/* ------------------------------------------------------------ chat-toppen */
.chat-top h1 { font-size: 22px; }
.chat-knapper { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.chat-top .chat-knapper .ikonknap { margin-left: 0; }
.emne-aabn {
    height: 42px; padding: 0 16px 0 13px; border-radius: 999px; background: var(--hvid); color: var(--blaa);
    display: inline-flex; align-items: center; gap: 7px; font-weight: 650; font-size: 15px; box-shadow: var(--skygge);
}
.emne-aabn svg { width: 19px; height: 19px; }
.emne-aabn:active { transform: scale(.97); }

/* "Buddy skriver" som tre prikker i en boble */
.besked.skriver { display: inline-flex; align-items: center; gap: 5px; padding: 15px 18px; }
.besked.skriver i { width: 7px; height: 7px; border-radius: 50%; background: var(--marine-3); animation: viden-prik 1.1s ease-in-out infinite; }
.besked.skriver i:nth-child(2) { animation-delay: .15s; }
.besked.skriver i:nth-child(3) { animation-delay: .3s; }
@keyframes viden-prik { 0%, 60%, 100% { opacity: .35; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }

/* ------------------------------------------- knapperne under seneste svar */
.svar-knapper { display: flex; flex-wrap: wrap; gap: 8px; align-self: flex-start; max-width: 94%; margin: 2px 0 6px; animation: viden-ind .22s cubic-bezier(.2, .8, .2, 1); }
.svar-knap {
    min-height: 40px; padding: 9px 16px; border-radius: 999px; background: var(--dis); color: var(--blaa-dyb);
    font-weight: 650; font-size: 14.5px; line-height: 1.25; text-align: left; transition: background .15s, transform .1s;
}
.svar-knap:hover { background: var(--dis-2); }
.svar-knap:active { transform: scale(.97); }
.svar-knap.mere { background: var(--blaa); color: var(--hvid); }
.svar-knap.mere:hover { background: var(--blaa-dyb); }
@keyframes viden-ind { from { opacity: 0; transform: translateY(6px); } }

/* ------------------------------------------------------- emne-browseren */
.emne-soeg {
    display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 18px; border-radius: 999px;
    background: var(--himmel); color: var(--marine-3); cursor: text;
}
.emne-soeg:focus-within { box-shadow: inset 0 0 0 2px var(--blaa); color: var(--blaa); }
.emne-soeg svg { width: 19px; height: 19px; flex: none; }
.emne-soeg input { flex: 1; min-width: 0; border: 0; background: none; outline: none; color: var(--marine); font-size: 16px; padding: 0; }
.emne-soeg input::placeholder { color: var(--marine-3); }
.emne-soeg input::-webkit-search-cancel-button { cursor: pointer; }

.emne-indhold { margin-top: 12px; }
.emne-gruppe { border-radius: var(--r-m); transition: background .15s; }
.emne-gruppe + .emne-gruppe { margin-top: 2px; }
.emne-gruppe.aaben { background: var(--himmel); padding-bottom: 6px; }
.emne-gruppe-top {
    width: 100%; display: flex; align-items: center; gap: 10px; padding: 13px 12px; border-radius: var(--r-m);
    font-family: var(--display); font-weight: 700; font-size: 16.5px; letter-spacing: -.01em; color: var(--marine); text-align: left;
}
.emne-gruppe:not(.aaben) .emne-gruppe-top:hover { background: var(--himmel); }
.emne-gruppe-top small { margin-left: auto; font-family: var(--tekst); font-weight: 600; font-size: 13px; color: var(--marine-3); letter-spacing: 0; }
.emne-gruppe-top svg { width: 16px; height: 16px; color: var(--marine-3); flex: none; transition: transform .2s; }
.emne-gruppe.aaben .emne-gruppe-top svg { transform: rotate(90deg); color: var(--blaa); }

.emne-liste { display: grid; gap: 2px; padding: 0 6px; }
.emne-punkt {
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px; width: 100%; padding: 10px 12px;
    border-radius: var(--r-s); text-align: left; font-size: 15px; font-weight: 550; color: var(--marine); line-height: 1.3;
}
.emne-punkt:hover, .emne-punkt:focus-visible { background: var(--hvid); color: var(--blaa-dyb); }
.emne-punkt small { flex: none; font-size: 12.5px; font-weight: 600; color: var(--marine-3); }
/* Søgeresultater står direkte på den hvide flade — der er hover en tone mørkere. */
.emne-indhold > .emne-liste { padding: 0; }
.emne-indhold > .emne-liste .emne-punkt:hover, .emne-indhold > .emne-liste .emne-punkt:focus-visible { background: var(--himmel); }
.emne-tom { padding: 14px 4px; display: grid; gap: 12px; justify-items: start; }
.emne-tom p { color: var(--marine-2); }

/* ------------------------------------------------- PC: panelet ved siden af */
.emne-panel { display: none; }
@media (min-width: 1200px) {
    .viden-ramme { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 8px; align-items: start; }
    .viden-ramme > .chat { max-width: 780px; width: 100%; margin: 0 auto; height: 100dvh; }
    .viden-ramme .emne-aabn { display: none; }
    .viden-ramme .chat-traad { padding-left: 28px; padding-right: 28px; }
    .viden-ramme .chat-top, .viden-ramme .chat-skriv { padding-left: 28px; padding-right: 28px; }
    .emne-panel {
        display: flex; flex-direction: column; position: sticky; top: 24px; margin: 24px 24px 24px 0; height: calc(100dvh - 48px);
        background: var(--hvid); border-radius: var(--r-l); box-shadow: var(--skygge); padding: 24px 18px 14px; overflow: hidden;
    }
    .emne-panel h2 { margin: 0 0 14px 6px; }
    .emne-panel .emne-browser { display: flex; flex-direction: column; flex: 1; min-height: 0; }
    .emne-panel .emne-indhold { flex: 1; min-height: 0; overflow-y: auto; margin: 12px -6px 0; padding: 0 6px 8px; scrollbar-width: thin; }
}

@media (prefers-reduced-motion: reduce) {
    .besked.skriver i, .svar-knapper { animation: none; }
}