/* Glucer shared theme: color schemes, header, profile menu, logo, loading screen */

:root, :root[data-scheme="honey"][data-theme="light"] {
  --bg:#F5F3F8; --surface:#FFFFFF; --ink:#2A1B3D; --soft:#5E5170; --line:#DDD6E8; --accent:#E8A317; --on-accent:#2A1B3D;
}
:root[data-scheme="honey"][data-theme="dark"] {
  --bg:#1E1530; --surface:#271B3B; --ink:#F3EEF8; --soft:#B6A8CC; --line:#3C2D54; --accent:#F0B235; --on-accent:#1E1530;
}
:root[data-scheme="ocean"][data-theme="light"] {
  --bg:#EEF4F8; --surface:#FFFFFF; --ink:#10303F; --soft:#4C6A78; --line:#D3E2EA; --accent:#17779F; --on-accent:#FFFFFF;
}
:root[data-scheme="ocean"][data-theme="dark"] {
  --bg:#0D1E27; --surface:#132A36; --ink:#E6F2F8; --soft:#8FB0BF; --line:#1F3D4D; --accent:#4DB5E0; --on-accent:#07161D;
}
:root[data-scheme="forest"][data-theme="light"] {
  --bg:#F1F5F0; --surface:#FFFFFF; --ink:#1D3325; --soft:#547060; --line:#D5E2D8; --accent:#26794B; --on-accent:#FFFFFF;
}
:root[data-scheme="forest"][data-theme="dark"] {
  --bg:#101C15; --surface:#172A1F; --ink:#E7F3EB; --soft:#92B3A0; --line:#24402F; --accent:#4FC083; --on-accent:#08140D;
}
:root[data-scheme="rose"][data-theme="light"] {
  --bg:#FAF1F3; --surface:#FFFFFF; --ink:#3A1A26; --soft:#7A5563; --line:#EBD3DA; --accent:#C23361; --on-accent:#FFFFFF;
}
:root[data-scheme="rose"][data-theme="dark"] {
  --bg:#24121A; --surface:#301A24; --ink:#FBEAF0; --soft:#C79BAB; --line:#4A2937; --accent:#F06A92; --on-accent:#1C0A12;
}
:root[data-scheme="graphite"][data-theme="light"] {
  --bg:#F3F3F4; --surface:#FFFFFF; --ink:#1F2328; --soft:#5F6670; --line:#DEDFE2; --accent:#3D4450; --on-accent:#FFFFFF;
}
:root[data-scheme="graphite"][data-theme="dark"] {
  --bg:#141517; --surface:#1D1F22; --ink:#ECEDEE; --soft:#9AA0A8; --line:#2C2F34; --accent:#C7CCD3; --on-accent:#141517;
}

:root { --danger:#B3261E; --ok:#1E7A46; --msg-size:16px; }
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; --danger:#FF8A80; --ok:#6FD39B; }
:root[data-size="small"] { --msg-size:14px; }
:root[data-size="large"] { --msg-size:19px; }

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; display: flex; flex-direction: column;
  background: var(--bg); color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  transition: background .25s ease, color .25s ease;
}
.hidden { display: none !important; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* Header */
.app-header {
  position: relative; z-index: 50;
  flex: none; display: flex; justify-content: space-between; align-items: center;  padding: 10px 18px; background: var(--surface); border-bottom: 1px solid var(--line);
  animation: fadeDown .5s ease both;
  transition: background .25s ease, border-color .25s ease;
}
.left { display: flex; align-items: center; gap: 6px; }
.brand { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 20px; color: var(--ink); text-decoration: none; letter-spacing: -0.02em; }
.mark { width: 20px; height: 20px; border-radius: 50% 50% 50% 6px; background: var(--accent); transition: background .25s ease; }
.icon-btn {
  width: 38px; height: 38px; display: grid; place-items: center;
  background: transparent; color: var(--soft); border: 0; border-radius: 50%; cursor: pointer;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.icon-btn:hover { background: var(--bg); color: var(--ink); transform: scale(1.06); }

/* Profile + hover menu */
.profile { position: relative; }
.avatar {
  width: 38px; height: 38px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--accent); color: var(--on-accent); font-weight: 700; font-size: 16px;
  transition: transform .2s ease, background .25s ease;
}
.avatar:hover { transform: scale(1.06); }
.menu { position: absolute; right: 0; top: 100%; padding-top: 8px; display: none; z-index: 40; }
.profile:hover .menu, .profile:focus-within .menu { display: block; animation: menuIn .16s ease-out; }
.menu-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  padding: 8px; min-width: 160px; box-shadow: 0 10px 30px -12px rgba(0,0,0,.35);
}
.who { font-size: 12px; color: var(--soft); padding: 2px 8px 6px; max-width: 230px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-item {
  display: block; width: 100%; text-align: left; background: transparent; color: var(--ink);
  border: 0; border-radius: 8px; padding: 8px; font: inherit; font-size: 13px; cursor: pointer; text-decoration: none;
}
.menu-item:hover { background: var(--bg); }

/* Logo */
.logo {
  position: relative; flex: none; display: inline-block;
  width: 26px; height: 26px; background: var(--accent);
  border-radius: 50% 50% 50% 8px;
  transition: background .25s ease, box-shadow .3s ease;
}
.logo.thinking { animation: morph 2s ease-in-out infinite; }
.logo.thinking::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  border: 2px solid var(--accent); animation: ring 2s ease-out infinite;
}
@keyframes morph {
  0%, 100% { border-radius: 50% 50% 50% 8px; transform: rotate(0deg) scale(1); }
  25% { border-radius: 50% 50% 8px 50%; transform: rotate(90deg) scale(1.14); }
  50% { border-radius: 50% 8px 50% 50%; transform: rotate(180deg) scale(1); }
  75% { border-radius: 8px 50% 50% 50%; transform: rotate(270deg) scale(1.14); }
}
@keyframes ring { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(2.1); opacity: 0; } }

/* Loading screen */
#boot { position: fixed; inset: 0; z-index: 200; display: grid; justify-items: center; align-content: center; gap: 18px; background: var(--bg); color: var(--soft); font-size: 15px; }
#boot .logo { width: 34px; height: 34px; }
#bootmsg { max-width: 460px; padding: 0 20px; text-align: center; line-height: 1.5; }
#boot.gone { display: none; }

@keyframes fadeDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
@keyframes menuIn { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }

/* Reduce motion: system setting or the in-app setting */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
:root[data-motion="reduced"] *, :root[data-motion="reduced"] *::before, :root[data-motion="reduced"] *::after {
  animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important;
}