/* ===================================================
   CosmoKlub — dashboard.css
   Styles for dashboard.html (Forum, Library, Chat, Planetarium)
   =================================================== */

/* ---------- Reset & Variables ---------- */
[v-cloak] { display: none !important; }

:root {
  --purple:   #7c3aed;
  --violet:   #a855f7;
  --glow:     #c084fc;
  --stardust: #f5f3ff;
  --white:    #f5f3ff;
  --muted:    #8b7aa8;
  --border:   rgba(124, 58, 237, 0.25);
  --glass:    rgba(124, 58, 237, 0.08);
  --glass2:   rgba(255, 255, 255, 0.04);
  --font:     'Inter', -apple-system, sans-serif;
  --radius:   12px;
  --tr:       0.22s cubic-bezier(.4, 0, .2, 1);

  --topbar-h:  56px;
  --nav-h:     64px;
  --safe-bot:  env(safe-area-inset-bottom, 0px);
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  height: 100%;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

body {
  background: #07061a;
  color: var(--white);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.55;
  height: 100%;
  overflow: hidden;
}

/* ---------- Star Canvas & Page Grid ---------- */
#star-canvas {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.page-grid {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(rgba(124,58,237,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124,58,237,0.04) 1px, transparent 1px);
  background-size: 40px 40px;
}

/* ---------- Aurora ---------- */
.aurora-wrap {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.aurora-base {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 120% 65% at 18% 0%, #0e2a4a 0%, transparent 62%),
    radial-gradient(ellipse 95% 55% at 85% 8%, #2a0f3d 0%, transparent 60%),
    radial-gradient(ellipse 80% 60% at 50% 100%, #1a0e30 0%, transparent 65%),
    linear-gradient(180deg, #060816 0%, #050410 55%, #03020a 100%);
}
.aurora-1 {
  position: absolute;
  top: -10%; left: -22%;
  width: 85%; height: 75%;
  background: radial-gradient(ellipse 100% 100% at 50% 0%,
    rgba(20,210,200,0.16) 0%, rgba(10,150,210,0.08) 45%, transparent 75%);
  filter: blur(60px);
  animation: aShift1 14s ease-in-out infinite;
}
.aurora-2 {
  position: absolute;
  top: -15%; right: -18%;
  width: 75%; height: 85%;
  background: radial-gradient(ellipse 100% 100% at 50% 0%,
    rgba(230,60,170,0.16) 0%, rgba(140,20,180,0.09) 50%, transparent 75%);
  filter: blur(70px);
  animation: aShift2 18s ease-in-out infinite;
}
.aurora-3 {
  position: absolute;
  top: 8%; left: 22%;
  width: 60%; height: 60%;
  background: radial-gradient(ellipse 100% 100% at 50% 0%,
    rgba(120,90,255,0.12) 0%, transparent 80%);
  filter: blur(80px);
  animation: aShift3 22s ease-in-out infinite;
}
@keyframes aShift1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%       { transform: translate(5%, 8%) scale(1.06); }
}
@keyframes aShift2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%       { transform: translate(-6%, 5%) scale(1.04); }
}
@keyframes aShift3 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%       { transform: translate(4%, -6%) scale(1.08); }
}

/* ---------- App Shell ---------- */
#app {
  position: relative;
  z-index: 1;
  height: 100dvh;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.app-shell {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* ---------- Top Bar ---------- */
.topbar {
  display: flex;
  align-items: center;
  gap: 14px;
  height: var(--topbar-h);
  padding: 0 20px;
  background: linear-gradient(180deg, rgba(12, 9, 34, 0.9), rgba(7, 6, 26, 0.82));
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  position: relative;
  z-index: 10;
  flex-shrink: 0;
}

.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  font-size: 15.5px;
  letter-spacing: -0.3px;
  color: var(--stardust);
  flex-shrink: 0;
}
.brand svg {
  filter: drop-shadow(0 0 6px rgba(168, 85, 247, 0.55));
}

.topbar-spacer {
  flex: 1;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.icon-btn {
  position: relative;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  cursor: pointer;
  color: var(--muted);
  transition: background var(--tr), color var(--tr);
}
.icon-btn:hover {
  background: var(--glass);
  color: var(--stardust);
}

.icon-dot {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--violet);
  border: 1.5px solid #07061a;
}

/* ---------- Scrollable Content Area ---------- */
.content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 16px 16px calc(var(--nav-h) + var(--safe-bot) + 8px);
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.content::-webkit-scrollbar { width: 4px; }
.content::-webkit-scrollbar-track { background: transparent; }
.content::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

/* ---------- Bottom Navigation ---------- */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: calc(var(--nav-h) + var(--safe-bot));
  padding: 0 6px var(--safe-bot);
  display: flex;
  align-items: center;
  justify-content: space-around;
  background: linear-gradient(0deg, rgba(10, 8, 30, 0.96), rgba(7, 6, 26, 0.88));
  backdrop-filter: blur(24px);
  border-top: 1px solid var(--border);
  z-index: 10;
  transition: transform 0.32s cubic-bezier(.4, 0, .2, 1), opacity 0.32s ease;
}
/* Graphing mode: nav slides down out of view so the graph gets the full area.
   Leaving graphing removes the class and it slides back up. */
body.graphing-active .bottom-nav {
  transform: translateY(100%);
  opacity: 0;
  pointer-events: none;
}

.nav-item {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  padding: 8px 4px;
  border-radius: 12px;
  transition: color var(--tr);
}
.nav-item svg {
  width: 22px;
  height: 22px;
  transition: stroke var(--tr), transform var(--tr);
}
.nav-item.active {
  color: var(--violet);
}
.nav-item.active svg {
  stroke: var(--violet);
  transform: translateY(-1px);
  filter: drop-shadow(0 0 8px rgba(168, 85, 247, 0.5));
}
/* Little glowing indicator dot under the active tab. */
.nav-item.active::after {
  content: '';
  position: absolute;
  bottom: 2px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--violet);
  box-shadow: 0 0 8px rgba(168, 85, 247, 0.8);
}
.nav-item:hover:not(.active) {
  color: var(--stardust);
}

/* FAB (center) */
.fab-item {
  flex: 0 0 60px;
}
.nav-fab {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--purple) 0%, var(--violet) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 18px rgba(168,85,247,0.45);
  transition: transform var(--tr), box-shadow var(--tr);
}
.nav-fab:hover {
  transform: scale(1.07);
  box-shadow: 0 0 26px rgba(168,85,247,0.65);
}
.nav-fab svg {
  width: 22px;
  height: 22px;
  stroke: #fff;
}

/* ---------- Shared Section Styles ---------- */
.section {
  margin-bottom: 24px;
}

.section-eyebrow-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.section-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  flex-shrink: 0;
}

.section-rule {
  flex: 1;
  height: 1px;
  background: var(--border);
}

.section-link {
  font-size: 11px;
  color: var(--violet);
  cursor: pointer;
  flex-shrink: 0;
  transition: opacity var(--tr);
}
.section-link:hover { opacity: 0.75; }

/* ---------- Sky Strip (Forum top banner) ---------- */
.sky-strip {
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(135deg, rgba(124,58,237,0.14) 0%, rgba(168,85,247,0.06) 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-bottom: 16px;
  cursor: pointer;
  transition: border-color var(--tr), background var(--tr);
}
.sky-strip:hover {
  border-color: var(--violet);
  background: linear-gradient(135deg, rgba(124,58,237,0.2) 0%, rgba(168,85,247,0.1) 100%);
}

.sb-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  background: rgba(168,85,247,0.12);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sky-strip-text { flex: 1; }
.sky-strip-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--stardust);
}
.sky-strip-sub {
  font-size: 11px;
  color: var(--muted);
  margin-top: 1px;
}

.sky-strip-cta {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--violet);
  flex-shrink: 0;
}

/* ---------- Chip Row (Forum filters) ---------- */
.chip-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  margin-bottom: 16px;
  scrollbar-width: none;
}
.chip-row::-webkit-scrollbar { display: none; }

.chip {
  flex-shrink: 0;
  padding: 5px 13px;
  border-radius: 20px;
  border: 1px solid var(--border);
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  background: var(--glass);
  transition: border-color var(--tr), color var(--tr), background var(--tr);
  white-space: nowrap;
}
.chip:hover, .chip.active {
  border-color: var(--violet);
  color: var(--violet);
  background: rgba(168,85,247,0.1);
}

/* ---------- Thread Card ---------- */
.thread-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.thread-card {
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  cursor: pointer;
  transition: border-color var(--tr), background var(--tr);
}
.thread-card:hover {
  border-color: var(--violet);
  background: rgba(124,58,237,0.12);
}

.thread-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 8px;
}

.avatar {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
}

.thread-meta { flex: 1; }
.thread-author {
  font-size: 13px;
  font-weight: 600;
  color: var(--stardust);
  display: flex;
  align-items: center;
  gap: 6px;
}
.lvl {
  font-size: 10px;
  font-weight: 600;
  color: var(--glow);
  background: rgba(192,132,252,0.12);
  padding: 1px 6px;
  border-radius: 10px;
}
.thread-sub {
  font-size: 11px;
  color: var(--muted);
}

.thread-tag {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 600;
  color: var(--violet);
  background: rgba(168,85,247,0.1);
  border: 1px solid rgba(168,85,247,0.2);
  padding: 2px 8px;
  border-radius: 8px;
}

.thread-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--stardust);
  margin-bottom: 4px;
}
.thread-body {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
  margin-bottom: 10px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.thread-foot {
  display: flex;
  align-items: center;
  gap: 14px;
}
.stat {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--muted);
}
.stat.solved {
  color: #34d399;
}
.spacer { flex: 1; }

/* ---------- Library ---------- */
.lessons-grid, .library-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.lesson-card {
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  cursor: pointer;
  transition: border-color var(--tr), background var(--tr);
}
.lesson-card:hover {
  border-color: var(--violet);
  background: rgba(124,58,237,0.12);
}

.lesson-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}

.lesson-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--stardust);
  margin-bottom: 4px;
  line-height: 1.35;
}
.lesson-desc {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.45;
  margin-bottom: 8px;
}
.lesson-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.lesson-tier {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 8px;
  letter-spacing: 0.04em;
}

/* Saved / Library items */
.library-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  cursor: pointer;
  transition: border-color var(--tr), background var(--tr);
}
.library-item:hover {
  border-color: var(--violet);
}

.library-icon {
  flex-shrink: 0;
}
.library-info { flex: 1; }
.library-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--stardust);
}
.library-meta {
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}
.remove-btn {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  color: var(--muted);
  cursor: pointer;
  transition: background var(--tr), color var(--tr);
}
.remove-btn:hover {
  background: rgba(239,68,68,0.12);
  color: #f87171;
}

.empty-library {
  text-align: center;
  padding: 40px 0;
  color: var(--muted);
  font-size: 13px;
}

/* ---------- Chat ---------- */
.conversation-list {
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, rgba(20, 16, 44, 0.72), rgba(12, 10, 30, 0.6));
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 6px;
  backdrop-filter: blur(16px);
  box-shadow: 0 18px 50px rgba(4, 2, 16, 0.45);
  overflow: hidden;
}

.conversation-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 13px 14px;
  border-radius: 13px;
  cursor: pointer;
  transition: background var(--tr), transform var(--tr);
}
/* Hairline divider between rows (not after the last one). */
.conversation-item:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 71px;
  right: 14px;
  bottom: 0;
  height: 1px;
  background: var(--border);
  opacity: 0.5;
}
.conversation-item:hover {
  background: rgba(124, 58, 237, 0.1);
}
.conversation-item:active {
  transform: scale(0.99);
}
.conversation-item.active {
  background: rgba(124,58,237,0.16);
}

.conversation-avatar {
  position: relative;
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
/* Online status dot on the avatar. */
.conversation-item .conversation-avatar::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 1px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #34d399;
  border: 2.5px solid #100c22;
}

.conversation-info { flex: 1; min-width: 0; }
.conversation-name {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--stardust);
  letter-spacing: -0.01em;
  margin-bottom: 2px;
}
.conversation-preview {
  font-size: 12.5px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
}

.conversation-time {
  font-size: 11px;
  color: var(--muted);
  flex-shrink: 0;
  align-self: flex-start;
  padding-top: 2px;
}

/* Chat window */
.chat-window {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: linear-gradient(180deg, rgba(20, 16, 44, 0.72), rgba(12, 10, 30, 0.6));
  border: 1px solid var(--border);
  border-radius: 18px;
  backdrop-filter: blur(16px);
  box-shadow: 0 18px 50px rgba(4, 2, 16, 0.45);
  overflow: hidden;
}
.chat-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: rgba(124, 58, 237, 0.08);
  border-bottom: 1px solid var(--border);
}
.chat-back {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  cursor: pointer;
  color: var(--muted);
  font-size: 18px;
  border: 1px solid transparent;
  transition: background var(--tr), color var(--tr), border-color var(--tr);
}
.chat-back:hover {
  background: var(--glass);
  color: var(--stardust);
  border-color: var(--border);
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 16px;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.chat-messages::-webkit-scrollbar { width: 4px; }
.chat-messages::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

.chat-container {
  height: calc(100dvh - var(--topbar-h) - var(--nav-h) - 32px);
  display: flex;
  flex-direction: column;
}

.message {
  max-width: 72%;
  padding: 10px 14px;
  border-radius: 16px;
  font-size: 13.5px;
  line-height: 1.5;
  box-shadow: 0 2px 8px rgba(4, 2, 16, 0.3);
}
.message-outgoing {
  align-self: flex-end;
  background: linear-gradient(135deg, var(--purple), var(--violet));
  color: #fff;
  border-bottom-right-radius: 5px;
}
.message-incoming {
  align-self: flex-start;
  background: #1c1738;
  border: 1px solid var(--border);
  color: var(--stardust);
  border-bottom-left-radius: 5px;
}

.chat-input-area {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px calc(12px + var(--safe-bot));
  background: rgba(10, 8, 24, 0.5);
  border-top: 1px solid var(--border);
}
.chat-input {
  flex: 1;
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 11px 18px;
  color: var(--white);
  font-size: 13.5px;
  font-family: var(--font);
  outline: none;
  resize: none;
  transition: border-color var(--tr), background var(--tr);
}
.chat-input::placeholder { color: var(--muted); }
.chat-input:focus { border-color: var(--violet); background: rgba(124, 58, 237, 0.08); }

.chat-send {
  min-width: 40px;
  height: 40px;
  padding: 0 18px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--purple), var(--violet));
  color: #fff;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 700;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(124, 58, 237, 0.4);
  transition: transform var(--tr), box-shadow var(--tr);
}
.chat-send:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(168,85,247,0.55);
}
.chat-send svg {
  stroke: #fff;
}

/* ---------- Tag (used in threads) ---------- */
.tag {
  font-size: 10px;
  font-weight: 600;
  color: var(--glow);
  background: rgba(192,132,252,0.1);
  border: 1px solid rgba(192,132,252,0.2);
  padding: 2px 7px;
  border-radius: 8px;
}
/* =========================================================
   LIQUID GLASS + BUTTON
   ========================================================= */

.nav-fab{
  --fab-glass-x:50%;
  --fab-glass-y:25%;

  --fab-highlight-x:50%;
  --fab-highlight-y:28%;

  --fab-liquid-x:0;
  --fab-liquid-y:0;

  --fab-scale-x:1;
  --fab-scale-y:1;
  --fab-rotate:0deg;

  position:relative;
  isolation:isolate;
  overflow:hidden;

  width:48px;
  height:48px;

  display:flex;
  align-items:center;
  justify-content:center;

  padding:0;

  border:
    1px solid
    rgba(255,255,255,.28);

  border-radius:
    calc(
      50% +
      var(--fab-liquid-y) * 6%
    )
    calc(
      50% -
      var(--fab-liquid-x) * 6%
    )
    calc(
      50% -
      var(--fab-liquid-y) * 6%
    )
    calc(
      50% +
      var(--fab-liquid-x) * 6%
    );

  background:
    radial-gradient(
      circle at
      var(--fab-glass-x)
      var(--fab-glass-y),

      rgba(255,255,255,.42)
      0%,

      rgba(255,255,255,.18)
      11%,

      rgba(255,255,255,.05)
      27%,

      transparent
      47%
    ),

    radial-gradient(
      circle at 72% 76%,

      rgba(168,85,247,.26),

      transparent 48%
    ),

    linear-gradient(
      145deg,

      rgba(255,255,255,.14),

      rgba(124,58,237,.055)
      46%,

      rgba(168,85,247,.16)
    );

  -webkit-backdrop-filter:
    blur(18px)
    saturate(220%)
    brightness(1.12);

  backdrop-filter:
    blur(18px)
    saturate(220%)
    brightness(1.12);

  cursor:pointer;

  box-shadow:
    0 11px 25px
    rgba(0,0,0,.30),

    0 0 0 1px
    rgba(255,255,255,.10)
    inset,

    0 1px 0
    rgba(255,255,255,.55)
    inset,

    0 -2px 7px
    rgba(124,58,237,.20)
    inset,

    0 0 0 5px
    rgba(124,58,237,.055),

    0 0 24px
    rgba(168,85,247,.24);

  transform:
    translateY(
      calc(
        var(--fab-liquid-y) *
        -1.5px
      )
    )

    rotate(
      var(--fab-rotate)
    )

    scaleX(
      var(--fab-scale-x)
    )

    scaleY(
      var(--fab-scale-y)
    );

  transform-origin:center;

  will-change:
    transform,
    border-radius;

  transition:
    border-radius .16s ease,
    border-color .2s ease,
    box-shadow .2s ease;
}

/* Liquid material */

.nav-fab::before{
  content:"";

  position:absolute;

  z-index:-1;

  width:98%;
  height:98%;

  left:
    calc(
      1% +
      var(--fab-liquid-x) * 7%
    );

  top:
    calc(
      1% +
      var(--fab-liquid-y) * 7%
    );

  border-radius:
    53%
    47%
    55%
    45%
    /
    48%
    55%
    45%
    52%;

  pointer-events:none;

  background:
    radial-gradient(
      circle at
      var(--fab-highlight-x)
      var(--fab-highlight-y),

      rgba(255,255,255,.65)
      0 3%,

      rgba(255,255,255,.30)
      10%,

      rgba(192,132,252,.23)
      26%,

      transparent
      55%
    ),

    radial-gradient(
      circle at
      calc(
        70% -
        var(--fab-liquid-x) * 14%
      )
      calc(
        73% -
        var(--fab-liquid-y) * 14%
      ),

      rgba(124,58,237,.35),

      transparent 45%
    );

  filter:
    blur(4px);

  opacity:.95;

  animation:
    fabLiquidFloat
    4.5s
    ease-in-out
    infinite alternate;

  transition:
    left .08s linear,
    top .08s linear;
}

/* Refractive inner rim */

.nav-fab::after{
  content:"";

  position:absolute;

  z-index:2;

  inset:3px;

  border:
    1px solid
    rgba(255,255,255,.21);

  border-radius:inherit;

  pointer-events:none;

  background:
    radial-gradient(
      circle at
      var(--fab-highlight-x)
      var(--fab-highlight-y),

      rgba(255,255,255,.31),

      transparent 30%
    ),

    linear-gradient(
      145deg,

      rgba(255,255,255,.17),

      transparent
      34% 66%,

      rgba(168,85,247,.13)
    );

  box-shadow:
    inset
    0 1px 1px
    rgba(255,255,255,.35),

    inset
    0 -3px 6px
    rgba(0,0,0,.13);
}

/*
  Keep the actual +
  icon above the glass.
*/

.nav-fab svg{
  position:relative;
  z-index:5;

  width:22px;
  height:22px;

  stroke:#fff;

  filter:
    drop-shadow(
      0 1px 2px
      rgba(0,0,0,.38)
    )
    drop-shadow(
      0 0 5px
      rgba(255,255,255,.20)
    );

  pointer-events:none;
}

/* Internal liquid movement */

@keyframes fabLiquidFloat{

  0%{
    transform:
      translate3d(
        -1px,
        -1px,
        0
      )
      rotate(-3deg)
      scale(1);
  }

  50%{
    transform:
      translate3d(
        2px,
        1px,
        0
      )
      rotate(3deg)
      scale(1.05);
  }

  100%{
    transform:
      translate3d(
        -1px,
        2px,
        0
      )
      rotate(-1deg)
      scale(.98);
  }
}

/* Hover */

.nav-fab.liquid-fab-hover{
  border-color:
    rgba(255,255,255,.58);

  box-shadow:
    0 15px 32px
    rgba(0,0,0,.34),

    0 0 0 1px
    rgba(255,255,255,.16)
    inset,

    0 1px 0
    rgba(255,255,255,.72)
    inset,

    0 -2px 8px
    rgba(168,85,247,.26)
    inset,

    0 0 0 6px
    rgba(124,58,237,.075),

    0 0 36px
    rgba(168,85,247,.38);
}

.nav-fab.liquid-fab-hover::before{
  animation-duration:2.3s;

  filter:
    blur(3.5px)
    saturate(1.2);
}

/* Press / squish */

.nav-fab.liquid-fab-pressed{
  --fab-scale-x:1.11!important;
  --fab-scale-y:.86!important;

  border-radius:
    45%
    55%
    47%
    53%
    /
    56%
    47%
    53%
    44%;

  box-shadow:
    0 5px 13px
    rgba(0,0,0,.28),

    inset
    0 3px 8px
    rgba(0,0,0,.18),

    inset
    0 1px 0
    rgba(255,255,255,.40),

    0 0 26px
    rgba(168,85,247,.35);
}

/*
  Disable old fixed hover scaling.
  Liquid JS now controls deformation.
*/

.nav-fab:hover{
  transform:
    translateY(
      calc(
        var(--fab-liquid-y) *
        -1.5px
      )
    )

    rotate(
      var(--fab-rotate)
    )

    scaleX(
      var(--fab-scale-x)
    )

    scaleY(
      var(--fab-scale-y)
    );
}

@media(prefers-reduced-motion:reduce){

  .nav-fab,
  .nav-fab::before,
  .nav-fab::after{
    animation:none!important;
    transition:none!important;
  }
}