/* --- Root Variables for Forest Theme --- */
:root {
    --font-family-main: 'Segoe UI', 'Roboto', 'Noto Sans', sans-serif; /* Clean sans-serif */

    /* Forest Palette */
    --color-bg-main: #F8F6F0;          /* Light, airy, off-white with a hint of warmth/nature */
    --color-bg-panel: #FFFFFF;         /* Panels slightly brighter for contrast */
    --color-bg-panel-alt: #EAE8E0;     /* Alternative panel bg, slightly darker for depth */
    --color-text-primary: #3D352A;     /* Deep, earthy brown-gray for main text */
    --color-text-secondary: #7A7061;   /* Softer brown-gray for secondary text/placeholders */
    --color-accent-forest: #4A6B54;    /* Muted, deep forest green */
    --color-accent-moss: #6F8C5A;      /* Lighter, mossy green for highlights/interactive elements */
    --color-border-subtle: #DCD9CF;    /* Very subtle border color */
    --color-shadow: rgba(61, 53, 42, 0.08); /* Soft shadow color */
    --color-file-progress-bg: #E0E0E0;
    --color-file-progress-fill: var(--color-accent-moss);


    /* Spacing & Radius */
    --spacing-unit: 8px;
    --border-radius-sm: 4px;
    --border-radius-md: 6px;

    /* Transitions */
    --transition-fast: 0.15s ease-in-out;
    --transition-smooth: 0.25s ease-in-out;

    /* Derived colors for rgba shadows (optional, but good for consistency) */
    --color-accent-moss-rgb: 111, 140, 90; /* From #6F8C5A */
    --color-accent-forest-rgb: 74, 107, 84; /* From #4A6B54 */
}

/* --- Global Resets & Base Styles --- */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Custom Scrollbar Styles */
*::-webkit-scrollbar {
    width: var(--spacing-unit); /* Using spacing unit for width */
    height: var(--spacing-unit);
}
*::-webkit-scrollbar-track {
    background: transparent; /* Or var(--color-bg-panel-alt); */
}
*::-webkit-scrollbar-thumb {
    background-color: var(--color-border-subtle);
    border-radius: calc(var(--spacing-unit) * 2); /* Very rounded */
    border: calc(var(--spacing-unit) / 4) solid transparent; /* Creates padding around thumb */
    background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover {
    background-color: var(--color-text-secondary);
}


html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-family-main);
    line-height: 1.6;
    color: var(--color-text-primary);
    background-color: var(--color-bg-main);
    display: flex;
    justify-content: center; /* Center the main container horizontally */
    align-items: center;    /* Center the main container vertically */
    min-height: 100vh;      /* Ensure body takes at least full viewport height */
    padding: calc(var(--spacing-unit) * 2); /* Some padding around the app */
    overflow: hidden; /* Prevent body scroll, app will handle its own */
}

/* --- Main Application Container --- */
main {
    width: 100%;
    max-width: 800px; /* Max width for the app */
    height: calc(100vh - calc(var(--spacing-unit) * 4)); /* Full height minus body padding */
    display: flex;
    flex-direction: column;
    border-radius: var(--border-radius-md);
    box-shadow: 0 calc(var(--spacing-unit) / 2) calc(var(--spacing-unit) * 2) var(--color-shadow);
    overflow: hidden; /* Important for child flex containers */
}

/* --- Header --- */
#app-header {
    padding: calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 3);
    flex-shrink: 0;
	background-color: var(--color-bg-panel);
    border-bottom: 1px solid var(--color-border-subtle); /* Added border */
}

#app-header h1 {
    font-size: 1.5rem; /* 24px */
    color: var(--color-accent-forest);
    font-weight: 600;
    margin-bottom: calc(var(--spacing-unit) / 2);
}

#status-message {
    font-size: 0.875rem; /* 14px */
    color: var(--color-text-secondary);
    min-height: 1.5em; /* Ensures consistent height even when empty */
}
.status-info { color: var(--color-text-secondary); }
.status-success { color: var(--color-accent-moss); font-weight: 500; }
.status-warning { color: #D97706; /* Amber for warning */ font-weight: 500; }
.status-error { color: #DC2626; /* Red for error */ font-weight: 500; }


/* --- Username Setup Area (PeerID Setup) --- */
#username-setup-area { /* Renamed for clarity if username is PeerID */
    padding: calc(var(--spacing-unit) * 3);
    border-bottom: 1px solid var(--color-border-subtle);
	background-color: var(--color-bg-panel);
}
#username-setup-area p {
    margin-bottom: var(--spacing-unit);
}
.control-group { /* Generic style for grouping form controls/buttons */
    display: flex;
    gap: var(--spacing-unit);
    align-items: center;
}
.control-group .form-control {
    flex-grow: 1; /* Allows input to take available space */
}


/* --- Content Area (Wraps User and Chat Panels) --- */
.content {
    display: flex;
    flex-grow: 1;
    overflow: hidden; /* Key for internal scrolling panels */
}

/* --- User Panel (Left) --- */
.user {
    width: 280px; /* Slightly narrower for a sleeker look */
    flex-shrink: 0;
    padding: calc(var(--spacing-unit) * 2);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    border-right: 1px solid var(--color-border-subtle); /* Separator */
    background-color: var(--color-bg-panel); /* Explicit background */
}

#user-controls-area,
/* #new-message-notifications-panel, REMOVED as notifications will be per-chat or simpler */
#user-search-area {
    background-color: transparent; 
    padding: 0; 
    box-shadow: none; 
    margin-bottom: var(--spacing-unit);
}
#user-search-area {
    margin-top: calc(var(--spacing-unit) * 2); 
}


/* Style for elements inside user-controls-area */
#user-controls-area p {
    display: flex;
    flex-wrap: wrap; 
    gap: var(--spacing-unit); 
    align-items: center;
    margin-bottom: 0; 
}
#user-controls-area strong {
    color: var(--color-accent-forest);
}
#user-controls-area .btn,
#user-controls-area .form-control { /* chatPasswordInput is removed */
    width: auto; /* Let buttons size naturally */
    flex-grow: 1; /* Allow buttons/inputs to grow if in a flex row */
}
#user-controls-area #changeUsernameButton {
    width: auto;
    flex-grow: 0;
}
#user-controls-area #logoutButton {
    width: auto;
    flex-grow: 0;
    margin-left: auto; /* Push logout to the right */
}
/* #chatPasswordInput and #showMyInfoButton are removed from user-controls-area as P2P changes their roles */


/* --- Chat Panel (Right) --- */
.chat {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    background-color: var(--color-bg-panel); /* Explicit background */
}

#chat-partner-area {
    padding: var(--spacing-unit) calc(var(--spacing-unit) * 2);
    font-weight: 500;
    color: var(--color-text-primary);
    flex-shrink: 0;
    border-bottom: 1px solid var(--color-border-subtle);
    display: flex; /* For connection status icon */
    align-items: center;
    gap: var(--spacing-unit);
}
#chat-partner-area #current-chat-partner-name {
    color: var(--color-accent-forest);
    font-style: italic;
}
#connection-status-icon {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: var(--color-text-secondary); /* Default: disconnected */
    display: inline-block;
}
#connection-status-icon.connected {
    background-color: var(--color-accent-moss); /* Green for connected */
}
#connection-status-icon.connecting {
    background-color: #D97706; /* Amber for connecting */
    animation: pulse 1.5s infinite ease-in-out;
}
@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}


#chat-container {
    flex-grow: 1;
    padding: calc(var(--spacing-unit) * 2);
    overflow-y: auto;
    display: flex;
    flex-direction: column-reverse; /* Keeps newest messages at bottom */
}
#chat { /* Direct parent of messages within chat-container */
    display: flex;
    flex-direction: column;
    gap: var(--spacing-unit);
}


/* --- Messages --- */
.message {
    padding: var(--spacing-unit) calc(var(--spacing-unit) * 1.5);
    border-radius: var(--border-radius-md);
    max-width: 75%;
    word-wrap: break-word;
    line-height: 1.4;
    box-shadow: 0 1px 2px var(--color-shadow);
    font-size: 0.9rem;
}
.message-header {
    font-size: 0.75em;
    color: var(--color-text-secondary);
    margin-bottom: calc(var(--spacing-unit) * 0.25);
}
.message-header small {
    margin-left: var(--spacing-unit);
}

.message.sent {
    align-self: flex-end;
    background-color: var(--color-accent-forest);
    color: #FFFFFF;
    border-bottom-right-radius: var(--border-radius-sm); 
}
.message.sent .message-header {
    color: rgba(255, 255, 255, 0.8);
}

.message.received {
    align-self: flex-start;
    background-color: var(--color-bg-panel-alt);
    color: var(--color-text-primary);
    border-bottom-left-radius: var(--border-radius-sm);
}

/* Message content specific for files/images */
.message-content img {
    max-width: 100%;
    max-height: 250px;
    border-radius: var(--border-radius-sm);
    cursor: pointer; /* To open in full view, perhaps */
    margin-top: calc(var(--spacing-unit) / 2);
}
.file-transfer {
    display: flex;
    align-items: center;
    gap: var(--spacing-unit);
    padding: calc(var(--spacing-unit) / 2) 0;
}
.file-icon {
    font-size: 1.5rem; /* Adjust as needed */
    color: var(--color-accent-forest);
}
.file-info p { margin: 0; }
.file-info small { color: var(--color-text-secondary); }
.file-progress-bar {
    width: 100%;
    height: 8px;
    background-color: var(--color-file-progress-bg);
    border-radius: 4px;
    overflow: hidden;
    margin-top: calc(var(--spacing-unit) / 2);
}
.file-progress-bar div {
    height: 100%;
    width: 0%; /* Controlled by JS */
    background-color: var(--color-file-progress-fill);
    transition: width 0.1s linear;
}
.file-actions button {
    font-size: 0.8rem;
    padding: calc(var(--spacing-unit)*0.5) var(--spacing-unit);
    margin-top: calc(var(--spacing-unit) / 2);
}


/* --- Input Area --- */
#input-area {
    display: flex;
    flex-shrink: 0;
    padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 2);
    border-top: 1px solid var(--color-border-subtle);
}

.message-input-wrapper {
    flex-grow: 1; 
    display: flex;
    flex-direction: column; 
    background-color: var(--color-bg-panel); 
    border: 1px solid var(--color-border-subtle); 
    border-radius: var(--border-radius-md); 
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    padding: var(--spacing-unit); 
    min-height: calc(var(--spacing-unit) * 8); 
    box-shadow: 0 1px 2px var(--color-shadow); 
}
.message-input-wrapper:focus-within {
    border-color: var(--color-accent-moss);
    outline: 0; 
    box-shadow: 0 0 0 0.2rem rgba(var(--color-accent-moss-rgb), 0.25);
}

#message {
    flex-grow: 1; 
    width: 100%; 
    min-height: calc(var(--spacing-unit) * 3); 
    max-height: 120px; 
    resize: none; 
    border: none; 
    background: transparent; 
    padding: 0; 
    outline: none; 
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--color-text-primary);
}
#message::placeholder {
    color: var(--color-text-secondary);
    opacity: 0.8;
}

.input-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: calc(var(--spacing-unit) * 0.5);
    padding-top: calc(var(--spacing-unit) * 0.5);
    flex-shrink: 0; 
}

.icon-btn {
    background: none; 
    border: none; 
    padding: calc(var(--spacing-unit) * 0.5); 
    cursor: pointer;
    display: flex; 
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius-sm);
    transition: background-color var(--transition-fast), color var(--transition-fast);
    color: var(--color-text-secondary);
    flex-shrink: 0; 
}
.icon-btn:hover:not(:disabled) {
    background-color: var(--color-bg-panel-alt); 
    color: var(--color-accent-moss); 
}
.icon-btn:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(var(--color-accent-moss-rgb), 0.25); 
}
.icon-btn svg {
    width: 20px; 
    height: 20px;
    display: block; 
}

.send-btn {
    color: var(--color-accent-forest); 
    padding: calc(var(--spacing-unit) * 0.75); 
}
.send-btn:hover:not(:disabled) {
    background-color: var(--color-accent-forest); 
    color: #FFFFFF; 
}
.send-btn:disabled {
    color: var(--color-border-subtle); 
    cursor: not-allowed;
    background: none;
    box-shadow: none; 
}

.separator {
    width: 1px;
    height: 24px; 
    background-color: var(--color-border-subtle);
    margin: 0 calc(var(--spacing-unit) * 0.5); 
    flex-shrink: 0; 
}

#file-input-label { /* For styling the file input trigger */
    position: relative;
    overflow: hidden;
    display: inline-block; /* or flex if needed */
}
#file-input-label input[type="file"] {
    position: absolute;
    font-size: 100px; /* Make it large to cover the button */
    left: 0;
    top: 0;
    opacity: 0; /* Make it invisible */
    cursor: pointer;
}


/* --- Footer --- */
#app-footer {
    padding: var(--spacing-unit) calc(var(--spacing-unit) * 3);
    text-align: center;
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    flex-shrink: 0;
    border-top: 1px solid var(--color-border-subtle);
	background-color: var(--color-bg-panel);
}

/* --- Form Controls & Buttons --- */
.form-control {
    padding: var(--spacing-unit) calc(var(--spacing-unit) * 1.5);
    font-size: 0.9rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--color-text-primary);
    background-color: var(--color-bg-panel);
    background-clip: padding-box;
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--border-radius-sm);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    width: 100%;
}
.form-control:focus {
    border-color: var(--color-accent-moss);
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(var(--color-accent-moss-rgb), 0.25);
}
.form-control::placeholder {
    color: var(--color-text-secondary);
    opacity: 0.8;
}

.btn {
    display: inline-block;
    font-weight: 500;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    border: 1px solid var(--color-accent-forest);
    color: var(--color-accent-forest);
    padding: var(--spacing-unit) calc(var(--spacing-unit) * 2);
    font-size: 0.9rem;
    line-height: 1.5;
    border-radius: var(--border-radius-sm);
    transition: background-color var(--transition-smooth), color var(--transition-smooth), border-color var(--transition-smooth);
}
.btn:hover:not(:disabled) {
    background-color: var(--color-accent-forest);
    color: #FFFFFF;
}
.btn:focus {
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(var(--color-accent-forest-rgb), 0.35);
}
.btn:disabled {
    background-color: var(--color-bg-panel-alt);
    border-color: var(--color-border-subtle);
    color: var(--color-text-secondary);
    opacity: 0.7;
    cursor: not-allowed;
}

/* --- User Search Results --- */
#search-results {
    max-height: 200px; 
    overflow-y: auto;
    background-color: var(--color-bg-panel); 
    border-radius: var(--border-radius-sm); 
    border: 1px solid var(--color-border-subtle); 
    margin-top: calc(var(--spacing-unit) / 2); 
}
.search-result-item {
    padding: var(--spacing-unit) calc(var(--spacing-unit) * 1.5);
    cursor: pointer;
    border-bottom: 1px solid var(--color-border-subtle);
    transition: background-color var(--transition-fast);
    font-size: 0.85rem;
}
.search-result-item:last-child {
    border-bottom: none;
}
.search-result-item:first-child {
    border-top-left-radius: var(--border-radius-sm); 
    border-top-right-radius: var(--border-radius-sm);
}
.search-result-item:last-child {
    border-bottom-left-radius: var(--border-radius-sm);
    border-bottom-right-radius: var(--border-radius-sm);
}
.search-result-item:hover {
    background-color: var(--color-bg-panel-alt);
}
#search-results p { /* For "未找到用户." message */
    padding: var(--spacing-unit) calc(var(--spacing-unit) * 1.5);
    color: var(--color-text-secondary);
    font-style: italic;
    margin: 0; 
}


/* --- QR Code Modal (REMOVED - P2P sharing is direct via PeerID) --- */
/* #qr-modal { ... } */

/* --- Responsive Adjustments --- */
@media (max-width: 768px) {
    body {
        padding: 0; 
        align-items: flex-start; 
    }
    main {
        max-width: 100%;
        height: 100vh; 
        border-radius: 0; 
        box-shadow: none;
    }

    .content {
        flex-direction: column; 
    }

    .user {
        width: 100%;
        max-height: 40vh; /* Adjusted max-height slightly */
        border-right: none; 
        border-bottom: 1px solid var(--color-border-subtle); 
    }
    #user-controls-area p {
        flex-direction: row; 
        justify-content: flex-start; 
    }
    /* Button sizing in user controls already adjusted */

    #chat-container {
        padding: var(--spacing-unit); 
    }
    #input-area {
        padding: var(--spacing-unit); 
    }
    .message {
        max-width: 90%; 
    }
}