/* --- 1. CORE LAYOUT --- */
#kb-ally-wrapper {
    position: fixed;
    bottom: 25px;
    right: 25px;
    z-index: 2147483647; /* Top of the world */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Ensure our toolbar is NEVER affected by site styles */
#kb-ally-wrapper * { box-sizing: border-box; }

/* The Content Wrapper (Fixes the jumping bug) */
#kb-site-content {
    transition: filter 0.3s ease, transform 0.2s ease;
    transform-origin: top center;
}

/* --- 2. TRIGGER & PANEL (Same polished design) --- */
#kb-ally-trigger {
    width: 50px; height: 50px; border-radius: 50%;
    background: #0F172A; color: white; border: none;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.3);
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: all 0.2s ease;
}
#kb-ally-trigger:hover { transform: scale(1.1); background: #000; }
#kb-ally-trigger svg { width: 28px; height: 28px; }

#kb-ally-panel {
    position: absolute; bottom: 70px; right: 0; width: 340px;
    background: #ffffff; border-radius: 12px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.15); border: 1px solid #f1f5f9;
    opacity: 0; transform: translateY(15px) scale(0.95);
    visibility: hidden; transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
}
#kb-ally-wrapper.open #kb-ally-panel { opacity: 1; transform: translateY(0) scale(1); visibility: visible; }

.kb-ally-header { padding: 16px 20px; background: #f8fafc; border-bottom: 1px solid #e2e8f0; display: flex; justify-content: space-between; align-items: center; }
.kb-ally-header h3 { margin: 0; font-size: 16px; font-weight: 700; color: #334155; }
.kb-ally-actions button { background: none; border: none; font-size: 13px; cursor: pointer; padding: 4px 8px; border-radius: 4px; transition: 0.2s; color: #64748b; }
.kb-ally-actions button:hover { background: #e2e8f0; color: #0f172a; }

.kb-ally-grid { padding: 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; background: #fff; max-height: 60vh; overflow-y: auto; }

.kb-ally-btn {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; padding: 16px 10px;
    cursor: pointer; transition: all 0.2s; position: relative; color: #475569;
}
.kb-ally-btn:hover { border-color: #cbd5e1; background: #f8fafc; transform: translateY(-2px); }
.kb-ally-btn.active { background: #eff6ff; border-color: #3b82f6; color: #1d4ed8; }

.kb-ally-icon-box { margin-bottom: 8px; opacity: 0.7; transition: 0.2s; }
.kb-ally-btn.active .kb-ally-icon-box { opacity: 1; transform: scale(1.1); }
.kb-ally-icon { display: block; width: 28px; height: 28px; background-color: currentColor; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; }
.kb-ally-label { font-size: 13px; font-weight: 500; text-align: center; line-height: 1.2; }
.kb-ally-check { position: absolute; top: 8px; right: 8px; color: #3b82f6; opacity: 0; transform: scale(0); transition: 0.2s; }
.kb-ally-btn.active .kb-ally-check { opacity: 1; transform: scale(1); }
.kb-ally-footer { padding: 12px; text-align: center; border-top: 1px solid #f1f5f9; background: #f8fafc; }
.kb-ally-footer a { font-size: 11px; color: #94a3b8; text-decoration: none; font-weight: 500; }

/* --- 3. ICONS (Masks) --- */
.icon-text-size { -webkit-mask-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M2 12h19v3h-2v-1h-15v1h-2v-3zm12-7h7v2h-2.5v12h-2V7H14V5z"/></svg>'); }
.icon-font { -webkit-mask-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M9.93 13.5h4.14L12 7.98 9.93 13.5zM20 2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-4.05 16.5l-1.14-3H9.17l-1.12 3H5.96l5.11-14h1.86l5.11 14h-2.09z"/></svg>'); }
.icon-dyslexic { -webkit-mask-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M5,5h2v3h10V5h2v5h2v2h-2v8h-2v-8h-2v8h-2v-8H9v8H7v-8H5V5z"/></svg>'); }
.icon-contrast { -webkit-mask-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm0-14c-3.31 0-6 2.69-6 6s2.69 6 6 6V6z"/></svg>'); }
.icon-invert { -webkit-mask-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zM6 20V4h7v5h5v11H6z"/></svg>'); }
.icon-eye { -webkit-mask-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"/></svg>'); }
.icon-sun { -webkit-mask-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M20 8.69V4h-4.69L12 .69 8.69 4H4v4.69L.69 12 4 15.31V20h4.69L12 23.31 15.31 20H20v-4.69L23.31 12 20 8.69zM12 18c-3.31 0-6-2.69-6-6s2.69-6 6-6 6 2.69 6 6-2.69 6-6 6zm0-10c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4z"/></svg>'); }
.icon-link { -webkit-mask-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z"/></svg>'); }
.icon-cursor { -webkit-mask-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M6 2v14l4.5-4.5 3.5 8.5 2.5-1-3.5-8.5 7.5-1.5z"/></svg>'); }
.icon-flash { -webkit-mask-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M7 2v11h3v9l7-12h-4l4-8z"/></svg>'); }
.icon-image { -webkit-mask-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"/></svg>'); }

/* --- 4. ACCESSIBILITY MODES --- */

/* BIGGER TEXT (Zoom Method - Works on Pixel themes) */
#kb-site-content.kb-zoom-1 { zoom: 1.1; }
#kb-site-content.kb-zoom-2 { zoom: 1.25; }
#kb-site-content.kb-zoom-3 { zoom: 1.4; }

/* DYSLEXIC FONT (Using standard font face logic) */
@font-face {
    font-family: 'OpenDyslexic';
    src: url('https://cdnjs.cloudflare.com/ajax/libs/opendyslexic/0.91.0/fonts/OpenDyslexic-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}
body.kb-dyslexic, body.kb-dyslexic * {
    font-family: 'OpenDyslexic', sans-serif !important;
}

/* HIGH CONTRAST (Fixed: No Filter, Pure CSS Override) */
body.kb-high-contrast {
    background-color: #000 !important;
    color: #fff !important;
}
body.kb-high-contrast *:not(#kb-ally-wrapper):not(#kb-ally-wrapper *) {
    background-color: #000 !important;
    color: #ffff00 !important; /* Yellow on Black is standard high contrast */
    border-color: #fff !important;
    text-shadow: none !important;
    box-shadow: none !important;
}
body.kb-high-contrast a { color: #00ffff !important; text-decoration: underline !important; }
body.kb-high-contrast button { background: #333 !important; border: 2px solid #fff !important; }

/* GRAYSCALE (Filter - On Wrapper only) */
#kb-site-content.kb-grayscale { filter: grayscale(100%); }

/* INVERT COLORS (Filter - On Wrapper only) */
#kb-site-content.kb-invert { filter: invert(100%); }

/* LIGHT BACKGROUND */
body.kb-light-bg, body.kb-light-bg * { background: #ffffff !important; color: #222222 !important; }

/* HIGHLIGHT LINKS */
body.kb-links-u a { text-decoration: underline !important; font-weight: 700 !important; color: #d00 !important; }

/* HIDE IMAGES */
body.kb-hide-img img { opacity: 0 !important; visibility: hidden !important; }

/* LEGIBLE FONTS */
body.kb-readable * { font-family: Arial, Helvetica, sans-serif !important; line-height: 1.6 !important; letter-spacing: 0.5px; }

/* BIG CURSOR */
body.kb-big-cursor, body.kb-big-cursor * { cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewport="0 0 48 48" style="fill:black;stroke:white;stroke-width:2px;"><path d="M12 4L20 44L27 30L41 27Z"/></svg>'), auto !important; }

/* EPILEPSY SAFE */
#kb-site-content.kb-epilepsy * {
    animation: none !important;
    transition: none !important;
}