/* =========================== */
/* GLOBAL RESET + BOX MODEL */
/* =========================== */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
}

/* =========================== */
/* PREVENT WHITE FLASH + TRANSITIONS */
/* =========================== */
body {
    opacity: 0;
    transition: opacity 0.3s ease;
    background: #d9d6cf;
    color: #000;
    height: 100vh;
    overflow: hidden; /* prevents whole page scroll */
}

body.visible {
    opacity: 1;
}

/* Smooth transitions for colors, backgrounds, filters */
body, .sidebar-left, .sidebar-right, .sidebar-tools, .top-header,
.main-content, .art-grid img, .post-btn, .nav a, .search input,
.notifications, .note, .interests span {
    transition: background-color 0.3s ease, color 0.3s ease, filter 0.3s ease;
}

/* =========================== */
/* MAIN GRID LAYOUT */
/* =========================== */
.layout {
    display: grid;
    grid-template-columns: minmax(200px, 260px) 1fr minmax(250px, 300px);
    grid-template-rows: auto auto 1fr;
    height: 100vh;
}
/* =========================== */
/* LEFT SIDEBAR */
/* =========================== */
/* LEFT SIDEBAR */
.sidebar-left {
    grid-column: 1;
    grid-row: 1 / span 3;
    background: #EBE8E1;
    padding: 25px;
    border-right: 1px solid #aaa;

    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
}

.logo {
    font-size: 28px;
    font-weight: 900;
    margin-bottom: 40px;
}

.nav {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.nav a {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: black;
    font-size: 18px;
    padding: 8px 12px;
}

.nav-icon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}

.nav a.active {
    font-weight: bold;
    color: #fff;
    background-color: #8a8f96;
    padding: 8px 12px;
}

.nav a:hover {
    background-color: #b0b5bb;
    color: #000;
}

.nav a.active .nav-icon {
    filter: brightness(0) invert(1);
}

/* POST BUTTON */
.post-btn {
    padding: 10px;
    font-size: 18px;
    background: #aeb4bb;
    border: none;
    cursor: pointer;

    /* push it just above account section */
    margin-top: auto;  
    margin-bottom: -320px; 
}

.post-btn:hover {
    background: #9aa0a7;
}

.account {
    margin-top: auto;
    text-decoration: none;
    color: black;
}


/* =========================== */
/* HEADER */
/* =========================== */
.top-header {
    display: flex;
    align-items: center;
    justify-content: space-between; /* ensures h1 is left, tools right */
    padding: 20px 30px;
    min-height: 80px;
    border-bottom: 1px solid #aaa;
    background: #EBE8E1;
    position: sticky;
    top: 0;
    z-index: 10;
    gap: 15px; /* optional small gap between elements */
}

.top-header h1 {
    margin: 0;
    font-size: 28px;
}

/* =========================== */
/* FULL-WIDTH EXPLORE SEARCH BAR */
/* =========================== */
.explore-search-full {
    grid-column: 2; /* stay in the main column */
    margin: 0;      
    padding: 15px 0; /* more spacing */
    background: #e2e0db; /* same as main content */
    display: flex;
    justify-content: center; /* center the input */
    align-items: center;
    position: relative;
    z-index: 5;
}

.explore-search-full input {
    width: 90%;          /* full width but with some padding on sides */
    max-width: 800px;    /* optional: prevent super wide input */
    padding: 15px 25px;
    font-size: 18px;
    border: 1px solid #aaa;
    outline: none;
}

/* Explore feed layout */
.explore-feed {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

/* Make post container flexible */
.explore-post {
    background-color: #e2e0db;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
    width: 100%;      /* take full width of main column */
}

/* Images scale naturally */
.explore-post .post-image {
    width: 100%;      /* full width of container */
    height: auto;     /* maintain original aspect ratio */
    object-fit: contain; /* ensure full image shows */
    max-width: 100%;  /* never overflow container */
    display: block;   /* remove inline spacing */
}

.post-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
}

.avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.user-info .username {
    font-weight: bold;
}

.user-info .handle {
    font-size: 12px;
    color: #555;
}

.post-image {
    width: 100%;
    height: auto;
    max-height: 600px;
    object-fit: cover;
}

.post-actions {
    display: flex;
    gap: 15px;
    padding: 10px;
}

.post-actions .heart-icon {
    width: 24px;
    height: 24px;
    cursor: pointer;
}
.post-actions button {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border: none;
    cursor: pointer;
}

.post-actions button:hover {
    background: #9aa0a7;
    transform: scale(1.03);
}

.post-actions button svg {
    width: 20px;
    height: 20px;
    fill: currentColor; /* ensures it inherits text color */
}

/* Dark mode for buttons */
body.dark .post-actions button {
    background: #3c3c3c;
    color: #eee;
}

body.dark .post-actions button:hover {
    background: #555;
}

.caption {
    padding: 0 10px 10px;
    font-size: 14px;
    color: #333;
}

/* =========================== */
/* MAIN CONTENT */
/* =========================== */
.main-content {
    grid-column: 2;
    grid-row: 3;
    overflow-y: auto;   /* vertical scrolling only */
    padding: 30px;
    min-width: 0;
}

.sidebar-right {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    grid-column: 3;
    grid-row: 1 / span 3;
    background: #EBE8E1;
    padding: 20px;
    gap: 20px;
    position: sticky;
    top: 0;
    height: 100vh;
}

.sidebar-tools {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-bottom: 10px;
}

.sidebar-tools button,
.sidebar-tools a {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

.icon-sm { width: 20px; height: 20px; }
.icon-xs { width: 12px; height: 12px; }

.search input {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #aaa;
    outline: none;
}

.notifications-container {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.notifications-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.notifications-header h3 {
    margin: 0;
    font-size: 16px;
}

.notifications,
.open-notifications {
    border: 1px solid #aaa;
    padding: 10px;
}

.notifications {
    max-height: 250px;
    overflow-y: auto;
}

.note {
    padding: 6px 0;
    border-bottom: 1px solid #ccc;
    font-size: 14px;
}

.note:last-child { border-bottom: none; }

.close-notifications,
.open-notifications,
.add-interest,
.delete-interest {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

/* Interests */
.interests-container { margin-top: auto; }

.interests-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
}

.interests-header h3 { margin: 0; font-size: 16px; }

.interests-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.interest-box {
    position: relative;
    padding: 5px 25px 5px 10px;
    background: #bfc4cb;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    color: #000;
    cursor: default;
}

.interest-box button.delete-interest {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* icon sizes */
.icon-sm{
    width:20px;
    height:20px;
}

.icon-xs{
    width:12px;
    height:12px;
}

/* show black icons in light mode */
.icon-dark{
    display:none;
}

/* swap icons in dark mode */
body.dark .icon-light{
    display:none;
}

body.dark .icon-dark{
    display:inline;
}
/* =========================== */
/* DARK MODE SUPPORT */
body.dark .sidebar-right {
    background: #2c2c2c;
    border-left: 1px solid #555;
    color: #eee;
}

body.dark .search input {
    background: #3c3c3c;
    color: #eee;
    border-color: #555;
}

body.dark .notifications,
body.dark .note,
body.dark .open-notifications {
    background: #3c3c3c;
    border-color: #555;
    color: #eee;
}

body.dark .interest-box {
    background: #3c3c3c;
    color: #eee;
}

body.dark .interest-box button.delete-interest,
body.dark .sidebar-tools button,
body.dark .sidebar-tools a {
    color: #eee;
}
.sidebar-right {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    grid-column: 3;
    grid-row: 1 / span 3;
    background: #EBE8E1;
    padding: 20px;
    border-left: 1px solid #aaa;
    gap: 20px;

    position: sticky;
    top: 0;
    height: 100vh;
}

.sidebar-tools {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-bottom: 10px;
    position: sticky;
    top: 0;
    padding-bottom: 5px;
    z-index: 5;
}

.icon-sm { width: 20px; height: 20px; }
.icon-xs { width: 12px; height: 12px; }

.dark-toggle {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
}

.settings {
    text-decoration: none;
    font-size: 20px;
    color: black;
}

.settings:hover {
    color: #555;
}

/* =========================== */
/* SEARCH, NOTIFICATIONS, INTERESTS */
.search input {
    width: 100%;
    padding: 8px;
}

.notifications-container {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.notifications-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.notifications-header h3 {
    margin: 0;
}

.close-notifications,
.open-notifications,
.add-interest,
.delete-interest {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 16px;
}

.notifications, .note {
    border: 1px solid #aaa;
    padding: 10px;
    margin-top: 8px;
}

/* Interests container at bottom */
.interests-container {
    margin-top: auto;
}

/* =========================== */
/* INTERESTS GRID */
.interests-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 5px;
}

.interest-box {
    position: relative;
    padding: 5px 25px 5px 10px;
    background: #bfc4cb;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    color: #000;
    cursor: default;
}

.interest-box button.delete-interest {
    position: absolute;
    top: -4px;
    right: -4px;
    font-size: 10px;
    width: 16px;
    height: 16px;
    border: none;
    background: none;
    color: #000;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.interests-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 5px;
    margin-bottom: 5px;
}

.interests-header h3 {
    margin: 0;
    font-size: 16px;
}

.interests-header .add-interest {
    font-size: 16px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px 5px;
}

/* =========================== */
/* ART GRID */
/* =========================== */
.art-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 8px; /* smaller gutters */
}

.art-grid img {
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1; /* keeps posts square like many social feeds */
    object-fit: cover;
}

/* =========================== */
/* ART POSTS */
/* =========================== */

.art-post {
    position: relative;
}

.heart {
    position: absolute;
    top: 10px;
    right: 10px;
}

.heart img {
    width: 22px;
    height: 22px;
    cursor: pointer;
}

.heart img:hover {
    transform: scale(1.15);
}

.heart {
    position: absolute;
    top: 10px;
    right: 10px;
}

.heart-icon {
    width: 24px;
    height: 24px;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.heart-icon:hover {
    transform: scale(1.15);
}

/* liked state */
.heart-icon.liked {
    filter: invert(19%) sepia(92%) saturate(7450%) hue-rotate(352deg) brightness(97%) contrast(112%);
}

/* =========================== */
/* PROFILE CARD */
.profile-card {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 10px;
}

.profile-card img {
    width: 40px;
    height: 40px;
    object-fit: cover;
}

.profile-info {
    display: flex;
    flex-direction: column;
}

.username { font-weight: bold; }
.handle { font-size: 14px; color: #555; }

.account:hover .profile-card { background: #bfc4cb; }

/* =========================== */
/* POST PAGE */
.post-view img {
    width: 100%;
    max-width: 600px;
    margin-bottom: 15px;
}

.post-desc { margin-bottom: 15px; font-size: 16px; }

.post-actions {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.post-actions button {
    padding: 8px 12px;
    border: none;
    background: #aeb4bb;
    cursor: pointer;
}

.post-actions button:hover { background: #9aa0a7; }

.comments { border-top: 1px solid #aaa; padding-top: 10px; }

/* =========================== */
/* MESSAGES */
.messages-layout { display: flex; gap: 20px; height: calc(100vh - 80px); }

.users-sidebar {
    width: 60px;
    background: #cfcac2;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px 0;
    border-right: 1px solid #aaa;
    overflow-y: auto;
}

.user-icon {
    position: relative;
    width: 50px;
    height: 50px;
    margin: 0 auto;
    cursor: pointer;
}

.user-icon img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid transparent;
}

.user-icon:hover img { border: 2px solid #8a8f96; }

.online-dot {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 10px;
    height: 10px;
    background: #4caf50;
    border: 2px solid #cfcac2;
    border-radius: 50%;
}

.chat-window {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: #e2e0db;
    overflow: hidden;
}

.chat-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 15px;
    background: #d9d6cf;
    border-bottom: 1px solid #aaa;
}

.chat-messages {
    flex: 1;
    padding: 10px 15px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.message {
    max-width: 70%;
    padding: 8px 12px;
    font-size: 14px;
    line-height: 1.3;
    position: relative;
}

.message.sent { background: #8a8f96; color: #fff; align-self: flex-end; }
.message.received { background: #d0d0d0; align-self: flex-start; }

.chat-typing {
    display: flex;
    padding: 10px 15px;
    gap: 5px;
    border-top: 1px solid #aaa;
    background: #d9d6cf;
}

.chat-typing input {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid #aaa;
    outline: none;
}

.chat-typing button {
    padding: 8px 15px;
    border: none;
    background: #8a8f96;
    color: #fff;
    cursor: pointer;
}

/* =========================== */
/* EXPLORE PAGE */
.explore-layout { display: flex; flex-direction: column; gap: 20px; }

.popular-accounts {
    background: #e2e0db;
    padding: 15px;
}

.accounts-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; }

.account-card { display: flex; align-items: center; gap: 10px; padding: 10px; background: #fff; border: 1px solid #ccc; }

.follow-btn {
    padding: 6px 12px;
    border: none;
    background: #8a8f96;
    color: #fff;
    cursor: pointer;
}

.avatar-icon{
    width:50px;
    height:50px;
    border-radius:50%;
    padding:6px;
    background:#d0d0d0;
}

/* Add spacing under recent posts header */
.recent-posts h2 {
    margin-bottom: 20px; /* or adjust to whatever feels right */
}

/* Notifications page */
.notifications-page h2 {
    margin-bottom: 20px;
    font-size: 24px;
    font-weight: bold;
}

/* Notifications list container */
.notifications-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Individual notification cards */
.notification-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 15px;
    background: #f2f2f2;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.notification-card:hover {
    background: #e0e0e0;
}

/* Avatar inside notification */
.notification-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

/* Notification text */
.notification-text {
    display: flex;
    flex-direction: column;
}

.notification-text .text {
    font-size: 16px;
    margin-bottom: 2px;
}

.notification-text .time {
    font-size: 12px;
    color: #888;
}

/* Chat header avatar */
.chat-header img {
    width: 40px;       /* Set a reasonable width */
    height: 40px;      /* Keep it square */
    border-radius: 50%; /* Make it round */
    object-fit: cover; /* Ensure it scales nicely */
}

/* Right sidebar icons - default (light mode) */
.sidebar-right img {
    filter: none; /* light mode, icons appear normally */
}

/* Dark mode */
body.dark .sidebar-right img {
    filter: invert(1); /* flips white → black and vice versa */
}

/* =========================== */
/* DARK MODE */
body.dark {
    background: #1e1e1e;
    color: #eee;
}

body.dark .top-header,
body.dark .sidebar-left,
body.dark .sidebar-right {
    background: #2c2c2c;
    color: #eee;
    border-color: #555;
}

body.dark .sidebar-tools { background: #2c2c2c; border-bottom: 1px solid #555; }
body.dark .nav a { color: #eee; }
body.dark .nav a.active { color: #fff; background-color: #555; }
body.dark .nav a:hover { background-color: #444; color: #fff; }
body.dark .post-btn { background: #444; color: #eee; }
body.dark .post-btn:hover { background: #555; }

body.dark .art-grid img { filter: brightness(0.85); }
body.dark .search input,
body.dark .notifications,
body.dark .note,
body.dark .interests span { background: #3c3c3c; border-color: #555; color: #eee; }
body.dark .settings, body.dark .dark-toggle { color: #eee; }
body.dark .sidebar-tools button:hover { background: #444; color: #fff; }

body.dark .interest-box { background: #3c3c3c; color: #eee; }
body.dark .interest-box button.delete-interest { color: #fff; }
body.dark .interest-box button.delete-interest:hover { background: #555; }

body.dark .explore-search-full { background: #2c2c2c; }
body.dark .explore-search-full input { background: #3c3c3c; border-color: #555; color: #eee; }

body.dark .popular-accounts,
body.dark .accounts-grid,
body.dark .account-card,
body.dark .post-row { background: #3c3c3c; border-color: #555; color: #eee; }

body.dark .follow-btn { background: #555; color: #eee; }
body.dark .follow-btn:hover { background: #717579; }

body.dark .avatar-icon{
    background:#444;
}

body.dark .explore-post {
    background:#444;
}
/* Dark mode support */
body.dark .notification-card {
    background: #2c2c2c;
}

body.dark .notification-card:hover {
    background: #3a3a3a;
}

body.dark .notification-text .text {
    color: #eee;
}

body.dark .notification-text .time {
    color: #aaa;
}

/* =========================
SETTINGS PAGE
========================= */

.settings-page{
display:grid;
grid-template-columns:220px 1fr;
gap:40px;
}

/* MENU */

.settings-menu{
display:flex;
flex-direction:column;
gap:10px;
}

.settings-tab{
text-align:left;
padding:10px 12px;
border:none;
background:#d0cdc6;
cursor:pointer;
border-radius:6px;
}

.settings-tab:hover{
background:#bfc4cb;
}

.settings-tab.active{
background:#8a8f96;
color:white;
}

/* SETTINGS CONTENT */

.settings-content{
display:flex;
flex-direction:column;
gap:25px;
max-width:600px;
}

.setting-section{
display:flex;
flex-direction:column;
gap:15px;
margin-bottom:20px;
}

/* INPUTS */

.setting-item{
display:flex;
flex-direction:column;
gap:5px;
}

.setting-item input,
.setting-item textarea{
padding:8px 10px;
border:1px solid #aaa;
}

.setting-item textarea{
resize:vertical;
min-height:80px;
}

/* TOGGLES */

.setting-toggle{
display:flex;
justify-content:space-between;
align-items:center;
padding:10px 0;
}

/* SWITCH */

.switch{
position:relative;
display:inline-block;
width:40px;
height:20px;
}

.switch input{
opacity:0;
width:0;
height:0;
}

.slider{
position:absolute;
cursor:pointer;
top:0;
left:0;
right:0;
bottom:0;
background:#ccc;
border-radius:20px;
transition:.3s;
}

.slider:before{
position:absolute;
content:"";
height:14px;
width:14px;
left:3px;
bottom:3px;
background:white;
transition:.3s;
border-radius:50%;
}

input:checked + .slider{
background:#8a8f96;
}

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

/* SAVE BUTTON */

.save-settings{
padding:12px;
border:none;
background:#8a8f96;
color:white;
cursor:pointer;
width:200px;
}

.save-settings:hover{
background:#717579;
}

/* SETTINGS AVATAR DISPLAY */

.avatar-setting{
display:flex;
align-items:center;
gap:15px;
}

.avatar-setting img{
width:70px;
height:70px;
border-radius:50%;
object-fit:cover;
border:2px solid #aaa;
}

.avatar-note{
font-size:12px;
color:#666;
}
/* DARK MODE */

body.dark .settings-tab{
background:#3c3c3c;
color:#eee;
}

body.dark .settings-tab:hover{
background:#444;
}

body.dark .setting-item input,
body.dark .setting-item textarea{
background:#3c3c3c;
border-color:#555;
color:#eee;
}
body.dark .avatar-note{
color:#aaa;
}

/* PROFILE PAGE */

.profile-banner {
    height: 200px;
    background-size: cover;
    background-position: center;
    border-radius: 12px;
    position: relative;
}

body.dark .profile-banner{
background:#333;
}

/* PROFILE INFO */

.sidebar-profile {
    display: flex;
    align-items: center; /* vertically centers text with icon */
    gap: 10px;
}

.sidebar-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.sidebar-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sidebar-text .handle {
    color: gray;
    font-size: 12px;
}

.profile-info {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin-top: -70px; /* pulls avatar over banner correctly */
    position: relative;
}

.profile-header-bg {
    width: 100vw; /* full viewport width */
    background: linear-gradient(135deg, #8a8f96, #b0b5bb); /* example cool gradient */
    padding: 40px 0; /* vertical spacing above and below profile header */
    box-sizing: border-box;
    position: relative;
    z-index: 1; /* sits behind content */
}

/* Keep profile-header content constrained */
.profile-header {
    max-width: 1200px; /* same as main content width */
    margin: 0 auto;
    padding: 0 30px; /* horizontal padding inside the content */
    position: relative;
    z-index: 2; /* above the background */
}

.profile-avatar {
    flex-shrink: 0;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 4px solid white; /* only on container */
    overflow: hidden;
}

.profile-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover; /* fills the circle perfectly */
}

body.dark .profile-avatar img{
border:4px solid #111;
}


.profile-text {
    margin-left: 0; /* keep text next to avatar */
}

.handle{
color:gray;
margin-bottom:8px;
}

.bio{
margin-bottom:10px;
}

.profile-stats span{
margin-right:20px;
color:gray;
}

/* EDIT BUTTON */

.edit-profile {
    margin-left: auto;
    padding: 6px 14px;
    border-radius: 20px;
    border: 1px solid #ccc;
    background: none;
    cursor: pointer;
}


/* TABS */

.profile-tabs {
    display: flex;
    gap: 20px;
    margin-top: 20px; /* add spacing from header */
    border-bottom: 1px solid #ddd;
}

.profile-tabs button{
background:none;
border:none;
padding:10px 0;
cursor:pointer;
font-weight:600;
color:gray;
}

.profile-tabs button.active{
color:black;
border-bottom:2px solid black;
}

body.dark .profile-tabs button.active{
color:white;
border-color:white;
}

/* POSTS */

.profile-posts{
margin-top:20px;
display:flex;
flex-direction:column;
gap:20px;
}

.post img{
width:100%;
}

.post p{
margin-top:6px;
}

.post-card{
background:var(--card-bg);
padding:10px;
margin-bottom:20px;
}

.post-header{
display:flex;
align-items:center;
gap:10px;
margin-bottom:8px;
}

.post-header .avatar{
width:36px;
height:36px;
border-radius:50%;
}

.post-image img{
width:100%;
}

.post-desc{
margin-top:6px;
font-size:14px;
color:var(--text-secondary);
}

.profile-banner {
    width: 100%;
    height: 180px;           /* or taller if you want */
    background-size: cover;   /* scale image nicely */
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 12px;
}

body.dark .chat-typing { 
    background: #2c2c2c;
    border-color: #555;
}

body.dark .chat-typing input {
    background: #3c3c3c;
    color: #eee;
    border-color: #555;
}
body.dark .chat-typing button {
     background: #555; 
     color: #eee; 
}

body.dark .users-sidebar {
    background: #2c2c2c;
    border-right: 1px solid #555;
}

body.dark .chat-window {
    background: #1e1e1e;
}

body.dark .chat-header {
    background: #2c2c2c;
    border-bottom: 1px solid #555;
    color: #eee;
}

body.dark .chat-messages {
    background: #1e1e1e; /* keep messages area consistent */
}

body.dark .message.sent {
    background: #555;      /* darker sent bubble */
    color: #fff;
}

body.dark .message.received {
    background: #333;      /* darker received bubble */
    color: #eee;
}

body.dark .online-dot {
    border: 2px solid #2c2c2c; /* match dark sidebar */
    background: #4caf50;        /* keep green indicator */
}
/* =========================== */
/* MOBILE + TABLET RESPONSIVE */
/* =========================== */
@media (max-width: 1024px) {
    .layout {
        grid-template-columns: 1fr; /* single column */
        grid-template-rows: auto;   /* stack all rows */
    }

    .sidebar-left,
    .sidebar-right {
        display: none; /* hide sidebars by default */
        position: static;
        height: auto;
    }

    .main-content {
        grid-column: 1;
        grid-row: auto;
        padding: 15px;
    }

    .top-header {
        grid-column: 1;
        padding: 15px;
        font-size: 20px;
    }

    .post-btn {
        margin-bottom: 15px;
    }

    .explore-search-full input {
        width: 95%; /* full width with small margin */
        padding: 12px 15px;
        font-size: 16px;
    }

    .art-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 6px;
    }

    .profile-header {
        padding: 0 15px;
    }

    .profile-avatar {
        width: 70px;
        height: 70px;
        border: 3px solid white;
    }

    .profile-tabs {
        flex-wrap: wrap;
        gap: 10px;
    }

    .messages-layout {
        flex-direction: column;
        height: auto;
    }

    .chat-window {
        height: 400px;
    }

    .users-sidebar {
        display: none;
    }

    .notifications-list,
    .accounts-grid {
        grid-template-columns: 1fr; /* single column on small screens */
    }
}

@media (max-width: 480px) {
    .top-header h1 {
        font-size: 18px;
    }

    .nav a {
        font-size: 16px;
        gap: 8px;
        padding: 6px 8px;
    }

    .explore-post .post-image,
    .post img {
        max-height: 400px;
    }

    .post-actions button {
        padding: 6px 8px;
        gap: 4px;
    }

    .profile-avatar {
        width: 60px;
        height: 60px;
    }

    .profile-stats span {
        font-size: 12px;
        margin-right: 10px;
    }

    .profile-tabs button {
        font-size: 14px;
        padding: 6px 0;
    }

    .art-grid {
        grid-template-columns: 1fr; /* single column feed for mobile */
        gap: 4px;
    }

    .chat-typing input {
        font-size: 14px;
        padding: 6px 10px;
    }
}
/* MOBILE SIDEBARS + CENTER HEADER */
@media (max-width: 1024px) {
    .top-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px;
    }

    .top-header h1 {
        flex: 1;
        text-align: center;
        font-size: 20px;
    }

    .sidebar-left,
    .sidebar-right {
        position: fixed;
        top: 0;
        height: 100%;
        width: 260px;
        z-index: 1050;
        background: #EBE8E1;
        padding: 25px;
        overflow-y: auto;
        transition: transform 0.3s ease;
    }

    .sidebar-left {
        left: 0;
        transform: translateX(-100%);
    }

    .sidebar-left.active {
        transform: translateX(0);
    }

    .sidebar-right {
        right: 0;
        transform: translateX(100%);
    }

    .sidebar-right.active {
        transform: translateX(0);
    }

    .sidebar-overlay {
        display: none;
        position: fixed;
        top: 0; left: 0;
        width: 100%; height: 100%;
        background: rgba(0,0,0,0.4);
        z-index: 1040;
        transition: opacity 0.3s ease;
    }

    .sidebar-overlay.active {
        display: block;
    }

    .main-content {
        grid-column: 1;
        grid-row: auto;
        padding: 15px;
    }
}

/* MOBILE SIDE-SIDEBARS */
@media (max-width: 1024px) {
    .sidebar-left,
    .sidebar-right {
        display: block; /* needed to toggle */
        position: fixed;
        top: 0;
        height: 100vh;
        width: 260px;
        background: #EBE8E1;
        padding: 20px;
        gap: 20px;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        z-index: 100;
    }

    .sidebar-right {
        right: 0;
        left: auto;
        transform: translateX(100%);
    }

    .sidebar-left.active {
        transform: translateX(0);
    }

    .sidebar-right.active {
        transform: translateX(0);
    }

    /* Overlay behind sidebars */
    .sidebar-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(0,0,0,0.4);
        display: none;
        z-index: 90;
    }

    .sidebar-overlay.active {
        display: block;
    }

    /* Center header text with arrows */
    .top-header {
        justify-content: space-between;
        position: relative;
    }

    .top-header h1 {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        margin: 0;
        font-size: 20px;
    }
}
/* Login page remains centered */
body.login-page {
    margin: 0;
    padding: 0;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #d9d6cf;
    font-family: Arial, Helvetica, sans-serif;
}

.login-container {
    text-align: center;
}

.logo-text {
    font-size: 8vw;
    font-weight: 900;
    margin-bottom: 50px;
    color: #000;
}

.login-buttons {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
}

.btn {
    padding: 15px 40px;
    border-radius: 25px;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    text-align: center;
    transition: 0.2s all;
}

/* Login button */
.login-btn {
    background: #1d4ed8;
    color: #fff;
    text-decoration: none;
}

.login-btn:hover {
    background: #2563eb;
}

/* Static Sign Up element */
.signup-btn {
    background: #d1d5db;
    color: #555;
    cursor: default;
    user-select: none;
}

.signup-btn:hover {
    background: #d1d5db; /* no hover effect */
}

.static-btn {
    pointer-events: none; /* prevents clicking */
}
/* Hide arrows by default (desktop) */
.sidebar-left-btn,
.sidebar-right-btn {
    display: none;
}

/* Show arrows only on mobile */
@media (max-width: 1024px) {
    .sidebar-left-btn,
    .sidebar-right-btn {
        display: inline-flex; /* or flex */
        background: none;
        border: none;
        cursor: pointer;
        padding: 5px;
    }

    .sidebar-left-btn img,
    .sidebar-right-btn img {
        width: 24px;  /* adjust size */
        height: 24px;
    }
}
.logo {
    font-size: 34px;
    font-weight: bold;
    color: #000000;
    text-decoration: none;
}
.icon-dark { display: none; }
body.dark .icon-light { display: none; }
body.dark .icon-dark { display: inline; }

body.dark .logo {
    color: #eee;
}