/* === Role-specific bubble styles === */
/* Admin */
.bubble.role-admin.other {
  background: linear-gradient(135deg, rgba(255,215,0,0.14), rgba(218,165,32,0.10));
  border: 1px solid rgba(255,215,0,0.35);
  color: #fff1bf;
}
.bubble.role-admin.own {
  background: linear-gradient(135deg, rgba(218,165,32,0.26), rgba(255,215,0,0.20));
  border: 1px solid rgba(255,215,0,0.65);
  color: #ffe38c;
}

/* Mod */
.bubble.role-mod.other {
  background: linear-gradient(135deg, rgba(77,166,255,0.12), rgba(26,117,255,0.09));
  border: 1px solid rgba(77,166,255,0.35);
  color: #d6ecff;
}
.bubble.role-mod.own {
  background: linear-gradient(135deg, rgba(26,117,255,0.20), rgba(77,166,255,0.16));
  border: 1px solid rgba(77,166,255,0.60);
  color: #cfe6ff;
}

/* Founder */
.bubble.role-founder.other {
  background: linear-gradient(135deg, rgba(220, 20, 60, 0.14), rgba(218, 165, 32, 0.10));
  border: 1px solid rgba(220, 20, 60, 0.35);
  color: #ffdede;
}
.bubble.role-founder.own {
  background: linear-gradient(135deg, rgba(220, 20, 60, 0.26), rgba(218, 165, 32, 0.20));
  border: 1px solid rgba(220, 20, 60, 0.65);
  color: #ffe3e3;
}

/* Developer */
.bubble.role-developer.other {
  background: linear-gradient(135deg, rgba(0, 200, 170, 0.14), rgba(0, 255, 200, 0.10));
  border: 1px solid rgba(0, 200, 170, 0.35);
  color: #ccfff5;
}
.bubble.role-developer.own {
  background: linear-gradient(135deg, rgba(0, 200, 170, 0.26), rgba(0, 255, 200, 0.20));
  border: 1px solid rgba(0, 200, 170, 0.65);
  color: #d6fff8;
}

/* Light theme: same colors via vars */
:root[data-theme="light"] {
  --role-admin-other-bg: linear-gradient(135deg, rgba(255,215,0,0.14), rgba(218,165,32,0.10));
  --role-admin-other-border: rgba(255,215,0,0.35);
  --role-admin-other-text: #fff1bf;
  --role-admin-own-bg: linear-gradient(135deg, rgba(218,165,32,0.26), rgba(255,215,0,0.20));
  --role-admin-own-border: rgba(255,215,0,0.65);
  --role-admin-own-text: #ffe38c;

  --role-mod-other-bg: linear-gradient(135deg, rgba(77,166,255,0.12), rgba(26,117,255,0.09));
  --role-mod-other-border: rgba(77,166,255,0.35);
  --role-mod-other-text: #d6ecff;
  --role-mod-own-bg: linear-gradient(135deg, rgba(26,117,255,0.20), rgba(77,166,255,0.16));
  --role-mod-own-border: rgba(77,166,255,0.60);
  --role-mod-own-text: #cfe6ff;

  --role-founder-other-bg:  linear-gradient(135deg, rgba(220,20,60,0.56) 0%, rgba(220,20,60,0.53) 100%);
  --role-founder-other-border: rgba(220,20,60,0.28);
  --role-founder-other-text:  #ffffff; 
  --role-founder-own-bg:    linear-gradient(135deg, rgba(220,20,60,0.52) 0%, rgba(220,20,60,0.56) 100%);
  --role-founder-own-border: rgba(220,20,60,0.44);
  --role-founder-own-text:   #ffffff; 

  --role-dev-other-bg: linear-gradient(135deg, rgba(0,200,170,0.14), rgba(0,255,200,0.10));
  --role-dev-other-border: rgba(0,200,170,0.35);
  --role-dev-other-text: #ccfff5;
  --role-dev-own-bg: linear-gradient(135deg, rgba(0,200,170,0.26), rgba(0,255,200,0.20));
  --role-dev-own-border: rgba(0,200,170,0.65);
  --role-dev-own-text: #d6fff8;
}

/* Apply vars in light */
:root[data-theme="light"] .bubble.role-admin.other {
  background: var(--role-admin-other-bg);
  border: 1px solid var(--role-admin-other-border);
  color: var(--role-admin-other-text);
}
:root[data-theme="light"] .bubble.role-admin.own {
  background: var(--role-admin-own-bg);
  border: 1px solid var(--role-admin-own-border);
  color: var(--role-admin-own-text);
}
:root[data-theme="light"] .bubble.role-mod.other {
  background: var(--role-mod-other-bg);
  border: 1px solid var(--role-mod-other-border);
  color: var(--role-mod-other-text);
}
:root[data-theme="light"] .bubble.role-mod.own {
  background: var(--role-mod-own-bg);
  border: 1px solid var(--role-mod-own-border);
  color: var(--role-mod-own-text);
}
:root[data-theme="light"] .bubble.role-founder.other {
  background: var(--role-founder-other-bg);
  border: 1px solid var(--role-founder-other-border);
  color: var(--role-founder-other-text);
}
:root[data-theme="light"] .bubble.role-founder.own {
  background: var(--role-founder-own-bg);
  border: 1px solid var(--role-founder-own-border);
  color: var(--role-founder-own-text);
}
:root[data-theme="light"] .bubble.role-developer.other {
  background: var(--role-dev-other-bg);
  border: 1px solid var(--role-dev-other-border);
  color: var(--role-dev-other-text);
}
:root[data-theme="light"] .bubble.role-developer.own {
  background: var(--role-dev-own-bg);
  border: 1px solid var(--role-dev-own-border);
  color: var(--role-dev-own-text);
}

/* Make links & mentions inherit in staff bubbles */
.bubble.role-admin a,
.bubble.role-mod a,
.bubble.role-admin .mention,
.bubble.role-mod .mention {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
}
.bubble.role-admin:hover,
.bubble.role-mod:hover { transform: translateY(-2px); }

:root {
  --crown-img: url("https://ak5c.se/chat/img/crowns/clean.png");

  /* Gradient fills (dark theme default) */
  --crown-mod-fill:     linear-gradient(180deg, #f2f4f7 0%, #c9d0d8 45%, #9aa3ae 100%);
  --crown-admin-fill:   linear-gradient(180deg, #ffe79c 0%, #d4af37 50%, #8f6b00 100%);
  --crown-founder-fill: linear-gradient(180deg, #ff8a8a 0%, #dc143c 55%, #7f0f22 100%);

  --crown-filter: none; /* unchanged */
}

:root[data-theme="light"] {
  /* Lite mörkare för bättre kontrast på ljus bakgrund */
  --crown-mod-fill:     linear-gradient(180deg, #e3e7ec 0%, #a9b1bb 55%, #7a808a 100%);
  --crown-admin-fill:   linear-gradient(180deg, #ffd86a 0%, #b78f21 55%, #6e5200 100%);
  --crown-founder-fill: linear-gradient(180deg, #ff7a7a 0%, #b0122c 55%, #5e0a18 100%);

  --crown-filter: drop-shadow(0 1px 0 rgba(0,0,0,.12))
                   drop-shadow(0 0 1px rgba(0,0,0,.12));
}

/* Bas-ikon (samma mask), men background tar nu en gradient */
.crown{
  --crown-size: 1.15em;
  display:inline-block;
  width:var(--crown-size);
  aspect-ratio: 4 / 3;
  vertical-align:-0.0em;

  /* gradient först, fall back till solid om ingen gradient satt */
  background: var(--crown-fill, var(--crown-color, currentColor));

  -webkit-mask-image:var(--crown-img);
          mask-image:var(--crown-img);
  -webkit-mask-repeat:no-repeat;    mask-repeat:no-repeat;
  -webkit-mask-size:contain;        mask-size:contain;
  -webkit-mask-position:center;     mask-position:center;
  filter: var(--crown-filter);
}

/* Varianter kopplar in respektive gradient */
.crown-mod     { --crown-fill: var(--crown-mod-fill); }
.crown-admin   { --crown-fill: var(--crown-admin-fill); }
.crown-founder { --crown-fill: var(--crown-founder-fill); }

/* Storlekar */
.crown--sm { --crown-size:.875em; }
.crown--lg { --crown-size:1.25em; }