.hidden {
    display: none !important;
}

.dialog-section.tips-dialog {
    position: absolute !important;
    z-index: 1;
    overflow: auto;
    /*width: calc(100% - 53px);*/
    width: 100%;
    right: 0;
    top: 0;
    height: 100%;
    flex-direction: column;
    align-items: normal;
}

.tips-dialog > .container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 15px;
    margin-left: 28px;
    margin-top: 49px;
    width: calc(100% - 28px - 28px);
    height: calc(100% - 49px - 49px);
    border-radius: 4px;
    overflow: auto;
}


.dialog-section.tips-dialog {
    background-color: rgba(255,255,255,0.25);
}

.dialog-section.tips-dialog>.container {
    background: #181826;
    border-left: 1px solid #32324d;
    color: #FFF;
}

.dialog-section.tips-dialog>.container>div:first-child {
    color: #FFF;
}

.dialog-section.tips-dialog>.container>div:first-child {
    font-weight: 600;
    font-size: 28px;
    line-height: 1.14;
    text-align: left;
    width: 100%;
}

.tips-controls, .ai-response:not(:has(> *)):not(:empty), .ai-response:has(> *) .ai-tip {
    background: #212134;
    border-color: #32324d;
    box-shadow: 1px 1px 10px rgba(3, 3, 5, 0.2);
}

.live-edit:has(iframe[src="about:blank"]) .dialog-section.tips-dialog,
body.live-edit_selector-tips_loading .dialog-section.tips-dialog {
    display: none !important;
}

.ai-response {
    display: grid;
}

.ai-response:has(> *) {
    font-size: 0;
}

.ai-response:has(> *) > * {
    font-size: 16px;
}

.tips-controls, .ai-response:not(:has(> *)):not(:empty), .ai-response:has(> *) .ai-tip {
    width: 100%;
    border-radius: 4px;
    border-style: solid;
    border-width: 1px;
    padding-block-start: 16px;
    padding-inline-end: 16px;
    padding-block-end: 16px;
    padding-inline-start: 16px;
}

.ai-response:has(> *) .ai-tip {
    margin-bottom: 16px;
}

.ai-response:has(> *) .ai-tip.saved {
    opacity: 0.5;
    order: 1;
    display: none;
}

.ai-response:has(> *) .ai-tip.saved,
.ai-response:has(> *) .ai-tip.saved * {
    pointer-events: none;
    cursor: not-allowed;
}

.ai-text:not(:empty):before,
.ai-suggestions:not(:empty):before {
    color: #FFF;
}

.ai-text:not(:empty),
.ai-comment:not(:empty) {
    color: #a5a5ba;
}

.ai-text:not(:empty) {
    border: 1px solid #4a4a6a;
    color: #a5a5ba;
}
.ai-replace_textarea {
    min-height: inherit;
    border: 0;
    padding: 0;
    padding-right: 25px;
}
.ai-replace_textarea:focus-within {
    outline: 0;
}
.ai-replace_textarea:not(:focus-within) {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="2rem" height="2rem" fill="%23666687"><path d="m28.414 9.171-5.585-5.586a2 2 0 0 0-2.829 0L4.586 19A1.98 1.98 0 0 0 4 20.414V26a2 2 0 0 0 2 2h5.586A1.98 1.98 0 0 0 13 27.414L28.414 12a2 2 0 0 0 0-2.829M24 13.585 18.414 8l3-3L27 10.585z"></path></svg>');
    background-repeat: no-repeat;
    background-position: top 3px right 5px;
    background-size: 15px;
}

.tips-dialog:has(#ai-services option[value="openai"]:not(:checked)) #ai-agent option[value="images"],
.tips-dialog:has(#ai-services option[value="openai"]:not(:checked)) .live-edit_input-container:has(#live-edit_ai-imgmodel),
.tips-dialog:has(#ai-agent option[value="custom"]:not(:checked)) .live-edit_input-container:has(#live-edit_ai-systemprompt) {
    display: none;
}

.tips-dialog:has(#ai-agent option[value="custom"]:not(:checked)) #live-edit_ai-systemprompt:not(:focus) {
    opacity: 0.5;
    height: 100px;
}

/* Step-to-the-next-default-prompt button, sitting on the Prompt label's own row - .dialog-section
   label stacks its children in a column, which would drop the button underneath the text. It keeps
   .live-edit_button-icon for the icon's own light/dark fill, and only overrides the size, since
   that class is built for the 40px controls bar. */
.live-edit_label:has(#live-edit_ai-prompt_cycle) {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

#live-edit_ai-prompt_cycle {
    /* Anchors the [aria-label] tooltip to the button instead of whatever distant positioned
       ancestor it would otherwise find - the controls bar gives the other icon buttons one. */
    position: relative;
    display: flex;
    align-items: center;
    height: auto;
    padding: 2px 6px;
}

#live-edit_ai-prompt_cycle svg {
    height: 14px;
}

body:has(button[data-editor="tips"].active) .ai-response:has(> *) {
    display: block;
}

.tips-dialog strong {
    font-weight: 700;
}

.ai-text:not(:empty):before,
.ai-suggestions:not(:empty):before {
    content: "";
    margin-bottom: 4px;
    display: block;
    font-weight: 700;
}

.ai-suggestions:not(:empty):before {
    content: "Suggestions:";
    font-size: 14px;
}

.ai-suggestion {
    display: flex;
    gap: 8px;
}

.ai-subject:not(:empty) {
    margin-bottom: 4px;
    line-height: 1.33;
}

.ai-text:not(:empty),
.ai-comment:not(:empty) {
    width: 100%;
    margin-bottom: 16px;
    font-size: 14px;
    line-height: 1.33;
}

.ai-text:not(:empty) {
    padding: 15px;
    border-radius: 4px;
    height: 100%;
}

.ai-suggestion:not(.no-events) .ai-find:not(:empty):before {
    content: "Find:";
}

.ai-suggestion:not(.no-events) .ai-replace:not(:empty):before {
    content: "Replace:";
}

/* Design editor tips: the pair is a design classes field and the classes to write into it,
   not a find/replace on content. */
.ai-suggestion:not(.no-events):has(textarea[name="ai-classes"]) .ai-find:not(:empty):before {
    content: "Design field:";
}

.ai-suggestion:not(.no-events):has(textarea[name="ai-classes"]) .ai-replace:not(:empty):before {
    content: "Classes:";
}

#ai-context:has([value="current-entry"]:checked)+p,
#ai-context:has([value="prompt-only"]:checked)+p+p {
    display: none;
}

#ai-context:has(#ai-context_specific-content:checked)+p {
    margin-bottom: 10px;
}

#ai-context:not(:has(#ai-context_specific-content:checked))+p,
#ai-context:has(#ai-context_specific-content:checked)+p+p {
    display: none;
}

#ai-context:has(#ai-context_specific-content:checked[value="0"])+p:before {
    content: "Click on a item to select it's HTML as context."
}

.live-edit:has(#ai-context_specific-content[value="0"]:checked) #live-edit_tips-submit {
    display: none;
}

/* START STYLES FOR WHEN CONTROLS ARE NOT ALWAYS ON THE RIGHT */
@container (max-width: calc(100vw - 1085px)) {
    .ai-response:has(> *) .ai-tip {
        position: fixed;
        right: 56px;
        top: 0;
        left: auto;
        width: auto;
        padding: 15px;
        height: 100%;
        background: #212134;
        flex-flow: column;
        border-right-width: 1px;
        border-style: solid;
        border-color: #32324d;
    }
}

@container (max-width: calc(-1085px + 100vw)) {
    .ai-response:has(> *) .ai-tip {
        background-color: #fff;
        border-color: #eaeaef;
    }
}

@media screen and (prefers-color-scheme:light) {

    .ai-response:has(> *) .ai-tip {
        background: #ffffff;
        border-color: #eaeaef;
    }

    .tips-controls, .ai-response:not(:has(> *)):not(:empty), .ai-response:has(> *) .ai-tip {
        background: #ffffff;
        border-color: #eaeaef;
        box-shadow: 0px 1px 4px rgba(33, 33, 52, 0.1);
    }

    .ai-text:not(:empty):before, .ai-suggestions:not(:empty):before {
        color: #32324d;
    }

    .ai-text:not(:empty) {
        border: 1px solid #dcdce4;
        color: #32324d;
    }

    .ai-replace_textarea:not(:focus-within) {
        background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="2rem" height="2rem" fill="%23c0c0cf"><path d="m28.414 9.171-5.585-5.586a2 2 0 0 0-2.829 0L4.586 19A1.98 1.98 0 0 0 4 20.414V26a2 2 0 0 0 2 2h5.586A1.98 1.98 0 0 0 13 27.414L28.414 12a2 2 0 0 0 0-2.829M24 13.585 18.414 8l3-3L27 10.585z"></path></svg>');
    }

    .dialog-section.tips-dialog {
        background-color: rgba(0,0,0,0.25);
    }

    .dialog-section.tips-dialog>.container {
        background: #f6f6f9;
        border-left: 1px solid #eaeaef;
        color: #32324d;
    }

    .dialog-section.tips-dialog>.container>div:first-child {
        color: #32324d;
    }
}

/* Hide technical fields in content creator tips — D tips keep them visible so user can verify which entry will be translated */
/*
.ai-tip.ai-dependency:not([dependency]) .ai-suggestion:has(textarea[name="ai-entry"]),
.ai-tip.ai-dependency:not([dependency]) .ai-suggestion:has(textarea[name="ai-entry_collection"]) {
    display: none;
}
*/

/* Lock dependency tips until their entry is created */
.ai-response:has(> *) .ai-tip:not(.saved) + .ai-tip[dependency]:not([dependency="0"]):not([data-created]) {
    position: relative;
    margin-left: 1rem;
    width: calc(100% - 1rem);
}

.ai-response:has(> *) .ai-tip:not(.saved) + .ai-tip[dependency]:not([dependency="0"]):not([data-created]) .live-edit_buttons {
    display: none;
}

.tips-dialog:has(#live-edit_tips-submit.live-edit_loading) .live-edit_buttons button {
    pointer-events: none;
    cursor: not-allowed;
    opacity: 0.5;
}

.no-events textarea {
    background-image: none !important;
}

.ai-response:has(> *) .ai-tip:not(.saved) + .ai-tip[dependency]:not([dependency="0"]):not([data-created])::after {
    content: "This tip is waiting for an entry task above.";
    position: sticky;
    font-weight: 600;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    border-radius: 4px;
}

.tips-dialog:has(.ai-bulk-actions:not(.hidden)) .tips-controls {
    position: sticky;
    top: 0;
    z-index: 1;
}

.tips-dialog:has(.ai-bulk-actions:not(.hidden)) .tips-controls > *:not(.ai-bulk-actions) {
    display: none;
}

.tips-dialog:not(:has(.ai-response .ai-tip:not(.saved) :is(.ai-create, .ai-schedule, .ai-translate, .ai-save))) .ai-save-all,
.tips-dialog:not(:has(.ai-response .ai-tip:not(.saved) :is(.ai-create, .ai-schedule, .ai-translate, .ai-apply))) .ai-apply-all {
    display: none;
}

.ai-clear {
    max-width: 70px;
}

.tips-controls:has(#live-edit_tips-submit.live-edit_loading) .live-edit_input-container,
.tips-controls:has(#live-edit_tips-submit.live-edit_loading) details {
    display: none;
}