/* TEKST-MENUEN — hjulet og chat-vinduet. Hoerer til public/tekstmenu.js. * * Begge flader er MOERKE og bliver det. De laante farverne fra trin 4 dengang trinnet selv var * moerkt; trinnet blev lyst igen 11. august 2026, men de to her er ikke en del af siden: hjulet * er en kontekstmenu og chatten et vindue over et naesten sort slaer. En moerk menu paa en lys * side er husets sprog i forvejen — en lys menu paa en lys side ville flyde sammen med den. * * Vaerdierne staar som literaler, ét sted: begge flader haenger paa for at kunne ligge * over alt, og dér findes trinnets --bs-*-variabler ikke. */ .tm-lag { position: fixed; inset: 0; z-index: 400; --tm-linje: rgba(255,255,255,.11); --tm-flade: rgba(255,255,255,.055); --tm-flade2: rgba(255,255,255,.09); --tm-svag: rgba(242,237,240,.55); --tm-ink: #F2EDF0; --tm-accent: #FF4D8D; --tm-paa-accent: #141018; --tm-bund: #141018; } /* ── Hjulet ────────────────────────────────────────────────────────────────────────────────── */ .tm-hjul { position: absolute; animation: tmind .16s cubic-bezier(.2,.7,.3,1) both; } @keyframes tmind { from { opacity: 0; transform: scale(.82); } to { opacity: 1; transform: none; } } .tm-hjul svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } .tm-stk { cursor: pointer; } .tm-ring { fill: rgba(255,255,255,.06); } .tm-kage { fill: #1A1620; stroke: var(--tm-linje); stroke-width: 1; } .tm-stk.on .tm-kage { fill: #3A1526; stroke: var(--tm-accent); } .tm-stk.on .tm-ring { fill: rgba(255,77,141,.3); } .tm-ik { fill: none; stroke: var(--tm-svag); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; } .tm-stk.on .tm-ik { stroke: var(--tm-ink); } .tm-midt { fill: var(--tm-bund); stroke: var(--tm-linje); stroke-width: 1; } /* Midten siger hvad man er ved at vaelge OG hvad det rammer. Uden anden linje kan man ikke se om rettelsen gaelder det markerede eller hele teksten, og det er hele pointen med markeringen. */ .tm-navn { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; pointer-events: none; text-align: center; padding: 0 54px; } .tm-navn b { font-size: 13px; font-weight: 600; color: var(--tm-ink); line-height: 1.2; } .tm-navn small { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--tm-svag); } /* ── Chat-vinduet ─────────────────────────────────────────────────────────────────────────── */ .tm-modal { background: rgba(10,7,12,.62); display: flex; align-items: center; justify-content: center; padding: 24px; } @supports (backdrop-filter: blur(2px)) { .tm-modal { backdrop-filter: blur(3px); } } .tm-vindue { width: min(660px, 100%); max-height: min(82vh, 760px); display: flex; flex-direction: column; border: 1px solid var(--tm-linje); border-radius: var(--r-kort); color: var(--tm-ink); background: radial-gradient(90% 70% at 12% 0%, rgba(255,77,141,.07), transparent 62%), linear-gradient(160deg,#1A1620 0%,#141018 58%,#0E0B12 100%); box-shadow: 0 40px 90px -30px rgba(0,0,0,.9); animation: tmop .2s cubic-bezier(.2,.7,.3,1) both; } @keyframes tmop { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } } .tm-vindue header { display: flex; align-items: center; gap: 11px; padding: 15px 16px 13px; border-bottom: 1px solid var(--tm-linje); flex: none; } .tm-bot { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,77,141,.16); color: var(--tm-accent); } .tm-bot svg { width: 17px; height: 17px; } .tm-hd { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .tm-hd b { font-size: 13.5px; font-weight: 600; color: var(--tm-ink); } .tm-hd span { font-size: 11.5px; color: var(--tm-svag); } .tm-luk { border: 0; background: transparent; color: var(--tm-svag); font-size: 15px; cursor: pointer; line-height: 1; padding: 5px 7px; border-radius: var(--r-knap); flex: none; } .tm-luk:hover { color: var(--tm-ink); background: var(--tm-flade); } /* PLANEN. Det er DEN der genereres ud fra, ikke samtalen — derfor staar den fast oeverst og ikke som en besked man skal rulle tilbage for at finde. Agenten sender hele planen ved hver tur, saa panelet altid viser den aktuelle. */ .tm-plan { flex: none; margin: 12px 16px 0; padding: 11px 13px; border-radius: var(--r-knap); border: 1px solid rgba(255,77,141,.24); background: rgba(255,77,141,.07); } .tm-plan[hidden] { display: none; } .tm-plan .tm-kick { color: var(--tm-accent); margin-bottom: 5px; } .tm-plan p { margin: 0; font-size: 12.5px; line-height: 1.6; color: var(--tm-ink); white-space: pre-wrap; } .tm-log { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 16px 4px; display: flex; flex-direction: column; gap: 8px; } /* Beskederne ligger nede ved skrivefeltet. margin-top:auto og IKKE justify-content:flex-end — den sidste goer toppen uopnaaelig naar traaden loeber over. Samme faelde som i samtalen. */ .tm-log > *:first-child { margin-top: auto; } .tm-tom { margin: auto 0 0; font-size: 12.5px; line-height: 1.6; color: var(--tm-svag); } /* "Planlaeggeren skriver": prikkerne i agentens egen boble, samme sted som svaret lander. */ .tm-skriver { display: inline-flex; align-items: center; padding: 11px 13px; } .tm-skriver svg { width: 26px; height: 13px; color: var(--tm-svag); } .tm-bund { flex: none; padding: 12px 16px 16px; display: flex; flex-direction: column; gap: 10px; } .tm-skriv { display: flex; gap: 8px; align-items: center; border: 1px solid var(--tm-linje); border-radius: var(--r-knap); background: var(--tm-bund); padding: 5px 5px 5px 13px; transition: border-color .15s; } .tm-skriv:focus-within { border-color: var(--tm-accent); } .tm-skriv input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 12.5px; color: var(--tm-ink); padding: 8px 0; } .tm-skriv input::placeholder { color: var(--tm-svag); } .tm-send { flex: none; width: 32px; height: 32px; border: 0; border-radius: var(--r-knap); cursor: pointer; background: var(--tm-accent); color: var(--tm-paa-accent); display: grid; place-items: center; } .tm-send svg { width: 15px; height: 15px; } .tm-send:hover:not(:disabled) { opacity: .9; } /* GENERÉR er det eneste sted teksten bliver roert. Den staar for sig, i fuld bredde, som den handling man forlader vinduet paa. Lys pille paa moerk bund, som "Gem opslag". */ .tm-gen { width: 100%; padding: 12px; border: 0; border-radius: var(--r-knap); cursor: pointer; background: var(--tm-ink); color: #141018; font: inherit; font-size: 13px; font-weight: 600; transition: opacity .15s; } .tm-gen:hover:not(:disabled) { opacity: .88; } .tm-gen:disabled, .tm-send:disabled, .tm-skriv input:disabled { opacity: .38; cursor: default; } /* ── "Den tænker": prikkerne i tekstfeltet ────────────────────────────────────────────────── Prikkerne ligger som et lag OVER tekstfeltet, paa den position hvor teksten forsvandt — en