Insurer Brain

MediaWiki:Common.css: Difference between revisions

Browse history interactively
← Older editNewer edit →
Content deleted Content added
No edit summary
Tag: Reverted
No edit summary
Tag: Reverted
Line 1,144:
 
/* ======================================================= */
/* 3. ROBUST MOBILE AI LAYOUTASSISTANT (FlexboxAXA MethodBRAIN) CUSTOMIZATION */
/* ======================================================= */
 
/* 1. GLOBAL LAYER (All Devices) */
/* We ONLY force the layer order here, not the position. */
/* This ensures it sits on top of your floating buttons (z-index: 1002). */
.ext-aiassistant,
.ext-aiassistant-panel {
z-index: 2000 !important;
}
 
/* 2. MOBILE ONLY: FULL SCREEN MODE */
/* We only force 'fixed' position on mobile to lock it to the screen. */
@media screen and (max-width: 768px) {
 
/* 1. MAIN PANEL (The Anchor) */
/* Force full screen flex container. This is the coordinate system. */
.ext-aiassistant-panel {
/* Force Fixed so it covers the screen regardless of scroll */
position: fixed !important;
inset: 0 !important; /* Top, Right, Bottom, Left = 0 */
/* Override inline styles to force full width/height */
width: 100% !important;
height: 100% !important;
displaymax-width: flexnone !important;
flexmax-directionheight: columnnone !important; /* Stack: Header -> Body -> Footer */
 
background: #ffffff !important;
z-index: 99999 !important; /* EnsurePin to itall covers4 everythingcorners */
bordertop: none0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
 
/* Reset styles for a flat app-like look */
border-radius: 0 !important;
}
 
/* 2. HEADER (Invisible Wrapper) */
/* Collapse header to 0 height, but allow contents (the button) to be seen */
.ext-aiassistant-header {
height: 0 !important;
min-height: 0 !important;
padding: 0 !important;
margin: 0 !important;
border: none !important;
overflow: visible !important; /* CRITICAL: Let the button "escape" */
/* Force static so the button ignores this parent and anchors to the Panel */
position: static !important;
flex: 0 0 auto !important;
}
/* Ensure the innerinternal actionschat divbody doesn'texpands trapto thefill buttonthe positioningspace */
.ext-aiassistant-header-actions {
position: static !important;
display: block !important;
padding: 0 !important;
}
 
/* Hide Title and Settings Buttons */
.ext-aiassistant-title,
.ext-aiassistant-header-actions button:not(:last-child) {
display: none !important;
}
 
/* 3. CLOSE BUTTON (Teleported to Footer) */
.ext-aiassistant-header-actions button:last-child {
/* ABSOLUTE positioning relative to .ext-aiassistant-panel */
position: absolute !important;
left: 10px !important;
/* Pin to bottom, respecting iPhone Home Bar area */
bottom: calc(12px + env(safe-area-inset-bottom)) !important;
/* Reset Top/Right from original styles */
top: auto !important;
right: auto !important;
 
/* Styling (Circle) */
width: 36px !important;
height: 36px !important;
border-radius: 50% !important;
background: #f0f0f0 !important;
border: 1px solid #ccc !important;
z-index: 10002 !important; /* Sit above the footer background */
/* Flex center the X icon */
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 0 !important;
margin: 0 !important;
}
 
/* Swap Icon for "X" */
.ext-aiassistant-header-actions button:last-child svg { display: none !important; }
.ext-aiassistant-header-actions button:last-child::after {
content: "✕"; /* Close Cross */
font-size: 16px;
color: #333;
font-weight: bold;
line-height: 1;
margin-top: -1px;
}
 
/* 4. CHAT BODY (Fill Remaining Space) */
.ext-aiassistant-body {
flexheight: 1 1 auto !important; /* Grow to fill space between top and footer */
height: auto !important; /* Let Flexbox handle height */
overflow-y: auto !important;
padding-top: 15px !important; /* Breathing room at top */
}
 
/* 5. FOOTER (Natural Bottom) */
.ext-aiassistant-footer {
flex: 0 0 auto !important; /* Don't shrink */
background: #ffffff !important;
border-top: 1px solid #eee !important;
/* Padding handles spacing + iPhone Home Bar */
padding: 10px !important;
padding-bottom: calc(10px + env(safe-area-inset-bottom)) !important;
display: flex !important;
align-items: flex-end !important;
position: relative !important;
z-index: 10001 !important;
}
 
/* 6. INPUT BOX (Indent for Close Button) */
.ext-aiassistant-input {
/* Push right to make space for the absolute Close button */
margin-left: 44px !important;
width: auto !important;
flex-grow: 1 !important;
}
Line 1,497 ⟶ 1,419:
white-space: normal !important;
word-wrap: break-word !important;
}
 
/* ======================================================= */
/* MOBILE: SYMMETRIC FOOTER — [Close] [Input] [Send] */
/* ======================================================= */
@media screen and (max-width: 768px) {
 
/* 1. Make footer a flex row with centered alignment */
.ext-aiassistant-footer {
display: flex !important;
align-items: center !important;
gap: 4px !important;
padding: 6px 8px !important;
}
 
/* 2. Pull minimize button into footer position */
.ext-aiassistant-header-actions > button:last-child {
/* Break out of header and pin into footer */
position: fixed !important;
bottom: 6px !important;
left: 8px !important;
z-index: 2002 !important;
 
/* Match Send button: 36px circle */
width: 36px !important;
height: 36px !important;
min-width: 36px !important;
max-width: 36px !important;
border-radius: 50% !important;
padding: 0 !important;
margin: 0 !important;
 
/* Gray background, white icon — mirrors Send */
background-color: #CCCCCC !important;
border: none !important;
box-shadow: none !important;
 
/* Center icon */
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
 
/* 3. Make the minus icon white */
.ext-aiassistant-header-actions > button:last-child .cdx-icon,
.ext-aiassistant-header-actions > button:last-child svg {
color: #ffffff !important;
fill: #ffffff !important;
}
 
/* 4. Add left padding so text area clears the close button */
.ext-aiassistant-footer {
padding-left: 48px !important;
}
}
Retrieved from "https://www.insurerbrain.com/wiki/MediaWiki:Common.css"