:root {

--baiws-glass-bg: rgba(29,30,33,0.80);
--baiws-glass-border: rgba(255,255,255,0.08);

--baiws-glass-blur: blur(40px) saturate(180%);
--baiws-glass-shadow:
0 12px 40px rgba(0,0,0,0.45),
inset 0 1px 0 rgba(255,255,255,0.06);

}

@font-face {
    font-family: "Google Sans Flex";
    src: url("/wp-content/themes/baiws-theme/assets/fonts/GoogleSansFlex_120pt-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Google Sans Flex";
    src: url("/wp-content/themes/baiws-theme/assets/fonts/GoogleSansFlex_120pt-Medium.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}


/* =========================================================
Baiws GPT Editor
========================================================= */

#gpt-chat-wrapper {
position: fixed;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
z-index: 9999;
max-width: 600px;
width: 90%;
font-family: "Google Sans Flex", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* ============== CONTAINER ============== */

#gpt-chat-box {

border-radius: 20px;

background: rgba(29,30,33,0.80);

border: 1px solid rgba(255,255,255,0.08);

backdrop-filter: blur(40px) saturate(180%);
-webkit-backdrop-filter: blur(40px) saturate(180%);

box-shadow:
0 12px 40px rgba(0,0,0,0.45),
inset 0 1px 0 rgba(255,255,255,0.06);

z-index: 10000;
}

/* Panel internals */

#gpt-chat-box.baiws-panel {
display: flex;
flex-direction: column;
max-height: 80vh;
overflow: hidden;
}

/* Header */

.baiws-panel-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 16px;
}

.baiws-chat-logo {
width: 32px;
height: 32px;
display: block;
}

/* Icons */

.baiws-actions {
display: flex;
align-items: center;
gap: 8px;
}

.icon-btn {
display: inline-grid;
place-items: center;
width: 24px;
height: 24px;
border: none;
background: transparent;
padding: 0;
margin: 0;
cursor: pointer;
}

.icon-btn img {
width: 24px;
height: 24px;
display: block;
}

/* Body */

.baiws-panel-body {
padding: 12px 16px 10px;
display: flex;
flex-direction: column;
gap: 12px;
}

/* Messages */

#gpt-chat-messages.messages {
max-height: 160px;
overflow-y: auto;
transition: max-height .25s ease;
position: relative;
}

#gpt-chat-messages.messages::before {
content: "";
position: sticky;
top: 0;
height: 20px;
background: linear-gradient(to bottom, rgba(0,0,0,0.15), transparent);
pointer-events: none;
}

.baiws-panel.is-expanded #gpt-chat-messages {
max-height: 55vh;
}

/* Input */

.input-row {
box-sizing: border-box;
display: grid;
grid-template-columns: 1fr 44px;
align-items: center;
height: 44px;
border-radius: 32px;
border: 1px solid #D0D1D2;
background: rgba(255,242,227,0);
padding: 0;
}

.msg,
.baiws-inline-controls button,
.baiws-undo-btn,
.baiws-undo-hint,
.baiws-panel-footer small {

color: #D0D1D2;
font-family: "Google Sans Flex", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
font-size: 18px;
font-weight: 400;
letter-spacing: 0.16px;

}

.input-row textarea {

box-sizing: border-box;
padding: 12px 0 12px 16px;
min-width: 0;
height: 44px;
border: 0;
background: transparent;
outline: none;
resize: none;
overflow-y: auto;
color: #D0D1D2;

font-family: "Google Sans Flex", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
font-size: 18px;
font-weight: 400;
letter-spacing: 0.16px;

}

.input-row textarea::placeholder {
color: #D0D1D2;
opacity: .85;
}

/* Send */

.send-btn {
box-sizing: border-box;
width: 44px;
height: 44px;
padding: 0;
margin: 0;
border: 0;
background: transparent;
cursor: pointer;
display: grid;
place-items: center;
justify-self: end;
align-self: stretch;
}

.send-btn img {
width: 32px;
height: 32px;
display: block;
}

/* Footer */

.baiws-panel-footer {
padding: 0 16px 12px;
text-align: center;
}

.baiws-panel-footer small {
font-size: 12px;
line-height: 1.2;
}

/* Messages */

.msg {
margin-bottom: 8px;
white-space: pre-wrap;
transition: opacity .2s ease;
clear: both;
}

.msg.assistant {
text-align: left;
}

.msg.user {

display: block;
width: fit-content;
max-width: 80%;
margin-left: auto;
margin-right: 0;

background: rgba(29,30,33,.10);
border-radius: 28px;
padding: 14px 22px;

color: #D0D1D2;

line-height: 1.35;
word-break: normal;
overflow-wrap: break-word;

backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);

}

/* Controls */

.baiws-inline-controls {
display: flex;
gap: 8px;
margin-top: 8px;
}

.baiws-confirm-btn,
.baiws-cancel-btn,
.baiws-undo-btn {

background: rgba(255,255,255,.12);
border: 1px solid rgba(255,242,227,.3);
border-radius: 8px;
padding: 5px 10px;
cursor: pointer;

}

.baiws-undo-controls {
display: flex;
align-items: center;
gap: 8px;
margin-top: 8px;
}

/* Refresh state */

.wp-block-cover__background,
.wp-block-cover__image-background {
pointer-events: none !important;
}

.baiws-refreshing {
opacity: .6;
transition: opacity .3s ease;
}

.baiws-refreshing:not(:hover) {
opacity: .9;
}

/* =========================================================
Floating button 
========================================================= */

#baiws-floating-btn {

position: fixed;
bottom: 20px;
left: 50%;
transform: translateX(-50%) scale(.95);

display: none;      /* JS toggles this */
opacity: 0;

z-index: 9999;

flex-direction: row;
align-items: center;
gap: 12px;

white-space: nowrap;
width: max-content;

padding: 12px 24px;

font-size: 18px;
font-weight: 400;
color: #D0D1D2;

border-radius: 9999px;

background: var(--baiws-glass-bg);
border: 1px solid var(--baiws-glass-border);

backdrop-filter: var(--baiws-glass-blur);
-webkit-backdrop-filter: var(--baiws-glass-blur);

box-shadow: var(--baiws-glass-shadow);

cursor: pointer;

transition:
opacity .3s ease,
transform .2s ease,
box-shadow .2s ease;

}

#baiws-floating-btn:hover {

transform: translateX(-50%) scale(1.03);

box-shadow:
0 18px 50px rgba(0,0,0,.55),
inset 0 1px 0 rgba(255,255,255,.08);

}

#baiws-floating-btn::before {

content: "";
position: absolute;
inset: 0;

border-radius: inherit;

background: linear-gradient(
180deg,
rgba(255,255,255,.10),
rgba(255,255,255,.02)
);

pointer-events: none;

}

#baiws-floating-btn img {

width: 24px;
height: 24px;
display: block;
flex: 0 0 auto;

}

#baiws-floating-btn span {

display: inline-block;
flex: 0 1 auto;

}


/* Cleanup */

p:empty,
p > br:only-child {
display: none;
}

/* =========================================================
Baiws thinking animation
========================================================= */

.baiws-thinking-msg {
display: inline-flex;
align-items: center;
gap: 6px;
width: fit-content;
opacity: 0.9;
}

.baiws-thinking-text {
font-size: 18px;
font-weight: 400;
}

.baiws-thinking-dots {
display: inline-flex;
align-items: center;
gap: 4px;
}

.baiws-thinking-dots span {
width: 5px;
height: 5px;
border-radius: 999px;
background: currentColor;
opacity: 0.35;
animation: baiws-thinking-dot 1.1s infinite ease-in-out;
}

.baiws-thinking-dots span:nth-child(2) {
animation-delay: 0.15s;
}

.baiws-thinking-dots span:nth-child(3) {
animation-delay: 0.3s;
}

@keyframes baiws-thinking-dot {
0%,
80%,
100% {
transform: translateY(0);
opacity: 0.35;
}

40% {
transform: translateY(-3px);
opacity: 1;
}
}