.chat-backdrop{position:fixed;inset:0;z-index:89;background:rgba(16,35,55,.05);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
.chat-backdrop[hidden]{display:none}
.kja-chat .chat-attach{display:grid;place-items:center;flex-shrink:0;width:44px;height:44px;background:#f0f2f5;color:#465364;border-radius:50%;padding:10px;order:-1;transition:background .18s,transform .18s}
.kja-chat .chat-attach:hover{background:#e2e8f0;color:#004fb0}
.kja-chat .chat-attach:active{transform:scale(.94)}
.kja-chat .chat-compose textarea{min-width:0}
.chat-image-preview:empty{display:none}
.chat-image-preview{display:flex;gap:8px;align-items:center;padding:8px 12px;background:#f5f6f8;font-size:12px;flex-shrink:0}
.chat-image-preview img{width:54px;height:54px;object-fit:contain;border-radius:6px}
.chat-image-preview button{margin-left:auto;background:transparent;color:#c2065c;min-height:44px}
.kja-chat .chat-image-open{display:block;padding:0;background:#e8edf3;border-radius:20px 20px 20px 6px;overflow:hidden;max-width:100%;color:#344256;min-height:44px}
.chat-image-open img{display:block;width:260px;max-width:100%;height:auto;max-height:360px;object-fit:contain;border-radius:0}
.chat-message[data-mine=true] .chat-image-open{border-radius:20px 20px 6px 20px;margin-left:auto}
.chat-message.has-image .chat-bubble{margin-top:5px}
@media(max-width:700px){.chat-image-open img{width:230px;max-height:310px}}
@media(prefers-reduced-motion:reduce){.kja-chat .chat-attach{transition:none}}
.chat-image-dialog{max-width:94vw;max-height:92dvh;padding:12px;border:1px solid #e2e8f0;border-radius:20px;background:#fff;box-shadow:0 24px 80px #10233740}
.chat-image-dialog::backdrop{background:#000b}
.chat-image-dialog img{display:block;max-width:88vw;max-height:78dvh;object-fit:contain;border-radius:10px}
.chat-image-toolbar{display:flex;justify-content:flex-end;padding:0 0 10px}
.chat-image-dialog button{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:44px;padding:8px 14px;border:1px solid #dbe4ee;border-radius:12px;background:#f1f5f9;color:#183b63;font-family:inherit;font-size:13px;font-weight:600;line-height:1.2;cursor:pointer;transition:background .16s,transform .16s}
.chat-image-dialog button:hover{background:#e3edf8;border-color:#bccfe4}
.chat-image-dialog button:active{transform:scale(.96)}
.chat-image-dialog button:focus-visible{outline:3px solid #1266c5;outline-offset:3px}
@media(prefers-reduced-motion:reduce){.chat-image-dialog button{transition:none}}

/* Aper?u int?gr? au champ de composition. */
.kja-chat .chat-window:has(.chat-image-preview:not(:empty)) { --attachment-inset: 14px; }
.kja-chat .chat-image-preview:not(:empty) { position: relative; display: flex; align-items: flex-end; gap: 14px; margin: 10px var(--attachment-inset) 0; padding: 12px 12px 14px; background: #fff; border: 1px solid #e2e4df; border-bottom: 0; border-radius: 22px 22px 0 0; }
.kja-chat .chat-image-preview-tile { position: relative; flex: 0 0 auto; width: 126px; height: clamp(105px,22dvh,178px); border-radius: 16px; background: #f1f2ee; overflow: hidden; }
.kja-chat .chat-image-preview-tile img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: inherit; }
.kja-chat .chat-image-preview-tile button { position: absolute; top: 6px; right: 6px; display: grid; place-items: center; width: 32px; height: 32px; min-height: 32px; padding: 7px; margin: 0; border: 1px solid #ffffff70; border-radius: 50%; color: #fff; background: #343a3ee6; box-shadow: 0 2px 6px #0002; cursor: pointer; }
.kja-chat .chat-image-preview-tile button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; }
.kja-chat .chat-image-preview-tile button:hover { background: #171e22; }
.kja-chat .chat-image-preview-tile button:focus-visible { outline: 2px solid #168b55; outline-offset: -2px; }
.kja-chat .chat-image-preview-status { color: #717b72; font-size: 11px; line-height: 1.5; padding-bottom: 4px; }
.kja-chat .chat-image-preview:not(:empty)+.chat-compose { margin: 0 var(--attachment-inset); padding: 10px 12px; border: 1px solid #e2e4df; border-top: 0; border-radius: 0 0 22px 22px; background: #fff; }
.kja-chat .chat-image-preview:not(:empty)+.chat-compose::before { content: ''; position: absolute; left: 14px; right: 14px; top: 0; height: 1px; background: #e8ebe5; }
.kja-chat .chat-image-preview:not(:empty)+.chat-compose textarea { padding-inline: 5px; background: #fff; border-radius: 8px; }
.kja-chat .chat-image-preview:not(:empty)+.chat-compose .chat-send { border-radius: 50%; background: #20b75a; }
.kja-chat .chat-image-preview:not(:empty)+.chat-compose .chat-send svg { transform: rotate(-90deg); }
.kja-chat .chat-image-preview:not(:empty)+.chat-compose .chat-attach { background: #f2f4ef; }
@media(max-width:420px) { .kja-chat .chat-window:has(.chat-image-preview:not(:empty)) { --attachment-inset: 8px; } .kja-chat .chat-image-preview-tile { width: 108px; } }