/*
 * PIM-058c: visual polish for the Pimcore Copilot chat panel.
 *
 * Bundle's chat entries get a CSS class derived from `role.toLowerCase()`
 * (vendor/pimcore/copilot-bundle/.../chatInteractionAdapter.js:283). After we
 * renamed the role labels to PL ("Prompt" / "Odpowiedź"), the bundle's
 * defaults `.entry.you` / `.entry.copilot` no longer match. We re-target
 * with `.entry.prompt` (operator side) and `.entry.odpowiedź` (AI side)
 * preserving the same visual distinction (cool gray vs brand purple).
 *
 * Also: the prompt block tends to be a wall of text (system + user prompt
 * with attribute bullets). Improve readability with restrained padding,
 * slightly increased line-height, and a soft monospace fallback for the
 * code-like attribute lines.
 */

/* Operator (Prompt) side — neutral, plain. */
.pimcore_copilot_history .action_run .chat_history .entry.prompt {
    border-bottom: 1px solid #d8d8d8;
    background: rgba(120, 120, 120, 0.04);
    padding: 12px 14px;
    border-radius: 4px;
}

.pimcore_copilot_history .action_run .chat_history .entry.prompt .role {
    color: #4a4a4a;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    font-size: 11px;
    margin-bottom: 6px;
}

/* AI (Odpowiedź) side — brand purple accent matching bundle defaults. */
.pimcore_copilot_history .action_run .chat_history .entry.odpowiedź {
    border-bottom: 1px solid #8C5BC9;
    background: rgba(100, 40, 180, 0.05);
    padding: 12px 14px;
    border-radius: 4px;
}

.pimcore_copilot_history .action_run .chat_history .entry.odpowiedź .role {
    color: #8C5BC9;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    font-size: 11px;
    margin-bottom: 6px;
}

.pimcore_copilot_history .action_run .chat_history .entry.odpowiedź .x-form-trigger-wrap-default {
    border: none;
}

.pimcore_copilot_history .action_run .chat_history .entry.odpowiedź textarea {
    background: rgba(100, 40, 180, 0.08);
    padding: 10px 12px;
    line-height: 1.5;
}

.pimcore_copilot_history .action_run .chat_history .entry.odpowiedź textarea:focus {
    background: #fff;
    border: 1px solid #d0d0d0;
    padding: 9px 11px;
}

/* Both sides — readable typography on the prompt/response wall of text. */
.pimcore_copilot_history .action_run .chat_history .entry {
    line-height: 1.55;
    font-size: 13px;
    margin-bottom: 12px;
}

/* Last sent prompt visual emphasis (bundle adds .last_prompt_message). */
.pimcore_copilot_history .action_run .chat_history .entry.last_prompt_message {
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
}

/* Last AI message — slightly stronger highlight (selected outcome). */
.pimcore_copilot_history .action_run .chat_history .entry.last_chat_message.odpowiedź {
    box-shadow: 0 0 0 1px rgba(100, 40, 180, 0.15);
}

/* Refinement input field — tighter alignment with the conversation block. */
.pimcore_copilot_history .action_run .refine-section,
.pimcore_copilot_history .action_run .chat_history .entry textarea {
    font-size: 13px;
    line-height: 1.55;
}

/*
 * PIM-058k: "Wartość do zapisu" pin pod historią czatu Copilota.
 * Wstrzykiwany przez copilot-result-pin.js w `chatInteractionAdapter`.
 * Wizualnie odróżniony — żeby operator widział to co LECI do produktu.
 */
.pimcore_copilot_history .action_run .pimcore_copilot_result_pin {
    margin: 14px 0 12px 0;
    padding: 12px 14px;
    border: 1px solid #8C5BC9;
    border-radius: 4px;
    background: rgba(140, 91, 201, 0.06);
}
.pimcore_copilot_history .action_run .pimcore_copilot_result_pin_label {
    margin-bottom: 8px;
    font-size: 12px;
    color: #4a4a4a;
}
.pimcore_copilot_history .action_run .pimcore_copilot_result_pin_role {
    color: #6428B4;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 11px;
}
.pimcore_copilot_history .action_run .pimcore_copilot_result_pin_hint {
    color: #888;
    font-size: 11px;
    font-style: italic;
}
.pimcore_copilot_history .action_run .pimcore_copilot_result_pin_textarea_host {
    margin-bottom: 8px;
}
.pimcore_copilot_history .action_run .pimcore_copilot_result_pin_textarea textarea {
    background: #fff;
    border: 1px solid #d0c0e6;
    padding: 10px 12px;
    line-height: 1.5;
    font-size: 13px;
}
.pimcore_copilot_history .action_run .pimcore_copilot_result_pin_textarea textarea:focus {
    border-color: #6428B4;
    outline: none;
}
.pimcore_copilot_history .action_run .pimcore_copilot_result_pin_actions {
    text-align: right;
}

/* PIM-058f translate dialog — visual states for review panel. */
.pimcore_copilot_translate_saved textarea {
    background: rgba(34, 170, 51, 0.08) !important;
    border-color: #2a7 !important;
}

.pimcore_copilot_translate_discarded textarea {
    background: rgba(120, 120, 120, 0.06) !important;
    color: #888 !important;
}

/* Lewa kolumna — grid dostępnych akcji może mieć dużo wpisów; cap'ujemy
 * panel'a, .x-grid-view ma natywny scroller (Ext.scroll). */
.pimcore_copilot_window_search_panel .pimcore_copilot_available_actions {
    max-height: calc(80vh - 110px) !important;
}

/*
 * PIM-058n: Detail window (maximized view) — bundle's view.js ustawia
 * `maxHeight: 750`. Na większych monitorach okno jest niepotrzebnie
 * niskie (operator zgłasza „moglibyśmy zwiększyć wysokość żeby widzieć
 * więcej konwersacji”). Dodatkowo `top: 10%` z bundle CSS oznacza, że
 * 750px wystarcza tylko do ~880px wzrostu (10% + 750 ≤ 100% → potrzeba
 * viewport ≥ 833px). Override do 90vh z top:5% daje pełnoekranowy widok
 * zachowując 5% marginesy góra/dół.
 */
.pimcore_copilot_window.pimcore_copilot_detail_window {
    top: 5% !important;
    height: 90vh !important;
    max-height: 90vh !important;
}

/*
 * PIM-058n (rev3): scroll + wypełnianie pustki w detail window.
 *
 * Setup:
 *   - Window 90vh (override bundle's 750)
 *   - Outer .x-panel-body (Ext's scrollable: true x-scroller) — overflow auto
 *     → gdy content > body, naturalny scrollbar pojawia się sam.
 *   - .action_run dostaje `min-height: calc(90vh - 100px)` (≈ outer body
 *     height minus headers/paddings) → przy KRÓTKIM contencie action_run
 *     i tak rozciąga się do dna widocznego obszaru.
 *   - .action_run + .history-container-inner = flex column → chat_history
 *     dostaje flex:1 i wypełnia "pustkę" pomiędzy ostatnią wiadomością
 *     a cta_container. cta_container przykleja się do dna.
 *   - Gdy content NATURALNIE > min-height (bardzo długi chat + duży pin):
 *     action_run rośnie ponad min-height, outer body's overflow scroluje.
 *     chat_history ma własny overflow:auto + min-height: 100px żeby nie
 *     znikał nawet gdy pin/cta są monstrualne.
 */

/* Outer body — overflow auto safety net + scrollbar styling. */
.pimcore_copilot_detail_window .pimcore_copilot_history > .x-panel-bodyWrap > .x-panel-body {
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

/* Action_run: min-height żeby wypełnić okno przy krótkim contencie,
 * + flex column do dystrybucji przestrzeni pomiędzy chat a cta. */
.pimcore_copilot_detail_window .pimcore_copilot_history .action_run {
    min-height: calc(90vh - 100px);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

.pimcore_copilot_detail_window .pimcore_copilot_history .action_run > .history-container-inner {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* h3, state_information, pin, cta_container — naturalna wysokość, nie kurczą się */
.pimcore_copilot_detail_window .pimcore_copilot_history .action_run .history-container-inner > h3,
.pimcore_copilot_detail_window .pimcore_copilot_history .action_run .history-container-inner > .state_information,
.pimcore_copilot_detail_window .pimcore_copilot_history .action_run .history-container-inner > .pimcore_copilot_result_pin,
.pimcore_copilot_detail_window .pimcore_copilot_history .action_run .history-container-inner > .cta_container {
    flex: 0 0 auto;
}

/* Chat_history: rośnie wypełniając pustkę po prawej. Ma własny overflow
 * + min-height żeby zawsze pokazywać przynajmniej 100px chatu, nawet gdy
 * pin + cta są bardzo wysokie. */
.pimcore_copilot_detail_window .pimcore_copilot_history .action_run .history-container-inner > .chat_history {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 100px;
    padding-right: 4px;
}

/* Cienki scrollbar dla outer x-panel-body w detail window. */
.pimcore_copilot_detail_window .pimcore_copilot_history > .x-panel-bodyWrap > .x-panel-body::-webkit-scrollbar,
.pimcore_copilot_detail_window .pimcore_copilot_history .action_run .chat_history::-webkit-scrollbar {
    width: 8px;
}
.pimcore_copilot_detail_window .pimcore_copilot_history > .x-panel-bodyWrap > .x-panel-body::-webkit-scrollbar-track,
.pimcore_copilot_detail_window .pimcore_copilot_history .action_run .chat_history::-webkit-scrollbar-track {
    background: transparent;
}
.pimcore_copilot_detail_window .pimcore_copilot_history > .x-panel-bodyWrap > .x-panel-body::-webkit-scrollbar-thumb,
.pimcore_copilot_detail_window .pimcore_copilot_history .action_run .chat_history::-webkit-scrollbar-thumb {
    background: rgba(140, 91, 201, 0.35);
    border-radius: 4px;
}
.pimcore_copilot_detail_window .pimcore_copilot_history > .x-panel-bodyWrap > .x-panel-body::-webkit-scrollbar-thumb:hover,
.pimcore_copilot_detail_window .pimcore_copilot_history .action_run .chat_history::-webkit-scrollbar-thumb:hover {
    background: rgba(140, 91, 201, 0.6);
}


/*
 * .action_run ma natywnie padding: 10px — operator zgłasza 'ucina górę'.
 * Zwiększamy padding góra/dół + odstęp pod h3 z separatorem żeby tytuł
 * akcji miał oddech od krawędzi.
 */
.pimcore_copilot_history .action_run {
    padding: 16px 14px 18px 14px !important;
}
.pimcore_copilot_history .action_run h3 {
    margin: 0 0 12px 0 !important;
    padding-bottom: 8px;
    border-bottom: 1px solid #ececec;
}

/*
 * Expand icon (.action_item_expander) — bundle generuje button z klasą
 * Ext'ową `.x-btn-default-small` + ikona z `.x-btn-icon-el-default-small`.
 * Default Ext'owy small icon ma wymiary 16×16, ale bundle's CSS
 * `.pimcore_copilot_maximize` ustawia `background-size: 24px 24px`. W
 * rezultacie 24×24 SVG renderuje się w 16×16 oknie i widać tylko
 * lewy-górny róg ikony.
 *
 * Fix: wymuszone 24×24 na wewnętrznej x-btn-icon-el (przebija default
 * Ext'owy 16×16) + wymuszone 32×32 na zewnętrznym button'ie. Plus jawne
 * background-position: center żeby SVG wycentrował się w nowym oknie.
 */
.pimcore_copilot_history .action_run .action_item_expander {
    width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    overflow: visible !important;
}
.pimcore_copilot_history .action_run .action_item_expander .x-btn-wrap,
.pimcore_copilot_history .action_run .action_item_expander .x-btn-wrap-default-small {
    width: 32px !important;
    height: 32px !important;
    overflow: visible !important;
    padding: 0 !important;
}
.pimcore_copilot_history .action_run .action_item_expander .x-btn-button {
    width: 32px !important;
    height: 32px !important;
    overflow: visible !important;
    padding: 0 !important;
}
.pimcore_copilot_history .action_run .action_item_expander .x-btn-icon-el,
.pimcore_copilot_history .action_run .action_item_expander .x-btn-icon-el-default-small,
.pimcore_copilot_history .action_run .action_item_expander .pimcore_copilot_maximize,
.pimcore_copilot_history .action_run .action_item_expander .pimcore_copilot_minimize {
    width: 24px !important;
    height: 24px !important;
    background-size: 24px 24px !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    margin: 4px !important;
    display: block !important;
    box-sizing: content-box !important;
}

/*
 * PIM-058n: footer (.cta_container .apply_container) musi mieć dość
 * miejsca na 32×32 ikonę expandera po lewej. Bundle's `.apply_container`
 * = display:flex, ale bez align-items / min-height — prawa strona
 * (przycisk „Zastosuj”, ~24-28px) decyduje o wysokości flex-row,
 * przez co dolna krawędź 32×32 ikony jest klipowana parentem.
 *
 * Fix:
 *  - align-items: center (ikony i przycisk zastosuj wyrównane pionowo)
 *  - min-height: 40px (4px luzu pod 32×32 ikoną)
 *  - overflow: visible w całym łańcuchu cta_container → apply_left
 *    → applyExpandContainer (Ext.Container hbox), żeby nic nie
 *    klipowało button'a
 *  - flex-shrink: 0 na apply_left żeby applyContainerRight nie
 *    wepchnął ikony do width:0
 */
.pimcore_copilot_history .action_run .cta_container,
.pimcore_copilot_history .action_run .cta_container .apply_container,
.pimcore_copilot_history .action_run .cta_container .apply_container > .apply_left,
.pimcore_copilot_history .action_run .cta_container .apply_container > .apply_left > .x-container,
.pimcore_copilot_history .action_run .cta_container .apply_container > .apply_left .x-box-inner {
    overflow: visible !important;
}

.pimcore_copilot_history .action_run .cta_container .apply_container {
    align-items: center !important;
    min-height: 40px !important;
    gap: 12px;
    padding-top: 4px;
    padding-bottom: 4px;
}

.pimcore_copilot_history .action_run .cta_container .apply_container > .apply_left {
    flex-shrink: 0 !important;
    min-width: 36px !important;
    min-height: 36px !important;
    display: flex !important;
    align-items: center;
}

.pimcore_copilot_history .action_run .cta_container .apply_container > .apply_left > .x-container {
    min-height: 36px !important;
}

/*
 * PIM-058i: bundle's chat refine button (`Doprecyzuj`) tworzony jest z
 * minWidth: 60 — wystarcza na EN „Refine” ale przycina PL „Doprecyzuj”
 * do „Doprecy…”. Override przez CSS na działania w cta_container.
 */
.pimcore_copilot_history .action_run .cta_container .x-btn {
    min-width: 110px !important;
}
.pimcore_copilot_history .action_run .cta_container .x-btn-button {
    padding-left: 12px !important;
    padding-right: 12px !important;
}