/*
Design by http://www.bluewebtemplates.com
Released for free under a Creative Commons Attribution 3.0 License
*/

@charset "utf-8";
body { margin:0; padding:0; width:100%; color:#5f5f5f; font:normal 12px/1.8em Arial, Helvetica, sans-serif;}
html, .main { padding:0; margin:0; background-color:#fff;}
.clr { clear:both; padding:0; margin:0; width:100%; font-size:0px; line-height:0px;}
h1 { margin:0; padding:32px 0 0; color:#fff; font:normal 40px/1.2em Arial, Helvetica, sans-serif; text-transform:uppercase; text-align:center;}
h1 a, h1 a:hover { color:#fff; text-decoration:none;}
h1 small { font:normal 16px/1.2em Arial, Helvetica, sans-serif;}
h2 { font:normal 24px Arial, Helvetica, sans-serif; color:#4b4b4b; padding:8px 0; margin:8px 0;}
p { margin:8px 0; padding:0 0 8px 0; font:normal 12px/1.8em Arial, Helvetica, sans-serif;}
a { color:#00b2e8; text-decoration:underline;}

.header, .content, .menu_nav, .fbg, .footer, form, ol, ol li, ul, .content .mainbar, .content .sidebar { margin:0; padding:0;}
.content_resize, .fbg_resize, .footer_resize { margin:0 auto; padding:0 40px; width:890px;}

/* header */
.header { background:url(images/header_bg.jpg) repeat-x center top;}
.header_resize { margin:0 auto; padding:0; width:970px; height:337px;}
.header .logo { padding:61px 0 0 318px; float:left; width:auto;}

/* menu */
.menu_nav { padding-left:20px; float:left; width:auto;}
.menu_nav ul { list-style:none; padding-top:14px;}
.menu_nav ul li { margin:0 4px; float:left;}
.menu_nav ul li a { display:block; margin:0; padding:20px 24px; color:#fff; text-decoration:none;}
.menu_nav ul li.active a, .menu_nav ul li a:hover { color:#00b2e8; background:url(images/menu_a.gif) no-repeat center top;}

/* content */
.content_resize { padding-right:0; padding-top:16px; width:930px;}
.content .mainbar { float:left; width:630px;}

.content .mainbar .article, .content .sidebar .gadget { margin:0; padding:0 0 16px 0;}
.content .sidebar { float:right; width:276px;}
ul.sb_menu, ul.ex_menu { margin:0; padding:0; list-style:none; color:#959595;}
ul.sb_menu li, ul.ex_menu li { margin:0; background:url(images/li.gif) no-repeat 0 12px;}
ul.sb_menu li { padding:4px 0; border-bottom:1px solid #e3e3e3; width:220px;}
ul.ex_menu li { padding:4px 0 8px;}
ul.sb_menu li a, ul.ex_menu li a { color:#5f5f5f; text-decoration:none; margin-left:-16px; padding-left:16px;}
ul.sb_menu li a:hover, ul.ex_menu li a:hover { color:#00b2e8; background:url(images/li_a.gif) no-repeat left center;}
ul.sb_menu li a:hover { text-decoration:underline;}
ul.ex_menu li a:hover { text-decoration:none;}

/* subpages */
.content .mainbar .comment { margin:0; padding:16px 0 0 0;}
.content .mainbar .comment img.userpic { border:1px solid #dedede; margin:10px 16px 0 0; padding:0; float:left;}

/* fbg */
.fbg_resize { padding:24px 40px;}
.fbg img { border:1px solid #d6d6d6;}
.fbg .col { margin:0; float:left;}
.fbg .c1 { padding:0 16px 0 0; width:296px;}
.fbg .c2 { padding:0 16px; width:240px;}
.fbg .c3 { padding:0 0 0 16px; width:290px;}
.fbg .c1 img { margin:8px 16px 4px 0; float:left;}

/* footer */
.footer { padding:16px; background-color:#434242;}
.footer p.lf { margin:0; padding:4px 0; float:right; width:auto; line-height:1.5em; color:#9e9d9d;}
ul.fmenu { margin:0; padding:2px 0; list-style:none; float:left; width:auto;}
ul.fmenu li { margin:0; padding:0 4px; float:left;}
ul.fmenu li a { color:#9e9d9d; text-decoration:none; padding:2px 6px;}
ul.fmenu li a:hover, ul.fmenu li.active a { color:#fff;}
ul.fmenu li a:hover { text-decoration:underline;}

/* form */
ol { list-style:none;}
ol li { display:block; clear:both;}
ol li label { display:block; margin:0; padding:16px 0 0 0;}
ol li input.text { width:480px; border:1px solid #c0c0c0; margin:2px 0; padding:5px 2px; height:16px; background:#fff;}
ol li textarea { width:480px; border:1px solid #c0c0c0; margin:2px 0; padding:2px; background:#fff;}
ol li .send { margin:16px 0 0 0;}

/* --- Floating Button & Container --- */
#nubby-chatbot-container {
    /* Fixed to viewport, bottom-right */
    position: fixed !important;
    bottom: 20px !important;
    right: 20px !important;
    z-index: 1000;
}

#nubby-toggle-btn {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    padding: 0;
    margin: 0;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    transition: transform 0.2s;
    display: inline-block;
    background: none;
    border: none;
    overflow: hidden;
}

#nubby-toggle-btn:hover {
    transform: scale(1.20);
}

#nubby-toggle-btn img {
    display: block;
    width: 100%; 
    height: 100%; 
    object-fit: contain;
}

/* --- Chat Popup Window (Koddee inspired) --- */
#nubby-chat-popup {
    width: 380px;
    max-width: 90vw;
    height: 600px;
    max-height: 80vh;
    background-color: #ffffff;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;

    /* Position relative to the fixed container */
    position: absolute;
    bottom: 80px;
    right: 0;

    font-family: Inter, Arial, sans-serif;
    overflow: hidden;
    
    /* ADD TRANSITION FOR SMOOTH EXPANSION */
    transition: width 0.3s ease, height 0.3s ease, right 0.3s ease, bottom 0.3s ease;
}

/* --- NEW: EXPANDED STATE --- */
#nubby-chat-popup.expanded {
    width: 600px; 
    height: 700px; 
    max-width: 95vw;
    max-height: 90vh;
    /* Reposition slightly if needed, or keep same offset */
    bottom: 20px;
    right: 20px;
}

/* Responsive adjustments for mobile view */
@media (max-width: 600px) {
    #nubby-chat-popup {
        /* *** FIX: REMOVED full-screen overrides so zoom button can control size *** */
        /* width: 100vw; */
        /* height: 100vh; */
        /* bottom: 0; */
        /* right: 0; */
        border-radius: 0;
        max-width: 100%;
        max-height: 100%;
    }
    #nubby-toggle-btn {
        display: none !important;
    }
    
    /* FIX: Ensure the button is visible and clickable on small screens */
	#zoom-toggle-btn {
        display: block !important; 
        pointer-events: auto !important; 
    }
}

#nubby-chat-popup.hidden {
    display: none !important;
}

/* --- Header --- */
.chat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 18px;
    border-bottom: 1px solid #eee;
    color: #333;
    font-weight: 600;
}

/* --- NEW ZOOM BUTTON STYLES --- */
#zoom-toggle-btn {
    background: none;
    border: none;
    color: #999;
    font-size: 18px;
    margin-right: 10px;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}
/* Ensure standard header icons also have cursor pointer */
.chat-header .header-icon {
    cursor: pointer;
}
/* --- END NEW ZOOM BUTTON STYLES --- */

.chat-header .header-left,
.chat-header .header-right {
    display: flex;
    align-items: center;
}

.chat-header .header-icon {
    font-size: 18px;
    margin-right: 10px;
    color: #999;
    cursor: pointer;
}

.chat-header .header-title {
    font-size: 17px;
    margin-left: -5px;
}

.chat-header .header-close-btn {
    background: none;
    border: none;
    font-size: 24px;
    color: #999;
    cursor: pointer;
    margin-left: 10px;
    padding: 0 5px;
}

/* --- Chat Body (main content area) --- */
.chat-body {
    flex-grow: 1;
    padding: 15px;
    overflow-y: auto;
    background-color: #fcfcfc;
    display: flex;
    flex-direction: column;
}

/* --- NEW: Row container for horizontal prompts --- */
.prompt-row {
    display: flex;
    justify-content: space-between;
    gap: 10px; /* Space between the two buttons */
    margin-bottom: 10px; /* Space below the row */
}


/* --- Intro Section with Nubby Icon --- */
.chat-intro {
    text-align: center;
    padding: 10px 0 5px 0;
}

.nubby-intro-icon {
    width: 272px;
    height: 150px;
    margin-bottom: 10px;
}

.chat-intro .greeting {
    font-size: 18px;
    font-weight: bold;
    color: #333;
    margin-bottom: 0;
}

.chat-intro .prompt-text {
    font-size: 14px;
    color: #555;
    margin-top: 0;
}

/* --- Suggested Prompt Button (MODIFIED FOR ROW LAYOUT) --- */
.suggested-prompt {
    display: flex;
    align-items: center;
    background-color: #f0f0f0;
    color: #333;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 12px 15px;
    
    /* Removed margin-bottom and full width from here */
    flex-grow: 1; /* Allows buttons to take equal space in .prompt-row */
    
    font-size: 14px;
    cursor: pointer;
    text-align: left;
    transition: background-color 0.2s, border-color 0.2s;
    width: auto; 
}

.suggested-prompt:hover {
    background-color: #e5e5e5;
    border-color: #d0d0d0;
}

.suggested-prompt .arrow-icon {
    font-size: 16px;
    margin-right: 10px;
    color: #af0d0b;
}

/* --- Actual Chat Messages Container --- */
.chat-messages {
    flex-grow: 1;
    overflow-y: auto;
    padding-top: 10px;
}

.message {
    padding: 10px 15px;
    border-radius: 18px;
    margin-bottom: 10px;
    max-width: 85%;
    line-height: 1.4;
    word-wrap: break-word;
    font-size: 14px;
}

.message.user {
    background-color: #d3373a;
    color: white;
    margin-left: auto;
    border-bottom-right-radius: 5px;
}

.message.bot {
    background-color: #e9e9eb;
    color: #333;
    margin-right: auto;
    border-bottom-left-radius: 5px;
}

/* --- Input Area --- */
.chat-input-area {
    display: flex;
    padding: 10px 15px;
    border-top: 1px solid #eee;
    background-color: #fff;
    display: flex !important;
}


#user-input {
    flex-grow: 1;
    padding: 10px 15px;
    border: 1px solid #ddd;
    border-radius: 20px;
    margin-right: 8px;
    font-size: 14px;
}

#user-input:focus {
    outline: none;
    border-color: #d3373a;
    box-shadow: 0 0 0 1px #d3373a;
}

#send-btn {
    width: 40px;
    height: 40px;
    background-color: #d3373a;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.2s;
}

#send-btn:hover {
    background-color: #ef3d40;
}

#send-btn svg {
    width: 20px;
    height: 20px;
}

/* --- FIX NUBBY IMAGE CROPPING (extra safety) --- */
#nubby-toggle-btn img {
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

/* --- STYLE: Bold and Black for Clickable Prompts in Bot Messages --- */
.message.bot .clickable-prompt {
    color: #18b5ec;
    font-weight: bold; /* Make the text bold */
    text-decoration: none; /* Remove default link underline */
    cursor: pointer;
}

.message.bot .clickable-prompt:hover {
	color: #d3373a;
    text-decoration: underline; /* Optional: Add underline on hover for UX */
}

/* --- NEW: Loading Indicator Styles --- */
.loading-message {
    background-color: #e9e9eb;
    color: #333;
    padding: 10px 15px;
    border-radius: 18px;
    margin-bottom: 10px;
    max-width: 85px; /* Keep it small */
    margin-right: auto;
    border-bottom-left-radius: 5px;
}

/* Spinner Definition */
.loading-spinner {
    border: 3px solid #f3f3f3; /* Light grey base */
    border-top: 3px solid #af0d0b; /* Nub News red spinner color */
    border-radius: 50%;
    width: 16px;
    height: 16px;
    animation: spin 1s linear infinite; /* Apply animation */
}

/* Keyframe Animation */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* --- FIX FOR BOLD/ITALIC IN MESSAGE BUBBLES (Mandatory Override) --- */
.message b, .message strong {
    font-weight: bold !important;
    font-style: normal !important;
}
.message i, .message em {
    font-style: italic !important;
    font-weight: normal !important;
}