/* demo-section:attachment:start */
/* Source: packages/client/ui-attachment/src/FileCard.module.css; classes namespaced file-. */
.file-card {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: 240px;
  height: 64px;
  padding: 0 12px;
  border: 0.5px solid var(--dsw-alias-border-l2, rgba(0, 0, 0, 0.12));
  border-radius: var(--dsw-radius-lg);
  background: var(--dsw-specific-input-major, transparent);
  box-sizing: border-box;
  text-align: left;
}

.file-failed {
  border-color: var(--dsw-alias-state-error-primary, #d54941);
}

.file-icon {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
}

.file-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  corner-shape: round;
  animation: file-card-spin 0.8s linear infinite;
}

@keyframes file-card-spin {
  to { transform: rotate(360deg); }
}

.file-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  padding: 8px 0;
}

.file-retry {
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.file-name {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--dsw-alias-label-primary);
  font-size: 14px;
  font-weight: 500;
  line-height: 22px;
}

.file-meta {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--dsw-alias-label-tertiary, rgba(0, 0, 0, 0.45));
  font-size: 12px;
  line-height: 15px;
}

.file-metaFailed {
  color: var(--dsw-alias-state-error-primary, #d54941);
}

.file-remove {
  position: absolute;
  top: 6px;
  right: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  border: none;
  border-radius: 50%;
  corner-shape: round;
  background: var(--dsw-alias-button-contrast-fill, rgba(0, 0, 0, 0.72));
  color: var(--dsw-alias-label-primary-inverted, #fff);
  opacity: 0;
  cursor: pointer;
  transition: opacity 0.2s ease-in-out;
}

.file-card:hover .file-remove,
.file-remove:focus-visible {
  opacity: 1;
}

@media (pointer: coarse) {
  .file-remove {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .file-remove {
    transition: none;
  }
}

.file-card:hover .file-name,
.file-card:focus-within .file-name {
  padding-right: 18px;
}

.file-removeFailed {
  background: var(--dsw-alias-state-error-primary, #d54941);
  color: #fff;
  opacity: 1;
}

.file-progressTrack {
  position: absolute;
  right: 12px;
  bottom: 5px;
  left: 12px;
  overflow: hidden;
  height: 2px;
  border-radius: 1px;
  background: var(--dsw-alias-fill-tertiary, rgba(0, 0, 0, 0.08));
}

.file-progressBar {
  display: block;
  width: 35%;
  height: 100%;
  border-radius: inherit;
  background: var(--dsw-alias-brand-primary, #4d6bfe);
  animation: file-card-progress 1.2s ease-in-out infinite alternate;
}

.file-progressBar[style] {
  animation: none;
}

@keyframes file-card-progress {
  from { transform: translateX(-70%); }
  to { transform: translateX(220%); }
}

@media (pointer: coarse) {
  .file-remove {
    opacity: 1;
  }
}
/* demo-section:attachment:end */

/* demo-section:attachment-overrides:start */
/* New attachment uses the source FileCard DOM and tokens from the attachment section above. */
.attachment-rail { padding: 2px 10px 0; margin-bottom: -6px; }
.file-card, .msg-fileCard { width: 210px; }
.msg-fileCard { flex-basis: 210px; }
/* Approved attachment close treatment; keep the source button's 18px size. */
.file-remove { background: #f1f3f5; color: #667085; box-shadow: none; }
.file-remove svg { display: block; width: 8px; height: 8px; stroke-width: 1.6; stroke-linecap: round; }
.file-remove:hover { background: #e5e9ef; color: #344054; }
#draft-text.typing::after { content: ''; display: inline-block; width: 1.5px; height: 1em; margin-left: 2px; background: #165dff; vertical-align: -.12em; }
.reply-text { white-space: pre-line; }
.cli-row { width: 100%; min-width: 0; overflow: hidden; gap: 0; white-space: nowrap; }
#execution[data-state="ok"] .tool-leading { color: var(--dsw-alias-state-success-primary); }
.cli-name { flex: 0 0 auto; color: var(--dsw-alias-label-secondary); }
.cli-command { display: block; flex: 1 1 0%; min-width: 0; margin-left: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--dsw-alias-label-secondary); font-size: 12px; font-family: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', monospace; }
#execution .disclosure-root { width: 100%; min-width: 0; }
#phase-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#input-card .file-icon svg, .msg-fileIcon svg { display:block; width:28px; height:28px; }
/* demo-section:attachment-overrides:end */