/* Attachments in chat, the upload tray above the composer, and the image viewer */
.nx-attachments { display:flex; flex-direction:column; align-items:flex-start; gap:6px; margin-top:4px; }
.nx-attachment-media { position:relative; max-width:min(400px, 100%); }
.nx-attachment-image { display:block; padding:0; border:0; background: var(--nx-raised, #1e1b26); border-radius:8px; overflow:hidden; cursor:zoom-in; }
.nx-attachment-image img { display:block; max-width:100%; height:auto; }
.nx-attachment-media video { display:block; max-width:100%; max-height:300px; border-radius:8px; background:#000; }
.nx-attachment-file { display:flex; flex-direction:column; gap:8px; width:min(400px, 100%); box-sizing:border-box; padding:12px; border-radius:8px; background: var(--nx-raised, #1e1b26); border:1px solid #ffffff0d; }
.nx-attachment-file > span { display:grid; grid-template-columns:28px 1fr; grid-template-rows:auto auto; column-gap:10px; align-items:center; }
.nx-attachment-file .nx-icon { grid-row:span 2; width:28px; height:28px; color:var(--nx-accent-light); }
.nx-attachment-file a { color:var(--nx-accent-light); font-size:15px; text-decoration:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.nx-attachment-file a:hover { text-decoration:underline; }
.nx-attachment-file small { color: var(--nx-muted, #8e879b); font-size:12px; }
.nx-attachment-file audio { width:100%; }
.nx-attachment-block { display:inline-flex; align-items:center; gap:4px; margin-top:4px; border:0; background:none; color:#f47f7f; font:inherit; font-size:12px; cursor:pointer; padding:2px 0; }
.nx-attachment-block .nx-icon { width:14px; height:14px; }

.nx-upload-tray { display:flex; gap:10px; overflow-x:auto; padding:12px; margin-bottom:-4px; background: var(--nx-raised, #1e1b26); border-radius:10px 10px 0 0; border-bottom:1px solid #ffffff0d; }
.nx-upload-tray[hidden] { display:none; }
.nx-upload-tray + .nx-composer { border-top-left-radius:0; border-top-right-radius:0; }
.nx-upload { position:relative; flex:none; width:160px; padding:8px; border-radius:8px; background: var(--nx-bg, #15131b); display:flex; flex-direction:column; gap:4px; }
.nx-upload-thumb { height:110px; border-radius:6px; background:var(--nx-rail); display:grid; place-items:center; overflow:hidden; }
.nx-upload-thumb img { width:100%; height:100%; object-fit:cover; }
.nx-upload-thumb .nx-icon { width:36px; height:36px; color:var(--nx-accent-light); }
.nx-upload > span { font-size:13px; color:var(--nx-text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.nx-upload small { font-size:11px; color: var(--nx-muted, #8e879b); }
.nx-upload.is-uploading { opacity:.6; }
.nx-upload-remove { position:absolute; top:-6px; right:-6px; width:28px; height:28px; border-radius:8px; border:0; background:var(--nx-raised); color:#f47f7f; display:grid; place-items:center; cursor:pointer; box-shadow:0 2px 8px #0008; }
.nx-upload-remove:hover { background:#da373c; color:#fff; }
.nx-upload-remove .nx-icon { width:16px; height:16px; }
.nx-attach-button { font-size:0 !important; }
.nx-attach-button .nx-icon { width:20px; height:20px; }

.nx-chat { position:relative; }
.nx-chat.is-file-over::after { content: attr(data-drop-label); position:absolute; inset:12px; z-index:30; display:grid; place-items:center; border: 2px dashed var(--nx-accent, #9d68e4); border-radius:12px; background:color-mix(in srgb,var(--nx-panel) 90.2%,transparent); color:#fff; font-size:18px; font-weight:600; pointer-events:none; }

.nx-lightbox { position:fixed; inset:0; z-index:90; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; padding:24px; background:#000d; cursor:zoom-out; animation: nx-popout-in .14s ease-out; }
.nx-lightbox img { max-width:100%; max-height:calc(100vh - 80px); border-radius:6px; box-shadow:0 10px 40px #000; }
.nx-lightbox a { color:var(--nx-text); font-size:14px; }