/* ============================================
   BASE STYLES
   ============================================ */
/* Interface text in Inter (bundled, templates/fonts); addresses, hashes,
   the status and shortcut bars and NomadNet pages in Cascadia Mono - see
   "Interface fonts" further down. */
:root {
    --ui-font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --mono-font: 'Cascadia Mono', 'Cascadia Code', Consolas, 'DejaVu Sans Mono', monospace;
}

* {
    box-sizing: border-box;
    font-family: var(--ui-font) !important;
}

body { 
    background: #0d1117; 
    color: #e6edf3; 
    margin: 0; 
    height: 100vh; 
    overflow: hidden; 
}

html, body {
    position: fixed;
    overflow: hidden;
    width: 100%;
    height: 100%;
    -webkit-overflow-scrolling: touch;
}

.main { 
    display: flex; 
    height: 100vh; 
    width: 100vw; 
    position: fixed; 
    top: 0; 
    left: 0; 
}

/* ============================================
   SIDEBAR
   ============================================ */
.sidebar { 
    width: 320px; 
    min-width: 320px;
    max-width: 320px;
    background: #161b22; 
    border-right: 1px solid #30363d; 
    display: flex; 
    flex-direction: column; 
    height: 100vh;
}

.sidebar-top { 
    background: #21262d; 
    padding: 10px 16px; 
    border-bottom: 1px solid #30363d; 
    flex-shrink: 0;
    height: 50px;
    min-height: 50px;
    max-height: 50px;
}

/* The three rows above the node list mirror the three on the right:
   search = tab bar (48px), favorites = navigation bar (60px),
   sort = page header (50px). Same background, same borders, same
   controls, so the lines run straight across the window. */
.search-container,
.favorites-section,
.sort-container {
    background: #21262d;
    border-bottom: 1px solid #30363d;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding: 0 10px;
}

/* Second row (under Favorites): as tall as the nav bar on the right. */
.search-container {
    height: 60px;
    min-height: 60px;
    max-height: 60px;
}

.search-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.search-icon {
    position: absolute;
    left: 10px;
    color: #6e7681;
    pointer-events: none;
}

/* Same box as the address bar. */
.node-search {
    background: #0d1117;
    border: 1px solid #30363d;
    color: #e6edf3;
    padding: 0 30px 0 30px;
    border-radius: 4px;
    font-size: 12px;
    width: 100%;
    margin: 0;
    height: 33px;
    transition: border-color 0.12s ease;
}

.node-search::placeholder {
    color: #6e7681;
}

.node-search:hover {
    border-color: #444c56;
}

.node-search:focus {
    outline: none;
    border-color: #58a6ff;
}

.search-wrapper:focus-within .search-icon {
    color: #58a6ff;
}

.search-clear {
    position: absolute;
    right: 6px;
    background: none;
    border: none;
    color: #7d8590;
    font-size: 16px;
    cursor: pointer;
    padding: 0;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: all 0.12s ease;
}

.search-clear:hover {
    background: #30363d;
    color: #e6edf3;
}

/* The × of the address bar floats over its right end (rbrowser.js). */
.address-clear {
    position: fixed;
    right: auto;
    z-index: 1200;
    background: #0d1117;
}

.address-clear[hidden] {
    display: none;
}

/* Room for the × at the end of the text. Specific enough to beat the
   phone layouts, which set the padding with !important. */
html body .address-bar.address-bar:focus,
html body .address-bar.address-bar:hover {
    padding-right: 32px !important;
}

/* Favorites row: one wide button that opens the menu, and + to add one
   by address, both the size of the navigation bar buttons. */
/* First row: as tall as the tab bar on the right. */
.favorites-section {
    position: relative;
    z-index: 100;
    gap: 6px;
    height: 48px;
    min-height: 48px;
    max-height: 48px;
}

.favorites-toggle,
.favorites-add {
    height: 33px;
    background: #30363d;
    border: 1px solid #3d444d;
    border-radius: 4px;
    color: #e6edf3;
    cursor: pointer;
    transition: background-color 0.12s ease, border-color 0.12s ease;
}

.favorites-toggle {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 10px;
    font-size: 12px;
    font-weight: 600;
    text-align: left;
}

.favorites-add {
    flex-shrink: 0;
    width: 33px;
    padding: 0;
    font-size: 18px;
    line-height: 1;
    color: #58a6ff;
}

.favorites-toggle:hover,
.favorites-add:hover {
    background: #3d444d;
    border-color: #58a6ff;
}

.favorites-star {
    color: #ffa657;
    font-size: 14px;
}

.favorites-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.favorites-count {
    min-width: 20px;
    padding: 1px 6px;
    border-radius: 10px;
    background: rgba(255, 166, 87, 0.15);
    color: #ffa657;
    font-size: 11px;
    text-align: center;
}

.favorites-chevron {
    flex-shrink: 0;
    color: #7d8590;
    transition: transform 0.15s ease;
}

.favorites-section.open #favorites-toggle,
.favorites-section.history-open #history-toggle {
    border-color: #58a6ff;
    background: #3d444d;
}

.favorites-section.open #favorites-toggle .favorites-chevron,
.favorites-section.history-open #history-toggle .favorites-chevron {
    transform: rotate(180deg);
    color: #58a6ff;
}

/* History shares the row with Favorites, about half each (Favorites keeps
   its +). History is as wide as its words, Favorites takes the rest: at an
   exact half "Favorites" was cut to "Favo…" next to its star and count.
   Off in Settings: hidden, and Favorites has the row to itself again. */
.favorites-section .favorites-toggle {
    gap: 6px;
    padding: 0 8px;
}

.favorites-section .history-toggle {
    flex: 0 1 auto;
}

.history-toggle .favorites-label {
    flex: none;
}

.history-icon {
    flex-shrink: 0;
    color: #a5d6ff;
}

body.history-off .history-toggle,
body.history-off .history-list {
    display: none !important;
}

/* Settings > Favorites off: the menu, its + and every star go. */
body.favorites-off #favorites-toggle,
body.favorites-off #add-favorite-btn,
body.favorites-off #favorites-list,
body.favorites-off .node-item .star-btn,
body.favorites-off .nav-bar .star-btn {
    display: none !important;
}

/* Both off: the row they share goes too. */
body.favorites-off.history-off .favorites-section {
    display: none !important;
}

/* The menu itself, over the top of the node list. */
.favorites-list {
    display: none;
    position: absolute;
    top: calc(100% - 8px);
    left: 10px;
    right: 10px;
    max-height: min(60vh, 420px);
    overflow-y: auto;
    padding: 4px;
    background: #161b22;
    border: 1px solid #3d444d;
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(1, 4, 9, 0.6);
    scrollbar-width: thin;
    scrollbar-color: #3d444d transparent;
}

.favorites-section.open #favorites-list,
.favorites-section.history-open #history-list {
    display: block;
}

/* A history row: node name, then path and when. */
.history-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 6px 6px 8px;
    border-radius: 4px;
    cursor: pointer;
    min-width: 0;
}

.history-item:hover {
    background: #21262d;
}

.history-item:hover .favorite-name {
    color: #58a6ff;
}

.history-item:hover .favorite-remove {
    opacity: 1;
}

.history-when {
    flex-shrink: 0;
    color: #6e7681;
    font-size: 10px;
    white-space: nowrap;
}

.history-day {
    padding: 8px 8px 3px;
    color: #7d8590;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.history-footer {
    display: flex;
    justify-content: flex-end;
    padding: 6px 4px 2px;
    margin-top: 4px;
    border-top: 1px solid #30363d;
}

.history-clear {
    padding: 3px 8px;
    background: none;
    border: 1px solid #3d444d;
    border-radius: 4px;
    color: #7d8590;
    font-size: 11px;
    cursor: pointer;
}

.history-clear:hover {
    color: #ff7b72;
    border-color: #ff7b72;
}

.favorites-empty {
    padding: 14px 8px;
    color: #7d8590;
    font-size: 11px;
    line-height: 1.6;
    text-align: center;
}

.favorite-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 6px 6px 8px;
    border-radius: 4px;
    cursor: pointer;
    min-width: 0;
}

.favorite-item:hover {
    background: #21262d;
}

.favorite-star {
    flex-shrink: 0;
    color: #ffa657;
    font-size: 12px;
}

.favorite-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.favorite-name,
.favorite-hash {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.favorite-name {
    color: #e6edf3;
    font-size: 12px;
}

.favorite-item:hover .favorite-name {
    color: #58a6ff;
}

.favorite-hash {
    color: #6e7681;
    font-size: 10px;
}

.favorite-remove {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    padding: 0;
    background: none;
    border: none;
    border-radius: 4px;
    color: #7d8590;
    font-size: 15px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.12s ease, background-color 0.12s ease, color 0.12s ease;
}

.favorite-item:hover .favorite-remove {
    opacity: 1;
}

.favorite-remove:hover {
    color: #ff7b72;
    background: rgba(255, 123, 114, 0.15);
}

/* Sort row: label and select like the page header's buttons. */
.sort-container {
    position: relative;
    z-index: 50;
    gap: 8px;
    height: 50px;
    min-height: 50px;
    max-height: 50px;
}

.sort-label {
    color: #7d8590;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.sort-container select {
    flex: 1;
    min-width: 0;
    height: 28px;
    background: #21262d;
    border: 1px solid #30363d;
    color: #c9d1d9;
    padding: 0 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.12s ease;
}

.sort-container select:hover {
    border-color: #58a6ff;
}

.sort-container select:focus {
    outline: none;
    border-color: #58a6ff;
}

.sort-container select option {
    background: #161b22;
    color: #e6edf3;
}

/* Phones: no favourite remove-on-hover, the × is always shown. */
@media (hover: none) {
    .favorite-remove {
        opacity: 1;
    }
}

.node-list-container { 
    flex: 1; 
    overflow-y: auto; 
    padding-top: 0;
    position: relative;
    z-index: 1;
}

.node-list { 
    padding: 6px; 
}

/* ============================================
   NODE CARDS
   One card per announced node: name with a freshness dot and the two
   buttons on the first line, then hash, operator and announce info.
   Names in the interface font; hash, operator address and the bottom row
   in the mono one (see "Interface fonts").
   ============================================ */
.node-item,
.node-item * {
    font-family: var(--ui-font) !important;
}

.node-item {
    position: relative;
    background: #1c2128;
    border: 1px solid #2d333b;
    margin: 0 0 6px 0;
    padding: 8px 9px 7px 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}

.node-item:hover {
    background: #22272e;
    border-color: #444c56;
}

/* Selected: a tint and an accent bar on the left instead of a solid blue
   block, so the text keeps its colours and stays readable. */
.node-item.selected {
    background: rgba(56, 139, 253, 0.12);
    border-color: #388bfd;
    box-shadow: inset 3px 0 0 #388bfd;
}

.node-head {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin-bottom: 5px;
    padding-bottom: 5px;
    border-bottom: 1px solid #2d333b;
}

.node-item.selected .node-head {
    border-bottom-color: rgba(56, 139, 253, 0.3);
}

/* Freshness of the last announce: green within the minute, blue within
   the hour, grey after that. */
.node-dot {
    flex-shrink: 0;
    width: 7px;
    height: 7px;
    margin-top: 5px;
    border-radius: 50%;
    background: #6e7681;
}

.node-item[data-fresh="now"] .node-dot {
    background: #3fb950;
    box-shadow: 0 0 0 3px rgba(63, 185, 80, 0.18);
}

/* Listed from Reticulum's known announces, not heard since the start: an
   empty ring, unlike every other dot. */
.node-item[data-fresh="known"] .node-dot {
    background: transparent;
    box-shadow: inset 0 0 0 1.5px #a371f7;
}

.node-item[data-fresh="recent"] .node-dot {
    background: #58a6ff;
}

/* "3 new nodes": the nodes that came in since it was last clicked or closed
   (setNodeListPending). Over the Sort row; top and height are set there. */
.node-list-pending {
    position: absolute;
    left: 10px;
    right: 10px;
    z-index: 60;                /* the Sort row is 50 */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0;
    padding: 0 10px;
    background: linear-gradient(180deg, rgba(56, 139, 253, 0.22), rgba(31, 58, 95, 0.92));
    border: 1px solid rgba(88, 166, 255, 0.55);
    border-radius: 999px;
    color: #cae8ff;
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 0.2px;
    cursor: pointer;
    backdrop-filter: blur(6px);
    box-shadow: 0 6px 18px rgba(1, 4, 9, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    animation: pending-in 0.25s ease-out;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.node-list-pending:hover {
    border-color: #58a6ff;
    box-shadow: 0 6px 22px rgba(56, 139, 253, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.12);
    transform: translateY(-1px);
}

.node-list-pending .pending-count {
    min-width: 20px;
    height: 18px;
    padding: 0 6px;
    border-radius: 999px;
    background: #388bfd;
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}

.node-list-pending .pending-arrow {
    display: flex;
    color: #79c0ff;
}

.node-list-pending .pending-close {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #8b949e;
    font-size: 15px;
    line-height: 1;
    transition: background-color 0.12s ease, color 0.12s ease;
}

.node-list-pending .pending-close:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
}

.node-list-pending.dir-up .pending-arrow { animation: pending-up 1.4s ease-in-out infinite; }
.node-list-pending.dir-down .pending-arrow { animation: pending-down 1.4s ease-in-out infinite; }

@keyframes pending-in {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: none; }
}

@keyframes pending-up {
    0%, 100% { transform: translateY(1px); }
    50% { transform: translateY(-2px); }
}

@keyframes pending-down {
    0%, 100% { transform: translateY(-1px); }
    50% { transform: translateY(2px); }
}

@media (prefers-reduced-motion: reduce) {
    .node-list-pending,
    .node-list-pending .pending-arrow { animation: none !important; }
}

.node-list-pending[hidden] {
    display: none;
}

/* Rows that came in with "N new nodes" (revealNewNodes), for a few
   seconds. The outline fades out with the class. */
.node-item {
    transition: outline-color 0.8s ease;
    outline: 2px solid transparent;
    outline-offset: -2px;
}

.node-item.just-added {
    outline-color: #388bfd;
}

/* The cache, around the dot (applyNodeCacheMark): amber when a visit would
   open saved pages now, grey when pages are saved but none is valid. An
   outline, so it does not fight the green glow of a fresh announce. */
.node-dot {
    cursor: help;
}

.node-item[data-cache="usable"] .node-dot {
    outline: 1.5px solid #d29922;
    outline-offset: 2px;
}

.node-item[data-cache="saved"] .node-dot {
    outline: 1.5px solid #6e7681;
    outline-offset: 2px;
}

/* The disk at the foot of the card, same colours. */
.node-cache {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    color: #6e7681;
    white-space: nowrap;
    cursor: help;
}

.node-cache[hidden],
.node-visits[hidden] {
    display: none;
}

/* Times you opened the node, before the disk. */
.node-visits {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    color: #8b949e;
    white-space: nowrap;
    cursor: help;
}

.node-item[data-cache="usable"] .node-cache {
    color: #e3b341;
}

.node-title {
    flex: 1;
    min-width: 0;
    color: #e6edf3;
    font-weight: 700;
    font-size: 12.5px;
    line-height: 1.35;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.node-item:hover .node-title {
    color: #ffffff;
}

.node-item.selected .node-title {
    color: #a5d6ff;
}

.node-actions {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 2px;
    margin: -3px -4px 0 0;
}

/* The buttons are quiet until the card is hovered, so a long list does
   not read as a column of icons. A favourite star always shows. */
.node-item .info-btn,
.node-item .hide-btn,
.node-item .star-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    min-width: 0;
    padding: 0;
    background: none;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    line-height: 1;
    transition: background-color 0.12s ease, color 0.12s ease, opacity 0.12s ease;
}

.node-item .info-btn {
    color: #7d8590;
    opacity: 0.55;
}

/* Quiet like the info button, red under the pointer. */
.node-item .hide-btn {
    color: #7d8590;
    opacity: 0.55;
}

.node-item .hide-btn:hover {
    opacity: 1;
    color: #f85149;
    background: rgba(248, 81, 73, 0.15);
}

.node-item .star-btn {
    font-size: 17px;
    font-weight: 400;
    opacity: 0.55;
}

.node-item:hover .info-btn,
.node-item:hover .star-btn,
.node-item.selected .info-btn,
.node-item.selected .star-btn,
.node-item .star-btn[style*="ffa657"] {
    opacity: 1;
}

.node-item .info-btn:hover {
    color: #58a6ff;
    background: rgba(88, 166, 255, 0.15);
}

.node-item .star-btn:hover {
    background: rgba(255, 166, 87, 0.15);
    border: none;
}

.node-item .info-btn svg,
.node-item .hide-btn svg,
.node-item .copy-icon svg,
.node-item .operator-icon svg {
    display: block;
    pointer-events: none;
}

.node-hash {
    display: flex;
    align-items: flex-start;
    gap: 5px;
    color: #7d8590;
    font-size: 10.5px;
    line-height: 1.4;
    letter-spacing: 0.2px;
    word-break: break-all;
    margin-bottom: 4px;
}

/* Grey, like the title's dot before it has a colour: lines the row up with
   the title. Only a mark. */
.hash-dot {
    flex-shrink: 0;
    width: 7px;
    height: 7px;
    margin: 4px 2px 0 0;
    border-radius: 50%;
    background: #6e7681;
}

.node-operator .hash-dot {
    margin-top: 0;          /* this row centres its items */
}

.node-item.selected .node-hash {
    color: #8b949e;
}

/* Who runs the node, under its hash. Empty for nodes whose announce we
   have not been able to derive an operator address from, and the rule
   below keeps an empty one from taking up a row's worth of space. */
.node-operator {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 10.5px;
    color: #8b949e;
    margin-bottom: 4px;
    min-width: 0;
}

.node-operator:empty {
    display: none;
}

/* Only the two icons copy; the hash and address text belong to the row
   and open the node like the rest of it. When the text copied as well,
   copy targets covered most of the row and clicks meant for the node
   kept copying instead.

   The padding makes the box a comfortable target without the icon itself
   growing; the negative margin keeps the row from shifting. */
.copy-icon,
.operator-icon {
    flex-shrink: 0;
    cursor: pointer;
    padding: 2px;
    margin: -1px 0 -2px -2px;
    border-radius: 4px;
    transition: color 0.12s ease, background-color 0.12s ease;
}

.copy-icon { color: #6e7681; }
.operator-icon { color: #a371f7; }

.copy-icon:hover,
.operator-icon:hover {
    color: #58a6ff;
    background-color: rgba(88, 166, 255, 0.18);
}

.operator-icon:hover {
    color: #d2a8ff;
    background-color: rgba(163, 113, 247, 0.2);
}

.operator-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    color: #c9d1d9;
}

.operator-addr {
    color: #7d8590;
}

/* Announce info at the foot of the card, the time as a small badge
   coloured like the dot. */
.node-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    margin-top: 6px;
    padding-top: 5px;
    border-top: 1px solid #2d333b;
    color: #6e7681;
    font-size: 10.5px;
}

.node-item.selected .node-info {
    border-top-color: rgba(56, 139, 253, 0.3);
}

.node-bytes {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Hover shows the interface the path leaves by. */
.node-hops {
    flex-shrink: 0;
    color: #8b949e;
    white-space: nowrap;
    cursor: pointer;
    padding: 0 4px;
    border-radius: 4px;
}

/* Clicking it opens the node info, like the info button. */
.node-hops:hover {
    color: #c9d1d9;
    background-color: rgba(88, 166, 255, 0.15);
}

.node-seen {
    flex-shrink: 0;
    padding: 1px 7px;
    border-radius: 10px;
    background: rgba(110, 118, 129, 0.15);
    color: #8b949e;
    white-space: nowrap;
}

.node-item[data-fresh="now"] .node-seen {
    background: rgba(63, 185, 80, 0.15);
    color: #56d364;
}

.node-item[data-fresh="recent"] .node-seen {
    background: rgba(56, 139, 253, 0.13);
    color: #79c0ff;
}

.browse-btn { 
    background: #30363d; 
    color: #ffffff; 
    border: none; 
    padding: 5px 10px; 
    border-radius: 4px; 
    cursor: pointer; 
    font-size: 10px; 
    font-weight: 600; 
    transition: all 0.12s ease; 
    width: 100%; 
}

.browse-btn:hover { 
    background: #1f6feb; 
}

/* One line across the whole window, at the top or at the bottom (class on
   <body>, Settings > System): the state, the counters, CPU/RAM. Too long
   for the window, it scrolls sideways. */
:root {
    --sb-h: 24px;
}

.status-bar {
    position: fixed;
    left: 0;
    right: 0;
    z-index: 1500;
    height: var(--sb-h);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    padding: 0 10px;
    background: #0d1117;
    font-size: 11.5px;
    line-height: 1.2;
    color: #c9d1d9;
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
}

.status-bar::-webkit-scrollbar {
    display: none;
}

body.sb-top .status-bar {
    top: 0;
    border-bottom: 1px solid #30363d;
}

body.sb-bottom .status-bar {
    bottom: 0;
    border-top: 1px solid #30363d;
}

/* NomadNet's shortcuts sit on the status bar when that is at the bottom. */
body.sb-bottom .shortcuts-bar {
    bottom: var(--sb-h);
}

.status-bar .sb-row + .sb-row {
    margin-left: 12px;
    padding-left: 12px;
    border-left: 1px solid #30363d;
}

.status-bar .sb-stats,
.status-bar .sb-heard {
    display: flex;
    align-items: center;
    gap: 6px;
}

.status-bar .sb-heard:empty {
    display: none;
}

.status-bar .sb-heard .sb-stat::before {
    content: "·";
    margin-right: 1px;
    color: #6e7681;
}

/* Icons, the names in the tooltips; CPU, RAM and Page keep theirs, and
   go to the right end (closer as the window narrows). */
.status-bar .sb-ico {
    display: inline-flex;
    align-items: center;
    color: #8b949e;
}

.status-bar .sb-label:not(.sb-keep):not(.sb-status-label) {
    display: none;
}

.status-bar .sb-stats {
    padding-right: 12px;
}

.status-bar .sb-row.sb-usage-row {
    margin-left: auto;
}

/* A new version not installed yet: thin, as tall as the bar's text. */
.status-bar .sb-update {
    flex: none;
    height: 18px;
    padding: 0 8px;
    border: 1px solid #f0883e;
    border-radius: 9px;
    background: #f0883e2e;
    color: #ffa657;
    font: inherit;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    animation: sb-update-pulse 2s ease-in-out infinite;
}

.status-bar .sb-update:hover {
    background: #f0883e55;
    animation: none;
}

/* Something to look at: it breathes, gently. */
@keyframes sb-update-pulse {
    0%, 100% { box-shadow: 0 0 0 0 #f0883e00; }
    50% { box-shadow: 0 0 0 3px #f0883e55; background: #f0883e4d; }
}

@media (prefers-reduced-motion: reduce) {
    .status-bar .sb-update {
        animation: none;
    }
}

.status-bar .sb-update[hidden] {
    display: none;
}

@media (max-width: 767px), (pointer: coarse) and (max-height: 500px) {
    .status-bar .sb-update {
        padding: 0 6px;
    }
}

/* A long Reticulum error is cut with "..." (the whole of it in the bar's
   tooltip): the icons, CPU/RAM and the clock always stay in sight. */
.status-bar .status-indicator {
    max-width: 40vw;
}

.status-bar .sb-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.status-bar .sb-version {
    color: #8b949e;
    font-weight: 600;
    white-space: nowrap;
}

.status-bar .sb-version {
    text-decoration: none;
}

.status-bar .sb-version:hover {
    color: #58a6ff;
    text-decoration: underline;
}

.status-bar .sb-version:empty {
    display: none;
}

.status-bar .sb-clock {
    color: #e6edf3;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.5px;
}

.status-bar .sb-ico svg {
    width: 12px;
    height: 12px;
}

/* The page under the bar: the old layout gave .main, the list and the page
   the whole screen (100vh, also !important on phones); here they lose the
   bar's height, above or below it. */
body.sb-top {
    --sb-top: var(--sb-h);
}

body.sb-bottom {
    --sb-top: 0px;
}

body.sb-top .main,
body.sb-bottom .main {
    top: var(--sb-top) !important;
    height: calc(100vh - var(--sb-h)) !important;
    height: calc(100dvh - var(--sb-h)) !important;
}

body.sb-top .main > .sidebar,
body.sb-bottom .main > .sidebar,
body.sb-top .main > .content,
body.sb-bottom .main > .content {
    height: 100% !important;
}

/* Phones: the list and the page are fixed to the screen, not to .main. */
body.mobile-device.sb-top .main > .sidebar,
body.mobile-device.sb-bottom .main > .sidebar,
body.mobile-device.sb-top .main > .content,
body.mobile-device.sb-bottom .main > .content {
    top: var(--sb-top) !important;
    bottom: auto !important;
    height: calc(100vh - var(--sb-h)) !important;
    height: calc(100dvh - var(--sb-h)) !important;
}

body.mobile-device .status-bar .sb-status-label {
    display: none;
}

@media (max-width: 767px), (hover: none) and (pointer: coarse) {
    body.sb-top .main > .sidebar,
    body.sb-bottom .main > .sidebar,
    body.sb-top .main > .content,
    body.sb-bottom .main > .content {
        top: var(--sb-top) !important;
        bottom: auto !important;
        height: calc(100vh - var(--sb-h)) !important;
        height: calc(100dvh - var(--sb-h)) !important;
    }

    .status-bar .sb-status-label {
        display: none;
    }
}

/* Same font and size as the two rows above it. */
.status-bar .sb-usage {
    display: flex;
    align-items: center;
    gap: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.status-bar .sb-row {
    flex: none;
    display: flex;
    align-items: center;
    gap: 6px;
}

.status-bar .status-indicator {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    font-weight: 600;
}

.status-bar .sb-dot {
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #7d8590;
}

.status-bar .sb-text {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* The counters as plain text, from the same left edge as Status. */
.status-bar .sb-stat {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.status-bar .sb-stat + .sb-stat::before {
    content: "·";
    margin-right: 1px;
    color: #6e7681;
}

.status-bar .sb-label {
    color: #8b949e;
}

/* Mobile: "Announces: N · NomadNet: N", the long labels ran under the node list. */
.status-bar .sb-short { display: none; }
@media (max-width: 767px), (pointer: coarse) and (max-height: 500px) {
    .status-bar .sb-long { display: none; }
    .status-bar .sb-short { display: inline; }
}

.status-bar .count {
    font-variant-numeric: tabular-nums;
}

.status-bar .online { 
    color: #3fb950; 
    font-weight: bold; 
}

.status-bar .count { 
    color: #58a6ff; 
    font-weight: bold; 
}

.online, .waiting, .connerror {
    font-weight: bold;
}

.online {
    color: #40ed3a;
}

.waiting {
    color: #f59e0b;
}

.connerror {
    color: #ef4444;
}

/* ============================================
   CONTENT AREA
   ============================================ */
.content { 
    flex: 1; 
    display: flex; 
    flex-direction: column; 
    background: #0d1117;
    width: calc(100vw - 320px);
    min-width: calc(100vw - 320px);
    max-width: calc(100vw - 320px);
    height: 100vh;
    overflow: hidden;
    padding-bottom: 30px;
}

/* ============================================
   NAVIGATION BAR
   ============================================ */
.nav-bar { 
    background: #21262d; 
    padding: 12px 16px; 
    border-bottom: 1px solid #30363d; 
    display: flex; 
    align-items: center; 
    gap: 8px;
    height: 60px;
    min-height: 60px;
    max-height: 60px;
    flex-shrink: 0;
}

.nav-controls { 
    display: flex; 
    gap: 4px; 
}

.nav-btn { 
    background: #30363d; 
    border: 1px solid #3d444d; 
    color: #e6edf3; 
    padding: 6px 8px; 
    border-radius: 4px; 
    cursor: pointer; 
    font-size: 12px; 
    transition: all 0.12s ease; 
    min-width: 28px; 
    text-align: center; 
}

.nav-btn:hover { 
    background: #484f58; 
    border-color: #58a6ff; 
}

.nav-btn:disabled { 
    background: #21262d; 
    color: #656d76; 
    cursor: not-allowed; 
    border-color: #30363d; 
}

.address-bar { 
    flex: 1; 
    background: #0d1117; 
    border: 1px solid #30363d; 
    color: #e6edf3; 
    padding: 8px 12px; 
    border-radius: 4px; 
    font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, monospace; 
    font-size: 13px; 
}

.address-bar:focus { 
    outline: none; 
    border-color: #58a6ff; 
}

.go-btn { 
    background: #30363d; 
    border: 1px solid #3d444d; 
    color: #ffffff; 
    padding: 5px 10px; 
    border-radius: 4px; 
    cursor: pointer; 
    font-size: 12px; 
    font-weight: 600; 
    transition: all 0.20s ease; 
}

.go-btn:hover { 
    background: #1ec735; 
}


.star-btn { 
    background: #30363d; 
    border: 1px solid #30363d; 
    color: #ffa657; 
    padding: 5px 10px; 
    border-radius: 4px; 
    cursor: pointer; 
    font-size: 15px; 
    font-weight: 600;
    transition: all 0.30s ease; 
    min-width: 28px; 
    text-align: center; 
}

.star-btn:hover { 
    background: #030c04; 
    border-color: #ffa657; 
    color: #030c04;
}

.star-btn.favorited {
    border: 2px solid #fad42d;
    color: #0d1117;
}

.star-btn.favorited:hover {
    background: #110d09;
}

.star-btn.favorited img {
    filter: brightness(0) saturate(100%) invert(70%) sepia(98%) saturate(460%) hue-rotate(2deg) brightness(104%) contrast(101%);
}

.ping-btn { 
    background: #30363d; 
    border: 1px solid #30363d; 
    color: #58a6ff; 
    padding: 6px 11px; 
    border-radius: 4px; 
    cursor: pointer; 
    font-size: 15px; 
    font-weight: 600; 
    transition: all 0.30s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ping-btn img {
    filter: invert(18%) sepia(89%) saturate(1690%) hue-rotate(195deg) brightness(153%) contrast(121%);
}

.ping-btn:hover { 
    background: #1ec735; 
    border-color: #58a6ff; 
}

.ping-btn:disabled { 
    background: #6e7681; 
    cursor: not-allowed; 
    opacity: 0.6; 
}

.fingerprint-btn { 
    background: #30363d; 
    border: 1px solid #30363d; 
    color: #ffffff; 
    padding: 6px 11px; 
    border-radius: 4px; 
    cursor: pointer; 
    font-size: 15px; 
    font-weight: 600; 
    transition: all 0.30s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fingerprint-btn img {
    filter: invert(48%) sepia(89%) saturate(1690%) hue-rotate(195deg) brightness(153%) contrast(101%);
}

.fingerprint-btn:hover { 
    background: #1ec735; 
}

.fingerprint-btn:disabled { 
    background: #6e7681; 
    cursor: not-allowed; 
    opacity: 0.6; 
}

.info-btn-nav { 
    background: #30363d; 
    border: 1px solid #30363d; 
    color: #58a6ff; 
    padding: 6px 11px; 
    border-radius: 4px; 
    cursor: pointer; 
    font-size: 15px; 
    font-weight: 600; 
    transition: all 0.30s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.info-btn-nav:hover { 
    background: #1ec735; 
    border-color: #58a6ff; 
}

.info-btn-nav:disabled { 
    background: #6e7681; 
    cursor: not-allowed; 
    opacity: 0.6; 
}

/* ============================================
   HEADER / PAGE INFO
   ============================================ */
.header {
    background: #21262d;
    padding: 12px 24px; 
    color: #f0f6fc;
    border-bottom: 1px solid #30363d;
    position: relative;
    height: 50px;
    min-height: 50px; 
    max-height: 50px; 
    flex-shrink: 0;
    overflow: visible;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.page-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 0;
    margin-right: 0;
    overflow: hidden;
}

.page-title {
    font-size: 16px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #f0f6fc;
    margin: 0;
    margin-bottom: 4px;
}

.page-title .node-name {
    color: #f0f6fc;
    font-weight: 600;
}

.page-title .label {
    color: #7d8590;
    font-weight: normal;
}

.page-details {
    font-size: 13px;
    color: #7d8590;
    font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, monospace;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.page-details .label,
.page-details .path-info,
.page-details .address-info {
    color: #7d8590;
    font-weight: normal;
}

.page-details .value {
    color: #f0f6fc;
    font-weight: 600;
}

.page-url {
    font-size: 13px;
    color: #7d8590;
    font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, monospace;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    margin-left: 8px;
}

.header-buttons {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.view-toggle {
    position: relative;
    top: auto;
    right: auto;
    transform: none;
    background: #21262d;
    border: 1px solid #30363d;
    color: #e6edf3;
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.12s ease;
    z-index: 10;
    display: none;
    white-space: nowrap;
    min-width: 90px;
    text-align: center;
}

.view-toggle:hover {
    background: #30363d;
    border-color: #58a6ff;
}


input:checked + .slider {
    background-color: #58a6ff;
}

input:checked + .slider:before {
    transform: translateX(16px);
}

input:disabled + .slider {
    cursor: not-allowed;
    opacity: 0.5;
}

.auto-reload-btn {
    position: relative;
    top: auto;
    right: auto;
    transform: none;
    background: #21262d;
    border: 1px solid #30363d;
    color: #e6edf3;
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    transition: all 0.2s ease;
    z-index: 10;
    display: none;
    white-space: nowrap;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-width: auto;
    line-height: 1;
}

.auto-reload-btn:hover {
    background: #30363d;
    border-color: #58a6ff;
}

.auto-reload-btn.active {
    background: #238636;
    color: #ffffff;
    border-color: #2ea043;
    animation: pulse-reload 2s ease-in-out infinite;
}

.auto-reload-btn.active:hover {
    background: #2ea043;
}

@keyframes pulse-reload {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.reload-countdown {
    font-size: 11px;
    color: #ffffff;
    font-weight: 600;
    margin-left: 2px;
    line-height: 1;
}

/* Auto-identify: same shape as the auto-reload button it sits beside, but
   no pulse - this one is a standing preference, not a running timer. */
.auto-identify-btn {
    background: #21262d;
    border: 1px solid #30363d;
    color: #8b949e;
    padding: 6px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 11px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    white-space: nowrap;
    line-height: 1;
}

.auto-identify-btn img {
    opacity: 0.55;
    transition: opacity 0.2s ease;
}

.auto-identify-btn:hover {
    background: #30363d;
    border-color: #58a6ff;
}

.auto-identify-btn.active {
    background: #1f6feb;
    border-color: #388bfd;
    color: #ffffff;
}

.auto-identify-btn.active img {
    opacity: 1;
}

.auto-identify-label {
    font-weight: 600;
    letter-spacing: 0.2px;
}

/* ============================================
   BROWSER AREA / PAGE CONTENT
   ============================================ */
.browser-area { 
    flex: 1; 
    overflow-y: auto; 
    overflow-x: hidden;
    /* Pure black, like NomadNet in a terminal: micron pages are drawn for it. */
    background: #000;
    position: relative;
    height: auto;
    min-height: 0;
}






.page-content {
    /* font-size and line-height are set together at the end of this file,
       from one pair of variables. They used to be declared here as well,
       and having the same property set in three places is how a scanline
       fix got silently undone once already. */
    letter-spacing: 0px;
    color: #e6edf3;
    background: #000;
    padding: 5px;
    border-radius: 8px;
    /* No frame on black (NomadNet has none); kept transparent so the
       layout does not move by a pixel. */
    border: 1px solid transparent;
    min-height: 200px;
    max-width: 100%;
    word-wrap: break-word;
    overflow-wrap: break-word;
    font-family: 'Consolas', 'Courier New', 'Liberation Mono', monospace;
    font-weight: 600;
    -webkit-font-smoothing: none;
    /* Only the colours animate. This was "all 0.2s": the font size, line
       height and width then animated on every zoom change, and the fit
       measured the page in mid-animation - at the old size - so the same
       page fitted differently from one load to the next. */
    transition: background-color 0.2s ease, color 0.2s ease;
    overflow: visible;
    display: block;
}


.page-content.raw { 
    white-space: pre-wrap; 
    font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, monospace; 
    overflow: auto;
}

.page-content a { 
    color: #58a6ff; 
    text-decoration: underline; 
    cursor: pointer; 
    transition: color 0.12s ease; 
}

.page-content a:hover { 
    color: #79c0ff; 
}

.page-content .nomadnet-link { 
    color: #58a6ff; 
    background: #0969da20; 
    padding: 2px 6px; 
    border-radius: 3px; 
    border: 1px solid #0969da40; 
    text-decoration: none;
    font-weight: 600;
    display: inline-block;
    margin: 1px 2px;
}

.page-content .nomadnet-link:hover { 
    background: #0969da40; 
    border-color: #0969da80; 
    color: #79c0ff;
    text-decoration: none;
}

mark {
    background-color: #ffd700;
    color: #0d1117;
    padding: 2px 4px;
    border-radius: 2px;
    font-weight: 600;
}

/* A page that did not load: a card, not a red slab. */
.error {
    color: #e6edf3;
    background: rgba(248, 81, 73, 0.07);
    padding: 18px 20px 18px 18px;
    border: 1px solid rgba(248, 81, 73, 0.35);
    border-left: 4px solid #f85149;
    border-radius: 10px;
    line-height: 1.55;
    font-family: var(--ui-font);
    font-size: 13px;
    max-width: 720px;
    margin: 40px auto;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

.error::before {
    content: "Page not loaded";
    display: block;
    margin-bottom: 8px;
    color: #ff7b72;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.2px;
}

/* Waiting for a page. */
.page-loading {
    color: #58a6ff;
    text-align: center;
    padding: 40px 16px;
    font-size: 16px;
    font-family: var(--ui-font);
    overflow-wrap: anywhere;
}

/* Loading and error boxes are not Micron: the width measured for the page
   before (--layout-w) must not apply - on a phone the box ran off the
   screen after a link inside a page. */
.page-content:has(> .page-loading),
.page-content:has(> .error),
body.center-pages .page-content:has(> .page-loading),
body.center-pages .page-content:has(> .error) {
    width: auto !important;
    min-width: 0 !important;
    white-space: normal;
}

/* The phone layout puts white-space: pre !important on the page: a long
   node name in "Loading NomadNet page" ran off the screen. */
.page-loading,
.page-loading *,
.page-content > .error,
.page-content > .error * {
    white-space: normal !important;
}

@media (max-width: 767px), (pointer: coarse) and (max-height: 500px) {
    .error {
        margin: 16px 8px;
        padding: 14px;
    }
}

.welcome { 
    text-align: center; 
    padding: 60px 40px; 
    color: #7d8590; 
}

.welcome h2 { 
    color: #f0f6fc; 
    font-size: 28px; 
    font-weight: 700; 
    margin-bottom: 16px; 
}

.welcome p { 
    font-size: 16px; 
    line-height: 1.6; 
    max-width: 500px; 
    margin: 0 auto; 
}

/* ============================================
   TABS
   ============================================ */
.tab-bar {
    background: #21262d;
    border-bottom: 1px solid #30363d;
    display: flex;
    align-items: center;
    padding: 8px 16px;
    overflow-x: auto;
    min-height: 48px;
    max-height: 48px;
    flex-shrink: 0;
    gap: 8px;
}

.tabs-container {
    display: flex;
    flex: 1;
    overflow-x: auto;
    gap: 2px;
    margin-right: 8px;
}

/* Many tabs: no native scrollbar (thick in Firefox, it took height from the
   tabs). The strip scrolls with the wheel and by dragging (setupTabStripScroll).
   min-width 0: without it the strip grew past the bar and the bar scrolled. */
.tabs-container {
    min-width: 0;
    scrollbar-width: none;
}
.tab-bar {
    overflow-x: hidden !important;
    scrollbar-width: none;
}
.tab-bar::-webkit-scrollbar,
.tabs-container::-webkit-scrollbar {
    display: none;
}
.tabs-container.dragging,
.tabs-container.dragging .tab {
    cursor: grabbing;
}

.tab {
    background: #161b22;
    border: 1px solid #30363d;
    border-radius: 6px 6px 0 0;
    padding: 8px 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    min-width: 120px;
    max-width: 200px;
    user-select: none;
    transition: all 0.12s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

.tab:hover {
    background: #21262d;
    border-color: #58a6ff;
}

/* Selected: only the outline lights up, the inside stays dark so icons and
   emoji in the title remain readable. */
.tab.active {
    background: #161b22;
    color: #e6edf3;
    border-color: #58a6ff;
    box-shadow: inset 0 0 0 1px #58a6ff, 0 0 6px #58a6ff66;
    font-weight: 600;
}

/* A tab just opened in background: a short glow says where it went. */
.tab.tab-bg-new {
    animation: tab-bg-new 1.5s ease-out;
}

@keyframes tab-bg-new {
    0%, 40% { border-color: #58a6ff; box-shadow: 0 0 0 2px #58a6ff66; }
    100% { box-shadow: none; }
}

.tab-title {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 12px;
}

.tab-close {
    margin-left: 8px;
    font-weight: bold;
    font-size: 16px;
    opacity: 0.7;
    cursor: pointer;
    padding: 0 4px;
    border-radius: 2px;
    transition: all 0.12s ease;
}

.tab-close:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.1);
}

.tab.active .tab-close {
    color: #58a6ff;
}

.tab.loading .tab-title::after {
    content: '●';
    animation: pulse 1s infinite;
    margin-left: 4px;
}

@keyframes pulse {
    0%, 50% { opacity: 1; }
    25%, 75% { opacity: 0.3; }
}

/* The new-tab control is a tab, at the end of the row and pinned to the
   right edge when the tabs overflow. It takes
   .tab's shape and overrides only what makes a tab wide: it holds one
   character, not a page title. */
.tab-new {
    min-width: 0;
    max-width: none;
    width: 34px;
    padding: 8px 0;
    justify-content: center;
    color: #8b949e;
    font-size: 17px;
    font-weight: 600;
    line-height: 1;
    position: sticky;
    right: 0;
    z-index: 5;
}

.tab-new:hover {
    color: #58a6ff;
    background: #21262d;
}

/* It is never the active tab, so the active styling must not reach it when
   the tab after it is selected. */
.tab-new.active {
    background: #161b22;
}

/* Settings at the end of the bar: the "+" shape, an icon, the name on
   hover (title). On a phone too, as wide as the "+" (the .tab-new rules). */
.tab-gear {
    display: flex;
    align-items: center;
    justify-content: center;
}


.tab-content-wrapper {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}

.tab-content {
    display: none;
    flex-direction: column;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
}

.tab-content.active {
    display: flex;
    position: relative;
}

#tab-content-template {
    display: none;
}

/* ============================================
   SEARCH RESULTS
   ============================================ */


/* ============================================
   SHORTCUTS BAR
   ============================================ */
/* From the edge of the node list to the right of the window, however wide
   the list is dragged or if it is hidden: --content-left is the left edge
   of .content, kept current by trackContentLeft() in rbrowser.js. It was
   "left: 50" with no unit, which the browser dropped, leaving the bar
   wherever its tab happened to put it - short of the list. */
.shortcuts-bar {
    position: fixed;
    bottom: 0;
    left: var(--content-left, 0px) !important;
    right: 0;
    background: #21262d;
    border-top: 1px solid #4f545a;
    padding: 4px 8px;
    font-size: 12px;
    color: #a3afbe;
    z-index: 1000;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

.shortcut-item {
    white-space: nowrap;
}

.shortcut-item kbd {
    background: #30363d;
    border: 1px solid #5b6068;
    border-radius: 3px;
    padding: 1px 4px;
    font-size: 11px;
    font-family: monospace;
}

/* ============================================
   AUTO-RELOAD MODAL
   ============================================ */
.auto-reload-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10001;
    background: rgba(0,0,0,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
}

.auto-reload-dialog {
    background: #161b22;
    border: 2px solid #30363d;
    color: #e6edf3;
    padding: 24px;
    border-radius: 8px;
    max-width: 450px;
    min-width: 350px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}

.auto-reload-dialog h3 {
    margin: 0 0 20px 0;
    color: #58a6ff;
    font-size: 18px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.auto-reload-setting {
    margin-bottom: 16px;
    padding: 12px;
    background: #0d1117;
    border-radius: 6px;
    border: 1px solid #30363d;
}

.auto-reload-setting label,
.auto-reload-setting .settings-label,
.auto-reload-setting .auto-reload-heading {
    display: block;
    color: #e6edf3;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 8px;
}

/* Headings, not labels: the arrow a label had, not the text cursor. */
.auto-reload-setting .settings-label,
.auto-reload-setting .auto-reload-heading {
    cursor: default;
}

/* A row's text turned into the label of its field: it looks like the text. */
.auto-reload-setting label.settings-row-label {
    display: inline;
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
    margin: 0;
}

.auto-reload-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.toggle-switch {
    position: relative;
    width: 48px;
    height: 24px;
    background: #30363d;
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.3s;
}

.toggle-switch.active {
    background: #3fb950;
}

.toggle-slider {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background: white;
    border-radius: 50%;
    transition: transform 0.3s;
}

.toggle-switch.active .toggle-slider {
    transform: translateX(24px);
}

.interval-input {
    width: 100%;
    padding: 8px 12px;
    background: #0d1117;
    border: 1px solid #30363d;
    color: #e6edf3;
    border-radius: 4px;
    font-size: 14px;
    margin-top: 8px;
}

.interval-input:focus {
    outline: none;
    border-color: #58a6ff;
}

.interval-presets {
    display: flex;
    gap: 6px;
    margin-top: 8px;
    flex-wrap: wrap;
}

.preset-btn {
    padding: 4px 10px;
    background: #21262d;
    border: 1px solid #30363d;
    color: #e6edf3;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.2s;
}

.preset-btn:hover {
    background: #30363d;
    border-color: #58a6ff;
}

.auto-reload-info {
    padding: 10px;
    background: #1c2128;
    border-left: 3px solid #58a6ff;
    border-radius: 4px;
    font-size: 13px;
    color: #7d8590;
    margin-top: 12px;
}

.auto-reload-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 20px;
}

.auto-reload-actions button,
.auto-reload-actions a {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    line-height: normal;
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.2s;
}

.btn-cancel {
    background: #21262d;
    color: #e6edf3;
}

.btn-cancel:hover {
    background: #30363d;
}

.btn-save {
    background: #238636;
    color: white;
}

.btn-save:hover {
    background: #2ea043;
}

/* ============================================
   RESPONSIVE - DESKTOP SIZES
   ============================================ */

/* Large screens (1920px+) */
@media (min-width: 1920px) {
    .sidebar {
        width: 400px;
        min-width: 400px;
        max-width: 400px;
    }
    
    .content {
        width: calc(100vw - 400px);
        min-width: calc(100vw - 400px);
        max-width: calc(100vw - 400px);
    }
    
    .page-content {
        font-size: 16px;
        padding: 5px;
    }
}

/* Medium screens (1200px - 1440px) */
@media (min-width: 1200px) and (max-width: 1440px) {
    .sidebar {
        width: 280px;
        min-width: 280px;
        max-width: 280px;
    }
    
    .content {
        width: calc(100vw - 280px);
        min-width: calc(100vw - 280px);
        max-width: calc(100vw - 280px);
    }
    
    .nav-bar {
        padding: 8px 12px;
    }
    
    .address-bar {
        font-size: 12px;
    }
    
    .page-content {
        padding: 5px;
        font-size: 14px;
    }
}

/* Small laptops and tablets landscape (768px - 1199px) */
@media (min-width: 768px) and (max-width: 1199px) and (pointer: fine), (min-width: 768px) and (max-width: 1199px) and (min-height: 501px) {
    .sidebar {
        width: 260px;
        min-width: 260px;
        max-width: 260px;
    }
    
    .content {
        width: calc(100vw - 260px);
        min-width: calc(100vw - 260px);
        max-width: calc(100vw - 260px);
    }
    
    .nav-bar {
        flex-wrap: wrap;
        height: auto;
        min-height: 60px;
    }
    
    .address-bar {
        flex: 1 1 100%;
        min-width: 100%;
        margin-bottom: 4px;
    }
    
    .page-title {
        font-size: 14px;
    }
    
    .page-details {
        font-size: 11px;
    }
}

/* ============================================
   RESPONSIVE - MOBILE
   ============================================ */

/* Tablets portrait and large phones (481px - 767px) */
@media (min-width: 481px) and (max-width: 767px), (min-width: 481px) and (pointer: coarse) and (max-height: 500px) {
    body {
        overflow: hidden;
    }
    
    .main {
        display: block;
        flex-direction: initial;
    }
    
    .sidebar {
        position: fixed;
        left: -280px;
        top: 0;
        width: 280px;
        min-width: 280px;
        max-width: 280px;
        height: 100vh;
        z-index: 2000;
        transition: left 0.3s ease;
        box-shadow: 2px 0 10px rgba(0,0,0,0.5);
    }
    
    .sidebar.mobile-show {
        left: 0;
    }
    
    .content {
        position: fixed;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        width: 100vw;
        min-width: 100vw;
        max-width: 100vw;
        height: 100vh;
    }
    
    .nav-controls {
        display: none;
    }
    
    .shortcuts-bar {
        display: none;
    }
    
    .mobile-nodes-btn {
        display: block !important;
        background: #238636;
        border: 1px solid #2ea043;
        color: white;
        padding: 10px 12px;
        border-radius: 4px;
        font-size: 12px;
        font-weight: 600;
    }
}

/* Small phones (320px - 480px) */
@media (max-width: 480px) {
    .page-content {
        font-size: 13px;
        padding: 5px;
    }
    
    .tab {
        min-width: 70px;
        max-width: 100px;
        font-size: 11px;
    }
}

/* Mobile class-based detection for desktop browsers that support .mobile-device class */
.mobile-device body {
    overflow: hidden;
    margin: 0;
    padding: 0;
}

.mobile-device .main {
    display: block !important;
    flex-direction: initial !important;
    height: 100vh !important;
    width: 100vw !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
}

.mobile-device .sidebar {
    position: fixed !important;
    left: -320px !important;
    top: 0 !important;
    width: 280px !important;
    min-width: 280px !important;
    max-width: 280px !important;
    height: 100vh !important;
    z-index: 2000 !important;
    transition: left 0.3s ease;
    box-shadow: 2px 0 10px rgba(0,0,0,0.5);
}

.mobile-device .sidebar.mobile-show {
    left: 0 !important;
}

.mobile-device .content {
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    min-width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    z-index: 1 !important;
}

.mobile-device .nav-controls {
    display: none !important;
}

.mobile-device .shortcuts-bar {
    display: none !important;
}

.mobile-device .mobile-nodes-btn {
    display: block !important;
}

/* Touch device optimization */
@media (hover: none) and (pointer: coarse) {
    * {
        box-sizing: border-box;
    }
    
    body {
        overflow: hidden;
        margin: 0;
        padding: 0;
    }
    
    .main {
        display: block !important;
        flex-direction: initial !important;
        height: 100vh !important;
        width: 100vw !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
    }
    
    .sidebar {
        position: fixed !important;
        left: -320px !important;
        top: 0 !important;
        width: 280px !important;
        min-width: 280px !important;
        max-width: 280px !important;
        height: 100vh !important;
        z-index: 2000 !important;
        transition: left 0.3s ease;
        box-shadow: 2px 0 10px rgba(0,0,0,0.5);
        margin: 0 !important;
        padding: 0 !important;
    }
    
    .sidebar.mobile-show {
        left: 0 !important;
    }
    
    .content {
        position: fixed !important;
        left: 0 !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100vw !important;
        min-width: 100vw !important;
        max-width: 100vw !important;
        height: 100vh !important;
        z-index: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        padding: 0 !important;
        margin: 0 !important;
        transform: none !important;
    }
    
    .shortcuts-bar {
        display: none !important;
    }
    
    .mobile-nodes-btn {
        background: #238636;
        border: 1px solid #2ea043;
        color: white;
        padding: 10px 12px;
        cursor: pointer;
        border-radius: 4px;
        font-size: 12px;
        flex-shrink: 0;
        transition: all 0.12s ease;
        white-space: nowrap;
        font-weight: 600;
    }
    
    .mobile-nodes-btn:active {
        background: #2ea043;
    }
    
    .nav-controls {
        display: none !important;
    }
    
    .nav-bar {
        padding: 4px !important;
        height: auto !important;
        min-height: 48px !important;
        max-height: none !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 4px !important;
        flex-shrink: 0;
        width: 100% !important;
        align-items: center;
    }
    
    .address-bar {
        flex: 1 !important;
        width: auto !important;
        min-width: 0 !important;
        min-height: 44px;
        font-size: 16px;
        margin: 0 !important;
    }
    
    .go-btn, .star-btn, .fingerprint-btn,
    .ping-btn, .info-btn-nav {
        min-height: 44px !important;
        max-height: 44px !important;
        min-width: 44px !important;
        max-width: 44px !important;
        padding: 10px !important;
        flex-shrink: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .go-btn img, .star-btn img,
    .ping-btn img, .fingerprint-btn img, .info-btn-nav img {
        width: 20px !important;
        height: 20px !important;
        object-fit: contain !important;
    }
    
    .tab-bar {
        padding: 4px;
        flex-shrink: 0;
        width: 100% !important;
        min-height: 52px !important;
        max-height: 52px !important;
        display: flex;
        gap: 4px;
    }
    
    .tabs-container {
        flex: 1;
        overflow-x: auto;
    }
    
    .tab {
        min-width: 90px;
        max-width: 120px;
        padding: 10px 8px;
        font-size: 12px;
    }
    
    .tab-close {
        padding: 4px 8px;
        font-size: 16px;
    }
    
    /* The + tab stays on a phone: it is one character wide, and hiding it
       would leave no way to open a tab at all on a touch screen. */
    .tab-new {
        width: 30px;
        padding: 6px 0;
    }
    
    .tab-content-wrapper {
        flex: 1;
        overflow: hidden;
        width: 100% !important;
        position: relative !important;
    }
    
    .tab-content {
        width: 100% !important;
        height: 100% !important;
    }
    
    .header {
        padding: 6px !important;
        height: auto !important;
        min-height: 40px !important;
        max-height: none !important;
        flex-shrink: 0;
        width: 100% !important;
    }
    
    .page-info {
        flex-direction: column;
        gap: 2px;
    }
    
    .page-title {
        font-size: 13px;
    }
    
    .page-details {
        font-size: 11px;
    }
    
    .view-toggle {
        position: relative;
        top: auto;
        right: auto;
        transform: none;
        margin-top: 4px;
    }
    
    .browser-area {
        flex: 1;
        overflow-y: auto;
        width: 100% !important;
    }
    
    .page-content {
        padding: 5px;
        font-size: 14px;
        word-wrap: break-word;
        overflow-wrap: break-word;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .node-item {
        padding: 12px;
        margin-bottom: 4px;
    }
    
    .browse-btn, .info-btn {
        min-height: 44px;
        min-width: 44px;
        padding: 8px;
    }
    
    html {
        position: fixed !important;
        overflow: hidden !important;
        width: 100% !important;
        height: 100% !important;
    }
    
    body {
        position: fixed !important;
        overflow: hidden !important;
        width: 100% !important;
        height: 100% !important;
        margin: 0;
        padding: 0;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: none;
    }
    
    .main {
        overscroll-behavior: none !important;
        -webkit-overflow-scrolling: touch;
    }
    
    .browser-area {
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }
    
    .sidebar {
        overscroll-behavior: contain !important;
    }
    
    .node-list-container {
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }
}

@media (max-width: 1499px) {
    .shortcuts-bar {
        display: none !important;
    }
}

/* Ubuntu Touch / Morph Browser specific fixes */
@media (max-width: 767px), (pointer: coarse) and (max-height: 500px) {
    /* Force proper viewport handling */
    html {
        position: fixed !important;
        overflow: hidden !important;
        width: 100% !important;
        height: 100% !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    body {
        position: fixed !important;
        overflow: hidden !important;
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Ensure main container fills screen */
    .main {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        overflow: hidden !important;
    }
    
    /* Fix content area */
    .content {
        position: fixed !important;
        width: 100vw !important;
        height: 100vh !important;
        left: 0 !important;
        top: 0 !important;
    }
    
    /* Sidebar mobile positioning */
    .sidebar {
        position: fixed !important;
        left: -320px !important;
        top: 0 !important;
        height: 100vh !important;
        width: 280px !important;
        z-index: 2000 !important;
        transition: left 0.3s ease;
    }
    
    .sidebar.mobile-show {
        left: 0 !important;
    }
}

/* Additional fixes for touch-based browsers */
@supports (-webkit-touch-callout: none) {
    body {
        min-height: 100vh;
        min-height: -webkit-fill-available;
    }
    
    html {
        height: -webkit-fill-available;
    }
}

@media (max-width: 767px), (pointer: coarse) and (max-height: 500px) {
    body {
        overflow: hidden;
        margin: 0;
        padding: 0;
    }
    
    .main {
        display: block !important;
        flex-direction: initial !important;
        height: 100vh !important;
        width: 100vw !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
    }
    
    .sidebar {
        position: fixed !important;
        left: -320px !important;
        top: 0 !important;
        width: 280px !important;
        min-width: 280px !important;
        max-width: 280px !important;
        height: 100vh !important;
        z-index: 2000 !important;
        transition: left 0.3s ease;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    .sidebar.mobile-show {
        left: 0 !important;
    }
    
    .content {
        position: fixed !important;
        left: 0 !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100vw !important;
        min-width: 100vw !important;
        max-width: 100vw !important;
        height: 100vh !important;
        z-index: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        padding: 0 !important;
        margin: 0 !important;
        transform: none !important;
    }
    
    .shortcuts-bar {
        display: none !important;
    }
    
    .mobile-nodes-btn {
        background: #238636;
        border: 1px solid #2ea043;
        color: white;
        padding: 10px 12px;
        cursor: pointer;
        border-radius: 4px;
        font-size: 12px;
        flex-shrink: 0;
        transition: all 0.12s ease;
        white-space: nowrap;
        font-weight: 600;
    }
    
    .mobile-nodes-btn:active {
        background: #2ea043;
    }
    
    .nav-controls {
        display: none !important;
    }
    
    .nav-bar {
        padding: 4px !important;
        height: auto !important;
        min-height: 48px !important;
        max-height: none !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 4px !important;
        flex-shrink: 0;
        width: 100% !important;
        align-items: center;
    }
    
    .address-bar {
        flex: 1 !important;
        width: auto !important;
        min-width: 0 !important;
        min-height: 44px;
        font-size: 16px;
        margin: 0 !important;
    }
    
    .go-btn, .star-btn, .fingerprint-btn,
    .ping-btn, .info-btn-nav {
        min-height: 44px !important;
        max-height: 44px !important;
        min-width: 44px !important;
        max-width: 44px !important;
        padding: 10px !important;
        flex-shrink: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .go-btn img, .star-btn img,
    .ping-btn img, .fingerprint-btn img, .info-btn-nav img {
        width: 20px !important;
        height: 20px !important;
        object-fit: contain !important;
    }
    
    .tab-bar {
        padding: 4px;
        flex-shrink: 0;
        width: 100% !important;
        min-height: 52px !important;
        max-height: 52px !important;
        display: flex;
        gap: 4px;
    }
    
    .tabs-container {
        flex: 1;
        overflow-x: auto;
    }
    
    .tab {
        min-width: 90px;
        max-width: 120px;
        padding: 10px 8px;
        font-size: 12px;
    }
    
    .tab-close {
        padding: 4px 8px;
        font-size: 16px;
    }
    
    /* The + tab stays on a phone: it is one character wide, and hiding it
       would leave no way to open a tab at all on a touch screen. */
    .tab-new {
        width: 30px;
        padding: 6px 0;
    }
    
    .tab-content-wrapper {
        flex: 1;
        overflow: hidden;
        width: 100% !important;
        position: relative !important;
    }
    
    .tab-content {
        width: 100% !important;
        height: 100% !important;
    }
    
    .header {
        padding: 6px !important;
        height: auto !important;
        min-height: 40px !important;
        max-height: none !important;
        flex-shrink: 0;
        width: 100% !important;
    }
    
    .page-info {
        flex-direction: column;
        gap: 2px;
    }
    
    .page-title {
        font-size: 13px;
    }
    
    .page-details {
        font-size: 11px;
    }
    
    .view-toggle {
        position: relative;
        top: auto;
        right: auto;
        transform: none;
        margin-top: 4px;
    }
    
    .browser-area {
        flex: 1;
        overflow-y: auto;
        width: 100% !important;
    }
    
    .page-content {
        padding: 5px;
        font-size: 14px;
        word-wrap: break-word;
        overflow-wrap: break-word;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .node-item {
        padding: 12px;
        margin-bottom: 4px;
    }
    
    .browse-btn, .info-btn {
        min-height: 44px;
        min-width: 44px;
        padding: 8px;
    }
    
    html {
        position: fixed !important;
        overflow: hidden !important;
        width: 100% !important;
        height: 100% !important;
    }
    
    body {
        position: fixed !important;
        overflow: hidden !important;
        width: 100% !important;
        height: 100% !important;
        margin: 0;
        padding: 0;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: none;
    }
    
    .main {
        overscroll-behavior: none !important;
        -webkit-overflow-scrolling: touch;
    }
    
    .browser-area {
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }
    
    .sidebar {
        overscroll-behavior: contain !important;
    }
    
    .node-list-container {
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }
    
    /* Force proper viewport handling for mobile */
    html {
        position: fixed !important;
        overflow: hidden !important;
        width: 100% !important;
        height: 100% !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    body {
        position: fixed !important;
        overflow: hidden !important;
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Ensure main container fills screen */
    .main {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        overflow: hidden !important;
    }
    
    /* Fix content area */
    .content {
        position: fixed !important;
        width: 100vw !important;
        height: 100vh !important;
        left: 0 !important;
        top: 0 !important;
    }
    
    /* Sidebar mobile positioning */
    .sidebar {
        position: fixed !important;
        left: -320px !important;
        top: 0 !important;
        height: 100vh !important;
        width: 280px !important;
        z-index: 2000 !important;
        transition: left 0.3s ease;
    }
    
    .sidebar.mobile-show {
        left: 0 !important;
    }
}


/* ───────────────────────────────────────────────────────────────────────
   NomadNet 1.4.x constructs: tables, inline images, page partials, folds
   ─────────────────────────────────────────────────────────────────────── */

.micron-table-wrap {
    overflow-x: auto;
    margin: 0.4em 0;
}

.micron-table {
    border-collapse: collapse;
    font-family: inherit;
    font-size: inherit;
}

.micron-table th,
.micron-table td {
    border: 1px solid #30363d;
    padding: 2px 8px;
    vertical-align: top;
}

.micron-table th {
    background: rgba(255, 255, 255, 0.04);
    font-weight: 600;
}

.micron-table tbody tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.02);
}

.micron-image {
    margin: 0.3em 0;
}

.micron-img {
    max-width: 100%;
    height: auto;
    border-radius: 3px;
}

.micron-image-placeholder {
    display: inline-block;
    padding: 4px 10px;
    border: 1px dashed #30363d;
    border-radius: 4px;
    color: #8b949e;
    font-size: 0.9em;
}

.micron-image-placeholder:hover {
    border-color: #58a6ff;
    color: #c9d1d9;
}

.micron-partial {
    display: block;
}

.micron-partial-pending {
    color: #8b949e;
}

.micron-partial-error {
    color: #ff7b72;
    font-size: 0.9em;
}

.micron-fold-marker {
    user-select: none;
}

.micron-fold-body {
    display: block;
}

.micron-anchor {
    display: inline;
    width: 0;
}


/* ───────────────────────────────────────────────────────────────────────
   Collapsible sidebar, for reading a page at full width
   ─────────────────────────────────────────────────────────────────────── */


/* ───────────────────────────────────────────────────────────────────────
   Node list: a thin scrollbar
   ─────────────────────────────────────────────────────────────────────── */

/* Dark, brighter under the pointer: a long list wants a handle to drag,
   but the default bar took space and attention away from the node cards.
   6px was too thin to catch. Firefox has only two sizes, thin (8px, still
   too thin, and right against the sidebar resizer it was hard to grab
   either) and normal, so it gets the normal one; Chrome and the others
   take the 10px below. */
.node-list-container {
    scrollbar-width: auto;                      /* Firefox */
    scrollbar-color: #3d444d transparent;
}

/* Chrome reads scrollbar-width too, and then ignores the rules below. */
@supports selector(::-webkit-scrollbar) {
    .node-list-container {
        scrollbar-width: unset;
        scrollbar-color: unset;
    }
}

.node-list-container::-webkit-scrollbar {
    width: 10px;
}

.node-list-container::-webkit-scrollbar-track {
    background: transparent;
}

.node-list-container::-webkit-scrollbar-thumb {
    background: #3d444d;
    border-radius: 5px;
}

.node-list-container::-webkit-scrollbar-thumb:hover {
    background: #58a6ff;
}

/* ───────────────────────────────────────────────────────────────────────
   Page geometry
   ─────────────────────────────────────────────────────────────────────── */

/* Normal reading size, and the page uses the whole width of the window.
   An earlier attempt filled the empty space by SCALING THE FONT so that a
   fixed 100 columns always spanned the window. That is faithful to Micron's
   character-cell model, but on a wide monitor it produced 30px text: the
   page was correct and unreadable, like a zoomed screenshot. Width and text
   size are two different things and are no longer tied together. */
.page-content {
    max-width: 100%;
}

.page-content.raw {
    max-width: 100%;
}

/* There used to be an "ASCII mode" here, a second rendering path with its
   own font size and a 100 column cap. It existed to compensate for defects
   in the normal path - collapsed spaces, a line height that left gaps
   between character cells, invented padding around coloured runs. With
   those fixed the normal path renders artwork correctly, so the mode had
   nothing left to improve and its column cap was a difference from NomadNet
   rather than a match. Removed, along with the heuristic that tried to
   guess which pages needed it. */


/* ───────────────────────────────────────────────────────────────────────
   Resizable sidebar
   ─────────────────────────────────────────────────────────────────────── */

/* The width lives in one custom property so the sidebar and the content
   area can never disagree about it. Before this, the stylesheet said 320px,
   an inline style said 210px, and the content area was sized from the 320:
   a 110px strip of dead space between the two that nothing drew in. */
:root {
    --sidebar-w: 210px;
}

@media (min-width: 768px) and (pointer: fine), (min-width: 768px) and (min-height: 501px) {
    .sidebar {
        width: var(--sidebar-w) !important;
        min-width: var(--sidebar-w) !important;
        max-width: var(--sidebar-w) !important;
    }

    .content {
        width: calc(100vw - var(--sidebar-w)) !important;
        min-width: calc(100vw - var(--sidebar-w)) !important;
        max-width: calc(100vw - var(--sidebar-w)) !important;
    }

    body.sidebar-collapsed .sidebar {
        display: none !important;
    }

    body.sidebar-collapsed .content {
        width: 100vw !important;
        min-width: 100vw !important;
        max-width: 100vw !important;
    }
}

/* The grab area is wider than the line you see, because a 1px target is a
   target you miss. Under the pointer only a 1px line in its middle lights
   up: enough to say "this drags", the cursor says the rest. The whole 7px
   in blue flashed like a thick border. */
.sidebar-resizer {
    position: absolute;
    top: 0;
    bottom: 0;
    right: -3px;
    width: 7px;
    cursor: col-resize;
    z-index: 200;
    background: transparent;
}

.sidebar-resizer:hover,
body.sidebar-resizing .sidebar-resizer {
    background: linear-gradient(to right, transparent 3px, #58a6ff 3px,
                                #58a6ff 4px, transparent 4px);
}

/* The grip: three faint dots halfway down, always there, to say the edge
   drags even before the pointer finds it. Brighter under the pointer. */
.sidebar-resizer::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 2px;
    width: 3px;
    height: 15px;
    margin-top: -7px;
    background: radial-gradient(circle, #6e7681 1px, transparent 1.2px) 0 0 / 3px 5px repeat-y;
    opacity: 0.6;
    pointer-events: none;
}

.sidebar-resizer:hover::after,
body.sidebar-resizing .sidebar-resizer::after {
    background-image: radial-gradient(circle, #58a6ff 1px, transparent 1.2px);
    opacity: 1;
}

/* Firefox only: its scrollbar sits right against the edge, and the half
   of the grab area over it fought the scrollbar for the pointer. There the
   grab area goes just outside the sidebar, the line on the edge itself. */
@supports (-moz-appearance: none) {
    .sidebar-resizer {
        right: -7px;
    }
    .sidebar-resizer::after {
        left: 1px;           /* just right of the edge, next to the line */
    }
    .sidebar-resizer:hover,
    body.sidebar-resizing .sidebar-resizer {
        background: linear-gradient(to right, #58a6ff 1px, transparent 1px);
    }
}

/* While dragging, stop the pointer from selecting text across the page and
   from turning into an I-beam over whatever it passes. */
body.sidebar-resizing {
    cursor: col-resize !important;
    user-select: none !important;
    -webkit-user-select: none !important;
}

body.sidebar-resizing * {
    cursor: col-resize !important;
}

@media (max-width: 767px), (pointer: coarse) and (max-height: 500px) {
    .sidebar-resizer {
        display: none !important;
    }
}

/* The toggle now sits directly in the nav bar rather than inside
   .nav-controls, which several rules hide wholesale on touch devices and
   narrow windows - taking the sidebar control down with the history
   buttons, which is why it could not be found. */
.sidebar-toggle-btn {
    font-size: 14px;
    font-weight: bold;
    line-height: 1;
    flex-shrink: 0;
}

@media (max-width: 767px), (pointer: coarse) and (max-height: 500px) {
    .sidebar-toggle-btn {
        display: none !important;
    }
}


/* ───────────────────────────────────────────────────────────────────────
   Reader preferences: page zoom and centring
   ─────────────────────────────────────────────────────────────────────── */

:root {
    --page-zoom: 1;
}

/* The base sizes stay what they were; the zoom multiplies them. Applied to
   the page only - the sidebar, tabs and navigation bar keep their size, so
   enlarging the text does not shrink the browser around it the way the
   browser's own Ctrl+ would. */
.page-content {
    font-size: var(--micron-fs, 15px);
}

.page-content.raw {
    font-size: var(--micron-fs, 15px);
}


/* Centring. A page only looks centred if its BOX is as wide as its content:
   .page-content is a block and fills the width, so margin:auto alone would
   do nothing. width:max-content shrinks the box to the longest line, and
   max-width keeps a long line from pushing past the window. */
body.center-pages .page-content {
    width: max-content;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}


.zoom-control {
    display: flex;
    align-items: center;
    gap: 2px;
    background: #0d1117;
    border: 1px solid #30363d;
    border-radius: 4px;
    padding: 1px;
    flex-shrink: 0;
}

.zoom-btn {
    background: #30363d;
    border: 1px solid #3d444d;
    color: #e6edf3;
    width: 22px;
    height: 20px;
    line-height: 1;
    border-radius: 3px;
    cursor: pointer;
    font-size: 13px;
    font-weight: bold;
    padding: 0;
    transition: all 0.12s ease;
}

.zoom-btn:hover:not(:disabled) {
    background: #484f58;
    border-color: #58a6ff;
}

.zoom-btn:disabled {
    opacity: 0.35;
    cursor: default;
}

.zoom-level {
    background: none;
    border: none;
    color: #8b949e;
    font-size: 10px;
    font-weight: 600;
    min-width: 36px;
    text-align: center;
    cursor: pointer;
    padding: 0 2px;
}

.zoom-level:hover {
    color: #58a6ff;
}

.center-toggle {
    background: #30363d;
    border: 1px solid #3d444d;
    color: #e6edf3;
    padding: 3px 8px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 10px;
    font-weight: 600;
    flex-shrink: 0;
    transition: all 0.12s ease;
}

.center-toggle:hover {
    background: #484f58;
    border-color: #58a6ff;
}

.center-toggle.active {
    background: #1f6feb;
    border-color: #58a6ff;
    color: #ffffff;
}

/* x at the right end of the page bar: closes the page, as the tab's x. */
.page-close-btn {
    background: transparent;
    border: 1px solid #3d444d;
    color: #7d8590;
    width: 22px;
    height: 20px;
    padding: 0;
    border-radius: 4px;
    cursor: pointer;
    font-size: 15px;
    line-height: 1;
    flex-shrink: 0;
}

.page-close-btn:hover {
    color: #ff7b72;
    border-color: #f85149;
    background: rgba(248, 81, 73, 0.1);
}

/* On a narrow screen the header has no room for these; the page is the full
   width of the phone anyway, so neither control has anything to do. */


/* ───────────────────────────────────────────────────────────────────────
   Terminal cell geometry
   ─────────────────────────────────────────────────────────────────────── */

/* A NomadNet page is drawn in a terminal, where a character cell is exactly
   one line tall and a background colour fills the whole of it. The page was
   rendering at line-height 1.2, which leaves a fifth of a line unpainted
   between rows: block artwork came out as rows of coloured dashes with dark
   stripes between them instead of solid shapes.
   This is what a terminal does, and it applies to every page. */
/* Spaces are content. Micron artwork is drawn with background-coloured
   SPACES, and runs of them carry the shape; under the default white-space
   handling a run of spaces collapses to one and every row of the artwork
   shifts left by a different amount. */
.page-content {
    white-space: pre-wrap;
    overflow-wrap: normal;
    word-break: normal;
    tab-size: 4;
}

/* The parser emits one div per line, so the newline between them is already
   accounted for; pre-wrap must not add a second one. */
.page-content div,
.page-content p {
    white-space: inherit;
}

/* Not every child of .page-content is a Micron page. The welcome screen and
   the error boxes are hand-written HTML, indented in the source; under
   pre-wrap that indentation and every newline between tags would show up as
   stray blank lines and ragged margins. They go back to normal wrapping. */
.page-content .welcome,
.page-content .welcome *,
.page-content .error,
.page-content .error *,
.page-content .cache-search-page,
.page-content .cache-search-page * {
    white-space: normal;
}

/* The Local search engine in a tab is the browser's own page, not Micron:
   the interface font, not the page font. */
.page-content .cache-search-page,
.page-content .cache-search-page * {
    font-family: var(--ui-font) !important;
}

.page-content .cache-search-page .cache-hit-path,
.page-content .cache-search-page .cache-search-input {
    font-family: var(--mono-font) !important;
}


/* ───────────────────────────────────────────────────────────────────────
   Page scrolling: no bar, a hint instead
   ─────────────────────────────────────────────────────────────────────── */

.browser-area {
    scrollbar-width: none;          /* Firefox */
    -ms-overflow-style: none;       /* old Edge */
}

.browser-area::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

/* The chevron is drawn with borders rather than written as a character:
   a glyph is only as reliable as the font that has to contain it, and this
   project has already lost two buttons to fonts without the arrow. */
/* Bottom right, clear of the text: in the middle it sat on top of what
   you were reading. */
.scroll-hint {
    position: absolute;
    bottom: 34px;
    right: 22px;
    transform: translateY(6px);
    width: 34px;
    height: 20px;
    border-radius: 10px;
    background: rgba(33, 38, 45, 0.9);
    border: 1px solid #30363d;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
    z-index: 60;
}

.scroll-hint::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 7px;
    height: 7px;
    margin: -5px 0 0 -4px;
    border-right: 2px solid #8b949e;
    border-bottom: 2px solid #8b949e;
    transform: rotate(45deg);
}

.scroll-hint.visible {
    opacity: 0.85;
    pointer-events: auto;
    transform: translateY(0);
}

.scroll-hint:hover {
    opacity: 1;
    border-color: #58a6ff;
}

.scroll-hint:hover::after {
    border-color: #58a6ff;
}

/* ───────────────────────────────────────────────────────────────────────
   Mobile
   ─────────────────────────────────────────────────────────────────────── */

/* The zoom control was hidden on narrow screens on the assumption that the
   page fills a phone anyway. It is the opposite: a phone is narrower than
   any Micron page is written for, so this is exactly where scaling matters
   most - it was the one control that should never have been hidden here. */
@media (max-width: 767px), (pointer: coarse) and (max-height: 500px) {
    .zoom-control {
        display: flex !important;
    }

    .zoom-btn {
        width: 28px;
        height: 26px;
        font-size: 15px;
    }

    .zoom-level {
        min-width: 42px;
        font-size: 11px;
    }

    .center-toggle {
        display: none !important;
    }

    /* On a phone the hint sits above the on-screen keyboard area and clear
       of the shortcut bar, which is hidden at this width. */
    .scroll-hint {
        bottom: 12px;
        right: 12px;
        width: 42px;
        height: 26px;
    }

    /* Horizontal overflow is what deforms a page on a phone: a line that
       does not fit is either cut off or forces the whole layout sideways.
       Fit zoom keeps lines inside the screen; this makes sure nothing else
       pushes past it. */
}


/* ───────────────────────────────────────────────────────────────────────
   Mobile, second pass
   ─────────────────────────────────────────────────────────────────────── */

/* Belt and braces with the meta tag: declaring the scheme here too stops a
   mobile browser from "helpfully" inverting a page that is already dark. */
:root {
    color-scheme: dark;
}

@media (max-width: 767px), (pointer: coarse) and (max-height: 500px) {
    /* Back and forward were collateral damage. Three separate rules hid
       .nav-controls wholesale on narrow screens to make room in the bar,
       taking the history buttons with them - on a phone, where swiping back
       is not available either, that left no way to go back at all.
       The bar wraps onto a second row instead. */
    /* Both selectors, and .mobile-device deliberately: the rule that hides
       the group is written as ".mobile-device .nav-controls", which has
       higher specificity than ".nav-controls" - and between two !important
       declarations specificity decides, not source order. A plain
       ".nav-controls" override would have lost silently. */
    .nav-controls,
    .mobile-device .nav-controls,
    html.mobile-device .nav-controls {
        display: flex !important;
        gap: 3px;
    }

    .nav-bar {
        flex-wrap: wrap !important;
        height: auto !important;
        min-height: 48px !important;
        max-height: none !important;
        row-gap: 4px;
    }

    .nav-bar .address-bar {
        order: 10;
        flex: 1 1 100%;
        min-width: 0;
    }

    .nav-btn {
        min-width: 32px;
        padding: 6px 6px;
        font-size: 13px;
    }

    /* The header row is tight on a phone; the fingerprint icon alone says
       what the button is, and its tooltip still carries the explanation. */
    .auto-identify-label {
        display: none;
    }

    .auto-identify-btn {
        padding: 6px 8px;
    }

    /* A page must not reflow to fit a phone: wrapping a line that was laid
       out in character cells moves everything after it, which is what
       "deformed" means here. The page keeps its shape and the Fit zoom
       scales it down to the screen; if a page is so wide that even the
       smallest zoom cannot fit it, it pans sideways rather than breaking -
       the same bargain a terminal emulator on a phone makes. */
    .page-content {
        white-space: pre !important;
        max-width: none !important;
    }

    /* ...except running prose. A paragraph written as one long line wraps
       at the screen edge, as NomadNet wraps it at the terminal edge; the
       Fit zoom ignores these lines and sizes the page to its layout lines
       (see markProseLines in rbrowser.js). Without this, one long paragraph
       made the whole page wider than the phone. */
    /* The descendants too: the spans inside a line carry white-space: pre
       of their own, which beat the line's pre-wrap and kept a long chat
       message on one line, 2000px wide. */
    .page-content .mu-prose,
    .page-content .mu-prose *,
    .page-content .mu-wrap,
    .page-content .mu-wrap * {
        white-space: pre-wrap !important;
        overflow-wrap: anywhere;
    }

    /* Fit: only spaces run past the edge of these lines (fitLayoutBlocks). */
    .page-content .mu-clip {
        overflow-x: clip;
    }

    .browser-area {
        overflow-x: auto;
    }

    .browser-area::-webkit-scrollbar {
        width: 0;
        height: 0;
        display: none;
    }
}


/* ───────────────────────────────────────────────────────────────────────
   The page box must contain the page
   ─────────────────────────────────────────────────────────────────────── */

/* .page-content is a block, so its width is the width of the scrolling
   area - not of its contents. A page wider than the window therefore drew
   its text straight through the right-hand border and out the other side,
   with the border cutting a line across the middle of the lines it crossed.
   Sizing the box to its widest line puts the background and the border back
   around everything, and min-width keeps a short page from shrinking into a
   narrow strip. */
.page-content {
    width: max-content;
    min-width: 100%;
}

/* Centring already sets width:max-content; keep its margins. */
body.center-pages .page-content {
    width: max-content;
    min-width: 0;
}

/* Centred on a desktop: as wide as the widest LAYOUT line (--layout-w,
   from measureLayoutWidth: no prose, no dividers, no trailing spaces), not
   max-content. max-content counted a paragraph as one unwrapped line, so
   any page with a long paragraph filled the window and never moved. Prose
   wraps inside the box, as NomadNet wraps it at the terminal edge; on a
   page with prose the box is at least 100 columns, so a short heading does
   not squeeze the text into a strip. +12px: padding and border. */
@media (min-width: 768px) and (pointer: fine), (min-width: 768px) and (min-height: 501px) {
    body.center-pages .page-content {
        width: min(100%, calc(var(--layout-w, 100%) + 12px));
        /* Layout lines never wrap here, only prose does - as on a phone.
           Art lines are padded with trailing spaces, some in white-space:pre
           spans that cannot hang past the edge: in a box sized to the drawn
           part they wrapped onto a row of their own, a blank line under
           every row of the picture. The padding now runs past the edge and
           is clipped (clip, not hidden: no scroll box, and it does not count
           as overflow for the Fit zoom). */
        white-space: pre;
        overflow-x: clip;
    }
    body.center-pages .page-content .mu-prose,
    body.center-pages .page-content .mu-prose *,
    body.center-pages .page-content .mu-wrap,
    body.center-pages .page-content .mu-wrap * {
        white-space: pre-wrap;
        overflow-wrap: anywhere;
    }
    body.center-pages .page-content[data-has-prose] {
        width: min(100%, max(calc(var(--layout-w, 100%) + 12px), 100ch));
    }
}

@media (max-width: 767px), (pointer: coarse) and (max-height: 500px) {
    /* As wide as the widest layout line (--layout-w, measured by
       measureLayoutWidth in rbrowser.js) or the screen, whichever is wider.
       Not max-content: that grew the box to the longest paragraph, so prose
       could never wrap and the page ran off the side of the phone. */
    .page-content {
        width: max(100%, var(--layout-w, 100%)) !important;
        min-width: 100% !important;
    }
}


/* ───────────────────────────────────────────────────────────────────────
   Character cell proportions
   ─────────────────────────────────────────────────────────────────────── */

/* Both values are set by the script as WHOLE PIXELS, and that is the point.
   A multiplier like 1.15 gives a row 17.25px tall: the browser rasterises
   each row's painted box independently, consecutive rows round in opposite
   directions, and the page background shows through the boundary pixel as a
   dark line. Those are the scanlines through block artwork. An integer row
   height cannot straddle a pixel boundary, so there is nothing to round.

   The row height equals the font size exactly. A browser glyph is only as
   tall as the font size, so any extra line height is empty space the glyph
   cannot cover - a transparent stripe through every row of block artwork.
   See MICRON_CELL_RATIO in rbrowser.js for why that cannot be traded away. */
.page-content,
.page-content.raw {
    line-height: var(--micron-lh, 15px);
}

/* ───────────────────────────────────────────────────────────────────────
   Touch behaviour
   ─────────────────────────────────────────────────────────────────────── */

/* Selecting text on a phone locked the page up. The swipe-to-change-tab
   listeners that ran on every touch are gone, which was the likely cause;
   these make the remaining behaviour explicit rather than inherited.
   touch-action tells the browser it owns panning and pinching here, so it
   never waits to find out whether script wants the gesture instead. */
.page-content {
    -webkit-user-select: text;
    user-select: text;
    -webkit-touch-callout: default;
}

.browser-area {
    touch-action: pan-x pan-y pinch-zoom;
}


/* The page font is chosen by the script from the measured table in
   rbrowser.js, and forced here because the global "*" rule at the top of
   this file sets font-family with !important - which a plain rule on
   .page-content loses to, silently. That is why the page was rendering in
   Courier New even though it asked for Consolas. */
.page-content,
.page-content * {
    font-family: var(--micron-font, 'Courier New', monospace) !important;
}


/* ───────────────────────────────────────────────────────────────────────
   Bundled page font
   ─────────────────────────────────────────────────────────────────────── */

/* Cascadia Mono, SIL Open Font License 1.1 - see templates/fonts/OFL.txt.
   Shipped with rBrowser so a page looks the same on every machine instead
   of depending on what the reader happens to have installed. It is also
   the font whose block glyph is tallest of the ones measured, which is
   what lets the character cell match NomadNet's shape exactly. */
@font-face {
    font-family: 'Cascadia Mono';
    src: url('/templates/fonts/CascadiaMono-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: block;
}

@font-face {
    font-family: 'Cascadia Mono';
    src: url('/templates/fonts/CascadiaMono-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: block;
}

@font-face {
    font-family: 'Cascadia Mono';
    src: url('/templates/fonts/CascadiaMono-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
    font-display: block;
}

@font-face {
    font-family: 'Cascadia Mono';
    src: url('/templates/fonts/CascadiaMono-BoldItalic.ttf') format('truetype');
    font-weight: 700;
    font-style: italic;
    font-display: block;
}


/* ───────────────────────────────────────────────────────────────────────
   Interface fonts
   ─────────────────────────────────────────────────────────────────────── */

/* Inter, SIL Open Font License 1.1 - see templates/fonts/Inter-OFL.txt.
   Variable weight (one file per script, the browser fetches only those a
   page uses), from @fontsource-variable/inter 5.0.16. Bundled like
   Cascadia: rBrowser works offline. */
@font-face {
    font-family: 'Inter';
    src: url('/templates/fonts/Inter-latin.woff2') format('woff2');
    font-weight: 100 900;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308,
                   U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Inter';
    src: url('/templates/fonts/Inter-latin-ext.woff2') format('woff2');
    font-weight: 100 900;
    font-display: swap;
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
                   U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Inter';
    src: url('/templates/fonts/Inter-cyrillic.woff2') format('woff2');
    font-weight: 100 900;
    font-display: swap;
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
    font-family: 'Inter';
    src: url('/templates/fonts/Inter-cyrillic-ext.woff2') format('woff2');
    font-weight: 100 900;
    font-display: swap;
    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
    font-family: 'Inter';
    src: url('/templates/fonts/Inter-greek.woff2') format('woff2');
    font-weight: 100 900;
    font-display: swap;
    unicode-range: U+0370-03FF;
}

/* What stays in the mono font: things read character by character
   (hashes, LXMF addresses, paths, keys), the numbers at the bottom of a
   node card, and the status and shortcut bars. NomadNet pages have their
   own rule (.page-content, --micron-font). */
.address-bar,
.hash-text,
.node-item .hash-text,
.node-item .operator-addr,
.node-item .node-info,
.node-item .node-info *,
.msg-conv-addr,
.msg-chat-addr,
.msg-identity code,
.avatar-colors-addr,
.hidden-node-hash,
.identity-value.mono,
.settings-input,
.cache-hit-path,
.fullscreen-address,
.favorite-input-mono,
code,
kbd,
.shortcuts-bar,
.shortcuts-bar * {
    font-family: var(--mono-font) !important;
}


/* ───────────────────────────────────────────────────────────────────────
   Settings panel
   ─────────────────────────────────────────────────────────────────────── */

/* Last button in the navigation bar, so it matches its neighbours rather
   than the header controls it used to sit among. The gear is drawn as an
   inline SVG: there is no gear png in templates/, and a glyph would depend
   on the font having it - which has already cost this project two
   invisible buttons. */
/* Settings > Screenshots off: no camera buttons. */
body.screenshots-off .screenshot-btn,
body.screenshots-off .fullscreen-shot {
    display: none !important;
}

/* The screenshot button (confirmPageScreenshot) has the gear's shape. */
.settings-btn,
.screenshot-btn {
    background: #30363d;
    border: 1px solid #30363d;
    color: #58a6ff;
    padding: 6px 11px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.30s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.settings-btn:hover,
.screenshot-btn:hover {
    background: #484f58;
    border-color: #58a6ff;
}

.settings-btn svg,
.screenshot-btn svg {
    display: block;
}

/* The reload arrow turns while a page is loading (BrowserTab.setLoading). */
.reload-btn .reload-icon {
    display: inline-block;
    line-height: 1;
}

.reload-btn.is-loading {
    color: #58a6ff;
    border-color: #58a6ff;
}

.reload-btn.is-loading .reload-icon {
    animation: reload-spin 0.9s linear infinite;
}

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

/* Opens the search over visited pages. Same shape as its neighbours in the
   bar; the magnifier is inline SVG because a glyph from a font the user
   may not have is how two buttons in this project ended up invisible. */
.search-engine-btn,
.announce-pause-btn,
.path-btn {
    background: #30363d;
    border: 1px solid #30363d;
    color: #58a6ff;
    padding: 6px 11px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.30s ease;
}

.search-engine-btn:hover,
.announce-pause-btn:hover,
.path-btn:hover {
    background: #484f58;
    border-color: #58a6ff;
}

.search-engine-btn svg,
.announce-pause-btn svg,
.path-btn svg {
    display: block;
}

.announce-pause-btn .icon-play,
.announce-pause-btn.paused .icon-pause {
    display: none;
}

.announce-pause-btn.paused .icon-play {
    display: block;
}

.announce-pause-btn.paused {
    color: #f0883e;
    border-color: #f0883e;
}

.settings-dialog {
    max-width: 560px;
    min-width: 420px;
    max-height: 86vh;
    overflow-y: auto;
}

.settings-label {
    display: block;
    color: #58a6ff;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 6px;
}

.settings-hint {
    color: #8b949e;
    font-size: 11px;
    line-height: 1.5;
    margin-bottom: 10px;
    overflow-wrap: anywhere;
}

.settings-warning {
    color: #d29922;
    margin-top: 10px;
}

.settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 8px;
    font-size: 12px;
    color: #e6edf3;
}

.settings-row[hidden] {
    display: none;
}

/* A toggle and its select on one row (Messenger > Announce every). */
.settings-inline {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Settings > About: the version, tapped seven times for Advanced. */
.settings-about {
    display: inline-block;
    margin: 4px 0 6px;
    font-size: 13px;
    color: #e6edf3;
    cursor: default;
    -webkit-user-select: none;
    user-select: none;
}

/* "rBrowser2 running on": System Setup and About. */
.settings-running-on {
    margin: 4px 0 6px;
    font-size: 12.5px;
    color: #e6edf3;
    overflow-wrap: anywhere;
}

.settings-running-on > div + div {
    margin-top: 3px;
}

.settings-running-label {
    display: inline-block;
    min-width: 110px;
    color: #8b949e;
}

#settings-messenger-section code {
    word-break: break-all;
}

/* The identity the messenger is on, so it cannot be missed. */
.messenger-identity {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    margin: 4px 0 6px;
    padding: 7px 9px;
    border: 1px solid rgba(63, 185, 80, 0.45);
    border-radius: 6px;
    background: rgba(63, 185, 80, 0.08);
    color: #e6edf3;
    font-size: 12px;
}

.messenger-identity.ephemeral {
    border-color: rgba(210, 153, 34, 0.55);
    background: rgba(210, 153, 34, 0.1);
}

.messenger-identity-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #3fb950;
}

.messenger-identity.ephemeral .messenger-identity-label {
    color: #d29922;
}

.messenger-identity-name {
    font-weight: 700;
}

.settings-select {
    background: #0d1117;
    border: 1px solid #30363d;
    color: #e6edf3;
    padding: 5px 8px;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
}

.settings-select-wide {
    width: 100%;
}

.settings-identity {
    font-size: 11px;
    color: #8b949e;
}

.identity-row {
    display: flex;
    gap: 10px;
    align-items: baseline;
    margin-bottom: 6px;
}

.identity-label {
    color: #7d8590;
    min-width: 92px;
    flex-shrink: 0;
}

.identity-value {
    color: #e6edf3;
    word-break: break-all;
}

.identity-value.mono {
    cursor: pointer;
    color: #58a6ff;
}

.identity-value.mono:hover {
    text-decoration: underline;
}

.settings-export {
    margin-top: 10px;
    background: #21262d;
    border: 1px solid #30363d;
    color: #e6edf3;
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
}

.settings-export:hover {
    background: #30363d;
    border-color: #d29922;
}

.welcome-search-btn {
    background: #21262d;
    border: 1px solid #30363d;
    color: #58a6ff;
    padding: 8px 18px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    transition: all 0.25s ease;
}

.welcome-search-btn:hover {
    background: #30363d;
    border-color: #58a6ff;
}

.settings-danger:hover {
    background: #30363d;
    border-color: #f85149;
    color: #ff7b72;
}

.settings-cache-stats {
    color: #7d8590;
    font-size: 11px;
    margin-top: 12px;
    display: block;
}

/* ---- Identities ---------------------------------------------------- */

.identity-subhead {
    color: #c9d1d9;
    font-size: 12px;
    font-weight: 600;
    margin: 16px 0 8px;
    padding-top: 10px;
    border-top: 1px solid #21262d;
}

.identity-profile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 7px 8px;
    margin-bottom: 4px;
    border: 1px solid #21262d;
    border-radius: 5px;
}

.identity-profile.current {
    border-color: #1f6feb;
    background: rgba(31, 111, 235, 0.08);
}

.identity-profile-main {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.identity-profile-name {
    color: #e6edf3;
    font-size: 12px;
}

.identity-profile-addr {
    color: #58a6ff;
    font-size: 10px;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.identity-profile-addr:hover {
    text-decoration: underline;
}

.identity-profile-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.identity-profile-actions button,
.binding-forget {
    background: #21262d;
    border: 1px solid #30363d;
    color: #c9d1d9;
    padding: 3px 7px;
    border-radius: 4px;
    font-size: 11px;
    cursor: pointer;
}

.identity-profile-actions button:hover,
.binding-forget:hover {
    border-color: #58a6ff;
}

.identity-profile-actions button.danger:hover,
.binding-forget:hover {
    border-color: #f85149;
    color: #ff7b72;
}

.identity-tag {
    font-size: 9px;
    padding: 1px 5px;
    border-radius: 8px;
    background: #30363d;
    color: #8b949e;
    margin-left: 4px;
    vertical-align: middle;
}

.identity-tag.in-use {
    background: #1f6feb;
    color: #ffffff;
}

.identity-tag.bad {
    background: #da3633;
    color: #ffffff;
}

.identity-binding {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}

.binding-node {
    flex: 1;
    min-width: 0;
    color: #e6edf3;
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.settings-input {
    background: #0d1117;
    border: 1px solid #30363d;
    color: #e6edf3;
    padding: 5px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-family: 'Cascadia Mono', Consolas, monospace;
    width: 180px;
}

/* Automatic replies: rules and messages take the whole width. */
.settings-textarea,
#setting-msg-echo-text {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin: 4px 0 10px;
    resize: vertical;
}

.settings-input.settings-time {
    width: 92px;
}

.settings-input-port {
    width: 90px;
}

.settings-input:focus,
.choice-input:focus {
    outline: none;
    border-color: #58a6ff;
}

.settings-warning-inline {
    color: #d29922;
}

/* The identity in use, next to the auto-identify button. Amber when it is
   the ephemeral one, so a throwaway identity is never mistaken for yours. */
.identity-chip {
    background: #21262d;
    border: 1px solid #30363d;
    color: #c9d1d9;
    padding: 6px 9px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 11px;
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    line-height: 1;
    max-width: 170px;
    transition: all 0.2s ease;
}

.identity-chip:hover {
    background: #30363d;
    border-color: #58a6ff;
}

.identity-chip.ephemeral {
    border-color: #9e6a03;
    color: #e3b341;
}

.identity-chip-icon {
    font-size: 12px;
}

.identity-chip-name {
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 600;
}

/* ---- Question dialogs (identity, restart) -------------------------- */

.choice-modal {
    z-index: 10003;
}

.choice-dialog {
    max-width: 480px;
}

.choice-body {
    font-size: 13px;
    line-height: 1.55;
    margin-bottom: 16px;
    word-break: break-word;
}

.choice-body .mono,
.choice-sub .mono {
    font-family: 'Cascadia Mono', Consolas, monospace;
    font-size: 11px;
}

.choice-sub {
    color: #8b949e;
    font-size: 11px;
}

.choice-warning {
    margin-top: 12px;
    padding: 8px 10px;
    border-left: 3px solid #d29922;
    background: rgba(210, 153, 34, 0.08);
    color: #e3b341;
    font-size: 12px;
}

.choice-input {
    width: 100%;
    box-sizing: border-box;
    background: #0d1117;
    border: 1px solid #30363d;
    color: #e6edf3;
    padding: 7px 9px;
    border-radius: 4px;
    font-size: 13px;
    margin-bottom: 16px;
}

.choice-danger:hover {
    background: #da3633;
    color: #ffffff;
}

.choice-dialog .auto-reload-actions {
    flex-wrap: wrap;
}

/* The question on a click on an LXMF / RRC / web... link in a page. */
.choice-body .link-ask-label {
    color: #8b949e;
    font-size: 12px;
    margin: 8px 0 4px;
}

.choice-body .link-ask-address {
    display: block;
    margin-top: 6px;
    padding: 6px 8px;
    background: #0d1117;
    border: 1px solid #30363d;
    border-radius: 4px;
    font-family: 'Cascadia Mono', Consolas, monospace;
    font-size: 11px;
    word-break: break-all;
}

.choice-body .link-ask-off {
    margin-top: 10px;
    color: #e3b341;
    font-size: 12px;
}

@media (max-width: 600px) {
    .identity-profile {
        flex-direction: column;
        align-items: stretch;
    }
    .identity-chip {
        max-width: 110px;
    }
    .choice-dialog {
        min-width: 0;
        width: calc(100vw - 32px);
        box-sizing: border-box;
    }
}

.settings-cache-buttons {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-start;
}

/* ─────────────────────────────────────────────────────────────
   Where the page came from

   Sits in the header next to the path. A cached page loads in a few
   milliseconds and looks identical to a fetched one, so without this the
   load time printed next to it would be quietly misleading.
   ───────────────────────────────────────────────────────────── */

.source-badge {
    display: inline-block;
    margin-left: 8px;
    padding: 1px 7px;
    border-radius: 9px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.2px;
    vertical-align: baseline;
    white-space: nowrap;
    cursor: help;
}

/* Same colours as the pill by the address bar: green live, amber saved
   copy, red copy shown because the node did not answer. */
.source-badge.from-network {
    background: rgba(63, 185, 80, 0.15);
    border: 1px solid rgba(63, 185, 80, 0.4);
    color: #7ee787;
}

.source-badge.from-cache {
    background: rgba(210, 153, 34, 0.15);
    border: 1px solid rgba(210, 153, 34, 0.45);
    color: #e3b341;
}

.source-badge.from-stale {
    background: rgba(248, 81, 73, 0.15);
    border: 1px solid rgba(248, 81, 73, 0.45);
    color: #ff7b72;
}

/* The pill's explanation, see showSourceTip(). */
.source-tip {
    position: fixed;
    z-index: 10002;
    max-width: 410px;
    padding: 8px 10px;
    background: #161b22;
    border: 1px solid #30363d;
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    color: #c9d1d9;
    font-family: "Cascadia Mono", Consolas, monospace !important;
    font-size: 11px;
    line-height: 1.5;
    white-space: pre-line;
    pointer-events: none;
    display: none;
}

.source-tip.open {
    display: block;
}

/* Cache section of the node info panel, see fillNodeCacheInfo(). */
.node-cache-info {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid #30363d;
}

.node-cache-info .muted {
    color: #7d8590;
}

.node-cache-line {
    margin-top: 4px;
}

.node-cache-pages {
    margin-top: 6px;
    max-height: 150px;
    overflow-y: auto;
    font-family: "Cascadia Mono", Consolas, monospace !important;
    font-size: 11px;
    line-height: 1.5;
}

.node-cache-page {
    display: flex;
    gap: 8px;
    align-items: baseline;
    padding: 1px 0;
}

.node-cache-path {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #c9d1d9;
}

.node-cache-state {
    white-space: nowrap;
    padding: 0 6px;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 600;
}

.node-cache-state.is-live {
    color: #7ee787;
    background: rgba(63, 185, 80, 0.12);
}

.node-cache-state.is-cache {
    color: #e3b341;
    background: rgba(210, 153, 34, 0.15);
}

.node-cache-state.is-offline {
    color: #ff7b72;
    background: rgba(248, 81, 73, 0.15);
}

.node-cache-state.is-muted {
    color: #8b949e;
    background: rgba(139, 148, 158, 0.12);
}

/* The pill before the address bar, see setPageSource(). */
.source-pill {
    flex-shrink: 0;
    height: 30px;
    padding: 0 10px;
    border-radius: 4px;
    font-family: "Cascadia Mono", Consolas, monospace;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.source-pill[hidden] {
    display: none !important;
}

/* The nav bar squares every button to 30px; this one holds a word. */
.nav-bar > button.source-pill {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    padding: 0 10px !important;
    font-family: "Cascadia Mono", Consolas, monospace !important;
}

.source-pill.is-live {
    background: rgba(63, 185, 80, 0.12);
    border: 1px solid rgba(63, 185, 80, 0.45);
    color: #7ee787;
    cursor: default;
}

.source-pill.is-cache {
    background: rgba(210, 153, 34, 0.15);
    border: 1px solid rgba(210, 153, 34, 0.55);
    color: #e3b341;
}

.source-pill.is-offline {
    background: rgba(248, 81, 73, 0.15);
    border: 1px solid rgba(248, 81, 73, 0.55);
    color: #ff7b72;
}

.source-pill .pill-icon {
    display: none;
}

@media (max-width: 767px), (pointer: coarse) and (max-height: 500px) {
    .source-pill .pill-text {
        display: none;
    }
    .source-pill .pill-icon {
        display: inline-flex;
        align-items: center;
    }
    .nav-bar > button.source-pill:not(.is-live) {
        padding: 0 7px !important;
    }
}

.source-pill.is-cache:hover {
    background: rgba(210, 153, 34, 0.3);
}

.source-pill.is-offline:hover {
    background: rgba(248, 81, 73, 0.3);
}

/* ─────────────────────────────────────────────────────────────
   Search over visited pages
   ───────────────────────────────────────────────────────────── */

.cache-search-dialog {
    max-width: 680px;
    min-width: 440px;
    max-height: 86vh;
    display: flex;
    flex-direction: column;
}

.cache-search-bar {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
}

.cache-search-input {
    flex: 1;
    width: 100%;
    box-sizing: border-box;
    padding-right: 28px !important;
    background: #0d1117;
    border: 1px solid #30363d;
    color: #e6edf3;
    padding: 7px 10px;
    border-radius: 4px;
    font-size: 13px;
}

.cache-search-input:focus {
    outline: none;
    border-color: #58a6ff;
}

.cache-search-exact {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #8b949e;
    font-size: 11px;
    margin-bottom: 10px;
    cursor: pointer;
}

.cache-search-results {
    flex: 1;
    overflow-y: auto;
    min-height: 120px;
    max-height: 48vh;
    border: 1px solid #30363d;
    border-radius: 4px;
    background: #0d1117;
    padding: 6px;
}

.cache-search-count {
    color: #7d8590;
    font-size: 11px;
    padding: 2px 6px 8px 6px;
}

.cache-search-empty {
    color: #7d8590;
    font-size: 12px;
    padding: 20px 10px;
    text-align: center;
    line-height: 1.6;
}

/* One result after the other, a line between them. */
.cache-hit {
    padding: 9px 10px;
    cursor: pointer;
    border-bottom: 1px solid #262c36;
    border-left: 2px solid transparent;
}

.cache-hit:last-child {
    border-bottom: none;
}

.cache-hit:hover {
    background: #161b22;
    border-left-color: #58a6ff;
}

/* Whole words and how many, side by side. */
.cache-search-options {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.cache-search-options .cache-search-exact {
    margin-bottom: 0;
}

.cache-search-options .settings-select {
    padding: 1px 4px;
    font-size: 11px;
}

.cache-hit-title {
    color: #58a6ff;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cache-hit-meta {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 10px;
    color: #7d8590;
    margin-bottom: 4px;
}

.cache-hit-node {
    color: #ffa657;
}

.cache-hit-operator {
    color: #7ee787;
}

.cache-hit-why {
    color: #6e7681;
    font-style: italic;
}

/* The matched words. Dark text on yellow, because the surrounding text is
   light on near-black and leaving it light would be unreadable on the
   highlight. Inherits its size and weight so a marked word does not change
   the line it sits on. */
mark.search-hit {
    background: #f2cc60;
    color: #1c2128;
    border-radius: 2px;
    padding: 0 1px;
    font-size: inherit;
    font-weight: inherit;
    font-family: inherit;
}

.cache-hit-title mark.search-hit {
    background: #ffd33d;
}

.cache-hit-path {
    font-family: 'Cascadia Mono', monospace;
}

.cache-hit-snippet {
    color: #8b949e;
    font-size: 11px;
    line-height: 1.5;
}

@media (max-width: 767px), (pointer: coarse) and (max-height: 500px) {
    .settings-dialog {
        min-width: 0;
        width: 94vw;
    }

    .cache-search-dialog {
        min-width: 0;
        width: 94vw;
    }

    .settings-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .cache-hit-title {
        white-space: normal;
    }
}

/* ============================================
   NAV BAR: ONE SIZE FOR EVERY BUTTON

   The buttons on the left (sidebar, back, forward, reload, home) and the
   icon buttons on the right (go, star, info, ping, fingerprint, search,
   settings) had grown different sizes: padding, icon size and, on phones,
   a 44px !important override that only the right-hand ones got. Every
   button in the bar now takes the size of the left ones. Last in the
   file and !important with a more specific selector, so it wins over
   every earlier rule, media queries included.
   ============================================ */

.nav-bar > button,
.nav-bar .nav-controls > button {
    box-sizing: border-box !important;
    height: 30px !important;
    min-height: 30px !important;
    max-height: 30px !important;
    width: 30px !important;
    min-width: 30px !important;
    max-width: 30px !important;
    padding: 0 !important;
    font-size: 13px !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

.nav-bar > button img,
.nav-bar > button svg {
    width: 16px !important;
    height: 16px !important;
    object-fit: contain !important;
}

/* ============================================
   NOTIFICATIONS: ONE STACK

   Notifications used to be fixed at one spot each, so two at once sat
   exactly on top of each other and looked like one. They now share a
   stack that grows upwards from the bottom right corner; on a phone it
   spans the width with a 16px margin on each side.
   ============================================ */

#notification-stack {
    position: fixed;
    right: 50px;
    bottom: 40px;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    max-width: 360px;
    pointer-events: none;
}

#notification-stack > .notification {
    max-width: 100%;
    box-sizing: border-box;
}

.notification-close {
    position: absolute;
    top: 4px;
    right: 6px;
    background: none;
    border: none;
    color: inherit;
    opacity: 0.75;
    font-size: 17px;
    line-height: 1;
    padding: 2px 4px;
    cursor: pointer;
}

.notification-close:hover {
    opacity: 1;
}

/* Phones: small, just above the bars at the bottom (input bars, status
   bar). The script sets the exact bottom from the bar on screen
   (placeNotificationStack); this is the fallback. At the very bottom they
   covered the input bars, at the top the nav bar. */
@media (max-width: 600px) {
    #notification-stack {
        left: 10px;
        right: 10px;
        top: auto;
        bottom: 64px;
        max-width: none;
        align-items: stretch;
        flex-direction: column;
    }

    #notification-stack > .notification {
        padding: 8px 30px 8px 12px !important;
        font-size: 12px !important;
    }
}

/* ============================================
   PHONES: FINAL CORRECTIONS

   The earlier mobile rules are spread over many overlapping media
   queries. Rather than untangle them, these last rules fix what was
   measured wrong on a 360-390px screen:
   - the row under the nav bar did not wrap: its buttons (395px) pushed
     the page title to zero width and the last buttons off screen;
   - the welcome block had a fixed 580px width and inherited the
     no-reflow white-space of Micron pages, so its text ran off the edge;
   - the tab strip scrolled vertically too, showing a scrollbar.
   ============================================ */

@media (max-width: 767px), (pointer: coarse) and (max-height: 500px) {
    .tab-bar,
    #tabs-container {
        overflow-y: hidden !important;
    }

    .tab-content .header {
        flex-wrap: wrap !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        row-gap: 6px;
        padding-top: 6px !important;
        padding-bottom: 6px !important;
    }

    .tab-content .header .page-info {
        flex: 1 1 100% !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    .tab-content .header .header-buttons {
        flex: 1 1 100% !important;
        flex-wrap: wrap !important;
        justify-content: flex-start !important;
        gap: 6px !important;
        max-width: 100% !important;
    }

    .page-content .welcome {
        width: auto !important;
        max-width: 100% !important;
        box-sizing: border-box;
        padding: 0 12px;
        white-space: normal !important;
    }

    .page-content .welcome h2 {
        font-size: 20px;
    }
}

/* The welcome screen is not a Micron page: the page container sizes
   itself to its content (so Micron art is never reflowed), which made it
   wider than a phone screen. Holding the welcome block, it fits the
   screen instead. */
.page-content:has(> .welcome) {
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    white-space: normal !important;
}

/* Phones: the nav bar on two rows, as asked - every command button on
   the first, the address bar alone on the second. Twelve 30px buttons
   and their gaps do not fit in 360-390px, so the last one or two used to
   drop onto the address row. Here they share the row evenly instead
   (about 27-30px each, the icon stays 16px). display: contents lets the
   back/forward/reload/home group take part in that sharing. */
@media (max-width: 767px), (pointer: coarse) and (max-height: 500px) {
    .nav-bar {
        flex-wrap: wrap !important;
        row-gap: 6px !important;
        column-gap: 2px !important;
        height: auto !important;
        max-height: none !important;
    }

    /* Selector this long on purpose: an older rule,
       html.mobile-device .nav-controls { display: flex !important },
       is more specific than a plain .nav-bar .nav-controls. */
    html .nav-bar .nav-controls,
    html.mobile-device .nav-bar .nav-controls,
    .mobile-device .nav-bar .nav-controls {
        display: contents !important;
    }

    .nav-bar > button,
    .nav-bar .nav-controls > button {
        flex: 1 1 0 !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: 40px !important;
    }

    .nav-bar > .address-bar {
        order: 10 !important;
        flex: 1 1 100% !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
    }
}

/* ============================================
   ROW UNDER THE NAV BAR: ONE SIZE, TEXT ONLY

   Zoom, Center, Raw View, Timer, identity and Auto ID had six heights
   (19 to 30px) and fonts from 10 to 16px, half of them icons. They are
   now all text, 28px high, the same font and padding. Active states keep
   their own colours: their rules are more specific than these.
   ============================================ */

.header-buttons {
    align-items: center;
    gap: 6px;
}

.header-buttons > button,
.header-buttons > .zoom-control {
    box-sizing: border-box !important;
    height: 28px !important;
    min-height: 28px !important;
    max-height: 28px !important;
    font-size: 11px !important;
    font-weight: 600;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    border-radius: 4px !important;
    flex-shrink: 0;
}

.header-buttons > button {
    padding: 0 10px !important;
    min-width: 0 !important;
    margin: 0 !important;
    background: #21262d;
    border: 1px solid #30363d;
    color: #c9d1d9;
    animation: none;
}

.header-buttons > .zoom-control {
    padding: 0 !important;
    gap: 0 !important;
    overflow: hidden;
}

/* The group is one 28px button like its neighbours. The - and + inside it
   used to have their own background and border, so they read as separate,
   taller boxes; now they are flat and fill the group, and only the hover
   shows where one ends. */
.header-buttons > .zoom-control {
    background: #21262d !important;
}

.header-buttons > .zoom-control > button {
    height: 100% !important;
    min-height: 0 !important;
    padding: 0 8px !important;
    font-size: 12px !important;
    line-height: 1 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    color: #c9d1d9;
}

.header-buttons > .zoom-control > .zoom-btn:hover:not(:disabled) {
    background: #30363d !important;
}

.header-buttons > .zoom-control > .zoom-level {
    min-width: 42px;
    font-size: 11px !important;
}

.header-buttons .reload-countdown:not(:empty) {
    margin-left: 5px;
}

.header-buttons .auto-identify-label {
    display: inline !important;
}

.header-buttons > .identity-chip {
    max-width: 170px;
    min-width: 0;
}

.header-buttons .identity-chip-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Phones: the row stays on one line. The identity name is what gives way
   (it shrinks, with an ellipsis) instead of a button dropping to a
   second line. The tab strip's + gets a fixed small width - a generic
   mobile rule on tabs had stretched it to about 70px - and the button
   that hides the sidebar is gone: on a phone the node list is opened
   with the Nodes button instead. */
@media (max-width: 767px), (pointer: coarse) and (max-height: 500px) {
    .tab-content .header .header-buttons {
        flex-wrap: nowrap !important;
        gap: 4px !important;
    }

    .header-buttons > button {
        padding: 0 7px !important;
    }

    /* Hidden on phones, as before: pages are positioned by hand there. The
       rule above that forces display would otherwise bring it back. */
    .header-buttons > .center-toggle {
        display: none !important;
    }

    .header-buttons > .zoom-control > button {
        padding: 0 6px !important;
    }

    .header-buttons > .zoom-control > .zoom-level {
        min-width: 34px;
    }

    .header-buttons > .identity-chip {
        flex: 0 1 auto !important;
        min-width: 36px !important;
        max-width: none;
    }

    .tab-bar .tab.tab-new,
    #tabs-container .tab.tab-new {
        width: 34px !important;
        min-width: 34px !important;
        max-width: 34px !important;
        flex: 0 0 34px !important;
        padding: 0 !important;
        font-size: 16px !important;
    }

    .nav-bar > .sidebar-toggle-btn {
        display: none !important;
    }
}

/* Settings and search dialogs: a fixed header (title + close button), a
   middle that scrolls, and for settings a fixed footer with Close/Save. The
   close button used to float over the scrolling content and covered the
   settings underneath it; now it sits in its own bar and never moves. */
.settings-dialog {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    max-height: 86vh;
}

.settings-dialog > .dialog-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    margin: 0 -24px;
    padding: 0 24px;
}

.dialog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-shrink: 0;
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid #30363d;
}

.dialog-header h3 {
    margin: 0 !important;
}

.dialog-footer {
    flex-shrink: 0;
    margin-top: 12px !important;
    padding-top: 12px;
    border-top: 1px solid #30363d;
}

.modal-close {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #21262d;
    border: 1px solid #30363d;
    color: #c9d1d9;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.modal-close:hover {
    border-color: #f85149;
    color: #ff7b72;
}

/* Phones up to 400px (most of them: 360-393px): tighter padding and gaps.
   The Full button made the row about 28px too wide at 360px and Auto ID
   ran off the edge. */
@media (max-width: 400px) {
    .header-buttons > button {
        padding: 0 5px !important;
    }
    .header-buttons > .zoom-control > button {
        padding: 0 5px !important;
    }
    .header-buttons > .zoom-control > .zoom-level {
        min-width: 28px;
    }
    .tab-content .header .header-buttons {
        gap: 3px !important;
    }
}

/* Very small phones (320px, the first iPhone SE): a little less padding and
   a slightly smaller font, so the row still fits on one line. */
@media (max-width: 340px) {
    .header-buttons > button {
        padding: 0 5px !important;
        font-size: 10px !important;
    }
    .header-buttons > .zoom-control > button {
        padding: 0 5px !important;
    }
    .header-buttons > .zoom-control > .zoom-level {
        min-width: 28px;
        font-size: 10px !important;
    }
    .tab-content .header .header-buttons {
        gap: 3px !important;
    }
}

/* Phones: the tab strip was 52px with tabs about 48px tall - a lot of a
   small screen for a row of titles. 38px now, tabs and the Nodes button
   32px. */
@media (max-width: 767px), (pointer: coarse) and (max-height: 500px) {
    .tab-bar {
        height: 38px !important;
        min-height: 38px !important;
        max-height: 38px !important;
        padding: 3px 4px !important;
        align-items: center !important;
    }

    #tabs-container {
        height: 32px !important;
        align-items: center !important;
    }

    #tabs-container .tab {
        height: 32px !important;
        min-height: 0 !important;
        max-height: 32px !important;
        padding: 0 10px !important;
        font-size: 12px !important;
        box-sizing: border-box !important;
    }

    .mobile-nodes-btn {
        height: 32px !important;
        min-height: 0 !important;
        padding: 0 10px !important;
        font-size: 12px !important;
        box-sizing: border-box !important;
    }

    /* Page tabs: with the app icons and Nodes on the right there were ~130px
       left and each tab took 107, one in view. Now 84 at most, down to 44
       when there are many; the x only on the tab in front. */
    #tabs-container .tab:not(.tab-messages):not(.tab-new) {
        min-width: 44px !important;
        max-width: 84px !important;
        flex: 0 1 84px !important;
        padding: 0 6px !important;
        gap: 2px;
    }

    #tabs-container .tab:not(.active) .tab-close {
        display: none !important;
    }

    /* The app icons 30px (layoutAppTabs places them by this width). */
    #tabs-container .tab.tab-messages {
        width: 30px !important;
        min-width: 30px !important;
        max-width: 30px !important;
        flex: 0 0 30px !important;
        padding: 0 !important;
    }

    #tabs-container .tab.tab-messages .tab-app-label {
        display: none;
    }

    #tabs-container .tab .tab-close {
        padding: 2px 4px !important;
        font-size: 14px !important;
        margin-left: 2px !important;
    }

    #tabs-container .tab .tab-title {
        overflow: hidden;
        text-overflow: ellipsis;
        min-width: 0;
    }
}

/* Phones, Messenger: inside a chat the bar above (identity, New, Contact,
   Peers, Announce, Sync) took 157 of 740px; the chat's own head has
   the back arrow, so the bar waits for the list. */
@media (max-width: 700px), (pointer: coarse) and (max-height: 500px) {
    .messenger-view:has(.msg-body.chat-open) > .msg-bar {
        display: none !important;
    }
}

@media (max-width: 480px) {
    .mobile-nodes-label {
        display: none;
    }

    .mobile-nodes-btn {
        padding: 0 8px !important;
    }
}

/* Divider lines (one character repeated, see markProseLines): clipped at
   the edge of the page, never wrapped onto a second line and never the
   reason a page is wider than the screen. */
.page-content .mu-rule {
    white-space: pre !important;
    overflow: hidden;
    /* A divider spans the page, it does not decide how wide the page is.
       Its run of ━ is far longer than any line, and as part of the
       max-content width it made every page with a divider as wide as the
       window, so "Center" never moved it. A percentage min-width counts as
       nothing when the box is measured, then fills it. */
    width: 0;
    min-width: 100%;
}

/* Phones: a slimmer address bar - 32px and 13px text instead of 44px and
   16px. (On iPhone Safari a field under 16px zooms the page when tapped;
   Android does not.) */
@media (max-width: 767px), (pointer: coarse) and (max-height: 500px) {
    .nav-bar > .address-bar {
        height: 32px !important;
        min-height: 32px !important;
        max-height: 32px !important;
        font-size: 13px !important;
        padding: 0 10px !important;
        box-sizing: border-box !important;
    }
}

/* Phones: form fields do not scale with the page zoom, so a 48-column
   field could be wider than the screen. Capped at the page width. */
@media (max-width: 767px), (pointer: coarse) and (max-height: 500px) {
    .page-content input[type="text"],
    .page-content input[type="password"],
    .page-content input:not([type]),
    .page-content textarea {
        max-width: 100% !important;
        box-sizing: border-box;
    }
}

/* ============================================
   SHORT SCREENS (a phone turned sideways)

   In landscape a phone is wider than 767px, so it got the desktop layout
   on a screen 390-412px tall: tab strip 48px, nav bar 60px (and cut off -
   its buttons wrapped into a box with a fixed height), header 50px. Half
   the screen was browser. Here everything above the page becomes one
   thin row each - 34 + 38 + 34px - and the path/address line goes (the
   address bar already shows it).
   Selectors repeat html.mobile-device: the touch layout's own rules carry
   !important at that specificity.
   min-width: a phone upright with the keyboard open is also under 500px
   tall, and this one-row nav bar squeezed its address bar to nothing.
   ============================================ */
@media (max-height: 500px) and (min-width: 560px) {
    .tab-bar, html.mobile-device .tab-bar {
        height: 34px !important;
        min-height: 34px !important;
        max-height: 34px !important;
        padding: 2px 4px !important;
        align-items: center !important;
        overflow-y: hidden !important;
    }
    #tabs-container, html.mobile-device #tabs-container {
        height: 30px !important;
        align-items: center !important;
        overflow-y: hidden !important;
    }
    #tabs-container .tab, html.mobile-device #tabs-container .tab {
        height: 28px !important;
        min-height: 0 !important;
        max-height: 28px !important;
        padding: 0 10px !important;
        font-size: 12px !important;
        box-sizing: border-box !important;
    }
    #tabs-container .tab.tab-new {
        width: 30px !important;
        min-width: 30px !important;
        max-width: 30px !important;
        flex: 0 0 30px !important;
        padding: 0 !important;
    }
    .mobile-nodes-btn, html.mobile-device .mobile-nodes-btn {
        height: 28px !important;
        min-height: 0 !important;
        padding: 0 10px !important;
        font-size: 12px !important;
        box-sizing: border-box !important;
    }

    .nav-bar, html.mobile-device .nav-bar {
        flex-wrap: nowrap !important;
        height: 38px !important;
        min-height: 38px !important;
        max-height: 38px !important;
        padding: 4px 6px !important;
        gap: 4px !important;
        row-gap: 0 !important;
    }
    html .nav-bar .nav-controls,
    html.mobile-device .nav-bar .nav-controls,
    .mobile-device .nav-bar .nav-controls {
        display: flex !important;
        gap: 4px !important;
    }
    .nav-bar > button, .nav-bar .nav-controls > button,
    html.mobile-device .nav-bar > button, html.mobile-device .nav-bar .nav-controls > button {
        flex: 0 0 30px !important;
        width: 30px !important;
        min-width: 30px !important;
        max-width: 30px !important;
        height: 30px !important;
        min-height: 30px !important;
        max-height: 30px !important;
    }
    .nav-bar > .address-bar, html.mobile-device .nav-bar > .address-bar {
        order: 0 !important;
        flex: 1 1 auto !important;
        width: auto !important;
        min-width: 0 !important;
        height: 30px !important;
        min-height: 30px !important;
        max-height: 30px !important;
        font-size: 13px !important;
        padding: 0 10px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }
    html.mobile-device .nav-bar > .sidebar-toggle-btn {
        display: none !important;
    }

    .tab-content .header, html.mobile-device .tab-content .header {
        flex-wrap: nowrap !important;
        height: 34px !important;
        min-height: 34px !important;
        max-height: 34px !important;
        padding: 3px 8px !important;
        row-gap: 0 !important;
        align-items: center !important;
    }
    /* Basis 0: the title takes what the buttons leave and ellipsizes; a
       long one (the empty tab's hint) used to push the buttons off. */
    .tab-content .header .page-info {
        flex: 1 1 0 !important;
        width: auto !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }
    .tab-content .header .page-details {
        display: none !important;
    }
    .tab-content .header .page-title {
        font-size: 12px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    .tab-content .header .header-buttons {
        flex: 0 0 auto !important;
        flex-wrap: nowrap !important;
        gap: 4px !important;
        max-width: 75% !important;
    }
    .header-buttons > button, .header-buttons > .zoom-control {
        height: 26px !important;
        min-height: 26px !important;
        max-height: 26px !important;
    }
    .header-buttons > .identity-chip {
        flex: 0 1 auto !important;
        min-width: 36px !important;
        max-width: 160px !important;
    }
}

/* Chrome on Android can enlarge text in wide blocks on its own (text
   autosizing). The page sets its own text size from the zoom, so the
   browser is told not to adjust it. */
html, body, .page-content {
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* Settings > File Downloads: the files rBrowser has, a row each. */
.files-folder-row { flex-wrap: wrap; gap: 6px; }
.files-folder-row input { flex: 1 1 320px; min-width: 0; width: auto; }
.files-buttons { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0; }
.files-buttons .settings-export { margin: 0; }
.files-list { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 10px; font-size: 13px; }
.files-empty { color: #7d8590; font-size: 12px; }
.files-item { background: #161b22; border: 1px solid #30363d; border-radius: 6px; padding: 8px 10px; }
.files-name { color: #e6edf3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.files-meta { color: #7d8590; font-size: 12px; margin: 2px 0 6px; }
.files-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.files-actions button, .files-actions a {
    background: #21262d; border: 1px solid #30363d; border-radius: 4px; color: #c9d1d9;
    font-size: 12px; padding: 2px 8px; cursor: pointer; text-decoration: none;
}
.files-actions button:hover, .files-actions a:hover { border-color: #58a6ff; color: #e6edf3; }
.files-actions .files-delete:hover { border-color: #f85149; color: #ff7b72; }

/* File downloads (rbrowser.js handleFileDownload): one panel at the bottom
   right, a row per file, scrolling when there are many. On a phone it
   spans the width. */
.download-list {
    position: fixed; bottom: 60px; right: 60px; z-index: 10000;
    width: 360px; max-width: calc(100vw - 32px);
    display: flex; flex-direction: column; gap: 8px;
}
.download-list .dl-rows {
    display: flex; flex-direction: column; gap: 8px;
    max-height: 60vh; overflow-y: auto; scrollbar-width: thin;
}
.download-list .dl-panel-head {
    display: flex; align-items: center; gap: 10px; align-self: flex-end;
    background: #161b22; border: 1px solid #30363d; color: #e6edf3;
    padding: 4px 6px 4px 12px; font-size: 13px; font-weight: 600;
    box-shadow: 0 4px 20px rgba(0,0,0,0.5);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.download-list .dl-min,
.download-list .dl-cancel-all {
    background: none; border: none; color: #7d8590; cursor: pointer;
    font-size: 18px; line-height: 1; padding: 0 6px;
}
.download-list .dl-min:hover { color: #e6edf3; }
.download-list .dl-cancel-all:hover { color: #ff7b72; }
/* Reduced: only the head, a small line with the overall progress and the
   x that cancels them all (open, each row has its own). */
.download-list .dl-cancel-all,
.download-list.dl-minimized .dl-rows,
.download-list.dl-minimized .dl-min { display: none; }
.download-list.dl-minimized .dl-cancel-all { display: inline; }
.download-list.dl-minimized .dl-panel-head { cursor: pointer; padding: 4px 6px 4px 12px; }
.download-list.dl-minimized .dl-panel-head:hover { border-color: #58a6ff; }
.download-box {
    box-sizing: border-box;
    background: #1a1a1a; border: 3px solid #333333; color: #ffffff;
    padding: 12px 16px; font-size: 14px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.5);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    overflow-wrap: anywhere;
}
.download-box .dl-head { display: flex; align-items: flex-start; gap: 10px; }
.download-box .dl-title { flex: 1; }
.download-box .dl-from { font-size: 12px; color: #7d8590; margin-top: 2px; }
.download-box .dl-close {
    background: none; border: none; color: #7d8590; cursor: pointer;
    font-size: 18px; line-height: 1; padding: 0 2px;
}
.download-box .dl-close:hover { color: #e6edf3; }
.download-box .dl-track { margin: 8px 0; background: #333; height: 6px; border-radius: 3px; overflow: hidden; }
.download-box .dl-bar { background: #58a6ff; height: 100%; width: 0%; transition: width 0.3s; }
.download-box .dl-text { font-size: 12px; color: #7d8590; }
/* Saved in the download folder: a small button like the reduced panel. */
.download-box.dl-saved {
    display: flex; align-items: center; gap: 4px; align-self: flex-end; max-width: 100%;
    background: #161b22; border: 1px solid #30363d; padding: 4px 6px 4px 8px; font-size: 13px;
}
.download-box.dl-saved:hover { border-color: #58a6ff; }
.download-list.dl-only-saved .dl-panel-head { display: none; }
.download-list.dl-only-saved.dl-minimized .dl-rows { display: flex; }
.dl-saved button {
    background: none; border: none; color: #7d8590; cursor: pointer;
    font: inherit; line-height: 1; padding: 2px 4px;
}
.dl-saved .dl-saved-open {
    color: #e6edf3; font-weight: 600; display: flex; gap: 6px; min-width: 0;
}
.dl-saved .dl-saved-open span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dl-saved .dl-saved-open:hover span { text-decoration: underline; }
.dl-saved .dl-saved-folder { font-size: 15px; }
.dl-saved .dl-saved-close { font-size: 18px; }
.dl-saved .dl-saved-folder:hover { color: #e6edf3; }
.dl-saved .dl-saved-close:hover { color: #ff7b72; }
@media (max-width: 768px), (pointer: coarse) and (max-height: 500px) {
    .download-list { left: 16px; right: 16px; bottom: 16px; width: auto; max-width: none; }
    .download-box { padding: 10px 12px; }
}

/* Full screen page view (Full button / togglePageFullscreen): everything
   but the page is hidden and a one line bar stays on top. Same on desktop
   and mobile. */
.fullscreen-bar { display: none; }
body.page-fullscreen .fullscreen-bar {
    display: flex; align-items: center; gap: 10px;
    position: fixed; top: 0; left: 0; right: 0; z-index: 9000;
    height: 28px; box-sizing: border-box; padding: 0 4px 0 10px;
    background: #161b22; border-bottom: 1px solid #30363d;
    font-size: 12px; line-height: 28px; white-space: nowrap;
}
.fullscreen-title {
    font-weight: 600; color: #e6edf3; flex: 0 1 auto; max-width: 40%;
    overflow: hidden; text-overflow: ellipsis;
}
.fullscreen-address {
    flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis;
    color: #7d8590; font-family: "Cascadia Mono", Consolas, monospace; font-size: 11px;
    cursor: pointer;
}
.fullscreen-exit {
    flex: 0 0 auto; width: 26px; height: 22px; padding: 0;
    background: #21262d; border: 1px solid #30363d; border-radius: 4px;
    color: #c9d1d9; font-size: 13px; line-height: 1; cursor: pointer;
}
.fullscreen-exit:hover { background: #30363d; color: #fff; }
body.page-fullscreen .sidebar,
body.page-fullscreen .tab-bar,
body.page-fullscreen .nav-bar,
body.page-fullscreen .header,
body.page-fullscreen .shortcuts-bar { display: none !important; }
body.page-fullscreen .content {
    width: 100vw !important; min-width: 100vw !important; max-width: 100vw !important;
    padding-top: 28px !important; padding-bottom: 0 !important; box-sizing: border-box;
}

/* Buttons with a long and a short label: the short one on phones up to
   400px, so the button row stays on one line next to the Full button. */
.label-short { display: none; }
@media (max-width: 400px) {
    .header-buttons .label-long { display: none; }
    .header-buttons .label-short { display: inline; }
}

/* ============================================
   ADD FAVORITE DIALOG
   Address and name in one dialog, in the style of Settings.
   ============================================ */
.favorite-dialog {
    width: 440px;
    max-width: calc(100vw - 32px);
    min-width: 0;
}

.favorite-dialog h3 {
    color: #e6edf3;
    font-size: 16px;
}

.favorite-dialog-star {
    color: #ffa657;
}

.favorite-dialog .settings-label {
    margin-top: 4px;
}

.favorite-input {
    display: block;
    width: 100%;
    height: 34px;
    background: #0d1117;
    border: 1px solid #30363d;
    border-radius: 4px;
    color: #e6edf3;
    padding: 0 10px;
    font-size: 13px;
    transition: border-color 0.12s ease;
}

.favorite-input-mono {
    font-family: 'Cascadia Mono', Consolas, monospace !important;
    font-size: 12px;
}

.favorite-input::placeholder {
    color: #6e7681;
}

.favorite-input:hover {
    border-color: #444c56;
}

.favorite-input:focus {
    outline: none;
    border-color: #58a6ff;
}

.favorite-input.readonly {
    color: #8b949e;
    background: #161b22;
    border-style: dashed;
}

.favorite-field-note {
    min-height: 16px;
    margin: 4px 0 10px 0;
    color: #7d8590;
    font-size: 11px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.favorite-field-note.is-error {
    color: #ff7b72;
}

.favorite-dialog .auto-reload-actions {
    margin-top: 8px;
}

.favorite-dialog .btn-save:disabled {
    background: #21262d;
    color: #6e7681;
    cursor: not-allowed;
}

/* ============================================
   VANITY ADDRESS DIALOG (Settings > Identities)
   Above Settings, below the question dialogs.
   ============================================ */
.vanity-modal {
    z-index: 10002;
}

.vanity-dialog {
    width: 480px;
}

.vanity-lead {
    margin: 0 0 8px 0;
    color: #e6edf3;
    font-size: 13px;
    line-height: 1.5;
}

.vanity-intro {
    margin: 0 0 12px 0;
    color: #8b949e;
    font-size: 12px;
    line-height: 1.5;
}

.vanity-info {
    margin: 0 0 12px 0;
    font-size: 12px;
    color: #8b949e;
}

.vanity-info summary {
    cursor: pointer;
    color: #58a6ff;
    user-select: none;
}

.vanity-info p {
    margin: 8px 0 0 0;
    line-height: 1.5;
}

.vanity-machine {
    margin: 4px 0 12px 0;
    padding: 6px 10px;
    border-left: 2px solid #30363d;
    color: #8b949e;
    font-size: 12px;
    line-height: 1.6;
}

.vanity-machine strong {
    color: #e6edf3;
}

.vanity-machine-warn {
    color: #d29922;
}

.vanity-kinds {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 12px;
}

.vanity-kind {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 8px 10px;
    background: #0d1117;
    border: 1px solid #30363d;
    border-radius: 6px;
    color: #c9d1d9;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}

.vanity-kind strong {
    font-size: 12.5px;
    font-weight: 600;
}

.vanity-kind span {
    color: #8b949e;
    font-size: 11.5px;
    line-height: 1.35;
}

.vanity-kind:hover {
    border-color: #484f58;
}

.vanity-kind.active {
    background: rgba(88, 166, 255, 0.10);
    border-color: #58a6ff;
    box-shadow: inset 0 0 0 1px #58a6ff;
}

.vanity-kind.active strong {
    color: #58a6ff;
}

@media (max-width: 420px) {
    .vanity-kinds {
        grid-template-columns: 1fr;
    }
}

.vanity-ideas {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}

.vanity-idea {
    background: #21262d;
    border: 1px solid #30363d;
    border-radius: 10px;
    color: #c9d1d9;
    padding: 2px 9px;
    font-size: 12px;
    cursor: pointer;
}

.vanity-idea:hover {
    border-color: #58a6ff;
    color: #e6edf3;
}

.favorite-field-note .vanity-idea {
    padding: 0 7px;
    font-size: 11px;
}

.vanity-estimate {
    min-height: 32px;
    color: #8b949e;
    font-size: 12px;
    line-height: 1.5;
}

.vanity-estimate strong {
    color: #e6edf3;
}

.vanity-estimate.slow {
    color: #d29922;
}

.vanity-target {
    color: #c9d1d9;
    font-size: 13px;
    margin-bottom: 10px;
}

.vanity-prefix,
.vanity-address strong {
    color: #3fb950;
}

.vanity-bar {
    height: 6px;
    background: #21262d;
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 12px;
}

.vanity-bar-fill {
    height: 100%;
    width: 0;
    background: #238636;
    transition: width 0.4s ease;
}

.vanity-stats {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px 14px;
    font-size: 12px;
    color: #8b949e;
}

.vanity-stats span:nth-child(even) {
    color: #e6edf3;
}

.vanity-luck {
    margin-top: 10px;
}

.vanity-address {
    background: #0d1117;
    border: 1px solid #30363d;
    border-radius: 4px;
    padding: 8px 10px;
    margin-bottom: 12px;
    color: #c9d1d9;
    font-size: 13px;
    word-break: break-all;
}

.vanity-export-hint {
    margin: -4px 0 10px 0;
    font-size: 11px;
}

.vanity-error {
    white-space: normal;
}

.vanity-found-button {
    border-color: #238636 !important;
    color: #3fb950 !important;
}

/* The search going on with the dialog closed: click to open it again. */
.vanity-pill {
    position: fixed;
    left: 16px;
    bottom: 60px;
    z-index: 10000;
    background: #161b22;
    border: 1px solid #30363d;
    border-radius: 14px;
    color: #c9d1d9;
    padding: 5px 12px;
    font-size: 12px;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.vanity-pill:hover {
    border-color: #58a6ff;
}

.vanity-pill.found {
    border-color: #238636;
    color: #3fb950;
}

.vanity-pill.error {
    border-color: #da3633;
    color: #ff7b72;
}

/* A favorite added by hash alone, while its name is looked up. */
.favorite-name.pending {
    color: #7d8590;
    font-style: italic;
}

/* Which name a favorite keeps: two buttons side by side, one chosen. */
.favorite-prefer {
    display: flex;
    gap: 6px;
    margin-top: 8px;
}

.favorite-prefer-option {
    flex: 1;
    position: relative;
    cursor: pointer;
}

.favorite-prefer-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.favorite-prefer-option span {
    display: block;
    padding: 7px 8px;
    border: 1px solid #30363d;
    border-radius: 4px;
    background: #0d1117;
    color: #8b949e;
    font-size: 11px;
    font-weight: 600;
    text-align: center;
    transition: border-color 0.12s ease, background-color 0.12s ease, color 0.12s ease;
}

.favorite-prefer-option:hover span {
    border-color: #444c56;
    color: #c9d1d9;
}

.favorite-prefer-option input:checked + span {
    border-color: #58a6ff;
    background: rgba(56, 139, 253, 0.12);
    color: #e6edf3;
}

.favorite-prefer-option input:focus-visible + span {
    outline: 2px solid #58a6ff;
    outline-offset: 1px;
}

.favorite-prefer-option.disabled {
    cursor: not-allowed;
}

.favorite-prefer-option.disabled span {
    opacity: 0.4;
    border-color: #30363d;
    color: #8b949e;
}

/* ───────────────────────────────────────────────────────────────────────
   Quick search: sidebar results and address bar suggestions
   ─────────────────────────────────────────────────────────────────────── */

/* Above the filtered node list while searching: matching favorites and
   saved pages, then a heading for the list itself. */
.search-extra {
    padding: 4px 6px 0;
}

.search-extra-head {
    padding: 8px 4px 4px;
    color: #8b949e;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.search-extra-head span {
    color: #58a6ff;
    margin-left: 4px;
}

.search-extra-head i {
    font-style: normal;
    font-weight: 400;
    text-transform: none;
    color: #6e7681;
    margin-left: 6px;
}

.search-extra-row,
.omnibox-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 4px;
    cursor: pointer;
    min-width: 0;
}

.search-extra-row:hover,
.omnibox-row:hover,
.omnibox-row.active {
    background: #21262d;
}

.search-extra-icon,
.omnibox-icon {
    flex-shrink: 0;
    width: 14px;
    text-align: center;
    color: #8b949e;
    font-size: 12px;
    line-height: 1;
}

.search-extra-icon.fav,
.omnibox-icon.fav {
    color: #ffa657;
}

.omnibox-icon.node {
    color: #40ed3a;
    font-size: 9px;
}

.search-extra-text,
.omnibox-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.search-extra-name,
.search-extra-sub,
.omnibox-label,
.omnibox-sub {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.search-extra-name,
.omnibox-label {
    color: #e6edf3;
    font-size: 12px;
}

.search-extra-name em {
    font-style: normal;
    color: #8b949e;
    font-size: 11px;
}

.search-extra-sub,
.omnibox-sub {
    color: #6e7681;
    font-size: 10px;
}

/* A saved page found by a search: the node's name, then the page (title and
   path), then the words found - up to two lines of them. */
.search-extra-name,
.omnibox-label {
    font-weight: 600;
}

.search-extra-page,
.omnibox-page {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #8b949e;
    font-size: 10.5px;
}

.search-extra-row .search-extra-page + .search-extra-sub,
.omnibox-row .omnibox-page + .omnibox-sub {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    color: #adbac7;
    font-size: 10.5px;
    line-height: 1.35;
    margin-top: 1px;
}

.search-extra-row:hover .search-extra-name,
.omnibox-row:hover .omnibox-label,
.omnibox-row.active .omnibox-label {
    color: #58a6ff;
}

.search-extra mark,
.omnibox-menu mark {
    background: rgba(255, 214, 10, 0.25);
    color: #ffd60a;
    border-radius: 2px;
}

.search-extra-more {
    display: block;
    width: 100%;
    margin: 2px 0;
    padding: 5px 8px;
    background: none;
    border: 1px dashed #30363d;
    border-radius: 4px;
    color: #58a6ff;
    font-size: 11px;
    text-align: left;
    cursor: pointer;
}

.search-extra-more:hover {
    border-color: #58a6ff;
}

/* A node shown because the text of one of its saved pages matched. */
.node-item.content-match {
    border-left: 2px solid #ffd60a;
}

/* Under the address bar, fixed to the window so the nav bar does not clip
   it; placed by omniboxRender(). */
.omnibox-menu {
    position: fixed;
    z-index: 3000;
    max-height: min(60vh, 460px);
    overflow-y: auto;
    padding: 4px;
    background: #161b22;
    border: 1px solid #3d444d;
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(1, 4, 9, 0.6);
    scrollbar-width: thin;
    scrollbar-color: #3d444d transparent;
}

.omnibox-kind {
    flex-shrink: 0;
    color: #6e7681;
    font-size: 10px;
}

.omnibox-empty {
    padding: 8px 10px;
    color: #6e7681;
    font-size: 12px;
}

@media (max-width: 767px), (pointer: coarse) and (max-height: 500px) {
    .omnibox-kind {
        display: none;
    }
    .omnibox-row,
    .search-extra-row {
        padding: 8px;
    }
}

/* Busy while the network is asked for a path. */
.path-btn.busy svg {
    animation: reload-spin 1.2s linear infinite;
}

.notification .notif-action {
    margin-top: 8px;
    padding: 4px 10px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 4px;
    color: inherit;
    font-size: 12px;
    cursor: pointer;
}

.notification .notif-action:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* The tab strip scrolls sideways by itself (.tabs-container); the bar
   around it was 3px too short for its content and showed a vertical
   scrollbar at the right end. */
.tab-bar {
    overflow-y: hidden !important;
}

/* The copy and envelope icons were 12px and hard to hit. */
.node-item .copy-icon svg,
.node-item .operator-icon svg {
    width: 14px;
    height: 14px;
}

.node-item .copy-icon,
.node-item .operator-icon {
    padding: 3px;
    margin: -3px -1px -3px -3px;
}

/* The node hash reads as a link: it opens the node's page. */
.node-item .hash-text {
    cursor: pointer;
}

/* A long press opens the card's menu: no text selection or system
   callout on top of it. */
@media (pointer: coarse) {
    .node-item {
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        user-select: none;
    }
}

.node-item .hash-text:hover {
    color: #58a6ff;
    text-decoration: underline;
}


/* Settings > Hidden nodes */
.hidden-nodes-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 6px;
    max-height: 240px;
    overflow-y: auto;
}

.hidden-node-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 6px;
    background: #0d1117;
    border: 1px solid #30363d;
    border-radius: 4px;
}

.hidden-node-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.hidden-node-name,
.hidden-node-hash {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hidden-node-name {
    color: #e6edf3;
    font-size: 12px;
}

.hidden-node-hash {
    color: #6e7681;
    font-size: 10px;
    font-family: monospace;
}

.hidden-node-row .settings-export,
.hidden-node-restore-all {
    margin: 0;
    flex-shrink: 0;
}

.hidden-node-restore-all {
    align-self: flex-start;
    margin-top: 4px;
}

/* The menu on a node's hash or operator address (showNodeMenu). */
.node-menu {
    position: fixed;
    z-index: 3000;
    min-width: 200px;
    max-width: min(320px, calc(100vw - 16px));
    padding: 4px;
    background: #161b22;
    border: 1px solid #3d444d;
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(1, 4, 9, 0.6);
    /* Long menus (an RRC room's, for an operator) scroll inside the window. */
    max-height: calc(100vh - 16px);
    max-height: calc(100dvh - 16px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #30363d transparent;
}

/* A group's name inside a menu ("Operator", "Server operator"). */
.node-menu-group {
    padding: 6px 10px 2px;
    color: #8b949e;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.node-menu-item .node-menu-check {
    display: inline-block;
    width: 14px;
    color: #3fb950;
}

.node-menu-head {
    position: relative;
    padding: 6px 26px 6px 8px;
    border-bottom: 1px solid #30363d;
    margin-bottom: 4px;
}

/* The x, for a menu opened by mistake (openNodeMenu). */
.node-menu-close {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 20px;
    height: 20px;
    padding: 0;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: #7d8590;
    font-size: 16px;
    line-height: 20px;
    cursor: pointer;
}

.node-menu-close:hover {
    background: #30363d;
    color: #e6edf3;
}

.node-menu-title {
    color: #e6edf3;
    font-size: 12px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.node-menu-sub {
    color: #6e7681;
    font-size: 10px;
    font-family: monospace;
    word-break: break-all;
}

.node-menu-item {
    display: block;
    width: 100%;
    padding: 6px 10px;
    background: none;
    border: none;
    border-radius: 4px;
    color: #c9d1d9;
    font-size: 12px;
    text-align: left;
    cursor: pointer;
}

.node-menu-item:hover {
    background: #21262d;
    color: #58a6ff;
}

.node-menu-item.danger:hover {
    color: #f85149;
    background: rgba(248, 81, 73, 0.12);
}

.node-menu-sep {
    height: 1px;
    margin: 4px 6px;
    background: #30363d;
}

/* The operator address now opens a menu too. */
.node-item .operator-text {
    cursor: pointer;
}

.node-item .operator-text:hover .operator-addr {
    color: #a371f7;
    text-decoration: underline;
}

/* Settings > Terminal log: one checkbox per kind of line. */
.terminal-log-options {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 4px 12px;
    margin-top: 6px;
}

.terminal-log-option {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #c9d1d9;
    font-size: 12px;
    cursor: pointer;
}

/* ============================================
   MESSAGES (LXMF) - script/messenger.js
   ============================================ */

/* No shortcut bar in Messages: the view reaches the bottom of the window. */
body.messenger-open .content,
body.retibbs-open .content,
body.rmap-open .content,
body.rrc-open .content {
    padding-bottom: 0;
}

/* ============================================
   RETIBBS - script/retibbs.js
   ============================================ */

.retibbs-view.active {
    flex-direction: row;
    background: #0d1117;
    color: #e6edf3;
}

.bbs-side {
    width: 300px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
    border-right: 1px solid #30363d;
    background: #0f141b;
}

.bbs-side-head {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 52px;
    padding: 0 10px 0 12px;
    background: #0d1117;            /* the top bars: as dark as RMAP's */
    border-bottom: 1px solid #30363d;
}

.bbs-title {
    display: flex;
    align-items: center;
    gap: 7px;
    flex: 1;
    font-weight: 700;
    font-size: 15px;
    color: #e6edf3;
}

.bbs-title svg {
    color: #d29922;
}

.bbs-connect {
    display: flex;
    gap: 6px;
    padding: 10px 10px 0;
}

.bbs-connect .msg-search {
    flex: 1;
    min-width: 0;
}

/* Inside the column, margins included (it went past the edge); more
   specific than .msg-search's width: 100%, which comes later in the file. */
.bbs-side .msg-search.bbs-filter {
    display: block;
    margin: 8px 10px 0;
    width: calc(100% - 20px);
    box-sizing: border-box;
}

/* Terminal FX: a CRT, scanlines and glow; lines scrolling in. */
.retibbs-view.bbs-fx .bbs-screen {
    text-shadow: 0 0 2px rgba(201, 209, 217, 0.55), 0 0 7px rgba(88, 166, 255, 0.18);
    animation: bbs-flicker 7s infinite;
}

.retibbs-view.bbs-fx .bbs-screens::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 2px,
                                          rgba(0, 0, 0, 0.22) 3px);
    box-shadow: inset 0 0 70px rgba(0, 0, 0, 0.75);
    z-index: 1;
}

.bbs-modem {
    color: #3fb950;
    letter-spacing: 0.04em;
}

.bbs-reveal {
    overflow: hidden;
}

@keyframes bbs-reveal {
    from { max-height: 0; }
    to { max-height: var(--h); }
}

@keyframes bbs-appear {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes bbs-flicker {
    0%, 96%, 100% { opacity: 1; }
    97% { opacity: 0.94; }
    98% { opacity: 1; }
    99% { opacity: 0.97; }
}

@media (prefers-reduced-motion: reduce) {
    .retibbs-view.bbs-fx .bbs-screen {
        animation: none;
    }
}

.bbs-identity {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 12px 2px;
    color: #8b949e;
    font-size: 12px;
}

.bbs-identity b {
    color: #c9d1d9;
}

.bbs-servers {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding-bottom: 10px;
}

.bbs-section-title {
    display: flex;
    justify-content: space-between;
    width: 100%;
    border: none;
    background: none;
    cursor: pointer;
    text-align: left;
    padding: 12px 12px 4px;
    color: #8b949e;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.bbs-section-title:hover {
    color: #c9d1d9;
}

.bbs-caret {
    display: inline-block;
    width: 14px;
}

/* Who we are on the server shown. */
.bbs-head-me {
    color: #8b949e;
    font-size: 12.5px;
}

.bbs-head-me b {
    color: #79c0ff;
}

.bbs-head-me code {
    color: #6e7681;
    font-size: 10.5px;
}

.bbs-server {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 10px 8px 8px;
    border-left: 3px solid transparent;
    cursor: pointer;
}

.bbs-server:hover {
    background: #161b22;
}

.bbs-server.active {
    background: #161b22;
    border-left-color: #d29922;
}

/* A server with a tab open (connected or not): its name underlined. */
.bbs-server.open .bbs-server-title {
    text-decoration: underline;
    text-decoration-color: #d29922;
    text-underline-offset: 3px;
}

.bbs-server-text {
    flex: 1;
    min-width: 0;
}

.bbs-server-name {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    font-size: 13.5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bbs-server code {
    display: block;
    color: #8b949e;
    font-size: 10.5px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bbs-server-meta {
    color: #6e7681;
    font-size: 11px;
    margin-top: 2px;
}

/* The name gives way, the kind of BBS stays whole at the end of the line. */
.bbs-server-title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bbs-type {
    flex: none;
    margin-left: auto;
    padding: 0 6px;
    border: 1px solid #30363d;
    border-radius: 9px;
    color: #8b949e;
    font-size: 10px;
    font-weight: 500;
    line-height: 16px;
    cursor: help;
}

/* Between kinds of BBS in one section (only when there is more than one). */
.bbs-type-sep {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 8px 10px 4px;
    color: #6e7681;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* NomadNet BBS rows: no star (they are node list favourites), same indent. */
.bbs-star-none {
    cursor: default;
}

.bbs-type-sep::after {
    content: "";
    flex: 1;
    border-top: 1px solid #30363d;
}

.bbs-star {
    flex-shrink: 0;
    width: 22px;
    padding: 0;
    border: none;
    background: none;
    color: #6e7681;
    font-size: 16px;
    line-height: 1.2;
    cursor: pointer;
}

.bbs-star.on,
.bbs-star:hover {
    color: #e3b341;
}

/* Settings > RRC chat: Default nick (field + switch), and Hubs. */
.rrc-nick-default {
    display: flex;
    align-items: center;
    gap: 8px;
}

.rrc-hubset {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 2px 0 10px;
}

.rrc-hubset-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 0.9fr) auto;
    align-items: center;
    gap: 8px;
}

.rrc-hubset-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
}

.rrc-hubset-name code {
    color: #6e7681;
    font-size: 11px;
    margin-left: 4px;
}

.rrc-hubset-row .settings-select,
.rrc-hubset-row .settings-input {
    width: 100%;
    min-width: 0;
}

@media (max-width: 600px) {
    .rrc-hubset-row {
        grid-template-columns: minmax(0, 1fr) auto;
    }
    .rrc-hubset-name { grid-column: 1 / 2; grid-row: 1; }
    .rrc-hubset-forget { grid-column: 2 / 3; grid-row: 1; }
    .rrc-hubset-id, .rrc-hubset-nick { grid-column: 1 / -1; }
}

/* RRC hub list: the star, and under it ⚡ = connect at start. */
.rrc-star-col {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.rrc-auto {
    width: 22px;
    padding: 0;
    border: none;
    background: none;
    font-size: 12px;
    line-height: 1.2;
    cursor: pointer;
    filter: grayscale(1);
    opacity: 0.35;
}

.rrc-auto:hover {
    opacity: 0.7;
}

.rrc-auto.on {
    filter: none;
    opacity: 1;
}

.bbs-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.bbs-head {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: 8px 14px;
    background: #0d1117;
    border-bottom: 1px solid #30363d;
}

.bbs-head[hidden] {
    display: none;
}

.bbs-head-who {
    min-width: 0;
}

.bbs-head-name {
    font-weight: 700;
    font-size: 15px;
}

.bbs-head-who code {
    color: #8b949e;
    font-size: 11px;
    cursor: pointer;
}

.bbs-head-where {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
    color: #8b949e;
    font-size: 12.5px;
}

.bbs-head-where b {
    color: #e3b341;
}

.bbs-head-actions {
    display: flex;
    gap: 6px;
}

.bbs-state {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    background: #6e7681;
}

.bbs-state-connected {
    background: #3fb950;
}

.bbs-state-connecting {
    background: #d29922;
}

.bbs-state-failed {
    background: #f85149;
}

.bbs-screens {
    flex: 1;
    min-height: 0;
    position: relative;
}

.bbs-empty {
    position: absolute;
    inset: 0;
}

/* The terminal: what the server writes, as it writes it. */
.bbs-screen {
    position: absolute;
    inset: 0;
    overflow-y: auto;
    padding: 12px 16px;
    background: #010409;
    color: #c9d1d9;
    font-family: var(--mono-font) !important;
    font-size: 13px;
    /* Tight, as in a terminal: box drawing and block art join up. */
    line-height: 1.2;
    white-space: pre-wrap;
    word-break: break-word;
}

.bbs-screen * {
    font-family: var(--mono-font) !important;
}

.bbs-me,
.bbs-system {
    margin: 4px 0;
}

.bbs-me {
    color: #79c0ff;
}

.bbs-system {
    color: #8b949e;
    font-style: italic;
}

.bbs-input-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-top: 1px solid #30363d;
    background: #0d1117;
}

.bbs-input-row[hidden] {
    display: none;
}

.bbs-prompt {
    color: #3fb950;
    font-family: var(--mono-font) !important;
    font-weight: 700;
}

.bbs-input {
    flex: 1;
    min-width: 0;
    padding: 8px 10px;
    border: 1px solid #30363d;
    border-radius: 8px;
    background: #010409;
    color: #e6edf3;
    font-family: var(--mono-font) !important;
    font-size: 13px;
}

.bbs-input:focus {
    outline: none;
    border-color: #58a6ff;
}

.bbs-input:disabled {
    opacity: 0.5;
}

/* RRC: a textarea, one line until Shift+Enter makes more (rrcGrow). */
.rrc-input-area {
    display: block;
    resize: none;
    line-height: 20px;
    height: 38px;
    overflow-y: auto;
    white-space: pre-wrap;
}

.rrc-input-row:has(.rrc-input-area.tall) {
    align-items: flex-end;
}

@media (max-width: 700px), (pointer: coarse) and (max-height: 500px) {
    .retibbs-view.active {
        flex-direction: column;
    }

    /* The list or the terminal fills the screen: a server open shows its
       terminal, with a back arrow to the list. */
    .bbs-side {
        width: 100%;
        flex: 1;
        border-right: none;
    }

    .retibbs-view.bbs-has-session .bbs-side {
        display: none;
    }

    .retibbs-view:not(.bbs-has-session) .bbs-main {
        display: none;
    }

    .bbs-head .msg-back {
        display: inline-block;
    }

    .bbs-head {
        gap: 8px;
        padding: 6px 10px;
    }

    .bbs-head-me {
        flex-basis: 100%;
        word-break: break-all;
    }

    .bbs-screen {
        padding: 8px;
        white-space: pre;
        overflow-x: auto;
    }

    /* Blocks as wide as their text, so the widest line can be measured. */
    .bbs-line {
        width: max-content;
        min-width: 100%;
    }
}

/* The tab: icon and name between the page tabs and "+", kept in view like
   "+". On a phone only the icon (the name is hidden in the media query). */
.tab-messages {
    min-width: 0;
    max-width: none;
    width: auto;
    padding: 8px 10px;
    gap: 6px;
    justify-content: center;
    position: sticky;
    right: 36px;
    z-index: 5;
    color: #8b949e;
}

/* An app switched off in Settings: .tab sets display:flex, which beats the
   hidden attribute, so the tab stayed in the bar. */
.tab-messages[hidden] {
    display: none !important;
}

.tab-app-label {
    font-size: 12px;
    font-weight: 600;
}

.tab-messages:hover {
    color: #58a6ff;
    background: #21262d;
}

.tab-messages.active {
    color: #e6edf3;
}

/* App tabs (LXMF, RRC, BBS, RMAP): the state at a glance (setAppTabState). */
.app-tab-state {
    width: 7px;
    height: 7px;
    margin-right: 2px;
    align-self: center;
}

/* × at the end of an app tab: switches the client off (after asking). */
.app-tab-off {
    margin-left: 4px;
    padding: 0 3px;
    border-radius: 4px;
    color: #6e7681;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
}

.app-tab-off:hover {
    color: #f0f6fc;
    background: rgba(248, 81, 73, 0.35);
}

/* Page tabs: the NomadNet icon between the dot and the title. */
.page-tab-icon {
    display: inline-flex;
    flex: none;
    margin-right: 5px;
    color: #8b949e;
}

/* Phones: the app tabs are only icons, managed from Settings; page tabs
   keep the dot and the title, no room for the icon. */
@media (max-width: 767px), (pointer: coarse) and (max-height: 500px) {
    .app-tab-off,
    .page-tab-icon {
        display: none;
    }
}

.tab-messages-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 15px;
    height: 15px;
    padding: 0 4px;
    border-radius: 8px;
    background: #f85149;
    color: #fff;
    font-size: 9.5px;
    font-weight: 700;
    line-height: 15px;
    text-align: center;
    box-shadow: 0 0 0 2px #0d1117;
}

.messenger-view {
    --msg-accent: #388bfd;
    --msg-accent-2: #8957e5;
    background: #0d1117;
    color: #e6edf3;
}

/* ─── Top bar ─── */

.msg-bar {
    position: relative;
    display: flex;
    align-items: stretch;
    min-height: 52px;
    background: #0d1117;
    border-bottom: 1px solid #30363d;
}

/* As wide as .msg-list, so its edge continues the list's. */
.msg-bar-head {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 300px;
    flex-shrink: 0;
    box-sizing: border-box;
    padding: 8px 12px;
    border-right: 1px solid #30363d;
}

.msg-bar-main {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 12px;
}

.msg-lxmf {
    color: #e3b341;
}

.msg-identity-label {
    color: #8b949e;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

/* Us: avatar, announced name, pencil - before the identity in use. */
.msg-me {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    padding-right: 10px;
    margin-right: 2px;
    border-right: 1px solid #30363d;
}

.msg-me[hidden] {
    display: none;
}

.msg-me .msg-avatar {
    cursor: pointer;
    flex-shrink: 0;
}

.msg-me-name {
    font-weight: 600;
    font-size: 13px;
    color: #e6edf3;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.msg-me-name.unnamed {
    color: #8b949e;
    font-style: italic;
}

.msg-me .msg-rename-btn {
    margin-left: 0;
}

.msg-menu-nick {
    color: #c9d1d9;
    font-size: 11px;
}

.msg-bar-title {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-weight: 800;
    font-size: 15px;
    letter-spacing: 0.3px;
    white-space: nowrap;
}

.msg-bar-title svg {
    color: #58a6ff;
}

.msg-sort {
    margin-left: auto;
    background: #161b22;
    border: 1px solid #30363d;
    color: #c9d1d9;
    border-radius: 8px;
    padding: 4px 6px;
    font-size: 12px;
    font-family: inherit;
    cursor: pointer;
}

.msg-sort:hover,
.msg-sort:focus {
    border-color: #58a6ff;
    outline: none;
}

.msg-identity-wrap {
    position: relative;
    flex: 1;
    min-width: 0;
    display: flex;
}

.msg-identity {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    max-width: 100%;
    min-width: 0;
    padding: 5px 10px;
    border: 1px solid rgba(63, 185, 80, 0.45);
    border-radius: 16px;
    background: rgba(63, 185, 80, 0.09);
    color: #e6edf3;
    font-family: inherit;
    font-size: 12px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.msg-identity:hover {
    background: rgba(63, 185, 80, 0.16);
}

.msg-identity.ephemeral {
    border-color: rgba(210, 153, 34, 0.6);
    background: rgba(210, 153, 34, 0.1);
}

.msg-identity.off {
    border-color: #f85149;
    background: rgba(248, 81, 73, 0.08);
    color: #ffa198;
}

.msg-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #3fb950;
    box-shadow: 0 0 0 3px rgba(63, 185, 80, 0.2);
    flex-shrink: 0;
}

.msg-identity.ephemeral .msg-dot {
    background: #d29922;
    box-shadow: 0 0 0 3px rgba(210, 153, 34, 0.2);
}

.msg-identity-name {
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.msg-identity-icon {
    display: none;
    flex-shrink: 0;
}

/* A narrow messenger on a desktop (a small window with the node list open):
   the bar's head kept 300px for itself and left the buttons ~100px, one
   under the other. Below 760px it goes on top, the buttons under it at full
   width - as on a phone. */
@media (min-width: 701px) and (pointer: fine), (min-width: 701px) and (min-height: 501px) {
    .messenger-view {
        container: msgview / inline-size;
    }
    @container msgview (max-width: 760px) {
        .msg-bar { flex-direction: column; }
        .msg-bar-head {
            width: auto;
            border-right: none;
            border-bottom: 1px solid #30363d;
            padding: 6px 10px;
        }
        .msg-bar-main { padding: 6px 10px; }
    }
}

/* A narrow bar (desktop, a small window): the badge gives way step by step
   instead of running over + New / + Contact - first the label, then the
   address, then only the dot and an icon; a click still opens the menu and
   the tooltip says who you write as. Phones put the badge on a row of its
   own (below), so not there. */
@media (min-width: 768px) and (pointer: fine), (min-width: 768px) and (min-height: 501px) {
    .msg-bar-main {
        container: msgbar / inline-size;
    }
    @container msgbar (max-width: 1300px) {
        .msg-identity-label { display: none; }
    }
    @container msgbar (max-width: 1180px) {
        .msg-identity code { display: none; }
        .msg-identity-wrap { flex: 0 1 auto; max-width: 220px; }
    }
    @container msgbar (max-width: 950px) {
        .msg-identity-wrap { flex: 0 0 auto; max-width: none; }
        .msg-identity { padding: 5px 8px; gap: 5px; }
        .msg-identity-name,
        .msg-identity .msg-eph-timer { display: none; }
        .msg-identity-icon { display: inline-flex; }
    }
}

.msg-identity code {
    color: #8b949e;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* Unread messages on our other identities (they all listen). */
.msg-other-unread {
    flex-shrink: 0;
    min-width: 18px;
    padding: 1px 6px;
    border-radius: 9px;
    background: #1f6feb;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    text-align: center;
}

.msg-toast-to {
    color: #79c0ff;
    font-size: 12px;
}

/* Time left before the ephemeral identity changes. */
.msg-eph-timer {
    flex-shrink: 0;
    padding: 1px 6px;
    border-radius: 8px;
    background: rgba(210, 153, 34, 0.15);
    color: #d29922;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.msg-caret {
    color: #8b949e;
    font-size: 10px;
}

.msg-identity-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 50;
    width: min(360px, calc(100vw - 24px));
    padding: 6px;
    border: 1px solid #30363d;
    border-radius: 10px;
    background: #161b22;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
}

/* The same menu under the identity button of the page bar. */
.identity-chip-menu {
    z-index: 3000;
}

.msg-menu-head {
    padding: 4px 8px 6px;
    color: #8b949e;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

.msg-menu-item {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 7px 8px;
    border: none;
    border-radius: 7px;
    background: none;
    color: #e6edf3;
    font-family: inherit;
    font-size: 12.5px;
    text-align: left;
    cursor: pointer;
}

.msg-menu-item:hover {
    background: #21262d;
}

.msg-menu-item.current {
    background: rgba(56, 139, 253, 0.14);
}

.msg-menu-item.ephemeral b {
    color: #d29922;
}

.msg-menu-item.plain {
    color: #c9d1d9;
    font-size: 12px;
}

.msg-menu-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.msg-menu-text code {
    color: #8b949e;
    font-size: 10.5px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.msg-menu-check {
    color: #3fb950;
    font-weight: 700;
}

.msg-menu-sep {
    height: 1px;
    margin: 5px 4px;
    background: #30363d;
}

.msg-bar-btn {
    background: #21262d;
    border: 1px solid #30363d;
    color: #c9d1d9;
    border-radius: 8px;
    padding: 6px 11px;
    font-size: 12px;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 0.15s, color 0.15s, background 0.15s, transform 0.1s;
}

.msg-bar-btn:hover {
    border-color: #58a6ff;
    color: #58a6ff;
}

.msg-bar-btn:active {
    transform: translateY(1px);
}

.msg-bar-btn:disabled {
    opacity: 0.6;
    cursor: default;
}

/* Cannot sync now: looks off, but a click still says why. */
.msg-bar-btn.unusable {
    opacity: 0.6;
}

.msg-settings-btn {
    display: inline-flex;
    align-items: center;
    padding: 6px 8px;
}

.msg-bar-btn.primary {
    background: #238636;
    border-color: #2ea043;
    color: #fff;
    font-weight: 600;
}

.msg-bar-btn.primary:hover {
    filter: brightness(1.12);
    color: #fff;
}

.msg-bar-btn.danger:hover {
    border-color: #f85149;
    color: #f85149;
}

.msg-close {
    width: 32px;
    height: 32px;
    border: 1px solid #30363d;
    border-radius: 8px;
    background: #21262d;
    color: #c9d1d9;
    font-size: 19px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.msg-close:hover {
    background: rgba(248, 81, 73, 0.15);
    border-color: #f85149;
    color: #f85149;
}

/* ─── Body ─── */

.msg-body {
    flex: 1;
    display: flex;
    min-height: 0;
    position: relative;
}

/* Announced peers: left of the conversations, closed by default. */
.msg-peers {
    width: 290px;
    flex-shrink: 0;
    overflow-y: auto;
    border-right: 1px solid #30363d;
    background: #0d1117;
}

.msg-peers[hidden] {
    display: none;
}

.msg-peers-title {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 7px;
    font-weight: 600;
    font-size: 12.5px;
}

.msg-peers-count {
    color: #8b949e;
    font-weight: 400;
}

.msg-peers-title .msg-close {
    margin-left: auto;
}

.msg-peers-head {
    flex-direction: column;
    align-items: stretch;
}

.msg-peer-row code {
    font-family: var(--mono-font);
    font-size: 10.5px;
}

.msg-peers-toggle.active {
    border-color: #58a6ff;
    color: #58a6ff;
}

.msg-list {
    width: 300px;
    flex-shrink: 0;
    overflow-y: auto;
    border-right: 1px solid #30363d;
    background: #0f141b;
}

.msg-avatar {
    --av-h: 210;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, hsl(var(--av-h), 65%, 46%), hsl(calc(var(--av-h) + 40), 70%, 34%));
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}

.msg-avatar[data-peer] {
    cursor: pointer;
    transition: transform 0.12s, box-shadow 0.12s;
}

.msg-avatar[data-peer]:hover {
    transform: scale(1.06);
    box-shadow: 0 0 0 2px rgba(88, 166, 255, 0.55), 0 2px 6px rgba(0, 0, 0, 0.35);
}

/* Contact colour dialog (right-click on a contact's logo). */
.avatar-colors-dialog {
    width: min(400px, 94vw);
    min-width: 0;
}

/* The contact as it will look, centred over the colours. */
.avatar-colors-preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin-bottom: 16px;
    min-width: 0;
    text-align: center;
}

.msg-avatar.avatar-colors-big {
    width: 64px;
    height: 64px;
    margin-bottom: 6px;
    font-size: 26px;
    transition: background 0.15s;
}

.avatar-colors-name {
    color: #e6edf3;
    font-weight: 700;
    font-size: 15px;
}

.avatar-colors-addr {
    display: block;
    max-width: 100%;
    color: #7d8590;
    font-size: 11px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.avatar-colors-choice {
    margin-top: 4px;
    color: #c9d1d9;
    font-size: 12px;
}

.avatar-colors-choice.auto {
    color: #58a6ff;
}

/* The automatic swatch: its arrow says "back to automatic". */
.avatar-swatch.auto .msg-avatar {
    color: #fff;
}

.avatar-colors-grid {
    display: grid;
    /* Automatic + 19 colours: two rows of ten. */
    grid-template-columns: repeat(10, 1fr);
    gap: 4px;
    margin-bottom: 14px;
}

/* Ten to a row whatever the width: each swatch takes its share of the row
   and the circle inside follows it, up to 28px. */
.avatar-swatch {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    padding: 2px;
    background: none;
    border: 2px solid transparent;
    border-radius: 50%;
    cursor: pointer;
}

.avatar-swatch .msg-avatar {
    width: 100%;
    max-width: 28px;
    height: auto;
    aspect-ratio: 1;
    font-size: 11px;
    box-shadow: none;
}

.avatar-swatch:hover {
    border-color: #30363d;
}

.avatar-swatch.active {
    border-color: #58a6ff;
}

.avatar-colors-slider {
    width: 100%;
    margin: 0 0 12px;
    accent-color: #58a6ff;
}

/* Material Design Icons (Pictogrammers Free License, Apache 2.0 icons - see
   templates/fonts/MaterialDesignIcons-LICENSE.txt): Sideband's contact icons. */
@font-face {
    font-family: 'MaterialDesignIcons';
    src: url('/templates/fonts/MaterialDesignIcons.woff2') format('woff2');
    font-display: block;
}

/* !important: the * rule puts the interface font on everything. */
.msg-avatar .mdi-glyph {
    font-family: 'MaterialDesignIcons' !important;
    font-style: normal;
    font-weight: normal;
    font-size: 1.5em;
    line-height: 1;
}

.msg-avatar.small {
    width: 28px;
    height: 28px;
    font-size: 12px;
}

.msg-avatar.large {
    width: 42px;
    height: 42px;
    font-size: 17px;
}

/* A conversation card is as tall as the open chat's header, so the first
   card lines up with it. */
.msg-conv,
.msg-chat-head {
    box-sizing: border-box;
    min-height: 80px;
}

.msg-conv {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-bottom: 1px solid #30363d;
    cursor: pointer;
    transition: background 0.12s;
}

.msg-conv:hover {
    background: #161b22;
}

.msg-conv.active {
    background: rgba(56, 139, 253, 0.12);
    box-shadow: inset 3px 0 0 #58a6ff;
}

.msg-conv-main {
    flex: 1;
    min-width: 0;
}

.msg-conv-top,
.msg-conv-bottom {
    display: flex;
    align-items: center;
    gap: 8px;
}

.msg-conv-name {
    flex: 1;
    min-width: 0;
    font-weight: 700;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.msg-conv.unread .msg-conv-name,
.msg-conv.unread .msg-conv-last {
    color: #fff;
    font-weight: 700;
}

.msg-conv-time {
    color: #6e7681;
    font-size: 11px;
}

/* ★ on a conversation card: gold when a favourite, otherwise shown only
   under the pointer (always, faint, on touch screens). */
/* Before the name, as big as it. */
.msg-conv-star {
    flex-shrink: 0;
    margin-right: -3px;
    padding: 0;
    border: none;
    background: transparent;
    color: #6e7681;
    font-size: 16px;
    font-family: inherit;
    line-height: 1;
    cursor: pointer;
    opacity: 0.4;
    transition: opacity 0.15s, color 0.15s, transform 0.1s;
}

/* Always there, as in the node list: faint, or gold for a favourite. */
.msg-conv-star:hover,
.msg-conv-star:focus-visible {
    opacity: 1;
    color: #e3b341;
    transform: scale(1.15);
}

.msg-conv-star.on {
    opacity: 1;
    color: #e3b341;
}

/* The same star by the name in a chat's bar and in Customize contact. */
.msg-chat-name-row .msg-conv-star {
    margin-right: 4px;
}

.avatar-colors-name .msg-conv-star {
    margin-right: 4px;
    vertical-align: -1px;
}

/* Between the favourite contacts and the others. */
.msg-fav-sep {
    height: 1px;
    margin: 4px 12px;
    background: rgba(227, 179, 65, 0.35);
}

/* Share contact list between identities: whose contacts follow. */
.msg-share-sep {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 10px 12px 4px;
    color: #8b949e;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.msg-share-own {
    margin-top: 6px;
}

.msg-share-sep b {
    color: #c9d1d9;
    text-transform: none;
    letter-spacing: 0;
}

.msg-share-sep::after {
    content: "";
    flex: 1;
    border-top: 1px solid #30363d;
}

.msg-conv-addr {
    display: block;
    color: #8b949e;
    font-size: 11px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.msg-conv-bottom {
    margin-top: 4px;
}

.msg-conv-icon {
    display: inline-flex;
    flex-shrink: 0;
    color: #6e7681;
}

.msg-conv.unread .msg-conv-icon {
    color: #f85149;
}

.msg-conv-last {
    flex: 1;
    min-width: 0;
    color: #8b949e;
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.msg-conv-unread {
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: #f85149;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}

/* ─── Chat ─── */

/* The chat column: tabs of the open chats above the chat shown. */
.msg-chat-col {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: #0d1117;
}

.msg-chat {
    flex: 1;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: #0d1117;
}

.msg-tabs {
    display: flex;
    gap: 4px;
    padding: 6px 8px 0;
    border-bottom: 1px solid #30363d;
    background: #010409;
    overflow-x: auto;
    scrollbar-width: thin;
    flex-shrink: 0;
}

.msg-tabs[hidden] {
    display: none;
}

.msg-tab {
    display: flex;
    align-items: center;
    gap: 6px;
    max-width: 220px;
    min-width: 0;
    padding: 5px 6px 5px 8px;
    border: 1px solid #30363d;
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    background: #0d1117;
    color: #8b949e;
    font-size: 12.5px;
    cursor: pointer;
    flex-shrink: 0;
}

.msg-tab:hover {
    color: #e6edf3;
}

.msg-tab.active {
    background: #161b22;
    color: #e6edf3;
    border-color: #58a6ff;
    box-shadow: inset 0 2px 0 #58a6ff;
}

.msg-tab-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* A chat of another of our identities: which one, in small. */
.msg-tab-id {
    flex-shrink: 0;
    padding: 0 5px;
    border-radius: 6px;
    background: rgba(121, 192, 255, 0.12);
    color: #79c0ff;
    font-size: 10.5px;
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.msg-tab.other {
    border-style: dashed;
}

.msg-tab .msg-conv-unread {
    flex-shrink: 0;
}

.msg-tab-close {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    padding: 0;
    border: none;
    border-radius: 4px;
    background: none;
    color: inherit;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
}

.msg-tab-close:hover {
    background: rgba(248, 81, 73, 0.2);
    color: #f85149;
}

.msg-avatar.tiny {
    width: 18px;
    height: 18px;
    font-size: 9px;
    box-shadow: none;
}

.msg-chat-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid #30363d;
    background: rgba(22, 27, 34, 0.92);
    backdrop-filter: blur(6px);
}

.msg-back {
    display: none;
    background: none;
    border: none;
    color: #c9d1d9;
    font-size: 19px;
    cursor: pointer;
    padding: 0 4px 0 0;
}

.msg-chat-who {
    flex: 1;
    min-width: 0;
}

.msg-chat-name {
    font-weight: 700;
    font-size: 14.5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The name and its pencil (Rename contact) in the chat's bar. */
.msg-chat-name-row {
    display: flex;
    align-items: center;
    min-width: 0;
}

.msg-chat-name-row .msg-rename-btn {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
}

.msg-chat-addr {
    display: block;
    color: #8b949e;
    font-size: 11px;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
}

.msg-chat-addr:hover {
    color: #58a6ff;
}

.msg-chat-path {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
    color: #6e7681;
    font-size: 10.5px;
}

.msg-chip {
    padding: 1px 7px;
    border-radius: 9px;
    background: rgba(56, 139, 253, 0.14);
    border: 1px solid rgba(56, 139, 253, 0.3);
    color: #a5d6ff;
    font-size: 10.5px;
    white-space: nowrap;
}

.msg-chip.muted {
    background: #161b22;
    border-color: #30363d;
    color: #8b949e;
}

.msg-chat-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.msg-log {
    flex: 1;
    overflow-y: auto;
    padding: 16px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.msg-row {
    display: flex;
}

/* Only rows that just arrived come in with a motion; the ones already on
   screen are never redrawn (updateLog in messenger.js). */
.msg-row.fresh {
    animation: msg-in 0.22s ease-out;
}

@keyframes msg-in {
    from { opacity: 0; transform: translateY(6px) scale(0.98); }
    to { opacity: 1; transform: none; }
}

/* The next message from the same side within minutes: closer, and the
   bubble above keeps the tail. */
.msg-row.cont {
    margin-top: -5px;
}

.msg-row.out.cont .msg-bubble {
    border-top-right-radius: 6px;
}

.msg-row.in.cont .msg-bubble {
    border-top-left-radius: 6px;
}

.msg-row.failed .msg-bubble {
    border-color: rgba(248, 81, 73, 0.6);
    background: #2d1618;
}

.msg-day {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 6px 0 2px;
    color: #8b949e;
    font-size: 11px;
}

.msg-day::before,
.msg-day::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, #30363d, transparent);
}

.msg-day span {
    padding: 2px 10px;
    border: 1px solid #30363d;
    border-radius: 10px;
    background: #161b22;
}

.msg-row.out {
    justify-content: flex-end;
}

.msg-bubble {
    max-width: min(76%, 620px);
    padding: 8px 12px 6px;
    border-radius: 14px;
    background: #161b22;
    border: 1px solid #30363d;
    font-size: 13px;
    line-height: 1.45;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.msg-row.out .msg-bubble {
    background: #12305a;
    border-color: rgba(56, 139, 253, 0.45);
    border-bottom-right-radius: 5px;
}

.msg-row.in .msg-bubble {
    border-bottom-left-radius: 5px;
}

.msg-title {
    font-weight: 700;
    margin-bottom: 2px;
}

.msg-from {
    margin-bottom: 2px;
    color: #ffa657;
    font-size: 11.5px;
    font-weight: 700;
}

.msg-row.out .msg-from {
    color: #79c0ff;
}

.msg-text {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.msg-text a {
    color: #79c0ff;
}

.msg-row.out .msg-text a {
    color: #cae8ff;
}

/* A thin line between the message and its time. */
.msg-meta {
    margin-top: 5px;
    padding-top: 3px;
    border-top: 1px solid rgba(230, 237, 243, 0.12);
    text-align: right;
    color: rgba(230, 237, 243, 0.45);
    font-size: 10.5px;
}

.msg-tries {
    color: #d29922;
}

.msg-state-delivered {
    color: #56d364;
}

.msg-state-failed {
    color: #ff7b72;
}

/* How it went out (⚡ one packet, 🔗 link, 📮 propagation node). */
.msg-method {
    margin-left: 3px;
    font-size: 10px;
    opacity: .8;
    cursor: help;
}

.msg-unverified {
    color: #d29922;
}

/* An incoming message delivered long after it was written. */
.msg-late {
    margin-left: 6px;
    color: #d29922;
    font-style: italic;
}

.msg-retry {
    margin-top: 5px;
    background: rgba(248, 81, 73, 0.12);
    border: 1px solid #f85149;
    color: #ffa198;
    border-radius: 7px;
    font-size: 11px;
    font-family: inherit;
    padding: 2px 9px;
    cursor: pointer;
}

/* ─── Compose ─── */

.msg-compose {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 10px 14px;
    border-top: 1px solid #30363d;
    background: rgba(22, 27, 34, 0.92);
}

.msg-input {
    flex: 1;
    /* field-sizing also grows the WIDTH to the longest line: a long pasted
       text made the bar kilometres wide. The flex row sets it. */
    width: 0;
    min-width: 0;
    overflow-wrap: anywhere;
    resize: none;
    min-height: 40px;
    max-height: 140px;
    box-sizing: border-box;
    padding: 10px 14px;
    border: 1px solid #30363d;
    border-radius: 20px;
    background: #0d1117;
    color: #e6edf3;
    font-family: inherit;
    font-size: 13px;
    line-height: 1.4;
    transition: border-color 0.15s, box-shadow 0.15s;
    field-sizing: content;      /* grows with the text by itself (messenger.js grow) */
}

.msg-input:focus {
    outline: none;
    border-color: #58a6ff;
    box-shadow: 0 0 0 3px rgba(56, 139, 253, 0.15);
}

/* 📮 next to Send: on (orange), the message goes straight to the
   propagation node. */
.msg-via-pn {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    align-self: center;
    border: 1px solid #30363d;
    border-radius: 50%;
    background: #161b22;
    font-size: 15px;
    cursor: pointer;
    filter: grayscale(1);
    opacity: 0.6;
    transition: filter 0.15s, opacity 0.15s, border-color 0.15s, background 0.15s;
}

.msg-via-pn:hover {
    opacity: 1;
}

.msg-via-pn.active {
    filter: none;
    opacity: 1;
    border-color: #d29922;
    background: rgba(210, 153, 34, 0.18);
}

.msg-via-pn[hidden] {
    display: none;
}

.msg-send {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border: none;
    border-radius: 50%;
    background: #238636;
    color: #fff;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(35, 134, 54, 0.35);
    transition: transform 0.1s, filter 0.15s;
}

.msg-send:hover {
    filter: brightness(1.15);
}

.msg-send:active {
    transform: scale(0.94);
}

.msg-send:disabled {
    opacity: 0.5;
    cursor: wait;
}

/* ─── Files in the chat ─── */

.msg-clip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    align-self: center;
    border: 1px solid #30363d;
    border-radius: 50%;
    background: #161b22;
    color: #8b949e;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}

.msg-clip:hover {
    color: #e6edf3;
    border-color: #58a6ff;
}

.msg-attach {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 8px 14px 0;
    border-top: 1px solid #30363d;
    background: rgba(22, 27, 34, 0.92);
}

.msg-attach[hidden] {
    display: none;
}

.msg-attach + .msg-compose {
    border-top: none;
}

.msg-attach-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 260px;
    padding: 4px 4px 4px 9px;
    border: 1px solid #30363d;
    border-radius: 14px;
    background: #0d1117;
    font-size: 12px;
}

.msg-attach-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.msg-attach-size,
.msg-attach-total {
    color: #8b949e;
    font-size: 11px;
    white-space: nowrap;
}

.msg-attach-chip button {
    width: 20px;
    height: 20px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: #8b949e;
    cursor: pointer;
    font-size: 15px;
    line-height: 1;
}

.msg-attach-chip button:hover {
    background: rgba(248, 81, 73, 0.15);
    color: #ffa198;
}

.msg-files {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 2px 0 4px;
}

.msg-image {
    position: relative;
    display: block;
    line-height: 0;
}

.msg-image img {
    max-width: 100%;
    max-height: 320px;
    border-radius: 9px;
    border: 1px solid #30363d;
    background: #0d1117;
}

.msg-file {
    position: relative;
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 200px;
    padding: 7px 34px 7px 9px;
    border: 1px solid #30363d;
    border-radius: 9px;
    background: rgba(13, 17, 23, 0.6);
    color: inherit;
    text-decoration: none;
}

.msg-file:hover {
    border-color: #58a6ff;
}

.msg-file.deleted {
    opacity: 0.55;
}

.msg-file.deleted .msg-file-name {
    text-decoration: line-through;
}

.msg-file-icon {
    display: inline-flex;
    color: #58a6ff;
}

.msg-file-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.msg-file-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
}

.msg-file-size {
    color: #8b949e;
    font-size: 11px;
}

/* ⋯ on a file: the menu, also for touch screens. */
.msg-file-more {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    border-radius: 50%;
    color: #8b949e;
    font-size: 15px;
    line-height: 22px;
    text-align: center;
}

.msg-image .msg-file-more {
    top: 6px;
    transform: none;
    background: rgba(13, 17, 23, 0.75);
    color: #e6edf3;
    opacity: 0;
    transition: opacity 0.15s;
}

.msg-image:hover .msg-file-more,
.msg-file-more:hover {
    opacity: 1;
    color: #e6edf3;
}

@media (hover: none) {
    .msg-image .msg-file-more {
        opacity: 1;
    }
}

.msg-unsupported {
    color: #8b949e;
    font-style: italic;
    font-size: 12px;
}

.msg-progress {
    height: 4px;
    margin: 6px 0 2px;
    border-radius: 2px;
    background: rgba(139, 148, 158, 0.25);
    overflow: hidden;
}

.msg-progress span {
    display: block;
    height: 100%;
    background: #58a6ff;
    transition: width 0.4s;
}

/* Messages with files arriving, above the chat tabs. */
.msg-incoming {
    flex-shrink: 0;
    padding: 6px 10px;
    border-bottom: 1px solid #30363d;
    background: rgba(88, 166, 255, 0.07);
    font-size: 12.5px;
    color: #c9d1d9;
}

.msg-incoming[hidden] {
    display: none;
}

.msg-incoming-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.msg-incoming-row + .msg-incoming-row {
    margin-top: 4px;
}

.msg-incoming-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.msg-progress.msg-incoming-bar {
    flex: 1;
    min-width: 60px;
    margin: 0;
}

.msg-incoming-pct {
    flex-shrink: 0;
    color: #8b949e;
    font-variant-numeric: tabular-nums;
}

/* × on a message still going out: cancel it. */
.msg-bubble {
    position: relative;
}

.msg-cancel {
    position: absolute;
    top: 3px;
    right: 4px;
    width: 20px;
    height: 20px;
    border: none;
    border-radius: 50%;
    background: rgba(13, 17, 23, 0.55);
    color: #c9d1d9;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
}

.msg-cancel:hover {
    background: rgba(248, 81, 73, 0.3);
    color: #fff;
}

.msg-row.cancelled .msg-bubble {
    opacity: 0.6;
}

/* ─── Reactions ─── */

.msg-row {
    align-items: center;
    gap: 4px;
}

/* React and reply beside the bubble, on the side away from the edge. */
.msg-actions {
    display: inline-flex;
    flex-direction: column;
    gap: 2px;
}

.msg-row.out .msg-actions {
    order: -1;
}

/* The message a reply answers, at the top of its bubble. */
.msg-quote {
    display: flex;
    flex-direction: column;
    margin: 2px 0 5px;
    padding: 4px 8px;
    border-left: 3px solid #58a6ff;
    border-radius: 5px;
    background: rgba(13, 17, 23, 0.45);
    cursor: pointer;
    font-size: 12px;
}

.msg-quote:hover {
    background: rgba(13, 17, 23, 0.7);
}

.msg-quote-from {
    color: #58a6ff;
    font-weight: 600;
    font-size: 11.5px;
}

.msg-quote-text {
    color: #adbac7;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* Above the text box while a reply is being written. */
.msg-reply-bar {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 14px;
    border-top: 1px solid #30363d;
    background: rgba(22, 27, 34, 0.92);
}

.msg-reply-bar[hidden] {
    display: none;
}

.msg-reply-bar + .msg-attach,
.msg-reply-bar + .msg-attach[hidden] + .msg-compose {
    border-top: none;
}

.msg-reply-icon {
    display: inline-flex;
    color: #58a6ff;
}

.msg-reply-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding-left: 8px;
    border-left: 3px solid #58a6ff;
    font-size: 12px;
}

.msg-reply-main .msg-quote-text {
    -webkit-line-clamp: 1;
}

.msg-reply-bar button {
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: #8b949e;
    font-size: 17px;
    cursor: pointer;
}

.msg-reply-bar button:hover {
    background: rgba(248, 81, 73, 0.15);
    color: #ffa198;
}

.msg-react-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: #8b949e;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s, background 0.15s;
}

.msg-row:hover .msg-react-btn,
.msg-react-btn:focus-visible {
    opacity: 1;
}

.msg-react-btn:hover {
    background: rgba(139, 148, 158, 0.15);
    color: #e6edf3;
}

@media (hover: none) {
    .msg-react-btn {
        opacity: 0.55;
    }
}

.msg-reactions {
    display: flex;
    gap: 4px;
    margin-top: 4px;
}

.msg-reaction {
    padding: 1px 7px;
    border: 1px solid #30363d;
    border-radius: 11px;
    background: #0d1117;
    font-size: 14px;
    line-height: 1.4;
    cursor: pointer;
}

.msg-reaction.mine {
    border-color: rgba(56, 139, 253, 0.6);
    background: rgba(56, 139, 253, 0.15);
}

.msg-react-picker {
    position: fixed;
    z-index: 3000;
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 4px;
    border: 1px solid #30363d;
    border-radius: 22px;
    background: #161b22;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

.msg-react-picker button {
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 50%;
    background: transparent;
    font-size: 19px;
    cursor: pointer;
    transition: transform 0.1s, background 0.1s;
}

.msg-react-picker button:hover {
    background: rgba(139, 148, 158, 0.18);
    transform: scale(1.15);
}

.msg-react-picker input {
    width: 40px;
    height: 28px;
    margin-left: 2px;
    border: 1px solid #30363d;
    border-radius: 14px;
    background: #0d1117;
    color: #e6edf3;
    font-size: 15px;
    text-align: center;
}

/* ─── Markdown in messages ─── */

.msg-text.md .md-pre {
    margin: 4px 0;
    padding: 6px 8px;
    border-radius: 6px;
    background: rgba(13, 17, 23, 0.7);
    font-family: var(--mono-font);
    font-size: 12px;
    white-space: pre-wrap;
    overflow-x: auto;
}

.msg-text.md .md-code {
    padding: 0 4px;
    border-radius: 4px;
    background: rgba(13, 17, 23, 0.7);
    font-family: var(--mono-font);
    font-size: 12px;
}

.msg-text.md .md-h {
    font-weight: 700;
    margin: 2px 0;
}

.msg-text.md .md-h1 { font-size: 16px; }
.msg-text.md .md-h2 { font-size: 15px; }

.msg-text.md .md-quote {
    padding-left: 8px;
    border-left: 3px solid #30363d;
    color: #8b949e;
}

.msg-text.md .md-list {
    margin: 2px 0;
    padding-left: 20px;
}

.msg-text.md .md-hr {
    border: none;
    border-top: 1px solid #30363d;
    margin: 6px 0;
}

/* ─── Rename ─── */

.msg-rename-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin-left: 4px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: #8b949e;
    cursor: pointer;
    vertical-align: middle;
}

.msg-rename-btn:hover {
    background: rgba(139, 148, 158, 0.15);
    color: #e6edf3;
}

.msg-rename-input {
    width: 100%;
    box-sizing: border-box;
    margin: 8px 0 6px;
}

/* ─── Search in the messenger ─── */

.msg-search-wrap {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 8px 10px;
    border-bottom: 1px solid #30363d;
    background: #0f141b;
}

.msg-search-wrap {
    display: flex;
    align-items: center;
}

.msg-search-clear {
    right: 16px;
}

.msg-search-clear[hidden] {
    display: none;
}

.msg-search {
    width: 100%;
    box-sizing: border-box;
    padding: 7px 32px 7px 12px;
    border: 1px solid #30363d;
    border-radius: 16px;
    background: #0d1117;
    color: #e6edf3;
    font-family: inherit;
    font-size: 12.5px;
}

.msg-search:focus {
    outline: none;
    border-color: #58a6ff;
}

.msg-search-head {
    padding: 8px 12px 4px;
    color: #8b949e;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.msg-search-none {
    padding: 8px 12px;
    color: #8b949e;
    font-size: 12px;
}

.msg-hit {
    display: flex;
    gap: 9px;
    padding: 8px 12px;
    border-bottom: 1px solid rgba(48, 54, 61, 0.6);
    cursor: pointer;
}

.msg-hit:hover {
    background: rgba(56, 139, 253, 0.08);
}

.msg-hit-main {
    min-width: 0;
    flex: 1;
}

.msg-hit-top {
    display: flex;
    justify-content: space-between;
    gap: 6px;
}

.msg-hit-name {
    font-weight: 600;
    font-size: 12.5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.msg-hit-text {
    color: #c9d1d9;
    font-size: 12px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.msg-row.msg-flash .msg-bubble {
    animation: msg-flash 1.6s ease-out;
}

@keyframes msg-flash {
    0%, 30% { box-shadow: 0 0 0 3px rgba(210, 153, 34, 0.75); }
    100% { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); }
}

/* Files dragged over the chat: drop them anywhere on it. */
#msg-chat {
    position: relative;
}

#msg-chat.dropping::after {
    content: "Drop files to attach them\A\A Esc or click to close";
    white-space: pre;
    text-align: center;
    position: absolute;
    inset: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px dashed #58a6ff;
    border-radius: 14px;
    background: rgba(13, 17, 23, 0.85);
    color: #58a6ff;
    font-size: 15px;
    font-weight: 600;
    pointer-events: none;
    z-index: 5;
}

.msg-empty {
    margin: auto;
    padding: 24px;
    color: #8b949e;
    font-size: 12.5px;
    line-height: 1.6;
    text-align: center;
}

/* ─── Dialogs ─── */

.msg-new-dialog {
    width: min(520px, calc(100vw - 32px));
}

.msg-new-input {
    width: 100%;
    box-sizing: border-box;
}

.msg-new-results {
    max-height: 50vh;
    overflow-y: auto;
    margin-top: 8px;
}

.msg-new-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 2px 10px;
    padding: 7px 8px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12.5px;
}

.msg-new-row:hover {
    background: #21262d;
}

.msg-new-name {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.msg-new-from {
    color: #8b949e;
    font-size: 11px;
}

.msg-new-row code {
    grid-column: 1 / -1;
    color: #6e7681;
    font-size: 11px;
}

.msg-warn-dialog {
    width: min(440px, calc(100vw - 32px));
}

/* Phones: the list or the chat, one at a time. */
@media (max-width: 700px), (pointer: coarse) and (max-height: 500px) {
    .msg-list {
        width: 100%;
        border-right: none;
    }

    .msg-chat-col {
        display: none;
    }

    .msg-body.chat-open .msg-chat-col {
        display: flex;
    }

    .msg-body.chat-open .msg-list {
        display: none;
    }

    /* Phones: the Peers panel covers the list while open. */
    .msg-peers {
        position: absolute;
        inset: 0;
        width: auto;
        z-index: 6;
    }

    .msg-body.chat-open .msg-chat {
        display: flex;
    }

    .msg-back {
        display: inline-block;
    }

    .msg-bubble {
        max-width: 86%;
    }

    .msg-bar {
        flex-direction: column;
    }

    .msg-bar-head {
        width: auto;
        border-right: none;
        border-bottom: 1px solid #30363d;
        padding: 6px 10px;
    }

    .msg-bar-main {
        padding: 6px 10px;
    }

    .msg-identity-label {
        display: none;
    }

    .msg-identity-wrap {
        order: 5;
        flex-basis: 100%;
    }

    .msg-chat-head {
        flex-wrap: wrap;
    }

    .msg-chat-actions {
        width: 100%;
        justify-content: flex-end;
        /* "Add to contacts" made the row too long: it ran off the left edge. */
        flex-wrap: wrap;
        row-gap: 6px;
        flex-shrink: 1;
        min-width: 0;
    }
}

/* The node list hidden: its toggle lights up, so it can be found again. */
body.sidebar-collapsed .sidebar-toggle-btn {
    background: linear-gradient(135deg, #1f6feb, #388bfd);
    border-color: #58a6ff;
    color: #fff;
    box-shadow: 0 0 0 2px rgba(56, 139, 253, 0.25);
}

/* Unread LXMF messages from a node's operator, on its card. */
.lxmf-unread {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 18px;
    height: 16px;
    margin-left: 2px;
    border-radius: 8px;
    background: #f85149;
    color: #fff;
    cursor: pointer;
}

.lxmf-unread svg {
    width: 11px;
    height: 11px;
}

.lxmf-unread::after {
    content: attr(data-count);
    position: absolute;
    top: -5px;
    right: -6px;
    min-width: 11px;
    height: 11px;
    padding: 0 2px;
    border-radius: 6px;
    background: #0d1117;
    color: #ff7b72;
    font-size: 8.5px;
    font-weight: 700;
    line-height: 11px;
    text-align: center;
}

/* Thin scrollbars in Messages: the wheel and a finger do the scrolling. */
.msg-log,
.msg-list,
.msg-new-results,
.msg-info-dialog .dialog-scroll {
    scrollbar-width: thin;
    scrollbar-color: #30363d transparent;
}

.msg-log::-webkit-scrollbar,
.msg-list::-webkit-scrollbar,
.msg-new-results::-webkit-scrollbar {
    width: 6px;
}

.msg-log::-webkit-scrollbar-track,
.msg-list::-webkit-scrollbar-track,
.msg-new-results::-webkit-scrollbar-track {
    background: transparent;
}

.msg-log::-webkit-scrollbar-thumb,
.msg-list::-webkit-scrollbar-thumb,
.msg-new-results::-webkit-scrollbar-thumb {
    background: #30363d;
    border-radius: 3px;
}

.msg-log::-webkit-scrollbar-thumb:hover,
.msg-list::-webkit-scrollbar-thumb:hover {
    background: #484f58;
}

/* The close of a conversation sits with its buttons. */
.msg-chat-actions .msg-close {
    width: 30px;
    height: 30px;
    font-size: 17px;
}

/* Pop-up for a message that arrived. */
.msg-toast {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.msg-toast-open {
    opacity: 0.75;
    font-size: 11px;
}

/* Contact info. */
/* The generic dialog caps at 450px, which pushed the last button of the
   contact info to a second row. */
.msg-info-dialog {
    width: min(560px, calc(100vw - 32px));
    max-width: none;
    min-width: 0;
    box-sizing: border-box;
    /* Never taller than the screen: the rows scroll, the title and the
       buttons stay. Taller, its top went off a phone screen for good. */
    max-height: calc(100dvh - 32px);
    display: flex;
    flex-direction: column;
}

.msg-info-dialog .dialog-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

/* Node info and contact info share this frame; the text colours are the
   ones the node panel always had (orange labels, light values). */
.msg-info-dialog h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #58a6ff;
}

.msg-info-row {
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 10px;
    padding: 7px 0;
    border-bottom: 1px solid #21262d;
    font-size: 13px;
    line-height: 1.5;
    color: #e6edf3;
}

.msg-info-row > span:first-child,
.msg-info-block strong {
    color: #ffa657;
    font-weight: 700;
}

.msg-info-block {
    display: block;
}

.msg-info-row code {
    font-family: monospace;
    font-size: 11px;
    background: #21262d;
    padding: 2px 5px;
    border-radius: 3px;
    word-break: break-all;
}

.msg-info-row i,
.msg-info-row .muted {
    color: #7d8590;
}

.msg-info-note {
    margin-top: 3px;
    color: #7d8590;
    font-size: 10.5px;
    line-height: 1.4;
}

.msg-info-actions {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 8px;
    padding-top: 12px;
}

.msg-info-copy {
    cursor: pointer;
}

.msg-info-copy:hover {
    color: #58a6ff;
}

.msg-info-node {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}

@media (max-width: 700px), (pointer: coarse) and (max-height: 500px) {
    .msg-info-row {
        grid-template-columns: 1fr;
        gap: 2px;
    }

    /* Four buttons do not fit a phone's width: two by two, same size. */
    .msg-info-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .msg-info-dialog {
        padding: 16px;
    }
}

/* ─── Settings: categories on the left, one at a time on the right ─── */

.settings-v2 {
    width: min(940px, 94vw);
    max-width: none;
    min-width: 0;
    height: min(720px, 88vh);
    max-height: 88vh;
    padding: 0;
    border-width: 1px;
    border-radius: 10px;
}

.settings-v2 .dialog-header {
    padding: 12px 16px 12px 20px;
    margin: 0;
}

.settings-v2 .dialog-header h3 {
    font-size: 16px;
}

.settings-v2 .dialog-footer {
    margin: 0 !important;
    padding: 12px 20px;
    background: #161b22;
}

.settings-body {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
}

.settings-nav {
    width: 200px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 10px;
    border-right: 1px solid #30363d;
    background: #0d1117;
    overflow-y: auto;
}

.settings-search {
    width: 100%;
    box-sizing: border-box;
    background: #161b22;
    border: 1px solid #30363d;
    color: #e6edf3;
    padding: 7px 10px;
    border-radius: 6px;
    font: inherit;
    font-size: 12px;
}

.settings-search:focus {
    outline: none;
    border-color: #58a6ff;
}

.settings-nav-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.settings-nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    background: none;
    border: none;
    border-radius: 6px;
    color: #c9d1d9;
    font: inherit;
    font-size: 12.5px;
    text-align: left;
    cursor: pointer;
}

.settings-nav-item[hidden] {
    display: none;
}

.settings-nav-item svg {
    flex-shrink: 0;
    color: #7d8590;
}

.settings-nav-item:hover {
    background: #161b22;
}

.settings-nav-item.active {
    background: rgba(88, 166, 255, 0.12);
    color: #58a6ff;
    box-shadow: inset 2px 0 0 #58a6ff;
}

.settings-nav-item.active svg {
    color: #58a6ff;
}

/* Changed and not saved: a dot after the category; amber when the change
   needs a restart. */
.settings-nav-item.dirty::after {
    content: '';
    width: 7px;
    height: 7px;
    margin-left: auto;
    flex-shrink: 0;
    border-radius: 50%;
    background: #58a6ff;
}

.settings-nav-item.needs-restart::after {
    background: #d29922;
}

/* Restart / Shut down: at the foot of the categories column. */
.settings-power {
    display: flex;
    gap: 6px;
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid #21262d;
}

.settings-power-btn {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 6px;
    background: #161b22;
    border: 1px solid #30363d;
    border-radius: 6px;
    color: #c9d1d9;
    font: inherit;
    font-size: 12px;
    white-space: nowrap;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}

.settings-power-btn.reload svg { color: #58a6ff; }
.settings-power-btn.restart svg { color: #d29922; }
.settings-power-btn.shutdown svg { color: #f85149; }

.settings-power-btn.reload:hover {
    background: rgba(88, 166, 255, 0.12);
    border-color: rgba(88, 166, 255, 0.6);
    color: #79c0ff;
}

.settings-power-btn.restart:hover {
    background: rgba(210, 153, 34, 0.12);
    border-color: rgba(210, 153, 34, 0.6);
    color: #e3b341;
}

.settings-power-btn.shutdown:hover {
    background: rgba(248, 81, 73, 0.12);
    border-color: rgba(248, 81, 73, 0.6);
    color: #ff7b72;
}

.guest-mode .settings-power {
    display: none;
}

.settings-dirty-note {
    margin-right: auto;
    align-self: center;
    color: #d29922;
    font-size: 12px;
}

.settings-v2 .btn-save.pending {
    box-shadow: 0 0 0 2px rgba(63, 185, 80, 0.45);
}

.settings-restart-note {
    margin: 8px 0 4px;
    padding: 7px 10px;
    border: 1px solid rgba(210, 153, 34, 0.5);
    border-radius: 6px;
    background: rgba(210, 153, 34, 0.1);
    color: #d29922;
    font-size: 11.5px;
}

.settings-restart-note[hidden] {
    display: none;
}

.settings-v2 .settings-pane {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
    margin: 0;
    padding: 18px 24px 28px;
    scrollbar-width: thin;
}

.settings-pane-title {
    font-size: 17px;
    font-weight: 700;
    color: #e6edf3;
    margin: 2px 0 16px;
}

.settings-v2 .auto-reload-setting {
    margin: 0 0 14px;
    padding: 14px 16px 10px;
    background: #0d1117;
    border: 1px solid #21262d;
    border-radius: 8px;
}

.settings-v2 .auto-reload-setting.settings-off {
    display: none;
}

.settings-v2 .auto-reload-setting > .settings-label {
    color: #e6edf3;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 4px;
}

.settings-v2 .settings-label.same-as-title {
    display: none;
}

.settings-v2 .settings-hint {
    color: #7d8590;
    font-size: 11.5px;
}

.settings-v2 .settings-row {
    min-height: 36px;
    margin: 0;
    padding: 5px 0;
    border-top: 1px solid #21262d;
    font-size: 12.5px;
}

.settings-v2 .settings-row + .settings-hint {
    margin-top: 2px;
}

.settings-v2 .settings-subhead {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #30363d;
    color: #c9d1d9;
    font-weight: 700;
}

.settings-v2 .settings-export {
    margin: 8px 8px 4px 0;
}

.settings-v2 .settings-select,
.settings-v2 .settings-input {
    padding: 6px 9px;
    border-radius: 6px;
}

.settings-select-node {
    max-width: 62%;
}

/* Search results come from several categories: each says which. */
.settings-pane.searching .auto-reload-setting::before {
    content: attr(data-cat-label);
    display: block;
    margin-bottom: 4px;
    color: #58a6ff;
    font-size: 10px;
    letter-spacing: 0.6px;
    text-transform: uppercase;
}

.toggle-switch.disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

@media (max-width: 767px), (pointer: coarse) and (max-height: 500px) {
    .settings-v2 {
        width: 100vw;
        height: 100dvh;
        max-height: 100dvh;
        border-radius: 0;
        border: none;
    }

    .settings-body {
        flex-direction: column;
    }

    /* The categories become one scrolling row over the settings. */
    .settings-nav {
        width: auto;
        gap: 8px;
        padding: 10px 12px;
        border-right: none;
        border-bottom: 1px solid #30363d;
        overflow: visible;
    }

    .settings-nav-list {
        flex-direction: row;
        gap: 4px;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .settings-nav-item {
        width: auto;
        white-space: nowrap;
        padding: 7px 10px;
    }

    .settings-nav-item.active {
        box-shadow: inset 0 -2px 0 #58a6ff;
    }

    .settings-v2 .settings-pane {
        padding: 14px 12px 24px;
    }

    .settings-pane-title {
        display: none;
    }

    .settings-v2 .settings-row {
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
        gap: 6px 12px;
    }

    .settings-select-node {
        max-width: 100%;
    }
}

/* ============================================
   RMAP - script/rmap.js
   ============================================ */

.rmap-view.active {
    flex-direction: column;
    background: #0d1117;
    color: #e6edf3;
}

.rmap-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-bottom: 1px solid #30363d;
    flex-wrap: wrap;
}

.rmap-head .bbs-title {
    flex: none;
}

.rmap-head .bbs-title svg {
    color: #39c5cf;
}

.rmap-state {
    color: #8b949e;
    font-size: 12px;
    flex: 1;
    min-width: 160px;
}

.rmap-error {
    color: #f85149;
    cursor: help;
}

.rmap-chips {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.rmap-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 9px;
    border: 1px solid #30363d;
    border-radius: 12px;
    background: #161b22;
    color: #c9d1d9;
    font-size: 11.5px;
    cursor: pointer;
}

.rmap-chip.off {
    opacity: 0.45;
}

.rmap-chip.off .rmap-dot {
    background: transparent !important;
}

/* One colour per kind, on the map, the chips and the column heads. */
.rmap-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid rgba(13, 17, 23, 0.9);
    box-sizing: content-box;
    flex: none;
}

/* The colours of rmap.world (its TYPE_CFG). On the map each dot takes the
   colour of its own type (RMAP_TYPE_COLORS in rmap.js: I2P, Tor... apart). */
.rmap-dot-nomadnet { background: #ff6b4a; border-color: #ff6b4a55; }
.rmap-dot-propnode { background: #26de81; border-color: #26de8155; }
.rmap-dot-rrc { background: #00d2d3; border-color: #00d2d355; }
.rmap-dot-bbs { background: #fd9644; border-color: #fd964455; }
.rmap-dot-backbone { background: #ff3333; border-color: #ff333355; }
.rmap-dot-rnode { background: #0099ff; border-color: #0099ff55; }

.rmap-dot-fill {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

/* Leaflet sizes the marker box; the dot fills it. */
.leaflet-marker-icon.rmap-dot {
    border: 2px solid #0d1117;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35);
}

.rmap-map {
    flex: 1;
    min-height: 80px;
    position: relative;
    background: #0d1117;
}

.rmap-map > .msg-search-none {
    padding-top: 40px;
}

.rmap-map .leaflet-container,
.rmap-map.leaflet-container {
    background: #1b1f24;
    font: inherit;
}

/* Leaflet's credits, tiny in the corner (the tiles' credit stays: Esri asks for it). */
.rmap-map .leaflet-control-attribution {
    font-size: 8px;
    line-height: 1.3;
    padding: 0 4px;
    background: rgba(13, 17, 23, 0.55) !important;
    color: #6e7681;
}

.rmap-map .leaflet-control-attribution a {
    color: #6e7681;
}

.rmap-map .leaflet-attribution-flag {
    display: none !important;
}

/* Zoom buttons in the app's dark style, white signs. */
#rmap-map .leaflet-bar {
    border: 1px solid #30363d;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

#rmap-map .leaflet-bar a,
#rmap-map .leaflet-bar a:hover,
#rmap-map .leaflet-bar a:focus {
    background: #161b22;
    color: #f0f6fc;
    border-bottom-color: #30363d;
}

#rmap-map .leaflet-bar a:hover {
    background: #21262d;
}

#rmap-map .leaflet-bar a.leaflet-disabled {
    background: #0d1117;
    color: #484f58;
}

/* Offline map: the sea under the country borders. */
.rmap-map.rmap-offline {
    background: #0b0f14;
}

/* Light map (☾/☀ in the RMAP bar): sea and land as on rmap.world. */
.rmap-map.leaflet-container.rmap-light {
    background: #e4e8ec;
}

.rmap-map.rmap-offline.rmap-light {
    background: #d6e2ea;
}

.rmap-map.rmap-light .leaflet-marker-icon.rmap-dot {
    border-color: #ffffff;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
}

.rmap-split {
    height: 7px;
    flex: none;
    cursor: row-resize;
    background: #161b22;
    border-top: 1px solid #30363d;
    border-bottom: 1px solid #30363d;
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: none;
}

.rmap-split span {
    width: 36px;
    height: 3px;
    border-radius: 2px;
    background: #484f58;
}

.rmap-split:hover span {
    background: #8b949e;
}

.rmap-lists {
    flex: none;
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 25%;
}

.rmap-tools {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 10px;
}

.rmap-tools .msg-search {
    width: 280px;
    max-width: 60%;
    margin: 0;
}

.rmap-note {
    color: #6e7681;
    font-size: 11px;
}

.rmap-cols {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(var(--rmap-cols, 4), minmax(0, 1fr));
    gap: 1px;
    background: #30363d;
    border-top: 1px solid #30363d;
}

.rmap-col {
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: #0d1117;
}

.rmap-col-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;
    color: #8b949e;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid #21262d;
    cursor: help;
}

.rmap-col-head > span:first-child {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.rmap-col-body {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

.rmap-row {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding: 6px 10px;
    border-bottom: 1px solid #161b22;
    cursor: pointer;
}

.rmap-row:hover {
    background: #161b22;
}

.rmap-row-text {
    flex: 1;
    min-width: 0;
}

.rmap-row-name {
    font-size: 13px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rmap-row code,
.rmap-pop code {
    display: block;
    color: #8b949e;
    font-size: 10.5px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rmap-row-meta {
    color: #6e7681;
    font-size: 11px;
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rmap-pin {
    flex: none;
    padding: 0 4px;
    border: none;
    background: none;
    color: #8b949e;
    font-size: 16px;
    line-height: 1.2;
    cursor: pointer;
}

.rmap-pin:hover {
    color: #39c5cf;
}

/* Popups on the map, in the app's dark style. */
.rmap-popup .leaflet-popup-content-wrapper,
.rmap-popup .leaflet-popup-tip {
    background: #161b22;
    color: #e6edf3;
    border: 1px solid #30363d;
}

.rmap-popup .leaflet-popup-content {
    margin: 10px 12px;
}

.rmap-pop-name {
    font-weight: 700;
    font-size: 13px;
    margin-bottom: 2px;
}

.rmap-pop .rmap-row-meta {
    white-space: normal;
}

.rmap-pop-acts {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.rmap-config {
    margin: 6px 0 0;
    padding: 6px 8px;
    background: #0d1117;
    border-radius: 4px;
    font-size: 11px;
    white-space: pre;
    overflow-x: auto;
    text-align: left;
}

/* The category picker: phones only (one list at a time, see renderRmapLists). */
.rmap-pick {
    display: none;
}

/* Phones: one column, the one picked, as wide as the screen (side by side
   they ran out of the screen). */
@media (max-width: 700px), (pointer: coarse) and (max-height: 500px) {
    .rmap-pick {
        display: block;
        flex: none;
        max-width: 46%;
    }

    .rmap-tools {
        gap: 6px;
    }

    .rmap-cols {
        display: flex;
        overflow: hidden;
    }

    .rmap-col {
        flex: 1 1 100%;
        min-width: 0;
    }

    .rmap-row-text,
    .rmap-row-name,
    .rmap-row-text code {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .rmap-note {
        display: none;
    }

    .rmap-tools .msg-search {
        width: 100%;
        max-width: none;
    }
}

/* ============================================
   RRC CHAT - script/rrc.js
   (the hub list and the bars reuse the BBS client's classes)
   ============================================ */

.rrc-view.active {
    flex-direction: row;
    background: #0d1117;
    color: #e6edf3;
}

.rrc-title svg {
    color: #3fb950;
}

.rrc-nonick {
    color: #6e7681;
}

/* Open hubs as a tree: the hub, then its rooms (mIRC's treebar). */
.rrc-tree-title {
    cursor: default;
}

.rrc-tree-hub {
    align-items: center;
    gap: 8px;
}

.rrc-tree-hub.active,
.rrc-tree-room.active {
    background: #1f6feb33;
}

.rrc-tree-hub .bbs-server-name {
    justify-content: space-between;
}

.rrc-tree-room {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 5px 12px 5px 34px;
    color: #c9d1d9;
    font-size: 13px;
    cursor: pointer;
    border-left: 2px solid transparent;
}

.rrc-tree-room:hover {
    background: #161b22;
}

.rrc-tree-room.active {
    border-left-color: #58a6ff;
    color: #f0f6fc;
}

.rrc-tree-room.off {
    color: #6e7681;
    font-style: italic;
}

.msg-conv-unread.rrc-at,
.tab-messages-badge:not(.rrc-badge-quiet) {
    background: #f85149;
}

.tab-messages-badge.rrc-badge-quiet {
    background: #1f6feb;
}

.tab-messages-badge.rrc-badge-join {
    background: #238636;
}

/* Room tabs: the hub window first, then its rooms. */
.rrc-tab-hub .msg-tab-name {
    font-weight: 600;
}

.rrc-tab-off .msg-tab-name {
    color: #6e7681;
    font-style: italic;
}

/* The bar: on the left what you look at (room and hub, topic, status and
   address), on the right who you are and the buttons. */
/* The name and the hashes keep at least 260 px: with less room the buttons
   go to the line below, and wrap there, instead of squeezing them into a
   letter a line (a small window, the browser's tools open, a room's extra
   buttons). */
.rrc-head {
    align-items: center;
    flex-wrap: wrap;
}

.rrc-head-left {
    flex: 1 1 260px;
    min-width: min(260px, 100%);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Wraps rather than cut: the two hashes at the end must stay readable. */
.rrc-head-status {
    color: #8b949e;
    font-size: 12px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.rrc-head-status code {
    color: #6e7681;
    font-size: 11px;
    cursor: pointer;
}

/* Your hash, beside your nick: a little brighter than the hub's. */
.rrc-head-status .rrc-nick-src {
    color: #6e7681;
}

.rrc-head-status .rrc-head-me {
    color: #79c0ff99;
}

.rrc-head-status code:hover {
    color: #58a6ff;
}

.rrc-head-right {
    flex: none;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

.rrc-head-right .bbs-head-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

/* Your own lines, bold: easy to find in the chat. */
.rrc-line.rrc-own .rrc-nick,
.rrc-line.rrc-own .rrc-text {
    font-weight: 700;
}

/* ...but one with its own style as the others see it, its bold included. */
.rrc-line.rrc-own .rrc-text .rrc-fmt {
    font-weight: 400;
}

/* @ and + before a nick, as in mIRC. */
.rrc-user-sign {
    display: inline-block;
    min-width: 0.7em;
    margin-right: 1px;
    font-family: var(--mono-font);
    font-weight: 700;
}

.rrc-sign-o {
    color: #3fb950;
}

.rrc-sign-v {
    color: #d29922;
}

.rrc-role-o {
    color: #3fb950;
}

.rrc-role-v {
    color: #d29922;
}

.rrc-modes {
    font-family: var(--mono-font);
    color: #8b949e;
}

/* Who you are on this hub: opens the identity menu. */
.rrc-id-chip {
    margin-left: 6px;
    padding: 1px 6px;
    background: none;
    border: 1px solid #30363d;
    border-radius: 10px;
    color: #8b949e;
    font-size: 11px;
    cursor: pointer;
    white-space: nowrap;
}

.rrc-id-chip b {
    color: #c9d1d9;
    font-weight: 600;
}

.rrc-id-chip:hover {
    border-color: #58a6ff;
    color: #58a6ff;
}

/* Phones: nick, identity and hash on one line; the hash gives way (a click
   still copies it whole). */
@media (max-width: 700px), (pointer: coarse) and (max-height: 500px) {
    .rrc-me-head .rrc-me-hash {
        display: inline-block;
        max-width: 80px;
        overflow: hidden;
        text-overflow: ellipsis;
        vertical-align: bottom;
    }
}

/* Taller than a laptop screen: the title and the x stay, the rows scroll. */
.rrc-legend {
    width: min(620px, calc(100vw - 32px));
    max-width: none;
    max-height: calc(100vh - 48px);
    max-height: calc(100dvh - 48px);
    display: flex;
    flex-direction: column;
}

.rrc-legend .dialog-header {
    flex-shrink: 0;
}

.rrc-rooms-foot {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.rrc-legend .dialog-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #30363d transparent;
}

/* Favourites and History, side by side above the open hubs. */
.rrc-drops {
    display: flex;
    gap: 6px;
    padding: 8px 10px 4px;
}

.rrc-drop-btn {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    padding: 5px 9px;
    border: 1px solid #30363d;
    border-radius: 6px;
    background: #161b22;
    color: #c9d1d9;
    font-size: 12px;
    cursor: pointer;
}

.rrc-drop-btn:hover {
    background: #21262d;
}

.rrc-drop-btn.on {
    border-color: #1f6feb;
    background: #0d1f3a;
    color: #f0f6fc;
}

.rrc-drop-btn > span:first-child {
    flex: 1;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rrc-drop-n {
    color: #8b949e;
    font-size: 11px;
}

.rrc-drop-list {
    margin: 2px 6px 6px;
    border: 1px solid #21262d;
    border-radius: 6px;
    background: #0d1117;
    max-height: 45vh;
    overflow-y: auto;
}

.rrc-drop-head {
    padding: 6px 10px 2px;
    color: #8b949e;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Info about a person: RRC, then what Reticulum knows of the identity. */
/* Wide enough for a full hash and a check answer on one line, tall enough
   for everything: no scrollbar (it stays only as a last resort on a tiny
   screen). */
.auto-reload-dialog.rrc-info {
    width: min(600px, calc(100vw - 24px));
    max-width: none;            /* .auto-reload-dialog caps at 450px */
    min-width: 0;
    max-height: calc(100vh - 24px);
    display: flex;
    flex-direction: column;
}

.rrc-info h3 .rrc-user-icon svg {
    vertical-align: -2px;
}

.rrc-info-body {
    padding: 0 18px 14px;
    overflow-y: auto;
}

.rrc-info-row {
    display: grid;
    grid-template-columns: 104px 1fr;
    gap: 10px;
    padding: 3px 0;
    font-size: 12.5px;
    color: #c9d1d9;
    border-bottom: 1px solid #21262d;
}

.rrc-info-row > span:first-child {
    color: #8b949e;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rrc-info-row > span:last-child {
    min-width: 0;
    overflow-wrap: anywhere;
}

.rrc-info-row i {
    color: #8b949e;
    font-style: normal;
}

.rrc-info-hash {
    color: #79c0ff;
    font-size: 11.5px;
    cursor: copy;
}

.rrc-info-hash:hover {
    text-decoration: underline;
}

.rrc-info-yes {
    color: #3fb950;
}

.rrc-info-no {
    color: #6e7681;
}

.rrc-info-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
}

/* The buttons share the width of the window, all the same size (one alone
   is as wide as two would be); on a phone one per row. */
.rrc-info-actions .msg-bar-btn {
    flex: 1 1 0;
    max-width: calc(50% - 3px);
    justify-content: center;
    text-align: center;
    white-space: nowrap;
}

@media (max-width: 480px) {
    .rrc-info-actions .msg-bar-btn {
        flex-basis: 100%;
        max-width: none;
    }
}

/* The Check result row, hidden until a check runs. */
.rrc-info-row[hidden] {
    display: none;
}

/* Check node / Check LXMF while asking: a circle that turns until the
   answer or the timeout. */
.rrc-spin {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 6px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    vertical-align: -1px;
    animation: reload-spin 0.8s linear infinite;
}

.rrc-info-note {
    margin-top: 10px;
    color: #6e7681;
    font-size: 11.5px;
    line-height: 1.45;
}

/* Who is in the room: search, then a click names them. */
.rrc-people {
    width: min(420px, calc(100vw - 32px));
    max-height: min(560px, calc(100vh - 64px));
    display: flex;
    flex-direction: column;
}

/* One line: a long hub name ends in "...", the full one is in the tooltip;
   the count after it is never cut. */
.rrc-people h3 {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: baseline;
    gap: 6px;
    white-space: nowrap;
}

.rrc-people h3 .rrc-title-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rrc-people h3 .rrc-who-count {
    flex-shrink: 0;
}

.rrc-people h3 .rrc-who-count {
    color: #8b949e;
    font-weight: 400;
    font-size: 13px;
}

.rrc-who-search {
    margin: 4px 16px 8px;
    padding: 7px 10px;
    border: 1px solid #30363d;
    border-radius: 6px;
    background: #0d1117;
    color: #f0f6fc;
    font-size: 13px;
    outline: none;
}

.rrc-who-search:focus {
    border-color: #388bfd;
}

.rrc-who-list {
    flex: 1;
    min-height: 80px;
    overflow-y: auto;
    padding: 0 8px 8px;
}

.rrc-who-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 6px;
    cursor: pointer;
    color: #e6edf3;
    font-size: 13px;
}

.rrc-who-row:hover {
    background: #21262d;
}

.rrc-who-row .rrc-who-nick {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rrc-who-row.me .rrc-who-nick {
    color: #58a6ff;
}

.rrc-who-row i {
    color: #8b949e;
    font-style: normal;
}

.rrc-who-row code {
    color: #6e7681;
    font-size: 11px;
}

.rrc-who-empty {
    padding: 16px;
    text-align: center;
    color: #8b949e;
    font-size: 13px;
}

.rrc-who-foot {
    padding: 8px 16px 12px;
    border-top: 1px solid #21262d;
    color: #6e7681;
    font-size: 11.5px;
}

.rrc-legend .dialog-scroll {
    padding: 4px 18px 16px;
}

.rrc-legend-row {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 14px;
    align-items: baseline;
    padding: 5px 0;
    font-size: 12.5px;
    color: #c9d1d9;
    border-bottom: 1px solid #21262d;
}

.rrc-legend-sample {
    font-family: var(--mono-font) !important;
    font-size: 12px;
}

.rrc-legend-sample * {
    font-family: var(--mono-font) !important;
}

.rrc-legend .settings-subhead {
    margin: 14px 0 4px;
    color: #8b949e;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.rrc-action-sample {
    color: #ffa657;
    font-style: italic;
}

.rrc-legend-mention {
    background: #bb800926;
    box-shadow: inset 2px 0 0 #d29922;
    padding: 0 4px;
}

/* The chat column narrow (ResizeObserver in rrc.js): the buttons as icons. */
.rrc-main.rrc-tight .rrc-head .bar-iconized .bar-txt {
    display: none;
}

.rrc-main.rrc-tight .rrc-head .bar-iconized .bar-ico {
    display: inline-flex;
}

@media (max-width: 700px), (pointer: coarse) and (max-height: 500px) {
    .rrc-head {
        flex-wrap: wrap;
    }

    .rrc-head-right {
        width: 100%;
        align-items: flex-start;
    }

    .rrc-head-right .bbs-head-actions {
        flex-wrap: wrap;
    }

    .rrc-legend-row {
        grid-template-columns: 1fr;
        gap: 2px;
    }
}

/* Phone on its side: name and buttons on one row, the room to the chat. */
@media (pointer: coarse) and (max-height: 500px) and (min-width: 560px) {
    .rrc-head {
        flex-wrap: nowrap;
        padding-top: 4px;
        padding-bottom: 4px;
    }

    .rrc-head-left {
        flex: 1 1 0;
        min-width: 0;
    }

    .rrc-head-left > * {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .rrc-head-right {
        width: auto;
    }

    .rrc-head-right .bbs-head-actions {
        flex-wrap: nowrap;
    }
}

.rrc-head-hub {
    margin-left: 8px;
    color: #6e7681;
    font-size: 12px;
    font-weight: 500;
}

/* The hub's address on the first row, after the names. */
.rrc-head-addr {
    margin-left: 8px;
    color: #6e7681;
    font-size: 11px;
    font-weight: 400;
    cursor: pointer;
    word-break: break-all;
}

.rrc-head-addr:hover {
    color: #58a6ff;
}

/* "HUB:" before the hub's name in its tab: not a room. */
.rrc-tab-hubtag {
    color: #8b949e;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
}

.rrc-topic {
    max-width: 60vw;
    color: #8b949e;
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rrc-head .msg-bar-btn svg {
    vertical-align: -1px;
}

.rrc-head .msg-bar-btn.on {
    border-color: #388bfd;
    color: #58a6ff;
}

.rrc-head .rrc-sound-btn.muted {
    border-color: #f85149;
    color: #ff7b72;
}

.rrc-body {
    flex: 1;
    min-height: 0;
    display: flex;
    position: relative;
}

.rrc-screens {
    flex: 1;
    min-width: 0;
    position: relative;
}

.rrc-empty {
    line-height: 1.7;
}

/* The chat: IRC lines, monospace like the terminals, text wrapping under
   itself after the timestamp and nick. */
.rrc-screen {
    position: absolute;
    inset: 0;
    overflow-y: auto;
    padding: 10px 14px 14px;
    background: #010409;
    color: #c9d1d9;
    font-family: var(--mono-font) !important;
    font-size: var(--rrc-font, 13px);
    line-height: 1.45;
}

/* The global Inter rule names every element: the chat needs its own. */
.rrc-screen * {
    font-family: var(--mono-font) !important;
}

.rrc-line {
    display: flex;
    gap: 8px;
    padding: 0 4px;
    border-radius: 3px;
    word-break: break-word;
}

.rrc-line + .rrc-line:not(.rrc-cont) {
    margin-top: 1px;
}

/* The bar in the speaker's colour (rrcLineEl sets --rrc-bar); .rrc-mention
   further down keeps its yellow. */
.rrc-line.rrc-said {
    box-shadow: inset 2px 0 0 var(--rrc-bar, #30363d);
}

/* The hub's lines too have their bar, in their own colour, and bold text
  : notices, errors, joins and parts, the client's own messages. */
.rrc-line.rrc-notice:not(.rrc-said) { box-shadow: inset 2px 0 0 #e3b341; }
.rrc-line.rrc-error { box-shadow: inset 2px 0 0 #ff7b72; }
.rrc-line.rrc-join { box-shadow: inset 2px 0 0 #3fb950; }
.rrc-line.rrc-part { box-shadow: inset 2px 0 0 #f85149; }
.rrc-line.rrc-joins { box-shadow: inset 2px 0 0 #58a6ff; }
.rrc-line.rrc-system { box-shadow: inset 2px 0 0 #d670d6; }
.rrc-notice:not(.rrc-said) .rrc-text,
.rrc-error .rrc-text,
.rrc-system .rrc-text {
    font-weight: 600;
}

.rrc-ts {
    flex: none;
    width: 16ch;
    color: #6e7681;
}

/* Settings > RRC Client: the times in the room windows (rrcApplyTimes in
   rrc.js); the hub window keeps them in full. */
@media (min-width: 701px) and (pointer: fine), (min-width: 701px) and (min-height: 501px) {
    .rrc-ts-short .rrc-room-screen .rrc-ts {
        width: 5ch;
    }

    .rrc-ts-short .rrc-room-screen .rrc-ts-x,
    .rrc-ts-off-desktop .rrc-room-screen .rrc-ts {
        display: none;
    }
}

@media (max-width: 700px), (pointer: coarse) and (max-height: 500px) {
    .rrc-ts-off-mobile .rrc-room-screen .rrc-ts {
        display: none;
    }
}

.rrc-who {
    flex: none;
    white-space: nowrap;
    color: #8b949e;
}

.rrc-cont .rrc-who {
    visibility: hidden;
}

/* Messenger: cards of another identity (Share contact list between
   identities) - a thin line on the left says they are not this one's. */
.msg-conv-other {
    box-shadow: inset 2px 0 0 #6e768155;
}

/* The identities that talk with this contact, one chip each. */
.msg-conv-ids {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 5px;
}

.msg-id-chip {
    padding: 1px 7px;
    border: 1px solid #30363d;
    border-radius: 10px;
    background: #161b22;
    color: #8b949e;
    font-size: 10.5px;
    line-height: 16px;
    cursor: pointer;
    white-space: nowrap;
}

.msg-id-chip:hover {
    border-color: #58a6ff;
    color: #c9d1d9;
}

.msg-id-chip.in-use {
    border-color: #1f6feb;
    color: #58a6ff;
}

.msg-id-chip b {
    margin-left: 2px;
    color: #f0f6fc;
    font-weight: 600;
}

.msg-id-chip.has-unread {
    border-color: #2ea04366;
}

.msg-id-chip.has-unread b {
    color: #3fb950;
}

.msg-share-unread {
    display: inline-block;
    margin-left: 6px;
    vertical-align: 1px;
    text-transform: none;
    letter-spacing: 0;
}

.rrc-text {
    min-width: 0;
    white-space: pre-wrap;
}

/* A reply's quote ("> nick: text", rrcQuoted): its own line, dimmed. */
.rrc-quote {
    display: block;
    margin: 1px 0 2px;
    padding-left: 8px;
    border-left: 2px solid #484f58;
    color: #8b949e;
    font-style: italic;
}

/* Nicks bold, so they stand out from what is said. */
.rrc-nick {
    cursor: pointer;
    font-weight: 700;
}

.rrc-nick:hover {
    text-decoration: underline;
}

.rrc-sign {
    flex: none;
    width: 16px;
    height: 1lh;            /* centred on the first line, also when the text wraps */
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* The line icons (rrcSign): on the text's middle, in the line's colour. */
.rrc-sign-icon {
    display: inline-block;
    vertical-align: -2px;
}

.rrc-action .rrc-text {
    font-style: italic;
}

.rrc-notice {
    color: #e3b341;
}

.rrc-notice .rrc-sign {
    color: #58a6ff;
}

.rrc-error {
    color: #ff7b72;
}

/* Joins and parts: bold and brighter, the nick in its list colour. */
.rrc-join,
.rrc-part {
    color: #9da7b3;
    font-weight: 600;
}

.rrc-join .rrc-nick,
.rrc-part .rrc-nick {
    font-weight: 700;
}

/* Messages from the hub and the link (connecting, pongs, commands sent):
   pink-purple, as IRC clients show server notices. */
.rrc-system {
    color: #d670d6;
}

/* "N new": where the news starts when you come back to a room. */
.rrc-newline {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 6px 0;
    color: #f85149;
    font-size: 11px;
}

.rrc-newline::before,
.rrc-newline::after {
    content: "";
    flex: 1;
    border-top: 1px solid #f8514988;
}

/* A tab or a room with news: bright and bold, a blue dot; named: orange. */
.rrc-tab.rrc-unread .msg-tab-name,
.rrc-tree-room.rrc-unread > span:first-child {
    color: #e6edf3;
    font-weight: 700;
}

.rrc-tab.rrc-unread .msg-tab-name::before,
.rrc-tree-room.rrc-unread > span:first-child::before {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 6px;
    border-radius: 50%;
    background: #58a6ff;
    vertical-align: 1px;
}

.rrc-tab.rrc-unread-at .msg-tab-name::before {
    background: #f0883e;
    box-shadow: 0 0 0 2px #f0883e44;
}

/* Links in what people write: rooms, LXMF addresses, NomadNet pages. */
.rrc-link {
    color: #79c0ff;
    text-decoration: underline;
    text-decoration-color: #79c0ff66;
    cursor: pointer;
}

.rrc-link-room {
    color: #56d4dd;
}

.rrc-link-lxmf {
    color: #d2a8ff;
}

.rrc-text code {
    background: #6e768133;
    border-radius: 4px;
    padding: 0 4px;
}

.rrc-nick,
.rrc-user {
    cursor: pointer;
}

/* Joins and parts folded into one line. */
.rrc-joins {
    color: #9da7b3;
}

.rrc-g-join {
    color: #3fb950;
}

.rrc-g-part {
    color: #f85149;
}

/* Settings > System > Sounds: the play button before each kind. */
.sound-test {
    width: 22px;
    height: 20px;
    margin-right: 6px;
    padding: 0;
    border: 1px solid #30363d;
    border-radius: 4px;
    background: #161b22;
    color: #58a6ff;
    font-size: 9px;
    cursor: pointer;
    vertical-align: 1px;
}

.sound-test:hover {
    background: #21262d;
}

/* Grip on the left edge of the people list. */
.rrc-users-grip {
    width: 5px;
    flex: none;
    cursor: col-resize;
    background: transparent;
    border-left: 1px solid #30363d;
    touch-action: none;
}

.rrc-users-grip:hover {
    background: #1f6feb55;
}

.rrc-users-grip[hidden] {
    display: none;
}

.rrc-users-grip + .rrc-users {
    border-left: none;
}

.rrc-join .rrc-sign {
    color: #3fb950;
}

.rrc-part .rrc-sign {
    color: #f85149;
}

/* Named by someone: the line lights up. */
.rrc-line.rrc-mention {
    background: #bb800926;
    box-shadow: inset 2px 0 0 #d29922;
}

.rrc-text a {
    color: #58a6ff;
}

.rrc-hash {
    text-decoration: underline dotted;
}

/* People in the room. */
.rrc-users {
    width: 190px;
    flex: none;
    overflow-y: auto;
    border-left: 1px solid #30363d;
    background: #0d1117;
    padding: 6px 0;
}

.rrc-users-head {
    display: flex;
    justify-content: space-between;
    padding: 4px 12px 8px;
    color: #8b949e;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.rrc-user {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 3px 12px;
    font-size: var(--rrc-font, 13px);
    cursor: pointer;
    white-space: nowrap;
}

.rrc-user:hover {
    background: #161b22;
}

.rrc-user.me .rrc-user-name {
    font-weight: 700;
}

/* You in the list: an arrow in place of the person icon, as Sideband does
  ; as wide as the icon, so the names stay in line. */
.rrc-user-icon.rrc-user-me {
    width: 12px;
    justify-content: center;
    font-size: 12px;
    line-height: 1;
}

.rrc-user-name {
    overflow: hidden;
    text-overflow: ellipsis;
}

.rrc-user-icon {
    flex: none;
    display: inline-flex;
}

/* The hub's public rooms, over the chat. */
.rrc-rooms {
    position: absolute;
    top: 8px;
    right: 8px;
    width: min(380px, calc(100% - 16px));
    max-height: calc(100% - 16px);
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    background: #161b22;
    border: 1px solid #30363d;
    border-radius: 8px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.55);
    z-index: 20;
}

.rrc-rooms[hidden] {
    display: none;
}

.rrc-rooms-head {
    display: flex;
    align-items: center;
    gap: 8px;
}

.rrc-rooms-head b {
    flex: 1;
    font-size: 13px;
}

.rrc-rooms .msg-search {
    margin: 0;
    width: 100%;
    box-sizing: border-box;
}

.rrc-room-list {
    overflow-y: auto;
    min-height: 0;
}

.rrc-room-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 4px;
    border-bottom: 1px solid #21262d;
}

.rrc-room-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    font-size: 13px;
}

.rrc-room-text span {
    color: #8b949e;
    font-size: 11.5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rrc-room-text .rrc-room-users {
    font-weight: normal;
    white-space: nowrap;
}

.rrc-room-in {
    color: #3fb950;
    font-size: 11.5px;
}

.rrc-prompt {
    color: #58a6ff;
    font-family: var(--mono-font) !important;
    font-size: 13px;
    white-space: nowrap;
    max-width: 30%;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 700px), (pointer: coarse) and (max-height: 500px) {
    .rrc-view.active {
        flex-direction: column;
    }

    .rrc-view.rrc-has-session .rrc-side {
        display: none;
    }

    .rrc-view:not(.rrc-has-session) .rrc-main {
        display: none;
    }

    .rrc-head .msg-back {
        display: inline-block;
    }

    /* One flowing line, as in phone IRC clients: time, nick, then the text
       wraps under the whole line instead of in a narrow column. */
    .rrc-line {
        display: block;
    }

    .rrc-ts {
        width: auto;
        white-space: nowrap;
        font-size: 11px;
        margin-right: 6px;
    }

    .rrc-ts-x {
        display: none;
    }

    .rrc-who,
    .rrc-sign {
        margin-right: 6px;
    }

    .rrc-sign {
        vertical-align: top;
    }

    /* The nick is in the head already: the line is all for typing. */
    .rrc-prompt {
        display: none;
    }

    .rrc-screen {
        padding: 8px;
        font-size: 12.5px;
    }

    /* The people in the room cover the chat when asked for. */
    .rrc-users {
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        width: 70%;
        z-index: 15;
        box-shadow: -6px 0 18px rgba(0, 0, 0, 0.5);
    }
}

/* RRC: news dots, people counts, our nick, commands, emoji. */
.rrc-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #58a6ff;
    flex: none;
    box-shadow: 0 0 0 2px #58a6ff33;
}

.rrc-tab-users {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 0 6px;
    border-radius: 9px;
    background: #388bfd1f;
    border: 1px solid #388bfd40;
    color: #58a6ff;
    font-size: 11px;
    font-weight: 600;
    line-height: 16px;
}

.rrc-tab-users svg {
    width: 11px;
    height: 11px;
}

.rrc-hub-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-left: 6px;
    border-radius: 50%;
    background: #1f6feb;
    box-shadow: 0 0 0 2px #1f6feb44;
    flex: none;
}

.rrc-tree-side {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.rrc-tree-users {
    color: #6e7681;
    font-size: 11px;
}

.rrc-tree-hub .rrc-dot,
.rrc-tree-hub .msg-conv-unread {
    margin-left: 6px;
}

.rrc-me {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12.5px;
    color: #c9d1d9;
    white-space: nowrap;
}

.rrc-me-label {
    color: #6e7681;
}

.rrc-me-head .rrc-prompt-nick {
    font-weight: 600;
    color: #58a6ff;
}

.rrc-prompt .rrc-me {
    font-family: var(--mono-font) !important;
}

.rrc-prompt .rrc-prompt-nick,
.rrc-prompt .rrc-nick-edit {
    font-family: var(--mono-font) !important;
    color: #58a6ff;
}

.rrc-prompt-nick.rrc-nonick {
    color: #8b949e;
    font-weight: 400;
}

.rrc-me-hash {
    color: #8b949e;
    font-size: 11px;
    cursor: pointer;
}

.rrc-me-hash:hover {
    color: #58a6ff;
}

.rrc-nick-edit {
    width: 150px;
    padding: 3px 6px;
    border: 1px solid #388bfd;
    border-radius: 4px;
    background: #0d1117;
    color: #f0f6fc;
    font-size: 12.5px;
    outline: none;
}

.rrc-prompt {
    max-width: 35%;
    overflow: visible;
}

.rrc-input-row {
    position: relative;
}

.rrc-emoji-btn {
    flex: none;
    width: 32px;
    height: 32px;
    border: 1px solid #30363d;
    border-radius: 6px;
    background: #161b22;
    color: #d29922;
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
}

.rrc-emoji-btn:hover {
    background: #21262d;
}

/* The / button: the command list by mouse. */
.rrc-cmds-btn {
    color: #58a6ff;
    font-family: 'Cascadia Mono', Consolas, monospace;
    font-weight: 700;
    font-size: 16px;
}

/* Commands and emoji open above the command line. */
.rrc-cmds,
.rrc-emojis,
.rrc-style {
    position: absolute;
    bottom: calc(100% + 4px);
    background: #161b22;
    border: 1px solid #30363d;
    border-radius: 8px;
    box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.5);
    z-index: 30;
}

.rrc-cmds[hidden],
.rrc-emojis[hidden],
.rrc-style[hidden] {
    display: none;
}

.rrc-cmds {
    left: 12px;
    width: min(680px, calc(100% - 24px));
    max-height: 300px;
    overflow-y: auto;
    padding: 4px;
}

.rrc-cmd {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr) minmax(0, 1.2fr);
    gap: 10px;
    align-items: baseline;
    padding: 5px 8px;
    border-radius: 5px;
    font-size: 12.5px;
    cursor: pointer;
}

.rrc-cmd.active,
.rrc-cmd:hover {
    background: #1f6feb33;
}

.rrc-cmd-name {
    color: #58a6ff;
    font-family: var(--mono-font) !important;
    font-weight: 600;
}

.rrc-cmd-args {
    color: #8b949e;
    font-family: var(--mono-font) !important;
    font-size: 11.5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* One row per command: what does not fit ends in "…" (hover: the syntax). */
.rrc-cmd-what {
    color: #c9d1d9;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rrc-cmd-what i {
    margin-left: 4px;
    padding: 0 5px;
    border: 1px solid #30363d;
    border-radius: 8px;
    color: #8b949e;
    font-size: 10px;
    font-style: normal;
}

/* Who can: room operator in green (@), server operator in amber. */
.rrc-cmd-op .rrc-cmd-what i {
    border-color: #238636;
    color: #3fb950;
}

.rrc-cmd-sop .rrc-cmd-what i {
    border-color: #9e6a03;
    color: #d29922;
}

.rrc-cmd-founder .rrc-cmd-what i {
    border-color: #8957e5;
    color: #bc8cff;
}

/* "@" typed: the people of the room, filtered by the letters after it. */
.rrc-cmd.rrc-at-row {
    grid-template-columns: 22px minmax(0, 1fr) auto;
}

.rrc-at-row code {
    color: #6e7681;
    font-size: 11px;
}

/* Emoji: ten a page (2 rows of 5), the groups and the arrows under them. */
.rrc-emojis {
    right: 12px;
    padding: 6px;
    width: 280px;
    max-width: calc(100% - 24px);
}

.rrc-emoji-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 2px;
}

.rrc-emoji-label {
    color: #6e7681;
    font-size: 10px;
    text-align: center;
    margin: 2px 0;
}

.rrc-emoji-nav {
    display: flex;
    align-items: center;
    gap: 6px;
    border-top: 1px solid #21262d;
    padding-top: 4px;
}

.rrc-egroups {
    display: flex;
    flex: 1;
    justify-content: space-between;
}

.rrc-epage,
.rrc-egroup {
    border: none;
    border-radius: 5px;
    background: none;
    color: #c9d1d9;
    cursor: pointer;
    padding: 0;
}

/* Big enough for a finger, apart from the groups beside them. */
.rrc-epage {
    flex: none;
    width: 34px;
    height: 32px;
    font-size: 26px;
    line-height: 1;
    background: #161b22 !important;
    border: 1px solid #30363d !important;
}

.rrc-egroup {
    width: 20px;
    height: 24px;
    font-size: 13px;
    opacity: 0.55;
}

.rrc-egroup.on {
    opacity: 1;
    background: #21262d;
}

.rrc-epage:hover,
.rrc-egroup:hover {
    background: #21262d;
    opacity: 1;
}

/* Colours and styles: the palette, the style on shown on its button. */
.rrc-style {
    left: 12px;
    width: 280px;
    max-width: calc(100% - 24px);
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.rrc-style-row {
    display: flex;
    align-items: center;
    gap: 4px;
}

.rrc-style-gap {
    flex: 1;
}

.rrc-style-tab,
.rrc-style-tog,
.rrc-style-reset,
.rrc-fx {
    border: 1px solid #30363d;
    border-radius: 5px;
    background: #0d1117;
    color: #c9d1d9;
    font-size: 12px;
    height: 24px;
    padding: 0 7px;
    cursor: pointer;
}

.rrc-style-tog {
    min-width: 24px;
}

.rrc-style-close {
    margin-left: 4px;
    font-size: 15px;
    line-height: 1;
}

.rrc-style-close:hover {
    border-color: #f85149;
}

.rrc-style-tab.on,
.rrc-style-tog.on,
.rrc-fx.on {
    border-color: #58a6ff;
    background: #1f2a3a;
}

.rrc-style-tog:disabled {
    opacity: 0.35;
    cursor: default;
}

.rrc-style-reset:hover {
    border-color: #f85149;
}

.rrc-style-reset:disabled {
    opacity: 0.35;
    cursor: default;
    border-color: #30363d;
}

.rrc-swatches {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    gap: 3px;
}

.rrc-swatch {
    height: 22px;
    border: 1px solid #30363d;
    border-radius: 4px;
    cursor: pointer;
    padding: 0;
}

.rrc-swatch {
    -webkit-touch-callout: none;
    user-select: none;
}

.rrc-swatch.on {
    outline: 2px solid #58a6ff;
    outline-offset: 1px;
}

/* The colour of the back: an orange ring, the text a blue one; one box can be both. */
.rrc-swatch.on-b {
    box-shadow: 0 0 0 2px #0d1117, 0 0 0 4px #d29922;
}

.rrc-swatch.on.on-b {
    outline-offset: 3px;
}

.rrc-style-sample {
    font-size: 14px;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
}

.rrc-style-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: #8b949e;
    margin-right: 6px;
}

.rrc-style-chip i {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 1px solid #30363d;
    border-radius: 3px;
    font-style: normal;
    font-size: 11px;
    line-height: 14px;
    text-align: center;
}

.rrc-style-chip.f {
    color: #58a6ff;
}

.rrc-style-chip.b {
    color: #d29922;
}

/* The box with colours: its text drawn by a copy under it (rrcMirror),
   the textarea on top only for the caret and the selection. */
.rrc-input-area {
    position: relative;
    z-index: 1;
}

.rrc-input-area.rrc-styled {
    color: transparent;
    background: transparent;
    caret-color: #e6edf3;
}

.rrc-input-area::placeholder {
    color: #8b949e;
    font-weight: 400;
    font-style: normal;
}

.rrc-mirror {
    position: absolute;
    box-sizing: border-box;
    margin: 0;
    border-style: solid;
    border-color: transparent;
    background: #010409;
    color: #e6edf3;
    font-weight: 400;
    white-space: pre-wrap;
    overflow-wrap: break-word;
    overflow: hidden;
    pointer-events: none;
    visibility: hidden;
    z-index: 0;
}

.rrc-mirror.on {
    visibility: visible;
}

.rrc-mirror,
.rrc-mirror * {
    font-family: var(--mono-font) !important;
}

/* The small bar over a selection in the box. */
.rrc-sel {
    position: absolute;
    bottom: calc(100% + 2px);
    display: flex;
    gap: 3px;
    padding: 4px;
    background: #161b22;
    border: 1px solid #30363d;
    border-radius: 7px;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.5);
    z-index: 31;
}

.rrc-sel[hidden] {
    display: none;
}

.rrc-style-hint {
    font-size: 10px;
    color: #6e7681;
}

.rrc-swatch-none {
    background: #0d1117;
    color: #8b949e;
    font-size: 13px;
}

.rrc-fxs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 3px;
}

/* Presets: text and back together, big enough for a finger. */
.rrc-presets {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 4px;
}

.rrc-preset {
    height: 28px;
    border: 1px solid #30363d;
    border-radius: 5px;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    padding: 0;
    -webkit-touch-callout: none;
    user-select: none;
}

.rrc-preset.on {
    outline: 2px solid #58a6ff;
    outline-offset: 1px;
}

.rrc-fx {
    padding: 0 2px;
    font-weight: 700;
    font-size: 11px;
    overflow: hidden;
}

.rrc-style-btn {
    position: relative;
    font-size: 15px;
}

.rrc-style-btn.active::after {
    content: '';
    position: absolute;
    left: 6px;
    right: 6px;
    bottom: 3px;
    height: 3px;
    border-radius: 2px;
    background: var(--rrc-style-dot, #c9d1d9);
}

/* A message with colours: the background as a small chip. */
.rrc-fmt-chip {
    padding: 0 3px;
    border-radius: 3px;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

.rrc-emoji {
    width: 100%;
    height: 38px;
    border: none;
    border-radius: 5px;
    background: none;
    font-size: 22px;
    cursor: pointer;
}

.rrc-emoji:hover {
    background: #21262d;
}

.rrc-user.ignored .rrc-user-name {
    text-decoration: line-through;
    color: #6e7681;
}

@media (max-width: 700px), (pointer: coarse) and (max-height: 500px) {
    .rrc-head .rrc-me-head {
        order: 5;
    }

    .rrc-cmd {
        grid-template-columns: 90px minmax(0, 1fr);
    }

    .rrc-cmd-args {
        display: none;
    }

    .rrc-users-grip {
        display: none;
    }
}


/* The moon next to AutoReply: away at one click, yellow while away. */
.away-btn {
    padding-left: 7px;
    padding-right: 7px;
    display: inline-flex;
    align-items: center;
}

.away-btn.on {
    color: #e3b341;
    border-color: #e3b341;
}

/* "Auto" in the LXMF and RRC bars: the automatic replies at hand. */
.auto-reply-btn.on::before {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 5px;
    border-radius: 50%;
    background: #3fb950;
    vertical-align: 1px;
}

.auto-reply-menu {
    position: fixed;
    z-index: 3000;
    width: min(280px, calc(100vw - 16px));
    padding: 8px 10px 10px;
    border: 1px solid #30363d;
    border-radius: 10px;
    background: #161b22;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
}

.auto-reply-head {
    margin-bottom: 4px;
    color: #8b949e;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.auto-reply-menu .settings-row {
    padding: 5px 0;
}

.auto-reply-config {
    width: 100%;
    margin-top: 6px;
}

/* Offline in the Messages bar: amber while not listening. */
.msg-offline-btn.on {
    border-color: #d29922;
    color: #d29922;
}

/* RMAP: details and config of a backbone or an RNode (Copy config). */
.auto-reload-dialog.rmap-cfg-dialog {
    width: min(560px, calc(100vw - 24px));
    max-width: none;
    min-width: 0;
}

.rmap-cfg-info {
    margin: 4px 0 10px;
}

.rmap-cfg-row {
    display: grid;
    grid-template-columns: 70px minmax(0, 1fr);
    gap: 10px;
    padding: 3px 0;
    font-size: 12.5px;
}

.rmap-cfg-row > span:first-child {
    color: #8b949e;
}

.rmap-cfg-row code {
    word-break: break-all;
}

.rmap-cfg-text {
    width: 100%;
    box-sizing: border-box;
    font-family: var(--mono-font);
    font-size: 12px;
    white-space: pre;
    overflow-x: auto;
}

/* The Local search engine in a tab of its own: as tall as the window
   (fitSearchTab), only the results scroll. */
.cache-search-page {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    max-width: 1000px;
    margin: 0 auto;
    padding: 14px 16px 8px;
    overflow: hidden;
}

.cache-search-page h2 {
    margin: 0 0 6px;
    font-size: 18px;
}

.cache-search-page .cache-search-results {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
}

.cache-search-page .cache-hit-title {
    font-size: 14px;
}

/* Not a Micron page: Center and the phone layout width do not apply. */
body.center-pages .page-content:has(> .cache-search-page),
.page-content:has(> .cache-search-page) {
    width: auto !important;
    min-width: 0 !important;
    white-space: normal;
}

/* A phone: never wider than the screen, long hashes and paths wrap. */
.page-content .cache-search-page {
    width: 100%;
    max-width: min(1000px, 100vw);
}

.cache-search-page .cache-hit-meta,
.cache-search-page .cache-hit-snippet,
.cache-search-page .cache-hit-title,
.cache-search-page .settings-hint {
    overflow-wrap: anywhere;
}

@media (max-width: 767px), (pointer: coarse) and (max-height: 500px) {
    .cache-search-page {
        padding: 10px 8px 6px;
    }

    .cache-search-page h2 {
        font-size: 16px;
    }
}

.cache-search-page .cache-hit-snippet {
    font-size: 12px;
}

/* Phones: no state dots on the tabs, there is little room. */
@media (max-width: 767px), (pointer: coarse) and (max-height: 500px) {
    .tab .app-tab-state,
    .tab .page-tab-state {
        display: none !important;
    }
}

/* The clients' own lists (LXMF, RRC, BBS) can be hidden to use the chat full
   width: toggleClientList. RRC and BBS keep a thin rail with the buttons;
   LXMF keeps its bar. Phones show list or chat one at a time: not there. */
.list-toggle-btn {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid #30363d;
    border-radius: 8px;
    background: #21262d;
    color: #c9d1d9;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.list-toggle-btn:hover {
    background: #30363d;
    color: #f0f6fc;
}

.list-toggle-btn.on {
    color: #58a6ff;
    border-color: #1f6feb;
}

@media (max-width: 767px), (pointer: coarse) and (max-height: 500px) {
    .list-toggle-btn {
        display: none;
    }
}

@media (min-width: 768px) and (pointer: fine), (min-width: 768px) and (min-height: 501px) {
    .list-collapsed .bbs-side {
        width: 52px !important;
        min-width: 0;
    }

    .list-collapsed .bbs-side > :not(.bbs-side-head) {
        display: none !important;
    }

    .list-collapsed .bbs-side-head {
        flex-direction: column;
        justify-content: flex-start;
        gap: 8px;
        padding: 10px 0;
        flex: 1;
        border-bottom: none;
    }

    .list-collapsed .bbs-side-head .bbs-title {
        display: none;
    }

    .list-collapsed .bbs-side-head .list-toggle-btn {
        order: -1;
    }

    .messenger-view.list-collapsed .msg-list {
        display: none;
    }

    .messenger-view.list-collapsed .msg-bar-head {
        width: auto;
        border-right: none;
    }

}

/* One client alone in its own window (/?app=rrc...): no node list, no tabs. */
body.app-window .sidebar,
body.app-window .sidebar-resizer,
body.app-window .tab-bar,
body.app-window .sidebar-toggle-btn {
    display: none !important;
}

body.app-window .content {
    width: 100vw !important;
    min-width: 100vw !important;
    max-width: 100vw !important;
}

/* Back to rBrowser from a client window: a home icon, as the other buttons. */
.app-main-btn {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #58a6ff !important;
}

/* RRC new messages on a room tab / list row: orange balloon + count; red @N
   for mentions. Gone once read. */
.rrc-new-badge {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-left: 4px;
    padding: 0 6px;
    border-radius: 9px;
    background: #d2992226;
    border: 1px solid #d2992266;
    color: #f0b72f;
    font-size: 11px;
    font-weight: 700;
    line-height: 16px;
}

.rrc-new-badge.rrc-new-at {
    background: #f8514926;
    border-color: #f8514980;
    color: #ff7b72;
}

/* Someone joined: green, a person and +N. */
.rrc-new-badge.rrc-new-join {
    background: #2ea04326;
    border-color: #2ea04366;
    color: #3fb950;
}

/* One line until Shift+Enter: no scroll arrows, a long placeholder cut. */
.rrc-input-area:not(.tall) {
    overflow-y: hidden;
}

.rrc-input-area::placeholder {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Client top bars: words on a desktop, icons on a phone (iconizeBar). */
.bar-ico {
    display: none;
}

@media (max-width: 767px), (pointer: coarse) and (max-height: 500px) {
    .bar-iconized .bar-txt {
        display: none;
    }

    .bar-iconized .bar-ico {
        display: inline-flex;
    }

    .msg-bar-btn.bar-iconized {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 34px;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
}

/* Phones: the RRC head keeps the room, its hub and the topic; the address
   and the status line stay on desktop (too tall on a phone). */
@media (max-width: 767px), (pointer: coarse) and (max-height: 500px) {
    .rrc-head .rrc-head-addr,
    .rrc-head .rrc-head-status {
        display: none !important;
    }

    .rrc-head .rrc-topic {
        max-width: none;
        color: #c9d1d9;
        font-size: 13px;
    }
}

/* LXMF: the order of the conversations sits by their search, where it acts
  ; the head keeps title and buttons. */
.msg-search-box {
    position: relative;
    flex: 1;
    min-width: 0;
}

.msg-search-box .msg-search-clear {
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
}

/* LXMF head as the other clients': « name, then list, options, x on the
   right. Its name is longer: head and list a bit wider, together. */
.msg-bar-head .msg-bar-title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.msg-bar-head .msg-bar-title > span {
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (min-width: 768px) and (pointer: fine), (min-width: 768px) and (min-height: 501px) {
    .messenger-view .msg-bar-head,
    .messenger-view .msg-list {
        width: 340px;
    }
}

.msg-search-wrap .msg-sort {
    flex: none;
    margin-left: 8px;
    padding: 6px 4px;
    border-radius: 16px;
}

/* Phones: no AutoReply button - the moon does away on/off and
   Settings has every switch; one icon less keeps the x on the same line. */
@media (max-width: 767px), (pointer: coarse) and (max-height: 500px) {
    .auto-reply-btn {
        display: none !important;
    }
}

/* RRC: the room after joined/left (a line in the wrong window shows). */
.rrc-where {
    opacity: 0.6;
}

/* Settings > About: a newer rBrowser on GitHub (rbrowser/updates.py). */
.settings-nav-item.has-update::after {
    content: "";
    width: 7px;
    height: 7px;
    margin-left: 6px;
    border-radius: 50%;
    background: #3fb950;
    display: inline-block;
}

.settings-update {
    margin: 8px 0;
    line-height: 1.5;
}

.settings-update code {
    user-select: all;
}

/* Update now: the button under "vX is out", and the bar while git pulls. */
.settings-update .update-now-btn { display: block; margin-top: 8px; }
.update-now-off { margin-top: 6px; opacity: .75; }
.update-progress {
    height: 8px;
    margin: 12px 0 6px;
    border-radius: 4px;
    background: #21262d;
    overflow: hidden;
}
.update-progress > div {
    height: 100%;
    width: 0;
    background: #3fb950;
    transition: width .3s;
}

/* The clients' empty page: rBrowser's version, the client's name under it. */
.client-welcome {
    margin-bottom: 18px;
}

.client-welcome h2 {
    color: #f0f6fc;
    font-size: 28px;
    font-weight: 700;
    margin: 0 0 10px;
}

.client-welcome .bbs-title {
    justify-content: center;
    font-size: 15px;
}

/* NomadNet new tab: the text under the title, as the clients empty pages. */
.welcome .welcome-text {
    font-size: 12.5px;
    color: #8b949e;
    line-height: 1.6;
    max-width: 560px;
    margin: 0 auto 18px;
}

/* The x on a client's tab: four choices, on two rows on a phone. */
.app-off-dialog {
    min-width: 500px;
}

.app-off-actions {
    flex-wrap: wrap;
    gap: 8px;
}

.app-off-dialog .btn-danger {
    background: #da3633;
    border-color: #f85149;
}

.app-off-dialog .btn-danger:hover {
    background: #f85149;
}

@media (max-width: 600px) {
    .app-off-dialog {
        min-width: 0 !important;
        width: calc(100vw - 24px);
        box-sizing: border-box;
    }

    /* The four on one row: smaller, sharing the width. */
    .app-off-actions {
        flex-wrap: nowrap;
        gap: 5px;
    }

    .app-off-actions > button {
        flex: 1 1 0;
        min-width: 0;
        padding: 7px 4px !important;
        font-size: 12px !important;
        white-space: nowrap;
    }
}

/* RRC room tabs being dragged to another place. */
.rrc-tab.rrc-dragging {
    opacity: 0.45;
}

.rrc-tab.rrc-drop-before {
    box-shadow: inset 3px 0 0 #58a6ff;
}

.rrc-tab.rrc-drop-after {
    box-shadow: inset -3px 0 0 #58a6ff;
}

/* Guest mode (Settings > Guest mode): a read-only session. */
.status-bar .sb-guest {
    margin-left: 10px;
    color: #d29922;
}
.status-bar .sb-guest a, .settings-guest-note a {
    color: #58a6ff;
    margin-left: 6px;
}
.settings-guest-note {
    margin: 0 0 12px;
    padding: 8px 10px;
    border: 1px solid #9e6a03;
    border-radius: 6px;
    background: rgba(187, 128, 9, 0.12);
    color: #e3b341;
    font-size: 13px;
}
.guest-readonly .settings-pane .toggle-switch,
.guest-readonly .settings-pane input,
.guest-readonly .settings-pane select,
.guest-readonly .settings-pane textarea,
.guest-readonly .settings-pane button {
    pointer-events: none;
    opacity: 0.55;
}
.guest-no-lxmf #messenger-tab {
    display: none !important;
}

/* Audio in a message: ▶/⏸, a bar to jump, the time, ⋯ for the file menu. */
.msg-audio {
    display: flex;
    align-items: center;
    gap: 10px;
    width: min(320px, 100%);
    box-sizing: border-box;
    padding: 6px 8px;
    margin: 2px 0;
    border: 1px solid #30363d;
    border-radius: 10px;
    background: rgba(13, 17, 23, 0.55);
}
.msg-audio-play {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 0;
    background: #238636;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.msg-audio-play:hover {
    background: #2ea043;
}
.msg-audio-body {
    flex: 1 1 auto;
    min-width: 0;
}
.msg-audio-bar {
    height: 6px;
    border-radius: 3px;
    background: #30363d;
    cursor: pointer;
    overflow: hidden;
    margin: 4px 0 6px;
}
.msg-audio-fill {
    height: 100%;
    width: 0;
    background: #58a6ff;
}
.msg-audio-meta {
    display: flex;
    gap: 8px;
    font-size: 11px;
    color: #8b949e;
    white-space: nowrap;
}
.msg-audio-time {
    font-variant-numeric: tabular-nums;
    color: #c9d1d9;
}
.msg-audio-name {
    overflow: hidden;
    text-overflow: ellipsis;
}
.msg-audio .msg-file-more {
    position: static;
    flex: 0 0 auto;
    cursor: pointer;
    color: #8b949e;
    padding: 0 2px;
}

/* LXMF menu > Send address to...: the list of contacts and peers. */
.send-addr-dialog {
    width: min(460px, calc(100vw - 32px));
}
.send-addr-search {
    width: 100%;
    box-sizing: border-box;
    margin: 4px 0 8px;
}
.send-addr-list {
    max-height: min(50vh, 420px);
    overflow-y: auto;
    border: 1px solid #30363d;
    border-radius: 6px;
}
.send-addr-row {
    cursor: pointer;
}
.send-addr-row code {
    overflow-wrap: anywhere;
}
.send-addr-preview {
    margin: 8px 0 0;
    padding: 8px;
    background: #0d1117;
    border: 1px solid #30363d;
    border-radius: 6px;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    font-family: var(--mono-font);
    font-size: 12px;
}

/* Settings > System > Apps in the tab bar: › opens that app's settings. */
.settings-link-btn {
    background: none;
    border: 1px solid #30363d;
    border-radius: 4px;
    color: #58a6ff;
    cursor: pointer;
    font-size: 13px;
    line-height: 1;
    padding: 1px 6px;
    margin-right: 4px;
}
.settings-link-btn:hover {
    border-color: #58a6ff;
}

/* Touch screens: a long press on an RRC message opens Reply / Copy text
   (rrc.js), not the phone's text selection. */
@media (hover: none) {
    #rrc-screens [data-reply-text] {
        -webkit-user-select: none;
        user-select: none;
        -webkit-touch-callout: none;
    }
}

/* About > How to update: the three ways, as a short list. */
.settings-update-howto { margin-top: 10px; line-height: 1.45; }
.settings-update-howto ul { margin: 4px 0 0; padding-left: 18px; }
.settings-update-howto li { margin: 3px 0; }
.settings-update-howto code { font-size: 0.95em; }

/* What is new in an update (CHANGELOG.md): About and the update window. */
.update-news { margin-top: 10px; max-height: 260px; overflow-y: auto; line-height: 1.45; text-align: left; }
.update-news-version { margin-top: 6px; font-weight: 700; color: #f0f6fc; }
.update-news-version span { font-weight: 400; color: #8b949e; }
.update-news ul { margin: 3px 0 0; padding-left: 18px; }
.update-news li { margin: 3px 0; }
.update-news code { font-size: 0.95em; }

/* Phones: info, hide and star on a node card all the same size (the nav
   bar's 44 px buttons and the browse buttons' rule made two of them big). */
@media (max-width: 767px), (hover: none) and (pointer: coarse) {
    .sidebar .node-item .node-actions button {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        max-width: 32px !important;
        min-height: 32px !important;
        max-height: 32px !important;
        padding: 0 !important;
    }
}

/* rBrowser's logo (templates/logo.png): the splash screen while the page
   starts, the clients' empty pages, Settings (by Restart / Shut down) and
   About. */
.rb-splash {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: radial-gradient(circle at 50% 42%, #1a1033 0%, #0d1117 60%);
    transition: opacity .5s ease;
}

.rb-splash-out {
    opacity: 0;
    pointer-events: none;
}

/* The two logos one on the other: the second (another glow) fades in. */
.rb-splash-art {
    position: relative;
    width: 240px;
    height: 240px;
    animation: rb-splash-pulse 2.4s ease-in-out infinite;
    will-change: transform;
}

.rb-splash-logo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.rb-splash-fade {
    opacity: 0;
    animation: rb-splash-fade 1.4s ease-in-out 1.1s forwards;
    will-change: opacity;
}

@keyframes rb-splash-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.03); }
}

@keyframes rb-splash-fade {
    to { opacity: 1; }
}

.rb-splash-name {
    color: #e6edf3;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: .5px;
}

.rb-splash-sub {
    color: #8b949e;
    font-size: 13px;
}

.rb-logo {
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    vertical-align: middle;
}

.client-welcome .rb-logo-welcome {
    display: block;
    width: 96px;
    height: 96px;
    margin: 0 auto 8px;
    filter: drop-shadow(0 0 10px rgba(0, 200, 120, .35));
}

.settings-power {
    flex-wrap: wrap;
}

.settings-power-logo {
    flex: 0 0 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding-bottom: 4px;
    color: #8b949e;
    font-size: 12px;
}

.settings-power-logo .rb-logo {
    width: 28px;
    height: 28px;
}

.settings-about-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 6px;
}

.settings-about-logo .rb-logo {
    width: 56px;
    height: 56px;
}