/* Shared visual language for both sides of the session. Layout stays in each role stylesheet. */
.call-view[data-role] {
    --room-gutter: 12px;
    --room-radius: 22px;
    --chat-width: clamp(320px, 27vw, 376px);
    --room-line: #dfe2d7;
    --room-secondary: #687165;
    background: var(--paper);
    color: var(--ink);
}

.call-view[data-role] .video-grid { border-radius: var(--room-radius); background: #27342b; isolation: isolate; }
.call-view[data-role] .video-grid[data-layout="gallery"] { gap: 10px; background: var(--paper); }
.call-view[data-role] .feed-tile { border: 0; border-radius: var(--room-radius); background: #27342b; }
.call-view[data-role] .art-feed video { object-fit: contain; }
.call-view[data-role] .video-grid:not(.has-multiple):not(.has-only-local) .feed-tile { border: 0; border-radius: 0; }
.call-view[data-role] .feed-overlay {
    min-height: 62px;
    padding: 18px 18px 14px;
    background: linear-gradient(transparent, #17281d55);
    font-size: 12px;
    font-weight: 400;
}
.call-view[data-role] .feed-overlay > span {
    padding: 5px 10px;
    border: 1px solid #ffffff24;
    border-radius: 8px;
    background: #21362c99;
    color: #fffef9;
    backdrop-filter: blur(12px);
}
.call-view[data-role] .is-secondary .feed-overlay { min-height: 40px; padding: 8px; font-size: 11px; }
.call-view[data-role] .is-secondary .feed-overlay > span { padding: 3px 7px; border: 0; background: #21362c99; }
.call-view[data-role] .feed-actions { opacity: 0; transition: opacity 160ms ease; }
.call-view[data-role] .feed-tile:hover .feed-actions,
.call-view[data-role] .feed-tile:focus-within .feed-actions { opacity: 1; }
.call-view[data-role] .feed-actions button {
    width: 32px;
    height: 32px;
    flex-basis: 32px;
    border: 1px solid #ffffff26;
    border-radius: 10px;
    background: #25382dc9;
    box-shadow: none;
    backdrop-filter: blur(12px);
}
.call-view[data-role] .feed-actions button:hover { background: #f8f7f2; color: var(--ink); transform: none; }
.call-view[data-role] .feed-actions button .icon { width: 14px; height: 14px; font-size: 14px; }
.call-view[data-role] .video-grid[data-layout="focus"] .is-primary .feed-focus { display: none; }
.call-view[data-role] .feed-tile.floating-preview {
    container-type: inline-size;
    border: 1px solid #fffdf899;
    border-radius: 16px;
    box-shadow: 0 2px 4px #19281c14, 0 12px 30px #15281e26;
}
.call-view[data-role] .feed-tile.floating-preview.is-adjusting { box-shadow: 0 16px 40px #15281e40; }
.call-view[data-role] .feed-resize { top: 6px; left: 6px; border-radius: 7px; }
.call-view[data-role] .feed-placeholder { font: 400 14px/1.5 var(--sans); }
.call-view[data-role] .feed-tile.camera-off { background: radial-gradient(ellipse at 50% 15%, #f7f7ed, #e6eadd); }
.call-view[data-role] .camera-placeholder { padding: 14px 14px 32px; color: var(--ink); }
.call-view[data-role] .camera-placeholder-emblem { background: #dce3d340; color: #78866a; }
.call-view[data-role] .camera-placeholder small { color: #68745e; }
.call-view[data-role] .feed-tile.camera-off .feed-overlay { background: transparent; }
.call-view[data-role] .feed-tile.camera-off .feed-overlay > span { border: 0; background: transparent; color: #68745e; backdrop-filter: none; }
.call-view[data-role] .empty-call { border: 0; border-radius: 0; background: radial-gradient(ellipse at 50% 40%, #f4f3e9, #e5e9db); color: var(--ink); }
.call-view[data-role] .empty-call-symbol { border: 1px solid #d6ddcb; border-radius: 50%; background: #ecf0e4; color: #6f8260; }
.call-view[data-role] .empty-call strong { color: var(--ink); font: 400 32px/1.2 var(--serif); }
.call-view[data-role] .empty-call p { max-width: 300px; margin-top: 10px; color: var(--room-secondary); font-size: 13px; line-height: 1.6; }
.call-view[data-role] .call-status { top: 16px; left: 28px; border-radius: 12px; padding: 10px 14px; font-size: 12px; }


.call-view[data-role] .tool-button {
    min-width: 44px;
    min-height: 42px;
    gap: 8px;
    padding: 9px 13px;
    border: 1px solid transparent;
    border-radius: 12px;
    background: transparent;
    color: #51644c;
    font-size: 12px;
    font-weight: 500;
    transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}
.call-view[data-role] .tool-button > span { display: inline; }
.call-view[data-role] .tool-button .icon { width: 17px; height: 17px; font-size: 17px; }
.call-view[data-role] .tool-button:hover { transform: none; border-color: transparent; background: #e9eddf; }
.call-view[data-role] .tool-button:active { background: #e1e7d6; }
.call-view[data-role] .tool-button:focus-visible { outline: 2px solid #71875f; outline-offset: 3px; }
.call-view[data-role] .tool-button[aria-pressed="true"] { border-color: #dedfcf; background: #eaeade; color: #696450; }
.call-view[data-role] .tool-button[aria-expanded="true"] { border-color: #dbe3ce; background: #e5ecd9; color: #3f5946; }
.call-view[data-role] .tool-button[aria-expanded="true"]::after { content: ""; position: absolute; bottom: 3px; width: 3px; height: 3px; border-radius: 50%; background: #758a5f; }

.call-view[data-role] .chat-heading { align-items: flex-start; gap: 10px; padding: 23px 20px 13px; }
.call-view[data-role] .chat-heading h2 { font: 500 16px/1.4 var(--sans); letter-spacing: -.02em; }
.call-view[data-role] .chat-heading > div > span { margin-top: 4px; font-size: 12px; line-height: 1.5; color: var(--room-secondary); }
.call-view[data-role] .chat-icon-button { border-radius: 50%; color: #6a7860; }
.call-view[data-role] .chat-icon-button:hover { background: #e9eddf; color: #3f5946; }
.call-view[data-role] .chat-icon-button:focus-visible { outline-offset: 2px; border-radius: 50%; }
.call-view[data-role] .chat-heading > .chat-icon-button { margin-top: -4px; margin-right: -5px; }
.call-view[data-role] .chat-privacy {
    align-self: flex-start;
    gap: 12px;
    min-height: 29px;
    margin: 0 20px 12px;
    padding: 1px 4px 1px 9px;
    border: 1px solid #e3e7d9;
    border-radius: 8px;
    background: #f0f3e8;
    color: #5e7252;
    font-size: 11px;
}
.call-view[data-role] .chat-privacy .chat-icon-button { --chat-icon-size: 25px; }
.call-view[data-role] .chat-privacy .icon { width: 10px; height: 10px; font-size: 10px; }
.call-view[data-role] .chat-privacy .chat-icon-button .icon { width: 13px; height: 13px; font-size: 13px; }
.call-view[data-role] .chat-messages { gap: 14px; padding: 14px 18px 20px; border-top: 1px solid #e6e8de; }
.call-view[data-role] .chat-messages:has(.chat-message)::before { content: ""; flex: 1; }
.call-view[data-role] .chat-empty { min-height: 150px; padding: 24px 8px; gap: 13px; }
.call-view[data-role] .chat-empty-emblem { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 3px; border: 1px solid #e0e7d4; border-radius: 16px; background: #eff3e7; color: #7c9167; font-size: 20px; }
.call-view[data-role] .chat-empty strong { font: 400 29px/1.15 var(--serif); letter-spacing: -.025em; color: #4b6144; }
.call-view[data-role] .chat-empty p { font-size: 12px; line-height: 1.7; color: var(--room-secondary); }
.call-view[data-role] .chat-message { max-width: 90%; }
.call-view[data-role] .chat-message > p { padding: 10px 14px; border-color: #e0e5d7; border-radius: 17px 17px 17px 5px; background: #f0f3e9; color: #3d5236; font-size: 14px; line-height: 1.5; }
.call-view[data-role] .chat-message.from-you > p { border-color: #45633f; border-radius: 17px 17px 5px 17px; background: #45633f; color: #fffef6; }
.call-view[data-role] .chat-message-meta { gap: 7px; margin: 5px 5px 0; color: #66745d; font-size: 11px; line-height: 1.4; }
.call-view[data-role] .chat-message.from-you .chat-message-meta strong { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.call-view[data-role] .chat-image-preview { max-width: 278px; border: 1px solid #dde2d3; border-radius: 17px; background: #e9eddf; }
.call-view[data-role] .chat-image-preview img { max-height: 280px; }
.call-view[data-role] .chat-composer-area { padding: 12px 14px 13px; border: 0; background: transparent; }
.call-view[data-role] .chat-composer {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) 32px;
    align-items: end;
    gap: 6px;
    padding: 7px;
    border: 1px solid #d7dfcd;
    border-radius: 17px;
    background: #fffefa;
    box-shadow: 0 2px 4px #34483d05;
    transition: border-color 160ms ease, box-shadow 160ms ease;
}
.call-view[data-role] .chat-composer:focus-within { border-color: #93a881; box-shadow: 0 0 0 3px #c9d5bd40; }
.call-view[data-role] .chat-composer textarea {
    grid-column: 2;
    grid-row: 1;
    min-height: 38px;
    max-height: 140px;
    margin: 0;
    padding: 9px 0;
    resize: none;
    font: 400 14px/20px var(--sans);
    letter-spacing: -.01em;
}
.call-view[data-role] .chat-composer textarea::placeholder { color: #6c735f; opacity: 1; }
.call-view[data-role] .chat-compose-actions { display: contents; }
.call-view[data-role] .chat-attachment { --chat-icon-size: 30px; grid-column: 1; grid-row: 1; align-self: end; margin-bottom: 3px; }
.call-view[data-role] .chat-compose-hint { display: none; }
.call-view[data-role] .chat-send { grid-column: 3; grid-row: 1; align-self: end; margin-bottom: 2px; background: #45633f; }
.call-view[data-role] .chat-send:disabled { background: #e8eddf; color: #98a58c; opacity: 1; }
.call-view[data-role] .chat-send:not(:disabled):hover { background: #334e30; }
.call-view[data-role] .chat-footnote { margin-top: 10px; color: var(--room-secondary); font-size: 11px; line-height: 1.5; }
.call-view[data-role] .chat-new-messages { font-size: 11px; }

@container (max-width: 160px) {
    .call-view[data-role] .camera-placeholder { gap: 5px; padding: 8px 6px 27px; }
    .call-view[data-role] .camera-placeholder-emblem { width: 26px; height: 26px; }
    .call-view[data-role] .camera-placeholder-emblem .icon { font-size: 13px; }
    .call-view[data-role] .camera-placeholder-label { font-size: 11px; }
    .call-view[data-role] .camera-placeholder small { display: none; }
}

@media (hover: none) {
    .call-view[data-role] .feed-actions { opacity: 1; }
    .call-view[data-role] .feed-actions button { width: 44px; height: 44px; flex-basis: 44px; }
}
@media (prefers-reduced-motion: reduce) {
    .call-view[data-role] *, .call-view[data-role] *::after { animation: none !important; transition: none !important; }
}