/** * Style callouts for ChatGPT prompt and responses * * @author Ljavuras */ .callout[data-callout|="chatgpt"] { margin: var(--size-4-8) 0; background-color: unset; box-shadow: unset; --callout-icon: ChatGPT; --callout-icon-size: 32px; --gizmo-bot-avatar-size: 18px; --callout-prompt-padding: 10px 20px; --callout-response-padding: 0 0 0 calc(var(--callout-icon-size) + 1rem); --callout-response-margin-top: 1rem; } .callout[data-callout|="chatgpt"] .callout-content { padding: unset; background-color: unset; box-shadow: none; } .callout[data-callout="chatgpt-prompt"] .callout-title { display: none; } .callout[data-callout="chatgpt-prompt"] .callout-content { display: flex; flex-direction: column; } .callout[data-callout="chatgpt-prompt"] .callout-content > * { display: inline-block; max-width: 70%; margin-block-start: unset; margin-block-end: unset; margin-left: auto; padding: var(--callout-prompt-padding); text-align: left; background-color: var(--background-secondary); border-radius: 1.5rem; } .callout[data-callout="chatgpt-prompt"] .callout-content > * + * { margin-top: 1rem; } .callout[data-callout="chatgpt-response"] .callout-content > *:first-child { margin-block-start: unset; } .callout[data-callout="chatgpt-response"] .callout-content > *:last-child { margin-block-end: unset; } .callout[data-callout="chatgpt-response"] { display: flex; } .callout[data-callout="chatgpt-response"] .callout-title { display: block; padding: 4px 20px 0 0; box-shadow: unset; } .callout[data-callout="chatgpt-response"] .callout-icon { width: var(--callout-icon-size); height: var(--callout-icon-size); outline: solid 1px var(--text-normal); outline-offset: -1px; border-radius: var(--callout-icon-size); } .callout[data-callout="chatgpt-response"] .callout-icon svg { display: block; margin: auto; width: var(--gizmo-bot-avatar-size); height: var(--gizmo-bot-avatar-size); color: var(--text-normal); } .callout[data-callout="chatgpt-response"] .callout-title-inner { display: none; }