/* ERZEUGT — nicht von Hand aendern.
 * Quelle: scripts/build/bundle-start-styles.mjs
 * Buendelt die render-blockierenden Stylesheets der Startseite zu einer Datei.
 * Aenderungen gehoeren in die Quelldateien; danach:
 *   node scripts/build/bundle-start-styles.mjs
 * Reihenfolge ist die Kaskade und darf nicht vertauscht werden.
 */

/* ---- styles.css ---- */
:root {
color-scheme: light;
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
background: #f7f7f4;
color: #151515}
* {
box-sizing: border-box}
[hidden] {
display: none !important}
body {
margin: 0;
min-height: 100dvh;
padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(247, 247, 244, 0.96)),
repeating-linear-gradient(90deg, rgba(22, 22, 22, 0.025) 0 1px, transparent 1px 96px)}
button,
input,
select,
textarea {
font: inherit}
.shell {
display: grid;
grid-template-columns: 248px minmax(0, 1fr);
min-height: 100dvh;
background: #f7f7f4}
.sidebar {
display: grid;
align-content: start;
gap: 18px;
min-height: 100dvh;
padding: 22px 16px;
border-right: 1px solid #deded8;
background: #f1f1ed}
.brand {
padding: 2px 8px 12px}
.brand h1 {
margin: 0;
font-size: 32px;
line-height: 1;
letter-spacing: 0}
.note,
.eyebrow {
margin: 8px 0 0;
color: #71716b;
font-size: 14.5px;
font-weight: 700;
letter-spacing: 0;
text-transform: uppercase}
.nav,
.side-block,
.toolbar {
display: grid;
gap: 8px}
button {
min-height: 42px;
border: 1px solid #262622;
border-radius: 8px;
background: #20201d;
color: #ffffff;
font-weight: 500;
cursor: pointer;
touch-action: manipulation}
button:hover {
background: #11110f}
.nav-button {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 8px;
min-height: 40px;
padding: 7px 8px;
border-color: transparent;
background: transparent;
color: #34342f;
box-shadow: none;
text-align: left}
.nav-button:hover {
background: #e8e8e1;
color: #151515}
.nav-button.is-active {
border-color: #ddddd4;
background: #ffffff;
color: #151515}
.workspace {
min-width: 0;
min-height: 100dvh}
.view {
display: none;
min-height: 100dvh;
padding: 30px}
.view.is-active {
display: grid;
grid-template-rows: auto minmax(0, 1fr) auto;
gap: 22px}
#code.view.is-active,
#projects.view.is-active,
#files.view.is-active,
#storageView.view.is-active,
#memory.view.is-active,
#ai.view.is-active,
#cost.view.is-active,
#tools.view.is-active,
#settings.view.is-active,
#profile.view.is-active,
#offline.view.is-active,
#error.view.is-active {
grid-template-rows: auto auto auto minmax(120px, 1fr)}
.view-header {
max-width: 920px}
.view-header h2 {
max-width: 760px;
margin: 6px 0 0;
font-size: clamp(34px, 5vw, 68px);
line-height: 0.98;
letter-spacing: 0}
.subhead {
max-width: 620px;
margin: 16px 0 0;
color: #62625b;
font-size: 18.5px;
line-height: 1.62}
.log {
display: flex;
flex-direction: column;
justify-content: flex-end;
overflow: auto;
padding: 8px 0}
.output,
.entry {
border: 1px solid #deded8;
border-radius: 8px;
background: #ffffff;
padding: 18px 20px;
white-space: pre-wrap}
.entry {
max-width: 820px;
margin: 0 0 20px;
color: #252520;
line-height: 1.65}
.entry.assistant {
border-color: transparent;
background: transparent;
padding-left: 0}
#search.view.is-active {
grid-template-rows: auto auto minmax(0, 1fr);
align-content: start}
.search-shell {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 10px;
width: min(820px, 100%);
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 8px;
background: rgba(255, 255, 255, 0.07);
padding: 10px;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px)}
.search-box {
display: grid;
gap: 5px;
min-width: 0}
.search-box span {
color: rgba(246, 243, 238, 0.58);
font-size: 14.5px;
font-weight: 700;
letter-spacing: 0;
text-transform: uppercase}
.search-box input {
min-height: 48px;
border-color: rgba(255, 255, 255, 0.12);
background: rgba(5, 6, 8, 0.38);
color: #f6f3ee;
font-size: 21px}
.search-box input::placeholder {
color: rgba(151, 158, 171, 0.78)}
.search-shell button {
align-self: end;
min-width: 112px;
min-height: 48px}
.search-log {
display: grid;
align-content: start;
gap: 10px;
width: min(820px, 100%);
min-height: 220px}
.search-empty {
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 8px;
background: rgba(255, 255, 255, 0.07);
color: rgba(246, 243, 238, 0.76);
padding: 14px;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px)}
.search-log .entry {
max-width: min(760px, 100%);
margin-bottom: 0}
@media (max-width: 560px) {
.search-shell {
grid-template-columns: 1fr}
.search-shell button {
width: 100%}
}
.entry.user {
align-self: flex-end;
margin-left: auto;
border-color: #20201d;
background: #20201d;
color: #ffffff}
.composer {
display: grid;
grid-template-columns: minmax(0, 1fr) 112px;
gap: 10px;
width: min(920px, 100%);
margin: 0 auto;
border: 1px solid #d8d8cf;
border-radius: 10px;
background: #ffffff;
padding: 10px;
box-shadow: 0 16px 44px rgba(32, 32, 29, 0.08)}
.panel-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px}
.status-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px}
.status-grid div {
display: grid;
gap: 6px;
min-width: 0;
border: 1px solid #deded8;
border-radius: 8px;
background: #ffffff;
padding: 14px}
.status-grid strong,
.status-grid span {
overflow-wrap: anywhere}
.status-grid strong {
color: #20201d;
font-size: 15.5px}
.status-grid span {
color: #62625b;
font-size: 14.5px;
font-weight: 700}
label {
display: grid;
gap: 8px;
font-size: 15.5px;
font-weight: 700;
color: #42423c}
input,
select,
textarea {
width: 100%;
border: 1px solid #d4d4cc;
border-radius: 8px;
background: #ffffff;
color: #151515;
padding: 13px 14px;
outline: none}
input:focus,
select:focus,
textarea:focus {
border-color: #20201d;
box-shadow: 0 0 0 3px rgba(32, 32, 29, 0.08)}
:where(button, a[href], summary, [tabindex]:not([tabindex="-1"])):focus-visible {
outline: 2px solid #f6f3ee;
outline-offset: 2px;
box-shadow: 0 0 0 4px rgba(10, 10, 10, 0.85);
border-radius: 6px}
textarea {
min-height: 160px;
resize: vertical}
#message {
min-height: 58px;
max-height: 180px;
border: 0;
background: transparent;
resize: none}
#message:focus {
box-shadow: none}
#editor {
min-height: 360px;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 15.5px;
line-height: 1.62}
.toolbar {
grid-template-columns: repeat(auto-fit, minmax(140px, max-content));
align-items: center;
max-width: 100%;
min-width: 0}
.toolbar > * {
min-width: 0;
max-width: 100%}
.toolbar button {
overflow-wrap: anywhere;
white-space: normal}
.toolbar input,
.toolbar select {
min-width: min(360px, 100%)}
#tools .output {
font-size: 14.5px;
color: #4a4a43}
@media (max-width: 920px) {
.shell {
grid-template-columns: 1fr}
.sidebar {
min-height: auto;
border-right: 0;
border-bottom: 1px solid #deded8}
.nav,
.side-block {
grid-template-columns: repeat(3, minmax(0, 1fr))}
.workspace,
.view {
min-height: auto}
.view {
padding: 22px 16px}
.panel-grid,
.composer,
.status-grid {
grid-template-columns: 1fr}
}
@media (max-width: 560px) {
.sidebar {
padding: 16px 10px}
.view {
padding: 18px 10px}
.brand h1 {
font-size: 29px}
.view-header h2 {
font-size: 40px}
.nav,
.side-block,
.toolbar {
grid-template-columns: minmax(0, 1fr)}
}
.button-icon { display: inline-grid; place-items: center; width: 26px; min-width: 26px; color: #00ffef; font-weight: 800; }
.nav-label { min-width: 0; overflow: hidden; font-size: 16.5px; line-height: 1.16; text-overflow: ellipsis; white-space: nowrap; }
.button-icon svg,
.browser-panel-nav button svg {
width: 18px; height: 18px; fill: none; stroke: currentColor;
stroke-width: 1.9;
stroke-linecap: round;
stroke-linejoin: round}
.surface,
.empty-state {
display: grid;
gap: 8px;
min-width: 0;
border: 1px solid #d8dee7;
border-radius: 8px;
background: #ffffff;
padding: 16px}
.surface strong,
.empty-state strong {
color: #172033;
font-size: 15.5px}
.surface span,
.empty-state span {
overflow-wrap: anywhere;
color: #5d6675;
font-size: 15.5px}
.toast-root {
position: fixed;
right: 16px;
bottom: 84px;
z-index: 20;
display: grid;
gap: 8px;
width: min(360px, calc(100vw - 32px)); pointer-events: none}
.toast {
border: 1px solid #bdd6cd;
border-radius: 8px;
background: #f0faf6;
color: #173a30;
padding: 12px 14px;
font-weight: 700;
box-shadow: 0 12px 30px rgba(23, 32, 51, 0.12); pointer-events: auto}
.modal-root[hidden] {
display: none}
.modal-root {
position: fixed;
inset: 0;
z-index: 30;
display: grid;
place-items: center;
padding: 16px}
.modal-backdrop {
position: absolute;
inset: 0;
background: rgba(23, 32, 51, 0.38)}
.modal {
position: relative;
z-index: 1;
width: min(560px, 100%);
border: 1px solid #d8dee7;
border-radius: 8px;
background: #ffffff;
padding: 16px;
box-shadow: 0 24px 80px rgba(23, 32, 51, 0.24)}
.modal header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px}
.modal h3 {
margin: 0}
.modal-body {
margin-top: 12px;
white-space: pre-wrap}
.skeleton {
min-height: 54px;
border-radius: 8px;
background: linear-gradient(90deg, #eef2f6, #ffffff, #eef2f6);
background-size: 220% 100%;
animation: shimmer 1.2s linear infinite}
@keyframes shimmer {
to {
background-position-x: -220%}
}
@media (max-width: 920px) {
.dashboard-grid {
grid-template-columns: repeat(2, minmax(0, 1fr))}
}
@media (max-width: 560px) {
.dashboard-grid {
grid-template-columns: 1fr}
}
:root {
color-scheme: dark;
--menu-icon-color: rgba(246, 243, 238, 0.78);
--menu-icon-active-color: #00ffef;
--left-panel-width: 200px;
--right-panel-width: 228px;
background: #101113;
color: #f6f3ee}
body {
background:
linear-gradient(180deg, #141517 0%, #101113 58%, #0d0e10 100%);
color: #f6f3ee}
.shell {
display: block;
min-height: 100dvh;
background: transparent}
.workspace {
min-height: 100dvh;
background: transparent;
margin-left: 0;
margin-right: 0;
min-width: 0;
overflow: hidden;
transition: margin 180ms ease}
body.left-panel-open .workspace {
margin-left: 0}
body.right-panel-open .workspace {
margin-right: min(var(--right-panel-width), calc(100vw - 120px))}
@media (max-width: 680px) {
body.left-panel-open .workspace,
body.right-panel-open .workspace {
margin-right: 0;
margin-left: 0}
}
.glass-icon {
position: fixed;
top: env(safe-area-inset-top);
z-index: 45;
display: grid;
place-items: center;
width: 28px;
height: 28px;
min-height: 28px;
border: 0;
border-radius: 0;
background: transparent;
color: #f5f2ee;
box-shadow: none;
backdrop-filter: none;
-webkit-backdrop-filter: none}
.glass-icon:hover {
background: transparent}
.app-menu-button {
left: env(safe-area-inset-left)}
.browser-button {
right: env(safe-area-inset-right)}
body.task-indicator-active .split-icon span:last-child {
position: absolute;
top: -5px;
right: -5px;
display: block;
width: 8px;
height: 8px;
border-radius: 999px;
background: #2997ff;
box-shadow: 0 0 0 2px rgba(16, 17, 19, 0.78), 0 0 14px rgba(41, 151, 255, 0.7)}
body.task-indicator-done .split-icon span:last-child {
animation: taskIndicatorDone 1400ms ease both}
@keyframes taskIndicatorDone {
0%,
78% {
opacity: 1;
transform: scale(1)}
100% {
opacity: 0;
transform: scale(0.72)}
}
.sidebar-backdrop {
display: none}
.sidebar {
position: fixed;
top: 0;
bottom: 0;
left: 0;
z-index: 70;
display: grid;
grid-template-rows: minmax(0, 1fr) auto auto;
gap: 6px;
align-content: stretch;
width: min(var(--left-panel-width), calc(100vw - 28px));
box-sizing: border-box;
overflow: hidden;
min-height: 100dvh;
padding: 32px 10px 14px;
border-right: 1px solid rgba(255, 255, 255, 0.14);
background: rgba(25, 26, 29, 0.74);
box-shadow: 28px 0 80px rgba(0, 0, 0, 0.38);
transform: translateX(calc(-100% - 18px));
transition: transform 180ms ease;
backdrop-filter: blur(30px) saturate(1.35);
-webkit-backdrop-filter: blur(30px) saturate(1.35)}
.sidebar.is-compact {
padding-top: 84px;
padding-right: 0;
padding-bottom: 10px;
padding-left: 0}
.sidebar.is-compact .nav-button span:not(.button-icon):not(.profile-avatar),
.sidebar.is-compact #profileDockLabel {
display: none}
.sidebar.is-compact .nav-button,
.sidebar.is-compact .profile-dock {
justify-content: center;
gap: 0;
width: 100%;
min-width: 0;
overflow: hidden;
padding-right: 0;
padding-left: 0}
.sidebar.is-compact .button-icon {
width: 100%;
min-width: 0;
font-size: 14.5px}
.sidebar.is-compact .button-icon svg,
.browser-panel.is-compact .browser-panel-nav button svg {
width: 16px;
height: 16px}
.sidebar.is-compact .nav {
gap: 4px}
.sidebar.is-compact .bottom-nav {
gap: 4px;
padding-top: 8px}
.sidebar.is-compact .nav-button,
.sidebar.is-compact .profile-dock,
.browser-panel.is-compact .browser-panel-nav button {
min-height: 44px;
height: 44px}
.sidebar.is-compact .profile-dock {
margin-top: 0;
padding-top: 0;
padding-bottom: 0}
.sidebar .nav {
gap: 0;
align-content: start;
min-height: 0;
overflow: auto;
padding-right: 2px;
grid-template-columns: minmax(0, 1fr)}
.sidebar .bottom-nav {
gap: 0;
align-self: end;
overflow: visible;
padding-top: 8px; margin-top: 8px;
border-top: 1px solid rgba(255, 255, 255, 0.1)}
.sidebar.is-open {
transform: translateX(0)}
.panel-resizer {
position: absolute;
top: 0;
bottom: 0;
z-index: 2;
width: 12px;
cursor: col-resize;
touch-action: none}
.panel-resizer::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
width: 1px;
background: rgba(255, 255, 255, 0.14)}
.panel-resizer:hover::before,
body.is-resizing-panel .panel-resizer::before {
background: rgba(159, 231, 212, 0.58)}
.left-panel-resizer {
right: -6px}
.left-panel-resizer::before {
left: 5px}
.right-panel-resizer {
left: -6px}
.right-panel-resizer::before {
left: 6px}
.browser-panel {
position: fixed;
top: 0;
right: 0;
bottom: 0;
z-index: 40;
display: grid;
grid-template-rows: auto 1fr;
gap: 6px;
width: min(var(--right-panel-width), calc(100vw - 28px));
box-sizing: border-box;
overflow: hidden;
min-height: 100dvh;
padding: 32px 10px 14px;
border-left: 1px solid rgba(255, 255, 255, 0.14);
background: rgba(25, 26, 29, 0.74);
box-shadow: -28px 0 80px rgba(0, 0, 0, 0.38);
transform: translateX(calc(100% + 18px));
transition: transform 180ms ease;
backdrop-filter: blur(30px) saturate(1.35);
-webkit-backdrop-filter: blur(30px) saturate(1.35)}
.browser-panel.is-compact {
padding-top: 30px;
padding-right: 0; padding-bottom: 10px; padding-left: 0}
.browser-panel.is-compact .browser-panel-nav button {
justify-content: center;
gap: 0;
font-size: 0;
padding-right: 0;
padding-left: 0}
.browser-panel.is-compact .browser-panel-nav button span {
width: 100%;
min-width: 0;
font-size: 14.5px}
.browser-panel.is-compact .browser-panel-nav {
gap: 4px}
.browser-panel.is-open {
transform: translateX(0)}
.browser-panel-nav,
.browser-panel-status {
display: grid;
gap: 0}
.browser-panel-nav button {
display: flex;
align-items: center;
gap: 8px;
justify-content: flex-start;
min-height: 36px;
border-color: transparent;
border-radius: 10px;
background: transparent;
color: rgba(246, 243, 238, 0.76);
text-align: left}
.browser-panel-nav button span {
display: inline-grid;
place-items: center;
width: 24px;
min-width: 24px;
color: var(--menu-icon-color);
font-weight: 800}
.browser-panel-nav button:hover {
border-color: transparent;
background: rgba(255, 255, 255, 0.035);
color: #ffffff}
.brand {
padding: 2px 8px 14px}
.brand h1 {
color: #f6f3ee}
.note,
.eyebrow {
color: rgba(246, 243, 238, 0.58)}
.nav-button {
border: 1px solid transparent;
border-radius: 10px;
color: rgba(246, 243, 238, 0.76);
font-weight: 500;
min-height: 36px;
padding-top: 6px;
padding-bottom: 6px}
.sidebar .nav-button,
.browser-panel-nav button {
font-weight: 500}
.nav-button:hover,
.nav-button.is-active {
border-color: transparent;
background: transparent;
color: #ffffff}
.button-icon {
color: var(--menu-icon-color)}
.sidebar .nav-button.is-active .button-icon,
.browser-panel-nav button.is-active span { color: var(--menu-icon-active-color); }
.sidebar .nav-button:hover,
.browser-panel-nav button:hover {
background: rgba(255, 255, 255, 0.035)}
.sidebar .nav-button.is-active {
background: transparent}
.profile-dock {
align-self: end;
display: flex;
gap: 6px;
width: 100%;
margin-top: 0;
padding: 4px 0 0}
.profile-avatar {
display: grid;
place-items: center;
width: 30px;
height: 30px;
border-radius: 999px;
background: linear-gradient(135deg, #f6f3ee, #cfd3d8 58%, #8e949d);
color: #101113;
font-weight: 900;
text-transform: lowercase}
.sidebar.is-compact .profile-avatar {
width: 16px;
height: 16px;
font-size: 12.5px}
.sidebar.is-compact .profile-avatar.is-empty {
background:
radial-gradient(circle at 50% 37%, transparent 0 2px, rgba(246, 243, 238, 0.78) 2.5px 4px, transparent 4.5px),
radial-gradient(ellipse at 50% 82%, transparent 0 5px, rgba(246, 243, 238, 0.78) 5.5px 8px, transparent 8.5px)}
.profile-avatar.is-empty {
border: 1px solid rgba(246, 243, 238, 0.5);
background:
radial-gradient(circle at 50% 37%, transparent 0 4px, rgba(246, 243, 238, 0.78) 4.5px 7px, transparent 7.5px),
radial-gradient(ellipse at 50% 82%, transparent 0 8px, rgba(246, 243, 238, 0.78) 8.5px 12px, transparent 12.5px);
color: transparent}
.view {
min-height: 100dvh;
padding: 72px clamp(14px, 4vw, 48px) 28px}
.view.is-active {
display: grid;
gap: 20px}
#start.view.is-active {
display: grid;
grid-template-rows: 1fr;
align-items: end;
gap: 0;
padding: 0}
.home-feed {
display: grid;
grid-template-rows: minmax(0, 1fr) auto;
gap: 0;
width: 100%;
min-height: 100dvh;
background: linear-gradient(180deg, rgba(15, 17, 18, 0.86) 0%, #090a0c 72%, #050608 100%)}
#start.has-start-chat .home-feed {
grid-template-rows: minmax(0, 1fr) auto}
.home-hero {
display: grid;
align-items: end;
justify-items: center;
min-height: 0;
padding: 52px 16px 10px;
text-align: center}
.home-hero h2 {
margin: 0 auto;
max-width: 960px;
color: #f9f6f1;
font-size: clamp(26px, 4vw, 44px);
font-weight: 500;
line-height: 1.12;
letter-spacing: 0}
#start.has-start-chat .home-hero {
display: none}
.start-log {
display: flex;
flex-direction: column;
gap: 5px;
width: 100%;
min-height: 0;
max-height: none;
margin: 0;
overflow: auto;
padding: 6px clamp(8px, 1.4vw, 18px) 10px;
border-top: 1px solid rgba(255, 255, 255, 0.12)}
#start.has-start-chat .start-log {
justify-content: flex-start}
#start.has-start-chat .start-log .entry:first-child {
max-width: min(980px, calc(100% - 64px));
margin-right: 32px;
margin-left: 32px}
.start-log .entry {
max-width: min(980px, 100%);
margin-bottom: 0;
border-radius: 8px}
.start-log .entry.user {
padding: 8px 11px}
.start-log .entry.assistant {
padding: 2px 0}
.prompt-glass {
width: 100%;
margin: 0;
overflow: visible;
border: 0;
border-top: 1px solid rgba(255, 255, 255, 0.16);
border-radius: 0;
background: #050608;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
backdrop-filter: none;
-webkit-backdrop-filter: none}
.prompt-glass textarea {
height: 48px;
min-height: 48px;
max-height: 324px;
border: 0;
background: transparent;
color: rgba(246, 243, 238, 0.82);
padding: 8px 8px 6px;
font-size: clamp(24px, 3.4vw, 34px);
font-weight: 400;
line-height: 1.16;
overflow-y: auto;
resize: none}
.prompt-glass textarea::placeholder {
color: rgba(151, 158, 171, 0.78)}
.prompt-actions {
display: flex;
align-items: center;
gap: clamp(4px, 1vw, 10px);
min-height: 42px;
padding: 0 clamp(8px, 1.4vw, 16px);
border-top: 1px solid rgba(255, 255, 255, 0.16)}
.prompt-spacer {
flex: 1}
.ghost-button,
.mode-pill,
.text-chip,
.send-button {
min-height: 38px;
border-color: transparent;
background: transparent;
color: rgba(246, 243, 238, 0.9);
box-shadow: none}
.ghost-button {
position: relative;
display: grid;
place-items: center;
width: 30px;
height: 34px;
min-height: 34px;
padding: 0;
font-weight: 300}
.text-chip {
width: auto;
min-width: 88px;
padding: 0 10px;
border-radius: 8px;
color: rgba(246, 243, 238, 0.74);
font-size: 17.5px;
font-weight: 500}
.icon-button svg {
width: 22px;
height: 22px;
fill: none;
stroke: currentColor;
stroke-width: 2.15;
stroke-linecap: round;
stroke-linejoin: round;
pointer-events: none}
.send-button {
display: grid;
place-items: center;
position: relative;
width: 32px;
height: 34px;
min-height: 34px;
border-radius: 0;
background: transparent;
color: rgba(246, 243, 238, 0.96);
font-weight: 300}
.send-button svg {
width: 25px;
height: 25px;
stroke-width: 2.2}
.model-picker {
position: relative;
z-index: 50}
.model-menu {
position: absolute;
right: 0;
bottom: calc(100% + 8px);
z-index: 60;
display: grid;
gap: 4px;
min-width: 154px;
border: 1px solid rgba(255, 255, 255, 0.13);
background: rgba(25, 26, 29, 0.92);
padding: 6px;
box-shadow: 0 16px 52px rgba(0, 0, 0, 0.32);
backdrop-filter: blur(24px) saturate(1.2);
-webkit-backdrop-filter: blur(24px) saturate(1.2)}
.model-menu button {
justify-content: flex-start;
min-height: 34px;
border-color: transparent;
background: transparent;
color: rgba(246, 243, 238, 0.78);
font-size: 15.5px;
font-weight: 500;
text-align: left}
.model-menu button:hover {
background: rgba(255, 255, 255, 0.06);
color: #ffffff}
.feed-list {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px}
.feed-item,
.surface,
.empty-state,
.output,
.status-grid div,
.modal {
border-color: rgba(255, 255, 255, 0.12);
background: rgba(255, 255, 255, 0.08);
color: rgba(246, 243, 238, 0.82);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px)}
.feed-item {
display: grid;
gap: 8px;
min-width: 0;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 16px;
padding: 14px}
.feed-item strong,
.surface strong,
.empty-state strong,
.status-grid strong {
color: #f6f3ee}
.feed-item span,
.surface span,
.empty-state span,
.status-grid span,
.subhead {
color: rgba(246, 243, 238, 0.62)}
.view-header h2 {
color: #f9f6f1}
input,
select,
textarea,
.composer {
border-color: rgba(255, 255, 255, 0.14);
background: rgba(255, 255, 255, 0.08);
color: #f6f3ee}
button {
border-color: rgba(255, 255, 255, 0.14);
background: rgba(246, 243, 238, 0.9);
color: #111214}
button:hover {
background: #ffffff}
.entry.user {
border-color: rgba(94, 173, 235, 0.38);
background: rgba(94, 173, 235, 0.18)}
.entry.assistant {
color: rgba(246, 243, 238, 0.86)}
@media (max-width: 920px) {
.shell {
grid-template-columns: 1fr}
.sidebar {
min-height: 100dvh;
border-bottom: 0}
.nav,
.side-block {
grid-template-columns: 1fr}
.feed-list {
grid-template-columns: repeat(2, minmax(0, 1fr))}
}
@media (max-width: 560px) {
.glass-icon {
width: 28px;
height: 28px;
min-height: 28px}
.start-log {
gap: 3px;
padding: 4px 8px 8px}
.start-log .entry {
max-width: 100%}
#start.has-start-chat .start-log .entry:first-child {
max-width: calc(100% - 64px);
margin-right: 32px;
margin-left: 32px}
.start-log .entry.user {
padding: 7px 10px}
.start-log .entry.assistant {
padding: 1px 0}
.home-hero h2 {
font-size: 38px}
.prompt-actions {
gap: 9px;
min-height: 64px;
padding: 0 10px}
.ghost-button {
width: 30px;
height: 38px;
min-height: 38px}
.text-chip {
font-size: 18.5px}
.send-button {
width: 34px;
height: 38px;
min-height: 38px}
}
.legal-links {
margin-top: 18px;
font-size: 0.85rem;
color: rgba(246, 243, 238, 0.6)}
.legal-links a {
color: #8fc7ff;
margin-left: 8px;
display: inline-flex;
align-items: center;
min-height: 24px}
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0}

/* ---- branding.css ---- */
.app-menu-button {
z-index: 75}
.sidebar {
border-right: 0}
.app-brand-logo {
--app-brand-expanded-width: 80px;
--app-brand-expanded-height: 28px;
position: fixed;
top: calc(env(safe-area-inset-top) + 0px);
left: calc(env(safe-area-inset-left) + 36px);
z-index: 74;
display: grid;
place-items: center;
box-sizing: border-box;
width: 28px;
height: 28px;
padding: 0;
overflow: visible;
border-radius: 0;
background: transparent;
box-shadow: none;
line-height: 0;
text-decoration: none;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent}
.app-brand-logo img {
grid-area: 1 / 1;
display: block;
object-fit: contain}
.app-brand-icon {
width: 16px;
height: 16px;
background: transparent;
visibility: visible;
opacity: 1}
.app-brand-wordmark {
width: 100%;
height: auto;
max-height: 19px;
visibility: hidden;
opacity: 0;
pointer-events: none}
body[data-left-menu-state="expanded"] .app-brand-logo {
width: min(var(--app-brand-expanded-width), calc(var(--left-panel-width) - 52px));
height: var(--app-brand-expanded-height);
padding: 0;
background: transparent;
box-shadow: none}
body[data-left-menu-state="expanded"] .app-brand-icon {
visibility: hidden;
opacity: 0}
body[data-left-menu-state="expanded"] .app-brand-wordmark {
visibility: visible;
opacity: 1}
body[data-left-menu-state="closed"] .app-brand-logo,
body[data-left-menu-state="opening"] .app-brand-logo {
visibility: hidden;
opacity: 0;
pointer-events: none}
body[data-left-menu-state="compact"] .app-brand-logo {
top: calc(env(safe-area-inset-top) + 44px);
left: calc(env(safe-area-inset-left) + (min(var(--left-panel-width), 100vw - 28px) - 28px) / 2)}
body:has(#browserPanel:not(.is-open)) #mausButton {
visibility: hidden;
opacity: 0;
pointer-events: none}
#mausButton {
background-image: url("/icons/maus-zeiger.svg");
background-repeat: no-repeat;
background-position: center;
background-size: 20px 20px}
#mausButton {
display: none !important}
#mausButton img {
display: none}
@media (max-width: 560px) {
.app-brand-logo {
--app-brand-expanded-width: 76px}
}
@media (max-width: 600px) {
.app-brand-logo {
width: 44px;
height: 44px;
left: calc(env(safe-area-inset-left) + 48px)}
body[data-left-menu-state="expanded"] .app-brand-logo {
height: 44px}
}

/* ---- composer-tools.css ---- */
.plus-picker {
position: relative;
z-index: 50}
.plus-menu {
position: absolute;
left: 0;
bottom: calc(100% + 8px);
z-index: 60;
display: grid;
gap: 4px;
min-width: 196px;
border: 1px solid rgba(255, 255, 255, 0.13);
background: rgba(25, 26, 29, 0.92);
padding: 6px;
box-shadow: 0 16px 52px rgba(0, 0, 0, 0.32);
backdrop-filter: blur(24px) saturate(1.2);
-webkit-backdrop-filter: blur(24px) saturate(1.2)}
.plus-menu button {
display: flex;
align-items: center;
gap: 10px;
justify-content: flex-start;
width: 100%;
min-height: 34px;
padding: 0 8px;
border: none;
border-color: transparent;
background: transparent;
color: rgba(246, 243, 238, 0.78);
font-size: 15.5px;
font-weight: 500;
text-align: left;
cursor: pointer}
.plus-menu button:hover {
background: rgba(255, 255, 255, 0.06);
color: #ffffff}
.plus-menu button svg {
width: 17px;
height: 17px;
flex: 0 0 auto;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
pointer-events: none}
.plus-menu .visually-hidden-input {
display: none}
[data-start-tool="voice"].is-recording {
color: #ff5c5c;
animation: composer-pulse 1.4s ease-in-out infinite}
[data-start-tool="speaker"].is-speaking {
color: #7fd4a8;
animation: composer-pulse 1.8s ease-in-out infinite}
@keyframes composer-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.45; }
}
.voice-mode-overlay {
position: fixed;
inset: 0;
z-index: 200;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 28px;
background: rgba(5, 6, 8, 0.94);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
color: rgba(246, 243, 238, 0.92);
text-align: center;
padding: calc(env(safe-area-inset-top, 0px) + var(--hinweis-hoehe, 0px) + 16px) 24px 0;
padding-bottom: max(env(safe-area-inset-bottom, 0px), var(--tastatur-hoehe, 0px), 8px)}
.voice-mode-overlay[hidden] {
display: none}
.voice-mode-wave {
display: flex;
align-items: center;
justify-content: center;
gap: 7px;
height: 84px}
.voice-mode-wave span {
width: 9px;
height: 18px;
border-radius: 6px;
background: rgba(246, 243, 238, 0.9);
animation: voice-wave 1.15s ease-in-out infinite}
.voice-mode-wave span:nth-child(2) { animation-delay: 0.12s; }
.voice-mode-wave span:nth-child(3) { animation-delay: 0.24s; }
.voice-mode-wave span:nth-child(4) { animation-delay: 0.36s; }
.voice-mode-wave span:nth-child(5) { animation-delay: 0.48s; }
@keyframes voice-wave {
0%, 100% { transform: scaleY(0.45); }
50% { transform: scaleY(1); }
}
.voice-mode-overlay[data-mode="listening"][style*="--pegel"] .voice-logo-left {
animation: none;
transform: translateX(calc(var(--pegel, 0) * -10px)) scale(calc(1 + var(--pegel, 0) * 0.12));
transition: transform 90ms linear}
.voice-mode-overlay[data-mode="listening"][style*="--pegel"] .voice-logo-right {
animation: none;
transform: translateX(calc(var(--pegel, 0) * 10px)) scale(calc(1 + var(--pegel, 0) * 0.12));
transition: transform 90ms linear}
.voice-mode-overlay[data-mode="listening"][style*="--pegel"] .voice-logo-dot-a,
.voice-mode-overlay[data-mode="listening"][style*="--pegel"] .voice-logo-dot-b {
animation: none;
opacity: calc(0.5 + var(--pegel, 0) * 0.5);
transition: opacity 120ms linear}
.voice-mode-overlay[data-mode="listening"][style*="--pegel"] .voice-mode-logo::before {
animation: none;
opacity: calc(0.3 + var(--pegel, 0) * 1.1);
transition: opacity 120ms linear}
.voice-mode-overlay[data-mode="thinking"] .voice-mode-wave span {
animation-duration: 2.2s;
background: rgba(246, 243, 238, 0.45)}
.voice-mode-overlay[data-mode="speaking"] .voice-mode-wave span {
background: #7fd4a8}
.voice-mode-status {
font-size: 20px;
font-weight: 500;
margin: 0}
.voice-mode-transcript {
max-width: 640px;
min-height: 24px;
margin: 0;
font-size: 16.5px;
color: rgba(246, 243, 238, 0.6);
line-height: 1.62}
.voice-mode-reply {
max-width: 640px;
max-height: 38vh;
overflow-y: auto;
margin: 0;
font-size: 17.5px;
color: rgba(246, 243, 238, 0.85);
line-height: 1.65;
white-space: pre-wrap;
overflow-wrap: anywhere}
.voice-mode-reply:empty {
display: none}
.voice-mode-close {
position: absolute;
top: calc(env(safe-area-inset-top, 0px) + var(--hinweis-hoehe, 0px) + 12px);
right: 16px;
z-index: 2;
display: grid;
place-items: center;
flex: 0 0 auto;
width: 48px;
height: 48px;
border: 0;
border-radius: 50%;
background: transparent;
color: #f6f3ee;
cursor: pointer}
.voice-mode-close:hover {
background: rgba(246, 243, 238, 0.12)}
.voice-mode-close:focus-visible {
outline: 2px solid rgba(159, 231, 212, 0.9);
outline-offset: 2px}
.voice-mode-close svg {
width: 18px;
height: 18px;
fill: none;
stroke: currentColor;
stroke-width: 2.2;
stroke-linecap: round;
pointer-events: none}
.voice-mode-hint {
position: absolute;
bottom: 28px;
left: 0;
right: 0;
margin: 0;
font-size: 14.5px;
color: rgba(246, 243, 238, 0.45)}
.voice-mode-logo {
position: relative;
display: flex;
align-items: center;
justify-content: center}
.voice-mode-logo::before {
content: "";
position: absolute;
inset: -24px;
border-radius: 50%;
background: radial-gradient(circle, rgba(20, 224, 220, 0.25) 0%, rgba(20, 224, 220, 0) 70%);
filter: blur(24px);
pointer-events: none;
animation: voice-aura-pulse 3s ease-in-out infinite;
z-index: -1}
.voice-mode-logo svg {
width: 150px;
height: 109px}
.voice-mode-logo path {
fill: none;
stroke: #14e0dc;
stroke-width: 22;
stroke-linecap: round;
stroke-linejoin: round;
filter: drop-shadow(0 0 12px rgba(20, 224, 220, 0.4))}
.voice-mode-logo circle {
fill: #14e0dc;
filter: drop-shadow(0 0 8px rgba(20, 224, 220, 0.6))}
.voice-logo-left { animation: voice-talk-left 2.4s ease-in-out infinite; }
.voice-logo-right { animation: voice-talk-right 2.4s ease-in-out infinite; }
.voice-logo-dot-a { animation: voice-dot-a 2.4s ease-in-out infinite; }
.voice-logo-dot-b { animation: voice-dot-b 2.4s ease-in-out infinite; }
@keyframes voice-talk-left {
0%, 40%, 100% { transform: translateX(0) scale(1); }
15% { transform: translateX(-7px) scale(1.06); }
28% { transform: translateX(0) scale(1); }
}
@keyframes voice-talk-right {
0%, 50%, 100% { transform: translateX(0) scale(1); }
65% { transform: translateX(7px) scale(1.06); }
78% { transform: translateX(0) scale(1); }
}
@keyframes voice-dot-a {
0%, 40%, 100% { opacity: 0.25; }
15% { opacity: 1; }
}
@keyframes voice-dot-b {
0%, 50%, 100% { opacity: 0.25; }
65% { opacity: 1; }
}
@keyframes voice-aura-pulse {
0%, 100% { transform: scale(0.92); opacity: 0.45; }
50% { transform: scale(1.12); opacity: 0.9; }
}
.voice-mode-overlay[data-mode="thinking"] .voice-logo-left {
animation: voice-puls-left 1.1s ease-in-out infinite}
.voice-mode-overlay[data-mode="thinking"] .voice-logo-right {
animation: voice-puls-right 1.1s ease-in-out infinite}
.voice-mode-overlay[data-mode="thinking"] .voice-logo-dot-a {
animation: voice-puls-dot-a 1.1s ease-in-out infinite}
.voice-mode-overlay[data-mode="thinking"] .voice-logo-dot-b {
animation: voice-puls-dot-b 1.1s ease-in-out infinite}
@keyframes voice-puls-left {
0%, 100% { transform: translateX(0) scale(1); }
25% { transform: translateX(15px) scale(1.08); }
50% { transform: translateX(0) scale(1); }
}
@keyframes voice-puls-right {
0%, 50% { transform: translateX(0) scale(1); }
75% { transform: translateX(-15px) scale(1.08); }
100% { transform: translateX(0) scale(1); }
}
@keyframes voice-puls-dot-a {
0%, 45%, 100% { opacity: 0.3; }
20% { opacity: 1; }
}
@keyframes voice-puls-dot-b {
0%, 55%, 100% { opacity: 0.3; }
75% { opacity: 1; }
}
.voice-mode-overlay[data-mode="thinking"] .voice-mode-logo::before {
background: radial-gradient(circle, rgba(20, 224, 220, 0.3) 0%, rgba(20, 224, 220, 0) 70%);
animation-duration: 1.1s}
@media (prefers-reduced-motion: reduce) {
.voice-logo-left, .voice-logo-right, .voice-logo-dot-a, .voice-logo-dot-b,
.voice-mode-overlay[data-mode="thinking"] .voice-logo-left,
.voice-mode-overlay[data-mode="thinking"] .voice-logo-right,
.voice-mode-overlay[data-mode="thinking"] .voice-logo-dot-a,
.voice-mode-overlay[data-mode="thinking"] .voice-logo-dot-b,
.voice-mode-logo::before {
animation: none}
}
.voice-mode-overlay[data-mode="speaking"] .voice-mode-logo path {
stroke: #7fd4a8;
filter: drop-shadow(0 0 14px rgba(127, 212, 168, 0.5))}
.voice-mode-overlay[data-mode="speaking"] .voice-mode-logo circle {
fill: #7fd4a8;
filter: drop-shadow(0 0 10px rgba(127, 212, 168, 0.7))}
.voice-mode-overlay[data-mode="speaking"] .voice-mode-logo::before {
background: radial-gradient(circle, rgba(127, 212, 168, 0.32) 0%, rgba(127, 212, 168, 0) 70%);
animation-duration: 2s}
.voice-mode-bar {
display: flex;
align-items: center;
gap: 10px;
width: min(560px, 100%)}
.voice-mode-input-wrap {
flex: 1 1 auto;
display: flex;
align-items: center;
gap: 6px;
min-height: 48px;
padding: 0 10px 0 6px;
border: 1px solid rgba(255, 255, 255, 0.16);
border-radius: 24px;
background: rgba(255, 255, 255, 0.05)}
.voice-mode-input-wrap button {
display: grid;
place-items: center;
width: 44px;
height: 44px;
border: none;
border-radius: 50%;
background: transparent;
color: rgba(246, 243, 238, 0.8);
cursor: pointer;
flex: 0 0 auto}
.voice-mode-input-wrap button:hover {
background: rgba(255, 255, 255, 0.08);
color: #ffffff}
.voice-mode-input-wrap svg {
width: 18px;
height: 18px;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
pointer-events: none}
#voiceModeInput {
flex: 1 1 auto;
min-width: 0;
border: none;
background: transparent;
color: rgba(246, 243, 238, 0.92);
font-size: 16.5px;
outline: none}
#voiceModeInput::placeholder {
color: rgba(246, 243, 238, 0.4)}
#voiceModeSend {
background: transparent}
#voiceModeSend:hover {
background: transparent;
color: #ffffff}
#voiceModeSend:disabled {
background: transparent;
color: rgba(246, 243, 238, 0.35);
cursor: default}
#voiceModeSend svg {
stroke-width: 2.4}
.voice-mode-mic {
display: grid;
place-items: center;
flex: 0 0 auto;
width: 48px;
height: 48px;
border: 1px solid rgba(255, 255, 255, 0.16);
border-radius: 50%;
background: rgba(255, 255, 255, 0.05);
color: rgba(246, 243, 238, 0.9);
cursor: pointer;
transition: color 0.15s ease}
.voice-mode-mic:hover {
background: rgba(255, 255, 255, 0.1)}
.voice-mode-mic svg {
width: 20px;
height: 20px;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
pointer-events: none}
.voice-mode-mic .voice-mic-slash {
display: none}
.voice-mode-mic.is-muted {
color: #e24b4a}
.voice-mode-mic.is-muted:hover {
background: rgba(255, 255, 255, 0.1)}
.voice-mode-mic.is-muted .voice-mic-slash {
display: block}
.voice-mode-overlay[data-upgraded="true"] .voice-mode-logo {
margin-top: auto}
.voice-mode-overlay[data-upgraded="true"] .voice-mode-hint {
position: static;
margin: auto 0 6px;
font-size: 13.5px;
line-height: 1.35}
body.voice-mode-open #kameraOverlay {
bottom: calc(48px + max(env(safe-area-inset-bottom, 0px), 8px) + 8px)}
body.voice-mode-open #kameraOverlay {
top: calc(env(safe-area-inset-top, 0px) + var(--hinweis-hoehe, 0px) + 68px)}
body.voice-mode-open #voiceModeClose {
z-index: 201}
.voice-mode-overlay[data-upgraded="true"] .voice-mode-bar {
margin-bottom: 0}
.voice-mode-overlay[data-upgraded="true"] {
gap: 20px}
.chat-code-actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 6px 0 2px}
.chat-code-save {
min-height: 30px;
padding: 4px 12px;
border: 1px solid rgba(255, 255, 255, 0.16);
border-radius: 8px;
background: rgba(255, 255, 255, 0.04);
color: rgba(246, 243, 238, 0.85);
font-size: 14.5px;
font-weight: 500;
cursor: pointer}
.chat-code-save:hover:not(:disabled) {
background: rgba(255, 255, 255, 0.09);
color: #ffffff}
.chat-code-save:disabled {
border-color: rgba(127, 212, 168, 0.4);
color: #7fd4a8;
cursor: default}

/* ---- browser-pane.css ---- */
.browser-panel.is-browser-mode {
grid-template-rows: 1fr;
padding: 0;
gap: 0}
.browser-panel.is-browser-mode .browser-panel-nav {
display: none}
.browser-pane {
display: grid;
--bp-row-height: 26px;
--bp-control-size: 22px;
--bp-control-gap: 3px;
--bp-side-width: calc((var(--bp-control-size) * 3) + (var(--bp-control-gap) * 2));
--bp-tab-left-width: var(--bp-control-size);
--bp-tab-right-width: calc((var(--bp-control-size) * 2) + var(--bp-control-gap));
grid-template-rows: var(--bp-row-height) var(--bp-row-height) auto auto minmax(0, 1fr);
min-height: 0;
height: 100%}
.browser-pane,
.browser-pane * {
box-sizing: border-box}
.browser-panel:not(.is-browser-mode) .browser-pane {
display: none}
.bp-tabstrip {
grid-row: 1;
display: grid;
grid-template-columns: var(--bp-tab-left-width) minmax(0, 1fr) var(--bp-tab-right-width);
align-items: center;
gap: 6px;
min-width: 0;
height: var(--bp-row-height);
padding: 0 5px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
background: rgba(255, 255, 255, 0.04);
overflow: hidden}
.bp-tab-left,
.bp-tab-right,
.bp-toolbar-left,
.bp-toolbar-right {
display: flex;
align-items: center;
gap: var(--bp-control-gap);
min-width: 0}
.bp-tab-right,
.bp-toolbar-right {
justify-content: flex-end}
.bp-tabs {
display: flex;
align-items: center;
gap: 2px;
min-width: 0;
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: none}
.bp-tabs::-webkit-scrollbar { display: none; }
.bp-tab {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 7px;
min-width: 0;
flex: none;
height: var(--bp-control-size);
min-height: 0;
padding: 0 7px;
border: 1px solid transparent;
border-radius: 5px;
background: transparent;
color: #f6f3ee;
font-size: 13.5px;
cursor: pointer}
.bp-tab.is-active {
border-color: rgba(246, 243, 238, 0.14);
background: rgba(246, 243, 238, 0.1);
color: #f6f3ee}
.bp-tab:hover:not(.is-active) {
background: rgba(246, 243, 238, 0.05)}
.bp-tab:focus-visible {
outline: 2px solid rgba(159, 231, 212, 0.9);
outline-offset: -2px}
.bp-tab.is-schmal {
grid-template-columns: minmax(0, 1fr);
justify-items: center;
padding: 0 4px}
.bp-tab.is-ziehend {
opacity: 0.45}
.bp-tab-marke {
flex: none;
display: grid;
place-items: center;
width: 16px;
height: 16px;
overflow: hidden}
.bp-tab-favicon {
width: 16px;
height: 16px;
object-fit: contain}
.bp-tab-marke-buchstabe {
border-radius: 3px;
background: hsl(var(--bp-tab-farbton, 210) 45% 42%);
color: #fff;
font-size: 10px;
font-weight: 700;
line-height: 1}
.bp-tab-close {
flex: none;
display: grid;
place-items: center;
width: 16px;
height: 16px;
border-radius: 3px;
color: rgba(246, 243, 238, 0.55);
font-size: 14px;
line-height: 1;
opacity: 0}
.bp-tab.is-active .bp-tab-close,
.bp-tab:hover .bp-tab-close {
opacity: 1}
.bp-tab-close:hover {
background: rgba(246, 243, 238, 0.16);
color: #f6f3ee}
.bp-vorschlaege {
position: absolute;
z-index: 30;
top: calc(100% + 4px);
left: 0;
right: 0;
display: flex;
flex-direction: column;
max-height: 240px;
overflow-y: auto;
border: 1px solid rgba(246, 243, 238, 0.14);
border-radius: 6px;
background: #16181b;
box-shadow: 0 10px 26px rgba(0, 0, 0, 0.5)}
.bp-vorschlaege[hidden] { display: none; }
.bp-vorschlag {
padding: 8px 11px;
border: 0;
background: transparent;
color: rgba(246, 243, 238, 0.86);
font-size: 13px;
text-align: left;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
cursor: pointer}
.bp-vorschlag:hover,
.bp-vorschlag.is-markiert {
background: rgba(246, 243, 238, 0.1);
color: #f6f3ee}
.bp-tab.is-active .bp-tab-dot {
background: rgba(159, 231, 212, 0.9)}
.bp-tab.is-loading .bp-tab-dot {
animation: bp-pulse 900ms ease-in-out infinite}
@keyframes bp-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.25; }
}
.bp-tab-title {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap}
.bp-tab-close {
flex: none;
display: grid;
place-items: center;
width: 16px;
height: 16px;
border-radius: 5px;
color: rgba(246, 243, 238, 0.5);
font-size: 15.5px;
line-height: 1}
.bp-tab-close:hover {
background: rgba(255, 255, 255, 0.14);
color: #f6f3ee}
.bp-tab-add {
flex: none;
width: var(--bp-control-size);
height: var(--bp-control-size);
min-height: 0;
padding: 0;
border: none;
border-radius: 6px;
background: transparent;
color: rgba(246, 243, 238, 0.62);
font-size: 17.5px;
line-height: 1;
cursor: pointer}
.bp-tab-add:hover:not(:disabled) {
background: rgba(255, 255, 255, 0.1);
color: #f6f3ee}
.bp-tab-add:disabled {
opacity: 0.35;
cursor: default}
.bp-toolbar {
grid-row: 2;
display: grid;
grid-template-columns: var(--bp-side-width) minmax(0, 1fr) var(--bp-side-width);
align-items: center;
gap: 6px;
min-width: 0;
width: 100%;
height: var(--bp-row-height);
padding: 2px 5px;
border-top: none;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
background: rgba(255, 255, 255, 0.04)}
.bp-toolbar button {
flex: none;
display: grid;
place-items: center;
width: var(--bp-control-size);
height: var(--bp-control-size);
min-height: 0;
padding: 0;
border: none;
border-radius: 6px;
background: transparent;
color: rgba(246, 243, 238, 0.72);
cursor: pointer}
.bp-toolbar button:hover:not(:disabled) {
background: rgba(255, 255, 255, 0.1);
color: #f6f3ee}
.bp-toolbar button:disabled {
opacity: 0.3;
cursor: default}
.bp-toolbar svg {
width: 13px;
height: 13px;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round}
.bp-address-form {
min-width: 0;
margin: 0;
position: relative}
.bp-address {
width: 100%;
height: var(--bp-control-size);
padding: 0 8px;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 999px;
background: rgba(0, 0, 0, 0.28);
color: #f6f3ee;
font-size: 14px}
.bp-address:focus {
outline: none;
border-color: rgba(159, 231, 212, 0.55);
background: rgba(0, 0, 0, 0.4)}
.bp-address::placeholder {
color: rgba(246, 243, 238, 0.4)}
.bp-progress {
height: 2px;
overflow: hidden;
background: rgba(255, 255, 255, 0.06)}
.bp-progress span {
display: block;
width: 38%;
height: 100%;
border-radius: 999px;
background: rgba(159, 231, 212, 0.85);
animation: bp-progress 1100ms ease-in-out infinite}
@keyframes bp-progress {
0% { transform: translateX(-110%); }
100% { transform: translateX(320%); }
}
.bp-hint {
position: absolute;
top: calc(var(--bp-row-height) * 2 + 8px);
left: 8px;
right: 8px;
z-index: 6;
padding: 7px 12px;
border: 1px solid rgba(2, 253, 253, 0.35);
background: rgba(16, 17, 19, 0.92);
color: rgba(246, 243, 238, 0.92);
font-size: 14.5px;
pointer-events: none}
.bp-hint[hidden] { display: none; }
.bp-content {
grid-row: 5;
position: relative;
min-height: 0;
overflow: hidden;
background: #fff}
.bp-frame {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: none;
background: #fff;
transform-origin: 0 0;
visibility: hidden;
pointer-events: none}
.bp-frame.is-active {
visibility: visible;
pointer-events: auto}
.bp-empty {
position: absolute;
inset: 0;
display: grid;
place-content: center;
gap: 6px;
justify-items: center;
background: #101113;
color: rgba(246, 243, 238, 0.82);
text-align: center}
.bp-empty-mark svg {
width: 44px;
height: 44px;
fill: none;
stroke: rgba(246, 243, 238, 0.45);
stroke-width: 1.4}
.bp-empty strong {
font-size: 17.5px}
.bp-empty span {
color: rgba(246, 243, 238, 0.5);
font-size: 15px}
.bp-fallback {
position: absolute;
inset: 0;
display: grid;
place-content: center;
gap: 12px;
padding: 24px;
background: #101113;
color: rgba(246, 243, 238, 0.88);
text-align: center}
.bp-fallback strong {
font-size: 21px}
.bp-fallback span {
max-width: 420px;
color: rgba(246, 243, 238, 0.6);
font-size: 15.5px;
line-height: 1.6}
.bp-fallback a {
justify-self: center;
display: inline-grid;
place-items: center;
min-height: 34px;
padding: 0 14px;
border: 1px solid rgba(159, 231, 212, 0.42);
border-radius: 8px;
background: rgba(159, 231, 212, 0.12);
color: #f6f3ee;
font-size: 15.5px;
font-weight: 700;
text-decoration: none}
@media (max-width: 680px) {
.browser-pane {
--bp-row-height: 26px;
--bp-control-size: 22px;
--bp-control-gap: 3px}
.bp-tabstrip {
padding: 0 5px}
.bp-toolbar {
padding: 2px 5px}
body.browser-pane-open .browser-panel {
width: calc(100vw - 12px)}
}
.browser-panel.is-browser-mode:not(.is-compact) {
padding-top: env(safe-area-inset-top, 0px)}
.browser-panel:not(.is-browser-mode):not(.is-compact) {
padding-top: calc(32px + env(safe-area-inset-top, 0px))}
.browser-pane {
position: relative}

/* ---- browser-pane-chrome.css ---- */
.bp-tab-spacer {
flex: none;
width: var(--bp-control-size);
height: var(--bp-control-size)}
.bp-toolbar .bp-sicherheit {
position: absolute;
z-index: 2;
top: 50%;
left: 6px;
transform: translateY(-50%);
display: flex;
align-items: center;
gap: 4px;
height: 20px;
padding: 0 4px;
border: 0;
border-radius: 4px;
background: transparent;
color: rgba(246, 243, 238, 0.6);
cursor: default}
.bp-toolbar .bp-sicherheit {
width: auto;
min-width: 0;
height: 20px;
display: flex;
align-items: center;
justify-content: flex-start}
.bp-toolbar .bp-sicherheit[hidden] { display: none; }
.bp-toolbar .bp-sicherheit svg {
width: 14px;
height: 14px;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round}
.bp-toolbar .bp-sicherheit[data-zustand="unsicher"] {
background: rgba(240, 173, 78, 0.16);
color: #f0ad4e}
.bp-sicherheit-text {
font-size: 11px;
font-weight: 700;
white-space: nowrap}
.bp-address {
padding-left: 28px}
.bp-toolbar .bp-sicherheit[data-zustand="unsicher"] ~ .bp-address {
padding-left: 100px}
.bp-toolbar .bp-stern {
position: absolute;
z-index: 2;
top: 50%;
right: 6px;
transform: translateY(-50%);
display: grid;
place-items: center;
width: 20px;
height: 20px;
border: 0;
border-radius: 4px;
background: transparent;
color: rgba(246, 243, 238, 0.5);
cursor: pointer}
.bp-toolbar .bp-stern[hidden] { display: none; }
.bp-toolbar .bp-stern:hover {
background: rgba(246, 243, 238, 0.12);
color: #f6f3ee}
.bp-toolbar .bp-stern:focus-visible {
outline: 2px solid rgba(159, 231, 212, 0.9);
outline-offset: 1px}
.bp-toolbar .bp-stern svg {
width: 15px;
height: 15px;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linejoin: round}
.bp-toolbar .bp-stern[data-gemerkt="ja"] {
color: #f0c14b}
.bp-address {
padding-right: 30px}
.bp-toolbar .bp-zoom {
position: absolute;
z-index: 2;
top: 50%;
right: 30px;
transform: translateY(-50%);
width: auto;
min-width: 0;
height: 18px;
padding: 0 6px;
border: 1px solid rgba(246, 243, 238, 0.18);
border-radius: 3px;
background: rgba(246, 243, 238, 0.08);
color: rgba(246, 243, 238, 0.78);
font-size: 11px;
font-weight: 700;
font-variant-numeric: tabular-nums;
white-space: nowrap;
cursor: pointer}
.bp-toolbar .bp-zoom[hidden] { display: none; }
.bp-toolbar .bp-zoom:hover { background: rgba(246, 243, 238, 0.16); color: #f6f3ee; }
.bp-tabmenue {
position: fixed;
z-index: 90;
display: flex;
flex-direction: column;
min-width: 210px;
padding: 4px;
border: 1px solid rgba(246, 243, 238, 0.14);
border-radius: 6px;
background: #16181b;
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.55)}
.bp-tabmenue-eintrag {
padding: 8px 10px;
border: 0;
border-radius: 4px;
background: transparent;
color: rgba(246, 243, 238, 0.88);
font-size: 13px;
text-align: left;
white-space: nowrap;
cursor: pointer}
.bp-tabmenue-eintrag:hover:not(:disabled) { background: rgba(246, 243, 238, 0.1); color: #f6f3ee; }
.bp-tabmenue-eintrag:disabled { color: rgba(246, 243, 238, 0.3); cursor: default; }
.bp-address-form.hat-zoom .bp-address {
padding-right: 76px}
.bp-suche {
position: absolute;
z-index: 40;
top: 6px;
right: 12px;
display: flex;
align-items: center;
gap: 4px;
padding: 5px 6px;
border: 1px solid rgba(246, 243, 238, 0.16);
border-radius: 6px;
background: #16181b;
box-shadow: 0 8px 22px rgba(0, 0, 0, 0.5)}
.bp-suche[hidden] { display: none; }
.bp-suche-feld {
width: 190px;
height: 24px;
padding: 0 8px;
border: 1px solid rgba(246, 243, 238, 0.14);
border-radius: 4px;
background: rgba(0, 0, 0, 0.3);
color: #f6f3ee;
font-size: 13px}
.bp-suche-feld:focus { outline: 2px solid rgba(159, 231, 212, 0.8); outline-offset: -1px; }
.bp-suche.ist-leer .bp-suche-feld { border-color: rgba(240, 173, 78, 0.7); }
.bp-suche-zahl {
min-width: 42px;
color: rgba(246, 243, 238, 0.6);
font-size: 12px;
font-variant-numeric: tabular-nums;
text-align: center}
.bp-suche button {
display: grid;
place-items: center;
width: 24px;
height: 24px;
border: 0;
border-radius: 4px;
background: transparent;
color: rgba(246, 243, 238, 0.7);
font-size: 15px;
cursor: pointer}
.bp-suche button:hover { background: rgba(246, 243, 238, 0.12); color: #f6f3ee; }
.bp-suche button:focus-visible { outline: 2px solid rgba(159, 231, 212, 0.9); outline-offset: 1px; }
.bp-content { position: relative; }
.bp-tab.ist-angepinnt {
padding: 0;
border-left: 2px solid rgba(159, 231, 212, 0.55)}
.bp-tab.ist-angepinnt .bp-tab-close { display: none; }
.bp-tabstrip .bp-maus {
display: grid;
place-items: center;
width: var(--bp-control-size);
height: var(--bp-control-size);
min-height: 0;
border: 0;
border-radius: 5px;
background: transparent;
color: rgba(246, 243, 238, 0.6);
cursor: pointer}
.bp-tabstrip .bp-maus svg {
width: 14px;
height: 14px;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linejoin: round}
.bp-tabstrip .bp-maus:hover { background: rgba(246, 243, 238, 0.12); color: #f6f3ee; }
.bp-tabstrip .bp-maus:focus-visible { outline: 2px solid rgba(159, 231, 212, 0.9); outline-offset: -2px; }
.bp-tabstrip .bp-maus.laeuft {
background: rgba(159, 231, 212, 0.18);
color: #9fe7d4;
animation: bp-pulse 1.4s ease-in-out infinite}
body.browser-pane-open #browserButton,
body.browser-pane-open #mausButton {
visibility: hidden;
pointer-events: none}
@media (max-width: 680px) and (pointer: coarse) {
.browser-pane {
--bp-row-height: 48px;
--bp-control-size: 44px;
--bp-control-gap: 2px;
--bp-side-width: calc((var(--bp-control-size) * 2) + var(--bp-control-gap))}
.bp-toolbar .bp-nav-forward,
.bp-toolbar .bp-open-external {
display: none}
.bp-toolbar .bp-address {
font-size: 16px}
.bp-tab-close {
width: 36px !important;
height: 44px !important;
opacity: 1}
.bp-toolbar .bp-stern::after,
.bp-toolbar .bp-sicherheit::after {
content: "";
position: absolute;
inset: -12px -8px}
}

/* ---- view-chrome.css ---- */
.view.has-view-chrome {
position: relative;
padding-top: 52px}
.view-chrome {
position: absolute;
top: 8px;
left: calc(env(safe-area-inset-left) + 48px);
right: calc(env(safe-area-inset-right) + 48px);
z-index: 5;
display: flex;
align-items: center;
justify-content: space-between;
pointer-events: none}
.view .view-chrome button,
.premium-view .view-chrome button {
pointer-events: auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px !important;
height: 32px !important;
min-width: 0 !important;
min-height: 0 !important;
padding: 0 !important;
border: 0 !important;
border-radius: 8px;
background: transparent !important;
box-shadow: none !important;
color: #4a4a43;
cursor: pointer;
opacity: 0.85;
transition: opacity 0.15s ease}
.view .view-chrome button:hover,
.premium-view .view-chrome button:hover {
opacity: 1;
background: transparent !important}
.view .view-chrome button:focus-visible,
.premium-view .view-chrome button:focus-visible {
outline: 2px solid currentColor;
outline-offset: 2px}
.view .view-chrome button svg,
.premium-view .view-chrome button svg {
width: 20px !important;
height: 20px !important;
min-width: 20px !important;
min-height: 20px !important;
flex: none !important}
.premium-view .view-chrome button {
color: var(--premium-text, #f8f6f2)}
@media (max-width: 640px) {
.view.has-view-chrome {
padding-top: 46px}
.view-chrome {
top: 6px;
left: calc(env(safe-area-inset-left) + 52px);
right: calc(env(safe-area-inset-right) + 52px)}
}
@media (max-width: 600px) {
.view .view-chrome button,
.premium-view .view-chrome button {
width: 44px !important;
height: 44px !important}
.view.has-view-chrome,
.premium-view.has-view-chrome {
padding-top: 58px}
}
#mausButton {
right: calc(env(safe-area-inset-right) + 36px)}
@media (max-width: 600px) {
.glass-icon.glass-icon {
width: 44px;
height: 44px;
min-height: 44px}
#mausButton {
right: calc(env(safe-area-inset-right) + 44px)}
.prompt-actions .ghost-button.ghost-button,
.prompt-actions .send-button.send-button {
height: 44px;
min-height: 44px}
.prompt-actions .ghost-button.icon-button,
.prompt-actions .send-button.send-button {
width: 44px}
.prompt-actions {
gap: 4px;
padding: 0 6px}
}
@media (max-width: 600px) {
.sidebar .nav-button,
.browser-panel-nav button {
min-height: 44px}
}
body::after {
content: "";
position: fixed;
inset: 0;
z-index: 2147483000;
pointer-events: none;
box-shadow:
inset 0 0 0 1px rgba(2, 253, 253, 0.3),
inset 0 0 26px rgba(2, 253, 253, 0.22),
inset 0 0 72px rgba(50, 246, 234, 0.13)}
.sidebar.is-compact .button-icon svg,
.browser-panel.is-compact .browser-panel-nav button svg {
stroke-width: 2.4}
.sidebar.is-compact .nav-button,
.sidebar.is-compact .profile-dock,
.browser-panel.is-compact .browser-panel-nav button {
border-radius: 12px}
@media (min-width: 681px) {
body.left-panel-open .workspace {
margin-left: min(var(--left-panel-width), calc(100vw - 120px))}
}
body:has(#browserPanel.is-open) #mausButton {
top: calc(env(safe-area-inset-top) + 32px);
right: env(safe-area-inset-right)}
.browser-panel.is-compact {
padding-top: 64px}
body.left-panel-open:has(.sidebar.is-compact) .workspace {
margin-left: min(var(--left-panel-width), calc(100vw - 120px))}
body.right-panel-open:has(#browserPanel.is-compact) .workspace {
margin-right: min(var(--right-panel-width), calc(100vw - 120px))}
@media (max-width: 600px) {
body.right-panel-open:has(#browserPanel.is-compact) .workspace {
margin-right: 0}
}

/* ---- profile-dock.css ---- */
.profile-dock {
align-items: center}
.profile-dock-button {
display: flex;
flex: 0 1 auto;
gap: 8px;
align-items: center;
min-width: 0;
padding: 4px 6px;
border: 0;
border-radius: 10px;
background: transparent;
color: rgba(246, 243, 238, 0.78);
cursor: pointer;
font: inherit;
text-align: left;
transition: background 140ms ease, color 140ms ease}
.profile-dock-button:hover {
background: rgba(255, 255, 255, 0.06);
color: #f6f3ee}
.profile-dock-button:focus-visible {
outline: 2px solid #00ffef;
outline-offset: 2px}
.profile-dock-name {
min-width: 0;
overflow: hidden;
font-size: 16.5px;
line-height: 1.16;
text-overflow: ellipsis;
white-space: nowrap}
.profile-dock .profile-avatar {
flex: 0 0 auto}
.profile-avatar.has-picture {
overflow: hidden;
padding: 0;
border: 1px solid rgba(246, 243, 238, 0.22);
background: none}
.profile-dock-image {
display: block;
width: 100%;
height: 100%;
border-radius: 999px;
object-fit: cover}
.profile-dock-gear {
flex: 0 0 auto;
justify-content: center;
width: 34px;
min-width: 34px;
padding: 0}
.profile-dock-gear .nav-label {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap}
.sidebar.is-compact .profile-dock {
flex-direction: column;
gap: 0;
height: auto;
min-height: 0;
overflow: visible}
.sidebar.is-compact .profile-dock .profile-avatar {
width: 20px;
height: 20px;
font-size: 13.5px}
.sidebar.is-compact .profile-dock-name {
display: none}
.sidebar.is-compact .profile-dock-button {
justify-content: center;
width: 100%;
padding: 0}
.sidebar.is-compact .profile-dock-gear {
width: 100%;
min-width: 0}
@media (prefers-reduced-motion: reduce) {
.profile-dock-button {
transition: none}
}
.profile-dock {
position: relative}
.profile-dock-menu {
position: fixed;
z-index: 80;
display: flex;
flex-direction: column;
gap: 2px;
width: 232px;
max-width: calc(100vw - 16px);
padding: 6px;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 12px;
background: #1b1c1f;
box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55)}
.profile-dock-menu[hidden] {
display: none}
.profile-dock-menu-head {
display: flex;
flex-direction: column;
gap: 1px;
padding: 8px 10px 10px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
margin-bottom: 4px}
.profile-dock-menu-head strong {
overflow: hidden;
font-size: 15.5px;
text-overflow: ellipsis;
white-space: nowrap}
.profile-dock-menu-head span {
overflow: hidden;
color: rgba(246, 243, 238, 0.6);
font-size: 14.5px;
text-overflow: ellipsis;
white-space: nowrap}
.profile-dock-menu [role="menuitem"] {
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
-webkit-user-select: none;
user-select: none;
padding: 8px 10px;
border: 0;
border-radius: 8px;
background: transparent;
color: rgba(246, 243, 238, 0.86);
cursor: pointer;
font: inherit;
font-size: 15.5px;
text-align: left}
.profile-dock-menu [role="menuitem"]:hover,
.profile-dock-menu [role="menuitem"]:focus-visible {
background: rgba(255, 255, 255, 0.09);
color: #f6f3ee;
outline: none}
.profile-dock-menu-logout {
margin-top: 2px;
border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
border-radius: 0 0 8px 8px !important;
color: #ff9d9d !important}
@media (max-width: 600px) {
.profile-dock .profile-dock-button {
min-height: 44px}
.profile-dock .profile-dock-gear {
min-width: 44px;
min-height: 44px}
}

/* ---- chat-markdown.css ---- */
.entry.assistant p {
margin: 0 0 10px}
.entry.assistant p:last-child {
margin-bottom: 0}
.entry.assistant strong {
font-weight: 700}
.entry.assistant .chat-list {
margin: 0 0 10px;
padding-left: 20px}
.entry.assistant .chat-list li {
margin: 2px 0}
.entry.assistant .chat-link {
color: inherit;
text-decoration: underline;
text-underline-offset: 2px}
.entry.assistant .chat-link:hover {
opacity: 0.8}
.entry.assistant .chat-table-wrap {
overflow-x: auto;
margin: 10px 0;
-webkit-overflow-scrolling: touch}
.entry.assistant .chat-table {
border-collapse: collapse;
width: 100%;
font-size: 0.95em}
.entry.assistant .chat-table th,
.entry.assistant .chat-table td {
padding: 7px 12px;
text-align: left;
vertical-align: top;
border-bottom: 1px solid rgba(127, 127, 127, 0.25)}
.entry.assistant .chat-table th {
font-weight: 600;
white-space: nowrap;
border-bottom-width: 2px}
.entry.assistant .chat-table tbody tr:nth-child(even) {
background: rgba(127, 127, 127, 0.06)}
.entry.assistant .chat-table tbody tr:last-child td {
border-bottom: none}
.entry.assistant .chat-bild-platzhalter {
width: min(100%, 512px);
aspect-ratio: 1 / 1;
margin: 8px 0 4px;
border-radius: 12px;
background: linear-gradient(110deg, rgba(255, 255, 255, 0.05) 30%, rgba(255, 255, 255, 0.14) 50%, rgba(255, 255, 255, 0.05) 70%);
background-size: 200% 100%;
animation: chat-bild-schimmer 1.6s linear infinite}
@keyframes chat-bild-schimmer {
to { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
.entry.assistant .chat-bild-platzhalter { animation: none; }
}
.entry.assistant .chat-image {
display: block;
max-width: min(100%, 512px);
height: auto;
margin: 4px 0 10px;
border-radius: 12px}
.entry.assistant .chat-video {
display: block;
width: 100%;
max-width: min(100%, 512px);
height: auto;
margin: 6px 0 12px;
border-radius: 12px;
background: #000000;
border: 1px solid rgba(255, 255, 255, 0.12);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35)}
.entry.assistant code {
padding: 1px 5px;
border-radius: 5px;
background: rgba(255, 255, 255, 0.09);
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 0.92em}
.entry.assistant .chat-code {
margin: 0 0 10px;
padding: 10px 12px;
overflow-x: auto;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 10px;
background: rgba(255, 255, 255, 0.05)}
.entry.assistant .chat-code code {
padding: 0;
background: none;
white-space: pre}
.chat-code-wrap {
position: relative;
margin: 0 0 10px}
.entry.assistant .chat-code-wrap .chat-code {
margin: 0;
padding-top: 52px}
.chat-code-copy {
position: absolute;
top: 5px;
right: 6px;
z-index: 1;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
min-width: 42px;
min-height: 42px;
padding: 0 12px;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 7px;
background: rgba(20, 20, 20, 0.55);
color: rgba(246, 243, 238, 0.62);
font: inherit;
font-size: 14.5px;
line-height: 1.55;
cursor: pointer;
transition: color 120ms ease, background-color 120ms ease, border-color 120ms ease}
@media (pointer: fine) {
.entry.assistant .chat-code-wrap .chat-code {
padding-top: 37px}
.chat-code-copy {
min-width: 0;
min-height: 26px;
padding: 0 8px;
font-size: 13.5px}
}
.chat-code-copy::after {
content: "Kopieren"}
.chat-code-copy.is-done::after {
content: "Kopiert"}
.chat-code-wrap:hover .chat-code-copy,
.chat-code-wrap:focus-within .chat-code-copy {
color: rgba(246, 243, 238, 0.85)}
.chat-code-copy:hover,
.chat-code-copy:focus-visible {
border-color: rgba(255, 255, 255, 0.22);
background: rgba(255, 255, 255, 0.1);
color: #f6f3ee}
.chat-code-copy:focus-visible {
outline: 2px solid var(--menu-icon-active-color, #00ffef);
outline-offset: 1px}
.chat-code-copy.is-done {
color: #7fe0a8}
.chat-code-copy-icon {
display: inline-flex}
.chat-code-copy svg {
width: 13px;
height: 13px;
fill: none;
stroke: currentColor;
stroke-width: 1.7;
stroke-linecap: round;
stroke-linejoin: round}
@media (max-width: 430px) {
.chat-code-copy::after {
content: none}
}
.entry.assistant[data-thinking="true"] {
color: rgba(255, 255, 255, 0.65);
font-style: italic;
padding: 6px 10px}
.thinking-dots .dot {
animation: thinkingDot 1.4s infinite ease-in-out both;
display: inline-block;
margin-left: 1px}
.thinking-dots .dot:nth-child(1) { animation-delay: 0s; }
.thinking-dots .dot:nth-child(2) { animation-delay: 0.2s; }
.thinking-dots .dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes thinkingDot {
0%, 80%, 100% { opacity: 0.2; transform: scale(0.8); }
40% { opacity: 1; transform: scale(1.2); }
}
.chat-schritte {
display: flex;
flex-direction: column;
gap: 4px;
font-size: 0.86em;
opacity: 0.78;
padding-block: 2px}
.chat-schritt {
display: flex;
align-items: baseline;
gap: 6px;
line-height: 1.6;
overflow-wrap: anywhere}
.chat-schritt-stand {
white-space: nowrap;
opacity: 0.72}
.chat-schritt[data-zustand="laeuft"] .chat-schritt-stand {
animation: chat-schritt-puls 1.4s ease-in-out infinite}
.chat-schritt[data-zustand="fertig"] {
opacity: 0.9}
@keyframes chat-schritt-puls {
0%, 100% { opacity: 0.45; }
50% { opacity: 0.95; }
}
@media (prefers-reduced-motion: reduce) {
.chat-schritt[data-zustand="laeuft"] .chat-schritt-stand { animation: none; }
}
.entry.assistant .chat-zitat {
margin: 10px 0;
padding: 2px 0 2px 14px;
border-left: 3px solid rgba(127, 127, 127, 0.45);
opacity: 0.85;
font-style: italic}
.entry.assistant .chat-hinweis {
margin: 12px 0;
padding: 10px 14px;
border-radius: 10px;
border: 1px solid rgba(127, 127, 127, 0.3);
border-left-width: 3px;
background: rgba(127, 127, 127, 0.08)}
.entry.assistant .chat-hinweis-titel {
font-weight: 600;
font-size: 0.9em;
letter-spacing: 0.02em;
margin-bottom: 4px;
opacity: 0.9}
.entry.assistant .chat-hinweis[data-art="note"] { border-left-color: #4a90d9; }
.entry.assistant .chat-hinweis[data-art="note"] .chat-hinweis-titel { color: #4a90d9; }
.entry.assistant .chat-hinweis[data-art="tip"] { border-left-color: #3fa66a; }
.entry.assistant .chat-hinweis[data-art="tip"] .chat-hinweis-titel { color: #3fa66a; }
.entry.assistant .chat-hinweis[data-art="important"] { border-left-color: #8b6bd9; }
.entry.assistant .chat-hinweis[data-art="important"] .chat-hinweis-titel { color: #8b6bd9; }
.entry.assistant .chat-hinweis[data-art="warning"] { border-left-color: #d99b3f; }
.entry.assistant .chat-hinweis[data-art="warning"] .chat-hinweis-titel { color: #d99b3f; }
.entry.assistant .chat-hinweis[data-art="caution"] { border-left-color: #d9614a; }
.entry.assistant .chat-hinweis[data-art="caution"] .chat-hinweis-titel { color: #d9614a; }
.entry.assistant .chat-weather { border: 1px solid rgba(127,127,127,.3); border-radius: 16px; padding: 16px; margin: 8px 0 16px; overflow-wrap: anywhere; }
.entry.assistant .chat-weather h3 { margin: 0 0 10px; font-size: 1.15em; }
.entry.assistant .chat-weather-temperature { font-size: 2em; font-weight: 700; line-height: 1.2; }
.entry.assistant .chat-weather dl { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,120px),1fr)); gap: 10px; margin: 16px 0; }
.entry.assistant .chat-weather dl div { padding: 10px; background: rgba(127,127,127,.08); border-radius: 10px; min-width: 0; }
.entry.assistant .chat-weather dt { font-size: .8em; }
.entry.assistant .chat-weather dd { margin: 5px 0 0; font-weight: 700; }
.entry.assistant .chat-weather summary { cursor: pointer; padding: 10px 0; min-height: 44px; box-sizing: border-box; }
.entry.assistant .chat-weather details[open] summary { margin-bottom: 8px; }
.entry.assistant .chat-weather summary:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* ---- chat-actions.css ---- */
.msg-actions {
position: relative;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0;
margin: -7px 0 2px;
max-width: min(980px, 100%)}
.msg-actions.is-user {
align-self: flex-end;
margin-left: auto;
justify-content: flex-end}
.msg-act {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
width: 42px;
height: 42px;
min-height: 42px;
padding: 0;
border: 1px solid transparent;
border-radius: 7px;
background: transparent;
color: rgba(246, 243, 238, 0.52);
cursor: pointer;
transition: color 120ms ease, background-color 120ms ease}
.msg-actions:hover .msg-act,
.msg-actions:focus-within .msg-act {
color: rgba(246, 243, 238, 0.78)}
.msg-act:hover,
.msg-act:focus-visible {
background: rgba(255, 255, 255, 0.08);
color: #f6f3ee}
.msg-act:focus-visible {
outline: 2px solid var(--menu-icon-active-color, #00ffef);
outline-offset: 1px}
.msg-act svg {
width: 15px;
height: 15px;
fill: none;
stroke: currentColor;
stroke-width: 1.7;
stroke-linecap: round;
stroke-linejoin: round}
.msg-act.is-active {
color: var(--menu-icon-active-color, #00ffef)}
.msg-act.is-done {
color: #7fe0a8}
.msg-act:disabled {
color: rgba(246, 243, 238, 0.24);
cursor: default}
.msg-actions:hover .msg-act:disabled,
.msg-actions:focus-within .msg-act:disabled {
color: rgba(246, 243, 238, 0.24)}
.msg-zeit {
margin-left: 6px;
font-size: 11.5px;
color: rgba(246, 243, 238, 0.4);
font-variant-numeric: tabular-nums;
white-space: nowrap}
.msg-versions {
display: inline-flex;
align-items: center;
gap: 1px;
margin-left: 6px}
.msg-version-step {
width: 34px;
height: 34px;
min-height: 34px}
.msg-version-step svg {
width: 15px;
height: 15px}
@media (pointer: fine) {
.msg-act {
width: 26px;
height: 26px;
min-height: 26px}
.msg-version-step {
width: 22px;
height: 22px;
min-height: 22px}
}
@media (max-width: 600px) {
#startLog .msg-act,
.msg-actions .msg-act.msg-act {
width: 44px;
height: 44px;
min-height: 44px}
}
@media (max-width: 600px) {
.msg-version-label { display: none; }
.msg-actions {
flex-wrap: nowrap;
overflow-x: auto;
scrollbar-width: none}
.msg-actions::-webkit-scrollbar { display: none; }
.msg-actions.is-user { justify-content: flex-start; }
}
@media (max-width: 600px) and (pointer: fine) {
#startLog .msg-act,
.msg-actions .msg-act.msg-act {
width: 28px;
height: 28px;
min-height: 28px}
#startLog .msg-version-step.msg-version-step,
.msg-actions .msg-version-step.msg-version-step.msg-version-step {
width: 22px;
height: 22px;
min-height: 22px}
}
.msg-version-label {
font-size: 14.5px;
line-height: 1;
white-space: nowrap;
color: rgba(246, 243, 238, 0.62)}
.msg-menu {
position: fixed;
top: 0;
left: 0;
z-index: 60;
min-width: 236px;
padding: 5px;
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 12px;
background: #1b1c1f;
box-shadow: 0 14px 34px rgba(0, 0, 0, 0.46)}
.msg-menu-head {
margin: 0;
padding: 6px 10px 8px;
font-size: 14.5px;
line-height: 1.3;
color: rgba(246, 243, 238, 0.52)}
.msg-menu-item {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 7px 10px;
border: 0;
border-radius: 8px;
background: transparent;
color: rgba(246, 243, 238, 0.92);
font: inherit;
font-size: 15.5px;
text-align: left;
cursor: pointer}
.msg-menu-item:hover,
.msg-menu-item:focus-visible {
background: rgba(255, 255, 255, 0.09)}
.msg-menu-item:focus-visible {
outline: 2px solid var(--menu-icon-active-color, #00ffef);
outline-offset: -2px}
.msg-menu-item.is-danger {
color: #ff9c90}
.msg-menu-icon {
display: inline-flex;
color: rgba(246, 243, 238, 0.62)}
.msg-menu-item.is-danger .msg-menu-icon {
color: #ff9c90}
.msg-menu-icon svg {
width: 17px;
height: 17px;
fill: none;
stroke: currentColor;
stroke-width: 1.7;
stroke-linecap: round;
stroke-linejoin: round}
.msg-menu-line {
height: 1px;
margin: 5px 8px;
background: rgba(255, 255, 255, 0.12)}
.entry.is-editing {
display: none}
.msg-editor {
align-self: flex-end;
width: min(980px, 100%);
margin-left: auto;
padding: 10px 12px;
border: 1px solid rgba(94, 173, 235, 0.55);
border-radius: 10px;
background: rgba(94, 173, 235, 0.12)}
.msg-editor-field {
display: block;
width: 100%;
min-height: 54px;
max-height: 260px;
padding: 6px 8px;
border: 1px solid rgba(255, 255, 255, 0.16);
border-radius: 8px;
background: rgba(0, 0, 0, 0.22);
color: #f6f3ee;
font: inherit;
line-height: 1.65;
resize: vertical}
.msg-editor-field:focus-visible {
outline: 2px solid var(--menu-icon-active-color, #00ffef);
outline-offset: 1px}
.msg-editor-row {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 10px;
margin-top: 8px}
.msg-editor-note {
font-size: 14.5px;
color: rgba(246, 243, 238, 0.64)}
.msg-editor-buttons {
display: inline-flex;
gap: 6px}
.msg-editor-button {
padding: 5px 11px;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 7px;
background: transparent;
color: rgba(246, 243, 238, 0.86);
font: inherit;
font-size: 15.5px;
cursor: pointer}
.msg-editor-button:hover {
background: rgba(255, 255, 255, 0.08)}
.msg-editor-button.is-primary {
border-color: rgba(94, 173, 235, 0.7);
color: #dcecfa}
.msg-editor-button:focus-visible {
outline: 2px solid var(--menu-icon-active-color, #00ffef);
outline-offset: 1px}
.msg-sources {
max-width: min(980px, 100%);
margin: 0 0 6px;
padding: 8px 12px;
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 10px;
background: rgba(255, 255, 255, 0.04)}
.msg-sources-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 6px;
font-size: 14.5px;
color: rgba(246, 243, 238, 0.62)}
.msg-sources-close {
padding: 2px 8px;
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 6px;
background: transparent;
color: rgba(246, 243, 238, 0.78);
font: inherit;
font-size: 14.5px;
min-height: 0;
cursor: pointer}
.msg-sources-close:hover {
background: rgba(255, 255, 255, 0.08)}
.msg-sources-close:focus-visible {
outline: 2px solid var(--menu-icon-active-color, #00ffef);
outline-offset: 1px}
.msg-source {
display: flex;
flex-direction: column;
gap: 1px;
padding: 4px 0}
.msg-source + .msg-source {
border-top: 1px solid rgba(255, 255, 255, 0.08)}
.msg-source-url {
color: #9ecbf0;
font-size: 15.5px;
text-decoration: none;
overflow-wrap: anywhere}
.msg-source-url:hover {
text-decoration: underline}
.msg-source-url:focus-visible {
outline: 2px solid var(--menu-icon-active-color, #00ffef);
outline-offset: 2px}
.msg-source-meta {
font-size: 14.5px;
color: rgba(246, 243, 238, 0.56);
overflow-wrap: anywhere}
.msg-undo {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-top: 4px;
padding: 8px 12px;
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 10px;
background: rgba(255, 255, 255, 0.05);
font-size: 15.5px;
color: rgba(246, 243, 238, 0.86)}
.msg-undo-button {
padding: 4px 10px;
border: 1px solid rgba(255, 255, 255, 0.22);
border-radius: 7px;
background: transparent;
color: #f6f3ee;
font: inherit;
font-size: 15.5px;
cursor: pointer}
.msg-undo-button:hover {
background: rgba(255, 255, 255, 0.09)}
.msg-undo-button:focus-visible {
outline: 2px solid var(--menu-icon-active-color, #00ffef);
outline-offset: 1px}
@media (max-width: 560px) {
.msg-menu {
min-width: 208px}
}
@media (prefers-reduced-motion: reduce) {
.msg-act {
transition: none}
}
.paste-attach-row {
display: flex;
flex-wrap: wrap;
gap: 8px;
padding: 10px 12px 0}
.paste-attach-chip {
display: inline-flex;
align-items: center;
gap: 10px;
max-width: 100%;
padding: 6px 8px 6px 14px;
border: 1px solid rgba(255, 255, 255, 0.16);
border-radius: 999px;
background: rgba(255, 255, 255, 0.06);
color: rgba(246, 243, 238, 0.82);
font-size: 16.5px;
line-height: 1.2}
.paste-attach-label {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis}
.paste-attach-restore,
.paste-attach-remove {
border: 0;
background: transparent;
color: rgba(246, 243, 238, 0.62);
font: inherit;
cursor: pointer;
padding: 2px 4px}
.paste-attach-restore:hover,
.paste-attach-remove:hover {
color: rgba(246, 243, 238, 0.95)}
.paste-attach-remove {
font-size: 21px;
line-height: 1}
@media (max-width: 600px) {
.msg-menu .msg-menu-item {
min-height: 44px}
}
.anhang-chip { align-items: center; gap: 10px; max-width: 100%; padding: 6px 8px 6px 6px; }
.anhang-chip-vorschau { width: 40px; height: 40px; flex: none; display: grid; place-items: center; overflow: hidden; background: rgba(255, 255, 255, 0.06); color: rgba(242, 245, 244, 0.75); }
.anhang-chip-vorschau img, .anhang-chip-vorschau video { width: 100%; height: 100%; object-fit: cover; display: block; }
.anhang-chip-vorschau svg { width: 22px; height: 22px; }
.anhang-chip-text { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.anhang-chip-name { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 48vw; }
.anhang-chip-unter { font-size: 12px; opacity: 0.7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 48vw; }

/* ---- search-overlay.css ---- */
.search-overlay {
position: fixed;
inset: 0;
z-index: 80;
display: flex;
align-items: flex-start;
justify-content: center;
padding: min(12vh, 96px) 16px 16px}
.search-overlay[hidden] {
display: none}
body.search-overlay-open {
overflow: hidden}
.search-overlay-backdrop {
position: absolute;
inset: 0;
background: rgba(2, 6, 10, 0.62);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px)}
.search-overlay-panel {
position: relative;
display: grid;
grid-template-rows: auto minmax(0, 1fr) auto;
width: min(680px, 100%);
max-height: min(72vh, 640px);
overflow: hidden;
border: 1px solid rgba(50, 246, 234, 0.58);
border-radius: 14px;
background:
linear-gradient(145deg, rgba(255, 255, 255, 0.065), rgba(50, 246, 234, 0.025) 42%, transparent 70%),
rgba(19, 24, 33, 0.97);
box-shadow:
0 0 24px rgba(50, 246, 234, 0.28),
0 24px 64px rgba(0, 0, 0, 0.5),
inset 0 1px 0 rgba(126, 232, 218, 0.22)}
.search-overlay-form {
display: flex;
gap: 8px;
align-items: center;
padding: 8px 10px;
border-bottom: 1px solid rgba(50, 246, 234, 0.26)}
.search-overlay-form input {
flex: 1;
min-width: 0;
min-height: 44px;
border: 0;
outline: none;
background: transparent;
color: #f6f3ee;
font-size: 17px}
.search-overlay-form input::placeholder {
color: rgba(151, 158, 171, 0.78)}
.search-overlay-close {
min-width: 44px;
min-height: 44px;
border: 1px solid rgba(50, 246, 234, 0.32);
border-radius: 10px;
background: rgba(6, 10, 16, 0.82);
color: rgba(126, 232, 218, 0.9);
font-size: 12px;
font-weight: 700;
cursor: pointer}
.search-overlay-log {
overflow-y: auto;
display: grid;
align-content: start;
gap: 10px;
padding: 8px}
.search-overlay-group {
display: grid;
gap: 2px}
.search-overlay-group h3 {
margin: 0;
padding: 6px 10px 4px;
color: rgba(126, 232, 218, 0.78);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase}
.search-overlay-row {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 2px 10px;
width: 100%;
min-height: 44px;
padding: 8px 10px;
border: 1px solid transparent;
border-radius: 10px;
background: transparent;
color: #f6f3ee;
text-align: left;
font: inherit;
cursor: pointer}
.search-overlay-row .row-title {
overflow: hidden;
font-weight: 600;
white-space: nowrap;
text-overflow: ellipsis}
.search-overlay-row .row-meta {
align-self: center;
color: rgba(151, 158, 171, 0.85);
font-size: 12px;
white-space: nowrap}
.search-overlay-row .row-detail {
grid-column: 1 / -1;
overflow: hidden;
color: rgba(246, 243, 238, 0.62);
font-size: 13px;
white-space: nowrap;
text-overflow: ellipsis}
.search-overlay-row.is-active {
border-color: rgba(50, 246, 234, 0.4);
background: rgba(50, 246, 234, 0.14)}
.search-overlay-log mark {
border-radius: 3px;
padding: 0 1px;
background: rgba(50, 246, 234, 0.3);
color: #eafffb}
.search-overlay-empty {
padding: 14px;
color: rgba(246, 243, 238, 0.72)}
.search-overlay-hints {
display: flex;
gap: 16px;
margin: 0;
padding: 8px 12px;
border-top: 1px solid rgba(50, 246, 234, 0.2);
color: rgba(151, 158, 171, 0.85);
font-size: 12px}
.search-overlay-hints kbd {
display: inline-block;
min-width: 18px;
margin-right: 4px;
padding: 1px 5px;
border: 1px solid rgba(126, 232, 218, 0.3);
border-radius: 5px;
background: rgba(6, 10, 16, 0.82);
color: rgba(126, 232, 218, 0.9);
font-family: inherit;
font-size: 11px;
text-align: center}
@media (max-width: 560px) {
.search-overlay {
padding: 8px}
.search-overlay-panel {
max-height: calc(100dvh - 16px)}
.search-overlay-hints {
display: none}
}

/* ---- start-glass.css ---- */
#start:not(.has-start-chat) .home-feed {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: clamp(18px, 3vh, 26px);
padding: 24px 16px;
background:
radial-gradient(820px 520px at 18% -12%, rgba(50, 246, 234, 0.13), transparent 62%),
radial-gradient(700px 480px at 88% 108%, rgba(13, 148, 210, 0.10), transparent 64%),
linear-gradient(180deg, #0b1016 0%, #070a0e 62%, #050608 100%)}
#start:not(.has-start-chat) .home-hero {
display: block;
min-height: 0;
padding: 0 16px}
#start:not(.has-start-chat) .home-hero h2 {
font-size: clamp(22px, 2.6vw, 30px);
font-weight: 600;
letter-spacing: -0.01em}
.home-hero .start-markenwort {
color: #35e0d0;
text-shadow: 0 0 18px rgba(50, 246, 234, 0.35)}
.prompt-glass {
width: min(760px, calc(100% - 24px));
margin: 0 auto;
border: 1px solid rgba(126, 232, 218, 0.32);
border-radius: 0;
padding: 6px 10px 6px;
background:
linear-gradient(150deg, rgba(255, 255, 255, 0.09), rgba(50, 246, 234, 0.03) 46%, transparent 72%),
rgba(17, 23, 30, 0.62);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.12),
0 0 26px rgba(50, 246, 234, 0.14),
0 14px 40px rgba(0, 0, 0, 0.42);
-webkit-backdrop-filter: blur(22px) saturate(150%);
backdrop-filter: blur(22px) saturate(150%)}
.prompt-glass:focus-within {
border-color: rgba(50, 246, 234, 0.62);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.14),
0 0 34px rgba(50, 246, 234, 0.26),
0 14px 40px rgba(0, 0, 0, 0.42)}
#start.has-start-chat .prompt-glass {
width: min(980px, calc(100% - 20px));
margin: 0 auto 10px}
.prompt-glass textarea {
height: auto;
min-height: 44px;
padding: 10px 12px 6px;
font-size: 16.5px;
line-height: 1.5}
.prompt-actions {
border-top: 1px solid rgba(255, 255, 255, 0.08)}
.prompt-actions .plus-picker { order: 1; }
.prompt-actions .model-picker { order: 2; }
.prompt-actions .prompt-spacer { order: 3; }
.prompt-actions [data-start-tool] { order: 4; }
.prompt-actions .send-button { order: 5; }
.prompt-glass [data-start-tool="speaker"] {
display: none}
.start-chips {
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: center;
max-width: 940px;
padding: 0 16px}
#start.has-start-chat .start-chips {
display: none}
.start-chips button {
min-height: 44px;
padding: 10px 18px;
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 0;
background: rgba(17, 23, 30, 0.5);
color: rgba(200, 209, 218, 0.92);
font-size: 14px;
cursor: pointer;
-webkit-backdrop-filter: blur(14px);
backdrop-filter: blur(14px);
transition: border-color 150ms ease, color 150ms ease, box-shadow 150ms ease}
.start-chips button:hover,
.start-chips button:focus-visible {
border-color: rgba(50, 246, 234, 0.5);
color: #f0f6f5;
box-shadow: 0 0 16px rgba(50, 246, 234, 0.18)}
.glass-icon.glass-icon {
width: 44px;
height: 44px;
min-height: 44px}
#mausButton {
right: calc(env(safe-area-inset-right) + 48px) !important}
.app-brand-logo {
left: calc(env(safe-area-inset-left) + 48px);
width: 44px;
height: 44px}
body[data-left-menu-state="expanded"] .app-brand-logo {
height: 44px}
@media (max-width: 600px) {
#start:not(.has-start-chat) .home-hero h2 {
font-size: 22px}
.prompt-glass {
width: calc(100% - 16px)}
}

/* ---- eckig.css ---- */
*,
*::before,
*::after {
border-radius: 0 !important}
.profile-avatar,
#settings .ak-avatar {
border-radius: 999px !important}

/* ---- mobil-composer.css ---- */
@media (max-width: 600px) {
.prompt-actions { flex-wrap: nowrap; row-gap: 6px; }
.prompt-actions .model-picker button,
.prompt-actions .model-picker .mode-pill {
max-width: 28vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap}
.prompt-actions .fpille-nachdenken { max-width: 24vw; }
.prompt-actions .fpille-nachdenken .chip-label {
min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap}
}
@media (max-width: 360px) {
.prompt-actions .fpille-nachdenken .chip-label { display: none; }
}
html { overscroll-behavior-y: none; }
@media (max-height: 500px) {
#start .prompt-glass .prompt-actions .ghost-button.icon-button,
#start .prompt-glass .prompt-actions .send-button {
width: 44px;
height: 44px;
min-height: 44px}
.prompt-actions .model-picker button,
.prompt-actions .model-picker .mode-pill,
.prompt-actions .fpille-nachdenken {
min-height: 44px}
}
#code .codeflaeche.codeflaeche {
max-height: calc(100dvh - 130px);
height: calc(100dvh - 96px)}
#start .erwaehnung-menue.erwaehnung-menue {
max-height: min(320px, calc(100dvh - 360px))}
@media (max-width: 767px) {
.sidebar .bottom-nav { border-top: 0; }
.sidebar .left-panel-resizer { display: none; }
}
@media (max-width: 600px) {
html:root {
min-height: 100%;
background: #050608}
body::before {
content: "";
position: fixed;
top: -120px;
right: -120px;
bottom: -120px;
left: -120px;
z-index: -1;
pointer-events: none;
background:
radial-gradient(820px 520px at 18% -12%, rgba(50, 246, 234, 0.13), transparent 62%),
radial-gradient(700px 480px at 88% 108%, rgba(13, 148, 210, 0.10), transparent 64%),
linear-gradient(180deg, #0b1016 0%, #070a0e 62%, #050608 100%) #050608}
body {
padding: 0;
min-height: 100%;
background: transparent}
main.shell {
padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
#start:not(.has-start-chat) .home-feed { background: transparent; }
}
@media (max-width: 600px) {
#start:not(.has-start-chat) .home-feed { min-width: 0; max-width: 100%; }
}
@media (max-width: 600px) {
#start .start-chips.start-chipreihe {
width: 100%;
max-width: 100%;
justify-content: flex-start;
flex-wrap: nowrap;
gap: 10px;
padding: 4px 24px 8px;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x proximity;
scroll-padding-inline: 24px;
scrollbar-width: none;
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%)}
#start .start-chips.start-chipreihe::-webkit-scrollbar { display: none; }
#start .start-chips.start-chipreihe button {
flex: none;
scroll-snap-align: start}
}
@media (max-width: 600px) {
#start.has-start-chat #startLog { padding-top: 52px; scroll-padding-top: 52px; }
}
:root {
--sa-top: env(safe-area-inset-top, 0px);
--sa-bottom: env(safe-area-inset-bottom, 0px)}
@media (max-width: 600px) {
.workspace,
.view,
.home-feed {
min-height: calc(100dvh - var(--sa-top) - var(--sa-bottom))}
#start.has-start-chat .home-feed.home-feed,
#code.view.is-active.is-active {
min-height: 0;
height: calc(100dvh - var(--sa-top) - var(--sa-bottom));
max-height: calc(100dvh - var(--sa-top) - var(--sa-bottom))}
#startLog .msg-actions.is-user { min-height: 34px; }
}
.entry.assistant .chat-table-wrap,
.entry.assistant .chat-table,
.entry.assistant .chat-table th,
.entry.assistant .chat-table td {
white-space: normal}
.entry.assistant.medien-strom {
font-size: 0;
line-height: 0;
word-break: normal}
.entry.assistant.medien-strom::after {
content: attr(data-medien-art) " wird übertragen …";
display: block;
font-size: 15px;
line-height: 1.5;
color: var(--v11-cy, #32f6ea);
opacity: 0.9}

/* ---- design-v11.css ---- */
:root {
--v11-cy: #32f6ea;
--v11-cy-ink: #7ee8da;
--v11-cy-line: rgba(50, 246, 234, 0.30);
--v11-cy-line-on: rgba(50, 246, 234, 0.85);
--v11-cy-glow: rgba(50, 246, 234, 0.10);
--v11-cy-fill: rgba(50, 246, 234, 0.12);
--v11-marke: #02fdfd;
--v11-hair: rgba(255, 255, 255, 0.075);
--v11-glas: rgba(255, 255, 255, 0.045);
--v11-glas-2: rgba(255, 255, 255, 0.075);
--v11-lichtkante: rgba(255, 255, 255, 0.07);
--v11-ok: #7ef0c2;
--v11-warn: #ffd68a;
--v11-bad: #ff9a9c;
--v11-r: 8px;
--v11-r-sm: 6px;
--v11-takt: 160ms}
@media (prefers-reduced-motion: no-preference) {
.ghost-button,
.send-button,
.text-chip,
.start-chips button,
.nav-button {
transition:
background var(--v11-takt) ease,
box-shadow var(--v11-takt) ease,
color var(--v11-takt) ease}
}
.prompt-glass,
.plus-menu,
.model-menu,
.start-chips button,
.ghost-button,
.send-button,
.text-chip {
border-radius: var(--v11-r) !important}
.send-button {
border-radius: 0 !important}
.send-button {
background: #ffffff;
color: #0a0f16}
.send-button svg {
stroke: currentColor}
.send-button.ist-sprache {
background: var(--v11-cy-fill);
color: var(--v11-cy);
box-shadow: inset 0 0 0 1px var(--v11-cy-line-on), 0 0 18px var(--v11-cy-glow)}
.send-button .sendetaste-welle rect {
fill: currentColor;
stroke: none}
.prompt-glass {
background: var(--v11-glas);
-webkit-backdrop-filter: blur(30px) saturate(160%);
backdrop-filter: blur(30px) saturate(160%);
box-shadow: inset 0 1px 0 var(--v11-lichtkante);
border: 0}
.prompt-glass:focus-within {
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.14),
0 0 0 1px var(--v11-cy-line),
0 0 12px var(--v11-cy-glow)}
#profileDockMenu {
background: rgba(14, 20, 28, 0.78) !important;
-webkit-backdrop-filter: blur(40px) saturate(180%) !important;
backdrop-filter: blur(40px) saturate(180%) !important;
box-shadow:
0 22px 60px rgba(0, 0, 0, 0.55),
inset 0 1px 0 rgba(255, 255, 255, 0.18),
0 0 0 1px var(--v11-cy-line) !important;
border: 0 !important;
border-radius: var(--v11-r) !important}
.plus-menu,
.model-menu {
background: rgba(14, 20, 28, 0.78);
-webkit-backdrop-filter: blur(40px) saturate(180%);
backdrop-filter: blur(40px) saturate(180%);
box-shadow:
0 22px 60px rgba(0, 0, 0, 0.55),
inset 0 1px 0 rgba(255, 255, 255, 0.18),
0 0 0 1px var(--v11-cy-line);
border: 0}
.start-chips button,
.ghost-button,
.text-chip {
border: 0;
background: rgba(255, 255, 255, 0.055);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08)}
.start-chips button:hover,
.ghost-button:hover,
.text-chip:hover {
background: rgba(255, 255, 255, 0.09)}
.home-hero h2 {
font-weight: 700;
letter-spacing: -0.03em}
.start-chips button,
.text-chip {
font-weight: 400}
.start-chips button {
font-size: 15px}
@media (max-width: 560px) {
.prompt-glass {
display: flex;
align-items: flex-end;
gap: 6px;
padding: 6px 8px}
.prompt-actions {
display: contents}
.prompt-glass textarea {
order: 3;
flex: 1 1 auto;
min-width: 0;
min-height: 40px;
height: 40px;
padding: 9px 4px}
.prompt-actions .plus-picker { order: 1; }
.prompt-actions .model-picker { order: 2; }
.prompt-actions [data-start-tool="voice"] { order: 4; }
.prompt-actions .send-button { order: 5; }
.prompt-actions .prompt-spacer { display: none; }
.prompt-glass [data-start-tool="audio"] { display: none; }
.prompt-glass .plus-picker,
.prompt-glass .model-picker,
.prompt-glass [data-start-tool],
.prompt-glass .send-button {
flex: 0 0 auto}
.model-picker .text-chip {
max-width: 76px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 13px;
padding: 0 8px}
.prompt-glass textarea::placeholder {
white-space: nowrap;
overflow: hidden;
font-size: 14px}
}
.nav-gruppe {
padding: 16px 14px 4px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(242, 245, 244, 0.58);
user-select: none}
.nav .nav-gruppe:first-child {
padding-top: 8px}
.sidebar .nav { scrollbar-width: thin; }
@media (max-height: 840px) {
.sidebar .nav-vier .nav-button { min-height: 30px; padding-top: 4px; padding-bottom: 4px; }
.sidebar .nav-vier .nav-gruppe { padding-top: 6px; padding-bottom: 2px; }
}
.nav-kosten {
font-size: 13.5px}
.nav-kosten .button-icon {
color: var(--v11-ok)}
.top-krume {
position: fixed;
top: 18px;
left: 210px;
z-index: 30;
font-size: 14.5px;
font-weight: 700;
color: #f2f5f4;
pointer-events: none}
.top-krume::before {
content: "/";
margin-right: 10px;
font-weight: 400;
color: rgba(242, 245, 244, 0.45)}
@media (max-width: 720px) {
.top-krume { display: none; }
}
.plus-menu-werkzeuge {
min-width: 340px;
max-width: 92vw;
max-height: 70vh;
overflow-y: auto;
padding: 6px 0 10px}
.plus-menu-werkzeuge .plus-gruppe {
margin: 12px 16px 6px;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(242, 245, 244, 0.58)}
.plus-menu-werkzeuge [role="menuitem"] {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 2px;
width: calc(100% - 16px);
margin: 0 8px;
padding: 9px 10px;
border-radius: var(--v11-r-sm);
text-align: left}
.plus-menu-werkzeuge [role="menuitem"] b {
font-size: 15.5px;
font-weight: 700}
.plus-menu-werkzeuge .werk-was {
font-size: 13.5px;
color: rgba(242, 245, 244, 0.72);
line-height: 1.45}
.plus-menu-werkzeuge .werk-bsp {
font-size: 13px;
font-style: italic;
color: var(--v11-cy-ink)}
.nav-start { display: none; }
body.spur-start-aktiv .nav-start { display: flex; flex-direction: column; }
body.spur-start-aktiv .nav-vier { display: none; }
.spur-reiter {
display: flex;
gap: 4px;
margin: 2px 10px 10px;
padding: 3px;
border-radius: var(--v11-r);
background: rgba(0, 0, 0, 0.28);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06)}
.spur-reiter button {
flex: 1;
padding: 7px 0;
border: 0;
border-radius: var(--v11-r-sm);
background: transparent;
color: rgba(242, 245, 244, 0.74);
font-size: 14.5px;
font-weight: 700;
cursor: pointer}
.spur-reiter button.an {
background: var(--v11-cy-fill);
color: var(--v11-cy);
box-shadow: inset 0 0 0 1px var(--v11-cy-line-on)}
.nav-kuerzel {
margin-left: auto;
font-size: 11.5px;
color: rgba(242, 245, 244, 0.45);
letter-spacing: 0.06em}
.nav-start .spur-chat {
font-size: 13.5px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: block;
text-align: left}
.nav-start .spur-alle {
color: var(--v11-cy-ink);
font-size: 14px}
.start-vorschlaege {
flex-direction: column;
align-items: stretch;
max-width: 720px;
margin: 0 auto 14px;
gap: 0}
.start-vorschlaege button {
display: block;
width: 100%;
text-align: left;
background: transparent;
box-shadow: none;
border-bottom: 1px solid var(--v11-hair);
border-radius: 0 !important;
padding: 10px 6px;
font-size: 15.5px}
.start-vorschlaege button:hover { background: transparent; color: #f2f5f4; }
.start-vorschlaege button:last-child { border-bottom: 0; }
.start-chipreihe {
flex-wrap: nowrap;
justify-content: center;
gap: 10px;
overflow: visible}
.start-chipreihe button {
width: 44px;
height: 44px;
padding: 0;
justify-content: center}
.start-chipreihe .chip-label { display: none; }
.start-chipreihe button svg { width: 20px; height: 20px; }
.plus-menu-werkzeuge .werk-was,
.plus-menu-werkzeuge .werk-bsp,
.plus-menu-werkzeuge .plus-gruppe { display: none !important; }
.plus-menu-werkzeuge button[role="menuitem"] {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: flex-start !important;
text-align: left !important;
gap: 11px !important;
padding: 10px 14px !important;
width: 100% !important}
.plus-menu-werkzeuge button[role="menuitem"] b {
font-weight: 400 !important;
font-size: 15px !important;
white-space: nowrap}
.plus-menu.plus-menu-werkzeuge {
width: max-content !important;
min-width: 260px !important;
max-width: 330px !important}
.plus-menu-werkzeuge .werk-ic {
flex: none;
width: 18px;
height: 18px;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
opacity: 0.85}
.nav-start .button-icon svg,
.nav-vier .button-icon svg {
width: 18px;
height: 18px;
opacity: 0.85}
.nav-start .nav-button,
.nav-vier .nav-button { letter-spacing: 0.01em; }
.nav-start .nav-button {
min-height: 28px;
padding-top: 3px;
padding-bottom: 3px}
.nav-start { gap: 1px; }
.nav-start .side-block { margin-top: 2px; }
.app-menu-button .menu-logo { width: 24px; height: 24px; display: block; }
.app-brand-logo { display: none !important; }
.browser-button .profil-initialen {
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
border-radius: 999px !important;
background: var(--v11-cy-fill);
color: var(--v11-cy-ink);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.02em}
#start:has(#startLog[hidden]) .plus-menu {
bottom: auto;
top: calc(100% + 10px)}
.bereich-neu-formular {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
margin: 10px 0 4px}
.bereich-neu-formular input {
flex: 1;
min-width: 220px;
max-width: 420px;
padding: 10px 14px;
border: 0;
border-radius: var(--v11-r);
background: rgba(255, 255, 255, 0.06);
box-shadow: inset 0 0 0 1px var(--v11-cy-line);
color: inherit;
font: inherit}
.bereich-neu-formular button {
padding: 10px 16px;
border: 0;
border-radius: var(--v11-r);
background: #f2f5f4;
color: #0b1418;
font-weight: 700;
cursor: pointer}
.bereich-neu-meldung { flex-basis: 100%; font-size: 14px; color: var(--v11-warn); }
#leftPanelResize,
#rightPanelResize {
background: linear-gradient(to right, transparent 5px, rgba(255, 255, 255, 0.16) 5px, rgba(255, 255, 255, 0.16) 7px, transparent 7px) !important}
#leftPanelResize:hover,
#rightPanelResize:hover,
body.is-resizing-panel #leftPanelResize,
body.is-resizing-panel #rightPanelResize {
background: linear-gradient(to right, transparent 4px, rgba(50, 246, 234, 0.6) 4px, rgba(50, 246, 234, 0.6) 8px, transparent 8px) !important}
.sidebar,
#browserPanel {
background: rgba(13, 18, 25, 0.62);
-webkit-backdrop-filter: blur(34px) saturate(170%);
backdrop-filter: blur(34px) saturate(170%);
box-shadow: inset 0 1px 0 var(--v11-lichtkante)}
.fpille-nachdenken {
font-size: 14px;
padding: 0 11px;
order: 4}
.fpille-nachdenken.an {
background: var(--v11-cy-fill);
color: var(--v11-cy);
box-shadow: inset 0 0 0 1px var(--v11-cy-line-on)}
@media (max-width: 560px) {
.fpille-nachdenken { display: none; }
}
#start .prompt-glass {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 9px 9px 16px;
border-radius: 14px !important;
background: rgba(255, 255, 255, 0.06);
-webkit-backdrop-filter: blur(34px) saturate(170%);
backdrop-filter: blur(34px) saturate(170%);
box-shadow: inset 0 1px 0 var(--v11-lichtkante)}
#start.has-start-chat .prompt-glass { margin-bottom: 6px; }
#start .prompt-actions {
display: contents}
#start .prompt-glass textarea {
order: 2;
flex: 1 1 auto;
min-width: 0;
min-height: 40px;
height: 40px;
padding: 9px 4px;
font-size: 17px}
#start .prompt-actions .plus-picker { order: 1; }
#start .prompt-actions .fpille-nachdenken { order: 3; }
#start .prompt-actions [data-start-tool="voice"] { order: 4; }
#start .prompt-actions .send-button { order: 5; }
#start .prompt-actions .prompt-spacer { display: none; }
#start .prompt-glass [data-start-tool="audio"] { display: none; }
#start .prompt-glass .plus-picker,
#start .prompt-glass [data-start-tool],
#start .prompt-glass .send-button,
#start .prompt-glass .fpille-nachdenken { flex: 0 0 auto; }
#start .prompt-glass .ghost-button.icon-button,
#start .prompt-glass .send-button {
width: 38px;
height: 38px;
min-height: 38px;
border-radius: 0 !important}
#start .prompt-glass .send-button { border-radius: 0 !important; }
.send-button.ist-sprache {
background: #ffffff;
color: #0a0f16;
box-shadow: none}
#start .send-button:not(.ist-sprache) {
background: var(--v11-cy);
color: #04211f;
box-shadow: 0 0 22px var(--v11-cy-glow)}
.fpille-nachdenken {
border-radius: 0 !important;
background: transparent;
box-shadow: none;
color: rgba(242, 245, 244, 0.74);
gap: 7px;
display: inline-flex;
align-items: center}
.fpille-nachdenken svg {
width: 17px;
height: 17px;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round}
.fpille-nachdenken:hover { background: rgba(255, 255, 255, 0.07); }
.fpille-nachdenken.an { background: var(--v11-cy-fill); color: var(--v11-cy-ink); box-shadow: none; }
.start-vorschlaege button {
display: flex;
align-items: center;
gap: 14px;
padding: 13px 6px;
border: 0;
border-bottom: 0;
background: transparent;
box-shadow: none;
color: rgba(242, 245, 244, 0.58);
font-size: 16.5px;
border-radius: var(--v11-r-sm) !important}
.start-vorschlaege button svg,
.start-chipreihe button svg {
width: 19px;
height: 19px;
flex: none;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
color: rgba(242, 245, 244, 0.58)}
.start-vorschlaege button:hover { background: rgba(255, 255, 255, 0.05); color: #f2f5f4; }
.start-chipreihe {
flex-wrap: nowrap;
overflow-x: auto;
justify-content: flex-start;
padding-bottom: 6px;
max-width: 720px}
.start-chipreihe button {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 9px 15px;
border-radius: 0 !important;
font-size: 15px;
color: rgba(242, 245, 244, 0.74);
white-space: nowrap;
flex: none}
.start-chipreihe button.an {
background: var(--v11-cy-fill);
color: var(--v11-cy-ink);
box-shadow: inset 0 0 0 1px var(--v11-cy-line)}
.start-chipreihe button.an svg { color: var(--v11-cy); }
.spur-reiter button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px}
.spur-reiter button svg {
width: 16px;
height: 16px;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round}
.spur-reiter button.an {
background: rgba(255, 255, 255, 0.085);
color: #f2f5f4;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12)}
.spur-reiter button.an svg { color: var(--v11-cy); }
.profile-dock-plan {
display: block;
font-size: 13px;
color: rgba(242, 245, 244, 0.58)}
body.spur-start-aktiv .nav-kosten { display: none; }
#code .codeflaeche {
display: flex;
flex-direction: column;
flex: 1;
min-height: 62vh;
max-height: calc(100vh - 130px)}
#code .codegruss {
padding: 26px 4px 0;
font-size: 25px;
font-weight: 700;
letter-spacing: -0.03em}
#code .codeleer { flex: 1; min-height: 80px; }
#code .code-log-halter { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; }
#code .code-log-halter .start-log { flex: 1; }
.start-log .entry,
.start-log .entry.assistant {
border: 0;
background: transparent;
box-shadow: none}
.start-log .entry.user {
border: 0;
background: rgba(255, 255, 255, 0.07)}
#code .repozeile { position: relative; }
.code-projekt-menue {
position: absolute;
bottom: calc(100% + 6px);
left: 0;
z-index: 60;
min-width: 220px;
display: flex;
flex-direction: column;
padding: 6px;
background: rgba(13, 18, 25, 0.92);
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
border: 1px solid rgba(255, 255, 255, 0.12)}
.code-projekt-menue button {
display: block;
width: 100%;
text-align: left;
padding: 10px 12px;
min-height: 44px;
background: none;
border: 0;
box-shadow: none;
color: inherit;
font: inherit;
cursor: pointer}
.code-projekt-menue button:hover { background: rgba(94, 234, 212, 0.12); }
@media (min-width: 768px) {
#browserPanel {
transform: none !important;
transition: right 180ms ease;
right: calc(-1 * var(--right-panel-width, 320px) - 24px)}
#browserPanel.is-open { right: 0; }
}
#start .prompt-glass .model-picker { display: block; }
#start .prompt-glass .model-picker .text-chip,
#start .prompt-glass #modelPickerButton {
font-size: 13.5px;
color: rgba(242, 245, 244, 0.62);
background: none;
border: 0;
padding: 6px 8px}
#start .prompt-glass #modelPickerButton:hover { color: rgba(242, 245, 244, 0.92); }
.prompt-actions .model-picker { order: 4; }
body.spur-zu:not(.right-panel-open) .start-log { border-top: 0; }
body.spur-zu:not(.right-panel-open) .prompt-glass {
box-shadow: none;
border-top: 0}
body.spur-zu:not(.right-panel-open) #code .codefeld {
box-shadow: none;
background: rgba(255, 255, 255, 0.035)}
body.spur-zu:not(.right-panel-open) #code .code-wchips button {
background: none;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10)}
#code .codefeld textarea { min-height: 26px; }
#startLog .msg-actions {
justify-content: flex-start;
align-items: center;
margin-top: -13px;
pointer-events: none}
#startLog .msg-actions .msg-act { pointer-events: auto; }
#startLog .msg-actions.is-user { justify-content: flex-start; }
#startLog { gap: 0; }
#startLog .entry { margin: 0; padding-top: 6px; padding-bottom: 6px; }
#startLog .entry.user { padding: 6px 11px; }
#startLog .entry:not(:first-child) { border-top: 0; }
.view-header { margin-bottom: 10px; }
.view-header .subhead { margin-top: 2px; }
.panel-grid { gap: 8px; }
#chatHistory .ch-karte {
background: none;
box-shadow: none;
border-radius: 0;
padding: 7px 10px;
margin-bottom: 0}
#chatHistory .ch-karte + .ch-karte { border-top: 1px solid var(--v11-hair); }
#chatHistory .ch-karte.is-active { background: rgba(120, 220, 232, 0.10); }
.search-overlay-row { padding-top: 4px; padding-bottom: 4px; }
.search-overlay-row + .search-overlay-row { border-top: 1px solid var(--v11-hair); }
#settings .settings-row {
flex-wrap: wrap;
gap: 6px 12px;
align-items: center}
#settings .settings-row-copy { flex: 1 1 160px; min-width: 0; }
#settings .settings-row select,
#settings .settings-row input[type="text"] { max-width: 100%; }
#code .code-wchips { display: none; }
#code .code-werkzeuge { display: none; }
#code .codeflaeche {
height: calc(100vh - 96px);
max-height: none;
overflow: hidden}
#code .codeflaeche:has(#codeLogHalter #startLog:not([hidden])) .codegruss { display: none; }
#code .codeflaeche:has(#codeLogHalter #startLog:not([hidden])) .codeleer { display: none; }
#code .code-log-halter { flex: 1 1 auto; }
#code .codeunten { margin-top: auto; padding-bottom: 14px; }
#code .code-mini { width: 34px; height: 34px; flex: 0 0 auto; }
#code .code-mini svg { width: 18px; height: 18px; stroke: currentColor; }
#code .view-chrome { display: none; }
.chat-code-klapp { right: 4px; }
.chat-code-download { right: 48px; }
.chat-code-copy[data-code-copy] { right: 92px; }
.chat-code-save { right: 136px; }
@media (pointer: fine) {
.chat-code-klapp { right: 6px; }
.chat-code-download { right: 34px; }
.chat-code-copy[data-code-copy] { right: 62px; }
.chat-code-save { right: 90px; }
}
.code-projekt-zeile { display: flex; align-items: stretch; }
.code-projekt-zeile button:first-child { flex: 1 1 auto; }
.code-projekt-zeile .code-projekt-ordner {
flex: 0 0 auto;
max-width: 46%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: rgba(242, 245, 244, 0.72)}
#code .codefeld { position: relative; }
.code-plus-menu {
position: absolute;
left: 8px;
bottom: calc(100% + 8px);
z-index: 30;
min-width: 302px;
padding: 6px;
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 12px;
background: rgb(32, 32, 31);
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45)}
.code-plus-menu [role="menuitem"],
.code-plus-menu [role="menuitemcheckbox"] {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
min-height: 42px;
padding: 6px 10px;
border: 0;
border-radius: 8px;
background: transparent;
color: #f0efec;
font-size: 14px;
text-align: left;
cursor: pointer}
@media (pointer: fine) {
.code-plus-menu [role="menuitem"],
.code-plus-menu [role="menuitemcheckbox"] { min-height: 32px; }
}
.code-plus-menu [role="menuitem"]:hover,
.code-plus-menu [role="menuitem"]:focus-visible,
.code-plus-menu [role="menuitemcheckbox"]:hover,
.code-plus-menu [role="menuitemcheckbox"]:focus-visible {
background: rgba(255, 255, 255, 0.08)}
.code-plus-menu [role="menuitem"] svg,
.code-plus-menu [role="menuitemcheckbox"] svg {
width: 16px;
height: 16px;
flex: none;
fill: none;
stroke: currentColor;
stroke-width: 1.7;
stroke-linecap: round;
stroke-linejoin: round;
color: rgba(240, 239, 236, 0.75)}
.code-plus-menu [role="menuitem"] span,
.code-plus-menu [role="menuitemcheckbox"] span { flex: 1; }
.code-plus-menu [role="menuitem"] kbd {
font-family: inherit;
font-size: 12.5px;
color: rgba(240, 239, 236, 0.45)}
.code-plus-menu .plus-pfeil { color: rgba(240, 239, 236, 0.45); }
.code-plus-menu .code-plus-line {
height: 1px;
margin: 6px 4px;
background: rgba(255, 255, 255, 0.08)}
#codeModellMenue { left: auto; right: 10px; }
.code-plus-unter {
position: absolute;
left: calc(100% + 6px);
bottom: 0;
min-width: 250px}
@media (max-width: 720px) {
.code-plus-unter { left: auto; right: 0; bottom: calc(100% + 6px); }
}
.code-schalter {
position: relative;
flex: 0 0 auto;
margin-left: auto;
width: 34px;
height: 20px;
background: rgba(255, 255, 255, 0.16);
transition: background-color 120ms ease}
.code-schalter::after {
content: "";
position: absolute;
top: 3px;
left: 3px;
width: 14px;
height: 14px;
background: #f2f5f4;
transition: transform 120ms ease}
.code-plus-menu [role="menuitemcheckbox"] .code-schalter { flex: 0 0 34px; width: 34px; }
[aria-checked="true"] .code-schalter { background: var(--v11-cy); }
[aria-checked="true"] .code-schalter::after { transform: translateX(14px); }
#code .code-arbeit {
position: absolute;
top: var(--code-arbeit-top, 31px);
right: 12px;
width: 11px;
height: 11px;
pointer-events: none;
border: 1.5px solid rgba(242, 245, 244, 0.55)}
#code .code-arbeit.an {
border-color: var(--v11-cy);
background: var(--v11-cy);
animation: code-arbeit-puls 1.6s ease-in-out infinite}
@keyframes code-arbeit-puls {
0%, 100% { opacity: 1; }
50% { opacity: 0.35; }
}
@media (prefers-reduced-motion: reduce) {
#code .code-arbeit.an { animation: none; }
}
#codeSlashMenue { max-height: 300px; overflow-y: auto; }
#codeSlashMenue [role="menuitem"] b {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 13px;
font-weight: 600}
#codeSlashMenue [role="menuitem"] span {
flex: 1;
text-align: right;
font-size: 12.5px;
color: rgba(240, 239, 236, 0.5)}
.code-modus-menue {
min-width: 0;
width: max-content;
max-width: min(320px, 92vw);
max-height: 60vh;
overflow-y: auto}
.code-menue-titel {
padding: 5px 12px 1px;
font-size: 11.5px;
color: rgba(240, 239, 236, 0.5)}
.code-modus-menue button {
display: flex;
align-items: center;
gap: 10px;
border: 0;
min-height: 0;
padding: 1px 12px;
text-align: left}
.code-modus-menue .modus-links {
flex: 1;
min-width: 0;
display: block;
text-align: left}
.code-modus-menue button b { display: block; font-weight: 400; font-size: 14.5px; line-height: 1.5; color: rgba(242, 245, 244, 0.92); }
.code-modus-menue button small {
display: block;
margin-top: 1px;
opacity: 0.6;
font-size: 0.86em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis}
.code-modus-menue .modus-rechts {
display: inline-flex;
align-items: center;
gap: 9px;
flex: 0 0 auto}
#code .code-projekt-menue button,
#code .code-modus-menue button {
background: transparent;
box-shadow: none}
.code-modus-menue.code-modus-menue button {
min-height: 0;
height: auto;
padding: 2px 12px;
background: transparent;
box-shadow: none}
.code-modus-menue.code-modus-menue button:hover { background: rgba(94, 234, 212, 0.12); }
#code .code-projekt-menue button:hover,
#code .code-modus-menue button:hover {
background: rgba(94, 234, 212, 0.12)}
.code-modus-menue .modus-haken { color: var(--v11-cy); }
.code-modus-menue .modus-ziffer {
color: rgba(240, 239, 236, 0.45);
font-size: 13px}
#code .codeunten { padding: 14px 0 8px; }
#code .repozeile {
display: flex;
gap: 8px;
margin-bottom: 10px;
flex-wrap: wrap;
align-items: center}
#code .repochip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 2px 6px;
min-height: 0;
width: auto;
max-width: 240px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 13px;
font-weight: 400;
color: rgba(242, 245, 244, 0.55);
border: 0;
background: transparent;
box-shadow: none;
transition: color 120ms ease}
#code .repochip:hover { color: #f2f5f4; background: transparent; }
#code #codeProjektChip { display: none; }
#code .repochip.an {
background: transparent;
color: var(--v11-cy);
box-shadow: none}
#code .codefeld {
background: rgba(255, 255, 255, 0.05);
-webkit-backdrop-filter: blur(34px) saturate(170%);
backdrop-filter: blur(34px) saturate(170%);
box-shadow: inset 0 1px 0 var(--v11-lichtkante);
border: 0;
border-radius: var(--v11-r);
padding: 5px 10px 4px}
#code .code-anhaenge {
display: flex;
flex-wrap: wrap;
gap: 5px;
margin-bottom: 3px}
#code .code-anhang-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 1px 3px 1px 7px;
font-size: 12px;
color: rgba(242, 245, 244, 0.8);
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.1)}
#code .code-anhang-weg {
min-height: 0;
padding: 0 4px;
border: 0;
background: transparent;
color: rgba(242, 245, 244, 0.5);
font-size: 14px;
line-height: 1;
cursor: pointer}
#code .code-anhang-weg:hover { color: #f2f5f4; }
#code .codefeld:focus-within {
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 0 0 1px var(--v11-cy-line), 0 0 12px var(--v11-cy-glow)}
#code .codefeld textarea {
width: 100%;
border: 0;
background: transparent;
box-shadow: none;
color: #f2f5f4;
font-size: 16.5px;
resize: none;
padding: 0}
#code .codefeld textarea:focus { outline: none; box-shadow: none; }
#code .codeleiste {
display: flex;
align-items: center;
gap: 3px;
margin-top: 2px;
flex-wrap: wrap}
#code .codeleiste .icon-button.code-mini {
background: transparent;
border: 0;
box-shadow: none;
color: rgba(242, 245, 244, 0.55)}
@media (pointer: fine) {
#code .codeleiste .icon-button.code-mini { width: 28px; height: 28px; min-height: 28px; }
#code #codeSenden { width: 28px; height: 28px; min-height: 28px; }
}
#code .codeleiste .icon-button.code-mini:hover {
background: rgba(255, 255, 255, 0.07);
color: #f2f5f4}
#code .code-rechts {
margin-left: auto;
display: flex;
align-items: center;
gap: 11px;
font-size: 14.5px;
color: rgba(242, 245, 244, 0.74)}
#code .code-rechts b { color: rgba(242, 245, 244, 0.8); font-weight: 400; font-size: 13px; }
#code .code-rechts { font-size: 13px; }
#code #codeSenden {
width: 32px;
height: 32px;
min-height: 32px;
border-radius: 0 !important;
background: #ffffff;
color: #0a0f16;
display: grid;
place-items: center}
#code #codeSenden svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
#code .code-wchips {
justify-content: flex-start;
margin-top: 12px;
gap: 8px}
#code .code-wchips button {
border-radius: 0 !important;
font-size: 15px;
padding: 9px 15px;
width: auto}
#code .code-werkzeuge { margin-top: 18px; }
#code .code-werkzeuge summary {
cursor: pointer;
font-size: 14.5px;
color: rgba(242, 245, 244, 0.58);
padding: 8px 0}
@media (min-width: 768px) {
body:not(.spur-zu) .sidebar {
transform: none !important;
visibility: visible !important}
body:not(.spur-zu) main.shell {
margin-left: var(--left-panel-width, 196px)}
body.spur-zu .sidebar {
transform: translateX(-102%) !important;
visibility: hidden !important}
body.spur-zu main.shell { margin-left: 0; }
.app-menu-button { display: inline-flex; }
.sidebar-backdrop { display: none !important; }
body:not(.spur-zu) .top-krume { left: calc(var(--left-panel-width, 196px) + 26px); }
body.spur-zu .top-krume { left: 96px; }
.sidebar {
border-right: 1px solid var(--v11-hair);
box-shadow: none}
body:not(.spur-zu) .left-panel-resizer {
position: fixed !important;
left: calc(var(--left-panel-width, 196px) - 6px) !important;
right: auto !important;
top: 0;
bottom: 0;
width: 12px;
z-index: 80;
pointer-events: auto !important}
body.spur-zu .left-panel-resizer { display: none; }
}
.profile-dock-gear { display: none !important; }
.profile-avatar { border-radius: 999px; overflow: hidden; }
.top-hilfe {
position: fixed;
top: 14px;
right: 132px;
z-index: 30;
display: inline-flex;
align-items: center;
gap: 7px;
padding: 7px 13px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.055);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
color: #f2f5f4;
font-size: 14px;
text-decoration: none}
.top-hilfe:hover { background: rgba(255, 255, 255, 0.09); }
@media (max-width: 1023px) {
.top-hilfe { display: none; }
}
#code .codegruss { display: flex; align-items: center; gap: 11px; }
#code .codegruss-zeichen {
width: 24px; height: 24px; flex: none;
fill: none; stroke: var(--v11-cy); stroke-width: 2.2;
stroke-linecap: round; stroke-linejoin: round}
#code .code-mini {
width: 30px; height: 30px; min-height: 30px;
padding: 0;
border-radius: 0 !important}
#code .code-mini svg {
width: 16px; height: 16px; flex: none;
fill: none; stroke: currentColor; stroke-width: 2.2;
stroke-linecap: round; stroke-linejoin: round}
.profile-dock-menu [role="menuitem"] {
display: flex;
align-items: center;
gap: 12px;
width: 100%}
.profile-dock-menu .dock-wert {
margin-left: auto;
font-size: 12.5px;
color: rgba(242, 245, 244, 0.55);
white-space: nowrap}
.profile-dock-menu .dock-strich {
height: 1px;
margin: 5px 10px;
background: var(--v11-hair)}
.profile-dock-menu .profile-dock-menu-logout { color: var(--v11-bad); }
#papierkorb .papierkorb-zeile {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 4px;
border-bottom: 1px solid var(--v11-hair);
flex-wrap: wrap}
#papierkorb .papierkorb-zeile:last-child { border-bottom: 0; }
#papierkorb .papierkorb-text { flex: 1; min-width: 200px; display: grid; gap: 3px; }
#papierkorb .papierkorb-text strong { font-size: 15.5px; }
#papierkorb .papierkorb-text span { font-size: 13.5px; color: rgba(242, 245, 244, 0.62); }
#papierkorb .papierkorb-leer { color: rgba(242, 245, 244, 0.62); font-size: 15.5px; }
.voice-mode-overlay, #voiceOverlay, .voice-overlay {
background: rgba(7, 11, 17, 0.92) !important;
-webkit-backdrop-filter: blur(40px) saturate(160%);
backdrop-filter: blur(40px) saturate(160%)}
.voice-mode-logo svg, .voice-mode-logo { color: var(--v11-marke); }
.voice-mode-status, .voice-mode-hint {
color: rgba(242, 245, 244, 0.74);
font-size: 16.5px}
.voice-mode-transcript, .voice-mitschrift {
background: var(--v11-glas);
border: 0;
border-radius: var(--v11-r);
box-shadow: inset 0 1px 0 var(--v11-lichtkante);
color: #f2f5f4;
font-size: 17px;
line-height: 1.6}
.voice-mode-bar {
background: rgba(255, 255, 255, 0.06);
border: 0;
border-radius: 999px;
box-shadow: inset 0 1px 0 var(--v11-lichtkante)}
.voice-mode-bar input, .voice-mode-input {
background: transparent;
border: 0;
color: #f2f5f4;
font-size: 16.5px}
.voice-mode-bar button {
border-radius: 999px;
border: 0;
background: rgba(255, 255, 255, 0.055);
color: #f2f5f4;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08)}
#voiceModeClose { color: rgba(242, 245, 244, 0.74); }
#voiceModeMic[aria-pressed="true"] {
background: rgba(255, 122, 124, 0.18);
color: #ffb4b6;
box-shadow: inset 0 0 0 1px rgba(255, 122, 124, 0.55)}
#kameraOverlay {
position: fixed;
inset: 0;
z-index: 200;
display: grid;
place-items: center;
background: rgba(7, 11, 17, 0.85);
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px)}
#kameraOverlay .kamera-kasten {
width: min(720px, 94vw);
border-radius: var(--v11-r);
background: var(--v11-glas-2);
box-shadow: inset 0 1px 0 var(--v11-lichtkante), 0 30px 80px rgba(0, 0, 0, 0.6);
padding: 14px;
display: grid;
gap: 12px}
#kameraOverlay video { width: 100%; border-radius: var(--v11-r-sm); background: #000; }
#kameraOverlay .kamera-abzeichen {
justify-self: start;
padding: 5px 12px;
border-radius: 999px;
background: var(--v11-cy-fill);
color: var(--v11-cy);
font-size: 14px;
font-weight: 700;
box-shadow: inset 0 0 0 1px var(--v11-cy-line-on)}
#kameraOverlay .kamera-leiste { display: flex; gap: 10px; }
#kameraOverlay .kamera-leiste button {
flex: 1;
padding: 12px;
border: 0;
border-radius: var(--v11-r);
font-size: 15.5px;
cursor: pointer;
background: rgba(255, 255, 255, 0.055);
color: #f2f5f4;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08)}
#kameraOverlay [data-kamera="aufnehmen"] {
background: var(--v11-cy) !important;
color: #04211f !important;
font-weight: 700}
#kameraOverlay .kamera-hinweis { margin: 0; font-size: 13.5px; color: rgba(242, 245, 244, 0.62); }
#arbeitsbereiche .bereich-karte {
padding: 14px 4px 16px;
border-bottom: 1px solid var(--v11-hair);
display: grid;
gap: 10px}
#arbeitsbereiche .bereich-kopf { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
#arbeitsbereiche .bereich-kopf h3 { margin: 0; font-size: 18px; }
#arbeitsbereiche .bereich-kopf span { font-size: 14px; color: rgba(242, 245, 244, 0.62); }
#arbeitsbereiche .bereich-anweisung {
width: 100%;
border: 0;
border-radius: var(--v11-r-sm);
background: rgba(0, 0, 0, 0.24);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09);
color: #f2f5f4;
font-size: 15px;
padding: 10px 12px;
resize: vertical}
#arbeitsbereiche .bereich-aktionen { display: flex; gap: 8px; flex-wrap: wrap; }
#arbeitsbereiche .bereich-neu-gespraech {
background: var(--v11-cy) !important;
color: #04211f !important;
font-weight: 700 !important}
#arbeitsbereiche .bereich-chats { display: flex; flex-wrap: wrap; gap: 8px; }
#arbeitsbereiche .bereich-chats button {
font-size: 14px;
padding: 7px 12px;
border-radius: 999px !important}
#arbeitsbereiche .bereich-mehr { color: var(--v11-cy-ink); }
#arbeitsbereiche .bereiche-leer { color: rgba(242, 245, 244, 0.62); font-size: 15.5px; }
#arbeitsbereiche #bereichNeu {
background: var(--v11-cy) !important;
color: #04211f !important;
font-weight: 700 !important;
margin-bottom: 14px}
#fuehrungBlase {
position: fixed;
z-index: 300;
width: 300px;
padding: 16px;
border-radius: var(--v11-r);
background: rgba(14, 20, 28, 0.96);
-webkit-backdrop-filter: blur(30px);
backdrop-filter: blur(30px);
box-shadow: 0 22px 60px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 0 0 1px var(--v11-cy-line-on);
color: #f2f5f4}
#fuehrungBlase b { font-size: 15.5px; }
#fuehrungBlase p { margin: 8px 0 0; font-size: 14.5px; line-height: 1.5; color: rgba(242, 245, 244, 0.82); }
#fuehrungBlase .fuehrung-beispiel { color: var(--v11-cy-ink); font-style: italic; }
#fuehrungBlase .fuehrung-pfeil {
position: absolute;
top: -7px;
width: 14px;
height: 14px;
transform: rotate(45deg);
background: rgba(14, 20, 28, 0.96);
border-left: 1px solid var(--v11-cy-line-on);
border-top: 1px solid var(--v11-cy-line-on)}
#fuehrungBlase .fuehrung-knoepfe { display: flex; gap: 8px; margin-top: 14px; }
#fuehrungBlase button {
padding: 9px 16px;
border: 0;
border-radius: var(--v11-r);
font-size: 14.5px;
cursor: pointer;
background: rgba(255, 255, 255, 0.055);
color: #f2f5f4;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08)}
#fuehrungBlase [data-fuehrung="weiter"] {
background: var(--v11-cy);
color: #04211f;
font-weight: 700}
#kameraOverlay.ist-live {
inset: auto 18px 18px auto;
background: transparent;
-webkit-backdrop-filter: none;
backdrop-filter: none;
place-items: end}
#kameraOverlay.ist-live .kamera-kasten { width: 260px; padding: 8px; gap: 6px; }
#kameraOverlay.ist-live .kamera-hinweis { display: none; }
#kameraOverlay.ist-live [data-kamera="aufnehmen"],
#kameraOverlay.ist-live [data-kamera="live"] { display: none; }
#arbeitsflaeche {
display: grid;
gap: 10px;
padding: 12px;
margin: 10px;
border-radius: var(--v11-r);
background: var(--v11-glas-2);
box-shadow: inset 0 1px 0 var(--v11-lichtkante);
max-height: 70vh;
overflow: auto}
#arbeitsflaeche .af-kopf { display: flex; align-items: center; gap: 10px; }
#arbeitsflaeche .af-kopf strong { flex: 1; font-size: 15.5px; }
#arbeitsflaeche .af-kopf button { border: 0; background: transparent; color: rgba(242,245,244,.6); cursor: pointer; font-size: 16px; }
#arbeitsflaeche .af-inhalt { font-size: 15px; line-height: 1.6; color: #f2f5f4; }
#arbeitsflaeche .af-inhalt table { border-collapse: collapse; }
#arbeitsflaeche .af-inhalt td, #arbeitsflaeche .af-inhalt th { border: 1px solid var(--v11-hair); padding: 6px 9px; }
#arbeitsflaeche .af-leiste { display: flex; gap: 7px; flex-wrap: wrap; }
#arbeitsflaeche .af-leiste .af-luft { flex: 1; }
#arbeitsflaeche .af-leiste button {
border: 0; border-radius: 999px; padding: 7px 13px; font-size: 14px; cursor: pointer;
background: rgba(255,255,255,.055); color: #f2f5f4;
box-shadow: inset 0 1px 0 rgba(255,255,255,.08)}
.af-karte {
display: flex; align-items: center; gap: 10px;
margin: 6px 0 12px; padding: 10px 14px;
border: 0; border-radius: var(--v11-r); cursor: pointer;
background: var(--v11-glas); color: #f2f5f4;
box-shadow: inset 0 1px 0 var(--v11-lichtkante);
font-size: 14.5px; text-align: left}
.af-karte strong { font-size: 15px; }
.af-karte span { color: rgba(242,245,244,.62); }
.af-karte em { margin-left: auto; font-style: normal; color: var(--v11-cy-ink); }
#files .datei-tabelle { width: 100%; border-collapse: collapse; font-size: 14.5px; }
#files .datei-tabelle th { text-align: left; color: rgba(242,245,244,.58); font-weight: 700; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; padding: 8px 10px; border-bottom: 1px solid var(--v11-hair); }
#files .datei-tabelle td { padding: 9px 10px; border-bottom: 1px solid var(--v11-hair); }
.msg-actions .msg-act.msg-act {
background: transparent;
border-color: transparent;
box-shadow: none}
.msg-actions .msg-act.msg-act:hover,
.msg-actions .msg-act.msg-act:focus-visible {
background: rgba(255, 255, 255, 0.08)}
#startLog .af-karte + .msg-actions { margin-top: -10px; }
#startLog .entry.user { padding-right: 40px; }
#startLog .msg-actions.is-user { margin-top: -34px; padding-right: 6px; }
.chat-runter {
position: fixed;
left: 50%;
bottom: 128px;
transform: translateX(-50%);
z-index: 60;
width: 34px; height: 34px; min-height: 34px;
padding: 0;
display: inline-flex; align-items: center; justify-content: center;
border: 1px solid var(--v11-hair);
border-radius: 999px;
background: rgba(20, 26, 33, 0.92);
color: #f2f5f4;
cursor: pointer;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35)}
.chat-runter:hover { background: rgba(40, 48, 58, 0.95); }
.chat-runter svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.chat-stopp {
position: fixed;
z-index: 70;
display: inline-flex; align-items: center; justify-content: center;
padding: 0; border: 0;
border-radius: 999px;
background: #f2f5f4;
color: #0a0f16;
cursor: pointer}
.chat-stopp:hover { background: #dfe5e3; }
.chat-stopp svg { width: 18px; height: 18px; fill: currentColor; stroke: none; }
#startLog .entry.assistant .chat-code[data-language] {
padding-top: 0}
#startLog .entry.assistant .chat-code[data-language]::before {
content: attr(data-language);
display: block;
position: sticky;
left: 0;
margin: 0 -12px 6px;
padding: 15px 12px;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 12px;
line-height: 18px;
letter-spacing: 0.02em;
text-transform: lowercase;
color: rgba(242, 245, 244, 0.55)}
@media (pointer: fine) {
#startLog .entry.assistant .chat-code[data-language]::before {
padding: 8px 12px}
}
#startLog .chat-code-wrap .chat-code-copy {
top: 3px;
border-color: transparent;
background: transparent;
color: rgba(242, 245, 244, 0.55);
transition: color 120ms ease}
#startLog .chat-code-wrap .chat-code-copy:hover,
#startLog .chat-code-wrap .chat-code-copy:focus-visible {
border-color: transparent;
background: transparent;
color: #f2f5f4}
@media (pointer: fine) {
#startLog .chat-code-wrap .chat-code-copy { top: 4px; }
}
#startLog .chat-code-wrap .chat-code-copy::after { content: none; }
#startLog .chat-code-wrap .chat-code-copy svg { width: 14px; height: 14px; }
.chat-code-wrap .code-datei-karte {
display: grid;
grid-template-columns: 36px 1fr;
grid-template-rows: auto auto;
column-gap: 12px;
align-items: center;
margin-top: 8px;
padding: 10px 12px;
border: 1px solid rgba(255, 255, 255, 0.1);
background: rgba(255, 255, 255, 0.03)}
.code-datei-zeichen {
grid-row: 1 / span 2;
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
background: rgba(255, 255, 255, 0.07);
color: rgba(242, 245, 244, 0.75)}
.code-datei-zeichen svg {
width: 18px;
height: 18px;
fill: none;
stroke: currentColor;
stroke-width: 1.7;
stroke-linecap: round;
stroke-linejoin: round}
.code-datei-karte::before {
content: attr(data-datei);
grid-column: 2;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 13.5px;
color: #f0efec}
.code-datei-karte::after {
content: attr(data-info);
grid-column: 2;
font-size: 12px;
color: rgba(242, 245, 244, 0.5)}
#startLog .chat-schritte-titel {
display: inline-flex;
align-items: center;
gap: 6px;
list-style: none;
cursor: pointer;
color: rgba(242, 245, 244, 0.5);
font-size: 13px}
#startLog .chat-schritte-titel::-webkit-details-marker { display: none; }
#startLog .chat-schritte-titel::after {
content: "›";
font-size: 15px;
line-height: 1;
transition: transform 150ms ease}
#startLog .chat-schritte-falte[open] .chat-schritte-titel::after {
transform: rotate(90deg)}
#startLog .chat-schritte-falte[open] .chat-schritt {
margin-left: 4px;
padding-left: 10px;
border-left: 1px solid rgba(255, 255, 255, 0.12)}
#startLog .chat-code-wrap[data-zu] .chat-code[data-language] {
max-height: 50px;
overflow: hidden;
padding-bottom: 0}
@media (pointer: fine) {
#startLog .chat-code-wrap[data-zu] .chat-code[data-language] { max-height: 36px; }
}
.chat-code-klapp svg { transition: transform 150ms ease; }
.chat-code-wrap[data-zu] .chat-code-klapp svg { transform: rotate(-90deg); }
#startLog .entry.assistant code {
padding: 2px 6px;
background: rgba(255, 255, 255, 0.09);
font-size: 0.875em}
#startLog .entry.assistant .chat-code code {
padding: 0;
background: none;
font-size: 0.92em}
.chat-code .cf-kom { color: #8b949e; font-style: italic; }
.chat-code .cf-str { color: #a5d6ff; }
.chat-code .cf-zahl { color: #79c0ff; }
.chat-code .cf-schl { color: #ff7b72; }
.chat-code .cf-fn { color: #d2a8ff; }
#code.view.is-active {
display: flex;
flex-direction: column;
height: 100dvh;
max-height: 100dvh;
overflow: hidden;
padding: 4px 12px 0}
#code .codeflaeche {
flex: 1;
min-height: 0;
height: auto;
max-height: none}
#code .codegruss { padding: 2px 2px 0; }
@media (max-width: 767px) { #code .codegruss { padding-left: 40px; padding-right: 40px; } }
@media (min-width: 768px) { body.spur-zu #code .codegruss { padding-left: 40px; } }
#code .codeunten { margin-top: auto; padding: 4px 0 0; }
#code .code-log-halter .start-log .entry { max-width: none; }
#code .code-log-halter .msg-actions { max-width: none; }
#code .codefeld textarea { max-height: 40vh; overflow-y: auto; }
.nav-start .spur-chat::before {
content: "";
flex: 0 0 auto;
width: 5px;
height: 5px;
margin-right: 8px;
border: 1px solid rgba(242, 245, 244, 0.32);
border-radius: 50%}
.nav-start .spur-chat.is-active::before {
border-color: rgba(50, 246, 234, 0.55);
background: rgba(50, 246, 234, 0.55)}
.nav-start .spur-chat { display: flex; align-items: center; }
.panel-status { padding: 10px 12px; overflow: auto; }
.panel-status .status-grid {
display: flex;
flex-direction: column;
gap: 7px;
font-size: 13.5px}
.panel-status .status-grid > div {
display: flex;
justify-content: space-between;
gap: 10px;
border-bottom: 1px solid var(--v11-hair);
padding-bottom: 6px}
.panel-status .status-grid span { text-align: right; opacity: 0.8; }
#start .prompt-glass { flex-wrap: wrap; align-items: center; }
#start .prompt-glass textarea {
order: 0;
flex: 1 1 100%;
width: 100%;
height: auto !important;
field-sizing: content;
min-height: 40px !important;
max-height: 40vh;
overflow-y: auto}
#start .prompt-actions .plus-picker { order: 1; }
#start .prompt-actions .prompt-spacer { display: block; flex: 1 1 auto; order: 2; }
#start .prompt-actions .fpille-nachdenken { order: 3; }
#start .prompt-actions .model-picker { order: 4; display: block; }
#start .prompt-actions [data-start-tool="voice"] { order: 5; }
#start .prompt-actions .send-button { order: 6; }
.voice-mode-reply {
text-align: left;
font-size: 16px;
line-height: 1.55;
max-width: 620px;
width: 100%;
padding: 0 4px}
.voice-mode-transcript { text-align: left; }
@media (max-width: 600px) {
#arbeitsbereiche #bereichNeu { min-height: 44px; }
#code .codeleiste .icon-button.code-mini,
#code .codeleiste #codeSenden {
width: 44px;
height: 44px;
min-height: 44px}
#code .repochip {
min-height: 44px;
padding-top: 0;
padding-bottom: 0}
#code .codeleiste { gap: 4px; }
}
#start .prompt-glass { position: relative; }
#start .start-arbeit {
position: absolute;
top: var(--start-arbeit-top, 18px);
right: 12px;
width: 11px;
height: 11px;
pointer-events: none;
border: 1.5px solid rgba(242, 245, 244, 0.55);
z-index: 2}
#start .start-arbeit.an {
border-color: var(--v11-cy);
background: var(--v11-cy);
animation: code-arbeit-puls 1.6s ease-in-out infinite}
#start.has-start-chat .home-feed {
display: flex;
flex-direction: column;
height: 100dvh;
max-height: 100dvh;
overflow: hidden}
#start.has-start-chat #startLog {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto}
#start.has-start-chat .prompt-glass {
flex: 0 0 auto;
margin-top: auto}
#start .prompt-glass .ghost-button.icon-button,
#code .codeleiste .ghost-button.icon-button {
background: transparent;
box-shadow: none;
border: 0}
#start .prompt-glass .ghost-button.icon-button:hover,
#code .codeleiste .ghost-button.icon-button:hover {
background: transparent;
color: #f2f5f4}
#start .prompt-glass .send-button,
#start .prompt-glass .send-button.ist-sprache,
#start .prompt-glass .send-button:not(.ist-sprache),
#code .codeleiste .send-button,
#code .codeleiste #codeSenden {
background: transparent;
box-shadow: none;
color: rgba(242, 245, 244, 0.74)}
#start .prompt-glass .send-button:hover,
#code .codeleiste .send-button:hover,
#code .codeleiste #codeSenden:hover {
background: transparent;
color: #f2f5f4}
#start .prompt-glass:has(#startMessage:not(:placeholder-shown)) .send-button,
#code .codefeld:has(#codeAufgabe:not(:placeholder-shown)) #codeSenden {
background: transparent;
color: #f2f5f4;
box-shadow: none}
#start .prompt-glass:has(#startMessage:not(:placeholder-shown)) .send-button:hover,
#code .codefeld:has(#codeAufgabe:not(:placeholder-shown)) #codeSenden:hover {
background: transparent;
color: #02fdfd}
#chatStopp.chat-stopp {
border-radius: 0 !important;
min-height: 0;
box-sizing: border-box;
padding: 0;
border: 0}
#chatStopp, .chat-stopp { display: none !important; }
#start .start-arbeit[role="button"],
#code .code-arbeit[role="button"] {
pointer-events: auto;
cursor: pointer}
#start .start-arbeit[role="button"]::before,
#code .code-arbeit[role="button"]::before {
content: "";
position: absolute;
inset: -17px;
border-radius: 0}
#start .start-arbeit.gestoppt,
#code .code-arbeit.gestoppt {
border-color: var(--v11-cy);
background: var(--v11-cy);
animation: none}
#start .start-arbeit.gestoppt::after,
#code .code-arbeit.gestoppt::after {
content: "";
position: absolute;
inset: 2px 1px 2px 3px;
background: #04211f;
clip-path: polygon(0% 0%, 100% 50%, 0% 100%)}
@media (max-width: 600px) {
#start .prompt-glass .ghost-button.icon-button,
#start .prompt-glass .send-button {
width: 44px;
height: 44px;
min-height: 44px}
.nav-start .nav-button,
.sidebar .nav-vier .nav-button {
min-height: 44px;
padding-top: 8px;
padding-bottom: 8px}
.spur-reiter button,
#fuehrungBlase button {
min-height: 44px}
#code #codeAufgabe {
min-height: 44px}
#code .repochip {
min-width: 44px}
}
#start .prompt-glass .send-button,
#start .prompt-glass .send-button.ist-sprache,
#start .prompt-glass .send-button:not(.ist-sprache),
#code .codeleiste #codeSenden,
#code #codeSenden,
.send-button {
background: transparent !important;
box-shadow: none !important;
border-color: transparent !important}
#start .prompt-glass .send-button.ist-stopp,
#code #codeSenden.ist-stopp,
.send-button.ist-stopp {
border-radius: 0 !important;
color: #02fdfd;
animation: stopp-quadrat-puls 1.6s ease-in-out infinite}
.send-button.ist-stopp:hover,
.send-button.ist-stopp:focus-visible { animation: none; }
.send-button.ist-stopp .stopp-quadrat { width: 22px; height: 22px; }
.send-button.ist-stopp .stopp-quadrat rect { fill: currentColor; stroke: none; }
#code #codeSenden.ist-stopp svg { width: 20px; height: 20px; fill: currentColor; stroke: none; }
#start .start-arbeit, #code .code-arbeit, #startArbeit, #codeArbeit { display: none !important; }
@keyframes stopp-quadrat-puls {
0%, 100% { opacity: 1; }
50% { opacity: 0.55; }
}
@media (prefers-reduced-motion: reduce) {
.send-button.ist-stopp { animation: none; }
}
#startLog .chat-denken { margin: 0; }
#startLog .chat-denken-titel { border-radius: 0 !important; }
#startLog .chat-denken[data-fertig="true"] .chat-denken-titel { opacity: 0.9; }
#startLog .chat-denken:not([data-fertig="true"]) .chat-denken-titel {
animation: chat-schritt-puls 1.4s ease-in-out infinite}
#startLog .chat-denken-text {
margin: 6px 0 4px 4px;
padding-left: 10px;
border-left: 1px solid rgba(255, 255, 255, 0.12);
color: rgba(242, 245, 244, 0.55);
font-size: 13px;
line-height: 1.55;
white-space: pre-wrap;
overflow-wrap: anywhere;
max-height: 320px;
overflow-y: auto}
@media (prefers-reduced-motion: reduce) {
#startLog .chat-denken-titel { animation: none; }
}
#startLog .chat-schritt-gruppe { margin: 0; }
#startLog .chat-schritt-gruppe-titel { border-radius: 0 !important; }
#startLog .chat-schritt-gruppe[data-zustand="laeuft"] .chat-schritt-gruppe-titel {
animation: chat-schritt-puls 1.4s ease-in-out infinite}
#startLog .chat-schritt-gruppe[data-zustand="fertig"] .chat-schritt-gruppe-titel { opacity: 0.9; }
#startLog .chat-schritt-gruppe[open] .chat-schritt {
margin-left: 4px;
padding-left: 10px;
border-left: 1px solid rgba(255, 255, 255, 0.12)}
#startLog .chat-schritte-falte[open] > .chat-schritt-gruppe {
margin-left: 4px;
padding-left: 10px;
border-left: 1px solid rgba(255, 255, 255, 0.12)}
@media (prefers-reduced-motion: reduce) {
#startLog .chat-schritt-gruppe-titel { animation: none; }
}
#startLog .chat-frage {
border: 1px solid rgba(242, 245, 244, 0.14);
border-radius: 0 !important;
padding: 14px 16px 12px;
margin-top: 8px}
#startLog .chat-frage-titel {
margin: 0 0 10px;
font-weight: 600;
font-size: 16px;
line-height: 1.45}
#startLog .chat-frage-optionen { display: flex; flex-wrap: wrap; gap: 8px; }
#startLog .chat-frage-option {
min-height: 44px;
padding: 8px 14px;
border-radius: 0 !important;
border: 1px solid rgba(242, 245, 244, 0.22);
background: rgba(242, 245, 244, 0.06);
color: #f2f5f4;
font-size: 15px;
cursor: pointer}
#startLog .chat-frage-option:first-child {
background: #f2f5f4;
color: #0a0f16;
border-color: #f2f5f4}
#startLog .chat-frage-option:hover:not([disabled]) { border-color: var(--v11-cy); }
#startLog .chat-frage-ueberspringen {
background: transparent;
color: rgba(242, 245, 244, 0.6);
border-color: transparent}
#startLog .chat-frage-option[disabled] { opacity: 0.45; cursor: default; }
#startLog .chat-frage-option.gewaehlt {
opacity: 1;
border-color: var(--v11-cy);
box-shadow: inset 0 0 0 1px var(--v11-cy)}
#startLog .chat-frage-stand {
margin: 8px 0 0;
font-size: 13px;
color: rgba(242, 245, 244, 0.55)}
#startLog .chat-frage-stand:empty { display: none; }
#start .prompt-glass { position: relative; }
#start .erwaehnung-menue {
left: 16px;
bottom: calc(100% + 8px);
border-radius: 0 !important;
max-height: min(320px, calc(100vh - 360px));
overflow-y: auto}
#start .erwaehnung-menue .erwaehnung-kopf {
padding: 6px 10px 8px;
font-size: 12px;
letter-spacing: 0.04em;
text-transform: uppercase;
color: rgba(242, 245, 244, 0.5)}
#start .erwaehnung-menue [role="menuitem"] {
display: block;
width: 100%;
text-align: left;
min-height: 44px;
padding: 8px 10px;
border-radius: 0 !important;
background: transparent;
color: #f2f5f4;
font-size: 15px}
#start .erwaehnung-menue [role="menuitem"]:hover,
#start .erwaehnung-menue [role="menuitem"]:focus-visible { background: rgba(242, 245, 244, 0.08); }
#start .erwaehnung-menue [role="menuitem"] b { font-weight: 600; color: var(--v11-cy); }
.chat-erwaehnung[hidden] { display: none !important; }

/* ---- design-v12-spur.css ---- */
.sidebar {
min-height: 0;
height: auto}
body.spur-start-aktiv .nav-start {
display: grid;
grid-template-rows: auto minmax(0, 1fr);
grid-template-columns: minmax(0, 1fr);
gap: 0;
min-height: 0;
overflow: hidden}
.nav-vier {
display: grid;
grid-template-rows: auto minmax(0, 1fr);
grid-template-columns: minmax(0, 1fr);
gap: 0;
min-height: 0;
overflow: hidden}
.nav-start .spur-reiter,
.nav-vier .spur-reiter {
margin: 2px 4px 8px}
.nav-start .spur-liste,
.nav-vier .spur-liste {
display: flex;
flex-direction: column;
gap: 1px;
min-height: 0;
overflow-y: auto;
overscroll-behavior: contain;
padding-right: 2px;
scrollbar-width: thin}
.spur-reiter button {
padding: 9px 0;
font-size: 16px}
.spur-reiter button svg { width: 18px; height: 18px; }
.nav-start .nav-button,
.sidebar .nav-vier .nav-button {
min-height: 38px;
padding-top: 5px;
padding-bottom: 5px;
font-size: 16.5px}
.nav-start .spur-chat { font-size: 15.5px; }
.nav-start .spur-alle { font-size: 15.5px; }
.nav-start .side-block { font-size: 12.5px; }
.nav-kuerzel { font-size: 12px; }
.profile-dock-name { font-size: 15px; }
.profile-dock-plan { font-size: 13.5px; }
@media (max-width: 767px) {
.sidebar {
padding-top: calc(32px + env(safe-area-inset-top, 0px));
padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
z-index: 74}
}
@media (pointer: coarse), (max-width: 600px) {
.nav-start .nav-button,
.sidebar .nav-vier .nav-button {
min-height: 44px;
padding-top: 8px;
padding-bottom: 8px}
}

/* ---- design-v12-chat.css ---- */
#startLog .entry {
font-size: 19px;
line-height: 1.55}
#startLog .entry.user { padding: 10px 40px 10px 14px; }
#startLog .entry.assistant { padding: 6px 0; }
#start .prompt-glass textarea {
font-size: 19px;
line-height: 1.4}
.msg-act { font-size: 14.5px; }
#start .home-hero h2 { font-size: clamp(28px, 4vw, 38px); font-weight: 700; letter-spacing: -0.03em; }
#start .prompt-glass {
flex-wrap: wrap;
row-gap: 4px;
padding: 8px 10px 8px 12px}
#start .prompt-glass textarea {
order: 0;
flex: 1 1 100%;
width: 100%}
#start .prompt-glass .prompt-actions .prompt-spacer {
display: block;
flex: 1 1 auto;
order: 2}
#start .prompt-glass {
container-type: inline-size;
container-name: schreibfeld}
@container schreibfeld (max-width: 400px) {
#start .prompt-actions .fpille-nachdenken .chip-label { display: none; }
#start .prompt-glass .fpille-nachdenken {
width: 38px;
min-width: 38px;
padding: 0;
justify-content: center}
}
@container schreibfeld (max-width: 300px) {
#start .prompt-actions .model-picker button {
min-width: 0;
max-width: 72px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap}
}
#start .start-chips.start-chipreihe { gap: 8px; }
#start .start-chips.start-chipreihe button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
width: auto;
height: auto;
min-height: 44px;
padding: 0 14px;
font-size: 15.5px;
font-weight: 600;
white-space: nowrap}
#start .start-chipreihe .chip-label { display: inline; }
#start:not(.has-start-chat) .start-chips.start-chipreihe {
justify-content: center;
flex-wrap: wrap}
#start.has-start-chat .start-chips.start-chipreihe {
display: flex;
flex-wrap: nowrap;
justify-content: flex-start;
gap: 8px;
width: 100%;
max-width: 100%;
padding: 6px 12px 8px;
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: none}
#start.has-start-chat .start-chips.start-chipreihe::-webkit-scrollbar { display: none; }
#start.has-start-chat .start-chips.start-chipreihe button {
flex: 0 0 auto;
min-height: 38px;
font-size: 14.5px}
@media (max-width: 600px) {
#start:not(.has-start-chat) .home-feed {
grid-template-rows: minmax(0, 1fr) auto auto}
#start:not(.has-start-chat) .home-hero { order: 1; }
#start:not(.has-start-chat) .start-chips.start-chipreihe {
order: 2;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 8px;
width: 100%;
max-width: 100%;
padding: 4px 12px 10px;
overflow: visible;
-webkit-mask-image: none;
mask-image: none}
#start:not(.has-start-chat) .start-chips.start-chipreihe button {
flex-direction: column;
min-width: 0;
min-height: 72px;
padding: 8px 4px;
font-size: 13.5px;
white-space: normal;
line-height: 1.15;
hyphens: auto;
-webkit-hyphens: auto;
overflow-wrap: anywhere}
#start:not(.has-start-chat) .prompt-glass { order: 3; }
#start.has-start-chat .home-feed.home-feed {
grid-template-rows: minmax(0, 1fr) auto auto}
#start.has-start-chat .start-chips.start-chipreihe { order: 2; }
#start.has-start-chat .prompt-glass { order: 3; }
#start.has-start-chat .start-chips.start-chipreihe {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 6px;
height: auto;
max-height: none;
padding: 4px 10px 6px;
overflow: visible;
-webkit-mask-image: none;
mask-image: none}
#start.has-start-chat .start-chips.start-chipreihe button {
min-width: 0;
min-height: 36px;
padding: 0 6px;
font-size: 13px;
white-space: normal;
line-height: 1.1;
hyphens: auto;
-webkit-hyphens: auto;
overflow-wrap: anywhere}
#startLog .entry { font-size: 18px; }
#start .prompt-glass textarea { font-size: 18px; }
}
@media (max-width: 430px) {
#start:not(.has-start-chat) .start-chips.start-chipreihe,
#start.has-start-chat .start-chips.start-chipreihe {
grid-template-columns: repeat(2, minmax(0, 1fr))}
#start:not(.has-start-chat) .start-chips.start-chipreihe button {
flex-direction: row;
justify-content: center;
min-height: 48px;
padding: 0 10px;
font-size: 14.5px;
line-height: 1.2;
white-space: nowrap;
hyphens: manual;
-webkit-hyphens: manual;
overflow-wrap: normal}
#start.has-start-chat .start-chips.start-chipreihe {
gap: 6px;
padding: 4px 10px 6px}
#start.has-start-chat .start-chips.start-chipreihe button {
min-height: 44px;
padding: 0 8px;
white-space: nowrap;
hyphens: manual;
-webkit-hyphens: manual;
overflow-wrap: normal}
}
@media (min-width: 601px) {
#start.has-start-chat #startLog {
padding-top: 52px;
scroll-padding-top: 52px}
}
@media (max-width: 360px) {
#start:not(.has-start-chat) .start-chips.start-chipreihe button {
padding: 0 6px;
font-size: 13.5px;
gap: 4px}
}
@media (pointer: coarse) {
#start .prompt-glass textarea { min-height: 44px !important; }
.legal-links a { min-height: 44px; }
@container schreibfeld (max-width: 400px) {
#start .prompt-glass .fpille-nachdenken { width: 44px; min-width: 44px; }
}
}

/* ---- design-v12-code.css ---- */
#code .codefeld textarea {
font-size: 19px;
line-height: 1.4}
#code .codegruss { font-size: clamp(24px, 3vw, 30px); font-weight: 700; letter-spacing: -0.03em; }
#code .code-wchips {
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: flex-start;
max-width: none;
padding: 6px 0 0}
#code .code-wchips button {
min-height: 38px;
padding: 0 14px;
font-size: 14.5px;
font-weight: 600}
@media (max-width: 600px) {
#code .codefeld textarea { font-size: 18px; }
#code .code-wchips {
flex-wrap: nowrap;
overflow-x: auto;
scrollbar-width: none}
#code .code-wchips::-webkit-scrollbar { display: none; }
#code .code-wchips button { flex: 0 0 auto; }
}
@media (pointer: coarse), (max-width: 600px) {
#code .code-wchips button {
min-height: 44px;
padding-top: 10px;
padding-bottom: 10px}
}
@media (max-width: 340px) {
html body #code .codeleiste.codeleiste { gap: 2px; }
html body #code .codeleiste .code-rechts.code-rechts { flex-shrink: 1; min-width: 0; gap: 4px; }
#code .codeleiste #codeModellAnzeige { min-width: 44px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* ---- design-v12-vollbild.css ---- */
html:root { background: #101113; }
html:root body { background: #101113; }
.home-feed { background: transparent; }
@media (max-width: 600px) {
#start:not(.has-start-chat) .home-feed,
#start.has-start-chat .home-feed { padding-bottom: 0; }
body { padding-bottom: 0; }
body main.shell.shell { padding-bottom: 0; }
.workspace, .view, .home-feed { min-height: calc(100dvh - var(--sa-top)); }
#start.has-start-chat .home-feed.home-feed,
#code.view.is-active.is-active {
min-height: 0;
height: calc(100dvh - var(--sa-top));
max-height: calc(100dvh - var(--sa-top))}
html body #start .prompt-glass.prompt-glass.prompt-glass {
width: 100%;
max-width: none;
margin: 0;
padding: 4px 10px 0 12px;
row-gap: 2px;
border-bottom-left-radius: 0 !important;
border-bottom-right-radius: 0 !important}
html body #start .prompt-glass.prompt-glass.prompt-glass textarea {
min-height: 36px;
height: 36px;
padding: 6px 4px}
html body #code .codeunten.codeunten.codeunten {
width: 100%;
max-width: none;
margin: 0;
padding-bottom: 0;
border-bottom-left-radius: 0 !important;
border-bottom-right-radius: 0 !important}
}
html.vollbild-fehl,
html.vollbild-fehl body { overflow: hidden; }
@media (max-width: 600px) {
html.vollbild-fehl .workspace,
html.vollbild-fehl .view,
html.vollbild-fehl .home-feed {
min-height: calc(100dvh - var(--sa-top) + var(--vollbild-fehl, 0px))}
html.vollbild-fehl #start.has-start-chat .home-feed.home-feed,
html.vollbild-fehl #code.view.is-active.is-active {
min-height: 0;
height: calc(100dvh - var(--sa-top) + var(--vollbild-fehl, 0px));
max-height: calc(100dvh - var(--sa-top) + var(--vollbild-fehl, 0px))}
}
@media (max-width: 1000px) and (orientation: landscape) and (max-height: 520px) {
#start.has-start-chat #startLog {
padding-top: calc(env(safe-area-inset-top, 0px) + 44px);
scroll-padding-top: calc(env(safe-area-inset-top, 0px) + 44px)}
#start .home-hero { padding-top: 12px; padding-bottom: 6px; }
#start .home-hero h2 { font-size: 24px; }
#start:not(.has-start-chat) .start-chips.start-chipreihe {
display: flex;
flex-wrap: wrap;
justify-content: center;
grid-template-columns: none}
#start:not(.has-start-chat) .start-chips.start-chipreihe button {
flex-direction: row;
min-height: 40px;
padding: 0 12px}
#start .prompt-glass textarea { min-height: 36px; height: 36px; }
#start .erste-schritte { display: none; }
#start.has-start-chat .start-chips.start-chipreihe { flex-shrink: 0; gap: 4px; padding-top: 2px; padding-bottom: 2px; }
#start.has-start-chat .start-chips.start-chipreihe button { padding: 0 6px; }
}

/* ---- design-v13-kompakt.css ---- */
html body .glass-icon.glass-icon.glass-icon {
top: max(0px, calc(env(safe-area-inset-top, 0px) - 10px))}
html body #start .start-chips.start-chipreihe.start-chipreihe {
display: none !important}
@media (max-width: 600px) {
html body #start:not(.has-start-chat) .home-feed.home-feed > .home-hero,
html body #start:not(.has-start-chat) .home-feed.home-feed > .prompt-glass.prompt-glass {
margin-top: auto}
}
html body #start.view .prompt-glass.prompt-glass.prompt-glass {
flex-wrap: wrap;
align-items: flex-end;
column-gap: 4px;
row-gap: 4px}
html body #start.view .prompt-glass.prompt-glass.prompt-glass .prompt-actions {
display: contents}
html body #start.view .prompt-glass.prompt-glass.prompt-glass .paste-attach-row {
order: 0;
flex: 1 0 100%}
html body #start.view .prompt-glass.prompt-glass.prompt-glass .plus-picker { order: 1; flex: 0 0 auto; }
html body #start.view .prompt-glass.prompt-glass.prompt-glass textarea {
order: 2;
flex: 1 1 0%;
width: auto;
min-width: 0}
html body #start.view .prompt-glass.prompt-glass.prompt-glass .model-picker { order: 3; flex: 0 0 auto; }
html body #start.view .prompt-glass.prompt-glass.prompt-glass [data-start-tool="voice"] { order: 4; flex: 0 0 auto; }
html body #start.view .prompt-glass.prompt-glass.prompt-glass #modelPickerButton {
width: auto;
min-width: 44px;
max-width: 25vw;
padding: 0 8px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap}
html body #start.view .prompt-glass.prompt-glass.prompt-glass .send-button { order: 5; flex: 0 0 auto; }
html body #start.view .prompt-glass.prompt-glass.prompt-glass .prompt-spacer { display: none; }
@media (max-width: 600px), (max-height: 520px) {
html body #start .prompt-glass .plus-picker .plus-menu.plus-menu {
top: auto !important;
bottom: calc(100% + 8px) !important;
max-height: min(70vh, calc(100dvh - 160px))}
}
@media (min-width: 601px) and (min-height: 521px) {
html body #start:has(#startLog[hidden]) .prompt-glass .plus-picker .plus-menu.plus-menu {
max-height: calc(50dvh - 80px)}
}
html body #start .prompt-glass .plus-picker .plus-menu.plus-menu {
overflow-y: auto;
background: rgba(13, 18, 25, 0.97)}
html body #start .prompt-glass .plus-menu.plus-menu [data-start-tool] {
order: 0}
#start .prompt-glass:has([data-start-tool="speaker"].is-speaking) #composerPlusButton {
color: #02fdfd;
box-shadow: inset 0 0 0 1px rgba(2, 253, 253, 0.55)}
html body #code .codefeld.codefeld.codefeld {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
column-gap: 4px}
html body #code .codefeld.codefeld.codefeld > .code-anhaenge { order: 0; flex: 1 0 100%; }
html body #code .codefeld.codefeld.codefeld .codeleiste.codeleiste { display: contents; }
html body #code .codefeld.codefeld.codefeld #codeAnhang { order: 1; flex: 0 0 auto; }
html body #code .codefeld.codefeld.codefeld #codeAufgabe {
order: 2;
flex: 1 1 0%;
width: auto;
min-width: 0}
html body #code .codefeld.codefeld.codefeld .code-rechts.code-rechts { display: contents; }
html body #code .codefeld.codefeld.codefeld #codeModellAnzeige { order: 3; flex: 0 0 auto; }
html body #code .codefeld.codefeld.codefeld #codeDiktat { order: 4; flex: 0 0 auto; }
html body #code .codefeld.codefeld.codefeld #codeSenden { order: 5; flex: 0 0 auto; }
html body #code .codefeld.codefeld.codefeld :is(#codeModusChip, #codeStufeChip, #codeProjektChip, #codeTiefeAnzeige) {
display: none !important}
html body #code .code-wchips.code-wchips.code-wchips {
display: none !important}
@media (max-width: 600px) {
html body #code .codeflaeche.codeflaeche.codeflaeche {
height: 100%;
max-height: none}
html body #start.view .prompt-glass.prompt-glass.prompt-glass textarea,
html body #code .codefeld.codefeld.codefeld #codeAufgabe {
padding-top: 9px;
padding-bottom: 9px}
}
#startMessage::placeholder,
#codeAufgabe::placeholder {
color: rgba(151, 158, 171, 0.9);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis}
@media (max-width: 600px) {
html body #start:not(.has-start-chat) .home-feed.home-feed > .prompt-glass.prompt-glass {
width: calc(100% + 32px);
max-width: none;
margin-left: -16px;
margin-right: -16px}
html body #start.view .prompt-glass.prompt-glass.prompt-glass {
padding: 4px 4px 0;
column-gap: 2px}
html body #start.view .prompt-glass.prompt-glass.prompt-glass #modelPickerButton {
min-width: 44px;
max-width: 22vw;
padding: 0 6px;
font-size: 15px;
color: rgba(242, 245, 244, 0.86);
background: transparent;
box-shadow: none}
html body #start.view .prompt-glass.prompt-glass.prompt-glass #startMessage {
max-height: min(40dvh, 320px);
padding-left: 6px;
padding-right: 6px;
font-size: 18px;
line-height: 1.4;
scroll-padding-bottom: 8px}
html body #start.view .prompt-glass.prompt-glass.prompt-glass :where(#composerPlusButton, [data-start-tool="voice"], #startSend) {
color: rgba(242, 245, 244, 0.9);
background: transparent;
box-shadow: none}
html body #start.view .prompt-glass.prompt-glass.prompt-glass :is(#composerPlusButton, [data-start-tool="voice"], #startSend) svg {
width: 24px;
height: 24px}
html body #start.view .prompt-glass.prompt-glass.prompt-glass #startSend:not(.ist-sprache) {
color: #ffffff}
html body #start.has-start-chat #startLog.start-log {
padding-top: 48px;
scroll-padding-top: 48px;
padding-left: 12px;
padding-right: 12px}
html body #startLog .entry.user {
padding: 10px 14px}
html body #startLog .msg-actions.msg-actions .msg-act svg {
width: 20px;
height: 20px}
html body #startLog .msg-actions.msg-actions .msg-act-wort {
font-size: 12px;
opacity: 1}
html body #startLog .msg-actions.msg-actions .msg-act {
color: rgba(246, 243, 238, 0.86)}
html body #startLog .msg-actions.msg-actions .msg-act.hat-wort {
width: auto;
min-width: 44px;
padding-left: 4px;
padding-right: 4px}
html body #startLog .msg-actions.msg-actions:has(.msg-act.hat-wort) {
gap: 4px}
html body #startLog .msg-actions.msg-actions .msg-zeit {
font-size: 13px;
color: rgba(246, 243, 238, 0.62)}
}
@media (max-width: 360px) {
html body #startLog .msg-actions.msg-actions .msg-zeit { display: none; }
}
html body #start.view .prompt-glass.prompt-glass.prompt-glass [data-start-tool="voice"]:is(.is-recording, [aria-pressed="true"]),
html body:has(#voiceModeOverlay:not([hidden])) #start.view .prompt-glass.prompt-glass.prompt-glass #startSend.ist-sprache {
color: #02fdfd;
background: rgba(2, 253, 253, 0.1);
box-shadow: inset 0 0 0 1px rgba(2, 253, 253, 0.55);
animation: none}
@media (max-width: 600px) {
html body #start.has-start-chat #startLog.start-log {
padding-top: calc(env(safe-area-inset-top, 0px) + 6px);
scroll-padding-top: calc(env(safe-area-inset-top, 0px) + 6px);
padding-bottom: 6px}
html body #startLog.start-log > .entry.user:first-child {
margin-right: 34px}
html body #startLog.start-log > .entry.assistant:first-child {
margin-left: 34px;
margin-right: 34px}
html body #startLog.start-log > .entry.user:first-child + .msg-actions {
margin-right: 34px}
html body #startLog.start-log > .entry.assistant:first-child + .msg-actions {
margin-left: 34px}
html body:not(:has(#code.is-active)) .mobil-kopfglas.mobil-kopfglas {
display: none}
html body .glass-icon.glass-icon.glass-icon {
background: rgba(10, 13, 16, 0.66);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
border-radius: 8px}
html body #start.view .prompt-glass.prompt-glass.prompt-glass.feld-breit:has(#startMessage:not(:placeholder-shown)) #startMessage {
order: 0;
flex: 1 0 100%;
width: 100%;
padding-left: 10px;
padding-right: 10px;
max-height: min(38dvh, 300px)}
html body #start.view .prompt-glass.prompt-glass.prompt-glass.feld-breit:has(#startMessage:not(:placeholder-shown)) .model-picker {
margin-left: auto}
html body .msg-menu.msg-menu {
width: min(320px, calc(100vw - 16px));
max-height: calc(100dvh - 16px);
overflow-y: auto;
padding: 6px;
border-radius: 12px}
html body .msg-menu .msg-menu-item {
min-height: 44px;
font-size: 16px;
gap: 12px}
html body .msg-menu .msg-menu-icon svg {
width: 20px;
height: 20px}
}
html body .msg-menu.msg-menu {
max-height: calc(100dvh - 16px);
overflow-y: auto;
overscroll-behavior: contain}
.msg-menu .msg-menu-kacheln {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 4px;
padding: 2px 0 4px}
.msg-menu .msg-menu-item.is-kachel {
flex-direction: column;
justify-content: center;
gap: 5px;
min-height: 62px;
padding: 8px 2px;
background: rgba(255, 255, 255, 0.05);
font-size: 12.5px;
line-height: 1.15;
text-align: center;
color: rgba(246, 243, 238, 0.92)}
.msg-menu .msg-menu-item.is-kachel .msg-menu-icon {
color: rgba(246, 243, 238, 0.9)}
.msg-menu .msg-menu-item.is-kachel .msg-menu-icon svg {
width: 22px;
height: 22px}
@media (max-width: 600px) {
html body .msg-menu .msg-menu-item.is-kachel {
min-height: 64px;
font-size: 13px}
}
#startLog > .entry.ist-angepinnt {
box-shadow: inset 3px 0 0 #02fdfd}
#startLog > .entry.assistant.ist-angepinnt {
padding-left: 12px}
.text-auswahl {
position: fixed;
inset: 0;
z-index: 90;
display: flex;
align-items: flex-end;
justify-content: center;
background: rgba(0, 0, 0, 0.55)}
.text-auswahl-kasten {
display: flex;
flex-direction: column;
gap: 10px;
width: min(720px, 100%);
max-height: calc(100dvh - env(safe-area-inset-top, 0px) - 24px);
padding: 12px 14px calc(env(safe-area-inset-bottom, 0px) + 12px);
border-radius: 12px 12px 0 0;
background: #15181c;
box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.5)}
.text-auswahl-kopf {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 17px;
color: #f2f5f4}
.text-auswahl-zu,
.text-auswahl-kopieren {
min-height: 44px;
padding: 0 14px;
border: 0;
border-radius: 8px;
font: inherit;
font-size: 16px;
cursor: pointer}
.text-auswahl-zu {
background: rgba(255, 255, 255, 0.08);
color: #f2f5f4}
.text-auswahl-kopieren {
background: #ffffff;
color: #0a0f16;
font-weight: 700}
.text-auswahl-inhalt {
overflow-y: auto;
padding: 12px;
border-radius: 8px;
background: rgba(255, 255, 255, 0.04);
color: #f2f5f4;
font-size: 18px;
line-height: 1.55;
white-space: pre-wrap;
-webkit-user-select: text;
user-select: text}
.text-auswahl-hinweis {
margin: 0;
font-size: 14px;
color: rgba(242, 245, 244, 0.66)}

/* ---- design-v14-vollbild-chat.css ---- */
@media (max-width: 600px) {
html body:has(#start.view.is-active) main.shell.shell {
padding-top: 0;
padding-bottom: 0}
html body:has(#start.view.is-active) .workspace,
html body #start.view.is-active,
html body #start .home-feed.home-feed {
min-height: 100dvh}
html body #start.has-start-chat .home-feed.home-feed.home-feed {
position: relative;
min-height: 0;
height: 100dvh;
max-height: 100dvh;
grid-template-rows: minmax(0, 1fr)}
html.vollbild-fehl body #start.has-start-chat .home-feed.home-feed.home-feed {
height: calc(100dvh + var(--vollbild-fehl, 0px));
max-height: calc(100dvh + var(--vollbild-fehl, 0px))}
html body #start.has-start-chat #startLog.start-log.start-log {
padding-top: calc(var(--sa-top) + 10px);
scroll-padding-top: calc(var(--sa-top) + 10px);
padding-bottom: calc(var(--feld-hoehe, 64px) + var(--sa-bottom) + 20px);
scroll-padding-bottom: calc(var(--feld-hoehe, 64px) + var(--sa-bottom) + 20px)}
html body #startLog.start-log .entry {
font-size: 19px;
line-height: 1.5}
html body #start.has-start-chat .prompt-glass.prompt-glass.prompt-glass {
position: absolute;
left: 8px;
right: 8px;
bottom: calc(var(--sa-bottom) + 6px);
z-index: 70;
width: auto;
max-width: none;
margin: 0;
padding: 4px 4px 4px;
border-radius: 14px !important;
border: 1px solid rgba(255, 255, 255, 0.12);
background: rgba(18, 22, 27, 0.8);
-webkit-backdrop-filter: blur(22px) saturate(140%);
backdrop-filter: blur(22px) saturate(140%);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.1),
0 10px 32px rgba(0, 0, 0, 0.45)}
html body #start:not(.has-start-chat) .home-feed.home-feed > .prompt-glass.prompt-glass {
width: calc(100% + 16px);
max-width: none;
margin-left: -8px;
margin-right: -8px;
margin-bottom: calc(var(--sa-bottom) + 6px);
padding: 4px 4px 4px;
border-radius: 14px !important;
border: 1px solid rgba(255, 255, 255, 0.12);
background: rgba(18, 22, 27, 0.8)}
html.tastatur-offen body #start.has-start-chat .prompt-glass.prompt-glass.prompt-glass {
bottom: 6px}
html body .glass-icon.glass-icon.glass-icon.glass-icon {
top: max(0px, calc(var(--sa-top) - 24px))}
}
@media (max-width: 600px) and (display-mode: standalone) {
html body:not(:has(#code.is-active)) .mobil-kopfglas.mobil-kopfglas.mobil-kopfglas {
display: block;
height: calc(var(--sa-top) + 10px);
z-index: 44;
background: linear-gradient(180deg, rgba(16, 17, 19, 0.78) 0%, rgba(16, 17, 19, 0.6) 55%, rgba(16, 17, 19, 0) 100%);
-webkit-backdrop-filter: blur(14px);
backdrop-filter: blur(14px);
-webkit-mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%)}
}

/* ---- design-v15-transparent-chat.css ---- */
@media (max-width: 600px) {
html body #start.has-start-chat .prompt-glass.prompt-glass.prompt-glass,
html body #start:not(.has-start-chat) .home-feed.home-feed > .prompt-glass.prompt-glass {
background: none !important;
border: 0 !important;
box-shadow: none !important;
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important}
html body #start.has-start-chat .prompt-glass.prompt-glass.prompt-glass {
bottom: var(--sa-bottom, 0px);
padding-bottom: 4px}
html body #start:not(.has-start-chat) .home-feed.home-feed > .prompt-glass.prompt-glass {
margin-bottom: var(--sa-bottom, 0px);
padding-bottom: 4px}
html body #start .prompt-glass .prompt-input,
html body #start .prompt-glass textarea,
html body #start .prompt-glass .prompt-actions {
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.75)}
html body #start .prompt-glass .prompt-actions svg,
html body #start .prompt-glass .ghost-button.icon-button svg,
html body #start .prompt-glass .send-button svg {
filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.8))}
html body #start .prompt-glass .prompt-actions .ghost-button.icon-button {
background: none !important;
border-color: transparent !important;
box-shadow: none !important}
html body .mobil-kopfglas.mobil-kopfglas.mobil-kopfglas {
display: none !important}
html body .glass-icon.glass-icon.glass-icon.glass-icon {
background: none !important;
border-color: transparent !important;
box-shadow: none !important;
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important}
html body .glass-icon.glass-icon svg {
filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.8))}
html body:has(#start.view.is-active) main.shell.shell,
html body:has(#start.view.is-active) .workspace,
html body #start.view.is-active,
html body #start .home-feed.home-feed {
background: none}
html body #start.has-start-chat #startLog.start-log.start-log {
background: none}
}

/* ---- design-v16-kante.css ---- */
@media (max-width: 600px) {
html body #start.has-start-chat .prompt-glass.prompt-glass.prompt-glass {
bottom: 0;
padding-bottom: 0}
html body #start:not(.has-start-chat) .home-feed.home-feed > .prompt-glass.prompt-glass {
margin-bottom: 0;
padding-bottom: 0}
html.tastatur-offen body #start.has-start-chat .prompt-glass.prompt-glass.prompt-glass {
bottom: 0}
html body #start.has-start-chat #startLog.start-log.start-log {
padding-bottom: calc(var(--feld-hoehe, 64px) + 12px);
scroll-padding-bottom: calc(var(--feld-hoehe, 64px) + 12px)}
}
@media (max-width: 600px) {
html body #start .prompt-glass.prompt-glass .prompt-actions .ghost-button.icon-button,
html body #start .prompt-glass.prompt-glass .prompt-actions .ghost-button.text-chip,
html body #start .prompt-glass.prompt-glass .prompt-actions .send-button,
html body #start .prompt-glass.prompt-glass .prompt-actions .model-picker > button {
align-items: end;
align-content: end;
padding-bottom: 0}
html body #start .prompt-glass.prompt-glass .prompt-actions .ghost-button.icon-button svg,
html body #start .prompt-glass.prompt-glass .prompt-actions .send-button svg {
display: block;
align-self: end}
}

/* ---- design-v17-symbole-mitte.css ---- */
@media (max-width: 600px) {
html body #start .prompt-glass.prompt-glass.prompt-glass .prompt-actions .ghost-button.icon-button,
html body #start .prompt-glass.prompt-glass.prompt-glass .prompt-actions .ghost-button.text-chip,
html body #start .prompt-glass.prompt-glass.prompt-glass .prompt-actions .send-button,
html body #start .prompt-glass.prompt-glass.prompt-glass .prompt-actions .model-picker > button {
align-items: center;
align-content: center}
html body #start .prompt-glass.prompt-glass.prompt-glass .prompt-actions .ghost-button.icon-button svg,
html body #start .prompt-glass.prompt-glass.prompt-glass .prompt-actions .send-button svg {
align-self: center}
}

/* ---- design-v18-leiste-hoeher.css ---- */
@media (max-width: 600px) {
html {
--leiste-abstand: 5px}
html body #start.has-start-chat .prompt-glass.prompt-glass.prompt-glass.prompt-glass {
bottom: var(--leiste-abstand)}
html body #start:not(.has-start-chat) .home-feed.home-feed > .prompt-glass.prompt-glass.prompt-glass {
margin-bottom: var(--leiste-abstand)}
html.tastatur-offen body #start.has-start-chat .prompt-glass.prompt-glass.prompt-glass.prompt-glass {
bottom: var(--leiste-abstand)}
html body #start.has-start-chat #startLog.start-log.start-log.start-log {
padding-bottom: calc(var(--feld-hoehe, 64px) + 12px + var(--leiste-abstand));
scroll-padding-bottom: calc(var(--feld-hoehe, 64px) + 12px + var(--leiste-abstand))}
}

/* ---- mobil-tastatur.css ---- */
html.mobil-chat-viewport,
html.mobil-chat-viewport body {
overflow: hidden !important;
overscroll-behavior: none}
html.mobil-chat-viewport body :is(#appMenuButton, #browserButton).glass-icon {
top: calc(var(--chat-sichtbar-oben, 0px) + max(0px, calc(var(--sa-top, 0px) - 24px))) !important}
html.mobil-chat-viewport body main.shell.shell {
position: fixed !important;
top: var(--chat-sichtbar-oben, 0px) !important;
bottom: auto !important;
left: 0 !important;
right: 0 !important;
margin-left: 0 !important;
width: 100%;
height: var(--chat-sichtbar-hoehe, 100dvh) !important;
min-height: 0 !important;
max-height: var(--chat-sichtbar-hoehe, 100dvh) !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
overflow: hidden !important}
html.mobil-chat-viewport body .workspace,
html.mobil-chat-viewport body #start.view.is-active,
html.mobil-chat-viewport body #start .home-feed.home-feed {
box-sizing: border-box;
height: 100% !important;
min-height: 0 !important;
max-height: 100% !important;
overflow: hidden !important}
html.mobil-chat-viewport body #start:not(.has-start-chat) .home-feed.home-feed {
padding-top: calc(var(--sa-top, 0px) + 44px)}
html.mobil-chat-viewport body #start .home-hero {
flex-shrink: 0}
html.mobil-chat-viewport body #start .prompt-glass.prompt-glass {
flex-shrink: 0}
html.mobil-chat-viewport body #start .erste-schritte {
min-height: 0;
overflow-y: auto;
flex-shrink: 1}
html.mobil-chat-viewport body #start #startMessage {
max-height: min(calc(var(--chat-sichtbar-hoehe) * .4), 320px) !important}
html.chat-wenig-hoehe body #start:not(.has-start-chat) .home-feed.home-feed {
padding-top: 0 !important;
padding-bottom: 0 !important}
html.chat-wenig-hoehe body #start .home-hero {
display: none !important}
html.mobil-chat-viewport .chat-platz-hinweis {
position: absolute;
inset: calc(var(--sa-top, 0px) + 56px) 16px auto;
z-index: 20;
padding: 12px;
border-radius: 16px;
color: var(--chat-glas-text);
background: var(--chat-glas-ton);
font-size: 16px;
text-align: center;
pointer-events: none}

/* ---- chat-glas.css ---- */
body {
--chat-glas-ton: var(--ruhe-flaeche, #12161b);
--chat-glas-text: var(--ruhe-text, #f1f3f5);
--chat-glas-linie: color-mix(in srgb, var(--chat-glas-text) 16%, transparent)}
html body #start.view .home-feed .prompt-glass.prompt-glass.prompt-glass.prompt-glass {
background: color-mix(in srgb, var(--chat-glas-ton) 88%, transparent) !important;
border: 1px solid var(--chat-glas-linie) !important;
border-radius: 24px !important;
box-shadow: inset 0 1px 0 color-mix(in srgb, var(--chat-glas-text) 9%, transparent), 0 8px 28px #00000012 !important;
-webkit-backdrop-filter: blur(24px) saturate(120%) !important;
backdrop-filter: blur(24px) saturate(120%) !important;
padding: 8px !important;
gap: 4px;
isolation: isolate;
transition: border-color 160ms ease, box-shadow 160ms ease}
html body #start.view .home-feed .prompt-glass.prompt-glass.prompt-glass.prompt-glass:focus-within {
border-color: color-mix(in srgb, var(--chat-glas-text) 32%, transparent) !important;
box-shadow: inset 0 1px 0 color-mix(in srgb, var(--chat-glas-text) 12%, transparent), 0 8px 32px #00000018 !important}
html body #start.view #startMessage {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
color: var(--chat-glas-text);
text-shadow: none !important}
html body #start.view #startMessage:focus {
outline: none !important}
html body #start .prompt-glass :is(#composerPlusButton, #modelPickerButton, [data-start-tool="voice"], #startSend) {
min-height: 44px;
min-width: 44px;
border-radius: 16px !important;
text-shadow: none !important;
transition: background-color 160ms ease, transform 160ms ease;
-webkit-tap-highlight-color: transparent}
html body #start .prompt-glass :is(#composerPlusButton, [data-start-tool="voice"], #startSend) svg {
width: 23px;
height: 23px;
filter: none !important}
html body #start .prompt-glass :is(button, textarea):focus-visible {
outline: 2px solid var(--v11-cy, #02fdfd);
outline-offset: 2px}
html body #start .prompt-glass :is(#composerPlusButton, #modelPickerButton, [data-start-tool="voice"], #startSend):active {
transform: scale(.94)}
@media (hover:hover) {
html body #start .prompt-glass :is(#composerPlusButton, #modelPickerButton, [data-start-tool="voice"], #startSend):hover {
background: color-mix(in srgb, var(--chat-glas-text) 8%, transparent) !important}
}
html body #start .prompt-glass :is(.plus-menu.plus-menu, .model-menu.model-menu, .code-modus-menue.code-modus-menue) {
background: color-mix(in srgb, var(--chat-glas-ton) 96%, transparent) !important;
border: 1px solid var(--chat-glas-linie) !important;
border-radius: 20px !important;
padding: 6px;
-webkit-backdrop-filter: blur(24px) !important;
backdrop-filter: blur(24px) !important;
box-shadow: 0 12px 36px #00000020 !important}
html body #start .prompt-glass :is(.plus-menu, .model-menu, .code-modus-menue) button {
min-height: 44px;
border-radius: 12px !important}
html body #startLog .entry.assistant {
line-height: 1.6}
html body #start #startLog .entry {
color: var(--chat-glas-text) !important}
html body #start #startLog .msg-actions :is(.msg-act, .msg-act-wort, .msg-zeit) {
color: var(--ruhe-neben, #b8bec6) !important}
html body #startLog .entry.user.user {
border-radius: 22px 22px 8px 22px !important;
border: 1px solid var(--chat-glas-linie);
background: color-mix(in srgb, var(--chat-glas-ton) 82%, transparent)}
@media (max-width:600px), (pointer:coarse) and (max-height:500px) and (max-width:1100px) {
html body #start:not(.has-start-chat) .home-feed.home-feed > .prompt-glass.prompt-glass.prompt-glass,
html body #start.has-start-chat .home-feed .prompt-glass.prompt-glass.prompt-glass.prompt-glass {
position: absolute;
left: 10px;
right: 10px;
width: auto;
max-width: none;
margin: 0 !important;
bottom: max(8px, var(--chat-home-inset, env(safe-area-inset-bottom, 0px))) !important}
html body #start:not(.has-start-chat) .home-feed.home-feed {
position: relative;
justify-content: center !important;
padding-bottom: calc(var(--feld-hoehe, 62px) + max(8px, var(--chat-home-inset, env(safe-area-inset-bottom, 0px))) + 16px)}
html body #start.has-start-chat #startLog.start-log.start-log.start-log {
padding-top: calc(var(--sa-top, 0px) + 56px) !important;
scroll-padding-top: calc(var(--sa-top, 0px) + 56px);
padding-bottom: calc(var(--feld-hoehe, 62px) + max(8px, var(--chat-home-inset, env(safe-area-inset-bottom, 0px))) + 20px);
scroll-padding-bottom: calc(var(--feld-hoehe, 62px) + 28px)}
html body #start:not(.has-start-chat) .home-feed.home-feed > .home-hero.home-hero {
margin-top: 0 !important;
margin-bottom: 0 !important}
html body #start .home-hero h2 {
font-weight: 650;
letter-spacing: -.035em}
html body #start .prompt-glass #startMessage {
font-size: max(18px, var(--ruhe-schrift, 18px))}
}
@media (max-height:420px) {
html body #start .home-hero.home-hero { padding-block: 0; }
html body #start .home-hero h2 { font-size: 24px !important; }
}
@media (prefers-reduced-motion:reduce) {
html body #start .prompt-glass,
html body #start .prompt-glass button {
transition: none !important;
animation: none !important}
}
html.mobil-chat-viewport #start .prompt-glass :is(.plus-menu,.model-menu,.code-modus-menue) {
max-height: max(44px, calc(var(--chat-sichtbar-hoehe) - var(--feld-hoehe, 62px) - 64px)) !important;
overflow-y: auto}
@media (prefers-reduced-transparency:reduce) {
html body #start.view .home-feed .prompt-glass.prompt-glass.prompt-glass.prompt-glass,
html body #start .prompt-glass :is(.plus-menu.plus-menu,.model-menu.model-menu,.code-modus-menue.code-modus-menue) {
background: var(--chat-glas-ton) !important;
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important}
}
@media (max-width:600px), (pointer:coarse) and (max-height:500px) and (max-width:1100px) {
html body #start.view .home-feed .prompt-glass.prompt-glass.prompt-glass.prompt-glass,
html body #start.view .home-feed .prompt-glass.prompt-glass.prompt-glass.prompt-glass:focus-within {
background: transparent !important;
border-color: transparent !important;
box-shadow: none !important;
-webkit-backdrop-filter: blur(12px) !important;
backdrop-filter: blur(12px) !important}
html body #start.view .prompt-glass :is(#startMessage, #composerPlusButton, #modelPickerButton, [data-start-tool="voice"], #startSend) {
background: transparent !important;
border-color: transparent !important;
box-shadow: none !important}
html body #start.view #startMessage:focus-visible {
outline: 2px solid var(--chat-glas-text) !important;
outline-offset: 2px}
html body:has(#start.view.is-active) .workspace::after {
background: transparent !important;
box-shadow: none !important;
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important}
html body:has(#start.view.is-active) :is(.glass-icon, .neuer-chat-start) {
background: transparent !important;
border-color: transparent !important;
box-shadow: none !important;
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
color: var(--chat-glas-text)}
html body:has(#start.view.is-active) .neuer-chat-start .button-icon {
color: inherit !important}
html body #start.has-start-chat #startLog.start-log.start-log.start-log {
-webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.16) 0, rgba(0,0,0,.16) calc(var(--sa-top, 0px) + 44px), #000 calc(var(--sa-top, 0px) + 56px));
mask-image: linear-gradient(to bottom, rgba(0,0,0,.16) 0, rgba(0,0,0,.16) calc(var(--sa-top, 0px) + 44px), #000 calc(var(--sa-top, 0px) + 56px))}
@media (prefers-reduced-transparency:reduce), (prefers-contrast:more) {
html body #start.view .home-feed .prompt-glass.prompt-glass.prompt-glass.prompt-glass,
html body #start.view .home-feed .prompt-glass.prompt-glass.prompt-glass.prompt-glass:focus-within,
html body:has(#start.view.is-active) :is(.glass-icon, .neuer-chat-start),
html body:has(#start.view.is-active) .workspace::after {
background: var(--ruhe-grund, #151719) !important;
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important}
html body #start.has-start-chat #startLog.start-log.start-log.start-log {
-webkit-mask-image: none;
mask-image: none}
}
}

/* ---- design-v19-glas-wischen.css ---- */
@media (max-width:600px), (pointer:coarse) and (max-height:500px) and (max-width:1100px) {
html.mobil-chat-viewport body:has(#start.view.is-active) :is(#appMenuButton, #browserButton, #mausButton, #neuerChatStart):is(.glass-icon, .neuer-chat-start) {
top: calc(var(--chat-sichtbar-oben, 0px) + var(--sa-top, 0px)) !important}
html body:has(#start.view.is-active) :is(#appMenuButton, #browserButton, #mausButton, #neuerChatStart):is(.glass-icon, .neuer-chat-start) {
top: var(--sa-top, 0px);
transition: transform 220ms ease, opacity 220ms ease}
html.kopf-weg body:has(#start.has-start-chat.is-active) :is(#appMenuButton, #browserButton, #mausButton, #neuerChatStart) {
transform: translateY(calc(-100% - var(--sa-top, 0px) - 12px)) !important;
opacity: 0;
pointer-events: none}
html body #start.has-start-chat #startLog.start-log.start-log.start-log.start-log {
--glas-unten: calc(var(--feld-hoehe, 62px) + max(8px, var(--chat-home-inset, env(safe-area-inset-bottom, 0px))));
-webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.25) calc(var(--sa-top, 0px) + 36px), #000 calc(var(--sa-top, 0px) + 56px), #000 calc(100% - var(--glas-unten) - 28px), rgba(0,0,0,.25) calc(100% - var(--glas-unten) + 12px));
mask-image: linear-gradient(to bottom, rgba(0,0,0,.25) calc(var(--sa-top, 0px) + 36px), #000 calc(var(--sa-top, 0px) + 56px), #000 calc(100% - var(--glas-unten) - 28px), rgba(0,0,0,.25) calc(100% - var(--glas-unten) + 12px))}
html.kopf-weg body #start.has-start-chat #startLog.start-log.start-log.start-log.start-log {
-webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - var(--glas-unten) - 28px), rgba(0,0,0,.25) calc(100% - var(--glas-unten) + 12px));
mask-image: linear-gradient(to bottom, #000 calc(100% - var(--glas-unten) - 28px), rgba(0,0,0,.25) calc(100% - var(--glas-unten) + 12px))}
html body #start.view .home-feed .prompt-glass.prompt-glass.prompt-glass.prompt-glass.prompt-glass,
html body #start.view .home-feed .prompt-glass.prompt-glass.prompt-glass.prompt-glass.prompt-glass:focus-within {
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important}
@media (prefers-reduced-motion:reduce) {
html body:has(#start.view.is-active) :is(#appMenuButton, #browserButton, #mausButton, #neuerChatStart) {
transition: none !important}
}
@media (prefers-reduced-transparency:reduce), (prefers-contrast:more) {
html body #start.has-start-chat #startLog.start-log.start-log.start-log.start-log,
html.kopf-weg body #start.has-start-chat #startLog.start-log.start-log.start-log.start-log {
-webkit-mask-image: none;
mask-image: none}
}
}