/* Tilly - VTT AI Tutor
   Panel is shared by the inline shortcode and the floating launcher.
   Mobile first. */

:root{
	--tilly-navy:#2B2952;
	--tilly-coral:#FF6B5B;
	--tilly-coral-dk:#D94F40;
	--tilly-teal:#5DCFCF;
	--tilly-ink:#3A3A4A;
	--tilly-line:#E7E7F0;
}

/* ---------- the panel ---------- */
.vtt-chem{
	max-width:820px;
	margin:36px auto;
	border:1px solid var(--tilly-line);
	border-radius:14px;
	background:#fff;
	overflow:hidden;
	font-family:Nunito,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
	box-shadow:0 2px 14px rgba(43,41,82,.06);
}
.vtt-chem-head{
	display:flex;align-items:center;gap:10px;
	padding:12px 16px;
	background:var(--tilly-navy);color:#fff;
}
.vtt-chem-face{
	width:36px;height:36px;flex:0 0 auto;
	border-radius:50%;
	background:#fff center/108% no-repeat;
	box-shadow:0 0 0 2px rgba(93,207,207,.55);
}
.vtt-chem-headtext{display:flex;flex-direction:column;line-height:1.25;min-width:0;}
.vtt-chem-name{font-family:Montserrat,sans-serif;font-weight:700;font-size:15px;}
.vtt-chem-sub{font-size:12px;opacity:.72;}
.vtt-chem-close{
	margin-left:auto;flex:0 0 auto;
	width:34px;height:34px;
	display:none;align-items:center;justify-content:center;
	border:0;border-radius:50%;
	background:rgba(255,255,255,.12);color:#fff;
	font-size:19px;line-height:1;cursor:pointer;
}
.vtt-chem-close:hover{background:rgba(255,255,255,.24);}

.vtt-chem-log{
	padding:16px 16px 4px;
	max-height:460px;overflow-y:auto;
	-webkit-overflow-scrolling:touch;
	font-size:16px;line-height:1.6;color:var(--tilly-ink);
}
.vtt-chem-msg{margin:0 0 14px;display:flex;align-items:flex-end;gap:8px;}
.vtt-chem-msg .b{padding:11px 15px;border-radius:14px;max-width:86%;}
.vtt-chem-msg.me{justify-content:flex-end;}
.vtt-chem-msg.me .b{background:var(--tilly-coral);color:#fff;border-bottom-right-radius:5px;}
.vtt-chem-msg.her .b{background:#F5F5FA;color:#1A1A2E;border-bottom-left-radius:5px;}
.vtt-chem-msg.her .b p{margin:0 0 10px;}
.vtt-chem-msg.her .b p:last-child{margin-bottom:0;}
.vtt-chem-msg.her .b a{color:var(--tilly-coral-dk);font-weight:700;text-decoration:none;border-bottom:1px solid rgba(255,107,91,.4);}
.vtt-chem-msg.her .b a:hover{color:#B93E31;}
.vtt-chem-msg.err .b{background:#FDECEA;color:#B93E31;}
.vtt-chem-av{
	width:28px;height:28px;flex:0 0 auto;
	border-radius:50%;background:#fff center/110% no-repeat;
	border:1px solid var(--tilly-line);
	margin-bottom:2px;
}

/* thinking */
.vtt-chem-msg.her.vtt-chem-typing .b{background:transparent;padding:2px 0 2px 2px;display:flex;align-items:center;gap:10px;max-width:100%;}
.vtt-chem-typing .vtt-chem-av{display:none;}
.vtt-chem-think{height:76px;width:auto;display:block;}
.vtt-chem-think-txt{color:#9A9AAA;font-style:italic;font-size:15px;}

.vtt-chem-form{
	display:flex;gap:9px;align-items:flex-end;
	padding:11px 16px;border-top:1px solid #EFEFF5;background:#FCFCFE;
}
.vtt-chem-form textarea{
	flex:1 1 auto;resize:none;
	padding:11px 14px;
	border:1px solid #DCDCE6;border-radius:10px;
	font:inherit;font-size:16px;line-height:1.45;
	max-height:140px;background:#fff;color:var(--tilly-ink);
}
.vtt-chem-form textarea:focus{border-color:var(--tilly-coral);outline:3px solid rgba(255,107,91,.2);}
.vtt-chem-form button{
	flex:0 0 auto;
	padding:12px 22px;border:0;border-radius:10px;
	background:var(--tilly-coral);color:#fff;cursor:pointer;
	font-family:Montserrat,sans-serif;font-weight:700;font-size:15px;
	transition:background .15s ease,transform .15s ease;
}
.vtt-chem-form button:hover{background:var(--tilly-coral-dk);transform:translateY(-1px);}
.vtt-chem-form button:disabled{opacity:.5;cursor:default;transform:none;}

.vtt-chem-foot{
	margin:0;padding:0 16px 13px;
	font-size:12.5px;color:#8A8A9A;background:#FCFCFE;line-height:1.45;
}

@media(max-width:600px){
	.vtt-chem{margin:24px 0;border-radius:12px;}
	.vtt-chem-form{flex-direction:column;align-items:stretch;}
	.vtt-chem-form button{width:100%;padding:14px 24px;}
}

/* ---------- floating launcher ---------- */
.vtt-chem-float{
	position:fixed;
	right:max(18px,env(safe-area-inset-right));
	bottom:max(14px,env(safe-area-inset-bottom));
	z-index:99998;
	font-family:Nunito,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}
.vtt-chem-float button.vtt-chem-launch,
.vtt-chem-launch{
	display:flex;align-items:center;gap:10px;
	margin-left:auto;
	padding:6px;
	border:0;border-radius:999px;
	background:#fff !important;
	background-image:none !important;
	color:var(--tilly-navy) !important;
	box-shadow:0 6px 22px rgba(43,41,82,.22);
	cursor:pointer;
	transition:transform .18s ease,box-shadow .18s ease;
}
.vtt-chem-float button.vtt-chem-launch:hover,
.vtt-chem-float button.vtt-chem-launch:focus,
.vtt-chem-launch:hover{
	background:#fff !important;
	background-image:none !important;
	transform:translateY(-2px);
	box-shadow:0 10px 26px rgba(43,41,82,.28);
}
.vtt-chem-launch:focus-visible{outline:3px solid rgba(255,107,91,.55);outline-offset:3px;}
.vtt-chem-launch img{
	width:58px;height:58px;display:block;
	border-radius:50%;object-fit:cover;
}
.vtt-chem-launch-label{
	display:none;
	padding-right:16px;
	font-family:Montserrat,sans-serif;font-weight:700;font-size:15px;
	color:var(--tilly-navy);white-space:nowrap;
}
@media(min-width:820px){
	.vtt-chem-launch-label{display:block;}
}

/* panel when floating */
.vtt-chem-float .vtt-chem-panel{
	margin:0 0 12px;
}
.vtt-chem-float .vtt-chem{
	width:min(380px,calc(100vw - 28px));
	margin:0;
	border-radius:16px;
	box-shadow:0 18px 48px rgba(43,41,82,.26);
}
.vtt-chem-float .vtt-chem-close{display:flex;}
.vtt-chem-float .vtt-chem-log{max-height:min(52vh,420px);min-height:180px;}
.vtt-chem-float .vtt-chem-form{flex-direction:row;align-items:flex-end;}
.vtt-chem-float .vtt-chem-form button{width:auto;padding:12px 20px;}
.vtt-chem-panel[hidden]{display:none;}

@media(max-width:600px){
	.vtt-chem-float{left:max(10px,env(safe-area-inset-left));right:max(10px,env(safe-area-inset-right));}
	.vtt-chem-float .vtt-chem{width:100%;}
	.vtt-chem-float .vtt-chem-log{max-height:calc(100dvh - 320px);min-height:150px;}
	.vtt-chem-float .vtt-chem-form{flex-direction:row;}
	.vtt-chem-float .vtt-chem-form button{padding:12px 18px;}
	.vtt-chem-launch img{width:54px;height:54px;}
}

/* keep her out of the way while a video is fullscreen */
:fullscreen ~ .vtt-chem-float,
body:has(:fullscreen) .vtt-chem-float{display:none;}

@media(prefers-reduced-motion:reduce){
	.vtt-chem-launch,.vtt-chem-launch:hover{transition:none;transform:none;}
}
/* answer formatting */
.vtt-chem-msg.her .b ul{margin:0 0 10px;padding-left:20px;}
.vtt-chem-msg.her .b ul:last-child{margin-bottom:0;}
.vtt-chem-msg.her .b li{margin:0 0 5px;}
.vtt-chem-msg.her .b code{
	background:#EDEDF6;border-radius:5px;
	padding:1px 5px;font-size:.92em;
	font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
.vtt-chem-code{
	background:#EDEDF6;border-radius:8px;
	padding:10px 12px;margin:0 0 10px;
	overflow-x:auto;white-space:pre-wrap;word-break:break-word;
	font-size:14px;line-height:1.5;
	font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}