.ra-image-button { display: inline-grid; place-items: center; flex: none; width: 44px; min-height: 44px; border: 1px solid var(--cc-line); background: var(--cc-raised); color: var(--cc-muted); cursor: pointer; }
.ra-image-button svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ra-image-button:disabled { opacity: .5; cursor: default; }
.ra-image-button[hidden], .ra-image-preview[hidden], .ra-image-error[hidden] { display: none !important; }
.ra-image-preview { display: flex; gap: 10px; align-items: center; padding: 5px 8px; border: 1px solid var(--cc-line); background: var(--cc-raised); color: var(--cc-ink); font-size: 13px; }
.ra-image-preview img { width: 52px; height: 44px; object-fit: contain; }
.ra-image-preview button { margin-left: auto; min-width: 44px; min-height: 44px; background: transparent; border: 0; font-size: 24px; color: inherit; }
.ra-image-error { padding: 6px 0; color: rgb(var(--c-danger, 160 35 50)); font-size: 13px; }
.ra-image-history { display: block; max-width: 100%; max-height: 220px; margin-top: 8px; object-fit: contain; }
@media (max-width: 1023px) {
  :is(.portal-content, .native-chat-root) .cc-composer:has(.ra-image-button:not([hidden])) { grid-template-columns: 44px minmax(0, 1fr) 44px; }
  :is(.portal-content, .native-chat-root) .cc-composer .ra-image-button { grid-area: 1 / 1; width: 44px; border: 0; background: transparent; }
  :is(.portal-content, .native-chat-root) .cc-composer:has(.ra-image-button:not([hidden])) textarea { grid-area: 1 / 2; }
  :is(.portal-content, .native-chat-root) .cc-composer:has(.ra-image-button:not([hidden])) .cc-send-button { grid-area: 1 / 3; }
}