/* Stoner Bot Control Center: Activity pages (v3.1.76)
 * Owner: Claude (integration). Shared row style for Settings → Activity log and the full
 * Live Activity history (js/activity-pages.js). Hooks are listed in HOOKS.md ("Activity pages").
 * Tones follow the theme: green #6fdc9c, amber #f0c36a, rose #f3a1b4, lavender #b388eb.
 */

/* Home: "See all" next to the LIVE pill */
#screen .section-head .sb-activity-see-all{
  margin:0 0 0 auto;padding:6px 2px;border:0;background:none;
  color:#d2aafa;font-size:13px;font-weight:650;letter-spacing:-.1px
}
#screen .section-head .sb-activity-see-all::after{content:" ›";font-weight:700}
#screen .section-head .sb-activity-see-all:active{opacity:.6}

/* Pull to refresh */
#screen .sb-ptr{
  height:0;overflow:hidden;display:flex;align-items:center;justify-content:center;gap:9px;
  color:var(--sb-secondary,#aaa3b7);font-size:12px;font-weight:600;
  transition:height .2s ease
}
#screen .sb-ptr-spinner{
  width:16px;height:16px;border-radius:50%;
  border:2px solid rgba(179,136,235,.25);border-top-color:#b388eb;
  transition:transform .2s ease
}
#screen .sb-ptr[data-ready="true"] .sb-ptr-spinner{transform:rotate(180deg)}
#screen .sb-ptr[data-busy="true"] .sb-ptr-spinner{animation:sb-ptr-spin .8s linear infinite}
@keyframes sb-ptr-spin{to{transform:rotate(360deg)}}

/* Filters (history page) */
#screen .card.sb-log-filters{display:flex;flex-direction:column;gap:12px;margin-bottom:14px;padding:14px}
#screen .sb-log-chips{display:flex;gap:7px;overflow-x:auto;scrollbar-width:none;margin:0 -14px;padding:0 14px}
#screen .sb-log-chips::-webkit-scrollbar{display:none}
#screen .sb-log-chip{
  flex:none;height:32px;padding:0 13px;border-radius:999px;
  border:1px solid rgba(214,192,246,.16);background:rgba(255,255,255,.045);
  color:#cfc6da;font-size:12px;font-weight:650
}
#screen .sb-log-chip[aria-pressed="true"]{
  color:#130e1b;background:linear-gradient(135deg,#b388eb,#9668cc);border-color:rgba(179,136,235,.6)
}
#screen .sb-log-pickers{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:9px}
/* Keeps the design system's 48px height and 16px text (smaller text makes iOS zoom in). */
#screen .sb-log-select{padding:10px 8px 10px 12px!important;font-size:16px;border-radius:14px;color:#cfc6da;text-overflow:ellipsis}
#screen .sb-log-select[data-set="true"]{border-color:rgba(179,136,235,.55);color:#f5effa}
#screen .sb-log-clear{
  align-self:flex-start;padding:2px 0;border:0;background:none;color:#d2aafa;font-size:12px;font-weight:650
}

/* Day groups */
#screen .sb-log-day + .sb-log-day{margin-top:18px}
#screen .sb-log-day-label{
  margin:0 0 4px!important;font-size:11px!important;font-weight:750!important;letter-spacing:1.2px!important;
  text-transform:uppercase;color:#9d91ad
}

/* Rows */
#screen .sb-log-item{border-bottom:1px solid rgba(225,206,246,.085)}
#screen .sb-log-day .sb-log-item:last-child{border-bottom:0}
#screen .sb-log-row{
  width:100%;display:flex;align-items:center;gap:12px;padding:12px 0;margin:0;
  border:0;background:none;color:inherit;text-align:left;border-radius:0
}
#screen .sb-log-row:active{opacity:.7}
#screen .sb-log-icon{
  flex:0 0 34px;width:34px;height:34px;border-radius:11px;display:flex;align-items:center;justify-content:center;
  background:rgba(179,136,235,.10);color:#b388eb
}
#screen .sb-log-icon svg{width:17px;height:17px}
#screen .sb-log-icon.has-avatar{padding:0;overflow:hidden}
#screen .sb-log-icon img{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit}
#screen .sb-log-row[data-tone="success"] .sb-log-icon:not(.has-avatar){background:rgba(111,220,156,.11);color:#6fdc9c}
#screen .sb-log-row[data-tone="warning"] .sb-log-icon:not(.has-avatar){background:rgba(240,195,106,.11);color:#f0c36a}
#screen .sb-log-row[data-tone="error"] .sb-log-icon:not(.has-avatar){background:rgba(243,161,180,.11);color:#f3a1b4}
#screen .sb-log-row[data-tone] .sb-log-icon.has-avatar{box-shadow:0 0 0 2px currentColor}
#screen .sb-log-row[data-tone="success"] .sb-log-icon.has-avatar{color:rgba(111,220,156,.55)}
#screen .sb-log-row[data-tone="warning"] .sb-log-icon.has-avatar{color:rgba(240,195,106,.6)}
#screen .sb-log-row[data-tone="error"] .sb-log-icon.has-avatar{color:rgba(243,161,180,.6)}
#screen .sb-log-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
#screen .sb-log-text strong{font-size:14px;font-weight:650;letter-spacing:-.15px;overflow-wrap:anywhere}
#screen .sb-log-row[data-tone="warning"] .sb-log-text strong{color:#f0c36a}
#screen .sb-log-row[data-tone="error"] .sb-log-text strong{color:#f3a1b4}
#screen .sb-log-text small{font-size:12px;line-height:1.45;color:var(--sb-secondary,#aaa2b5);overflow-wrap:anywhere}
#screen .sb-log-time{flex:none;align-self:flex-start;padding-top:2px;font-size:11px;color:#8f879e;white-space:nowrap}

/* Details (tap a row) */
#screen .sb-log-details{
  display:grid;grid-template-columns:max-content minmax(0,1fr);gap:6px 14px;
  margin:0 0 12px 46px;padding:11px 13px;border-radius:13px;
  background:rgba(10,9,17,.38);border:1px solid rgba(214,192,246,.09);font-size:12px
}
#screen .sb-log-details[hidden]{display:none}
#screen .sb-log-details dt{color:#8f879e;font-weight:600}
#screen .sb-log-details dd{margin:0;color:#e6dced;overflow-wrap:anywhere}

#screen .sb-log-end,#screen .sb-log-error{margin:0;text-align:center;font-size:12px!important}
#screen .sb-log-error{color:#f3a1b4!important;margin-top:12px}

@media (prefers-reduced-motion:reduce){
  #screen .sb-ptr,#screen .sb-ptr-spinner{transition:none}
}

/* One-line rows: keep the time level with the title */
#screen .sb-log-row:not(:has(small)) .sb-log-time{align-self:center;padding-top:0}