/**
 * Chatbot Frontend Styles
 *
 * @package School_Chatbot
 *
 * All rules are scoped to #scb-chatbot-widget / #scb-contact-modal.
 * Critical visual properties use !important so that theme rules
 * (including theme !important declarations) cannot bleed in.
 */

/* =====================================================================
   Universal box-sizing
   ===================================================================== */
#scb-chatbot-widget *,
#scb-chatbot-widget *::before,
#scb-chatbot-widget *::after,
#scb-contact-modal *,
#scb-contact-modal *::before,
#scb-contact-modal *::after {
	box-sizing: border-box;
}

/* =====================================================================
   Heading reset – themes often set h3 color/border/padding globally
   ===================================================================== */
#scb-chatbot-widget h1, #scb-chatbot-widget h2, #scb-chatbot-widget h3,
#scb-chatbot-widget h4, #scb-chatbot-widget h5, #scb-chatbot-widget h6 {
	border:        none  !important;
	border-bottom: none  !important;
	background:    none  !important;
	padding:       0     !important;
	margin:        0     !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

/* =====================================================================
   Button reset – themes apply bold/uppercase/full-width to all buttons
   ===================================================================== */
#scb-chatbot-widget button {
	font-family:    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
	text-transform: none    !important;
	letter-spacing: normal  !important;
	word-spacing:   normal  !important;
	font-style:     normal  !important;
}

/* =====================================================================
   Widget Container
   ===================================================================== */
#scb-chatbot-widget {
	position:    fixed;
	z-index:     999999;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	font-size:   16px;
	line-height: 1.5;
	color:       #333;
}

#scb-chatbot-widget.scb-widget-bottom-right { bottom: 20px; right: 20px; }
#scb-chatbot-widget.scb-widget-bottom-left  { bottom: 20px; left:  20px; }

/* =====================================================================
   Toggle Button
   ===================================================================== */
#scb-chatbot-widget .scb-toggle-btn {
	width:           60px              !important;
	height:          60px              !important;
	border-radius:   50%               !important;
	background:      var(--scb-primary, #0073aa) !important;
	color:           #fff              !important;
	border:          none              !important;
	cursor:          pointer           !important;
	box-shadow:      0 2px 10px rgba(0,0,0,0.2);
	display:         flex              !important;
	align-items:     center            !important;
	justify-content: center            !important;
	transition:      transform 0.3s ease, box-shadow 0.3s ease;
	padding:         0                 !important;
	margin:          0                 !important;
	font-weight:     normal            !important;
}

#scb-chatbot-widget .scb-toggle-btn:hover {
	transform:  scale(1.1);
	box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

#scb-chatbot-widget .scb-toggle-btn svg {
	width:  26px;
	height: 26px;
	display: block;
}

/* =====================================================================
   Chat Container
   ===================================================================== */
#scb-chatbot-widget .scb-chat-container {
	width:        380px;
	height:       600px;
	background:   #fff;
	border-radius: 10px;
	box-shadow:   0 5px 30px rgba(0,0,0,0.3);
	display:      flex;
	flex-direction: column;
	overflow:     hidden;
	margin-bottom: 15px;
	font-family:  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-size:    14px;
	line-height:  1.5;
	color:        #333;
}

/* =====================================================================
   Chat Header
   ===================================================================== */
#scb-chatbot-widget .scb-chat-header {
	background:  var(--scb-primary, #0073aa) !important;
	color:       #fff;
	padding:     15px 20px;
	flex-shrink: 0;
}

#scb-chatbot-widget .scb-header-content {
	display:         flex;
	justify-content: space-between;
	align-items:     center;
}

#scb-chatbot-widget .scb-chat-header h3 {
	font-size:      18px  !important;
	font-weight:    600   !important;
	color:          var(--scb-bot-name-color, #fff) !important;
	line-height:    1.3   !important;
	margin:         0     !important;
	padding:        0     !important;
	background:     none  !important;
	border:         none  !important;
	letter-spacing: normal !important;
	text-transform: none  !important;
}

/* =====================================================================
   Close Button
   ===================================================================== */
#scb-chatbot-widget .scb-close-btn {
	background:      none !important;
	border:          none !important;
	color:           var(--scb-close-btn-color, #fff) !important;
	font-size:       24px !important;
	cursor:          pointer;
	line-height:     1;
	padding:         0    !important;
	margin:          0    !important;
	width:           30px;
	height:          30px;
	display:         flex !important;
	align-items:     center;
	justify-content: center;
	border-radius:   50%;
	transition:      background 0.2s ease, color 0.2s ease;
	font-weight:     normal !important;
}

#scb-chatbot-widget .scb-close-btn:hover {
	background: rgba(0,0,0,0.15) !important;
}

/* =====================================================================
   Messages Area
   ===================================================================== */
#scb-chatbot-widget .scb-chat-messages {
	flex:       1;
	overflow-y: auto;
	padding:    20px;
	background: #f5f5f5;
}

#scb-chatbot-widget .scb-message {
	margin-bottom: 15px;
	display:       flex;
	animation:     scb-fadeIn 0.3s ease;
}

@keyframes scb-fadeIn {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: translateY(0); }
}

#scb-chatbot-widget .scb-user-message { justify-content: flex-end; }
#scb-chatbot-widget .scb-bot-message  { justify-content: flex-start; }

#scb-chatbot-widget .scb-message-content {
	max-width:    75%;
	padding:      12px 16px;
	border-radius: 18px;
	word-wrap:    break-word;
	line-height:  1.4;
	font-size:    14px;
}

#scb-chatbot-widget .scb-user-message .scb-message-content {
	background:            var(--scb-primary, #0073aa);
	color:                 #fff;
	border-bottom-right-radius: 4px;
}

#scb-chatbot-widget .scb-bot-message .scb-message-content {
	background:           #fff;
	color:                #333;
	border-bottom-left-radius: 4px;
	box-shadow:           0 1px 2px rgba(0,0,0,0.1);
}

#scb-chatbot-widget .scb-message-content a {
	color:           var(--scb-primary, #0073aa);
	text-decoration: underline;
}

#scb-chatbot-widget .scb-message-content ul,
#scb-chatbot-widget .scb-message-content ol {
	margin:       10px 0;
	padding-left: 20px;
}

/* =====================================================================
   Typing Indicator
   ===================================================================== */
#scb-chatbot-widget .scb-typing {
	display: flex;
	gap:     5px;
	padding: 12px 16px;
}

#scb-chatbot-widget .scb-typing span {
	width:         8px;
	height:        8px;
	border-radius: 50%;
	background:    #999;
	display:       inline-block;
	animation:     scb-typing 1.4s infinite;
}

#scb-chatbot-widget .scb-typing span:nth-child(2) { animation-delay: 0.2s; }
#scb-chatbot-widget .scb-typing span:nth-child(3) { animation-delay: 0.4s; }

@keyframes scb-typing {
	0%, 60%, 100% { transform: translateY(0);    opacity: 0.7; }
	30%           { transform: translateY(-10px); opacity: 1;   }
}

/* =====================================================================
   Suggestions
   ===================================================================== */
#scb-chatbot-widget .scb-suggestions {
	padding:    10px 15px;
	display:    flex;
	flex-wrap:  wrap;
	gap:        8px;
	background: #fff;
	border-top: 1px solid #e0e0e0;
	overflow:   hidden;
}

#scb-chatbot-widget .scb-suggestion-btn {
	padding:        6px 12px      !important;
	background:     #f0f0f0       !important;
	border:         1px solid #ddd !important;
	border-radius:  20px          !important;
	font-size:      13px          !important;
	font-weight:    normal        !important;
	cursor:         pointer       !important;
	color:          #333          !important;
	text-transform: none          !important;
	letter-spacing: normal        !important;
	line-height:    1.4           !important;
	display:        inline-block  !important;
	max-width:      100%          !important;
	width:          auto          !important;
	height:         auto          !important;
	text-align:     left          !important;
	white-space:    nowrap        !important;
	overflow:       hidden        !important;
	text-overflow:  ellipsis      !important;
	transition:     all 0.2s ease;
}

#scb-chatbot-widget .scb-suggestion-btn:hover {
	background:  var(--scb-primary, #0073aa) !important;
	color:       #fff                        !important;
	border-color: var(--scb-primary, #0073aa) !important;
}

/* =====================================================================
   Input Area
   ===================================================================== */
#scb-chatbot-widget .scb-chat-input-area {
	background:  #fff;
	border-top:  1px solid #e0e0e0;
	flex-shrink: 0;
}

#scb-chatbot-widget .scb-input-wrapper {
	display:     flex;
	padding:     15px;
	gap:         10px;
	align-items: center;
}

#scb-chatbot-widget .scb-input {
	flex:             1;
	padding:          10px 15px;
	border:           1px solid #ddd !important;
	border-radius:    25px;
	font-size:        14px;
	font-family:      inherit;
	outline:          none;
	transition:       border-color 0.2s ease;
	color:            #333;
	background:       #fff;
	box-shadow:       none    !important;
	-webkit-appearance: none;
	appearance:       none;
	line-height:      1.5;
	display:          block;
	width:            auto;
}

#scb-chatbot-widget .scb-input:focus {
	border-color: var(--scb-primary, #0073aa) !important;
}

#scb-chatbot-widget .scb-send-btn {
	width:           40px  !important;
	height:          40px  !important;
	border-radius:   50%   !important;
	background:      var(--scb-send-btn-bg, var(--scb-primary, #0073aa)) !important;
	color:           var(--scb-send-icon-color, #fff) !important;
	border:          none  !important;
	cursor:          pointer;
	display:         flex  !important;
	align-items:     center !important;
	justify-content: center !important;
	transition:      background 0.2s ease;
	flex-shrink:     0;
	padding:         0     !important;
	margin:          0     !important;
	font-weight:     normal !important;
}

#scb-chatbot-widget .scb-send-btn:hover {
	background: var(--scb-send-btn-hover, var(--scb-secondary, #005177)) !important;
}

#scb-chatbot-widget .scb-send-btn:disabled {
	opacity: 0.5;
	cursor:  not-allowed;
}

#scb-chatbot-widget .scb-send-btn svg {
	width:   20px;
	height:  20px;
	display: block;
	fill:    currentColor;
}

/* =====================================================================
   Contact Modal
   ===================================================================== */
#scb-contact-modal {
	position:        fixed;
	top:             0;
	left:            0;
	width:           100%;
	height:          100%;
	background:      rgba(0,0,0,0.5);
	z-index:         1000000;
	display:         flex;
	align-items:     center;
	justify-content: center;
	animation:       scb-fadeIn 0.3s ease;
	font-family:     -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-size:       14px;
	color:           #333;
}

#scb-contact-modal .scb-modal-content {
	background:    #fff;
	border-radius: 10px;
	width:         90%;
	max-width:     500px;
	max-height:    90vh;
	overflow-y:    auto;
	box-shadow:    0 5px 30px rgba(0,0,0,0.3);
}

#scb-contact-modal .scb-modal-header {
	padding:         20px;
	border-bottom:   1px solid #e0e0e0;
	display:         flex;
	justify-content: space-between;
	align-items:     center;
}

#scb-contact-modal .scb-modal-header h3 {
	margin:         0   !important;
	padding:        0   !important;
	font-size:      20px !important;
	font-weight:    600  !important;
	color:          #333 !important;
	background:     none !important;
	border:         none !important;
	line-height:    1.3  !important;
	text-transform: none !important;
}

#scb-contact-modal .scb-modal-close {
	background:  none   !important;
	border:      none   !important;
	font-size:   28px   !important;
	cursor:      pointer;
	line-height: 1;
	color:       #999   !important;
	transition:  color 0.2s ease;
	padding:     0      !important;
	margin:      0      !important;
	font-weight: normal !important;
}

#scb-contact-modal .scb-modal-close:hover {
	color: #333 !important;
}

/* =====================================================================
   Form fields (shared by pre-chat + contact modal)
   ===================================================================== */
#scb-chatbot-widget .scb-contact-form,
#scb-contact-modal .scb-contact-form {
	padding: 20px;
}

#scb-chatbot-widget .scb-form-field,
#scb-contact-modal .scb-form-field {
	margin-bottom: 20px;
}

#scb-chatbot-widget .scb-form-field label,
#scb-contact-modal .scb-form-field label {
	display:     block;
	margin-bottom: 8px;
	font-weight: 600;
	color:       #333;
	font-size:   14px;
	font-family: inherit;
}

#scb-chatbot-widget .scb-form-field .required,
#scb-contact-modal .scb-form-field .required {
	color: #dc3232;
}

#scb-chatbot-widget .scb-form-input,
#scb-contact-modal .scb-form-input {
	width:       100%;
	padding:     10px 15px;
	border:      1px solid #ddd !important;
	border-radius: 5px;
	font-size:   14px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	outline:     none;
	transition:  border-color 0.2s ease;
	color:       #333         !important;
	background:  #fff         !important;
	display:     block;
	box-shadow:  none         !important;
	-webkit-appearance: none;
	appearance:  none;
	line-height: 1.5;
}

#scb-chatbot-widget .scb-form-input:focus,
#scb-contact-modal .scb-form-input:focus {
	border-color: var(--scb-primary, #0073aa) !important;
}

#scb-chatbot-widget .scb-form-input.scb-input-error,
#scb-contact-modal .scb-form-input.scb-input-error {
	border-color: #d63638 !important;
	background:   #fff8f8 !important;
}

#scb-chatbot-widget .scb-field-error,
#scb-contact-modal .scb-field-error {
	display:     block;
	color:       #d63638;
	font-size:   12px;
	margin-top:  4px;
	font-weight: normal;
	line-height: 1.4;
}

#scb-chatbot-widget textarea.scb-form-input,
#scb-contact-modal textarea.scb-form-input {
	min-height: 100px;
	resize:     vertical;
	display:    block;
}

#scb-chatbot-widget .scb-form-actions,
#scb-contact-modal .scb-form-actions {
	display:         flex;
	gap:             10px;
	justify-content: flex-end;
	margin-top:      20px;
}

#scb-chatbot-widget .scb-submit-btn,
#scb-contact-modal .scb-submit-btn {
	padding:        10px 20px  !important;
	border:         none       !important;
	border-radius:  5px        !important;
	font-size:      14px       !important;
	font-family:    inherit    !important;
	cursor:         pointer;
	transition:     all 0.2s ease;
	background:     var(--scb-primary, #0073aa) !important;
	color:          #fff       !important;
	font-weight:    600        !important;
	line-height:    normal     !important;
	text-transform: none       !important;
	letter-spacing: normal     !important;
	display:        inline-block !important;
	width:          auto       !important;
	height:         auto       !important;
	text-align:     center     !important;
}

#scb-chatbot-widget .scb-submit-btn:hover,
#scb-contact-modal .scb-submit-btn:hover {
	background: var(--scb-secondary, #005177) !important;
}

#scb-chatbot-widget .scb-cancel-btn,
#scb-contact-modal .scb-cancel-btn {
	padding:        10px 20px !important;
	border:         none      !important;
	border-radius:  5px       !important;
	font-size:      14px      !important;
	font-family:    inherit   !important;
	cursor:         pointer;
	transition:     all 0.2s ease;
	background:     #f0f0f0   !important;
	color:          #333      !important;
	font-weight:    normal    !important;
	line-height:    normal    !important;
	text-transform: none      !important;
	letter-spacing: normal    !important;
	display:        inline-block !important;
	width:          auto      !important;
}

#scb-chatbot-widget .scb-cancel-btn:hover,
#scb-contact-modal .scb-cancel-btn:hover {
	background: #e0e0e0 !important;
}

/* =====================================================================
   Responsive
   ===================================================================== */
@media (max-width: 480px) {
	#scb-chatbot-widget .scb-chat-container {
		width:      calc(100vw - 40px);
		height:     calc(100vh - 100px);
		max-height: 600px;
	}

	#scb-chatbot-widget.scb-widget-bottom-right,
	#scb-chatbot-widget.scb-widget-bottom-left {
		bottom: 10px;
		right:  10px;
		left:   10px;
	}

	#scb-contact-modal .scb-modal-content {
		width:  95%;
		margin: 20px;
	}
}

/* =====================================================================
   Shortcode / Inline
   ===================================================================== */
#scb-chatbot-widget.scb-inline {
	position: relative;
	margin:   20px 0;
}

#scb-chatbot-widget.scb-inline .scb-chat-container {
	position:   relative;
	margin:     0;
	box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

#scb-chatbot-widget.scb-inline .scb-toggle-btn {
	display: none;
}

/* =====================================================================
   Pre-chat Form
   ===================================================================== */
#scb-chatbot-widget .scb-prechat-form {
	flex:             1;
	overflow-y:       auto;
	padding:          20px;
	background:       #f5f5f5;
	display:          flex;
	flex-direction:   column;
}

#scb-chatbot-widget .scb-prechat-intro {
	margin-bottom: 16px;
}

#scb-chatbot-widget .scb-prechat-message {
	margin:              0;
	font-size:           14px  !important;
	color:               #555  !important;
	line-height:         1.5;
	background:          #fff  !important;
	padding:             12px 16px;
	border-radius:       18px;
	border-bottom-left-radius: 4px;
	box-shadow:          0 1px 2px rgba(0,0,0,0.1);
	border:              none  !important;
}

#scb-chatbot-widget .scb-prechat-form .scb-contact-form {
	padding: 0;
	flex:    1;
}

#scb-chatbot-widget .scb-prechat-actions {
	justify-content: stretch;
}

#scb-chatbot-widget .scb-prechat-actions .scb-prechat-submit {
	width:         100%  !important;
	padding:       12px  !important;
	font-size:     15px  !important;
	font-weight:   600   !important;
	border-radius: 8px   !important;
}