/* Composer pill: "Free Coding · Medium" with one menu for activity, model and effort. */
.mode-picker-button{display:inline-flex;align-items:center;gap:7px;max-width:100%;padding:6px 11px;border:1px solid rgba(160,200,215,.22);border-radius:999px;background:rgba(255,255,255,.045);color:inherit;font:600 12.5px/1.2 system-ui,sans-serif;cursor:pointer;white-space:nowrap}
.mode-picker-button:hover{background:rgba(255,255,255,.09);border-color:rgba(160,230,235,.45)}
.mode-picker-button:focus-visible{outline:2px solid #8be4d4;outline-offset:2px}
.mode-picker-button[aria-expanded=true]{background:rgba(120,230,225,.14);border-color:#5fd8cd}
.mode-picker-button[data-paid="1"] .mode-picker-name{color:#ffd48a}
.mode-picker-effort{color:#b99bff;font-weight:600}
.mode-picker-effort[hidden]{display:none}
.mode-picker-caret{opacity:.7;font-size:11px}
.mode-picker-menu{position:absolute;left:0;bottom:calc(100% + 8px);z-index:40;width:min(360px,calc(100vw - 24px));max-height:min(70vh,560px);overflow-y:auto;padding:10px;border:1px solid rgba(160,210,225,.28);border-radius:16px;background:rgba(14,24,35,.98);box-shadow:0 18px 50px rgba(0,0,0,.55);color:#e9f4f8;font:13px/1.35 system-ui,sans-serif}
.mode-picker-menu[hidden]{display:none}
.mode-picker-section+.mode-picker-section{margin-top:10px;padding-top:8px;border-top:1px solid rgba(160,210,225,.15)}
.mode-picker-section h3{margin:2px 6px 6px;color:#8fb3c2;font:700 10.5px/1.2 system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase}
.mode-picker-row{display:flex;align-items:center;gap:8px;width:100%;padding:8px 8px;border:0;border-radius:10px;background:transparent;color:inherit;text-align:left;cursor:pointer;font:inherit}
.mode-picker-row:hover:not(:disabled),.mode-picker-row:focus-visible{background:rgba(120,230,225,.12);outline:none}
.mode-picker-row:disabled{opacity:.5;cursor:not-allowed}
.mode-picker-row[aria-checked=true]{background:rgba(120,230,225,.14)}
.mode-picker-row-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.mode-picker-row-text strong{font-weight:650}
.mode-picker-row-text small{color:#9ab6c2;font-size:11.5px;overflow-wrap:anywhere}
.mode-picker-tag{padding:2px 7px;border-radius:99px;font-size:10.5px;font-weight:700;letter-spacing:.02em}
.mode-picker-tag.is-free{background:rgba(80,230,150,.16);color:#8ff0b8}
.mode-picker-tag.is-paid{background:rgba(255,190,90,.16);color:#ffd48a}
.mode-picker-check{width:16px;text-align:center;color:#8be4d4;font-weight:700}
.mode-picker-effort-group{display:flex;gap:4px;padding:2px 4px}
.mode-picker-effort-choice{flex:1;padding:7px 4px;border:1px solid rgba(160,210,225,.22);border-radius:9px;background:rgba(255,255,255,.04);color:inherit;font:600 12px system-ui,sans-serif;cursor:pointer}
.mode-picker-effort-choice[aria-checked=true]{background:rgba(185,155,255,.22);border-color:#b99bff;color:#efe6ff}
.mode-picker-effort-choice:disabled{opacity:.5;cursor:not-allowed}
.mode-picker-empty,.mode-picker-lock{margin:4px 6px;color:#9ab6c2;font-size:12px}
.mode-picker-lock{padding:7px 9px;border-radius:9px;background:rgba(255,190,90,.1);color:#ffd9a0}
@media(max-width:800px){.mode-picker-menu{position:fixed;left:8px;right:8px;bottom:84px;width:auto;max-height:62vh}}

/* Separate compact model and effort menus. */
.mode-picker-menu{width:min(260px,calc(100vw - 24px));max-height:min(42vh,320px);padding:6px}.mode-picker-row{padding:7px 9px}.effort-picker-menu{left:auto;right:0;width:150px}.mode-picker-effort{margin-left:4px}

/* Viewport-positioned menus escape scrolling and clipping ancestors. */
body > .mode-picker-menu{position:fixed;z-index:1000}