/* Template 2 presentation only. The original stylesheet and shared views remain intact. */
body.template2 {
    --t2-ink: #51362d;
    --t2-muted: #87756a;
    --t2-paper: #fffdf8;
    --t2-line: #e8dfd3;
    --t2-brown: #694537;
    --t2-nav-height: calc(64px + env(safe-area-inset-bottom, 0px));
    --t2-viewport: 100dvh;
    background: #f4efe6;
    color: var(--t2-ink);
    font-family: 'Outfit', system-ui, sans-serif;
}
body.template2 #main { height: var(--t2-viewport); }
body.template2 #main > [data-state="chat"] { height: 100%; padding-bottom: var(--t2-nav-height); }
body.template2 #main > [data-state="chat"] > .container-fluid { padding: 0; }
body.template2 #main > [data-state="chat"] > .container-fluid > .row { margin: 0; flex-wrap: nowrap; }
body.template2 #chat { width: 100%; min-width: 0; padding: 0; }
body.template2 #chat > .main-content { height: 100%; min-height: 0; background: var(--t2-paper); }
/* One necessary override of the original mobile !important fixed viewport height. */
body.template2 #chat .chat-container { height: 100% !important; min-height: 0; box-shadow: none; background: var(--t2-paper); }
body.template2 #chat-header { margin: 0; padding: 6px 16px; min-height: 56px; flex-shrink: 0; border-bottom: 1px solid var(--t2-line); }
body.template2 #chat-header [data-role="name"] { min-width: 0; }
body.template2 #chat-header .big { font-size: 1.15rem; font-weight: 650; }
body.template2 #chat-header .small { color: var(--t2-muted); font-size: .75rem; }
body.template2 #chat-header svg { width: 28px; height: 28px; }
body.template2 #chat-header #webcam_btn { box-sizing: border-box; width: 44px; height: 44px; min-width: 44px; padding: 9px; border: 1px solid #d8c8b8; border-radius: 14px; background: #f1e9dd; color: var(--t2-ink); cursor: pointer; animation: none !important; opacity: 1; transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease; }
body.template2 #chat-header #webcam_btn[aria-pressed="true"] { background: var(--t2-brown); color: var(--t2-paper); border-color: var(--t2-brown); box-shadow: 0 2px 5px #51362d26; }
body.template2 #webcam_btn .t2-camera-on, body.template2 #webcam_btn .t2-camera-live { display: none; }
body.template2 #webcam_btn[aria-pressed="true"] .t2-camera-on, body.template2 #webcam_btn[aria-pressed="true"] .t2-camera-live { display: inline; }
body.template2 #webcam_btn[aria-pressed="true"] .t2-camera-off { display: none; }
body.template2 #webcam_btn .t2-camera-live { fill: #61dd83; stroke: var(--t2-brown); stroke-width: 1.5; }
body.template2 #chat-header #webcam_btn:focus-visible { outline: 3px solid var(--t2-brown); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { body.template2 #chat-header #webcam_btn { transition: none; } }
body.template2 .t2-tabs { display: flex; gap: 6px; padding: 5px 12px; background: var(--t2-paper); border-bottom: 1px solid var(--t2-line); flex-shrink: 0; }
body.template2 .t2-tabs button { flex: 1; border: 0; border-radius: 12px; min-height: 40px; background: transparent; color: var(--t2-muted); font-size: .875rem; font-weight: 500; }
body.template2 .t2-tabs button[aria-expanded="true"], body.template2 .t2-tabs button[aria-pressed="true"] { background: #eee3d4; color: var(--t2-ink); }
body.template2 #messagesContainer { min-height: 0; min-width: 0; background: #f9f5ed; overflow: hidden; }
body.template2 #messagesContainer > .public_messages { min-width: 0; padding: 12px 8px; overscroll-behavior: contain; }
body.template2 .message { padding: 4px 0; margin-bottom: 10px; gap: 8px; font-size: 1rem; }
body.template2 .message > .flex-column { min-width: 0; max-width: calc(100% - 54px); }
body.template2 .message.sent > .flex-column { align-items: flex-end; }
body.template2 .message .username { font-size: .8rem; color: var(--t2-ink); }
body.template2 .message_wrapper { border-radius: 4px 17px 17px; padding: 10px 13px; box-shadow: 0 2px 4px #51362d08; font-size: .95rem; line-height: 1.45; max-width: 100%; }
body.template2 .message_wrapper.received { background: #fffdf9; border: 1px solid var(--t2-line); }
body.template2 .message_wrapper.sent { background: #eadbc6; border-radius: 17px 4px 17px 17px; }
body.template2 .message_wrapper.mention { border: 3px dashed currentColor; }
body.template2 .message-content { overflow-wrap: anywhere; min-width: 0; }
body.template2 #messagesContainer .messageDate { max-width: 100%; flex-wrap: wrap; gap: 4px 8px; align-items: flex-end; }
body.template2 #messagesContainer .message .ago { color: var(--t2-muted); font-size: .7rem; }
body.template2 #messagesContainer .message img.photo,
body.template2 #messagesContainer .message img.video { max-width: min(180px, 40vw); max-height: 180px; }
body.template2 #typing { flex-shrink: 0; padding: 0 14px; font-size: .75rem; color: var(--t2-muted); }
body.template2 .chat-footer { flex-shrink: 0; padding: 5px 8px; border-top: 1px solid var(--t2-line); background: var(--t2-paper); }
body.template2 .message-input-group { display: grid; grid-template-columns: auto minmax(0, 1fr) 44px; gap: 4px; margin: 0; align-items: end; }
body.template2 .input-buttons { position: static; align-items: center; gap: 0; grid-column: 1; grid-row: 1; }
body.template2 .chat-footer .input-buttons button { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 44px; padding: 10px; margin: 0; border-radius: 12px; }
body.template2 .chat-footer button svg { width: 23px; height: 23px; flex-shrink: 0; }
/* Override Bootstrap's shadow utility only for these original composer controls. */
body.template2 .input-buttons .shadow { box-shadow: none !important; }
body.template2 #public-input { grid-column: 2; grid-row: 1; min-width: 0; height: 44px; min-height: 44px; max-height: 44px; line-height: 24px; font-size: 16px; padding: 10px; background: #f3ede3; border: 1px solid transparent; border-radius: 14px; box-shadow: none; backdrop-filter: none; white-space: pre-wrap; overflow-wrap: anywhere; overflow-x: hidden; overflow-y: auto; transition: min-height .18s ease, background .18s ease; }
body.template2 #public-input:focus { background: white; border-color: #b79879; }
body.template2 .chat-footer .t2-send { grid-column: 3; grid-row: 1; width: 44px; height: 44px; border-radius: 14px; background: var(--t2-brown); color: white; padding: 10px; display: flex; align-items: center; justify-content: center; }
body.template2 .t2-send:disabled { opacity: .45; }
body.template2 .t2-composer-expanded #public-input { grid-column: 1 / 3; grid-row: 1; height: auto; min-height: 76px; max-height: min(132px, 24dvh); }
body.template2 .t2-composer-expanded .input-buttons { grid-row: 2; grid-column: 1 / 3; }
body.template2 .t2-composer-expanded .t2-send { grid-row: 1 / 3; height: 48px; align-self: end; }
body.template2 #mentionUsernamePlaceholder:empty { display: none; }
body.template2 #mentionUsernamePlaceholder:not(:empty) { grid-column: 1 / -1; grid-row: auto; font-size: .8rem; }
body.template2 .message-input-group > [role="status"] { grid-column: 1 / -1; font-size: .75rem; }

/* Picker is portalled by the shared UI. Its inline coordinates target the old footer. */
body.template2 #emoji-picker { position: fixed; bottom: calc(var(--t2-nav-height) + var(--t2-composer-height, 58px) + 4px) !important; left: 8px !important; width: min(350px, calc(100vw - 16px)); max-height: min(340px, 45dvh); overflow-y: auto; border-radius: 18px; border: 1px solid var(--t2-line); box-shadow: 0 8px 35px #51362d26; }
body.template2 #emoji-picker button { width: 40px; min-height: 40px; }
body.template2 #sidebar { display: none; width: min(390px, 100%); position: absolute; top: 0; bottom: var(--t2-nav-height); right: 0; height: auto; padding: 16px; background: var(--t2-brown); color: #fffdf8; z-index: 1040; border-radius: 22px 0 0 22px; overflow-y: auto; justify-content: flex-start; gap: 8px; box-shadow: -12px 0 40px #35231920; }
body.template2.t2-panel-open #sidebar { display: flex; }
body.template2 .t2-panel-header { display: flex; justify-content: space-between; align-items: center; font-weight: 600; font-size: 1.15rem; flex-shrink: 0; }
body.template2 .t2-panel-close { border: 1px solid #ffffff50; border-radius: 12px; background: transparent; color: white; min-height: 44px; padding: 6px 12px; font-size: .875rem; }
body.template2 .t2-backdrop { display: none; position: absolute; inset: 0 0 var(--t2-nav-height); z-index: 1039; background: #35231955; border: 0; }
body.template2.t2-panel-open .t2-backdrop { display: block; }
body.template2 #sidebar .search-box { opacity: 1; margin: 0; min-height: 46px; padding: 8px 12px; color: var(--t2-ink); }
body.template2 #sidebar .search-box input { color: var(--t2-ink); font-size: 16px; }
body.template2 #sidebar .search-box input::placeholder { color: var(--t2-muted); }
body.template2 #filterContainer { flex-shrink: 0; font-size: .9rem; }
body.template2 #filterGendersContainer { flex-shrink: 0; }
body.template2 #filterGendersContainer > .d-flex { margin-top: 4px !important; justify-content: flex-start !important; gap: 4px; }
body.template2 #sidebar .custom-checkbox { min-height: 44px; display: inline-flex; align-items: center; padding-right: 8px; }
body.template2 #sidebar .checkmark, body.template2 #sidebar .friends_checkmark { top: 10px; }
body.template2 #ageRange { margin: 16px 10px; }
body.template2 #ageRange .ui-slider-handle { width: 26px; height: 26px; top: -9px; border-radius: 50%; }
body.template2 #userTabs { flex-shrink: 0; }
body.template2 #userTabs button { min-height: 44px; }
body.template2 #userTabsContent { min-height: 128px; overflow: visible !important; display: flex; }
body.template2 #aprox { width: 100%; }
/* JS writes old viewport heights here; retain the virtual list's 64px row contract. */
body.template2 #userListContainer { height: 100% !important; min-height: 128px; }
body.template2 #usersList, body.template2 #usersList.mobileFiltered, body.template2 #usersPrivateList { height: 100%; min-height: 128px; }
body.template2 #menuContainer { position: absolute; bottom: 0; left: 0; height: var(--t2-nav-height); width: 100%; background: var(--t2-paper); border-top: 1px solid var(--t2-line); z-index: 1041; padding: 4px 8px env(safe-area-inset-bottom, 0px) !important; }
body.template2 #menu_actions { height: 100%; max-width: 720px; gap: 4px; align-items: center; }
body.template2 #menu_actions > a { flex: 1; min-width: 0; margin: 0 !important; color: var(--t2-muted) !important; }
body.template2 #menu_actions .item { min-height: 52px; gap: 2px; justify-content: center; border-radius: 14px; font-size: .7rem; }
body.template2 #menu_actions .item.selected { color: var(--t2-ink); background: #eee3d4; }
body.template2 #menu_actions svg { width: 23px; height: 23px; }
body.template2 #menu_actions svg path { stroke: currentColor; }
body.template2 #menu_actions #users_menu_btn { display: none; }
body.template2 #menu_actions .t2-nav-label { display: block; }
body.template2 #profileUserContainer { padding: 24px; max-height: 80%; overflow-y: auto; z-index: 1042; }
body.template2 #chat > [data-state="rooms"] { background: #f9f5ed; }
body.template2 #roomListNormal, body.template2 #roomListAdult { gap: 12px; }
body.template2 .room-card { border-radius: 18px; overflow: hidden; box-shadow: 0 4px 14px #51362d12; }
body.template2 #chat > [data-state="profile"] { padding-bottom: 24px !important; }
body.template2 #panel_login { border-radius: 24px; box-shadow: 0 12px 50px #51362d18; }
body.template2 #panel_login input { border-radius: 12px; }
body.template2 button:focus-visible, body.template2 a:focus-visible { outline: 3px solid #c79f65; outline-offset: 2px; }
@media (min-width: 768px) {
    body.template2 #messagesContainer > .public_messages { padding: 20px 24px; }
    body.template2 .chat-footer { padding: 10px 16px; }
    body.template2 .message > .flex-column { max-width: 78%; }
    body.template2 #public-input { padding-left: 14px; }
}
@media (min-width: 1100px) {
    body.template2 #main > [data-state="chat"] { max-width: 1600px; margin: auto; padding: 20px 24px var(--t2-nav-height); }
    body.template2 #main > [data-state="chat"] > .container-fluid > .row { gap: 18px; }
    body.template2 #chat { flex: 1; border: 1px solid var(--t2-line); border-radius: 22px; overflow: hidden; }
    body.template2 #sidebar { display: flex; position: relative; inset: auto; height: 100%; width: 300px; flex: 0 0 300px; border-radius: 22px; box-shadow: none; }
    body.template2 .t2-panel-close, body.template2.t2-panel-open .t2-backdrop { display: none; }
    body.template2 .t2-tabs { max-width: 420px; border: 0; }
    body.template2 #chat-header { min-height: 72px; padding: 12px 24px; }
    body.template2 #menuContainer { border-top: 0; background: #f4efe6; }
    body.template2 .message-input-group { gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
    body.template2 #public-input { transition: none; }
}
body.template2 #main { position: relative; }
body.template2 .t2-browse-users { align-self: flex-start; min-height: 44px; padding: 8px 16px; margin: 0 0 16px; border: 1px solid var(--t2-line); border-radius: 12px; background: white; color: var(--t2-ink); }

body.template2 .message_wrapper .deleteMessage path { stroke: currentColor; }

/* Compact public-room navigation; original private and desktop headers remain intact. */
body.template2 .t2-compact-header { display: none; }
body.template2 #t2-rooms[hidden] { display: none; }
body.template2 #t2-rooms { position: absolute; inset: 8px 8px calc(var(--t2-nav-height) + 8px); z-index: 1040; display: flex; flex-direction: column; gap: 12px; padding: 16px; min-width: 0; background: var(--t2-brown); color: var(--t2-paper); border-radius: 20px; box-shadow: 0 8px 40px #35231930; }
body.template2 #t2-rooms .t2-panel-close { display: block; }
body.template2.t2-rooms-open .t2-backdrop { display: block; }
body.template2 .t2-room-search { width: 100%; flex-shrink: 0; min-height: 46px; padding: 10px 14px; border: 1px solid var(--t2-line); border-radius: 12px; background: var(--t2-paper); color: var(--t2-ink); font-size: 16px; }
body.template2 .t2-room-list { display: flex; flex-direction: column; gap: 8px; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
body.template2 .t2-room-row { flex-shrink: 0; display: flex; align-items: center; gap: 10px; width: 100%; min-height: 66px; padding: 12px; border: 1px solid #ffffff30; border-radius: 14px; background: #ffffff0c; color: var(--t2-paper); text-align: left; }
body.template2 .t2-room-row[aria-current="true"] { background: #f1e5d4; color: var(--t2-ink); border-color: #e4caa6; }
body.template2 .t2-room-row:disabled { opacity: .65; }
body.template2 .t2-room-icon { width: 28px; flex: 0 0 28px; overflow: hidden; font-size: 22px; text-align: center; }
body.template2 .t2-room-copy { flex: 1; min-width: 0; }
body.template2 .t2-room-row-name { display: block; font-size: 1rem; font-weight: 600; overflow-wrap: anywhere; }
body.template2 .t2-room-copy small { display: block; margin-top: 2px; font-size: .8rem; opacity: .8; }
body.template2 .t2-row-count { border-radius: 20px; padding: 4px 8px; background: #0000000c; font-variant-numeric: tabular-nums; }
body.template2 .t2-room-status { font-size: .875rem; flex-shrink: 0; }
body.template2 .t2-room-status:empty { display: none; }
@media (max-width: 1099.98px) {
    body.template2 #chat-header.t2-public-header { min-height: 56px; height: 56px; padding: 6px 10px; }
    body.template2 #chat-header.t2-public-header .t2-original-header { display: none !important; }
    body.template2 .t2-tabs.t2-public-tabs { display: none; }
    body.template2 .t2-public-header .t2-compact-header { display: grid; grid-template-columns: 76px minmax(0, 1fr) 76px; gap: 6px; align-items: center; width: 100%; min-width: 0; }
    body.template2 .t2-camera-slot { display: flex; align-items: center; }
    body.template2 .t2-room-button, body.template2 .t2-users-button { display: flex; align-items: center; justify-content: center; gap: 5px; min-height: 44px; min-width: 0; border: 1px solid var(--t2-line); border-radius: 12px; background: #f3ecdf; color: var(--t2-ink); padding: 6px; }
    body.template2 .t2-room-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1rem; font-weight: 600; }
    body.template2 #chat-header .t2-users-button svg { flex: 0 0 22px; width: 22px; height: 22px; }
    body.template2 .t2-room-count { font-size: .8rem; font-variant-numeric: tabular-nums; }
}
body.template2 .t2-room-icon svg { width: 26px; height: 26px; }

/* Remote camera availability remains owned by the shared user-list renderer. */
@media (max-width: 1099.98px) {
    body.template2 #userListContainer .webcamContainer { flex-shrink: 0; padding: 0 4px !important; }
    body.template2 #userListContainer .userData { min-width: 0; }
    body.template2 #userListContainer .userData > .font-bold { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    body.template2 #userListContainer .webcam-btn { box-sizing: border-box; display: block; width: 44px; height: 44px; min-width: 44px; padding: 9px; border: 1px solid #d8c8b8; border-radius: 14px; background: #f1e9dd; color: var(--t2-ink); box-shadow: 0 2px 5px #35231926; cursor: pointer; touch-action: manipulation; transition: background-color .16s ease, box-shadow .16s ease; }
    body.template2 #userListContainer .webcam-btn:hover { background: #fff7eb; box-shadow: 0 3px 7px #35231940; }
    body.template2 #userListContainer .webcam-btn:active { background: #e4d4bf; box-shadow: inset 0 1px 3px #51362d26; }
    body.template2 #userListContainer .webcam-btn:focus-visible { outline: 3px solid #f1c98c; outline-offset: 2px; }
    /* Reserve a bounded layer below presentation panels (1039/1040), navigation
       (1041) and Bootstrap error dialogs. Override only the legacy drag counter. */
    body.template2 .video-panel { z-index: 1038 !important; max-width: calc(100vw - 16px); max-height: var(--t2-remote-height, calc(var(--t2-viewport) - var(--t2-nav-height) - 16px)); }
    body.template2 .video-panel .panel-header { min-height: 54px; }
    body.template2 .video-panel .panel-header .username { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    body.template2 .video-panel .button-group { flex-shrink: 0; }
    body.template2 .video-panel .panel-header button { min-width: 44px; min-height: 44px; }
    body.template2 .video-panel .mute-btn { margin-right: 4px; }
}
@media (max-width: 1099.98px) and (prefers-reduced-motion: reduce) {
    body.template2 #userListContainer .webcam-btn { transition: none; }
}

/* Remote webcam selector and original featured viewers: Template 2 phones only. */
body.template2 #t2-mobile-cams, body.template2 #t2-featured-cam { display: none; }
@media (max-width: 767px) {
    body.template2 #t2-mobile-cams:not([hidden]) { display: flex; flex: 0 0 auto; flex-wrap: nowrap; gap: 6px; min-width: 0; max-width: 100%; padding: 6px 8px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; scroll-padding-inline: 8px; scrollbar-width: thin; }
    body.template2 .t2-cam-thumbnail { box-sizing: border-box; position: relative; flex: 0 0 calc((100% - 6px) / 2); min-width: 0; height: clamp(90px, 25vw, 108px); margin: 0; padding: 0; overflow: hidden; border: 2px solid transparent; border-radius: 10px; background: #171717; color: white; scroll-snap-align: start; touch-action: pan-x pan-y pinch-zoom; }
    body.template2 .t2-cam-thumbnail[aria-pressed="true"] { border: 3px solid #79533d; box-shadow: 0 0 0 1px #79533d; }
    body.template2 .t2-cam-thumbnail[aria-pressed="true"] .t2-cam-name::after { content: ' ✓'; font-weight: bold; }
    body.template2 .t2-cam-thumbnail:focus-visible { outline: 3px solid #79533d; outline-offset: 1px; }
    body.template2 .t2-cam-thumbnail video { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
    body.template2 .t2-cam-name { position: absolute; inset: auto 0 0; padding: 4px 6px; background: #171717dc; color: white; font-size: 12px; text-align: left; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
    body.template2 .t2-cam-name::before, body.template2 #t2-featured-cam .username::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: #61dd83; vertical-align: middle; }
    body.template2 #t2-featured-cam:not([hidden]) { display: block; flex: 0 0 auto; min-width: 0; margin: 0 8px 6px; }
    body.template2 #t2-featured-cam > .video-panel { display: none !important; }
    body.template2 #t2-featured-cam > .video-panel.t2-cam-selected { display: block !important; box-sizing: border-box; position: relative !important; inset: auto !important; z-index: auto !important; transform: none !important; width: 100% !important; height: auto !important; aspect-ratio: 16 / 9; min-width: 0; min-height: 0; max-width: none; max-height: 260px; margin: 0; padding: 0; overflow: hidden; border-radius: 12px; background: #171717; box-shadow: 0 2px 5px #51362d26; }
    body.template2 #t2-featured-cam .panel-header { box-sizing: border-box; position: absolute; inset: 0 0 auto; z-index: 1; display: flex; align-items: center; min-height: 40px; height: 40px; padding: 0 4px 0 10px; background: #171717dc; color: #fff; cursor: default; }
    body.template2 #t2-featured-cam .username { flex: 1; font-size: 13px; }
    body.template2 #t2-featured-cam .button-group { display: flex; align-items: center; }
    body.template2 #t2-featured-cam .panel-header button { display: inline-flex; align-items: center; justify-content: center; width: 44px; min-width: 44px; height: 40px; min-height: 40px; padding: 7px; margin: 0; border: 0; background: transparent; color: white; touch-action: manipulation; }
    body.template2 #t2-featured-cam button:focus-visible { outline: 2px solid white; outline-offset: -3px; }
    body.template2 #t2-featured-cam video { display: block; width: 100%; height: 100%; object-fit: contain; }
    body.template2 #t2-featured-cam .ui-resizable-handle { display: none !important; }
}
@media (max-width: 767px) and (max-height: 700px) {
    body.template2 .t2-cam-thumbnail { height: 76px; }
    body.template2 #t2-featured-cam > .video-panel.t2-cam-selected { max-height: 180px; }
}

/* Single remote viewer sizing: presentation only, restricted to Template 2 phones. */
@media (max-width: 767px) {
    body.template2 #t2-featured-cam .t2-cam-size-toggle[hidden] { display: none; }
    body.template2 #t2-featured-cam .t2-cam-size-toggle svg { width: 22px; height: 22px; }
    body.template2 #t2-featured-cam > .video-panel.t2-cam-selected.t2-cam-compact { width: min(248px, 100%) !important; max-height: 140px; }
}
@media (max-width: 767px) and (max-height: 550px) {
    body.template2 #t2-featured-cam > .video-panel.t2-cam-selected { max-height: 28dvh; }
    body.template2 #t2-featured-cam > .video-panel.t2-cam-selected.t2-cam-compact { max-height: 22dvh; }
}