.ortho-ai-wrapper {
--ortho-primary: #0d9488;
--ortho-primary-hover: #0f766e;
--ortho-primary-light: #ccfbf1;
--ortho-bg: #ffffff;
--ortho-bg-muted: #f0fdfa;
--ortho-bg-soft: #f8fffe;
--ortho-border: #dbe7e6;
--ortho-text: #1e293b;
--ortho-text-muted: #64748b;
--ortho-error: #dc2626;
--ortho-error-bg: #fef2f2;
--ortho-radius: 18px;
--ortho-shadow: 0 10px 34px rgba(15, 23, 42, 0.07);
--ortho-red: #ef4444;
--ortho-warm: #f59e0b;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
max-width: 880px;
margin: 2rem auto;
padding: 0 1rem;
box-sizing: border-box;
}
.ortho-ai-wrapper *,
.ortho-ai-wrapper *::before,
.ortho-ai-wrapper *::after {
box-sizing: border-box;
}
.ortho-ai-card {
background:
radial-gradient(circle at top right, rgba(13, 148, 136, 0.08), transparent 28%),
linear-gradient(180deg, #ffffff 0%, #fbfefd 100%);
border: 1px solid var(--ortho-border);
border-radius: var(--ortho-radius);
padding: 2rem;
box-shadow: var(--ortho-shadow);
transition: border-color 0.5s ease, box-shadow 0.5s ease, transform 0.5s ease;
}
.ortho-ai-card.showing-result {
border-color: rgba(13, 148, 136, 0.4);
box-shadow: 0 0 0 4px rgba(13, 148, 136, 0.08), 0 18px 42px rgba(13, 148, 136, 0.12);
}
.ortho-ai-header {
display: flex;
align-items: center;
gap: 0.625rem;
margin-bottom: 0.5rem;
}
.ortho-ai-icon {
width: 28px;
height: 28px;
color: var(--ortho-primary);
flex-shrink: 0;
}
.ortho-ai-icon-sm {
width: 16px;
height: 16px;
color: var(--ortho-text-muted);
flex-shrink: 0;
vertical-align: middle;
}
.ortho-ai-title {
font-size: 1.375rem;
font-weight: 700;
color: var(--ortho-text);
margin: 0;
line-height: 1.3;
}
.ortho-ai-desc {
color: var(--ortho-text-muted);
font-size: 0.9375rem;
line-height: 1.7;
margin: 0 0 1.5rem;
max-width: 62ch;
}
.ortho-ai-suggestions {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.75rem;
margin-bottom: 1.5rem;
}
.ortho-ai-chip {
padding: 0.8rem 1rem;
background: rgba(13, 148, 136, 0.06);
border: 1.5px solid rgba(13, 148, 136, 0.16);
border-radius: 999px;
font-size: 0.875rem;
font-weight: 600;
color: var(--ortho-text);
cursor: pointer;
transition: all 0.2s ease;
text-align: center;
line-height: 1.4;
font-family: inherit;
}
.ortho-ai-chip:hover {
background: rgba(13, 148, 136, 0.12);
border-color: rgba(13, 148, 136, 0.45);
transform: translateY(-2px);
box-shadow: 0 10px 22px rgba(13, 148, 136, 0.12);
}
.ortho-ai-chip:active {
transform: translateY(0);
}
.ortho-ai-form {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.ortho-ai-form[hidden] {
display: none;
}
.ortho-ai-label {
font-size: 0.875rem;
font-weight: 700;
color: var(--ortho-text);
}
.ortho-ai-textarea {
width: 100%;
padding: 0.95rem 1rem;
border: 1.5px solid var(--ortho-border);
border-radius: 12px;
font-size: 0.9375rem;
line-height: 1.6;
color: var(--ortho-text);
background: rgba(255, 255, 255, 0.96);
resize: vertical;
min-height: 112px;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
font-family: inherit;
}
.ortho-ai-textarea:focus {
outline: none;
border-color: var(--ortho-primary);
box-shadow: 0 0 0 4px rgba(13, 148, 136, 0.12);
}
.ortho-ai-textarea::placeholder {
color: var(--ortho-text-muted);
opacity: 0.7;
}
.ortho-ai-meta {
display: flex;
justify-content: flex-end;
margin-bottom: 0.25rem;
}
.ortho-ai-charcount {
font-size: 0.8125rem;
color: var(--ortho-text-muted);
font-variant-numeric: tabular-nums;
}
.ortho-ai-charcount--warn {
color: #d97706;
font-weight: 700;
}
.ortho-ai-charcount--max {
color: var(--ortho-error);
font-weight: 700;
}
.ortho-ai-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.95rem 1.5rem;
background: linear-gradient(135deg, var(--ortho-primary) 0%, #14b8a6 100%);
color: #fff;
border: none;
border-radius: 12px;
font-size: 1rem;
font-weight: 700;
cursor: pointer;
transition: background-color 0.2s, transform 0.1s, box-shadow 0.2s;
font-family: inherit;
line-height: 1.4;
}
.ortho-ai-btn:hover {
box-shadow: 0 14px 28px rgba(13, 148, 136, 0.25);
transform: translateY(-1px);
}
.ortho-ai-btn:active {
transform: scale(0.98);
}
.ortho-ai-btn:disabled {
opacity: 0.7;
cursor: not-allowed;
transform: none;
}
.ortho-ai-btn-loading {
display: none;
align-items: center;
gap: 0.5rem;
}
.ortho-ai-btn.is-loading .ortho-ai-btn-text {
display: none;
}
.ortho-ai-btn.is-loading .ortho-ai-btn-loading {
display: inline-flex;
}
.ortho-ai-spinner {
width: 20px;
height: 20px;
border: 2.5px solid rgba(255, 255, 255, 0.3);
border-top-color: #fff;
border-radius: 50%;
animation: ortho-spin 0.8s linear infinite;
}
@keyframes ortho-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.ortho-ai-loading {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1.25rem;
margin-top: 1.5rem;
padding: 2rem 1.5rem;
background: linear-gradient(135deg, #f0fdfa 0%, #fcfcfc 100%);
border: 1px solid #99f6e4;
border-radius: 14px;
animation: ortho-fadeIn 0.3s ease forwards;
}
.ortho-ai-loading[hidden] {
display: none;
}
.ortho-ai-loading-icon {
width: 80px;
height: 80px;
flex-shrink: 0;
}
.ortho-ai-loading-text {
font-size: 0.95rem;
color: var(--ortho-text);
font-weight: 600;
margin: 0;
letter-spacing: 0.3px;
animation: ortho-pulse 2s ease-in-out infinite;
}
@keyframes ortho-pulse {
0%, 100% { opacity: 0.7; }
50% { opacity: 1; }
}
.ortho-dots::after {
content: '.';
display: inline-block;
animation: ortho-dots 1.8s infinite steps(1);
}
@keyframes ortho-dots {
0%, 10% { content: '.'; }
30% { content: '..'; }
55%, 100% { content: '...'; }
}
.ortho-ai-result {
margin-top: 1.75rem;
display: grid;
grid-template-columns: 1fr;
gap: 1.5rem;
align-items: flex-start;
}
.ortho-ai-result[hidden] {
display: none;
}
.ortho-ai-image-container {
display: none;
width: 100%;
}
.ortho-ai-image-container.has-visual {
display: block;
}
.ortho-visual-card {
background: linear-gradient(180deg, #fcfefe 0%, #f4fbfa 100%);
border: 1px solid rgba(13, 148, 136, 0.14);
border-radius: 20px;
padding: 1.15rem;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.ortho-visual-head {
margin-bottom: 1rem;
}
.ortho-visual-badge {
display: inline-flex;
padding: 0.3rem 0.65rem;
border-radius: 999px;
background: rgba(13, 148, 136, 0.1);
color: var(--ortho-primary-hover);
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.ortho-visual-title {
margin: 0.6rem 0 0.35rem;
font-size: 1.15rem;
line-height: 1.2;
color: var(--ortho-text);
}
.ortho-visual-subtitle {
margin: 0;
font-size: 0.87rem;
line-height: 1.55;
color: var(--ortho-text-muted);
}
.ortho-visual-stage {
position: relative;
min-height: 280px;
border-radius: 18px;
background:
radial-gradient(circle at top left, rgba(20, 184, 166, 0.12), transparent 28%),
linear-gradient(180deg, #ffffff 0%, #eefaf8 100%);
border: 1px solid rgba(13, 148, 136, 0.12);
overflow: hidden;
}
.ortho-ground-line,
.ortho-leg-length-ground {
position: absolute;
left: 8%;
right: 8%;
bottom: 20%;
border-top: 2px dashed rgba(100, 116, 139, 0.4);
}
.ortho-side-leg {
position: absolute;
left: 18%;
top: 10%;
width: 26px;
height: 106px;
border-radius: 16px;
background: linear-gradient(180deg, #cee8e4 0%, #9ed1ca 100%);
border: 2px solid rgba(13, 148, 136, 0.55);
}
.ortho-side-foot {
position: absolute;
left: 18%;
bottom: 19%;
width: 68%;
height: 40%;
background: linear-gradient(180deg, #d8eeea 0%, #a8d5ce 100%);
border: 2px solid rgba(13, 148, 136, 0.6);
border-radius: 38% 42% 30% 44% / 30% 44% 28% 36%;
transform: skewX(2deg);
box-shadow: 0 18px 26px rgba(13, 148, 136, 0.12);
}
.ortho-side-foot-cutout {
position: absolute;
left: 34%;
bottom: -2px;
width: 24%;
height: 38%;
background: linear-gradient(180deg, #ffffff 0%, #eefaf8 100%);
border-radius: 50% 50% 10px 10px;
transform: rotate(-10deg);
}
.ortho-accent-line {
position: absolute;
border-radius: 999px;
opacity: 0.6;
}
.ortho-accent-line--hallux {
top: 14%;
left: 31%;
width: 6px;
height: 92px;
background: linear-gradient(180deg, rgba(239, 68, 68, 0.12), rgba(239, 68, 68, 0.55));
transform: rotate(23deg);
transform-origin: bottom center;
}
.ortho-accent-line--flat {
left: 28%;
right: 20%;
bottom: 19%;
height: 8px;
background: linear-gradient(90deg, rgba(245, 158, 11, 0.1), rgba(245, 158, 11, 0.6));
}
.ortho-top-foot {
position: absolute;
left: 30%;
top: 14%;
width: 40%;
height: 64%;
background: linear-gradient(180deg, #d8eeea 0%, #a8d5ce 100%);
border: 2px solid rgba(13, 148, 136, 0.6);
border-radius: 44% 44% 34% 34% / 24% 24% 44% 44%;
box-shadow: 0 18px 26px rgba(13, 148, 136, 0.12);
}
.ortho-top-toe {
position: absolute;
background: linear-gradient(180deg, #d8eeea 0%, #a8d5ce 100%);
border: 2px solid rgba(13, 148, 136, 0.6);
border-radius: 50%;
}
.ortho-top-toe-1 { top: 7%; left: 34%; width: 18%; height: 16%; }
.ortho-top-toe-2 { top: 5.5%; left: 46%; width: 14%; height: 13%; }
.ortho-top-toe-3 { top: 7.5%; left: 56%; width: 11%; height: 11%; }
.ortho-top-toe-4 { top: 10%; left: 64%; width: 9%; height: 9%; }
.ortho-top-toe-5 { top: 12%; left: 70%; width: 7%; height: 7%; }
.ortho-leg-upper,
.ortho-leg-lower {
position: absolute;
left: 42%;
width: 16%;
background: linear-gradient(180deg, #d8eeea 0%, #a8d5ce 100%);
border: 2px solid rgba(13, 148, 136, 0.6);
border-radius: 24px;
}
.ortho-leg-upper {
top: 8%;
height: 34%;
}
.ortho-leg-lower {
top: 56%;
height: 28%;
}
.ortho-knee-joint {
position: absolute;
left: 38%;
top: 41%;
width: 24%;
height: 18%;
border-radius: 50%;
background:
radial-gradient(circle, rgba(239, 68, 68, 0.22) 0%, rgba(239, 68, 68, 0.06) 45%, transparent 68%),
linear-gradient(180deg, #e7f5f2 0%, #c6e6e1 100%);
border: 2px solid rgba(13, 148, 136, 0.6);
}
.ortho-leg-length-figure {
position: absolute;
top: 10%;
width: 24%;
height: 72%;
}
.ortho-leg-length-left { left: 19%; }
.ortho-leg-length-right { right: 19%; }
.ortho-leg-head {
position: absolute;
left: 34%;
top: 0;
width: 32%;
aspect-ratio: 1;
border-radius: 50%;
background: #0d9488;
}
.ortho-leg-torso {
position: absolute;
left: 47%;
top: 16%;
width: 6px;
height: 35%;
border-radius: 999px;
background: #0d9488;
}
.ortho-leg-segment {
position: absolute;
top: 50%;
width: 5px;
border-radius: 999px;
background: #0d9488;
transform-origin: top center;
}
.ortho-leg-segment-left {
left: 42%;
height: 38%;
transform: rotate(11deg);
}
.ortho-leg-segment-right {
right: 42%;
height: 38%;
transform: rotate(-11deg);
}
.ortho-leg-length-right .ortho-leg-head,
.ortho-leg-length-right .ortho-leg-torso,
.ortho-leg-length-right .ortho-leg-segment {
background: #ef4444;
}
.ortho-leg-length-right.is-shorter .ortho-leg-segment {
height: 31%;
}
.ortho-length-marker {
position: absolute;
left: 50%;
top: 62%;
width: 2px;
height: 20%;
background: repeating-linear-gradient(
to bottom,
rgba(100, 116, 139, 0.65) 0,
rgba(100, 116, 139, 0.65) 6px,
transparent 6px,
transparent 12px
);
}
.ortho-hotspot {
position: absolute;
display: inline-flex;
align-items: center;
gap: 0.35rem;
border: 0;
background: transparent;
padding: 0;
cursor: pointer;
z-index: 2;
text-align: left;
}
.ortho-hotspot-ring,
.ortho-hotspot-dot {
display: block;
border-radius: 50%;
}
.ortho-hotspot-ring {
width: 22px;
height: 22px;
background: rgba(239, 68, 68, 0.12);
border: 1px solid rgba(239, 68, 68, 0.35);
animation: ortho-hotspotPulse 2.4s ease-in-out infinite;
}
.ortho-hotspot-dot {
position: absolute;
left: 6px;
top: 6px;
width: 10px;
height: 10px;
background: var(--ortho-red);
box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.18);
}
.ortho-hotspot-label {
display: inline-flex;
padding: 0.26rem 0.45rem;
border-radius: 999px;
background: rgba(255, 255, 255, 0.92);
border: 1px solid rgba(13, 148, 136, 0.14);
color: var(--ortho-text);
font-size: 0.72rem;
font-weight: 700;
line-height: 1;
white-space: nowrap;
}
.ortho-hotspot.is-active .ortho-hotspot-ring {
background: rgba(239, 68, 68, 0.18);
border-color: rgba(239, 68, 68, 0.55);
}
.ortho-hotspot.is-focus .ortho-hotspot-label,
.ortho-hotspot:hover .ortho-hotspot-label {
background: #fff;
border-color: rgba(239, 68, 68, 0.25);
}
.ortho-hotspot--ankle { top: 22%; left: 13%; }
.ortho-hotspot--heel { bottom: 18%; left: 13%; }
.ortho-hotspot--arch { bottom: 28%; left: 39%; }
.ortho-hotspot--sole { bottom: 11%; left: 43%; }
.ortho-hotspot--ball { bottom: 24%; right: 17%; }
.ortho-hotspot--toes { top: 10%; right: 15%; }
.ortho-template-knee-leg .ortho-hotspot--knee { top: 43%; left: 33%; }
.ortho-template-knee-leg .ortho-hotspot--alignment { top: 18%; right: 18%; }
.ortho-template-leg-length .ortho-hotspot--alignment { top: 25%; left: 34%; }
.ortho-template-leg-length .ortho-hotspot--heel { bottom: 13%; right: 18%; }
.ortho-template-top-foot .ortho-hotspot--toes { top: 4%; right: 16%; }
.ortho-template-top-foot .ortho-hotspot--ball { top: 26%; left: 17%; }
.ortho-template-top-foot .ortho-hotspot--sole { top: 49%; left: 17%; }
.ortho-template-top-foot .ortho-hotspot--heel { bottom: 12%; left: 30%; }
@keyframes ortho-hotspotPulse {
0%, 100% { transform: scale(0.95); opacity: 0.75; }
50% { transform: scale(1.08); opacity: 1; }
}
.ortho-visual-legend {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-top: 0.95rem;
}
.ortho-zone-chip {
appearance: none;
border: 1px solid rgba(13, 148, 136, 0.15);
background: rgba(255, 255, 255, 0.86);
color: var(--ortho-text);
border-radius: 999px;
padding: 0.48rem 0.72rem;
font-size: 0.8rem;
font-weight: 700;
line-height: 1;
cursor: pointer;
transition: all 0.2s ease;
}
.ortho-zone-chip.is-active {
background: rgba(239, 68, 68, 0.08);
border-color: rgba(239, 68, 68, 0.2);
}
.ortho-zone-chip.is-focus,
.ortho-zone-chip:hover {
background: rgba(13, 148, 136, 0.12);
border-color: rgba(13, 148, 136, 0.32);
transform: translateY(-1px);
}
.ortho-ai-text-column {
min-width: 0;
}
.ortho-ai-response {
font-size: 0.95rem;
line-height: 1.75;
color: var(--ortho-text);
margin: 0;
}
.ortho-ai-response p {
margin: 0 0 0.8rem;
}
.ortho-ai-response p:last-child {
margin-bottom: 0;
}
.ortho-ai-response strong {
color: var(--ortho-primary);
font-weight: 800;
}
.ortho-ai-response ul {
list-style: none !important;
padding: 0 !important;
margin: 0.75rem 0 !important;
}
.ortho-ai-response ul li {
margin: 0.55rem 0 !important;
padding-left: 1.5rem !important;
position: relative !important;
list-style-type: none !important;
}
.ortho-ai-response ul li::before {
content: '' !important;
position: absolute !important;
left: 0.25rem !important;
top: 0.55em !important;
width: 7px !important;
height: 7px !important;
background: var(--ortho-primary) !important;
border-radius: 50% !important;
}
@keyframes ortho-revealBlock {
from { opacity: 0; transform: translateY(14px); }
to { opacity: 1; transform: translateY(0); }
}
.ortho-reveal {
--delay: 0ms;
opacity: 0;
transform: translateY(14px);
animation: ortho-revealBlock 0.55s ease-out forwards;
animation-delay: var(--delay);
}
.ortho-ai-cta {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
width: 100%;
padding: 1.05rem 1.5rem;
background: linear-gradient(135deg, var(--ortho-primary) 0%, #14b8a6 100%);
color: #fff !important;
text-align: center;
text-decoration: none !important;
border-radius: 12px;
font-size: 1.02rem;
font-weight: 800;
transition: transform 0.25s, box-shadow 0.25s;
line-height: 1.5;
margin-top: 1.25rem;
}
.ortho-ai-cta:hover {
box-shadow: 0 16px 30px rgba(13, 148, 136, 0.25);
transform: translateY(-2px);
color: #fff !important;
text-decoration: none !important;
}
.ortho-ai-cta:active {
transform: translateY(0);
}
.ortho-ai-cta[hidden] {
display: none;
}
.ortho-cta-reveal {
animation: ortho-ctaReveal 0.6s ease-out forwards;
}
@keyframes ortho-ctaReveal {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.ortho-ai-response--error {
margin-top: 1.5rem;
padding: 1rem 1.25rem;
border-radius: 12px;
background: var(--ortho-error-bg);
border: 1px solid #fecaca;
color: var(--ortho-error);
font-size: 0.9375rem;
line-height: 1.6;
animation: ortho-fadeIn 0.3s ease;
}
.ortho-ai-response--error[hidden] {
display: none;
}
.ortho-ai-response--error p {
margin: 0;
}
@keyframes ortho-fadeIn {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
.ortho-ai-disclaimer {
display: flex;
align-items: flex-start;
gap: 0.375rem;
margin: 1.25rem 0 0;
padding-top: 1rem;
border-top: 1px solid var(--ortho-border);
font-size: 0.8125rem;
color: var(--ortho-text-muted);
line-height: 1.5;
}
.ortho-ai-disclaimer svg {
margin-top: 1px;
}
@media (min-width: 768px) {
.ortho-ai-result {
grid-template-columns: 330px 1fr;
gap: 2rem;
}
}
@media (min-width: 480px) and (max-width: 767px) {
.ortho-ai-suggestions {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 479px) {
.ortho-ai-card {
padding: 1.25rem;
}
.ortho-ai-title {
font-size: 1.2rem;
}
.ortho-ai-btn {
width: 100%;
}
.ortho-ai-suggestions {
grid-template-columns: 1fr;
gap: 0.5rem;
}
.ortho-ai-chip {
padding: 0.7rem 0.875rem;
font-size: 0.8125rem;
}
.ortho-visual-stage {
min-height: 240px;
}
.ortho-hotspot-label {
font-size: 0.68rem;
}
.ortho-ai-response {
font-size: 0.89rem;
}
.ortho-ai-cta {
font-size: 0.95rem;
padding: 0.9rem 1rem;
}
}
@media (max-width: 360px) {
.ortho-ai-wrapper {
padding: 0 0.5rem;
}
.ortho-ai-card {
padding: 1rem;
}
} .ortho-ai-chat-root {
--oc-primary: #0d9488;
--oc-primary-hover: #0f766e;
--oc-primary-light: #ccfbf1;
--oc-primary-grad: linear-gradient(135deg, #0d9488 0%, #14b8a6 100%);
--oc-bg: #ffffff;
--oc-surface: #f8fffe;
--oc-border: #e2eceb;
--oc-text: #1e293b;
--oc-text-muted: #64748b;
--oc-user-bubble: linear-gradient(135deg, #0d9488 0%, #14b8a6 100%);
--oc-bot-bubble: #f1f5f9;
--oc-radius: 18px;
--oc-shadow-fab: 0 12px 28px rgba(13, 148, 136, 0.32), 0 4px 10px rgba(15, 23, 42, 0.08);
--oc-shadow-panel: 0 24px 60px rgba(15, 23, 42, 0.18), 0 2px 8px rgba(15, 23, 42, 0.06);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
color: var(--oc-text);
line-height: 1.5;
-webkit-font-smoothing: antialiased;
box-sizing: border-box;
}
.ortho-ai-chat-root *,
.ortho-ai-chat-root *::before,
.ortho-ai-chat-root *::after {
box-sizing: border-box;
} .ortho-ai-chat-fab {
position: fixed;
bottom: 24px;
right: 24px;
width: 60px;
height: 60px;
border-radius: 50%;
border: none;
padding: 0;
background: var(--oc-primary-grad);
color: #fff;
cursor: pointer;
box-shadow: var(--oc-shadow-fab);
z-index: 999998;
display: inline-flex;
align-items: center;
justify-content: center;
transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
font-family: inherit;
}
.ortho-ai-chat-fab:hover {
transform: translateY(-2px) scale(1.04);
box-shadow: 0 18px 36px rgba(13, 148, 136, 0.38), 0 6px 12px rgba(15, 23, 42, 0.1);
}
.ortho-ai-chat-fab:active {
transform: translateY(0) scale(0.98);
}
.ortho-ai-chat-fab:focus-visible {
outline: 3px solid rgba(13, 148, 136, 0.5);
outline-offset: 3px;
}
.ortho-ai-chat-fab-icon {
width: 28px;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
transition: opacity 0.25s ease, transform 0.25s ease;
}
.ortho-ai-chat-fab-icon svg {
width: 100%;
height: 100%;
display: block;
}
.ortho-ai-chat-fab-icon--close {
position: absolute;
opacity: 0;
transform: rotate(-90deg) scale(0.6);
}
.ortho-ai-chat-fab.is-open .ortho-ai-chat-fab-icon--open {
opacity: 0;
transform: rotate(90deg) scale(0.6);
}
.ortho-ai-chat-fab.is-open .ortho-ai-chat-fab-icon--close {
opacity: 1;
transform: rotate(0) scale(1);
}
.ortho-ai-chat-fab-pulse {
position: absolute;
inset: 0;
border-radius: 50%;
background: rgba(13, 148, 136, 0.45);
z-index: -1;
animation: ortho-chat-pulse 2.6s ease-out infinite;
pointer-events: none;
}
.ortho-ai-chat-fab.is-open .ortho-ai-chat-fab-pulse {
display: none;
}
@keyframes ortho-chat-pulse {
0%   { transform: scale(1);    opacity: 0.55; }
70%  { transform: scale(1.6);  opacity: 0; }
100% { transform: scale(1.6);  opacity: 0; }
} .ortho-ai-chat-panel {
position: fixed;
bottom: 100px;
right: 24px;
width: 380px;
max-width: calc(100vw - 32px);
height: 580px;
max-height: calc(100vh - 140px);
background: var(--oc-bg);
border-radius: 20px;
box-shadow: var(--oc-shadow-panel);
z-index: 999997;
display: flex;
flex-direction: column;
overflow: hidden;
transform-origin: bottom right;
transform: translateY(20px) scale(0.96);
opacity: 0;
transition: opacity 0.28s ease, transform 0.28s ease;
pointer-events: none;
}
.ortho-ai-chat-panel[hidden] {
display: none !important;
}
.ortho-ai-chat-panel.is-open {
transform: translateY(0) scale(1);
opacity: 1;
pointer-events: auto;
} .ortho-ai-chat-header {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 16px;
background: var(--oc-primary-grad);
color: #fff;
flex-shrink: 0;
}
.ortho-ai-chat-header-avatar {
width: 36px;
height: 36px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.2);
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.ortho-ai-chat-header-avatar svg {
width: 18px;
height: 18px;
color: #fff;
}
.ortho-ai-chat-header-text {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
line-height: 1.25;
}
.ortho-ai-chat-header-title {
font-size: 15px;
font-weight: 700;
color: #fff;
margin: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ortho-ai-chat-header-subtitle {
font-size: 12px;
color: rgba(255, 255, 255, 0.85);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ortho-ai-chat-close {
background: rgba(255, 255, 255, 0.18);
border: none;
border-radius: 50%;
width: 32px;
height: 32px;
color: #fff;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: background 0.2s ease;
padding: 0;
}
.ortho-ai-chat-close:hover {
background: rgba(255, 255, 255, 0.32);
}
.ortho-ai-chat-close svg {
width: 16px;
height: 16px;
} .ortho-ai-chat-body {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
background: var(--oc-surface);
}
.ortho-ai-chat-messages {
flex: 1;
overflow-y: auto;
overflow-x: hidden;
padding: 16px 14px 8px;
display: flex;
flex-direction: column;
gap: 10px;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
scrollbar-color: rgba(13, 148, 136, 0.25) transparent;
}
.ortho-ai-chat-messages::-webkit-scrollbar {
width: 6px;
}
.ortho-ai-chat-messages::-webkit-scrollbar-track {
background: transparent;
}
.ortho-ai-chat-messages::-webkit-scrollbar-thumb {
background: rgba(13, 148, 136, 0.25);
border-radius: 3px;
}
.ortho-ai-chat-msg {
max-width: 86%;
display: flex;
flex-direction: column;
animation: ortho-chat-msg-in 0.28s ease-out;
}
.ortho-ai-chat-msg--bot {
align-self: flex-start;
}
.ortho-ai-chat-msg--user {
align-self: flex-end;
align-items: flex-end;
}
.ortho-ai-chat-bubble {
padding: 10px 14px;
border-radius: 16px;
font-size: 14px;
line-height: 1.55;
word-wrap: break-word;
overflow-wrap: anywhere;
}
.ortho-ai-chat-msg--bot .ortho-ai-chat-bubble {
background: var(--oc-bot-bubble);
color: var(--oc-text);
border-bottom-left-radius: 4px;
}
.ortho-ai-chat-msg--user .ortho-ai-chat-bubble {
background: var(--oc-user-bubble);
color: #fff;
border-bottom-right-radius: 4px;
}
.ortho-ai-chat-bubble p {
margin: 0 0 8px;
}
.ortho-ai-chat-bubble p:last-child {
margin-bottom: 0;
}
.ortho-ai-chat-bubble strong {
font-weight: 700;
}
.ortho-ai-chat-msg--bot .ortho-ai-chat-bubble strong {
color: var(--oc-primary-hover);
}
.ortho-ai-chat-msg--user .ortho-ai-chat-bubble strong {
color: #fff;
}
.ortho-ai-chat-bubble ul {
list-style: none !important;
padding: 0 !important;
margin: 6px 0 !important;
}
.ortho-ai-chat-bubble ul li {
margin: 4px 0 !important;
padding-left: 16px !important;
position: relative !important;
list-style-type: none !important;
}
.ortho-ai-chat-bubble ul li::before {
content: '' !important;
position: absolute !important;
left: 2px !important;
top: 0.6em !important;
width: 6px !important;
height: 6px !important;
background: var(--oc-primary) !important;
border-radius: 50% !important;
}
.ortho-ai-chat-msg--user .ortho-ai-chat-bubble ul li::before {
background: rgba(255, 255, 255, 0.9) !important;
}
@keyframes ortho-chat-msg-in {
from { opacity: 0; transform: translateY(8px); }
to   { opacity: 1; transform: translateY(0); }
} .ortho-ai-chat-cta {
align-self: flex-start;
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 6px;
padding: 10px 16px;
background: var(--oc-primary-grad);
color: #fff !important;
text-decoration: none !important;
border-radius: 999px;
font-size: 13px;
font-weight: 700;
box-shadow: 0 6px 14px rgba(13, 148, 136, 0.25);
transition: transform 0.2s ease, box-shadow 0.2s ease;
animation: ortho-chat-msg-in 0.4s ease-out 0.15s backwards;
}
.ortho-ai-chat-cta:hover {
transform: translateY(-1px);
box-shadow: 0 10px 20px rgba(13, 148, 136, 0.32);
color: #fff !important;
text-decoration: none !important;
}
.ortho-ai-chat-cta svg {
width: 14px;
height: 14px;
} .ortho-ai-chat-typing {
display: inline-flex;
gap: 4px;
padding: 12px 16px;
background: var(--oc-bot-bubble);
border-radius: 16px;
border-bottom-left-radius: 4px;
align-self: flex-start;
max-width: 86%;
}
.ortho-ai-chat-typing span {
width: 7px;
height: 7px;
background: var(--oc-text-muted);
border-radius: 50%;
animation: ortho-chat-typing 1.1s ease-in-out infinite;
opacity: 0.5;
}
.ortho-ai-chat-typing span:nth-child(2) { animation-delay: 0.15s; }
.ortho-ai-chat-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes ortho-chat-typing {
0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
30%           { transform: translateY(-5px); opacity: 1; }
} .ortho-ai-chat-quick {
display: flex;
flex-wrap: wrap;
gap: 6px;
padding: 4px 14px 14px;
flex-shrink: 0;
transition: opacity 0.3s ease, max-height 0.3s ease, padding 0.3s ease;
max-height: 200px;
overflow: hidden;
}
.ortho-ai-chat-quick.is-hidden {
opacity: 0;
max-height: 0;
padding-top: 0;
padding-bottom: 0;
pointer-events: none;
}
.ortho-ai-chat-quick-chip {
padding: 6px 12px;
background: rgba(13, 148, 136, 0.08);
border: 1px solid rgba(13, 148, 136, 0.22);
border-radius: 999px;
font-size: 12.5px;
font-weight: 600;
color: var(--oc-primary-hover);
cursor: pointer;
transition: all 0.2s ease;
font-family: inherit;
line-height: 1.3;
}
.ortho-ai-chat-quick-chip:hover {
background: rgba(13, 148, 136, 0.18);
border-color: rgba(13, 148, 136, 0.4);
transform: translateY(-1px);
}
.ortho-ai-chat-quick-chip:active {
transform: translateY(0);
} .ortho-ai-chat-form {
display: flex;
align-items: flex-end;
gap: 8px;
padding: 10px 12px;
background: var(--oc-bg);
border-top: 1px solid var(--oc-border);
flex-shrink: 0;
}
.ortho-ai-chat-visually-hidden {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
.ortho-ai-chat-input {
flex: 1;
min-width: 0;
border: 1.5px solid var(--oc-border);
border-radius: 22px;
padding: 9px 14px;
font-size: 14px;
line-height: 1.4;
color: var(--oc-text);
background: #fff;
resize: none; min-height: 38px;
max-height: 100px;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
font-family: inherit;
overflow-y: auto;
}
.ortho-ai-chat-input:focus {
outline: none;
border-color: var(--oc-primary);
box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.14);
}
.ortho-ai-chat-input::placeholder {
color: var(--oc-text-muted);
opacity: 0.75;
}
.ortho-ai-chat-send {
width: 38px;
height: 38px;
border-radius: 50%;
border: none;
background: var(--oc-primary-grad);
color: #fff;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
padding: 0;
}
.ortho-ai-chat-send svg {
width: 16px;
height: 16px;
transform: translateX(-1px);
}
.ortho-ai-chat-send:hover:not(:disabled) {
transform: translateY(-1px);
box-shadow: 0 8px 16px rgba(13, 148, 136, 0.32);
}
.ortho-ai-chat-send:disabled {
opacity: 0.4;
cursor: not-allowed;
} .ortho-ai-chat-footer {
margin: 0;
padding: 6px 14px 10px;
text-align: center;
background: var(--oc-bg);
flex-shrink: 0;
}
.ortho-ai-chat-footer-note {
font-size: 11px;
color: var(--oc-text-muted);
line-height: 1.4;
}
.ortho-ai-chat-footer-call {
color: var(--oc-primary-hover) !important;
text-decoration: none !important;
font-weight: 700;
}
.ortho-ai-chat-footer-call:hover {
text-decoration: underline !important;
color: var(--oc-primary) !important;
} .ortho-ai-chat-error {
align-self: stretch;
margin: 4px 0;
padding: 9px 12px;
background: #fef2f2;
border: 1px solid #fecaca;
color: #b91c1c;
border-radius: 12px;
font-size: 12.5px;
line-height: 1.45;
} @media (max-width: 767px) {
.ortho-ai-chat-fab {
bottom: 96px; right: 16px;
width: 54px;
height: 54px;
}
.ortho-ai-chat-fab-icon {
width: 24px;
height: 24px;
} .ortho-ai-chat-fab.is-open {
opacity: 0;
transform: scale(0.6);
pointer-events: none;
visibility: hidden;
transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
}
.ortho-ai-chat-panel {
bottom: 96px;
right: 16px;
left: 16px;
width: auto;
max-width: none;
height: auto;
max-height: calc(100vh - 112px);
top: 16px;
border-radius: 16px;
}
.ortho-ai-chat-header {
padding: 10px 12px;
gap: 10px;
}
.ortho-ai-chat-header-avatar {
width: 32px;
height: 32px;
}
.ortho-ai-chat-header-avatar svg {
width: 16px;
height: 16px;
}
.ortho-ai-chat-header-title {
font-size: 14px;
}
.ortho-ai-chat-header-subtitle {
font-size: 11px;
}
.ortho-ai-chat-close {
width: 28px;
height: 28px;
}
.ortho-ai-chat-messages {
padding: 12px 12px 6px;
gap: 8px;
}
.ortho-ai-chat-bubble {
padding: 9px 12px;
font-size: 13.5px;
line-height: 1.5;
}
.ortho-ai-chat-msg {
max-width: 90%;
}
.ortho-ai-chat-quick {
padding: 2px 12px 10px;
gap: 5px;
}
.ortho-ai-chat-quick-chip {
padding: 5px 10px;
font-size: 12px;
}
.ortho-ai-chat-form {
padding: 8px 10px;
gap: 6px;
}
.ortho-ai-chat-input {
font-size: 16px; padding: 8px 12px;
border-radius: 20px;
min-height: 36px; max-height: 88px;
}
.ortho-ai-chat-send {
width: 36px;
height: 36px;
}
.ortho-ai-chat-footer {
padding: 4px 12px 8px;
}
.ortho-ai-chat-footer-note {
font-size: 10.5px;
}
.ortho-ai-chat-cta {
font-size: 12px;
padding: 8px 14px;
}
} @media (max-width: 360px) {
.ortho-ai-chat-fab {
bottom: 88px;
width: 50px;
height: 50px;
}
.ortho-ai-chat-panel {
bottom: 88px;
left: 10px;
right: 10px;
top: 12px;
}
} @media (prefers-reduced-motion: reduce) {
.ortho-ai-chat-fab,
.ortho-ai-chat-panel,
.ortho-ai-chat-msg,
.ortho-ai-chat-cta {
animation: none !important;
transition: opacity 0.15s ease !important;
}
.ortho-ai-chat-fab-pulse {
display: none;
}
.ortho-ai-chat-typing span {
animation: none !important;
opacity: 0.6;
}
}.menu-item-object-language_switcher .etm-flag-image {
display: inline-block;
margin: -1px 5px;
vertical-align: baseline;
padding: 0;
border: 0;
border-radius:0;
} .etm-language-switcher{
position: relative;
display: inline-block;
padding: 0;
border: 0;
margin: 2px;
box-sizing: border-box;
}
.etm-language-switcher > div {
box-sizing: border-box;
padding:3px 20px 3px 5px;
border: 1px solid #c1c1c1;
border-radius: 3px;
background-image:
linear-gradient(45deg, transparent 50%, gray 50%),
linear-gradient(135deg, gray 50%, transparent 50%);
background-position:
calc(100% - 8px) calc(1em + 0px),
calc(100% - 3px) calc(1em + 0px);
background-size:
5px 5px,
5px 5px;
background-repeat: no-repeat;
background-color: #fff;
}
.etm-language-switcher > div > a {
display: block;
padding: 2px;
border-radius: 3px;
color: rgb(7, 105, 173);
}
.etm-language-switcher > div > a:hover {
background: #f1f1f1;
}
.etm-language-switcher > div > a.etm-ls-shortcode-disabled-language {
cursor: default;
}
.etm-language-switcher > div > a.etm-ls-shortcode-disabled-language:hover {
background: none;
}
.etm-language-switcher > div > a > img{
display: inline;
margin: 0 3px;
width: 18px;
height: 12px;
border-radius: 0;
}
.etm-language-switcher .etm-ls-shortcode-current-language{
display: inline-block;
}
.etm-language-switcher:focus .etm-ls-shortcode-current-language,
.etm-language-switcher:focus-within .etm-ls-shortcode-current-language,
.etm-language-switcher:hover .etm-ls-shortcode-current-language{
visibility: hidden;
}
.etm-language-switcher .etm-ls-shortcode-language{
display: inline-block;
height: 1px;
overflow: hidden;
visibility: hidden;
z-index: 1;
max-height: 250px;
overflow-y: auto;
left: 0;
top: 0;
min-height: auto;
}
.etm-language-switcher:focus .etm-ls-shortcode-language,
.etm-language-switcher:focus-within .etm-ls-shortcode-language,
.etm-language-switcher:hover .etm-ls-shortcode-language{
visibility: visible;
max-height: 250px;
height: auto;
overflow-y: auto;
position: absolute;
left: 0;
top: 0;
display: inline-block !important;
min-height: auto;
} #wpadminbar #wp-admin-bar-etm_edit_translation .ab-icon:before {
content: '\f326';
top: 3px;
}
@media screen and ( max-width: 782px ) {
#wpadminbar #wp-admin-bar-etm_edit_translation > .ab-item {
text-indent: 0;
}
#wpadminbar li#wp-admin-bar-etm_edit_translation {
display: block;
}
}