/* ======================================= */
/* GroupGate+ CSS (v4 - Integrated Feeds) */
/* ======================================= */

/* --- Variables & Basic Reset --- */
:root {
    --bg-dark: #1a1d21;
    --bg-card: #2a2d31;
    --bg-input: #3a3d41;
    --bg-header: var(--bg-card);
    --bg-tab-active: var(--bg-dark);
    --bg-tab-inactive: var(--bg-card);
    --text-light: #e0e0e0;
    --text-secondary: #a0a0a0;
    --text-placeholder: #777;
    --accent-blue: #39C3FF;
    --accent-blue-darker: #00aeff;
    --accent-green: #4CAF50;
    --accent-orange: #FF9800;
    --danger-red: #ff4d4d;
    --danger-red-hover: rgba(255, 77, 77, 0.1);
    --border-color: #444;
    --border-color-light: #555;
    --font-family: 'Segoe UI', 'Inter', 'Open Sans', sans-serif;
    --border-radius: 8px;
    --border-radius-small: 4px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 16px; }
body {
    font-family: var(--font-family);
    background-color: var(--bg-dark);
    color: var(--text-light);
    overscroll-behavior: none;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    width: 100%;
}

/* --- App Container --- */
#app-container {
    width: 100%;
    max-width: 480px;
    height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: var(--bg-dark);
    border-left: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color);
    overflow: hidden;
}

/* --- Main Content Area --- */
#main-content {
    flex-grow: 1;
    position: relative;
    overflow: hidden; /* Changed from overflow-y: hidden */
    display: flex;
}

/* --- Top Level Pane Styling --- */
.app-pane {
    width: 100%;
    height: 100%;
    display: none; /* Hide by default */
    flex-direction: column;
    background-color: var(--bg-dark);
    overflow: hidden; /* Prevent pane itself from scrolling */
}
.app-pane.active-pane { display: flex; } /* Show active */

/* --- Headers --- */
.pane-header {
    padding: 12px 15px;
    background-color: var(--bg-header);
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 50px;
}
.pane-header h1, .pane-header h2 {
    font-size: 1.1rem; font-weight: 600; color: var(--text-light); text-align: center;
    flex-grow: 1; margin: 0 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Header Buttons (Back, Actions) */
.pane-header button { background: none; border: none; color: var(--accent-blue); font-size: 1rem; /* Adjusted default size */ cursor: pointer; padding: 5px; line-height: 1; transition: opacity 0.2s ease; }
.pane-header button:hover { opacity: 0.8; }
.pane-header .back-button { font-size: 0.9rem; font-weight: 500; padding: 5px 10px; /* More specific padding */ }
#create-edit-cg-post-pane .pane-header .back-button,
#create-edit-feed-post-pane .pane-header .back-button { color: var(--text-secondary); } /* Cancel looks different */
#create-edit-cg-post-pane .pane-header .back-button:hover,
#create-edit-feed-post-pane .pane-header .back-button:hover { color: var(--text-light); }
.header-action-button { /* Publish/Save buttons in header */
    background-color: var(--accent-blue); color: var(--bg-dark); border: none;
    padding: 6px 15px; border-radius: var(--border-radius-small); font-weight: 600;
    font-size: 0.9rem; cursor: pointer; transition: background-color 0.2s ease; margin-left: auto;
}
.header-action-button:hover { background-color: var(--accent-blue-darker); }
.header-action-button:disabled { background-color: var(--bg-input) !important; color: var(--text-secondary) !important; opacity: 0.6; cursor: not-allowed; }
.pane-header span { min-width: 30px; } /* Spacers */


/* ======================================= */
/* ====== Pane 1: Group List View ====== */
/* ======================================= */
#group-list-view .group-list { list-style: none; padding: 10px; overflow-y: auto; flex-grow: 1; }
.group-card { display: flex; align-items: center; background-color: var(--bg-card); padding: 12px 15px; margin-bottom: 8px; border-radius: var(--border-radius); cursor: pointer; transition: background-color 0.2s ease, box-shadow 0.2s ease; position: relative; overflow: hidden; }
.group-card:hover { background-color: #35383d; box-shadow: 0 0 10px rgba(57, 195, 255, 0.1); }
.group-icon { width: 45px; height: 45px; border-radius: 50%; background-color: var(--bg-input); margin-right: 15px; display: flex; justify-content: center; align-items: center; font-size: 1.5rem; font-weight: bold; color: var(--text-light); flex-shrink: 0; }
.group-icon.add-icon { background-color: transparent; border: 2px dashed var(--text-secondary); color: var(--text-secondary); font-weight: normal; }
.group-info { display: flex; flex-direction: column; overflow: hidden; flex-grow: 1; }
.group-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px; color: var(--text-light); }
.group-preview { font-size: 0.9rem; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.add-group-card .group-name { color: var(--text-secondary); font-weight: normal; }
.group-badge { position: absolute; top: 5px; right: 5px; font-size: 0.7rem; font-weight: bold; padding: 2px 6px; border-radius: var(--border-radius-small); color: var(--bg-dark); }
.group-badge.premium { background-color: var(--accent-orange); }


/* ======================================= */
/* ====== Pane 2: Selected Group View ====== */
/* ======================================= */

/* --- Main Group Tabs (Using Icons) --- */
.group-tabs {
    display: flex; background-color: var(--bg-header); border-bottom: 1px solid var(--border-color);
    flex-shrink: 0; overflow-x: auto; scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* IE/Edge */
}
.group-tabs::-webkit-scrollbar { display: none; } /* Chrome/Safari */
.group-tab-button {
    flex-grow: 1; /* Equal width */ flex-basis: 0; /* Allow shrinking/growing from 0 */
    padding: 10px 5px; /* Reduced horizontal padding */ background-color: var(--bg-tab-inactive);
    border: none; border-bottom: 3px solid transparent; color: var(--text-secondary);
    font-size: 1.3rem; /* Icon size */ font-weight: 500; cursor: pointer; text-align: center;
    transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
    line-height: 1.2; position: relative;
}
.group-tab-button i { display: block; margin: 0 auto; pointer-events: none; /* Clicks target button */ }
.group-tab-button:hover:not(.active) { color: var(--text-light); background-color: #35383d; }
.group-tab-button.active { color: var(--accent-blue); border-bottom-color: var(--accent-blue); background-color: var(--bg-tab-active); }

/* --- Group Pane Container & Panes --- */
.group-pane-container { flex-grow: 1; position: relative; overflow: hidden; }
.group-pane { width: 100%; height: 100%; display: none; flex-direction: column; background-color: var(--bg-dark); overflow: hidden; }
.group-pane.active-group-pane { display: flex; }
/* Scrollable content area within panes */
.group-pane > .pane-content { /* Target direct child */ padding: 15px; overflow-y: auto; flex-grow: 1; height: 100%; /* Ensure it can calculate height for scrolling */ }


/* --- Content Specific Panes (Chat, Members, ContentGate, Meetings, Settings) --- */
/* Chat */
#group-chat-pane { /* Structure already defined: message-list + message-input-area */ }
#message-list { flex-grow: 1; overflow-y: auto; padding: 15px 10px; display: flex; flex-direction: column; }
.message { max-width: 75%; padding: 8px 12px; border-radius: var(--border-radius); margin-bottom: 10px; word-wrap: break-word; }
.message .sender-name { font-size: 0.8rem; font-weight: 600; color: var(--accent-green); display: block; margin-bottom: 3px; }
.message .message-content { font-size: 1rem; line-height: 1.4; margin: 0; }
.message .timestamp { font-size: 0.75rem; color: var(--text-secondary); display: block; text-align: right; margin-top: 4px; }
.message.self { background-color: var(--accent-blue); color: var(--bg-dark); align-self: flex-end; margin-left: auto; }
.message.self .timestamp { color: rgba(0, 0, 0, 0.6); }
.message.self .sender-name { display: none; }
.message.other { background-color: var(--bg-card); color: var(--text-light); align-self: flex-start; margin-right: auto; }
.message-input-area { display: flex; padding: 10px; background-color: var(--bg-header); border-top: 1px solid var(--border-color); flex-shrink: 0; }
#message-input { flex-grow: 1; padding: 10px 15px; border: none; border-radius: var(--border-radius); background-color: var(--bg-input); color: var(--text-light); font-size: 1rem; margin-right: 10px; }
#message-input::placeholder { color: var(--text-placeholder); }
#message-input:focus { outline: none; box-shadow: 0 0 0 2px var(--accent-blue); }
#send-button { padding: 10px 20px; background-color: var(--accent-blue); color: var(--bg-dark); border: none; border-radius: var(--border-radius); cursor: pointer; font-weight: 600; transition: background-color 0.2s ease; }
#send-button:hover { background-color: var(--accent-blue-darker); }

/* Members */
#group-members-pane .pane-content h3 { /* Shared heading style */ margin-bottom: 15px; color: var(--accent-blue); font-size: 1rem; font-weight: 600; border-bottom: 1px solid var(--border-color); padding-bottom: 8px; }
#member-list { list-style: none; padding: 0; }
#member-list li { display: flex; align-items: center; justify-content: space-between; padding: 10px 5px; border-bottom: 1px solid var(--border-color-light); color: var(--text-light); }
#member-list li:last-child { border-bottom: none; }
.member-name { font-size: 0.95rem; font-weight: 500; }
.member-role { font-size: 0.8rem; color: var(--text-secondary); margin-left: 8px; background-color: var(--bg-input); padding: 2px 6px; border-radius: var(--border-radius-small); }
.member-role.admin { color: var(--accent-orange); font-weight: bold; }
.member-actions { margin-left: auto; padding-left: 10px; }
.member-actions .small-button { background: none; border: none; color: var(--text-secondary); font-size: 1.1rem; cursor: pointer; padding: 2px 4px; margin-left: 5px; }
.member-actions .small-button:hover { color: var(--accent-blue); }

/* ContentGate Pane */
#group-content-pane .pane-content h3 { margin-bottom: 15px; color: var(--accent-blue); /* ... rest of heading style */ }
#content-post-list { margin-top: 15px; }
.content-post-card { background-color: var(--bg-card); padding: 15px; border-radius: var(--border-radius); margin-bottom: 15px; cursor: pointer; transition: background-color 0.2s ease; border: 1px solid var(--border-color-light); } /* Added border */
.content-post-card:hover { background-color: #35383d; }
.content-post-card h4 { color: var(--text-light); margin-bottom: 5px; font-size: 1.1rem; }
.post-excerpt { font-size: 0.9rem; color: var(--text-secondary); margin-bottom: 10px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }
.post-meta { font-size: 0.8rem; color: var(--text-secondary); display: flex; align-items: center; flex-wrap: wrap; gap: 5px; margin-top: 10px; /* Added top margin */ }
.post-visibility { font-weight: bold; padding: 2px 6px; border-radius: var(--border-radius-small); color: var(--bg-dark); margin-left: 3px; /* Spacing */ }
.post-visibility.public { background-color: var(--accent-green); } .post-visibility.members { background-color: var(--accent-blue); } .post-visibility.paid { background-color: var(--accent-orange); } .post-visibility.gated { background-color: var(--text-secondary); } .post-visibility.unknown { background-color: #555; }

/* Meetings Pane */
#group-meetings-pane .pane-content h3 { /* Shared style */ }
#meeting-list { margin-top: 15px; }
.meeting-card { background-color: var(--bg-card); padding: 15px; border-radius: var(--border-radius); margin-bottom: 15px; border: 1px solid var(--border-color-light); }
.meeting-card h5 { color: var(--text-light); margin-bottom: 8px; font-size: 1.05rem; }
.meeting-card p { font-size: 0.9rem; color: var(--text-secondary); margin-bottom: 10px; }
.join-meeting-button { display: inline-block; background-color: var(--accent-green); color: var(--bg-dark); border: none; padding: 8px 15px; border-radius: var(--border-radius); font-weight: 600; font-size: 0.9rem; cursor: pointer; transition: background-color 0.2s ease; }
.join-meeting-button:hover { background-color: #45a049; }

/* Settings Pane */
#group-settings-pane .pane-content h3 { margin-bottom: 20px; color: var(--accent-blue); /* ... */ }
#group-settings-pane .pane-content h4 { font-size: 0.9rem; color: var(--text-secondary); font-weight: 600; margin-bottom: 15px; margin-top: 20px; text-transform: uppercase; letter-spacing: 0.5px; border-top: 1px solid var(--border-color); padding-top: 20px; }
#group-settings-pane .pane-content h4:first-of-type { margin-top: 0; border-top: none; padding-top: 0; } /* No top border/margin for first h4 */
#group-settings-pane .pane-content h5 { /* Sub-sub headings like TrustGate Controls */ font-size: 0.85rem; margin-top: 15px; margin-bottom: 10px; color: var(--text-secondary); }
.settings-section { margin-bottom: 15px; }
.setting-item { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; margin-bottom: 15px; font-size: 0.95rem; padding: 5px 0; }
.setting-item label { color: var(--text-light); margin-right: 10px; flex-basis: 45%; flex-grow: 1; } /* Ensure label text is light */
.setting-item p { margin-bottom: 5px; width: 100%; } /* Ensure paragraphs take full width if needed */
.settings-input, .settings-textarea, .settings-select { background-color: var(--bg-input); color: var(--text-light); border: 1px solid var(--border-color-light); border-radius: var(--border-radius-small); padding: 8px 10px; font-size: 0.9rem; flex-basis: 50%; flex-grow: 1; max-width: 100%; /* Allow full width on mobile */ }
@media (min-width: 400px) { .settings-input, .settings-textarea, .settings-select { max-width: 60%; } /* Restrict width on larger screens */ } /* Responsive control width */
.settings-input:focus, .settings-textarea:focus, .settings-select:focus { outline: none; border-color: var(--accent-blue); box-shadow: 0 0 0 1px var(--accent-blue); }
.settings-textarea { resize: vertical; min-height: 60px; }
.settings-input.short, .settings-select.short { flex-basis: auto; flex-grow: 0; max-width: 80px; text-align: right; margin: 0 5px; }
.placeholder-toggle { display: inline-block; padding: 4px 10px; background-color: var(--bg-input); color: var(--text-secondary); border-radius: 12px; font-size: 0.85rem; font-weight: 500; border: 1px solid var(--border-color-light); cursor: pointer; }
.placeholder-toggle.active { background-color: var(--accent-green); color: var(--bg-dark); border-color: var(--accent-green); }
.settings-section code { background-color: var(--bg-input); padding: 3px 6px; border-radius: var(--border-radius-small); font-family: monospace; border: 1px solid var(--border-color-light); }
.inline-button { background: none; border: 1px solid var(--accent-blue); color: var(--accent-blue); padding: 3px 8px; font-size: 0.8rem; border-radius: var(--border-radius-small); margin-left: 8px; cursor: pointer; vertical-align: middle; }
.inline-button:hover { background-color: rgba(57, 195, 255, 0.1); }
.danger-zone h4 { color: var(--danger-red); border-top-color: var(--danger-red); } /* Match border */
.danger-button { background-color: transparent; border: 1px solid var(--danger-red); color: var(--danger-red); padding: 10px 15px; border-radius: var(--border-radius); cursor: pointer; width: 100%; text-align: center; margin-top: 10px; font-weight: 600; transition: background-color 0.2s ease, color 0.2s ease; }
.danger-button:hover:not(:disabled) { background-color: var(--danger-red-hover); }
/* Disabled styles */
button:disabled, .settings-section button[disabled] { background-color: var(--bg-input) !important; color: var(--text-secondary) !important; border-color: var(--text-secondary) !important; cursor: not-allowed; opacity: 0.6; }
.danger-button:disabled { background-color: transparent !important; border-color: var(--text-secondary) !important; color: var(--text-secondary) !important; }
.action-button:disabled { background-color: var(--bg-input) !important; color: var(--text-secondary) !important; }


/* ======================================= */
/* ====== Feed Pane Styles (v4) ====== */
/* ======================================= */
#group-feed-pane { display: flex; flex-direction: column; } /* Ensure flex layout */

/* Feed Sub-Navigation */
.feed-sub-nav { display: flex; justify-content: flex-start; /* Align tabs left */ align-items: center; padding: 5px 10px; /* Adjusted padding */ background-color: var(--bg-card); border-bottom: 1px solid var(--border-color); flex-shrink: 0; gap: 5px; /* Space between buttons */ }
.feed-type-button { background: none; border: none; color: var(--text-secondary); font-size: 1.4rem; padding: 8px 12px; /* Larger tap area */ cursor: pointer; transition: color 0.2s ease, border-bottom-color 0.2s ease; border-bottom: 3px solid transparent; line-height: 1; }
.feed-type-button:hover:not(.active) { color: var(--text-light); }
.feed-type-button.active { color: var(--accent-blue); border-bottom-color: var(--accent-blue); }
.feed-create-button { /* Create (+) button */ padding: 6px 10px; font-size: 1.1rem; margin-left: auto; background-color: transparent; color: var(--accent-blue); border: 1px solid var(--accent-blue); border-radius: 50%; line-height: 1; cursor: pointer; transition: background-color 0.2s ease; }
.feed-create-button:hover { background-color: rgba(57, 195, 255, 0.1); }

/* Feed Content Area */
.feed-content-container { flex-grow: 1; overflow-y: auto; position: relative; padding: 10px; }
.feed-content { display: none; } /* Hide inactive feed types */
.feed-content.active-feed { display: block; } /* Show active feed type */

/* General Feed Post Styling */
.feed-post { background-color: var(--bg-card); border-radius: var(--border-radius-small); padding: 12px 15px; margin-bottom: 10px; border: 1px solid var(--border-color-light); }
/* Text Post Specifics */
.text-post .post-author-info { font-size: 0.8rem; color: var(--text-secondary); margin-bottom: 8px; }
.text-post .post-text-content { font-size: 0.95rem; line-height: 1.5; margin-bottom: 10px; white-space: pre-wrap; }
.text-post .post-actions { font-size: 0.8rem; color: var(--text-secondary); margin-top: 10px; }
/* Video Post Placeholder */
.video-post-placeholder { min-height: 300px; display: flex; align-items: center; justify-content: center; font-style: italic; color: var(--text-secondary); border-radius: var(--border-radius-small); background-color: #222; } /* Darker placeholder bg */
/* Audio Post Specifics */
.audio-post .post-author-info { font-size: 0.8rem; color: var(--text-secondary); margin-bottom: 8px; }
.audio-player-placeholder { background-color: var(--bg-input); padding: 10px 15px; border-radius: var(--border-radius-small); font-size: 0.9rem; color: var(--text-light); display: flex; align-items: center; justify-content: center; min-height: 50px; }


/* ======================================= */
/* ====== View/Create Post Panes (CG) ====== */
/* ======================================= */
/* Use #view-cg-post-pane, #create-edit-cg-post-pane */
.view-post-container h3, /* Reuse for CG view title */
#view-cg-post-pane h3 { font-size: 1.5rem; color: var(--text-light); margin-bottom: 5px; line-height: 1.3; }
.view-post-container .post-meta, /* Reuse for CG meta */
#view-cg-post-pane .post-meta { margin-bottom: 15px; font-size: 0.85rem; color: var(--text-secondary); }
.view-post-container hr, #view-cg-post-pane hr { margin: 20px 0; border: none; border-top: 1px solid var(--border-color); }
.post-media-area, .post-content-text { margin-bottom: 25px; }
.post-media-area h4, .post-content-text h4 { font-size: 0.9rem; color: var(--text-secondary); font-weight: 600; margin-bottom: 10px; text-transform: uppercase; letter-spacing: 0.5px; }
.video-embed-placeholder, .audio-embed-placeholder { background-color: var(--bg-input); min-height: 150px; display: flex; justify-content: center; align-items: center; color: var(--text-secondary); border-radius: var(--border-radius); font-style: italic; border: 1px dashed var(--border-color-light); }
.video-embed-placeholder { min-height: 200px; } .audio-embed-placeholder { min-height: 60px; }
#view-cg-post-content-area #view-cg-post-text { /* Specific ID if needed */ font-size: 1rem; line-height: 1.6; color: var(--text-light); white-space: pre-wrap; word-wrap: break-word; }
#view-cg-post-content-area #view-cg-post-text p { margin-bottom: 1em; } #view-cg-post-content-area #view-cg-post-text p:last-child { margin-bottom: 0; }
#view-cg-post-pane #cg-post-comments-section { margin-top: 30px; } #view-cg-post-pane #cg-post-comments-section h4 { font-size: 1rem; color: var(--text-secondary); margin-bottom: 10px; }

/* Create/Edit CG Post Pane */
.create-post-container { /* Reuse class */ }
#create-edit-cg-post-form .form-section { margin-bottom: 25px; }
#create-edit-cg-post-form label { display: block; margin-bottom: 8px; color: var(--text-light); font-weight: 500; font-size: 0.9rem; } /* Lighter label */
#create-edit-cg-post-form label:after { content: ' *'; color: var(--danger-red); }
#create-edit-cg-post-form label[for="cg-post-content-input"]:after,
#create-edit-cg-post-form label[for="cg-post-video-url"]:after,
#create-edit-cg-post-form label[for="cg-post-audio-url"]:after { content: ''; } /* Hide * for optional */
/* Use general input styles defined for settings */
#create-edit-cg-post-form .settings-input,
#create-edit-cg-post-form .settings-textarea,
#create-edit-cg-post-form .settings-select { width: 100%; max-width: 100%; } /* Ensure full width in this pane */
#create-edit-cg-post-pane hr { margin: 30px 0; border-color: var(--border-color-light); }


/* ======================================= */
/* ====== Bottom Navigation ====== */
/* ======================================= */
#bottom-nav { display: flex; border-top: 1px solid var(--border-color); background-color: var(--bg-header); flex-shrink: 0; }
.nav-button {
    flex-grow: 1; flex-basis: 0; padding: 8px 5px; background: none; border: none;
    color: var(--text-secondary); font-size: 0.75rem; font-weight: 500; cursor: pointer;
    text-align: center; transition: color 0.2s ease, border-top-color 0.2s ease;
    border-top: 3px solid transparent; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
}
.nav-button i { font-size: 1.4rem; margin-bottom: 2px; line-height: 1; pointer-events: none; }
.nav-button:disabled { color: #666 !important; cursor: not-allowed; border-top-color: transparent !important; opacity: 0.5; }
.nav-button.active { color: var(--accent-blue); font-weight: 600; border-top-color: var(--accent-blue); }
.nav-button:hover:not(.active):not(:disabled) { color: var(--text-light); }


/* --- Utility Classes --- */
.hidden { display: none !important; }

/* --- Basic Responsiveness --- */
@media (min-width: 768px) { #app-container { max-width: 480px; /* Keep constrained for demo */ box-shadow: 0 0 20px rgba(0,0,0,0.3); } }