/**
 * Einheitlicher X-Button innerhalb von Suchfeldern (nur sichtbar bei Text).
 */

input.kinma-search-clear-enhanced::-webkit-search-cancel-button,
input.kinma-search-clear-enhanced::-webkit-search-decoration {
    -webkit-appearance: none;
    appearance: none;
}

.kinma-search-clear-wrap {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
}

.kinma-search-clear-wrap--tree {
    flex: 1 1 auto;
    min-width: 0;
}

.kinma-search-clear-wrap > input.kinma-search-clear-enhanced {
    width: 100%;
    min-width: 0;
    padding-right: 2.25rem;
    box-sizing: border-box;
}

.kinma-search-clear-btn-inner {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
    padding: 0;
    margin: 0;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.06);
    color: #1a1a1a;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    z-index: 2;
    transition: background 0.15s ease, color 0.15s ease;
}

.kinma-search-clear-btn-inner:hover,
.kinma-search-clear-btn-inner:focus-visible {
    background: rgba(0, 0, 0, 0.1);
    color: #1a1a1a;
    outline: none;
}

.kinma-search-clear-btn-inner svg {
    display: block;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.kinma-search-clear-wrap.kinma-search-clear--empty .kinma-search-clear-btn-inner {
    display: none !important;
}

/* Mobile Bottom Nav: Pill hat eigenes Padding – Button näher am Rand */
.mobile-bottom-nav-search-input-wrap .kinma-search-clear-wrap {
    flex: 1 1 auto;
    min-width: 0;
}
.mobile-bottom-nav-search-input-wrap .kinma-search-clear-wrap > input.kinma-search-clear-enhanced {
    padding-right: 2.25rem;
}

.mobile-bottom-nav-search-input-wrap .kinma-search-clear-btn-inner {
    right: 8px;
    background: transparent !important;
}
.mobile-bottom-nav-search-input-wrap .kinma-search-clear-btn-inner:hover,
.mobile-bottom-nav-search-input-wrap .kinma-search-clear-btn-inner:focus-visible {
    background: transparent !important;
    color: #1a1a1a;
}
body.dark-mode .mobile-bottom-nav-search-input-wrap .kinma-search-clear-btn-inner,
[data-theme="dark"] .mobile-bottom-nav-search-input-wrap .kinma-search-clear-btn-inner {
    background: transparent !important;
}
body.dark-mode .mobile-bottom-nav-search-input-wrap .kinma-search-clear-btn-inner:hover,
body.dark-mode .mobile-bottom-nav-search-input-wrap .kinma-search-clear-btn-inner:focus-visible,
[data-theme="dark"] .mobile-bottom-nav-search-input-wrap .kinma-search-clear-btn-inner:hover,
[data-theme="dark"] .mobile-bottom-nav-search-input-wrap .kinma-search-clear-btn-inner:focus-visible {
    background: transparent !important;
    color: #f1f5f9;
}

/* Stammbaum: Flex-Zeile Lupe | [Eingabe+X] | Treffer + KI — Wrap muss flex:1 sein, kein width:100% (sonst Lücke vor Zähler) */
.tree-search-wrapper .tree-search-inner .kinma-search-clear-wrap {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    box-sizing: border-box;
}
/* Trefferzahl + KI sitzen in .tree-search-inner-right — nur Platz fürs X wie üblich */
.tree-search-wrapper .tree-search-inner .kinma-search-clear-wrap > input.kinma-search-clear-enhanced.tree-search-input {
    padding-right: 2.25rem !important;
}
/* Feinzeiger: X erst bei Hover über der Pille; Fokus in der Leiste (Eingabe/Tastatur) zeigt es ebenfalls */
@media (hover: hover) and (pointer: fine) {
    .tree-search-wrapper .tree-search-inner .kinma-search-clear-wrap:not(.kinma-search-clear--empty) .kinma-search-clear-btn-inner {
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.16s ease;
    }
    .tree-search-wrapper:hover .tree-search-inner .kinma-search-clear-wrap:not(.kinma-search-clear--empty) .kinma-search-clear-btn-inner,
    .tree-search-wrapper:focus-within .tree-search-inner .kinma-search-clear-wrap:not(.kinma-search-clear--empty) .kinma-search-clear-btn-inner {
        opacity: 1;
        pointer-events: auto;
    }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: reduce) {
    .tree-search-wrapper .tree-search-inner .kinma-search-clear-wrap:not(.kinma-search-clear--empty) .kinma-search-clear-btn-inner {
        transition: none;
    }
}
.tree-search-wrapper .tree-search-inner .kinma-search-clear-btn-inner {
    right: 8px;
    background: transparent !important;
}
.tree-search-wrapper .tree-search-inner .kinma-search-clear-btn-inner:hover,
.tree-search-wrapper .tree-search-inner .kinma-search-clear-btn-inner:focus-visible {
    background: transparent !important;
    color: #1a1a1a;
}
body.dark-mode .tree-search-wrapper .tree-search-inner .kinma-search-clear-btn-inner,
[data-theme="dark"] .tree-search-wrapper .tree-search-inner .kinma-search-clear-btn-inner {
    background: transparent !important;
}
body.dark-mode .tree-search-wrapper .tree-search-inner .kinma-search-clear-btn-inner:hover,
body.dark-mode .tree-search-wrapper .tree-search-inner .kinma-search-clear-btn-inner:focus-visible,
[data-theme="dark"] .tree-search-wrapper .tree-search-inner .kinma-search-clear-btn-inner:hover,
[data-theme="dark"] .tree-search-wrapper .tree-search-inner .kinma-search-clear-btn-inner:focus-visible {
    background: transparent !important;
    color: #f1f5f9;
}

/* Chat: Pill in Kontaktliste */
.chat-popup-content-wrapper #chatViewSplit .kinma-search-clear-wrap .chat-search-input.chat-search-input-pill {
    padding-right: 2.5rem !important;
}

/* Neue Kontakte / Calls-Spalten: kompakte Abstände */
.chat-new-contacts-header .kinma-search-clear-btn-inner,
.chat-calls-search-bar-wrap .kinma-search-clear-btn-inner {
    right: 10px;
}

/* Chat: Verlaufssuche in der Bottom-Nav-Zeile */
.mobile-bottom-nav-chat-history-search .kinma-search-clear-wrap > input.kinma-search-clear-enhanced {
    padding-right: 2rem;
}
.mobile-bottom-nav-chat-history-search .kinma-search-clear-btn-inner {
    right: 6px;
    width: 26px;
    height: 26px;
    min-width: 26px;
    min-height: 26px;
    background: transparent !important;
    box-shadow: none !important;
}

.mobile-bottom-nav-chat-history-search .kinma-search-clear-btn-inner:hover,
.mobile-bottom-nav-chat-history-search .kinma-search-clear-btn-inner:focus-visible {
    background: transparent !important;
    box-shadow: none !important;
    color: #1a1a1a;
}

body.dark-mode .mobile-bottom-nav-chat-history-search .kinma-search-clear-btn-inner,
[data-theme='dark'] .mobile-bottom-nav-chat-history-search .kinma-search-clear-btn-inner {
    background: transparent !important;
    color: #94a3b8;
}

body.dark-mode .mobile-bottom-nav-chat-history-search .kinma-search-clear-btn-inner:hover,
body.dark-mode .mobile-bottom-nav-chat-history-search .kinma-search-clear-btn-inner:focus-visible,
[data-theme='dark'] .mobile-bottom-nav-chat-history-search .kinma-search-clear-btn-inner:hover,
[data-theme='dark'] .mobile-bottom-nav-chat-history-search .kinma-search-clear-btn-inner:focus-visible {
    background: transparent !important;
    color: #f1f5f9;
}

body.dark-mode .kinma-search-clear-btn-inner,
[data-theme="dark"] .kinma-search-clear-btn-inner {
    background: rgba(255, 255, 255, 0.1);
    color: #cbd5e1;
}

body.dark-mode .kinma-search-clear-btn-inner:hover,
body.dark-mode .kinma-search-clear-btn-inner:focus-visible,
[data-theme="dark"] .kinma-search-clear-btn-inner:hover,
[data-theme="dark"] .kinma-search-clear-btn-inner:focus-visible {
    background: rgba(255, 255, 255, 0.16);
    color: #f1f5f9;
}