.search-bar{width:100%;max-width:720px;margin:0 auto}.search-bar__input-wrapper{display:flex;align-items:center;gap:.5rem;background:var(--color-surface);border:1px solid var(--color-border);border-radius:8px;padding:.75rem;transition:border-color .2s,box-shadow .2s,opacity .2s;min-height:56px}.search-bar__input-wrapper:focus-within{border-color:var(--color-primary);box-shadow:0 0 0 3px var(--color-primary-light)}.search-bar__input-wrapper--loading{opacity:.7;pointer-events:none}.search-bar__input{flex:1 1;border:none;background:transparent;font-size:1rem;line-height:1.5;color:var(--color-text);resize:none;font-family:inherit;max-height:200px;overflow-y:auto;transition:height .1s ease;padding:0;vertical-align:middle}.search-bar__input:focus{outline:none}.search-bar__input::placeholder{color:var(--color-text-muted);line-height:1.5;vertical-align:middle}.search-bar__input:disabled{opacity:.6;cursor:not-allowed}.search-bar__button{flex-shrink:0;width:40px;height:40px;border:none;border-radius:6px;background:var(--color-primary);color:white;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background-color .2s,opacity .2s}.search-bar__button:hover:not(:disabled){background:var(--color-primary-dark)}.search-bar__button:disabled{opacity:.5;cursor:not-allowed}.search-bar__icon,.search-bar__spinner{width:20px;height:20px}.search-bar__spinner{border:2px solid transparent;border-top-color:currentcolor;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(1turn)}}.search-bar__clear-button{flex-shrink:0;width:28px;height:28px;border:none;border-radius:4px;background:transparent;color:var(--color-text-muted);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background-color .15s,color .15s;padding:0}.search-bar__clear-button:hover{background:var(--color-bg);color:var(--color-text-secondary)}.search-bar__clear-button:focus{outline:2px solid var(--color-primary);outline-offset:2px}.search-bar__clear-icon{width:16px;height:16px}.search-bar__char-count{font-size:.75rem;color:var(--color-text-muted);text-align:right;margin-top:.375rem;transition:color .2s}.search-bar__char-count--over{color:var(--color-error);font-weight:500}@media (max-width:640px){.search-bar__input{font-size:.9375rem}.search-bar__button{width:36px;height:36px}.search-bar__icon{width:18px;height:18px}}