/* ===========================================
   INSTABOT BRANDING - COPILOT WIDGET
   =========================================== */

/* ===== OVERRIDE TAILWIND PRIMARY COLOR FOR LINKS ===== */
/* Chainlit uses Tailwind's text-primary which reads from --primary HSL var.
   We override it at the highest specificity possible. */
:root {
    --primary: 24 95% 48% !important;
    --primary-color: #ea580c !important;
}

/* Force white on any element with text-primary class */
*[class~="text-primary"] {
    color: white !important;
    --tw-text-opacity: 1 !important;
}

/* ===== WHITE BACKGROUND - CRITICAL ===== */
body, html, main, #root, 
[class*="widget"], [class*="Widget"],
[class*="panel"], [class*="Panel"],
[class*="container"], [class*="Container"],
[class*="chat"], [class*="Chat"],
section, article, div {
    background: white !important;
    background-color: white !important;
}

/* ===== HIDE CHAINLIT LOGO ===== */
svg[class*="logo"],
img[class*="logo"],
[class*="Logo"],
[class*="chainlit"],
[class*="Chainlit"],
header svg:first-of-type,
header img:first-of-type,
header a svg {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
}

/* ===== HIDE HEADER TEXT ===== */
header > div:first-child > a,
header > div:first-child > span,
header a[href="/"],
header a:first-of-type {
    font-size: 0 !important;
    color: transparent !important;
}

/* ===== ADD INSTABOT BRANDING ===== */
header {
    position: relative !important;
    background: white !important;
}

header::before {
    content: "🤖 Instabot" !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #ea580c !important;
    position: absolute !important;
    left: 16px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 100 !important;
}

/* ===== HIDE FOOTER / BUILT WITH ===== */
footer,
[class*="footer"],
[class*="Footer"],
[class*="watermark"],
[class*="Watermark"],
[class*="builtWith"],
[class*="built-with"],
a[href*="chainlit.io"],
a[href*="chainlit"],
div:has(> a[href*="chainlit"]) {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
}

/* ===== ORANGE ACCENT ===== */
button[type="submit"],
[class*="send-button"],
[class*="SendButton"] {
    background: #ea580c !important;
    background-color: #ea580c !important;
    border-color: #ea580c !important;
}

button[type="submit"]:hover {
    background: #c2410c !important;
}

/* ===== LINK COLORS ===== */
/* NUCLEAR: every possible way to target Chainlit link pills */
a.text-primary,
a[class*="text-primary"],
a[class*="primary"][href],
a[node],
a[href^="/"] {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* Links inside message bubbles */
div[role="article"] a,
div.leading-7 a,
div[class*="leading-7"] a,
div[class*="whitespace-pre-wrap"] a,
div[class*="break-words"] a {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

input:focus, textarea:focus {
    border-color: #ea580c !important;
    outline-color: #ea580c !important;
}

/* ===== MESSAGE AREA ===== */
[class*="message"],
[class*="Message"] {
    background: white !important;
}

/* ===== COPILOT BUBBLE BUTTON - ORANGE ===== */
button[class*="bubble"],
button[class*="Bubble"],
button[class*="trigger"],
button[class*="Trigger"],
[class*="copilot"] > button,
[class*="Copilot"] > button,
div[id*="copilot"] > button {
    background: linear-gradient(135deg, #ea580c 0%, #c2410c 100%) !important;
    box-shadow: 0 4px 15px rgba(234, 88, 12, 0.4) !important;
    border: none !important;
}

button[class*="bubble"]:hover,
button[class*="Bubble"]:hover,
button[class*="trigger"]:hover,
[class*="copilot"] > button:hover {
    background: linear-gradient(135deg, #c2410c 0%, #9a3412 100%) !important;
    box-shadow: 0 6px 20px rgba(234, 88, 12, 0.5) !important;
}