/* Flakk console layouts (06.11.2026, task yfsa): Simple (AI-first, springy) and Classic (familiar menu, calm, dense). See console-layout.js.
   Motion tokens are the website's (flakk.app v7/motion.css): transforms + opacity only; transitions <= 300 ms; reduced motion = fades only. */
:root {
  --cl-fast: 120ms; --cl-base: 220ms; --cl-dur: 300ms; --cl-out: cubic-bezier(.2, .7, .2, 1);
  --cl-spring: cubic-bezier(.34, 1.56, .64, 1); --cl-bounce: cubic-bezier(.3, 1.9, .6, 1);
  --cl-press: .94; --cl-lift: -2px; --cl-amb: 242, 167, 65;
  --cl-glow: 0 10px 28px -8px rgba(var(--cl-amb), .55), 0 0 0 1px rgba(var(--cl-amb), .38);
  --cl-rail: 88px; --cl-side: 212px; --cl-side-n: 58px;
}
@supports (transition-timing-function: linear(0, 1)) { :root {
  --cl-spring: linear(0, 0.083, 0.275, 0.504, 0.721, 0.897, 1.02, 1.093, 1.123, 1.123, 1.104, 1.076, 1.047, 1.023, 1.004, 0.992, 0.986, 0.984, 0.986, 0.989, 0.992, 0.996, 0.999, 1, 1.002, 1.002, 1.002, 1.002, 1.001, 1.001, 1, 1, 1, 1, 1, 1, 1);
  --cl-bounce: linear(0, 0.099, 0.343, 0.647, 0.938, 1.166, 1.302, 1.346, 1.313, 1.23, 1.125, 1.023, 0.944, 0.896, 0.88, 0.891, 0.92, 0.956, 0.991, 1.019, 1.036, 1.041, 1.038, 1.028, 1.015, 1.003, 0.994, 0.988, 0.986, 0.987, 0.99, 0.995, 0.999, 1.002, 1.004, 1.005, 1); } }

/* ================================================================ shared frame: menu on the left, the panes on the right */
html[data-cl] #tabs { display: none !important; } /* kept in the DOM for the wave scripts; the new menu replaces it */
.cl-body { flex: 1; min-height: 0; display: flex; position: relative; }
.cl-body > main { flex: 1; min-width: 0; }
.cl-nav { flex: none; display: flex; flex-direction: column; background: var(--hdr-2); color: var(--hdr-ink); border-right: 1px solid rgba(243, 237, 226, .06); overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; z-index: 20; }
.cl-nav button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.cl-nav button:focus-visible, .cl-sub button:focus-visible { outline: 2px solid var(--amber); outline-offset: -2px; border-radius: 8px; }
.cl-items { flex: 1; }
.cl-badge { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--amber); color: #1B1305; font-size: 11px; font-weight: 700; display: inline-grid; place-items: center; font-family: var(--mono); line-height: 1; }
.cl-foot { padding: 10px 8px 12px; border-top: 1px solid rgba(243, 237, 226, .08); display: grid; gap: 8px; }
.cl-style { display: grid; grid-template-columns: 1fr 1fr; padding: 3px; border-radius: 10px; background: rgba(255, 255, 255, .06); gap: 2px; }
.cl-style button { height: 28px; border-radius: 7px; font-size: 12px; font-weight: 600; color: rgba(243, 237, 226, .7); }
.cl-style button.on { background: var(--hdr-ink); color: var(--hdr); }
html[data-cl="simple"] .cl-style { grid-template-columns: 1fr; }
html[data-cl="simple"] .cl-style button { height: 26px; font-size: 11.5px; }
html[data-cl="simple"] .cl-snd { flex-direction: column; height: auto; padding: 6px 0; gap: 3px; font-size: 11px; }
.cl-snd { display: flex; align-items: center; justify-content: center; gap: 6px; height: 28px; border-radius: 8px; font-size: 12px; color: rgba(243, 237, 226, .7); }
.cl-snd:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.cl-snd[aria-pressed="true"] { color: var(--amber); }

/* first-visit note */
.cl-hello { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 14px 24px 0; padding: 10px 12px 10px 16px; border-radius: 12px; background: var(--amber-soft); color: var(--ink); font-size: 13.5px; line-height: 1.4; max-width: 1632px; }
.cl-hello > span { flex: 1 1 320px; }
.cl-hello .cl-x { width: 28px; height: 28px; border: 0; border-radius: 8px; background: transparent; color: var(--ink-soft); cursor: pointer; display: grid; place-items: center; }

/* the style card in Account */
.cl-stylecard { margin-bottom: 18px; }
.cl-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; padding: 12px 16px 16px; }
.cl-opt { display: grid; grid-template-columns: 96px 1fr; grid-template-rows: auto 1fr; column-gap: 14px; row-gap: 4px; text-align: left; padding: 12px; border-radius: 12px; border: 1.5px solid var(--rule-strong); background: var(--surf); color: var(--ink); font: inherit; cursor: pointer; }
.cl-opt b { font-size: 15px; } .cl-opt > span:last-child { font-size: 13px; color: var(--ink-soft); line-height: 1.45; grid-column: 2; }
.cl-opt.on { border-color: var(--amber); box-shadow: 0 0 0 3px rgba(var(--cl-amb), .25); }
.cl-mini { grid-row: 1 / span 2; width: 96px; height: 64px; border-radius: 8px; background: var(--surf-2); border: 1px solid var(--rule); position: relative; overflow: hidden; }
.cl-mini i { position: absolute; display: block; border-radius: 3px; }
.cl-mini-classic i:nth-child(1) { left: 0; top: 0; bottom: 0; width: 22px; background: var(--hdr-2); border-radius: 0; }
.cl-mini-classic i:nth-child(2) { left: 28px; top: 8px; right: 6px; height: 6px; background: var(--rule-strong); }
.cl-mini-classic i:nth-child(3) { left: 28px; top: 20px; right: 6px; height: 36px; background: repeating-linear-gradient(180deg, var(--bar-conf) 0 6px, transparent 6px 9px); }
.cl-mini-classic i:nth-child(4) { display: none; }
.cl-mini-simple i:nth-child(1) { left: 0; top: 0; bottom: 0; width: 14px; background: var(--hdr-2); border-radius: 0; }
.cl-mini-simple i:nth-child(2) { left: 22px; top: 8px; right: 8px; height: 12px; border-radius: 999px; background: var(--surf); border: 1.5px solid var(--amber); }
.cl-mini-simple i:nth-child(3) { left: 22px; top: 27px; width: 30px; height: 26px; border-radius: 6px; background: var(--ok-bg); }
.cl-mini-simple i:nth-child(4) { left: 57px; top: 27px; right: 8px; height: 26px; border-radius: 6px; background: var(--amber-soft); }

/* ================================================================ SIMPLE: a short rail of big, obvious places + sub-tabs */
html[data-cl="simple"] .cl-nav { width: var(--cl-rail); }
.cl-gi { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; width: calc(100% - 12px); margin: 4px 6px; min-height: 64px; border-radius: 14px; color: rgba(243, 237, 226, .72); }
.cl-gi:first-child { margin-top: 10px; }
.cl-gi-ic { position: relative; width: 40px; height: 32px; border-radius: 999px; display: grid; place-items: center; transition: background-color var(--cl-base) ease; }
.cl-gi-ic .ic { width: 21px; height: 21px; }
.cl-gi-ic .cl-badge { position: absolute; top: -4px; right: -6px; }
.cl-gi-t { font-size: 12px; font-weight: 600; line-height: 1.15; text-align: center; }
.cl-gi:hover { color: #fff; } .cl-gi:hover .cl-gi-ic { background: rgba(255, 255, 255, .08); }
.cl-gi.on { color: #fff; } .cl-gi.on .cl-gi-ic { background: var(--amber); color: #1B1305; }
.cl-sub { position: sticky; top: 0; z-index: 15; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 12px 24px 10px; background: color-mix(in srgb, var(--ground) 88%, transparent); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--rule-2); }
.cl-sub[hidden] { display: none; }
.cl-seg { position: relative; display: inline-flex; gap: 2px; padding: 4px; border-radius: 12px; background: var(--surf-3); max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.cl-seg button { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; border: 0; border-radius: 9px; background: transparent; color: var(--ink-soft); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.cl-seg button.on { color: var(--ink); }
.cl-seg .cl-ind { position: absolute; z-index: 0; left: 0; top: 4px; bottom: 4px; border-radius: 9px; background: var(--surf); box-shadow: 0 1px 2px rgba(10, 29, 51, .08), 0 4px 12px -6px rgba(10, 29, 51, .25); transition: translate var(--cl-dur) var(--cl-spring), width var(--cl-dur) var(--cl-spring), opacity var(--cl-fast); }
.cl-sub-note { font-size: 13px; color: var(--ink-mute); }

/* the Team area: Board meeting / Agents / Everything are views of the same pane (nothing removed) */
#pane-agents[data-clview="board"] .w1a-grid > :not(#w1a-today):not(#w1a-meeting):not(.w1a-col) { display: none !important; }
#pane-agents[data-clview="agents"] .w1a-grid > :not(#w4-team):not(#w1a-team):not(#w1a-drafts):not(#w1a-voice):not(#w1a-log) { display: none !important; }
#pane-agents[data-clview="board"] .w1a-jump, #pane-agents[data-clview="agents"] .w1a-jump { display: none; }
#pane-agents[data-clview="board"] #w1a-meeting { order: -2; } #pane-agents[data-clview="board"] .w1a-col { order: -1; } /* the meeting and what waits for your yes first */

/* SIMPLE · Today: the ask bar, "right now", and only what matters now (the rest one tap away) */
html[data-cl="simple"] #pane-fd.on { display: flex; flex-direction: column; }
html[data-cl="simple"] #pane-fd.on > * { order: 4; }
html[data-cl="simple"] #pane-fd.on > .ph { order: 0; margin-bottom: 14px; }
html[data-cl="simple"] #pane-fd.on > #clAsk { order: 1; }
html[data-cl="simple"] #pane-fd.on > #gaBox { order: 2; }
html[data-cl="simple"] #pane-fd.on > .fd-stack { order: 3; }
html[data-cl="simple"] #pane-fd.on > #w1Today { order: 4; }
html[data-cl="simple"] #pane-fd.on > #clMore { order: 5; }
html[data-cl="simple"] #pane-fd.on > #w3Prices-fd { order: 6; }
html[data-cl="simple"] #pane-fd:not(.cl-more-open) > #w3Prices-fd,
html[data-cl="simple"] #pane-fd:not(.cl-more-open) .fd-stack > .card:not(.fd-row):not(.kpis),
html[data-cl="simple"] #pane-fd:not(.cl-more-open) .fd-stack > .fd-row.n2 { display: none; }
html[data-cl="simple"] #pane-fd.on > * + * { margin-top: 0; }
html[data-cl="simple"] #pane-fd.on > #gaBox:empty { display: none; }
html[data-cl="simple"] #pane-fd.on > :is(#gaBox, .fd-stack, #w1Today, #w3Prices-fd, #clAsk) { margin-bottom: 18px; }
.cl-ask { padding: 16px 16px 14px; border: 1.5px solid rgba(var(--cl-amb), .55); background: linear-gradient(180deg, color-mix(in srgb, var(--amber-soft) 55%, var(--surf)), var(--surf)); }
.cl-ask-f { display: flex; align-items: center; gap: 10px; }
.cl-ask-orb { width: 40px; height: 40px; flex: none; border-radius: 50%; background: radial-gradient(circle at 38% 34%, #fff6d8, #ffd27a 42%, #f2a741 72%, #b8741e); box-shadow: 0 0 0 4px rgba(var(--cl-amb), .18), 0 8px 18px -8px rgba(var(--cl-amb), .9); animation: cl-breathe 4.2s ease-in-out infinite; }
@keyframes cl-breathe { 0%, 100% { scale: 1; } 50% { scale: 1.06; } }
.cl-ask-f input { flex: 1; min-width: 0; height: 50px; padding: 0 16px; border-radius: 14px; border: 1.5px solid var(--rule-strong); background: var(--surf); color: var(--ink); font: inherit; font-size: 17px; }
.cl-ask-f input:focus { outline: none; border-color: var(--amber); box-shadow: 0 0 0 4px rgba(var(--cl-amb), .22); }
.cl-ask-go, .cl-ask-mic { width: 50px; height: 50px; flex: none; display: grid; place-items: center; border-radius: 14px; cursor: pointer; }
.cl-ask-go { border: 0; background: var(--amber); color: #1B1305; }
.cl-ask-mic { border: 1.5px solid var(--rule-strong); background: var(--surf); color: var(--ink); }
.cl-ask-s { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0 50px; }
.cl-chip { height: 32px; padding: 0 13px; border-radius: 999px; border: 1px solid var(--rule-strong); background: var(--surf); color: var(--ink-soft); font: inherit; font-size: 13.5px; cursor: pointer; }
.cl-chip:hover { border-color: var(--amber); color: var(--ink); }
.cl-now { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-top: 14px; }
.cl-n { display: flex; align-items: baseline; gap: 10px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--rule); background: var(--surf-2); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.cl-n b { font-family: var(--display); font-size: 30px; font-weight: 500; line-height: 1; font-variation-settings: "opsz" 72; }
.cl-n span { font-size: 13px; color: var(--ink-soft); line-height: 1.25; }
.cl-n.is-yes:not(.zero) { background: var(--amber-soft); border-color: rgba(var(--cl-amb), .5); }
.cl-n.is-alert:not(.zero) { background: var(--bad-bg); border-color: color-mix(in srgb, var(--bad) 35%, transparent); }
.cl-n.zero b { color: var(--ink-mute); }
.cl-more { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 46px; margin: 0 0 18px; border-radius: 12px; border: 1.5px dashed var(--rule-strong); background: transparent; color: var(--ink-soft); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.cl-more:hover { border-color: var(--amber); color: var(--ink); }
.cl-more .cl-more-ic { transition: rotate var(--cl-dur) var(--cl-spring); }
.cl-more[aria-expanded="true"] .cl-more-ic { rotate: 180deg; }

/* SIMPLE · Ask Flakk is the primary tool: a clear, warm button; the confirm card is the hero */
html[data-cl="simple"] .fa-card.is-pending { border: 1.5px solid rgba(var(--cl-amb), .65); border-left-width: 5px; box-shadow: 0 18px 40px -18px rgba(var(--cl-amb), .55), var(--shadow); }
.cl-ready { color: var(--amber-ink); font-family: var(--ui); font-size: 14px; font-weight: 700; letter-spacing: .02em; }
html[data-cl="simple"] .fa-card-f { align-items: center; gap: 10px; }
.cl-q { margin-right: auto; font-size: 13.5px; font-weight: 600; color: var(--ink); white-space: nowrap; }
html[data-cl="simple"] .fa-card-f { flex-wrap: wrap; }
/* with Ask Flakk docked, give the search room (the group-booking button keeps its icon and tooltip) */
@media (max-width: 1600px) { html[data-cl] body.fa-on .hbtn.grp .t2 { display: none; } html[data-cl] body.fa-on .hbtn.pri kbd { display: none; } }
html[data-cl="simple"] .fa-card .cl-yes { position: relative; overflow: hidden; height: 44px; padding: 0 20px; border-radius: 12px; font-size: 15px; font-weight: 700; box-shadow: 0 6px 0 -2px #C9842A, 0 12px 24px -10px rgba(var(--cl-amb), .9); }
html[data-cl="simple"] .fa-card .cl-yes .ic { width: 18px; height: 18px; }
html[data-cl="simple"] .fa-card .cl-yes.m-down { box-shadow: 0 2px 0 -1px #C9842A, 0 4px 10px -6px rgba(var(--cl-amb), .9); }
html[data-cl="simple"] .fa-card .cl-no { height: 44px; padding: 0 14px; border-radius: 12px; }
.cl-steps { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 8px 0 2px; }
.cl-st { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; background: var(--surf-3); color: var(--ink-mute); transition: background-color var(--cl-base), color var(--cl-base), scale var(--cl-dur) var(--cl-spring); }
.cl-st .ic { width: 12px; height: 12px; }
.cl-st.is-ok { background: var(--ok-bg); color: var(--ok-ink); }
.cl-st.is-wait { background: var(--amber-soft); color: var(--amber-ink); }
.cl-st.is-wait i { width: 7px; height: 7px; border-radius: 50%; background: var(--amber); animation: cl-pulse 1.1s ease-in-out infinite; }
@keyframes cl-pulse { 0%, 100% { opacity: .35; scale: .8; } 50% { opacity: 1; scale: 1.15; } }
.cl-st.is-now { animation: cl-pop var(--cl-dur) var(--cl-bounce) both; }
.cl-st.is-off { text-decoration: none; opacity: .75; } .cl-st.is-bad { background: var(--bad-bg); color: var(--bad-ink); }
.cl-st-l { width: 14px; height: 2px; border-radius: 2px; background: var(--rule-strong); }
.cl-done { display: flex; align-items: center; gap: 12px; margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: var(--ok-bg); color: var(--ok-ink); }
.cl-win { font-size: 15px; font-weight: 700; }
.cl-check { width: 34px; height: 34px; flex: none; display: inline-grid; }
.cl-check svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 3.6; stroke-linecap: round; stroke-linejoin: round; }
.cl-check circle { stroke-dasharray: 145; stroke-dashoffset: 145; animation: cl-draw 360ms var(--cl-out) forwards; opacity: .45; }
.cl-check path { stroke-dasharray: 40; stroke-dashoffset: 40; animation: cl-draw 300ms 200ms var(--cl-out) forwards; }
@keyframes cl-draw { to { stroke-dashoffset: 0; } }
.cl-tcheck { display: inline-grid; width: 20px; height: 20px; color: var(--ok); } .cl-tcheck .cl-check { width: 20px; height: 20px; }
.cl-ripple { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .55); pointer-events: none; scale: 0; animation: cl-ripple 600ms var(--cl-out) forwards; }
@keyframes cl-ripple { to { scale: 1; opacity: 0; } }
.cl-burst { position: fixed; z-index: 400; width: 0; height: 0; pointer-events: none; }
.cl-burst i { position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; border-radius: 2px; animation: cl-burst 760ms var(--cl-out) forwards; }
@keyframes cl-burst { 0% { translate: 0 0; scale: .4; opacity: 1; } 70% { opacity: 1; } 100% { translate: var(--x) var(--y); scale: 1; rotate: 200deg; opacity: 0; } }

/* SIMPLE motion: press/release, pane entry, cards, chips, chat streaming, calendar springs, toasts */
html[data-cl="simple"] :is(.btn, .hbtn, .m-press, .cl-gi, .seg button, .fa-send, .fa-mic, .fa-fab, .fa-sugg button) { transition: scale var(--cl-dur) var(--cl-spring), translate var(--cl-dur) var(--cl-spring), box-shadow var(--cl-base) var(--cl-out), background-color var(--cl-base) ease, color var(--cl-base) ease, border-color var(--cl-base) ease; }
@media (hover: hover) { html[data-cl="simple"] :is(.btn, .hbtn, .cl-chip, .cl-n, .cl-opt, .cl-more):hover { translate: 0 var(--cl-lift); } html[data-cl="simple"] :is(.btn.amb, .hbtn.pri, .cl-ask-go):hover { box-shadow: var(--cl-glow); } }
html[data-cl="simple"] .m-down { scale: var(--cl-press) !important; translate: 0 0 !important; transition-duration: 90ms !important; transition-timing-function: var(--cl-out) !important; }
html[data-cl="simple"] .m-rel { animation: cl-release 300ms ease-in-out; }
@keyframes cl-release { 0% { scale: var(--cl-press); } 32% { scale: 1.06; } 60% { scale: .98; } 82% { scale: 1.012; } 100% { scale: 1; } }
html[data-cl="simple"] .pane.on { animation: cl-pane var(--cl-dur) var(--cl-out); }
@keyframes cl-pane { from { opacity: 0; translate: 0 8px; } }
html[data-cl="simple"] .pane.on > :is(.card, section, .fd-stack, .grid, #clAsk):nth-child(-n+6) { animation: cl-pop var(--cl-dur) var(--cl-spring) both; }
html[data-cl="simple"] .pane.on > :nth-child(2) { animation-delay: 30ms; } html[data-cl="simple"] .pane.on > :nth-child(3) { animation-delay: 60ms; } html[data-cl="simple"] .pane.on > :nth-child(4) { animation-delay: 90ms; } html[data-cl="simple"] .pane.on > :nth-child(5) { animation-delay: 120ms; }
@keyframes cl-pop { from { opacity: 0; scale: .96; translate: 0 10px; } }
.cl-chip { animation: cl-pop var(--cl-dur) var(--cl-spring) both; animation-delay: calc(var(--i, 0) * 30ms); }
html[data-cl="simple"] .fa-card.cl-in { animation: cl-card 300ms var(--cl-spring) both; transform-origin: 50% 100%; }
@keyframes cl-card { from { opacity: 0; scale: .86; translate: 0 18px; } }
html[data-cl="simple"] .fa-card.cl-won { animation: cl-won 600ms var(--cl-out); }
@keyframes cl-won { 0% { box-shadow: 0 0 0 0 rgba(31, 138, 91, .45), var(--shadow); } 100% { box-shadow: 0 0 0 16px rgba(31, 138, 91, 0), var(--shadow); } }
html[data-cl="simple"] .fa-card.cl-won .cl-done { animation: cl-pop var(--cl-dur) var(--cl-bounce) both; }
.fa-chip.cl-pop { animation: cl-pop var(--cl-dur) var(--cl-spring) both; }
.fa-chip.cl-chg { animation: cl-chg 360ms var(--cl-bounce); }
@keyframes cl-chg { 0% { scale: .92; } 100% { scale: 1; } }
.fa-agent.cl-stream .fa-b { animation: cl-stream 900ms var(--cl-out) both; }
@keyframes cl-stream { from { clip-path: inset(0 0 calc(100% - 1.5em) 0 round 15px); -webkit-mask-image: linear-gradient(90deg, #000 0%, transparent 2%); } 30% { -webkit-mask-image: linear-gradient(90deg, #000 100%, transparent 100%); } to { clip-path: inset(0 0 0 0 round 15px); } }
.cl-bump { animation: cl-bump 360ms var(--cl-bounce); }
@keyframes cl-bump { 0% { scale: 1; } 40% { scale: 1.16; } 100% { scale: 1; } }
.cl-flash { animation: cl-flash 600ms var(--cl-out); }
@keyframes cl-flash { 0% { box-shadow: 0 0 0 0 rgba(var(--cl-amb), .65); } 100% { box-shadow: 0 0 0 14px rgba(var(--cl-amb), 0); } }
html[data-cl="simple"] #tc .bk.ghost { transition: left 220ms var(--cl-spring), top 220ms var(--cl-spring); scale: 1.04; box-shadow: 0 14px 28px -12px rgba(10, 29, 51, .55); z-index: 30; }
html[data-cl="simple"] #tc .bk.dragging { opacity: .35; }
.cl-settle { animation: cl-settle 300ms var(--cl-bounce); z-index: 25; }
@keyframes cl-settle { 0% { scale: 1.06 1.18; } 45% { scale: .98 .92; } 100% { scale: 1; } }
.cl-moving { transition: translate 300ms var(--cl-spring) !important; z-index: 25; box-shadow: 0 10px 22px -10px rgba(10, 29, 51, .5); }
html[data-cl="simple"] .toast.cl-toast { animation: cl-toast 300ms var(--cl-spring) both; }
@keyframes cl-toast { from { opacity: 0; scale: .9; translate: 0 14px; } }
html[data-cl="simple"] .toast.cl-good { box-shadow: 0 12px 30px -12px rgba(31, 138, 91, .55), var(--shadow); }

/* ================================================================ CLASSIC: the familiar left menu, calendar first, dense and calm */
html[data-cl="classic"] .cl-nav { width: var(--cl-side); }
html[data-cl="classic"].cl-collapsed .cl-nav { width: var(--cl-side-n); }
html[data-cl="classic"] .cl-sub { display: none; }
.cl-grp { padding: 10px 8px 4px; }
.cl-grp + .cl-grp { border-top: 1px solid rgba(243, 237, 226, .06); }
.cl-gh { padding: 0 8px 5px; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(243, 237, 226, .5); white-space: nowrap; overflow: hidden; }
.cl-grp.quiet .cl-gh { color: rgba(243, 237, 226, .38); }
.cl-li, .cl-collapse { display: flex; align-items: center; gap: 9px; width: 100%; height: 30px; padding: 0 8px; border-radius: 6px; font-size: 13.5px; color: rgba(243, 237, 226, .8); text-align: left; white-space: nowrap; }
.cl-li .ic, .cl-collapse .ic { width: 16px; height: 16px; flex: none; opacity: .85; }
.cl-li-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.cl-li:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.cl-li.on { background: rgba(242, 167, 65, .16); color: #fff; box-shadow: inset 3px 0 0 var(--amber); }
.cl-grp.quiet .cl-li { color: rgba(243, 237, 226, .62); }
.cl-collapse { margin: 6px 8px 0; width: calc(100% - 16px); color: rgba(243, 237, 226, .55); font-size: 12.5px; }
html.cl-collapsed .cl-gh { text-align: center; padding: 0 0 4px; font-size: 0; height: 1px; margin: 4px 6px 6px; background: rgba(243, 237, 226, .1); }
html.cl-collapsed .cl-li, html.cl-collapsed .cl-collapse { justify-content: center; padding: 0; }
html.cl-collapsed .cl-li .cl-li-t, html.cl-collapsed .cl-collapse .cl-li-t, html.cl-collapsed .cl-li .cl-badge { display: none; }
html.cl-collapsed .cl-li { position: relative; }
html.cl-collapsed[data-cl="classic"] .cl-foot { padding: 8px 4px; }
html.cl-collapsed[data-cl="classic"] .cl-style { grid-template-columns: 1fr; }
html.cl-collapsed[data-cl="classic"] .cl-style button { font-size: 10px; height: 24px; }
/* dense */
html[data-cl="classic"] .pane { padding: 14px 18px 32px; }
html[data-cl="classic"] .ph { margin-bottom: 10px; }
html[data-cl="classic"] .ph h1 { font-size: 24px; }
html[data-cl="classic"] .card-h { padding: 10px 12px 0; }
html[data-cl="classic"] .kpi { padding: 10px 12px; }
html[data-cl="classic"] table.t { font-size: 13px; }
html[data-cl="classic"] table.t th, html[data-cl="classic"] table.t td { padding-top: 5px !important; padding-bottom: 5px !important; }
/* calm: no entry animations; nothing bounces */
html[data-cl="classic"] .pane.on { animation: none; }
/* the AI in the background */
html[data-cl="classic"] #pane-fd.on { display: flex; flex-direction: column; }
html[data-cl="classic"] #pane-fd.on > * { order: 5; }
html[data-cl="classic"] #pane-fd.on > .ph { order: 0; }
html[data-cl="classic"] #pane-fd.on > .fd-stack { order: 1; margin-bottom: 14px; }
html[data-cl="classic"] #pane-fd.on > #gaBox { order: 2; }
html[data-cl="classic"] #pane-fd.on > #w1Today { order: 3; }
html[data-cl="classic"] #pane-fd.on > #w3Prices-fd { order: 4; }
html[data-cl="classic"] #pane-fd.on > :is(#gaBox, #w1Today, #w3Prices-fd) { margin-bottom: 14px; }
html[data-cl="classic"] .fa-fab { height: 38px; min-width: 38px; padding: 0 12px 0 10px; gap: 6px; border-radius: 10px; background: var(--surf); color: var(--ink-soft); border: 1px solid var(--rule-strong); box-shadow: var(--shadow); right: 16px; bottom: 16px; }
html[data-cl="classic"] .fa-fab .fa-dot { width: 10px; height: 10px; box-shadow: none; animation: none; background: var(--ink-mute); }
html[data-cl="classic"] .fa-fab .fa-t { font-size: 13px; font-weight: 500; }
html[data-cl="classic"] .fa-fab kbd { display: none; }

/* ================================================================ smaller screens */
@media (max-width: 1020px) { .cl-sub { padding: 10px 16px 8px; } .cl-sub-note { display: none; } .cl-hello { margin: 12px 16px 0; } }
@media (max-width: 760px) {
  html[data-cl="simple"] .cl-body { flex-direction: column-reverse; }
  html[data-cl="simple"] .cl-nav { width: 100%; flex-direction: row; overflow-x: auto; overflow-y: hidden; border-right: 0; border-top: 1px solid rgba(243, 237, 226, .08); padding-bottom: env(safe-area-inset-bottom); }
  html[data-cl="simple"] .cl-items { display: flex; }
  html[data-cl="simple"] .cl-gi { min-width: 72px; width: 72px; min-height: 58px; margin: 4px 2px; }
  html[data-cl="simple"] .cl-gi:first-child { margin-top: 4px; }
  html[data-cl="simple"] .cl-foot { display: flex; align-items: center; border-top: 0; border-left: 1px solid rgba(243, 237, 226, .08); padding: 6px; }
  html[data-cl="simple"] .cl-foot .cl-snd span { display: none; }
  html[data-cl="classic"] .cl-nav { width: var(--cl-side-n) !important; }
  html[data-cl="classic"] .cl-li .cl-li-t, html[data-cl="classic"] .cl-collapse, html[data-cl="classic"] .cl-gh { display: none; }
  html[data-cl="classic"] .cl-li { justify-content: center; padding: 0; }
  html[data-cl="classic"] .cl-style { grid-template-columns: 1fr; } html[data-cl="classic"] .cl-style button { font-size: 10px; }
  .cl-ask-s { margin-left: 0; }
  .cl-ask-f input { font-size: 16px; height: 46px; } .cl-ask-go, .cl-ask-mic { width: 46px; height: 46px; } .cl-ask-orb { display: none; }
}

/* ================================================================ reduced motion: fades only, nothing springs, bounces or bursts */
@media (prefers-reduced-motion: reduce) {
  :root { --cl-spring: ease-out; --cl-bounce: ease-out; --cl-dur: 120ms; }
  html[data-cl="simple"] .m-rel, html[data-cl="simple"] .pane.on > *, .cl-chip, .fa-chip.cl-pop, .fa-chip.cl-chg, .cl-st.is-now, html[data-cl="simple"] .fa-card.cl-in, html[data-cl="simple"] .fa-card.cl-won, html[data-cl="simple"] .fa-card.cl-won .cl-done, html[data-cl="simple"] .toast.cl-toast, .cl-bump, .fa-agent.cl-stream .fa-b { animation: cl-fade 120ms ease both !important; }
  @keyframes cl-fade { from { opacity: 0; } }
  html[data-cl="simple"] .m-down { scale: none !important; }
  html[data-cl="simple"] :hover { translate: none !important; }
  .cl-ask-orb, .cl-st.is-wait i { animation: none; }
  .cl-check circle, .cl-check path { animation: none; stroke-dashoffset: 0; }
  .cl-burst, .cl-ripple { display: none; }
  .cl-settle { animation: cl-settle 300ms var(--cl-bounce); z-index: 25; }
@keyframes cl-settle { 0% { scale: 1.06 1.18; } 45% { scale: .98 .92; } 100% { scale: 1; } }
.cl-moving { transition: none !important; } .cl-settle { animation: none; }
  html[data-cl="simple"] #tc .bk.ghost { transition: none; }
}

/* ================================================================ Ask Flakk safety: the second confirmation (both styles) */
.cl-2nd { display: flex; align-items: flex-start; gap: 8px; margin: 8px 0 0; padding: 8px 10px; border-radius: 9px; background: var(--bad-bg); color: var(--bad-ink); font-size: 13px; line-height: 1.4; }
.cl-2nd .ic { width: 15px; height: 15px; flex: none; margin-top: 2px; }
.fa-card.cl-armed { border-left-color: var(--bad) !important; }
.fa-card .cl-yes2 { background: var(--bad); border-color: var(--bad); color: #fff; font-weight: 700; }
html[data-cl="simple"] .fa-card.cl-armed { animation: cl-shake 320ms var(--cl-out); }
@keyframes cl-shake { 0%, 100% { translate: 0 0; } 25% { translate: -4px 0; } 75% { translate: 4px 0; } }
@media (prefers-reduced-motion: reduce) { html[data-cl="simple"] .fa-card.cl-armed { animation: none; } }