.sx-planner .sx-event-preview {
    margin: var(--padding-md) 0;
    padding: 0;
    background: transparent;
    border: 0;
}
.sx-planner .sx-event-preview__heading { display: block; font-size: var(--ft-size-medium); line-height: 1.5; font-weight: 400; color: var(--text-color); }
.sx-event-preview__actions { display: flex; flex-wrap: wrap; gap: var(--padding-sm); }
.sx-planner .sx-event-preview__actions button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--padding-sm);
    padding: var(--padding-sm) 0;
    border: 0;
    border-radius: var(--border-radius-md);
    font: inherit;
    font-size: var(--ft-size-medium);
    font-weight: 400;
    line-height: 1.5;
    white-space: normal;
    cursor: pointer;
    box-shadow: none;
}
.sx-planner .sx-event-preview__primary { background: transparent; color: var(--main-color); }
.sx-planner .sx-event-preview__primary:hover { background: transparent; color: var(--main-color-hover); text-decoration: underline; }
.sx-planner .sx-event-preview__primary .sx-followups__icon { color: inherit; }
.sx-planner .sx-event-preview__dismiss { background: transparent; color: var(--text-color); }
.sx-planner .sx-event-preview__dismiss:hover { background: transparent; color: var(--text-strong-color); text-decoration: underline; }
.sx-planner .sx-event-preview__actions button:focus-visible { outline: 2px solid var(--main-color); outline-offset: 2px; }
.sx-planner .sx-event-preview__actions button:disabled { opacity: .48; cursor: not-allowed; }

.sx-image-mode {
    align-items: center;
    display: inline-flex;
    position: relative;
    max-width: 100%;
    margin-inline: var(--padding-xs, 5px) 0;
    padding-inline-end: var(--padding-xs, 5px);
    vertical-align: baseline;
    user-select: all;
}

.sx-image-mode[hidden] {
    display: none;
}

.sx-inline-image-editor {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    overflow-y: auto;
    outline: none;
}
.sx-inline-image-editor[hidden] { display: none; }
.sx-inline-image-editor > .sx-image-mode:first-child { margin-inline-start: 0; }

.sx-image-request-label {
    display: flex;
    align-items: center;
    gap: var(--padding-xs, 5px);
    margin-bottom: var(--padding-xs, 5px);
    font-size: inherit;
    font-weight: 600;
    line-height: 1.5;
}
.sx-image-request-label > svg { flex: 0 0 18px; width: 18px; height: 18px; }

.sx-planner.is-image-generating [data-sx-typing]::after {
    content: "";
    display: block;
    width: min(100%, 360px);
    aspect-ratio: 3 / 2;
    margin-top: var(--padding-md, 20px);
    border-radius: var(--border-radius-md, 10px);
    background: radial-gradient(circle, var(--text-color, #b2b2b2) 1.5px, transparent 2px) center / 18px 18px;
    mask-image: radial-gradient(ellipse at center, #000 15%, transparent 70%);
    opacity: .35;
    animation: sx-image-placeholder-pulse 2s ease-in-out infinite alternate;
}
@keyframes sx-image-placeholder-pulse { to { opacity: .65; } }
@media (prefers-reduced-motion: reduce) {
    .sx-planner.is-image-generating [data-sx-typing]::after { animation: none; }
}
.sx-planner .sx-composer > .sx-image-text-source {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.sx-planner .sx-composer .sx-image-mode__copy {
    align-items: baseline;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    color: var(--text-strong-color, #fff);
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    gap: var(--padding-xs, 5px);
    max-width: 100%;
    min-width: 0;
    padding: 0;
}

.sx-image-mode__copy > svg {
    align-self: center;
    display: block;
    flex: 0 0 auto;
    height: 18px;
    width: 18px;
}

.sx-image-mode__copy strong {
    font-size: inherit;
    font-weight: 600;
    line-height: inherit;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sx-planner .sx-composer .sx-image-mode__copy:hover,
.sx-planner .sx-composer .sx-image-mode__copy:focus,
.sx-planner .sx-composer .sx-image-mode__copy:active {
    background: transparent;
    border: 0;
    box-shadow: none;
    color: var(--text-strong-color, #fff);
}

.sx-planner .sx-composer .sx-image-mode__copy:focus-visible {
    outline: 2px solid var(--text-strong-color, #fff);
    outline-offset: 1px;
}

.sx-image-mode__actions {
    bottom: calc(100% + var(--padding-xs, 5px));
    position: absolute;
    right: 0;
}

.sx-image-mode__actions button {
    background: var(--secondary-bg, #1d1d1d);
    border: 1px solid var(--border-color-light, #444);
    border-radius: var(--border-radius-md, 10px);
    color: var(--text-strong-color, #fff);
    cursor: pointer;
    font: inherit;
    font-size: var(--ft-size-small, 12px);
    padding: var(--padding-xs, 5px) var(--padding-sm, 10px);
}

.sx-image-mode__actions button:hover,
.sx-image-mode__actions button:focus-visible {
    background: var(--panel-bg, #262626);
    border-color: var(--main-color, #2bd180);
}

.sx-image-mode__actions button:focus-visible {
    outline: 2px solid var(--main-color, #2bd180);
    outline-offset: 1px;
}

.sx-image-mode__actions button:disabled {
    cursor: not-allowed;
    opacity: .48;
}

.sx-image-mode__status {
    background: var(--secondary-bg, #1d1d1d);
    border: 1px solid var(--border-color-light, #444);
    border-radius: var(--border-radius-md, 10px);
    bottom: calc(100% + var(--padding-xs, 5px));
    color: var(--text-color, #b2b2b2);
    font-size: var(--ft-size-small, 12px);
    left: 0;
    margin: 0;
    max-width: min(440px, 70vw);
    overflow: hidden;
    padding: var(--padding-xs, 5px) var(--padding-sm, 10px);
    position: absolute;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sx-image-mode__status[role="alert"] {
    color: var(--message-error-color, #ffb4a8);
}

.sx-image-mode__status:empty {
    display: none;
}

.sx-chat-shell--command .sx-composer.is-image-generation-mode > .sx-composer__rotating-prompt {
    display: none;
}

.sx-generated-event-image {
    margin: 0 0 var(--padding-md, 15px);
    width: fit-content;
    max-width: min(640px, 100%);
}
.sx-generated-event-image__stage { position: relative; width: fit-content; max-width: 100%; }
.sx-planner .sx-generated-event-image__preview,
.sx-planner .sx-generated-event-image__preview:hover,
.sx-planner .sx-generated-event-image__preview:active {
    display: block;
    max-width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: var(--border-radius-lg, 20px);
    background: transparent;
    box-shadow: none;
    cursor: zoom-in;
}
.sx-generated-event-image img {
    border-radius: var(--border-radius-lg, 20px);
    display: block;
    height: auto;
    max-height: 520px;
    max-width: 100%;
    object-fit: contain;
    width: auto;
}
.sx-generated-event-image figcaption {
    color: var(--text-color, #b2b2b2);
    font-size: var(--ft-size-small, 12px);
    margin-top: var(--padding-xs, 5px);
}
.sx-generated-event-image__actions,
.sx-generated-image-dialog__actions {
    display: flex;
    gap: var(--padding-xs, 5px);
    position: absolute;
    top: var(--padding-sm, 10px);
    right: var(--padding-sm, 10px);
}
.sx-planner .sx-generated-image-control,
.sx-generated-image-dialog .sx-generated-image-control {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--secondary-bg, #1d1d1d);
    color: var(--text-strong-color, #fff);
    box-shadow: none;
    cursor: pointer;
    text-decoration: none;
}
.sx-generated-image-control svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.sx-planner .sx-generated-image-control:hover,
.sx-generated-image-dialog .sx-generated-image-control:hover {
    background: var(--panel-bg, #262626);
    color: var(--text-strong-color, #fff);
}
.sx-generated-event-image :focus-visible,
.sx-generated-image-dialog :focus-visible { outline: 2px solid var(--main-color); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
    .sx-generated-event-image__actions { opacity: 0; pointer-events: none; }
    .sx-generated-event-image__stage:hover .sx-generated-event-image__actions,
    .sx-generated-event-image__stage:focus-within .sx-generated-event-image__actions { opacity: 1; pointer-events: auto; }
}
.sx-generated-image-dialog {
    box-sizing: border-box;
    width: fit-content;
    max-width: calc(100vw - var(--padding-lg) * 2);
    max-height: calc(100dvh - var(--padding-lg) * 2);
    padding: 0;
    border: 0;
    border-radius: var(--border-radius-lg);
    background: transparent;
    color: var(--text-strong-color);
    overflow: visible;
}
.sx-generated-image-dialog::backdrop { background: var(--site-bg); opacity: .9; }
.sx-generated-image-dialog__frame { position: relative; max-width: 100%; }
.sx-generated-image-dialog img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: calc(100dvh - var(--padding-lg) * 2);
    border-radius: var(--border-radius-lg);
    object-fit: contain;
}