/* Profile panel: banner, header (avatar, name, @handle, bio, joined), posts,
   and the "Edit profile" dialog. */

/* Shown only when it's the active view, like the other panels */
feed-panel[data-view="profile"] {
    display: none;
}

feed-section[data-active-view="profile"] feed-panel[data-view="profile"] {
    display: block;
}

feed-section[data-active-view="profile"] feed-panel:not([data-view="profile"]) {
    display: none;
}

/* Avatar, name and @handle on posts open the profile */
feed-avatar[data-action="openProfile"],
feed-from[data-action="openProfile"] {
    cursor: pointer;
}

feed-from[data-action="openProfile"]:hover {
    text-decoration: underline;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* ---------------------------------------------------------------------
   Banner: a 3:1 strip. The image is fitted (default), filled (cropped) or
   repeated; the space around a fitted image takes its dominant colour.
   Values come from the style attribute as custom properties:
     --banner-color, --banner-small, --banner-large
   --------------------------------------------------------------------- */

.profile-banner {
    position: relative;
    aspect-ratio: 3 / 1;
    background-color: var(--banner-color, rgb(207 217 222));
    background-image: var(--banner-small, linear-gradient(135deg, rgb(207 217 222), rgb(170 184 194)));
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}


/* 1. Deep Ocean (Navy to Royal Blue) */
.profile-banner.grade1 {
  background: linear-gradient(135deg, #0f2027 0%, #203a43 50%, #2c5364 100%);
}

/* 2. Cyber Dusk (Deep Indigo to Fuchsia) */
.profile-banner.grade2 {
  background: linear-gradient(135deg, #2e0854 0%, #6b117b 50%, #b23b82 100%);
}

/* 3. Emerald Forest (Deep Spruce to Teal Mint) */
.profile-banner.grade3 {
  background: linear-gradient(135deg, #0d3b36 0%, #175e54 50%, #288b77 100%);
}

/* 4. Electric Sunrise (Vivid Magenta to Warm Tangerine) */
.profile-banner.grade4 {
  background: linear-gradient(135deg, #f72585 0%, #7209b7 45%, #ff7b00 100%);
}

/* 5. Sunset Horizon (Warm Plum to Burnt Coral) */
.profile-banner.grade5 {
  background: linear-gradient(135deg, #3a1c71 0%, #d76d77 50%, #ffaf7b 100%);
}

/* 6. Tropical Lagoon (Vibrant Cyan to Electric Lime/Emerald) */
.profile-banner.grade6 {
  background: linear-gradient(135deg, #00f2fe 0%, #4facfe 50%, #00f5a0 100%);
}

/* 7. Royal Amethyst (Deep Violet to Electric Purple) */
.profile-banner.grade7 {
  background: linear-gradient(135deg, #180b33 0%, #3e1b70 50%, #6830a3 100%);
}

/* 8. Golden Hour (Dark Mocha to Muted Amber) */
.profile-banner.grade8 {
  background: linear-gradient(135deg, #241919 0%, #573e32 50%, #996e4d 100%);
}

/* 9. Hyper Blue (Cobalt to Sky Cyan) */
.profile-banner.grade9 {
  background: linear-gradient(135deg, #09203f 0%, #1e4a77 50%, #3b7ca6 100%);
}

/* 10. Rose Quartz (Muted Wine to Dusty Berry) */
.profile-banner.grade10 {
  background: linear-gradient(135deg, #2b1021 0%, #542240 50%, #873d64 100%);
}


@media (min-width: 600px) {
    .profile-banner {
        background-image: var(--banner-large, var(--banner-small,
                          linear-gradient(135deg, rgb(207 217 222), rgb(170 184 194))));
    }
}

.profile-banner.mode-fill   { background-size: cover; }
.profile-banner.mode-repeat { background-repeat: repeat; background-size: auto 100%; }

@media (prefers-color-scheme: dark) {
    .profile-banner:not(.has-image) {
        background-color: var(--banner-color, rgb(47 51 54));
        background-image: linear-gradient(135deg, rgb(47 51 54), rgb(32 35 39));
    }
}

/* ---------------------------------------------------------------------
   Header: the avatar overlaps the banner's lower edge
   --------------------------------------------------------------------- */

.profile-header {
    display: grid;
    gap: 12px;
    padding: 0 16px 16px;
    border-bottom: 1px solid var(--thread-line, rgb(207 217 222));
}

.profile-top {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-top: -56px;               /* half the avatar, over the banner */
}

.profile-avatar {
    width: 112px;
    height: 112px;
    border-radius: 50%;
    z-index: 10;
    object-fit: cover;
    border: 4px solid var(--surface, #fff);
    background: var(--surface, #fff);
}

@media (prefers-color-scheme: dark) {
    .profile-avatar { border-color: var(--surface, rgb(21 24 28)); background: var(--surface, rgb(21 24 28)); }
}

.profile-identity {
    display: grid;
    gap: 2px;
}

.profile-name {
    margin: 0;
    font-size: 1.4rem;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.profile-handle {
    margin: 0;
    opacity: 0.65;
}

.profile-bio {
    margin: 0;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.profile-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: 0.9rem;
    opacity: 0.65;
}

.profile-section-title {
    margin: 0;
    padding: 12px 16px;
    font-size: 1rem;
    border-bottom: 1px solid var(--thread-line, rgb(207 217 222));
}

.profile-empty {
    padding: 32px 16px;
    text-align: center;
    opacity: 0.65;
}

/* ---------------------------------------------------------------------
   "Edit profile"
   --------------------------------------------------------------------- */

.btn-outline {
    padding: 6px 16px;
    border: 1px solid var(--thread-line, rgb(207 217 222));
    border-radius: 999px;
    background: transparent;
    color: inherit;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.profile-edit-dialog {
    width: min(600px, 100vw);
    max-height: min(90dvh, 900px);
    padding: 0;
    border: none;
    border-radius: 16px;
    overflow-y: auto;
}

.profile-edit-dialog::backdrop {
    background: rgb(0 0 0 / 0.4);
}

@media (max-width: 599px) {
    .profile-edit-dialog {
        width: 100vw;
        height: 100dvh;
        max-height: none;
        margin: 0;
        border-radius: 0;
    }
}

.profile-edit-form {
    display: grid;
    gap: 16px;
    padding-bottom: 24px;
}

.profile-edit-form > :not(.profile-edit-bar, .profile-edit-banner) {
    margin-inline: 16px;
}

.profile-edit-form.busy {
    cursor: progress;
}

.profile-edit-bar {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 8px 16px;
    background: var(--surface, #fff);
}

@media (prefers-color-scheme: dark) {
    .profile-edit-bar { background: var(--surface, rgb(21 24 28)); }
}

.profile-edit-bar h2 {
    flex: 1;
    margin: 0;
    font-size: 1.2rem;
}

.profile-edit-bar .btn-primary {
    padding: 6px 16px;
    border: none;
    border-radius: 999px;
    background: var(--accent, #1d9bf0);
    color: #fff;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.profile-edit-bar .btn-primary:disabled {
    opacity: 0.6;
}

/* Round "change photo" and "remove" buttons over the images */
.profile-edit-photo,
.profile-edit-remove {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background: rgb(0 0 0 / 0.55);
    color: #fff;
    cursor: pointer;
}

.profile-edit-photo:hover,
.profile-edit-remove:hover {
    background: rgb(0 0 0 / 0.7);
}

.profile-edit-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

.profile-edit-mode {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding: 0;
    border: none;
}

.profile-edit-mode legend {
    margin-bottom: 6px;
    font-size: 0.9rem;
    font-weight: 600;
}

.profile-edit-mode label {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

.profile-edit-avatar {
    position: relative;
    width: 96px;
    height: 96px;
}

.profile-edit-avatar img {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    object-fit: cover;
}



.profile-edit-handle {
    display: flex;
    align-items: center;
    gap: 2px;
}

.profile-edit-handle input {
    flex: 1;
    min-width: 0;
}

.profile-edit-handle input[readonly] {
    opacity: 0.6;
}

.profile-edit-form textarea {
    padding: 12px 14px;
    border: 1px solid var(--thread-line, rgb(207 217 222));
    border-radius: 8px;
    font: inherit;
    font-size: 16px;
    background: transparent;
    color: inherit;
    resize: vertical;
}

.profile-edit-count {
    justify-self: end;
}


.icon-camera {
  display: inline-block;
  width: 1.25em;
  height: 1.25em;
  vertical-align: middle;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z'/%3E%3Ccircle cx='12' cy='13' r='4'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z'/%3E%3Ccircle cx='12' cy='13' r='4'/%3E%3C/svg%3E") no-repeat center / contain;
}


/* ---------- Edit profile: photo controls ---------- */

:root {
  --edit-btn-size: 36px;
  --edit-btn-gap: 8px;
  --edit-btn-right: 35px;
  --edit-btn-bottom: 12px;
}

.profile-edit-banner {
  position: relative;
}

/* Shared round button for camera and remove */
.profile-edit-photo,
.profile-edit-remove {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--edit-btn-size);
  height: var(--edit-btn-size);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.profile-edit-photo:hover,
.profile-edit-remove:hover {
  background: rgba(0, 0, 0, 0.75);
}

.profile-edit-photo:focus-within,
.profile-edit-remove:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.profile-edit-photo .icon,
.profile-edit-remove .icon {
  width: 20px;
  height: 20px;
}

/* display:flex above would otherwise override the hidden attribute */
.profile-edit-remove[hidden] {
  display: none;
}

/* Banner, empty: camera centered */
.profile-edit-banner:not(.has-image) .profile-edit-photo {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Banner with image: camera bottom-right, remove just to its left */
.profile-edit-banner.has-image .profile-edit-photo {
  right: var(--edit-btn-right);
  bottom: var(--edit-btn-bottom);
}

.profile-edit-banner .profile-edit-remove {
  right: calc(var(--edit-btn-right) + var(--edit-btn-size) + var(--edit-btn-gap));
  bottom: var(--edit-btn-bottom);
}

/* Avatar: small badge on the bottom-right edge */
.profile-edit-avatar {
  position: relative;
  width: 96px;
  height: 96px;
}

.profile-edit-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.profile-edit-avatar .profile-edit-photo {
  right: -2px;
  bottom: -2px;
  width: 32px;
  height: 32px;
  background: #1d1d1f;
  border: 3px solid var(--dialog-bg, #fff);
}

.profile-edit-avatar .profile-edit-photo .icon {
  width: 16px;
  height: 16px;
}

.profile-edit-avatar .profile-edit-photo {
    position: absolute;
    right: -4px;
    bottom: -4px;
    width: 36px;
    height: 36px;
}

.icon-calendar {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E") no-repeat center / contain;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E") no-repeat center / contain;
}



.interest-chip-search {
  all: unset;
  cursor: pointer;
}
.interest-chip-search:focus-visible {
  outline: 2px solid var(--chip-color, currentColor);
  outline-offset: 2px;
  border-radius: inherit;
}

dm-member-tags {
    display: flex;
    gap: 4px;
    min-width: 0;
    overflow: hidden;
    margin-left: 5px;
}
dm-member-tags.overflowing {
    mask-image: linear-gradient(to right, #000 85%, transparent);
}


/* The profile's .interest-chip, smaller for a list row */
dm-member-tags .interest-chip {
    flex: none;
    padding: 1px 8px;
    font-size: 0.75rem;
}

/* The interest that matched the search: same color, stronger tint and border */
dm-member-tags .interest-chip.match {
    background: color-mix(in srgb, var(--chip-color, #1d9bf0) 28%, transparent);
    border-color: var(--chip-color, #1d9bf0);
    font-weight: 600;
}

/* A partial match (e.g. K-Pop when searching "pop") */
dm-member-tags .interest-chip.match-partial {
    border-style: dashed;
}

/* ---------------------------------------------------------------------
   Pinned posts: above the timeline, each marked "Pinned"
   --------------------------------------------------------------------- */

profile-pinned {
    display: block;
}

profile-pinned:has(feed-post) {
    border-bottom: 1px solid var(--thread-line, rgb(207 217 222));
}

feed-pinned {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
    font-size: 0.82rem;
    font-weight: 600;
    opacity: 0.65;
}

feed-pinned::before {
    content: "📌";
    font-size: 0.8rem;
}