/* Community-panelet (community.js): chat, Live Drop og Rain Pool.
 * Klassenavnene har cd-prefiks. Globale regler i style.css (button, input, h2, .marker,
 * .tabs, .empty …) skal ikke treffe panelet, så alt her setter sine egne verdier.
 */
:root {
  --dock-w: 340px;
  --cd-line: rgba(255, 255, 255, .065);
  --cd-card: #1a2126;
  --cd-sunk: #0e1215;
  --cd-text: #e8eef2;
  --cd-muted: #7d8e99;
  --cd-green: #4fd06b;
  --cd-gold: #f5c451;
  --cd-ease: cubic-bezier(.2, .8, .2, 1);
}

@media (min-width: 1280px) {
  body main:has(> #battles:not([hidden])) { max-width: none; }
}
/* ------------------------------------------------------------------ knappen i toppmenyen */
body > header .cd-toggle {
  position: relative; flex: none;
  width: 38px; height: 38px; padding: 0; margin-left: 4px;
  display: grid; place-items: center;
  border: 0; border-radius: 10px;
  background: rgba(255, 255, 255, .06); color: #aab6bf;
  transition: background .2s, color .2s, box-shadow .2s;
}
body > header .cd-toggle:hover { background: rgba(255, 255, 255, .11); color: #fff; }
body > header .cd-toggle[aria-expanded="true"] {
  color: #fff;
  background: linear-gradient(180deg, rgba(120, 190, 255, .2), rgba(71, 159, 235, .07));
  box-shadow: inset 0 0 0 1px rgba(140, 200, 255, .42), 0 0 16px -4px rgba(71, 159, 235, .7);
}
.cd-toggle svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.cd-toggle-dot {
  position: absolute; top: 7px; right: 7px; width: 8px; height: 8px; border-radius: 50%;
  background: #e5484d; box-shadow: 0 0 0 2px #151a1d;
}

/* ------------------------------------------------------------------ pil for å åpne igjen */
/* Står nøyaktig der lukkepilen (.cd-hide) står i det åpne panelet, og snur seg når panelet lukkes. */
.cd-open {
  position: fixed; z-index: 88; top: calc(var(--header-h, 64px) + 12px); right: 12px;
  width: 42px; height: 42px; padding: 0;
  display: grid; place-items: center;
  border: 0; border-radius: 12px;
  background: rgba(14, 18, 21, .88); color: #95a4ae;
  box-shadow: inset 0 0 0 1px var(--cd-line), 0 8px 24px -10px rgba(0, 0, 0, .8);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .25s ease, visibility 0s linear .25s, color .2s, background .2s;
}
.cd-open.show { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .3s ease .25s, color .2s, background .2s; }
.cd-open:hover { background: #1b2328; color: #fff; }
.cd-open svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .5s var(--spring) .25s; }
.cd-open.show svg { transform: rotate(180deg); }
.cd-open-dot {
  position: absolute; top: 7px; right: 7px; width: 8px; height: 8px; border-radius: 50%;
  background: #e5484d; box-shadow: 0 0 0 2px #0e1215;
}

/* ------------------------------------------------------------------ panelet */
.cdock {
  position: fixed; z-index: 90; top: var(--header-h, 64px); right: 0; bottom: 0;
  width: var(--dock-w);
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, #151b1f, #111619 70%);
  border-left: 1px solid var(--cd-line);
  box-shadow: -24px 0 60px rgba(0, 0, 0, .5);   /* ligger over siden, dytter den ikke */
  color: var(--cd-text); font-size: 13px; line-height: 1.4;
  transform: translateX(102%); visibility: hidden;
  transition: transform .45s var(--cd-ease), visibility 0s linear .45s;
}
.cdock.open { transform: none; visibility: visible; transition: transform .45s var(--cd-ease); }
/* Explicit display rules below must not override the HTML hidden attribute. */
.cdock [hidden], .cd-open [hidden], body > header .cd-toggle [hidden] { display: none !important; }
.cdock button { font-family: inherit; }
.cdock button:focus-visible, .cdock input:focus-visible, .cd-info:focus-visible { outline: 2px solid #83c8ff; outline-offset: 2px; }
.cdock svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Skuff på smale skjermer */
.cd-scrim {
  position: fixed; z-index: 89; inset: var(--header-h, 64px) 0 0 0;
  background: rgba(5, 9, 13, .55); opacity: 0; pointer-events: none;
  transition: opacity .3s ease;
}
body.cd-drawer .cd-scrim { opacity: 1; pointer-events: auto; }
@media (max-width: 1279.98px) {
  .cdock { width: min(360px, 100%); }
}

/* ------------------------------------------------------------------ faner */
.cd-head { display: flex; align-items: center; gap: 8px; padding: 12px 12px 10px; }
.cd-tabs, .cd-filters {
  position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  padding: 4px; border-radius: 12px;
  background: var(--cd-sunk); box-shadow: inset 0 0 0 1px var(--cd-line);
}
.cd-tabs { flex: 1; }
.cd-tabs button, .cd-filters button {
  position: relative; z-index: 1;
  height: 34px; padding: 0 10px; min-width: 0;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  border: 0; border-radius: 9px; background: none;
  color: #8d9ca6; font-size: 13px; font-weight: 650; white-space: nowrap;
  transition: color .2s;
}
.cd-tabs button:hover, .cd-filters button:hover { background: none; color: #e1e9ee; }
.cd-tabs button[aria-selected="true"], .cd-filters button[aria-pressed="true"] { color: #fff; }
.cd-tabs svg { width: 15px; height: 15px; flex: none; }
/* Samme glidende markør som i toppmenyen */
.cd-glow {
  position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 0; width: 0;
  border-radius: 9px; pointer-events: none;
  background: linear-gradient(180deg, rgba(120, 190, 255, .22), rgba(71, 159, 235, .08));
  box-shadow: inset 0 0 0 1px rgba(140, 200, 255, .45), 0 0 18px -4px rgba(71, 159, 235, .7);
  transition: transform .5s var(--spring), width .5s var(--spring);
}
.cd-glow.instant { transition: none; }
.cd-unread {
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: #e5484d; color: #fff; font-size: 10.5px; font-weight: 800; line-height: 18px;
}
.cd-live { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--cd-green); animation: cd-live 1.8s ease-out infinite; }
@keyframes cd-live {
  0% { box-shadow: 0 0 0 0 rgba(79, 208, 107, .55); }
  70%, 100% { box-shadow: 0 0 0 7px rgba(79, 208, 107, 0); }
}
.cd-hide {
  flex: none; width: 42px; height: 42px; padding: 0;
  display: grid; place-items: center;
  border: 0; border-radius: 12px;
  background: var(--cd-sunk); box-shadow: inset 0 0 0 1px var(--cd-line); color: #95a4ae;
  transition: color .2s, background .2s;
}
.cd-hide:hover { background: #1b2328; color: #fff; }
.cd-hide svg { width: 17px; height: 17px; }

/* ------------------------------------------------------------------ Rain Pool */
.cd-rain {
  position: relative; isolation: isolate; overflow: hidden;
  margin: 0 12px 10px; padding: 12px;
  border-radius: 14px;
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(71, 159, 235, .30), transparent 60%),
    linear-gradient(135deg, #133149, #141d24 72%);
  box-shadow: inset 0 0 0 1px rgba(110, 180, 240, .24), 0 12px 30px -20px rgba(71, 159, 235, .9);
  transition: box-shadow .4s ease;
}
.cd-rain.joined { box-shadow: inset 0 0 0 1px rgba(79, 208, 107, .35), 0 12px 30px -20px rgba(79, 208, 107, .8); }
.cd-sky { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; }
.cd-rain-row { display: flex; align-items: center; gap: 10px; }
.cd-ring { position: relative; flex: none; width: 44px; height: 44px; display: grid; place-items: center; }
.cd-ring svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.cd-ring circle { fill: none; stroke-width: 3; }
.cd-ring-track { stroke: rgba(255, 255, 255, .09); }
.cd-ring-bar { stroke: #6cbcff; stroke-dasharray: 100; transition: stroke-dashoffset 1s linear, stroke .4s; filter: drop-shadow(0 0 3px rgba(108, 188, 255, .7)); }
.cd-ring > span {
  width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%;
  background: linear-gradient(180deg, #62b8ff, #2c82d2); color: #fff;
  font-size: 15px; font-weight: 900;
  box-shadow: 0 0 16px -2px rgba(71, 159, 235, .9), inset 0 1px 0 rgba(255, 255, 255, .35);
}
.cd-rain.last-call .cd-ring-bar { stroke: var(--cd-gold); filter: drop-shadow(0 0 4px rgba(245, 196, 81, .8)); }
.cd-rain.last-call .cd-ring > span { animation: cd-beat 1s ease-in-out infinite; }
@keyframes cd-beat { 50% { transform: scale(1.1); box-shadow: 0 0 24px 0 rgba(71, 159, 235, 1), inset 0 1px 0 rgba(255, 255, 255, .35); } }
.cd-rain-text { position: relative; min-width: 0; flex: 1; display: flex; flex-direction: column; }
.cd-pot { font-size: 19px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.cd-rain-text > span { font-size: 11.5px; color: #9ec2dc; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cd-clock { font-variant-numeric: tabular-nums; }
.cd-rain.last-call .cd-clock { color: var(--cd-gold); font-weight: 700; }
.cd-info {
  display: inline-grid; place-items: center; width: 14px; height: 14px; vertical-align: -2px;
  border: 1px solid rgba(160, 205, 235, .6); border-radius: 50%;
  font-style: normal; font-size: 9px; font-weight: 800; cursor: help;
}
.cd-chip-float {
  position: absolute; left: 0; top: -2px;
  padding: 1px 7px; border-radius: 999px;
  background: rgba(79, 208, 107, .18); color: #8ff0a0; font-size: 11px; font-weight: 800;
  pointer-events: none; animation: cd-float 1.6s var(--cd-ease) forwards;
}
@keyframes cd-float { 0% { opacity: 0; transform: translateY(6px); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateY(-18px); } }
.cd-tip {
  flex: none; width: 36px; height: 36px; padding: 0;
  display: grid; place-items: center;
  border: 0; border-radius: 10px;
  background: rgba(255, 255, 255, .08); color: #cfe6f8;
  transition: background .2s;
}
.cd-tip:hover, .cd-tip[aria-expanded="true"] { background: rgba(255, 255, 255, .15); color: #fff; }
.cd-tip svg { width: 18px; height: 18px; }
.cd-join {
  flex: none; height: 36px; padding: 0 15px;
  border: 0; border-radius: 10px;
  background: linear-gradient(180deg, #62de72, #33b14a); color: #fff;
  font-size: 13px; font-weight: 800;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .32), 0 8px 18px -10px rgba(79, 208, 107, 1);
  transition: transform .15s ease, filter .2s, background .3s, box-shadow .3s, color .3s;
}
.cd-join:hover { background: linear-gradient(180deg, #6fe57f, #37ba4f); filter: brightness(1.04); }
.cd-join:active { transform: scale(.96); }
.cd-join.joined {
  background: rgba(79, 208, 107, .13); color: #8ff0a0; cursor: default;
  box-shadow: inset 0 0 0 1px rgba(79, 208, 107, .45);
}
.cd-rain-meta {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 10px; font-size: 11.5px; color: #8fb0c6;
}
.cd-when { flex: none; display: inline-flex; align-items: center; gap: 4px; }
.cd-when svg { width: 13px; height: 13px; }
.cd-clock { color: #cfe6f8; font-weight: 700; }
.cd-donors { min-width: 0; display: flex; gap: 8px; justify-content: flex-end; overflow: hidden; white-space: nowrap; }
.cd-donors > span { overflow: hidden; text-overflow: ellipsis; }
.cd-donors b { color: #8ff0a0; font-weight: 700; }
.cd-hint { color: #7797ad; }

.cd-tray { margin-top: 10px; display: grid; gap: 8px; animation: cd-drop-down .3s var(--cd-ease); }
@keyframes cd-drop-down { from { opacity: 0; transform: translateY(-6px); } }
.cd-chips { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.cd-chips button {
  height: 30px; padding: 0; border: 0; border-radius: 8px;
  background: rgba(255, 255, 255, .07); color: #d7e6f0; font-size: 12.5px; font-weight: 700;
}
.cd-chips button:hover { background: rgba(255, 255, 255, .12); }
.cd-chips button.on { background: rgba(108, 188, 255, .2); color: #fff; box-shadow: inset 0 0 0 1px rgba(140, 200, 255, .5); }
.cd-tray-row { display: flex; gap: 6px; }
.cd-amount {
  flex: 1; min-width: 0; height: 36px; display: flex; align-items: center; gap: 4px;
  padding: 0 10px; border-radius: 9px;
  background: rgba(5, 10, 14, .55); box-shadow: inset 0 0 0 1px rgba(140, 200, 255, .2);
  color: #8fb0c6; font-weight: 700;
}
.cd-amount input {
  flex: 1; width: auto; min-width: 0; height: 100%; padding: 0; margin: 0;
  border: 0; background: none; color: #fff; font-weight: 700; font-variant-numeric: tabular-nums;
}
.cd-amount:focus-within { box-shadow: inset 0 0 0 1px rgba(140, 200, 255, .6); }
.cd-amount input:focus-visible { outline: none; }
.cd-donate {
  flex: none; height: 36px; padding: 0 16px; border: 0; border-radius: 9px;
  background: linear-gradient(180deg, #5aaaf0, #3a8fdc); color: #fff; font-size: 13px; font-weight: 800;
}
.cd-donate:hover { background: linear-gradient(180deg, #67b3f3, #4598e2); }

.cd-banner {
  margin-top: 10px; padding: 9px 11px; border-radius: 10px;
  display: grid; gap: 2px;
  background: linear-gradient(90deg, rgba(245, 196, 81, .2), rgba(245, 196, 81, .06));
  box-shadow: inset 0 0 0 1px rgba(245, 196, 81, .4);
  color: #ffe3a1; font-size: 12px;
}
.cd-banner b { font-weight: 800; }
.cd-banner span { color: #fff2cc; font-weight: 700; }
.cd-banner.show { animation: cd-banner .6s var(--spring); }
@keyframes cd-banner { from { opacity: 0; transform: scale(.94); } }

/* ------------------------------------------------------------------ lister */
.cd-body { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.cd-panel { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.cd-filters { margin: 0 12px 8px; }
.cd-filters button { height: 30px; font-size: 12.5px; }
.cd-list {
  flex: 1; min-height: 0; margin: 0; padding: 2px 8px 12px 12px; list-style: none;
  overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: #2b353c transparent;
  scrollbar-gutter: stable;
}
/* Chatten fyller nedenfra, som en vanlig chat, også når det er få meldinger. */
.cd-chat { display: flex; flex-direction: column; }
.cd-chat > :first-child { margin-top: auto; }
.cd-empty { margin: 8px 0; padding: 22px 16px; border-radius: 12px; background: rgba(255, 255, 255, .03); color: var(--cd-muted); text-align: center; font-size: 12.5px; }
.cd-in { animation: cd-in .45s var(--cd-ease) both; }
@keyframes cd-in { from { opacity: 0; transform: translateY(10px); } }
.cd-jump {
  position: absolute; left: 50%; bottom: 12px; z-index: 2; transform: translateX(-50%);
  height: 30px; padding: 0 14px; border: 0; border-radius: 999px;
  background: #2f8ad8; color: #fff; font-size: 12px; font-weight: 750; white-space: nowrap;
  box-shadow: 0 8px 22px -6px rgba(0, 0, 0, .7);
  animation: cd-in .3s var(--cd-ease);
}
.cd-jump:hover { background: #3b95e2; }
.cd-jump-top { top: 50px; bottom: auto; }

/* Avatar med nivåmerke */
.cd-av {
  position: relative; flex: none; width: 34px; height: 34px;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--av); color: #fff; font-size: 14px; font-weight: 800;
}
.cd-av img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.cd-lvl {
  position: absolute; left: -5px; bottom: -4px;
  min-width: 18px; height: 15px; padding: 0 4px; border-radius: 6px;
  font-style: normal; font-size: 9px; font-weight: 850; line-height: 15px; text-align: center;
  color: #0b0f12; background: var(--lv, #8ea3b3); box-shadow: 0 0 0 2px #13181c;
}
.cd-lvl[data-tier="2"] { --lv: #62d27c; }
.cd-lvl[data-tier="3"] { --lv: #62b8ff; }
.cd-lvl[data-tier="4"] { --lv: #b891ff; }
.cd-lvl[data-tier="5"] { --lv: linear-gradient(180deg, #ffe08a, #e9a93a); background: var(--lv); }

/* Chat */
.cd-msg { display: flex; gap: 11px; padding: 9px 8px 9px 9px; border-radius: 11px; transition: background .2s; }
.cd-msg:hover { background: rgba(255, 255, 255, .03); }
.cd-msg.mine { background: rgba(71, 159, 235, .07); }
.cd-msg-body { min-width: 0; flex: 1; }
.cd-msg-top { display: flex; align-items: baseline; gap: 6px; }
.cd-msg-top b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 700; color: #eef4f7; }
.cd-msg-top em { flex: none; font-style: normal; font-size: 10px; font-weight: 800; color: #7fc1ff; text-transform: uppercase; letter-spacing: .04em; }
.cd-msg-top time { margin-left: auto; flex: none; font-size: 10.5px; color: #62717b; }
.cd-role {
  flex: none; display: inline-flex; align-items: center; gap: 3px; align-self: center;
  height: 17px; padding: 0 6px 0 4px; border-radius: 6px;
  font-size: 9.5px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase;
}
.cd-role svg { width: 11px; height: 11px; }
.cd-role-admin { background: rgba(245, 196, 81, .15); color: #ffd772; box-shadow: inset 0 0 0 1px rgba(245, 196, 81, .35); }
.cd-role-moderator { background: rgba(101, 222, 189, .13); color: #7fe6c8; box-shadow: inset 0 0 0 1px rgba(101, 222, 189, .32); }
.cd-del {
  flex: none; width: 20px; height: 20px; padding: 0; margin-left: 2px; align-self: center;
  border: 0; border-radius: 6px; background: none; color: #7d8e99; font-size: 16px; line-height: 1;
  opacity: 0; transition: opacity .15s, background .15s, color .15s;
}
.cd-msg:hover .cd-del, .cd-del:focus-visible { opacity: 1; }
.cd-del:hover { background: rgba(229, 72, 77, .16); color: #ff8a8e; }
@media (hover: none) { .cd-del { opacity: 1; } }
.cd-msg p { margin: 2px 0 0; color: #c3ced5; overflow-wrap: anywhere; }

/* Lykketreff fra battles, midt i chatten */
.cd-lucky { padding: 5px 0; }
.cd-lucky-card {
  padding: 10px; border-radius: 13px;
  background:
    radial-gradient(90% 120% at 100% 50%, color-mix(in srgb, var(--c) 22%, transparent), transparent 70%),
    linear-gradient(180deg, #1c242a, #182025);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 34%, transparent);
}
.cd-lucky-top { display: flex; align-items: center; gap: 7px; font-size: 10.5px; color: #8697a2; }
.cd-lucky-top time { margin-left: auto; }
.cd-lucky-tag {
  padding: 2px 7px; border-radius: 6px;
  background: rgba(245, 196, 81, .14); color: #ffd772; font-weight: 800; letter-spacing: .03em;
}
.cd-lucky-main { display: flex; align-items: center; gap: 10px; margin: 9px 0; }
.cd-lucky-main > div { min-width: 0; flex: 1; }
.cd-lucky-main b { display: block; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cd-lucky-main p { margin: 1px 0 0; font-size: 12px; color: #a9b7c0; line-height: 1.35; }
.cd-lucky-main p strong { color: var(--cd-green); }
.cd-lucky-art { flex: none; width: 58px; height: 50px; display: grid; place-items: center; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .5)); }
.cd-lucky-art .product-art { width: 58px; height: 50px; object-fit: contain; }
.cd-lucky-art .product-emoji { font-size: 30px; }
.cd-lucky-art .reward-voucher, .cd-drop-art .reward-voucher { transform: scale(.55); }
.cd-lucky-view {
  width: 100%; height: 32px; padding: 0; border: 0; border-radius: 9px;
  background: rgba(255, 255, 255, .07); color: #dbe7ee; font-size: 12.5px; font-weight: 700;
  transition: background .2s;
}
.cd-lucky-view:hover { background: rgba(255, 255, 255, .13); }

/* Bidrag til Rain Pool, som kort i chatten */
.cd-tip-entry { padding: 5px 0; }
.cd-tipcard {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; align-items: center; gap: 11px; padding: 11px 12px;
  border-radius: 13px;
  background:
    radial-gradient(90% 140% at 0% 0%, rgba(71, 159, 235, .26), transparent 65%),
    linear-gradient(135deg, #15293a, #172026 70%);
  box-shadow: inset 0 0 0 1px rgba(110, 180, 240, .3);
}
.cd-tipcard > div { min-width: 0; flex: 1; display: grid; gap: 1px; }
.cd-tipcard b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: #eef4f7; }
.cd-tipcard p { margin: 0; font-size: 12px; color: #a9c3d6; }
.cd-tipcard p strong { color: #8ff0a0; font-weight: 800; }
.cd-tipcard-x { font-style: normal; font-size: 10.5px; font-weight: 800; color: #cfe6f8; padding: 0 5px; border-radius: 5px; background: rgba(255, 255, 255, .08); }
.cd-tipcard time { align-self: flex-start; flex: none; font-size: 10.5px; color: #6f8494; }
.cd-tipcard-tag {
  display: inline-flex; align-items: center; gap: 4px; justify-self: start; margin-bottom: 2px;
  padding: 1px 7px 1px 5px; border-radius: 6px;
  background: rgba(108, 188, 255, .16); color: #8fcaff; font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
}
.cd-tipcard-tag svg { width: 11px; height: 11px; }
/* Tre dråper som faller gjennom kortet når bidraget er nytt */
.cd-tipcard-drops { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.cd-tipcard-drops i {
  position: absolute; top: -14px; width: 2px; height: 12px; border-radius: 2px; opacity: 0;
  background: linear-gradient(180deg, transparent, rgba(150, 210, 255, .9));
}
.cd-tipcard-drops i:nth-child(1) { left: 58%; }
.cd-tipcard-drops i:nth-child(2) { left: 74%; }
.cd-tipcard-drops i:nth-child(3) { left: 88%; }
.cd-tip-entry.fresh .cd-tipcard { animation: cd-tip-glow 1.8s ease-out; }
.cd-tip-entry.fresh .cd-tipcard-drops i { animation: cd-tip-fall 1.1s ease-in 2; }
.cd-tip-entry.fresh .cd-tipcard-drops i:nth-child(2) { animation-delay: .25s; }
.cd-tip-entry.fresh .cd-tipcard-drops i:nth-child(3) { animation-delay: .5s; }
@keyframes cd-tip-fall { 0% { opacity: 0; transform: translateY(0); } 15% { opacity: 1; } 100% { opacity: 0; transform: translateY(90px); } }
@keyframes cd-tip-glow { 0% { box-shadow: inset 0 0 0 1px rgba(140, 200, 255, .9), 0 0 26px -4px rgba(71, 159, 235, .9); } }

/* Live Drop */
.cd-drop { display: grid; grid-template-rows: 1fr; }
.cd-drop.cd-in { animation: cd-grow .55s var(--cd-ease) both; }
.cd-drop.cd-in .cd-drop-card { animation: cd-flash 1.6s ease-out; }
@keyframes cd-grow { from { grid-template-rows: 0fr; opacity: 0; } }
@keyframes cd-flash { 0% { box-shadow: inset 0 0 0 1px var(--c), 0 0 26px -6px var(--c); } }
.cd-drop-in { min-height: 0; overflow: hidden; padding-bottom: 6px; }
.cd-drop-card {
  position: relative; width: 100%; padding: 8px 10px 8px 8px;
  display: flex; align-items: center; gap: 10px; text-align: left;
  border: 0; border-radius: 12px;
  background:
    radial-gradient(80% 110% at 0% 50%, color-mix(in srgb, var(--c) 20%, transparent), transparent 70%),
    var(--cd-card);
  box-shadow: inset 0 0 0 1px var(--cd-line);
  color: inherit; font-weight: 400;
  transition: transform .2s var(--cd-ease), box-shadow .2s;
}
.cd-drop-card::before {
  content: ''; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 0 3px 3px 0;
  background: var(--c); box-shadow: 0 0 10px var(--c);
}
.cd-drop-card:hover { background: radial-gradient(80% 110% at 0% 50%, color-mix(in srgb, var(--c) 28%, transparent), transparent 70%), #1e272d; transform: translateX(-2px); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 40%, transparent); }
.cd-drop-art { flex: none; width: 60px; height: 52px; display: grid; place-items: center; }
.cd-drop-art .product-art { width: 60px; height: 52px; object-fit: contain; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .45)); transition: transform .3s var(--spring); }
.cd-drop-card:hover .cd-drop-art .product-art { transform: scale(1.08) rotate(-3deg); }
.cd-drop-art .product-emoji { font-size: 30px; }
.cd-drop-info { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 1px; }
.cd-drop-top { display: flex; align-items: baseline; gap: 8px; }
.cd-drop-top strong { font-size: 14px; font-weight: 800; color: var(--cd-green); font-variant-numeric: tabular-nums; }
.cd-drop-top time { margin-left: auto; font-size: 10.5px; color: #62717b; }
.cd-drop-name { font-size: 12.5px; color: #e1e9ee; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cd-drop-meta { display: flex; align-items: center; gap: 6px; margin-top: 3px; font-size: 11px; color: #7f909b; }
.cd-drop-meta img { width: 13px; height: 18px; object-fit: cover; border-radius: 2px; flex: none; }
.cd-drop-pack { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cd-drop-meta .cd-av { width: 16px; height: 16px; font-size: 9px; }
.cd-drop-meta bdi { flex: none; max-width: 42%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #b5c3cc; }
.cd-drop.rare .cd-drop-top strong { color: #7fe39a; }
/* Store dropp: glans som glir over kortet */
.cd-drop.epic .cd-drop-card { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cd-gold) 45%, transparent); }
.cd-drop.epic .cd-drop-top strong { color: var(--cd-gold); }
.cd-drop.epic .cd-drop-card::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 230, 160, .14) 50%, transparent 65%) -200% 0 / 200% 100% no-repeat;
  animation: cd-shine 3.2s ease-in-out infinite;
}
@keyframes cd-shine { 60%, 100% { background-position: 200% 0; } }

/* ------------------------------------------------------------------ skrivefelt */
.cd-compose { position: relative; padding: 10px 12px 12px; border-top: 1px solid var(--cd-line); }
.cd-form {
  display: flex; align-items: center; gap: 4px;
  height: 46px; padding: 0 5px;
  border-radius: 13px;
  background: var(--cd-sunk); box-shadow: inset 0 0 0 1px var(--cd-line);
  transition: box-shadow .2s;
}
.cd-form:focus-within { box-shadow: inset 0 0 0 1px rgba(120, 190, 255, .55), 0 0 0 3px rgba(71, 159, 235, .14); }
.cd-form input {
  flex: 1; width: auto; min-width: 0; height: 100%; padding: 0 4px; margin: 0;
  border: 0; border-radius: 0; background: none; color: #fff; font-size: 13.5px;
}
.cd-form input:focus-visible { outline: none; }
.cd-form input::placeholder { color: #66757f; }
.cd-left { flex: none; font-size: 10.5px; color: #8a7a4a; font-variant-numeric: tabular-nums; }
.cd-emoji, .cd-send {
  flex: none; width: 36px; height: 36px; padding: 0;
  display: grid; place-items: center; border: 0; border-radius: 10px;
  background: none; color: #8d9ca6; transition: background .2s, color .2s, transform .15s;
}
.cd-emoji:hover, .cd-emoji[aria-expanded="true"] { background: rgba(255, 255, 255, .07); color: #fff; }
.cd-emoji svg, .cd-send svg { width: 19px; height: 19px; }
.cd-send {
  background: linear-gradient(180deg, #5aaaf0, #3a8fdc); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 6px 14px -8px rgba(71, 159, 235, 1);
}
.cd-send:hover { background: linear-gradient(180deg, #67b3f3, #4598e2); }
.cd-send:active { transform: scale(.94); }
.cd-form.sending .cd-send { opacity: .6; pointer-events: none; }
.cd-emoji-pop {
  position: absolute; left: 12px; right: 12px; bottom: calc(100% - 4px); z-index: 3;
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px;
  padding: 6px; border-radius: 12px;
  background: #1c242a; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 16px 40px rgba(0, 0, 0, .55);
  animation: cd-in .2s var(--cd-ease);
}
.cd-emoji-pop button {
  height: 36px; padding: 0; border: 0; border-radius: 8px; background: none; font-size: 19px;
  transition: background .15s, transform .15s var(--spring);
}
.cd-emoji-pop button:hover { background: rgba(255, 255, 255, .08); transform: scale(1.15); }
/* GIF-knapp og -velger */
.cd-gifbtn {
  flex: none; height: 26px; padding: 0 7px; border: 0; border-radius: 7px;
  background: rgba(255, 255, 255, .07); color: #aebbc4;
  font-size: 10.5px; font-weight: 850; letter-spacing: .06em;
  transition: background .2s, color .2s;
}
.cd-gifbtn:hover, .cd-gifbtn[aria-expanded="true"] { background: rgba(108, 188, 255, .18); color: #fff; }
.cd-gifbtn[hidden] { display: none; }
.cd-gif-pop {
  position: absolute; left: 12px; right: 12px; bottom: calc(100% - 4px); z-index: 3;
  height: min(420px, 62vh); display: flex; flex-direction: column;
  border-radius: 14px; overflow: hidden;
  background: #1a2227; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 18px 44px rgba(0, 0, 0, .6);
  animation: cd-in .22s var(--cd-ease);
}
.cd-gif-pop[hidden] { display: none; }
.cd-gif-pop.sending { opacity: .6; pointer-events: none; }
.cd-gif-search {
  flex: none; display: flex; align-items: center; gap: 8px;
  margin: 8px; padding: 0 10px; height: 38px; border-radius: 10px;
  background: var(--cd-sunk); box-shadow: inset 0 0 0 1px var(--cd-line); color: #7d8e99;
}
.cd-gif-search:focus-within { box-shadow: inset 0 0 0 1px rgba(120, 190, 255, .55); }
.cd-gif-search svg { width: 16px; height: 16px; flex: none; }
.cd-gif-search input {
  flex: 1; width: auto; min-width: 0; height: 100%; padding: 0; margin: 0;
  border: 0; border-radius: 0; background: none; color: #fff; font-size: 13px;
}
.cd-gif-search input:focus-visible { outline: none; }
.cd-gif-search input::-webkit-search-cancel-button { filter: invert(.6); }
.cd-gif-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 0 8px 8px; scrollbar-width: thin; scrollbar-color: #2b353c transparent; }
.cd-gif-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; align-items: start; }
.cd-gif-cols > div { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cd-gif-item {
  display: block; width: 100%; padding: 0; border: 0; border-radius: 9px; overflow: hidden;
  background: linear-gradient(110deg, #202a30 30%, #27323a 50%, #202a30 70%) 0 0 / 200% 100%;
  animation: cd-shimmer 1.4s linear infinite;
  transition: transform .2s var(--spring), box-shadow .2s;
}
.cd-gif-item:hover { transform: scale(1.03); box-shadow: 0 0 0 2px rgba(108, 188, 255, .7); }
.cd-gif-item img { display: block; width: 100%; height: 100%; object-fit: cover; }
@keyframes cd-shimmer { to { background-position: -200% 0; } }
.cd-gif-state { margin: 16px 6px; color: var(--cd-muted); font-size: 12.5px; text-align: center; }
.cd-gif-state:empty { display: none; }
.cd-gif-more { display: block; height: 1px; }
.cd-gif-foot {
  flex: none; padding: 6px 10px; border-top: 1px solid var(--cd-line);
  color: #7d8e99; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-align: right;
}
/* GIF i en chatmelding */
.cd-gif {
  display: block; width: min(200px, 100%); max-height: 260px; margin-top: 5px;
  border-radius: 10px; overflow: hidden; background: #1f282e;
}
.cd-gif img { display: block; width: 100%; height: 100%; object-fit: cover; }

.cd-signin {
  width: 100%; height: 44px; border: 0; border-radius: 12px;
  background: linear-gradient(180deg, #5aaaf0, #3a8fdc); color: #fff; font-size: 14px; font-weight: 750;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 8px 20px -10px rgba(71, 159, 235, 1);
}
.cd-signin:hover { filter: brightness(1.06); }

.cd-shower { position: absolute; inset: 0; z-index: 5; width: 100%; height: 100%; pointer-events: none; opacity: 0; }
.cd-shower.on { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .cdock, .cd-glow, .cd-open, .cd-open svg { transition: none; }
  .cd-live, .cd-drop.epic .cd-drop-card::after, .cd-rain.last-call .cd-ring > span, .cd-gif-item,
  .cd-tip-entry.fresh .cd-tipcard, .cd-tip-entry.fresh .cd-tipcard-drops i { animation: none; }
}