/* "A day in the suit" (29.10.2026): one working day on the phone, with the time each action saves rising as a bubble
   and adding up in a counter, while the agent wakes every hour in the background. Drawn by day.js from window.DAY.
   Built on page.css (its tokens, .phone, .screen, .notch, .s-status, .tap); everything here is prefixed dy-. */
.dy { display: grid; gap: 18px; grid-template-areas: "bar" "cap" "phone" "saved" "ctl" "chips" "log"; }
@media (min-width: 900px) {
  .dy { grid-template-columns: minmax(0, 1fr) 360px; grid-template-areas: "bar bar" "panel phone" "chips chips"; column-gap: 40px; align-items: start; }
}

/* ── the day bar: the clock, the day passing, and the agent in the background ── */
.dy-bar { grid-area: bar; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; padding: 14px 18px; border-radius: var(--radius); background: rgba(255, 255, 255, .04); border: 1px solid var(--dark-line); }
.dy-clock { display: flex; align-items: baseline; gap: 10px; }
.dy-clock b { font: 800 34px/1 var(--sans); color: #fff; font-variant-numeric: tabular-nums; direction: ltr; }
.dy-clock span { font-size: 15px; color: var(--dark-muted); }
.dy-track { position: relative; flex: 1 1 200px; height: 6px; border-radius: 99px; background: linear-gradient(90deg, rgba(200, 122, 84, .25), rgba(255, 214, 140, .35), rgba(200, 122, 84, .25)); }
[dir="rtl"] .dy-track { transform: scaleX(-1); }
.dy-track i { position: absolute; top: 50%; left: 0; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: #FFD27A; box-shadow: 0 0 0 5px rgba(255, 210, 122, .18), 0 0 18px rgba(255, 210, 122, .7); transition: left .3s linear, background .6s, box-shadow .6s; }
.dy.night .dy-track i { background: #cfd8ff; box-shadow: 0 0 0 5px rgba(207, 216, 255, .14), 0 0 16px rgba(207, 216, 255, .6); }
.dy-agent { display: flex; align-items: center; gap: 8px; font-size: 14.5px; color: var(--dark-muted); }
.dy-agent b { color: #fff; font-weight: 800; }
.dy-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--green-soft); box-shadow: 0 0 0 0 rgba(124, 199, 163, .6); }
.dy-dot.ping { animation: dyPing 1.2s ease-out 2; }
@keyframes dyPing { 0% { box-shadow: 0 0 0 0 rgba(124, 199, 163, .7); } 100% { box-shadow: 0 0 0 14px rgba(124, 199, 163, 0); } }

/* ── the panel: what happens now, the time saved, the agent's log, the controls ── */
.dy-panel { grid-area: panel; display: grid; gap: 16px; min-width: 0; }
.dy-cap { min-height: 150px; }
.dy-when { display: inline-flex; align-items: center; gap: 6px; padding: 3px 12px; border-radius: 999px; background: rgba(200, 122, 84, .18); color: var(--clay-soft); font-weight: 800; font-size: 14px; font-variant-numeric: tabular-nums; }
.dy-cap h3 { margin-top: 10px; font-size: clamp(24px, 3vw, 32px); font-weight: 800; line-height: 1.2; color: #fff; }
.dy-cap p { margin-top: 8px; font-size: 18px; line-height: 1.6; color: var(--dark-muted); max-width: 560px; }
.dy-cap.swap h3, .dy-cap.swap p, .dy-cap.swap .dy-when { animation: dyIn .5s ease both; }
@keyframes dyIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.dy-saved { display: grid; grid-template-columns: auto 1fr; align-items: end; gap: 4px 16px; padding: 18px 20px; border-radius: var(--radius); background: var(--dark-card); border: 1px solid var(--dark-line); transition: box-shadow .4s, border-color .4s; }
.dy-saved > span { grid-column: 1 / -1; font-size: 14px; font-weight: 800; letter-spacing: .12em; color: var(--green-soft); }
.dy-saved b { font: 800 52px/1 var(--sans); color: #fff; font-variant-numeric: tabular-nums; direction: ltr; }
.dy-saved small { font-size: 16px; color: var(--dark-muted); padding-bottom: 6px; }
.dy-meter { grid-column: 1 / -1; height: 6px; margin-top: 8px; border-radius: 99px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.dy-meter i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--green), var(--green-soft)); transition: width .9s cubic-bezier(.2, .8, .2, 1); }
.dy-saved.hit { border-color: rgba(124, 199, 163, .6); box-shadow: 0 0 0 4px rgba(124, 199, 163, .12), 0 18px 40px -24px rgba(124, 199, 163, .8); }

.dy-log { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; min-height: 96px; }
.dy-log li { display: flex; gap: 10px; align-items: baseline; font-size: 14.5px; color: var(--dark-muted); animation: dyIn .45s ease both; }
.dy-log li b { color: var(--green-soft); font-variant-numeric: tabular-nums; flex-shrink: 0; }
.dy-log li:nth-child(n+2) { opacity: .6; }
.dy-log li:nth-child(n+3) { opacity: .4; }

.dy-ctl { display: flex; gap: 10px; flex-wrap: wrap; }
.dy-ctl .btn .ic { width: 18px; height: 18px; }

/* ── the hours: jump to any moment of the day ── */
.dy-chips { grid-area: chips; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.dy-chips::-webkit-scrollbar { display: none; }
.dy-chip { flex: 1 0 auto; display: grid; gap: 1px; justify-items: start; min-height: 52px; padding: 7px 14px; border-radius: 14px; border: 1px solid var(--dark-line); background: rgba(255, 255, 255, .03); color: var(--dark-muted); font: 600 14px/1.25 var(--sans); cursor: pointer; text-align: start; }
.dy-chip b { color: #fff; font-size: 15px; font-variant-numeric: tabular-nums; }
.dy-chip:hover { border-color: rgba(200, 122, 84, .6); }
.dy-chip.past b { color: var(--green-soft); }
.dy-chip[aria-current="step"] { background: var(--clay); border-color: var(--clay); color: #fff; }
.dy-chip[aria-current="step"] b { color: #fff; }

/* ── the phone ── */
.dy-phone { grid-area: phone; position: relative; display: grid; place-items: center; }
.dy-phone::before { content: ""; position: absolute; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle, rgba(200, 122, 84, .28), transparent 68%); filter: blur(10px); }
.dy-phone .phone { width: min(330px, 84vw); }
.dy-side { position: absolute; inset-inline-end: -4px; top: 150px; width: 4px; height: 58px; border-radius: 3px; background: #2b2a28; transition: background .2s, box-shadow .2s; }
.dy-side.press { background: var(--clay); box-shadow: 0 0 14px var(--clay); }
.dy-view { position: relative; flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 8px; padding: 16px 13px 14px; font-size: 13px; line-height: 1.4; transition: opacity .35s; }
.dy-view.dim { opacity: .25; }
.dy-view .dy-hd .d { font-size: 11.5px; color: var(--muted); }
.dy-view .dy-hd h4 { margin: 2px 0 0; font-size: 21px; font-weight: 800; line-height: 1.15; }
.dy-view [data-k] { opacity: 0; transform: translateY(10px); transition: opacity .45s, transform .45s cubic-bezier(.2, .8, .2, 1); }
.dy-view [data-k].on { opacity: 1; transform: none; }

/* the morning */
.dy-blk { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 8px 11px; }
.dy-blk h5 { margin: 0 0 4px; font-size: 11px; font-weight: 800; letter-spacing: .06em; color: var(--clay-deep); }
.dy-blk ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.dy-blk li { display: flex; gap: 7px; align-items: baseline; font-size: 12.5px; }
.dy-blk li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--clay); flex-shrink: 0; transform: translateY(-2px); }
.dy-blk.cal li::before, .dy-blk.prj li::before { display: none; }
.dy-blk .tm { font-weight: 800; font-variant-numeric: tabular-nums; min-width: 38px; }
.dy-src { width: 8px; height: 8px; border-radius: 3px; flex-shrink: 0; margin-inline-start: auto; align-self: center; }
.dy-src.g { background: #4285F4; }
.dy-src.o { background: #0F6CBD; box-shadow: 0 0 0 2px #cfe2f6; }
.dy-blk .syn { display: block; margin-top: 3px; font-size: 10.5px; color: var(--muted); }
.dy-blk.prj li { display: block; }
.dy-blk.prj li b { font-weight: 800; }

/* suggestion cards */
.dy-cards { display: grid; gap: 7px; }
.dy-card { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 9px 11px; transition: background .35s, border-color .35s; }
.dy-card .kd { display: flex; gap: 6px; align-items: center; font-size: 10.5px; color: var(--muted); }
.dy-card .kd .k { padding: 1px 8px; border-radius: 999px; font-weight: 800; background: var(--clay-wash); color: var(--clay-deep); }
.dy-card h5 { margin: 5px 0 0; font-size: 13.5px; font-weight: 800; line-height: 1.3; }
.dy-card .x { margin-top: 4px; padding: 4px 8px; font-size: 11.5px; background: var(--paper); border-inline-start: 3px solid var(--clay); border-radius: 6px; color: var(--ink-soft); }
.dy-card .ft { display: flex; justify-content: flex-end; margin-top: 6px; }
.dy-ap { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 14px; border-radius: 9px; background: var(--clay); color: #fff; font-size: 12px; font-weight: 800; transition: transform .15s, background .2s; }
.dy-ap.pressed { transform: scale(.94); background: var(--clay-deep); }
.dy-okline { display: none; align-items: center; gap: 5px; font-size: 12px; font-weight: 800; color: var(--green); }
.dy-okline .ic, .dy-ok .ic { width: 15px; height: 15px; }
.dy-card.done { background: var(--green-wash); border-color: rgba(47, 125, 91, .25); }
.dy-card.done .dy-ap { display: none; }
.dy-card.done .dy-okline { display: inline-flex; }
.dy-sum { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 9px 11px; font-size: 12.5px; }
.dy-sum b { display: block; font-size: 11px; letter-spacing: .06em; color: var(--clay-deep); margin-bottom: 2px; }
.dy-all { align-self: stretch; display: flex; justify-content: center; }
.dy-all .dy-ap { width: 100%; justify-content: center; height: 34px; font-size: 13px; }
.dy-all.done .dy-ap { background: var(--green); }

/* notes: tasks by project and priority */
.dy-notes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dy-note { position: relative; min-height: 92px; padding: 9px 10px; border-radius: 4px 14px 14px 14px; font-size: 12.5px; font-weight: 700; line-height: 1.35; box-shadow: 0 6px 14px -10px rgba(45, 45, 45, .6); }
.dy-note small { display: block; margin-top: 4px; font-size: 10.5px; font-weight: 600; opacity: .75; }
.dy-note.sun { background: #FBE7B5; transform: rotate(-1.2deg); }
.dy-note.sea { background: #D7E8F6; transform: rotate(1deg); }
.dy-note.plum { background: #EBDDF0; transform: rotate(.6deg); }
.dy-note.mint { background: #DDEFE5; transform: rotate(-.8deg); }
.dy-note.big { grid-column: 1 / -1; min-height: 0; }
.dy-note .pr { position: absolute; top: 8px; inset-inline-end: 9px; width: 8px; height: 8px; border-radius: 50%; background: #C0392B; }
.dy-note.done { text-decoration: line-through; opacity: .55; }
.dy-note .dy-ap { margin-top: 8px; }

/* the Claude chat */
.dy-chat { display: flex; flex-direction: column; gap: 7px; }
.dy-msg { max-width: 86%; padding: 7px 11px; border-radius: 14px; font-size: 12.5px; line-height: 1.4; }
.dy-msg.me { align-self: flex-end; background: var(--clay); color: #fff; border-end-end-radius: 4px; }
.dy-msg.ai { align-self: flex-start; background: #fff; border: 1px solid var(--line); border-end-start-radius: 4px; }
.dy-file { align-self: flex-start; display: flex; gap: 8px; align-items: center; padding: 7px 10px; border-radius: 12px; background: #fff; border: 1px solid var(--line); font-size: 12px; }
.dy-file .ic { width: 22px; height: 22px; color: #C0392B; }
.dy-file b { display: block; font-size: 12px; }
.dy-file span { font-size: 11px; color: var(--muted); }
.dy-ok { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 10px; background: var(--green-wash); color: var(--green); font-size: 12px; font-weight: 800; }
.dy-typing { align-self: flex-start; display: inline-flex; gap: 4px; padding: 9px 12px; border-radius: 14px; background: #fff; border: 1px solid var(--line); }
.dy-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: dyDot 1s infinite; }
.dy-typing i:nth-child(2) { animation-delay: .15s; }
.dy-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes dyDot { 0%, 100% { opacity: .3; transform: none; } 50% { opacity: 1; transform: translateY(-3px); } }
.dy-chathd { display: flex; align-items: center; gap: 8px; padding-bottom: 7px; border-bottom: 1px solid var(--line); }
.dy-chathd .av { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--clay); color: #fff; }
.dy-chathd .av .ic { width: 17px; height: 17px; }
.dy-chathd b { display: block; font-size: 14px; }
.dy-chathd span { font-size: 11px; color: var(--muted); }

/* the voice conversation */
.dy-view.voice { background: #1c1b1a; color: #f3efe9; }
.dy-view.voice .dy-hd .d { color: #b3aca3; }
.dy-orb { align-self: center; width: 92px; height: 92px; margin: 10px 0 6px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #f0b48f, var(--clay) 55%, #7a3a1e); box-shadow: 0 0 0 0 rgba(200, 122, 84, .5); animation: dyOrb 1.8s ease-in-out infinite; }
@keyframes dyOrb { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(200, 122, 84, .45); } 50% { transform: scale(1.06); box-shadow: 0 0 0 16px rgba(200, 122, 84, 0); } }
.dy-vl { font-size: 13px; line-height: 1.45; padding: 7px 10px; border-radius: 12px; }
.dy-vl.me { align-self: flex-end; background: rgba(255, 255, 255, .1); }
.dy-vl.ai { align-self: flex-start; background: rgba(200, 122, 84, .22); }
.dy-vl small { display: block; font-size: 10px; font-weight: 800; letter-spacing: .06em; opacity: .7; margin-bottom: 2px; }
.dy-view.voice .dy-ok { background: rgba(124, 199, 163, .16); color: var(--green-soft); }

/* recording */
.dy-rec { display: grid; justify-items: center; gap: 10px; margin-top: 14px; text-align: center; }
.dy-rec .lab { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; color: #C0392B; }
.dy-rec .lab i { width: 9px; height: 9px; border-radius: 50%; background: #C0392B; animation: dyBlink 1s infinite; }
@keyframes dyBlink { 50% { opacity: .2; } }
.dy-rec .tmr { font: 800 40px/1 var(--sans); font-variant-numeric: tabular-nums; direction: ltr; }
.dy-wave { display: flex; align-items: center; gap: 3px; height: 54px; }
.dy-wave i { width: 4px; border-radius: 3px; background: var(--clay); animation: dyBar 1s ease-in-out infinite; }
@keyframes dyBar { 0%, 100% { height: 10px; } 50% { height: 46px; } }
.dy-stop { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: #C0392B; box-shadow: 0 0 0 6px rgba(192, 57, 43, .15); transition: transform .15s; }
.dy-stop i { width: 18px; height: 18px; border-radius: 4px; background: #fff; }
.dy-stop.pressed { transform: scale(.9); }
.dy-up { font-size: 12.5px; color: var(--muted); }

/* WhatsApp */
.dy-view.wa { padding: 0; gap: 0; background: #ECE5DD; }
.dy-wahd { display: flex; align-items: center; gap: 8px; padding: 18px 12px 9px; background: #075E54; color: #fff; }
.dy-wahd .av { width: 30px; height: 30px; border-radius: 50%; background: #cfd8dc; display: grid; place-items: center; color: #546e7a; font-weight: 800; font-size: 13px; }
.dy-wahd b { font-size: 14px; }
.dy-wabody { display: flex; flex-direction: column; gap: 7px; padding: 12px; }
.dy-wab { align-self: flex-start; display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; background: #fff; font-size: 12px; box-shadow: 0 1px 1px rgba(0, 0, 0, .1); }
.dy-wab .ic { width: 18px; height: 18px; color: #075E54; }
.dy-wab .wv { display: flex; align-items: center; gap: 2px; direction: ltr; }
.dy-wab .wv i { width: 3px; border-radius: 2px; background: #9aa5a9; }
.dy-tr { align-self: stretch; padding: 8px 10px; border-radius: 10px; background: #fff8e1; border: 1px dashed #d8b45a; font-size: 12px; }
.dy-tr b { display: block; font-size: 10.5px; letter-spacing: .06em; color: #8a6d1f; }

/* the end of the day */
.dy-view.end { justify-content: center; align-items: center; text-align: center; gap: 12px; background: linear-gradient(180deg, #fbf1e8, #f3e2d3); }
.dy-ring { width: 150px; height: 150px; border-radius: 50%; display: grid; place-items: center; align-content: center; background: #fff; box-shadow: 0 0 0 10px rgba(47, 125, 91, .12), 0 20px 40px -24px rgba(47, 125, 91, .8); }
.dy-ring b { font: 800 44px/1 var(--sans); color: var(--green); direction: ltr; }
.dy-ring span { font-size: 11.5px; font-weight: 700; color: var(--ink-soft); max-width: 110px; }
.dy-view.end p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--ink-soft); max-width: 250px; }
.dy-view.end .nt { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: #1e2235; color: #cfd8ff; font-size: 12px; font-weight: 700; }
.dy-view.end .nt .ic { width: 15px; height: 15px; }

/* the bubble of time saved */
.dy-fx { position: absolute; inset: 0; pointer-events: none; z-index: 6; }
.dy-ching { position: absolute; display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; background: var(--green); color: #fff; font: 800 16px/1 var(--sans); white-space: nowrap; box-shadow: 0 10px 24px -8px rgba(47, 125, 91, .9), 0 0 0 4px rgba(124, 199, 163, .25); animation: dyUp 1.9s cubic-bezier(.2, .8, .2, 1) forwards; }
.dy-ching .ic { width: 17px; height: 17px; }
.dy-ching.soft { background: var(--clay); box-shadow: 0 10px 24px -8px rgba(200, 122, 84, .9); }
@keyframes dyUp {
  0% { opacity: 0; transform: translate(-50%, 6px) scale(.5); }
  14% { opacity: 1; transform: translate(-50%, -4px) scale(1.12); }
  26% { transform: translate(-50%, -10px) scale(1); }
  78% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -84px) scale(.96); }
}

@media (max-width: 899px) {
  .dy-cap { min-height: 0; }
  .dy-saved b { font-size: 42px; }
  .dy-log { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .dy-ching { animation-duration: 1.2s; }
  .dy-orb, .dy-wave i, .dy-typing i, .dy-rec .lab i { animation: none; }
  .dy-wave i { height: 30px; }
}
.dy .s-nav[hidden] { display: none; }
.dy-track { margin-inline: 10px; }
.dy-ctl .btn[hidden] { display: none; }
@media (max-width: 899px) {
  /* on a phone the words sit above the picture, the counter right under it */
  .dy-panel { display: contents; }
  .dy-cap { grid-area: cap; }
  .dy-saved { grid-area: saved; }
  .dy-log { grid-area: log; }
  .dy-ctl { grid-area: ctl; }
  .dy-bar { padding: 10px 14px; gap: 8px 14px; }
  .dy-clock b { font-size: 26px; }
  .dy-cap h3 { margin-top: 6px; font-size: 22px; }
  .dy-cap p { font-size: 16px; margin-top: 4px; }
  .dy-phone .phone { width: min(276px, 78vw); }
  .dy-side { top: 120px; }
  body.dy-on .wa { opacity: 0; visibility: hidden; transition: opacity .25s, visibility 0s .25s; }
}