@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700&family=Source+Serif+4:opsz,wght@8..60,500;8..60,600&display=swap');

:root {
    --bg: #F7F5EB;
    --card: #FBF9F1;
    --text: #035352;
    --text-muted: #5b6a6a;
    --primary: #0C4242;
    --border: #E7E2D5;
    --green: #16a34a;
    --red: #dc2626;
}

* { box-sizing: border-box; }

html, body {
    height: auto;
    min-height: 100%;
}

body {
    margin: 0;
    background: var(--bg) !important;
    color: var(--text);
    font-family: "DM Sans", Arial, sans-serif !important;
    display: block !important;
    justify-content: unset !important;
    align-items: unset !important;
    height: auto !important;
}

/* Kill the mobile frame on desktop */
.mobile-frame {
    position: static !important;
    width: 100% !important;
    max-width: 1280px;
    margin: 0 auto;
    height: auto !important;
    min-height: 100vh;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
}

.page-content {
    padding: 20px 24px 40px !important;
    overflow: visible !important;
}

/* Desktop top bar (replaces old header) */
.top-header {
    background: transparent !important;
    border-bottom: 1px solid var(--border);
    height: auto !important;
    padding: 16px 24px !important;
}

/* In-place post composer shared by the Social feed and sidebar */
.post-composer-dialog { width: min(640px, calc(100vw - 28px)); max-width: none; }
.post-composer-modal {
    display: flex;
    flex-direction: column;
    max-height: min(82vh, 720px);
    overflow: hidden;
    border: 1px solid #e7e1d3;
    border-radius: 20px;
    background: #fffdf8;
    box-shadow: 0 24px 70px rgba(20, 45, 42, .22);
}
.post-composer-header {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 20px 24px;
    border-bottom: 1px solid #e7e1d3;
}
.post-composer-eyebrow { display: block; margin-bottom: 3px; color: #71808b; font-size: 10px; font-weight: 750; letter-spacing: .14em; }
.post-composer-header h2 { margin: 0; color: #0c4242; font-size: 22px; font-weight: 700; }
.post-composer-close {
    display: grid;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    place-items: center;
    border: 1px solid #e7e1d3;
    border-radius: 50%;
    background: #f5f4ed;
    color: #315451;
    font-size: 25px;
    line-height: 1;
}
.post-composer-close:hover { background: #e8f2e9; color: #0c4242; }
.post-composer-modal form { display: flex; min-height: 0; flex: 1 1 auto; flex-direction: column; }
.post-composer-body { display: flex; min-height: 220px; flex: 1 1 auto; flex-direction: column; gap: 12px; overflow: hidden; padding: 20px 24px 14px; }
.post-composer-editor {
    min-height: 190px;
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 14px 16px;
    border: 1px solid #d9ded4;
    border-radius: 13px;
    outline: 0;
    background: #fff;
    color: #193b40;
    font-size: 16px;
    line-height: 1.6;
    overflow-wrap: anywhere;
    scrollbar-color: #b8c9bf transparent;
}
.post-composer-editor:empty::before { content: attr(data-placeholder); color: #88949d; pointer-events: none; }
.post-composer-editor:focus { border-color: #0c7773; box-shadow: 0 0 0 3px rgba(12, 119, 115, .11); }
.post-composer-error { min-height: 0; color: #a94d42; font-size: 13px; }
.post-composer-error:empty { display: none; }
.post-composer-preview { position: relative; display: flex; max-height: 145px; justify-content: center; overflow: hidden; border: 1px solid #e7e1d3; border-radius: 12px; background: #f8f7f0; }
.post-composer-preview[hidden] { display: none; }
.post-composer-preview img { display: block; max-width: 100%; max-height: 140px; object-fit: contain; }
.post-composer-preview button { position: absolute; top: 7px; right: 7px; display: grid; width: 28px; height: 28px; place-items: center; border: 0; border-radius: 50%; background: rgba(12, 66, 66, .88); color: white; font-size: 20px; line-height: 1; }
.post-composer-toolbar { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 24px 20px; border-top: 1px solid #e7e1d3; background: #fffdf8; }
.post-composer-attach { display: inline-flex; min-height: 42px; align-items: center; gap: 9px; padding: 8px 14px; border: 1px solid #d7ddd5; border-radius: 999px; background: #f4f5ef; color: #315451; font-size: 14px; font-weight: 650; cursor: pointer; }
.post-composer-attach:hover { border-color: #b9cec3; background: #e8f2e9; color: #0c4242; }
.post-composer-attach svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.post-composer-submit { min-width: 105px; min-height: 42px; padding: 9px 18px; border: 1px solid #0c4242; border-radius: 999px; background: #0c4242; color: #fffdf8; font-size: 14px; font-weight: 700; }
.post-composer-submit:hover { border-color: #0c7773; background: #0c7773; }
@media (max-width: 600px) {
    .post-composer-dialog { width: calc(100vw - 20px); margin: 10px auto; }
    .post-composer-modal { max-height: calc(100dvh - 20px); border-radius: 17px; }
    .post-composer-header { padding: 16px 18px; }
    .post-composer-body { min-height: 190px; padding: 16px 18px 12px; }
    .post-composer-editor { min-height: 170px; }
    .post-composer-toolbar { padding: 12px 18px 16px; }
}

/* ===== TABS ===== */
.feed-tabs {
    border-bottom: 1px solid var(--border) !important;
    background: transparent !important;
    margin-bottom: 8px;
}

.feed-tabs .nav-link {
    background: transparent !important;
    border: none !important;
    color: #6b7280 !important;
    font-weight: 500;
    border-radius: 0 !important;
    padding: 12px 16px !important;
}

.feed-tabs .nav-link.active {
    color: var(--primary) !important;
    background: transparent !important;
    border-bottom: 2px solid var(--primary) !important;
    font-weight: 600;
}

/* ===== POST CARDS ===== */
.post-card {
    background: var(--card) !important;
    border: 1px solid var(--border) !important;
    border-radius: 16px !important;
    padding: 16px 18px !important;
    margin-bottom: 16px !important;
    box-shadow: 0 2px 8px rgba(3, 83, 82, 0.04);
}

.post-user .username {
    color: var(--text) !important;
    font-weight: 600;
}

.post-text {
    color: var(--text);
    margin: 10px 0 12px;
}

.post-actions {
    border-top: 1px solid var(--border) !important;
    padding-top: 12px;
    color: #6b7280;
}

/* ===== THREE DOT MENU ===== */
.more-btn {
    background: var(--primary) !important;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.more-btn img {
    filter: brightness(0) invert(1);
    width: 16px;
}

/* ===== FLOATING ACTION BUTTON ===== */
.floating-action img {
    background: var(--primary);
    border-radius: 50%;
    padding: 12px;
    width: 56px;
    height: 56px;
}

/* ===== HEADER ===== */
.top-header {
    background: transparent !important;
    border-bottom: 1px solid var(--border);
    padding: 12px 0 16px !important;
}

/* Shared post and trade delete confirmation */
.modal-content.logus.delete-confirm-modal {
    overflow: hidden;
    border: 1px solid #e7e1d3;
    border-radius: 22px;
    background: #fffdf8;
    box-shadow: 0 24px 70px rgba(20, 45, 42, .2);
}

.modal-content.logus.delete-confirm-modal .modal-body {
    padding: 34px 32px 30px;
    text-align: center;
}

.modal-content.logus.delete-confirm-modal .delete-confirm-icon {
    display: grid;
    width: 62px;
    height: 62px;
    margin: 0 auto 16px;
    place-items: center;
    border-radius: 20px;
    background: #f8e9e5;
    color: #a94d42;
}

.modal-content.logus.delete-confirm-modal .delete-confirm-icon svg {
    width: 27px;
    height: 27px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.modal-content.logus.delete-confirm-modal .delete-confirm-eyebrow {
    display: block;
    margin-bottom: 7px;
    color: #71808b;
    font-size: 11px;
    font-weight: 750;
    letter-spacing: .14em;
}

.modal-content.logus.delete-confirm-modal .modal-body h2 {
    margin: 0 0 9px;
    color: #0c4242;
    font-size: 25px;
    font-weight: 700;
}

.modal-content.logus.delete-confirm-modal .modal-body p {
    max-width: 390px;
    margin: 0 auto 24px;
    color: #71808b;
    font-size: 15px;
    line-height: 1.55;
}

.modal-content.logus.delete-confirm-modal .action-delete {
    display: flex;
    gap: 12px;
}

.modal-content.logus.delete-confirm-modal .modal-log-can,
.modal-content.logus.delete-confirm-modal .modal-log-del {
    display: inline-flex;
    flex: 1;
    min-height: 46px;
    align-items: center;
    justify-content: center;
    padding: 10px 14px;
    border-radius: 999px;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .16s ease, color .16s ease, border-color .16s ease;
}

.modal-content.logus.delete-confirm-modal .modal-log-can {
    border: 1px solid #d7ddd5;
    background: #f4f5ef;
    color: #315451;
}

.modal-content.logus.delete-confirm-modal .modal-log-can:hover {
    border-color: #b9cec3;
    background: #e8f2e9;
    color: #0c4242;
}

.modal-content.logus.delete-confirm-modal .modal-log-del {
    border: 1px solid #b96a60;
    background: #a94d42;
    color: #fffdf8;
}

.modal-content.logus.delete-confirm-modal .modal-log-del:hover {
    border-color: #934238;
    background: #934238;
    color: #fffdf8;
}

@media (max-width: 480px) {
    .modal-content.logus.delete-confirm-modal .modal-body { padding: 28px 20px 22px; }
    .modal-content.logus.delete-confirm-modal .action-delete { flex-direction: column-reverse; }
}

/* ===== GLOBAL STRUCTURE ===== */
.mobile-frame {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    width: 100% !important;
    max-width: 1280px;
    margin: 0 auto;
    background: transparent !important;
}

.page-content {
    flex: 1;
    width: 100%;
    padding: 20px 24px 100px !important; /* extra bottom padding for nav */
    overflow-y: auto;
}

/* Bottom navigation - keep it on mobile, hide on desktop */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 1280px;
    background: #FBF9F1 !important;
    border-top: 1px solid var(--border);
    box-shadow: 0 -2px 10px rgba(0,0,0,0.04);
    z-index: 100;
    padding: 10px 20px;
    height: auto !important;
}

/* ===== CHAT & GROUPS ===== */
.chat-item,
.group-card {
    background: var(--card) !important;
    border: 1px solid var(--border) !important;
    border-radius: 12px !important;
    padding: 12px 14px !important;
    margin-bottom: 10px;
}

.chat-name,
.group-title {
    color: var(--text) !important;
    font-weight: 600;
}

.join-btn,
.edit-btn {
    background: var(--primary) !important;
    border-radius: 999px !important;
    color: #fff !important;
    padding: 6px 14px !important;
    font-size: 13px;
}

.joined-btn {
    background: #e5e7eb !important;
    color: #6b7280 !important;
    border-radius: 999px !important;
}

/* ===== PAGE HEADERS ===== */
.post-detail-header {
    background: transparent !important;
    border-bottom: 1px solid var(--border);
    padding: 12px 0 !important;
}

.header-title {
    color: var(--text) !important;
    font-family: "Source Serif 4", Georgia, serif;
}

/* Hide desktop nav on auth pages */
    body.auth-page .bottom-nav {
        display: none !important;
    }

/* ===== MIRROR PROFILE AVATAR ===== */

.mirror-avatar {
    width: 50px;
    height: 50px;
    min-width: 50px;
    border-radius: 50%;
    object-fit: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.mirror-avatar-initial {
    background-color: var(--primary) !important;
    color: #FFFFFF !important;
    font-family: "DM Sans", Arial, sans-serif;
    font-size: 22px;
    font-weight: 600;
    line-height: 1;
    text-transform: uppercase;
}

.top-header .mirror-avatar,
.top-header .header-profile {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.top-header .mirror-avatar-initial {
    background: #0C4242 !important;
    color: #FFFFFF !important;
    font-size: 18px;
}
    
/* Bottom nav → becomes a proper desktop sidebar or top nav later.
   For now we hide it on larger screens and keep it only on mobile. */
@media (min-width: 992px) {
    .bottom-nav {
        display: none !important;
    }
}

/* Cards & buttons (Cobble style) */
.post-card,
.chat-item,
.group-card {
    background: var(--card) !important;
    border: 1px solid var(--border) !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 12px rgba(3, 83, 82, 0.04);
}

.general-btn,
.btn-success {
    background: var(--primary) !important;
    border: none !important;
    border-radius: 999px !important;
    font-weight: 600;
}

.general-btn:hover {
    background: #083333 !important;
}

/* Typography */
h1, h2, h3, .username, .stock-name {
    font-family: "Source Serif 4", Georgia, serif;
    color: var(--text);
    letter-spacing: -0.02em;
}

/* Stock colors */
.green { color: var(--green) !important; }
.red { color: var(--red) !important; }

.bottom-nav {
        display: none !important;
    }
    .page-content {
        padding-bottom: 40px !important;
    }

/* Floating action button positioning */
.floating-action {
    position: fixed;
    bottom: 90px;
    right: 24px;
    z-index: 99;
}

.bottom-nav {
    display: none !important;
}

@media (min-width: 992px) {
    .floating-action {
        bottom: 24px;
    }
}