/* ===================== Cirrel layer =====================
   Loaded after the iOS layer. Shaded spheres behind the glass, a coloured
   highlight for the current page, a greeting header, entrance motion and the
   drag-and-drop case board. html.cirrel is set by cirrel.js; --c-accent is the
   user's highlight colour, or Cirrel blue when that colour is white or grey. */
html.cirrel{--c-accent:#3d8bfd;--c-ink:#fff;--ios-tint:var(--c-accent)!important;--c-warm:#f2963a;--c-green:#22c58b;--c-line:rgba(255,255,255,.09);--c-glass:rgba(13,18,31,.7);--c-glass-2:rgba(255,255,255,.04);--c-hover:rgba(255,255,255,.08);--c-solid:rgba(12,17,30,.94);--c-muted:#9aa6bf;--c-ease:cubic-bezier(.2,.75,.2,1)}
html.cirrel[data-theme=light]{--c-line:rgba(20,32,64,.11);--c-glass:rgba(255,255,255,.6);--c-glass-2:rgba(20,32,64,.035);--c-hover:rgba(20,32,64,.07);--c-solid:rgba(255,255,255,.95);--c-muted:#56637e}
html.cirrel,html.cirrel body{background:#05080f!important}
html.cirrel[data-theme=light],html.cirrel[data-theme=light] body{background:#eef2f9!important}
html.cirrel.ios-shell body>.ios-wallpaper,html.cirrel.ios-shell body>.glass-bg,html.cirrel.ios-shell body>div.ios-wallpaper{display:none!important}

/* Shaded spheres */
.c-orbs{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.c-orbs span{position:absolute;border-radius:50%;animation:c-drift 18s ease-in-out infinite alternate}
.c-orbs span:nth-child(1){width:520px;height:520px;right:-70px;top:-230px;background:radial-gradient(circle at 34% 30%,#ffcf8f 0,#f0912a 34%,#a94f0b 72%,#5a2603 100%);animation-duration:21s}
.c-orbs span:nth-child(2){width:680px;height:680px;left:-300px;bottom:-260px;background:radial-gradient(circle at 62% 30%,color-mix(in srgb,var(--c-accent) 45%,#fff) 0,var(--c-accent) 36%,color-mix(in srgb,var(--c-accent) 45%,#000) 74%,color-mix(in srgb,var(--c-accent) 18%,#000) 100%);animation-duration:24s;animation-delay:-6s}
.c-orbs span:nth-child(3){width:300px;height:300px;left:41%;bottom:-150px;background:radial-gradient(circle at 36% 28%,#8ff3c2 0,#21b56f 38%,#0c5a33 78%,#06301b 100%);animation-delay:-3s}
.c-orbs span:nth-child(4){width:150px;height:150px;left:58%;top:58%;background:radial-gradient(circle at 34% 28%,#f1f4f9 0,#9aa3b5 40%,#4a5264 80%,#262b37 100%);animation-duration:15s;animation-delay:-9s}
.c-orbs span:nth-child(5){width:600px;height:600px;right:-230px;bottom:-280px;background:radial-gradient(circle at 34% 26%,#a8f3ff 0,#1fc0de 36%,#0b6276 76%,#053440 100%);animation-duration:26s;animation-delay:-12s}
html.cirrel[data-theme=light] .c-orbs span{opacity:.88}
@keyframes c-drift{from{transform:translate3d(0,0,0)}to{transform:translate3d(14px,-22px,0)}}
@media(max-width:750px){.c-orbs span:nth-child(1){width:300px;height:300px;top:-140px}.c-orbs span:nth-child(2){width:380px;height:380px}.c-orbs span:nth-child(5){width:340px;height:340px}}

/* Current page in the sidebar: filled with the highlight colour and a soft glow */
html.cirrel aside nav :is(button,a):not(summary):is(.active,[aria-current=page]){background:var(--c-accent)!important;color:var(--c-ink)!important;box-shadow:0 6px 20px color-mix(in srgb,var(--c-accent) 40%,transparent)!important}
html.cirrel aside .brand b span{color:var(--c-accent)!important}
.c-count{display:inline-grid;place-items:center;min-width:20px;height:20px;margin-left:auto;padding:0 6px;border-radius:999px;background:var(--c-hover);color:inherit;font-size:11px;font-weight:700;line-height:1}
.c-count[hidden]{display:none!important}
html.cirrel aside nav :is(button,a).active .c-count{background:rgba(255,255,255,.24)}
html.cirrel.ios-shell aside label.c-switch{background:none!important;border:0!important;box-shadow:none!important}.c-switch{display:flex;align-items:center;gap:12px;margin:6px 4px;padding:8px 12px;border-radius:12px;color:var(--c-muted);font-size:13px;font-weight:550;cursor:pointer;flex-shrink:0}
.c-switch span{flex:1}
.c-switch svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
html.cirrel.ios-shell aside label.c-switch input.c-toggle{position:relative!important;clip-path:none!important;clip:auto!important;overflow:visible!important;opacity:1!important;inset:auto!important;appearance:none;-webkit-appearance:none;position:relative;width:40px!important;height:22px!important;min-height:0!important;margin:0!important;padding:0!important;border-radius:999px!important;border:0!important;background:var(--c-hover)!important;cursor:pointer;transition:background .2s;flex:0 0 40px}
html.cirrel.ios-shell aside label.c-switch input.c-toggle::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.3);transition:transform .22s var(--c-ease)}
html.cirrel.ios-shell aside label.c-switch input.c-toggle:checked{background:var(--c-green)!important}html.cirrel.ios-shell aside label.c-switch input.c-toggle:checked::after{transform:translateX(18px)}
html.cirrel aside.nav-collapsed .c-switch span{display:none}

/* Greeting header: "Good morning, name" with today's date and the open page */
html.cirrel.ios-shell body.ui-workspace main>header>div:not(.c-greet):not(.live),html.cirrel.ios-shell body.ui-workspace main>.ios-navbar{display:none!important}
.c-greet h1{margin:2px 0 6px!important;font-size:30px!important;letter-spacing:-.8px;font-weight:650}
html.cirrel.ios-shell .c-greet :is(h1,p) b{display:inline!important;font-weight:inherit!important;color:inherit!important;font-size:inherit!important}
.c-greet p{display:flex;align-items:center;gap:6px;margin:0!important;font-size:13px;color:var(--c-muted)}
.c-greet p i{display:inline-block;width:8px;height:8px;margin:0 2px 0 0;border-radius:50%;background:var(--c-green);box-shadow:0 0 0 3px color-mix(in srgb,var(--c-green) 25%,transparent)}

/* Glass over the spheres */
html.cirrel main>section:not(#detail):not([hidden]){background:var(--c-glass)!important;backdrop-filter:blur(26px) saturate(150%)!important;-webkit-backdrop-filter:blur(26px) saturate(150%)!important;border:1px solid var(--c-line)!important;border-radius:24px!important}
html.cirrel button.primary:not(:disabled){background:var(--c-accent)!important;border-color:var(--c-accent)!important;color:var(--c-ink)!important;box-shadow:0 6px 20px color-mix(in srgb,var(--c-accent) 38%,transparent)!important}

/* Motion: pages rise in, cards follow */
@keyframes c-rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
html.cirrel main>section:not([hidden]):not(.metrics):not(#detail),html.cirrel .metrics article,html.cirrel .analytics-grid>*,html.cirrel .c-col,html.cirrel #queue>.queue-row{animation:c-rise .45s var(--c-ease) both}
html.cirrel .metrics article:nth-child(2),html.cirrel .analytics-grid>:nth-child(2),html.cirrel .c-col:nth-child(2){animation-delay:.06s}
html.cirrel .metrics article:nth-child(3),html.cirrel .c-col:nth-child(3){animation-delay:.12s}
html.cirrel .metrics article:nth-child(4){animation-delay:.18s}
html.cirrel .c-board.quiet .c-col,html.cirrel .c-board.quiet .c-card{animation:none}

/* Underlined tabs (Contact history / Case board) */
.c-tabs{display:flex;gap:22px;margin:4px 0 20px;border-bottom:1px solid var(--c-line)}
html.cirrel .c-tabs button{display:inline-flex!important;align-items:center;gap:8px;min-height:40px!important;margin:0 0 -1px!important;padding:0 2px 10px!important;border:0!important;border-bottom:2px solid transparent!important;border-radius:0!important;background:none!important;box-shadow:none!important;color:var(--c-muted)!important;font-weight:600}
html.cirrel .c-tabs button:hover{color:inherit!important}
html.cirrel .c-tabs button.active{color:inherit!important;border-bottom-color:var(--c-accent)!important}

/* Case board */
.c-hint{margin:0 0 14px;color:var(--c-muted);font-size:13px}
.c-board{display:grid;grid-template-columns:repeat(3,minmax(250px,1fr));gap:16px;overflow-x:auto;padding-bottom:4px}
.c-col{display:flex;flex-direction:column;gap:10px;min-height:340px;padding:14px;border:1px solid var(--c-line);border-radius:20px;background:var(--c-glass-2);transition:border-color .2s,background .2s,box-shadow .2s}
.c-col.drop{border-color:var(--c-accent);background:color-mix(in srgb,var(--c-accent) 9%,transparent);box-shadow:0 0 0 4px color-mix(in srgb,var(--c-accent) 16%,transparent)}
.c-head{display:flex;align-items:center;gap:8px;font-weight:650;font-size:14px}
.c-head i{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.c-col[data-state=open] .c-head i{background:var(--c-accent)}.c-col[data-state=waiting] .c-head i{background:var(--c-warm)}.c-col[data-state=resolved] .c-head i{background:var(--c-green)}
.c-head .c-count{margin-left:2px}
.c-sub{margin:-6px 0 4px!important;font-size:12px;color:var(--c-muted)}
.c-empty{display:grid;place-items:center;flex:1;min-height:110px;border:1px dashed var(--c-line);border-radius:16px;color:var(--c-muted);font-size:12px;text-align:center;padding:12px}
.c-empty[hidden]{display:none}
.c-card{position:relative;display:flex;flex-direction:column;gap:8px;padding:14px;border:1px solid var(--c-line);border-radius:16px;background:var(--c-solid);cursor:grab;user-select:none;transition:border-color .18s,box-shadow .18s,opacity .18s}
.c-card:hover{border-color:color-mix(in srgb,var(--c-accent) 45%,var(--c-line));box-shadow:0 8px 24px rgba(0,0,0,.18)}
.c-card:focus-visible{outline:2px solid var(--c-accent);outline-offset:2px}
.c-card.placeholder{opacity:.3;border-style:dashed;box-shadow:none}
.c-top{display:flex;align-items:center;gap:10px}
.c-avatar{display:grid;place-items:center;width:30px;height:30px;flex-shrink:0;border-radius:50%;background:color-mix(in srgb,var(--c-accent) 22%,transparent);color:inherit;font-size:11px;font-weight:700}
.c-top strong{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}
.c-top small{margin:0;white-space:nowrap;color:var(--c-muted);font-size:11px}
.c-note{margin:0!important;font-size:12px;color:var(--c-muted);line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.c-foot{display:flex;align-items:center;justify-content:space-between;gap:8px}
.c-foot code{font:11px ui-monospace,Consolas,monospace;color:var(--c-muted)}
html.cirrel .c-foot button{min-height:30px!important;padding:4px 12px!important;font-size:12px!important}
.c-grip{display:grid;place-items:center;width:30px;height:30px;margin:-4px -4px -4px 0;border-radius:8px;color:var(--c-muted);touch-action:none;cursor:grab}
.c-grip svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
.c-grip:hover{background:var(--c-hover)}
.c-float{position:fixed;z-index:2147483000;pointer-events:none;margin:0;cursor:grabbing;box-shadow:0 28px 60px rgba(0,0,0,.45);border-color:color-mix(in srgb,var(--c-accent) 60%,var(--c-line));transform-origin:30% 20%;will-change:transform}
body.c-dragging,body.c-dragging *{cursor:grabbing!important}

/* Toast with Undo */
.c-toasts{position:fixed;right:24px;bottom:24px;z-index:2147483001;display:flex;flex-direction:column;gap:10px;width:min(380px,calc(100vw - 32px));pointer-events:none}
.c-toast{pointer-events:auto;position:relative;overflow:hidden;display:flex;align-items:center;gap:12px;padding:12px 14px 14px;border-radius:14px;background:var(--c-solid);backdrop-filter:blur(26px);-webkit-backdrop-filter:blur(26px);border:1px solid var(--c-line);box-shadow:0 18px 40px rgba(0,0,0,.35);opacity:0;transform:translateY(10px) scale(.98);transition:opacity .25s,transform .3s var(--c-ease)}
.c-toast.in{opacity:1;transform:none}.c-toast.out{opacity:0;transform:translateX(24px)}
.c-toast i{width:9px;height:9px;border-radius:50%;background:var(--c-green);flex-shrink:0}
.c-toast.warn i{background:var(--c-warm)}
.c-toast p{flex:1;margin:0!important;font-size:13px}
html.cirrel .c-toast button{min-height:30px!important;padding:4px 14px!important;font-size:12px!important;font-weight:650;border-radius:999px!important}
.c-toast b{position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--c-accent);transform-origin:left;animation:c-life 8s linear forwards}
@keyframes c-life{from{transform:scaleX(1)}to{transform:scaleX(0)}}

/* Reduced motion: from Personalization or Windows */
html[data-motion=reduced].cirrel *,html[data-motion=reduced].cirrel *::before,html[data-motion=reduced].cirrel *::after{animation:none!important}
@media(prefers-reduced-motion:reduce){html.cirrel *,html.cirrel *::before,html.cirrel *::after{animation:none!important}}
@media(max-width:750px){.c-greet h1{font-size:26px!important}.c-toasts{right:16px;bottom:16px}}
html.cirrel.ios-shell main>header>.c-greet>p{display:flex!important}
html.cirrel aside nav [data-c-count]::after{content:attr(data-c-count);display:inline-grid;place-items:center;min-width:20px;height:20px;margin-left:auto;padding:0 6px;border-radius:999px;background:var(--c-hover);font-size:11px;font-weight:700;line-height:1}
html.cirrel aside nav [data-c-count].active::after{background:rgba(255,255,255,.24)}

/* Shared interaction timing: feedback is immediate; movement never changes layout. */
html.cirrel{--c-feedback:160ms;--c-enter:240ms;--c-ease:cubic-bezier(.22,1,.36,1)}
html.cirrel .c-tabs button{transition:color var(--c-feedback),border-color var(--c-feedback),background-color var(--c-feedback)!important}
html.cirrel .c-tabs button:focus-visible{outline:2px solid var(--ios-label)!important;outline-offset:4px!important}
html.cirrel .c-card{transition:border-color var(--c-feedback),box-shadow var(--c-feedback)!important}
html.cirrel .custom-select-menu{animation:c-menu-enter var(--c-enter) var(--c-ease)}
@keyframes c-menu-enter{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
html.cirrel.c-paused .c-orbs span{animation-play-state:paused}
html.cirrel[data-motion=reduced] *,html.cirrel[data-motion=reduced] *::before,html.cirrel[data-motion=reduced] *::after{transition-duration:0s!important;scroll-behavior:auto!important}
@media(prefers-reduced-motion:reduce){html.cirrel *,html.cirrel *::before,html.cirrel *::after{transition-duration:0s!important;scroll-behavior:auto!important}}

/* The toggle thumb already communicates checked state. */
html.cirrel.ios-shell aside label.c-switch::after{content:none!important;display:none!important}