/* public/skins/1986.css */

/* Apply styles only when body has the .skin-1986 class */
body.skin-1986 {
    background-color: #0D0D0D; /* Very dark grey, almost black */
    color: #33FF33; /* Bright green text */
    font-family: 'Courier New', Courier, monospace;
    font-size: 16px; /* Common terminal font size */
}

/* --- General Container and Layout for 1986 Skin --- */
body.skin-1986 .container {
    background-color: #0D0D0D; /* Match body */
    border: 2px solid #33FF33;
    box-shadow: 0 0 10px #33FF33; /* Optional glow effect */
}

/* --- Chat Interface Specifics --- */

/* Scenario Info Sidebar */
body.skin-1986 #scenarioInfo {
    background: #111111;
    border: 1px solid #33FF33;
    color: #33FF33;
    border-radius: 0; /* Blocky */
    box-shadow: none;
}
body.skin-1986 #scenarioInfo #scenarioNameDisplay {
    color: #66FF66; /* Slightly brighter green for titles */
    border-bottom: 1px dashed #33FF33;
    padding-bottom: 0.5rem;
}
body.skin-1986 #scenarioInfo #scenario,
body.skin-1986 #scenarioInfo .details-label,
body.skin-1986 #scenarioInfo .details-value {
    color: #33FF33;
}
body.skin-1986 #authorName,
body.skin-1986 #authorNameDisplay,
body.skin-1986 #scenarioCreatedByLabel {
    color: #22AA22; /* Dimmer green for less important text */
}

/* Avatar - Can be hidden or styled minimally */
body.skin-1986 #interlocutorAvatar {
    border: 1px solid #33FF33;
    border-radius: 0; /* Square avatar */
    /* Or hide it completely: display: none; */
}
body.skin-1986 #avatarContainer .info-toggle-button svg {
    fill: #33FF33;
}
body.skin-1986 #audioAnimation svg circle,
body.skin-1986 #audioAnimation svg circle[stroke] {
    fill: #33FF33;
    stroke: #33FF33;
}


/* Chat Window */
body.skin-1986 #chatWindow {
    background-color: #000000;
    border: 1px solid #33FF33;
    color: #33FF33;
    border-radius: 0;
    box-shadow: none;
    resize: none; /* Often terminals don't resize chat areas */
}
body.skin-1986 #chatWindow::-webkit-scrollbar {
    width: 10px;
}
body.skin-1986 #chatWindow::-webkit-scrollbar-track {
    background: #111111;
}
body.skin-1986 #chatWindow::-webkit-scrollbar-thumb {
    background: #33FF33;
}
body.skin-1986 #chatWindow::-webkit-scrollbar-thumb:hover {
    background: #66FF66;
}


/* Messages */
body.skin-1986 .interlocutor-message,
body.skin-1986 .student-message {
    background-color: transparent; /* No background color for messages */
    border: none; /* No border for individual messages */
    border-radius: 0;
    padding: 0.25rem 0.5rem; /* Less padding */
    margin-bottom: 0.5rem;
    color: #33FF33;
}
body.skin-1986 .interlocutor-message strong,
body.skin-1986 .student-message strong {
    color: #66FF66; /* Brighter green for sender name */
}
body.skin-1986 #chatWindow .interlocutor-message:hover,
body.skin-1986 #chatWindow .student-message:hover {
    background-color: #1a1a1a; /* Slight hover effect */
    cursor: default; /* Terminals don't usually change cursor on text */
}

/* Typing Indicator */
body.skin-1986 .typing-indicator {
    background-color: transparent;
}
body.skin-1986 .typing-dot {
    background-color: #33FF33;
}

/* User Input Textarea */
body.skin-1986 #userChat {
    background-color: #000000;
    border: 1px solid #33FF33;
    color: #33FF33;
    border-radius: 0;
    box-shadow: none;
    caret-color: #33FF33; /* Blinking cursor color */
}
body.skin-1986 #userChat:focus {
    border-color: #66FF66; /* Brighter border on focus */
    box-shadow: 0 0 5px #66FF66;
}
body.skin-1986 #userChat::placeholder {
    color: #228822; /* Dimmer green for placeholder */
}

/* Word Count */
body.skin-1986 .word-count {
    color: #22AA22; /* Dimmer green */
}

/* Control Buttons */
body.skin-1986 .icon-button {
    background: #111111;
    border: 1px solid #33FF33;
    border-radius: 0;
}
body.skin-1986 .icon-button:hover {
    background: #222222;
    border-color: #66FF66;
    transform: none; /* No lift effect */
    box-shadow: none;
}
body.skin-1986 .icon-button svg {
    fill: #33FF33;
    opacity: 1;
}
body.skin-1986 .icon-button:hover svg {
    fill: #66FF66;
}
body.skin-1986 .icon-button:disabled svg {
    fill: #228822; /* Dimmer green for disabled */
}

/* Specific button overrides if needed, e.g., email button */
body.skin-1986 button#emailButton.icon-button svg {
  fill: #33FF33;
}
body.skin-1986 button#emailButton.icon-button:hover svg {
  fill: #66FF66;
}
body.skin-1986 .icon-button#micButton.is-recording svg {
  fill: #FF3333 !important; /* Red for recording */
}

body.skin-1986 #hintButtonContainer {
    /* The container itself might not need much styling if it's just a wrapper */
    /* If it has default styling that conflicts, reset it here */
}

body.skin-1986 #hintButton.icon-button {
    /* Inherits .icon-button styles: background, border, border-radius (0) */
    /* We might want to ensure its size is consistent if it was different */
    width: 65px;  /* Assuming this is your standard icon button size */
    height: 65px; /* Assuming this is your standard icon button size */
}

body.skin-1986 #hintButton.icon-button svg {
    /* Override fill if the SVG uses stroke for its main appearance */
    fill: none; /* Important if the SVG is primarily drawn with strokes */
    stroke: #33FF33; /* Green stroke for the bulb and rays */
    stroke-width: 1.5; /* Match the SVG's original stroke-width or adjust */
    width: 40px; /* Adjust size of SVG within button if needed */
    height: 40px;
}

body.skin-1986 #hintButton.icon-button:hover svg {
    fill: none;
    stroke: #66FF66; /* Brighter green stroke on hover */
}

body.skin-1986 #hintButton.icon-button:disabled svg {
    stroke: #228822; /* Dimmer green stroke for disabled state */
    fill: none;
}
/* --- End Specific Styles for Hint Button --- */

/* Autoplay Label */
body.skin-1986 .autoplay-label {
    color: #33FF33;
}
body.skin-1986 .autoplay-label svg.autoplay-icon {
    fill: #33FF33;
}
body.skin-1986 .autoplay-label:hover svg.autoplay-icon {
    fill: #66FF66;
}
body.skin-1986 .autoplay-label input[type="checkbox"] {
    accent-color: #33FF33; /* For the checkbox itself */
}


/* Footer (in case it's part of chat view for this skin) */
body.skin-1986 .footer {
    background: #0D0D0D;
    border-top: 1px solid #33FF33;
}
body.skin-1986 .footer .dialogiq-link,
body.skin-1986 .footer .privacy-link {
    color: #66FF66;
}
body.skin-1986 .footer .footer-copyright,
body.skin-1986 .footer .footer-beta {
    color: #22AA22;
}
body.skin-1986 .rectangular-button { /* Toggle view button */
    background: #111;
    border: 1px solid #33FF33;
    border-radius: 0;
}
body.skin-1986 .rectangular-button svg.toggle-icon {
    fill: #33FF33;
}
body.skin-1986 .rectangular-button:hover {
    background: #222;
}
body.skin-1986 .rectangular-button:hover svg.toggle-icon {
    fill: #66FF66;
}


/* Dialog Boxes (if they appear during chat for this skin) */
body.skin-1986 .dialog-box .dialog-content {
    background: #000000;
    border: 1px solid #33FF33;
    color: #33FF33;
    border-radius: 0;
    box-shadow: 0 0 10px #33FF33;
}
body.skin-1986 .dialog-close {
    color: #33FF33;
}
body.skin-1986 .dialog-close:hover {
    color: #66FF66;
}
body.skin-1986 .dialog-box .close-button { /* OK/Confirm buttons in dialogs */
    background: #222;
    color: #33FF33;
    border: 1px solid #33FF33;
    border-radius: 0;
}
body.skin-1986 .dialog-box .close-button:hover {
    background: #333;
    border-color: #66FF66;
    color: #66FF66;
    transform: none;
}
body.skin-1986 #dialogInput {
    background-color: #111;
    border: 1px solid #33FF33;
    color: #33FF33;
    border-radius: 0;
}

/* Tooltips */
body.skin-1986 .tooltip-text {
  background-color: #000;
  color: #33FF33;
  border: 1px solid #33FF33;
}
body.skin-1986 .tooltip-text::after {
  border-top-color: #000; /* Match tooltip background */
  /* You might need to adjust this, or make the arrow itself from borders */
}


/* Activity Gate & Links */
body.skin-1986 .activity-gate-container {
    background-color: #1a1a1a; /* Darker background */
    border: 1px solid #33FF33;
    color: #33FF33;
}
body.skin-1986 .activity-gate-container input[type="checkbox"] {
    accent-color: #33FF33;
}
body.skin-1986 .activity-gate-container label {
    color: #33FF33;
}
body.skin-1986 .activity-link {
    color: #66FF66; /* Brighter green for links */
}
body.skin-1986 .activity-link:hover,
body.skin-1986 .activity-link:focus {
    color: #99FF99;
    background-color: #222;
}

/* Scaffolding links */
body.skin-1986 .scaffolding-link {
    color: #66FF66;
}
body.skin-1986 .scaffolding-link:hover,
body.skin-1986 .scaffolding-link:focus {
    color: #99FF99;
}

/* System messages / errors in chat */
body.skin-1986 .message.system-message.chat-notice {
    color: #FFAA00; /* Amber for system notices */
}
body.skin-1986 .message.system-message.chat-error {
    color: #FF3333; /* Red for errors */
}

/* --- Introduction Dialog Styles for 1986 Skin --- */
body.skin-1986 .dialog-box.introduction-dialog .dialog-content {
    background: #000000;      /* Black background */
    border: 1px solid #33FF33; /* Green border */
    color: #33FF33;           /* Green text */
    border-radius: 0;          /* Blocky corners */
    box-shadow: 0 0 10px #33FF33; /* Optional green glow */
    max-width: 600px;          /* Keep max-width or adjust as needed */
    font-family: 'Courier New', Courier, monospace; /* Ensure monospace font */
}

body.skin-1986 .introduction-dialog .intro-title {
    color: #66FF66; /* Brighter green for the title */
    font-weight: normal; /* Terminals often don't use heavy bold */
    border-bottom: 1px dashed #33FF33;
    padding-bottom: 0.75rem;
    margin-bottom: 1rem;
}

body.skin-1986 .introduction-dialog .intro-avatar {
    border: 1px solid #33FF33; /* Green border */
    border-radius: 0;          /* Square avatar */
    /* You might want to reduce its size for a more terminal-like feel */
    /* width: 60px; */
    /* height: 60px; */
    /* Or hide it if it doesn't fit the theme: */
    /* display: none; */
    /* If hidden, adjust margins for .intro-text: */
    /* body.skin-1986 .introduction-dialog .intro-text { margin-left: 0; } */
}

body.skin-1986 .introduction-dialog .intro-text {
    color: #33FF33; /* Standard green text */
    text-align: left; /* Terminals usually left-align */
    line-height: 1.5; /* Adjust for readability */
}

/* The "Continue" or "Begin" button inside the introduction dialog */
body.skin-1986 .introduction-dialog .intro-nav .close-button {
    background: #222222;      /* Dark grey background */
    color: #33FF33;           /* Green text */
    border: 1px solid #33FF33; /* Green border */
    border-radius: 0;          /* Blocky corners */
    font-family: 'Courier New', Courier, monospace; /* Ensure font consistency */
    font-weight: normal;
    padding: 0.75rem 1.5rem;   /* Adjust padding if needed */
    text-transform: uppercase; /* Optional: classic terminal look */
}

body.skin-1986 .introduction-dialog .intro-nav .close-button:hover {
    background: #333333;      /* Slightly lighter grey on hover */
    border-color: #66FF66;    /* Brighter green border */
    color: #66FF66;           /* Brighter green text */
    transform: none;           /* No fancy transform */
}

/* Styles for the Hint Reminder Dialog (if it's shown with this skin) */
body.skin-1986 .dialog-box.hint-notice-dialog .dialog-content {
    /* Similar to introduction-dialog */
    background: #000000;
    border: 1px solid #33FF33;
    color: #33FF33;
    border-radius: 0;
    box-shadow: 0 0 10px #33FF33;
    font-family: 'Courier New', Courier, monospace;
}

body.skin-1986 .hint-notice-dialog .dialog-content span[style*="font-size: 18px"] {
    color: #33FF33 !important; /* Ensure text color matches */
}

/* Style the SVG icon within the hint notice dialog */
body.skin-1986 .hint-notice-dialog .dialog-content svg {
    stroke: #33FF33 !important; /* Green stroke for the bulb */
    fill: none !important;      /* Ensure no fill if it's stroke-based */
}

body.skin-1986 .hint-notice-dialog .dialog-content .close-button {
    /* Inherits from .introduction-dialog .intro-nav .close-button if specific enough */
    /* Or re-style if necessary */
    background: #222222;
    color: #33FF33;
    border: 1px solid #33FF33;
    border-radius: 0;
    font-family: 'Courier New', Courier, monospace;
    font-weight: normal;
    text-transform: uppercase;
}

body.skin-1986 .hint-notice-dialog .dialog-content .close-button:hover {
    background: #333333;
    border-color: #66FF66;
    color: #66FF66;
    transform: none;
}

/* --- End Introduction Dialog Styles --- */