/* The Bountee app frame: a quiet sidebar on a desktop, a tab bar on a phone, one toast.
   Prefixed bt- so it sits on any page. Colours come from app.css's token blocks. */
body.bt-app{padding-left:var(--side-w)}
.bt-side{position:fixed;left:0;top:0;bottom:0;width:var(--side-w);z-index:40;background:var(--paper);border-right:1px solid var(--line);
  display:flex;flex-direction:column;gap:24px;padding:24px 16px 20px;overflow-y:auto}
.bt-brand{display:flex;align-items:center;gap:9px;padding:4px 12px;color:var(--ink);text-decoration:none;font-weight:600;font-size:19px;letter-spacing:-.02em;line-height:1}
.bt-brand:hover{text-decoration:none}
.bt-mark{width:22px;height:22px;flex:none;display:block}
.bt-nav{display:flex;flex-direction:column;gap:4px}
.bt-nav a{display:flex;align-items:center;gap:12px;min-height:44px;padding:0 12px;border-radius:var(--r-input);border:1px solid transparent;color:var(--muted-strong);text-decoration:none;
  font-family:var(--font);font-size:14.5px;font-weight:500;letter-spacing:0;text-transform:none;transition:color var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease)}
.bt-nav a:hover{color:var(--ink)}
.bt-nav a.on{background:var(--white);border-color:var(--line);color:var(--ink)}
.bt-nav a svg{width:18px;height:18px;flex:none}
.bt-nav a .lbl{flex:1}
.bt-nav a .n{font-family:var(--mono);font-size:11px;letter-spacing:0}
.bt-nav a .needs{width:7px;height:7px;border-radius:50%;background:var(--signal);flex:none}
.bt-side .bt-spacer{flex:1}
.bt-listen{display:flex;align-items:center;gap:10px;padding:0 12px;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--agent-ink)}
/* Billing (DEC-403): the trial countdown in the sidebar, and one calm line when nothing can be sent. */
.bt-trial{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 4px 12px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-input);background:var(--white);font-family:var(--font);font-size:12.5px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--ink);text-decoration:none}
.bt-trial:hover{border-color:var(--ink)}
.bt-trial .d{color:var(--muted-strong)}
.bt-billbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;max-width:1120px;margin:16px auto 0;padding:12px 16px;border:1px solid var(--line);border-left:3px solid var(--signal);border-radius:var(--r-input);background:var(--white);font-size:14px;color:var(--ink)}
.bt-billbar a{color:var(--ink);font-weight:600;text-underline-offset:3px}
@media (min-width:1024px){ .bt-app .bt-billbar{margin:16px 40px 0 auto;max-width:1040px} }
@media (max-width:1023px){ .bt-billbar{margin:12px 16px 0} }
.bt-me{position:relative;border-top:1px solid var(--line);padding-top:12px}
.bt-mebtn{display:flex;align-items:center;gap:12px;width:100%;padding:8px 12px;border-radius:var(--r-input);text-align:left;min-height:52px}
.bt-mebtn:hover{background:var(--white)}
.bt-mebtn .who{display:flex;flex-direction:column;gap:2px;min-width:0}
.bt-mebtn .nm{font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bt-mebtn .ws{font-family:var(--font);font-size:12.5px;letter-spacing:0;text-transform:none;color:var(--muted-strong);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bt-menu{position:absolute;left:0;right:0;bottom:64px;background:var(--white);border:1px solid var(--line);border-radius:var(--r-card);padding:6px;box-shadow:var(--e2);z-index:60}
.bt-menu button,.bt-menu a{display:flex;width:100%;text-align:left;padding:10px 12px;border-radius:6px;color:var(--ink);gap:8px;align-items:center;background:none;border:none;font:inherit;font-size:14px;cursor:pointer;text-decoration:none;min-height:40px}
.bt-menu button:hover,.bt-menu a:hover{background:var(--paper)}
.bt-menu hr{border:none;border-top:1px solid var(--line);margin:6px 0}
.bt-menu .who{font-size:12.5px;color:var(--muted-strong);padding:6px 12px}
.bt-menu .bt-newws{display:flex;gap:6px;padding:4px 6px 8px;align-items:center}
.bt-menu .bt-newws input{flex:1;min-width:0;min-height:36px;padding:6px 10px;font-size:14px}
.bt-menu .bt-newws button{width:auto;flex:none;min-height:36px;padding:6px 14px;justify-content:center;background:var(--ink);color:var(--paper);border-radius:var(--r-pill)}
.bt-menu .bt-newws button:hover{background:var(--ink)}
.bt-tabbar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--glass);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
  border-top:1px solid var(--line);padding:6px 8px calc(6px + env(safe-area-inset-bottom));justify-content:space-around}
.bt-tabbar a{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-height:52px;text-decoration:none;color:var(--muted-strong);
  font-family:var(--font);font-size:11px;font-weight:500;letter-spacing:0;text-transform:none}
.bt-tabbar a.on{color:var(--ink)}
.bt-tabbar a svg{width:22px;height:22px}
.bt-tabbar a .needs{position:absolute;top:6px;left:calc(50% + 8px);width:7px;height:7px;border-radius:50%;background:var(--signal)}
.bt-toast{position:fixed;left:50%;bottom:32px;transform:translateX(-50%);background:var(--ink);color:var(--paper);padding:12px 18px;border-radius:var(--r-card);z-index:100;box-shadow:var(--e2);
  max-width:calc(100vw - 32px);font-size:14px;line-height:1.45;animation:rise var(--dur-med) var(--ease) both}
.bt-toast .undo{margin-left:12px;color:var(--paper);text-decoration:underline;text-underline-offset:3px;font-weight:600}
@media (max-width:1023px){
  body.bt-app{padding-left:0;padding-bottom:calc(72px + env(safe-area-inset-bottom))}
  .bt-side{display:none}
  .bt-tabbar{display:flex}
  .bt-toast{bottom:calc(88px + env(safe-area-inset-bottom))}
}