/* The server selects APP_THEME or a validated ?theme= override before paint. */
.theme-garland { display: none; }

.chat-header-info {
  flex: 1;
  min-width: 0;
  text-align: center;
}

:root:is([data-theme="halloween"], [data-theme="thanksgiving"], [data-theme="christmas"], [data-theme="newyear"], [data-theme="birthday"]) .chat-header-info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

:root:is([data-theme="halloween"], [data-theme="thanksgiving"], [data-theme="christmas"], [data-theme="newyear"], [data-theme="birthday"]) .theme-garland {
  flex: 1;
  min-width: 0;
  height: 24px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  overflow: hidden;
  pointer-events: none;
}

:root:is([data-theme="halloween"], [data-theme="thanksgiving"], [data-theme="christmas"], [data-theme="newyear"], [data-theme="birthday"]) .chat-header-info .chat-dates {
  display: none;
}

.theme-garland span {
  flex: 0 0 24px;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  font-size: 18px;
  line-height: 24px;
}

:root[data-theme="christmas"] .theme-garland span {
  font-size: 15px;
  text-shadow: 0 0 8px #fff5df70;
}

@media (max-width: 640px) {
  :root:is([data-theme="halloween"], [data-theme="thanksgiving"], [data-theme="christmas"], [data-theme="newyear"], [data-theme="birthday"]) #chat-bar { gap: 0.45rem; }
  :root:is([data-theme="halloween"], [data-theme="thanksgiving"], [data-theme="christmas"], [data-theme="newyear"], [data-theme="birthday"]) .chat-header-info {
    flex: 0 2 48px;
  }
  :root[data-theme="default"] .chat-header-info { display: none; }
  .theme-garland span { flex-basis: 22px; font-size: 16px; }
}

:root[data-theme="halloween"] {
  --bg: #fff0dc;
  --panel: #fffdf9;
  --accent: #b8490a;
  --accent-soft: #ffdbb2;
  --bot: #71369b;
  --text: #302238;
  --muted: #705c73;
  --border: #e5cbb1;
  --brand-bg: #392043;
  --brand-text: #fff2df;
  --sidebar-bg: #f4eaf7;
  --composer-bg: #fff5e8;
  --season-edge: #e58a30;
  --season-motif: "☾  ✧";
  --season-pattern: radial-gradient(ellipse at 100% 0%, #f6ab5550, transparent 65%);
}

:root[data-theme="thanksgiving"] {
  --bg: #faf0df;
  --panel: #fffdf7;
  --accent: #9b421f;
  --accent-soft: #f5d6af;
  --bot: #59652d;
  --text: #3e2c20;
  --muted: #78614e;
  --border: #dfc7a7;
  --brand-bg: #61351f;
  --brand-text: #fff3da;
  --sidebar-bg: #f2e5ce;
  --composer-bg: #fcf3e5;
  --season-edge: #bb812f;
  --season-motif: "🍁  🍂";
  --season-pattern: radial-gradient(ellipse at 100% 0%, #d89c4250, transparent 65%);
  --season-icon: url("/themes/thanksgiving.svg");
}

:root[data-theme="christmas"] {
  --bg: #e6f0e7;
  --panel: #fffefa;
  --accent: #bc273b;
  --accent-soft: #fbdcdf;
  --bot: #176343;
  --text: #263e34;
  --muted: #576f60;
  --border: #c5d8c8;
  --brand-bg: #124a34;
  --brand-text: #fff5df;
  --sidebar-bg: #e4efe5;
  --composer-bg: #f5f7ed;
  --season-edge: #caa24b;
  --season-motif: "✦  ✧";
  --season-pattern: radial-gradient(ellipse at 100% 0%, #d2bc6850, transparent 65%);
}

:root:is([data-theme="halloween"], [data-theme="thanksgiving"], [data-theme="christmas"], [data-theme="newyear"], [data-theme="birthday"]) .sidebar {
  background: var(--sidebar-bg);
}

:root:is([data-theme="halloween"], [data-theme="thanksgiving"], [data-theme="christmas"], [data-theme="newyear"], [data-theme="birthday"]) .composer {
  background: var(--composer-bg);
}

:root:is([data-theme="halloween"], [data-theme="thanksgiving"], [data-theme="christmas"], [data-theme="newyear"], [data-theme="birthday"]) .chat-bar {
  box-shadow: inset 0 -2px 0 var(--season-edge);
}

:root:is([data-theme="halloween"], [data-theme="thanksgiving"], [data-theme="christmas"], [data-theme="newyear"], [data-theme="birthday"]) .sidebar-brand {
  background: var(--brand-bg);
  color: var(--brand-text);
  border-bottom-color: transparent;
  box-shadow: inset 0 -3px 0 var(--season-edge);
}

:root:is([data-theme="halloween"], [data-theme="thanksgiving"], [data-theme="christmas"], [data-theme="newyear"], [data-theme="birthday"]) .sidebar-brand::after {
  content: var(--season-motif);
  color: #eac37b;
  margin-left: auto;
  font-size: 0.8rem;
  white-space: nowrap;
}

:root:is([data-theme="halloween"], [data-theme="thanksgiving"], [data-theme="christmas"], [data-theme="newyear"], [data-theme="birthday"]) #login-view {
  background-image: var(--season-pattern);
}

:root:is([data-theme="halloween"], [data-theme="thanksgiving"], [data-theme="christmas"], [data-theme="newyear"], [data-theme="birthday"]) .login-card {
  border: 1px solid var(--border);
  border-top: 4px solid var(--accent);
  box-shadow: 0 12px 48px #30223810;
}

:root:is([data-theme="halloween"], [data-theme="thanksgiving"], [data-theme="christmas"], [data-theme="newyear"], [data-theme="birthday"]) .login-card h1::before {
  content: "";
  display: block;
  width: 44px;
  height: 44px;
  margin: 0 auto 0.8rem;
  background: center / contain no-repeat var(--season-icon);
}

:root[data-theme="halloween"] { --season-icon: url("/themes/halloween.svg"); }
:root[data-theme="christmas"] { --season-icon: url("/themes/christmas.svg"); }

:root:is([data-theme="halloween"], [data-theme="thanksgiving"], [data-theme="christmas"], [data-theme="newyear"], [data-theme="birthday"]) :is(.messages, .todo-scroller) {
  background-image: var(--season-pattern);
}

:root:is([data-theme="halloween"], [data-theme="thanksgiving"], [data-theme="christmas"], [data-theme="newyear"], [data-theme="birthday"]) .msg.bot .who {
  color: var(--bot);
}

:root:is([data-theme="halloween"], [data-theme="thanksgiving"], [data-theme="christmas"], [data-theme="newyear"], [data-theme="birthday"]) :is(input, textarea, select) {
  color: var(--text);
  background-color: var(--panel);
}

:root:is([data-theme="halloween"], [data-theme="thanksgiving"], [data-theme="christmas"], [data-theme="newyear"], [data-theme="birthday"]) :focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

:root:is([data-theme="halloween"], [data-theme="thanksgiving"], [data-theme="christmas"], [data-theme="newyear"], [data-theme="birthday"]) #calendar {
  --fc-border-color: var(--border);
  --fc-today-bg-color: var(--accent-soft);
  --fc-neutral-bg-color: var(--bg);
}

/* Snowy surfaces, midnight blue, silver, and celebratory gold. */
:root[data-theme="newyear"] {
  --bg: #edf5fc;
  --panel: #ffffff;
  --accent: #315ca8;
  --accent-soft: #dce9fa;
  --bot: #6552a3;
  --text: #20324c;
  --muted: #576b83;
  --border: #c8d8e9;
  --brand-bg: #182f55;
  --brand-text: #f5faff;
  --sidebar-bg: #e5eff9;
  --composer-bg: #f4f8fd;
  --season-edge: #c6a254;
  --season-motif: "🎉  ✨";
  --season-icon: url("/themes/newyear.svg");
  --season-pattern:
    radial-gradient(ellipse at 100% 0%, #a8c8ef55, transparent 60%),
    radial-gradient(ellipse at 0% 100%, #d3c6ed40, transparent 55%);
}

:root[data-theme="newyear"] .sidebar-brand {
  background: linear-gradient(120deg, #182f55, #334d78);
}

:root[data-theme="newyear"] .theme-garland span {
  filter: drop-shadow(0 0 3px #9ebeea80);
}

:root[data-theme="newyear"] .login-card {
  border-top-color: var(--season-edge);
}

:root[data-theme="newyear"] .login-card h1::after {
  content: "🎆  🎉  🥂  🎇";
  display: block;
  margin-top: 0.8rem;
  font-size: 1.25rem;
  letter-spacing: 0.3rem;
}

/* Birthday: raspberry, lilac, and buttercream with cake and party decorations. */
:root[data-theme="birthday"] {
  --bg: #fff0f5;
  --panel: #fffdf9;
  --accent: #a92c68;
  --accent-soft: #fad9e9;
  --bot: #7451a0;
  --text: #43283f;
  --muted: #7c6276;
  --border: #e7c8da;
  --brand-bg: #673356;
  --brand-text: #fff4da;
  --sidebar-bg: #f5e8f4;
  --composer-bg: #fff5e9;
  --season-edge: #e8b74f;
  --season-motif: "🎈  ✨";
  --season-icon: url("/themes/birthday.svg");
  --season-pattern:
    radial-gradient(ellipse at 100% 0%, #f3bbd655, transparent 60%),
    radial-gradient(ellipse at 0% 100%, #dfc9f550, transparent 60%);
}

:root[data-theme="birthday"] .sidebar-brand {
  background: linear-gradient(120deg, #673356, #875283);
}