/* ================= Vivid glass + motion =================
   Loaded after style.css. Brighter colors, glass panes with a light-catching edge, a slowly drifting
   aurora behind everything, and small animations for things that change (new orders, messages, numbers).
   Everything calms down when the device asks for reduced motion. */

/* drifting aurora background */
body { background: var(--bg); position: relative; }
body::before, body::after {
  content: ""; position: fixed; inset: -8vmax; z-index: -1; pointer-events: none; will-change: transform; contain: strict;
}
body::before {
  background:
    radial-gradient(42vmax 38vmax at 26% 24%, rgba(168, 85, 247, .46), transparent 60%),
    radial-gradient(36vmax 32vmax at 80% 22%, rgba(34, 211, 238, .32), transparent 60%),
    radial-gradient(46vmax 40vmax at 70% 82%, rgba(236, 72, 200, .32), transparent 60%),
    radial-gradient(34vmax 30vmax at 18% 80%, rgba(79, 125, 255, .36), transparent 60%);
  animation: aurora 26s ease-in-out infinite alternate;
}
body::after {
  background:
    radial-gradient(30vmax 26vmax at 52% 50%, rgba(47, 245, 168, .1), transparent 62%),
    radial-gradient(24vmax 20vmax at 62% 36%, rgba(255, 210, 63, .05), transparent 62%);
  animation: aurora2 34s ease-in-out infinite alternate;
}
@keyframes aurora { 0% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); } 50% { transform: translate3d(4vmax, -3vmax, 0) rotate(8deg) scale(1.08); } 100% { transform: translate3d(-3vmax, 3vmax, 0) rotate(-6deg) scale(1.03); } }
@keyframes aurora2 { 0% { transform: translate3d(-6vmax, 4vmax, 0); } 100% { transform: translate3d(6vmax, -5vmax, 0); } }

/* glass panes: frosted fill + light-catching gradient edge + soft inner shine */
.nav, .card, .kpi, .conv-list, .chat, dialog, #toast {
  border: 1px solid transparent;
  background: linear-gradient(160deg, rgba(255, 255, 255, .085), rgba(255, 255, 255, .035) 45%, rgba(255, 255, 255, .05)) padding-box, var(--edge) border-box;
  box-shadow: var(--shadow);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
}
.kpi { transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.card { transition: box-shadow .35s var(--ease); }
.kpi:hover { transform: translateY(-2px); box-shadow: 0 16px 50px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .06), inset 0 1px 0 rgba(255, 255, 255, .2); }
.card:hover { box-shadow: 0 14px 44px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .18); }
dialog { background: linear-gradient(rgba(28, 22, 52, .74), rgba(18, 16, 40, .68)) padding-box, var(--edge) border-box; }

/* brand + headings */
.brand { background: linear-gradient(90deg, #ddd0f7, #e8b4dc, #a9d8ee, #ddd0f7); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; animation: shine 8s linear infinite; }
@keyframes shine { to { background-position: 300% 0; } }
h1 { background: linear-gradient(90deg, #f3f1fb, #ddd3f2 60%, #bfe3ee); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* sidebar: glowing active tab */
.nav > button { transition: background .2s, border-color .2s, transform .2s var(--ease); }
.nav > button:hover { transform: translateX(3px); }
.nav > button.active {
  background: linear-gradient(135deg, rgba(168, 85, 247, .24), rgba(34, 211, 238, .1));
  border-color: rgba(216, 180, 254, .32); box-shadow: 0 0 14px rgba(168, 85, 247, .18), inset 0 1px 0 rgba(255, 255, 255, .16);
}
.badge { background: linear-gradient(135deg, #e85a78, #d64bbd); box-shadow: 0 0 8px rgba(214, 75, 189, .35); }
.badge.bump { animation: bump .6s var(--spring); }
@keyframes bump { 0% { transform: scale(1); } 35% { transform: scale(1.45); } 100% { transform: scale(1); } }
.dot { box-shadow: 0 0 8px rgba(255, 255, 255, .35), 0 0 0 2px rgba(255, 255, 255, .1); }

/* buttons: vivid gradients, lift, press, ripple */
button { position: relative; overflow: hidden; transition: background .2s, border-color .2s, transform .18s var(--ease), box-shadow .2s; }
button:hover { transform: translateY(-1px); }
button:active { transform: translateY(0) scale(.96); }
button.primary, a.btn.primary { background: linear-gradient(135deg, #8b4fd6, #5a57d6 55%, #2a9fc0); border-color: rgba(233, 213, 255, .3); box-shadow: 0 4px 16px rgba(120, 80, 220, .3); }
button.primary:hover { box-shadow: 0 6px 20px rgba(120, 80, 220, .45); }
button.good { background: linear-gradient(135deg, #34d399, #0f9f73); box-shadow: 0 4px 14px rgba(16, 185, 129, .25); }
button.good:hover { box-shadow: 0 6px 18px rgba(16, 185, 129, .38); }
button.danger { background: rgba(255, 92, 122, .18); border-color: rgba(255, 92, 122, .55); color: #ffd1da; }
.ripple { position: absolute; border-radius: 50%; transform: scale(0); background: rgba(255, 255, 255, .45); animation: ripple .6s ease-out; pointer-events: none; }
@keyframes ripple { to { transform: scale(4); opacity: 0; } }
input:focus, select:focus, textarea:focus { border-color: rgba(216, 180, 254, .8); box-shadow: 0 0 0 3px rgba(168, 85, 247, .28), 0 0 18px rgba(168, 85, 247, .25); }

/* tabs slide in */
.tab.active { animation: tabIn .45s var(--ease); }
@keyframes tabIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* KPIs: colored glow, numbers that count up and flash when they rise */
.kpi::after { content: ""; position: absolute; width: 120px; height: 120px; right: -40px; top: -50px; border-radius: 50%; background: radial-gradient(circle, rgba(168, 85, 247, .2), transparent 70%); pointer-events: none; transition: transform .6s var(--ease); }
.kpi:nth-child(3n+2)::after { background: radial-gradient(circle, rgba(34, 211, 238, .17), transparent 70%); }
.kpi:nth-child(3n)::after { background: radial-gradient(circle, rgba(236, 72, 200, .16), transparent 70%); }
.kpi:hover::after { transform: scale(1.4); }
.kpi .v.good { color: var(--good); text-shadow: 0 0 14px rgba(52, 211, 153, .22); }
.kpi .v.bad { color: var(--bad); text-shadow: 0 0 14px rgba(248, 113, 113, .22); }
.kpi .v.rise { animation: rise 1.2s var(--ease); }
@keyframes rise { 25% { color: #eafff6; text-shadow: 0 0 16px rgba(52, 211, 153, .6); } }
.kpis.intro .kpi { animation: popIn .6s var(--spring) both; animation-delay: calc(var(--i, 0) * 50ms); }
@keyframes popIn { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }

/* chart bars grow in once; hovering a day lights its bar and shows a glass tooltip above it */
.bars { padding-top: 46px; } /* room for the tooltip above the tallest bar */
.bar { position: relative; cursor: default; }
.bar i { background: linear-gradient(180deg, rgba(216, 160, 250, .9), rgba(140, 92, 230, .85) 50%, rgba(56, 189, 220, .8)); border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 0 10px rgba(168, 85, 247, .22); transform-origin: bottom; transition: filter .2s, box-shadow .25s, opacity .25s; }
.bars.intro .bar i { animation: grow .9s var(--ease) both; animation-delay: calc(var(--i, 0) * 35ms); }
@keyframes grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.bars:hover .bar i { opacity: .45; }
.bars .bar:hover i { opacity: 1; filter: brightness(1.15); box-shadow: 0 0 18px rgba(168, 85, 247, .45); }
.bar:hover span { color: var(--text); }
.bar .tip {
  position: absolute; left: 50%; z-index: 2; pointer-events: none; white-space: nowrap;
  padding: 6px 10px; border-radius: 10px; font-size: 13px; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums;
  background: rgba(22, 18, 44, .82); border: 1px solid rgba(255, 255, 255, .16); box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  opacity: 0; transform: translate(-50%, 6px); transition: opacity .18s, transform .22s var(--ease);
}
.bar .tip small { display: block; font-size: 10px; font-weight: 500; color: var(--muted); margin-bottom: 1px; }
.bar .tip::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 8px; height: 8px; transform: translateX(-50%) rotate(45deg);
  background: rgba(22, 18, 44, .9); border-right: 1px solid rgba(255, 255, 255, .16); border-bottom: 1px solid rgba(255, 255, 255, .16); }
.bar:hover .tip { opacity: 1; transform: translate(-50%, 0); }
.bar:first-child .tip { left: 0; transform: translate(0, 6px); } .bar:first-child:hover .tip { transform: none; }
.bar:first-child .tip::after { left: 14px; }
.bar:last-child .tip { left: auto; right: 0; transform: translate(0, 6px); } .bar:last-child:hover .tip { transform: none; }
.bar:last-child .tip::after { left: auto; right: 10px; transform: rotate(45deg); }

/* status pills: brighter */
.pill.pending { color: var(--warn); background: rgba(255, 210, 63, .14); border-color: rgba(255, 210, 63, .45); }
.pill.completed, .pill.sold { color: var(--good); background: rgba(47, 245, 168, .13); border-color: rgba(47, 245, 168, .42); }
.pill.delivered { color: #67e8f9; background: rgba(34, 211, 238, .14); border-color: rgba(34, 211, 238, .45); }
.pill.disputed { color: var(--bad); background: rgba(255, 92, 122, .15); border-color: rgba(255, 92, 122, .5); animation: glowRed 2.4s ease-in-out infinite; }
@keyframes glowRed { 50% { box-shadow: 0 0 16px rgba(255, 92, 122, .55); } }

/* table rows: hover glow; new orders slide in with a highlight */
tr:not(:first-child) td { transition: background .25s; }
tr:not(:first-child):hover td { background: linear-gradient(90deg, rgba(168, 85, 247, .08), rgba(34, 211, 238, .04)); }
tr.fresh td { animation: freshRow 2.6s var(--ease); }
@keyframes freshRow { 0% { background: rgba(52, 211, 153, .2); opacity: 0; } 15% { opacity: 1; } 100% { background: transparent; } }

/* delivery deadline: pulses when close or late */
.due-bad { color: var(--bad); font-weight: 600; animation: duePulse 1.4s ease-in-out infinite; display: inline-block; }
@keyframes duePulse { 50% { opacity: .55; text-shadow: 0 0 12px rgba(255, 92, 122, .9); } }

/* inbox: new/updated chats glow, unread dot pings, messages pop in */
.conv { transition: background .25s, transform .25s var(--ease); }
.conv:hover { transform: translateX(3px); }
.conv.active { background: linear-gradient(90deg, rgba(168, 85, 247, .18), rgba(34, 211, 238, .05)); box-shadow: inset 3px 0 0 #c084fc; }
.conv.fresh { animation: freshConv 2.2s var(--ease); }
@keyframes freshConv { 0% { background: rgba(236, 72, 200, .2); } 100% { background: transparent; } }
.conv.unread b::after { background: var(--pink); box-shadow: 0 0 10px var(--pink); animation: ping 1.8s ease-out infinite; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(255, 79, 216, .7); } 80%, 100% { box-shadow: 0 0 0 8px rgba(255, 79, 216, 0); } }
.msg.me { background: linear-gradient(135deg, #7c4dc4, #5552c4 60%, #3a6fc4); border-color: rgba(233, 213, 255, .25); box-shadow: 0 4px 14px rgba(80, 70, 200, .22); }
.msg.pop { animation: msgPop .45s var(--spring) both; }
@keyframes msgPop { from { opacity: 0; transform: translateY(10px) scale(.92); } to { opacity: 1; transform: none; } }
.msg.out.pending small::after, .msg.out.sending small::after { content: ""; display: inline-block; width: 18px; height: 6px; margin-left: 6px; vertical-align: middle;
  background: radial-gradient(circle, #fff 2px, transparent 2.5px) 0 50% / 6px 6px repeat-x; animation: typing 1s steps(4) infinite; }
@keyframes typing { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.chat-head { background: linear-gradient(90deg, rgba(168, 85, 247, .08), rgba(34, 211, 238, .03)); }

/* toast springs up; dialogs open with a soft zoom */
#toast { transition: opacity .3s, transform .45s var(--spring); transform: translateY(16px) scale(.95); }
#toast.show { transform: none; box-shadow: 0 12px 40px rgba(0, 0, 0, .5), 0 0 16px rgba(168, 85, 247, .2); }
dialog[open] { animation: dlg .35s var(--spring); }
@keyframes dlg { from { opacity: 0; transform: translateY(12px) scale(.96); } to { opacity: 1; transform: none; } }

/* sign-in card floats in */
.login-card { animation: popIn .7s var(--spring) both; }

/* respect "reduce motion" */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* performance: isolate glass panes and long lists so updates repaint only themselves */
.card, .kpi, .conv-list, .chat, .nav { isolation: isolate; }
.msgs, .conv-list, .card.flush { contain: content; }
.loading-note { align-self: center; display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); padding: 6px 12px; border-radius: 99px; background: rgba(255, 255, 255, .06); border: 1px solid var(--line); }
.spin { width: 12px; height: 12px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .2); border-top-color: #c084fc; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* quick replies, claiming, late banner, team */
.quick { display: flex; gap: 6px; flex-wrap: wrap; padding: 10px 12px 0; border-top: 1px solid var(--line); }
.chip { padding: 4px 11px; font-size: 12px; border-radius: 99px; background: rgba(168, 85, 247, .14); border-color: rgba(216, 180, 254, .3); }
.chip:hover { background: rgba(168, 85, 247, .28); }
.composer { border-top: none; }
.composer textarea { flex: 1; resize: vertical; min-height: 40px; }
.claim { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; padding: 3px 4px 3px 9px; border-radius: 99px; background: rgba(34, 211, 238, .12); border: 1px solid rgba(34, 211, 238, .35); color: #a5f3fc; white-space: nowrap; vertical-align: middle; }
.claim:not(:has(button)) { padding-right: 9px; }
.claim.mine { background: rgba(52, 211, 153, .14); border-color: rgba(52, 211, 153, .4); color: #a7f3d0; }
.claim .unclaim { padding: 0 6px; font-size: 11px; border-radius: 99px; background: transparent; border: none; color: inherit; }
.claim-btn { font-size: 12px; padding: 5px 10px; }
.due-alert { display: block; width: 100%; text-align: left; margin-bottom: 16px; padding: 11px 16px; border-radius: 14px; color: #fecaca;
  background: rgba(248, 113, 113, .14); border-color: rgba(248, 113, 113, .5); animation: glowRed 2.4s ease-in-out infinite; }
.tpl { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--line); }
.tpl-text { min-width: 0; } .tpl-text small { display: block; color: var(--muted); white-space: pre-wrap; max-height: 3.6em; overflow: hidden; margin-top: 3px; }
.tpl-actions { display: flex; gap: 5px; flex: none; } .tpl-actions button { padding: 4px 9px; font-size: 12px; }
.tpl-form { margin-top: 14px; } .tpl-form .row { align-items: flex-start; flex-wrap: wrap; }
.warn-text { color: var(--warn); } .bad-text { color: var(--bad); }
.composer { align-items: flex-end; } .composer button { align-self: flex-end; }
.msg { overflow-wrap: anywhere; } /* long links (join links) wrap inside the bubble */

/* "Reconnecting to Seller Hub…" while the server can't be reached */
#offline-note { position: fixed; top: 14px; left: 50%; transform: translateX(-50%); z-index: 50; display: flex; gap: 8px; align-items: center; padding: 8px 14px; border-radius: 99px; font-size: 13px; background: rgba(22, 18, 44, .85); border: 1px solid var(--line); box-shadow: 0 8px 24px rgba(0, 0, 0, .4); }
#offline-note[hidden] { display: none; }