/* Import Google Fonts (Lato is a decent stand-in for Discord's font) */
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700;900&display=swap');

/* Basic Reset & Body */
body {
    font-family: 'Lato', sans-serif;
    margin: 0;
    padding: 20px;
    /* Dark background outside the card */
    background-color: #202225;
    color: #dcddde;
    display: flex;
    justify-content: center; /* Centers content vertically in the column */
    flex-direction: column; /* Stack profile card and social links vertically */
    align-items: center; /* Centers items horizontally */
    min-height: 100vh; /* Ensures body takes full height */
    box-sizing: border-box; /* Include padding in height calculation */
}

/* Main Profile Card Container */
.profile-card {
    background-color: #2a2d31; /* Dark greyish-brown card background from image */
    border-radius: 8px;
    max-width: 340px; /* Narrower like the mobile screenshot */
    width: 100%;
    /* margin-top: 50px; */ /* REMOVED: Let flexbox handle vertical centering space */
    /* margin-bottom: 50px; */ /* Optional: Add bottom margin for spacing if content is tall */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    /* overflow: hidden; */ /* REMOVED: Allows ::before pseudo-element to show */
    position: relative; /* Needed for absolute positioning of PFP and ::before */
}

/* NEW: Gradient Border using Pseudo-element */
.profile-card::before {
    content: '';
    position: absolute;
    top: -2px; /* Controls border thickness */
    left: -2px; /* Controls border thickness */
    right: -2px; /* Controls border thickness */
    bottom: -2px; /* Controls border thickness */
    /* Example Gradient (Orange/Yellow like screenshot border) */
    background: linear-gradient(to bottom right, #ff0000, #ff0000, #ff0000);
    border-radius: 10px; /* Slightly larger than the card's border-radius (8px + 2px border) */
    z-index: -1; /* Place it behind the main card content */
}

/* REMOVED .profile-banner rule */
/* REMOVED .profile-header rule */

/* Container for PFP */
.profile-pic-container {
    display: inline-block; /* Allows border-radius */
    padding: 3px; /* SMALLER padding for smaller PFP border effect */
    background-color: #2a2d31; /* Same as card background for the border */
    border-radius: 50%;
    position: relative; /* Keep for potential status indicator positioning */
    /* NEW Flexbox item properties */
    margin-left: 12px; /* Adjusted Space between text and smaller PFP */
    flex-shrink: 0; /* Prevent PFP from shrinking */
}

/* Profile Picture Placeholder/Image */
.profile-pic-placeholder, .profile-pic {
    width: 48px;  /* SMALLER PFP size */
    height: 48px; /* SMALLER PFP size */
    border-radius: 50%;
    display: block; /* Remove extra space below image */
    /* No separate border needed now, handled by container */
}
.profile-pic-placeholder {
    background-color: #40444b;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.0em; /* Adjusted for smaller size */
    color: #72767d;
    font-weight: bold;
}
.profile-pic {
    object-fit: cover;
}

/* Status Indicator (Optional - position bottom-right of PFP) */
.status-indicator {
    width: 10px;  /* SMALLER indicator */
    height: 10px; /* SMALLER indicator */
    border-radius: 50%;
    border: 2px solid #2a2d31; /* SMALLER border */
    position: absolute;
    bottom: 2px; /* Adjusted position */
    right: 2px;  /* Adjusted position */
    z-index: 3; /* Should be above PFP */
}
.status-indicator.online { background-color: #3ba55d; } /* Example */
.status-indicator.offline { background-color: #747f8d; } /* Example */


/* Main Content Area Styling - Regular block container */
.profile-content {
    padding: 16px; /* Standard padding */
    text-align: left;
    position: relative;
}

/* NEW: Styling for the top row (name/details + PFP) */
.profile-top-section {
    display: flex;
    align-items: center; /* Vertically center items in this row */
    margin-bottom: 16px; /* Space below this section, before bio */
}

/* NEW: Wrapper for name/details elements */
.name-details-group {
    flex-grow: 1; /* Allow text area to take available space */
}

/* Display Name */
.display-name {
    color: #ffffff;
    font-size: 1.5em; /* Large */
    font-weight: 900; /* Extra bold */
    margin: 0 0 4px 0; /* Tight spacing */
}


/* Username, Pronouns, Badges line */
.user-details {
    color: #b9bbbe; /* Lighter grey text */
    font-size: 0.875em; /* Smaller text */
    margin-bottom: 0; /* Removed bottom margin as spacing is handled by parent */
}
.user-details .separator {
    margin: 0 4px;
}
.badge-placeholder { /* Basic styling for placeholder */
    display: inline-block;
    background-color: #7289da; /* Discord blurple */
    color: white;
    font-size: 0.75em;
    padding: 1px 4px;
    border-radius: 3px;
    margin-left: 6px;
    font-weight: bold;
    vertical-align: middle;
    transform: translate(2px, -1.5px);
}

/* Bio Section */
.bio-section {
    margin-bottom: 16px;
    margin-top: 0; /* Reset margin-top if previously added */
}
.bio-section h2 { /* "ABOUT ME" heading */
    color: #b9bbbe;
    font-size: 0.75em;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 8px;
}
.bio-section p {
    color: #dcddde; /* Standard text */
    font-size: 0.95em;
    line-height: 1.4; /* Slightly tighter line spacing */
    margin: 0;
    /* Make links look like Discord links */
    /* a { color: #00a8fc; text-decoration: none; } */
    /* a:hover { text-decoration: underline; } */
}

/* Message Button (Now applied to <a> tag) */
.message-button {
    display: block; /* Treat link like a block for layout */
    /* width: 100%; */
    width: auto; /* Let flexbox determine width */
    padding: 10px;
    border: none;
    border-radius: 5px;
    background-color: #40444b; /* Button background color */
    color: #dcddde; /* Button text color */
    font-size: 0.9em;
    font-weight: 600;
    text-align: left; /* Text aligns left in button */
    cursor: pointer;
    text-decoration: none; /* Add this to remove underline from link */
    transition: background-color 0.2s ease;
    /* margin-top: 10px; */ /* Moved margin to parent container */
    flex-grow: 1; /* Allow button to grow */
    margin-right: 10px; /* Add space between button and icons */
}
.message-button:hover {
    background-color: #4f545c; /* Slightly lighter on hover */
    color: #dcddde; /* Ensure text color doesn't change on hover */
}


/* NEW: Styles for the action row (button + social links) */
.profile-actions {
    display: flex;
    /* justify-content: space-between; */ /* Removed, flex-grow handles space */
    align-items: center; /* Vertically align button and icons */
    margin-top: 0px; /* Space above this action row */
}

/* NEW: Styles for social links list inside action row */
.action-social-links {
    transform: translateX(3px);
    list-style: none;
    padding: 0;
    margin: 0; /* Reset margin */
    /* NEW Grid styles */
    display: grid;
    grid-template-columns: auto auto; /* Create 2 columns */
    gap: 4px; /* Space between grid items (icons) */
    /* ADDED: Explicit centering within grid cells */
    align-items: center;     /* Vertically center icon in grid cell */
    justify-items: center; /* Horizontally center icon in grid cell */
}

.action-social-links li {
    /* display: inline-block; */ /* Grid handles layout */
    /* margin-left: 8px; */      /* Grid gap handles spacing */
    /* Grid items align center by default, but explicit is safer */
    line-height: 1; /* Helps remove extra space in grid cell */
}

.action-social-links a {
    display: inline-block; /* Make link dimensions wrap icon */
    color: #b9bbbe; /* Default icon color (Discord's grey) */
    font-size: 1.2em; /* SMALLER icon size */
    padding: 3px; /* Smaller clickable area */
    transition: color 0.2s ease;
    text-decoration: none;
    position: relative; /* Needed for tooltip positioning */
    line-height: 1; /* Prevent extra space around icon */
}

/* Tooltip Styles (adapted class name) */
.action-social-links a::after {
    content: attr(data-tooltip); /* Get text from data-tooltip attribute */
    position: absolute;
    bottom: 100%; /* Position above the icon */
    left: 50%; /* Center horizontally */
    transform: translateX(-50%); /* Adjust horizontal centering */
    margin-bottom: 5px; /* Adjusted Space between icon and tooltip */

    background-color: #111; /* Tooltip background */
    color: #fff; /* Tooltip text color */
    padding: 2px 5px; /* EVEN SMALLER padding */
    border-radius: 4px; /* Rounded corners */
    font-size: 0.7em; /* EVEN SMALLER font size */
    font-weight: bold;
    white-space: nowrap; /* Prevent tooltip text wrapping */

    /* Hide by default */
    opacity: 0;
    visibility: hidden;
    pointer-events: none; /* Prevent tooltip interfering with mouse */
    transition: opacity 0.2s ease, visibility 0.2s ease;
    z-index: 10; /* Ensure tooltip is above other elements */
}

/* Show Tooltip on Hover (adapted class name) */
.action-social-links a:hover::after {
    opacity: 1;
    visibility: visible;
}

/* Icon Hover effect (adapted class name) */
.action-social-links a:hover {
    color: #ffffff; /* White on hover */
}