Files
hq/03-DESIGN/01-to-be/63-mockup/mail-page.html
T
jochen 030e985694
mesh/merge-gate head 030e9856940d merged into trunk 58555ec33074 — pass: the change touches no module of the mesh's graph
mesh/repo-check head 030e9856940d merged into trunk 58555ec33074 — pass: its merge-check.sh passed
mesh/delivery delivered
Answer the review's second round: the mockup's sheet holds invented sales figures; milestone 5's row lists only teaching and the counts
2026-10-22 19:21:38 +02:00

193 lines
92 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Owly and Your list, v2</title><style>
:root{--bg:#f5f5f2;--panel:#fff;--ink:#1c1c1a;--muted:#6b6b66;--line:#e2e1dc;--accent:#2f5bd3;--due:#b0124e;--chip:#ecebe6;--hi:#fff7dc;--scam:#b3261e;--scam-bg:#fde8e6;
--gmail:#e07a10;--gmail-bg:#fdf0e1;--mesh:#2f6fd6;--mesh-bg:#e7eefc;--work:#178a6d;--work-bg:#e2f4ee}
@media (prefers-color-scheme:dark){:root{--bg:#131313;--panel:#1c1c1c;--ink:#ebebe8;--muted:#9b9b95;--line:#2d2d2b;--accent:#86a8ff;--due:#ff7aa6;--chip:#292927;--hi:#2b2616;--scam:#ff8a80;--scam-bg:#3a1c1a;
--gmail:#ffad5c;--gmail-bg:#3a2a16;--mesh:#7fa8ff;--mesh-bg:#1b2640;--work:#5fd3b0;--work-bg:#15302a}}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.45 system-ui,-apple-system,"Segoe UI",sans-serif}
a{color:var(--accent);text-decoration:none}.muted{color:var(--muted)}small{font-size:12px}
.hide{position:absolute;opacity:0;pointer-events:none}.dz:checked + *{display:none!important}
.banner{margin:0;padding:5px 16px;font-size:12px;background:var(--hi);color:var(--muted);border-bottom:1px solid var(--line)}
.topbar{display:flex;align-items:center;gap:12px;padding:8px 16px;background:var(--panel);border-bottom:1px solid var(--line)}
.topbar .logo{font-weight:700;font-size:17px}.topbar input{flex:1;max-width:460px;padding:7px 10px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink);font:inherit}
.health{margin-left:auto;font-size:12px;color:var(--muted);display:flex;gap:6px;align-items:center}.health i{width:8px;height:8px;border-radius:50%;background:#2e9d5b;display:inline-block}
.toggles{display:flex;gap:8px;align-items:center;padding:8px 16px;background:var(--panel);border-bottom:1px solid var(--line);overflow-x:auto}
.toggles label{cursor:pointer;display:inline-flex;align-items:center;gap:7px;padding:4px 12px;border-radius:99px;border:2px solid var(--line);font-size:14px;opacity:.45;white-space:nowrap}
.toggles label small{color:var(--muted)}.toggles .n{font-size:12px;background:var(--chip);border-radius:99px;padding:0 7px}
#t-gmail:checked ~ .toggles label[for=t-gmail]{opacity:1;border-color:var(--gmail);background:var(--gmail-bg)}
#t-mesh:checked ~ .toggles label[for=t-mesh]{opacity:1;border-color:var(--mesh);background:var(--mesh-bg)}
#t-work:checked ~ .toggles label[for=t-work]{opacity:1;border-color:var(--work);background:var(--work-bg)}
#t-gmail:not(:checked) ~ * .a-gmail,#t-mesh:not(:checked) ~ * .a-mesh,#t-work:not(:checked) ~ * .a-work{display:none!important}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;flex:none}.i-gmail{background:var(--gmail)}.i-mesh{background:var(--mesh)}.i-work{background:var(--work)}
.e-gmail{box-shadow:inset 4px 0 0 var(--gmail)}.e-mesh{box-shadow:inset 4px 0 0 var(--mesh)}.e-work{box-shadow:inset 4px 0 0 var(--work)}
.due{color:var(--due);font-weight:600;font-size:12px;white-space:nowrap}.star{color:var(--due)}
.cnt{font-size:11px;background:var(--chip);color:var(--muted);border-radius:99px;padding:0 6px;margin-left:4px}.clip{font-size:12px;color:var(--muted);margin-left:4px;white-space:nowrap}
.chip{display:inline-block;padding:1px 8px;border-radius:99px;background:var(--chip);font-size:12px;color:var(--muted);white-space:nowrap}
.unread .subj,.unread .sender{font-weight:700}.udot{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--accent);border:1px solid var(--accent);border-radius:4px;padding:0 4px;margin-right:2px;line-height:1.4;vertical-align:middle}.udot::after{content:'new'}
.x{cursor:pointer;color:var(--muted);font-size:13px;padding:2px 6px;border-radius:5px;line-height:1}.x:hover{background:var(--chip);color:var(--ink)}
.btn{display:inline-block;padding:5px 11px;border:1px solid var(--line);border-radius:7px;font-size:13px;color:var(--ink);background:var(--panel);cursor:pointer;white-space:nowrap}
.btn.p{background:var(--accent);border-color:var(--accent);color:#fff}
/* reading pane */
body:has(.pane:target) .main{margin-right:500px}
.pane{display:none;position:fixed;top:0;right:0;bottom:0;width:500px;background:var(--panel);border-left:1px solid var(--line);padding:14px 22px 40px;overflow:auto;box-shadow:-8px 0 24px rgba(0,0,0,.08);z-index:5}
.pane:target{display:block}.pane .bar{display:flex;gap:6px;align-items:center;margin-bottom:12px}.pane .badge{margin-left:auto;color:#fff;font-size:12px;padding:2px 10px;border-radius:99px}
.pane h1{font-size:20px;margin:4px 0 6px;line-height:1.25}.meta{font-size:13px;color:var(--muted)}.meta b{color:var(--ink)}
.note{padding:9px 12px;border-radius:8px;margin:12px 0;font-size:13px}.note.scam{background:var(--scam-bg);color:var(--scam)}
.body{font-size:15px}.body p{margin:0 0 10px}
details.fix{margin-top:14px}details.fix summary{cursor:pointer;color:var(--muted);font-size:13px}details.fix form{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
details.fix select,details.fix input,details.fix button{font:inherit;font-size:13px;padding:4px 7px;border:1px solid var(--line);border-radius:6px;background:var(--panel);color:var(--ink)}
/* attachments */
.atts{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}.atts .lbl{width:100%;font-size:12px;color:var(--muted)}
.att{display:flex;gap:8px;align-items:center;padding:6px 10px 6px 6px;border:1px solid var(--line);border-radius:10px;color:var(--ink);background:var(--bg);max-width:100%}
.att b{display:block;font-size:13px;font-weight:600;max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.att small{color:var(--muted)}
.th{position:relative;display:inline-flex;align-items:center;justify-content:center;overflow:hidden;border-radius:6px;background:var(--panel);border:1px solid var(--line);flex:none}
.th-s{width:44px;height:44px}.th-m{width:120px;height:90px}.th em{position:absolute;bottom:2px;right:3px;font-style:normal;font-size:9px;font-weight:700;color:#fff;background:rgba(0,0,0,.45);padding:0 3px;border-radius:3px}
.th svg{display:block;width:100%;height:100%}
.pg{width:70%;height:84%;background:#fff;border:1px solid #ddd;padding:12% 10%;display:flex;flex-direction:column;gap:9%}.pg i{display:block;height:2px;background:#bbb}.pg i.w{width:60%}
.cal{display:flex;flex-direction:column;align-items:center;line-height:1;font-family:inherit}.cal b{font-size:8px;color:#fff;background:#d9443a;width:100%;text-align:center;padding:2px 0}.cal span{font-size:16px;font-weight:700;padding:2px 0}.th-s .cal{transform:translateY(-4px)}.th-s .cal span{font-size:13px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;width:80%;height:70%;background:#1d7a45}.grid i{background:#e9f5ee}
.zipi{font-size:22px;color:var(--muted)}
.lb{display:none;position:fixed;inset:0;z-index:20;background:#121212;color:#eee;flex-direction:column}
.lb:target{display:flex}.lb-bar{display:flex;gap:12px;align-items:center;padding:10px 16px}.lb-bar .btn{background:#2a2a2a;color:#eee;border-color:#444}.lb-bar .muted{color:#aaa}
.lb-body{flex:1;display:flex;align-items:center;justify-content:center;padding:10px 16px;overflow:auto}
.lb-strip{display:flex;gap:8px;justify-content:center;padding:10px}.lb-strip a{opacity:.6}.lb-strip a.on{opacity:1;outline:2px solid #fff;border-radius:7px}
.v-img{width:min(900px,100%);aspect-ratio:3/2;border-radius:6px;overflow:hidden}
.v-pdf{text-align:center}.paper{background:#fff;color:#222;width:min(520px,92vw);aspect-ratio:1/1.414;padding:7% 8%;text-align:left;box-shadow:0 6px 30px rgba(0,0,0,.5)}
.paper h3{margin:0 0 4px;font-size:20px}.paper .from{color:#777;font-size:13px;margin-bottom:20px}.paper p{border-bottom:1px solid #eee;padding:6px 0;margin:0;font-size:14px}
.paper .lines{margin-top:30px;display:flex;flex-direction:column;gap:12px}.paper .lines i{display:block;height:3px;background:#e4e4e4}.paper .lines i.w{width:55%}
.v-ics{display:flex;gap:20px;align-items:flex-start;background:#fff;color:#222;padding:24px;border-radius:10px;max-width:560px}.v-ics h3{margin:0 0 6px}.v-ics .muted{color:#777}
.cal.big{border:1px solid #ddd;border-radius:8px;overflow:hidden;width:84px}.cal.big b{font-size:12px;padding:4px 0}.cal.big span{font-size:34px;padding:6px 0 0}.cal.big small{padding-bottom:6px;color:#777}
.v-sheet,.v-zip{background:#fff;color:#222;padding:18px;border-radius:10px;max-width:100%;overflow:auto}
.v-sheet table,.v-zip table{border-collapse:collapse;font-size:14px}.v-sheet th,.v-sheet td{border:1px solid #d7d7d7;padding:6px 14px;text-align:right}.v-sheet th{background:#e9f5ee}.v-sheet td:first-child,.v-sheet th:first-child{text-align:left}
.v-zip td{padding:6px 18px 6px 0;border-bottom:1px solid #eee}.v-sheet .muted,.v-zip .muted{color:#777;font-size:12px}
@media (max-width:760px){body:has(.pane:target) .main{margin-right:0}.pane{width:auto;left:0;border-left:0;padding:10px 14px 40px}
.topbar{flex-wrap:wrap;gap:8px;padding:8px 12px}.topbar input{order:3;max-width:none;flex-basis:100%}.toggles{padding:6px 12px}.toggles label small{display:none}
.banner{font-size:11px;padding:4px 12px}.att b{max-width:150px}}
.mc{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:10px;align-items:center;padding:8px 10px;border-radius:12px;background:var(--panel);border:1px solid var(--line);color:var(--ink);margin:6px 0}
.mc .av{width:34px;height:34px;border-radius:50%;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700}
.mt{display:flex;flex-direction:column;min-width:0}.mt b{font-size:13px}.mt span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:14px}.mw{font-size:12px;color:var(--muted)}.toggles{display:flex;gap:8px;overflow-x:auto;padding:4px 0 10px}.toggles label{flex:none;cursor:pointer;display:inline-flex;gap:6px;align-items:center;padding:4px 12px;border-radius:99px;border:2px solid var(--line);font-size:13px;opacity:.45}
#t-gmail:checked ~ * .toggles label[for=t-gmail],#t-gmail:checked ~ .toggles label[for=t-gmail]{opacity:1;border-color:var(--gmail);background:var(--gmail-bg)}
#t-mesh:checked ~ * .toggles label[for=t-mesh],#t-mesh:checked ~ .toggles label[for=t-mesh]{opacity:1;border-color:var(--mesh);background:var(--mesh-bg)}
#t-work:checked ~ * .toggles label[for=t-work],#t-work:checked ~ .toggles label[for=t-work]{opacity:1;border-color:var(--work);background:var(--work-bg)}.owlsvg{width:100%;height:100%}.ropts{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0}.ropts button{border:1px solid var(--work);background:var(--panel);color:var(--ink);border-radius:99px;padding:6px 12px;font:inherit;font-size:13px;cursor:pointer}
.ropts button.on{background:var(--work);color:#fff}.draft{margin:8px 0;padding:12px 14px;border-left:3px solid var(--work);background:var(--work-bg);border-radius:8px;font-size:14px}
.dh{font-size:12px;color:var(--muted);margin-bottom:6px}.dt{outline:none;line-height:1.5}.acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}.sentnote{font-size:13px;color:var(--muted);margin-top:8px}.wrap{padding:14px 18px 40px;min-width:0}h1{font-size:30px;margin:0}.lede{color:var(--muted);margin:2px 0 8px}
h2{font-size:12px;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);margin:24px 0 4px;display:flex;justify-content:space-between}
ul{list-style:none;margin:0;padding:0}.tk{display:flex;gap:12px;padding:14px 2px;border-bottom:1px solid var(--line)}.tk input{display:none}
.box{flex:none;width:26px;height:26px;border-radius:8px;border:2.5px solid var(--line);cursor:pointer;margin-top:1px}.a-gmail .box{border-color:var(--gmail)}.a-mesh .box{border-color:var(--mesh)}.a-work .box{border-color:var(--work)}
.tk input:checked + .box{background:var(--ink);border-color:var(--ink)}.tk input:checked + .box::after{content:"✓";color:var(--bg);display:block;text-align:center;font-weight:800;line-height:21px}
.tk:has(input:checked) .tt{text-decoration:line-through;color:var(--muted)}.tb{min-width:0;flex:1}.tt{font-size:17px;cursor:pointer;display:block;line-height:1.3}
.tm{font-size:13px;color:var(--muted);margin:3px 0;display:flex;gap:10px;flex-wrap:wrap}.wh{color:var(--due);font-weight:600}.link{border:0;background:none;color:var(--accent);font:inherit;cursor:pointer;padding:0}.small{font-size:12px}
.src{display:flex;gap:6px;align-items:center;font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.hint{font-size:13px;color:var(--muted);font-style:italic}.rd summary{cursor:pointer;font-size:13px;color:var(--work);font-weight:600;margin:2px 0}
.prog{height:6px;background:var(--chip);border-radius:99px;overflow:hidden;margin-top:6px}.prog i{display:block;height:100%;width:0;background:var(--accent);transition:width .3s}
.pr{display:flex;gap:12px;align-items:flex-start;padding:10px 2px;border-bottom:1px solid var(--line)}.pk{flex:none;font-size:11px;font-weight:700;border-radius:99px;padding:2px 8px;margin-top:2px}
.pk.me{background:#4b3a7a;color:#fff}.pk.them{background:var(--chip);color:var(--muted)}
.fyi{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 16px;line-height:1.6;font-size:15px}.warn{background:var(--scam-bg);color:var(--scam);border-radius:12px;padding:12px 16px;font-size:15px}
.snz{opacity:.5}.askbar{position:fixed;left:0;right:0;bottom:0;padding:18px 14px 14px;background:linear-gradient(transparent,var(--bg) 35%)}
.askbar form{max-width:720px;margin:0 auto;display:flex;gap:8px;align-items:center}.askbar .mini-owl{width:38px;height:38px;flex:none}
.askbar input{flex:1;min-width:0;padding:11px 16px;border-radius:99px;border:1px solid var(--line);background:var(--panel);color:var(--ink);font:inherit}
.askbar button{border:0;border-radius:99px;background:#4b3a7a;color:#fff;padding:11px 16px;font:inherit;cursor:pointer}.answer{max-width:720px;margin:0 auto 8px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:10px 14px;font-size:14px;display:none}body{background:radial-gradient(1000px 520px at 50% -180px,#e9e4ff,var(--bg))}@media (prefers-color-scheme:dark){body{background:radial-gradient(1000px 520px at 50% -180px,#2a2350,var(--bg))}}
.hd{display:flex;align-items:center;gap:12px}.hd .owl{width:52px;height:52px}.hd b{font-size:19px}.hd .muted{font-size:13px}
.owl{width:40px;height:40px;flex:none;filter:drop-shadow(0 2px 4px rgba(0,0,0,.18))}
.msg{display:flex;gap:10px;margin:14px 0;align-items:flex-start}.msg.me{justify-content:flex-end}
.bub{background:var(--panel);border:1px solid var(--line);border-radius:4px 18px 18px 18px;padding:12px 16px;line-height:1.5;min-width:0;max-width:100%}.me .bub{background:#4b3a7a;color:#fff;border:0;border-radius:18px 4px 18px 18px}
.link{border:0;background:none;color:var(--accent);font:inherit;cursor:pointer;padding:0;text-decoration:underline}
.queue{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:6px 0;margin:8px 0}.qa{display:flex;gap:10px;align-items:center;padding:8px 14px;border-top:1px solid var(--line)}.qa:first-child{border-top:0}
.qa div{flex:1;min-width:0}.qa small{display:block;color:var(--muted)}.qa .btn{padding:4px 10px}.qa.ok{opacity:.55}.qa.ok .btn{display:none}.qa.ok::after{content:"✓ done";color:#2e9d5b;font-size:13px}
.dock{position:fixed;left:0;right:0;bottom:0;padding:22px 14px 14px;background:linear-gradient(transparent,var(--bg) 28%)}.dock .in{max-width:780px;margin:0 auto}
.chips{display:flex;gap:8px;overflow-x:auto;padding-bottom:8px}.chips button{flex:none;border:1px solid var(--line);background:var(--panel);color:var(--ink);border-radius:99px;padding:6px 12px;font:inherit;font-size:13px;cursor:pointer}
.ask{display:flex;gap:8px}.ask input{flex:1;min-width:0;padding:12px 16px;border-radius:99px;border:1px solid var(--line);background:var(--panel);color:var(--ink);font:inherit}
.ask button{border:0;border-radius:99px;background:#4b3a7a;color:#fff;padding:0 18px;font:inherit;cursor:pointer}.typing{opacity:.6;font-style:italic}
.badge2{background:#e0472f;color:#fff;border-radius:99px;font-size:11px;padding:0 6px;margin-left:4px}
.together{display:grid;grid-template-columns:minmax(0,1fr) 440px;max-width:1240px;margin:0 auto;min-height:calc(100vh - 30px)}
.side{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;border-left:1px solid var(--line);background:color-mix(in srgb,var(--panel) 70%,var(--bg))}
.side .hd{padding:12px 16px 0}.side #chat{flex:1;overflow:auto;padding:0 14px}.side .dock{position:static;background:none;padding:8px 14px 14px}
.greet{display:flex;gap:12px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:12px 14px;margin:6px 0 4px}.greet .owl{width:46px;height:46px}
.fab,#sheet{display:none}
@media (max-width:900px){.together{grid-template-columns:1fr}.side{position:fixed;left:0;right:0;bottom:0;top:auto;height:82vh;border:0;border-radius:22px 22px 0 0;box-shadow:0 -10px 40px rgba(0,0,0,.25);
transform:translateY(105%);transition:transform .25s;z-index:8;background:var(--bg)}#sheet:checked ~ .main .side{transform:none}
.fab{display:flex;position:fixed;right:16px;bottom:18px;width:64px;height:64px;border-radius:50%;background:#4b3a7a;box-shadow:0 6px 18px rgba(0,0,0,.3);z-index:9;cursor:pointer;padding:6px}
#sheet:checked ~ .fab{background:var(--ink)}.wrap{padding:12px 14px 100px}}
.modes{display:flex;gap:8px;padding:2px 0 10px;flex-wrap:wrap}
.modes input{position:absolute;opacity:0;pointer-events:none}
.modes label{cursor:pointer;padding:6px 14px;border-radius:99px;border:2px solid var(--line);font-size:13px;color:var(--muted)}
.modes input:checked + label{border-color:var(--accent);background:var(--mesh-bg);color:var(--ink);font-weight:600}
.trustline{font-size:13px;margin:4px 2px 10px}
.empty-today{background:var(--panel);border:1px dashed var(--line);border-radius:12px;padding:16px;color:var(--muted);font-size:15px;margin:4px 0}
.tk.hl{outline:2px solid var(--accent);outline-offset:2px;border-radius:10px}
li.wo{display:flex;gap:10px;align-items:flex-start;padding:10px 2px;border-bottom:1px solid var(--line)}
li.wo .wob{flex:1;min-width:0}li.wo .btn{flex:none}
.learned-btn{margin-left:auto;white-space:nowrap}
.side .hd{display:flex;align-items:flex-start;flex-wrap:wrap;gap:4px}
.lessons-panel{list-style:none;margin:4px 14px 8px;padding:8px 12px;background:var(--chip);border-radius:10px;font-size:13px}
.lessons-panel li{padding:2px 0}
.learned{background:var(--work-bg);border-left:3px solid var(--work);border-radius:8px;padding:10px 12px;font-size:14px}
.learned button{margin-left:8px}
.qd2{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px 14px;margin:8px 0}
.qd2 summary{cursor:pointer;font-weight:600;font-size:14px}
.qi2{display:flex;gap:8px;align-items:center;padding:6px 0;border-top:1px solid var(--line);font-size:13px}
.qi2:first-of-type{border-top:0}
.qi2 a{color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kbd-hint{display:none;cursor:pointer}
@media (min-width:901px){.kbd-hint{display:inline-flex;align-items:center;gap:4px;font-size:12px;color:var(--muted);margin-left:auto}}
.shortcuts-overlay{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:50;display:flex;align-items:center;justify-content:center}
.shortcuts-box{background:var(--panel);border-radius:14px;padding:20px 24px;max-width:320px;box-shadow:0 10px 40px rgba(0,0,0,.3)}
.shortcuts-box ul{list-style:none;padding:0;margin:10px 0 14px;font-size:14px;line-height:1.8}
.shortcuts-box li b{display:inline-block;min-width:26px;background:var(--chip);border-radius:5px;padding:0 5px;text-align:center;margin-right:6px;font-family:monospace}
@media (max-width:760px){.shortcuts-box{margin:0 16px}.topbar .btn{padding:5px 9px;font-size:12px}}
</style></head><body><p class="banner">Final round v2 — Owly and Your list, v2 · mock data, mock script · <a href="#">all designs</a></p><input type="checkbox" class="hide" id="t-gmail" checked><input type="checkbox" class="hide" id="t-mesh" checked><input type="checkbox" class="hide" id="t-work" checked><input type="checkbox" id="sheet" class="hide"><label for="sheet" class="fab" title="Owly"><svg viewBox="0 0 64 64" class="owlsvg" aria-hidden="true"><circle cx="32" cy="34" r="26" fill="#4b3a7a"/><path d="M10 18 L22 26 L18 12Z M54 18 L42 26 L46 12Z" fill="#4b3a7a"/><circle cx="23" cy="31" r="10" fill="#fff"/><circle cx="41" cy="31" r="10" fill="#fff"/><circle cx="24" cy="32" r="4.5" fill="#1d1640"/><circle cx="40" cy="32" r="4.5" fill="#1d1640"/><circle cx="25.5" cy="30.5" r="1.4" fill="#fff"/><circle cx="41.5" cy="30.5" r="1.4" fill="#fff"/><path d="M29 40 L32 45 L35 40Z" fill="#f2b84b"/><path d="M16 48 Q32 58 48 48" stroke="#8f7cc8" stroke-width="3" fill="none"/></svg></label><div class="topbar"><span class="logo">Mail</span><a class="btn" href="#">All mail</a><input id="topsearch" placeholder="Search mail, or ask Owly" onkeydown="if(event.key==='Enter')topSearch(event)"><span class="kbd-hint" onclick="toggleShortcuts()">? shortcuts</span></div><div id="shortcuts" class="shortcuts-overlay" style="display:none" onclick="if(event.target===this)toggleShortcuts()"><div class="shortcuts-box"><h3>Keyboard shortcuts</h3><ul><li><b>j</b> <b>k</b> move the highlight</li><li><b>x</b> tick the highlighted task</li><li><b>r</b> open its reply drafts</li><li><b>/</b> jump to the Owly box</li><li><b>?</b> this list</li></ul><button class="btn" onclick="toggleShortcuts()">Close</button></div></div><div class="main"><div class="together"><div class="wrap"><div class="greet"><span class="owl"><svg viewBox="0 0 64 64" class="owlsvg" aria-hidden="true"><circle cx="32" cy="34" r="26" fill="#4b3a7a"/><path d="M10 18 L22 26 L18 12Z M54 18 L42 26 L46 12Z" fill="#4b3a7a"/><circle cx="23" cy="31" r="10" fill="#fff"/><circle cx="41" cy="31" r="10" fill="#fff"/><circle cx="24" cy="32" r="4.5" fill="#1d1640"/><circle cx="40" cy="32" r="4.5" fill="#1d1640"/><circle cx="25.5" cy="30.5" r="1.4" fill="#fff"/><circle cx="41.5" cy="30.5" r="1.4" fill="#fff"/><path d="M29 40 L32 45 L35 40Z" fill="#f2b84b"/><path d="M16 48 Q32 58 48 48" stroke="#8f7cc8" stroke-width="3" fill="none"/></svg></span><div><b>Good morning, Alex.</b> Three things need you today; the rest is below. <button class="link" onclick="speak()">🔊 Read it to me</button></div></div><p class="trustline muted">Told your phone once today, 07:15 — 1 mail matters (bpost).</p><h1>Your list</h1><p class="lede">New since you last looked (yesterday 22:14): <b>10</b></p><div class="modes"><input type="radio" name="mode" id="mode-work" onchange="setMode('work')"><label for="mode-work">Work</label><input type="radio" name="mode" id="mode-personal" onchange="setMode('personal')"><label for="mode-personal">Personal</label><input type="radio" name="mode" id="mode-everything" onchange="setMode('everything')" checked><label for="mode-everything">Everything</label></div><div class="prog"><i id="pg"></i></div><h2><span>Today</span><span>2</span></h2><ul id="sect-today"><li class="tk a-gmail" data-sect="today"><input type="checkbox" id="tk0" onchange="onTaskChange(this)"><label for="tk0" class="box"></label><div class="tb"><label for="tk0" class="tt">Be home for bpost’s registered mail, or authorise a proxy</label><div class="tm"><span class="wh">today, before 14:00</span><button class="link small" onclick="snooze(this)">remind me tomorrow</button></div><a class="src" href="#m1"><span class="dot i-gmail"></span>bpost: Registered mail arrives today, 08:00–14:00</a></div></li><li class="tk a-work" data-sect="today"><input type="checkbox" id="tk1" onchange="onTaskChange(this)"><label for="tk1" class="box"></label><div class="tb"><label for="tk1" class="tt">Confirm the Harbor demo slot with Sara</label><div class="tm"><span class="wh">today</span><button class="link small" onclick="snooze(this)">remind me tomorrow</button></div><details class="rd"><summary>✎ Owly drafted three answers</summary><div class="ropts"><button onclick="pick(this,'yes')">Yes, 10:00 works</button><button onclick="pick(this,'later')">Can we make it 11:00?</button><button onclick="pick(this,'no')">I can’t make it</button></div><div class="draft" hidden><div class="dh">To Sara Claes · from work · Owly’s draft, yours to change</div><div class="dt" contenteditable="true"></div><div class="acts"><button class="btn p" onclick="sendIt(this)">Send — asks your Approve on Telegram</button></div></div></details><a class="src" href="#m2"><span class="dot i-work"></span>Sara Claes: Re: Harbor demo for the team — Thursday</a></div></li></ul><p class="empty-today" id="empty-today" style="display:none">Nothing needs you today. Next: the viewing, Saturday 11:00.</p><h2><span>This week</span><span>3</span></h2><ul id="sect-this-week"><li class="tk a-work" data-sect="this-week"><input type="checkbox" id="tk2" onchange="onTaskChange(this)"><label for="tk2" class="box"></label><div class="tb"><label for="tk2" class="tt">Update the sales numbers in Sara’s sheet</label><div class="tm"><span class="wh">tomorrow, before 10:00</span><button class="link small" onclick="snooze(this)">remind me tomorrow</button></div><a class="src" href="#m2"><span class="dot i-work"></span>Sara Claes: Re: Harbor demo for the team — Thursday</a></div></li><li class="tk a-gmail" data-sect="this-week"><input type="checkbox" id="tk3" onchange="onTaskChange(this)"><label for="tk3" class="box"></label><div class="tb"><label for="tk3" class="tt">Go to the open viewing, Kerkstraat 14</label><div class="tm"><span class="wh">Saturday 11:00</span><button class="link small" onclick="snooze(this)">remind me tomorrow</button></div><div class="hint">Owly can add it to your calendar <button class="link" onclick="this.parentNode.textContent='Asked — waits for your Approve.'">Do it</button></div><a class="src" href="#m7"><span class="dot i-gmail"></span>Immoweb: 3 new apartments match &#x27;Brussel centrum, 2 bedrooms&#x27;</a></div></li><li class="tk a-mesh" data-sect="this-week"><input type="checkbox" id="tk4" onchange="onTaskChange(this)"><label for="tk4" class="box"></label><div class="tb"><label for="tk4" class="tt">Update ca-certificates-mozilla and php on your computers</label><div class="tm"><span class="wh">this week</span><button class="link small" onclick="snooze(this)">remind me tomorrow</button></div><a class="src" href="#m4"><span class="dot i-mesh"></span>security-announce: Security: ca-certificates-mozilla, php, php-legacy</a></div></li></ul><h2><span>Later</span><span>3</span></h2><ul id="sect-later"><li class="tk a-mesh" data-sect="later"><input type="checkbox" id="tk5" onchange="onTaskChange(this)"><label for="tk5" class="box"></label><div class="tb"><label for="tk5" class="tt">Update yt-dlp by hand</label><div class="tm"><span class="wh">this week</span><button class="link small" onclick="snooze(this)">remind me tomorrow</button></div><a class="src" href="#m5"><span class="dot i-mesh"></span>github-actions[bot]: yt-dlp 2026.10.21 released</a></div></li><li class="tk a-gmail" data-sect="later"><input type="checkbox" id="tk6" onchange="onTaskChange(this)"><label for="tk6" class="box"></label><div class="tb"><label for="tk6" class="tt">Pick which of Lena’s photos to print</label><div class="tm"><span class="wh">no rush</span><button class="link small" onclick="snooze(this)">remind me tomorrow</button></div><a class="src" href="#m25"><span class="dot i-gmail"></span>Lena Janssens: Foto&#x27;s van zondag</a></div></li><li class="tk a-gmail" data-sect="later"><input type="checkbox" id="tk7" onchange="onTaskChange(this)"><label for="tk7" class="box"></label><div class="tb"><label for="tk7" class="tt">Check the 404 pages on example.org</label><div class="tm"><span class="wh">no rush</span><button class="link small" onclick="snooze(this)">remind me tomorrow</button></div><a class="src" href="#m6"><span class="dot i-gmail"></span>Google Search Console: New &#x27;Not found (404)&#x27; reason on example.org</a></div></li></ul><details id="handled-wrap" style="display:none"><summary>Handled today · <span id="handled-count">0</span></summary><ul id="handled-list"></ul></details><h2><span>You promised</span><span>1</span></h2><ul><li class="pr a-work"><span class="pk me">you →</span><div><div>Bring the updated sales numbers to the demo</div><small class="muted">tomorrow 10:00 · <a href="#m2">Sara Claes</a></small></div></li></ul><h2><span>Waiting on others</span><span>2</span></h2><ul class="waitlist"><li class="wo a-work"><div class="wob"><div><b>Tim:</b> the error analysis after the logs <small class="muted">(asked yesterday)</small></div><a class="src" href="#m17"><span class="dot i-work"></span>Tim Jacobs: Logs from yesterday&#x27;s import run</a><div class="draft" id="nudge0" hidden><div class="dh">To Tim · Owly’s draft, yours to change</div><div class="dt" contenteditable="true">Hi Tim,<br><br>Any chance of the error analysis after the logs soon? Just checking in.<br><br>Thanks,<br>Alex</div><div class="acts"><button class="btn p" onclick="sendIt(this)">Send — asks your Approve on Telegram</button></div></div></div><button class="btn" onclick="document.getElementById('nudge0').hidden=false;this.style.display='none'">Nudge</button></li><li class="wo a-gmail"><div class="wob"><div><b>Immoweb agent:</b> the floor plan’s second page <small class="muted">(asked yesterday)</small></div><a class="src" href="#m7"><span class="dot i-gmail"></span>Immoweb: 3 new apartments match &#x27;Brussel centrum, 2 bedrooms&#x27;</a><div class="draft" id="nudge1" hidden><div class="dh">To Immoweb agent · Owly’s draft, yours to change</div><div class="dt" contenteditable="true">Hi Immoweb agent,<br><br>Any chance of the floor plan’s second page soon? Just checking in.<br><br>Thanks,<br>Alex</div><div class="acts"><button class="btn p" onclick="sendIt(this)">Send — asks your Approve on Telegram</button></div></div></div><button class="btn" onclick="document.getElementById('nudge1').hidden=false;this.style.display='none'">Nudge</button></li></ul><h2><span>On its way</span><span>3</span></h2><ul><li class="pr a-gmail"><span class="pk them">→ you</span><div><div>Coolblue delivers your monitor</div><small class="muted">tomorrow 13:00–17:00 · <a href="#m9">Coolblue</a></small></div></li><li class="pr a-mesh"><span class="pk them">→ you</span><div><div>Hostco debits €40.00</div><small class="muted">28 Oct · <a href="#m10">Hostco</a></small></div></li><li class="pr a-gmail"><span class="pk them">→ you</span><div><div>Telco debits €55.00</div><small class="muted">5 Nov · <a href="#m12">Telco</a></small></div></li></ul><h2><span>Good to know</span></h2><div class="fyi">Tim zipped yesterday’s import logs (<a href="#m17">open</a>). Plex was down 6 minutes at 04:06 and recovered.</div><details class="qd2"><summary>Read later · 6 newsletters</summary><div class="qi2"><span class="dot i-gmail"></span><a href="#m22">Strava — Your weekly summary: 42 km</a></div><div class="qi2"><span class="dot i-gmail"></span><a href="#m18">Spotify — New releases for you this Friday</a></div><div class="qi2"><span class="dot i-gmail"></span><a href="#m19">Tweakers — Dagelijkse nieuwsbrief</a></div><div class="qi2"><span class="dot i-gmail"></span><a href="#m20">IKEA Family — Herfstdeals tot 30%</a></div><div class="qi2"><span class="dot i-gmail"></span><a href="#m21">The Verge — Verge Daily: the week in AI agents</a></div><div class="qi2"><span class="dot i-gmail"></span><a href="#m23">Decathlon — Klaar voor de winter?</a></div></details><h2><span>Not a task</span></h2><div class="warn">⚠ A mail pretending to be KBC wants you to log in within 24 hours. It’s a scam; there’s nothing to do. <a href="#m3" style="color:inherit;text-decoration:underline">see why</a></div></div><aside class="side"><div class="hd"><span class="owl"><svg viewBox="0 0 64 64" class="owlsvg" aria-hidden="true"><circle cx="32" cy="34" r="26" fill="#4b3a7a"/><path d="M10 18 L22 26 L18 12Z M54 18 L42 26 L46 12Z" fill="#4b3a7a"/><circle cx="23" cy="31" r="10" fill="#fff"/><circle cx="41" cy="31" r="10" fill="#fff"/><circle cx="24" cy="32" r="4.5" fill="#1d1640"/><circle cx="40" cy="32" r="4.5" fill="#1d1640"/><circle cx="25.5" cy="30.5" r="1.4" fill="#fff"/><circle cx="41.5" cy="30.5" r="1.4" fill="#fff"/><path d="M29 40 L32 45 L35 40Z" fill="#f2b84b"/><path d="M16 48 Q32 58 48 48" stroke="#8f7cc8" stroke-width="3" fill="none"/></svg></span><div><b>Owly</b><div class="muted">ask about any mail · nothing is sent without your Approve</div></div><button class="link small learned-btn" onclick="toggleLessons()">Owly learned (<span id="learned-count">1</span>)</button></div><ul id="lessons-list" class="lessons-panel" hidden></ul><div id="chat"></div><div class="dock"><div class="in"><div class="chips"><button onclick="ask(this.textContent,'queue')">What would you do? <span class="badge2" id="queuebadge">5</span></button><button onclick="ask(this.textContent,'due')">What’s due this week?</button><button onclick="ask(this.textContent,'sara')">Answer Sara</button><button onclick="ask(this.textContent,'person_sara')">What’s going on with Sara?</button><button onclick="ask(this.textContent,'photos')">Show Lena’s photos</button><button onclick="ask(this.textContent,'scam')">Anything suspicious?</button><button onclick="ask(this.textContent,'money')">What did I spend?</button><button onclick="ask(this.textContent,'news')">The newsletters, briefly</button><button onclick="ask(this.textContent,'hostco_invoice')">Where’s the Hostco invoice?</button><button onclick="ask(this.textContent,'write_lena')">Mail Lena that I’ll pick the photos tomorrow</button><button onclick="ask(this.textContent,'teach_strava')">Stop telling me about Strava</button></div><form class="ask" onsubmit="free(event)"><input id="q" placeholder="Ask Owly anything about your mail…" autocomplete="off"><button>Ask</button></form></div></div></aside></div></div><section class="pane a-work" id="m17"><div class="bar"><a class="btn" href="#" title="Close">←</a><label class="btn" for="dz17">Dismiss</label><a class="btn" href="#">Reply</a><a class="btn" href="#">Folder</a><span class="badge i-work">work</span></div><h1>Logs from yesterday&#x27;s import run</h1><div class="meta"><span class="dot i-work"></span> <b>Tim Jacobs</b> &lt;tim.jacobs@work.example&gt;<br>work / INBOX · Thu 22 Oct 2026, 09:25</div><div class="note" style="background:var(--work-bg)">Work</div><div class="atts"><div class="lbl">1 attachment</div><a class="att" href="#a17-1"><span class="th th-s k-zip"><div class="zipi">▤</div><em>ZIP</em></span><span><b>import-logs.zip</b><small>4.6 MB</small></span></a></div><div class="body"><p>Here are yesterday&#x27;s logs, zipped. The errors are in errors.csv.</p></div><details class="fix"><summary>Correct mail reading ▾</summary><form><select><option>matters</option><option>scam warning</option><option>neither</option></select><input placeholder="mail group" value="Work"><button type="button">Save as a reading lesson</button></form></details></section><section class="pane a-gmail" id="m7"><div class="bar"><a class="btn" href="#" title="Close">←</a><label class="btn" for="dz7">Dismiss</label><a class="btn" href="#">Reply</a><a class="btn" href="#">Folder</a><span class="badge i-gmail">gmail</span></div><h1>3 new apartments match &#x27;Brussel centrum, 2 bedrooms&#x27;</h1><div class="meta"><span class="dot i-gmail"></span> <b>Immoweb</b> &lt;alerts@immoweb.example&gt;<br>gmail / INBOX · Thu 22 Oct 2026, 09:10</div><div class="note" style="background:var(--gmail-bg)"><b>★ Matters</b> · due Sat 24 Oct · Housing<br>Matches the search you set up; a viewing is on Saturday.</div><div class="atts"><div class="lbl">2 attachments</div><a class="att" href="#a7-1"><span class="th th-s k-image"><svg viewBox="0 0 120 80" width="100%" height="100%" preserveAspectRatio="xMidYMid slice" aria-hidden="true"><defs><linearGradient id="g210" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="hsl(210,70%,78%)"/><stop offset="1" stop-color="hsl(210,45%,52%)"/></linearGradient></defs><rect width="120" height="80" fill="url(#g210)"/><circle cx="92" cy="20" r="9" fill="hsl(250,90%,85%)"/><path d="M0 64 L28 40 L50 58 L74 34 L120 70 L120 80 L0 80Z" fill="hsl(210,35%,30%)" opacity=".75"/></svg><em>IMG</em></span><span><b>living-room.jpg</b><small>1.2 MB</small></span></a><a class="att" href="#a7-2"><span class="th th-s k-pdf"><div class="pg"><i></i><i></i><i class="w"></i><i></i><i class="w"></i></div><em>PDF</em></span><span><b>floor-plan.pdf</b><small>340 KB</small></span></a></div><div class="body"><p>Three new listings match your search.</p><p>Kerkstraat 14, 2nd floor — €925/month — open viewing Saturday 11:00.</p><p>Photos and the floor plan are attached.</p></div><details class="fix"><summary>Correct mail reading ▾</summary><form><select><option>matters</option><option>scam warning</option><option>neither</option></select><input placeholder="mail group" value="Housing"><button type="button">Save as a reading lesson</button></form></details></section><section class="pane a-work" id="m2"><div class="bar"><a class="btn" href="#" title="Close">←</a><label class="btn" for="dz2">Dismiss</label><a class="btn" href="#">Reply</a><a class="btn" href="#">Folder</a><span class="badge i-work">work</span></div><h1>Re: Harbor demo for the team — Thursday</h1><div class="meta"><span class="dot i-work"></span> <b>Sara Claes</b> &lt;sara.claes@work.example&gt;<br>work / INBOX · Thu 22 Oct 2026, 08:55</div><div class="note" style="background:var(--work-bg)"><b>★ Matters</b> · due tomorrow · Work<br>A colleague asks for a reply before a meeting tomorrow at 10:00.</div><p class="muted" style="font-size:13px">↳ the newest of 4 messages in this conversation · <a href="#">show all</a></p><div class="atts"><div class="lbl">2 attachments</div><a class="att" href="#a2-1"><span class="th th-s k-ics"><div class="cal"><b>OCT</b><span>23</span></div><em>ICS</em></span><span><b>demo-agenda.ics</b><small>2 KB</small></span></a><a class="att" href="#a2-2"><span class="th th-s k-sheet"><div class="grid"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div><em>XLS</em></span><span><b>sales-numbers.xlsx</b><small>18 KB</small></span></a></div><div class="body"><p>Hi Alex,</p><p>Can you confirm the 10:00 slot tomorrow for the Harbor demo with the team? I&#x27;ve attached the invite.</p><p>Could you also bring the latest sales numbers? I put last week&#x27;s in the sheet; please update the totals.</p><p>Thanks! Sara</p></div><details class="fix"><summary>Correct mail reading ▾</summary><form><select><option>matters</option><option>scam warning</option><option>neither</option></select><input placeholder="mail group" value="Work"><button type="button">Save as a reading lesson</button></form></details></section><section class="pane a-gmail" id="m22"><div class="bar"><a class="btn" href="#" title="Close">←</a><label class="btn" for="dz22">Dismiss</label><a class="btn" href="#">Reply</a><a class="btn" href="#">Folder</a><span class="badge i-gmail">gmail</span></div><h1>Your weekly summary: 42 km</h1><div class="meta"><span class="dot i-gmail"></span> <b>Strava</b> &lt;no-reply@strava.example&gt;<br>gmail / INBOX · Thu 22 Oct 2026, 07:45</div><div class="note" style="background:var(--gmail-bg)">Newsletters</div><div class="body"><p>(a newsletter, shown as text)</p></div><details class="fix"><summary>Correct mail reading ▾</summary><form><select><option>matters</option><option>scam warning</option><option>neither</option></select><input placeholder="mail group" value="Newsletters"><button type="button">Save as a reading lesson</button></form></details></section><section class="pane a-gmail" id="m1"><div class="bar"><a class="btn" href="#" title="Close">←</a><label class="btn" for="dz1">Dismiss</label><a class="btn" href="#">Reply</a><a class="btn" href="#">Folder</a><span class="badge i-gmail">gmail</span></div><h1>Registered mail arrives today, 08:00–14:00</h1><div class="meta"><span class="dot i-gmail"></span> <b>bpost</b> &lt;noreply@bpost.example&gt;<br>gmail / INBOX · Thu 22 Oct 2026, 07:12</div><div class="note" style="background:var(--gmail-bg)"><b>★ Matters</b> · due today · Post &amp; deliveries<br>Genuine notice from bpost&#x27;s own domain; no payment or login asked. Needs you today.</div><div class="body"><p>Beste klant,</p><p>Uw aangetekende zending wordt vandaag geleverd tussen 08:00 en 14:00 op Stationsstraat 1, 1000 Brussel.</p><p>Iemand moet aanwezig zijn om te tekenen, of u machtigt een volmachthouder via de app.</p><p>Met vriendelijke groeten, bpost</p></div><details class="fix"><summary>Correct mail reading ▾</summary><form><select><option>matters</option><option>scam warning</option><option>neither</option></select><input placeholder="mail group" value="Post &amp; deliveries"><button type="button">Save as a reading lesson</button></form></details></section><section class="pane a-gmail" id="m9"><div class="bar"><a class="btn" href="#" title="Close">←</a><label class="btn" for="dz9">Dismiss</label><a class="btn" href="#">Reply</a><a class="btn" href="#">Folder</a><span class="badge i-gmail">gmail</span></div><h1>Your order 48213977 is on its way</h1><div class="meta"><span class="dot i-gmail"></span> <b>Coolblue</b> &lt;info@coolblue.example&gt;<br>gmail / INBOX · Thu 22 Oct 2026, 06:50</div><div class="note" style="background:var(--gmail-bg)">Orders &amp; invoices</div><div class="body"><p>Your USB-C monitor arrives tomorrow between 13:00 and 17:00.</p><p>Track it in the app.</p></div><details class="fix"><summary>Correct mail reading ▾</summary><form><select><option>matters</option><option>scam warning</option><option>neither</option></select><input placeholder="mail group" value="Orders &amp; invoices"><button type="button">Save as a reading lesson</button></form></details></section><section class="pane a-gmail" id="m3"><div class="bar"><a class="btn" href="#" title="Close">←</a><label class="btn" for="dz3">Dismiss</label><a class="btn" href="#">Reply</a><a class="btn" href="#">Folder</a><span class="badge i-gmail">gmail</span></div><h1>Uw rekening wordt geblokkeerd — bevestig binnen 24 uur</h1><div class="meta"><span class="dot i-gmail"></span> <b>KBC Bank</b> &lt;security@kbc-verificatie.example&gt;<br>gmail / Junk · Thu 22 Oct 2026, 06:03</div><div class="note scam"><b>⚠ Scam warning</b> · Junk<br>Sent from kbc-verificatie.example, not KBC&#x27;s own domain; threatens a block within 24 hours and asks you to log in through a link. The provider filed it as junk.<br><small>Links are not shown. Nothing in this mail is loaded.</small></div><div class="body"><p>Geachte klant,</p><p>Wegens verdachte activiteit wordt uw rekening binnen 24 uur geblokkeerd.</p><p>Bevestig uw gegevens via de onderstaande link om dit te voorkomen.</p></div><details class="fix"><summary>Correct mail reading ▾</summary><form><select><option>matters</option><option>scam warning</option><option>neither</option></select><input placeholder="mail group" value="Banking"><button type="button">Save as a reading lesson</button></form></details></section><section class="pane a-mesh" id="m24"><div class="bar"><a class="btn" href="#" title="Close">←</a><label class="btn" for="dz24">Dismiss</label><a class="btn" href="#">Reply</a><a class="btn" href="#">Folder</a><span class="badge i-mesh">mesh</span></div><h1>[Up] plex.example.org is back after 6 min</h1><div class="meta"><span class="dot i-mesh"></span> <b>Uptime Kuma</b> &lt;alerts@example.org&gt;<br>mesh / INBOX · Thu 22 Oct 2026, 04:12</div><div class="note" style="background:var(--mesh-bg)">Site monitoring</div><div class="body"><p>plex.example.org was down from 04:06 to 04:12 (6 minutes).</p></div><details class="fix"><summary>Correct mail reading ▾</summary><form><select><option>matters</option><option>scam warning</option><option>neither</option></select><input placeholder="mail group" value="Site monitoring"><button type="button">Save as a reading lesson</button></form></details></section><section class="pane a-mesh" id="m13"><div class="bar"><a class="btn" href="#" title="Close">←</a><label class="btn" for="dz13">Dismiss</label><a class="btn" href="#">Reply</a><a class="btn" href="#">Folder</a><span class="badge i-mesh">mesh</span></div><h1>mesh-catalog #397 merged</h1><div class="meta"><span class="dot i-mesh"></span> <b>Gitea</b> &lt;gitea@example.org&gt;<br>mesh / INBOX · Wed 21 Oct 2026, 23:58</div><div class="note" style="background:var(--mesh-bg)">Software releases</div><div class="body"><p>home merged pull request #397 into main.</p></div><details class="fix"><summary>Correct mail reading ▾</summary><form><select><option>matters</option><option>scam warning</option><option>neither</option></select><input placeholder="mail group" value="Software releases"><button type="button">Save as a reading lesson</button></form></details></section><section class="pane a-mesh" id="m4"><div class="bar"><a class="btn" href="#" title="Close">←</a><label class="btn" for="dz4">Dismiss</label><a class="btn" href="#">Reply</a><a class="btn" href="#">Folder</a><span class="badge i-mesh">mesh</span></div><h1>Security: ca-certificates-mozilla, php, php-legacy</h1><div class="meta"><span class="dot i-mesh"></span> <b>security-announce</b> &lt;security-announce@project.example&gt;<br>mesh / INBOX · Wed 21 Oct 2026, 22:40</div><div class="note" style="background:var(--mesh-bg)"><b>★ Matters</b> · Security advisories<br>Genuine advisory from a software project you use.</div><div class="body"><p>ca-certificates-mozilla &gt;= 3.131.1-1 fixes a trust-store issue that allows a man-in-the-middle.</p><p>php &gt;= 8.5.12 and php-legacy &gt;= 8.3.36 fix remote code execution CVEs.</p><p>Update promptly with pacman -Syu.</p></div><details class="fix"><summary>Correct mail reading ▾</summary><form><select><option>matters</option><option>scam warning</option><option>neither</option></select><input placeholder="mail group" value="Security advisories"><button type="button">Save as a reading lesson</button></form></details></section><section class="pane a-gmail" id="m11"><div class="bar"><a class="btn" href="#" title="Close">←</a><label class="btn" for="dz11">Dismiss</label><a class="btn" href="#">Reply</a><a class="btn" href="#">Folder</a><span class="badge i-gmail">gmail</span></div><h1>Bestelling bevestigd: USB-C dock</h1><div class="meta"><span class="dot i-gmail"></span> <b>bol.example</b> &lt;klantenservice@bol.example&gt;<br>gmail / INBOX · Wed 21 Oct 2026, 21:14</div><div class="note" style="background:var(--gmail-bg)">Orders &amp; invoices</div><div class="body"><p>Bedankt voor je bestelling. We laten het weten zodra hij onderweg is.</p></div><details class="fix"><summary>Correct mail reading ▾</summary><form><select><option>matters</option><option>scam warning</option><option>neither</option></select><input placeholder="mail group" value="Orders &amp; invoices"><button type="button">Save as a reading lesson</button></form></details></section><section class="pane a-gmail" id="m25"><div class="bar"><a class="btn" href="#" title="Close">←</a><label class="btn" for="dz25">Dismiss</label><a class="btn" href="#">Reply</a><a class="btn" href="#">Folder</a><span class="badge i-gmail">gmail</span></div><h1>Foto&#x27;s van zondag</h1><div class="meta"><span class="dot i-gmail"></span> <b>Lena Janssens</b> &lt;lena.janssens@gmail.example&gt;<br>gmail / INBOX · Wed 21 Oct 2026, 20:12</div><div class="note" style="background:var(--gmail-bg)">Family</div><p class="muted" style="font-size:13px">↳ the newest of 2 messages in this conversation · <a href="#">show all</a></p><div class="atts"><div class="lbl">3 attachments</div><a class="att" href="#a25-1"><span class="th th-s k-image"><svg viewBox="0 0 120 80" width="100%" height="100%" preserveAspectRatio="xMidYMid slice" aria-hidden="true"><defs><linearGradient id="g24" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="hsl(24,70%,78%)"/><stop offset="1" stop-color="hsl(24,45%,52%)"/></linearGradient></defs><rect width="120" height="80" fill="url(#g24)"/><circle cx="92" cy="20" r="9" fill="hsl(64,90%,85%)"/><path d="M0 64 L28 40 L50 58 L74 34 L120 70 L120 80 L0 80Z" fill="hsl(24,35%,30%)" opacity=".75"/></svg><em>IMG</em></span><span><b>IMG_2041.jpg</b><small>3.4 MB</small></span></a><a class="att" href="#a25-2"><span class="th th-s k-image"><svg viewBox="0 0 120 80" width="100%" height="100%" preserveAspectRatio="xMidYMid slice" aria-hidden="true"><defs><linearGradient id="g200" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="hsl(200,70%,78%)"/><stop offset="1" stop-color="hsl(200,45%,52%)"/></linearGradient></defs><rect width="120" height="80" fill="url(#g200)"/><circle cx="92" cy="20" r="9" fill="hsl(240,90%,85%)"/><path d="M0 64 L28 40 L50 58 L74 34 L120 70 L120 80 L0 80Z" fill="hsl(200,35%,30%)" opacity=".75"/></svg><em>IMG</em></span><span><b>IMG_2044.jpg</b><small>2.9 MB</small></span></a><a class="att" href="#a25-3"><span class="th th-s k-image"><svg viewBox="0 0 120 80" width="100%" height="100%" preserveAspectRatio="xMidYMid slice" aria-hidden="true"><defs><linearGradient id="g120" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="hsl(120,70%,78%)"/><stop offset="1" stop-color="hsl(120,45%,52%)"/></linearGradient></defs><rect width="120" height="80" fill="url(#g120)"/><circle cx="92" cy="20" r="9" fill="hsl(160,90%,85%)"/><path d="M0 64 L28 40 L50 58 L74 34 L120 70 L120 80 L0 80Z" fill="hsl(120,35%,30%)" opacity=".75"/></svg><em>IMG</em></span><span><b>IMG_2050.jpg</b><small>3.1 MB</small></span></a></div><div class="body"><p>Hier zijn de foto&#x27;s van zondag in het park!</p><p>Zeg maar welke je wil laten afdrukken.</p></div><details class="fix"><summary>Correct mail reading ▾</summary><form><select><option>matters</option><option>scam warning</option><option>neither</option></select><input placeholder="mail group" value="Family"><button type="button">Save as a reading lesson</button></form></details></section><section class="pane a-mesh" id="m5"><div class="bar"><a class="btn" href="#" title="Close">←</a><label class="btn" for="dz5">Dismiss</label><a class="btn" href="#">Reply</a><a class="btn" href="#">Folder</a><span class="badge i-mesh">mesh</span></div><h1>yt-dlp 2026.10.21 released</h1><div class="meta"><span class="dot i-mesh"></span> <b>github-actions[bot]</b> &lt;notifications@github.example&gt;<br>mesh / INBOX · Wed 21 Oct 2026, 19:05</div><div class="note" style="background:var(--mesh-bg)"><b>★ Matters</b> · Software releases<br>Genuine GitHub release notice with a security fix.</div><div class="body"><p>yt-dlp 2026.10.21 is out.</p><p>Executables from before this release bundle an old certifi; download the new release instead of using -U.</p></div><details class="fix"><summary>Correct mail reading ▾</summary><form><select><option>matters</option><option>scam warning</option><option>neither</option></select><input placeholder="mail group" value="Software releases"><button type="button">Save as a reading lesson</button></form></details></section><section class="pane a-gmail" id="m18"><div class="bar"><a class="btn" href="#" title="Close">←</a><label class="btn" for="dz18">Dismiss</label><a class="btn" href="#">Reply</a><a class="btn" href="#">Folder</a><span class="badge i-gmail">gmail</span></div><h1>New releases for you this Friday</h1><div class="meta"><span class="dot i-gmail"></span> <b>Spotify</b> &lt;no-reply@spotify.example&gt;<br>gmail / INBOX · Wed 21 Oct 2026, 17:00</div><div class="note" style="background:var(--gmail-bg)">Newsletters</div><div class="body"><p>(a newsletter, shown as text)</p></div><details class="fix"><summary>Correct mail reading ▾</summary><form><select><option>matters</option><option>scam warning</option><option>neither</option></select><input placeholder="mail group" value="Newsletters"><button type="button">Save as a reading lesson</button></form></details></section><section class="pane a-work" id="m14"><div class="bar"><a class="btn" href="#" title="Close">←</a><label class="btn" for="dz14">Dismiss</label><a class="btn" href="#">Reply</a><a class="btn" href="#">Folder</a><span class="badge i-work">work</span></div><h1>[HB-412] Report totals are counted twice</h1><div class="meta"><span class="dot i-work"></span> <b>Tracker</b> &lt;tracker@tools.example&gt;<br>work / INBOX · Wed 21 Oct 2026, 16:20</div><div class="note" style="background:var(--work-bg)">Work</div><div class="body"><p>Sara Claes assigned HB-412 to you.</p><p>The report counts a table split over two pages as two tables.</p></div><details class="fix"><summary>Correct mail reading ▾</summary><form><select><option>matters</option><option>scam warning</option><option>neither</option></select><input placeholder="mail group" value="Work"><button type="button">Save as a reading lesson</button></form></details></section><section class="pane a-gmail" id="m6"><div class="bar"><a class="btn" href="#" title="Close">←</a><label class="btn" for="dz6">Dismiss</label><a class="btn" href="#">Reply</a><a class="btn" href="#">Folder</a><span class="badge i-gmail">gmail</span></div><h1>New &#x27;Not found (404)&#x27; reason on example.org</h1><div class="meta"><span class="dot i-gmail"></span> <b>Google Search Console</b> &lt;sc-noreply@google.example&gt;<br>gmail / INBOX · Wed 21 Oct 2026, 14:31</div><div class="note" style="background:var(--gmail-bg)"><b>★ Matters</b> · Site monitoring<br>Genuine site-owner alert for a domain you run; no deadline.</div><div class="body"><p>Search Console has identified that some pages on example.org are affected by a new &#x27;Not found (404)&#x27; reason.</p><p>Open the Pages report to review them.</p></div><details class="fix"><summary>Correct mail reading ▾</summary><form><select><option>matters</option><option>scam warning</option><option>neither</option></select><input placeholder="mail group" value="Site monitoring"><button type="button">Save as a reading lesson</button></form></details></section><section class="pane a-mesh" id="m10"><div class="bar"><a class="btn" href="#" title="Close">←</a><label class="btn" for="dz10">Dismiss</label><a class="btn" href="#">Reply</a><a class="btn" href="#">Folder</a><span class="badge i-mesh">mesh</span></div><h1>Invoice R0024581133 for October</h1><div class="meta"><span class="dot i-mesh"></span> <b>Hostco</b> &lt;billing@hostco.example&gt;<br>mesh / INBOX · Wed 21 Oct 2026, 11:22</div><div class="note" style="background:var(--mesh-bg)">Orders &amp; invoices</div><div class="atts"><div class="lbl">1 attachment</div><a class="att" href="#a10-1"><span class="th th-s k-pdf"><div class="pg"><i></i><i></i><i class="w"></i><i></i><i class="w"></i></div><em>PDF</em></span><span><b>R0024581133.pdf</b><small>52 KB</small></span></a></div><div class="body"><p>Dear customer,</p><p>your invoice R0024581133 for October is attached. The amount will be debited on 28 October.</p></div><details class="fix"><summary>Correct mail reading ▾</summary><form><select><option>matters</option><option>scam warning</option><option>neither</option></select><input placeholder="mail group" value="Orders &amp; invoices"><button type="button">Save as a reading lesson</button></form></details></section><section class="pane a-work" id="m15"><div class="bar"><a class="btn" href="#" title="Close">←</a><label class="btn" for="dz15">Dismiss</label><a class="btn" href="#">Reply</a><a class="btn" href="#">Folder</a><span class="badge i-work">work</span></div><h1>Page updated: Release checklist Q4</h1><div class="meta"><span class="dot i-work"></span> <b>Wiki</b> &lt;wiki@tools.example&gt;<br>work / INBOX · Wed 21 Oct 2026, 10:05</div><div class="note" style="background:var(--work-bg)">Work</div><div class="body"><p>Tim Jacobs updated Release checklist Q4.</p></div><details class="fix"><summary>Correct mail reading ▾</summary><form><select><option>matters</option><option>scam warning</option><option>neither</option></select><input placeholder="mail group" value="Work"><button type="button">Save as a reading lesson</button></form></details></section><section class="pane a-gmail" id="m19"><div class="bar"><a class="btn" href="#" title="Close">←</a><label class="btn" for="dz19">Dismiss</label><a class="btn" href="#">Reply</a><a class="btn" href="#">Folder</a><span class="badge i-gmail">gmail</span></div><h1>Dagelijkse nieuwsbrief</h1><div class="meta"><span class="dot i-gmail"></span> <b>Tweakers</b> &lt;nieuwsbrief@tweakers.example&gt;<br>gmail / INBOX · Wed 21 Oct 2026, 08:00</div><div class="note" style="background:var(--gmail-bg)">Newsletters</div><div class="body"><p>(a newsletter, shown as text)</p></div><details class="fix"><summary>Correct mail reading ▾</summary><form><select><option>matters</option><option>scam warning</option><option>neither</option></select><input placeholder="mail group" value="Newsletters"><button type="button">Save as a reading lesson</button></form></details></section><section class="pane a-gmail" id="m8"><div class="bar"><a class="btn" href="#" title="Close">←</a><label class="btn" for="dz8">Dismiss</label><a class="btn" href="#">Reply</a><a class="btn" href="#">Folder</a><span class="badge i-gmail">gmail</span></div><h1>Terms of Service and Agentic AI guidelines updated</h1><div class="meta"><span class="dot i-gmail"></span> <b>Cloudco</b> &lt;CloudPlatform-noreply@google.example&gt;<br>gmail / INBOX · Tue 20 Oct 2026, 18:02</div><div class="note" style="background:var(--gmail-bg)"><b>★ Matters</b> · Legal &amp; terms<br>Legal notice affecting a Cloudco account holder; no links or payment asked.</div><div class="body"><p>We updated the Cloudco Terms of Service and introduced Agentic AI Responsible Use Guidelines, effective 12 October 2026.</p></div><details class="fix"><summary>Correct mail reading ▾</summary><form><select><option>matters</option><option>scam warning</option><option>neither</option></select><input placeholder="mail group" value="Legal &amp; terms"><button type="button">Save as a reading lesson</button></form></details></section><section class="pane a-gmail" id="m20"><div class="bar"><a class="btn" href="#" title="Close">←</a><label class="btn" for="dz20">Dismiss</label><a class="btn" href="#">Reply</a><a class="btn" href="#">Folder</a><span class="badge i-gmail">gmail</span></div><h1>Herfstdeals tot 30%</h1><div class="meta"><span class="dot i-gmail"></span> <b>IKEA Family</b> &lt;ikea@ikea.example&gt;<br>gmail / INBOX · Tue 20 Oct 2026, 16:45</div><div class="note" style="background:var(--gmail-bg)">Newsletters</div><div class="body"><p>(a newsletter, shown as text)</p></div><details class="fix"><summary>Correct mail reading ▾</summary><form><select><option>matters</option><option>scam warning</option><option>neither</option></select><input placeholder="mail group" value="Newsletters"><button type="button">Save as a reading lesson</button></form></details></section><section class="pane a-gmail" id="m12"><div class="bar"><a class="btn" href="#" title="Close">←</a><label class="btn" for="dz12">Dismiss</label><a class="btn" href="#">Reply</a><a class="btn" href="#">Folder</a><span class="badge i-gmail">gmail</span></div><h1>Je factuur van oktober staat klaar</h1><div class="meta"><span class="dot i-gmail"></span> <b>Telco</b> &lt;noreply@telco.example&gt;<br>gmail / INBOX · Tue 20 Oct 2026, 12:00</div><div class="note" style="background:var(--gmail-bg)">Orders &amp; invoices</div><div class="atts"><div class="lbl">1 attachment</div><a class="att" href="#a12-1"><span class="th th-s k-pdf"><div class="pg"><i></i><i></i><i class="w"></i><i></i><i class="w"></i></div><em>PDF</em></span><span><b>factuur-oktober.pdf</b><small>88 KB</small></span></a></div><div class="body"><p>Je factuur van oktober staat klaar. Het bedrag wordt op 5 november gedomicilieerd.</p></div><details class="fix"><summary>Correct mail reading ▾</summary><form><select><option>matters</option><option>scam warning</option><option>neither</option></select><input placeholder="mail group" value="Orders &amp; invoices"><button type="button">Save as a reading lesson</button></form></details></section><section class="pane a-work" id="m16"><div class="bar"><a class="btn" href="#" title="Close">←</a><label class="btn" for="dz16">Dismiss</label><a class="btn" href="#">Reply</a><a class="btn" href="#">Folder</a><span class="badge i-work">work</span></div><h1>Planned maintenance Thursday 23:00</h1><div class="meta"><span class="dot i-work"></span> <b>Work IT</b> &lt;it-service@work.example&gt;<br>work / INBOX · Tue 20 Oct 2026, 09:30</div><div class="note" style="background:var(--work-bg)">Work</div><div class="body"><p>The office printer is down for maintenance on Thursday from 23:00 to 01:00.</p></div><details class="fix"><summary>Correct mail reading ▾</summary><form><select><option>matters</option><option>scam warning</option><option>neither</option></select><input placeholder="mail group" value="Work"><button type="button">Save as a reading lesson</button></form></details></section><section class="pane a-gmail" id="m21"><div class="bar"><a class="btn" href="#" title="Close">←</a><label class="btn" for="dz21">Dismiss</label><a class="btn" href="#">Reply</a><a class="btn" href="#">Folder</a><span class="badge i-gmail">gmail</span></div><h1>Verge Daily: the week in AI agents</h1><div class="meta"><span class="dot i-gmail"></span> <b>The Verge</b> &lt;newsletter@theverge.example&gt;<br>gmail / INBOX · Tue 20 Oct 2026, 07:30</div><div class="note" style="background:var(--gmail-bg)">Newsletters</div><div class="body"><p>(a newsletter, shown as text)</p></div><details class="fix"><summary>Correct mail reading ▾</summary><form><select><option>matters</option><option>scam warning</option><option>neither</option></select><input placeholder="mail group" value="Newsletters"><button type="button">Save as a reading lesson</button></form></details></section><section class="pane a-gmail" id="m23"><div class="bar"><a class="btn" href="#" title="Close">←</a><label class="btn" for="dz23">Dismiss</label><a class="btn" href="#">Reply</a><a class="btn" href="#">Folder</a><span class="badge i-gmail">gmail</span></div><h1>Klaar voor de winter?</h1><div class="meta"><span class="dot i-gmail"></span> <b>Decathlon</b> &lt;news@decathlon.example&gt;<br>gmail / INBOX · Mon 19 Oct 2026, 15:00</div><div class="note" style="background:var(--gmail-bg)">Newsletters</div><div class="body"><p>(a newsletter, shown as text)</p></div><details class="fix"><summary>Correct mail reading ▾</summary><form><select><option>matters</option><option>scam warning</option><option>neither</option></select><input placeholder="mail group" value="Newsletters"><button type="button">Save as a reading lesson</button></form></details></section><div class="lb" id="a17-1"><div class="lb-bar"><a class="btn" href="#m17">← Back to the mail</a><b>import-logs.zip</b><span class="muted">4.6 MB</span><a class="btn" href="#" style="margin-left:auto">Download</a></div><div class="lb-body"><div class="v-zip"><table><tr><td>▤ run-2026-10-21.log</td><td class="muted">3.1 MB</td></tr><tr><td>▤ errors.csv</td><td class="muted">220 KB</td></tr><tr><td>▤ summary.json</td><td class="muted">1.1 MB</td></tr><tr><td>▤ README.txt</td><td class="muted">2 KB</td></tr></table><p class="muted">4 files · nothing is unpacked on the server</p></div></div></div><div class="lb" id="a7-1"><div class="lb-bar"><a class="btn" href="#m7">← Back to the mail</a><b>living-room.jpg</b><span class="muted">1.2 MB</span><a class="btn" href="#" style="margin-left:auto">Download</a></div><div class="lb-body"><div class="v-img"><svg viewBox="0 0 120 80" width="100%" height="100%" preserveAspectRatio="xMidYMid slice" aria-hidden="true"><defs><linearGradient id="g210" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="hsl(210,70%,78%)"/><stop offset="1" stop-color="hsl(210,45%,52%)"/></linearGradient></defs><rect width="120" height="80" fill="url(#g210)"/><circle cx="92" cy="20" r="9" fill="hsl(250,90%,85%)"/><path d="M0 64 L28 40 L50 58 L74 34 L120 70 L120 80 L0 80Z" fill="hsl(210,35%,30%)" opacity=".75"/></svg></div></div><div class=lb-strip><a href="#a7-1" class="on"><span class="th th-s k-image"><svg viewBox="0 0 120 80" width="100%" height="100%" preserveAspectRatio="xMidYMid slice" aria-hidden="true"><defs><linearGradient id="g210" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="hsl(210,70%,78%)"/><stop offset="1" stop-color="hsl(210,45%,52%)"/></linearGradient></defs><rect width="120" height="80" fill="url(#g210)"/><circle cx="92" cy="20" r="9" fill="hsl(250,90%,85%)"/><path d="M0 64 L28 40 L50 58 L74 34 L120 70 L120 80 L0 80Z" fill="hsl(210,35%,30%)" opacity=".75"/></svg><em>IMG</em></span></a><a href="#a7-2" class=""><span class="th th-s k-pdf"><div class="pg"><i></i><i></i><i class="w"></i><i></i><i class="w"></i></div><em>PDF</em></span></a></div></div><div class="lb" id="a7-2"><div class="lb-bar"><a class="btn" href="#m7">← Back to the mail</a><b>floor-plan.pdf</b><span class="muted">340 KB</span><a class="btn" href="#" style="margin-left:auto">Download</a></div><div class="lb-body"><div class="v-pdf"><div class="paper"><h3>Plattegrond</h3><div class="from">Immoweb</div><p>Appartement, 2 slaapkamers</p><p>Woonkamer 32 m²</p><p>Keuken 11 m²</p><p>Terras 9 m²</p><div class="lines"><i></i><i></i><i class="w"></i><i></i></div></div><p class="muted">page 1 of 2</p></div></div><div class=lb-strip><a href="#a7-1" class=""><span class="th th-s k-image"><svg viewBox="0 0 120 80" width="100%" height="100%" preserveAspectRatio="xMidYMid slice" aria-hidden="true"><defs><linearGradient id="g210" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="hsl(210,70%,78%)"/><stop offset="1" stop-color="hsl(210,45%,52%)"/></linearGradient></defs><rect width="120" height="80" fill="url(#g210)"/><circle cx="92" cy="20" r="9" fill="hsl(250,90%,85%)"/><path d="M0 64 L28 40 L50 58 L74 34 L120 70 L120 80 L0 80Z" fill="hsl(210,35%,30%)" opacity=".75"/></svg><em>IMG</em></span></a><a href="#a7-2" class="on"><span class="th th-s k-pdf"><div class="pg"><i></i><i></i><i class="w"></i><i></i><i class="w"></i></div><em>PDF</em></span></a></div></div><div class="lb" id="a2-1"><div class="lb-bar"><a class="btn" href="#m2">← Back to the mail</a><b>demo-agenda.ics</b><span class="muted">2 KB</span><a class="btn" href="#" style="margin-left:auto">Download</a></div><div class="lb-body"><div class="v-ics"><div class="cal big"><b>THU</b><span>23</span><small>OCT</small></div><div><h3>Harbor demo for the team</h3><p>Thursday 23 October, 10:00–11:00</p><p class="muted">Room Antwerpen 2.14 · organiser Sara Claes · 6 invited</p><p><a class="btn p" href="#">Accept</a> <a class="btn" href="#">Maybe</a> <a class="btn" href="#">Decline</a></p></div></div></div><div class=lb-strip><a href="#a2-1" class="on"><span class="th th-s k-ics"><div class="cal"><b>OCT</b><span>23</span></div><em>ICS</em></span></a><a href="#a2-2" class=""><span class="th th-s k-sheet"><div class="grid"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div><em>XLS</em></span></a></div></div><div class="lb" id="a2-2"><div class="lb-bar"><a class="btn" href="#m2">← Back to the mail</a><b>sales-numbers.xlsx</b><span class="muted">18 KB</span><a class="btn" href="#" style="margin-left:auto">Download</a></div><div class="lb-body"><div class="v-sheet"><table><tr><th>Week</th><th>Orders</th><th>Revenue</th><th>Returns</th></tr><tr><td>41</td><td>120</td><td>€6 400</td><td>9</td></tr><tr><td>42</td><td>135</td><td>€7 150</td><td>11</td></tr><tr><td>43</td><td>—</td><td>—</td><td>—</td></tr><tr><td>Total</td><td>255</td><td>€13 550</td><td>20</td></tr></table><p class="muted">Sheet 1 of 2 · read-only preview</p></div></div><div class=lb-strip><a href="#a2-1" class=""><span class="th th-s k-ics"><div class="cal"><b>OCT</b><span>23</span></div><em>ICS</em></span></a><a href="#a2-2" class="on"><span class="th th-s k-sheet"><div class="grid"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div><em>XLS</em></span></a></div></div><div class="lb" id="a25-1"><div class="lb-bar"><a class="btn" href="#m25">← Back to the mail</a><b>IMG_2041.jpg</b><span class="muted">3.4 MB</span><a class="btn" href="#" style="margin-left:auto">Download</a></div><div class="lb-body"><div class="v-img"><svg viewBox="0 0 120 80" width="100%" height="100%" preserveAspectRatio="xMidYMid slice" aria-hidden="true"><defs><linearGradient id="g24" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="hsl(24,70%,78%)"/><stop offset="1" stop-color="hsl(24,45%,52%)"/></linearGradient></defs><rect width="120" height="80" fill="url(#g24)"/><circle cx="92" cy="20" r="9" fill="hsl(64,90%,85%)"/><path d="M0 64 L28 40 L50 58 L74 34 L120 70 L120 80 L0 80Z" fill="hsl(24,35%,30%)" opacity=".75"/></svg></div></div><div class=lb-strip><a href="#a25-1" class="on"><span class="th th-s k-image"><svg viewBox="0 0 120 80" width="100%" height="100%" preserveAspectRatio="xMidYMid slice" aria-hidden="true"><defs><linearGradient id="g24" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="hsl(24,70%,78%)"/><stop offset="1" stop-color="hsl(24,45%,52%)"/></linearGradient></defs><rect width="120" height="80" fill="url(#g24)"/><circle cx="92" cy="20" r="9" fill="hsl(64,90%,85%)"/><path d="M0 64 L28 40 L50 58 L74 34 L120 70 L120 80 L0 80Z" fill="hsl(24,35%,30%)" opacity=".75"/></svg><em>IMG</em></span></a><a href="#a25-2" class=""><span class="th th-s k-image"><svg viewBox="0 0 120 80" width="100%" height="100%" preserveAspectRatio="xMidYMid slice" aria-hidden="true"><defs><linearGradient id="g200" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="hsl(200,70%,78%)"/><stop offset="1" stop-color="hsl(200,45%,52%)"/></linearGradient></defs><rect width="120" height="80" fill="url(#g200)"/><circle cx="92" cy="20" r="9" fill="hsl(240,90%,85%)"/><path d="M0 64 L28 40 L50 58 L74 34 L120 70 L120 80 L0 80Z" fill="hsl(200,35%,30%)" opacity=".75"/></svg><em>IMG</em></span></a><a href="#a25-3" class=""><span class="th th-s k-image"><svg viewBox="0 0 120 80" width="100%" height="100%" preserveAspectRatio="xMidYMid slice" aria-hidden="true"><defs><linearGradient id="g120" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="hsl(120,70%,78%)"/><stop offset="1" stop-color="hsl(120,45%,52%)"/></linearGradient></defs><rect width="120" height="80" fill="url(#g120)"/><circle cx="92" cy="20" r="9" fill="hsl(160,90%,85%)"/><path d="M0 64 L28 40 L50 58 L74 34 L120 70 L120 80 L0 80Z" fill="hsl(120,35%,30%)" opacity=".75"/></svg><em>IMG</em></span></a></div></div><div class="lb" id="a25-2"><div class="lb-bar"><a class="btn" href="#m25">← Back to the mail</a><b>IMG_2044.jpg</b><span class="muted">2.9 MB</span><a class="btn" href="#" style="margin-left:auto">Download</a></div><div class="lb-body"><div class="v-img"><svg viewBox="0 0 120 80" width="100%" height="100%" preserveAspectRatio="xMidYMid slice" aria-hidden="true"><defs><linearGradient id="g200" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="hsl(200,70%,78%)"/><stop offset="1" stop-color="hsl(200,45%,52%)"/></linearGradient></defs><rect width="120" height="80" fill="url(#g200)"/><circle cx="92" cy="20" r="9" fill="hsl(240,90%,85%)"/><path d="M0 64 L28 40 L50 58 L74 34 L120 70 L120 80 L0 80Z" fill="hsl(200,35%,30%)" opacity=".75"/></svg></div></div><div class=lb-strip><a href="#a25-1" class=""><span class="th th-s k-image"><svg viewBox="0 0 120 80" width="100%" height="100%" preserveAspectRatio="xMidYMid slice" aria-hidden="true"><defs><linearGradient id="g24" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="hsl(24,70%,78%)"/><stop offset="1" stop-color="hsl(24,45%,52%)"/></linearGradient></defs><rect width="120" height="80" fill="url(#g24)"/><circle cx="92" cy="20" r="9" fill="hsl(64,90%,85%)"/><path d="M0 64 L28 40 L50 58 L74 34 L120 70 L120 80 L0 80Z" fill="hsl(24,35%,30%)" opacity=".75"/></svg><em>IMG</em></span></a><a href="#a25-2" class="on"><span class="th th-s k-image"><svg viewBox="0 0 120 80" width="100%" height="100%" preserveAspectRatio="xMidYMid slice" aria-hidden="true"><defs><linearGradient id="g200" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="hsl(200,70%,78%)"/><stop offset="1" stop-color="hsl(200,45%,52%)"/></linearGradient></defs><rect width="120" height="80" fill="url(#g200)"/><circle cx="92" cy="20" r="9" fill="hsl(240,90%,85%)"/><path d="M0 64 L28 40 L50 58 L74 34 L120 70 L120 80 L0 80Z" fill="hsl(200,35%,30%)" opacity=".75"/></svg><em>IMG</em></span></a><a href="#a25-3" class=""><span class="th th-s k-image"><svg viewBox="0 0 120 80" width="100%" height="100%" preserveAspectRatio="xMidYMid slice" aria-hidden="true"><defs><linearGradient id="g120" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="hsl(120,70%,78%)"/><stop offset="1" stop-color="hsl(120,45%,52%)"/></linearGradient></defs><rect width="120" height="80" fill="url(#g120)"/><circle cx="92" cy="20" r="9" fill="hsl(160,90%,85%)"/><path d="M0 64 L28 40 L50 58 L74 34 L120 70 L120 80 L0 80Z" fill="hsl(120,35%,30%)" opacity=".75"/></svg><em>IMG</em></span></a></div></div><div class="lb" id="a25-3"><div class="lb-bar"><a class="btn" href="#m25">← Back to the mail</a><b>IMG_2050.jpg</b><span class="muted">3.1 MB</span><a class="btn" href="#" style="margin-left:auto">Download</a></div><div class="lb-body"><div class="v-img"><svg viewBox="0 0 120 80" width="100%" height="100%" preserveAspectRatio="xMidYMid slice" aria-hidden="true"><defs><linearGradient id="g120" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="hsl(120,70%,78%)"/><stop offset="1" stop-color="hsl(120,45%,52%)"/></linearGradient></defs><rect width="120" height="80" fill="url(#g120)"/><circle cx="92" cy="20" r="9" fill="hsl(160,90%,85%)"/><path d="M0 64 L28 40 L50 58 L74 34 L120 70 L120 80 L0 80Z" fill="hsl(120,35%,30%)" opacity=".75"/></svg></div></div><div class=lb-strip><a href="#a25-1" class=""><span class="th th-s k-image"><svg viewBox="0 0 120 80" width="100%" height="100%" preserveAspectRatio="xMidYMid slice" aria-hidden="true"><defs><linearGradient id="g24" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="hsl(24,70%,78%)"/><stop offset="1" stop-color="hsl(24,45%,52%)"/></linearGradient></defs><rect width="120" height="80" fill="url(#g24)"/><circle cx="92" cy="20" r="9" fill="hsl(64,90%,85%)"/><path d="M0 64 L28 40 L50 58 L74 34 L120 70 L120 80 L0 80Z" fill="hsl(24,35%,30%)" opacity=".75"/></svg><em>IMG</em></span></a><a href="#a25-2" class=""><span class="th th-s k-image"><svg viewBox="0 0 120 80" width="100%" height="100%" preserveAspectRatio="xMidYMid slice" aria-hidden="true"><defs><linearGradient id="g200" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="hsl(200,70%,78%)"/><stop offset="1" stop-color="hsl(200,45%,52%)"/></linearGradient></defs><rect width="120" height="80" fill="url(#g200)"/><circle cx="92" cy="20" r="9" fill="hsl(240,90%,85%)"/><path d="M0 64 L28 40 L50 58 L74 34 L120 70 L120 80 L0 80Z" fill="hsl(200,35%,30%)" opacity=".75"/></svg><em>IMG</em></span></a><a href="#a25-3" class="on"><span class="th th-s k-image"><svg viewBox="0 0 120 80" width="100%" height="100%" preserveAspectRatio="xMidYMid slice" aria-hidden="true"><defs><linearGradient id="g120" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="hsl(120,70%,78%)"/><stop offset="1" stop-color="hsl(120,45%,52%)"/></linearGradient></defs><rect width="120" height="80" fill="url(#g120)"/><circle cx="92" cy="20" r="9" fill="hsl(160,90%,85%)"/><path d="M0 64 L28 40 L50 58 L74 34 L120 70 L120 80 L0 80Z" fill="hsl(120,35%,30%)" opacity=".75"/></svg><em>IMG</em></span></a></div></div><div class="lb" id="a10-1"><div class="lb-bar"><a class="btn" href="#m10">← Back to the mail</a><b>R0024581133.pdf</b><span class="muted">52 KB</span><a class="btn" href="#" style="margin-left:auto">Download</a></div><div class="lb-body"><div class="v-pdf"><div class="paper"><h3>Invoice R0024581133</h3><div class="from">Hostco</div><p>Small server — €30.00</p><p>Backup space — €8.00</p><p>Address — €2.00</p><p>Total incl. VAT — €40.00</p><div class="lines"><i></i><i></i><i class="w"></i><i></i></div></div><p class="muted">page 1 of 2</p></div></div></div><div class="lb" id="a12-1"><div class="lb-bar"><a class="btn" href="#m12">← Back to the mail</a><b>factuur-oktober.pdf</b><span class="muted">88 KB</span><a class="btn" href="#" style="margin-left:auto">Download</a></div><div class="lb-body"><div class="v-pdf"><div class="paper"><h3>Factuur oktober</h3><div class="from">Telco</div><p>Internet — €55.00</p><p>Mobiel — €17.00</p><p>Korting bundel — −€6.00</p><p>Totaal — €55.00</p><div class="lines"><i></i><i></i><i class="w"></i><i></i></div></div><p class="muted">page 1 of 2</p></div></div></div><script>const R={"yes": "Hi Sara,<br><br>10:00 tomorrow works for me. I'll bring the updated sales numbers: week 42 came to 135 orders.<br><br>See you then,<br>Alex", "later": "Hi Sara,<br><br>Could we make it 11:00 instead? I'd like the morning to finish the week 43 numbers so they're complete for the team.<br><br>Thanks,<br>Alex", "no": "Hi Sara,<br><br>I can't make it tomorrow, sorry. Could Tim present? I'll send him the updated sales numbers tonight.<br><br>Alex"};
function pick(b,k){const box=b.closest('.ropts');box.querySelectorAll('button').forEach(x=>x.classList.remove('on'));b.classList.add('on');const d=box.nextElementSibling;d.hidden=false;d.querySelector('.dt').innerHTML=R[k]}
function sendIt(b){const d=b.closest('.draft');b.disabled=true;b.textContent='Asked — waiting for your Approve on Telegram';const n=document.createElement('div');n.className='sentnote';n.textContent='Nothing is sent until you approve it on your phone.';d.appendChild(n)}
const boxes=[...document.querySelectorAll('.tk input')];
function upd(){document.getElementById('pg').style.width=(100*boxes.filter(b=>b.checked).length/boxes.length)+'%'}
function snooze(b){const li=b.closest('.tk');li.classList.add('snz');b.textContent='back tomorrow morning';b.disabled=true}
function checkTodayEmpty(){const ul=document.getElementById('sect-today'),p=document.getElementById('empty-today');if(!ul||!p)return;p.style.display=ul.children.length===0?'block':'none'}
function refreshHandled(){const n=document.getElementById('handled-list').children.length;document.getElementById('handled-count').textContent=n;document.getElementById('handled-wrap').style.display=n?'block':'none'}
function onTaskChange(cb){if(cb.checked)moveToHandled(cb)}
function moveToHandled(cb){const li=cb.closest('li');if(!li)return;document.getElementById('handled-list').appendChild(li);
if(!li.querySelector('.undo-btn')){const u=document.createElement('button');u.className='link small undo-btn';u.textContent='Undo';u.onclick=function(){undoTask(li)};li.querySelector('.tb').appendChild(u)}
refreshHandled();upd();checkTodayEmpty()}
function undoTask(li){const cb=li.querySelector('input[type=checkbox]');if(cb)cb.checked=false;const target=document.getElementById('sect-'+li.dataset.sect);if(target)target.appendChild(li);
const btn=li.querySelector('.undo-btn');if(btn)btn.remove();refreshHandled();upd();checkTodayEmpty()}
let LESSONS=["Hostco invoices are paid automatically"];
function renderLessons(){document.getElementById('learned-count').textContent=LESSONS.length;document.getElementById('lessons-list').innerHTML=LESSONS.map(l=>'<li>'+l+'</li>').join('')}
function toggleLessons(){const p=document.getElementById('lessons-list');p.hidden=!p.hidden}
function addLesson(t){if(!LESSONS.includes(t)){LESSONS.push(t);renderLessons()}}
function undoLesson(btn){LESSONS=LESSONS.filter(l=>l!=='Strava mails never matter');renderLessons();btn.closest('.learned').innerHTML='Undone — Owly will mention Strava again.'}
renderLessons();
function setMode(mode){const g=document.getElementById('t-gmail'),me=document.getElementById('t-mesh'),mh=document.getElementById('t-work');
if(mode==='work'){g.checked=false;me.checked=false;mh.checked=true}else if(mode==='personal'){g.checked=true;me.checked=true;mh.checked=false}else{g.checked=true;me.checked=true;mh.checked=true}}
const A={"start": "Good morning, Alex. <b>25 mails</b> since yesterday; three need you:<a class=\"mc a-gmail\" href=\"#m1\"><span class=\"av i-gmail\">b</span><span class=\"mt\"><b>bpost</b><span>Registered mail arrives today, 08:00\u201314:00</span></span><span class=\"mw\"><span class=due>today</span></span></a><a class=\"mc a-work\" href=\"#m2\"><span class=\"av i-work\">S</span><span class=\"mt\"><b>Sara Claes</b><span>Re: Harbor demo for the team \u2014 Thursday</span></span><span class=\"mw\"><span class=due>tomorrow</span></span></a><a class=\"mc a-gmail\" href=\"#m7\"><span class=\"av i-gmail\">I</span><span class=\"mt\"><b>Immoweb</b><span>3 new apartments match &#x27;Brussel centrum, 2 bedrooms&#x27;</span></span><span class=\"mw\"><span class=due>Sat 24 Oct</span></span></a>\n The rest is quiet. One mail tried to scam you; I kept it off your phone. <button class=\"link\" onclick=\"speak()\">\ud83d\udd0a Read it to me</button>", "due": "This week:<br>\u2022 <b>today before 14:00</b>, be home for bpost's registered mail (or authorise a proxy)<a class=\"mc a-gmail\" href=\"#m1\"><span class=\"av i-gmail\">b</span><span class=\"mt\"><b>bpost</b><span>Registered mail arrives today, 08:00\u201314:00</span></span><span class=\"mw\"><span class=due>today</span></span></a>\u2022 <b>tomorrow 10:00</b>, the Harbor demo; Sara wants a confirmation and the sales numbers<a class=\"mc a-work\" href=\"#m2\"><span class=\"av i-work\">S</span><span class=\"mt\"><b>Sara Claes</b><span>Re: Harbor demo for the team \u2014 Thursday</span></span><span class=\"mw\"><span class=due>tomorrow</span></span></a>\u2022 <b>Saturday 11:00</b>, an open viewing for the apartment on Kerkstraat<a class=\"mc a-gmail\" href=\"#m7\"><span class=\"av i-gmail\">I</span><span class=\"mt\"><b>Immoweb</b><span>3 new apartments match &#x27;Brussel centrum, 2 bedrooms&#x27;</span></span><span class=\"mw\"><span class=due>Sat 24 Oct</span></span></a>", "sara": "Sara asks you to confirm tomorrow\u2019s 10:00 demo. Pick an answer and I\u2019ll write it out:<div class=\"ropts\"><button onclick=\"pick(this,'yes')\">Yes, 10:00 works</button><button onclick=\"pick(this,'later')\">Can we make it 11:00?</button><button onclick=\"pick(this,'no')\">I can\u2019t make it</button></div><div class=\"draft\" hidden><div class=\"dh\">To Sara Claes \u00b7 from work \u00b7 Owly\u2019s draft, yours to change</div><div class=\"dt\" contenteditable=\"true\"></div><div class=\"acts\"><button class=\"btn p\" onclick=\"sendIt(this)\">Send \u2014 asks your Approve on Telegram</button></div></div>", "sent": "Asked. The send waits for your Approve on Telegram; I'll tell you here when it's out.", "edit": "Tell me what to change: shorter, more formal, or something else?", "photos": "Lena sent three photos from Sunday in the park:<div class=\"pics\"><a href=\"#a25-1\"><span class=\"th th-m k-image\"><svg viewBox=\"0 0 120 80\" width=\"100%\" height=\"100%\" preserveAspectRatio=\"xMidYMid slice\" aria-hidden=\"true\"><defs><linearGradient id=\"g24\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\"><stop offset=\"0\" stop-color=\"hsl(24,70%,78%)\"/><stop offset=\"1\" stop-color=\"hsl(24,45%,52%)\"/></linearGradient></defs><rect width=\"120\" height=\"80\" fill=\"url(#g24)\"/><circle cx=\"92\" cy=\"20\" r=\"9\" fill=\"hsl(64,90%,85%)\"/><path d=\"M0 64 L28 40 L50 58 L74 34 L120 70 L120 80 L0 80Z\" fill=\"hsl(24,35%,30%)\" opacity=\".75\"/></svg><em>IMG</em></span></a><a href=\"#a25-2\"><span class=\"th th-m k-image\"><svg viewBox=\"0 0 120 80\" width=\"100%\" height=\"100%\" preserveAspectRatio=\"xMidYMid slice\" aria-hidden=\"true\"><defs><linearGradient id=\"g200\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\"><stop offset=\"0\" stop-color=\"hsl(200,70%,78%)\"/><stop offset=\"1\" stop-color=\"hsl(200,45%,52%)\"/></linearGradient></defs><rect width=\"120\" height=\"80\" fill=\"url(#g200)\"/><circle cx=\"92\" cy=\"20\" r=\"9\" fill=\"hsl(240,90%,85%)\"/><path d=\"M0 64 L28 40 L50 58 L74 34 L120 70 L120 80 L0 80Z\" fill=\"hsl(200,35%,30%)\" opacity=\".75\"/></svg><em>IMG</em></span></a><a href=\"#a25-3\"><span class=\"th th-m k-image\"><svg viewBox=\"0 0 120 80\" width=\"100%\" height=\"100%\" preserveAspectRatio=\"xMidYMid slice\" aria-hidden=\"true\"><defs><linearGradient id=\"g120\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\"><stop offset=\"0\" stop-color=\"hsl(120,70%,78%)\"/><stop offset=\"1\" stop-color=\"hsl(120,45%,52%)\"/></linearGradient></defs><rect width=\"120\" height=\"80\" fill=\"url(#g120)\"/><circle cx=\"92\" cy=\"20\" r=\"9\" fill=\"hsl(160,90%,85%)\"/><path d=\"M0 64 L28 40 L50 58 L74 34 L120 70 L120 80 L0 80Z\" fill=\"hsl(120,35%,30%)\" opacity=\".75\"/></svg><em>IMG</em></span></a></div>She asks which ones you'd like printed.<br><br>Reply in Dutch?<div class=\"ropts\"><button onclick=\"pickNL(this,'ja')\">Ja, morgen</button><button onclick=\"pickNL(this,'weekend')\">Dit weekend</button></div><div class=\"draft\" hidden><div class=\"dh\">Aan Lena Janssens \u00b7 vanaf gmail \u00b7 Owly\u2019s concept (Nederlands)</div><div class=\"dt\" contenteditable=\"true\"></div><div class=\"acts\"><button class=\"btn p\" onclick=\"sendIt(this)\">Send \u2014 asks your Approve on Telegram</button></div></div>", "scam": "Yes, one: a mail pretending to be <b>KBC</b>, from <i>kbc-verificatie.example</i>, threatening to block your account within 24 hours unless you log in through a link. Gmail filed it as junk too. I didn't tell your phone and I won't load anything from it.<a class=\"mc a-gmail\" href=\"#m3\"><span class=\"av i-gmail\">K</span><span class=\"mt\"><b>KBC Bank</b><span>Uw rekening wordt geblokkeerd \u2014 bevestig binnen 24 uur</span></span><span class=\"mw\">06:03</span></a>", "money": "Money this week: Hostco \u20ac40.00 (debited 28 Oct), Telco \u20ac55.00 (5 Nov), and your Coolblue monitor is on its way.<a class=\"mc a-mesh\" href=\"#m10\"><span class=\"av i-mesh\">H</span><span class=\"mt\"><b>Hostco</b><span>Invoice R0024581133 for October</span></span><span class=\"mw\">yesterday 11:22</span></a><a class=\"mc a-gmail\" href=\"#m12\"><span class=\"av i-gmail\">P</span><span class=\"mt\"><b>Telco</b><span>Je factuur van oktober staat klaar</span></span><span class=\"mw\">Tue 20 Oct</span></a><a class=\"mc a-gmail\" href=\"#m9\"><span class=\"av i-gmail\">C</span><span class=\"mt\"><b>Coolblue</b><span>Your order 48213977 is on its way</span></span><span class=\"mw\">06:50</span></a>", "news": "The newsletters, in three lines: Tweakers on new GPUs, The Verge on AI agents, and IKEA and Decathlon want to sell you autumn things. Nothing you need to act on.", "person_sara": "Everything with <b>Sara Claes</b>, newest first: the demo thread (4 messages, she\u2019s waiting on you since 08:55) and the HB-412 bug she assigned you yesterday.<a class=\"mc a-work\" href=\"#m2\"><span class=\"av i-work\">S</span><span class=\"mt\"><b>Sara Claes</b><span>Re: Harbor demo for the team \u2014 Thursday</span></span><span class=\"mw\"><span class=due>tomorrow</span></span></a><a class=\"mc a-work\" href=\"#m14\"><span class=\"av i-work\">J</span><span class=\"mt\"><b>Tracker</b><span>[HB-412] Report totals are counted twice</span></span><span class=\"mw\">yesterday 16:20</span></a>Want me to answer the demo question?", "queue": "Here\u2019s what I\u2019d like to do. Nothing happens without your yes.", "hostco_invoice": "Here\u2019s the Hostco invoice:<a class=\"mc a-mesh\" href=\"#a10-1\"><span class=\"th th-m k-pdf\"><div class=\"pg\"><i></i><i></i><i class=\"w\"></i><i></i><i class=\"w\"></i></div><em>PDF</em></span><span class=\"mt\"><b>R0024581133.pdf</b><span>Hostco \u00b7 52 KB</span></span><span class=\"mw\">open</span></a>", "write_lena": "Here\u2019s a mail to Lena, in Dutch:<div class=\"draft\"><div class=\"dh\">To Lena Janssens \u00b7 from gmail \u00b7 editable</div><div class=\"dt\" contenteditable=\"true\">Hoi Lena,<br><br>Ik kom morgen de foto\u2019s uitkiezen om af te drukken.<br><br>Tot dan,<br>Alex</div><div class=\"acts\"><button class=\"btn p\" onclick=\"sendIt(this)\">Send \u2014 asks your Approve on Telegram</button></div></div>", "teach_strava": "<div class=\"learned\"><b>\ud83e\udd89 Owly learned:</b> Strava mails never matter.<button class=\"link\" onclick=\"undoLesson(this)\">Undo</button></div>"};
const ACT=[["Archive the 7 newsletters", "they\u2019re in the paper trail if you want them"], ["Put Saturday 11:00 viewing in your calendar", "Kerkstraat 14"], ["Reply to Sara: \u201810:00 works\u2019", "the draft is in the conversation"], ["Report the KBC mail as phishing", "to Gmail, from the gmail account"], ["Unsubscribe from Decathlon and IKEA Family (never opened in 3 months)", "mock unsubscribe \u00b7 nothing is sent without your Approve"]];
const RNL={"ja": "Hoi Lena,<br><br>Ik kom morgen de foto\u2019s kiezen, dan print ik ze meteen.<br><br>Tot dan,<br>Alex", "weekend": "Hoi Lena,<br><br>Laat me dit weekend kiezen, dan stuur ik je mijn keuze.<br><br>Liefs,<br>Alex"};
const OWL="<svg viewBox=\"0 0 64 64\" class=\"owlsvg\" aria-hidden=\"true\"><circle cx=\"32\" cy=\"34\" r=\"26\" fill=\"#4b3a7a\"/><path d=\"M10 18 L22 26 L18 12Z M54 18 L42 26 L46 12Z\" fill=\"#4b3a7a\"/><circle cx=\"23\" cy=\"31\" r=\"10\" fill=\"#fff\"/><circle cx=\"41\" cy=\"31\" r=\"10\" fill=\"#fff\"/><circle cx=\"24\" cy=\"32\" r=\"4.5\" fill=\"#1d1640\"/><circle cx=\"40\" cy=\"32\" r=\"4.5\" fill=\"#1d1640\"/><circle cx=\"25.5\" cy=\"30.5\" r=\"1.4\" fill=\"#fff\"/><circle cx=\"41.5\" cy=\"30.5\" r=\"1.4\" fill=\"#fff\"/><path d=\"M29 40 L32 45 L35 40Z\" fill=\"#f2b84b\"/><path d=\"M16 48 Q32 58 48 48\" stroke=\"#8f7cc8\" stroke-width=\"3\" fill=\"none\"/></svg>";
const chat=document.getElementById('chat');
function bubble(html,me){const d=document.createElement('div');d.className='msg'+(me?' me':'');d.innerHTML=(me?'':'<span class="owl">'+OWL+'</span>')+'<div class="bub">'+html+'</div>';chat.appendChild(d);d.scrollIntoView({behavior:'smooth',block:'end'});return d}
function queue(){return '<div class="queue">'+ACT.map((a,i)=>'<div class="qa" id="qa'+i+'"><div>'+a[0]+'<small>'+a[1]+'</small></div><button class="btn p" onclick="this.closest(\'.qa\').classList.add(\'ok\')">Approve</button><button class="btn" onclick="this.closest(\'.qa\').remove()">Not now</button></div>').join('')+'</div>'}
function say(k){const t=bubble('<span class="typing">Owly is reading…</span>');setTimeout(()=>{t.querySelector('.bub').innerHTML=A[k]+(k==='queue'?queue():'');if(k==='teach_strava')addLesson('Strava mails never matter')},600)}
function ask(text,k){bubble(text.replace(/<[^>]+>/g,'').replace(/[0-9]+$/,''),true);say(k)}
function pickNL(b,k){const box=b.closest('.ropts');box.querySelectorAll('button').forEach(x=>x.classList.remove('on'));b.classList.add('on');const d=box.nextElementSibling;d.hidden=false;d.querySelector('.dt').innerHTML=RNL[k]}
function queryOwly(q){bubble(q.replace(/</g,'&lt;'),true);const l=q.toLowerCase();
const k=/hostco/.test(l)?'hostco_invoice':/strava/.test(l)?'teach_strava':/mail lena|tell lena|pick the photos tomorrow/.test(l)?'write_lena':/going on|with sara|from sara/.test(l)?'person_sara':/due|week|deadline|today/.test(l)?'due':/sara|demo|reply|answer/.test(l)?'sara':/photo|foto|lena|picture/.test(l)?'photos':/scam|phish|suspic|kbc/.test(l)?'scam':/money|spend|invoice|bill/.test(l)?'money':/news/.test(l)?'news':/would you|suggest|do for me/.test(l)?'queue':null;
if(k)say(k);else{const t=bubble('<span class="typing">Owly is reading…</span>');setTimeout(()=>{t.querySelector('.bub').innerHTML='I’d search your three accounts for “'+q.replace(/</g,'&lt;')+'” and answer with the mails I found. (This mockup only knows the suggestions.)'},600)}}
function free(e){e.preventDefault();const q=document.getElementById('q').value.trim();if(!q)return;document.getElementById('q').value='';queryOwly(q)}
function topSearch(e){e.preventDefault();const inp=document.getElementById('topsearch');const q=inp.value.trim();if(!q)return;inp.value='';const sheet=document.getElementById('sheet');if(sheet)sheet.checked=true;queryOwly(q)}
function speak(){if(!('speechSynthesis' in window)){alert('This browser cannot speak.');return}speechSynthesis.cancel();const u=new SpeechSynthesisUtterance("Good morning, Alex. Twenty-five mails since yesterday. Three need you. A registered letter from bpost arrives before two this afternoon; someone has to sign. Sara wants you to confirm tomorrow's demo at ten and bring the sales numbers. And a flat in Brussel centre has an open viewing on Saturday at eleven. One mail pretending to be KBC is a scam; I kept it off your phone.");u.lang='en-GB';u.rate=1.02;speechSynthesis.speak(u)}
let hlIndex=-1;
function taskEls(){return [...document.querySelectorAll('#sect-today .tk, #sect-this-week .tk, #sect-later .tk')]}
function highlight(i){const els=taskEls();if(!els.length)return;if(hlIndex>=0&&els[hlIndex])els[hlIndex].classList.remove('hl');hlIndex=Math.max(0,Math.min(i,els.length-1));els[hlIndex].classList.add('hl');els[hlIndex].scrollIntoView({block:'center',behavior:'smooth'})}
function toggleShortcuts(){const o=document.getElementById('shortcuts');o.style.display=o.style.display==='flex'?'none':'flex'}
document.addEventListener('keydown',e=>{const tag=(e.target.tagName||'').toLowerCase();if(tag==='input'||tag==='textarea'||e.target.isContentEditable){if(e.key==='Escape')e.target.blur();return}
if(e.key==='j'){highlight(hlIndex+1);e.preventDefault()}
else if(e.key==='k'){highlight(hlIndex-1);e.preventDefault()}
else if(e.key==='x'){const els=taskEls();if(hlIndex>=0&&els[hlIndex]){const cb=els[hlIndex].querySelector('input[type=checkbox]');if(cb&&!cb.checked){cb.checked=true;onTaskChange(cb)}}e.preventDefault()}
else if(e.key==='r'){const els=taskEls();if(hlIndex>=0&&els[hlIndex]){const d=els[hlIndex].querySelector('details.rd');if(d){d.open=true;d.scrollIntoView({block:'center'})}}e.preventDefault()}
else if(e.key==='/'){const q=document.getElementById('q');if(q)q.focus();e.preventDefault()}
else if(e.key==='?'){toggleShortcuts();e.preventDefault()}});
checkTodayEmpty();
bubble('Ask me anything about your mail, or tap a suggestion. I can also draft replies and propose what to tidy up.');
</script></body></html>