/* Ghost UI Fixes */

/* Fix button alignment */
#chat-buttons-wrapper {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    align-items: center !important;
    padding: 0 !important;
}

/* Remove double container effect */
#chat-input-container {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

#chat-input {
    border: 1px solid var(--color-border) !important;
    outline: none !important;
    box-shadow: none !important;
}

#chat-input:focus {
    border-color: var(--color-primary) !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(var(--color-primary-rgb), 0.1) !important;
}

/* Fix Ghost button positioning */
.ghost-voice-button {
    margin: 0 !important;
    position: relative !important;
}

/* Ensure Ghost logo is visible - use white SVG as fallback */
.ghost-voice-button .ghost-logo {
    filter: invert(1) brightness(2) !important;
    width: 24px !important;
    height: 24px !important;
}

/* If image fails to load, show the SVG */
.ghost-voice-button img.ghost-logo {
    display: inline-block;
}

.ghost-voice-button img.ghost-logo[src*="ghost"]:not([src*="http"]) {
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M12 2C7.58 2 4 5.58 4 10v7c0 1.66 1.34 3 3 3s3-1.34 3-3v-1c0-.55.45-1 1-1s1 .45 1 1v1c0 1.66 1.34 3 3 3s3-1.34 3-3v-1c0-.55.45-1 1-1s1 .45 1 1v1c0 1.66 1.34 3 3 3s3-1.34 3-3v-7c0-4.42-3.58-8-8-8zm-3 8c-.83 0-1.5-.67-1.5-1.5S8.17 7 9 7s1.5.67 1.5 1.5S9.83 10 9 10zm6 0c-.83 0-1.5-.67-1.5-1.5S14.17 7 15 7s1.5.67 1.5 1.5S15.83 10 15 10z"/></svg>');
}

/* Remove any yellow outlines */
body.ghost-panel-open #chat-input-container,
body.ghost-panel-open #chat-input {
    border-color: var(--color-border) !important;
    outline: none !important;
}

/* Fix Console tab spacing */
.tabs-container .tabs {
    display: flex !important;
    justify-content: space-between !important;
}

.tabs-container .tabs .tab {
    flex: 1 !important;
    text-align: center !important;
}