/* Expertenansicht: Dateiliste (Container Query auf dem Panel) und Chat.
   Die Breite des Panels entscheidet, nicht die des Fensters. */

/* ---- Seitenaufteilung: unter 1400 px untereinander, damit die Tabelle Platz hat ---- */
main{grid-template-columns:minmax(0,1fr)}
@media(min-width:1400px){main{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);max-width:1480px}}
@media(min-width:768px) and (max-width:1399px){#chat{height:44vh}}

/* ---- Dateiliste ---- */
.fl{container:fl/inline-size;min-width:0}
.fl td,.fl th{word-break:normal;overflow-wrap:normal;vertical-align:middle}
.fl .nm{text-decoration:none;border-bottom:1px dotted currentColor}
.fl .cat{display:block;overflow-wrap:anywhere}
.fl .nw{display:block;white-space:nowrap;font-variant-numeric:tabular-nums}
.fl .c-id{white-space:nowrap;font-variant-numeric:tabular-nums}
.fl .ab{display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.fl .ab .lk{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:44px;min-height:44px;padding:0 8px;margin:0;border-radius:10px;border:1px solid transparent;font-size:14px;white-space:nowrap;text-decoration:none}
.fl .ab .lk:hover,.fl .ab .lk:focus-visible{background:color-mix(in srgb,var(--ac) 10%,transparent);border-color:var(--bd)}
.fl .ab .lk.er:hover{background:color-mix(in srgb,var(--er) 10%,transparent)}
.fl .ab .lk *{pointer-events:none}
.fl .ab .lk .ic{width:20px;height:20px;margin:0;vertical-align:middle}
.fl .ab .lk .t{display:none}
.fl .ab .lk[data-a] .t{display:none!important}
.fl .bar{min-width:0}

/* Breit: Tabelle */
@container fl (min-width:640px){
 .fl .ft:has(#tb){display:table;table-layout:fixed;width:100%}
 .fl .ft:has(#tb) thead{display:table-header-group}
 .fl .ft:has(#tb) thead th{white-space:nowrap}
 .fl #tb{display:table-row-group}
 .fl #tb tr{display:table-row}
 .fl #tb tr.fold{display:table-row}
 .fl #tb tr.fold td{display:table-cell}
 .fl #tb tr:not(.fold) td{display:table-cell;padding:7px 6px;border-bottom:1px solid var(--bd);white-space:normal}
 .fl #tb tr:not(.fold) td.c-nm{font-weight:400;overflow:hidden;max-width:0}
 .fl .nm{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .fl .ft th:nth-child(1){width:84px}
 .fl .ft th:nth-child(3){width:140px}
 .fl .ft th:nth-child(4){width:140px}
 .fl .ft th:nth-child(5){width:170px}
 .fl .c-st .b{white-space:nowrap}
 .fl .c-in .cat{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}
@container fl (min-width:900px){
 .fl .ft th:nth-child(5){width:290px}
 .fl .ab .lk:not([data-a]) .t{display:inline}
}

/* Schmal: eine Karte pro Datei */
@container fl (max-width:639.98px){
 .fl .ft:has(#tb){display:block;width:100%}
 .fl .ft:has(#tb) thead{display:none}
 .fl #tb{display:block}
 .fl #tb tr.fold{display:block}
 .fl #tb tr.fold td{display:block;padding-left:6px}
 .fl #tb tr:not(.fold){display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"id id" "nm nm" "st st" "in ac";gap:4px 8px;align-items:center;padding:10px 4px 10px calc(4px + var(--d,0)*12px);border-bottom:1px solid var(--bd);min-width:0}
 .fl #tb tr:not(.fold) td{display:block;border:0;padding:0;min-width:0;white-space:normal}
 .fl #tb tr:not(.fold) td.c-id{grid-area:id;padding-left:0!important;font-size:12px;color:var(--mu);display:flex;gap:8px;align-items:center}
 .fl #tb tr:not(.fold) td.c-id br{display:none}
 .fl #tb tr:not(.fold) td.c-nm{grid-area:nm;font-weight:600;overflow-wrap:anywhere}
 .fl .nm{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
 .fl #tb tr:not(.fold) td.c-st{grid-area:st;display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center}
 .fl #tb tr:not(.fold) td.c-st .bar{flex:1 1 90px;margin:0}
 .fl #tb tr:not(.fold) td.c-in{grid-area:in;align-self:center}
 .fl #tb tr:not(.fold) td.c-ac{grid-area:ac;justify-self:end}
 .fl .ab{justify-content:flex-end}
}

/* ---- Chat ---- */
#chat{align-items:stretch;gap:10px}
#chat .m{max-width:min(100%,46rem);text-align:start}
#chat .m.u{align-self:flex-end;max-width:88%}
#chat .m.a,#chat .m.s{align-self:flex-start;max-width:min(100%,46rem)}
#chat .m.sy{align-self:stretch;max-width:100%;font-size:13px;color:var(--mu);background:color-mix(in srgb,var(--tx) 5%,var(--card));border:0;border-inline-start:3px solid var(--bd);border-radius:6px;padding:6px 10px;line-height:1.4}
#chat .m.sy code{font:12px ui-monospace,Consolas,monospace;background:color-mix(in srgb,var(--tx) 9%,transparent);padding:0 4px;border-radius:4px;direction:ltr;unicode-bidi:isolate}

/* nur fuer Screenreader */
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;padding:0;margin:-1px}

/* Ausgabe-Zeilen: Tönung auf der Zeile, nicht auf jeder Zelle (sonst fleckig in Karten) */
@container fl (max-width:639.98px){
 .fl #tb tr.out{background:color-mix(in srgb,#7c3aed 7%,transparent)}
 .fl #tb tr.out td{background:none}
}
@container fl (min-width:900px){.fl .ft th:nth-child(3){width:180px}}
@container fl (max-width:639.98px){.fl #tb tr:not(.fold) td.c-in{min-width:7.5em}.fl .c-in .nw{white-space:normal}}