/* Viral Coach Social Assistant - V2.0 Styling */

/* --- Base & Layout --- */
.vcs-app {
    border: 1px solid #e0e0e0; /* Lighter border */
    padding: 25px 30px; /* More padding */
    margin-bottom: 30px;
    background-color: #fdfdfd; /* Slightly off-white base */
    box-shadow: 0 2px 5px rgba(0,0,0,.07); /* Slightly stronger shadow */
    max-width: 960px; /* Even wider for better card layout */
    margin-left: auto;
    margin-right: auto;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}
.vcs-app h2 { font-size: 1.7em; margin-top: 0; margin-bottom: 10px; color: #1d2327; font-weight: 600;}
.vcs-app h3 { font-size: 1.4em; margin-top: 0; margin-bottom: 15px; color: #1d2327; }
.vcs-app h4 { /* Group Title Styling */
    font-size: 1.25em;
    margin-top: 30px;
    margin-bottom: 15px;
    color: #2271b1; /* WP Blue */
    padding-bottom: 10px;
    border-bottom: 2px solid #eef6fc; /* Light blue underline */
    font-weight: 600;
}
.vcs-app h5 { /* Card Headers / Pinned Headers */
    font-size: 1.0em;
    font-weight: 600;
    margin-top: 0;
    margin-bottom: 12px;
    color: #1d2327;
}

.vcs-section {
    margin-bottom: 30px; /* More spacing between sections */
    padding-bottom: 30px;
    border-bottom: 1px solid #f0f0f1; /* Lighter border */
}
.vcs-app .vcs-section:last-child {
    border-bottom: none;
    padding-bottom: 10px;
    margin-bottom: 10px;
}

/* --- Controls Area --- */
.vcs-controls {
    display: grid;
    /* Flexible columns, aiming for ~200px minimum */
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 15px 25px; /* Row and column gap */
    align-items: end;
    border-bottom: none;
    padding-bottom: 0;
}
.vcs-control-group { display: flex; flex-direction: column; gap: 6px; }
.vcs-control-group label { font-weight: 500; /* Slightly less bold */ font-size: 0.9em; color: #444; }
.vcs-control-group select,
.vcs-control-group button.button { width: 100%; box-sizing: border-box; }
.vcs-control-group select { padding: 8px 10px; border: 1px solid #dcdcde; /* WP Input Border */ border-radius: 3px; background-color: #fff; min-height: 38px; font-size:0.95em; }
.vcs-control-group select:focus { border-color: #2271b1; box-shadow: 0 0 0 1px #2271b1; outline: none; }
.vcs-control-group button.button { min-height: 38px; line-height: normal; padding: 8px 15px; font-size: 0.95em; border-radius: 3px; }

/* Specific Button Styling */
.vcs-button-primary { background-color: #87CEEB; border-color: #76bbd8 #65a8c6 #65a8c6; color: #ffffff; font-weight: 500; box-shadow: 0 1px 0 #65a8c6; text-shadow: 0 -1px 1px #76bbd8, 1px 0 1px #76bbd8, 0 1px 1px #76bbd8, -1px 0 1px #76bbd8; transition: all 0.1s linear; }
.vcs-button-primary:hover:not(:disabled) { background-color: #76bbd8; border-color: #65a8c6; color: #002a3d; }
.vcs-button-primary:active:not(:disabled) { background-color: #65a8c6; border-color: #5495b3; box-shadow: inset 0 2px 0 #5495b3; transform: translateY(1px); }
.vcs-button-primary:disabled { background-color: #add8e6 !important; border-color: #a0c7d8 !important; color: #6a8a9a !important; cursor: not-allowed !important; box-shadow: none !important; text-shadow: none !important;}
.vcs-button-secondary { background-color: #f6f7f7; border-color: #dcdcde; color: #2271b1; transition: all 0.1s linear; }
.vcs-button-secondary:hover:not(:disabled) { background-color: #f0f0f1; border-color: #c9c9c9; color: #1b6095; }
.vcs-button-secondary:active:not(:disabled) { background-color: #e8e8e8; border-color: #bfbfbf; box-shadow: inset 0 1px 0 #ccc; transform: translateY(1px); }
.vcs-button-danger { background-color: #f8d7da; border-color: #f5c6cb; color: #721c24; transition: all 0.1s linear;}
.vcs-button-danger:hover:not(:disabled) { background-color: #f1b0b7; border-color: #eca5ac; color: #58151a; }
.vcs-button-danger:active:not(:disabled) { background-color: #eca5ac; border-color: #e39aa3; color: #451014; box-shadow: inset 0 1px 0 #e39aa3; transform: translateY(1px);}

.vcs-generate-button-group { grid-column: span 1; }
.vcs-usage-info-group { grid-column: span 1; text-align: right; align-self: end; padding-bottom: 5px; }
.vcs-usage-info { margin-left: 0; padding-left: 0; font-size: 0.9em; color: #50575e; line-height: 1.4; }

/* --- Messages & Loading --- */
.vcs-message { padding: 15px; margin-bottom: 20px; border-width: 1px; border-style: solid; border-radius: 4px; font-size: 0.95em; }
.vcs-message.vcs-error { color: #721c24; background-color: #f8d7da; border-color: #f5c6cb; }
.vcs-message.vcs-success { color: #0f5132; background-color: #d1e7dd; border-color: #badbcc; }
.vcs-message.vcs-warning { color: #664d03; background-color: #fff3cd; border-color: #ffecb5; }

#vcs-loading-indicator { text-align: center; padding: 20px; color: #333; display: none; }
.vcs-spinner { border: 4px solid #f0f0f1; border-top: 4px solid #2271b1; border-radius: 50%; width: 40px; height: 40px; animation: vcs-spin 1s linear infinite; margin: 15px auto; }
@keyframes vcs-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* --- Skeleton Loader Styles --- */
@keyframes vcs-pulse { 0% { background-color: #f0f0f1; } 50% { background-color: #e6e6e6; } 100% { background-color: #f0f0f1; } }
.vcs-skeleton { background-color: #f0f0f1; animation: vcs-pulse 1.5s ease-in-out infinite; border-radius: 4px; }
.vcs-skeleton-group { margin-bottom: 30px; }
.vcs-skeleton-heading { height: 26px; width: 65%; margin-bottom: 20px; } /* Slightly taller */
.vcs-card-grid .vcs-skeleton.vcs-card { display: flex; flex-direction: column; border: 1px solid transparent; background-color: #fff; box-shadow: none; animation: none; /* Card itself doesn't pulse */ }
.vcs-card-grid .vcs-skeleton .vcs-skeleton-header { height: 18px; width: 40%; margin: 12px 15px 10px; background-color: #f0f0f1; animation: vcs-pulse 1.5s ease-in-out infinite; } /* Header pulses */
.vcs-card-grid .vcs-skeleton .vcs-skeleton-text { height: 14px; margin: 8px 15px; background-color: #f0f0f1; animation: vcs-pulse 1.5s ease-in-out infinite; } /* Text pulses */
.vcs-card-grid .vcs-skeleton .vcs-skeleton-text.short { width: 70%; }
.vcs-card-grid .vcs-skeleton .vcs-skeleton-actions { height: 28px; width: 50%; margin: 15px 15px 12px auto; background-color: #f0f0f1; animation: vcs-pulse 1.5s ease-in-out infinite; } /* Actions pulses */

/* --- Results Area (V2.0: Cards) --- */
.vcs-results { margin-top: 20px; }
.vcs-review-notice { font-size: 0.9em; background-color: #fff8e1; border-left: 4px solid #ffb300; padding: 10px 15px; margin-bottom: 25px; border-radius: 3px; color: #6d4c41; }
.vcs-result-group { margin-bottom: 30px; }

.vcs-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 25px; } /* Increased gap */
.vcs-card { border: 1px solid #e0e0e0; border-radius: 6px; background-color: #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.06); display: flex; flex-direction: column; transition: box-shadow 0.2s ease-in-out, transform 0.2s ease-in-out; position: relative; /* For potential absolute elements */ }
.vcs-card:hover { box-shadow: 0 5px 15px rgba(0,0,0,0.1); transform: translateY(-4px); } /* Enhanced hover */

.vcs-card-header { padding: 12px 15px; border-bottom: 1px solid #eee; display: flex; justify-content: space-between; align-items: center; background-color: #f9f9f9; border-top-left-radius: 6px; border-top-right-radius: 6px; }
.vcs-card-header h5 { margin: 0; font-size: 0.95em; font-weight: 600; color: #333; display: flex; align-items: center; gap: 6px; flex-grow: 1;} /* Use flex for icon+text */

.vcs-card-body { padding: 15px; font-size: 0.9em; color: #444; flex-grow: 1; }
.vcs-card-title { font-weight: 600; color: #1d2327; margin-bottom: 8px; font-size: 1.05em; line-height: 1.3; }
.vcs-card-snippet { margin-bottom: 10px; line-height: 1.5; color: #50575e; font-size: 0.9em;}
.vcs-card-image-idea { font-size: 0.85em; color: #666; font-style: italic; margin-top: 10px; display: flex; align-items: center; gap: 4px; }

.vcs-card-actions { padding: 12px 15px; border-top: 1px solid #eee; background-color: #fcfcfc; text-align: right; border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; }
.vcs-card-actions .button-small { font-size: 0.85em; padding: 4px 10px; min-height: auto; }

/* Platform card accents */
.vcs-card.vcs-linkedin { border-top: 4px solid #0077b5; } .vcs-card.vcs-facebook { border-top: 4px solid #1877f2; } .vcs-card.vcs-instagram { border-top: 4px solid #e4405f; } .vcs-card.vcs-x { border-top: 4px solid #14171A; }

/* Copy Button Styles & Feedback */
.vcs-copy-button { cursor: pointer; border: 1px solid #ccc; background-color: #f7f7f7; color: #555; font-size: 0.9em; font-family: system-ui, sans-serif; /* Use system font */ padding: 2px 6px; border-radius: 3px; margin-left: 5px; vertical-align: middle; line-height: 1; transition: all 0.2s ease; flex-shrink: 0; } /* Use system fonts */
.vcs-copy-button:hover { background-color: #eee; border-color: #999; }
.vcs-copy-button:active { background-color: #ddd; }
.vcs-copy-button:disabled { cursor: default; opacity: 1 !important; transform: scale(1.1); }
.vcs-copy-button.vcs-copied-success { background-color: #dff0d8; border-color: #d6e9c6; color: #3c763d; }
.vcs-copy-button.vcs-copied-fail { background-color: #f2dede; border-color: #ebccd1; color: #a94442; }
.vcs-copy-button.vcs-copied-error { background-color: #fcf8e3; border-color: #faebcc; color: #8a6d3b; }
/* Specific copy button positioning within paragraphs */
.vcs-platform-post p .vcs-copy-button { opacity: 0.4; }
.vcs-platform-post p:hover .vcs-copy-button { opacity: 1; }


/* Pin Button Styling & Feedback */
.vcs-pin-button { cursor: pointer; border: none; background: transparent; font-size: 1.3em; padding: 0 3px; margin-left: auto; /* Push to right */ vertical-align: middle; line-height: 1; opacity: 0.5; transition: all 0.2s ease; flex-shrink: 0; }
.vcs-card-header:hover .vcs-pin-button { opacity: 1; }
.vcs-pin-button:hover { transform: scale(1.2); opacity: 1; }
.vcs-pin-button.pinned { opacity: 1; transform: scale(1.1); }
.vcs-pin-button:not(.pinned) { font-weight: bold; color: #2271b1; font-size: 1.4em; }
/* Pin/Unpin Feedback Animation */
.vcs-pinned-feedback, .vcs-unpinned-feedback { animation: vcs-pop 0.3s ease-out; }
@keyframes vcs-pop { 0% { transform: scale(1); } 50% { transform: scale(1.3); } 100% { transform: scale(1.1); } }


/* Regenerate Button */
.vcs-regenerate-section { text-align: center; margin-top: 25px; padding-top: 20px; border-top: 1px solid #f0f0f1; }
.vcs-regenerate-section .button { min-height: 36px; padding: 6px 12px; }

/* --- Pinned Items Area --- */
.vcs-pinned-items { border: 1px solid #cce7f6; background-color: #f6fcff; padding: 20px 25px; border-radius: 4px; margin-top: 30px; }
.vcs-pinned-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; flex-wrap: wrap; gap: 15px; }
.vcs-pinned-header h3 { margin-bottom: 0; color: #007cba; font-size: 1.3em; }
.vcs-pinned-actions button { margin-left: 10px; font-size: 0.9em !important; padding: 4px 10px !important; min-height: auto !important;} /* Smaller buttons */
.vcs-pinned-description { font-size: 0.9em; color: #50575e; margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px dashed #cce7f6; }
#vcs-pinned-content .vcs-platform-post { background-color: #fff; border: 1px solid #e0e0e0; margin-bottom: 15px; position: relative; box-shadow: 0 1px 1px rgba(0,0,0,0.04); border-radius: 4px; }
#vcs-pinned-content .vcs-platform-post h5 { padding: 10px 35px 10px 15px; /* Space for unpin */ border-bottom: 1px solid #f0f0f1; margin-bottom:10px; background-color: #f9f9f9; border-top-left-radius: 4px; border-top-right-radius: 4px; display: flex; align-items: center;}
#vcs-pinned-content .vcs-platform-post p { padding: 0 15px; }
#vcs-pinned-content .vcs-platform-post p:last-of-type { margin-bottom: 15px; }

/* Unpin Button */
.vcs-unpin-button { position: absolute; top: 8px; right: 8px; cursor: pointer; border: none; background: transparent; font-size: 1.1em; color: #d63638; padding: 5px; line-height: 1; opacity: 0.6; transition: opacity 0.2s ease, color 0.2s ease; }
.vcs-unpin-button:hover { opacity: 1; color: #a00a00; }

/* Pinned Notes */
.vcs-pinned-notes { margin: 15px 15px 10px 15px; padding-top: 15px; border-top: 1px dashed #eee; }
.vcs-pinned-notes label { display: block; font-weight: 600; margin-bottom: 5px; font-size: 0.9em; color: #444; }
.vcs-pinned-notes textarea.vcs-note-textarea { width: 100%; box-sizing: border-box; padding: 8px; border: 1px solid #dcdcde; border-radius: 3px; font-size: 0.95em; line-height: 1.5; resize: vertical; min-height: 50px; transition: border-color 0.3s ease, box-shadow 0.3s ease; }
.vcs-pinned-notes textarea.vcs-note-textarea:focus { border-color: #2271b1; outline: none; box-shadow: 0 0 0 1px #2271b1; }
.vcs-note-textarea.vcs-note-saved { border-left-color: #7ad03a; border-left-width: 3px; transition: border-left-color 0.2s ease-out; } /* WP Green */

/* Clear All Button */
#vcs-clear-pinned-button { display: block; margin: 20px auto 0 auto; }

/* --- Modal Styles --- */
#vcs-modal-overlay {
    position: fixed; /* Use fixed to overlay everything */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.75); /* Slightly darker overlay */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100000; /* Very high z-index */
    padding: 20px;
    box-sizing: border-box;
    opacity: 0;
    visibility: hidden; /* Hidden by default */
    transition: opacity 0.25s ease-in-out, visibility 0s linear 0.25s; /* Delay visibility change */
}
#vcs-modal-overlay.vcs-modal-visible {
    opacity: 1;
    visibility: visible; /* Visible when class is added */
    transition: opacity 0.25s ease-in-out, visibility 0s linear 0s;
}

#vcs-modal-content {
    background-color: #fff;
    padding: 30px 35px;
    border-radius: 6px; /* Match cards */
    max-width: 700px;
    width: 100%;
    max-height: 90vh; /* Limit height */
    overflow-y: auto; /* Allow scrolling if content overflows */
    position: relative;
    box-shadow: 0 5px 20px rgba(0,0,0,0.4);
    transform: scale(0.9); /* Start slightly small */
    transition: transform 0.25s ease-in-out;
}
#vcs-modal-overlay.vcs-modal-visible #vcs-modal-content {
    transform: scale(1); /* Scale to full size when visible */
}

#vcs-modal-close {
    position: absolute;
    top: 12px; /* Adjust position */
    right: 12px;
    background: none;
    border: none;
    font-size: 2.2em;
    line-height: 1;
    color: #999; /* Lighter close button */
    cursor: pointer;
    padding: 5px;
    transition: color 0.2s ease, transform 0.2s ease;
}
#vcs-modal-close:hover {
    color: #333;
    transform: scale(1.1);
}

#vcs-modal-body .vcs-platform-post {
    border: none; /* Remove border inside modal */
    margin: 0;
    box-shadow: none;
    padding: 0; /* Remove padding if structure adds it */
    background: none;
}
#vcs-modal-body h5 {
    font-size: 1.3em; /* Larger title in modal */
    margin-bottom: 20px;
    border-bottom: 1px solid #eee;
    padding-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
}
#vcs-modal-body p {
    font-size: 1em;
    line-height: 1.6;
    margin-bottom: 12px;
}
#vcs-modal-body p strong { /* Make labels slightly less prominent */
   font-weight: 500;
   color: #555;
   margin-right: 6px;
}
/* Ensure copy buttons are easily clickable in modal */
#vcs-modal-body .vcs-copy-button {
    opacity: 0.7;
}
 #vcs-modal-body p:hover .vcs-copy-button {
    opacity: 1;
}

.vcs-modal-copy-all {
    margin-top: 25px;
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid #eee;
}
.vcs-modal-copy-all .button {
    font-size: 1em;
}
.vcs-copy-all-helper {
    position: absolute;
    left: -9999px; top: -9999px; width:1px; height:1px; opacity: 0;
}