/* Shout-outs pages only: keep the Teacher Mike widget in the right gutter so it never covers content. */
body:has(.det){--tm-col:900px}body:has(.so-grid){--tm-col:1120px}
body:has(.det) .tm-widget,body:has(.so-grid) .tm-widget{--tm-gut:calc((100vw - var(--tm-col)) / 2 - 20px);right:10px;flex-direction:column;align-items:flex-end;gap:8px}
body:has(.det) .tm-bubble,body:has(.so-grid) .tm-bubble{margin-bottom:0;width:min(240px,var(--tm-gut))}
body:has(.det) .tm-bubble::after,body:has(.so-grid) .tm-bubble::after{right:34px;bottom:-6px}
body:has(.det) .tm-avatar,body:has(.so-grid) .tm-avatar,body:has(.det) .tm-widget.stage-4 .tm-avatar,body:has(.so-grid) .tm-widget.stage-4 .tm-avatar{width:min(110px,var(--tm-gut))}
/* gutter too narrow for the bubble: avatar only */
@media (max-width:1299px){body:has(.det) .tm-bubble{display:none}}
@media (max-width:1619px){body:has(.so-grid) .tm-bubble{display:none}}
/* no gutter (tablet/phone): small avatar tucked bottom-right, page gets room to scroll clear of it */
@media (max-width:1079px){body:has(.det) .tm-avatar,body:has(.det) .tm-widget.stage-4 .tm-avatar{width:56px}body:has(.det){padding-bottom:80px}}
@media (max-width:1299px){body:has(.so-grid) .tm-avatar,body:has(.so-grid) .tm-widget.stage-4 .tm-avatar{width:56px}body:has(.so-grid){padding-bottom:80px}}
@media (max-width:1079px){body:has(.det) .tm-widget,body:has(.so-grid) .tm-widget{right:4px}}
/* index: last chip line aligns across a row */
.so-grid>.so{height:auto}.so-grid .so .btns{margin-top:auto;align-content:flex-end}
/* phones: no gutter, so dock Mike as a small round head chip in the bottom-right corner */
@media (max-width:767px){
 body:has(.det) .tm-widget,body:has(.so-grid) .tm-widget{right:10px;bottom:10px}
 body:has(.det) .tm-avatar,body:has(.so-grid) .tm-avatar,body:has(.det) .tm-widget.stage-4 .tm-avatar,body:has(.so-grid) .tm-widget.stage-4 .tm-avatar{width:46px;height:46px;border-radius:50%;overflow:hidden;background:#e6e8eb;box-shadow:0 0 0 2px #fff,0 4px 12px rgba(0,0,0,.3);filter:none}
 body:has(.det) .tm-avatar img,body:has(.so-grid) .tm-avatar img{width:100%;height:auto;transform:scale(2.6);transform-origin:50% 4%}
 body:has(.det),body:has(.so-grid){padding-bottom:70px}
}