/* Belt-and-braces only: the layout below is measured to fit without
           it. `max-width: 100%`, not 100vw - 100vw INCLUDES the vertical
           scrollbar, so it is ~15px wider than the viewport on desktop. */
        html, body { overflow-x: hidden; max-width: 100%; }
        body {
            background-image: url('seba.jpg') !important;
            background-attachment: fixed !important;
            background-position: center center !important;
            background-repeat: no-repeat !important;
            background-size: cover !important;
        }
        .background-overlay {
            position: fixed; inset: 0;
            background: transparent !important;
            backdrop-filter: none !important;
            z-index: -1;
        }
        .glass-card {
            background: rgba(255, 255, 255, 0.78);
            backdrop-filter: blur(16px) saturate(160%);
            -webkit-backdrop-filter: blur(16px) saturate(160%);
            border: 1px solid rgba(255, 255, 255, 0.6);
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
            border-radius: 20px;
            color: #2d3748;
            margin-bottom: 20px;
        }
        .glass-card * { color: #2d3748; }
        .glass-card .form-control, .glass-card .form-select {
            color: #212529;
            background: #ffffff;
        }
        .section-title {
            font-weight: 700; font-size: 17px;
            display: flex; align-items: center; gap: 10px;
            margin-bottom: 4px;
        }
        .section-desc { font-size: 14px; opacity: 0.85; margin-bottom: 14px; }

        /* Thread list rows */
        .thread-row {
            background: #ffffff;
            border: 1px solid rgba(0, 0, 0, 0.08);
            border-radius: 12px;
            padding: 12px 14px;
            margin-bottom: 10px;
            cursor: pointer;
            transition: background 0.15s ease;
        }
        .thread-row:hover { background: #f8f9fa; }
        /* The group chat row: a SOLID card (no see-through tint) with the
           purple accent strip on its left side. Not pinned - it sits in the
           list by last activity like every other conversation. The extra
           3px of border is taken out of the padding so the text lines up
           with the other rows. */
        .thread-row.thread-row--group {
            background: #f6eefa;
            border-left: 3px solid #7B1FA2;
            padding-left: 11px;
        }
        .thread-row.thread-row--group:hover { background: #efe1f6; }
        /* The header is a flex row (label | badge + time). Without
           min-width: 0 the label refuses to shrink below its min-content
           width, so a long name pushed the badge and the timestamp out of
           the card. The label wraps at spaces and only breaks a token that
           genuinely cannot fit (word-break stays normal). */
        .thread-row .thread-who {
            font-weight: 700; font-size: 15px;
            min-width: 0;
            overflow-wrap: break-word;
            word-break: normal;
        }
        .thread-row > .d-flex > .d-flex { flex-shrink: 0; }
        .thread-row .thread-last {
            font-size: 13px; color: #6b7280 !important;
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        }
        .thread-unread {
            background: #7B1FA2; color: #ffffff !important;
            border-radius: 9px; font-size: 11px; font-weight: 700;
            min-width: 18px; height: 18px; padding: 0 5px;
            display: inline-flex; align-items: center; justify-content: center;
        }

        /* Chat view */
        /* `overflow-y: auto` makes overflow-x compute to `auto` too, so
           ANY horizontal overflow in here becomes a horizontal scrollbar.
           Nothing inside may be wider than the content box - see the
           message row / chip strip rules in chat-reactions.css. */
        .chat-messages {
            max-height: 45vh; overflow-y: auto;
            display: flex; flex-direction: column; gap: 8px;
            padding: 4px 0;
            min-width: 0;
        }
        /* The conversation's list. On a phone wiadomosci-page.js (fitChat)
           replaces this max-height with whatever fits above the tab bar. */
        #chatMessages { max-height: 58vh; min-height: 180px; }
        .chat-bubble {
            max-width: 82%;
            min-width: 0;
            padding: 9px 13px;
            border-radius: 16px;
            font-size: 14px;
            line-height: 1.4;
            /* Wrap at spaces; break a token only when it cannot fit on a
               line of its own. word-break stays normal so Polish words are
               never chopped letter by letter. */
            word-wrap: break-word;
            overflow-wrap: break-word;
            word-break: normal;
        }
        .chat-bubble.from-me {
            align-self: flex-end;
            background: #7B1FA2;
            border-bottom-right-radius: 5px;
        }
        .chat-bubble.from-me, .chat-bubble.from-me * { color: #ffffff !important; }
        .chat-bubble.from-them {
            align-self: flex-start;
            background: #ffffff;
            border: 1px solid rgba(0, 0, 0, 0.08);
            border-bottom-left-radius: 5px;
        }
        .chat-time { font-size: 11px; opacity: 0.65; margin-top: 2px; }
        .chat-bubble a { text-decoration: underline; word-break: break-all; }
        .chat-bubble.from-them a { color: #1E88E5 !important; }

        /* Link preview card under a message */
        .link-preview-card {
            display: block;
            background: #ffffff;
            border: 1px solid rgba(0, 0, 0, 0.1);
            border-radius: 12px;
            overflow: hidden;
            margin-top: 8px;
            text-decoration: none !important;
            max-width: 300px;
        }
        .link-preview-card img {
            width: 100%;
            max-height: 150px;
            object-fit: cover;
            display: block;
        }
        .link-preview-card .lp-body { padding: 8px 10px; }
        .link-preview-card .lp-title {
            font-size: 13px; font-weight: 600; color: #2d3748 !important;
            display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
            overflow: hidden; text-decoration: none;
        }
        .link-preview-card .lp-domain {
            font-size: 11px; color: #9ca3af !important; margin-top: 2px;
            text-decoration: none;
        }

        .btn-anon {
            background: #7B1FA2; border: none; color: #ffffff !important; font-weight: 600;
        }
        .btn-anon:hover { background: #6A1B9A; color: #ffffff !important; }
        .btn-anon * { color: #ffffff !important; }

        .toast-container { z-index: 9999; }
        #successToast, #errorToast, #successToast *, #errorToast * { text-shadow: none; }
    
        /* ===== Composer =====
           A pill field that grows with the text. On the right: the purple GIF
           pill while the field is empty, a round send button once there is
           something to send (wiadomosci-page.js: syncComposer). */
        .composer {
            display: flex;
            align-items: flex-end;
            gap: 8px;
            margin-top: 12px;
            min-width: 0;
        }
        .composer-field {
            flex: 1;
            min-width: 0;
            display: flex;
            align-items: flex-end;
            background: #ffffff;
            border: 1.5px solid #cfd4da;
            border-radius: 24px;
            padding: 3px 14px 3px 18px;
            transition: border-color 0.15s ease, box-shadow 0.15s ease;
        }
        .composer-field:focus-within {
            border-color: #7B1FA2;
            box-shadow: 0 0 0 3px rgba(123, 31, 162, 0.16);
        }
        .composer-field textarea {
            flex: 1;
            min-width: 0;
            border: none;
            outline: none;
            resize: none;
            background: transparent;
            padding: 9px 0;
            font-size: 16px;            /* 16px: iOS does not zoom the page on focus */
            line-height: 22px;
            max-height: 132px;          /* ~5 lines, then it scrolls */
            overflow-y: auto;
            color: #212529;
            font-family: inherit;
        }
        .composer-field textarea::placeholder { color: #8a9099; }
        .composer-send {
            flex: none;
            width: 44px;
            height: 44px;
            border: none;
            border-radius: 50%;
            background: #7B1FA2;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            box-shadow: 0 2px 6px rgba(123, 31, 162, 0.35);
            transition: background 0.15s ease, transform 0.1s ease;
        }
        .composer-send:hover:not(:disabled) { background: #6A1B9A; }
        .composer-send:active:not(:disabled) { transform: scale(0.94); }
        .composer-send:disabled {
            background: #c9b5d3;
            box-shadow: none;
            cursor: default;
        }
        .composer-send svg {
            width: 22px;
            height: 22px;
            fill: none;
            stroke: #ffffff;
            stroke-width: 2.4;
            stroke-linecap: round;
            stroke-linejoin: round;
            pointer-events: none;
        }
        .composer-send:focus-visible,
        .composer-field textarea:focus-visible {
            outline: 2px solid #1E88E5;
            outline-offset: 2px;
        }
        .composer-field textarea:focus-visible { outline: none; }  /* the field shows the ring */
        .composer-send[hidden] { display: none; }
        @media (prefers-reduced-motion: reduce) {
            .composer-field, .composer-send { transition: none; }
        }

        /* ===== New-message card: same look as the conversation composer ===== */
        #targetSelect {
            border: 1.5px solid #cfd4da;
            border-radius: 24px;
            min-height: 48px;
            padding-left: 18px;
            font-size: 16px;
            transition: border-color 0.15s ease, box-shadow 0.15s ease;
        }
        #targetSelect:focus {
            border-color: #7B1FA2;
            box-shadow: 0 0 0 3px rgba(123, 31, 162, 0.16);
        }
        #composeGroupHint { padding: 0 6px; }
        #composeComposer { margin-top: 4px; }
        @media (prefers-reduced-motion: reduce) {
            #targetSelect { transition: none; }
        }