/* ================= DESIGN.md-tokens (Fase D) ================= Designkontrakten er DESIGN.md §3–4. ALT synligt styles via --cc-*-tokens. Lys ("Daylight") er default. Mørk ("Midnight") aktiveres af data-theme="dark" på (brugerens valg på profilen) ELLER af enhedens prefers-color-scheme når intet valg er truffet (Auto = ingen data-theme-attribut). data-theme="light" låser lys. De gamle var-navne (--bg, --accent, …) er ALIASER for --cc-*-tokens, så endnu-ikke-omstylede komponenter følger paletten automatisk. */ :root { color-scheme: light; /* -- DESIGN.md §3: Light ("Saga Daylight" — violet accent) -- */ --cc-bg-app: #F5F4F8; --cc-bg-sidebar: #FFFFFF; --cc-bg-chat: #EBE8F1; --cc-bg-elevated: #FFFFFF; --cc-bubble-in: #FFFFFF; --cc-bubble-out: #EDE6FF; --cc-text: #141019; --cc-text-secondary: #5E5A6B; /* Trin 43: meta-tekst (11px tidsstempler) INDE i den udgående boble — skal holde AA 4.5:1 mod --cc-bubble-out i BEGGE temaer (håndhævet af ThemeContrastTests). Light: sekundærteksten klarer det selv. */ --cc-meta-on-out: var(--cc-text-secondary); --cc-accent: #6A35E8; --cc-accent-hover: #5A2BC9; --cc-danger: #C93434; --cc-success: #2E9E48; --cc-gold: #B45309; --cc-border: #E5E2EC; --cc-unread: #6A35E8; --cc-on-unread: #FFFFFF; --cc-ai-grad: linear-gradient(135deg, #7C5CFF, #B24BF3); --cc-ai-ink: #6847F0; --cc-ai-soft: #F1ECFF; --cc-ai-border: #D9CCFF; --cc-wallpaper: url("wallpaper-light.svg"); /* -- Afledte flader (samme palet — tint/soft-trin til hover, chips…) -- */ --cc-hover: rgba(20, 16, 25, .05); --cc-accent-soft: #EFE9FE; --cc-accent-soft-hover: #E4DAFC; --cc-accent-border: #CBB7F6; --cc-danger-soft: #FDEEEE; --cc-danger-border: #F3C4C4; --cc-success-soft: #E4F5E9; --cc-success-ink: #1E7434; --cc-warn-soft: #FDF3DC; --cc-warn-ink: #8A5A00; --cc-warn-border: #EFD9A2; --cc-highlight: #FDE68A; --cc-code-bg: #EEEBF3; --cc-on-accent: #FFFFFF; --cc-scrim: rgba(20, 16, 25, .55); /* Afsender-navnefarver i chatten — mørke nuancer af avatar-gradienterne (AA-læsbare på lyse bobler); nr. følger InitialAvatar.GradientIndex. */ --cc-ink-1: #C93A50; --cc-ink-2: #B26612; --cc-ink-3: #5F58EA; --cc-ink-4: #2E8B45; --cc-ink-5: #12897A; --cc-ink-6: #1D7EC9; --cc-ink-7: #B23FC9; /* Aktiv rum-række (DESIGN.md §5): light = accent-flade m. hvid tekst. */ --cc-active-row-bg: var(--cc-accent); --cc-active-row-text: #FFFFFF; --cc-active-row-meta: rgba(255, 255, 255, .8); --cc-active-row-ring: transparent; --cc-active-unread-bg: #FFFFFF; --cc-active-unread-text: var(--cc-accent); /* -- DESIGN.md §4+§6: form, elevation & motion (temauafhængige) -- */ --cc-font: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; --cc-radius-bubble: 16px; --cc-radius-tail: 6px; --cc-radius-card: 12px; --cc-radius-pill: 9999px; --cc-radius-input: 18px; --cc-radius-btn: 10px; --cc-shadow: 0 1px 2px rgb(0 0 0 / .06); --cc-shadow-float: 0 6px 24px rgb(0 0 0 / .12); --cc-ease: cubic-bezier(.2, .8, .4, 1); --cc-t: 150ms var(--cc-ease); /* -- Aliaser: gammelt navn → nyt token (udfases trin for trin) -- */ --bg: var(--cc-bg-app); --surface: var(--cc-bg-elevated); --surface-alt: var(--cc-bg-chat); --surface-soft: var(--cc-bg-app); --surface-muted: var(--cc-bg-app); --text: var(--cc-text); --muted: var(--cc-text-secondary); --faint: #8B8799; --border: var(--cc-border); --input-border: #CDC7D8; --link: var(--cc-accent); --accent: var(--cc-accent); --accent-hover: var(--cc-accent-hover); --on-accent: var(--cc-on-accent); --accent-soft: var(--cc-accent-soft); --accent-soft-hover: var(--cc-accent-soft-hover); --accent-border: var(--cc-accent-border); --accent-faint: #F9F7FE; --accent-faint-hover: #F0EBFC; --mine: var(--cc-bubble-out); --highlight: var(--cc-highlight); --danger: var(--cc-danger); --danger-strong: var(--cc-danger); --danger-soft: var(--cc-danger-soft); --danger-border: var(--cc-danger-border); --warn-soft: var(--cc-warn-soft); --warn-text: var(--cc-warn-ink); --warn-border: var(--cc-warn-border); --success: var(--cc-success); --success-ink: var(--cc-success-ink); --success-text: #1E6B31; --success-soft: var(--cc-success-soft); --online: var(--cc-success); --appt-ink: var(--cc-ai-ink); --appt-soft: #F3F0FF; --appt-border: #D5C9F8; --code-bg: var(--cc-code-bg); --code-border: var(--cc-border); } /* R11 — Secret rooms. Plaintext nodes below are created exclusively by e2ee.js in the browser; Blazor only renders this non-secret chrome. */ .secret-wrap { min-height: 100dvh; background: var(--cc-chat-bg); display: flex; flex-direction: column; } .secret-header { position: sticky; top: 0; z-index: 4; } .secret-intro, .secret-safety { margin: 12px auto 0; width: min(760px, calc(100% - 24px)); background: var(--cc-surface); border: 1px solid var(--cc-border); border-radius: var(--cc-radius-lg); padding: 14px 16px; box-shadow: var(--cc-shadow-sm); } .secret-intro { border-top: 3px solid var(--cc-accent); } .secret-intro p, .secret-safety p { color: var(--cc-text-muted); margin: 8px 0 0; font-size: .9rem; } .secret-safety summary { color: var(--cc-accent-text); font-weight: 650; cursor: pointer; } .secret-safety ul { padding-left: 18px; font: .75rem ui-monospace, monospace; overflow-wrap: anywhere; } .secret-device { margin-block: 6px; } .secret-device.pending { color: var(--cc-warning-text, var(--cc-text)); } .secret-device.invalid { color: var(--cc-danger); font-weight: 700; } .secret-approve { margin: 6px 0 0 8px; padding: 5px 9px; color: var(--cc-accent-text); background: var(--cc-accent-soft); border: 1px solid var(--cc-accent-border); border-radius: var(--cc-radius-pill); font: inherit; cursor: pointer; } .secret-local-search { width: min(760px, calc(100% - 24px)); margin: 12px auto 0; color: var(--cc-text-muted); font-size: .82rem; } .secret-local-search input { display: block; width: 100%; margin-top: 5px; padding: 10px 13px; color: var(--cc-text); background: var(--cc-surface); border: 1px solid var(--cc-border); border-radius: var(--cc-radius-pill); } .secret-messages { width: min(760px, calc(100% - 24px)); margin: 14px auto; flex: 1; display: flex; flex-direction: column; gap: 7px; } .secret-message { max-width: min(78%, 560px); padding: 8px 11px 6px; border-radius: var(--cc-radius-lg); box-shadow: var(--cc-shadow-sm); overflow-wrap: anywhere; } .secret-message.theirs { align-self: flex-start; background: var(--cc-bubble-in); border-bottom-left-radius: 5px; } .secret-message.mine { align-self: flex-end; background: var(--cc-bubble-out); border-bottom-right-radius: 5px; } .secret-author { color: var(--cc-accent-text); font-size: .75rem; font-weight: 700; } .secret-text { color: var(--cc-text); white-space: pre-wrap; margin: 2px 0; } .secret-time { display: block; color: var(--cc-text-muted); font-size: .68rem; text-align: right; } .secret-empty { align-self: center; color: var(--cc-text-muted); background: var(--cc-surface); border-radius: var(--cc-radius-pill); padding: 7px 12px; } .secret-error { width: min(760px, calc(100% - 24px)); margin: 0 auto; color: var(--cc-danger); min-height: 1.5em; } .secret-composer { position: sticky; bottom: 0; width: min(780px, 100%); margin: auto auto 0; display: flex; gap: 8px; padding: 10px 12px max(10px, env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--cc-chat-bg) 88%, transparent); backdrop-filter: blur(10px); } .secret-composer textarea { flex: 1; resize: none; min-height: 44px; max-height: 140px; padding: 11px 15px; color: var(--cc-text); background: var(--cc-surface); border: 1px solid var(--cc-border); border-radius: var(--cc-radius-pill); } .secret-composer button { width: 44px; height: 44px; border: 0; border-radius: 50%; color: white; background: var(--cc-accent); display: grid; place-items: center; } .secret-composer :disabled { opacity: .55; cursor: not-allowed; } .secret-create-warning { padding: 10px 12px; background: var(--cc-warning-soft); color: var(--cc-text); border: 1px solid var(--cc-warning); border-radius: var(--cc-radius-md); font-size: .86rem; } .secret-create-warning label { display: block; margin-top: 8px; font-weight: 650; } @media (max-width: 640px) { .secret-message { max-width: 88%; } .secret-intro, .secret-safety { padding: 12px; } } /* Mørke token-værdier ("Saga Midnight" — dyb nat-violet, ikke sort). Delt af data-theme="dark" og Auto-på-mørk-enhed (blokken nedenfor). */ html[data-theme="dark"] { color-scheme: dark; --cc-bg-app: #131022; --cc-bg-sidebar: #1A1630; --cc-bg-chat: #131022; --cc-bg-elevated: #241E3D; --cc-bubble-in: #1E1936; --cc-bubble-out: #46337E; --cc-text: #F1EFF9; --cc-text-secondary: #9A92B5; --cc-meta-on-out: #BAB2D2; --cc-accent: #A78BFA; --cc-accent-hover: #C4B5FD; --cc-danger: #F05D5D; --cc-success: #4CC366; --cc-gold: #F0A93C; --cc-border: #2E2749; --cc-unread: #A78BFA; --cc-on-unread: #131022; --cc-ai-grad: linear-gradient(135deg, #8E7BFF, #C46BF5); --cc-ai-ink: #A995FF; --cc-ai-soft: rgba(142, 123, 255, .14); --cc-ai-border: rgba(142, 123, 255, .42); --cc-wallpaper: url("wallpaper-dark.svg"); --cc-hover: rgba(255, 255, 255, .05); --cc-accent-soft: #322558; --cc-accent-soft-hover: #3C2D6A; --cc-accent-border: #53418D; --cc-danger-soft: #3A2026; --cc-danger-border: #6B3540; --cc-success-soft: #16311F; --cc-success-ink: #4ADE80; --cc-warn-soft: #33290F; --cc-warn-ink: #E8B968; --cc-warn-border: #6B5A1E; --cc-highlight: #6B5518; --cc-code-bg: #221C3C; --cc-on-accent: #131022; --cc-scrim: rgba(0, 0, 0, .65); --cc-ink-1: #FF8A9B; --cc-ink-2: #FFC680; --cc-ink-3: #9FB4FF; --cc-ink-4: #7FDE93; --cc-ink-5: #55E0CB; --cc-ink-6: #7CCBFA; --cc-ink-7: #EBA6F8; /* Aktiv rum-række: dark = elevated flade m. accent-kant (DESIGN.md §5). */ --cc-active-row-bg: var(--cc-bg-elevated); --cc-active-row-text: var(--cc-text); --cc-active-row-meta: var(--cc-text-secondary); --cc-active-row-ring: var(--cc-accent); --cc-active-unread-bg: var(--cc-unread); --cc-active-unread-text: var(--cc-on-unread); --cc-shadow: 0 1px 2px rgb(0 0 0 / .25); --cc-shadow-float: 0 6px 24px rgb(0 0 0 / .45); --faint: #6E668C; --input-border: #3A3160; --accent-faint: #1A142F; --accent-faint-hover: #221B3D; --success-text: #86EFAC; --appt-soft: #2A2440; --appt-border: #4C3E7A; --surface-alt: var(--cc-bubble-in); --surface-soft: var(--cc-bg-sidebar); --surface-muted: var(--cc-bg-sidebar); } @media (prefers-color-scheme: dark) { html:not([data-theme="light"]):not([data-theme="dark"]) { color-scheme: dark; --cc-bg-app: #131022; --cc-bg-sidebar: #1A1630; --cc-bg-chat: #131022; --cc-bg-elevated: #241E3D; --cc-bubble-in: #1E1936; --cc-bubble-out: #46337E; --cc-text: #F1EFF9; --cc-text-secondary: #9A92B5; --cc-meta-on-out: #BAB2D2; --cc-accent: #A78BFA; --cc-accent-hover: #C4B5FD; --cc-danger: #F05D5D; --cc-success: #4CC366; --cc-gold: #F0A93C; --cc-border: #2E2749; --cc-unread: #A78BFA; --cc-on-unread: #131022; --cc-ai-grad: linear-gradient(135deg, #8E7BFF, #C46BF5); --cc-ai-ink: #A995FF; --cc-ai-soft: rgba(142, 123, 255, .14); --cc-ai-border: rgba(142, 123, 255, .42); --cc-wallpaper: url("wallpaper-dark.svg"); --cc-hover: rgba(255, 255, 255, .05); --cc-accent-soft: #322558; --cc-accent-soft-hover: #3C2D6A; --cc-accent-border: #53418D; --cc-danger-soft: #3A2026; --cc-danger-border: #6B3540; --cc-success-soft: #16311F; --cc-success-ink: #4ADE80; --cc-warn-soft: #33290F; --cc-warn-ink: #E8B968; --cc-warn-border: #6B5A1E; --cc-highlight: #6B5518; --cc-code-bg: #221C3C; --cc-on-accent: #131022; --cc-scrim: rgba(0, 0, 0, .65); --cc-ink-1: #FF8A9B; --cc-ink-2: #FFC680; --cc-ink-3: #9FB4FF; --cc-ink-4: #7FDE93; --cc-ink-5: #55E0CB; --cc-ink-6: #7CCBFA; --cc-ink-7: #EBA6F8; --cc-active-row-bg: var(--cc-bg-elevated); --cc-active-row-text: var(--cc-text); --cc-active-row-meta: var(--cc-text-secondary); --cc-active-row-ring: var(--cc-accent); --cc-active-unread-bg: var(--cc-unread); --cc-active-unread-text: var(--cc-on-unread); --cc-shadow: 0 1px 2px rgb(0 0 0 / .25); --cc-shadow-float: 0 6px 24px rgb(0 0 0 / .45); --faint: #6E668C; --input-border: #3A3160; --accent-faint: #1A142F; --accent-faint-hover: #221B3D; --success-text: #86EFAC; --appt-soft: #2A2440; --appt-border: #4C3E7A; --surface-alt: var(--cc-bubble-in); --surface-soft: var(--cc-bg-sidebar); --surface-muted: var(--cc-bg-sidebar); } } html, body { font-family: var(--cc-font); background: var(--bg); color: var(--text); } /* P20/C4: native checkboxes/radios/sliders må ALDRIG rendere browser-blå — accent-token overalt, så ingen enkeltside kan glemme det. */ input[type="checkbox"], input[type="radio"], input[type="range"], progress { accent-color: var(--cc-accent); } /* R12 tekststørrelse: skalerer roden, så alle rem-baserede mål følger med. */ html[data-textsize="small"] { font-size: 87.5%; } html[data-textsize="large"] { font-size: 112.5%; } /* R12(b) moderationsoverblik. */ .admin-mod-list { list-style: none; margin: .35rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .55rem; } .admin-mod-row { display: flex; flex-direction: column; gap: .1rem; border-left: 3px solid var(--border); padding-left: .6rem; } .admin-mod-meta { color: var(--faint); font-size: .8rem; } .admin-mod-text { font-size: .9rem; word-break: break-word; } /* R12 samlet indstillingsside. */ .settings-h { font-size: 1.05rem; margin: 0 0 .35rem; } .settings-room-list { list-style: none; margin: .35rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; } .settings-room-row { display: flex; align-items: center; gap: .6rem; } .settings-room-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .settings-room-mode { max-width: 14rem; } a { color: var(--link); } /* DESIGN.md §2.5: synlig focus-ring på alt interaktivt (2px accent, offset 2px). */ :where(button, a, input, select, textarea, label.attach-btn, [role="button"]):focus-visible { outline: 2px solid var(--cc-accent); outline-offset: 2px; } h1:focus { outline: none; } /* ================= App-skal (DESIGN.md §5) ================= Desktop (≥900px): rum-liste 320px fast venstre, indholdet fylder resten. Mobil (<900px): rum-listen ER forsiden (route-home); alle andre ruter er fuldskærm med ←-tilbage i deres header. Ingen hamburger-menu. */ .app-shell { display: flex; height: 100vh; height: 100dvh; background: var(--cc-bg-app); overflow: hidden; } .app-sidebar { width: 320px; flex-shrink: 0; display: flex; flex-direction: column; min-height: 0; background: var(--cc-bg-sidebar); border-right: 1px solid var(--cc-border); } .app-main { flex: 1; min-width: 0; overflow-y: auto; } /* ---- Rum-liste (Telegram-anatomien, DESIGN.md §5) ---- */ .rl-pane { position: relative; display: flex; flex-direction: column; height: 100%; min-height: 0; } .rl-header { display: flex; align-items: center; gap: .3rem; padding: .6rem .75rem .3rem; } /* Saga-wordmark (DESIGN.md §8): logo 24px + 700-wordmark m. ✦ i accent. */ .rl-brand { display: inline-flex; align-items: center; gap: .38rem; font-size: 17px; font-weight: 700; letter-spacing: -0.5px; color: var(--cc-text); text-decoration: none; margin-right: auto; } .rl-logo { width: 24px; height: 24px; } .rl-spark { color: var(--cc-accent); font-size: .62rem; align-self: flex-start; margin: .1rem 0 0 -.15rem; } .rl-iconbtn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 2.3rem; height: 2.3rem; border: 0; border-radius: 50%; background: transparent; color: var(--cc-text-secondary); cursor: pointer; text-decoration: none; transition: background var(--cc-t), color var(--cc-t); } .rl-iconbtn:hover { background: var(--cc-hover); color: var(--cc-text); } .rl-bell-badge { position: absolute; top: 1px; right: -2px; background: var(--cc-danger); color: #fff; font-size: .6rem; font-weight: 700; border-radius: var(--cc-radius-pill); padding: .1rem .3rem; min-width: 1rem; text-align: center; } /* Sol/måne-toggle: viser månen i lys tilstand og solen i mørk (også Auto). */ .theme-toggle .tt-sun { display: none; } .theme-toggle .tt-moon { display: inline-flex; } html[data-theme="dark"] .theme-toggle .tt-sun { display: inline-flex; } html[data-theme="dark"] .theme-toggle .tt-moon { display: none; } @media (prefers-color-scheme: dark) { html:not([data-theme="light"]):not([data-theme="dark"]) .theme-toggle .tt-sun { display: inline-flex; } html:not([data-theme="light"]):not([data-theme="dark"]) .theme-toggle .tt-moon { display: none; } } .rl-search { display: flex; align-items: center; gap: .5rem; margin: .35rem .75rem .55rem; padding: .48rem .85rem; border-radius: var(--cc-radius-pill); background: var(--cc-bg-app); color: var(--cc-text-secondary); font-size: 14px; text-decoration: none; border: 1px solid transparent; transition: border-color var(--cc-t); } /* P23: søgefeltet er en button (faneskift må ikke gå gennem router-links) — stræk den som anchor-udgaven i sidebarens kolonne-flex. */ button.rl-search { align-self: stretch; cursor: pointer; font-family: inherit; text-align: left; } .rl-search:hover { border-color: var(--cc-accent); } .rl-rooms { flex: 1; overflow-y: auto; padding: 0 .4rem .5rem; display: flex; flex-direction: column; gap: 1px; } .rl-room { display: flex; gap: .65rem; align-items: center; padding: .45rem .55rem; border-radius: var(--cc-radius-card); text-decoration: none; color: var(--cc-text); transition: background var(--cc-t); } .rl-room:hover { background: var(--cc-hover); } .rl-room.active { background: var(--cc-active-row-bg); color: var(--cc-active-row-text); box-shadow: inset 0 0 0 1px var(--cc-active-row-ring); } .rl-room.active .rl-snippet, .rl-room.active .rl-time { color: var(--cc-active-row-meta); } .rl-room.active .rl-unread { background: var(--cc-active-unread-bg); color: var(--cc-active-unread-text); } .rl-avatar { position: relative; width: 54px; height: 54px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 600; } .rl-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; } .rl-avatar-emoji { font-size: 26px; } .rl-avatar-initial { font-size: 19px; } .rl-online { position: absolute; right: 1px; bottom: 1px; width: 12px; height: 12px; border-radius: 50%; background: var(--cc-success); box-shadow: 0 0 0 2px var(--cc-bg-sidebar); } .rl-room-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .12rem; } .rl-room-top { display: flex; align-items: baseline; gap: .5rem; } .rl-room-name { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; } .rl-lock { font-size: 12px; margin-right: .15rem; } .rl-time { font-size: 13px; color: var(--cc-text-secondary); flex-shrink: 0; } .rl-room-bottom { display: flex; align-items: center; gap: .5rem; } .rl-snippet { flex: 1; min-width: 0; font-size: 13px; color: var(--cc-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rl-unread { flex-shrink: 0; min-width: 1.35rem; height: 1.35rem; padding: 0 .38rem; border-radius: var(--cc-radius-pill); background: var(--cc-unread); color: var(--cc-on-unread); font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; } /* P18: mobil bund-bar — KUN 3 faner (Chats · Søg · Menu). Desktop har ingen bund-bar; dér bor menuen på avataren øverst i sidebaren. */ .rl-tabbar { display: flex; gap: .25rem; border-top: 1px solid var(--cc-border); padding: .3rem .5rem calc(.3rem + env(safe-area-inset-bottom, 0px)); } .rl-tab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: .14rem; padding: .35rem .25rem; border: 0; background: none; cursor: pointer; border-radius: var(--cc-radius-btn); color: var(--cc-text-secondary); font-size: 11px; font-weight: 600; text-decoration: none; transition: background var(--cc-t), color var(--cc-t); } .rl-tab:hover { background: var(--cc-hover); color: var(--cc-text); } .rl-tab.active { color: var(--cc-accent); } .rl-tab-avatar { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; } @media (min-width: 900px) { .rl-tabbar { display: none; } } /* P18: avatar-menu-knappen øverst (desktop) — mobilens indgang er bund-baren. */ .rl-avatar-btn { border: 0; background: none; padding: 0; cursor: pointer; width: 2rem; height: 2rem; border-radius: 50%; flex-shrink: 0; } .rl-avatar-btn img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; } .rl-avatar-btn:hover { filter: brightness(.95); } @media (max-width: 899px) { .rl-avatar-btn { display: none; } } /* P18: ✏️-FAB — ny chat/rum. Ligger over listen, nederst til højre. */ .rl-fab { position: absolute; right: 1rem; bottom: 1rem; z-index: 40; width: 3.4rem; height: 3.4rem; border: 0; border-radius: 50%; cursor: pointer; background: var(--cc-accent); color: var(--cc-on-accent); display: inline-flex; align-items: center; justify-content: center; box-shadow: var(--cc-shadow-float); transition: filter var(--cc-t), transform 120ms var(--cc-ease); } .rl-fab:hover { filter: brightness(1.08); transform: scale(1.04); } @media (max-width: 899px) { .rl-fab { bottom: calc(4.4rem + env(safe-area-inset-bottom, 0px)); } } /* P18: menu-arket (avatar/Menu-fanen) og "Ny"-arket. På mobil er de bottom- sheets; på desktop flyder de som popovers (arket er display:contents dér) — konto-menuen under avataren, Ny-menuen over FAB'en. */ .rl-menu { min-width: 15rem; } @media (min-width: 900px) { .rl-menu { position: absolute; z-index: 60; background: var(--cc-bg-elevated); border: 1px solid var(--cc-border); border-radius: var(--cc-radius-card); box-shadow: var(--cc-shadow-float); overflow: hidden; animation: cc-pop 140ms var(--cc-ease); } .rl-menu-account { top: 3.1rem; right: .5rem; } .rl-menu-new { bottom: 4.8rem; right: 1rem; } } .rl-menu .press-item { position: relative; } .rl-menu-head { display: flex; align-items: center; gap: .65rem; padding: .6rem .85rem; text-decoration: none; color: var(--cc-text); border-bottom: 1px solid var(--cc-border); } .rl-menu-head img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; } .rl-menu-name { font-size: 15px; font-weight: 700; } .rl-menu-badge { margin-left: auto; font-size: 12px; color: var(--cc-text-secondary); } .rl-menu-sep { height: 1px; margin: .25rem 0; background: var(--cc-border); } /* P22: FAB/menu → rigtig samtale-/rum-wizard. Samme indhold bliver en bred, forankret popover på desktop og et scrollbart bottom-sheet på mobil. */ .rl-create-flow { width: min(25rem, 100%); padding: 0; overflow: hidden; } .rl-create-head { display: flex; align-items: flex-start; gap: .55rem; padding: .85rem .9rem .7rem; border-bottom: 1px solid var(--cc-border); } .rl-create-head > div { flex: 1; min-width: 0; display: flex; flex-direction: column; } .rl-create-head h2 { margin: 0; font-size: 1.08rem; } .rl-create-head p { margin: .14rem 0 0; font-size: .78rem; color: var(--cc-text-secondary); } .rl-create-back { width: 2rem; height: 2rem; padding: 0; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: transparent; color: var(--cc-text-secondary); cursor: pointer; } .rl-create-back:hover { background: var(--cc-hover); color: var(--cc-text); } .rl-create-choices { display: flex; flex-direction: column; padding: .35rem; } .rl-create-choice { display: grid; grid-template-columns: 2.65rem 1fr auto; align-items: center; gap: .65rem; padding: .65rem; border: 0; border-radius: var(--cc-radius-btn); background: transparent; color: var(--cc-text); font: inherit; text-align: left; cursor: pointer; } .rl-create-choice:hover { background: var(--cc-hover); } .rl-create-choice-icon { width: 2.65rem; height: 2.65rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--cc-accent-soft); color: var(--cc-accent); font-size: 1.15rem; } .rl-create-choice > span:nth-child(2), .rl-known-person > span:nth-child(2), .rl-create-check > span { min-width: 0; display: flex; flex-direction: column; gap: .08rem; } .rl-create-choice strong, .rl-known-person strong { font-size: .9rem; } .rl-create-choice small, .rl-known-person small, .rl-create-check small { color: var(--cc-text-secondary); font-size: .73rem; } .rl-create-body { display: flex; flex-direction: column; gap: .55rem; padding: .75rem .9rem .9rem; } .rl-create-label { color: var(--cc-text-secondary); font-size: .72rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; } .rl-create-body .text-field, .rl-create-body select { width: 100%; min-width: 0; padding: .58rem .68rem; border: 1px solid var(--input-border); border-radius: var(--cc-radius-btn); background: var(--cc-bg-elevated); color: var(--cc-text); font: inherit; } .rl-known-list { display: flex; gap: .35rem; overflow-x: auto; padding-bottom: .2rem; scrollbar-width: none; } .rl-known-list::-webkit-scrollbar { display: none; } .rl-known-person { display: flex; align-items: center; gap: .5rem; min-width: 9.5rem; padding: .48rem; border: 1px solid var(--cc-border); border-radius: var(--cc-radius-card); background: var(--cc-bg-elevated); color: var(--cc-text); font: inherit; text-align: left; cursor: pointer; } .rl-known-person:hover { border-color: var(--cc-accent); background: var(--cc-hover); } .rl-known-person img { width: 2.35rem; height: 2.35rem; border-radius: 50%; object-fit: cover; } .rl-person-search { display: grid; grid-template-columns: 1fr auto; gap: .4rem; } .rl-person-search .send-btn { display: inline-flex; align-items: center; gap: .3rem; padding-inline: .8rem; } .rl-found-person { width: 100%; margin-top: .15rem; } .rl-found-open { margin-left: auto; color: var(--cc-accent); font-size: .78rem; white-space: nowrap; } .rl-create-empty { margin: 0; padding: .65rem; border-radius: var(--cc-radius-card); background: var(--cc-hover); color: var(--cc-text-secondary); font-size: .8rem; } .rl-room-identity { display: grid; grid-template-columns: 3.6rem 1fr 4rem; align-items: end; gap: .55rem; } .rl-room-avatar-pick { position: relative; width: 3.6rem; height: 3.6rem; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--cc-accent-soft); color: var(--cc-accent); font-size: 1.5rem; cursor: pointer; } .rl-room-avatar-pick img { width: 100%; height: 100%; object-fit: cover; } .rl-room-avatar-pick input { position: absolute; inset: 0; opacity: 0; cursor: pointer; } .rl-emoji-field { text-align: center; } .rl-create-check { display: flex; align-items: flex-start; gap: .55rem; padding: .55rem .1rem; color: var(--cc-text); font-size: .82rem; cursor: pointer; } .rl-create-check input { margin-top: .16rem; flex: 0 0 auto; } .rl-secret-note { display: flex; flex-direction: column; gap: .18rem; padding: .65rem .7rem; border: 1px solid var(--cc-accent-border); border-radius: var(--cc-radius-card); background: var(--cc-accent-soft); font-size: .8rem; } .rl-secret-note span { color: var(--cc-text-secondary); } .rl-create-submit { width: 100%; margin-top: .2rem; padding: .65rem; } .rl-create-body .send-btn { border: 0; border-radius: var(--cc-radius-btn); background: var(--cc-accent); color: var(--cc-on-accent); font: inherit; font-weight: 700; cursor: pointer; } .rl-create-body .send-btn:hover:not(:disabled) { background: var(--cc-accent-hover); } .rl-create-body .send-btn:disabled { opacity: .48; cursor: default; } .rl-create-error { margin: 0 .9rem .8rem; } @media (min-width: 900px) { .cc-sheet .rl-create-flow { top: auto; right: 1rem; bottom: 4.8rem; width: min(25rem, calc(100% - 2rem)); max-height: min(43rem, calc(100dvh - 6rem)); } } @media (max-width: 899.98px) { .cc-sheet-panel:has(.rl-create-flow) { max-height: 88dvh; } .rl-create-flow { width: 100%; } } /* P25: rum-handlingsarket (long-press/højreklik på et rum). Bottom-sheet på mobil; lille flydende menu øverst i sidebaren på desktop. */ @media (min-width: 900px) { .rl-menu-room { top: 3.4rem; left: .5rem; } } .rl-room-head { gap: .55rem; } .rl-avatar-sm { width: 40px; height: 40px; } .rl-avatar-sm .rl-avatar-emoji { font-size: 20px; } .rl-avatar-sm .rl-avatar-initial { font-size: 15px; } /* P25: rum-liste-indikatorer — lyddæmpet (🔕) i navnelinjen, fastgjort (📌) nederst til højre når rummet ikke har ulæste. */ .rl-mute { display: inline-flex; align-items: center; margin-left: .3rem; color: var(--cc-text-secondary); flex-shrink: 0; } .rl-mute .cc-icon { width: 14px; height: 14px; } .rl-pin { flex-shrink: 0; font-size: 12px; opacity: .7; line-height: 1; } .rl-unread.muted { background: var(--cc-text-secondary); } /* P25: "markér som ulæst" → lille prik uden tal. */ .rl-unread-dot { min-width: .7rem; width: .7rem; height: .7rem; padding: 0; } /* P25: arkiv-sektionen nederst i rum-listen (personligt arkiv, foldet). */ .rl-arch-head { display: flex; align-items: center; gap: .6rem; width: 100%; padding: .7rem .85rem; border: 0; background: none; cursor: pointer; color: var(--cc-text-secondary); font-size: 14px; font-weight: 600; border-radius: var(--cc-radius-btn); transition: background var(--cc-t); } .rl-arch-head:hover { background: var(--cc-hover); } .rl-arch-emoji { display: inline-flex; } .rl-arch-count { min-width: 1.35rem; height: 1.35rem; padding: 0 .38rem; border-radius: var(--cc-radius-pill); background: var(--cc-hover); color: var(--cc-text-secondary); font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; } .rl-arch-chev { margin-left: auto; display: inline-flex; transition: transform var(--cc-t); } .rl-arch-head.open .rl-arch-chev { transform: rotate(180deg); } .rl-arch-list { display: flex; flex-direction: column; } /* P18: Log ud-knappen nederst i Indstillinger (ude af nav'en). */ .settings-logout { display: inline-flex; align-items: center; gap: .45rem; text-decoration: none; } /* Avatar-gradienter (DESIGN.md §3) — klassenr. = InitialAvatar.GradientIndex. */ .cc-av-1 { background: linear-gradient(135deg, #FF885E, #FF516A); } .cc-av-2 { background: linear-gradient(135deg, #FFCD6A, #FFA85C); } .cc-av-3 { background: linear-gradient(135deg, #82B1FF, #665FFF); } .cc-av-4 { background: linear-gradient(135deg, #A0DE7E, #54CB68); } .cc-av-5 { background: linear-gradient(135deg, #53EDD6, #28C9B7); } .cc-av-6 { background: linear-gradient(135deg, #72D5FD, #2A9EF1); } .cc-av-7 { background: linear-gradient(135deg, #E0A2F3, #D669ED); } /* Tom-tilstand på forsiden (desktop) */ .home-empty { height: 100%; display: flex; align-items: center; justify-content: center; padding: 1rem; } .home-empty-card { text-align: center; color: var(--cc-text-secondary); font-size: 14px; background: var(--cc-bg-elevated); border: 1px solid var(--cc-border); border-radius: var(--cc-radius-card); box-shadow: var(--cc-shadow); padding: 1.6rem 2.2rem; } .home-empty-card p { margin: .35rem 0 0; } .home-empty-icon { color: var(--cc-accent); display: inline-flex; } .home-empty-hint a { color: var(--cc-accent); } /* ←-tilbage i sideheadere — kun mobil (fuldskærms-flader) */ .back-btn { display: none; align-items: center; justify-content: center; width: 2.3rem; height: 2.3rem; border-radius: 50%; color: var(--cc-text-secondary); text-decoration: none; flex-shrink: 0; border: 0; background: none; cursor: pointer; padding: 0; transition: background var(--cc-t); } .back-btn:hover { background: var(--cc-hover); } @media (max-width: 899.98px) { .msg-col { max-width: 82%; } .app-sidebar { display: none; } /* Forsiden PÅ mobil er rum-listen i fuld bredde. Reglerne rammer kun når sidebaren findes (logget ind) — anonyme ser landing-siden i app-main. */ .app-shell.route-home .app-sidebar { display: flex; width: 100%; border-right: 0; } .app-shell.route-home .app-sidebar ~ .app-main { display: none; } .back-btn { display: inline-flex; } } .valid.modified:not([type=checkbox]) { outline: 1px solid var(--cc-success); } .invalid { outline: 1px solid var(--cc-danger); } .validation-message { color: var(--danger-strong); } .blazor-error-boundary { background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121; padding: 1rem 1rem 1rem 3.7rem; color: white; } .blazor-error-boundary::after { content: "An error has occurred." } .darker-border-checkbox.form-check-input { border-color: #929292; } .form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder { color: var(--bs-secondary-color); text-align: end; } .form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder { text-align: start; } /* ---- Catch-Up Chat ---- */ .landing { max-width: 640px; margin: 3rem auto; padding: 0 1rem; text-align: center; } .landing h1 { font-size: 2.4rem; margin-bottom: .5rem; } .landing .muted { color: var(--muted); font-size: .9rem; } .landing .cta { display: inline-block; margin-top: 1.2rem; padding: .7rem 1.4rem; background: var(--accent); color: var(--on-accent); border-radius: 8px; text-decoration: none; font-weight: 600; } .chat-wrap { display: flex; flex-direction: column; height: 100vh; height: 100dvh; position: relative; } /* R3: view-skift (Lineær↔Temaer↔Recap) føles som at bladre — cross-fade + 8px parallel-slide (DESIGN.md §6). Reduced-motion nulles globalt. */ .chat-wrap, .grouped-wrap, .recap-wrap { animation: cc-viewfade 180ms var(--cc-ease); } @keyframes cc-viewfade { from { opacity: 0; transform: translateX(8px); } to { opacity: 1; transform: none; } } /* R3: skeleton-shimmer i stedet for spinnere (DESIGN.md §6) + tomme tilstande */ .skeleton-card { border: 1px solid var(--cc-border); border-radius: var(--cc-radius-card); background: var(--cc-bg-elevated); padding: .85rem .95rem; display: flex; flex-direction: column; gap: .6rem; } .skeleton-group { display: flex; flex-direction: column; gap: .55rem; padding: .3rem 0; } .skeleton-line { display: block; height: .8rem; border-radius: 6px; background: linear-gradient(100deg, var(--cc-accent-soft) 30%, var(--cc-bg-elevated) 50%, var(--cc-accent-soft) 70%); background-size: 200% 100%; animation: cc-shimmer 1.6s linear infinite; } .skeleton-line.w40 { width: 40%; } .skeleton-line.w60 { width: 60%; } .skeleton-line.w80 { width: 80%; } @keyframes cc-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } } .empty-state { display: flex; flex-direction: column; align-items: center; gap: .35rem; padding: 2.2rem 1rem; color: var(--muted); text-align: center; font-size: .9rem; } .cc-icon { vertical-align: -0.15em; flex-shrink: 0; } .empty-state .cc-icon { color: var(--cc-ai-ink); margin-bottom: .25rem; } .empty-state strong { color: var(--text); font-size: .95rem; } .chat-header { padding: .5rem 1rem; border-bottom: 1px solid var(--border); background: var(--cc-bg-elevated); } .chat-header h1 { font-size: 1.3rem; margin: 0; } .chat-header-row { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; } /* P19: rum-identitet i headeren — samme anatomi som rum-listens rækker (avatar + navn + diskret undertitel), tap åbner rum-info-arket. */ .chat-head-id { display: flex; align-items: center; gap: .6rem; flex: 1; min-width: 0; border: 0; background: none; padding: .2rem .4rem; margin: -.2rem 0; cursor: pointer; border-radius: 10px; text-align: left; color: var(--text); } .chat-head-id:hover:not(:disabled) { background: var(--cc-hover); } .chat-head-id:disabled { cursor: default; } .chat-head-avatar { position: relative; width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #fff; } .chat-head-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; } .chat-head-emoji { font-size: 20px; } .chat-head-initial { font-size: 15px; font-weight: 600; } .chat-head-avatar .rl-online { width: 11px; height: 11px; right: 0; bottom: 0; } .chat-head-text { display: flex; flex-direction: column; min-width: 0; } .chat-head-name { font-size: 1rem; font-weight: 600; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .chat-head-sub { color: var(--cc-text-secondary); font-size: .78rem; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* P19: rum-info-arket. */ .room-info { display: flex; flex-direction: column; gap: .7rem; padding: .9rem 1rem; background: var(--cc-bg-elevated); border: 1px solid var(--cc-border); border-radius: 14px; max-width: 420px; width: 100%; } .room-info-head { display: flex; align-items: center; gap: .8rem; } .room-info-avatar { width: 62px; height: 62px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #fff; } .room-info-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; } .room-info-emoji { font-size: 30px; } .room-info-initial { font-size: 22px; font-weight: 600; } .room-info-headtext { min-width: 0; } .room-info-headtext h2 { margin: 0; font-size: 1.1rem; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; } .room-info-sub { color: var(--cc-text-secondary); font-size: .82rem; } .room-info-desc { margin: 0; font-size: .9rem; color: var(--text); white-space: pre-wrap; } .room-info-meta { display: flex; flex-wrap: wrap; gap: .4rem; } .room-info-meta:empty { display: none; } .room-info-pill { font-size: .76rem; color: var(--cc-text-secondary); background: var(--cc-bg-app); border: 1px solid var(--cc-border); border-radius: 999px; padding: .18rem .6rem; text-decoration: none; } a.room-info-pill:hover { color: var(--cc-accent); border-color: var(--cc-accent); } .room-info-members-title { margin: .2rem 0 0; font-size: .82rem; color: var(--cc-text-secondary); text-transform: uppercase; letter-spacing: .03em; } .room-info-count { font-weight: 400; } .room-info-members { display: flex; flex-direction: column; max-height: 260px; overflow-y: auto; } .room-info-member { display: flex; align-items: center; gap: .6rem; padding: .35rem .3rem; border-radius: 8px; text-decoration: none; color: var(--text); } .room-info-member:hover { background: var(--cc-hover); } .room-info-member.profile-static:hover { background: transparent; } .room-info-member img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; } .room-info-member-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .room-info-online { font-size: .74rem; color: var(--cc-success, #35a94e); } @media (min-width: 900px) { .cc-sheet .room-info { position: absolute; top: 60px; left: 12px; z-index: 40; box-shadow: var(--cc-shadow-float); } } .room-select { padding: .3rem .5rem; border: 1px solid var(--input-border); border-radius: 8px; font-size: .85rem; background: var(--surface); color: var(--text); max-width: 55%; } .chat-header .chat-sub { color: var(--muted); font-size: .8rem; } .chat-messages { flex: 1; overflow-y: auto; padding: .6rem clamp(.6rem, 4vw, 4rem) .8rem; display: flex; flex-direction: column; background-color: var(--cc-bg-chat); background-image: var(--cc-wallpaper); background-size: 420px 420px; } /* P24 ("første frame er sandheden"): under rum-åbning skjules strøm-indholdet (wallpaperet står roligt) indtil JS har sat scroll-positionen på nyeste besked — et synligt top→bund-hop må aldrig kunne tegnes. */ .chat-messages.chat-booting > * { visibility: hidden; } /* Gamle .msg-kort — bruges stadig af Temaer/Recap-visningerne (restyles i D5/D6). */ .msg { max-width: 78%; padding: .5rem .75rem; border-radius: var(--cc-radius-bubble); background: var(--cc-bubble-in); border: 1px solid var(--cc-border); align-self: flex-start; } .msg.mine { align-self: flex-end; background: var(--cc-bubble-out); border-color: transparent; } .msg-meta { display: flex; gap: .5rem; font-size: .72rem; color: var(--muted); margin-bottom: .15rem; align-items: center; } .msg-avatar { width: 1.15rem; height: 1.15rem; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .msg-author { font-weight: 600; } .msg-text { white-space: pre-wrap; word-break: break-word; } .msg-edited { color: var(--faint); font-style: italic; } .msg-action { border: none; background: transparent; color: var(--faint); font-size: .72rem; cursor: pointer; padding: 0 .15rem; border-radius: 6px; } .msg-action:hover { color: var(--accent); background: var(--accent-soft); } .msg-action.confirm { color: var(--danger); font-weight: 600; } .msg-text.deleted { color: var(--faint); font-style: italic; } /* ---- Chat-strøm 2.0 (D3, DESIGN.md §5) ---- Gruppering: samme afsender <5 min = tætte bobler (2px), én avatar, hale (6px-hjørne) kun på gruppens sidste boble. Ny gruppe = 10px luft. */ .msg-block { display: flex; flex-direction: column; } .msg-block.group-first { padding-top: 10px; } .msg-block.group-next { padding-top: 2px; } @keyframes cc-msg-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } .msg-block { animation: cc-msg-in 160ms var(--cc-ease); } .date-chip-row { display: flex; justify-content: center; padding: .55rem 0 .35rem; } .date-chip, .sys-pill { padding: .16rem .7rem; border-radius: var(--cc-radius-pill); font-size: 13px; font-weight: 500; background: var(--cc-bg-elevated); background: color-mix(in srgb, var(--cc-bg-elevated) 78%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: var(--cc-text-secondary); box-shadow: var(--cc-shadow); } .sys-row { display: flex; justify-content: center; padding: .3rem 0; } .msg-row { display: flex; align-items: flex-end; gap: .5rem; } /* Trin 43 DEL 2b (DESIGN.md §2.5): roving tabindex i beskedstrømmen — synlig 2px accent-ring på den piletast-fokuserede række; inset så ringen aldrig klippes af #chat-scroll's kanter. Kun :focus-visible (ikke ved touch/klik). */ .msg-row:focus-visible { outline: 2px solid var(--cc-accent); outline-offset: -2px; border-radius: 14px; } .msg-row.mine { justify-content: flex-end; } .msg-gutter { width: 34px; flex-shrink: 0; align-self: flex-start; } .msg-row .msg-avatar { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; } .msg-col { position: relative; max-width: 62%; display: flex; flex-direction: column; align-items: flex-start; } .msg-row.mine .msg-col { align-items: flex-end; } .msg-bubble { position: relative; padding: .4rem .65rem .4rem; border-radius: var(--cc-radius-bubble); font-size: 15px; line-height: 1.35; box-shadow: var(--cc-shadow); max-width: 100%; overflow-wrap: anywhere; } .msg-bubble.in { background: var(--cc-bubble-in); color: var(--cc-text); } .msg-bubble.in.tail { border-bottom-left-radius: var(--cc-radius-tail); } .msg-bubble.out { background: var(--cc-bubble-out); color: var(--cc-text); } .msg-bubble.out .msg-meta-in { color: var(--cc-meta-on-out); } .msg-bubble.out.tail { border-bottom-right-radius: var(--cc-radius-tail); } .msg-bubble.deleted { background: transparent; border: 1px dashed var(--cc-border); color: var(--faint); font-style: italic; font-size: 13px; box-shadow: none; } .msg-bubble.mention-edge { box-shadow: inset 3px 0 0 var(--cc-accent), var(--cc-shadow); } .msg-bubble .msg-author { display: block; font-size: 13px; font-weight: 600; margin-bottom: .05rem; } .cc-ink-1 { color: var(--cc-ink-1); } .cc-ink-2 { color: var(--cc-ink-2); } .cc-ink-3 { color: var(--cc-ink-3); } .cc-ink-4 { color: var(--cc-ink-4); } .cc-ink-5 { color: var(--cc-ink-5); } .cc-ink-6 { color: var(--cc-ink-6); } .cc-ink-7 { color: var(--cc-ink-7); } .msg-meta-in { display: flex; justify-content: flex-end; align-items: baseline; gap: .35rem; font-size: 11px; color: var(--cc-text-secondary); margin: .1rem 0 0 .8rem; } .msg-row.focused .msg-bubble { outline: 2px solid var(--cc-accent); outline-offset: 2px; } /* Svæve-actionbar (desktop-hover; på mobil erstattet af long-press-arket, P1) */ .msg-actions { position: absolute; top: -1rem; right: .2rem; display: flex; gap: .05rem; padding: .12rem; background: var(--cc-bg-elevated); border: 1px solid var(--cc-border); border-radius: var(--cc-radius-pill); box-shadow: var(--cc-shadow-float); opacity: 0; pointer-events: none; transform: scale(.98); transition: opacity 140ms var(--cc-ease), transform 140ms var(--cc-ease); z-index: 5; } .msg-row.mine .msg-actions { right: auto; left: .2rem; } @media (hover: hover) { .msg-row:hover .msg-actions { opacity: 1; pointer-events: auto; transform: none; } } .msg-actions.open { opacity: 1; pointer-events: auto; transform: none; } .ma-btn { border: 0; background: transparent; color: var(--cc-text-secondary); width: 1.9rem; height: 1.9rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background var(--cc-t), color var(--cc-t); } .ma-btn:hover { background: var(--cc-hover); color: var(--cc-text); } .ma-btn.danger:hover { color: var(--cc-danger); } .ma-btn.confirm { width: auto; padding: 0 .6rem; font-size: 12px; font-weight: 600; color: var(--cc-danger); border-radius: var(--cc-radius-pill); white-space: nowrap; } /* P1: long-press/højreklik → dim af baggrunden, løftet boble, hurtig- reaktioner over boblen og handlings-ark under. Long-press må ikke udløse tekstmarkering på touch — "Kopiér tekst" bor i arket i stedet. */ @media (pointer: coarse) { .msg-bubble { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; } } .press-dim { position: fixed; inset: 0; z-index: 70; background: var(--cc-scrim); animation: cc-dim-in 140ms var(--cc-ease); } @keyframes cc-dim-in { from { opacity: 0; } to { opacity: 1; } } .msg-row.press-focus { position: relative; z-index: 75; scroll-margin: 5rem 0 3rem; } .msg-row.press-focus .msg-bubble { transform: scale(1.02); box-shadow: var(--cc-shadow-float); transition: transform 140ms var(--cc-ease); } /* Desktop-hover-baren dobbeltkonfekter med hurtig-baren mens arket er åbent. */ .msg-row.press-focus .msg-actions { display: none; } .press-quickbar { position: absolute; bottom: calc(100% + .45rem); left: -.2rem; display: flex; flex-wrap: wrap; gap: .1rem; width: max-content; max-width: min(21rem, 82vw); padding: .25rem .4rem; background: var(--cc-bg-elevated); border: 1px solid var(--cc-border); border-radius: var(--cc-radius-pill); box-shadow: var(--cc-shadow-float); animation: cc-pop 140ms var(--cc-ease); } .press-quickbar.expanded { border-radius: var(--cc-radius-card); } .msg-row.mine .press-quickbar { left: auto; right: -.2rem; } .press-emoji { border: 0; background: none; font-size: 1.3rem; line-height: 1; padding: .3rem .35rem; border-radius: var(--cc-radius-pill); cursor: pointer; transition: transform 120ms var(--cc-ease), background var(--cc-t); } .press-emoji:hover { background: var(--cc-accent-soft); transform: scale(1.15); } .press-emoji.expand { color: var(--cc-text-secondary); display: inline-flex; align-items: center; } .press-sheet { position: relative; z-index: 75; margin-top: .3rem; display: flex; flex-direction: column; min-width: 13rem; max-width: 17rem; background: var(--cc-bg-elevated); border: 1px solid var(--cc-border); border-radius: var(--cc-radius-card); box-shadow: var(--cc-shadow-float); overflow: hidden; animation: cc-pop 140ms var(--cc-ease); } .press-item { display: flex; align-items: center; gap: .6rem; padding: .55rem .85rem; border: 0; background: none; color: var(--cc-text); font-size: 14px; text-align: left; cursor: pointer; transition: background var(--cc-t); } .press-item:hover { background: var(--cc-hover); } .press-item .cc-icon { color: var(--cc-text-secondary); flex-shrink: 0; } .press-item.danger, .press-item.danger .cc-icon { color: var(--cc-danger); } .press-forward { display: flex; flex-direction: column; max-height: 12rem; overflow-y: auto; border-top: 1px solid var(--cc-border); border-bottom: 1px solid var(--cc-border); } .press-item.sub { padding-left: 2.1rem; font-size: 13.5px; } .press-note { padding: .5rem .85rem; font-size: 13px; color: var(--cc-text-secondary); } .press-error { padding: .5rem .85rem; font-size: 13px; color: var(--cc-danger); } /* P14: markerings-tilstand — long-press giver checkbokse på rækkerne og en bulk-bar over strømmen (kopiér/videresend/slet/annullér). */ .select-bar { display: flex; align-items: center; gap: .5rem; padding: .4rem .8rem; background: var(--cc-bg-elevated); border-bottom: 1px solid var(--cc-border); animation: cc-pop 140ms var(--cc-ease); } .select-bar .sb-count { font-weight: 600; font-size: .95rem; } .select-bar .sb-actions { margin-left: auto; display: flex; align-items: center; gap: .15rem; } .sb-btn { display: inline-flex; align-items: center; gap: .3rem; border: 0; background: none; color: var(--cc-text-secondary); cursor: pointer; padding: .45rem; border-radius: 8px; font-size: 13.5px; transition: background var(--cc-t); } .sb-btn:hover:not(:disabled) { background: var(--cc-hover); color: var(--cc-text); } .sb-btn:disabled { opacity: .4; cursor: default; } .sb-btn.active { color: var(--cc-accent); background: var(--cc-accent-soft); } .sb-btn.danger { color: var(--cc-danger); } .select-forward { display: flex; flex-direction: column; max-height: 12rem; overflow-y: auto; background: var(--cc-bg-elevated); border-bottom: 1px solid var(--cc-border); } .msg-row { position: relative; } .sel-overlay { position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; border: 0; background: transparent; cursor: pointer; padding: 0 0 0 .1rem; } .sel-check { display: grid; place-items: center; width: 21px; height: 21px; border-radius: 50%; border: 2px solid var(--cc-border-strong, var(--cc-border)); background: var(--cc-bg-elevated); color: transparent; transition: all var(--cc-t); } .sel-check.on { background: var(--cc-accent); border-color: var(--cc-accent); color: #fff; } .msg-row.selected { background: var(--cc-accent-soft); border-radius: 10px; } /* Checkboksen skal have plads i venstre kant uden at boblerne hopper meget. */ .select-mode-pad .msg-row { padding-left: 1.7rem; } /* M11 tip jar: frivillig 💛-engangsgave + tak-regn til giveren. */ .tipjar { position: relative; display: flex; flex-direction: column; gap: .5rem; } .tip-receipt { margin: 0; font-weight: 600; color: var(--cc-accent); animation: cc-pop 200ms var(--cc-ease); } .tip-thanks { position: absolute; inset: -2.5rem 0 0 0; pointer-events: none; overflow: visible; z-index: 8; } .tip-heart { position: absolute; bottom: 0; animation: cc-tip-float linear forwards; opacity: 0; } @keyframes cc-tip-float { 0% { transform: translateY(0) scale(.7); opacity: 0; } 12% { opacity: 1; } 100% { transform: translateY(-7.5rem) scale(1.15) rotate(12deg); opacity: 0; } } .support-card { display: flex; flex-direction: column; gap: .6rem; margin: 1rem; padding: 1rem 1.2rem; background: var(--cc-bg-elevated); border: 1px solid var(--cc-border); border-radius: var(--cc-radius-card); max-width: 560px; } .support-card.stars-support { margin: 1.2rem 0 0; } .support-card p { margin: 0; } .usercard .usercard-name { margin: 0; display: inline-flex; align-items: center; gap: .35rem; } .usercard .usercard-about { margin: .2rem 0 0; color: var(--cc-text-secondary); white-space: pre-wrap; } .msg-gutter a { display: inline-flex; border-radius: 50%; } .msg-profile-button { display: inline-flex; padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; } .msg-profile-button:hover .msg-avatar, .demo-profile-trigger:hover { filter: brightness(1.08); } .msg-profile-static { display: inline-flex; border-radius: 50%; cursor: default; } .msg-avatar.demo-avatar { display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 12px; font-weight: 700; } .msg-author-button { padding: 0; border: 0; background: transparent; font: inherit; cursor: pointer; text-align: left; } .msg-author-link { text-decoration: none; } .msg-author-link:hover, .msg-author-button:hover { text-decoration: underline; } /* P28: demo-identiteter åbner et forklarende info-kort i stedet for en død /u/-side. Ukendte, ikke-demo identiteter står statisk. */ .demo-person-card { display: grid; grid-template-columns: 3.5rem 1fr; gap: .8rem; align-items: start; padding: .85rem; width: min(23rem, 100%); color: var(--cc-text); } .demo-person-avatar { width: 3.5rem; height: 3.5rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.1rem; font-weight: 700; } .demo-person-copy { min-width: 0; } .demo-person-kicker { color: var(--cc-accent); font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; } .demo-person-copy h2 { margin: .12rem 0 .25rem; font-size: 1.08rem; } .demo-person-copy p { margin: .15rem 0; font-size: .84rem; } .demo-person-card > .room-btn { grid-column: 1 / -1; justify-self: stretch; } @media (min-width: 900px) { .cc-sheet .demo-person-card { position: absolute; top: 4.25rem; left: 50%; z-index: 65; transform: translateX(-50%); background: var(--cc-bg-elevated); border: 1px solid var(--cc-border); border-radius: var(--cc-radius-card); box-shadow: var(--cc-shadow-float); } } @media (max-width: 899.98px) { .demo-person-card { width: 100%; } } /* P14: AI-oversættelse inline under originalen. */ .msg-translation { display: flex; flex-direction: column; gap: .1rem; margin-top: .3rem; padding: .35rem .55rem; border-left: 2px solid var(--cc-accent); background: var(--cc-accent-soft); border-radius: 6px; } .mt-label { font-size: .68rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--cc-accent); } .mt-text { font-size: .92em; white-space: pre-wrap; overflow-wrap: anywhere; } .mt-status { font-size: .85em; color: var(--cc-text-secondary); font-style: italic; } .mt-hide { align-self: flex-start; border: 0; background: none; padding: 0; margin-top: .1rem; font-size: .72rem; color: var(--cc-text-secondary); cursor: pointer; text-decoration: underline; } .mt-hide:hover { color: var(--cc-text); } /* P2: genbrugeligt bottom-sheet — på mobil glider menuer op fra bunden (16px topradius, drag-handle, dim); på desktop er wrapperen usynlig og indholdet beholder sin popover-placering. */ .cc-sheet { display: contents; } @media (max-width: 899.98px) { .cc-sheet-backdrop { position: fixed; inset: 0; z-index: 80; background: var(--cc-scrim); animation: cc-dim-in 140ms var(--cc-ease); } .cc-sheet-panel { position: fixed; left: 0; right: 0; bottom: 0; z-index: 85; background: var(--cc-bg-elevated); border-top-left-radius: 16px; border-top-right-radius: 16px; box-shadow: 0 -6px 24px rgb(0 0 0 / .22); padding: .3rem .65rem calc(.65rem + env(safe-area-inset-bottom)); max-height: 70dvh; overflow-y: auto; overscroll-behavior: contain; animation: cc-sheet-up 180ms var(--cc-ease); transition: transform 160ms var(--cc-ease); } .cc-sheet-handle { display: block; width: 2.4rem; height: .28rem; border-radius: var(--cc-radius-pill); background: var(--cc-border); margin: .3rem auto .55rem; touch-action: none; } /* Indhold i en sheet fylder bredden og mister sit popover-krom. */ .cc-sheet-panel .press-sheet, .cc-sheet-panel .chatsearch-pop, .cc-sheet-panel .gift-palette, .cc-sheet-panel .marker-menu, .cc-sheet-panel .room-info { position: static; margin: 0; max-width: none; width: 100%; border: 0; box-shadow: none; background: transparent; animation: none; } .cc-sheet-panel .press-item { padding: .7rem .85rem; font-size: 15px; } } @keyframes cc-sheet-up { from { transform: translateY(100%); } to { transform: none; } } @media (min-width: 900px) { /* Ingen dim på desktop — udenfor-klik lukker i stedet via pointerdown-lytteren i catchupSheetInit (z-indeks-frit). */ .cc-sheet-backdrop { display: none; } .cc-sheet-panel { display: contents; } .cc-sheet-handle { display: none; } } /* P4: optimistisk UI — ekko-bobler er let dæmpede med 🕓 indtil server-ack; fejl giver rød kant + "Prøv igen"-række. Skeleton-shimmer viser struktur i stedet for tom flade ved rum-skift. */ .msg-bubble.pending { opacity: .65; } .msg-bubble.failed { box-shadow: inset 3px 0 0 var(--cc-danger); } .msg-time.echo-clock { font-size: 10px; } .msg-image-placeholder.echo { pointer-events: none; opacity: .7; } .echo-retry { display: flex; align-items: center; gap: .45rem; margin-top: .25rem; flex-wrap: wrap; } .echo-error { font-size: 12px; color: var(--cc-danger); } .echo-btn { border: 0; border-radius: var(--cc-radius-pill); padding: .18rem .6rem; font-size: 12px; font-weight: 600; cursor: pointer; background: var(--cc-danger); color: #fff; } .echo-btn.dismiss { background: var(--cc-hover); color: var(--cc-text-secondary); } .msg-skeleton { display: flex; flex-direction: column; gap: .7rem; padding: 1rem .5rem; } .sk-row { display: flex; gap: .5rem; align-items: flex-end; } .sk-row.mine { flex-direction: row-reverse; } .sk-row.mine .sk-av { display: none; } .sk-av { width: 34px; height: 34px; border-radius: 50%; flex: none; } .sk-bubble { height: 40px; border-radius: var(--cc-radius-bubble); } .sk-av, .sk-bubble { background: linear-gradient(90deg, var(--cc-hover) 25%, var(--cc-bg-elevated) 45%, var(--cc-hover) 65%); background-size: 200% 100%; animation: cc-shimmer 1.1s linear infinite; } @keyframes cc-shimmer { to { background-position: -200% 0; } } /* P3: swipe-højre = svar. Boblen flyttes af JS (inline transform); ↩-hintet rider med ved boblens venstrekant og toner frem via --swipe-p (0..1). touch-action: pan-y gør at lodret scroll aldrig kæmper med gesturen. */ .chat-messages .msg-row { touch-action: pan-y; } .msg-row.swiping .msg-bubble::before { content: '↩'; position: absolute; left: -34px; top: 50%; translate: 0 -50%; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--cc-hover); color: var(--cc-text-secondary); font-size: 14px; opacity: var(--swipe-p, 0); } /* P3: pull-to-refresh i rum-listen — højden styres af JS under trækket; prikken vender ved tærsklen (armed) og spinner under genindlæsning. */ .rl-ptr { height: 0; overflow: hidden; display: flex; align-items: flex-end; justify-content: center; flex: none; transition: height 180ms var(--cc-ease); } .rl-ptr-dot { width: 22px; height: 22px; border-radius: 50%; margin-bottom: 8px; flex: none; border: 2.5px solid var(--cc-border); border-top-color: var(--cc-accent); transition: transform 160ms var(--cc-ease); } .rl-ptr.armed .rl-ptr-dot { transform: rotate(180deg); } .rl-ptr.loading .rl-ptr-dot { animation: cc-spin 700ms linear infinite; } @keyframes cc-spin { to { transform: rotate(360deg); } } /* Reply-citat i boblen: 3px accent-venstrekant, navn i accent, 1 linje. */ .msg-quote { display: block; width: 100%; text-align: left; border: 0; border-left: 3px solid var(--cc-accent); background: var(--cc-hover); color: var(--cc-text-secondary); border-radius: 6px; padding: .2rem .5rem; margin: .12rem 0 .25rem; font-size: .8rem; cursor: pointer; overflow: hidden; } .msg-quote:hover { background: var(--cc-accent-soft); } .msg-quote-author { display: block; font-weight: 600; color: var(--cc-accent); } .msg-quote-text { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .msg-quote-text.deleted { color: var(--faint); font-style: italic; } /* Scroll-til-bund-FAB m. unread-badge (fader ind >1 skærm fra bunden) */ .chat-fab { position: absolute; right: 1rem; bottom: 5.4rem; width: 2.9rem; height: 2.9rem; border-radius: 50%; border: 1px solid var(--cc-border); background: var(--cc-bg-elevated); color: var(--cc-text-secondary); display: flex; align-items: center; justify-content: center; box-shadow: var(--cc-shadow-float); cursor: pointer; opacity: 0; pointer-events: none; transform: translateY(6px); transition: opacity var(--cc-t), transform var(--cc-t), background var(--cc-t); z-index: 20; } .chat-fab:hover { background: var(--cc-hover); color: var(--cc-text); } .chat-fab.visible { opacity: 1; pointer-events: auto; transform: none; } .chat-fab-badge { position: absolute; top: -7px; right: -3px; min-width: 1.25rem; padding: .06rem .3rem; border-radius: var(--cc-radius-pill); background: var(--cc-unread); color: var(--cc-on-unread); font-size: 11px; font-weight: 700; text-align: center; } /* Reply-/redigér-preview: bar OVER composeren med accent-kant og ✕. */ .reply-bar { display: flex; align-items: center; gap: .5rem; margin: .3rem clamp(.6rem, 4vw, 4rem) 0; padding: .35rem .6rem; border-left: 3px solid var(--cc-accent); border-radius: 8px; background: var(--cc-bg-elevated); font-size: .8rem; box-shadow: var(--cc-shadow); } .reply-bar-icon { color: var(--cc-accent); display: inline-flex; flex-shrink: 0; } .reply-bar-body { flex: 1; min-width: 0; display: flex; flex-direction: column; } .reply-bar .msg-quote-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .msg.focused { outline: 2px solid var(--accent); } .msg-edit { display: flex; gap: .4rem; align-items: center; margin-top: .2rem; } .msg-edit .text-field { flex: 1; padding: .35rem .55rem; border: 1px solid var(--input-border); border-radius: 8px; } /* Typing: navn + 3 hoppende prikker i accent, nederst i strømmen. */ .typing-indicator { display: flex; align-items: center; gap: .45rem; padding: .2rem 1rem .25rem; color: var(--cc-accent); font-size: 13px; } .typing-dots { display: inline-flex; gap: 3px; } .typing-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--cc-accent); animation: cc-bounce 1.1s infinite var(--cc-ease); } .typing-dots i:nth-child(2) { animation-delay: .15s; } .typing-dots i:nth-child(3) { animation-delay: .3s; } @keyframes cc-bounce { 0%, 60%, 100% { transform: none; opacity: .55; } 30% { transform: translateY(-3px); opacity: 1; } } .unread-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 1.35rem; height: 1.35rem; padding: 0 .35rem; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-size: .72rem; font-weight: 700; } /* Markør-filterknapper (bor nu i søge-popoveren, R2) */ .filter-btn { padding: .3rem .7rem; border: 1px solid var(--accent-border); background: var(--surface); color: var(--accent); border-radius: 999px; font-size: .8rem; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: .3rem; } .filter-btn.active { background: var(--accent); color: var(--on-accent); border-color: var(--accent); } .filter-note, .filter-empty { padding: .4rem 1rem 0; color: var(--muted); font-size: .85rem; margin: 0; } /* R2 (DESIGN.md §5-filterspec): 🔍-overlay-bar + "Filtre"-popover + chips. Alt filter-UI er skjult indtil man beder om det — ren flade som standard. */ .chatsearch { padding: .5rem 1rem 0; display: flex; flex-direction: column; gap: .45rem; animation: cc-pop 140ms var(--cc-ease); } .chatsearch-bar { display: flex; align-items: center; gap: .35rem; padding: .3rem .55rem; border: 1px solid var(--cc-border); border-radius: var(--cc-radius-card); background: var(--cc-bg-elevated); box-shadow: var(--cc-shadow-float); } .chatsearch-bar:focus-within { border-color: var(--cc-accent); } .chatsearch-icon { display: inline-flex; color: var(--muted); flex-shrink: 0; } .chatsearch-input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-size: .92rem; color: var(--text); outline: none; padding: .25rem 0; } .chatsearch-input::placeholder { color: var(--faint); } .chatsearch-count { font-size: .78rem; color: var(--muted); font-variant-numeric: tabular-nums; flex-shrink: 0; } .chatsearch-nav { display: inline-flex; align-items: center; justify-content: center; width: 1.9rem; height: 1.9rem; border: 0; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; flex-shrink: 0; transition: background var(--cc-t), color var(--cc-t); } .chatsearch-nav:hover:not(:disabled) { background: var(--cc-accent-soft); color: var(--accent); } .chatsearch-nav:disabled { color: var(--faint); cursor: default; } .chatsearch-filterbtn { display: inline-flex; align-items: center; gap: .3rem; border: 1px solid var(--cc-border); background: transparent; color: var(--muted); border-radius: var(--cc-radius-pill); padding: .25rem .65rem; font-size: .8rem; font-weight: 600; cursor: pointer; flex-shrink: 0; transition: background var(--cc-t), color var(--cc-t), border-color var(--cc-t); } .chatsearch-filterbtn:hover { border-color: var(--cc-accent); color: var(--accent); } .chatsearch-filterbtn.active { background: var(--cc-accent-soft); border-color: var(--cc-accent); color: var(--accent); } .chatsearch-pop { display: flex; flex-direction: column; gap: .55rem; padding: .65rem .75rem; border: 1px solid var(--cc-border); border-radius: var(--cc-radius-card); background: var(--cc-bg-elevated); box-shadow: var(--cc-shadow-float); animation: cc-pop 140ms var(--cc-ease); } .chatsearch-seg { display: flex; gap: .35rem; flex-wrap: wrap; } .chatsearch-fields { display: flex; gap: .7rem; flex-wrap: wrap; font-size: .8rem; color: var(--muted); } .chatsearch-fields label { display: flex; flex-direction: column; gap: .15rem; } .chatsearch-fields input, .chatsearch-fields select { padding: .3rem .45rem; border: 1px solid var(--input-border); border-radius: 8px; font: inherit; font-size: .82rem; background: var(--surface); color: var(--text); } .chatsearch-chips { display: flex; gap: .35rem; flex-wrap: wrap; } .chatsearch-chip { display: inline-flex; align-items: center; gap: .3rem; border: 1px solid var(--cc-accent); background: var(--cc-accent-soft); color: var(--accent); border-radius: var(--cc-radius-pill); padding: .18rem .6rem; font-size: .78rem; font-weight: 600; cursor: pointer; transition: background var(--cc-t); } .chatsearch-chip:hover { background: var(--cc-accent-soft-hover); } .chatsearch-chip .chip-x { display: inline-flex; align-items: center; opacity: .75; } /* Søge-hits i strømmen: blødt accent-glow (DESIGN.md §5) */ .msg-block.search-hit-glow .msg-bubble, .msg-block.search-hit-glow .sys-pill { box-shadow: 0 0 0 2px var(--cc-accent-soft-hover), 0 0 14px var(--cc-accent-soft-hover); } .history-btn { align-self: center; border: 1px solid var(--accent-border); background: var(--surface); color: var(--accent); border-radius: 999px; padding: .35rem .9rem; font-size: .8rem; font-weight: 600; cursor: pointer; flex-shrink: 0; display: inline-flex; align-items: center; gap: .3rem; } .history-btn:disabled { color: var(--faint); border-color: var(--border); cursor: default; } .history-nav { display: flex; gap: .5rem; align-self: center; position: sticky; bottom: .25rem; } /* Reaktions-chips under boblen: elevated pill; egen = accent-kant + tint. */ .msg-reactions { display: flex; gap: .3rem; margin-top: .3rem; flex-wrap: wrap; align-items: center; } .reaction-chip { border: 1px solid var(--cc-border); background: var(--cc-bg-elevated); color: var(--cc-text); border-radius: var(--cc-radius-pill); padding: .08rem .5rem; font-size: 13px; cursor: pointer; transition: transform 120ms var(--cc-ease), background var(--cc-t), border-color var(--cc-t); } @media (hover: hover) { .reaction-chip:hover { transform: scale(1.15); } } .reaction-chip.mine { border-color: var(--cc-accent); background: var(--cc-accent-soft); } .reaction-add { border: 1px dashed var(--input-border); background: transparent; border-radius: 999px; padding: .05rem .45rem; font-size: .8rem; color: var(--muted); cursor: pointer; } .reaction-palette { display: flex; gap: .3rem; margin-top: .25rem; flex-wrap: wrap; align-items: center; max-width: 21rem; padding: .45rem .55rem; border: 1px solid var(--cc-border); border-radius: var(--cc-radius-card); background: var(--cc-bg-elevated); box-shadow: var(--cc-shadow-float); } .reaction-chip.quick { font-size: 1.05rem; } .reaction-chip.expand { color: var(--cc-text-secondary); display: inline-flex; align-items: center; justify-content: center; } .palette-divider { flex-basis: 100%; height: 1px; background: var(--border); } .palette-break { flex-basis: 100%; height: 0; } /* R4: markør-menu (funktion) — adskilt fra reaktions-paletten (social). */ .marker-menu { display: flex; gap: .3rem; margin-top: .25rem; flex-wrap: wrap; align-items: center; padding: .45rem .55rem; border: 1px solid var(--cc-border); border-radius: var(--cc-radius-card); background: var(--cc-bg-elevated); box-shadow: var(--cc-shadow-float); } .marker-option { display: inline-flex; align-items: center; gap: .35rem; border: 1px solid var(--accent-border); background: var(--surface); color: var(--accent); border-radius: 999px; padding: .3rem .7rem; font-size: .8rem; font-weight: 600; cursor: pointer; } .marker-option.active { background: var(--accent); color: var(--on-accent); border-color: var(--accent); } /* R4: diskret markør-hjørneikon på boblen. */ .msg-markers { position: absolute; top: -0.55rem; right: .5rem; display: inline-flex; gap: .15rem; } .msg-marker { display: inline-flex; align-items: center; justify-content: center; width: 1.15rem; height: 1.15rem; border-radius: 999px; background: var(--cc-bg-elevated); border: 1px solid var(--cc-border); color: var(--cc-text-secondary); } .msg-marker.mine { color: var(--accent); border-color: var(--accent-border); } /* ---- R5: jumbo-emoji & micro-animations (DESIGN.md §6) ---- */ /* 1–3 emojis uden tekst = stor visning uden boble, pop-in. */ .msg-bubble.jumbo.in, .msg-bubble.jumbo.out { background: none; box-shadow: none; padding: .1rem 0; } .msg-bubble.jumbo .msg-text { font-size: 64px; line-height: 1.15; animation: cc-jumbo-in 260ms var(--cc-ease); } .msg-bubble.jumbo.j2 .msg-text, .msg-bubble.jumbo.j3 .msg-text { font-size: 48px; } @keyframes cc-jumbo-in { 0% { opacity: 0; transform: scale(.4); } 70% { transform: scale(1.08); } 100% { opacity: 1; transform: scale(1); } } /* Reaktions-chip popper når den (gen)skabes med nyt antal. */ .msg-reactions .reaction-chip.pop { animation: cc-chip-pop 220ms var(--cc-ease); } @keyframes cc-chip-pop { 0% { transform: scale(1); } 50% { transform: scale(1.12); } 100% { transform: scale(1); } } /* Reaktionen flyver i en lille bue fra pickeren mod chip-rækken (JS-klon). */ .cc-fly-emoji { position: fixed; z-index: 200; font-size: 1.5rem; pointer-events: none; opacity: 1; transition: transform 200ms var(--cc-ease), opacity 200ms var(--cc-ease); } .cc-fly-emoji.fly { transform: translate(-12px, -34px) scale(.55); opacity: .1; } /* Unread-pillen pulser én gang når antallet skifter (genskabes via @key). */ .rl-unread { animation: cc-pulse-once 320ms var(--cc-ease); } @keyframes cc-pulse-once { 0% { transform: scale(1); } 45% { transform: scale(1.18); } 100% { transform: scale(1); } } /* Egen boble lander med 96%→100% skala — taktil "afsendt"-følelse. */ .msg-block:has(.msg-bubble.out) { animation-name: cc-msg-in-out; } @keyframes cc-msg-in-out { from { opacity: 0; transform: translateY(6px) scale(.96); } to { opacity: 1; transform: none; } } .send-btn .cc-icon { transition: transform 150ms var(--cc-ease); } .send-btn:active .cc-icon { transform: rotate(20deg); } /* ✦ shimrer diskret KUN mens AI arbejder (2s loop — enesteloop pr. skærm). */ .ai-thinking { display: inline-flex; align-items: center; gap: .35rem; color: var(--cc-ai-ink); font-size: .8rem; } .ai-thinking .cc-icon { animation: cc-spark 2s ease-in-out infinite; } @keyframes cc-spark { 0%, 100% { opacity: .35; transform: scale(.92); } 50% { opacity: 1; transform: scale(1.08); } } .reaction-who-btn { border: 1px solid var(--border); background: var(--surface); border-radius: 999px; padding: .05rem .45rem; font-size: .8rem; cursor: pointer; } .reaction-who { margin-top: .25rem; padding: .35rem .55rem; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); font-size: .78rem; color: var(--text); display: flex; flex-direction: column; gap: .15rem; } .reaction-who-row span { margin-right: .3rem; } /* Trin 50 læst-af: diskret "✓✓ N" i meta-linjen + navneliste-kort ved tryk. */ .msg-seen-btn { border: none; background: transparent; padding: 0; font-size: 11px; color: inherit; cursor: pointer; letter-spacing: -.5px; line-height: 1; } .msg-seen-list { margin-top: .25rem; padding: .35rem .55rem; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); font-size: .78rem; color: var(--text); } .appt-suggest { display: flex; align-items: center; gap: .4rem; margin-top: .25rem; font-size: .8rem; color: var(--appt-ink); } .appt-suggest-btn { border: 1px solid var(--appt-border); background: var(--appt-soft); color: var(--appt-ink); border-radius: 999px; padding: .05rem .5rem; font-size: .8rem; cursor: pointer; } .appt-suggest-dismiss { border: none; background: transparent; color: var(--faint); cursor: pointer; padding: 0 .2rem; display: inline-flex; align-items: center; } /* ---- Composer (D4, DESIGN.md §5): én afrundet flade + cirkulær sendknap ---- */ .chat-input { position: relative; display: flex; align-items: flex-end; gap: .5rem; padding: .55rem clamp(.6rem, 4vw, 4rem) .8rem; } .composer-shell { flex: 1; min-width: 0; display: flex; align-items: flex-end; gap: .1rem; background: var(--cc-bg-elevated); border: 1px solid var(--cc-border); border-radius: var(--cc-radius-input); padding: .22rem .3rem; box-shadow: var(--cc-shadow); transition: border-color var(--cc-t); } .composer-shell:focus-within { border-color: var(--cc-accent); } .comp-btn { border: 0; background: transparent; color: var(--cc-text-secondary); width: 2.25rem; height: 2.25rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; margin-bottom: 0; transition: color var(--cc-t), background var(--cc-t); } .comp-btn:hover { color: var(--cc-accent); background: var(--cc-hover); } .comp-btn.active { color: var(--cc-accent); } .comp-btn:disabled { opacity: .45; cursor: default; } .chat-input textarea.text-field { flex: 1; min-width: 0; resize: none; border: 0; background: transparent; color: var(--cc-text); font: inherit; font-size: 15px; line-height: 1.35; min-height: 2.25rem; max-height: none; box-sizing: border-box; padding: calc((2.25rem - 1.35em) / 2) .3rem; overflow-y: hidden; } .chat-input textarea.text-field:focus-visible { outline: none; } .chat-input textarea.text-field::placeholder { color: var(--cc-text-secondary); } .chat-input .send-btn { width: 2.9rem; height: 2.9rem; flex-shrink: 0; border: 0; border-radius: 50%; background: var(--cc-accent); color: var(--cc-on-accent); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: var(--cc-shadow); transition: background var(--cc-t), transform 120ms var(--cc-ease); padding: 0; } .chat-input .send-btn:hover:not(:disabled) { background: var(--cc-accent-hover); transform: scale(1.05); } .chat-input .send-btn:disabled { background: var(--cc-border); color: var(--cc-text-secondary); cursor: default; } /* P13: emoji-"tastaturet" à la Telegram. Mobil: panelet ligger fast i bunden og fylder PRÆCIS OS-tastaturets plads (--cc-kb-height måles af visual- Viewport-lytteren; 280px før første måling) — composeren løftes tilsvarende via .ekb-open, så bytte mellem panel og rigtigt tastatur er uden layout-hop. Desktop: anker-popover over composeren som andre menuer. */ .emoji-kb { display: flex; flex-direction: column; background: var(--cc-bg-elevated); overflow: hidden; } .ekb-search { display: flex; align-items: center; gap: .4rem; margin: .55rem .6rem .35rem; flex-shrink: 0; padding: .32rem .65rem; background: var(--cc-bg-app); border-radius: var(--cc-radius-pill); color: var(--cc-text-secondary); } .ekb-search input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; font-size: 14px; color: var(--cc-text); } .ekb-search input::placeholder { color: var(--cc-text-secondary); } .ekb-clear { border: 0; background: none; color: var(--cc-text-secondary); cursor: pointer; padding: .1rem; display: grid; place-items: center; } .ekb-grid { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: grid; grid-template-columns: repeat(auto-fill, minmax(2.4rem, 1fr)); align-content: start; gap: .05rem; padding: .15rem .5rem .4rem; } .ekb-grid button { border: 0; background: transparent; font-size: 1.45rem; height: 2.5rem; border-radius: 8px; cursor: pointer; padding: 0; line-height: 1; } .ekb-grid button:hover { background: var(--cc-hover); } .ekb-empty { grid-column: 1 / -1; margin: 0; padding: 1.2rem .5rem; text-align: center; color: var(--cc-text-secondary); font-size: .85rem; } .ekb-tabs { display: flex; justify-content: space-around; align-items: center; flex-shrink: 0; padding: .25rem .4rem; border-top: 1px solid var(--cc-border); } .ekb-tab { border: 0; background: none; color: var(--cc-text-secondary); cursor: pointer; width: 2.3rem; height: 2.1rem; border-radius: 8px; display: grid; place-items: center; } .ekb-tab:hover { background: var(--cc-hover); } .ekb-tab.active { color: var(--cc-accent); background: var(--cc-accent-soft); } @media (max-width: 899.98px) { /* bottom følger --kb-inset: søger man i panelet, åbner OS-tastaturet, og panelet rider ovenpå det i stedet for at blive dækket. */ .emoji-kb { position: fixed; left: 0; right: 0; bottom: var(--kb-inset, 0px); z-index: 40; height: var(--cc-kb-height, 280px); border-top: 1px solid var(--cc-border); padding-bottom: env(safe-area-inset-bottom); } /* Composeren står præcis hvor tastaturet ville have efterladt den. */ .chat-input.ekb-open { padding-bottom: calc(.7rem + var(--cc-kb-height, 280px) + var(--kb-inset, 0px)); } /* Feltet skal BLIVE ved med at ligne det aktive input mens panelet har "tastatur-rollen", selvom det reelt er blurred. */ .chat-input.ekb-open .composer-shell { border-color: var(--cc-accent); } } @media (min-width: 900px) { .emoji-kb { position: absolute; bottom: 100%; left: clamp(.6rem, 4vw, 4rem); margin-bottom: .35rem; width: 344px; height: 322px; border: 1px solid var(--cc-border); border-radius: var(--cc-radius-card); box-shadow: var(--cc-shadow-float); z-index: 30; animation: cc-pop 140ms var(--cc-ease); } } @keyframes cc-pop { from { opacity: 0; transform: scale(.98) translateY(4px); } to { opacity: 1; transform: none; } } .mention-suggest { position: absolute; bottom: 100%; left: clamp(.6rem, 4vw, 4rem); right: clamp(.6rem, 4vw, 4rem); margin-bottom: .25rem; display: flex; flex-direction: column; background: var(--cc-bg-elevated); border: 1px solid var(--cc-border); border-radius: var(--cc-radius-card); box-shadow: var(--cc-shadow-float); overflow: hidden; z-index: 10; animation: cc-pop 140ms var(--cc-ease); } .mention-item { text-align: left; padding: .5rem .8rem; border: 0; background: none; color: var(--text); font-size: .9rem; cursor: pointer; } .mention-item:hover, .mention-item.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; } /* Mentions: @navn som accent-pill (Discord-stil). */ .mention-me { background: var(--cc-accent-soft); color: var(--cc-accent); border-radius: var(--cc-radius-pill); padding: 0 .35rem; font-weight: 600; } /* Notifikationscenter */ .notif-bell { position: relative; font-size: 1.15rem; text-decoration: none; padding: .15rem .35rem; } .notif-badge { position: absolute; top: -4px; right: -6px; background: var(--danger-strong); color: #fff; font-size: .62rem; font-weight: 700; border-radius: 999px; padding: .05rem .3rem; min-width: 1rem; text-align: center; } .notif-mark-all { border: 1px solid var(--accent-border); background: var(--accent-soft); color: var(--accent); border-radius: 8px; padding: .35rem .8rem; font-size: .8rem; font-weight: 600; cursor: pointer; } .notif-empty { padding: 1rem; color: var(--muted); } .notif-list { display: flex; flex-direction: column; gap: .4rem; padding: .7rem 1rem; overflow-y: auto; } .notif-item { display: flex; align-items: center; gap: .3rem; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); } .notif-item.unread { background: var(--accent-soft); border-color: var(--accent-border); } .notif-link { flex: 1; display: flex; gap: .6rem; align-items: flex-start; padding: .55rem .7rem; text-decoration: none; color: inherit; min-width: 0; } .notif-icon { font-size: 1.1rem; } .notif-body { display: flex; flex-direction: column; gap: .1rem; min-width: 0; } .notif-title { font-weight: 600; font-size: .85rem; } .notif-preview { font-size: .8rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .notif-time { font-size: .7rem; color: var(--faint); } .notif-read-btn { border: 0; background: none; color: var(--accent); cursor: pointer; padding: .4rem .7rem; display: inline-flex; align-items: center; } /* P18: Acceptér/Afvis direkte på invitations-notifikationer i listen. */ .notif-item { flex-wrap: wrap; } .notif-actions { display: flex; gap: .5rem; width: 100%; padding: 0 .7rem .55rem 2.85rem; } /* Beskedformattering (markdown-subset) */ .msg-code { background: var(--code-bg); border: 1px solid var(--code-border); border-radius: 5px; padding: .05rem .3rem; font-size: .85em; } .msg-codeblock { background: var(--code-bg); border: 1px solid var(--code-border); border-radius: 8px; padding: .5rem .65rem; margin: .3rem 0; font-size: .82em; overflow-x: auto; white-space: pre-wrap; word-break: break-word; } .msg-codeblock code { background: none; border: 0; padding: 0; } .msg-link { color: var(--accent); text-decoration: underline; word-break: break-all; } .msg-preview { margin: 0 1rem; padding: .5rem .7rem; border: 1px dashed var(--accent-border); border-radius: 10px; background: var(--accent-faint); font-size: .9rem; } .msg-preview-label { display: block; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-bottom: .15rem; } /* Link-previews */ .link-preview { display: flex; gap: .6rem; margin-top: .35rem; padding: .5rem .6rem; border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 8px; background: var(--accent-faint); text-decoration: none; color: inherit; max-width: 420px; } .link-preview:hover { background: var(--accent-faint-hover); } .link-preview-img { width: 72px; height: 72px; object-fit: cover; border-radius: 6px; flex-shrink: 0; } .link-preview-body { display: flex; flex-direction: column; gap: .1rem; min-width: 0; } .link-preview-site { font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); } .link-preview-title { font-weight: 600; font-size: .85rem; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .link-preview-desc { font-size: .78rem; color: var(--muted); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } /* Billeder i beskeder */ .msg-image { display: block; max-width: 260px; max-height: 200px; border-radius: 10px; margin: .25rem 0; cursor: zoom-in; object-fit: cover; } /* R12 datasparer: pladsholder indtil brugeren beder om billedet. */ .msg-image-placeholder { display: block; width: 200px; padding: 1.1rem .75rem; margin: .25rem 0; border: 1px dashed var(--border); border-radius: 10px; background: var(--cc-surface-2, transparent); color: var(--faint); font-size: .85rem; cursor: pointer; } .msg-image-placeholder:hover { color: var(--text); border-color: var(--accent); } /* Trin 51: fil-chip i beskeder */ .msg-file { display: flex; align-items: center; gap: .55rem; max-width: 280px; margin: .25rem 0; padding: .5rem .65rem; border: 1px solid var(--border); border-radius: 12px; background: var(--cc-surface-2, transparent); color: var(--text); text-decoration: none; } .msg-file:hover { border-color: var(--accent); text-decoration: none; } .msg-file-ico { font-size: 1.4rem; line-height: 1; } .msg-file-meta { display: flex; min-width: 0; flex-direction: column; gap: .1rem; } .msg-file-name { font-size: .85rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .msg-file-size { font-size: .72rem; color: var(--faint); } .msg-file-dl { margin-left: auto; color: var(--faint); display: flex; } .room-media-file { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .25rem; width: 100%; aspect-ratio: 1; background: var(--cc-hover); font-size: 1.6rem; } .room-media-file-name { max-width: 90%; font-size: .68rem; color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.75); display: flex; align-items: center; justify-content: center; z-index: 1000; cursor: zoom-out; } .lightbox img { max-width: 92vw; max-height: 92vh; border-radius: 8px; box-shadow: 0 8px 40px rgba(0,0,0,.5); } /* ---- P16: ➕-arket — sekundære composer-handlinger som grid (Telegram- mønster); composeren selv har kun 😀 · ➕ · send. ---- */ .attach-sheet { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.2rem, 1fr)); gap: .35rem; padding: .5rem .4rem; min-width: 15rem; } .attach-item { display: flex; flex-direction: column; align-items: center; gap: .4rem; padding: .7rem .3rem .6rem; border: 0; border-radius: var(--cc-radius-card); background: transparent; color: var(--cc-text); font: inherit; font-size: 12.5px; cursor: pointer; transition: background var(--cc-t); } .attach-item:hover { background: var(--cc-hover); } .attach-item.active .attach-ico { background: var(--cc-accent); color: var(--cc-on-accent); } .attach-ico { width: 2.9rem; height: 2.9rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--cc-accent-soft); color: var(--cc-accent); font-size: 1.25rem; transition: background var(--cc-t), color var(--cc-t); } .attach-item input[type=file] { display: none; } /* P16: ⋯-menuen i chat-headeren (genbruger press-item-rækkerne). */ .hdr-menu { display: flex; flex-direction: column; padding: .3rem 0; min-width: 13rem; } .hdr-menu .press-item { text-decoration: none; color: var(--cc-text); } .hdr-menu-sep { height: 1px; margin: .3rem .75rem; background: var(--cc-border); } .hdr-menu-caret { margin-left: auto; color: var(--cc-text-secondary); } .hdr-menu-sub { display: flex; flex-direction: column; background: var(--cc-hover); } .hdr-menu-sub .press-item.on { color: var(--cc-accent); font-weight: 600; } .breakaway-create { gap: .55rem; padding: .85rem; min-width: min(22rem, 90vw); } .breakaway-create .breakaway-title { margin: 0; font-size: 1.05rem; } .breakaway-create .profile-hint { margin: 0 0 .15rem; } .room-media { width: min(34rem, 90vw); max-height: min(34rem, 72vh); overflow-y: auto; padding: .8rem; } .room-media h3 { margin: 0 0 .7rem; font-size: 1.05rem; } .room-media-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .45rem; } .room-media-item { display: flex; min-width: 0; flex-direction: column; gap: .3rem; padding: 0; overflow: hidden; border: 1px solid var(--cc-border); border-radius: var(--cc-radius-card); background: var(--cc-bg-elevated); color: var(--cc-text-secondary); text-align: left; font: inherit; font-size: 11px; cursor: pointer; } .room-media-item:hover { border-color: var(--cc-accent); } .room-media-item img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--cc-hover); } .room-media-item span { padding: 0 .4rem .4rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (max-width: 899.98px) { .room-media { width: auto; max-height: 68vh; padding: .75rem; } .room-media-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 900px) { /* SheetComponent er display:contents på desktop, så P26-fladerne bærer selv popover-krom og position — forankret ved headerens ⋯-knap. */ .cc-sheet .hdr-menu, .cc-sheet .room-media { position: absolute; top: 3.75rem; right: .75rem; z-index: 60; width: min(22rem, calc(100% - 1.5rem)); max-height: calc(100dvh - 5rem); overflow-y: auto; background: var(--cc-bg-elevated); border: 1px solid var(--cc-border); border-radius: var(--cc-radius-card); box-shadow: var(--cc-shadow-float); animation: cc-pop 140ms var(--cc-ease); } .cc-sheet .breakaway-create { padding: .9rem; } .cc-sheet .room-media { width: min(34rem, calc(100% - 1.5rem)); } /* Mere specifik og placeret efter den fælles chat-menu-regel: P22- wizardens top må ikke blive sat samtidig med dens bund (det ville strække popoveren til hele sidebarens højde). */ .cc-sheet .hdr-menu.rl-create-flow { top: auto; bottom: 4.8rem; right: 1rem; left: auto; height: auto; width: min(25rem, calc(100% - 2rem)); max-height: min(43rem, calc(100dvh - 6rem)); background: var(--cc-bg-elevated); opacity: 1; } } .pending-image { display: flex; align-items: center; gap: .4rem; margin: 0 1rem; padding: .35rem .6rem; border: 1px solid var(--accent-border); border-radius: 10px; background: var(--accent-soft); font-size: .82rem; width: fit-content; } /* ---- Recap view ---- */ .recap-wrap { max-width: 820px; margin: 0 auto; padding-bottom: 2rem; } .recap-controls { display: flex; gap: .5rem; padding: 1rem; } .recap-controls .name-field { padding: .55rem .7rem; border: 1px solid var(--input-border); border-radius: 8px; background: var(--surface); color: var(--text); width: 180px; } .recap-controls .send-btn { padding: .55rem 1.1rem; background: var(--accent); color: var(--on-accent); border: 0; border-radius: 8px; font-weight: 600; cursor: pointer; } .recap-controls .send-btn:disabled { opacity: .5; cursor: default; } .recap-summary { padding: 0 1rem; } .recap-headline { font-size: 1.05rem; } .recap-section { margin-top: 1.2rem; } .recap-section h2 { font-size: 1rem; margin-bottom: .5rem; } .recap-activity { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .25rem; } .recap-messages { display: flex; flex-direction: column; gap: .6rem; } .msg.mention { background: var(--warn-soft); border: 1px solid var(--warn-border); } .msg.important { background: var(--appt-soft); border: 1px solid var(--appt-border); margin-bottom: .6rem; } .important-reason { font-size: .72rem; padding: .1rem .5rem; border-radius: 999px; background: var(--accent-soft); color: var(--appt-ink); white-space: nowrap; } .recap-important-empty { color: var(--muted); font-size: .9rem; } .mark-seen { margin-top: 1.2rem; padding: .55rem 1.1rem; background: var(--success); color: #fff; border: 0; border-radius: 8px; font-weight: 600; cursor: pointer; } .digest-hint { color: var(--muted); font-size: .85rem; margin: 0 0 .5rem; } .digest-controls { display: flex; gap: .5rem; margin-bottom: .6rem; flex-wrap: wrap; } .digest-btn { padding: .4rem .9rem; border: 1px solid var(--accent-border); background: var(--surface); color: var(--accent); border-radius: 8px; font-size: .85rem; font-weight: 600; cursor: pointer; } .digest-btn:hover { background: var(--accent-soft); } .digest-btn:disabled { opacity: .5; cursor: default; } /* ---- D5: AI-identitet — view-switcher, resumé-kort, bot-bobler ---- */ /* Segmenteret kontrol (pill-gruppe). Temaer/Recap er AI → ✦-glimt + AI-ink. */ .view-switch { display: inline-flex; gap: 2px; padding: 3px; margin-top: .35rem; background: var(--cc-hover); border-radius: var(--cc-radius-pill); } .view-seg { display: inline-flex; align-items: center; gap: .3rem; padding: .28rem .7rem; border-radius: var(--cc-radius-pill); font-size: .82rem; font-weight: 600; line-height: 1; color: var(--cc-text-secondary); text-decoration: none; white-space: nowrap; border: 0; background: none; cursor: pointer; font-family: inherit; transition: background var(--cc-t), color var(--cc-t); } .view-seg:hover { color: var(--cc-text); } .view-seg.active { background: var(--cc-bg-elevated); color: var(--cc-text); box-shadow: var(--cc-shadow); } .view-seg.ai .view-seg-spark { color: var(--cc-ai-ink); } .view-seg.ai:hover, .view-seg.ai.active { color: var(--cc-ai-ink); } .view-seg.ai.active .view-seg-spark { color: var(--cc-ai-ink); } /* P18: fane-baren der binder /stars, /shop og /earnings sammen til én side. */ .stars-tabs { align-self: flex-start; margin-bottom: .15rem; } /* P18: scope-chips på /search (Mine chats · Offentlige rum) + rum-navne-hits. */ .search-scope { margin: .35rem 0 .55rem; } .search-room-matches { display: flex; flex-wrap: wrap; gap: .4rem; margin: .2rem 0 .6rem; } .search-room-match { text-decoration: none; } /* AI-resumé-badge: genbrugt sprog på recap-resumé, digest og aftaler. */ /* Badgen bærer hvid tekst, så den bruger en mørkere AI-gradient end de store gradient-flader — sikrer AA (hvid ≥ 6:1 på begge stop) i begge temaer. */ .ai-badge { display: inline-flex; align-items: center; gap: .3rem; padding: .15rem .55rem; border-radius: var(--cc-radius-pill); font-size: .72rem; font-weight: 700; letter-spacing: .01em; color: #fff; background: linear-gradient(135deg, #6A46D6, #8E2FB0); } .ai-badge .cc-icon { color: #fff; } /* Resumé-/digest-kort: tynd AI-gradient-topkant + ✦-badge. */ .ai-card { position: relative; margin-top: .5rem; padding: .85rem 1rem; border: 1px solid var(--cc-ai-border); border-radius: var(--cc-radius-card); background: var(--cc-bg-elevated); box-shadow: var(--cc-shadow); overflow: hidden; } .ai-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--cc-ai-grad); } .ai-card-head { display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; } .ai-card-head h2 { font-size: 1rem; margin: 0; color: var(--cc-text); } /* Recap-chatbottens svar må ALDRIG ligne et menneske: AI-gradient-kant. */ .msg.bot-q { align-self: flex-end; background: var(--cc-bubble-out); border-color: transparent; } .msg.bot-a { position: relative; align-self: flex-start; background: var(--cc-ai-soft); border: 1px solid var(--cc-ai-border); padding-left: .95rem; } .msg.bot-a::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; border-radius: 3px 0 0 3px; background: var(--cc-ai-grad); } .msg.bot-a strong, .msg.bot-q strong { color: var(--cc-ai-ink); } /* ---- Grouped (Temaer) view ---- */ .grouped-wrap { max-width: 820px; margin: 0 auto; padding-bottom: 2rem; } .grouped-empty { padding: 1rem; color: var(--muted); } .group-list { display: flex; flex-direction: column; gap: 1rem; padding: 1rem; } /* Tema-kort (DESIGN.md §5): elevated kort med 3px AI-gradient-venstrekant, temanavn 600 + TL;DR i sekundær, foldbare. */ .group-card { position: relative; border: 1px solid var(--cc-border); border-radius: var(--cc-radius-card); padding: .8rem 1rem .8rem 1.15rem; background: var(--cc-bg-elevated); box-shadow: var(--cc-shadow); overflow: hidden; } .group-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--cc-ai-grad); } .group-head { display: flex; align-items: baseline; gap: .5rem; margin-bottom: .6rem; width: 100%; background: none; border: 0; padding: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; } .group-head h2 { font-size: 1rem; font-weight: 600; margin: 0; color: var(--cc-text); } .group-caret { color: var(--cc-text-secondary); display: inline-flex; align-items: center; } .group-count { color: var(--cc-text-secondary); font-size: .78rem; white-space: nowrap; margin-left: auto; } .group-tldr { display: flex; align-items: baseline; gap: .35rem; margin: 0 0 .6rem; padding: .35rem .6rem; background: var(--cc-ai-soft); border-radius: 8px; color: var(--cc-text-secondary); font-size: .82rem; } .group-tldr .cc-icon { color: var(--cc-ai-ink); flex-shrink: 0; align-self: center; } .group-messages { display: flex; flex-direction: column; gap: .5rem; } .noise-note { padding: 0 1rem; color: var(--muted); font-size: .85rem; } .noise-toggle { background: none; border: 0; padding: 0; color: var(--muted); font-size: .85rem; cursor: pointer; text-decoration: underline; display: inline-flex; align-items: center; gap: .3rem; } .noise-list { display: flex; flex-direction: column; gap: .4rem; margin-top: .6rem; opacity: .7; } /* ---- Appointments ---- */ .appointments-wrap { max-width: 820px; margin: 0 auto; padding-bottom: 2rem; } .appointment-list { display: flex; flex-direction: column; gap: .7rem; padding: 1rem; } .appointment-card { display: flex; align-items: flex-start; gap: .8rem; border: 1px solid var(--border); border-radius: 12px; padding: .7rem .9rem; background: var(--surface); } .appointment-when { display: flex; flex-direction: column; align-items: center; min-width: 4.4rem; padding: .3rem .4rem; background: var(--accent-soft); border-radius: 10px; } .appointment-date { font-weight: 700; font-size: .85rem; color: var(--accent); white-space: nowrap; } .appointment-time { font-size: .8rem; color: var(--muted); } .appointment-body { flex: 1; min-width: 0; } .appointment-room { font-size: .78rem; font-weight: 700; color: var(--accent); text-decoration: none; } .appointment-room:hover { text-decoration: underline; } .appointment-badge { display: inline-flex; align-items: center; gap: .25rem; font-size: .7rem; padding: .1rem .5rem; border-radius: 999px; background: var(--accent-soft); color: var(--accent); white-space: nowrap; } /* AI-forslag bærer AI-identiteten (✦ + gradient, jf. DESIGN §1) — samme mørke AA-sikre gradient som .ai-badge, aldrig 🤖/warn-farver. */ .appointment-badge.suggested { background: linear-gradient(135deg, #6A46D6, #8E2FB0); color: #fff; } .ics-single { align-self: center; font-size: .78rem; color: var(--accent); text-decoration: none; white-space: nowrap; padding: .3rem .5rem; border: 1px solid var(--accent-border); border-radius: 8px; display: inline-flex; align-items: center; gap: .3rem; } /* P20/B1: badges må aldrig overlappe .ics-knappen eller klippes ved 390px — meta-rækken wrapper, og på smal skærm stakkes kortet med knappen nederst. */ .appointment-card .msg-meta { flex-wrap: wrap; row-gap: .25rem; } @media (max-width: 480px) { .appointment-card { flex-wrap: wrap; } .appointment-card .ics-single { margin-left: auto; } } .ics-single:hover { background: var(--accent-soft); } /* Trin 54: påmindelses-vælgeren — diskret række under beskedteksten. */ .reminder-row { display: inline-flex; align-items: center; gap: .4rem; margin-top: .45rem; color: var(--muted); } .reminder-select { width: auto; font-size: .78rem; padding: .25rem .5rem; border-radius: 8px; } .ics-all { font-size: .82rem; color: var(--accent); text-decoration: none; padding: .35rem .7rem; border: 1px solid var(--accent-border); border-radius: 8px; white-space: nowrap; display: inline-flex; align-items: center; gap: .3rem; } .ics-all:hover { background: var(--accent-soft); } /* ---- Min uge (trin 55) ---- */ .myweek-wrap { max-width: 820px; margin: 0 auto; padding-bottom: 2rem; } .myweek-list { display: flex; flex-direction: column; gap: .7rem; padding: 1rem; } .myweek-total { margin: 0; font-size: .82rem; color: var(--muted); } .myweek-refresh { display: inline-flex; align-items: center; gap: .35rem; font-size: .82rem; color: var(--accent); padding: .35rem .7rem; border: 1px solid var(--accent-border); border-radius: 8px; background: none; cursor: pointer; white-space: nowrap; } .myweek-refresh:hover:not(:disabled) { background: var(--accent-soft); } .myweek-refresh:disabled { opacity: .5; cursor: default; } .myweek-card { display: flex; flex-direction: column; gap: .5rem; } .myweek-card-head { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; } .myweek-room { font-weight: 700; color: var(--accent); text-decoration: none; font-size: .95rem; } .myweek-room:hover { text-decoration: underline; } .myweek-count { font-size: .78rem; color: var(--muted); } .myweek-mentions { font-size: .7rem; padding: .1rem .5rem; border-radius: 999px; background: var(--accent-soft); color: var(--accent); white-space: nowrap; } .myweek-summary-row { display: flex; flex-direction: column; align-items: flex-start; gap: .35rem; } .myweek-summary-row .recap-ai-summary { margin: 0; } .myweek-authors { display: flex; gap: .6rem; flex-wrap: wrap; } .myweek-author { font-size: .75rem; color: var(--muted); } .myweek-open { font-size: .78rem; color: var(--accent); text-decoration: none; align-self: flex-end; } .myweek-open:hover { text-decoration: underline; } /* ---- Rum-statistik (trin 56) ---- */ .roomstats-wrap { max-width: 820px; margin: 0 auto; padding-bottom: 2rem; } .roomstats-list { display: flex; flex-direction: column; gap: .7rem; padding: 1rem; } .roomstats-pills { display: flex; gap: .5rem; flex-wrap: wrap; } .roomstats-card { border: 1px solid var(--border); border-radius: 12px; padding: .8rem .9rem; background: var(--surface); } .roomstats-card h2 { margin: 0 0 .6rem; font-size: .9rem; } .roomstats-empty { margin: 0; font-size: .82rem; color: var(--muted); } .stats-bars { display: flex; align-items: flex-end; gap: 4px; height: 120px; } .stats-col { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: .25rem; height: 100%; } .stats-bar { width: 100%; max-width: 26px; border-radius: 4px 4px 0 0; background: var(--accent); opacity: .85; } .stats-hours .stats-bar { max-width: 14px; } .stats-label { font-size: .6rem; color: var(--muted); white-space: nowrap; height: .8rem; } .stats-days .stats-col:nth-child(even) .stats-label { visibility: hidden; } @media (max-width: 480px) { .stats-days .stats-label { font-size: .52rem; } } .stats-members { display: flex; flex-direction: column; gap: .45rem; } .stats-member { display: grid; grid-template-columns: minmax(90px, 160px) 1fr auto; align-items: center; gap: .6rem; } .stats-member-name { font-size: .82rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .stats-member-track { height: 8px; border-radius: 999px; background: var(--accent-soft); overflow: hidden; } .stats-member-fill { height: 100%; border-radius: 999px; background: var(--accent); } .stats-member-count { font-size: .78rem; color: var(--muted); } /* ---- Rooms / breakaway ---- */ .rooms-wrap { max-width: 820px; margin: 0 auto; padding-bottom: 2rem; } .room-list { display: flex; flex-direction: column; gap: .7rem; padding: 0 1rem; } .room-card { border: 1px solid var(--border); border-radius: 10px; padding: .8rem 1rem; } .room-card.archived { opacity: .65; } .room-card-head { display: flex; justify-content: space-between; align-items: center; gap: .5rem; flex-wrap: wrap; } .room-name { font-weight: 700; font-size: 1.05rem; text-decoration: none; color: var(--text); } .room-name:hover { color: var(--accent); } .room-badges { display: flex; gap: .35rem; flex-wrap: wrap; } .badge { font-size: .7rem; padding: .15rem .5rem; border-radius: 999px; background: var(--accent-soft); color: var(--accent); } .badge.private { background: var(--warn-soft); color: var(--warn-text); } .badge.open { background: var(--success-soft); color: var(--success-text); } .badge.archived { background: var(--surface-muted); color: var(--muted); } .badge.paid { background: var(--warn-soft); color: var(--warn-text); font-weight: 700; } .badge.boost { background: var(--cc-ai-soft); color: var(--cc-ai-ink); font-weight: 700; } /* M10: rum-boost — bar + panel i rum-oversigten, ⚡-badge i sidebar-listen. */ .rl-boost { flex: 0 0 auto; margin-left: .3rem; font-size: .72rem; font-weight: 700; color: var(--cc-ai-ink); } .boost-panel { display: flex; flex-direction: column; gap: .45rem; margin-top: .55rem; padding: .7rem .8rem; border-radius: 12px; background: var(--cc-bg-elevated); border: 1px solid var(--cc-border); } .boost-head { display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; font-size: .9rem; } .boost-bar { height: 8px; border-radius: 999px; background: var(--cc-bg-app); border: 1px solid var(--cc-border); overflow: hidden; } .boost-bar-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--cc-accent), var(--cc-ai-ink)); transition: width 300ms var(--cc-ease); } /* Boost-perk niveau 2: større gave-fest (banner; partiklerne skaleres i markup). */ .gift-overlay.boosted .gift-banner { font-size: 1.1rem; padding: .8rem 1.3rem; } .room-sub-status { font-size: .78rem; color: var(--muted); align-self: center; } .room-paid-form { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin-bottom: .5rem; } .room-paid-form .room-paid-price { width: 10rem; } .room-card-meta { font-size: .8rem; color: var(--muted); margin-top: .3rem; display: flex; gap: .35rem; } .room-actions { display: flex; gap: .5rem; margin-top: .6rem; flex-wrap: wrap; } .room-btn { padding: .35rem .8rem; border: 1px solid var(--accent-border); background: var(--surface); color: var(--accent); border-radius: 8px; font-size: .82rem; font-weight: 600; cursor: pointer; } .room-btn:hover { background: var(--accent-soft); } .room-btn.leave { border-color: var(--warn-border); color: var(--warn-text); } .room-btn.delete { border-color: var(--danger-border); color: var(--danger); } .room-create { margin: 1.5rem 1rem 0; padding: 1rem; border: 1px dashed var(--accent-border); border-radius: 10px; } .room-create h2 { font-size: 1rem; margin: 0 0 .6rem; } .room-create-form { display: flex; flex-direction: column; gap: .5rem; } .room-create-form input[type="text"], .room-create-form input:not([type]) { padding: .55rem .7rem; border: 1px solid var(--input-border); border-radius: 8px; background: var(--surface); color: var(--text); } .room-radio { font-size: .9rem; display: flex; gap: .4rem; align-items: center; } .room-banner { margin: .8rem 1rem; padding: .7rem 1rem; border-radius: 10px; background: var(--surface-muted); font-size: .92rem; } .room-banner.locked { background: var(--warn-soft); } /* U7: Deltag-banner for ikke-medlemmer i åbne rum. */ .room-banner.join-banner { display: flex; align-items: center; gap: .8rem; background: var(--accent-faint); border: 1px solid var(--cc-border); } .join-banner span { flex: 1; min-width: 0; } .join-banner-btn { flex-shrink: 0; border: 0; border-radius: var(--cc-radius-pill); padding: .45rem 1.1rem; background: var(--cc-accent); color: var(--cc-on-accent); font-size: .88rem; font-weight: 600; cursor: pointer; transition: filter var(--cc-t); } .join-banner-btn:hover { filter: brightness(1.08); } /* Onboarding-guide (trin 40): vises indtil brugeren afviser den permanent. */ /* min-height 0 + egen scroll: kortet er flex-barn af .chat-wrap og SKAL kunne vige når composeren løftes (OS-tastatur/P13-panel) — ellers skubbes composeren under panelet. */ .onboarding-card { margin: .8rem 1rem; padding: .8rem 1rem; border-radius: 12px; background: var(--accent-soft); border: 1px solid var(--accent-border); font-size: .92rem; min-height: 0; overflow-y: auto; } .onboarding-head { display: flex; justify-content: space-between; align-items: center; gap: .5rem; } .onboarding-head strong { display: inline-flex; align-items: center; gap: .4rem; } .ob-logo { width: 22px; height: 22px; } .onboarding-close { border: none; background: none; cursor: pointer; color: var(--muted); padding: .2rem .4rem; border-radius: 6px; min-width: 2.5rem; min-height: 2rem; display: inline-flex; align-items: center; justify-content: center; } .onboarding-close:hover { background: var(--accent-soft-hover); color: var(--text); } .onboarding-list { margin: .5rem 0; padding-left: 1.2rem; display: grid; gap: .35rem; } .onboarding-actions { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-top: .3rem; } .onboarding-demo { display: inline-block; padding: .45rem .8rem; border-radius: 8px; background: var(--accent); color: var(--on-accent); text-decoration: none; font-weight: 600; } .onboarding-demo:hover { background: var(--accent-hover); color: var(--on-accent); } .onboarding-dismiss { padding: .45rem .8rem; border-radius: 8px; border: 1px solid var(--accent-border); background: var(--surface); color: var(--text); cursor: pointer; } .onboarding-dismiss:hover { background: var(--accent-soft-hover); } .room-error { color: var(--danger); font-size: .85rem; padding: 0 1rem; } /* ---- Search ---- */ .search-wrap { max-width: 820px; margin: 0 auto; padding-bottom: 2rem; } /* /search genbruger .chatsearch-mønsteret (R2); kun resultatlisten er egen. */ .search-count { padding: .6rem 1rem 0; color: var(--muted); font-size: .85rem; margin: 0; } .search-results { display: flex; flex-direction: column; gap: .5rem; padding: .6rem 1rem 0; } .search-hit { display: block; border: 1px solid var(--border); border-radius: 10px; padding: .6rem .8rem; text-decoration: none; color: inherit; } .search-hit:hover { border-color: var(--accent); background: var(--accent-faint-hover); } .search-hit-meta { display: flex; gap: .5rem; font-size: .75rem; color: var(--muted); margin-bottom: .2rem; align-items: baseline; } .search-hit-room { color: var(--accent); font-weight: 700; } .search-hit-text { font-size: .92rem; white-space: pre-wrap; word-break: break-word; } /* ---- Auth pages (DESIGN.md §5): centreret elevated kort m. app-logo/navn + diskret AI-gradient-detalje — første møde ligner IKKE en Bootstrap-form. */ .auth-wrap { width: 100%; max-width: 400px; min-height: 100dvh; margin: 0 auto; padding: 2rem 1rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; } .auth-card { position: relative; width: 100%; background: var(--cc-bg-elevated); border: 1px solid var(--cc-border); border-radius: 16px; padding: 1.8rem 1.6rem; box-shadow: var(--cc-shadow-float); overflow: hidden; } .auth-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--cc-ai-grad); } /* DESIGN.md §8: Saga-logo 64px centreret over formularen + wordmark. */ .auth-brand { display: flex; flex-direction: column; align-items: center; gap: .45rem; margin-bottom: 1.2rem; } .auth-logo-img { width: 64px; height: 64px; } .auth-appname { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.5px; color: var(--cc-text); } .auth-card h1 { font-size: 1.5rem; margin: 0 0 .3rem; color: var(--cc-text); } .auth-card .muted { margin: 0 0 1rem; color: var(--cc-text-secondary); font-size: .88rem; } .auth-form { display: flex; flex-direction: column; gap: .6rem; } .auth-form input { padding: .7rem .8rem; border: 1px solid var(--cc-border); border-radius: 10px; background: var(--cc-bg-app); color: var(--cc-text); font: inherit; font-size: 15px; transition: border-color var(--cc-t); } .auth-form input:focus { outline: none; border-color: var(--cc-accent); } .auth-form input::placeholder { color: var(--cc-text-secondary); } .language-card { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin: .2rem 0; padding: .65rem; border: 1px solid var(--cc-border); border-radius: 12px; background: var(--cc-bg-app); } .language-legend { grid-column: 1 / -1; color: var(--cc-text-secondary); font-size: .78rem; font-weight: 600; } .language-option { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: .45rem; padding: .55rem; border: 1px solid transparent; border-radius: 9px; cursor: pointer; } .language-option:hover { background: var(--cc-accent-soft); border-color: var(--cc-border); } .language-option input { width: auto; padding: 0; accent-color: var(--cc-accent); } .language-option strong, .language-option small { display: block; } .language-option small { color: var(--cc-text-secondary); font-size: .7rem; margin-top: .08rem; } .auth-form .send-btn { margin-top: .3rem; padding: .72rem 1rem; border: 0; border-radius: 10px; background: var(--cc-accent); color: var(--cc-on-accent); font: inherit; font-weight: 600; font-size: 15px; cursor: pointer; transition: background var(--cc-t); } .auth-form .send-btn:hover { background: var(--cc-accent-hover); } .legacy-login { margin-top: .9rem; border-top: 1px solid var(--cc-border); padding-top: .75rem; } .legacy-login summary { cursor: pointer; color: var(--cc-text-secondary); font-size: .86rem; margin-bottom: .65rem; } .testmode-code { padding: .65rem .75rem; border: 1px dashed var(--cc-accent); border-radius: 10px; background: var(--cc-accent-soft); color: var(--cc-text); text-align: center; } .testmode-code strong { color: var(--cc-accent); font-size: .72rem; letter-spacing: .08em; } .testmode-code code { font-size: 1.15rem; font-weight: 700; letter-spacing: .16em; } .profile-inline-form { display: flex; gap: .5rem; align-items: center; } .profile-inline-form .text-field { flex: 1; min-width: 0; } /* Trin 66 (360px): knappen må aldrig knække over flere linjer — feltet viger. */ .profile-inline-form .room-btn { flex: none; white-space: nowrap; } .auth-alt { margin: 1rem 0 0; font-size: .9rem; color: var(--cc-text-secondary); } .auth-alt a { color: var(--cc-accent); font-weight: 600; } .auth-tagline { display: inline-flex; align-items: center; gap: .35rem; margin: 0; color: var(--cc-text-secondary); font-size: .84rem; } .auth-tagline .cc-icon { color: var(--cc-ai-ink); } /* ---- PWA / mobil-finpudsning ---- */ /* P6: composeren følger tastaturet — --kb-inset sættes af visualViewport- lytteren i App.razor (0 på browsere der selv resizer layout-viewporten). Skal stå FØR @supports-blokken, så safe-area-varianten vinder. */ .chat-input { padding-bottom: calc(.8rem + var(--kb-inset, 0px)); } /* Notch/home-indicator (installeret som PWA med viewport-fit=cover) */ @supports (padding: env(safe-area-inset-bottom)) { .app-shell { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); } .chat-input { padding-bottom: calc(.7rem + env(safe-area-inset-bottom) + var(--kb-inset, 0px)); } } /* P6: mobil-skal-finish — appen skal føles som en app, ikke en webside. Skallen gummibånds-scroller ALDRIG (kun beskedstrøm/lister må, og de holder deres overscroll for sig selv), ingen tap-flash nogen steder. */ html, body { overscroll-behavior: none; } body { -webkit-tap-highlight-color: transparent; } .chat-messages, .rl-rooms, .cc-sheet-panel { overscroll-behavior: contain; } @media (max-width: 899.98px) { /* P16 declutter: rum-dropdownen er redundant på mobil (tilbage-pilen ER rum-skiftet) — headeren holder sig til tilbage · navn · 🔍 · ⋯. */ .chat-header .room-select { display: none; } /* Skjulte scrollbars: indholdet scroller, men kromen er usynlig som i en rigtig app. Kun mobil — desktop beholder synlig affordance. */ .chat-messages, .rl-rooms, .cc-sheet-panel { scrollbar-width: none; } .chat-messages::-webkit-scrollbar, .rl-rooms::-webkit-scrollbar, .cc-sheet-panel::-webkit-scrollbar { display: none; } /* Touch-mål ≥44px på de knapper fingre faktisk rammer. */ .comp-btn, .back-btn { width: 2.75rem; height: 2.75rem; } /* P27: én linje matcher de 44px høje touch-knapper præcist. Scrollbaren er usynlig på mobil selv efter linje 6; feltet kan stadig scrolle. */ .chat-input textarea.text-field { min-height: 2.75rem; padding-block: calc((2.75rem - 1.35em) / 2); scrollbar-width: none; } .chat-input textarea.text-field::-webkit-scrollbar { display: none; } } /* Touch-venlige mål på touch-enheder */ @media (pointer: coarse) { .filter-btn, .room-btn, .send-btn, .appt-suggest-btn, .mark-seen { min-height: 2.5rem; } .reaction-chip, .reaction-add { min-height: 1.9rem; min-width: 2.2rem; } .msg-action { font-size: .95rem; padding: .2rem .4rem; } .room-select, .chatsearch-fields input, .chatsearch-fields select { min-height: 2.5rem; } } /* Presence (online nu) */ .presence-count { color: var(--success-ink); font-weight: 600; } .presence-dot { width: .55rem; height: .55rem; border-radius: 50%; background: var(--input-border); flex-shrink: 0; display: inline-block; } .presence-dot.online { background: var(--online); box-shadow: 0 0 0 2px var(--success-soft); } /* Rum-indstillinger + slet-bekræftelse */ .room-description { color: var(--muted); font-size: .85rem; margin: .1rem 0 .2rem; } .room-settings-form { display: flex; flex-direction: column; gap: .3rem; margin-bottom: .6rem; } .room-settings-form .text-field { padding: .45rem .6rem; border: 1px solid var(--input-border); border-radius: 8px; background: var(--surface); color: var(--text); font: inherit; } .room-settings-form .room-btn { align-self: flex-start; } .room-settings-name-row { display: flex; gap: .4rem; } .room-settings-name-row .room-settings-icon { width: 4rem; text-align: center; } .room-settings-name-row .text-field:last-child { flex: 1; } .room-delete-confirm { display: flex; flex-direction: column; gap: .4rem; margin-top: .5rem; padding: .6rem .7rem; border: 1px solid var(--danger-border); border-radius: 10px; background: var(--danger-soft); font-size: .85rem; } .room-delete-confirm .text-field { padding: .45rem .6rem; border: 1px solid var(--input-border); border-radius: 8px; background: var(--surface); color: var(--text); } .room-delete-confirm .room-btn { align-self: flex-start; } .room-btn:disabled { opacity: .45; cursor: not-allowed; } /* Rum-administration (medlemmer + invitationer) */ .room-admin { margin-top: .6rem; padding: .7rem .8rem; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-soft); } .room-admin h3 { font-size: .9rem; margin: .4rem 0 .3rem; } .member-list, .invite-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; } .member-row, .invite-row { display: flex; align-items: center; gap: .5rem; font-size: .85rem; flex-wrap: wrap; } .member-name { font-weight: 600; } .invite-link-row { display: flex; gap: .4rem; margin-top: .4rem; align-items: center; } .invite-link-row .invite-link { flex: 1; padding: .4rem .6rem; border: 1px solid var(--input-border); border-radius: 8px; font-size: .8rem; color: var(--muted); background: var(--surface); } .invite-list { margin-top: .4rem; } .room-btn.active { background: var(--accent-soft); } .search-match { background: var(--highlight); border-radius: 3px; padding: 0 .1em; } /* Direkte beskeder */ .invite-wrap { max-width: 560px; margin: 3rem auto; padding: 0 1rem; text-align: center; } .invite-wrap .room-btn { display: inline-block; text-decoration: none; margin-top: .8rem; } /* Profil-side */ .profile-wrap { max-width: 560px; margin: 0 auto; padding: 1rem; } .profile-wrap h1 { font-size: 1.4rem; margin-bottom: .1rem; } .profile-card { display: flex; flex-direction: column; gap: .3rem; border: 1px solid var(--border); border-radius: 12px; padding: 1rem; background: var(--surface); margin-top: .8rem; } .profile-avatar-row { display: flex; align-items: center; gap: 1rem; margin-bottom: .6rem; } .profile-avatar { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; border: 1px solid var(--border); background: var(--surface-alt); } .profile-avatar-actions { display: flex; flex-direction: column; gap: .4rem; align-items: flex-start; max-width: 60%; } .profile-avatar-actions label { margin-bottom: 0; } .profile-avatar-actions label input[type=file] { display: none; } .profile-label { font-weight: 600; font-size: .85rem; margin-top: .5rem; } .profile-hint { color: var(--muted); font-size: .78rem; } .profile-wrap .text-field { padding: .55rem .7rem; border: 1px solid var(--input-border); border-radius: 8px; background: var(--surface); color: var(--text); font: inherit; } .profile-about { resize: vertical; } .profile-saved { color: var(--success-ink); font-weight: 600; margin: .2rem 0 0; font-size: .85rem; } .room-btn.primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); align-self: flex-start; margin-top: .6rem; } .room-btn.primary:hover { background: var(--accent-hover); } .profile-wrap .room-error { padding: 0; margin: .2rem 0 0; } .theme-select { max-width: 16rem; } /* Trin 59: aktive enheder på profilen */ .pf-device { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .55rem .7rem; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-alt); } .pf-device.current { border-color: var(--accent); } .pf-device-info { display: flex; flex-direction: column; gap: .1rem; min-width: 0; } .pf-device-name { font-weight: 600; font-size: .9rem; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; } .pf-device-current { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--accent); background: var(--accent-soft); border-radius: 999px; padding: .1rem .5rem; } /* ── Fase M: stjerner & butik ─────────────────────────────────────────── */ .rl-stars-chip { display: inline-flex; align-items: center; gap: .2rem; padding: .2rem .55rem; border-radius: 999px; background: var(--cc-warn-soft); border: 1px solid var(--cc-warn-border); color: var(--cc-warn-ink); font-size: 12.5px; font-weight: 600; text-decoration: none; white-space: nowrap; } .rl-stars-chip:hover { filter: brightness(.97); } .stars-body { flex: 1; overflow-y: auto; padding: .9rem 1rem 1.5rem; } .stars-balance { margin-left: auto; padding: .25rem .7rem; border-radius: 999px; background: var(--cc-warn-soft); border: 1px solid var(--cc-warn-border); color: var(--cc-warn-ink); font-weight: 700; font-size: .95rem; white-space: nowrap; } .stars-testmode { padding: .55rem .8rem; border-radius: var(--cc-radius-card); background: var(--cc-warn-soft); border: 1px solid var(--cc-warn-border); color: var(--cc-warn-ink); font-size: .9rem; margin-bottom: .8rem; } .stars-receipt { padding: .55rem .8rem; border-radius: var(--cc-radius-card); background: var(--cc-success-soft); color: var(--cc-success-ink); font-size: .9rem; margin-bottom: .8rem; } .stars-error { padding: .55rem .8rem; border-radius: var(--cc-radius-card); background: var(--cc-danger-soft); border: 1px solid var(--cc-danger-border); color: var(--cc-danger); font-size: .9rem; margin-bottom: .8rem; } .stars-section-title { font-size: 1rem; font-weight: 700; color: var(--cc-text); margin: 1rem 0 .5rem; /* P20/B3: links i titlen (fx "Monetiserings-panel →") må wrappe pænt i stedet for at flyde ud over kanten på 390px. */ display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; } .stars-note { color: var(--cc-text-secondary); font-size: .85rem; margin: .6rem 0 0; } .stars-empty { color: var(--cc-text-secondary); font-size: .9rem; } .stars-packages { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .6rem; } .stars-package { position: relative; display: flex; flex-direction: column; align-items: center; gap: .25rem; padding: .9rem .6rem .8rem; border-radius: var(--cc-radius-card); cursor: pointer; background: var(--cc-bg-elevated); border: 1px solid var(--cc-border); color: var(--cc-text); font: inherit; transition: border-color .12s ease, transform .12s ease; } .stars-package:hover { border-color: var(--cc-accent); transform: translateY(-1px); } .stars-package-amount { font-size: 1.05rem; font-weight: 700; } .stars-package-price { color: var(--cc-text-secondary); font-size: .9rem; } .stars-package-save { position: absolute; top: -.5rem; right: .4rem; padding: .1rem .45rem; border-radius: 999px; background: var(--cc-success-soft); color: var(--cc-success-ink); border: 1px solid var(--cc-success); font-size: .72rem; font-weight: 700; } .stars-ledger { display: flex; flex-direction: column; gap: .4rem; } .stars-entry { display: flex; align-items: center; gap: .6rem; padding: .55rem .7rem; border-radius: var(--cc-radius-card); background: var(--cc-bg-elevated); border: 1px solid var(--cc-border); } .stars-entry-icon { font-size: 1.2rem; } .stars-entry-main { display: flex; flex-direction: column; gap: .1rem; min-width: 0; } .stars-entry-title { font-weight: 600; font-size: .92rem; color: var(--cc-text); } .stars-entry-desc { color: var(--cc-text-secondary); font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .stars-entry-time { color: var(--cc-text-secondary); font-size: .75rem; } .stars-entry-amounts { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: .1rem; white-space: nowrap; } .stars-entry-amount { font-weight: 700; font-size: .92rem; } .stars-entry-amount.credit { color: var(--cc-success-ink); } .stars-entry-amount.debit { color: var(--cc-danger); } .stars-entry-after { color: var(--cc-text-secondary); font-size: .75rem; } .stars-scrim { position: fixed; inset: 0; z-index: 60; background: var(--cc-scrim); display: flex; align-items: center; justify-content: center; padding: 1rem; } .stars-modal { width: min(420px, 100%); padding: 1.1rem 1.2rem; border-radius: 14px; background: var(--cc-bg-elevated); border: 1px solid var(--cc-border); box-shadow: 0 12px 40px rgba(0, 0, 0, .25); animation: cc-pop .14s ease; } .stars-modal h2 { margin: 0 0 .6rem; font-size: 1.1rem; color: var(--cc-text); } .stars-modal-line { margin: 0 0 .4rem; color: var(--cc-text); } .stars-modal-provider { margin: 0 0 .9rem; color: var(--cc-warn-ink); font-size: .85rem; font-weight: 600; } .stars-modal-actions { display: flex; justify-content: flex-end; gap: .5rem; } .stars-cancel { padding: .45rem .9rem; border-radius: 9px; border: 1px solid var(--cc-border); background: transparent; color: var(--cc-text); font: inherit; cursor: pointer; } .stars-cancel:hover { background: var(--cc-hover); } .stars-confirm { padding: .45rem .9rem; border-radius: 9px; border: none; background: var(--cc-accent); color: var(--cc-on-accent); font: inherit; font-weight: 600; cursor: pointer; } .stars-confirm:hover { background: var(--cc-accent-hover); } .stars-confirm:disabled, .stars-cancel:disabled { opacity: .6; cursor: default; } /* ---- Indtægter & udbetaling (M8) ---- */ .earn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .6rem; } .earn-card { display: flex; flex-direction: column; gap: .15rem; padding: .8rem .9rem; border-radius: var(--cc-radius-card); background: var(--cc-bg-elevated); border: 1px solid var(--cc-border); } .earn-card.highlight { border-color: var(--cc-accent); } .earn-card-label { color: var(--cc-text-secondary); font-size: .8rem; font-weight: 600; } .earn-card-value { color: var(--cc-text); font-size: 1.15rem; font-weight: 700; } .earn-card-sub { color: var(--cc-text-secondary); font-size: .75rem; } .earn-payout-form { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; } .earn-payout-amount { max-width: 10rem; } .earn-admin-actions { margin-left: auto; display: flex; gap: .4rem; flex-wrap: wrap; justify-content: flex-end; } .payout-badge { display: inline-block; margin-left: .4rem; padding: .05rem .5rem; border-radius: 999px; font-size: .72rem; font-weight: 700; vertical-align: middle; } .payout-badge.pending { background: var(--cc-warn-soft); border: 1px solid var(--cc-warn-border); color: var(--cc-warn-ink); } .payout-badge.paid { background: var(--cc-success-soft); color: var(--cc-success-ink); } .payout-badge.closed { background: var(--cc-hover); color: var(--cc-text-secondary); } /* ---- Admin-monetization-panel (M9) ---- */ .admin-config { display: flex; flex-direction: column; gap: .6rem; align-items: flex-start; padding: .9rem; border-radius: var(--cc-radius-card); background: var(--cc-bg-elevated); border: 1px solid var(--cc-border); } .admin-field { display: flex; flex-direction: column; gap: .2rem; font-size: .85rem; color: var(--cc-text-secondary); font-weight: 600; } .admin-field.gift { flex-direction: row; align-items: center; gap: .45rem; } .admin-num { max-width: 9rem; } .admin-subtitle { margin: .5rem 0 0; font-size: .9rem; color: var(--cc-text); } .admin-pack-row { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; } .admin-pack-sep { color: var(--cc-text-secondary); font-size: .85rem; } .admin-gifts { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; } .admin-windows { display: flex; gap: .45rem; margin-bottom: .6rem; flex-wrap: wrap; } .admin-refund { font-size: .78rem; padding: .25rem .6rem; } /* ---- Gaver (M3): katalog-palette, chips på beskeder og fuldskærms-fejring ---- */ .gift-direct-btn { border: 0; background: transparent; color: var(--cc-text-secondary); width: 2rem; height: 2rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; transition: color var(--cc-t), background var(--cc-t); } .gift-direct-btn:hover { color: var(--cc-accent); background: var(--cc-hover); } .gift-palette { display: flex; gap: .35rem; flex-wrap: wrap; align-items: stretch; max-width: 24rem; margin-top: .3rem; padding: .5rem .6rem; border: 1px solid var(--cc-border); border-radius: var(--cc-radius-card); background: var(--cc-bg-elevated); box-shadow: var(--cc-shadow-float); animation: cc-pop 140ms var(--cc-ease); } .gift-palette.direct { margin: .5rem clamp(.6rem, 4vw, 4rem) 0; } .gift-palette-title { flex-basis: 100%; font-size: .8rem; font-weight: 600; color: var(--cc-text-secondary); } .gift-tier { display: flex; flex-direction: column; align-items: center; gap: .1rem; min-width: 3.4rem; padding: .35rem .45rem; border: 1px solid var(--cc-border); border-radius: 10px; background: transparent; font: inherit; cursor: pointer; transition: border-color var(--cc-t), background var(--cc-t), transform var(--cc-t); } .gift-tier:hover { border-color: var(--cc-accent); background: var(--cc-hover); transform: translateY(-1px); } .gift-tier-emoji { font-size: 1.25rem; line-height: 1.2; } .gift-tier-price { font-size: .72rem; color: var(--cc-text-secondary); white-space: nowrap; } .gift-error { flex-basis: 100%; font-size: .8rem; color: var(--cc-danger); } .msg-gifts { display: flex; gap: .25rem; flex-wrap: wrap; margin-top: .25rem; } .gift-chip { display: inline-flex; align-items: center; gap: .15rem; padding: .1rem .5rem; border: 1px solid var(--cc-ai-border); border-radius: 999px; background: var(--cc-ai-soft); font-size: .85rem; color: var(--cc-text); } /* Fuldskærms-fejringen: klik går altid igennem (pointer-events: none), og under stjerne-checkout-modalen (z 60) hvis begge skulle vises. */ .gift-overlay { position: fixed; inset: 0; z-index: 55; pointer-events: none; overflow: hidden; } .gift-particle { position: absolute; top: -8%; animation: cc-gift-fall 3s linear forwards; } .gift-banner { position: absolute; left: 50%; bottom: 18%; transform: translateX(-50%); max-width: min(92vw, 28rem); padding: .6rem 1rem; border-radius: 999px; background: var(--cc-bg-elevated); border: 1px solid var(--cc-ai-border); box-shadow: var(--cc-shadow-float); color: var(--cc-text); font-size: .95rem; text-align: center; animation: cc-pop 180ms var(--cc-ease); } @keyframes cc-gift-fall { 0% { transform: translateY(0) rotate(-8deg); opacity: 0; } 8% { opacity: 1; } 50% { transform: translateY(60vh) rotate(10deg) translateX(1.2rem); } 88% { opacity: 1; } 100% { transform: translateY(118vh) rotate(-6deg); opacity: 0; } } /* ---- Top-supportere + gavebadges (M4): status, aldrig adgang ---- */ .supporters-panel { display: flex; flex-direction: column; gap: .35rem; margin: .5rem clamp(.6rem, 4vw, 4rem) 0; padding: .6rem .75rem; border: 1px solid var(--cc-border); border-radius: var(--cc-radius-card); background: var(--cc-bg-elevated); box-shadow: var(--cc-shadow-float); animation: cc-pop 140ms var(--cc-ease); } .supporters-title { font-size: .85rem; font-weight: 600; color: var(--cc-text); } .supporters-empty { font-size: .85rem; color: var(--cc-text-secondary); } .supporter-row { display: flex; align-items: center; gap: .45rem; font-size: .9rem; } .supporter-rank { width: 1.5rem; text-align: center; flex-shrink: 0; } .supporter-avatar { width: 1.5rem; height: 1.5rem; border-radius: 50%; flex-shrink: 0; } .supporter-name { color: var(--cc-text); font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .supporter-stars { margin-left: auto; color: var(--cc-text-secondary); white-space: nowrap; } .profile-gift-badges { display: flex; gap: .4rem; flex-wrap: wrap; } .gift-badge { display: inline-flex; align-items: center; gap: .25rem; padding: .25rem .7rem; border: 1px solid var(--cc-ai-border); border-radius: 999px; background: var(--cc-ai-soft); font-size: .88rem; color: var(--cc-text); } .profile-optout { display: flex; align-items: center; gap: .45rem; margin-top: .9rem; font-size: .92rem; color: var(--cc-text); cursor: pointer; } .profile-optout input { accent-color: var(--cc-accent); width: 1.05rem; height: 1.05rem; } /* ---- Trådvisning (trin 45): "N svar"-badge + tråd-panel ---- */ .thread-badge { display: inline-flex; align-items: center; gap: .3rem; margin-top: .2rem; padding: .18rem .6rem; border: 1px solid var(--cc-border); border-radius: 999px; background: var(--cc-bg-elevated); color: var(--cc-accent); font-size: .78rem; font-weight: 600; cursor: pointer; transition: border-color var(--cc-t), background var(--cc-t); } .thread-badge:hover { border-color: var(--cc-accent); } .thread-panel { position: absolute; top: 0; right: 0; bottom: 0; z-index: 65; display: flex; flex-direction: column; width: min(360px, 100%); background: var(--cc-bg-elevated); border-left: 1px solid var(--cc-border); box-shadow: var(--cc-shadow-float); animation: cc-pop 140ms var(--cc-ease); } .thread-head { display: flex; align-items: center; gap: .5rem; padding: .7rem .9rem; border-bottom: 1px solid var(--cc-border); } .thread-title { display: inline-flex; align-items: center; gap: .4rem; font-size: .95rem; font-weight: 600; color: var(--cc-text); } .thread-close { margin-left: auto; } .thread-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: .8rem .9rem; display: flex; flex-direction: column; gap: .7rem; } .thread-root { padding: .6rem .75rem; border: 1px solid var(--cc-border); border-radius: var(--cc-radius-card); background: var(--cc-bg); } .thread-msg-meta { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; margin-bottom: .2rem; font-size: .82rem; color: var(--cc-text); } .thread-avatar { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; } .thread-time { color: var(--cc-text-secondary); font-size: .75rem; } .thread-empty { margin: .4rem 0; font-size: .88rem; color: var(--cc-text-secondary); } .thread-reply { display: flex; gap: .5rem; align-items: flex-start; } .thread-reply-col { min-width: 0; flex: 1; } .thread-panel .msg-text { font-size: .93rem; color: var(--cc-text); overflow-wrap: anywhere; } .thread-input { display: flex; align-items: flex-end; gap: .5rem; padding: .6rem .9rem; border-top: 1px solid var(--cc-border); padding-bottom: calc(.6rem + env(safe-area-inset-bottom, 0px)); } .thread-input .text-field { flex: 1; min-width: 0; resize: none; font: inherit; font-size: 15px; line-height: 1.35; padding: .5rem .7rem; max-height: 170px; color: var(--cc-text); background: var(--cc-bg); border: 1px solid var(--cc-border); border-radius: var(--cc-radius-input); transition: border-color var(--cc-t); } .thread-input .text-field:focus-visible { outline: none; border-color: var(--cc-accent); } .thread-input .text-field::placeholder { color: var(--cc-text-secondary); } @media (max-width: 899.98px) { /* Mobil: tråden er et fuldskærms-lag (P15: tilbage lukker kun laget). */ .thread-panel { position: fixed; inset: 0; width: auto; border-left: none; } } /* Smal skærm (mobil, ned til 360px) */ @media (max-width: 640.98px) { .chat-header { padding: .6rem .5rem; } .chat-header h1 { font-size: 1.15rem; } .room-select { max-width: 50%; } .msg { max-width: 90%; } .chat-messages { padding: .7rem .5rem; } .chatsearch, .chat-input { padding-left: .5rem; padding-right: .5rem; } .chatsearch-filterbtn .cs-label { display: none; } .chatsearch-fields { gap: .5rem; } .chatsearch-fields label { flex: 1 1 42%; } .chatsearch-fields input, .chatsearch-fields select { width: 100%; } .room-list, .noise-note, .group-list, .recap-summary, .search-results, .search-count, .appointment-list { padding-left: .5rem; padding-right: .5rem; } .room-create { margin-left: .5rem; margin-right: .5rem; } } /* DESIGN.md §6: bevægelse med mening — og slet ingen for dem der har bedt om ro. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; } /* M3: gave-fejringen bliver til det stille banner alene — partiklerne ville ellers stå frosset øverst på skærmen. */ .gift-particle { display: none !important; } } /* ---- M5: Catch-Up Plus — KUN pynt (Fase M-princip #1) ---- Gradient-navne kræver per-tema stop: intet farvepar kan læses AA på både hvid boble og mørk boble, så light får mørke stop og dark får lyse. */ :root { --plus-grad-aurora: linear-gradient(90deg, #6A46D6, #8E2FB0); --plus-grad-sunset: linear-gradient(90deg, #C2410C, #B91C5C); --plus-grad-ocean: linear-gradient(90deg, #0369A1, #0F766E); --plus-grad-royal: linear-gradient(90deg, #4338CA, #7E22CE); --plus-grad-steel: linear-gradient(90deg, #52616F, #3E4C59); --plus-grad-flame: linear-gradient(90deg, #B45309, #C2410C); --plus-grad-neon: linear-gradient(90deg, #059669, #0284C7); } html[data-theme="dark"] { --plus-grad-aurora: linear-gradient(90deg, #A995FF, #D48BF8); --plus-grad-sunset: linear-gradient(90deg, #FB923C, #F472B6); --plus-grad-ocean: linear-gradient(90deg, #38BDF8, #2DD4BF); --plus-grad-royal: linear-gradient(90deg, #818CF8, #C084FC); --plus-grad-steel: linear-gradient(90deg, #A9B6C2, #C7D2DC); --plus-grad-flame: linear-gradient(90deg, #FBBF24, #FB923C); --plus-grad-neon: linear-gradient(90deg, #34D399, #22D3EE); } @media (prefers-color-scheme: dark) { html:not([data-theme="light"]):not([data-theme="dark"]) { --plus-grad-aurora: linear-gradient(90deg, #A995FF, #D48BF8); --plus-grad-sunset: linear-gradient(90deg, #FB923C, #F472B6); --plus-grad-ocean: linear-gradient(90deg, #38BDF8, #2DD4BF); --plus-grad-royal: linear-gradient(90deg, #818CF8, #C084FC); --plus-grad-steel: linear-gradient(90deg, #A9B6C2, #C7D2DC); --plus-grad-flame: linear-gradient(90deg, #FBBF24, #FB923C); --plus-grad-neon: linear-gradient(90deg, #34D399, #22D3EE); } } /* ✦-badge + navnestil i strømmen. Author-row holder navn og badge på linje uden at bryde .msg-author's blok-layout i boblen. */ .msg-bubble .msg-author-row { display: flex; align-items: center; gap: .3rem; margin-bottom: .05rem; } .msg-author-row .msg-author { margin-bottom: 0; } .plus-badge { color: var(--cc-ai-ink); font-size: .72rem; line-height: 1; flex-shrink: 0; } .plus-name-aurora, .plus-name-sunset, .plus-name-ocean, .plus-name-royal, .plus-name-steel, .plus-name-flame, .plus-name-neon { background-clip: text; -webkit-background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } .plus-name-aurora { background-image: var(--plus-grad-aurora); } .plus-name-sunset { background-image: var(--plus-grad-sunset); } .plus-name-ocean { background-image: var(--plus-grad-ocean); } .plus-name-royal { background-image: var(--plus-grad-royal); } .plus-name-steel { background-image: var(--plus-grad-steel); } .plus-name-flame { background-image: var(--plus-grad-flame); } .plus-name-neon { background-image: var(--plus-grad-neon); } /* Animeret avatar-ring; reduced-motion-fallbacken øverst nuller pulsen, så ringen står stille — den forsvinder ikke. */ .msg-avatar.plus-ring { animation: plus-ring 2.6s ease-in-out infinite; box-shadow: 0 0 0 2px var(--cc-bg-chat), 0 0 0 4px var(--cc-ai-ink); } @keyframes plus-ring { 0%, 100% { box-shadow: 0 0 0 2px var(--cc-bg-chat), 0 0 0 4px var(--cc-ai-ink); } 50% { box-shadow: 0 0 0 2px var(--cc-bg-chat), 0 0 0 4px #B24BF3; } } /* Plus-reaktionspakken i pickeren — samme chips, blot på AI-soft flade. */ .reaction-chip.plus { background: var(--cc-ai-soft); border-color: var(--cc-ai-border); } /* Chat-skins (M5 Plus + M6-butikken): KUN det egne vindues flade- og boblefarver tones — tekst-tokens røres ikke, så AA-kontrasten fra DESIGN.md §3 består (lyse temaer forbliver meget lyse, mørke meget mørke). Hex-værdierne SKAL matche CosmeticsCatalog (testhåndhævet), og selektorerne er ukvalificerede, så butikkens preview-kort bruger præcis samme palet. */ .skin-sand { --cc-bg-chat: #EDE7DC; --cc-bubble-in: #FBF8F1; --cc-bubble-out: #E3D7BF; --mine: #E3D7BF; } .skin-graphite { --cc-bg-chat: #E4E6E9; --cc-bubble-in: #F7F8FA; --cc-bubble-out: #D3D7DD; --mine: #D3D7DD; } .skin-midnight { --cc-bg-chat: #DCE3F2; --cc-bubble-in: #F3F6FF; --cc-bubble-out: #C9D8F5; --mine: #C9D8F5; } .skin-meadow { --cc-bg-chat: #E0EEE2; --cc-bubble-in: #F4FBF4; --cc-bubble-out: #CFE8D2; --mine: #CFE8D2; } .skin-blush { --cc-bg-chat: #F3E4EA; --cc-bubble-in: #FDF4F7; --cc-bubble-out: #F4D3DF; --mine: #F4D3DF; } .skin-sakura { --cc-bg-chat: #F5E3E8; --cc-bubble-in: #FDF5F7; --cc-bubble-out: #F2CBD8; --mine: #F2CBD8; } .skin-ember { --cc-bg-chat: #F2E4DA; --cc-bubble-in: #FCF4EE; --cc-bubble-out: #F0CDB4; --mine: #F0CDB4; } .skin-nebula { --cc-bg-chat: #E5E1F2; --cc-bubble-in: #F6F4FD; --cc-bubble-out: #D4CCF0; --mine: #D4CCF0; } html[data-theme="dark"] .skin-sand { --cc-bg-chat: #1C1710; --cc-bubble-in: #2A2418; --cc-bubble-out: #4A3D22; --mine: #4A3D22; } html[data-theme="dark"] .skin-graphite { --cc-bg-chat: #14171B; --cc-bubble-in: #20242A; --cc-bubble-out: #3A414B; --mine: #3A414B; } html[data-theme="dark"] .skin-midnight { --cc-bg-chat: #0A1230; --cc-bubble-in: #17214A; --cc-bubble-out: #273B6E; --mine: #273B6E; } html[data-theme="dark"] .skin-meadow { --cc-bg-chat: #0D1B12; --cc-bubble-in: #17291D; --cc-bubble-out: #245038; --mine: #245038; } html[data-theme="dark"] .skin-blush { --cc-bg-chat: #200F1B; --cc-bubble-in: #2D1827; --cc-bubble-out: #55284A; --mine: #55284A; } html[data-theme="dark"] .skin-sakura { --cc-bg-chat: #221016; --cc-bubble-in: #331A23; --cc-bubble-out: #5C2C40; --mine: #5C2C40; } html[data-theme="dark"] .skin-ember { --cc-bg-chat: #211208; --cc-bubble-in: #331E10; --cc-bubble-out: #5C3517; --mine: #5C3517; } html[data-theme="dark"] .skin-nebula { --cc-bg-chat: #141026; --cc-bubble-in: #211A3D; --cc-bubble-out: #3C2F66; --mine: #3C2F66; } /* M10 niveau 3: eksklusive boost-wallpapers (rum-flade; personligt skin vinder). */ .roomwp-velvet { --cc-bg-chat: #EEE4F2; --cc-bubble-in: #FAF4FD; --cc-bubble-out: #E2CFEA; --mine: #E2CFEA; } .roomwp-lagoon { --cc-bg-chat: #DEEDEC; --cc-bubble-in: #F2FBFA; --cc-bubble-out: #C8E5E2; --mine: #C8E5E2; } .roomwp-stardust { --cc-bg-chat: #F0EAD8; --cc-bubble-in: #FBF8EC; --cc-bubble-out: #EADFB8; --mine: #EADFB8; } html[data-theme="dark"] .roomwp-velvet { --cc-bg-chat: #1B1024; --cc-bubble-in: #2A1B38; --cc-bubble-out: #4A2E63; --mine: #4A2E63; } html[data-theme="dark"] .roomwp-lagoon { --cc-bg-chat: #0C1B1A; --cc-bubble-in: #162928; --cc-bubble-out: #24504C; --mine: #24504C; } html[data-theme="dark"] .roomwp-stardust { --cc-bg-chat: #1E1808; --cc-bubble-in: #2E2510; --cc-bubble-out: #55471E; --mine: #55471E; } @media (prefers-color-scheme: dark) { html:not([data-theme="light"]):not([data-theme="dark"]) .skin-sand { --cc-bg-chat: #1C1710; --cc-bubble-in: #2A2418; --cc-bubble-out: #4A3D22; --mine: #4A3D22; } html:not([data-theme="light"]):not([data-theme="dark"]) .skin-graphite { --cc-bg-chat: #14171B; --cc-bubble-in: #20242A; --cc-bubble-out: #3A414B; --mine: #3A414B; } html:not([data-theme="light"]):not([data-theme="dark"]) .skin-midnight { --cc-bg-chat: #0A1230; --cc-bubble-in: #17214A; --cc-bubble-out: #273B6E; --mine: #273B6E; } html:not([data-theme="light"]):not([data-theme="dark"]) .skin-meadow { --cc-bg-chat: #0D1B12; --cc-bubble-in: #17291D; --cc-bubble-out: #245038; --mine: #245038; } html:not([data-theme="light"]):not([data-theme="dark"]) .skin-blush { --cc-bg-chat: #200F1B; --cc-bubble-in: #2D1827; --cc-bubble-out: #55284A; --mine: #55284A; } html:not([data-theme="light"]):not([data-theme="dark"]) .skin-sakura { --cc-bg-chat: #221016; --cc-bubble-in: #331A23; --cc-bubble-out: #5C2C40; --mine: #5C2C40; } html:not([data-theme="light"]):not([data-theme="dark"]) .skin-ember { --cc-bg-chat: #211208; --cc-bubble-in: #331E10; --cc-bubble-out: #5C3517; --mine: #5C3517; } html:not([data-theme="light"]):not([data-theme="dark"]) .skin-nebula { --cc-bg-chat: #141026; --cc-bubble-in: #211A3D; --cc-bubble-out: #3C2F66; --mine: #3C2F66; } html:not([data-theme="light"]):not([data-theme="dark"]) .roomwp-velvet { --cc-bg-chat: #1B1024; --cc-bubble-in: #2A1B38; --cc-bubble-out: #4A2E63; --mine: #4A2E63; } html:not([data-theme="light"]):not([data-theme="dark"]) .roomwp-lagoon { --cc-bg-chat: #0C1B1A; --cc-bubble-in: #162928; --cc-bubble-out: #24504C; --mine: #24504C; } html:not([data-theme="light"]):not([data-theme="dark"]) .roomwp-stardust { --cc-bg-chat: #1E1808; --cc-bubble-in: #2E2510; --cc-bubble-out: #55471E; --mine: #55471E; } } /* M10 niveau 3-perk-editor i boost-panelet + flair i lister. */ .boost-perks { display: flex; flex-direction: column; gap: .45rem; margin-top: .55rem; padding-top: .55rem; border-top: 1px solid var(--cc-border); } .boost-perks .form-label { display: flex; flex-direction: column; gap: .2rem; font-size: .85rem; } .rl-flair { margin-left: .2rem; font-size: .8rem; } /* Plus-kortet på /stars — samme sprog som .ai-card (AI = ✦-identitet). */ .plus-card { position: relative; padding: .9rem 1rem 1rem; border: 1px solid var(--cc-ai-border); border-radius: var(--cc-radius-card); background: var(--cc-bg-elevated); box-shadow: var(--cc-shadow); overflow: hidden; } .plus-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--cc-ai-grad); } .plus-card-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .4rem; } .plus-card-badge { display: inline-flex; align-items: center; padding: .15rem .55rem; border-radius: var(--cc-radius-pill); font-size: .78rem; font-weight: 700; color: #fff; background: linear-gradient(135deg, #6A46D6, #8E2FB0); } .plus-card-price { font-weight: 600; color: var(--cc-text); } .plus-card-pitch { margin: 0 0 .5rem; color: var(--cc-text-secondary); font-size: .88rem; } .plus-card-status { margin: 0 0 .5rem; font-weight: 600; color: var(--cc-ai-ink); } .plus-card-actions { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; } /* Profil: banner + kosmetik-vælgere. */ .plus-banner { height: 72px; border-radius: var(--cc-radius-card); margin: .25rem 0 .5rem; } .plus-grad-aurora { background-image: var(--plus-grad-aurora); } .plus-grad-sunset { background-image: var(--plus-grad-sunset); } .plus-grad-ocean { background-image: var(--plus-grad-ocean); } .plus-grad-royal { background-image: var(--plus-grad-royal); } .plus-cosmetics { display: flex; flex-direction: column; } .plus-name-preview { margin: .3rem 0 0; font-size: .85rem; color: var(--cc-text-secondary); } .plus-name-preview .msg-author { font-size: .95rem; } /* ---- M6: Butik (/shop) — galleri m. live-previews ---- */ .shop-section-hint { font-weight: 400; font-size: .8rem; color: var(--cc-text-secondary); } .shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: .75rem; margin-bottom: 1.1rem; } .shop-card { border: 1px solid var(--cc-border); border-radius: var(--cc-radius-card); background: var(--cc-bg-elevated); box-shadow: var(--cc-shadow); overflow: hidden; display: flex; flex-direction: column; } .shop-card.equipped { border-color: var(--cc-accent); box-shadow: 0 0 0 1px var(--cc-accent), var(--cc-shadow); } /* Preview-fladen genbruger skin-klassernes egne tokens — det ER paletten. */ .shop-skin-preview { background: var(--cc-bg-chat); padding: .6rem .7rem; display: flex; flex-direction: column; gap: .35rem; min-height: 72px; } .shop-skin-bubble { max-width: 80%; padding: .3rem .6rem; border-radius: 10px; font-size: .78rem; color: var(--cc-text); } .shop-skin-bubble.in { background: var(--cc-bubble-in); align-self: flex-start; } .shop-skin-bubble.out { background: var(--cc-bubble-out); align-self: flex-end; } .shop-name-preview { display: flex; align-items: center; justify-content: center; background: var(--cc-bubble-in); min-height: 72px; padding: .6rem .7rem; } .shop-name-preview .msg-author { font-size: 1.05rem; } .shop-card-body { display: flex; flex-direction: column; gap: .4rem; padding: .6rem .7rem .7rem; } .shop-card-name { font-weight: 600; color: var(--cc-text); } .shop-badge { align-self: flex-start; padding: .1rem .5rem; border-radius: var(--cc-radius-pill); font-size: .74rem; font-weight: 700; } .shop-badge.free { background: var(--cc-bg-chat); color: var(--cc-text-secondary); } .shop-badge.plus { background: var(--cc-ai-soft); color: var(--cc-ai-ink); border: 1px solid var(--cc-ai-border); } .shop-badge.stars { background: var(--cc-bg-chat); color: var(--cc-text); } .shop-badge.owned { background: var(--cc-accent); color: #fff; } .shop-actions { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; } .shop-inuse { font-size: .78rem; font-weight: 600; color: var(--cc-accent); } /* ===== R13: juridiske sider (/vilkaar, /privatliv, /cookies) ===== */ .legal-wrap { display: flex; justify-content: center; padding: 2rem 1rem 3rem; overflow-y: auto; height: 100dvh; background: var(--cc-bg-chat); } .legal-card { max-width: 46rem; width: 100%; background: var(--cc-bg-panel); border: 1px solid var(--cc-border); border-radius: var(--cc-radius-lg); padding: 1.6rem 1.8rem 1.4rem; color: var(--cc-text); line-height: 1.55; align-self: flex-start; } .legal-card h1 { margin-top: 0; font-size: 1.5rem; } .legal-card h2 { font-size: 1.05rem; margin: 1.2rem 0 .3rem; } .legal-card p, .legal-card li { font-size: .92rem; color: var(--cc-text); } .legal-card a { color: var(--cc-accent); } .legal-disclaimer { background: var(--cc-warn-soft, #FFF6E5); border: 1px solid var(--cc-warn-border, #F0C674); border-radius: var(--cc-radius-md); padding: .6rem .8rem; font-size: .88rem; margin-bottom: 1rem; } .legal-links { margin-top: 1.4rem; font-size: .9rem; } .consent-row { display: flex; gap: .5rem; align-items: flex-start; font-size: .85rem; color: var(--cc-text-secondary); text-align: left; } .consent-row input { margin-top: .2rem; } .consent-row a { color: var(--cc-accent); } .auth-legal { margin-top: .6rem; font-size: .78rem; color: var(--cc-text-secondary); } .auth-legal a { color: var(--cc-text-secondary); text-decoration: underline; } .room-banner.ai-resting { background: var(--cc-ai-soft); color: var(--cc-ai-ink); border: 1px solid var(--cc-ai-border); } /* ---- P8: telefon-først onboarding — landekode-vælger, nødlogin-kort og velkomst-wizard ("som en rigtig app": fokuseret, trin for trin). ---- */ .phone-row { display: grid; grid-template-columns: minmax(0, 46%) 1fr; gap: .5rem; } .phone-row .country-field { min-width: 0; } .phone-row .national-field { min-width: 0; } .code-sent-note { margin: 0; font-size: .88rem; color: var(--cc-text-secondary); } .recovery-card { display: flex; flex-direction: column; gap: .55rem; align-items: center; margin: .4rem 0 1rem; padding: 1rem .9rem; border: 1px dashed var(--cc-accent); border-radius: 12px; background: var(--cc-accent-soft); text-align: center; } .recovery-label { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--cc-accent); } .recovery-code { font-size: 1.12rem; font-weight: 700; letter-spacing: .1em; color: var(--cc-text); word-break: break-all; } .recovery-hint { margin: 0; font-size: .78rem; color: var(--cc-text-secondary); } .recovery-continue { display: block; padding: .72rem 1rem; border: 0; border-radius: 10px; background: var(--cc-accent); color: var(--cc-on-accent); font-weight: 600; font-size: 15px; text-align: center; text-decoration: none; transition: background var(--cc-t); } .recovery-continue:hover { background: var(--cc-accent-hover); color: var(--cc-on-accent); } .focus-main { min-height: 100dvh; background: var(--cc-bg-app); } .wz-wrap { width: 100%; max-width: 430px; min-height: 100dvh; margin: 0 auto; padding: max(1.2rem, env(safe-area-inset-top)) 1rem max(1.2rem, env(safe-area-inset-bottom)); display: flex; flex-direction: column; justify-content: center; } .wz-card { position: relative; background: var(--cc-bg-elevated); border: 1px solid var(--cc-border); border-radius: 16px; padding: 1.8rem 1.6rem; box-shadow: var(--cc-shadow-float); overflow: hidden; display: flex; flex-direction: column; gap: .55rem; text-align: center; } .wz-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--cc-ai-grad); } .wz-card h1 { font-size: 1.4rem; margin: 0; color: var(--cc-text); } .wz-card .muted { margin: 0 0 .4rem; color: var(--cc-text-secondary); font-size: .88rem; } .wz-card .profile-label { text-align: left; } .wz-card .profile-hint { text-align: center; } .wz-dots { display: flex; gap: .4rem; justify-content: center; margin-bottom: .3rem; } .wz-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cc-border); transition: background var(--cc-t), transform var(--cc-t); } .wz-dot.active { background: var(--cc-accent); transform: scale(1.25); } .wz-dot.done { background: var(--cc-accent); opacity: .45; } .wz-avatar-zone { display: flex; flex-direction: column; align-items: center; gap: .7rem; margin: .3rem 0; } .wz-avatar { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; box-shadow: var(--cc-shadow-msg); } .wz-avatar-initials { display: flex; align-items: center; justify-content: center; color: #fff; font-size: 2rem; font-weight: 700; letter-spacing: .02em; user-select: none; } .wz-avatar-actions { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; } .wz-avatar-actions label { cursor: pointer; } .wz-avatar-actions label input[type=file] { display: none; } .wz-camera { display: none; } @media (pointer: coarse) { .wz-camera { display: inline-flex; } } .wz-langs { display: grid; gap: .55rem; margin: .3rem 0; } .wz-lang { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: .7rem; padding: .8rem .9rem; border: 1.5px solid var(--cc-border); border-radius: 12px; background: var(--cc-bg-app); color: var(--cc-text); font: inherit; text-align: left; cursor: pointer; transition: border-color var(--cc-t), background var(--cc-t); } .wz-lang:hover { border-color: var(--cc-accent); } .wz-lang.selected { border-color: var(--cc-accent); background: var(--cc-accent-soft); } .wz-lang-flag { font-size: 1.5rem; } .wz-lang strong, .wz-lang small { display: block; } .wz-lang small { color: var(--cc-text-secondary); font-size: .74rem; margin-top: .1rem; } .wz-next { padding: .72rem 1rem; border: 0; border-radius: 10px; background: var(--cc-accent); color: var(--cc-on-accent); font: inherit; font-weight: 600; font-size: 15px; cursor: pointer; transition: background var(--cc-t); } .wz-next:hover { background: var(--cc-accent-hover); } .wz-nav-row { display: grid; grid-template-columns: auto 1fr; gap: .55rem; margin-top: .3rem; } .wz-card .text-field { text-align: left; } /* ---- P10: del-ind-i-Saga (share_target) + kamera-knap i composeren. ---- */ .cam-btn { display: none; font-size: 1.05rem; } @media (pointer: coarse) { .cam-btn { display: inline-flex; } } .share-wrap { max-width: 560px; margin: 0 auto; padding: 1.4rem 1rem; } .share-wrap h1 { font-size: 1.4rem; color: var(--cc-text); } .share-preview { margin: .8rem 0; padding: .8rem .9rem; border: 1px solid var(--cc-border); border-radius: 12px; background: var(--cc-bg-elevated); } .share-badge { display: inline-block; font-size: .82rem; color: var(--cc-text-secondary); margin-bottom: .3rem; } .share-text { margin: 0; color: var(--cc-text); white-space: pre-wrap; word-break: break-word; } .share-rooms { list-style: none; margin: .4rem 0 1rem; padding: 0; display: flex; flex-direction: column; gap: .4rem; } .share-room-row { display: flex; align-items: center; gap: .7rem; width: 100%; padding: .7rem .8rem; border: 1px solid var(--cc-border); border-radius: 12px; background: var(--cc-bg-elevated); color: var(--cc-text); font: inherit; text-align: left; cursor: pointer; transition: border-color var(--cc-t), background var(--cc-t); } .share-room-row:hover:not(:disabled) { border-color: var(--cc-accent); background: var(--cc-accent-soft); } .share-room-row:disabled { opacity: .6; cursor: default; } .share-room-icon { font-size: 1.15rem; } .share-room-name { font-weight: 600; } /* ---- P11: DM-oversigt + find venner. ---- */ .fr-dm-row { text-decoration: none; } .fr-dm-row .msg-avatar { width: 34px; height: 34px; } .fr-find-card { margin-top: 1.2rem; } .fr-find-card .room-create-form { flex-direction: row; } .fr-find-card .text-field { flex: 1; min-width: 0; padding: .55rem .7rem; border: 1px solid var(--input-border); border-radius: 10px; background: var(--surface); color: var(--text); font: inherit; } .fr-find-card .send-btn, .fr-match .send-btn { padding: .55rem 1.1rem; border: 0; border-radius: 10px; background: var(--cc-accent); color: var(--cc-on-accent); font: inherit; font-weight: 600; cursor: pointer; } .fr-find-card .send-btn:hover:not(:disabled), .fr-match .send-btn:hover { background: var(--cc-accent-hover); } .fr-find-card .send-btn:disabled { opacity: .5; cursor: default; } .fr-match { display: flex; align-items: center; gap: .7rem; margin-top: .8rem; padding: .7rem .8rem; border: 1px solid var(--cc-accent); border-radius: 12px; background: var(--cc-accent-soft); } .fr-match .msg-avatar { width: 34px; height: 34px; } .fr-match .send-btn { margin-left: auto; flex-shrink: 0; } .fr-note { margin-top: .6rem; } /* ---- Trin 46: fastgjorte beskeder. ---- */ /* 📌-baren øverst i chatten: nyeste pin, ét-linjes uddrag, tæller-link til /pins. */ .pin-bar { display: flex; align-items: center; gap: .35rem; padding: .3rem .8rem; background: var(--cc-bg-elevated); border-bottom: 1px solid var(--cc-border); animation: cc-pop 140ms var(--cc-ease); } .pin-bar-jump { display: flex; align-items: center; gap: .55rem; flex: 1; min-width: 0; background: none; border: 0; padding: .3rem .4rem; border-radius: 8px; cursor: pointer; font: inherit; text-align: left; color: inherit; transition: background var(--cc-t); } .pin-bar-jump:hover { background: var(--cc-hover); } .pin-bar-ico { color: var(--cc-accent); display: inline-flex; align-items: center; flex-shrink: 0; } .pin-bar-body { display: flex; flex-direction: column; min-width: 0; } .pin-bar-author { font-size: .72rem; font-weight: 600; color: var(--cc-accent); } .pin-bar-text { font-size: .82rem; color: var(--cc-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pin-bar-all { flex-shrink: 0; font-size: .78rem; color: var(--cc-text-secondary); text-decoration: none; padding: .35rem .55rem; border-radius: 8px; transition: background var(--cc-t); } .pin-bar-all:hover { background: var(--cc-hover); color: var(--cc-text); } /* /pins-oversigten pr. rum. */ .pins-wrap { max-width: 820px; margin: 0 auto; padding-bottom: 2rem; } .pins-wrap h1 { display: inline-flex; align-items: center; gap: .45rem; } .pins-back { display: inline-flex; align-items: center; justify-content: center; width: 2.1rem; height: 2.1rem; border-radius: 50%; color: var(--cc-text-secondary); transition: background var(--cc-t); } .pins-back:hover { background: var(--cc-hover); } .pins-list { display: flex; flex-direction: column; gap: .8rem; padding: 1rem; } .pin-card { border: 1px solid var(--cc-border); border-radius: var(--cc-radius-card); padding: .7rem .9rem; background: var(--cc-bg-elevated); box-shadow: var(--cc-shadow); } .pin-card .msg-meta { flex-wrap: wrap; } .pin-card-by { display: inline-flex; align-items: center; gap: .25rem; margin-left: auto; color: var(--cc-text-secondary); font-size: .72rem; } .pin-card-actions { display: flex; gap: .5rem; margin-top: .5rem; } .pin-card-jump, .pin-card-unpin { font-size: .8rem; border: 0; background: none; padding: .3rem .55rem; border-radius: 8px; color: var(--cc-accent); cursor: pointer; text-decoration: none; font-weight: 600; font-family: inherit; transition: background var(--cc-t); } .pin-card-jump:hover, .pin-card-unpin:hover { background: var(--cc-accent-soft); color: var(--cc-accent); } .pin-card-unpin { color: var(--cc-text-secondary); } .pins-wrap .chat-header-row { justify-content: flex-start; } /* ---- Trin 47: gemte beskeder (/saved) ---- */ .saved-room { display: inline-flex; align-items: center; font-size: .72rem; font-weight: 600; color: var(--cc-accent); background: var(--accent-faint); padding: .1rem .5rem; border-radius: var(--cc-radius-pill); } /* ---- P20 rum-wiki (/wiki/) ---- */ .wiki-wrap { max-width: 820px; margin: 0 auto; padding-bottom: 2rem; } .wiki-wrap h1 { display: inline-flex; align-items: center; gap: .45rem; } .wiki-wrap .chat-header-row { justify-content: flex-start; } .wiki-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: .8rem; padding: 1rem 1rem 0; } .wiki-policy { display: inline-flex; align-items: center; gap: .45rem; font-size: .82rem; color: var(--cc-text-secondary); cursor: pointer; margin-left: auto; } .wiki-card { border: 1px solid var(--cc-border); border-radius: var(--cc-radius-card); padding: .8rem 1rem; background: var(--cc-bg-elevated); box-shadow: var(--cc-shadow); margin: .8rem 1rem 0; display: flex; flex-direction: column; gap: .45rem; } .wiki-card-head { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; } .wiki-title { font-size: 1.02rem; font-weight: 700; margin: 0; color: var(--cc-text); display: inline-flex; align-items: center; gap: .4rem; } .wiki-card-actions { display: flex; gap: .35rem; margin-left: auto; } .wiki-content { font-size: .92rem; color: var(--cc-text); } .wiki-meta { font-size: .72rem; color: var(--faint); } .wiki-primary { display: inline-flex; align-items: center; gap: .35rem; border: 0; background: var(--cc-accent); color: var(--cc-on-accent); font-family: inherit; font-size: .84rem; font-weight: 600; padding: .45rem .9rem; border-radius: 10px; cursor: pointer; transition: filter var(--cc-t); } .wiki-primary:hover { filter: brightness(1.08); } .wiki-ghost { display: inline-flex; align-items: center; gap: .3rem; border: 0; background: none; color: var(--cc-text-secondary); font-family: inherit; font-size: .8rem; font-weight: 600; padding: .3rem .55rem; border-radius: 8px; cursor: pointer; transition: background var(--cc-t); } .wiki-ghost:hover { background: var(--cc-hover); color: var(--cc-text); } .wiki-danger:hover { color: var(--cc-danger); background: var(--cc-danger-soft); } .wiki-form .wiki-input, .wiki-link-form .wiki-input { width: 100%; } .wiki-input { font-family: inherit; font-size: .9rem; color: var(--cc-text); background: var(--cc-bg-app); border: 1px solid var(--input-border); border-radius: 10px; padding: .5rem .7rem; } .wiki-textarea { font-family: inherit; font-size: .9rem; color: var(--cc-text); background: var(--cc-bg-app); border: 1px solid var(--input-border); border-radius: 10px; padding: .5rem .7rem; resize: vertical; min-height: 6rem; } .wiki-form-actions { display: flex; gap: .5rem; } .wiki-error { margin: .8rem 1rem 0; padding: .55rem .8rem; border-radius: 10px; font-size: .84rem; color: var(--cc-danger); background: var(--cc-danger-soft); border: 1px solid var(--cc-danger); } .wiki-links .link-preview { margin: 0; flex: 1; min-width: 0; } .wiki-link-row { display: flex; align-items: center; gap: .4rem; } .wiki-link-remove { flex-shrink: 0; } .wiki-link-form { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .3rem; } .wiki-link-form .wiki-input { flex: 1 1 12rem; width: auto; } .wiki-link-form .wiki-primary { flex-shrink: 0; } /* Nyt-medlem-hint i chatten (48 t efter join, kun i rum m. wiki-indhold). */ .wiki-hint { display: flex; align-items: center; gap: .4rem; margin: .5rem auto 0; max-width: 30rem; padding: .3rem .4rem .3rem .8rem; border-radius: var(--cc-radius-pill); background: var(--accent-faint); border: 1px solid var(--cc-border); } .wiki-hint-link { display: inline-flex; align-items: center; gap: .4rem; flex: 1; min-width: 0; font-size: .82rem; font-weight: 600; color: var(--cc-accent); text-decoration: none; } .wiki-hint-link:hover { text-decoration: underline; } .wiki-hint-close { display: inline-flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem; border: 0; border-radius: 50%; background: none; color: var(--cc-text-secondary); cursor: pointer; transition: background var(--cc-t); } .wiki-hint-close:hover { background: var(--cc-hover); } /* Wiki-genvej i rum-info-arket. */ .room-info-wiki { display: flex; align-items: center; gap: .5rem; padding: .55rem .7rem; border: 1px solid var(--cc-border); border-radius: var(--cc-radius-card); color: var(--cc-text); font-size: .88rem; font-weight: 600; text-decoration: none; transition: background var(--cc-t); } .room-info-wiki:hover { background: var(--accent-faint); } .room-info-wiki-sub { font-weight: 400; font-size: .78rem; color: var(--cc-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .room-info-wiki-chev { margin-left: auto; color: var(--cc-text-secondary); flex-shrink: 0; } /* ---- P20/B4: brandet 404-side ---- */ .notfound-wrap { min-height: 70vh; display: flex; align-items: center; justify-content: center; padding: 2rem 1rem; } .notfound-card { text-align: center; background: var(--cc-bg-elevated); border: 1px solid var(--cc-border); border-radius: 16px; padding: 2rem 1.8rem; max-width: 380px; width: 100%; box-shadow: var(--cc-shadow-float); } .notfound-logo { width: 64px; height: 64px; margin-bottom: .6rem; } .notfound-card h1 { font-size: 1.25rem; margin: 0 0 .4rem; color: var(--cc-text); } .notfound-card p { color: var(--cc-text-secondary); margin: 0 0 1.1rem; font-size: .9rem; } .notfound-home { display: inline-block; background: var(--cc-accent); color: var(--cc-on-accent); padding: .55rem 1.2rem; border-radius: 999px; text-decoration: none; font-weight: 600; transition: filter var(--cc-t); } .notfound-home:hover { filter: brightness(1.08); } /* ---- Trin 48: afstemninger — kortet i strømmen + opret-arket. ---- */ .poll-card { display: flex; flex-direction: column; gap: .35rem; width: min(17rem, 62vw); max-width: 100%; padding: .15rem 0 .1rem; } .poll-question { font-weight: 600; line-height: 1.3; } .poll-meta-row { display: flex; gap: .45rem; flex-wrap: wrap; } .poll-meta-row:empty { display: none; } .poll-state { font-size: .74rem; color: var(--cc-text-secondary); background: var(--cc-hover); border-radius: 99px; padding: .1rem .5rem; } .poll-state.closed { color: var(--cc-accent); background: var(--cc-accent-soft); font-weight: 600; } .poll-option { position: relative; overflow: hidden; display: flex; align-items: center; gap: .5rem; width: 100%; padding: .45rem .6rem; border: 1px solid var(--cc-border); border-radius: var(--cc-radius-card); background: transparent; color: inherit; font: inherit; font-size: .92rem; text-align: left; cursor: pointer; transition: border-color var(--cc-t); } .poll-option:hover:not(:disabled) { border-color: var(--cc-accent); } .poll-option.locked { cursor: default; } .poll-option.voted { border-color: var(--cc-accent); } .poll-fill { position: absolute; inset: 0 auto 0 0; background: var(--cc-accent-soft); transition: width .25s ease; z-index: 0; } .msg-bubble.out .poll-fill { background: rgba(255,255,255,.22); } .msg-bubble.out .poll-option { border-color: rgba(255,255,255,.45); } .msg-bubble.out .poll-option.voted { border-color: var(--cc-on-accent); } .msg-bubble.out .poll-state { color: inherit; background: rgba(255,255,255,.18); } .msg-bubble.out .poll-state.closed { color: inherit; background: rgba(255,255,255,.3); } .poll-option-label { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: .3rem; min-width: 0; overflow-wrap: anywhere; } .poll-option-count { position: relative; z-index: 1; margin-left: auto; font-size: .8rem; font-variant-numeric: tabular-nums; opacity: .8; } .poll-footer { display: flex; align-items: center; gap: .6rem; font-size: .76rem; color: var(--cc-text-secondary); } .msg-bubble.out .poll-footer { color: inherit; opacity: .85; } .poll-close-btn { margin-left: auto; border: 0; background: transparent; color: var(--cc-accent); font: inherit; font-size: .76rem; font-weight: 600; cursor: pointer; padding: 0; } .msg-bubble.out .poll-close-btn { color: var(--cc-on-accent); text-decoration: underline; } .poll-error { font-size: .8rem; color: var(--cc-danger); } .poll-composer { display: flex; flex-direction: column; gap: .55rem; padding: .85rem; min-width: min(22rem, 90vw); } .poll-composer-title { font-weight: 600; font-size: 1.05rem; } .poll-composer-option { display: flex; align-items: center; gap: .4rem; } .poll-composer-option .text-field { flex: 1; } .poll-opt-remove { border: 0; background: transparent; color: var(--cc-text-secondary); cursor: pointer; padding: .3rem; border-radius: 50%; display: inline-flex; } .poll-opt-remove:hover { background: var(--cc-hover); color: var(--cc-danger); } .poll-add-option { display: inline-flex; align-items: center; gap: .35rem; align-self: flex-start; border: 0; background: transparent; color: var(--cc-accent); font: inherit; font-size: .88rem; font-weight: 600; cursor: pointer; padding: .2rem 0; } .poll-composer-row { display: flex; align-items: center; gap: .5rem; font-size: .92rem; } .poll-composer-row .poll-duration { margin-left: auto; width: auto; } .poll-create-btn { align-self: flex-end; } /* Trin 49: send-senere (planlagte beskeder) */ .schedule-composer, .scheduled-sheet { display: flex; flex-direction: column; gap: .55rem; padding: .85rem; min-width: min(22rem, 90vw); } .schedule-hint { font-size: .88rem; color: var(--cc-text-secondary); } .schedule-preview { padding: .5rem .65rem; border-left: 3px solid var(--cc-accent); border-radius: 8px; background: var(--cc-bg-secondary); font-size: .88rem; overflow-wrap: anywhere; } .schedule-quick { display: flex; flex-wrap: wrap; gap: .4rem; } .schedule-chip { border: 1px solid var(--cc-border); background: transparent; color: var(--cc-text); font: inherit; font-size: .8rem; padding: .3rem .7rem; border-radius: 999px; cursor: pointer; } .schedule-chip:hover { background: var(--cc-hover); border-color: var(--cc-accent); } .poll-composer-row .schedule-time { margin-left: auto; width: auto; } .scheduled-sheet { max-height: min(60vh, 26rem); overflow-y: auto; } .scheduled-item { display: flex; flex-direction: column; gap: .35rem; padding: .55rem .65rem; border: 1px solid var(--cc-border); border-radius: 10px; background: var(--cc-bg-secondary); } .scheduled-item.failed { border-color: var(--cc-danger); } .scheduled-item-text { font-size: .88rem; overflow-wrap: anywhere; } .scheduled-item-meta { display: flex; align-items: center; gap: .5rem; font-size: .78rem; color: var(--cc-text-secondary); } .scheduled-when { display: inline-flex; align-items: center; gap: .3rem; } .scheduled-fail { color: var(--cc-danger); } .scheduled-item-actions { margin-left: auto; display: inline-flex; align-items: center; gap: .25rem; } .scheduled-edit-text { resize: vertical; } .scheduled-bar { display: flex; align-items: center; gap: .45rem; margin: .3rem clamp(.6rem, 4vw, 4rem) 0; padding: .35rem .6rem; border: 0; border-left: 3px solid var(--cc-accent); border-radius: 8px; background: var(--cc-bg-elevated); color: var(--cc-accent); font: inherit; font-size: .8rem; font-weight: 600; cursor: pointer; box-shadow: var(--cc-shadow); } .scheduled-bar:hover { background: var(--cc-hover); } .scheduled-bar-warn { margin-left: auto; } /* Trin 53: smarte svar-forslag — pill-chips lige over composeren. */ .reply-suggest-bar { display: flex; flex-wrap: wrap; gap: .35rem; margin: .3rem clamp(.6rem, 4vw, 4rem) 0; animation: cc-pop 140ms var(--cc-ease); } .reply-suggest-chip { border: 1px solid var(--cc-border); border-radius: var(--cc-radius-pill); padding: .3rem .75rem; background: var(--cc-bg-elevated); color: var(--cc-text); font: inherit; font-size: .8rem; cursor: pointer; box-shadow: var(--cc-shadow); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .reply-suggest-chip:hover { background: var(--cc-hover); border-color: var(--cc-accent); } @media (min-width: 900px) { /* SheetComponent er display:contents på desktop, så composer-arkene (➕/afstemning/send-senere) bærer selv popover-krom — forankret over composeren, samme mønster som emoji-panelet. */ .cc-sheet .attach-sheet, .cc-sheet .poll-composer, .cc-sheet .schedule-composer, .cc-sheet .scheduled-sheet { position: absolute; bottom: 100%; left: clamp(.6rem, 4vw, 4rem); margin-bottom: .35rem; z-index: 30; background: var(--cc-bg-elevated); border: 1px solid var(--cc-border); border-radius: var(--cc-radius-card); box-shadow: var(--cc-shadow-float); animation: cc-pop 140ms var(--cc-ease); } .cc-sheet .poll-composer, .cc-sheet .schedule-composer, .cc-sheet .scheduled-sheet { width: min(24rem, calc(100% - 1.2rem)); } } /* ── Step 57: global admin user overview (/admin/users) ─────────────── */ .au-search .text-field { width: 100%; padding: .58rem .68rem; border: 1px solid var(--input-border); border-radius: var(--cc-radius-card); background: var(--cc-bg-elevated); color: var(--cc-text); font: inherit; } .au-list { display: flex; flex-direction: column; gap: .5rem; } .au-row { display: flex; align-items: center; gap: .7rem; padding: .6rem .75rem; border: 1px solid var(--cc-border); border-radius: var(--cc-radius-card); background: var(--cc-bg-elevated); box-shadow: var(--cc-shadow); } .au-row.au-deactivated { opacity: .62; } .au-avatar { width: 42px; height: 42px; border-radius: 50%; flex: none; } .au-main { flex: 1; min-width: 0; } .au-name-line { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; } .au-name { font-weight: 600; } .au-badge { font-size: .68rem; font-weight: 600; padding: .1rem .5rem; border-radius: var(--cc-radius-pill); background: var(--cc-hover); color: var(--cc-text-secondary); } .au-badge-admin { background: var(--cc-accent-soft); color: var(--cc-accent); } .au-badge-off { background: var(--cc-danger-soft, var(--cc-hover)); color: var(--cc-danger); } .au-badge-code { background: var(--cc-success-soft); color: var(--cc-success-ink); } .au-meta { font-size: .78rem; color: var(--cc-text-secondary); display: flex; flex-wrap: wrap; gap: .25rem; overflow-wrap: anywhere; } .au-actions { display: flex; flex-direction: column; gap: .3rem; flex: none; } .au-actions .room-btn { font-size: .78rem; padding: .3rem .6rem; } .au-actions .room-btn.danger { color: var(--cc-danger); border-color: var(--cc-danger); } .au-code-box { display: flex; flex-direction: column; gap: .3rem; } .au-code { font-size: 1.15rem; font-weight: 700; letter-spacing: .08em; user-select: all; } .au-foot { margin-top: .9rem; } @media (max-width: 560px) { .au-row { flex-wrap: wrap; } .au-actions { flex-direction: row; flex-wrap: wrap; width: 100%; } } /* ---- Trin 63: kommandopalette (Ctrl/Cmd+K) + tastaturgenvejs-overlay ---- Linear-æstetikken fra DESIGN.md §1: ét roligt elevated kort højt på skærmen, hairline-border, diskret dim bagved. Markeret række = accent-svag flade. */ .cmdk-root { position: fixed; inset: 0; z-index: 1300; display: flex; align-items: flex-start; justify-content: center; padding: 12vh 1rem 1rem; } .cmdk-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .38); animation: cc-dim-in 140ms var(--cc-ease); } .cmdk-panel { position: relative; width: min(35rem, 100%); overflow: hidden; background: var(--cc-bg-elevated); border: 1px solid var(--cc-border); border-radius: var(--cc-radius-card); box-shadow: var(--cc-shadow-float); animation: cc-pop 140ms var(--cc-ease); } .cmdk-bar { display: flex; align-items: center; gap: .55rem; padding: .75rem .95rem; border-bottom: 1px solid var(--cc-border); color: var(--cc-text-secondary); } .cmdk-input { flex: 1; min-width: 0; border: 0; background: none; color: var(--cc-text); font-size: .95rem; outline: none; } .cmdk-input::placeholder { color: var(--cc-text-secondary); } .cmdk-list { max-height: min(21rem, 55vh); overflow-y: auto; padding: .35rem; } .cmdk-sec { padding: .55rem .65rem .25rem; font-size: .68rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--cc-text-secondary); } .cmdk-item { display: flex; align-items: center; gap: .6rem; width: 100%; padding: .55rem .65rem; border-radius: 8px; color: var(--cc-text); font-size: .9rem; text-align: left; background: none; border: 0; cursor: pointer; } .cmdk-item .cc-icon { color: var(--cc-text-secondary); flex: none; } .cmdk-item.sel { background: var(--accent-faint); } .cmdk-item.sel .cc-icon { color: var(--cc-accent); } .cmdk-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cmdk-hint { margin-left: auto; } .cmdk-empty { padding: 1.2rem; text-align: center; font-size: .9rem; color: var(--cc-text-secondary); } .cc-kbd { display: inline-block; min-width: 1.4rem; padding: .1rem .35rem; border: 1px solid var(--input-border); border-bottom-width: 2px; border-radius: 6px; background: var(--cc-bg-app); color: var(--cc-text-secondary); font-size: .72rem; font-weight: 600; line-height: 1.35; text-align: center; } .cc-kbd + .cc-kbd { margin-left: .25rem; } .cmdk-help-head { display: flex; align-items: center; justify-content: space-between; padding: .85rem 1rem .35rem; } .cmdk-help-head h2 { margin: 0; font-size: 1.05rem; font-weight: 700; } .cmdk-close { display: flex; padding: .35rem; border: 0; border-radius: 8px; background: none; color: var(--cc-text-secondary); cursor: pointer; } .cmdk-close:hover { background: var(--cc-hover); color: var(--cc-text); } .cmdk-help-body { padding: 0 .65rem .8rem; max-height: min(24rem, 60vh); overflow-y: auto; } .cmdk-helprow { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .45rem .35rem; font-size: .9rem; } .cmdk-helprow + .cmdk-helprow { border-top: 1px solid var(--cc-border); } .cmdk-helprow > span:last-child { flex: none; } @media (max-width: 899.98px) { .cmdk-root { padding-top: 6vh; } }