/* Only the existing model control and its effort picker. */
body[data-page=chat] #composer #modelName[data-effort-supported=true]{display:inline-flex!important;align-items:center;justify-content:center;order:2;flex:0 1 auto;gap:5px;min-width:0;max-width:140px;min-height:29px!important;height:29px!important;padding:0 9px!important;margin:0 3px;border:0!important;border-radius:999px!important;background:var(--tool-bg,#efefed)!important;color:var(--text,#252525)!important;font:500 11px/1.2 -apple-system,BlinkMacSystemFont,sans-serif;white-space:nowrap;cursor:pointer}
#modelName .composer-model-name{min-width:0;overflow:hidden;text-overflow:ellipsis}
#modelName .composer-model-effort{flex:none;color:var(--meta,#777);font-weight:400}
#modelName .composer-model-chevron{flex:none;color:var(--meta,#777);font-size:11px}
.composer-effort-menu{position:fixed;z-index:10020;max-height:calc(100dvh - 24px);overflow:auto;padding:7px;border:1px solid var(--stroke,#dedbd7);border-radius:16px;background:var(--surface-strong,#fff);color:var(--text,#252525);box-shadow:0 6px 24px #00000015;font:14px/1.35 -apple-system,BlinkMacSystemFont,sans-serif}
.composer-effort-menu[hidden]{display:none!important}
.composer-effort-title{padding:7px 10px;color:var(--meta,#777);font-size:11px}
.composer-effort-option{display:flex;align-items:center;gap:9px;width:100%;min-height:38px;padding:9px 10px;border:0;border-radius:10px;background:transparent;color:inherit;text-align:left;font:inherit;cursor:pointer}
.composer-effort-chinese{color:var(--meta,#777);font-size:12px}
.composer-effort-option[aria-checked=true]{background:var(--tool-bg,#efefed);font-weight:600}
.composer-effort-option[aria-checked=true]::after{content:'✓';margin-left:auto}
.composer-effort-option:focus-visible,#modelName:focus-visible{outline:2px solid var(--action,#777);outline-offset:2px}
@media(max-width:370px){body[data-page=chat] #composer #modelName[data-effort-supported=true]{max-width:123px;gap:4px;padding-inline:7px!important;font-size:10px}}

/* Full-width writing area, with the controls on their own row. */
body[data-page=chat]:not([data-native-shell='1']) #appShell #composerZone{width:min(664px,calc(100% - 40px))!important}
body[data-page=chat]:not([data-native-shell='1']) #appShell #composer{padding:8px!important;border-radius:24px!important}
body[data-page=chat]:not([data-native-shell='1']) #appShell #composer .composer-tools{display:grid!important;grid-template-columns:34px minmax(0,1fr) 34px 34px 44px!important;grid-template-rows:auto 34px;align-items:center!important;gap:4px 6px!important;width:100%;margin:0!important}
body[data-page=chat]:not([data-native-shell='1']) #appShell #composer #messageInput{grid-area:1 / 1 / 2 / -1;box-sizing:border-box;width:100%!important;min-width:0!important;min-height:32px!important;max-height:110px!important;padding:4px 4px!important;margin:0!important;border:0!important;border-radius:0!important;background:transparent!important;font-size:16px!important;line-height:22px!important;resize:none}
body[data-page=chat]:not([data-native-shell='1']) #appShell #composer #messageInput::placeholder{font-size:16px!important}
/* The themed focus ring belongs to controls, not the writing area inside the composer. */
body[data-page=chat]:not([data-native-shell='1']) #appShell #composer #messageInput:focus,
body[data-page=chat]:not([data-native-shell='1']) #appShell #composer #messageInput:focus-visible{outline:none!important;outline-offset:0!important;box-shadow:none!important}
body[data-page=chat]:not([data-native-shell='1']) #appShell #composer .composer-tools>:is(.sanctuary-compose-more,#addButton){grid-area:2 / 1;justify-self:start;box-sizing:border-box;width:34px!important;min-width:34px!important;height:34px!important;min-height:34px!important;margin:0!important;padding:5px!important}
body[data-page=chat]:not([data-native-shell='1']) #appShell #composer #modelName[data-effort-supported=true]{grid-area:2 / 2;justify-self:start;box-sizing:border-box;max-width:100%;height:29px!important;min-height:29px!important;margin:0!important;padding:0 10px!important;font-size:12px}
body[data-page=chat]:not([data-native-shell='1']) #appShell #composer #stickerButton{grid-area:2 / 3}
body[data-page=chat]:not([data-native-shell='1']) #appShell #composer #recordButton{grid-area:2 / 4}
body[data-page=chat]:not([data-native-shell='1']) #appShell #composer .send-button{grid-area:2 / 5;box-sizing:border-box;justify-self:end;width:44px!important;min-width:44px!important;height:34px!important;min-height:34px!important;border-radius:999px!important;margin:0!important}
body[data-page=chat]:not([data-native-shell='1']) #appShell #composer :is(#stickerButton,#recordButton){box-sizing:border-box;width:34px!important;min-width:34px!important;height:34px!important;min-height:34px!important;margin:0!important;padding:5px!important;align-self:center!important}
/* The default skin also has a separate dictation button. */
body[data-page=chat]:not([data-native-shell='1']) #appShell #composer .composer-tools:has(>#voiceButton){grid-template-columns:32px minmax(0,1fr) 30px 30px 30px 40px!important;column-gap:4px!important}
body[data-page=chat]:not([data-native-shell='1']) #appShell #composer .composer-tools>#voiceButton{grid-area:2 / 4;box-sizing:border-box;width:30px!important;min-width:30px!important;height:34px!important;min-height:34px!important;margin:0!important;padding:4px!important;align-self:center!important;border:0!important;border-radius:50%!important}
body[data-page=chat]:not([data-native-shell='1']) #appShell #composer .composer-tools:has(>#voiceButton)>#recordButton{grid-column:5}
body[data-page=chat]:not([data-native-shell='1']) #appShell #composer .composer-tools:has(>#voiceButton)>.send-button{grid-column:6;width:40px!important;min-width:40px!important}
body[data-page=chat]:not([data-native-shell='1']) #appShell #composer .composer-tools>#promptButton{display:none!important}
@media(max-width:350px){body[data-page=chat]:not([data-native-shell='1']) #appShell #composer{padding:8px!important}body[data-page=chat]:not([data-native-shell='1']) #appShell #composer #modelName[data-effort-supported=true]{font-size:11px;padding-inline:8px!important}}

/* A quiet matte surface over a selected wallpaper; text and icons stay opaque. */
html[data-ui-skin=sanctuary][data-has-chat-background=true] body[data-page=chat]:not([data-native-shell='1']) #appShell #composer{
 --composer-wallpaper-surface:rgba(222,223,220,.9);--composer-wallpaper-pill:rgba(42,43,40,.07);
 --composer-wallpaper-stroke:rgba(63,64,59,.18);--composer-wallpaper-send:#383a35;--composer-wallpaper-send-ink:#f7f7f3;
 background:var(--composer-wallpaper-surface)!important;border-color:var(--composer-wallpaper-stroke)!important;
 box-shadow:0 3px 14px #191a170f!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
}
html[data-ui-skin=sanctuary][data-has-chat-background=true][data-theme=dark] body[data-page=chat]:not([data-native-shell='1']) #appShell #composer{
 --composer-wallpaper-surface:rgba(44,45,42,.9);--composer-wallpaper-pill:rgba(240,241,234,.08);
 --composer-wallpaper-stroke:rgba(225,227,219,.18);--composer-wallpaper-send:#d9dad4;--composer-wallpaper-send-ink:#262724;
}
html[data-ui-skin=sanctuary][data-has-chat-background=true] body[data-page=chat]:not([data-native-shell='1']) #appShell #composer #modelName[data-effort-supported=true]{background:var(--composer-wallpaper-pill)!important}
html[data-ui-skin=sanctuary][data-has-chat-background=true] body[data-page=chat]:not([data-native-shell='1']) #appShell #composer :is(.sanctuary-compose-more,#addButton){border-color:var(--composer-wallpaper-stroke)!important}
html[data-ui-skin=sanctuary][data-has-chat-background=true] body[data-page=chat]:not([data-native-shell='1']) #appShell #composer .send-button{background:var(--composer-wallpaper-send)!important;color:var(--composer-wallpaper-send-ink)!important}
