|
white-space: normal !important;
word-wrap: break-word !important;
}
/* ======================================================= */
/* MOBILE AI ASSISTANT: SYMMETRICAL FOOTER LAYOUT */
/* ======================================================= */
/* 1. DEFAULT: Hide the Custom Close Button on Desktop */
#ai-assistant-close-mobile {
display: none !important;
}
/* 2. MOBILE ONLY STYLES */
@media screen and (max-width: 768px) {
/* SHOW the Close Button on Mobile */
#ai-assistant-close-mobile {
display: flex !important;
}
/* FLEX CONTAINER: Row layout for [Close] [Input] [Send] */
.ext-aiassistant-footer {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: space-between !important;
gap: 8px !important;
padding: 8px !important;
background-color: #fff;
}
/* MIDDLE INPUT CONTAINER */
/* Grow to fill all available space between buttons */
.ext-aiassistant-input {
flex-grow: 1 !important;
width: auto !important;
margin: 0 !important;
min-width: 0 !important;
height: auto !important;
}
/* TEXTAREA SPECIFICALLY */
/* Force it to be big and wide */
.ext-aiassistant-input textarea {
width: 100% !important;
height: 36px !important; /* Fixed height matching buttons */
min-height: 36px !important;
max-height: 36px !important; /* Prevent resizing */
padding: 6px 10px !important;
box-sizing: border-box !important;
}
/* BUTTONS (Close & Send) - Uniform Circle Styling */
.ext-aiassistant-send,
#ai-assistant-close-mobile {
flex: 0 0 36px !important; /* Rigid 36px width */
width: 36px !important;
height: 36px !important;
border-radius: 50% !important;
padding: 0 !important;
margin: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
box-shadow: none !important;
border: none !important;
}
/* CLOSE BUTTON COLORS (Gray Background / White Icon) */
#ai-assistant-close-mobile {
background-color: #72777d !important; /* MediaWiki Gray */
color: #ffffff !important;
cursor: pointer !important;
}
/* Ensure Close Icon is White */
#ai-assistant-close-mobile svg,
#ai-assistant-close-mobile path {
fill: #ffffff !important;
}
}
|