/* files.css — attachments: the strip under the input, cards in bubbles, the viewer (js/files.js) */

/* Cards */
.att-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--space-2); }
.att-card { position: relative; display: inline-flex; align-items: center; gap: var(--space-2); max-width: 260px; min-height: var(--control-md, 36px); padding: var(--space-1) var(--space-2); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); color: var(--text); font-size: var(--font-md); cursor: pointer; overflow: hidden; white-space: normal; text-align: left; -webkit-tap-highlight-color: transparent; }
.att-card:hover, .att-card:focus-visible { border-color: var(--accent); outline: none; }
.att-card--static { cursor: default; }
.att-card--static:hover { border-color: var(--border); }
.att-card--image { padding: 0; flex-direction: column; align-items: stretch; max-width: 200px; }
.att-thumb { display: block; width: 100%; max-height: 160px; object-fit: cover; background: var(--bg); }
.att-card--image .att-caption { padding: var(--space-1) var(--space-2); }
.att-card--pending.att-card--image { max-width: 120px; }
.att-card--pending .att-thumb { max-height: 80px; }
.att-icon { font-size: var(--font-icon); line-height: 1; flex: none; }
.att-caption { display: flex; flex-direction: column; min-width: 0; }
.att-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 200px; }
.att-sub { font-size: var(--font-sm); color: var(--text-dim); }
.msg.user .att-card { background: var(--bg); }

/* The strip: remove, progress, error */
.att-remove { position: absolute; top: 2px; right: 2px; width: 22px; height: 22px; border-radius: var(--radius-full); border: none; background: var(--overlay); color: #fff; font-size: var(--font-lg); line-height: 22px; text-align: center; cursor: pointer; padding: 0; }
.att-card--pending:not(.att-card--image) { padding-right: 28px; }
.att-progress { position: absolute; left: 0; bottom: 0; height: 3px; background: var(--accent); transition: width 0.2s; }
.att-card--error { border-color: var(--error); }
.att-error { font-size: var(--font-sm); color: var(--error); }
.att-error button { background: none; border: none; color: var(--accent); cursor: pointer; font: inherit; padding: 0; text-decoration: underline; }

/* The viewer */
.att-viewer .modal-backdrop { height: 24px; }
.att-viewer .modal-header { gap: var(--space-2); }
.att-viewer__title { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.att-viewer__name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.att-viewer__sub { font-size: var(--font-sm); color: var(--text-dim); }
.att-viewer__actions { display: flex; gap: 6px; flex: none; }
.att-viewer__body { display: flex; flex-direction: column; padding: 0; background: var(--bg); }
.att-viewer__image { flex: 1; display: flex; align-items: center; justify-content: center; overflow: auto; padding: var(--space-3); }
.att-viewer__image img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: var(--radius-sm); }
.att-viewer__frame { flex: 1; width: 100%; min-height: 60vh; border: 0; background: #fff; }
.att-viewer__pre { margin: 0; padding: var(--space-3) var(--space-4); font-family: var(--mono); font-size: var(--font-md); line-height: 1.5; white-space: pre-wrap; word-break: break-word; color: var(--text); }
.att-viewer__note { padding: var(--space-2) var(--space-4); font-size: var(--font-sm); color: var(--text-dim); }
.att-viewer__blank { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-3); padding: var(--space-5); color: var(--text-dim); text-align: center; }
.att-viewer__blank .att-icon { font-size: 48px; }

/* Inside an archive */
.att-tree { padding: var(--space-2) var(--space-3) var(--space-5); }
.att-tree__list { list-style: none; margin: 0; padding-left: var(--space-3); }
.att-tree > .att-tree__list { padding-left: 0; }
.att-tree summary { cursor: pointer; padding: 6px var(--space-1); min-height: var(--control-sm, 32px); font-size: var(--font-base); }
.att-tree summary small, .att-tree__file small { color: var(--text-dim); margin-left: var(--space-1); }
.att-tree__file { display: flex; align-items: center; gap: var(--space-1); width: 100%; min-height: var(--control-sm, 32px); padding: 4px var(--space-1); background: none; border: none; border-radius: var(--radius-sm); color: var(--text); font: inherit; font-size: var(--font-base); text-align: left; cursor: pointer; }
.att-tree__file:hover { background: var(--surface); }
.att-tree__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.att-tree__icon { flex: none; }