/* Timefolk personal assistant on the website: the apps' chat box (glass bar, panel above it, 48px title band).
   Colours are the website's Night tokens (night.css --n-*), so light and dark follow the page. */
.tfa{--tfa-font:var(--n-font,Geist,ui-sans-serif,system-ui,sans-serif);--tfa-ink:var(--n-ink,var(--text,#1B1C1A));--tfa-ink-2:var(--n-ink-2,var(--text-2,#5F5A51));
  --tfa-hair:var(--n-hair,color-mix(in srgb,var(--text,#281E13) 14%,transparent));--tfa-glass:var(--n-glass,color-mix(in srgb,var(--panel-2,#fff) 90%,transparent));
  --tfa-sheet-cell:var(--n-sheet-cell,var(--panel-2,#fff));--tfa-accent:var(--n-accent,var(--accent,#896A44));--tfa-on-accent:var(--n-on-accent,#131312);
  --tfa-gold:var(--n-gold,var(--gold,#896A44));--tfa-gold-text:var(--n-gold-text,var(--gold,#74552F));
  --tfa-fill:var(--n-fill,rgba(118,118,128,.24));--tfa-fill-2:var(--n-fill-2,rgba(118,118,128,.32))}
.tfa{--tfa-bottom:16px;--tfa-w:420px;position:fixed;right:16px;bottom:var(--tfa-bottom);width:min(var(--tfa-w),calc(100vw - 32px));z-index:70;
  display:flex;flex-direction:column;gap:10px;font-family:var(--tfa-font);color:var(--tfa-ink)}
.tfa[hidden]{display:none}
@media (max-width:700px){.tfa{left:16px;right:16px;width:auto}}

/* the bar: one glass line, the head on the left, send on the right */
.tfa-bar{display:flex;align-items:center;gap:8px;height:52px;padding:0 6px 0 6px;border-radius:26px;
  background:var(--tfa-glass);-webkit-backdrop-filter:blur(24px) saturate(1.4);backdrop-filter:blur(24px) saturate(1.4);
  border:1px solid var(--tfa-hair)}
.tfa-face{flex:none;width:40px;height:40px;border:0;padding:0;border-radius:50%;background:transparent;cursor:pointer;display:grid;place-items:center}
.tfa-face .tfa-sunny{width:34px;height:34px}
.tfa-in{flex:1;min-width:0;height:40px;border:0;background:transparent;font:inherit;font-size:16px;color:var(--tfa-ink);outline:none}
.tfa-in::placeholder{color:var(--tfa-ink-2)}
.tfa-send{flex:none;width:40px;height:40px;border:0;border-radius:50%;background:var(--tfa-accent);color:var(--tfa-on-accent);
  display:grid;place-items:center;font-size:18px;cursor:pointer;transition:transform .16s cubic-bezier(.2,.8,.2,1)}
.tfa-send:active{transform:scale(.94)}
.tfa-face:focus-visible,.tfa-send:focus-visible,.tfa-chip:focus-visible,.tfa-ib:focus-visible,.tfa-pill:focus-visible{outline:2px solid var(--tfa-accent);outline-offset:2px}

/* the panel above the bar */
.tfa-panel{display:flex;flex-direction:column;max-height:min(560px,calc(100vh - var(--tfa-bottom) - 96px));border-radius:26px;overflow:hidden;
  background:var(--tfa-glass);-webkit-backdrop-filter:blur(30px) saturate(1.5);backdrop-filter:blur(30px) saturate(1.5);
  border:1px solid var(--tfa-hair);transform-origin:bottom right;animation:tfa-in .22s cubic-bezier(.2,.8,.2,1)}
.tfa-panel[hidden]{display:none}
@keyframes tfa-in{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
@media (max-width:700px){.tfa-panel{max-height:calc(100vh - var(--tfa-bottom) - 84px)}}

/* the 48px title band: the task on the left, Sunny's sunny scene on the right, then Clear */
.tfa-band{position:relative;flex:none;height:48px;display:flex;align-items:center;gap:6px;padding:0 4px 0 16px;overflow:hidden;
  background:linear-gradient(90deg,transparent 30%,rgba(217,163,69,.38) 64%,rgba(214,110,58,.75) 100%)}
.tfa-band-t{position:relative;z-index:1;flex:1;min-width:0;font-weight:600;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tfa-scene{position:relative;flex:none;width:70px;height:48px}
.tfa-rays{position:absolute;inset:-30px -10px -30px 0;background:repeating-conic-gradient(from 0deg at 46% 50%,rgba(255,236,190,.55) 0 4deg,transparent 4deg 16deg);
  -webkit-mask:radial-gradient(circle at 46% 50%,#000 0 18px,transparent 62px);mask:radial-gradient(circle at 46% 50%,#000 0 18px,transparent 62px);animation:tfa-spin 24s linear infinite}
@keyframes tfa-spin{to{transform:rotate(360deg)}}
.tfa-head{position:absolute;left:12px;top:9px;width:30px;height:30px}
.tfa-head .tfa-sunny{width:30px;height:30px}
.tfa-prop{position:absolute;left:46px;top:15px;color:#F6CF7A;font-size:16px;filter:drop-shadow(0 0 1.2px rgba(0,0,0,.4))}
.tfa-ib{flex:none;position:relative;z-index:1;width:34px;height:34px;border:0;border-radius:50%;background:transparent;color:var(--tfa-ink);
  display:grid;place-items:center;font-size:17px;cursor:pointer}
.tfa-ib:hover{background:var(--tfa-fill)}

/* messages */
.tfa-list{flex:1;min-height:0;overflow-y:auto;padding:14px 16px 8px;display:flex;flex-direction:column;gap:12px;overscroll-behavior:contain}
.tfa-bot{display:flex;gap:9px;align-items:flex-start}
.tfa-av{flex:none;width:22px;height:22px;margin-top:1px}
.tfa-av .tfa-sunny{width:22px;height:22px}
.tfa-bt{min-width:0}
.tfa-bt p{margin:0;font-size:15px;line-height:1.45;cursor:pointer;border-radius:8px;overflow-wrap:anywhere}
.tfa-bt p:focus-visible{outline:2px solid var(--tfa-accent);outline-offset:3px}
.tfa-menu{display:flex;gap:6px;margin-top:6px;flex-wrap:wrap}
.tfa-menu button,.tfa-done{font:inherit;font-size:13px;padding:5px 11px;border-radius:999px;border:0;background:var(--tfa-fill);color:var(--tfa-ink);cursor:pointer}
.tfa-done{color:var(--tfa-ink-2);cursor:default}
.tfa-me{display:flex;justify-content:flex-end}
.tfa-me p{margin:0;max-width:82%;padding:9px 13px;border-radius:18px 18px 6px 18px;background:var(--tfa-fill-2);font-size:15px;line-height:1.45;
  overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden}
.tfa-dots{display:flex;gap:4px;padding:8px 2px}
.tfa-dots i{width:6px;height:6px;border-radius:50%;background:var(--tfa-ink-2);animation:tfa-dot 1s ease-in-out infinite}
.tfa-dots i:nth-child(2){animation-delay:.15s}.tfa-dots i:nth-child(3){animation-delay:.3s}
@keyframes tfa-dot{0%,100%{opacity:.3}50%{opacity:1}}

/* cards: Before we chat, and the suggested skills */
.tfa-card{border-radius:16px;background:var(--tfa-sheet-cell)}
.tfa-si{padding:11px;font-size:13px;line-height:1.4;display:flex;flex-direction:column;gap:7px}
.tfa-si p{margin:0}
.tfa-si-h{font-weight:600}
.tfa-spark{color:var(--tfa-gold);margin-right:6px;font-size:11px}
.tfa-si ul{margin:0;padding-left:16px;color:var(--tfa-ink-2);display:flex;flex-direction:column;gap:5px}
.tfa-small{font-size:12px;color:var(--tfa-ink-2)}
.tfa-row{display:flex;gap:8px;margin-top:2px}
.tfa-pill{flex:1;min-height:32px;border:0;border-radius:999px;font:inherit;font-size:13px;font-weight:600;cursor:pointer;background:var(--tfa-fill);color:var(--tfa-ink)}
.tfa-gold{background:var(--tfa-accent);color:var(--tfa-on-accent)}
.tfa-own{padding:4px 0}
.tfa-skill{display:flex;align-items:center;gap:12px;padding:10px 6px 10px 12px}
.tfa-skill+.tfa-skill{border-top:1px solid var(--tfa-hair);margin-left:70px;padding-left:0}
.tfa-skill+.tfa-skill img{margin-left:-58px}
.tfa-skill img{flex:none;width:46px;height:46px;object-fit:contain;filter:drop-shadow(0 5px 8px rgba(0,0,0,.28))}
.tfa-skill-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.tfa-skill-t b{font-size:16px;font-weight:600;line-height:1.25}
.tfa-skill-t small{font-size:13px;color:var(--tfa-gold-text)}
.tfa-drop{width:44px;height:44px;color:var(--tfa-ink-2)}

/* buttons under each answer: one row that scrolls sideways, like the apps */
.tfa-chips{flex:none;display:flex;gap:8px;padding:6px 16px 14px;overflow-x:auto;scrollbar-width:none}
.tfa-chips::-webkit-scrollbar{display:none}
.tfa-chips[hidden]{display:none}
.tfa-chip{flex:none;font:inherit;font-size:14px;padding:7px 13px;border-radius:999px;border:0;cursor:pointer;
  background:var(--tfa-fill);color:var(--tfa-ink);white-space:nowrap}
.tfa-chip:hover{background:var(--tfa-fill-2)}

/* where "log me out" lands: a gold ring for a few seconds */
.tfa-here{outline:2px solid var(--tfa-accent)!important;outline-offset:3px;border-radius:10px;transition:outline-color .3s}

@media (prefers-reduced-motion:reduce){.tfa-panel,.tfa-rays,.tfa-dots i{animation:none}.tfa-send{transition:none}}
@media (max-width:700px){.tfa-band-t{font-size:15px}.tfa-x{display:none}.tfa-scene{width:64px}.tfa-prop{left:44px}}

/* minimised: only the round Sunny button, bottom-right (owner 5 Nov 2026) */
.tfa.min{width:auto;left:auto}
.tfa.min .tfa-bar{width:58px;height:58px;padding:0;border-radius:50%;justify-content:center}
.tfa.min .tfa-in,.tfa.min .tfa-send{display:none}
.tfa.min .tfa-face{width:58px;height:58px}
.tfa.min .tfa-face .tfa-sunny{width:42px;height:42px}

/* Sunny moves like the apps' head (ChatFirst BotHead): rays turn slowly, quicker while it thinks; it sways, its glasses look
   around, and every 7 s it does a little hop and grin (owner 5 Nov 2026 "movements isn't there on bot head on the web"). */
.tfa-sunny g{transform-box:view-box}
.tfs-rays{transform-origin:32px 32px;animation:tfs-spin 72s linear infinite}
.tfa.busy .tfs-rays,.tfa-think .tfs-rays{animation-duration:6s}
.tfs-sway{transform-origin:32px 38px;animation:tfs-sway 7s ease-in-out infinite}
.tfs-look{animation:tfs-look 9s ease-in-out infinite}
.tfs-hop{transform-origin:32px 54px;animation:tfs-hop 7s ease-in-out infinite}
.tfs-mouth{transform-origin:32px 42px;animation:tfs-grin 7s ease-in-out infinite}
.tfa-face .tfs-hop{animation-delay:-2s}.tfa-face .tfs-mouth{animation-delay:-2s}
@keyframes tfs-spin{to{transform:rotate(360deg)}}
@keyframes tfs-sway{0%,100%{transform:rotate(-1.5deg)}50%{transform:rotate(1.5deg)}}
@keyframes tfs-look{0%,100%{transform:translate(0,0)}22%{transform:translate(1.6px,-.4px)}48%{transform:translate(-1.8px,.3px)}70%{transform:translate(.6px,.5px)}}
@keyframes tfs-hop{0%,16%,100%{transform:none}4%{transform:translateY(-3px) rotate(-5deg)}8%{transform:translateY(0) rotate(4deg)}12%{transform:translateY(-1.5px) rotate(-2deg)}}
@keyframes tfs-grin{0%,16%,100%{transform:none}4%,12%{transform:scale(1.25,1.4)}}
@media (prefers-reduced-motion:reduce){.tfa-sunny g{animation:none!important}}

/* public pages: the website's own tokens for the assistant, light and dark (the signed-in site reads them from night.css) */
.tfa{--n-font:Geist,ui-sans-serif,system-ui,sans-serif;--n-ink:#1B1C1A;--n-ink-2:#5F5A51;--n-hair:rgba(40,30,19,.1);--n-glass:rgba(255,255,255,.78);--n-sheet-cell:#FFFFFF;--n-fill:rgba(118,118,128,.12);--n-fill-2:rgba(118,118,128,.2);--n-accent:#896A44;--n-gold:#896A44;--n-gold-text:#74552F;--n-on-accent:#FFFFFF}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .tfa{--n-ink:#F1EBE0;--n-ink-2:#ADA69A;--n-hair:rgba(241,235,224,.16);--n-glass:rgba(17,18,17,.55);--n-sheet-cell:rgba(24,25,23,.7);--n-fill:rgba(241,235,224,.08);--n-fill-2:rgba(241,235,224,.14);--n-accent:#D9BD92;--n-gold:#D9BD92;--n-gold-text:#D9BD92;--n-on-accent:#131312}}
[data-theme="dark"] .tfa{--n-ink:#F1EBE0;--n-ink-2:#ADA69A;--n-hair:rgba(241,235,224,.16);--n-glass:rgba(17,18,17,.55);--n-sheet-cell:rgba(24,25,23,.7);--n-fill:rgba(241,235,224,.08);--n-fill-2:rgba(241,235,224,.14);--n-accent:#D9BD92;--n-gold:#D9BD92;--n-gold-text:#D9BD92;--n-on-accent:#131312}
#guide{display:none!important}