.model-control { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px; align-items: center; min-width: 0; font-size: 10px; } .model-selector { position: relative; min-width: 0; } .model-trigger { box-sizing: border-box; width: 100%; min-width: 0; overflow: hidden; appearance: none; padding: 5px 25px 5px 6px; border: 1px solid #70522f; border-radius: 4px; background: #2c2a27 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='m1 1 5 5 5-5' fill='none' stroke='%23f0a347' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 7px center; color: #f2ece4; font: inherit; font-weight: 650; text-align: left; } .model-trigger:hover { border-color: #d88735; background-color: #383129; } .model-trigger:focus { border-color: #f0a347; box-shadow: 0 0 0 2px rgba(240, 163, 71, 0.22); } .model-trigger > span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .model-menu { position: absolute; bottom: calc(100% + 6px); left: 0; z-index: 30; display: grid; grid-template-rows: auto auto minmax(0, 1fr); box-sizing: border-box; width: min(400px, calc(100vw - 40px)); max-height: min(420px, calc(100vh - 80px)); overflow: hidden; gap: 6px; padding: 8px; border: 1px solid #70522f; border-radius: 7px; background: #292724; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45); } .model-control-down .model-menu { top: calc(100% + 6px); bottom: auto; } .model-menu input { box-sizing: border-box; width: 100%; padding: 7px 9px; border: 1px solid #5b5146; border-radius: 4px; background: #1f1e1c; color: #f2ece4; } .model-result-count { margin: 0; color: #aaa39a; font-size: 10px; } .model-results { display: grid; gap: 7px; min-height: 0; overflow-x: hidden; overflow-y: auto; } .model-provider-group { display: grid; gap: 2px; } .model-provider-heading { position: sticky; top: 0; z-index: 1; padding: 4px 5px 3px; background: #292724; color: #f0a347; font-size: 10px; font-weight: 850; letter-spacing: 0.08em; text-transform: uppercase; } .model-option { display: grid; gap: 1px; width: 100%; padding: 6px 7px; border: 1px solid transparent; background: #35322e; color: #f2ece4; font: inherit; text-align: left; } .model-option:hover { border-color: #8c6338; background: #44382d; } .model-option[aria-selected="true"] { border-color: #f0a347; background: #4b3420; color: #fff2df; } .model-option small { overflow-wrap: anywhere; color: #aaa39a; font-size: 9px; font-weight: 500; } .model-empty { margin: 5px 0; text-align: center; }