/* =========================================================================
   robot.css — "Skriv til Buddy" om træningen (traeningsrobot.js, 04-11-2026).
   ========================================================================= */
.rb-side { display: flex; flex-direction: column; min-height: calc(100dvh - var(--bund)); padding-bottom: calc(var(--bund) + 96px); }
.rb-side .side-top { margin-bottom: 10px; }
.rb-hoved { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.rb-hoved .buddy-fig { width: 52px; height: 52px; flex: none; }
.rb-hoved h1 { font-size: 26px; }
.rb-hoved small { color: var(--marine-2); font-size: 14px; }

.rb-traad { display: grid; gap: 10px; }
.rb-b { display: flex; gap: 8px; align-items: flex-end; max-width: 92%; }
.rb-b.mig { justify-self: end; }
.rb-b.buddy { justify-self: start; }
.rb-ikon { flex: none; width: 34px; height: 34px; }
.rb-ikon .buddy-fig { width: 34px; height: 34px; }
.rb-indhold { background: var(--hvid); border-radius: 18px 18px 18px 6px; padding: 10px 14px; box-shadow: var(--skygge); min-width: 0; }
.rb-b.mig .rb-indhold { background: var(--blaa); color: var(--hvid); border-radius: 18px 18px 6px 18px; }
.rb-indhold p { margin: 0; font-size: 15.5px; line-height: 1.45; }
.rb-knapper { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.rb-knapper .knap { min-height: 38px; padding: 0 14px; font-size: 14.5px; }

/* Programmet eller dagens pas i boblen. */
.rb-kort { display: grid; gap: 8px; margin-top: 10px; }
.rb-dag { background: var(--himmel); border-radius: var(--r-s); padding: 8px 12px; }
.rb-dag b { display: block; font-family: var(--display); font-size: 15px; margin-bottom: 2px; }
.rb-dag ol, .rb-liste { margin: 0; padding-left: 20px; display: grid; gap: 2px; font-size: 14px; }
.rb-dag li span, .rb-liste li span { color: var(--marine-2); font-size: 13px; }
.rb-liste { margin-top: 8px; }
/* Øvelsens navn i et svar kan trykkes på ("Sådan"-arket, 12-11-2026). */
.rb-oev { cursor: pointer; font-weight: 600; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--blaa) 45%, transparent); text-underline-offset: 3px; }
.rb-liste .rb-oev { font-weight: 700; }
@media (hover: hover) { .rb-oev:hover { color: var(--blaa); } }
.rb-indhold .ep-kurve { margin-top: 10px; }

.rb-bud { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.rb-bud .chip { min-height: 36px; font-size: 14px; }

/* Skrivefeltet står fast over fanerne, så det altid er lige ved tommelfingeren. */
.rb-felt {
    position: fixed; left: 0; right: 0; bottom: calc(var(--bund) + 8px); z-index: 25; margin: 0 auto; max-width: 680px;
    display: flex; gap: 8px; align-items: center; padding: 0 18px;
}
.rb-felt input {
    flex: 1; min-width: 0; height: 52px; border: 0; border-radius: 999px; padding: 0 18px; background: var(--hvid);
    box-shadow: 0 8px 24px rgba(21, 70, 214, .16); font: 500 16px var(--tekst); color: var(--marine);
}
.rb-send, .rb-mikro { flex: none; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; box-shadow: 0 8px 24px rgba(21, 70, 214, .16); }
.rb-send { background: var(--blaa); color: var(--hvid); }
.rb-mikro { background: var(--hvid); color: var(--blaa-dyb); }
.rb-send svg, .rb-mikro svg { width: 22px; height: 22px; }
.rb-mikro.lytter { background: var(--roed, #e5484d); color: var(--hvid); animation: rb-puls 1.2s ease-in-out infinite; }
@keyframes rb-puls { 50% { transform: scale(1.08); } }
@media (prefers-reduced-motion: reduce) { .rb-mikro.lytter { animation: none; } }
@media (min-width: 920px) { .rb-felt { bottom: 20px; left: 232px; } .rb-side { padding-bottom: 110px; } }
/* Når samtalen rulles til seneste svar, skal knapperne stå over skrivefeltet, ikke bag det. */
.rb-b { scroll-margin-bottom: calc(var(--bund) + 92px); }
@media (min-width: 920px) { .rb-b { scroll-margin-bottom: 96px; } }
/* Opus tænker: tre prikker i en Buddy-boble. */
.rb-prikker { display: flex; gap: 5px; padding: 6px 2px; }
.rb-prikker i { width: 7px; height: 7px; border-radius: 50%; background: var(--marine-3); animation: rb-prik 1s ease-in-out infinite; }
.rb-prikker i:nth-child(2) { animation-delay: .15s; }
.rb-prikker i:nth-child(3) { animation-delay: .3s; }
@keyframes rb-prik { 50% { transform: translateY(-4px); opacity: .5; } }
@media (prefers-reduced-motion: reduce) { .rb-prikker i { animation: none; } }