/* Focus clarification UI: compact, quiet and Codex-like. */
.text-selection-popup {
    min-width: 0 !important;
    padding: 4px !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 9px !important;
    background: rgba(36, 36, 36, 0.98) !important;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28) !important;
    animation: clarificationPopupIn 120ms ease-out !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.text-selection-popup .popup-ai-btn,
.text-selection-popup .popup-ai-btn:hover,
.text-selection-popup .popup-ai-btn:focus-visible,
.text-selection-popup .popup-ai-btn:active {
    min-height: 30px !important;
    padding: 5px 10px !important;
    gap: 7px !important;
    border: 0 !important;
    border-radius: 6px !important;
    outline: 0 !important;
    background: transparent !important;
    color: var(--text-primary) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    transform: none !important;
    transition: background-color 120ms ease, color 120ms ease !important;
}

.text-selection-popup .popup-ai-btn:hover {
    background: rgba(255, 255, 255, 0.08) !important;
}

.text-selection-popup .popup-ai-icon {
    width: 16px !important;
    height: 16px !important;
    filter: none !important;
    color: var(--text-secondary) !important;
}

@keyframes clarificationPopupIn {
    from { opacity: 0; transform: translateY(2px); }
    to { opacity: 1; transform: translateY(0); }
}

.side-chat-panel {
    width: 380px !important;
    background: var(--bg-sidebar) !important;
    /* The panel boundary is geometry, not a visible divider. */
    border: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-color: transparent !important;
    box-shadow: -12px 0 30px rgba(0, 0, 0, 0.16) !important;
    animation: none !important;
}

.side-chat-header {
    min-height: 58px !important;
    padding: 0 18px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.side-chat-header h3 {
    font-size: 16px !important;
    font-weight: 650 !important;
    letter-spacing: -0.01em !important;
}

.close-side-chat,
.close-side-chat:hover,
.close-side-chat:focus-visible {
    width: 28px !important;
    height: 28px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 7px !important;
    outline: 0 !important;
    background: transparent !important;
    color: var(--text-secondary) !important;
    transform: none !important;
}

.close-side-chat:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    color: var(--text-primary) !important;
}

.close-side-chat svg {
    width: 15px !important;
    height: 15px !important;
}

.side-chat-context {
    margin: 14px 16px 8px !important;
    padding: 10px 12px !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 10px !important;
    background: rgba(255, 255, 255, 0.035) !important;
}

/* Unlike the main composer, the clarification field is a compact Codex-style
   rectangular control rather than a pill. */
.side-chat-input-area,
.side-chat-input-area:hover,
.side-chat-input-area:focus-within {
    min-height: 48px !important;
    margin: 12px 14px 16px !important;
    padding: 5px 8px !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: 11px !important;
    background: rgba(255, 255, 255, 0.045) !important;
    box-shadow: none !important;
    outline: none !important;
    transform: none !important;
    transition: border-color 120ms ease, background-color 120ms ease !important;
}

.side-chat-input-area:focus-within {
    border-color: rgba(255, 255, 255, 0.24) !important;
    background: rgba(255, 255, 255, 0.06) !important;
}

.side-chat-input-area #sideChatInput,
.side-chat-input-area #sideChatInput:focus {
    min-height: 36px !important;
    height: 36px !important;
    padding: 8px 5px !important;
    border: 0 !important;
    border-radius: 7px !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    color: var(--text-primary) !important;
}

.side-chat-input-area .side-attach-btn,
.side-chat-input-area .side-voice-btn,
.side-chat-input-area .side-send-btn {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
    border: 0 !important;
    border-radius: 7px !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
}

.side-chat-input-area .side-attach-btn:hover,
.side-chat-input-area .side-voice-btn:hover,
.side-chat-input-area .side-send-btn:hover {
    border: 0 !important;
    background: rgba(255, 255, 255, 0.08) !important;
    transform: none !important;
}

/* User messages follow the same soft pill language as the main chat. */
.side-message.user .side-message-bubble {
    max-width: min(78%, 64ch) !important;
    padding: 7px 16px !important;
    border: 0 !important;
    border-radius: 24px !important;
    line-height: 1.5 !important;
}

body.light-mode .text-selection-popup {
    background: #f7f7f7 !important;
    border-color: rgba(0, 0, 0, 0.12) !important;
}

body.light-mode .side-chat-panel {
    border-color: transparent !important;
}

body.light-mode .side-chat-input-area,
body.light-mode .side-chat-input-area:focus-within {
    border-color: rgba(0, 0, 0, 0.16) !important;
    background: rgba(0, 0, 0, 0.035) !important;
}