.chat-panel { grid-template-rows: auto auto auto auto minmax(240px, 1fr) auto; }
.chat-panel > .panel-heading { grid-row: 1; }
.chat-panel > .camilla { grid-row: 2; }
.chat-panel > .error-banner { grid-row: 3; }
.chat-panel > .manual-setup { grid-row: 4; }
.chat-panel > .messages { grid-row: 5; }
.chat-panel > .composer { grid-row: 6; }
.camilla { border-block: 1px solid var(--border, #dce5e1); padding: 12px 22px; background: #f5f8f6; }
/* Clip rounded desktop panels without creating an ancestor scroll container. */
@media (min-width: 721px) {
    .chat-panel { overflow: clip; }
}
.camilla[data-mode="video"][data-notice-open="false"],
.camilla[data-mode="voice"][data-notice-open="false"] {
    position: sticky;
    top: var(--camilla-sticky-top, 8px);
    z-index: 15;
    box-shadow: 0 8px 18px rgba(19, 44, 43, .08);
}
.camilla[hidden], .camilla [hidden] { display: none !important; }
.camilla-heading, .camilla-actions, .camilla-modes { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.camilla-heading { justify-content: space-between; margin-bottom: 8px; }
.camilla-heading strong { color: #173f3f; }
.camilla-heading small { color: #566b67; font-size: 12px; margin-left: 8px; }
.camilla-modes button { border: 1px solid #c8d7d1; border-radius: 20px; padding: 7px 12px; background: white; color: #234e48; font: inherit; font-size: 12px; cursor: pointer; }
.camilla-modes button[aria-pressed="true"] { background: #174f48; border-color: #174f48; color: white; }
.camilla button:focus-visible { outline: 3px solid #42b4c5; outline-offset: 3px; }
.camilla button:disabled { opacity: .5; cursor: default; }
.camilla-stage { display: grid; grid-template-columns: 228px minmax(0, 1fr); align-items: center; gap: 16px; padding-top: 10px; }
.camilla-portrait { position: relative; height: 256px; overflow: hidden; border-radius: 18px; background: #dbe0e2; }
.camilla-portrait img, .camilla-portrait video { width: 100%; height: 100%; object-fit: cover; }
.camilla-portrait img { object-position: center 10%; }
.camilla-portrait video { position: absolute; inset: 0; object-fit: cover; transform: scale(1.6); transform-origin: 50% 65%; }
.camilla-status { color: #174f48; font-weight: 650; margin: 0 0 5px; }
.camilla-hint { font-size: 12px; line-height: 1.5; color: #526962; margin: 0 0 10px; }
.camilla-actions button { font-size: 12px; padding: 8px 10px; }
.camilla-notice { padding: 10px 0 0; font-size: 13px; line-height: 1.5; }
.camilla-notice p { white-space: pre-line; }
.camilla-notice .button { margin: 0 8px 8px 0; }
.camilla-error { color: #963b29; font-size: 13px; margin: 8px 0 0; }
.message-typing .avatar img { width: 100%; height: 100%; object-fit: cover; object-position: center 10%; border-radius: inherit; }
@media (max-width: 720px) {
    .camilla { --camilla-sticky-top: 62px; }
}
@media (max-width: 640px) {
    .camilla { padding: 10px 16px; }
    .camilla-stage { grid-template-columns: 128px minmax(0, 1fr); gap: 12px; }
    .camilla-portrait { height: 144px; }
    .camilla-modes { gap: 5px; }
    .camilla-modes button { padding: 7px 9px; }
}