/* thread.css */
/* --- CSS Variables (Colors) --- */
:root {
    --color-background-body: #e9ebed;
    --color-text-primary: #333;
    --color-text-secondary: #555;
    --color-text-muted: #666;
    --color-text-light: #777;
    --color-text-meta: #607d8b;
    --color-text-heading: #2c3e50;
    --color-text-subheading: #34495e;
    --color-link-primary: #2980b9;
    --color-link-hover: #1f618d;
    --color-white: #ffffff;
    --color-light-gray: #f8f9fa;
    --color-border-light: #e0e0e0;
    --color-border-medium: #dcdfe3;
    --color-border-dark: #ccc;
    --color-border-soft: #eee;
    --color-primary-button: #2e9e22;
    --color-primary-button-hover: #218838;
    --color-secondary-button: #6c757d;
    --color-secondary-button-hover: #5a6268;
    --color-danger: #e74c3c;
    --color-danger-hover: #c0392b;
    --color-focus-border: #a0cffc;
    --color-edit-button: #3498db;
    --color-edit-button-hover: #2980b9;
    --color-save-button: #2ecc71;
    --color-save-button-hover: #27ae60;
}

/* General Forum Container & Layout (for thread.php) */
.thread-container {
    max-width: 1200px; /* Much wider max-width for the thread page */
    margin: 2rem auto;
    padding: 0 1.5rem; /* Padding only on sides, content blocks will have their own */
    background-color: transparent; /* Make the container transparent to let body background show */
    border-radius: 0; /* No border-radius on main container */
    /* No box-shadow */
}

/* Back to Forum Button - Positioned to the side on larger screens */
.back-to-forum {
    display: block; /* Default to block on smaller screens */
    margin-bottom: 1.5rem;
    padding: 0.7rem 1.4rem;
    background-color: var(--color-secondary-button);
    color: var(--color-white);
    text-decoration: none;
    border-radius: 16px; /* Consistent border-radius */
    font-size: 0.9rem;
    transition: background-color 0.3s ease;
    width: fit-content; /* Make button only as wide as its content */
}

.back-to-forum:hover {
    background-color: var(--color-secondary-button-hover);
}

/* Thread Header (Main Post) Styling */
.thread-header {
    background-color: var(--color-white); /* White background for the post itself */
    border: 1px solid var(--color-border-medium); /* Subtle border for definition */
    border-radius: 16px;
    padding: 1.5rem 2rem; /* Reduced vertical, slightly more horizontal padding */
    margin-bottom: 1rem; /* More space below header */
    width: 100%; /* Take full width of its parent */
    box-sizing: border-box; /* Include padding and border in width */
    position: relative; /* ADD THIS for like animation */
    overflow: hidden; /* Important for animation to not spill out */
}

.thread-header-title {
  font-size: 2rem;
  margin: 0 0 0.5rem;
  color: var(--color-text-heading);
  font-weight: 700;
}

.thread-header h2 { /* Fallback/legacy if .thread-header-title is not used */
    margin: 0 0 0.6rem 0; /* Adjusted margin */
    font-size: 1.6rem; /* Smaller heading */
    color: var(--color-text-heading); /* Use variable */
    text-align: left;
    font-weight: 600;
}

.thread-header .meta {
    font-size: 0.8rem; /* Smaller meta font */
    color: var(--color-text-meta); /* Use variable */
    margin-bottom: 0.6rem; /* Reduced margin */
}

/* Content paragraph */
.thread-header p:not(.meta):not(.counts):not(.tag-line) { /* Added :not(.tag-line) */
    font-size: 0.95rem; /* Slightly smaller content font */
    margin-bottom: 0.8rem; /* Adjusted margin */
    color: var(--color-text-primary); /* Slightly darker content text */
}

.thread-header-image img {
    max-width:100%;
    border-radius:16px;
    display:block; /* This is already present */
    margin:0.8rem auto; /* Change this line to use auto for horizontal centering */
}

/* Reply Styling */
.reply {
    background-color: var(--color-white); /* White for replies */
    border: 1px solid var(--color-border-medium); /* Subtle border for definition */
    border-radius: 16px;
    padding: 1rem 1.5rem; /* Further reduced padding */
    margin-bottom: 0.8rem; /* Reduced margin between replies */
    width: 100%; /* Take full width */
    box-sizing: border-box;
    position: relative; /* ADD THIS for like animation */
    overflow: hidden; /* Important for animation to not spill out */
}

.reply .meta {
    font-size: 0.75rem; /* Even smaller meta font for replies */
    color: var(--color-text-meta); /* Use variable */
    margin-bottom: 0.5rem; /* Reduced margin */
}

.reply p:not(.meta) { /* Content paragraph of replies */
    font-size: 0.9rem; /* Slightly smaller content font for replies */
    margin-bottom: 0.6rem; /* Reduced margin */
    color: var(--color-text-primary); /* Use variable */
}

/* Like Button Styling */
.like-container {
    display: flex;
    align-items: center;
    gap: 3px; /* Even less space */
    margin-top: 0.6rem; /* Reduced margin-top */
}

.like-button {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    color: var(--color-text-meta); /* Use a more neutral color for non-liked */
    transition: color 0.2s ease-in-out;
}

.like-button .heart-icon {
    font-size: 1.2rem; /* Slightly smaller heart icon */
}

.like-button.liked .heart-icon {
    color: var(--color-danger); /* Use danger color for liked heart */
}

.like-count {
    font-size: 0.85rem; /* Smaller like count font */
    color: var(--color-text-meta); /* CHANGED to match comment number */
    font-weight: 500;
}

/* Add Reply Form */
.add-reply-section {
    margin-top: 2rem;
    background-color: var(--color-white); /* White background for the form */
    border: 1px solid var(--color-border-medium); /* Subtle border */
    border-radius: 16px;
    padding: 1.5rem 2rem; /* Reduced padding */
    width: 100%; /* Take full width */
    box-sizing: border-box;
}

.add-reply-section h3 {
    font-size: 1.5rem; /* Smaller heading */
    color: var(--color-text-subheading); /* Use variable */
    margin-bottom: 1rem; /* Reduced margin */
    font-weight: 600;
}

.reply-form textarea {
    width: 100%;
    height: 100px; /* Even shorter textarea */
    padding: 0.7rem; /* Reduced padding */
    border: 1px solid var(--color-border-light); /* Subtle border for text area */
    border-radius: 16px; /* Consistent border-radius for inputs */
    font-size: 0.9rem; /* Smaller font */
    box-sizing: border-box;
    background-color: var(--color-light-gray); /* Very light background for contrast */
    resize: vertical;
    transition: border-color 0.3s ease, background-color 0.3s ease;
}

.reply-form textarea:focus {
    outline: none;
    border-color: var(--color-focus-border); /* Light blue border on focus */
    background-color: var(--color-white); /* White background on focus */
}

.reply-form button {
    display: inline-block;
    background-color: var(--color-primary-button); /* Use primary button color */
    color: var(--color-white);
    padding: 0.7rem 1.6rem; /* Reduced padding */
    border: none;
    border-radius: 16px; /* Consistent button radius */
    font-size: 0.95rem; /* Smaller font */
    font-weight: bold;
    cursor: pointer;
    margin-top: 1rem; /* Reduced margin */
    transition: background-color 0.3s ease;
}

.reply-form button:hover {
    background-color: var(--color-primary-button-hover); /* Use primary button hover color */
}

/* Reply Count with Comment Symbol for Main Thread Header */
.thread-header .counts {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 1rem; /* Reduced margin-top */
    color: var(--color-text-meta); /* Use variable */
    font-size: 0.9rem; /* Slightly smaller font */
}

.thread-header .count-item {
    display: flex;
    align-items: center;
    gap: 3px; /* Less space between icon and number */
}

.thread-header .count-item.comments-link { /* Apply comments-link styles here too */
    position: relative; /* Enable positioning */
    top: 4px; /* Move down by 4 pixels */
    font-size: 0.9em; /* Base font size for text, adjusted for the whole group */
}

.thread-header .count-item .count-icon { /* Specific icon for main thread counts */
    font-size: 1.25em; /* Slightly larger than its parent for emphasis (from .thread-item-stats-item.comments-link .thread-item-stats-icon) */
}

.thread-header .count-item .count-icon i {
    font-size: 1.2em; /* Make the icon significantly larger relative to its parent (from .thread-item-stats-item.comments-link .thread-item-stats-icon i) */
}


/* Log in prompt */
.thread-container > p:last-child { /* Target the "Log in to post a reply" paragraph */
    background-color: var(--color-white);
    border: 1px solid var(--color-border-medium);
    border-radius: 16px;
    padding: 1.5rem;
    margin-top: 2rem;
    text-align: center;
    font-size: 1rem;
    width: 100%;
    box-sizing: border-box;
}

.thread-container > p:last-child a {
    color: var(--color-link-primary); /* Use variable */
    text-decoration: none;
    font-weight: 500;
}

.thread-container > p:last-child a:hover {
    text-decoration: underline;
}

/* Thread Area for loading message */
#thread-area {
    width: 100%;
    box-sizing: border-box;
}

#thread-area > p { /* Loading thread... / Thread not found. */
    background-color: var(--color-white);
    border: 1px solid var(--color-border-medium);
    border-radius: 16px;
    padding: 1.5rem;
    margin-top: 1.5rem;
    text-align: center;
    color: var(--color-text-meta); /* Use muted color */
    font-size: 1rem;
    box-sizing: border-box;
}

/* Tag styling for display mode */
.tag-line {
    margin-top: 0.8rem; /* Space above tag line */
    margin-bottom: 0.8rem; /* Space below tag line */
    font-size: 0.95rem;
    color: var(--color-text-primary);
    display: flex; /* Use flexbox to align "Tag:" and the tag bubble */
    align-items: center;
    gap: 5px; /* Small gap between "Tag:" and the bubble */
}

.tag-line strong {
    font-weight: 600; /* Make "Tag:" bold */
}

.tag-value {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    background: var(--color-link-primary);
    color: var(--color-white);
}

/* ──────────── Owner action “bubbles” ──────────── */
.post-actions{
    display:flex;
    gap:6px;                 /* little space between bubbles */
    margin-top:4px;          /* breathe under the reply text */
}
.thread-header .post-actions { /* Specific margin for header actions */
    margin-top:0.8rem;
}

.post-actions button{
    appearance:none;
    border:none;
    outline:none;
    cursor:pointer;
    padding:0.3rem 0.8rem;   /* compact pill */
    font-size:0.75rem;
    font-weight:600;
    line-height:1;
    color:var(--color-white);
    border-radius:16px;      /* <-- rounded bubble */
    transition:background-color .2s ease,
               opacity .2s ease;
}

/* Edit → blue, Save (while editing) → green */
.edit-btn{background:var(--color-edit-button);}
.edit-btn:hover{background:var(--color-edit-button-hover);}
.edit-btn.editing{background:var(--color-save-button);}          /* becomes “Save” */
.edit-btn.editing:hover{background:var(--color-save-button-hover);}

/* Delete → red */
.delete-btn{background:var(--color-danger);}
.delete-btn:hover{background:var(--color-danger-hover);}

/* Disabled state for async ops */
.post-actions button:disabled{
    opacity:.6;
    cursor:not-allowed;
}

/* Container for edit fields (labels and inputs/textareas/selects) */
.edit-field-wrapper {
    margin-bottom: 0.8rem; /* Space between each edit field */
}

.edit-field-wrapper label {
    display: block; /* Make label appear on its own line */
    font-size: 0.85rem; /* Smaller font for labels */
    color: var(--color-text-secondary);
    margin-bottom: 0.3rem; /* Space between label and input */
    font-weight: 500;
}


/* In-place textarea and input when editing */
.edit-area {
    width: 100%;
    padding: 0.7rem; /* Consistent with other inputs */
    border: 1px solid var(--color-border-light);
    border-radius: 16px; /* Consistent border-radius */
    font-size: 0.9rem;
    box-sizing: border-box;
    background-color: var(--color-light-gray);
    resize: vertical; /* Allow vertical resize for textareas */
    transition: border-color 0.3s ease, background-color 0.3s ease;
    min-height: 40px; /* Minimum height for inputs/selects */
}

.edit-area:focus {
    outline: none;
    border-color: var(--color-focus-border);
    background-color: var(--color-white);
}

/* Specific styling for edit inputs in thread header */
.thread-header input.edit-area[type="text"] { /* Title input */
    font-size: 1.2rem; /* Slightly smaller than H2 but larger than body */
    font-weight: 600;
    padding: 0.8rem 0.7rem; /* More padding for title */
}
.thread-header textarea.edit-area { /* Content textarea */
    min-height: 120px; /* Taller for main content */
}

.thread-header select.edit-area {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%236c757d%22%20d%3D%22M287%2C197.8L154.4%2C65.2c-4.4-4.4-11.5-4.4-15.9%2C0L5.3%2C197.8c-4.4%2C4.4-4.4%2C11.5%2C0%2C15.9l15.9%2C15.9c4.4%2C4.4%2C11.5%2C4.4%2C15.9%2C0l106.3-106.3l106.3%2C106.3c4.4%2C4.4%2C11.5%2C4.4%2C15.9%2C0l15.9-15.9c4.4-4.4%2C4.4-11.5%2C0-15.9L287%2C197.8z%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-position: right 0.7em center;
    background-size: 0.65em auto, 100%;
    padding-right: 2.2em; /* Ensure space for the arrow */
    cursor: pointer;
    height: 40px; /* Fixed height for consistency */
}


/* Media query for wider screens to position back button */
@media (min-width: 768px) {
    .thread-container {
        /* Re-add horizontal padding on larger screens */
        padding: 0 1.5rem; /* This will ensure content has space on the sides */
    }

    /* Adjust the main content blocks to take up space within the container's max-width */
    .thread-header,
    .reply,
    .add-reply-section,
    #thread-area > p, /* Loading thread... / Thread not found. */
    .thread-container > p:last-child { /* Log in prompt */
        max-width: 1200px; /* Ensure they don't exceed the overall container width */
        width: 100%; /* Keep taking full width of their parent (thread-container) */
        margin-left: auto; /* Center them within the thread-container's padded area */
        margin-right: auto;
    }

    /* Position the back-to-forum button */
    /* Remove previous absolute positioning that caused issues */
    .back-to-forum {
        position: static; /* Reset to normal flow */
        margin-left: auto; /* Use auto margins to center if it's a block, or flexbox */
        margin-right: auto;
        /* Re-apply some top/bottom margin if needed, but let it be part of the flow */
        margin-top: 1rem; /* Adjust as needed */
        margin-bottom: 1.5rem; /* Keep some space below it */
        align-self: flex-start; /* If thread-container is flex-direction: column */
    }

    /* If you still want the back button to appear "outside" the main column,
       but consistently aligned, you would apply absolute positioning relative
       to a wider parent (like <body> or a wrapper around body+main) or use
       a more complex left/transform calculation relative to the centered container.
       For "stay at the top," placing it *inside* the main.thread-container
       and aligning it is simpler. */

    /* The thread-container itself is a flex column at 768px+ */
    .thread-container {
        display: flex;
        flex-direction: column;
        align-items: center; /* Center content blocks */
    }

    /* Specific targeting for the back button paragraph */
    main.thread-container > p:first-child {
        /* This p contains the back-to-forum button. Let's ensure it aligns left with the content */
        align-self: flex-start; /* Aligns this specific paragraph to the left edge of the flex container */
        width: 100%; /* Allows its child (the button) to take desired width and align within it */
        padding: 0 0; /* No extra padding here, rely on thread-container's padding */
        margin-bottom: 0.5rem; /* Less space below it */
        box-sizing: border-box;
    }
}

@media (min-width: 1240px) { /* Adjust based on max-width + desired offset */
    .thread-container {
        max-width: 1200px; /* Keep max-width for content alignment */
        margin: 2rem auto; /* Center the entire content block */
        position: relative; /* For absolute positioning of the back button if needed */
        padding: 0 1.5rem; /* Maintain padding on very large screens */
    }
    /* If you still want the back-to-forum button *outside* the main 1200px column
       on very wide screens, but consistently aligned to its left, you'd re-apply
       absolute positioning here. Otherwise, the 768px+ rule keeps it inline. */
    /*
    .back-to-forum {
        position: absolute;
        left: calc(50% - 600px - 150px); // 50% - half_container_width - desired_offset
        top: 0; // Or whatever top value you want relative to .thread-container
        margin-bottom: 0;
        transform: none; // Reset any previous transforms
    }
    */
}

/* --- Like Animation --- */
.like-animation-heart {
    position: absolute;
    font-size: 3em; /* Size of the heart */
    color: #e0245e; /* Instagram-like red/pink */
    opacity: 0;
    transform: scale(0);
    pointer-events: none; /* Allows clicks to pass through */
    text-shadow: 0 0 5px rgba(0,0,0,0.2); /* Subtle shadow for pop effect */
    z-index: 100; /* Ensure it's above the post content */
    display: flex;
    justify-content: center;
    align-items: center;
}

.like-animation-heart.animate {
    animation: likePop 0.6s ease-out forwards; /* Animation duration and easing */
}

@keyframes likePop {
    0% {
        opacity: 0;
        transform: scale(0) translate(-50%, -50%);
    }
    30% {
        opacity: 1;
        transform: scale(1.2) translate(-50%, -50%); /* Pop out slightly bigger */
    }
    100% {
        opacity: 0;
        transform: scale(1.5) translate(-50%, -50%); /* Fade out and get slightly bigger */
    }
}
.post-actions .cancel-btn-style {
  background-color: #6c757d; /* A dark grey bootstrap 'secondary' color */
  border-color: #6c757d;
  color: #fff; /* Keeps text light */
}

.post-actions .cancel-btn-style:hover {
  background-color: #5a6268;
  border-color: #545b62;
}
/* ─── Inline-edit look & feel (16 px radius, flat, coloured) ─── */

/* wrapper = label + control */
.edit-field-wrapper        {margin-bottom:1rem}

.edit-field-wrapper label  {
  font-size: .8rem;
  color: var(--color-text-secondary);
  margin-bottom: .4rem;
  font-weight:600;
}

/* shared look for all controls while editing */
.edit-area,
input.edit-title,
input.edit-img,
select.edit-tag {
  width: 100%;
  padding: .75rem 1rem;
  font-size: .95rem;
  color: var(--color-text-primary);
  background: var(--color-light-gray);
  border: 1px solid var(--color-border-light);
  border-radius: 16px;
  box-sizing: border-box;
  transition: background .25s, border-color .25s;
}

/* taller specifically for textarea (main content) */
textarea.edit-area         {min-height: 140px; resize: vertical;}

/* bigger font for title input */
input.edit-title           {font-size: 1.25rem; font-weight:600;}

/* mimic “select” arrow for native select already added in JS */
select.edit-tag            {cursor:pointer; height: 46px;}

/* focus state */
.edit-area:focus,
input.edit-title:focus,
input.edit-img:focus,
select.edit-tag:focus {
  background: var(--color-white);
  border-color: var(--color-focus-border);
  outline: none;
}

/* ‘Save’ button (edit-mode) gets special colour via JS — already styled in CSS */