/* ========================================================================== WhoWasThat — styles.css Visual identity: a "secure field notebook / cartographer's dossier". The map is the hero; pins are the content; coordinates and keys are shown in a monospace face to reinforce the field-notebook feel. One accent (pin vermilion) is justified because pins literally are the subject; a teal "vault" accent carries the encrypted/secure identity. All colours are CSS variables so the whole app re-themes by flipping data-theme on . Change a value once here and it updates everywhere. ========================================================================== */ :root { --font-display: 'Space Grotesk', system-ui, sans-serif; --font-body: 'Inter', system-ui, sans-serif; --font-mono: 'Space Mono', ui-monospace, monospace; --radius: 14px; --radius-sm: 9px; --tap: 44px; } html[data-theme='dark'] { --bg: #0D1218; --surface: #151D26; --surface-2: #1C2630; --surface-3: #243240; --ink: #E7ECF1; --ink-soft: #93A1AE; --line: #2A3845; --pin: #FF5E50; --vault: #45C2C9; --vault-soft: #11343A; --warn: #FF6A5C; --shadow: 0 12px 40px rgba(0, 0, 0, .5); --shadow-sm: 0 4px 16px rgba(0, 0, 0, .4); } html[data-theme='light'] { --bg: #E8EBEF; --surface: #FFFFFF; --surface-2: #F3F6F8; --surface-3: #E9EEF2; --ink: #16202B; --ink-soft: #5A6775; --line: #D4DBE2; --pin: #E0443B; --vault: #1E6E76; --vault-soft: #E1F0F1; --warn: #C8372D; --shadow: 0 14px 44px rgba(20, 40, 60, .18); --shadow-sm: 0 4px 16px rgba(20, 40, 60, .12); } * { box-sizing: border-box; } html, body { height: 100%; margin: 0; } body { font-family: var(--font-body); background: var(--bg); color: var(--ink); -webkit-font-smoothing: antialiased; overscroll-behavior: none; } h1, h2, h3, h4 { font-family: var(--font-display); margin: 0; letter-spacing: -.01em; } .mono { font-family: var(--font-mono); } .muted { color: var(--ink-soft); } .small { font-size: 13px; } .xsmall { font-size: 11px; } .hidden { display: none !important; } .block { width: 100%; } /* ---------- buttons ---------- */ .btn { font-family: var(--font-body); font-size: 15px; font-weight: 600; border: 1px solid transparent; border-radius: var(--radius-sm); padding: 12px 16px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--tap); transition: transform .06s ease, background .15s ease, border-color .15s ease; } .btn:active { transform: translateY(1px); } .btn.small { padding: 7px 11px; min-height: 34px; font-size: 13px; } .btn.xsmall { padding: 5px 9px; min-height: 28px; font-size: 12px; } .btn-primary { background: var(--vault); color: #04181a; } .btn-primary:hover { filter: brightness(1.06); } .btn-primary:disabled { opacity: .45; cursor: not-allowed; } .btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); } .btn-ghost:hover { background: var(--surface-2); } .btn-pin { background: var(--pin); color: #fff; } .btn-danger { background: transparent; color: var(--warn); border-color: var(--warn); } .btn-danger:hover { background: var(--warn); color: #fff; } .btn-danger-solid { background: var(--warn); color: #fff; } /* ---------- inputs ---------- */ .input, textarea.input, select.input { width: 100%; font-family: var(--font-body); font-size: 15px; background: var(--surface-2); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 11px 13px; min-height: var(--tap); } textarea.input { min-height: 84px; resize: vertical; line-height: 1.5; } .input:focus, textarea.input:focus, select.input:focus, .btn:focus-visible, .icon-btn:focus-visible, .fab:focus-visible { outline: 2px solid var(--vault); outline-offset: 2px; } .input.mono { font-family: var(--font-mono); font-size: 13px; } .field-label { display: block; font-size: 12px; font-weight: 600; color: var(--ink-soft); margin: 14px 0 6px; letter-spacing: .02em; text-transform: uppercase; } .field { margin-bottom: 2px; } .checkbox { display: flex; align-items: center; gap: 9px; font-size: 14px; margin: 12px 0; cursor: pointer; } .checkbox input { width: 18px; height: 18px; accent-color: var(--vault); } .error-text { color: var(--warn); font-size: 13px; margin-top: 12px; } /* ---------- screens ---------- */ .screen { position: fixed; inset: 0; } .screen-login { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px; gap: 18px; overflow-y: auto; background: radial-gradient(1100px 600px at 80% -10%, color-mix(in srgb, var(--vault) 12%, transparent), transparent), radial-gradient(900px 500px at -10% 110%, color-mix(in srgb, var(--pin) 10%, transparent), transparent), var(--bg); } .login-card { width: 100%; max-width: 420px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 26px; } .brand { display: flex; align-items: center; gap: 11px; } .brand h1 { font-size: 26px; font-weight: 700; } .brand-lock { color: var(--vault); display: inline-flex; } .brand-lock.small { color: var(--vault); } .tagline { color: var(--ink-soft); font-size: 14px; margin: 8px 0 20px; line-height: 1.5; } .login-tabs { display: flex; gap: 6px; background: var(--surface-2); padding: 4px; border-radius: var(--radius-sm); margin-bottom: 18px; } .login-tab { flex: 1; border: none; background: transparent; color: var(--ink-soft); font-family: var(--font-body); font-weight: 600; font-size: 14px; padding: 9px; border-radius: 7px; cursor: pointer; } .login-tab.active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); } .key-reveal { margin-top: 16px; } .key-box { display: flex; align-items: center; gap: 8px; background: var(--vault-soft); border: 1px dashed var(--vault); border-radius: var(--radius-sm); padding: 11px; } .key-box code { flex: 1; font-size: 12px; word-break: break-all; color: var(--ink); } .relay-status-block { margin-top: 22px; border-top: 1px solid var(--line); padding-top: 14px; } .stay-checkbox { margin-top: 16px; } .stay-note { margin-top: 5px; } .relay-status-summary { font-size: 12px; font-weight: 600; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .03em; } .relay-status-body { margin-top: 12px; } .relay-status-body .relay-status-head { justify-content: flex-end; margin-bottom: 8px; } .relay-status-head { display: flex; align-items: center; justify-content: space-between; font-size: 12px; font-weight: 600; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .03em; margin-bottom: 8px; } .relay-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; } .relay-row { display: flex; align-items: center; gap: 9px; font-family: var(--font-mono); font-size: 12px; padding: 7px 4px; } .relay-row .url { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); } .relay-row .remove { background: none; border: none; color: var(--ink-soft); cursor: pointer; font-size: 16px; padding: 0 6px; } .relay-row .remove:hover { color: var(--warn); } .dot { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--ink-soft); } .dot.online { background: #34c759; box-shadow: 0 0 7px #34c75988; } .dot.offline { background: var(--warn); } .dot.connecting { background: #f0b429; animation: pulse 1s infinite; } @keyframes pulse { 50% { opacity: .35; } } .login-foot { max-width: 420px; text-align: center; } .add-relay-row { display: flex; gap: 7px; margin-top: 10px; } .add-relay-row .input { min-height: 38px; padding: 8px 11px; } /* ---------- map + chrome ---------- */ .map { position: absolute; inset: 0; z-index: 1; background: var(--surface-2); } .map.picking { cursor: crosshair; } .map.picking .leaflet-grab { cursor: crosshair; } .leaflet-container { background: var(--surface-2); font-family: var(--font-body); } .topbar { position: absolute; top: 0; left: 0; right: 0; z-index: 600; display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; background: color-mix(in srgb, var(--surface) 86%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); } .topbar-brand { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 600; font-size: 16px; } .topbar-brand .brand-lock { color: var(--vault); } .topbar-actions { display: flex; gap: 4px; } .icon-btn { position: relative; width: var(--tap); height: var(--tap); display: grid; place-items: center; border-radius: 11px; background: transparent; border: none; color: var(--ink); cursor: pointer; } .icon-btn:hover { background: var(--surface-2); } .bubble { position: absolute; top: 5px; right: 5px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--pin); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; border: 2px solid var(--surface); } .fab-stack { position: absolute; right: 16px; bottom: calc(56px + env(safe-area-inset-bottom)); z-index: 600; display: flex; flex-direction: column; gap: 12px; align-items: flex-end; } .fab { display: inline-flex; align-items: center; gap: 9px; height: 50px; padding: 0 18px; border: none; border-radius: 26px; cursor: pointer; box-shadow: var(--shadow); font-family: var(--font-body); font-weight: 600; font-size: 14px; color: #fff; } .fab-primary { background: var(--pin); } .fab-self { background: var(--vault); color: #04181a; height: 44px; font-size: 13px; } .pick-banner { position: absolute; top: 64px; left: 50%; transform: translateX(-50%); z-index: 650; display: flex; align-items: center; gap: 12px; background: var(--ink); color: var(--bg); padding: 9px 9px 9px 16px; border-radius: 24px; box-shadow: var(--shadow); font-size: 14px; font-weight: 600; } .pick-banner .btn-ghost { color: var(--bg); border-color: color-mix(in srgb, var(--bg) 40%, transparent); } /* Zoom buttons sit bottom-left; keep them clear of the footer bar. */ .leaflet-bottom.leaflet-left { margin-bottom: calc(50px + env(safe-area-inset-bottom)); margin-left: 6px; } .leaflet-bottom.leaflet-right { margin-bottom: calc(40px + env(safe-area-inset-bottom)); } .leaflet-control-zoom { border: none !important; box-shadow: none !important; display: flex; flex-direction: column; gap: 6px; } .leaflet-control-zoom a { border-radius: 9px !important; border: 1px solid var(--line) !important; background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); } .leaflet-control-zoom a:hover { background: var(--surface-2); } /* ---------- footer ---------- */ .app-footer { width: 100%; } .footer-links { display: flex; flex-wrap: nowrap; gap: 16px; align-items: center; justify-content: flex-end; overflow-x: auto; scrollbar-width: none; } .footer-links::-webkit-scrollbar { display: none; } .footer-links a { font-size: 12px; color: var(--ink-soft); text-decoration: none; white-space: nowrap; } .footer-links a:hover { color: var(--ink); text-decoration: underline; } #footer-login { max-width: 560px; width: 100%; margin-top: 2px; } #footer-login .footer-links { justify-content: center; } .app-footer-floating { position: absolute; left: 0; right: 0; bottom: 0; z-index: 600; padding: 8px 14px calc(8px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: blur(10px); border-top: 1px solid var(--line); } /* ---------- editor: name + compact birthday ---------- */ .name-row { display: flex; gap: 10px; align-items: flex-end; } .name-field { flex: 1 1 auto; min-width: 0; } .bday-field { flex: 0 0 auto; width: 150px; } .bday-field .input { padding-right: 6px; } .ed-divider { border: none; border-top: 1px solid var(--line); margin: 18px 0 6px; } /* ---------- address chooser ---------- */ .addr-row { display: flex; gap: 8px; } .addr-row .input { flex: 1; } .addr-results { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; } .addr-item { text-align: left; background: var(--surface-2); border: 1px solid var(--line); border-radius: 9px; padding: 9px 11px; cursor: pointer; font-size: 13px; color: var(--ink); } .addr-item:hover { border-color: var(--vault); } .addr-or { display: flex; align-items: center; text-align: center; color: var(--ink-soft); font-size: 12px; margin: 14px 0 10px; } .addr-or::before, .addr-or::after { content: ''; flex: 1; border-top: 1px solid var(--line); } .addr-or span { padding: 0 10px; } /* draft pin shown while confirming a searched address */ .wwt-pin-draft .wwt-pin-dot { background: #f0b429; animation: draftpulse 1.2s ease-in-out infinite; } @keyframes draftpulse { 0%,100% { transform: rotate(-45deg) scale(1); } 50% { transform: rotate(-45deg) scale(1.18); } } @media (prefers-reduced-motion: reduce) { .wwt-pin-draft .wwt-pin-dot { animation: none; } } /* ---------- People: merge marker ---------- */ .merge-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--pin); margin-left: 7px; vertical-align: middle; } .person-row.has-merge { background: color-mix(in srgb, var(--pin) 8%, transparent); border-radius: 10px; } .person-row.has-merge .sub { color: var(--pin); } /* ---------- Merge modal ---------- */ .modal-wide { max-width: 680px; } .merge-row { padding: 12px 0; border-bottom: 1px solid var(--line); } .merge-label { font-weight: 600; font-size: 13px; margin-bottom: 8px; } .merge-cols { display: flex; gap: 10px; } .merge-col { flex: 1; min-width: 0; background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 9px; display: flex; flex-direction: column; gap: 7px; } .merge-side { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); } .merge-val { font-size: 13px; word-break: break-word; min-height: 18px; } .merge-keep { align-self: flex-start; } .merge-keep.chosen { background: var(--vault); color: #fff; border-color: var(--vault); } .merge-input { margin-top: 9px; } .merge-chosen-note { font-size: 12px; color: var(--ink-soft); margin-top: 8px; } .merge-rel-choices { display: flex; gap: 8px; margin-top: 9px; flex-wrap: wrap; } .merge-rel-choices .chosen { background: var(--vault); color: #fff; border-color: var(--vault); } .merge-foot { justify-content: space-between; } @media (max-width: 600px) { .merge-cols { flex-direction: column; } } /* ---------- app footer with OSM credit on the left ---------- */ .app-footer-floating { display: flex; align-items: center; gap: 12px; } .app-footer-floating .footer-links { flex: 1 1 auto; } .footer-osm { flex: 0 0 auto; font-size: 11px; white-space: nowrap; } .footer-osm a { color: var(--ink-soft); text-decoration: none; } .footer-osm a:hover { color: var(--ink); text-decoration: underline; } /* ---------- "N pins" cluster marker ---------- */ .wwt-cluster-dot { width: 30px; height: 30px; border-radius: 50%; background: var(--pin); color: #fff; font-weight: 700; font-size: 13px; display: grid; place-items: center; border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.4); } /* ---------- info / issues popups ---------- */ .info-modal p { margin: 0 0 14px; line-height: 1.55; font-size: 14px; } .info-modal p:last-child { margin-bottom: 0; } .info-modal b { font-weight: 700; color: var(--ink); } /* Donate popup — everything centered, blank lines between each part. */ .donate-body { text-align: center; } .donate-title { font-weight: 700; font-size: 16px; margin: 4px 0 20px; } .donate-addr { font-size: 12px; line-height: 1.55; word-break: break-all; margin: 0 0 20px; cursor: pointer; } .donate-strike { font-size: 15px; margin: 0; cursor: pointer; } .donate-addr:hover, .donate-strike:hover { color: var(--vault); } .issues-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; } a.btn { text-decoration: none; } .btn.block { display: flex; align-items: center; justify-content: center; } /* ---------- overlay + slide-over panel ---------- */ .overlay { position: absolute; inset: 0; z-index: 700; background: rgba(0,0,0,.45); } .panel { position: absolute; z-index: 800; top: 0; right: 0; height: 100%; width: min(440px, 100%); background: var(--surface); border-left: 1px solid var(--line); box-shadow: var(--shadow); display: flex; flex-direction: column; animation: slideIn .2s ease; } @keyframes slideIn { from { transform: translateX(20px); opacity: .6; } } .panel-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--line); } .panel-head h2 { font-size: 18px; } .panel-body { flex: 1; overflow-y: auto; padding: 16px 18px; -webkit-overflow-scrolling: touch; } .panel-foot { padding: 14px 18px; border-top: 1px solid var(--line); display: flex; gap: 10px; } .x-btn { width: 36px; height: 36px; border-radius: 9px; border: none; background: var(--surface-2); color: var(--ink); font-size: 20px; cursor: pointer; } .x-btn:hover { background: var(--surface-3); } /* ---------- modal (centered) ---------- */ .modal-scrim { position: absolute; inset: 0; z-index: 900; background: rgba(0,0,0,.5); display: grid; place-items: center; padding: 16px; } .modal { width: 100%; max-width: 540px; max-height: 90vh; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); display: flex; flex-direction: column; animation: popIn .16s ease; } @keyframes popIn { from { transform: scale(.97); opacity: .6; } } .modal-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--line); } .modal-body { padding: 16px 18px; overflow-y: auto; } .modal-foot { padding: 14px 18px; border-top: 1px solid var(--line); display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; } /* ---------- settings list ---------- */ .set-section { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px; margin-bottom: 14px; } .set-section h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); margin-bottom: 12px; } /* Collapsible sections (Identity, Relays) */ .set-collapse > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; } .set-collapse > summary::-webkit-details-marker { display: none; } .set-collapse > summary h3 { margin: 0; } .set-collapse .chev { width: 8px; height: 8px; border-right: 2px solid var(--ink-soft); border-bottom: 2px solid var(--ink-soft); transform: rotate(-45deg); transition: transform .15s ease; flex: 0 0 auto; margin-left: 10px; } .set-collapse[open] .chev { transform: rotate(45deg); } .set-collapse-body { margin-top: 14px; } .set-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; } .toggle { position: relative; width: 50px; height: 28px; border-radius: 14px; background: var(--surface-3); border: 1px solid var(--line); cursor: pointer; flex: none; } .toggle::after { content: ''; position: absolute; top: 2px; left: 2px; width: 22px; height: 22px; border-radius: 50%; background: var(--ink-soft); transition: transform .15s ease, background .15s ease; } .toggle.on { background: var(--vault-soft); border-color: var(--vault); } .toggle.on::after { transform: translateX(22px); background: var(--vault); } .npub-chip { font-family: var(--font-mono); font-size: 11px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 7px; padding: 7px 9px; word-break: break-all; } .npub-chip.key-secret { letter-spacing: 1px; color: var(--ink-soft); } .npub-chip.key-secret.revealed { letter-spacing: 0; color: var(--ink); border-color: var(--warn); } /* ---------- person card view ---------- */ .card-photo { width: 72px; height: 72px; border-radius: 14px; object-fit: cover; background: var(--surface-2); border: 1px solid var(--line); flex: none; } .card-photo.placeholder { display: grid; place-items: center; color: var(--ink-soft); font-family: var(--font-display); font-size: 26px; font-weight: 700; } .card-top { display: flex; gap: 14px; align-items: center; } .card-top h2 { font-size: 21px; } .card-shared { font-size: 11px; color: var(--vault); font-family: var(--font-mono); } .detail { padding: 11px 0; border-bottom: 1px solid var(--line); } .detail:last-child { border-bottom: none; } .detail .k { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); margin-bottom: 3px; } .detail .v { font-size: 15px; line-height: 1.5; white-space: pre-wrap; } .coord { font-family: var(--font-mono); font-size: 12px; color: var(--ink-soft); } /* Card-view location: address line + coordinates beneath, same text size. */ .card-loc { margin-top: 14px; margin-bottom: 6px; } .card-loc-line { font-size: 15px; line-height: 1.5; word-break: break-word; } .card-loc-coord { color: var(--ink-soft); font-family: var(--font-mono); } .npub-full { font-family: var(--font-mono); font-size: 13px; word-break: break-all; } .loc-coord-spaced { margin-top: 12px; } .shared-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } .shared-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 1px solid var(--line); border-radius: 9px; padding: 7px 10px; } .shared-row .url { font-size: 12px; overflow: hidden; text-overflow: ellipsis; } .rel-line { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; padding: 6px 0; } .rel-type { font-size: 11px; font-weight: 700; color: var(--vault); text-transform: uppercase; } .rel-npub { font-family: var(--font-mono); font-size: 11px; color: var(--ink-soft); word-break: break-all; } /* relative editor block */ .rel-block { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px; margin-bottom: 10px; position: relative; } .rel-remove { position: absolute; top: 8px; right: 8px; background: none; border: none; color: var(--ink-soft); cursor: pointer; font-size: 18px; } .rel-remove:hover { color: var(--warn); } .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .pin-status { font-family: var(--font-mono); font-size: 11px; color: var(--ink-soft); margin-top: 6px; } .pin-status.set { color: var(--vault); } /* people list */ .people-search { margin-bottom: 12px; } .person-row { display: flex; align-items: center; gap: 12px; padding: 11px; border: 1px solid var(--line); border-radius: var(--radius-sm); margin-bottom: 8px; cursor: pointer; background: var(--surface); } .person-row:hover { background: var(--surface-2); } .person-avatar { width: 42px; height: 42px; border-radius: 10px; object-fit: cover; flex: none; background: var(--surface-3); display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; color: var(--ink-soft); } .person-meta { flex: 1; min-width: 0; } .person-meta .name { font-weight: 600; font-size: 15px; } .person-meta .sub { font-size: 12px; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .empty-state { text-align: center; color: var(--ink-soft); padding: 40px 16px; } .empty-state svg { opacity: .4; margin-bottom: 10px; } /* ---------- chat ---------- */ .conv-list { display: flex; flex-direction: column; gap: 6px; } .conv-row { display: flex; align-items: center; gap: 11px; padding: 10px; border-radius: var(--radius-sm); cursor: pointer; } .conv-row:hover { background: var(--surface-2); } .conv-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--surface-3); display: grid; place-items: center; font-family: var(--font-mono); font-size: 12px; color: var(--ink-soft); flex: none; } .conv-meta { flex: 1; min-width: 0; } .conv-meta .who { font-family: var(--font-mono); font-size: 12px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .conv-meta .last { font-size: 13px; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .conv-unread { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--pin); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; } .chat-thread { display: flex; flex-direction: column; gap: 8px; padding: 4px 2px; } .msg { max-width: 78%; padding: 9px 13px; border-radius: 15px; font-size: 14px; line-height: 1.45; word-wrap: break-word; } .msg.them { align-self: flex-start; background: var(--surface-2); border-bottom-left-radius: 5px; } .msg.me { align-self: flex-end; background: var(--vault); color: #04181a; border-bottom-right-radius: 5px; } .msg-time { font-size: 10px; opacity: .6; margin-top: 3px; display: block; } .chat-input-bar { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--line); } .chat-input-bar .input { min-height: 42px; } .chat-peer-head { font-family: var(--font-mono); font-size: 12px; color: var(--ink-soft); word-break: break-all; } .new-chat-row { display: flex; gap: 8px; margin-bottom: 14px; } /* ---------- toast ---------- */ .toast-root { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 2000; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; } .toast { background: var(--ink); color: var(--bg); padding: 11px 18px; border-radius: 12px; font-size: 14px; font-weight: 500; box-shadow: var(--shadow); animation: toastIn .2s ease; max-width: 90vw; } .toast.err { background: var(--warn); color: #fff; } @keyframes toastIn { from { transform: translateY(10px); opacity: 0; } } /* ---------- map pins ---------- */ .wwt-pin { position: relative; transform: translate(-50%, -100%); display: flex; flex-direction: column; align-items: center; cursor: pointer; } .wwt-pin-dot { width: 18px; height: 18px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.4); } .wwt-pin-person .wwt-pin-dot { background: var(--pin); } .wwt-pin-self .wwt-pin-dot { background: var(--vault); } .wwt-pin-relative .wwt-pin-dot { background: #f0b429; width: 13px; height: 13px; } .wwt-pin-label { margin-top: 4px; font-size: 11px; font-weight: 600; white-space: nowrap; background: var(--surface); color: var(--ink); padding: 2px 7px; border-radius: 7px; border: 1px solid var(--line); box-shadow: var(--shadow-sm); max-width: 150px; overflow: hidden; text-overflow: ellipsis; } /* "You are here" live-location dot (blue, gently pulsing). */ .wwt-userdot { position: relative; transform: translate(-50%, -50%); } .wwt-userdot-core { display: block; width: 16px; height: 16px; border-radius: 50%; background: #2f7bff; border: 3px solid #fff; box-shadow: 0 0 0 2px rgba(47,123,255,.45), 0 1px 4px rgba(0,0,0,.4); } .wwt-userdot::before { content: ''; position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; border-radius: 50%; background: rgba(47,123,255,.35); transform: translate(-50%, -50%); animation: userpulse 2s ease-out infinite; } @keyframes userpulse { 0% { width: 16px; height: 16px; opacity: .7; } 100% { width: 54px; height: 54px; opacity: 0; } } @media (prefers-reduced-motion: reduce) { .wwt-userdot::before { animation: none; } } /* Dark theme for the map: filter the OSM tiles so building outlines remain visible while the basemap goes dark. Markers/controls are not filtered. */ .map-dark .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(.92) contrast(.9) saturate(.8); } .pick-banner .btn:disabled { opacity: .45; cursor: default; } /* ---------- responsive: phones ---------- */ @media (max-width: 600px) { .panel { width: 100%; border-left: none; border-top: 1px solid var(--line); top: auto; bottom: 0; height: 88%; border-radius: 18px 18px 0 0; animation: sheetUp .22s ease; } @keyframes sheetUp { from { transform: translateY(40px); opacity: .6; } } .fab-text { display: none; } .fab { width: 50px; padding: 0; justify-content: center; } .fab-self { width: 44px; } .modal { max-height: 92vh; } } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }