/* Knox browser pane — matches voice-Knox aesthetic (--void, --smoke, --mint, --violet) */

.bp { background: var(--void); border: 1px solid var(--mint-30); border-radius: 8px; margin-top: 6px; overflow: hidden; transition: border-color .2s, box-shadow .2s; }
.bp.taken-over { border-color: var(--violet); box-shadow: 0 0 0 1px var(--violet), 0 0 12px rgba(182,139,255,0.35); }
/* Knox-style browser toolbar — back / forward / reload + editable URL */
.bp-toolbar { background: var(--obsidian); padding: 6px 8px; display: flex; align-items: center; gap: 6px; border-bottom: 1px solid var(--mint-15); font-family: var(--font-mono); }
.bp-nav-btn { background: transparent; border: 1px solid var(--mint-25); color: var(--mint); width: 28px; height: 28px; border-radius: 4px; display: grid; place-items: center; cursor: pointer; transition: all .15s; padding: 0; }
.bp-nav-btn:hover { background: var(--mint-08); border-color: var(--mint); }
.bp-nav-btn:active { background: var(--mint-15); }
.bp.taken-over .bp-nav-btn { border-color: rgba(182,139,255,0.3); color: var(--violet); }
.bp.taken-over .bp-nav-btn:hover { background: rgba(182,139,255,0.1); border-color: var(--violet); }
.bp-url-wrap { flex: 1; display: flex; }
.bp-url-input { flex: 1; background: var(--void); border: 1px solid var(--mint-25); border-radius: 14px; padding: 6px 12px; color: var(--ghost); font-family: var(--font-mono); font-size: 11px; outline: none; transition: border-color .15s, box-shadow .15s; min-width: 0; }
.bp-url-input::placeholder { color: var(--slate); }
.bp-url-input:focus { border-color: var(--mint); box-shadow: 0 0 0 1px var(--mint), 0 0 8px rgba(0,255,200,0.3); }
.bp.taken-over .bp-url-input { border-color: rgba(182,139,255,0.3); }
.bp.taken-over .bp-url-input:focus { border-color: var(--violet); box-shadow: 0 0 0 1px var(--violet), 0 0 8px rgba(182,139,255,0.4); }

.bp-bar { background: var(--obsidian); padding: 5px 8px; display: flex; align-items: center; gap: 6px; border-bottom: 1px solid var(--slate-15); font-family: var(--font-mono); font-size: 10px; color: var(--slate); }
.bp-bar .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 6px var(--mint); }
.bp.taken-over .bp-bar .dot { background: var(--violet); box-shadow: 0 0 6px var(--violet); }
.bp-bar .url { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bp-content { background: #fafafa; min-height: 200px; max-height: 400px; overflow: hidden; position: relative; cursor: default; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: none; }
.bp-content img { display: block; width: 100%; height: auto; image-rendering: -webkit-optimize-contrast; }
.bp-content.taken-over { cursor: crosshair; }
.bp-content .overlay { position: absolute; inset: 0; background: rgba(10,10,15,0.6); color: var(--ghost); display: grid; place-items: center; font-size: 12px; font-family: var(--font-mono); text-align: center; padding: 16px; }
.bp-actions { background: var(--obsidian); border-top: 1px solid var(--slate-15); padding: 5px 8px; display: flex; gap: 6px; justify-content: flex-end; }
.bp-btn { font-size: 10px; padding: 4px 10px; border-radius: 4px; font-family: var(--font-mono); border: 1px solid; background: transparent; cursor: pointer; display: inline-flex; align-items: center; }
.bp-btn-popout { background: var(--mint-06); border-color: var(--mint-30); color: var(--mint); }
.bp-btn-popout:hover { background: var(--mint-10); border-color: var(--mint); }
.bp-btn-takeover { background: rgba(182,139,255,0.10); border-color: rgba(182,139,255,0.35); color: var(--violet); }
.bp-btn-takeover:hover { background: rgba(182,139,255,0.18); border-color: var(--violet); }
.bp-btn-takeover:disabled { opacity: 0.4; cursor: not-allowed; }
.bp-btn-resume { background: var(--mint-10); border-color: var(--mint); color: var(--mint); }
.bp-btn-kbd { background: rgba(182,139,255,0.10); border-color: rgba(182,139,255,0.35); color: var(--violet); }
.bp-btn-kbd:hover { background: rgba(182,139,255,0.18); border-color: var(--violet); }
.bp-btn-close { background: transparent; border-color: var(--slate-15); color: var(--slate); }

.bp-fab { position: fixed; bottom: 70px; right: 14px; width: 46px; height: 46px; border-radius: 50%; background: var(--obsidian); border: 1.5px solid var(--mint); color: var(--mint); display: grid; place-items: center; font-size: 20px; cursor: pointer; z-index: 50; transition: transform .15s; }
.bp-fab:hover { transform: scale(1.05); }
.bp-fab.active { animation: bp-pulse 2s infinite; }
.bp-fab .dot { position: absolute; top: -3px; right: -3px; width: 10px; height: 10px; border-radius: 50%; background: var(--violet); border: 1.5px solid var(--obsidian); }
@keyframes bp-pulse { 0% { box-shadow: 0 0 0 0 rgba(0,255,200,0.5); } 70% { box-shadow: 0 0 0 12px rgba(0,255,200,0); } 100% { box-shadow: 0 0 0 0 rgba(0,255,200,0); } }

/* Pop-out (full-screen) — fill the viewport on every device, including iPad.
   Keep the glowing mint/violet border (Frank likes it). */
.bp-popout { position: fixed; inset: 0; background: var(--void); z-index: 100; display: flex; flex-direction: column; padding: 8px; margin: 0; }
.bp-popout .bp { flex: 1; min-height: 0; max-height: none; margin: 0; display: flex; flex-direction: column; box-shadow: 0 0 0 1px var(--mint), 0 0 24px rgba(0,255,200,0.45); }
.bp-popout .bp.taken-over { box-shadow: 0 0 0 1px var(--violet), 0 0 24px rgba(182,139,255,0.5); }
.bp-popout .bp-content { flex: 1; max-height: none; min-height: 0; }
.bp-popout .bp-content img { width: 100%; height: 100%; object-fit: contain; }
.bp-popout-close { position: absolute; top: max(12px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right)); width: 32px; height: 32px; border-radius: 50%; background: var(--obsidian); border: 1px solid var(--slate-15); color: var(--ghost); cursor: pointer; z-index: 101; }