/**
 * Public Chat Widget Styles — OpenAI Assistant Index
 *
 * CSS custom properties (--sc-primary, --sc-primary-text) are set at runtime
 * by chat.js using values from the Appearance settings page.
 */

/* ─── Custom Properties ─────────────────────────────────────── */

:root {
	--sc-primary:       #1a3a5c;
	--sc-primary-text:  #ffffff;
	--sc-hover-bg:      #ffffff;
	--sc-hover-text:    #1a3a5c;
	--sc-radius:        12px;
	--sc-radius-sm:     8px;
	--sc-radius-pill:   999px;
	--sc-shadow:        0 8px 32px rgba(0, 0, 0, 0.18);
	--sc-shadow-sm:     0 2px 8px rgba(0, 0, 0, 0.12);
	--sc-panel-w:       360px;
	--sc-panel-h:       640px;
	--sc-z:             9999;
	--sc-font:          -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--sc-speed:         0.2s;
}

/* ─── Widget Root ─────────────────────────────────────────────── */

#sc-chat-widget {
	position:  fixed;
	z-index:   var(--sc-z);
	bottom:    24px;
	right:     24px;
	display:   flex;
	flex-direction: column;
	align-items: flex-end;
	gap:       12px;
	font-family: var(--sc-font);
	font-size: 15px;
	line-height: 1.45;
	box-sizing: border-box;
}

#sc-chat-widget[data-position="bottom-left"] {
	right: auto;
	left:  24px;
	align-items: flex-start;
}

/* ─── Launcher Button ─────────────────────────────────────────── */

.sc-chat__launcher {
	display:         flex;
	align-items:     center;
	gap:             8px;
	padding:         12px 20px;
	background:      var(--sc-primary);
	color:           var(--sc-primary-text);
	border:          none;
	border-radius:   var(--sc-radius-pill);
	box-shadow:      var(--sc-shadow);
	cursor:          pointer;
	font-family:     var(--sc-font);
	font-size:       15px;
	font-weight:     600;
	letter-spacing:  -0.01em;
	transition:      transform var(--sc-speed) ease, box-shadow var(--sc-speed) ease, opacity var(--sc-speed) ease;
	white-space:     nowrap;
}

.sc-chat__launcher:hover {
	transform:   translateY(-2px);
	box-shadow:  0 12px 36px rgba(0, 0, 0, 0.22);
	background:  var(--sc-hover-bg);
	color:       var(--sc-hover-text);
}

.sc-chat__launcher:active {
	transform: translateY(0);
}

.sc-chat__launcher-icon {
	font-size: 18px;
	line-height: 1;
}

.sc-chat__launcher-icon img {
	width:        22px;
	height:       22px;
	object-fit:   contain;
	vertical-align: middle;
	border-radius: 2px;
	display:      block;
}

/* Hide launcher when panel is open */
.sc-chat--open .sc-chat__launcher {
	opacity:        0;
	pointer-events: none;
	transform:      scale(0.85);
}

/* ─── Chat Panel ──────────────────────────────────────────────── */

.sc-chat__panel {
	display:          flex;
	flex-direction:   column;
	width:            var(--sc-panel-w);
	max-height:       var(--sc-panel-h);
	background:       #fff;
	border-radius:    var(--sc-radius);
	box-shadow:       var(--sc-shadow);
	overflow:         hidden;
	transform-origin: bottom right;
	transform:        scale(0.9) translateY(16px);
	opacity:          0;
	pointer-events:   none;
	transition:       transform var(--sc-speed) cubic-bezier(0.34, 1.56, 0.64, 1),
	                  opacity   var(--sc-speed) ease;
}

#sc-chat-widget[data-position="bottom-left"] .sc-chat__panel {
	transform-origin: bottom left;
}

.sc-chat--open .sc-chat__panel {
	transform:      scale(1) translateY(0);
	opacity:        1;
	pointer-events: all;
}

/* ─── Panel Header ────────────────────────────────────────────── */

.sc-chat__header {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	padding:         14px 16px;
	background:      var(--sc-primary);
	color:           var(--sc-primary-text);
	flex-shrink:     0;
}

.sc-chat__header-left {
	display:     flex;
	align-items: center;
	gap:         8px;
	min-width:   0;
}

.sc-chat__header-icon {
	width:        24px;
	height:       24px;
	object-fit:   contain;
	border-radius: 3px;
	flex-shrink:  0;
}

.sc-chat__title {
	font-size:    15px;
	font-weight:  700;
	letter-spacing: -0.01em;
}

.sc-chat__header-btns {
	display:     flex;
	align-items: center;
	gap:         2px;
}

.sc-chat__close,
.sc-chat__header-btn {
	background:   transparent;
	border:       none;
	color:        var(--sc-primary-text);
	cursor:       pointer;
	padding:      4px 6px;
	font-size:    18px;
	line-height:  1;
	border-radius: var(--sc-radius-sm);
	opacity:      0.8;
	transition:   opacity var(--sc-speed);
}

.sc-chat__close:hover,
.sc-chat__header-btn:hover {
	opacity: 1;
}

/* ─── Messages Area ───────────────────────────────────────────── */

.sc-chat__messages {
	flex:          1 1 auto;
	overflow-y:    auto;
	padding:       16px 14px;
	display:       flex;
	flex-direction: column;
	gap:           10px;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
}

.sc-chat__messages::-webkit-scrollbar {
	width: 4px;
}
.sc-chat__messages::-webkit-scrollbar-track {
	background: transparent;
}
.sc-chat__messages::-webkit-scrollbar-thumb {
	background: #ddd;
	border-radius: 4px;
}

/* ─── Message Bubbles ─────────────────────────────────────────── */

.sc-msg {
	display:    flex;
	max-width:  88%;
}

.sc-msg--bot {
	align-self: flex-start;
}

.sc-msg--user {
	align-self:    flex-end;
	flex-direction: row-reverse;
}

.sc-msg__bubble {
	padding:       10px 13px;
	border-radius: var(--sc-radius-sm);
	font-size:     14px;
	line-height:   1.5;
	word-break:    break-word;
}

.sc-msg--bot .sc-msg__bubble {
	background:    #f1f3f5;
	color:         #222;
	border-radius: 4px var(--sc-radius-sm) var(--sc-radius-sm) var(--sc-radius-sm);
}

.sc-msg--user .sc-msg__bubble {
	background:    var(--sc-primary);
	color:         var(--sc-primary-text);
	border-radius: var(--sc-radius-sm) 4px var(--sc-radius-sm) var(--sc-radius-sm);
}

/* Links inside bubbles */
.sc-msg__bubble a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Sources label */
.sc-msg__sources-label {
	margin:         8px 0 4px;
	font-size:      11px;
	font-weight:    600;
	color:          #aaa;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

/* Sources list */
.sc-msg__sources {
	margin-top:     8px;
	padding-top:    8px;
	border-top:     1px solid rgba(0,0,0,0.08);
	list-style:     none;
	padding-left:   0;
	margin-bottom:  0;
	display:        flex;
	flex-direction: column;
	gap:            4px;
}

.sc-msg__sources li a {
	font-size:       12px;
	color:           #555;
	text-decoration: none;
	display:         flex;
	align-items:     baseline;
	gap:             4px;
}

.sc-msg__sources li a::before {
	content:     "→";
	flex-shrink: 0;
	font-size:   11px;
	color:       #aaa;
}

.sc-msg__sources li a:hover {
	color: var(--sc-primary);
	text-decoration: underline;
}

/* Support flow cancel link */
.sc-support-cancel {
	display:         block;
	margin-top:      5px;
	font-size:       12px;
	color:           #999;
	text-decoration: none;
	opacity:         0.8;
}

.sc-support-cancel:hover {
	color:   #c00;
	opacity: 1;
	text-decoration: none;
}

/* ─── Typing Indicator ────────────────────────────────────────── */

.sc-chat__typing {
	display:    flex;
	align-items: center;
	padding:    0 14px 10px;
	gap:        4px;
	flex-shrink: 0;
}

.sc-chat__typing span {
	width:         7px;
	height:        7px;
	border-radius: 50%;
	background:    #bbb;
	animation:     sc-bounce 1.2s ease-in-out infinite;
}

.sc-chat__typing span:nth-child(2) { animation-delay: 0.2s; }
.sc-chat__typing span:nth-child(3) { animation-delay: 0.4s; }

@keyframes sc-bounce {
	0%, 80%, 100% { transform: scale(0.7); opacity: 0.5; }
	40%            { transform: scale(1);   opacity: 1;   }
}

/* ─── Input Form ──────────────────────────────────────────────── */

.sc-chat__form {
	display:     flex;
	align-items: flex-end;
	gap:         8px;
	padding:     10px 12px;
	border-top:  1px solid #eee;
	flex-shrink: 0;
	background:  #fff;
}

.sc-chat__input {
	flex:         1 1 auto;
	resize:       none;
	border:       1px solid #ddd;
	border-radius: var(--sc-radius-sm);
	padding:      8px 10px;
	font-family:  var(--sc-font);
	font-size:    14px;
	line-height:  1.4;
	max-height:   96px; /* ~4 lines */
	overflow-y:   auto;
	outline:      none;
	transition:   border-color var(--sc-speed);
	box-sizing:   border-box;
}

.sc-chat__input:focus {
	border-color: var(--sc-primary);
}

.sc-chat__input::placeholder {
	color: #aaa;
}

.sc-chat__send {
	flex-shrink:   0;
	padding:       8px 14px;
	background:    var(--sc-primary);
	color:         var(--sc-primary-text);
	border:        none;
	border-radius: var(--sc-radius-sm);
	font-family:   var(--sc-font);
	font-size:     14px;
	font-weight:   600;
	cursor:        pointer;
	transition:    opacity var(--sc-speed);
	white-space:   nowrap;
}

.sc-chat__send:hover:not(:disabled) {
	opacity: 0.88;
}

.sc-chat__send:disabled {
	opacity: 0.45;
	cursor:  not-allowed;
}

/* ─── Inline / Shortcode Mode ─────────────────────────────────── */

/* When rendered inline via shortcode, no fixed positioning */
.sc-chat--inline {
	position:  static;
	width:     100%;
	max-width: var(--sc-panel-w);
	margin:    0 auto;
}

.sc-chat--inline .sc-chat__launcher {
	display: none;
}

.sc-chat--inline .sc-chat__header-clear {
	display: none;
}

.sc-chat--inline .sc-chat__panel {
	transform:      none;
	opacity:        1;
	pointer-events: all;
	max-height:     var(--sc-panel-h);
	width:          100%;
}

/* ─── Responsive ──────────────────────────────────────────────── */

@media (max-width: 480px) {
	#sc-chat-widget {
		bottom: 0;
		right:  0;
		left:   0;
		align-items: stretch;
	}

	#sc-chat-widget[data-position="bottom-left"] {
		right: 0;
		left:  0;
	}

	.sc-chat__launcher {
		position: fixed;
		bottom:   16px;
		right:    16px;
		left:     auto;
		border-radius: var(--sc-radius-pill);
	}

	.sc-chat--open .sc-chat__launcher {
		display: none;
	}

	.sc-chat__panel {
		position:      fixed;
		bottom:        0;
		left:          0;
		right:         0;
		width:         100%;
		max-height:    85vh;
		border-radius: var(--sc-radius) var(--sc-radius) 0 0;
		transform-origin: bottom center;
	}
}