/* Kensaku Design v0.3.7 (Exact Width Match) */
.kensaku-wrapper { 
    position: relative; 
    display: inline-block; 
    width: auto;
    vertical-align: middle;
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    margin-left: 5px;
}

/* --- SEARCH PILL --- */
.kensaku-input-group { 
    position: relative; 
    display: flex; 
    align-items: center; 
    width: 32px;  
    height: 32px; 
    background: transparent; 
    border: 1px solid transparent; 
    border-radius: 18px; /* Radius angepasst an Höhe */
    overflow: hidden; 
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    cursor: pointer;
    z-index: 100001; 
}

/* Offen: 180px Breite */
.kensaku-input-group:hover,
.kensaku-input-group:focus-within { 
    width: 180px; 
    background: #fff; 
    border-color: #e1e4e8; 
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.kensaku-field { 
    width: 100%; 
    border: none!important; 
    padding: 0 0 0 12px!important; 
    outline: none!important; 
    background: transparent; 
    font-size: 13px; 
    color: #333; 
    margin:0!important; 
    box-shadow:none!important; 
    height: 100%!important; 
    line-height: normal!important;
    opacity: 0; 
    transform: translateX(10px);
    transition: all 0.2s;
    pointer-events: none;
}

.kensaku-input-group:hover .kensaku-field,
.kensaku-input-group:focus-within .kensaku-field {
    opacity: 1; transform: translateX(0); pointer-events: auto;
}

.kensaku-btn { 
    position: absolute; right: 0; top: 0; bottom: 0; width: 32px;
    background: none; border: none; padding: 0; cursor: pointer; color: #666; 
    display: flex; align-items: center; justify-content: center;
    transition: color 0.2s;
}
.kensaku-btn svg { width: 16px; height: 16px; }
.kensaku-btn:hover { color: #2271b1; }

.kensaku-spinner { 
    width: 8px; height: 8px; 
    border: 2px solid rgba(0,0,0,0.1); border-top: 2px solid #2271b1; 
    border-radius: 50%; 
    animation: ken-spin 0.8s linear infinite; 
    position: absolute; right: 8px; top: 8px;
    display: none; pointer-events: none; 
}
@keyframes ken-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* --- LIVE RESULTS (MATCH WIDTH) --- */
.kensaku-live-results { 
    position: absolute; 
    top: calc(100% + 8px); 
    
    /* 100% Breite des Eltern-Elements (Wrapper/Input) */
    width: 100%;
    left: 0;
    right: 0;
    
    background: #ffffff; 
    border: 1px solid rgba(0,0,0,0.06); 
    border-radius: 12px; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.12); 
    display: none; 
    z-index: 100000; 
    max-height: 400px; 
    overflow-y: auto; 
    padding: 4px; /* Weniger Padding, da Platz eng ist */
}

/* Scrollbar */
.kensaku-live-results::-webkit-scrollbar { width: 3px; }
.kensaku-live-results::-webkit-scrollbar-track { background: transparent; }
.kensaku-live-results::-webkit-scrollbar-thumb { background: #e1e4e8; border-radius: 2px; }

/* Items - Kompakter für 180px Breite */
.kensaku-item { 
    display: flex; align-items: center; padding: 6px; 
    border-radius: 8px; text-decoration: none; color: #1d1d1f; 
    transition: background 0.15s ease; gap: 8px; margin-bottom: 2px;
}
.kensaku-item:hover { background: #f5f7fa; }

/* Thumbnails etwas kleiner, damit Text Platz hat */
.kensaku-thumb { 
    width: 28px; height: 28px; border-radius: 6px; 
    object-fit: cover; background: #f0f0f1; flex-shrink: 0; 
}

.kensaku-meta { display: flex; flex-direction: column; overflow: hidden; min-width: 0; /* Wichtig für Text-Overflow */ }

.kensaku-title { 
    font-weight: 600; font-size: 12px; line-height: 1.3; 
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; 
}

/* Datum ausblenden oder sehr klein machen bei 180px */
.kensaku-date { font-size: 9px; color: #999; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.kensaku-badge { 
    font-size: 8px; font-weight: 700; padding: 1px 3px; border-radius: 3px; 
    background:#eee; color:#666; display:inline-block; margin-right:4px; 
    vertical-align: middle;
}
.kensaku-badge.artist { background: #e0e7ff; color: #4338ca; }
.kensaku-no-res { padding: 10px; text-align: center; color: #999; font-size: 11px; }