:root{--blue:#4285f4;--green:#0f9d58;--red:#db4437;--ink:#202124;--sub:#5f6368}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{font-family:Roboto,Arial,sans-serif;margin:0;background:#f1f3f4;color:var(--ink)}
.toolbar{background:var(--blue);color:#fff;display:flex;align-items:center;gap:8px;padding:10px 12px;position:sticky;top:0;z-index:5}
.title{font-size:19px;flex:1}
.iconbtn{background:none;border:0;cursor:pointer;padding:6px;border-radius:50%}
.iconbtn svg{width:22px;height:22px;fill:#fff;display:block}
.iconbtn.dim{opacity:.45}.iconbtn.lit{opacity:1}
.searchbar{background:var(--blue);padding:0 12px 10px}
.searchbar input{width:100%;border:0;border-radius:4px;padding:9px 12px;font-size:15px}
.drawer{display:flex;gap:6px;background:#fff;padding:8px 10px;box-shadow:0 1px 2px rgba(0,0,0,.15);overflow-x:auto}
.drawer button{border:1px solid #dadce0;background:#fff;border-radius:16px;padding:6px 12px;cursor:pointer;white-space:nowrap;font-size:14px}
.drawer button.active{background:#e8f0fe;border-color:var(--blue);color:#1a73e8}
.stream{max-width:640px;margin:0 auto;padding:8px 0 110px}
.day{color:var(--sub);font-size:13px;padding:14px 16px 4px}
.thread{position:relative;overflow:hidden;background:#fff;margin:6px 8px;border-radius:8px;box-shadow:0 1px 2px rgba(0,0,0,.12)}
.thread.pinned .swipe-inner{border-left:4px solid var(--blue)}
.swipe-inner{display:flex;gap:12px;align-items:center;background:#fff;padding:11px 12px;touch-action:pan-y;will-change:transform}
.swipe-inner.settle{transition:transform .18s ease-out}
.thread-bg{position:absolute;inset:0;display:flex;align-items:center;justify-content:space-between;padding:0 18px;color:#fff;font-size:18px;background:linear-gradient(to right,var(--green) 0 50%,#f9ab00 50% 100%)}
.thread.snoozed-row{opacity:.85}
.avatar{width:40px;height:40px;border-radius:50%;background:#5f6368;color:#fff;display:flex;align-items:center;justify-content:center;flex:none;font-weight:500}
.avatar.bundle{background:#0097a7}.avatar.rem{background:#1a73e8}
.body{flex:1;min-width:0}
.subj{font-size:15px}.meta{color:var(--sub);font-size:12px}
.snip{color:#3c4043;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.assist{color:#137333;font-size:12px}
.clock{color:#b06000;font-size:12px}
.rowbtns{display:flex;gap:2px;flex:none}
.rowbtns button{border:0;background:none;cursor:pointer;font-size:17px;padding:6px;color:#5f6368;border-radius:50%}
.rowbtns button:hover{background:#f1f3f4}
.rowbtns .done{color:var(--green)}
.bundle-head{background:#0097a7;color:#fff;padding:14px 16px;display:flex;gap:10px;align-items:center;border-radius:8px;margin:6px 8px}
.sweep{margin-left:auto;border:0;border-radius:4px;background:rgba(255,255,255,.22);color:#fff;padding:7px 12px;cursor:pointer;font-size:14px}
.fab{position:fixed;right:22px;bottom:22px;width:56px;height:56px;border-radius:50%;border:0;background:var(--red);color:#fff;font-size:30px;line-height:1;cursor:pointer;box-shadow:0 3px 6px rgba(0,0,0,.3)}
.fabmenu{position:fixed;right:22px;bottom:90px;display:flex;flex-direction:column;gap:8px}
.fabmenu button{border:0;background:#fff;border-radius:20px;padding:10px 16px;box-shadow:0 2px 5px rgba(0,0,0,.25);cursor:pointer;font-size:14px}
.sheet{position:fixed;left:0;right:0;bottom:0;background:#fff;border-radius:16px 16px 0 0;box-shadow:0 -3px 12px rgba(0,0,0,.25);padding:14px 16px 24px;max-width:640px;margin:0 auto;z-index:10;max-height:80vh;overflow:auto}
.sheet h2{font-size:17px;margin:4px 4px 10px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.grid button{background:#f8f9fa;border:1px solid #dadce0;border-radius:8px;padding:15px 6px;cursor:pointer;font-size:14px}
.grid button small{display:block;color:var(--sub);font-size:11px;margin-top:3px}
.cancel{margin-top:12px;width:100%;border:0;background:none;color:var(--sub);padding:10px;cursor:pointer;font-size:15px}
.sheet input[type=text],.sheet input:not([type]),#remTitle,#customDate{width:100%;border:1px solid #dadce0;border-radius:8px;padding:11px;font-size:15px;margin-bottom:10px}
#customGo{border:0;background:var(--blue);color:#fff;border-radius:8px;padding:11px 18px;cursor:pointer;font-size:15px}
.toast{position:fixed;left:16px;right:16px;bottom:24px;max-width:600px;margin:0 auto;background:#323232;color:#fff;padding:13px 16px;border-radius:8px;display:flex;gap:12px;align-items:center;z-index:20;font-size:14px}
.toast button{margin-left:auto;background:none;border:0;color:#fdd663;font-weight:700;cursor:pointer}
.empty{text-align:center;color:var(--sub);padding:60px 20px}
.empty .sun{font-size:44px}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

.connection { max-width: 920px; margin: 12px auto; padding: 0 18px; color: #546e7a; font-size: 13px; }
.more { display: block; margin: 12px auto 96px; }
.sheet.reader { max-height: 85vh; overflow-y: auto; width: min(900px, 94vw); }
.reader article { border-bottom: 1px solid #ddd; padding: 12px 0; }
.reader h3 { font-size: 14px; font-weight: 500; overflow-wrap: anywhere; }
.reader pre { white-space: pre-wrap; overflow-wrap: anywhere; font: 15px/1.6 system-ui, sans-serif; }
.sheet label { display: block; margin: 12px 0; color: #546e7a; }
.sheet input, .sheet textarea { display: block; width: 100%; box-sizing: border-box; margin-top: 6px; padding: 10px; font: inherit; border: 1px solid #bbb; border-radius: 4px; }
.sheet { max-height: 90vh; overflow-y: auto; }
.thread:focus-visible { outline: 2px solid #4285f4; outline-offset: -2px; }
button:disabled { opacity: .5; cursor: wait; }
[hidden] { display: none !important; }
.sheet select { display: block; width: 100%; padding: 10px; margin-top: 6px; border: 1px solid #bbb; border-radius: 4px; font: inherit; background: white; }
.rule-row { display: grid; grid-template-columns: 110px 1fr; gap: 8px; border-bottom: 1px solid #eee; padding: 8px 0; }
.rule-row .cancel { grid-column: 1 / -1; margin: 0; padding: 4px; text-align: right; }
#bundleError { color: #b3261e; }
#heldCount:empty { display: none; }
.connection-bar { max-width: 640px; margin: 10px auto; padding: 0 12px; display: flex; gap: 10px; align-items: center; }
.connection-bar .connection { margin: 0; padding: 0; flex: 1; }
.connection-bar button { border: 0; background: #e8f0fe; color: #1a73e8; border-radius: 18px; padding: 8px 12px; cursor: pointer; white-space: nowrap; }
#selectBtn { color: white; font-size: 13px; }
.bulkbar { max-width: 640px; margin: 10px auto; padding: 8px 12px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; background: #e8f0fe; border-radius: 8px; }
.bulkbar button { border: 0; background: white; border-radius: 4px; padding: 8px; cursor: pointer; color: #1a73e8; }
.bulkbar label { white-space: nowrap; }
.select-thread, .select-bundle { width: 18px; height: 18px; flex: none; accent-color: #4285f4; cursor: pointer; }
/* Google's supplied light/pill button is rendered unchanged, at its native aspect ratio. */
.connection-bar button.google-signin { padding: 0; border: 0; border-radius: 20px; background: transparent; flex: none; height: 40px; }
.google-signin img { display: block; height: 40px; width: auto; }
.google-signin:hover { box-shadow: 0 1px 4px #0002; }
.google-signin:focus-visible { outline: 2px solid #4285f4; outline-offset: 3px; }
.auth-message { display: flex; gap: 12px; align-items: center; max-width: 640px; margin: 12px auto; padding: 12px 16px; color: #174ea6; background: #e8f0fe; border-radius: 8px; font-size: 14px; }
.auth-message button { margin-left: auto; border: 0; background: transparent; color: inherit; font-size: 22px; cursor: pointer; }
@media (max-width: 480px) { .connection-bar { align-items: flex-start; flex-direction: column; } .auth-message { margin: 12px; } }