/* Oberon Chat Styles */

:root {
    --oberon-brand-body-font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
    --oberon-brand-heading-font: inherit;
    --oberon-trigger-fade: 0.5s;
    --oberon-trigger-transform: 0.5s;
    --oberon-trigger-orb: 0.4s;
    --oberon-chat-open: 0.3s;
    --oberon-trigger-orb-size: 65px;
}

/* --- Trigger Buttons --- */
.oberon-trigger-button {
    position: fixed; /* <<< THIS IS THE CRITICAL RULE FOR HOVERING */
    z-index: 998; /* Below main chat window */
    /* background-color, padding, font-size, width, height, border, border-radius set inline via PHP */
    border: none; /* Default to no border unless overridden */
    color: #fff; /* Fallback text color; inline styles override when settings applied */
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    opacity: 0; /* Initially hidden */
    transition: opacity var(--oberon-trigger-fade, 0.5s) ease-in-out, transform var(--oberon-trigger-transform, 0.5s) ease-in-out, background-color 0.2s ease, color 0.2s ease; /* Added transitions */
    display: flex; /* For icon alignment */
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent; /* Remove tap highlight on mobile */
    box-sizing: border-box; /* Include padding and border in element's total width and height */
    font-family: var(--oberon-brand-heading-font, inherit);
}
.oberon-trigger-button:hover {
    /* Use filter for slight darkening, works on any background-color */
    filter: brightness(90%);
    opacity: 1 !important; /* Ensure hover works with opacity transition */
}

/* Left Trigger Button ("START CHAT") */
.oberon-trigger-left {
    left: 0; /* Flush with left edge */
    bottom: 20px; /* Position from bottom edge */
    transform: translateX(-100%); /* Start off-screen left */
    /* border-radius set inline via PHP */
    writing-mode: vertical-rl; /* Vertical text */
    text-orientation: mixed; /* Keep letters upright */
    /* Padding and font-size set inline */
    /* border set inline via PHP */
}
.oberon-trigger-left.active {
    opacity: 1;
    transform: translateX(0); /* Slide in */
}

/* Right Trigger Button (Circular Icon) */
.oberon-trigger-right {
    right: 20px; /* Position from right edge */
    bottom: 20px; /* Position from bottom edge */
    /* width & height set inline */
    border-radius: 50%; /* Make it circular */
    padding: 0; /* Remove padding for image fit */
    transform: scale(0); /* Start scaled down */
    transition: opacity var(--oberon-trigger-orb, 0.4s) ease-out, transform var(--oberon-trigger-orb, 0.4s) cubic-bezier(0.68, -0.55, 0.27, 1.55); /* Bounce effect */
    overflow: hidden; /* Hide image overflow on bounce */
}
.oberon-trigger-right img {
    /* Size icon relative to button size */
    width: 60%;
    height: auto;
    max-width: 100%; /* Ensure icon doesn't exceed button bounds */
    max-height: 60%; /* Ensure icon doesn't exceed button bounds */
    display: block;
    object-fit: contain; /* Scale image nicely */
}
.oberon-trigger-right.active {
    opacity: 1;
    transform: scale(1); /* Bounce in */
}

body.oberon-trigger-layout-compact #oberon-trigger-button-left {
    left: auto !important;
    right: calc(20px + var(--oberon-trigger-orb-size, 65px) + 12px) !important;
    bottom: 20px !important;
    writing-mode: horizontal-tb !important;
    text-orientation: initial !important;
    border-radius: 999px !important;
    padding: 10px 18px !important;
    letter-spacing: 0.08em;
    transform: translateY(20px) !important;
    opacity: 0;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.18);
}

body.oberon-trigger-layout-compact #oberon-trigger-button-left.active {
    opacity: 1;
    transform: translateY(0) !important;
}

body.oberon-trigger-layout-compact #oberon-trigger-button-right {
    display: none !important;
}

body.oberon-trigger-layout-floating #oberon-trigger-button-left {
    display: none !important;
}

/* --- Main Chatbot Container --- */
#oberon-chatbot-container {
    position: fixed; /* <<< ALSO FIXED */
    bottom: 20px;
    right: 20px;
    z-index: 1000; /* Above trigger buttons */
    width: 320px; /* Default width */
    max-width: calc(100% - 40px); /* Prevent overflow on small screens */
    background: #fff;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    border-radius: 8px;
    font-family: var(--oberon-brand-body-font, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif); /* Modern font stack */
    display: none; /* Initially hidden - JS will show it */
    flex-direction: column; /* Use flex for layout */
    overflow: hidden; /* Needed for border-radius */
    opacity: 0; /* Start faded out */
    transform: translateY(20px); /* Start slightly lower */
    transition: opacity var(--oberon-chat-open, 0.3s) ease-out, transform var(--oberon-chat-open, 0.3s) ease-out; /* Fade/slide up effect */
    height: auto; /* Let content define height initially */
    max-height: calc(100vh - 40px); /* Limit height to viewport */
    box-sizing: border-box;
}
#oberon-chatbot-container.active { /* Class added by JS to show */
    display: flex; /* Use flex display */
    opacity: 1;
    transform: translateY(0);
}

/* --- Chat Window Header --- */
.oberon-chatbot-header {
    padding: 10px 15px;
    /* background-color set inline via PHP */
    color: #fff; /* Default text color */
    display: flex;
    align-items: center;
    position: relative;
    cursor: default; /* Header not draggable */
    flex-shrink: 0; /* Prevent shrinking */
    box-sizing: border-box;
}
.oberon-chatbot-header-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 10px;
    flex-shrink: 0;
    object-fit: cover; /* Ensure icon covers area */
}
.oberon-chatbot-title-group {
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Allow title group to take available space */
    line-height: 1.2; /* Adjust line height */
    overflow: hidden; /* Prevent text overflow */
}
.oberon-chatbot-title {
    font-size: 16px;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* Add ellipsis if title is too long */
}
.oberon-chatbot-subtitle {
    font-size: 12px;
    opacity: 0.9; /* Slightly less prominent */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* Add ellipsis if subtitle is too long */
}

.oberon-chatbot-title,
.oberon-chatbot-subtitle,
.oberon-lead-heading,
.oberon-lead-subheading {
    font-family: var(--oberon-brand-heading-font, inherit);
}
.oberon-chatbot-close {
    position: absolute;
    top: 5px;        /* Adjusted position */
    right: 10px;       /* Adjusted position */
    cursor: pointer;
    font-size: 24px;   /* Slightly larger */
    line-height: 1;
    color: #fff;      /* Use header text color */
    opacity: 0.8;
    padding: 5px;     /* Easier click target */
    background: none; /* Ensure no background */
    border: none;     /* Ensure no border */
    -webkit-appearance: none; /* Remove default button styles */
    appearance: none;
}
.oberon-chatbot-close:hover {
    opacity: 1;
}

/* --- Chat Messages Area --- */
.oberon-chatbot-messages {
    padding: 15px;
    height: 300px; /* Default height, consider making dynamic or setting via option */
    overflow-y: auto; /* Enable vertical scrolling */
    background: #f9f9f9;
    border-top: 1px solid #eee; /* Separator line */
    border-bottom: 1px solid #eee; /* Separator line */
    flex-grow: 1; /* Allow messages area to expand */
    line-height: 1.4; /* Improved readability */
    box-sizing: border-box;
}
/* Clear floats within messages container */
.oberon-chatbot-messages::after {
    content: "";
    display: table;
    clear: both;
}

/* Individual Chat Message Bubble */
.oberon-message {
    margin-bottom: 12px; /* Spacing between messages */
    padding: 8px 12px;   /* Internal padding */
    border-radius: 12px;  /* More rounded bubbles */
    position: relative;
    font-size: 14px;
    max-width: 85%; /* Prevent messages taking full width */
    word-wrap: break-word; /* Ensure long words break */
    clear: both; /* Ensure messages don't overlap */
    box-shadow: 0 1px 2px rgba(0,0,0,0.05); /* Subtle shadow */
    float: left; /* Default to left alignment */
    box-sizing: border-box;
}
/* Style for the sender label (e.g., "Bot:", "You:") */
.oberon-message strong {
    font-weight: 600;
    margin-right: 4px; /* Add space after label */
}


/* User Message Bubble */
.oberon-user-message {
    background: #e1f5fe; /* Light blue */
    color: #333; /* Darker text */
    margin-left: auto; /* Push bubble to the right */
    float: right; /* Float right */
    border-bottom-right-radius: 4px; /* Slightly flatten one corner */
}

/* Assistant Message Bubble */
.oberon-assistant-message {
    background: #fff3e0; /* Light orange/yellow */
    color: #333; /* Darker text */
    float: left; /* Keep left alignment */
     border-bottom-left-radius: 4px; /* Slightly flatten one corner */
}

/* --- Input Area --- */
.oberon-chatbot-input-area {
    display: flex;
    padding: 15px; /* Increased padding */
    background: #fff;
    align-items: center; /* Vertically align items */
    flex-shrink: 0; /* Prevent shrinking */
    border-top: 1px solid #eee;
    box-sizing: border-box;
}
.oberon-chatbot-input {
    flex: 1; /* Take available space */
    padding: 6px !important; /* Internal padding */
    border: 1px solid #ccc;
    border-radius: 15px; /* Rounded input */
    outline: none;
    font-size: 14px;
    /* margin-right removed */
    resize: none; /* Prevent manual resizing if it were a textarea */
    line-height: 1.4;
    box-sizing: border-box;
}
.oberon-chatbot-input:focus {
    border-color: #999;
    box-shadow: 0 0 0 1px rgba(0, 115, 170, 0.3); /* Subtle focus indicator */
}

/* Send Button */
.oberon-chatbot-send {
    padding: 8px 15px;
    border: none;
    cursor: pointer;
    color: #fff;
    border-radius: 15px; /* Match input rounding */
    font-size: 14px;
    background: #0073aa; /* Default background */
    transition: background-color 0.2s ease;
    font-weight: 500;
    margin-left: 10px; /* Space between input and button */
    flex-shrink: 0; /* Prevent shrinking */
    -webkit-appearance: none; /* Remove default button styles */
    appearance: none;
}
.oberon-chatbot-send:hover {
    background: #005177; /* Darker on hover */
}
.oberon-chatbot-send:disabled {
    background: #ccc; /* Disabled state */
    cursor: not-allowed;
    opacity: 0.7;
}

.oberon-chatbot-end {
    margin-left: 8px;
    padding: 6px 8px;
    background: transparent;
    border: none;
    color: #6b7280;
    font-size: 13px;
    cursor: pointer;
    transition: color 0.2s ease, text-decoration-color 0.2s ease;
    flex-shrink: 0;
}
.oberon-chatbot-end:hover,
.oberon-chatbot-end:focus {
    color: #374151;
    text-decoration: underline;
}
.oberon-chatbot-end[disabled],
.oberon-chatbot-end[aria-disabled="true"] {
    cursor: default;
    opacity: 0.5;
    text-decoration: none;
}

.oberon-chatbot-footnote {
    text-align: center;
    font-size: 11px;
    line-height: 1.4;
    color: #6b7280;
    padding: 10px 12px 14px;
    background: #f3f4f6;
    border-top: 1px solid #e5e7eb;
}


/* --- Loading Indicator Style --- */
.oberon-loading-message {
    font-style: italic;
    color: #555;
    /* Ensure it behaves like other assistant messages */
    background: #f0f0f0; /* Slightly different background */
    text-align: left;
    clear: both;
    float: left;
    border-bottom-left-radius: 4px;
    /* Add subtle animation */
    animation: oberon-fadein 0.5s ease-in-out;
}

@keyframes oberon-fadein {
  from { opacity: 0.5; }
  to { opacity: 1; }
}

/* --- Lead Capture --- */
.oberon-chatbot-lead-capture {
    display: none;
    padding: 20px;
    background: #fff;
}

.oberon-chatbot-container.oberon-lead-active .oberon-chatbot-lead-capture {
    display: block;
}

.oberon-chatbot-container.oberon-lead-active .oberon-chatbot-messages,
.oberon-chatbot-container.oberon-lead-active .oberon-chatbot-input-area {
    display: none;
}

.oberon-chatbot-lead-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.oberon-chatbot-lead-form h2 {
    font-size: 18px;
    margin: 0;
}

.oberon-chatbot-lead-form p {
    margin: 0;
    color: #555;
    font-size: 14px;
}

.oberon-lead-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.oberon-lead-field input {
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 14px;
    box-sizing: border-box;
}

.oberon-lead-field input:focus {
    border-color: #0073aa;
    box-shadow: 0 0 0 1px rgba(0, 115, 170, 0.3);
    outline: none;
}

.oberon-lead-error {
    display: none;
    color: #b32d2e;
    font-size: 13px;
}

.oberon-lead-submit {
    align-self: flex-start;
}