@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&family=Mukta:wght@400;500;600;700&family=Mukta+Malar:wght@400;500;600;700&display=swap');

/* Anssay — blue glass. Tokens only; see README. */
.an { font-family: var(--font-sans); color: var(--ink); -webkit-font-smoothing: antialiased; }
.an *, .an *::before, .an *::after { box-sizing: border-box; }
.an .num { font-variant-numeric: tabular-nums; }
.an :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Canvas: soft sky, lilac and aqua glows that the glass blurs */
.an-canvas { position: relative; padding: var(--space-6); background:
  radial-gradient(70% 60% at 0% 0%, var(--canvas-sky) 0%, transparent 70%),
  radial-gradient(50% 50% at 100% 0%, var(--canvas-lilac) 0%, transparent 70%),
  radial-gradient(70% 70% at 100% 100%, var(--canvas-aqua) 0%, transparent 70%),
  var(--canvas-base);
  background-size: 140% 140%; animation: an-drift 24s var(--ease-in-out) infinite alternate; }

/* Glass surfaces */
.an-glass { background: var(--glass); -webkit-backdrop-filter: blur(var(--blur-glass)) saturate(140%); backdrop-filter: blur(var(--blur-glass)) saturate(140%);
  border: 1px solid var(--glass-edge); border-radius: var(--radius-panel); box-shadow: var(--shadow-glass); }
.an-glass-strong { background: var(--glass-strong); -webkit-backdrop-filter: blur(var(--blur-soft)); backdrop-filter: blur(var(--blur-soft));
  border: 1px solid var(--glass-edge); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .an-glass, .an-glass-strong { background: var(--paper); } }

/* Buttons */
.an-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 52px; padding: 0 var(--space-6);
  border-radius: var(--radius-pill); border: 1px solid transparent; font: 600 16px/20px var(--font-sans); cursor: pointer; white-space: nowrap;
  transition: transform var(--dur-instant) var(--ease-out-soft), background-color var(--dur-quick) var(--ease-out-soft), box-shadow var(--dur-quick) var(--ease-out-soft); }
.an-btn:active { transform: scale(0.97); }
.an-btn--primary { background: var(--blue); color: var(--on-blue); box-shadow: var(--shadow-glow); }
.an-btn--primary:hover { background: var(--blue-deep); }
.an-btn--secondary { background: var(--glass-strong); color: var(--ink); border-color: var(--glass-edge); box-shadow: var(--shadow-lift); }
.an-btn--quiet { background: transparent; color: var(--blue); }
.an-btn--danger { background: var(--missed-soft); color: var(--missed); }
.an-btn[disabled] { opacity: 0.45; cursor: not-allowed; box-shadow: none; }
.an-btn__spin { width: 16px; height: 16px; border-radius: var(--radius-pill); border: 2px solid currentColor; border-right-color: transparent; animation: an-spin 0.8s linear infinite; }
.an-iconbtn { width: 52px; height: 52px; border-radius: var(--radius-pill); display: inline-grid; place-items: center; color: var(--ink); cursor: pointer;
  background: var(--glass-strong); border: 1px solid var(--glass-edge); box-shadow: var(--shadow-lift); font-size: 20px; }
.an-search { display: flex; align-items: center; height: 52px; min-width: 260px; padding: 0 var(--space-6); border-radius: var(--radius-pill);
  background: var(--glass-strong); border: 1px solid var(--glass-edge); color: var(--slate); font: 400 16px/20px var(--font-sans); }

/* Chips (Design / Low / High style) */
.an-chip { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: var(--radius-pill); font: 500 15px/20px var(--font-sans); white-space: nowrap; border: 1px solid var(--glass-edge); }
.an-chip--blue { background: var(--blue-soft); color: var(--blue-ink); }
.an-chip--violet { background: var(--violet-soft); color: var(--violet-ink); }
.an-chip--done { background: var(--done-soft); color: var(--done-ink); }
.an-chip--needs { background: var(--needs-you-soft); color: var(--ink); }
.an-chip--missed { background: var(--missed-soft); color: var(--missed); }
.an-chip--glass { background: var(--glass-strong); color: var(--ink); }
.an-chip--dot::before { content: ""; width: 7px; height: 7px; border-radius: var(--radius-pill); background: currentColor; }
.an-chip--done.an-chip--dot::before { background: var(--done); }
.an-chip--needs.an-chip--dot::before { background: var(--needs-you); }
.an-count { display: inline-grid; place-items: center; min-width: 30px; height: 30px; padding: 0 8px; border-radius: var(--radius-pill); background: var(--blue); color: var(--on-blue); font: 700 14px/1 var(--font-sans); }

/* Avatars */
.an-avatar { width: 52px; height: 52px; border-radius: var(--radius-pill); display: inline-grid; place-items: center; color: #FFFFFF; font: 700 16px/1 var(--font-sans);
  border: 3px solid var(--glass-edge); box-shadow: var(--shadow-lift); background: var(--avatar-1); flex: none; }
.an-avatar--2 { background: var(--avatar-2); } .an-avatar--3 { background: var(--avatar-3); } .an-avatar--4 { background: var(--avatar-4); }
.an-avatar--sm { width: 40px; height: 40px; font-size: 14px; }
.an-avatar__online { position: absolute; top: 2px; right: 2px; width: 14px; height: 14px; border-radius: var(--radius-pill); background: var(--online); border: 2px solid var(--paper); }
.an-stack { display: inline-flex; }
.an-stack .an-avatar + .an-avatar { margin-left: -12px; }
.an-stack .an-avatar { transition: transform var(--dur-quick) var(--ease-spring); }
.an-stack .an-avatar:hover { transform: translateY(-4px); z-index: 1; }

/* Side rail */
.an-rail { width: 88px; padding: var(--space-4) 0; display: flex; flex-direction: column; align-items: center; gap: var(--space-4); }
.an-rail__me { position: relative; }
.an-tile { width: 60px; height: 60px; border-radius: var(--radius-tile); display: grid; place-items: center; color: var(--ink); cursor: pointer; font-size: 22px;
  background: var(--glass-strong); border: 1px solid var(--glass-edge); transition: transform var(--dur-quick) var(--ease-out-soft), background-color var(--dur-quick) var(--ease-out-soft); }
.an-tile:hover { transform: translateY(-2px); }
.an-tile.is-active { background: var(--blue); color: var(--on-blue); box-shadow: var(--shadow-glow); border-color: transparent; }
.an-tile__badge { position: absolute; top: -4px; right: -4px; }

/* Segmented control (Board / List / Timeline) */
.an-seg { position: relative; display: inline-flex; padding: 6px; border-radius: var(--radius-pill); }
.an-seg__pill { position: absolute; top: 6px; bottom: 6px; left: 6px; border-radius: var(--radius-pill); background: var(--blue); box-shadow: var(--shadow-glow);
  transition: transform var(--dur-base) var(--ease-spring), width var(--dur-base) var(--ease-spring); }
.an-seg button { position: relative; z-index: 1; height: 46px; padding: 0 var(--space-6); border: 0; background: transparent; border-radius: var(--radius-pill);
  font: 600 16px/20px var(--font-sans); color: var(--blue-ink); cursor: pointer; transition: color var(--dur-quick) var(--ease-out-soft); }
.an-seg button[aria-selected="true"] { color: var(--on-blue); }

/* Group panel (To do / In progress) */
.an-group { padding: var(--space-6); display: grid; gap: var(--space-3); }
.an-group__head { display: flex; align-items: center; gap: var(--space-4); }
.an-group__toggle { width: 32px; height: 32px; border: 0; background: transparent; color: var(--ink); cursor: pointer; font-size: 18px; transition: transform var(--dur-base) var(--ease-out-soft); }
.an-group.is-collapsed .an-group__toggle { transform: rotate(180deg); }
.an-group__pill { display: inline-flex; align-items: center; gap: var(--space-3); height: 60px; padding: 0 var(--space-3) 0 var(--space-6); border-radius: var(--radius-pill); font: 700 24px/30px var(--font-sans); letter-spacing: -0.3px; }
.an-group__dot { width: 18px; height: 18px; border-radius: var(--radius-pill); background: var(--blue); box-shadow: 0 0 0 4px var(--blue-soft); }
.an-group__dot--needs { background: var(--needs-you); box-shadow: 0 0 0 4px var(--needs-you-soft); }
.an-group__dot--violet { background: var(--violet); box-shadow: 0 0 0 4px var(--violet-soft); }
.an-group__dot--teal { background: var(--teal); box-shadow: 0 0 0 4px var(--done-soft); }
.an-group__add { margin-left: auto; }
.an-group__body { display: grid; gap: var(--space-2); overflow: hidden; transition: grid-template-rows var(--dur-base) var(--ease-out-soft), opacity var(--dur-base) var(--ease-out-soft); }
.an-group.is-collapsed .an-group__body { display: none; }
.an-cols { display: grid; gap: var(--space-4); padding: var(--space-3) var(--space-4) var(--space-2) 72px; font: 500 14px/20px var(--font-sans); color: var(--slate); }

/* Row card */
.an-rowcard { display: grid; align-items: center; gap: var(--space-4); padding: var(--space-4); border-radius: var(--radius-row); box-shadow: var(--shadow-lift);
  transition: transform var(--dur-quick) var(--ease-out-soft), box-shadow var(--dur-quick) var(--ease-out-soft); animation: an-rise var(--dur-base) var(--ease-out-soft) both; }
.an-rowcard:hover { transform: translateY(-2px); }
.an-rowcard.is-flash { animation: an-flash 900ms var(--ease-out-soft); }
.an-rowcard__title { font: 600 17px/24px var(--font-sans); }
.an-rowcard__desc { font: 400 16px/24px var(--font-sans); color: var(--slate); }
.an-rowcard__meta { display: inline-flex; align-items: center; gap: var(--space-2); font: 500 16px/20px var(--font-sans); white-space: nowrap; }
.an-rowcard__meta i { font-style: normal; color: var(--blue); }
.an-check-box { width: 30px; height: 30px; border-radius: var(--radius-sm); border: 2px solid var(--line-strong); background: var(--paper); display: grid; place-items: center; cursor: pointer; color: var(--on-blue); font-size: 14px; transition: background-color var(--dur-quick) var(--ease-out-soft); }
.an-check-box.is-on { background: var(--blue); border-color: var(--blue); animation: an-pop var(--dur-base) var(--ease-spring); }
.an-more { border: 0; background: transparent; color: var(--ink); font-size: 22px; cursor: pointer; letter-spacing: 2px; }

/* Status strip */
.an-status { display: inline-flex; align-items: center; gap: var(--space-3); height: 48px; padding: 0 var(--space-4) 0 var(--space-6); border-radius: var(--radius-pill); font: 600 15px/20px var(--font-sans); }
.an-status__dot { position: relative; width: 12px; height: 12px; border-radius: var(--radius-pill); background: var(--online); flex: none; }
.an-status--answering .an-status__dot { animation: an-breathe 2.4s var(--ease-in-out) infinite; }
.an-status--paused .an-status__dot { background: var(--needs-you); }
.an-status--limit .an-status__dot { background: var(--missed); }
.an-status__action { margin-left: var(--space-2); height: 36px; padding: 0 var(--space-4); border-radius: var(--radius-pill); border: 0; background: var(--blue-soft); color: var(--blue-ink); font: 600 14px/1 var(--font-sans); cursor: pointer; }
.an-ripple { position: absolute; inset: 0; border-radius: var(--radius-pill); border: 2px solid var(--online); opacity: 0; }
.an-ripple.is-playing { animation: an-ripple var(--dur-signature) var(--ease-out-soft) forwards; }
.an-ripple.is-playing:nth-child(2) { animation-delay: 180ms; }
.an-ripple.is-playing:nth-child(3) { animation-delay: 360ms; }

/* Recovered figure */
.an-recovered { position: relative; overflow: hidden; padding: var(--space-6); display: grid; gap: var(--space-1); }
.an-recovered__label { font: 500 14px/20px var(--font-sans); color: var(--slate); }
.an-recovered__value { font: 700 48px/52px var(--font-sans); letter-spacing: -1px; color: var(--ink); font-variant-numeric: tabular-nums; }
.an-recovered__sub { font: 400 16px/24px var(--font-sans); color: var(--slate); }
.an-recovered__ring { position: absolute; right: -60px; top: -60px; width: 220px; height: 220px; border-radius: var(--radius-pill); border: 2px solid var(--blue); opacity: 0; }
.an-recovered__ring.is-playing { animation: an-ring var(--dur-signature) var(--ease-out-soft) forwards; }

/* Messages */
.an-thread { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); }
.an-msg { max-width: 78%; padding: var(--space-3) var(--space-4); border-radius: var(--radius-row); font: 400 16px/24px var(--font-sans); box-shadow: var(--shadow-lift); animation: an-rise var(--dur-base) var(--ease-out-soft) both; }
.an-msg__who { display: block; font: 600 13px/18px var(--font-sans); color: var(--slate); margin-bottom: 2px; }
.an-msg__time { display: block; font: 400 13px/18px var(--font-sans); color: var(--slate); margin-top: 2px; text-align: right; }
.an-msg--customer { align-self: flex-start; background: var(--glass-strong); border: 1px solid var(--glass-edge); border-bottom-left-radius: var(--radius-sm); }
.an-msg--anssay { align-self: flex-end; background: var(--blue-soft); color: var(--ink); border: 1px solid var(--glass-edge); border-bottom-right-radius: var(--radius-sm); }
.an-msg--staff { align-self: flex-end; background: var(--blue); color: var(--on-blue); border-bottom-right-radius: var(--radius-sm); }
.an-msg--staff .an-msg__who, .an-msg--staff .an-msg__time { color: var(--on-blue); opacity: 0.85; }
.an-msg--system { align-self: center; max-width: 92%; background: transparent; box-shadow: none; color: var(--slate); font-size: 13px; line-height: 18px; text-align: center; }
.an-typing { align-self: flex-end; display: inline-flex; gap: 5px; padding: var(--space-3) var(--space-4); border-radius: var(--radius-row); background: var(--blue-soft); border: 1px solid var(--glass-edge); }
.an-typing i { width: 7px; height: 7px; border-radius: var(--radius-pill); background: var(--blue); animation: an-typing 0.9s var(--ease-in-out) infinite; }
.an-typing i:nth-child(2) { animation-delay: 150ms; } .an-typing i:nth-child(3) { animation-delay: 300ms; }
.an-voice { display: flex; align-items: center; gap: var(--space-2); }
.an-voice__play { width: 36px; height: 36px; border-radius: var(--radius-pill); background: var(--blue); color: var(--on-blue); border: 0; display: grid; place-items: center; cursor: pointer; box-shadow: var(--shadow-glow); }
.an-voice__wave { display: flex; gap: 3px; align-items: center; height: 24px; }
.an-voice__wave b { width: 3px; border-radius: var(--radius-pill); background: var(--blue); opacity: 0.6; }
.an-voice__tr { margin-top: var(--space-1); font-size: 14px; line-height: 20px; color: var(--slate); }
.an-call { align-self: stretch; padding: var(--space-4); border-radius: var(--radius-row); display: grid; grid-template-columns: 44px 1fr; gap: var(--space-3); box-shadow: var(--shadow-lift); animation: an-rise var(--dur-base) var(--ease-out-soft) both; }
.an-call__icon { width: 44px; height: 44px; border-radius: var(--radius-pill); background: var(--blue); color: var(--on-blue); display: grid; place-items: center; box-shadow: var(--shadow-glow); }
.an-call__title { font: 600 17px/24px var(--font-sans); }
.an-call__meta { font: 400 13px/18px var(--font-sans); color: var(--slate); }
.an-call__sum { font: 400 16px/24px var(--font-sans); margin-top: var(--space-1); }

/* Takeover bar */
.an-takeover { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4); border-radius: var(--radius-pill); }
.an-takeover__who { flex: 1; display: flex; align-items: center; gap: var(--space-2); font: 500 15px/20px var(--font-sans); }
.an-switch { position: relative; width: 56px; height: 32px; border-radius: var(--radius-pill); background: var(--line-strong); border: 0; cursor: pointer; transition: background-color var(--dur-quick) var(--ease-out-soft); flex: none; }
.an-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: var(--radius-pill); background: var(--paper); box-shadow: var(--shadow-lift); transition: transform var(--dur-base) var(--ease-spring); }
.an-switch[aria-checked="true"] { background: var(--blue); }
.an-switch[aria-checked="true"]::after { transform: translateX(24px); }

/* Learning card */
.an-learn { padding: var(--space-6); display: grid; gap: var(--space-3); border-radius: var(--radius-panel); }
.an-learn__ask { font: 700 20px/28px var(--font-sans); }
.an-learn__count { font: 500 14px/20px var(--font-sans); color: var(--slate); }
.an-learn__answer { background: var(--glass-strong); border: 1px solid var(--glass-edge); border-radius: var(--radius-row); padding: var(--space-4); font: 400 16px/24px var(--font-sans); }
.an-learn__where { font: 400 13px/18px var(--font-sans); color: var(--slate); }
.an-learn__actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.an-learn.is-saved { animation: an-saved var(--dur-gentle) var(--ease-spring); box-shadow: 0 0 0 2px var(--done), var(--shadow-glass); }

/* Slot hold */
.an-slot { position: relative; display: grid; gap: 2px; padding: var(--space-4); border-radius: var(--radius-row); font: 400 14px/20px var(--font-sans); min-height: 84px; overflow: hidden; }
.an-slot--hold { border: 2px dashed var(--blue); background: var(--glass-strong); }
.an-slot--booked { background: var(--glass-strong); border: 1px solid var(--glass-edge); box-shadow: var(--shadow-lift); }
.an-slot--booked::before { content: ""; position: absolute; inset: 0; background: var(--blue-soft); transform-origin: left; animation: an-fill var(--dur-gentle) var(--ease-out-soft) both; z-index: 0; }
.an-slot > * { position: relative; z-index: 1; }
.an-slot__time { font: 700 17px/24px var(--font-sans); }
.an-slot__timer { position: absolute; top: var(--space-3); right: var(--space-3); width: 24px; height: 24px; z-index: 1; }
.an-slot__timer circle { fill: none; stroke-width: 3; }
.an-slot__timer .track { stroke: var(--line-strong); opacity: 0.4; }
.an-slot__timer .left { stroke: var(--blue); stroke-linecap: round; transform: rotate(-90deg); transform-origin: center; transition: stroke-dashoffset 1s linear; }
.an-tick { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: var(--radius-pill); background: var(--done); color: #FFFFFF; font-size: 12px; animation: an-pop var(--dur-base) var(--ease-spring) both; }

/* Usage meter */
.an-meter { display: grid; gap: var(--space-2); }
.an-meter__top { display: flex; justify-content: space-between; font: 600 15px/20px var(--font-sans); }
.an-meter__track { height: 10px; border-radius: var(--radius-pill); background: var(--glass-strong); border: 1px solid var(--glass-edge); overflow: hidden; }
.an-meter__fill { height: 100%; border-radius: var(--radius-pill); background: var(--blue); width: 0; transition: width var(--dur-gentle) var(--ease-out-soft); }
.an-meter--warn .an-meter__fill { background: var(--needs-you); }
.an-meter--full .an-meter__fill { background: var(--missed); }
.an-meter__note { font: 400 13px/18px var(--font-sans); color: var(--slate); }

/* Checklist */
.an-check { display: grid; gap: var(--space-4); padding: var(--space-6); }
.an-check__bar { height: 10px; border-radius: var(--radius-pill); background: var(--glass-strong); border: 1px solid var(--glass-edge); overflow: hidden; }
.an-check__bar span { display: block; height: 100%; background: var(--blue); border-radius: var(--radius-pill); transition: width var(--dur-gentle) var(--ease-out-soft); }
.an-check__group { font: 700 20px/28px var(--font-sans); }
.an-check__list { display: grid; gap: var(--space-2); }
.an-check__item { display: grid; grid-template-columns: 30px 1fr auto; gap: var(--space-3); align-items: center; padding: var(--space-3) var(--space-4); border-radius: var(--radius-row); font: 500 16px/24px var(--font-sans); }
.an-check__mark { width: 26px; height: 26px; border-radius: var(--radius-pill); border: 2px solid var(--line-strong); display: grid; place-items: center; font-size: 13px; color: #FFFFFF; }
.an-check__item.is-done .an-check__mark { background: var(--done); border-color: var(--done); animation: an-pop var(--dur-base) var(--ease-spring); }
.an-check__item.is-locked { color: var(--slate); }
.an-check__hint { font: 400 13px/18px var(--font-sans); color: var(--slate); }

/* Skeleton */
.an-skel { border-radius: var(--radius-pill); background: linear-gradient(90deg, var(--glass-strong) 0%, var(--glass-edge) 50%, var(--glass-strong) 100%); background-size: 200% 100%; animation: an-shimmer 1.4s var(--ease-in-out) infinite; }

@keyframes an-drift { from { background-position: 0% 0%; } to { background-position: 100% 100%; } }
@keyframes an-spin { to { transform: rotate(360deg); } }
@keyframes an-breathe { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
@keyframes an-ripple { 0% { transform: scale(1); opacity: 0.8; } 100% { transform: scale(3.6); opacity: 0; } }
@keyframes an-ring { 0% { transform: scale(0.6); opacity: 0.8; } 100% { transform: scale(1.3); opacity: 0; } }
@keyframes an-flash { 0% { box-shadow: 0 0 0 3px var(--blue), var(--shadow-lift); } 100% { box-shadow: var(--shadow-lift); } }
@keyframes an-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes an-typing { 0%, 100% { transform: translateY(0); opacity: 0.5; } 50% { transform: translateY(-3px); opacity: 1; } }
@keyframes an-saved { 0% { transform: scale(1); } 40% { transform: scale(1.015); } 100% { transform: scale(1); } }
@keyframes an-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes an-pop { 0% { transform: scale(0); } 100% { transform: scale(1); } }
@keyframes an-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

@media (prefers-reduced-motion: reduce) {
  .an *, .an *::before, .an *::after, .an-canvas { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
  .an-ripple, .an-recovered__ring { display: none; }
}

/* Cover */
.cv .blue { fill: var(--blue); } .cv .sky { fill: var(--canvas-sky); } .cv .aqua { fill: var(--canvas-aqua); } .cv .violet { fill: var(--violet); } .cv .navy { fill: var(--ink); }
.cv .ring { fill: none; stroke: var(--paper); stroke-width: 4; }
.cv .r-panel { rx: var(--radius-panel); } .cv .r-row { rx: var(--radius-row); } .cv .pill { rx: 36px; }