/* css/main/chat-tree-and-channels.css — part 26/30 of the app styles (was css/main.css; loaded in this order by index.html). */
      /* ═══════════════════════════════════════════════════════════════
         MY NICKNAME AND MY AVATAR — the chat settings screen
         House rule: actions ON TOP, then the explanation, then the
         fields (`tests/unit-form-acciones-arriba.test.js`).
         ═══════════════════════════════════════════════════════════════ */
      /* ⛔ The THREE rules of the trio are already on `#view-chat`; this is (3)
         for this screen: the thing that scrolls is THIS, not the view.
         `overscroll-behavior` so that on reaching the end the gesture does not
         chain to the document behind (guard: scroll-overlay-check.py). */
      .tlaj-scroll {
        flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
        padding: 0 14px 24px;
      }
      .tlaj-bloque { margin-top: 18px; }
      /* The preview: the avatar and the name are shown EXACTLY as the club
         will see them, and it changes while typing. A form that does not show
         the result forces you to save to see whether you got it right. */
      .tlaj-previa {
        display: flex; flex-direction: column; align-items: center; gap: 8px;
        padding: 6px 0 2px;
      }
      .tlaj-av-big { width: 72px; height: 72px; }
      .tlaj-av-big .tlav-txt { font-size: 28px; }
      .tlaj-previa-n { display: flex; align-items: baseline; gap: 7px; }

      /* The ten colours. 44 px touch target and 10 of spacing: the norm
         asks for 44 and at least 8. */
      .tlaj-colores { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
      .tlaj-color {
        width: 44px; height: 44px; border-radius: 50%; border: 2px solid transparent;
        cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center;
        color: #1a1a1a;
      }
      .tlaj-color svg { width: 22px; height: 22px; opacity: 0; }
      .tlaj-color.sel { border-color: var(--text); }
      .tlaj-color.sel svg { opacity: 1; }
      .tlaj-color:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

      /* The drawings grid. `auto-fill` so that as many fit as fit on each
         device without writing a column count per screen size. */
      /* ⛔ 44 px minimum and 8 gap, which are the two floors of the touch
         norm, NOT a number picked by eye. With 52 px five fitted per row,
         and 228 drawings in rows of five are 46 rows of scrolling; with 44
         six or seven fit —depending on the device— and each theme is covered in three
         or four. `auto-fill` distributes the leftover, so on a 390 px phone
         the real cell still ends up ~52 px: the number of columns is
         tightened, not the touch target. */
      .tlaj-rejilla {
        display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
        gap: 8px; margin-top: 10px;
      }
      .tlaj-cel {
        width: 100%; aspect-ratio: 1; min-height: 44px; border-radius: 50%;
        border: 2px solid transparent; background: none; padding: 2px; cursor: pointer;
      }
      .tlaj-cel .tlav-txt { font-size: 16px; }
      .tlaj-cel.sel { border-color: var(--text); }
      .tlaj-cel:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

      /* The label of each theme. There are 228 drawings: without a pause on the way, after
         two screens you no longer know where you were.
         ⛔ SAME FONT AS `.drawer-group`, which is the group label the house already
         has for exactly this job —splitting a long list into
         sections—. Only the margin changes, because that one lives inside the drawer.
         Inventing a fourth heading variant here is what makes two
         screens of the same product look like two products.
         ⚠️ And in dark mode `--muted` is almost white ON PURPOSE (halation, §2 of
         the norms): the hierarchy comes from the 11 px body and the spacing, not from
         lowering the contrast. */
      .tlaj-tema {
        font-family: "Oswald", sans-serif;
        font-size: 11px; font-weight: 700; letter-spacing: 1.5px;
        text-transform: uppercase; color: var(--muted);
        margin: 18px 0 6px; padding-top: 2px;
      }
      /* ⚠️ `:first-of-type` did NOT work here and the rule matched nothing: the
         first sibling `div` is `.form-label`, not a `.tlaj-tema`. It is tied to
         what really comes before the first label — the explanation. */
      .form-explain + .tlaj-tema { margin-top: 10px; }
      /* The licence notice for the drawings. Discreet, but visible: it is
         what Tabler's MIT requires.
         ⚠️ It is TEXT, not a link, on purpose: taking the user from here to the licences
         page would mean leaving this screen with the nickname and avatar
         half-changed and unsaved. The link lives in the drawer, which is
         where you leave to read something. */
      .tlaj-cred { margin-top: 20px; font-size: 11px; color: var(--muted); }

      /* My card, above the channel tree. It is a button, so what the
         browser adds to it is reset. */
      .tlaj-yo {
        display: flex; align-items: center; gap: 12px; width: 100%;
        background: var(--surface); border: 1px solid var(--border-soft);
        border-radius: 10px; padding: 10px 12px; cursor: pointer;
        color: inherit; font: inherit; text-align: left; min-height: 56px;
      }
      .tlaj-yo:hover { background: var(--surface2); }
      .tlaj-yo:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
      .tlaj-yo-av { width: 38px; height: 38px; flex: 0 0 38px; display: block; }
      .tlaj-yo-av .tlav-txt { font-size: 14px; }
      .tlaj-yo-t { display: flex; flex-direction: column; min-width: 0; }
      .tlaj-yo-n { font-size: 14px; font-weight: 700; color: var(--text); overflow-wrap: anywhere; }
      .tlaj-yo-s { font-size: 12px; color: var(--muted); }

      /* ── THE TREE, SHARED ──────────────────────────────────────────────
         ⛔ THIS GEOMETRY ALREADY EXISTED, IN INLINE STYLES. It lived inside
         `_cvEquipoRender` (js/views/cv-competiciones.js), which draws the team
         of the competition: vertical strip on the left, horizontal connector
         over each child, constant 16 px indent. When Santi asked for that same
         tree for the chat (2026-08-28), copying the styles would have left TWO
         definitions of the same shape — and two definitions drift apart at the
         first chance, which is exactly what makes two screens of the same
         house stop looking alike without anybody deciding it.
         ⭐ So it is extracted here once and both use it. Same values, so
         that the competition team does not change by a single pixel. */
      .tl-arbol-rama {
        border-left: 1px solid var(--border);
        margin-left: 16px; padding-left: 16px;
        display: flex; flex-direction: column; gap: 10px; margin-top: 6px;
      }
      .tl-arbol-nodo { position: relative; }
      /* The horizontal connector to the child card, attached to its top. */
      .tl-arbol-nodo::before {
        content: ""; position: absolute; left: -16px; top: 14px;
        width: 14px; height: 1px; background: var(--border);
      }

      /* ── THE CHAT TREE: club → its channels ────────────────────────────
         The FIRST screen of the chat, and the only one before the conversation.
         Santi's words (2026-08-28): "I see the name of the club or federation
         and below it, slightly indented, with connecting lines, I see the different
         channels". A single tap from here and you are inside.
         ⏳ This is where the unread counters will go (T7). */
      .tlch-arbol {
        flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
        padding: 14px 14px 20px;
        display: flex; flex-direction: column; gap: 18px;
      }
      /* A club or federation with its five channels hanging from it. It is the `role="group"`
         that names the five buttons inside (otherwise, with three clubs there are
         fifteen buttons with the same name). */
      .tlch-org { display: flex; flex-direction: column; }
      /* ⛔ The NAME, not the registration code: here you read whose channel it is, nothing
         is certified (norm of 2026-08-27). */
      /* Name + total, in one row. The total goes NEXT TO the name and not at the
         right edge: with the number at the other end of the screen you have to
         look in two places to know whose it is. */
      /* ── THE ENTITY ROW: IT IS THE BUTTON THAT FOLDS (M1) ─────────────
         ⛔ THE BUTTON IS THE WHOLE ROW, not just the little arrow. A 14 px
         target on touch gets missed, and what you want to press here is "this
         club": name, number and arrow are the same intention.
         ⛔ AND THE NATIVE BUTTON IS NEUTRALISED (background, border, typography,
         alignment): without this a `<button>` brings the system font and the
         header would stop looking like the one next to it. */
      .tlch-org-c {
        display: flex; align-items: center; gap: 8px;
        width: 100%; min-height: 44px; padding: 0;
        background: none; border: 0; border-radius: 6px;
        color: inherit; font: inherit; text-align: left;
        cursor: pointer;
      }
      .tlch-org-c:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
      /* ⛔ THE HINT THAT IT CAN BE PRESSED GOES IN THE COLOUR, NEVER IN THE SIZE:
         a `scale` here would move the whole list under the finger when hovering
         over it. */
      .tlch-org-c:hover .tlch-org-chev { color: var(--accent); }
      /* The arrow, BEFORE the name: this is a tree, and the branch it governs
         hangs down on the left. ⛔ The rotation is the house one —the same
         chevron and the same `-90deg` with which the history turns it sideways—:
         ▾ open, ▸ closed, which is what Santi asked for. */
      .tlch-org-chev {
        flex: 0 0 auto; display: inline-flex; color: var(--muted);
        transition: transform 0.18s ease, color 0.15s;
      }
      .tlch-org-chev svg { width: 14px; height: 14px; }
      .tlch-org-c[aria-expanded="false"] .tlch-org-chev { transform: rotate(-90deg); }
      @media (prefers-reduced-motion: reduce) { .tlch-org-chev { transition: none; } }
      /* ⛔ THE BRANCH IS HIDDEN, NOT THE ENTITY. The header —with its unread
         total— has to stay: if it disappeared, folding would be silencing by
         accident, which is exactly the opposite of what is asked. */
      .tlch-org.tlch-org-pleg > .tl-arbol-rama { display: none; }
      /* ⛔ EIGHT PIXELS BELOW THE HEADER, and only in the chat. The common branch
         separates 6 px, which was fine when the thing above was a label: now it is
         a 44 px button, and a thumb aiming at the first channel that lands high
         FOLDS the club instead of opening it. The UX norms (§touch) ask for ≥8 px
         between two targets.
         ⚠️ It goes here and not in `.tl-arbol-rama`: in the competition team the
         row above is NOT pressable, so there are no two targets to
         separate there and its geometry has no reason to move. */
      .tlch-org > .tl-arbol-rama { margin-top: 8px; }
      .tlch-org-n {
        font-family: 'Oswald', sans-serif; font-size: 14px; font-weight: 700;
        letter-spacing: .5px; color: var(--accent);
        overflow-wrap: anywhere;
      }
      /* ⛔ WITH THE PARENT IN FRONT, and it is not specificity decoration: on its own
         (`.tlch-org-b`) this rule LOSES against `.tlch-canal-b`, which carries
         `margin-left:auto` and is further down in the file —two selectors of
         one class tie, and the order breaks the tie—. The total went to the right
         edge, far from the name it belongs to. Seen by painting it. */
      .tlch-org-c .tlch-org-b { margin-left: 0; }

      /* ── THE PROFILE LEVEL OF THE TREE — ticket #138 ────────────────────
         ⛔ IT INHERITS, IT DOES NOT INVENT. The row of a profile is the SAME piece as that of
         an entity (`.tlch-org-c`), and here we only say how it differs:
         a little more weight and a line that separates it from what is above. Writing
         a new family for this is how three screens of the same house
         stop looking alike without anybody deciding it. */
      .tlch-perf { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--border-soft); }
      /* ⛔ THE PROFILE LABEL DOES NOT GO IN GOLD, and it was seen by PAINTING IT: with the three
         levels of the tree (profile → entity → channels) gold on two of them
         made them read as TWO. Here gold means "an entity"
         —a club, a federation—, and "Shooter profile" is not one: it is a
         structure label. Leaving it in the text colour, the eye finds
         the entities at a glance and the two fixed labels step aside on their own. */
      .tlch-perf-c .tlch-org-n { font-weight: 600; color: var(--text); }

      /* ⛔ "UNKNOWN" IS NOT "ZERO", AND IT MUST BE VISIBLE THAT IT IS NOT. With the
         device lock on there is no way to query the counters of
         the other identities (ticket #141): that branch does not say zero, it says it is
         not known. A zero there would be a lie of the worst kind — the one that makes
         you not go in to look.
         ⛔ And it is NOT distinguished by colour alone: it carries its own character (·),
         a dashed border and its `aria-label`. Whoever cannot tell colours apart, and whoever
         navigates with a screen reader, has to find out all the same. */
      /* ⛔⭐ WITH THE COUNTER'S CLASS IN FRONT, and not on its own: `.tlch-canal-b`
         is 90 lines FURTHER DOWN and with the same specificity, so it won
         and the "don't know" came out as a RED badge with no number — which is
         exactly the opposite of what it means. Santi saw it on 2026-09-11:
         "a red circle with a dot and no number appears, it doesn't look great".
         ⚠️ The rule was not moved: two rules that depend on the order in which
         they are written cross again as soon as someone inserts something
         in between. Specificity fixes it for real. */
      .tlch-canal-b.tlch-b-nd,
      .tlch-b-nd {
        background: transparent;
        border: 1px dashed var(--border);
        color: var(--muted);
        font-weight: 400;
      }

      /* The channels of another profile. They are announced as something dimmer —but
         PRESSABLE—: the branch has no live listener, so its counter is from the
         last time the tree was opened and not from right now.
         ⛔ This used to say "pressing them switches identity", and since phase 2 of
         #138 it NO longer does: you enter the channel WITHOUT changing profile. It is corrected
         because a comment that says the opposite of what happens sends you
         to look for the bug in the wrong place. */
      .tlch-canal-frio { opacity: 0.82; }
      .tlch-canal-frio:hover { opacity: 1; }
      /* ⛔ The focus is NOT dimmed: it is the only clue to where someone navigating
         with the keyboard is, and lowering its contrast leaves them without a reference. */
      .tlch-canal-frio:focus-visible { opacity: 1; }
      /* ⛔ `flex-wrap: wrap` AND A WIDTH FLOOR ON THE NAME — they go together, and
         removing either brings the bug back. With the name breakable at
         ANY letter and shrinkable to zero, on a narrow phone with "Read
         only", counter and two tree levels the name ended up at 0 px and
         came out ONE LETTER PER LINE, 26 lines (Santi saw it on 2026-09-15 and it was
         measured: at 339 px, with large font and two profiles, it already happens). Now the
         name does not go below about 12 characters and, when they do not fit with what is on
         the right, "Read only" and the counter drop to a second line.
         Guard: `tests/unit-chat-fila-nombre.test.js`. */
      .tlch-canal {
        width: 100%; min-height: 44px; display: flex; flex-wrap: wrap; align-items: center;
        gap: 4px 10px;
        padding: 9px 12px; border-radius: 10px; cursor: pointer;
        background: var(--card); border: 1px solid var(--border-soft);
        border-left: 3px solid var(--muted);
        color: var(--text); font: inherit; font-size: 14px; text-align: left;
        /* Explicit line-height: `font: inherit` brings that of the context, and
           the height of the row depends on it. Fixing it here makes this screen
           measure the same wherever it is hung from. */
        line-height: 1.25;
        transition: background .2s, border-color .2s;
      }
      .tlch-canal:hover { background: var(--surface2); }
      .tlch-canal:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
      /* Explicit `align-items: center`: a flex container stretches its child
         by default, and here the icon has to keep its size and stay centred
         even if the row grows. */
      .tlch-canal-ic { display: flex; align-items: center; flex: 0 0 18px; }
      .tlch-canal .tlch-canal-ic svg { width: 18px; height: 18px; flex: 0 0 18px; }
      /* ⛔ A WIDTH FLOOR, not "do not shrink" (code review, 2026-09-15).
         · `flex-basis: 8em` and not `auto`: with `auto` the basis is the WHOLE name, and
           a lone counter already dropped to the next line as soon as it appeared — the row grew
           with each message and the list jumped under the finger; and on the private
           card the counter went down instead of cutting the name.
         · `min-width: min(8em, 100%)`: never less than about 12 characters per
           line, which is what prevents the letter per line.
         · `anywhere` YES, with that floor: a word wider than the row (a job title
           written by hand, a German compound with large font) is broken instead of
           overflowing above the speaker. */
      /* ⚠️ `100% - 28px` and not `100%`, IN THE BASIS AND IN THE FLOOR: the name has to
         fit NEXT TO the icon (18 px + 10 of separation). What decides whether it drops
         to the next line is the BASIS, not the `min-width` — with the cap only on the floor, at
         300 px and two profiles the icon still stayed alone on top and the name below
         (measured twice, 2026-09-15). */
      /* ⚠️ 6 em AND NOT 8 (2026-09-16) — PARTIAL IMPROVEMENT, NOT A FIX. With reported AND
         unread the number dropped to the next line on Santi's phones (with large font
         the phone works at 313-339 logical px). Measured with the 63 real channel names
         in the 9 languages and the padlock without text, looking at ALL the badges:
         · 8 em → they drop in all rows up to 339 px.
         · 6 em → at 339 px the cold branch and the shooter are fixed; the rows of the
           TEAM still drop up to 339, and everything drops at 313 or less.
         ⛔ The first measurement of this change said 6 em fixed it: it looked
           only at the FIRST badge of the row (reported) and did not see the number drop.
         ⭐ The fix for the rows of the TREE is right below (Santi's option B).
           This general rule stays for rows with hand-written text. */
      .tlch-canal-n {
        flex: 1 1 min(6em, calc(100% - 28px));
        min-width: min(6em, calc(100% - 28px));
        overflow-wrap: anywhere;
      }
      /* ⭐ OPTION B (Santi, 2026-09-16) — IN THE TREE ROWS, THE NAME RESERVES
         ONLY ITS LONGEST WORD. The fixed floor reserved 6 em also for "Air",
         and that pushed reported + unread to another line. With `min-width: auto` and
         `break-word` the floor is the longest word: never letter by letter and never
         a broken word.
         ⛔ ONLY IN THE TREE, because there the names are FIXED (channels, Sanctions,
           Private). `break-word` does not let it shrink below the word, and a
           hand-written text with an impossible word would overflow the row: that is why
           "start conversation" (`.tlch-priv-dest`, carries the job title
           of a person) and the private card (`.tlch-priv-tarj`, which needs
           to shrink for its ellipsis) are left out.
         Measured with the 63 names × 9 languages together with the indent below: at 339 px
         no badge drops; at 313, 10 of 63 team rows; at 288, 24 of 63. */
      .tl-arbol-nodo > .tlch-canal:not(.tlch-priv-tarj):not(.tlch-priv-dest) > .tlch-canal-n {
        flex: 1 1 0%;
        min-width: auto;
        overflow-wrap: break-word;
      }
      /* …AND HALF AN INDENT ON A NARROW SCREEN (part of option B). The branch and its
         connector ate 33 px of each row; on a phone with large font that is
         the space that was missing. Only in the chat tree: `.tl-arbol-rama` is used by
         other trees of the app. */
      @media (max-width: 400px) {
        .tlch-arbol .tl-arbol-rama { margin-left: 8px; padding-left: 8px; }
        .tlch-arbol .tl-arbol-nodo::before { left: -8px; width: 6px; }
      }
      /* The stripe and the icon, in the colour of their discipline. The Main one, GOLD
         (norm 28). ⛔ The four disciplines do NOT carry their own colour here: they
         inherit it from `.cv-type-*`, the family the app already uses for
         the same thing. A second palette for "air" would be the inconsistency that
         norm §8-bis c-bis comes to prevent. */
      .tlch-canal.tlch-cn-main   { border-left-color: var(--accent); }
      .tlch-canal.tlch-cn-main   .tlch-canal-ic { color: var(--accent); }
      /* ⛔ THE INTERNAL CHANNEL DOES NOT CARRY A DISCIPLINE COLOUR — it is not one. It goes in
         `--muted`, dimmed on purpose: it is the only one that does NOT talk to
         the members, and giving it a lively colour would make it compete with the five that
         do. What must stand out in it is the padlock, not the channel. */
      /* The note of the internal channel: read on entering and it stays on top. It uses
         the same language as the system messages, with a border that ties it
         to the channel's padlock. */
      .tlch-sys.tlch-sys-org {
        border: 1px solid var(--border);
        border-radius: 10px;
        background: var(--surface-soft);
        padding: 8px 12px;
        margin-bottom: 10px;
      }
      /* ══ THE PRIVATE CHANNEL ════════════════════════════════════════════
         It goes in `--accent-2` (the teal), which is the only colour of the system that is not
         already taken by a discipline or by the club's gold: it is
         told apart at a glance without inventing a new colour. */
      /* The notice of a sanction: same language as the other system
         messages —nobody signs it— but with a marked border, because it is
         an act of authority and has to look like one in the middle of a
         conversation. ⛔ No colour of its own on purpose: the text already says who,
         to whom and how much, and a red here would turn it into a pillory. */
      .tlch-sys.tlch-sys-mod {
        border: 1px solid var(--border);
        background: var(--surface2);
      }
      /* Sanctions are not a channel: they go in grey, the colour of what
         does not speak. With the colour of a discipline they would look like a sixth channel. */
      .tlch-canal.tlch-cn-sanc   { border-left-color: var(--muted); }
      .tlch-canal.tlch-cn-sanc   .tlch-canal-ic { color: var(--muted); }
      .tlch-canal.tlch-cn-priv   { border-left-color: var(--accent-2); }
      .tlch-canal.tlch-cn-priv   .tlch-canal-ic { color: var(--accent-2); }
      .tlch-head-c.tlch-cn-priv  { color: var(--accent-2); }
      /* The unread badge, on the tree node itself. */
      /* THE UNREAD BADGE — and it is THE one of the app, not one of the chat.
         ⛔ It was born gold (`--accent-2`) on 2026-08-28 with the private mailbox, and
         that was drift, not a decision: the app already had its little unread circle
         in red `--badge`, in the drawer and in the bottom bar (News).
         Three families for the same job is exactly what makes one
         product look like three. When the T7 counters appeared —the same
         numbers in the bottom bar AND in the tree— the difference would have been
         visible on the same screen, so it is unified.
         ⭐ `--badge` is measured in both themes: it is the red that reaches 4.5:1
         with white text, not the error red, which stays at 3.76. */
      .tlch-canal-b {
        margin-left: auto;
        min-width: 20px;
        padding: 0 6px;
        border-radius: 999px;
        background: var(--badge);
        color: #fff;
        font-family: 'Oswald', sans-serif;
        font-size: 11px;
        font-weight: 600;
        line-height: 20px;
        text-align: center;
      }
      /* Starting a conversation: at the very top, because with a hundred
         conversations a button at the bottom does not exist. */
      .tlch-priv-nueva {
        display: block;
        width: 100%;
        min-height: 44px;
        margin-bottom: 10px;
        padding: 0 12px;
        background: none;
        border: 1px dashed var(--border);
        border-radius: 10px;
        color: var(--accent-2);
        font: inherit;
        font-size: 14px;
        cursor: pointer;
      }
      .tlch-priv-nueva:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
      /* ── THE LABEL OF EACH GROUP of the private area ───────────────────
         It reuses `.tlch-org-n`, the same one that titles each entity in the tree:
         one family per job. Here it only gets the space above and below
         it needs to separate two blocks within one list. */
      .tlch-priv-tit { margin: 14px 2px 8px; }
      .tlch-priv-tit:first-child { margin-top: 2px; }

      /* ── WHOM YOU HAVE NOT WRITTEN TO YET ─────────────────────────────
         ⛔ CARD SHAPE, and not the compact row of a conversation. They are two
         different things: a conversation has history and you want to see as many
         as possible; this is a CHOICE, like choosing a channel in the
         tree — and that is why it has the same shape as there (`.tlch-canal`).
         Santi brought it up on 2026-08-29: "you put three names like an
         ugly list in the middle of the screen". He was right, and the
         norm of activating the design skill before writing the screen had also been skipped. */
      .tlch-priv-dest { margin-bottom: 8px; }
      .tlch-priv-dest-av {
        flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%;
        overflow: hidden; display: block;
      }
      .tlch-priv-dest-av .tlav-txt { font-size: 12px; }
      /* The arrow says "this opens", which is what a card without a counter
         does not say by itself. Dimmed: it accompanies, it does not compete with the name. */
      .tlch-priv-dest-ir {
        flex: 0 0 auto; display: flex; color: var(--muted); opacity: .7;
      }
      .tlch-priv-dest-ir svg { width: 16px; height: 16px; }

      /* ── AN OPEN CONVERSATION, ON THE SHOOTER'S SCREEN ─────────────────
         ⛔ CARD, not row. Santi pointed it out on 2026-08-30: "the name appears
         in a very simple way, there is no card… I like the
         design of the part below". It is the SAME `.tlch-canal` of the block
         below and of the channel tree —one family per job—; the only thing
         added is what a conversation has and a choice does not: when the
         last one was, its mark and the unread.
         ⚠️ The compact row does NOT disappear: it remains that of the ORGANISATION'S
         INBOX, which is another question —hundreds of conversations and "what
         is left for me to attend?"— and for which he asked for just the opposite. */
      .tlch-priv-tarj { margin-bottom: 8px; }
      /* Two lines inside the name slot: who, and when the
         last one was. `min-width: 0` is inherited from `.tlch-canal-n`, which is what makes
         a long name get cut instead of pushing the counter out. */
      /* ⚠️ `min-width: 0` HERE, and no longer in `.tlch-canal-n` (2026-09-15): this
         card cuts the name with an ellipsis, and that only works if
         the column can shrink. The name of a channel, in contrast, must not. */
      .tlch-priv-tarj .tlch-canal-n {
        display: flex; flex-direction: column; gap: 1px; min-width: 0;
      }
      .tlch-priv-tarj-n {
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
      }
      .tlch-priv-tarj-f { font-size: 11px; color: var(--muted); }

      /* ⛔ ONE LINE PER CONVERSATION, no avatar and no ornament. Santi: "as
         compact as possible so that, if I have hundreds, I see the largest number in the
         window". It stays at 44 px, which is the touch minimum and the floor.
         ⚠️ THIS IS THE ORGANISATION'S. The shooter's is `.tlch-priv-tarj`. */
      .tlch-priv-fila {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        min-height: 44px;
        padding: 0 10px;
        margin-bottom: 2px;
        background: none;
        border: 0;
        /* 6, the CONTROL radius of the mock-up: there are no intermediate steps
           (UX-UI-normas §5, and a test guards it). A list row is a
           control, not a card. */
        border-radius: 6px;
        color: var(--text);
        font: inherit;
        text-align: left;
        cursor: pointer;
      }
      .tlch-priv-fila:hover { background: var(--surface2); }
      .tlch-priv-fila:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
      /* ⛔ THE AVATAR, WHICH WAS MISSING (Santi, 2026-09-08). It is what makes this
         list look like the rest of the chat: the same colour circle per
         person that the messages and the inbox carry. Without a chosen avatar the
         initials appear over a colour derived from the identifier, so two
         people can already be told apart at a glance without saving any data. */
      .tlch-priv-av { flex: 0 0 34px; width: 34px; height: 34px; }
      .tlch-priv-av .tlav { width: 34px; height: 34px; }
      .tlch-priv-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
      .tlch-priv-fila {
        min-height: 52px;      /* fits the avatar and the two lines, with room to spare over the 44 touch */
        padding: 6px 10px;
        margin-bottom: 4px;
      }
      .tlch-priv-n {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 14px;
        font-weight: 600;
      }
      /* ⛔ THE CODE GOES BELOW AND DIMMED, NOT NEXT TO IT AND IN THE SAME COLOUR.
         ⚠️ And the tone CANNOT come from `--muted` or `--text-dim`: in this
         project both are worth **the same as `--text`** (#f0ede8 in dark,
         #3a3631 in light), so a "secondary text" painted with them comes out
         identical to the main one — which is exactly what this row did. With
         a mix over the text itself the tone really drops and follows the theme
         without writing any colour here. */
      .tlch-priv-f {
        font-size: 11px;
        letter-spacing: .4px;
        color: color-mix(in srgb, var(--text) 62%, transparent);
      }
      /* The 6-character code behind the name, in the list: the same rule as in the
         conversation —name to read, code so as not to confuse two Javis—
         but in a dimmed tone, since here the name is what is sought. */
      .tlch-priv-c { font-size: 11px; color: var(--muted); font-weight: 400; }
      /* ══ THE FOUR MARKS ═══════════════════════════════════════════════
         ⛔ EACH WITH ITS COLOUR **AND** ITS FIXED PLACE to the left of the name,
         never colour alone (UX norm §2): whoever cannot tell red from amber
         has to be able to read them just the same, and for that they carry their name in
         the `title` and in the `aria-label`. They are a dot and not a label with text
         because the row has to remain ONE line with hundreds of
         conversations. */
      /* ⛔⭐ ICON, NOT DOT (2026-09-11). It was an 8 px little circle and the colour
         was the ONLY indicator — exactly what the house's UX norm forbids:
         you had to remember what each tone meant. Now the colour goes to the
         STROKE of the icon (`currentColor`), so the colour code is kept and
         the shape also says what it is without memory in between.
         ⚠️ 18 px, not 24: the row measures 52 and already carries a 34 avatar and two
         lines. With 24 the icon competes with the avatar for the eye. */
      /* ⛔⭐ THE WRAPPER OF THE HIDE GESTURE. The row slides over and
         underneath the icon peeks out. ⚠️ `touch-action: pan-y` ON THE ROW is
         mandatory and is the trap documented by `unit-deslizar-borrar`: without
         it the browser reserves horizontal movement for its own
         scrolling, sends `pointercancel` too early, **the finger
         drags and the row does not move, with no error in the console**. */
      .tlch-priv-swipe { position: relative; overflow: hidden; border-radius: 6px; }
      .tlch-priv-swipe .tlch-priv-fila {
        position: relative;
        z-index: 1;
        background: var(--bg);
        touch-action: pan-y;
      }
      .tlch-priv-bg {
        position: absolute; inset: 0;
        display: flex; align-items: center; justify-content: flex-end;
        padding-right: 18px;
        /* ⛔ NOT the delete red: this HIDES, and the colour has to say the
           same as the word. A red background would promise a destruction that does not
           happen, and whoever sees it once does not swipe again. */
        background: var(--surface2);
        color: var(--text-dim);
      }
      .tlch-priv-bg svg { width: 22px; height: 22px; }
      /* The help line: nobody discovers the gesture on their own. Discreet, once,
         above the list. */
      .tlch-priv-ayuda {
        margin: 2px 10px 8px;
        color: var(--text-dim);
        font-size: 12px;
        line-height: 1.4;
      }

      /* ⛔ THE LINE THAT SPLITS THE INBOX IN TWO. Above, what has a mark,
         below, the rest. Thin and `--border-soft`: it has to say "it changes here"
         without competing with the content — a separator that shows more than
         the rows turns one list into two lists, and it is one. */
      .tlch-priv-corte {
        height: 1px;
        margin: 10px 10px 12px;
        background: var(--border-soft);
      }
      .tlch-priv-m {
        flex-shrink: 0;
        width: 18px; height: 18px;
        display: flex; align-items: center; justify-content: center;
        color: var(--muted);
      }
      .tlch-priv-m svg { width: 18px; height: 18px; }
      .tlch-priv-m.tlch-m-pend { color: var(--alerta); }
      .tlch-priv-m.tlch-m-esp  { color: var(--warn); }
      .tlch-priv-m.tlch-m-call { color: var(--accent-2); }
      .tlch-priv-m.tlch-m-ok   { color: var(--success); }
      /* The header flag is tinted the same: same colour, same
         meaning, without having to open the menu to know how it stands. */
      .tlch-marcar.tlch-m-pend { color: var(--alerta); }
      .tlch-marcar.tlch-m-esp  { color: var(--warn); }
      .tlch-marcar.tlch-m-call { color: var(--accent-2); }
      .tlch-marcar.tlch-m-ok   { color: var(--success); }
      /* The footer that shows or hides the resolved ones. */
      .tlch-priv-ver {
        display: block;
        width: 100%;
        min-height: 44px;
        margin-top: 10px;
        background: none;
        border: 0;
        color: var(--muted);
        font: inherit;
        font-size: 13px;
        cursor: pointer;
      }
      .tlch-priv-ver:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
      /* ⛔⭐ THE SAME BADGE AS THE CHANNELS', and it is not cosmetic: it was the
         LAST list left with the old gold. The CSS of `.tlch-canal-b` itself tells it — it was born
         gold (`--accent-2`) on 2026-08-28 with the private mailbox, it was seen to be drift
         and it was unified to `--badge`, which is MEASURED in both themes (4.5:1 with
         white text; the error red stays at 3.76). This one was left out of that sweep.
         ⛔ And `margin-left:auto`, which was missing: without it the counter sticks to the
         text instead of going to the edge, and stops reading as a badge
         and looks like part of the name. `.tlch-canal-b` did have it. */
      .tlch-priv-b {
        flex-shrink: 0;
        margin-left: auto;
        min-width: 20px;
        padding: 0 6px;
        border-radius: 999px;
        background: var(--badge);
        color: #fff;
        font-size: 11px;
        font-weight: 700;
        line-height: 20px;
        text-align: center;
      }
      .tlch-canal.tlch-cn-org    { border-left-color: var(--muted); }
      .tlch-canal.tlch-cn-org    .tlch-canal-ic { color: var(--muted); }
      .tlch-canal.cv-type-aire   { border-left-color: var(--cv-type-aire-bd); }
      .tlch-canal.cv-type-aire   .tlch-canal-ic { color: var(--cv-type-aire-fg); }
      .tlch-canal.cv-type-fuego  { border-left-color: var(--cv-type-fuego-bd); }
      .tlch-canal.cv-type-fuego  .tlch-canal-ic { color: var(--cv-type-fuego-fg); }
      .tlch-canal.cv-type-aahh   { border-left-color: var(--cv-type-aahh-bd); }
      .tlch-canal.cv-type-aahh   .tlch-canal-ic { color: var(--cv-type-aahh-fg); }
      .tlch-canal.cv-type-plato  { border-left-color: var(--cv-type-plato-bd); }
      .tlch-canal.cv-type-plato  .tlch-canal-ic { color: var(--cv-type-plato-fg); }

      /* ── The header INSIDE the channel: where you come from and where you are ── */
      .tlch-head {
        display: flex; align-items: center; gap: 8px; flex: 0 0 auto;
        padding: 7px 10px; background: var(--surface);
        border-bottom: 1px solid var(--border-soft);
      }
      .tlch-atras {
        width: 40px; height: 40px; flex: 0 0 40px; border: 0; border-radius: 50%;
        background: transparent; color: var(--text); cursor: pointer;
        display: grid; place-items: center;
      }
      .tlch-atras svg { width: 22px; height: 22px; }
      .tlch-atras:hover { background: var(--surface2); }
      .tlch-atras:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
      .tlch-head-t { flex: 1; min-width: 0; }
      /* ⛔ THE NAME IS NOT CUT: IT WRAPS UP TO TWO LINES. It used
         `white-space: nowrap` and ellipsis, and that lost exactly the datum that
         distinguishes: "Federación de Tiro Olímpico de Álava" and "…de Euskadi" only
         differ AT THE END, which is what the ellipsis ate. Santi brought it up
         on 2026-09-01: *"there is the Federación de Tiro Olímpico de Álava, the
         Federación de Tiro Olímpico de Euskadi, and precisely that is not seen"*.
         ⭐ And no sliding ticker is needed —he proposed it and it was
         discarded—: it forces you to WAIT for the part of interest to go by, which is the
         opposite of a glance; with `prefers-reduced-motion` it would not move and
         we would be back to the start; and a permanent animation tires and wastes.
         Removing the repeated name leaves room and with two lines it fits whole. */
      .tlch-head-org {
        font-size: 12px; color: var(--muted); line-height: 1.25;
        display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
        overflow: hidden;
      }