...
. Find by sibling
pattern: the div RIGHT BEFORE #col1.
We can't reach it via selectors without markup; instead we polish
the h2/h3 the pages contain.
============================================================ */
#col1 h2, #col2 h2,
#col1 h3, #col2 h3 {
color: var(--cf-ai-accent-2);
font-size: 22px;
font-weight: 650;
margin: 0 0 14px 0;
letter-spacing: -0.01em;
}
#col1 p, #col2 p {
color: var(--cf-ai-text);
line-height: 1.55;
margin: 0 0 14px 0;
}
#col1 p strong, #col2 p strong {
color: var(--cf-ai-text);
}
/* ============================================================
INPUTS -- .mytxt is the shared TextBox class
============================================================ */
.mytxt {
width: 100% !important;
max-width: 420px;
box-sizing: border-box;
padding: 10px 14px !important;
height: 44px !important;
font-size: 15px !important;
line-height: 1.4;
border: 1px solid var(--cf-ai-surface-edge) !important;
border-radius: 8px !important;
background: #ffffff !important;
color: var(--cf-ai-text);
transition: border-color .15s ease, box-shadow .15s ease;
}
.mytxt:focus {
outline: none;
border-color: var(--cf-ai-accent) !important;
box-shadow: 0 0 0 3px rgba(21, 101, 192, .15);
}
/* ============================================================
BUTTON -- .mybtn is the shared Button class.
Per UI memory: white-pill button system with hover-fill is the
reference. We give .mybtn the primary-action equivalent: filled
accent with hover state.
============================================================ */
.mybtn {
display: inline-flex !important;
align-items: center;
justify-content: center;
gap: 8px;
min-width: 180px;
height: 44px !important;
padding: 0 22px !important;
margin: 8px 0 !important;
font-size: 15px !important;
font-weight: 600 !important;
color: #ffffff !important;
background: linear-gradient(135deg, var(--cf-ai-accent) 0%, var(--cf-ai-accent-2) 100%) !important;
border: none !important;
border-radius: 10px !important;
box-shadow: 0 1px 2px rgba(21, 101, 192, .25), 0 4px 12px rgba(21, 101, 192, .18);
cursor: pointer;
transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
text-decoration: none;
}
.mybtn:hover {
transform: translateY(-1px);
box-shadow: 0 2px 6px rgba(21, 101, 192, .30), 0 8px 20px rgba(21, 101, 192, .25);
filter: brightness(1.05);
color: #ffffff !important;
}
.mybtn:active {
transform: translateY(0);
}
.mybtn:disabled,
.mybtn[disabled] {
background: linear-gradient(135deg, #94a3b8 0%, #64748b 100%) !important;
cursor: not-allowed;
box-shadow: none;
}
/* ============================================================
LOADING INDICATOR -- replace "Thinking.. Please wait." text
with a polished spinner + label.
============================================================ */
/* 2026-05-23 acarter: hide #loading by default; the showDiv() JS adds the
.loader class on Send-Request click, which is when the spinner should
activate. v2 had this rule applied unconditionally to #loading, which
made the spinner strobe on every page load before the operator did
anything -- the bug Anthony hit across all AI pages. */
#loading {
display: none !important;
}
#loading.loader {
position: relative;
display: inline-flex !important;
align-items: center;
gap: 12px;
margin: 14px 0 !important;
padding: 14px 20px 16px 18px !important;
background: linear-gradient(135deg, rgba(21,101,192,.07), rgba(12,74,110,.05));
border: 1px solid rgba(21, 101, 192, .18);
border-radius: 10px;
color: var(--cf-ai-accent-2) !important;
font-size: 0 !important; /* hides the original bare "Thinking.. Please wait." text node */
overflow: hidden;
min-width: 260px;
}
/* Spinner (left) */
#loading.loader::before {
content: "";
flex: 0 0 auto;
width: 18px;
height: 18px;
border: 2px solid rgba(21, 101, 192, .28);
border-top-color: var(--cf-ai-accent);
border-radius: 50%;
animation: cf-ai-spin .8s linear infinite;
}
/* New label (right) with a gentle pulse -- replaces the basic text */
#loading.loader::after {
content: "Working on your AI insights\2026"; /* ellipsis */
font-size: 14px;
font-weight: 500;
color: var(--cf-ai-accent-2);
animation: cf-ai-pulse 1.5s ease-in-out infinite;
}
@keyframes cf-ai-spin {
to { transform: rotate(360deg); }
}
@keyframes cf-ai-pulse {
0%, 100% { opacity: .55; }
50% { opacity: 1; }
}
/* Indeterminate progress shimmer bar across the bottom edge -- only when active */
#loading.loader {
background-image:
linear-gradient(135deg, rgba(21,101,192,.07), rgba(12,74,110,.05)),
linear-gradient(90deg, transparent, var(--cf-ai-accent), transparent);
background-size: 100% 100%, 40% 3px;
background-position: 0 0, -40% 100%;
background-repeat: no-repeat, no-repeat;
animation: cf-ai-progress 1.4s ease-in-out infinite;
}
@keyframes cf-ai-progress {
0% { background-position: 0 0, -40% 100%; }
100% { background-position: 0 0, 140% 100%; }
}
/* ============================================================
RESPONSE OUTPUT -- the lblResponse9 + DIVResponse container
Old: fixed height 1116px, full-width Textarea inside DIVResponse.
New: min-height instead of fixed, auto-grow up to viewport,
better typography, soft-edge container.
============================================================ */
#DIVResponse {
margin-top: 16px;
}
#lblResponse9,
textarea#lblResponse9 {
width: 100% !important;
height: auto !important;
min-height: 300px;
max-height: 75vh;
padding: 18px 20px !important;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif !important;
font-size: 15px !important;
line-height: 1.62 !important;
color: var(--cf-ai-text) !important;
background: #f8fafc !important;
border: 1px solid var(--cf-ai-surface-edge) !important;
border-radius: 10px !important;
box-shadow: inset 0 1px 2px rgba(15,23,42,.03);
resize: vertical;
box-sizing: border-box;
transition: border-color .15s ease;
}
#lblResponse9:focus {
outline: none;
border-color: var(--cf-ai-accent) !important;
box-shadow: inset 0 1px 2px rgba(15,23,42,.03), 0 0 0 3px rgba(21,101,192,.10);
}
/* ============================================================
GridView tables AI pages use (TextBox1 source data, etc.)
============================================================ */
#col1 .grid-container,
#col2 .grid-container {
overflow-x: auto;
}
#col1 textarea:not(#lblResponse9),
#col2 textarea:not(#lblResponse9) {
width: 100% !important;
box-sizing: border-box;
padding: 10px 12px;
font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", monospace;
font-size: 12.5px;
line-height: 1.5;
background: #f8fafc;
border: 1px solid var(--cf-ai-surface-edge);
border-radius: 8px;
color: #475569;
}
/* ============================================================
PER-FEATURE PALETTES (opt-in via )
============================================================
The pages don't yet have body classes; this is forward-compatible.
If we add body class="ai-recommender" to /AI/Recommender.aspx,
that page's accent becomes orange (per UI memory: each card
gets its own accent). Same for the others.
The default (no body class) uses the CloudFran blue from :root.
*/
body.ai-recommender { --cf-ai-accent: #ea580c; --cf-ai-accent-2: #9a3412; }
body.ai-menutailor { --cf-ai-accent: #0d9488; --cf-ai-accent-2: #115e59; }
body.ai-promoweather { --cf-ai-accent: #0284c7; --cf-ai-accent-2: #075985; }
body.ai-dynamicprice { --cf-ai-accent: #7e22ce; --cf-ai-accent-2: #581c87; }
body.ai-frauddetector { --cf-ai-accent: #dc2626; --cf-ai-accent-2: #991b1b; }
body.ai-concierge { --cf-ai-accent: #4f46e5; --cf-ai-accent-2: #312e81; }
body.ai-chatflow { --cf-ai-accent: #2563eb; --cf-ai-accent-2: #1e40af; }
body.ai-coachvoice { --cf-ai-accent: #db2777; --cf-ai-accent-2: #9d174d; }
body.ai-franvoice { --cf-ai-accent: #c026d3; --cf-ai-accent-2: #86198f; }
body.ai-tailoredreach { --cf-ai-accent: #16a34a; --cf-ai-accent-2: #14532d; }
body.ai-stratify { --cf-ai-accent: #0891b2; --cf-ai-accent-2: #155e75; }
body.ai-wasteless { --cf-ai-accent: #84cc16; --cf-ai-accent-2: #4d7c0f; }
body.ai-imagic { --cf-ai-accent: #f59e0b; --cf-ai-accent-2: #b45309; }
body.ai-text2art { --cf-ai-accent: #ec4899; --cf-ai-accent-2: #be185d; }
body.ai-dinevisuals { --cf-ai-accent: #f97316; --cf-ai-accent-2: #9a3412; }
body.ai-videospark { --cf-ai-accent: #8b5cf6; --cf-ai-accent-2: #5b21b6; }
body.ai-customerconnect{ --cf-ai-accent: #06b6d4; --cf-ai-accent-2: #155e75; }
body.ai-upload { --cf-ai-accent: #64748b; --cf-ai-accent-2: #334155; }
body.ai-recommenderwidget { --cf-ai-accent: #ea580c; --cf-ai-accent-2: #9a3412; }
/* ============================================================
v2 POLISH — 2026-05-22 acarter
Modern, HubSpot-grade lift on top of the v1 design system.
Adds: feature ribbon on the input card, unified form controls,
prettier tables/links/code blocks, within-page sub-card
uniformity, mobile refinement, subtle entrance animation.
Per-feature accents already flow from body.ai-* (v1 palettes).
============================================================ */
/* Page background gets a soft accent wash so the panels float on
a tinted canvas instead of a flat grey. */
.Content {
background:
radial-gradient(1200px 600px at 0% -10%, color-mix(in srgb, var(--cf-ai-accent) 7%, transparent), transparent 60%),
radial-gradient(1000px 500px at 100% 110%, color-mix(in srgb, var(--cf-ai-accent-2) 5%, transparent), transparent 60%),
#f8fafc !important;
}
/* Feature accent ribbon at the top of the input card. Pure CSS, no
markup change. Reads as the page identity bar. */
#col1 {
position: relative;
overflow: hidden;
}
#col1::before {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 5px;
background: linear-gradient(90deg, var(--cf-ai-accent) 0%, var(--cf-ai-accent-2) 100%);
}
/* Headings use the per-feature accent so each page is visually distinct. */
#col1 h1, #col1 h2, #col1 h3, #col2 h1, #col2 h2, #col2 h3 {
color: var(--cf-ai-accent-2) !important;
letter-spacing: -0.015em;
}
#col1 h2, #col2 h2 { font-size: 22px; font-weight: 700; }
#col1 h3, #col2 h3 { font-size: 17px; font-weight: 650; margin-top: 18px; }
/* Helper text */
#col1 small, #col2 small,
#col1 .cf-ai-hint, #col2 .cf-ai-hint {
display: inline-block;
color: var(--cf-ai-text-soft);
font-size: 12.5px;
line-height: 1.5;
}
/* ----- Unified form controls -----
Any TextBox / DropDownList / asp:DropDownList that the AI pages drop in
without a CssClass picks up the polished look automatically. We override
inline Height pixel values that historically clipped text (e.g. 30px). */
#col1 input[type="text"]:not(.mytxt),
#col1 input[type="email"]:not(.mytxt),
#col1 input[type="number"]:not(.mytxt),
#col1 input[type="search"]:not(.mytxt),
#col1 input[type="date"]:not(.mytxt),
#col2 input[type="text"]:not(.mytxt),
#col2 input[type="email"]:not(.mytxt),
#col2 input[type="number"]:not(.mytxt),
#col2 input[type="search"]:not(.mytxt),
#col2 input[type="date"]:not(.mytxt),
#col1 select, #col2 select {
min-height: 38px;
padding: 6px 12px;
font-size: 14.5px;
line-height: 1.4;
color: var(--cf-ai-text);
background: #fff;
border: 1px solid var(--cf-ai-surface-edge);
border-radius: 8px;
box-sizing: border-box;
transition: border-color .15s ease, box-shadow .15s ease;
box-shadow: 0 1px 1px rgba(15,23,42,.02);
}
#col1 select, #col2 select {
padding-right: 32px;
max-width: 100%;
}
#col1 input:not(.mytxt):focus, #col2 input:not(.mytxt):focus,
#col1 select:focus, #col2 select:focus {
outline: none;
border-color: var(--cf-ai-accent);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--cf-ai-accent) 18%, transparent);
}
/* Labels above form fields */
#col1 label, #col2 label {
display: inline-block;
font-size: 12.5px;
font-weight: 600;
color: var(--cf-ai-text-soft);
text-transform: none;
letter-spacing: 0;
margin: 6px 0 4px 0;
}
/* ----- Sub-card uniformity (#20) -----
The AI pages drop sub-divs inside #col1 / #col2 for things like the
demo-send box, the policy-doc box, the metrics row. Give every direct
.cf-card child the same height baseline so two side-by-side cards line
up; works for stacked layouts too. */
#col1 > div + div, #col2 > div + div {
margin-top: 12px;
}
/* Make any row of inline sub-cards equalize height + wrap on mobile. */
#col1 .cf-row, #col2 .cf-row {
display: flex;
flex-wrap: wrap;
gap: 12px;
align-items: stretch;
}
#col1 .cf-row > *, #col2 .cf-row > * {
flex: 1 1 220px;
}
/* ----- Modern tables -----
Wraps the existing GridView .styled-table look + tightens spacing.
2026-05-24 Anthony feedback: FraudDetector + DynamicPrice response
tables overflowed the response card and pushed content off-screen.
Catch-all `#col2 table` rule below applies size discipline to any
AI-generated table even when it doesn't carry .styled-table. */
#col1 .styled-table, #col2 .styled-table,
#col1 table.styled-table, #col2 table.styled-table {
border-collapse: separate;
border-spacing: 0;
width: 100%;
background: #fff;
border: 1px solid var(--cf-ai-surface-edge);
border-radius: 10px;
overflow: hidden;
box-shadow: 0 1px 2px rgba(15,23,42,.04);
font-size: 13px;
}
/* 2026-05-24 acarter: discipline for ALL tables that AI feature pages
inject into the response column (#col2). The model returns ad-hoc
markdown-style tables that don't carry .styled-table, so the rules
above didn't apply. This catch-all keeps them inside the column. */
#col2 {
overflow-x: auto; /* allow horizontal scroll as a last resort */
box-sizing: border-box;
}
#col2 table {
width: 100% !important;
max-width: 100%;
table-layout: fixed; /* honor explicit widths + truncate by default */
border-collapse: collapse;
font-size: 12.5px;
margin: 12px 0;
}
#col2 table th, #col2 table td {
padding: 6px 8px;
border: 1px solid #e2e8f0;
word-wrap: break-word;
overflow-wrap: anywhere;
vertical-align: top;
line-height: 1.35;
}
#col2 table th {
background: #f1f5f9;
font-weight: 700;
color: #0f172a;
text-align: left;
}
#col2 table tr:nth-child(even) td {
background: #fafbfd;
}
/* When the model emits long words / no spaces (URLs, numbers) the
anywhere-overflow keeps them inside the cell. */
#col2 pre, #col2 code {
white-space: pre-wrap;
word-break: break-word;
}
#col1 .styled-table th, #col2 .styled-table th {
background: linear-gradient(180deg, color-mix(in srgb, var(--cf-ai-accent) 10%, #fff), #fff) !important;
color: var(--cf-ai-accent-2) !important;
font-weight: 650;
text-align: left;
padding: 9px 12px;
border-bottom: 1px solid var(--cf-ai-surface-edge);
}
#col1 .styled-table td, #col2 .styled-table td {
padding: 8px 12px;
border-bottom: 1px solid #f1f5f9;
color: var(--cf-ai-text);
}
#col1 .styled-table tr:last-child td, #col2 .styled-table tr:last-child td {
border-bottom: none;
}
#col1 .styled-table tr:hover td, #col2 .styled-table tr:hover td {
background: color-mix(in srgb, var(--cf-ai-accent) 4%, #fff);
}
/* ----- Links in response output use the feature accent ----- */
#DIVResponse a, #col1 a, #col2 a {
color: var(--cf-ai-accent);
text-decoration: none;
border-bottom: 1px solid color-mix(in srgb, var(--cf-ai-accent) 35%, transparent);
transition: border-color .15s ease, color .15s ease;
}
#DIVResponse a:hover, #col1 a:hover, #col2 a:hover {
color: var(--cf-ai-accent-2);
border-bottom-color: var(--cf-ai-accent-2);
}
/* ----- Subtle entrance animation when DIVResponse becomes visible ----- */
#DIVResponse {
animation: cf-ai-rise .35s ease-out both;
}
@keyframes cf-ai-rise {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
/* ----- Secondary buttons (print, configure) — outline pill that hover-fills.
Anything with .cf-btn-secondary gets it; the print button on Stratify/
Wasteless/FranVoice already uses .mybtn so it stays accent-filled. */
.cf-btn-secondary {
display: inline-flex; align-items: center; justify-content: center;
gap: 8px;
min-width: 140px; height: 38px;
padding: 0 18px;
font-size: 14px; font-weight: 600;
color: var(--cf-ai-accent) !important;
background: #ffffff;
border: 1.5px solid var(--cf-ai-accent);
border-radius: 10px;
cursor: pointer;
transition: background .15s ease, color .15s ease, transform .15s ease;
}
.cf-btn-secondary:hover {
background: var(--cf-ai-accent);
color: #ffffff !important;
transform: translateY(-1px);
}
/* ----- Mobile refinement ----- */
@media (max-width: 599px) {
#col1, #col2 { padding: 18px !important; }
#col1 h2, #col2 h2 { font-size: 19px; }
.mybtn { width: 100%; min-width: 0; }
#loading { width: 100%; min-width: 0; }
.mytxt { max-width: 100%; }
#col1 select, #col2 select { width: 100% !important; max-width: 100%; }
#lblResponse9, textarea#lblResponse9 { min-height: 240px; max-height: 65vh; }
}
/* Tablet refinement: keep the 2-col layout but tighten paddings. */
@media (min-width: 900px) and (max-width: 1199px) {
#col1, #col2 { padding: 22px !important; }
#col1 h2, #col2 h2 { font-size: 20px; }
}
/* High-DPI: sharpen the loader spinner edge. */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
#loading::before { border-width: 2.5px; }
}
/* Reduced-motion preference: drop the entrance animation + spinner glide. */
@media (prefers-reduced-motion: reduce) {
#DIVResponse { animation: none; }
#loading { animation: none; }
.mybtn:hover { transform: none; }
}
/* ============================================================
v3 LIFT — 2026-05-24 acarter
Enterprise-grade overhaul that BEATS the legacy inline styles
on every AI page (#col1/#col2 ship with inline
background-color/float that swamped the v2 polish).
Anthony 2026-05-24: "professional enterprise world class UI
update" + the spinner-strobe bug (markup hard-codes
class="loader imHidden", so v2's .loader-trigger fires on
page load).
============================================================ */
/* ----- A. SPINNER STROBE FIX -----
The markup is .
v2 activated on .loader alone -> ALWAYS visible. The legit
ready state is .loader + .imHidden (imHidden suppresses).
showDiv() replaces className to plain "loader" which drops
.imHidden and reveals the spinner. Gate every v2 :loader
rule on :not(.imHidden) so the original contract works. */
#loading.loader.imHidden,
#loading.imHidden {
display: none !important;
}
#loading.loader:not(.imHidden) {
/* same look as v2 -- copied here without the .imHidden interference */
position: relative;
display: inline-flex !important;
align-items: center;
gap: 12px;
margin: 14px 0 !important;
padding: 14px 20px 16px 18px !important;
background:
linear-gradient(135deg, rgba(21,101,192,.07), rgba(12,74,110,.05)),
linear-gradient(90deg, transparent, var(--cf-ai-accent), transparent);
background-size: 100% 100%, 40% 3px;
background-position: 0 0, -40% 100%;
background-repeat: no-repeat, no-repeat;
border: 1px solid rgba(21, 101, 192, .18);
border-radius: 10px;
color: var(--cf-ai-accent-2) !important;
font-size: 0 !important;
overflow: hidden;
min-width: 260px;
animation: cf-ai-progress 1.4s ease-in-out infinite;
}
#loading.loader:not(.imHidden)::before {
content: "";
flex: 0 0 auto;
width: 18px;
height: 18px;
border: 2px solid rgba(21, 101, 192, .28);
border-top-color: var(--cf-ai-accent);
border-radius: 50%;
animation: cf-ai-spin .8s linear infinite;
}
#loading.loader:not(.imHidden)::after {
content: "Working on your AI insights\2026";
font-size: 14px;
font-weight: 500;
color: var(--cf-ai-accent-2);
animation: cf-ai-pulse 1.5s ease-in-out infinite;
}
/* ----- B. PAGE CHROME — beat the inline col1/col2 styles -----
The legacy markup hard-codes:
style="float:left; width:40%; background-color:#d9e9e9;
padding:20px; min-height:1300px;"
on #col1 and #col2. We override aggressively. */
#col1, #col2 {
background: #ffffff !important;
background-color: #ffffff !important;
border: 1px solid #e2e8f0 !important;
border-radius: 14px !important;
box-shadow: 0 2px 8px rgba(15, 23, 42, .06), 0 12px 32px rgba(15, 23, 42, .04) !important;
padding: 32px 36px !important;
margin-bottom: 24px !important;
min-height: 0 !important; /* nuke the 1300px legacy */
float: none !important;
box-sizing: border-box !important;
}
/* Layout: two-column grid on desktop, stacked on mobile.
The inline floats stay (we just override background) but grid
on a parent works better -- wrap them in the existing .Content
area where present. */
.Content {
display: block;
padding: 24px 32px !important;
max-width: 1400px;
margin: 0 auto;
}
@media (min-width: 1100px) {
/* When both columns exist, sit them side-by-side via flex
on the closest common parent. Legacy floats also work. */
#col1, #col2 {
width: calc(50% - 14px) !important;
display: inline-block;
vertical-align: top;
}
#col1 { margin-right: 12px !important; }
#col2 { margin-left: 12px !important; }
}
@media (max-width: 1099px) {
#col1, #col2 {
width: 100% !important;
margin-right: 0 !important;
margin-left: 0 !important;
}
}
/* ----- C. HERO — promote the first
in #col1 into a banner -----
Every AI page opens #col1 with a descriptive paragraph
("AI Smart Recommender is an AI-powered solution..."). Turn
that paragraph into a styled hero block with the feature accent.
No markup change needed. */
#col1 > p:first-of-type {
display: block;
background: linear-gradient(135deg,
color-mix(in srgb, var(--cf-ai-accent) 16%, #ffffff) 0%,
color-mix(in srgb, var(--cf-ai-accent-2) 8%, #ffffff) 100%);
border-left: 4px solid var(--cf-ai-accent);
border-radius: 12px;
padding: 20px 24px;
margin: -8px 0 22px 0; /* tighten the gap from card edge */
color: #1e293b;
font-size: 14.5px;
line-height: 1.65;
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cf-ai-accent) 18%, transparent);
}
/* Add a small accent dot before the hero to give it a status feel */
#col1 > p:first-of-type::before {
content: "";
display: inline-block;
width: 8px; height: 8px;
border-radius: 50%;
background: var(--cf-ai-accent);
margin-right: 10px;
transform: translateY(-2px);
box-shadow: 0 0 0 4px color-mix(in srgb, var(--cf-ai-accent) 22%, transparent);
}
/* The " " filler paragraphs the markup uses for spacing become invisible */
#col1 > p:empty,
#col1 > p:has(> br:only-child),
#col1 > p > br:only-child { display: none; }
/* ----- D. INPUT FIELD AREA — make plain
+TextBox pairs look like real form fields ----- */
/* Field labels (paragraphs that contain only text right before a TextBox) */
#col1 > p {
margin: 14px 0 8px 0;
font-size: 13px;
font-weight: 600;
color: #475569;
letter-spacing: 0.01em;
line-height: 1.4;
}
/* The paragraphs that WRAP an input/control: no label styling */
#col1 > p:has(input, select, textarea, .mytxt, .mybtn) {
font-weight: 400;
color: inherit;
margin: 0 0 14px 0;
}
/* Force inputs to a polished width inside their wrapping
*/
#col1 .mytxt, #col2 .mytxt {
width: 100% !important;
max-width: 420px;
height: 42px !important;
padding: 8px 14px !important;
font-size: 14.5px !important;
color: #1e293b !important;
background: #ffffff !important;
border: 1px solid #cbd5e0 !important;
border-radius: 10px !important;
box-shadow: 0 1px 1px rgba(15,23,42,.03) !important;
box-sizing: border-box;
transition: border-color .15s ease, box-shadow .15s ease;
}
#col1 .mytxt:focus, #col2 .mytxt:focus {
outline: none !important;
border-color: var(--cf-ai-accent) !important;
box-shadow: 0 0 0 3px color-mix(in srgb, var(--cf-ai-accent) 22%, transparent) !important;
}
/* ----- E. PRIMARY CTA -----
.mybtn is the universal action button. v2 styled it but the
markup specifies Height="30px" which clipped the type. Override. */
.mybtn,
input.mybtn,
button.mybtn,
a.mybtn,
#col1 .mybtn, #col2 .mybtn {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-width: 180px !important;
height: 44px !important;
padding: 0 26px !important;
font-size: 14.5px !important;
font-weight: 650 !important;
letter-spacing: 0.01em !important;
color: #ffffff !important;
background: linear-gradient(135deg, var(--cf-ai-accent) 0%, var(--cf-ai-accent-2) 100%) !important;
border: none !important;
border-radius: 10px !important;
box-shadow: 0 4px 10px color-mix(in srgb, var(--cf-ai-accent) 28%, transparent),
0 1px 2px rgba(15,23,42,.08) !important;
cursor: pointer !important;
transition: transform .15s ease, box-shadow .15s ease, filter .15s ease !important;
}
.mybtn:hover,
input.mybtn:hover,
button.mybtn:hover,
a.mybtn:hover,
#col1 .mybtn:hover, #col2 .mybtn:hover {
transform: translateY(-1px) !important;
box-shadow: 0 6px 14px color-mix(in srgb, var(--cf-ai-accent) 35%, transparent),
0 2px 4px rgba(15,23,42,.10) !important;
filter: brightness(1.04) !important;
}
.mybtn:active,
input.mybtn:active, button.mybtn:active {
transform: translateY(0) !important;
filter: brightness(0.96) !important;
}
.mybtn:disabled, .mybtn[disabled] {
opacity: 0.6 !important;
cursor: not-allowed !important;
transform: none !important;
filter: grayscale(0.3) !important;
}
/* ----- F. RESPONSE PANEL — col2 polish + empty state ----- */
#col2 {
position: relative;
}
/* The literal text "Response:" before DIVResponse gets a section-header look */
#col2 {
font-size: 0; /* hide bare text nodes */
}
#col2::before {
content: "AI Response";
display: block;
font-size: 12px;
font-weight: 700;
color: #64748b;
text-transform: uppercase;
letter-spacing: 0.08em;
margin: -4px 0 16px 0;
}
#col2 > *,
#col2 #DIVResponse,
#col2 #DIVResponse * {
font-size: 14px; /* restore for children after the parent font-size:0 */
}
#col2 textarea {
width: 100% !important;
min-height: 360px !important;
height: auto !important;
max-height: 70vh !important;
padding: 16px 18px !important;
font-size: 14px !important;
line-height: 1.6 !important;
color: #1e293b !important;
background: #f8fafc !important;
border: 1px solid #e2e8f0 !important;
border-radius: 10px !important;
box-shadow: inset 0 1px 2px rgba(15,23,42,.04) !important;
resize: vertical;
box-sizing: border-box;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif !important;
}
/* Empty state when DIVResponse hasn't rendered yet */
#col2:not(:has(#DIVResponse))::after,
#col2 #DIVResponse[style*="display: none"] + *::after {
content: "Send a request to see your AI insights here.";
display: block;
padding: 60px 24px;
text-align: center;
color: #94a3b8;
font-size: 14px;
font-style: italic;
background: #f8fafc;
border: 1px dashed #cbd5e0;
border-radius: 10px;
}
/* ----- G. TYPOGRAPHY HIERARCHY ----- */
#col1, #col2 {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif !important;
color: #1e293b !important;
}
#col1 h1, #col2 h1 { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 6px 0; color: #0f172a; }
#col1 h2, #col2 h2 { font-size: 21px; font-weight: 700; letter-spacing: -0.015em; margin: 18px 0 8px 0; color: var(--cf-ai-accent-2); }
#col1 h3, #col2 h3 { font-size: 16px; font-weight: 650; margin: 14px 0 6px 0; color: #334155; }
/* ----- H. SUBTLE PAGE-WIDE POLISH ----- */
body[class*="ai-"] {
background: linear-gradient(180deg, #f1f5f9 0%, #f8fafc 100%) !important;
}
body[class*="ai-"] .grid-container,
body[class*="ai-"] #Top {
background: transparent !important;
}
/* ----- I. KEYBOARD ACCESSIBILITY ----- */
#col1 a:focus-visible, #col2 a:focus-visible,
.mybtn:focus-visible {
outline: 3px solid color-mix(in srgb, var(--cf-ai-accent) 65%, transparent);
outline-offset: 2px;
}