/* ============================================================================
   The card of a file in the person's message (src/ui/fileCard.js)
   ----------------------------------------------------------------------------
   The message is the card: a sheet of paper that carries the file's type, the
   name beside it, and below the name what is happening to the file. The sheet
   shows that state too - it fills while the bytes go up (glacier, the person's
   light) and a line reads it while the server analyzes it (copper, the
   machine's). Colours come from the ui-next tokens; the values after them are
   the classic interface.
   ============================================================================ */

.file-card {
    --fc-ink: var(--nx-text, #e0eaff);
    --fc-ink-2: var(--nx-text-3, #94a3b8);
    --fc-accent: var(--nx-accent, #93c5fd);
    --fc-machine: var(--nx-warm-2, #f0c48f);
    --fc-ok: var(--nx-ok, #6fd9ab);
    --fc-err: var(--nx-err, #fca5a5);
    --fc-ease: var(--nx-ease, cubic-bezier(0.16, 1, 0.3, 1));
    --fc-paper: transparent;
    --fc-tag-ink: #07111c;
    --fc-hue: #d4e0ee;
    /* what the sheet is tinted with: the format's colour, unless the state says otherwise */
    --fc-tint: var(--fc-hue);
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
    border-radius: 12px;
    color: var(--fc-ink);
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
/* What the sheet is made of: paper for text, the colour each format is known by
   for the others, softened to sit on the night glass */
.file-card[data-family="pdf"]    { --fc-hue: #ff8f86; }
.file-card[data-family="word"]   { --fc-hue: #8db1ff; }
.file-card[data-family="sheet"]  { --fc-hue: #6fd9ab; }
.file-card[data-family="slides"] { --fc-hue: #ffad7d; }
.file-card[data-family="code"]   { --fc-hue: #aab3ff; }
.file-card[data-family="file"]   { --fc-hue: #a9b8cc; }

html[data-theme="light"] .file-card { --fc-paper: #ffffff; --fc-tag-ink: #ffffff; --fc-hue: #5f7189; }
html[data-theme="light"] .file-card[data-family="pdf"]    { --fc-hue: #c8463f; }
html[data-theme="light"] .file-card[data-family="word"]   { --fc-hue: #2f5fcf; }
html[data-theme="light"] .file-card[data-family="sheet"]  { --fc-hue: #1f8a5c; }
html[data-theme="light"] .file-card[data-family="slides"] { --fc-hue: #c25a1c; }
html[data-theme="light"] .file-card[data-family="code"]   { --fc-hue: #4f55c4; }
html[data-theme="light"] .file-card[data-family="file"]   { --fc-hue: #5f7189; }
html[data-theme="light"]:not(.ui-next) .file-card {
    --fc-ink: #0d0d0d;
    --fc-ink-2: #4b5563;
    --fc-accent: #2563eb;
    --fc-machine: #b45309;
    --fc-ok: #15803d;
    --fc-err: #b91c1c;
}

/* ---- The sheet ----------------------------------------------------------- */
.file-card-sheet {
    position: relative;
    flex: none;
    width: 40px;
    height: 50px;
    transition: transform var(--nx-mid, 260ms) var(--fc-ease);
}
/* The paper, its fill and the reading line share the sheet's outline */
.file-card-sheet::before,
.file-card-fill,
.file-card-scan {
    content: "";
    position: absolute;
    inset: 0;
    overflow: hidden;
    clip-path: path("M5.5.75h21.75L39.25 12.75V44.5a4.75 4.75 0 0 1-4.75 4.75h-29A4.75 4.75 0 0 1 .75 44.5v-39A4.75 4.75 0 0 1 5.5.75Z");
    pointer-events: none;
}
.file-card-sheet::before {
    background: linear-gradient(165deg,
        color-mix(in srgb, var(--fc-tint) 26%, var(--fc-paper)),
        color-mix(in srgb, var(--fc-tint) 9%, var(--fc-paper)) 70%);
}
.file-card-paper {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}
.file-card-page {
    fill: none;
    stroke: color-mix(in srgb, var(--fc-tint) 58%, transparent);
    stroke-width: 1.5;
    transition: stroke var(--nx-mid, 260ms) ease;
}
.file-card-fold {
    fill: color-mix(in srgb, var(--fc-tint) 38%, var(--fc-paper));
    stroke: color-mix(in srgb, var(--fc-tint) 58%, transparent);
    stroke-width: 1.5;
    stroke-linejoin: round;
}
.file-card-lines {
    fill: none;
    stroke: color-mix(in srgb, var(--fc-tint) 34%, transparent);
    stroke-width: 2;
    stroke-linecap: round;
}
/* The format, a tag stuck over the sheet's left edge */
.file-card-mark {
    position: absolute;
    left: -5px;
    bottom: 6px;
    padding: 2.5px 4px 2px;
    border-radius: 4px;
    background: var(--fc-tint);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    font-size: 8.5px;
    font-weight: 780;
    font-stretch: 108%;
    letter-spacing: 0.045em;
    line-height: 1;
    color: var(--fc-tag-ink);
}
html[data-theme="light"] .file-card-mark { box-shadow: 0 1px 2px rgba(15, 30, 55, 0.18); }
/* The bytes going up: the sheet fills from the bottom, its level a bright line */
.file-card-fill::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--file-card-fill, 0%);
    background: linear-gradient(to top, color-mix(in srgb, var(--fc-accent) 66%, transparent), color-mix(in srgb, var(--fc-accent) 36%, transparent));
    box-shadow: inset 0 1.5px 0 color-mix(in srgb, var(--fc-accent) 95%, transparent);
    transition: height 320ms var(--fc-ease);
}
.file-card:not([data-state="uploading"]) .file-card-fill { display: none; }
/* The server reading it: a copper line runs down the sheet */
.file-card-scan::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -16px;
    height: 16px;
    background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--fc-machine) 42%, transparent));
    border-bottom: 1.5px solid var(--fc-machine);
    animation: file-card-read 2s var(--nx-ease-io, ease-in-out) infinite;
}
@keyframes file-card-read {
    from { transform: translateY(0); }
    to { transform: translateY(66px); }
}
.file-card:not([data-state="processing"]):not([data-state="analyzing"]) .file-card-scan { display: none; }
/* A failed upload: the paper loses its colour, its edge and its tag turn red. Through
   the colour, not a filter on the sheet - a filter would grey the red as well. */
.file-card[data-state="failed"] { --fc-tint: var(--fc-ink-2); }
.file-card[data-state="failed"] .file-card-page { stroke: var(--fc-err); }
.file-card[data-state="failed"] .file-card-mark { background: var(--fc-err); }

/* ---- Name and state ------------------------------------------------------ */
.file-card-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}
.file-card-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.006em;
    color: var(--fc-ink);
    transition: color var(--nx-fast, 160ms) ease;
}
.file-card-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 6px;
    min-height: 18px;
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--fc-ink-2);
    font-variant-numeric: tabular-nums;
}
.file-card-meta > * { white-space: nowrap; }
.file-card:is([data-state="processing"], [data-state="analyzing"]) .file-card-meta { color: var(--fc-machine); }
.file-card[data-state="uploading"] .file-card-meta { color: var(--fc-accent); }
.file-card-pct { opacity: 0.75; }
.file-card[data-state="analyzed"] .file-card-meta { color: var(--fc-ok); gap: 5px; }
.file-card-check {
    width: 12px;
    height: 12px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.file-card-error { color: var(--fc-err); }
.file-card-action {
    padding: 0 3px;
    border: 0;
    border-radius: 999px;
    background: none;
    font: inherit;
    font-weight: 620;
    color: var(--fc-ink-2);
    cursor: pointer;
}
/* Retry and Cancel stand apart from the error; on a narrow card they wrap flush left */
.file-card[data-state="failed"] .file-card-meta { gap: 4px 10px; }
.file-card-action:hover { color: var(--fc-ink); }
/* Retry is the way out the card offers; Cancel stays a word beside it */
.file-card-retry {
    padding: 2px 11px;
    background: color-mix(in srgb, var(--fc-accent) 17%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fc-accent) 34%, transparent);
    color: var(--fc-accent);
    transition: background var(--nx-fast, 160ms) ease;
}
.file-card-retry:hover { background: color-mix(in srgb, var(--fc-accent) 27%, transparent); color: var(--fc-accent); }
.file-card-action:focus-visible { outline: 2px solid var(--fc-accent); outline-offset: 2px; }

/* ---- A card that opens its file ----------------------------------------- */
.file-card-open { cursor: pointer; }
.file-card-open:hover .file-card-sheet { transform: translateY(-2px) rotate(-3deg); }
.file-card-open:hover .file-card-name { color: var(--fc-accent); }
.file-card-open:focus-visible { outline: 2px solid var(--fc-accent); outline-offset: 6px; }

/* ---- A PDF shows its pages below the card -------------------------------- */
.file-card-pdf {
    display: block;
    width: 100%;
    height: 600px;
    margin-top: 14px;
    border: 1px solid var(--nx-line-2, rgba(255, 255, 255, 0.1));
    border-radius: 10px;
}

/* The bubble keeps one width from the first byte to the finished message. Its footer
   line (date, credits, the room for three buttons) made it wider only at the end;
   560px holds the longest of them ("Donnerstag", a two-digit credit count). */
#chat-history > .user-message:has(> .message-content > .file-card) {
    width: 560px;
    max-width: min(560px, 88%);
}

@media (prefers-reduced-motion: reduce) {
    .file-card-sheet,
    .file-card-fill::before { transition: none; }
    .file-card-open:hover .file-card-sheet { transform: none; }
    .file-card-scan::before { animation: none; top: 0; height: 100%; border: 0; opacity: 0.4; }
}