/* The friends page (/friends): friends, requests, messages, alerts and their settings. Its own look over /site/pages.css (the bar). */
body.friends-body { margin: 0; min-height: 100vh; background: #04070a radial-gradient(ellipse 120% 620px at 50% -120px, #15303a, #04070a 70%) no-repeat; color: #f8f0dc; }
.gu-page.friends-body #page { max-width: 1048px; margin: 0 auto; padding: calc(60px + 48px) 24px 56px; box-sizing: border-box; font-family: var(--gu-sans); }
.gu-page .fr { display: flex; flex-direction: column; gap: 24px; }
.gu-page .fr > *, .gu-page .fr-content > * { min-width: 0; }
.gu-page .fr a { color: #f5dfaa; }
.gu-page .fr a:hover { color: #fff; }
.gu-page .fr :is(a, button, input, textarea, select):focus-visible { outline: 2px solid #dbbc76; outline-offset: 2px; }

.gu-page .fr-hero { display: flex; flex-direction: column; gap: 10px; }
.gu-page .fr-hero h1 { margin: 0; font: 400 52px/1.05 var(--gu-serif); letter-spacing: -.01em; color: #f8f0dc; }
.gu-page .fr-lead { margin: 0; font-size: 17px; line-height: 1.55; color: #d9cfbd; }
.gu-page .fr-error { margin: 0; padding: 10px 14px; border-radius: 12px; background: #e7a08f1a; border: 1px solid #e7a08f59; color: #f3cfc5; font-size: 14px; }
.gu-page .fr-error:empty { display: none; }
.gu-page .fr-loading { color: #a9babd; }

/* the tabs: an underlined row */
.gu-page .fr-tabs { display: flex; gap: 6px; flex-wrap: wrap; border-bottom: 1px solid #d7e3e724; }
.gu-page .fr .fr-tab { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 14px; margin-bottom: -1px; border-bottom: 2px solid transparent; color: #d9cfbd; font: 500 15px var(--gu-sans); text-decoration: none; white-space: nowrap; }
.gu-page .fr .fr-tab:hover { color: #f8f0dc; }
.gu-page .fr .fr-tab[aria-current=page] { color: #f8f0dc; border-bottom-color: #dbbc76; }
.gu-page .fr-count { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px; box-sizing: border-box; border-radius: 999px; background: #dbbc76; color: #081117; font-size: 12px; font-weight: 700; }

.gu-page .fr-content { display: flex; flex-direction: column; gap: 18px; }
/* a card */
.gu-page .fr-card { margin: 0; padding: 20px 22px; border-radius: 18px; border: 1px solid #d7e3e73d; background: linear-gradient(145deg, #14242ee6, #081117ee); box-shadow: 0 20px 50px #0006; }
.gu-page .fr-card h2 { margin: 0 0 8px; font: 400 21px/1.3 var(--gu-serif); color: #f8f0dc; }
.gu-page .fr-card h2 label { font: inherit; color: inherit; }
.gu-page .fr-card h3 { margin: 22px 0 4px; font: 400 18px/1.3 var(--gu-serif); color: #f8f0dc; }
.gu-page .fr-head { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 6px; }
.gu-page .fr-head h2 { margin: 0; }
.gu-page .fr-aside { font-size: 14px; color: #a9babd; }
.gu-page .fr-hint { margin: 8px 0 0; font-size: 13px; line-height: 1.5; color: #a9babd; }
.gu-page .fr-foot { margin-top: 10px; }
.gu-page .fr-empty { margin: 6px 0 4px; font-size: 15px; color: #a9babd; }
.gu-page .fr-card > p:not([class]) { margin: 0 0 10px; color: #d9cfbd; line-height: 1.6; max-width: 640px; }

/* buttons */
.gu-page .fr-btn { appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 0 16px; box-sizing: border-box; border-radius: 999px; border: 1px solid transparent; background: transparent; font: 600 14px var(--gu-sans); text-decoration: none; white-space: nowrap; cursor: pointer; }
.gu-page .fr-btn:disabled { opacity: .55; cursor: not-allowed; }
.gu-page .fr .fr-btn-gold { background: #dbbc76; border-color: #dbbc76; color: #081117; }
.gu-page .fr .fr-btn-gold:hover:not(:disabled) { background: #e8cc8c; color: #081117; }
.gu-page .fr .fr-btn-outline { border-color: #dbbc76; color: #f5dfaa; }
.gu-page .fr .fr-btn-outline:hover { background: #dbbc7624; color: #f5dfaa; }
.gu-page .fr .fr-btn-quiet { border-color: #d7e3e75c; color: #d9cfbd; font-weight: 500; }
.gu-page .fr .fr-btn-quiet:hover:not(:disabled) { border-color: #d7e3e799; color: #f8f0dc; background: #ffffff0a; }
.gu-page .fr .fr-btn-danger { border-color: #e7a08fb3; background: #e7a08f24; color: #f6d6cd; }
.gu-page .fr .fr-btn-danger:hover { background: #e7a08f; color: #081117; }
.gu-page .fr-link { appearance: none; min-height: 32px; border: 0; background: none; padding: 0 4px; color: #f5dfaa; font: 13px var(--gu-sans); text-decoration: underline; text-decoration-color: #dbbc7680; text-underline-offset: 3px; cursor: pointer; }

/* finding people */
.gu-page .fr-search { display: flex; gap: 10px; flex-wrap: wrap; }
.gu-page .fr-search-box { position: relative; flex: 1 1 320px; min-width: 0; }
.gu-page .fr-search-box .gu-icon { position: absolute; left: 14px; top: 14px; width: 18px; height: 18px; fill: none; stroke: #c7d4d4; stroke-width: 2; stroke-linecap: round; pointer-events: none; }
.gu-page .fr .fr-search input { box-sizing: border-box; width: 100%; height: 46px; padding: 0 14px 0 42px; border-radius: 12px; border: 1px solid #d7e3e75c; background: #060d12; color: #f8f0dc; font: 16px var(--gu-sans); }
.gu-page .fr .fr-search input::placeholder { color: #7f9396; }
.gu-page .fr .fr-search input:focus { border-color: #dbbc76; }
.gu-page .fr-search .fr-btn { min-height: 46px; padding: 0 22px; border-radius: 12px; font-size: 15px; }
.gu-page .fr-results:empty { display: none; }
.gu-page .fr-results { margin-top: 10px; }

/* the rows of a list */
.gu-page .fr-list { list-style: none; margin: 0; padding: 0; }
.gu-page .fr-row { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 0; border-top: 1px solid #d7e3e71f; }
.gu-page .fr-row-plain { grid-template-columns: minmax(0, 1fr) auto; }
.gu-page .fr-who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gu-page .fr-who > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gu-page .fr-who small { font-size: 13px; color: #a9babd; }
.gu-page .fr-who b { font-size: 16px; font-weight: 600; }
.gu-page .fr-name { font-size: 16px; font-weight: 600; color: #f8f0dc; text-align: left; text-decoration: none; }
.gu-page .fr-name:hover { text-decoration: underline; text-decoration-color: #dbbc7680; }
.gu-page .fr-here { color: #a9d8b8; }
.gu-page .fr-actions, .gu-page .fr-row-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.gu-page .fr-row-actions { justify-content: flex-start; margin-top: 14px; }
/* here now: a dot on the face */
.gu-page .fr-dot { position: absolute; right: -1px; bottom: -1px; width: 13px; height: 13px; box-sizing: border-box; border-radius: 50%; border: 2px solid #0b1720; background: #5b6a70; }
.gu-page .fr-dot.on { background: #a9d8b8; }

/* messages: the conversations beside the one open */
.gu-page .fr-messages { display: grid; grid-template-columns: minmax(250px, 320px) minmax(0, 1fr); gap: 20px; align-items: stretch; }
.gu-page .fr-inbox, .gu-page .fr-thread-view { border-radius: 18px; border: 1px solid #d7e3e73d; background: linear-gradient(145deg, #14242ee6, #081117ee); box-shadow: 0 20px 50px #0006; }
.gu-page .fr-inbox { padding: 14px 10px; display: flex; flex-direction: column; gap: 2px; max-height: 680px; overflow-y: auto; }
.gu-page .fr-inbox h2 { margin: 2px 8px 8px; font: 400 21px/1.3 var(--gu-serif); }
.gu-page .fr-inbox > .fr-empty, .gu-page .fr-inbox > .fr-hint { margin: 6px 8px; }
.gu-page .fr-inbox ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.gu-page .fr .fr-thread { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px; border-radius: 12px; color: #f8f0dc; text-decoration: none; }
.gu-page .fr .fr-thread:hover { background: #ffffff0a; color: #f8f0dc; }
.gu-page .fr .fr-thread.here { background: #dbbc761a; box-shadow: inset 0 0 0 1px #dbbc7659; }
.gu-page .fr-thread .gu-avatar { width: 40px; height: 40px; }
.gu-page .fr-thread-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gu-page .fr-thread-text b { font-size: 15px; font-weight: 600; }
.gu-page .fr-thread-text small { font-size: 13px; color: #a9babd; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gu-page .fr-thread.unread .fr-thread-text small { color: #f8f0dc; }
.gu-page .fr-thread-side { display: flex; align-items: center; gap: 8px; }
.gu-page .fr-thread-side small { font-size: 12px; color: #a9babd; white-space: nowrap; }
.gu-page .fr-unread { width: 10px; height: 10px; border-radius: 50%; background: #dbbc76; flex: none; }
.gu-page .fr-start { margin: 12px 0 0; padding: 12px 8px 0; border-top: 1px solid #d7e3e71f; }
.gu-page .fr-start h3 { margin: 0 0 8px; font: 500 14px var(--gu-sans); color: #d9cfbd; }
.gu-page .fr-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.gu-page .fr .fr-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px 0 5px; box-sizing: border-box; border-radius: 999px; border: 1px dashed #d7e3e75c; color: #f5dfaa; text-decoration: none; font-size: 14px; }
.gu-page .fr .fr-chip:hover { border-color: #dbbc76; color: #f5dfaa; }
.gu-page .fr-chip .gu-avatar { width: 28px; height: 28px; }
.gu-page .fr-chip .gu-avatar-initials { font-size: 11px; }
.gu-page .fr-thread-view { display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.gu-page .fr-pick { margin: auto; padding: 40px 30px; text-align: center; color: #d9cfbd; }
.gu-page .fr-pick p { margin: 0 0 6px; }
.gu-page .fr-thread-box { display: flex; flex-direction: column; height: 100%; min-height: 520px; max-height: 680px; }
.gu-page .fr-thread-head { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid #d7e3e724; }
.gu-page .fr-thread-head .gu-avatar { width: 40px; height: 40px; }
.gu-page .fr-thread-who { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.gu-page .fr-thread-who h2 { margin: 0; font: 600 16px var(--gu-sans); }
.gu-page .fr-thread-who small { font-size: 13px; color: #a9babd; }
.gu-page .fr-thread-tools { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.gu-page .fr .fr-back { display: none; align-items: center; gap: 2px; min-height: 44px; padding: 0 8px 0 0; color: #f8f0dc; text-decoration: none; font-size: 15px; }
.gu-page .fr-back .gu-icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.gu-page .fr-icon-btn { appearance: none; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border-radius: 50%; border: 1px solid #d7e3e75c; background: transparent; color: #d9cfbd; cursor: pointer; }
.gu-page .fr-icon-btn:hover, .gu-page .fr-icon-btn[aria-expanded=true] { border-color: #d7e3e799; color: #f8f0dc; }
.gu-page .fr-icon-btn .gu-icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 3.2; stroke-linecap: round; }
.gu-page .fr-more { position: relative; }
.gu-page .fr-more-menu { position: absolute; z-index: 5; right: 0; top: calc(100% + 6px); min-width: 230px; padding: 6px; border-radius: 14px; border: 1px solid #d7e3e73d; background: linear-gradient(160deg, #13222bf8, #070f15f8); box-shadow: 0 20px 50px #000a; }
.gu-page .fr-more-menu button { appearance: none; display: flex; align-items: center; width: 100%; min-height: 44px; padding: 0 12px; border: 0; border-radius: 10px; background: none; color: #f8f0dc; font: 15px var(--gu-sans); text-align: left; cursor: pointer; }
.gu-page .fr-more-menu button:hover, .gu-page .fr-more-menu button:focus-visible { background: #ffffff10; }
.gu-page .fr-more-menu button.danger { color: #f3cfc5; }
/* the messages */
.gu-page .fr-log { list-style: none; margin: 0; padding: 18px; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; flex: 1; }
.gu-page .fr-day { align-self: center; margin: 6px 0 2px; font-size: 12px; color: #a9babd; }
.gu-page .fr-msg { display: flex; flex-direction: column; align-items: flex-start; max-width: 72%; }
.gu-page .fr-msg.mine { align-self: flex-end; align-items: flex-end; }
.gu-page .fr-bubble { padding: 10px 14px; border-radius: 16px 16px 16px 4px; background: #13232c; border: 1px solid #d7e3e73d; color: #f8f0dc; font-size: 15px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.gu-page .fr-msg.mine .fr-bubble { border-radius: 16px 16px 4px 16px; background: #dbbc76; border-color: #dbbc76; color: #081117; }
.gu-page .fr-msg.removed .fr-bubble { color: #a9babd; background: transparent; border-style: dashed; border-color: #d7e3e75c; }
.gu-page .fr-meta { display: flex; align-items: center; gap: 8px; margin: 4px 6px 0; font-size: 12px; color: #a9babd; }
.gu-page .fr-report { appearance: none; min-height: 28px; padding: 0 10px; border-radius: 999px; border: 1px solid #d7e3e73d; background: transparent; color: #a9babd; font: 12px var(--gu-sans); cursor: pointer; }
.gu-page .fr-report:hover { color: #f3cfc5; border-color: #e7a08f80; }
.gu-page .fr-reported { color: #dbbc76; }
.gu-page .fr-older { align-self: center; }
.gu-page .fr-first { align-self: center; text-align: center; margin: auto 0 0; font-size: 14px; color: #a9babd; }
.gu-page .fr-report-form { box-sizing: border-box; margin-top: 8px; padding: 12px 14px; border-radius: 14px; background: #060d12; border: 1px solid #e7a08f59; width: min(420px, 100%); }
.gu-page .fr-report-form p { margin: 0 0 8px; font-size: 13px; line-height: 1.5; color: #c7d4d4; }
.gu-page .fr-report-form fieldset { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; padding: 0; border: 0; }
.gu-page .fr-radio { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; font-size: 14px; color: #f8f0dc; cursor: pointer; }
.gu-page .fr-radio input { width: 18px; height: 18px; margin: 0; accent-color: #dbbc76; }
.gu-page .fr .fr-report-form input[type=text] { box-sizing: border-box; width: 100%; height: 42px; margin: 8px 0 10px; padding: 0 12px; border-radius: 10px; border: 1px solid #d7e3e75c; background: #0a161e; color: #f8f0dc; font: 15px var(--gu-sans); }
.gu-page .fr-report-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.gu-page .fr-why { margin: 0; padding: 10px 18px 0; font-size: 13px; color: #a9babd; }
.gu-page .fr-compose { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; padding: 14px 18px; border-top: 1px solid #d7e3e724; }
.gu-page .fr .fr-compose textarea { flex: 1 1 200px; box-sizing: border-box; min-height: 46px; max-height: 160px; padding: 12px 16px; border-radius: 23px; border: 1px solid #d7e3e75c; background: #060d12; color: #f8f0dc; font: 15px/1.4 var(--gu-sans); resize: none; field-sizing: content; }
.gu-page .fr .fr-compose textarea::placeholder { color: #7f9396; }
.gu-page .fr .fr-compose textarea:focus { border-color: #dbbc76; }
.gu-page .fr-compose .fr-btn { min-height: 46px; padding: 0 22px; font-size: 15px; }
.gu-page .fr-left { flex-basis: 100%; font-size: 12px; color: #a9babd; }
.gu-page .fr-left:empty { display: none; }

/* alerts */
.gu-page .fr-alert { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 0; border-top: 1px solid #d7e3e71f; }
.gu-page .fr-alert p { margin: 0; font-size: 15px; line-height: 1.5; color: #f8f0dc; }
.gu-page .fr-alert.unread p { font-weight: 500; }
.gu-page .fr-alert .fr-name { font-size: 15px; }
.gu-page .fr-from { display: block; font-size: 13px; color: #f5dfaa; }
.gu-page .fr-alert.news p { margin-top: 2px; }
.gu-page .fr-when { padding-top: 0; font-size: 13px; color: #a9babd; white-space: nowrap; }
.gu-page .fr-alert-end { display: flex; align-items: center; gap: 8px; }
.gu-page .fr-dismiss { width: 32px; height: 32px; flex: none; border-radius: 50%; border: 1px solid #d7e3e724; background: transparent; color: #a9babd; font-size: 20px; line-height: 1; cursor: pointer; }
.gu-page .fr-dismiss:hover, .gu-page .fr-dismiss:focus-visible { color: #fff; background: #ffffff14; border-color: #d7e3e74d; }
.gu-page .fr-dismiss:focus-visible { outline: 2px solid #dbbc76; outline-offset: 2px; }
.gu-page .fr-alert.going { opacity: .45; transition: opacity .2s; }
.gu-page .fr-head-links { display: inline-flex; align-items: baseline; gap: 16px; }
.gu-page .fr-link-btn { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.gu-page .fr-link-btn:hover { color: #fff; }
.gu-page .fr-link-btn:disabled { opacity: .5; cursor: default; }
.gu-page .fr-alert.unread .fr-when::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: #dbbc76; vertical-align: 1px; }
.gu-page .fr-badge { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #24384299, #0a141bcc); border: 1px solid #dbbc7699; color: #f5dfaa; font-size: 22px; }

/* a short note after doing something */
.gu-page .fr-toast { position: fixed; z-index: 20; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 20px); margin: 0; padding: 10px 18px; border-radius: 999px; background: #0b141af2; border: 1px solid #d7e3e73d; color: #f5dfaa; font-size: 14px; box-shadow: 0 12px 40px #0009; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; max-width: calc(100vw - 32px); box-sizing: border-box; text-align: center; }
.gu-page .fr-toast.on { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 760px) {
  .gu-page.friends-body #page { padding: calc(60px + 24px) 16px 36px; }
  .gu-page .fr { gap: 18px; }
  .gu-page .fr-hero h1 { font-size: 34px; line-height: 1.1; }
  .gu-page .fr-lead { font-size: 16px; }
  /* the tabs scroll sideways */
  .gu-page .fr-tabs { flex-wrap: nowrap; overflow-x: auto; gap: 0; margin: 0 -16px; padding: 0 8px; scrollbar-width: none; }
  .gu-page .fr-tabs::-webkit-scrollbar { display: none; }
  .gu-page .fr .fr-tab { padding: 0 10px; }
  .gu-page .fr-card { padding: 16px; border-radius: 16px; }
  /* a row: the buttons go under the name */
  .gu-page .fr-row { grid-template-columns: 52px minmax(0, 1fr); row-gap: 10px; }
  .gu-page .fr-row .fr-actions { grid-column: 2; justify-content: flex-start; }
  .gu-page .fr-row-plain { grid-template-columns: minmax(0, 1fr) auto; }
  .gu-page .fr-row-plain .fr-actions { grid-column: auto; }
  .gu-page .fr-actions .fr-btn { min-height: 44px; }
  /* messages: the list, then the conversation on its own */
  .gu-page .fr-messages { grid-template-columns: minmax(0, 1fr); }
  .gu-page .fr-inbox { max-height: none; }
  .gu-page .fr-messages.talking .fr-inbox { display: none; }
  .gu-page .fr-messages:not(.talking) .fr-thread-view { display: none; }
  .gu-page .fr .fr-back { display: inline-flex; }
  .gu-page .fr-thread-head { flex-wrap: wrap; padding: 10px 14px; row-gap: 4px; }
  .gu-page .fr-thread-head .fr-back { flex-basis: 100%; }
  .gu-page .fr-thread-box { min-height: calc(100dvh - 240px); max-height: calc(100dvh - 160px); }
  .gu-page .fr-log { padding: 14px; }
  .gu-page .fr-msg { max-width: 86%; }
  .gu-page .fr-compose { padding: 12px 14px; }
  .gu-page .fr-alert { grid-template-columns: 44px minmax(0, 1fr); }
  .gu-page .fr-alert .gu-avatar, .gu-page .fr-alert .fr-badge { width: 44px; height: 44px; }
  .gu-page .fr-alert-end { grid-column: 2; justify-content: space-between; }
}
@media (prefers-reduced-motion: reduce) { .gu-page .fr-toast { transition: none; } }