html, body {
margin: 0;
padding: 0;
height: 100%;
}
body {
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
} :root {
--bery-bg: #f5f5f7;
--bery-bg-elevated: #ffffff;
--bery-bg-header: #ffffff;
--bery-bg-composer: #ffffff;
--bery-border-subtle: #dddddd;
--bery-text-main: #111111;
--bery-text-muted: #666666;
--bery-text-accent: #00796b; --bery-text-system: #9c27b0;
--bery-user-bubble-bg: #00796b;
--bery-user-bubble-text: #ffffff;
--bery-assistant-text: #111111;
--bery-shadow-soft: 0 0 8px rgba(0, 0, 0, 0.04);
--bery-header-height: 56px;
--bery-thread-padding-x: 16px;
--bery-thread-padding-y: 8px;
--bery-composer-height-min: 48px;
--bery-composer-height-max: 120px;
--bery-radius-soft: 12px;
--bery-radius-pill: 999px;
} #oranea-beryllium-app[data-theme="light"] {
background-color: var(--bery-bg);
color: var(--bery-text-main);
} #oranea-beryllium-app[data-theme="dark"] {
--bery-bg: #101010;
--bery-bg-elevated: #181818;
--bery-bg-header: #181818;
--bery-bg-composer: #181818;
--bery-border-subtle: #333333;
--bery-text-main: #f5f5f5;
--bery-text-muted: #aaaaaa;
--bery-text-accent: #4dd0e1;
--bery-user-bubble-bg: #4dd0e1;
--bery-user-bubble-text: #051316;
--bery-assistant-text: #f5f5f5;
--bery-shadow-soft: 0 0 12px rgba(0, 0, 0, 0.35);
}html, body {
height: 100%;
} .oranea-beryllium-app,
#oranea-beryllium-app {
box-sizing: border-box;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
background-color: var(--bery-bg);
color: var(--bery-text-main); margin: 0;
padding: 0;
z-index: 999999;
} #oranea-beryllium-app *,
#oranea-beryllium-app *::before,
#oranea-beryllium-app *::after {
box-sizing: border-box;
} .beryllium-header {
flex: 0 0 var(--bery-header-height);
height: var(--bery-header-height);
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 8px;
background-color: var(--bery-bg-header);
box-shadow: var(--bery-shadow-soft);
z-index: 10;
} .beryllium-header-left {
display: flex;
align-items: center;
gap: 8px;
}
.beryllium-avatar {
width: 40px;
height: 40px;
overflow: hidden;
border-radius: 50%;
background-color: #000000;
flex: 0 0 auto;
border: none;
padding: 0;
cursor: pointer;
}
.beryllium-avatar-video {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}
.beryllium-title {
font-size: 14px;
font-weight: 600;
} .beryllium-header-right {
display: flex;
align-items: center;
gap: 4px;
}
.beryllium-header-button {
border: none;
background: transparent;
padding: 6px;
cursor: pointer;
border-radius: 999px;
}
.beryllium-header-button:hover {
background-color: rgba(0, 0, 0, 0.04);
}
#oranea-beryllium-app[data-theme="dark"] .beryllium-header-button:hover {
background-color: rgba(255, 255, 255, 0.07);
} .beryllium-icon-theme,
.beryllium-icon-speed {
font-size: 18px;
} .beryllium-thread {
flex: 1 1 auto; min-height: 0;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding: var(--bery-thread-padding-y) var(--bery-thread-padding-x);
scroll-behavior: smooth;
background-color: var(--bery-bg);
} .beryllium-opening-message {
margin-top: 12px;
margin-bottom: 8px;
font-size: 15px;
color: var(--bery-text-muted);
} .beryllium-composer {
flex: 0 0 auto;
padding: 8px;
background-color: var(--bery-bg-composer);
box-shadow: 0 -1px 6px rgba(0, 0, 0, 0.08);
z-index: 10;
}
.beryllium-composer-inner {
display: flex;
align-items: stretch;
gap: 8px;
background-color: var(--bery-bg-elevated);
border-radius: var(--bery-radius-pill);
padding: 4px 8px;
--bery-composer-control-size: 40px;
}
.beryllium-input {
flex: 1 1 auto;
align-self: stretch;
min-height: var(--bery-composer-height-min);
max-height: var(--bery-composer-height-max);
resize: none;
border-radius: 14px; padding: 6px 14px;
border: none;
font-size: 14px;
line-height: 1.4;
background-color: transparent;
color: var(--bery-text-main);
display: block;
}
.beryllium-input::placeholder {
color: var(--bery-text-muted);
}
.beryllium-composer-actions {
flex: 0 0 auto;
display: flex;
align-items: flex-end;
gap: 4px;
align-self: stretch;
padding-bottom: 30px;
}
.beryllium-composer-button {
width: var(--bery-composer-height-min);
height: var(--bery-composer-height-min);
border-radius: 999px;
border: none;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--bery-user-bubble-bg);
color: var(--bery-user-bubble-text);
cursor: pointer;
flex-shrink: 0; }
.beryllium-mic {
background-image: url(//www.avenir-coherence.com/wp-content/mu-plugins/oranea-chatbot/beryllium/public/assets/media/beryllium-micro.webp);
background-repeat: no-repeat;
background-position: center;
background-size: 55%; } .beryllium-mic {
display: flex;
}
.beryllium-send {
display: none;
}
.beryllium-composer-button:hover {
background-color: rgba(0, 0, 0, 0.04);
}
#oranea-beryllium-app[data-theme="dark"] .beryllium-composer-button:hover {
background-color: rgba(255, 255, 255, 0.08);
}
#oranea-beryllium-app[data-theme="light"] .beryllium-send:hover {
color: #004d40; } .beryllium-mic,
.beryllium-send {
background-color: var(--bery-user-bubble-bg);
color: var(--bery-user-bubble-text);
} .beryllium-thinking-row {
display: flex;
justify-content: center; padding: 8px 0 4px;
}
.beryllium-thinking-row .beryllium-thinking {
display: flex;
align-items: center;
gap: 4px;
} .beryllium-menu {
position: absolute;
right: 8px;
top: calc(var(--bery-header-height) + 4px);
background-color: var(--bery-bg-elevated);
box-shadow: var(--bery-shadow-soft);
border-radius: 8px;
padding: 4px 0;
min-width: 200px;
z-index: 20;
}
.beryllium-menu button {
width: 100%;
padding: 8px 12px;
border: none;
background: transparent;
text-align: left;
font-size: 14px;
cursor: pointer;
}
.beryllium-menu button:hover {
background-color: rgba(0, 0, 0, 0.05);
}
#oranea-beryllium-app[data-theme="dark"] .beryllium-menu button:hover {
background-color: rgba(255, 255, 255, 0.08);
}.beryllium-icon {
font-size: 16px;
line-height: 1;
} .beryllium-message {
margin-bottom: 8px;
font-size: 15px;
} .beryllium-message-user {
display: flex;
justify-content: flex-end;
}
.beryllium-bubble-user {
max-width: 75%;
padding: 8px 12px;
border-radius: var(--bery-radius-soft);
border-bottom-right-radius: 2px;
background-color: var(--bery-user-bubble-bg);
color: var(--bery-user-bubble-text);
font-size: 14px;
line-height: 1.4;
} .beryllium-message-assistant {
display: block;
}
.beryllium-assistant-text {
max-width: 100%;
padding: 4px 0;
font-size: 15px;
line-height: 1.5;
color: var(--bery-assistant-text);
} .beryllium-message-system {
display: flex;
justify-content: center;
}
.beryllium-system-text {
max-width: 90%;
font-size: 13px;
line-height: 1.4;
color: var(--bery-text-system);
text-align: center;
} .beryllium-composer-button:disabled,
.beryllium-header-button:disabled {
opacity: 0.4;
cursor: default;
} .beryllium-opening-message p {
margin: 0;
}.beryllium-thinking {
display: flex;
align-items: center;
gap: 4px;
}
.beryllium-thinking .dot {
width: 5px;
height: 5px;
border-radius: 999px;
background-color: var(--bery-text-muted);
animation: beryllium-dot-pulse 1s infinite ease-in-out;
}
.beryllium-thinking .dot-2 {
animation-delay: 0.15s;
}
.beryllium-thinking .dot-3 {
animation-delay: 0.3s;
}
@keyframes beryllium-dot-pulse {
0%, 80%, 100% {
transform: scale(0.6);
opacity: 0.4;
}
40% {
transform: scale(1);
opacity: 1;
}
}