/**
 * InAppDualBrowser.css
 * -------------------------------------------------------------
 * IBM Carbon Design System (g100 Dark Theme) Conventional Browser Styling
 * SDK Universal Dual Browser (Apple Safari 18 WebKit + Google Chrome 128 CDP)
 * Version: 3.0.0
 */

:root,
html[data-theme="dark"],
body[data-theme="dark"],
[data-theme="dark"] {
    /* Firecamp Dark Theme */
    --cds-background: #161616;
    --cds-layer-01: #262626;
    --cds-layer-02: #393939;
    --cds-layer-03: #525252;
    --cds-border-subtle: #393939;
    --cds-border-strong: #6f6f6f;
    --cds-text-primary: #f4f4f4;
    --cds-text-secondary: #c6c6c6;
    --cds-text-helper: #8d8d8d;
    --cds-text-placeholder: #6f6f6f;
    --cds-interactive: #0f62fe;
    --cds-interactive-hover: #0353e9;
    --cds-interactive-active: #002d9c;
    --cds-focus: #0f62fe;
    --cds-support-success: #24a148;
    --cds-support-error: #da1e28;
    --cds-support-warning: #f1c21b;
    --cds-support-info: #0043ce;
    --cds-purple-60: #8a3ffc;
    --cds-tab-bg: #111111;
    --cds-font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif;
}

html[data-theme="light"],
body[data-theme="light"],
[data-theme="light"] {
    /* Firecamp Light Theme */
    --cds-background: #ffffff;
    --cds-layer-01: #f4f4f4;
    --cds-layer-02: #e0e0e0;
    --cds-layer-03: #d1d5db;
    --cds-border-subtle: #e0e0e0;
    --cds-border-strong: #8d8d8d;
    --cds-text-primary: #161616;
    --cds-text-secondary: #525252;
    --cds-text-helper: #6f6f6f;
    --cds-text-placeholder: #8d8d8d;
    --cds-interactive: #0f62fe;
    --cds-interactive-hover: #0353e9;
    --cds-interactive-active: #002d9c;
    --cds-focus: #0f62fe;
    --cds-support-success: #198038;
    --cds-support-error: #da1e28;
    --cds-support-warning: #b28600;
    --cds-support-info: #0043ce;
    --cds-purple-60: #8a3ffc;
    --cds-tab-bg: #e8e8e8;
}

html[data-theme="flame"],
body[data-theme="flame"],
[data-theme="flame"] {
    /* Firecamp Signature Flame Theme */
    --cds-background: #181116;
    --cds-layer-01: #281720;
    --cds-layer-02: #3d202d;
    --cds-layer-03: #572a3e;
    --cds-border-subtle: #4a2737;
    --cds-border-strong: #b91c1c;
    --cds-text-primary: #fff1f2;
    --cds-text-secondary: #fecdd3;
    --cds-text-helper: #fb7185;
    --cds-text-placeholder: #9f1239;
    --cds-interactive: #ea580c;
    --cds-interactive-hover: #c2410c;
    --cds-interactive-active: #9a3412;
    --cds-focus: #f97316;
    --cds-support-success: #22c55e;
    --cds-support-error: #ef4444;
    --cds-support-warning: #f59e0b;
    --cds-support-info: #38bdf8;
    --cds-purple-60: #f97316;
    --cds-tab-bg: #120b0f;
}

/* Modal Overlay Container */
.sdk-browser-modal-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(8px);
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
    font-family: var(--cds-font-family);
}

/* Conventional Browser Window Shell */
.sdk-browser-modal-content {
    background: var(--cds-background);
    width: 100%;
    max-width: 1400px;
    height: 94vh;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.8), 0 0 0 1px var(--cds-border-subtle);
}

/* -------------------------------------------------------------
 * 1. Top Tab Strip (Conventional Browser Tab Bar)
 * ------------------------------------------------------------- */
.sdk-browser-tab-strip {
    background: var(--cds-tab-bg);
    display: flex;
    align-items: center;
    height: 38px;
    padding: 0 12px;
    gap: 4px;
    border-bottom: 1px solid var(--cds-border-subtle);
    user-select: none;
}

.sdk-tab-item {
    background: var(--cds-layer-01);
    color: var(--cds-text-secondary);
    font-size: 12px;
    font-weight: 500;
    padding: 0 14px;
    height: 30px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-radius: 4px 4px 0 0;
    cursor: pointer;
    border: 1px solid transparent;
    border-bottom: none;
    max-width: 200px;
    transition: all 0.15s ease;
}

.sdk-tab-item:hover {
    background: var(--cds-layer-01);
    color: var(--cds-text-primary);
}

.sdk-tab-item.active-tab {
    background: var(--cds-background);
    color: var(--cds-text-primary);
    border-color: var(--cds-border-subtle);
    font-weight: 600;
}

.sdk-tab-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sdk-tab-close {
    font-size: 11px;
    color: var(--cds-text-helper);
    border-radius: 50%;
    padding: 2px 4px;
}
.sdk-tab-close:hover {
    background: var(--cds-layer-02);
    color: var(--cds-text-primary);
}

.sdk-tab-new-btn {
    background: transparent;
    border: none;
    color: var(--cds-text-secondary);
    font-size: 16px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
}
.sdk-tab-new-btn:hover {
    background: var(--cds-layer-01);
    color: var(--cds-text-primary);
}

/* -------------------------------------------------------------
 * 2. Navigation Toolbar & Omnibox
 * ------------------------------------------------------------- */
.sdk-browser-header-bar {
    background: var(--cds-background);
    color: var(--cds-text-primary);
    padding: 8px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid var(--cds-border-subtle);
}

.sdk-browser-nav-tools {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Carbon Style Buttons */
.sdk-browser-btn {
    background: var(--cds-layer-01);
    color: var(--cds-text-primary);
    border: 1px solid var(--cds-border-subtle);
    border-radius: 2px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    box-sizing: border-box;
}

.sdk-browser-btn:hover {
    background: var(--cds-layer-02);
    border-color: var(--cds-border-strong);
}

.sdk-browser-btn:focus {
    outline: 2px solid var(--cds-focus);
    outline-offset: -2px;
}

/* Active Engine Toggle */
.sdk-browser-btn.active-engine {
    background: var(--cds-interactive);
    border-color: var(--cds-interactive);
    color: #ffffff;
}

.sdk-browser-btn.active-engine:hover {
    background: var(--cds-interactive-hover);
}

/* Shield Mode Button */
.sdk-btn-shield {
    background: var(--cds-layer-01);
    border-color: var(--cds-border-subtle);
    color: var(--cds-text-secondary);
}

.sdk-btn-shield.active-shield {
    background: #044317;
    border-color: var(--cds-support-success);
    color: #6ee7b7;
}

/* AI Copilot Button */
.sdk-btn-chat {
    background: #391968;
    border-color: var(--cds-purple-60);
    color: #e8daff;
}

.sdk-btn-chat:hover, .sdk-btn-chat.active-chat {
    background: #491d8b;
    color: #ffffff;
    border-color: #a56eff;
}

.sdk-btn-close {
    background: transparent !important;
    border-color: transparent !important;
    color: var(--cds-text-secondary) !important;
}

.sdk-btn-close:hover {
    background: var(--cds-support-error) !important;
    color: #ffffff !important;
}

.sdk-browser-divider {
    color: var(--cds-border-subtle);
    margin: 0 4px;
}

/* -------------------------------------------------------------
 * Omnibox (URL Search Bar)
 * ------------------------------------------------------------- */
.sdk-browser-url-container {
    flex: 1;
    display: flex;
    align-items: center;
    background: var(--cds-layer-01);
    border: 1px solid var(--cds-border-subtle);
    border-radius: 4px;
    height: 34px;
    padding: 0 10px;
    gap: 8px;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.sdk-browser-url-container:focus-within {
    border-color: var(--cds-focus);
    outline: 2px solid var(--cds-focus);
    outline-offset: -1px;
}

.sdk-url-security-icon {
    font-size: 12px;
    color: var(--cds-support-success);
}

.sdk-browser-url-input {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--cds-text-primary);
    font-size: 13px;
    font-family: var(--cds-font-family);
    outline: none;
}

.sdk-btn-go {
    background: var(--cds-interactive);
    color: #ffffff;
    border: none;
    border-radius: 2px;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.sdk-btn-go:hover {
    background: var(--cds-interactive-hover);
}

/* -------------------------------------------------------------
 * 3. Bookmarks & Favorites Bar
 * ------------------------------------------------------------- */
.sdk-browser-bookmarks-bar {
    background: var(--cds-layer-01);
    display: flex;
    align-items: center;
    padding: 4px 16px;
    gap: 8px;
    border-bottom: 1px solid var(--cds-border-subtle);
    overflow-x: auto;
}

.sdk-bookmark-chip {
    background: transparent;
    border: 1px solid transparent;
    color: var(--cds-text-secondary);
    font-size: 11.5px;
    padding: 3px 8px;
    border-radius: 2px;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s;
}

.sdk-bookmark-chip:hover {
    background: var(--cds-layer-01);
    color: var(--cds-text-primary);
    border-color: var(--cds-border-subtle);
}

/* -------------------------------------------------------------
 * 4. Main Body & Iframe Viewport
 * ------------------------------------------------------------- */
.sdk-browser-body-container {
    flex: 1;
    display: flex;
    position: relative;
    overflow: hidden;
    background: #000000;
}

.sdk-browser-iframe-container {
    flex: 1;
    height: 100%;
    position: relative;
    background: #ffffff;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.sdk-browser-iframe-container iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

/* Mobile Frame Emulation */
.sdk-browser-iframe-container.mobile-frame {
    max-width: 412px;
    margin: 20px auto;
    height: calc(100% - 40px);
    border-radius: 36px;
    box-shadow: 0 0 0 12px #262626, 0 20px 50px rgba(0, 0, 0, 0.9);
    overflow: hidden;
}

/* -------------------------------------------------------------
/* -------------------------------------------------------------
 * 5. IBM Carbon for AI (Carbon AI Chat) Component Pattern
 * ------------------------------------------------------------- */
.sdk-browser-chat-drawer {
    width: 420px;
    background: var(--cds-layer-01);
    border-left: 1px solid var(--cds-border-subtle);
    display: flex;
    flex-direction: column;
    padding: 16px;
    gap: 14px;
    z-index: 100;
    transition: transform 0.2s ease, opacity 0.2s ease;
    box-shadow: -12px 0 32px rgba(0, 0, 0, 0.7);
    box-sizing: border-box;
}

.sdk-browser-chat-drawer.hidden {
    display: none;
}

/* Carbon AI Slug Header */
.sdk-chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--cds-border-subtle);
    padding-bottom: 12px;
}

.sdk-chat-title-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sdk-chat-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--cds-text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}

/* IBM Carbon AI Slug Badge */
.cds--ai-slug {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: linear-gradient(135deg, #a56eff 0%, #0043ce 100%);
    color: #ffffff;
    font-size: 10.5px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 2px;
    letter-spacing: 0.5px;
    box-shadow: 0 0 10px rgba(165, 110, 255, 0.35);
}

.sdk-chat-desc {
    font-size: 11.5px;
    color: var(--cds-text-helper);
    margin-left: 2px;
}

.sdk-chat-close-btn {
    background: transparent;
    border: none;
    color: var(--cds-text-secondary);
    font-size: 16px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 2px;
}
.sdk-chat-close-btn:hover {
    background: var(--cds-layer-02);
    color: var(--cds-text-primary);
}

/* Carbon AI Quick Prompt Starters */
.sdk-chat-quick-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding-bottom: 4px;
}

.sdk-chip-btn {
    background: var(--cds-layer-02);
    border: 1px solid var(--cds-border-subtle);
    color: var(--cds-text-secondary);
    border-radius: 2px;
    padding: 5px 10px;
    font-size: 11.5px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.sdk-chip-btn:hover {
    background: var(--cds-layer-03);
    color: var(--cds-text-primary);
    border-color: var(--cds-purple-60);
    box-shadow: 0 2px 6px rgba(138, 63, 252, 0.2);
}

/* Chat Message Thread */
.sdk-chat-messages {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-right: 4px;
}

.sdk-chat-msg {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sdk-chat-msg.user {
    align-items: flex-end;
}

.sdk-chat-msg.assistant {
    align-items: flex-start;
}

.sdk-chat-msg.user .sdk-msg-bubble {
    background: var(--cds-interactive);
    color: #ffffff;
    border-radius: 6px 6px 0 6px;
    border: none;
}

.sdk-chat-msg.assistant .sdk-msg-bubble {
    background: var(--cds-layer-02);
    color: var(--cds-text-primary);
    border: 1px solid var(--cds-border-subtle);
    border-radius: 6px 6px 6px 0;
    border-left: 3px solid var(--cds-purple-60);
}

.sdk-msg-bubble {
    max-width: 92%;
    padding: 12px 16px;
    font-size: 13px;
    line-height: 1.55;
    word-break: break-word;
}

/* Carbon AI Specific Message Chunks */
.sdk-msg-bubble.acp-bubble {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
}

/* 1. Carbon AI Thought Accordion */
.sdk-acp-thought {
    font-size: 11.5px;
    color: var(--cds-text-secondary);
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid var(--cds-border-subtle);
    border-left: 3px solid var(--cds-purple-60);
    padding: 8px 12px;
    border-radius: 2px;
    line-height: 1.5;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sdk-acp-thought-header {
    font-weight: 600;
    color: #d4bbff;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* 2. Carbon AI Tool Execution Card */
.sdk-acp-tool-card {
    background: #1e1e1e;
    border: 1px solid var(--cds-border-subtle);
    border-radius: 4px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.sdk-acp-tool-name {
    font-family: monospace;
    font-size: 11.5px;
    font-weight: 700;
    color: #78a9ff;
    display: flex;
    align-items: center;
    gap: 6px;
}

.sdk-acp-tool-status {
    font-size: 10.5px;
    background: #044317;
    color: #6ee7b7;
    padding: 2px 6px;
    border-radius: 2px;
    font-weight: 600;
}

/* 3. Carbon AI Text Body */
.sdk-acp-text {
    font-size: 13px;
    color: var(--cds-text-primary);
    line-height: 1.6;
}

/* 4. Carbon AI Message Actions / Feedback Bar */
.sdk-acp-action-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    padding-top: 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.sdk-acp-action-btn {
    background: transparent;
    border: none;
    color: var(--cds-text-helper);
    font-size: 11px;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 2px;
    transition: all 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.sdk-acp-action-btn:hover {
    background: var(--cds-layer-03);
    color: var(--cds-text-primary);
}

/* Carbon AI Chat Input Bar */
.sdk-chat-input-bar {
    display: flex;
    gap: 8px;
    margin-top: auto;
    background: var(--cds-layer-01);
    border-top: 1px solid var(--cds-border-subtle);
    padding-top: 12px;
}

.sdk-chat-input {
    flex: 1;
    background: var(--cds-layer-02);
    border: 1px solid var(--cds-border-subtle);
    border-bottom: 2px solid var(--cds-border-strong);
    color: var(--cds-text-primary);
    padding: 10px 14px;
    border-radius: 2px;
    font-size: 12.5px;
    font-family: var(--cds-font-family);
    outline: none;
    transition: all 0.15s;
}

.sdk-chat-input:focus {
    border-color: var(--cds-purple-60);
    border-bottom-color: var(--cds-interactive);
    outline: 2px solid var(--cds-purple-60);
    outline-offset: -2px;
    box-shadow: 0 0 12px rgba(138, 63, 252, 0.25);
}

.sdk-btn-chat-send {
    background: linear-gradient(135deg, #8a3ffc 0%, #0f62fe 100%);
    border: none;
    color: #ffffff;
    border-radius: 2px;
    padding: 0 18px;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    transition: opacity 0.15s, transform 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.sdk-btn-chat-send:hover {
    opacity: 0.92;
    transform: translateY(-1px);
}

/* -------------------------------------------------------------
 * Settings Sections (Carbon Forms & Inputs)
 * ------------------------------------------------------------- */
.sdk-browser-settings-drawer {
    width: 380px;
    background: var(--cds-layer-01);
    border-left: 1px solid var(--cds-border-subtle);
    display: flex;
    flex-direction: column;
    padding: 16px;
    gap: 14px;
    z-index: 100;
    transition: transform 0.2s ease, opacity 0.2s ease;
    box-shadow: -8px 0 24px rgba(0, 0, 0, 0.6);
    box-sizing: border-box;
}

.sdk-browser-settings-drawer.hidden {
    display: none;
}

/* -------------------------------------------------------------
 * Settings Sections (Carbon Forms & Inputs)
 * ------------------------------------------------------------- */
.sdk-settings-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--cds-border-subtle);
}

.sdk-form-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sdk-form-label {
    font-size: 11.5px;
    color: var(--cds-text-secondary);
    font-weight: 600;
}

.sdk-select, .sdk-input {
    background: var(--cds-layer-02);
    border: 1px solid var(--cds-border-subtle);
    color: var(--cds-text-primary);
    padding: 8px 12px;
    border-radius: 2px;
    font-size: 12px;
    outline: none;
}

.sdk-select:focus, .sdk-input:focus {
    border-color: var(--cds-focus);
    outline: 2px solid var(--cds-focus);
    outline-offset: -1px;
}

.sdk-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    color: var(--cds-text-secondary);
}

.sdk-btn-action {
    background: var(--cds-interactive);
    color: #ffffff;
    border: none;
    border-radius: 2px;
    padding: 9px 14px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.sdk-btn-action:hover {
    background: var(--cds-interactive-hover);
}