.room-card { text-decoration: none; color: inherit; }

.room-card:focus-visible { outline: 3px solid #2a5298; outline-offset: 3px; }

.room-join { font-size: 0.78rem; font-weight: 600; color: #2a5298; }

.room-status { padding: 0.5rem 1.2rem; font-size: 0.82rem; color: #5d738b; }

.room-status:empty { display: none; }

.room-status.error { color: #a12c30; background: #fff0f0; }

.room-not-found { max-width: 500px; margin: 15vh auto; padding: 2rem; border-radius: 1rem; background: white; }

.room-chat-body .msg-bubble { white-space: pre-wrap; overflow-wrap: anywhere; }

.chat-body .msg-bubble { white-space: pre-wrap; overflow-wrap: anywhere; }

a.panel-user-item { text-decoration: none; color: inherit; }

a.panel-user-item:focus-visible { outline: 2px solid #2a5298; outline-offset: -3px; }

.send-btn:disabled { opacity: 0.5; cursor: default; }

.bengal-welcome { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 26px 28px; margin-bottom: 22px; border: 1px solid #d9e7e4; border-radius: 18px; background: linear-gradient(120deg, #eaf4ef, #eef3fc); }

.bengal-eyebrow { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 10px; color: #4f8577; font-size: 10px; letter-spacing: 1.6px; font-weight: 750; }

.bengal-welcome h1 { margin-bottom: 9px; font-size: clamp(22px, 2.2vw, 30px); line-height: 1.2; letter-spacing: -0.9px; color: #183b3a; }

.bengal-welcome p { max-width: 580px; color: #698483; font-size: 12px; line-height: 1.8; }

.bengal-room-stats { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border: 1px solid #ffffff; border-radius: 13px; background: #ffffff7a; flex-shrink: 0; }

.bengal-room-stats strong { color: #3e7567; font-size: 36px; letter-spacing: -2px; }

.bengal-room-stats span { color: #758a88; font-size: 11px; line-height: 1.7; }

.room-discovery-controls { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }

.room-search { display: flex; align-items: center; gap: 11px; flex: 1; min-width: 0; padding: 0 15px; background: white; border: 1px solid #dde5f1; border-radius: 10px; color: #8294ad; }

.room-search input { min-width: 0; width: 100%; padding: 13px 0; border: 0; outline: none; background: transparent; color: #294463; font: inherit; font-size: 12px; }

.room-search:focus-within { outline: 2px solid #97b6e5; outline-offset: 1px; }

.room-sort { display: flex; align-items: center; gap: 8px; color: #8a9ab0; font-size: 11px; }

.room-sort select { padding: 12px 10px; border: 1px solid #dde5f1; border-radius: 9px; background: white; color: #49627f; font-size: 12px; cursor: pointer; max-width: 160px; }

.room-category-filters { display: flex; gap: 8px; flex-wrap: wrap; padding-bottom: 17px; margin-bottom: 17px; border-bottom: 1px solid #e3eaf3; }

.room-category-filters button { display: inline-flex; align-items: center; gap: 8px; min-height: 35px; border: 1px solid #dce5f1; border-radius: 20px; padding: 7px 13px; background: #fff; color: #6c829b; font-size: 11px; font-weight: 600; cursor: pointer; }

.room-category-filters button span { font-size: 10px; color: #8a9eb5; }

.room-category-filters button[aria-pressed="true"] { background: #284e7e; border-color: #284e7e; color: white; }

.room-category-filters button[aria-pressed="true"] span { color: #c5d9f1; }

.room-category-filters button:focus-visible, .room-sort select:focus-visible { outline: 2px solid #729dde; outline-offset: 2px; }

.rooms-results { color: #8698ae; font-size: 11px; margin-bottom: 14px; }

.room-search-empty { grid-column: 1 / -1; padding: 48px 24px; text-align: center; border: 1px dashed #d6e1ee; border-radius: 14px; color: #91a3b9; }

.room-search-empty > i { font-size: 24px; margin-bottom: 16px; }

.room-search-empty h3 { margin-bottom: 7px; color: #58708d; font-size: 16px; }

.room-search-empty p { font-size: 12px; line-height: 1.7; }

@media (max-width: 650px) {

  .bengal-welcome { padding: 21px 18px; margin-bottom: 18px; }

  .bengal-room-stats { display: none; }

  .room-discovery-controls { align-items: stretch; gap: 8px; }

  .room-sort > span { display: none; }

  .room-sort select { max-width: 118px; padding-inline: 6px; font-size: 10px; }

  .room-search { padding-inline: 10px; gap: 6px; }

  .room-search input { font-size: 11px; }

  .room-category-filters { gap: 6px; }

  .room-category-filters button { padding: 7px 10px; font-size: 10px; gap: 5px; }

}

.panel-user-item.gender-male .panel-user-name { color: #2463ad; }

.panel-user-item.gender-female .panel-user-name { color: #af3c7e; }

.online-friend.gender-male .room-name { color: #a9d2ff; }

.online-friend.gender-female .room-name { color: #ffc0e0; }

.gender-male .panel-user-avatar > img, .gender-male .friend-avatar { outline: 2px solid #80b7f3; outline-offset: 1px; }

.gender-female .panel-user-avatar > img, .gender-female .friend-avatar { outline: 2px solid #ed99c5; outline-offset: 1px; }

.gender-options { display: flex; gap: 10px; border: 0; padding: 0; margin: 0 0 18px; min-width: 0; }

.gender-options legend { margin-bottom: 8px; font-size: 12px; font-weight: 600; color: #385577; }

.gender-options legend > span { color: #91a0b3; font-size: 10px; font-weight: 400; }

.gender-options label { flex: 1; min-width: 0; position: relative; display: flex; align-items: center; gap: 9px; min-height: 51px; padding: 8px 12px; border: 1px solid #d4dfed; border-radius: 10px; background: #fff; font-size: 12px; color: #48627f; cursor: pointer; }

.gender-options label:has(input:checked) { border-color: #5784ca; background: #edf4ff; box-shadow: 0 0 0 1px #5784ca; color: #2855a2; }

.gender-options input { accent-color: #2855a2; margin: 0; }

.gender-options img { width: 32px; height: 32px; border-radius: 50%; }

.gender-options label:has(input:focus-visible) { outline: 2px solid #729dde; outline-offset: 3px; }

.profile-dialog .gender-options { margin: 18px 0 0; text-align: left; }

.avatar-choice-hint { margin-top: 8px; font-size: 10px; color: #8191a7; text-align: left; }

.registration-dialog .profile-dialog-heading h2 { font-size: 17px; line-height: 1.4; }

.registration-prompt-text { color: #64748b; font-size: 13px; line-height: 1.8; }

.registration-prompt-actions { display: flex; gap: 10px; margin-top: 22px; flex-wrap: wrap; }

.registration-prompt-actions a, .registration-prompt-actions button { flex: 1; display: flex; justify-content: center; align-items: center; min-height: 40px; border-radius: 8px; padding: 10px 12px; font: inherit; font-size: 12px; text-decoration: none; cursor: pointer; border: 0; white-space: nowrap; }

.registration-prompt-actions a { background: #2855a2; color: white; }

.registration-prompt-actions button { background: #edf2f9; color: #526b8b; }

.auth-divider { display: flex; align-items: center; gap: 12px; margin: 10px 0 18px; color: #93a2b5; font-size: 12px; }

.auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: #dce4ef; }

.btn-guest { width: 100%; justify-content: center; border: 1px solid #c9d8ed; background: #edf3fc; color: #2855a2; box-shadow: none; }

.btn-guest:hover { background: #dfeafa; }

.guest-login-note { margin: 10px 0 0; font-size: 11px; line-height: 1.6; color: #8191a7; text-align: center; }

.guest-name-label { display: block; margin-bottom: 7px; color: #385577; font-size: 12px; font-weight: 600; }

.guest-name-label span { color: #8a9bb0; font-size: 11px; font-weight: 400; }

.guest-name-field { display: flex; align-items: center; border: 1px solid #ccd9ea; border-radius: 10px; background: #fff; overflow: hidden; }

.guest-name-field > span { padding: 12px 0 12px 14px; color: #5d78a0; font-size: 13px; font-weight: 650; }

.guest-name-field input { flex: 1; min-width: 0; border: 0; outline: 0; padding: 12px 14px 12px 3px; font: inherit; font-size: 13px; color: #18314d; background: transparent; }

.guest-name-field:focus-within { border-color: #638ed5; box-shadow: 0 0 0 3px #638ed520; }

.guest-name-hint { margin: 7px 0 13px; color: #8191a7; font-size: 10px; line-height: 1.5; }

.notification-bell { position: relative; }

.notification-count { position: absolute; top: -5px; right: -5px; min-width: 17px; height: 17px; padding: 0 4px; display: grid; place-items: center; border: 2px solid #fff; border-radius: 12px; color: white; background: #d94d61; font-size: 9px; font-weight: 750; line-height: 1; }

.notification-count[hidden] { display: none; }

.notification-dropdown[popover] { position: fixed; inset: auto; margin: 0; width: 360px; max-width: calc(100vw - 24px); padding: 0; border: 1px solid #dce5f1; border-radius: 14px; background: #fff; color: #18314d; overflow-y: auto; box-shadow: 0 12px 50px #102d5526; text-align: left; }

.notification-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 17px 16px; border-bottom: 1px solid #edf1f7; position: sticky; top: 0; background: white; z-index: 1; }

.notification-heading h3 { margin: 0; font-size: 14px; }

.notification-heading button { padding: 4px 0; border: 0; background: transparent; color: #2a5298; cursor: pointer; font-size: 11px; }

.notification-heading button:disabled { color: #94a3b8; cursor: default; }

.notification-item { display: flex; gap: 10px; align-items: flex-start; padding: 13px 16px; border-bottom: 1px solid #f0f3f8; color: #34516f; text-decoration: none; }

.notification-item:hover { background: #f4f7fc; }

.notification-item.unread { background: #edf4ff; }

.notification-item.unread:hover { background: #e4eeff; }

.notification-item > img { width: 33px; height: 33px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }

.notification-item > span:not(.notification-unread-dot) { flex: 1; min-width: 0; }

.notification-text { display: block; font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }

.notification-item time { display: block; margin-top: 5px; font-size: 10px; color: #8293a9; }

.notification-unread-dot { width: 6px; height: 6px; border-radius: 50%; background: #3e75c9; flex-shrink: 0; margin-top: 6px; }

.notification-dropdown .notification-empty { padding: 24px 18px; margin: 0; font-size: 12px; line-height: 1.7; color: #8293a9; }

.notification-dropdown .notification-feedback { padding: 10px 16px; color: #ae3440; font-size: 11px; }

.notification-dropdown .notification-feedback:empty { display: none; }

.notification-item:focus-visible, .notification-heading button:focus-visible { outline: 2px solid #2a5298; outline-offset: -3px; }

.room-chat-section .chat-input-area { position: relative; }

.mention-menu { position: absolute; bottom: calc(100% - 4px); left: 20px; right: 20px; max-height: 280px; overflow-y: auto; border: 1px solid #dce5f2; border-radius: 12px; background: #fff; box-shadow: 0 -6px 30px #17365e18; padding: 6px; z-index: 10; }

.mention-menu[hidden] { display: none; }

.mention-menu-label { padding: 6px 9px; color: #7890ab; font-size: 10px; text-transform: uppercase; letter-spacing: 1px; }

.mention-menu button { width: 100%; display: flex; align-items: center; gap: 10px; padding: 9px; border: 0; border-radius: 7px; background: transparent; color: #18314d; cursor: pointer; text-align: left; font-size: 13px; }

.mention-menu button[aria-selected="true"], .mention-menu button:hover { background: #edf4ff; }

.mention-menu img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }

.mention-menu small { margin-left: auto; color: #7890ab; font-size: 10px; }

.user-mention { display: inline; color: #245caa; background: #dceaff; padding: 1px 4px; border-radius: 4px; text-decoration: none; font-weight: 650; }

a.user-mention:hover { text-decoration: underline; }

.msg.me .user-mention { color: #fff; background: #ffffff26; }

.msg-bubble.mentions-you { box-shadow: 0 0 0 2px #e9b84e; }

.mention-self { background: #fff0c2; color: #79591a; }

.mention-label { color: #9c7020; font-size: 10px; font-weight: 650; margin-bottom: 5px; }

.sidebar-friend-count { margin-left: auto; color: #a7bfdf; font-size: 10px; letter-spacing: 0; }

#onlineFriendsList > .room-meta { white-space: normal; line-height: 1.6; }

.friend-status.offline { color: #94a3b8; }

#friendFeedback.error { color: #b42332; }

.friend-requests-section { margin: 0 0 18px; }

.friend-requests-section[hidden] { display: none; }

.friend-request-card { margin-bottom: 8px; padding: 11px; border: 1px solid #ffffff1c; border-radius: 10px; background: #ffffff06; }

.friend-request-person { display: flex; align-items: center; gap: 9px; min-width: 0; font-size: 12px; }

.friend-request-person img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }

.friend-request-person span { min-width: 0; overflow-wrap: anywhere; }

.friend-request-person small { display: block; color: #a8bdd8; font-size: 10px; margin-top: 3px; }

.friend-request-actions { display: flex; gap: 7px; margin-top: 10px; }

.friend-request-actions button { flex: 1; border: 0; border-radius: 6px; padding: 8px; color: #18375f; background: #dceaff; font-size: 11px; cursor: pointer; }

.friend-request-actions .secondary { background: #ffffff0d; color: #c5d5eb; border: 1px solid #ffffff1a; }

.friend-request-actions button:disabled { opacity: 0.5; cursor: wait; }

.chat-feedback-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 36px; padding: 3px 20px; border-top: 1px solid #edf1f7; background: #fff; flex-shrink: 0; }

.typing-indicator { display: flex; align-items: center; gap: 8px; min-width: 0; visibility: hidden; color: #64748b; font-size: 12px; }

.typing-indicator.active { visibility: visible; }

#typingText { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.typing-dots { display: inline-flex; gap: 3px; flex-shrink: 0; }

.typing-dots i { width: 4px; height: 4px; border-radius: 50%; background: #6b8cc2; animation: typing-bounce 1.2s infinite ease-in-out; }

.typing-dots i:nth-child(2) { animation-delay: 0.15s; }

.typing-dots i:nth-child(3) { animation-delay: 0.3s; }

.typing-indicator:not(.active) .typing-dots i { animation-play-state: paused; }

.chat-sound-toggle { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; padding: 5px 7px; border: 0; border-radius: 6px; background: transparent; color: #64748b; font-size: 11px; white-space: nowrap; cursor: pointer; }

.chat-sound-toggle:hover { background: #f0f4fa; color: #2a5298; }

.chat-sound-toggle:focus-visible { outline: 2px solid #2a5298; outline-offset: 2px; }

@keyframes typing-bounce { 0%, 60%, 100% { transform: translateY(0); opacity: 0.45; } 30% { transform: translateY(-3px); opacity: 1; } }

@media (prefers-reduced-motion: reduce) { .typing-dots i { animation: none; } }



.password-settings { margin-top: 1rem; border: 1px solid #ffffff40; border-radius: 12px; padding: 0.75rem; }

.password-settings summary { cursor: pointer; color: white; font-size: 0.85rem; }

.password-form { display: grid; gap: 0.7rem; margin-top: 0.9rem; }

.password-form label { display: grid; gap: 0.3rem; color: white; font-size: 0.75rem; }

.password-form input { width: 100%; min-width: 0; padding: 0.6rem; border: 1px solid #ffffff60; border-radius: 8px; color: #18314d; background: white; }

.password-form input:focus-visible { outline: 2px solid #a8c9ff; outline-offset: 2px; }

.password-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.password-actions button { border: 0; border-radius: 8px; padding: 0.5rem 0.7rem; background: white; color: #1e3c72; font-size: 0.75rem; cursor: pointer; }

.password-actions button:disabled { opacity: 0.6; cursor: wait; }



* {

      margin: 0;

      padding: 0;

      box-sizing: border-box;

      font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    }



    html, body {

      width: 100%;

      height: 100%;

      overflow: hidden;

    }



    /* ---------- BACKGROUND VIDEO ---------- */

    .video-background {

      position: fixed;

      top: 0; left: 0;

      width: 100%; height: 100%;

      z-index: -2;

      overflow: hidden;

      background: #0a1428;

    }

    .video-background video {

      position: absolute;

      top: 50%; left: 50%;

      min-width: 100%; min-height: 100%;

      width: auto; height: auto;

      transform: translate(-50%, -50%);

      object-fit: cover;

      filter: brightness(0.9) saturate(1.1);

    }

    .video-overlay {

      position: fixed;

      top: 0; left: 0;

      width: 100%; height: 100%;

      z-index: -1;

      background: linear-gradient(135deg,

        rgba(10, 20, 40, 0.78) 0%,

        rgba(15, 35, 70, 0.68) 50%,

        rgba(10, 20, 40, 0.82) 100%);

      pointer-events: none;

    }



    /* ---------- AUTH SCREEN ---------- */

    .auth-wrapper {

      position: absolute;

      inset: 0;

      display: flex;

      align-items: flex-start;

      justify-content: center;

      padding: 1.5rem;

      overflow-y: auto;

    }

    .auth-wrapper.hide { display: none !important; }



    .auth-screen {

      display: flex;

      /* Center short forms; let taller forms scroll from the top. */
      margin-block: auto;

      flex-shrink: 0;

      max-width: 1100px;

      width: 100%;

      background: rgba(255, 255, 255, 0.92);

      backdrop-filter: blur(18px);

      -webkit-backdrop-filter: blur(18px);

      border: 1px solid rgba(255, 255, 255, 0.5);

      border-radius: 2.5rem;

      box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5), 0 8px 20px -8px rgba(0, 0, 0, 0.4);

      overflow: hidden;

    }



    .auth-panel {

      flex: 1;

      padding: 3rem 2.5rem;

      display: flex;

      flex-direction: column;

      justify-content: center;

      background: rgba(255, 255, 255, 0.55);

    }

    .login-panel { background: rgba(255, 255, 255, 0.5); }

    .register-panel {

      background: rgba(248, 251, 255, 0.6);

      background-image: radial-gradient(rgba(217, 226, 239, 0.6) 0.8px, transparent 0.8px);

      background-size: 24px 24px;

    }

    .panel-divider {

      width: 2px;

      background: linear-gradient(to bottom, #e2e8f0 10%, #cbd5e1 50%, #e2e8f0 90%);

      margin: 3rem 0;

      opacity: 0.7;

    }



    .chat-brand {

      display: flex;

      align-items: center;

      gap: 0.75rem;

      margin-bottom: 2rem;

    }

    .chat-brand i {

      font-size: 2rem;

      background: linear-gradient(135deg, #1e3c72, #2a5298);

      -webkit-background-clip: text;

      -webkit-text-fill-color: transparent;

      background-clip: text;

    }

    .chat-brand span {

      font-weight: 700;

      font-size: 1.4rem;

      letter-spacing: -0.5px;

      background: linear-gradient(135deg, #0b1e33, #1e3a6b);

      -webkit-background-clip: text;

      -webkit-text-fill-color: transparent;

      background-clip: text;

    }



    .auth-panel h2 {

      font-size: 1.9rem;

      font-weight: 700;

      color: #0a1c2f;

      margin-bottom: 0.5rem;

    }

    .auth-sub {

      font-size: 0.95rem;

      color: #3d5670;

      margin-bottom: 2rem;

      line-height: 1.5;

    }



    .input-group {

      margin-bottom: 1.25rem;

      position: relative;

    }

    .input-group i {

      position: absolute;

      left: 18px;

      top: 50%;

      transform: translateY(-50%);

      color: #7b93ad;

      font-size: 1rem;

      pointer-events: none;

    }

    .input-group input {

      width: 100%;

      padding: 1rem 1rem 1rem 3rem;

      border: 1.5px solid rgba(221, 229, 237, 0.9);

      border-radius: 60px;

      font-size: 0.95rem;

      background: rgba(255, 255, 255, 0.95);

      transition: all 0.2s;

      outline: none;

      color: #102a41;

      font-weight: 500;

    }

    .input-group input:focus {

      border-color: #2a5298;

      box-shadow: 0 0 0 4px rgba(42, 82, 152, 0.15);

      background: #ffffff;

    }

    .input-group input:focus + i { color: #2a5298; }

    .input-group input::placeholder { color: #93a9c2; font-weight: 400; }



    .btn {

      width: 100%;

      padding: 1rem;

      border: none;

      border-radius: 60px;

      font-weight: 600;

      font-size: 1rem;

      cursor: pointer;

      transition: 0.2s ease;

      display: flex;

      align-items: center;

      justify-content: center;

      gap: 10px;

      margin-top: 1.2rem;

    }

    .btn-primary {

      background: linear-gradient(135deg, #1e3c72, #2a5298);

      color: white;

      box-shadow: 0 10px 18px -8px rgba(30, 60, 114, 0.6);

    }

    .btn-primary:hover {

      background: linear-gradient(135deg, #16305a, #1f4685);

      transform: translateY(-2px);

    }



    .auth-footer {

      margin-top: 1.5rem;

      text-align: center;

      font-size: 0.88rem;

      color: #3d5670;

    }

    .auth-footer a {

      color: #1e3c72;

      text-decoration: none;

      font-weight: 600;

    }



    .forgot-link {

      display: block;

      text-align: right;

      margin-top: -0.5rem;

      margin-bottom: 0.5rem;

      font-size: 0.85rem;

    }

    .forgot-link a {

      color: #4d6b8c;

      text-decoration: none;

      font-weight: 500;

    }



    .message {

      font-size: 0.85rem;

      margin-top: 0.5rem;

      min-height: 1.2rem;

    }

    .message.success { color: #0d7a4b; }

    .message.error { color: #c0392b; }



    /* ================================================= */

    /* ============ FULL-SCREEN DASHBOARD ============== */

    /* ================================================= */

    .dashboard {

      display: none;

      position: fixed;

      inset: 0;

      width: 100vw;

      height: 100vh;

      height: 100dvh;

      background: #f4f7fc;

      z-index: 10;

      overflow: hidden;

    }

    .dashboard.show { display: flex !important; }



    /* ---------- SIDEBAR ---------- */

    .dash-sidebar {

      width: 320px;

      flex-shrink: 0;

      background: linear-gradient(160deg, #1e3c72, #2a5298);

      color: #ffffff;

      padding: 1.8rem 1.3rem;

      display: flex;

      flex-direction: column;

      align-items: center;

      text-align: center;

      overflow-y: auto;

    }

    .dash-sidebar::-webkit-scrollbar { width: 6px; }

    .dash-sidebar::-webkit-scrollbar-thumb {

      background: rgba(255,255,255,0.25);

      border-radius: 10px;

    }



    .dp-wrapper {

      border: 0;

      padding: 0;

      background: transparent;

      position: relative;

      width: 100px;

      height: 100px;

      margin-bottom: 0.9rem;

      cursor: pointer;

      flex-shrink: 0;

    }

    .dp-wrapper img {

      width: 100%;

      height: 100%;

      border-radius: 50%;

      object-fit: cover;

      border: 4px solid rgba(255, 255, 255, 0.8);

      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);

      background: #d9e2ef;

      transition: transform 0.2s;

    }

    .dp-wrapper:hover img { transform: scale(1.03); }

    .dp-wrapper:focus-visible { outline: 2px solid white; outline-offset: 4px; border-radius: 50%; }

    #changePictureBtn { align-self: flex-start; margin-bottom: 0.5rem; }

    .nick-feedback.error { color: #ffd5d5; }



    .dp-overlay {

      position: absolute;

      bottom: 4px;

      right: 4px;

      width: 28px;

      height: 28px;

      background: #ffffff;

      border-radius: 50%;

      display: flex;

      align-items: center;

      justify-content: center;

      color: #1e3c72;

      font-size: 0.72rem;

      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);

    }

    #dpInput { display: none; }



    .sidebar-toolbar { width: 100%; display: flex; justify-content: flex-end; margin-bottom: 0.5rem; }

    #roomsView > .view-header { flex-wrap: wrap; gap: 0.75rem; }

    .rooms-header-actions { display: flex; align-items: center; gap: 1rem; margin-left: auto; }

    .rooms-header-actions .notification-bell { color: #2a5298; background: #f1f5f9; border-color: #e2e8f0; }

    .rooms-header-actions .notification-bell:hover,

    .rooms-header-actions .notification-menu[open] .notification-bell { background: #e2e8f0; }

    .rooms-header-actions .notification-bell:focus-visible { outline-color: #2a5298; }

    @media (max-width: 480px) {

      .rooms-header-actions { gap: 0.5rem; }

      .rooms-header-actions > span { display: none; }

    }

    .notification-menu { position: relative; }

    .notification-bell {

      display: flex;

      align-items: center;

      justify-content: center;

      width: 40px;

      height: 40px;

      border-radius: 50%;

      border: 1px solid rgba(255, 255, 255, 0.25);

      background: rgba(255, 255, 255, 0.12);

      color: #fff;

      cursor: pointer;

      list-style: none;

    }

    .notification-bell::-webkit-details-marker { display: none; }

    .notification-bell:hover,

    .notification-menu[open] .notification-bell { background: rgba(255, 255, 255, 0.25); }

    .notification-bell:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

    .notification-dropdown {

      position: absolute;

      top: calc(100% + 8px);

      right: 0;

      width: 220px;

      max-width: calc(100vw - 4rem);

      padding: 1rem;

      border-radius: 1rem;

      background: #fff;

      color: #102a41;

      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);

      text-align: left;

      z-index: 20;

    }

    .notification-dropdown h3 { font-size: 0.9rem; margin-bottom: 0.6rem; }

    .notification-dropdown p { font-size: 0.8rem; color: #5d738b; }



    .dash-nickname {

      display: flex;

      align-items: center;

      gap: 0.5rem;

      margin-bottom: 0.3rem;

      justify-content: center;

      flex-wrap: wrap;

    }

    .dash-nickname h2 {

      font-size: 1.2rem;

      font-weight: 700;

      word-break: break-word;

    }

    .edit-nick-btn {

      background: rgba(255, 255, 255, 0.18);

      border: none;

      color: #ffffff;

      padding: 0.45rem 0.7rem;

      gap: 0.4rem;

      border-radius: 30px;

      cursor: pointer;

      font-size: 0.6rem;

      display: flex;

      align-items: center;

      justify-content: center;

      flex-shrink: 0;

    }

    .edit-nick-btn:hover { background: rgba(255, 255, 255, 0.32); }

    .nick-feedback { font-size: 0.75rem; margin: 0.4rem 0; color: #ffffff; }

    .nick-feedback:empty { display: none; }



    .nick-edit-row {

      display: none;

      gap: 0.4rem;

      margin-top: 0.4rem;

      width: 100%;

      justify-content: center;

    }

    .nick-edit-row.active { display: flex; }

    .nick-edit-row input {

      min-width: 0;

      flex: 1;

      padding: 0.45rem 0.7rem;

      border-radius: 30px;

      border: none;

      outline: none;

      font-size: 0.85rem;

      width: 140px;

      background: rgba(255, 255, 255, 0.95);

      color: #102a41;

      font-weight: 600;

      text-align: center;

    }

    .nick-edit-row button {

      border: none;

      border-radius: 30px;

      padding: 0.45rem 0.8rem;

      font-size: 0.75rem;

      font-weight: 600;

      cursor: pointer;

      background: #ffffff;

      color: #1e3c72;

    }

    .nick-edit-row .cancel-btn {

      background: rgba(255, 255, 255, 0.2);

      color: #ffffff;

    }



    .dash-email {

      font-size: 0.74rem;

      color: rgba(255, 255, 255, 0.7);

      margin-bottom: 1rem;

      word-break: break-word;

    }



    .about-box {

      width: 100%;

      background: rgba(255, 255, 255, 0.12);

      border: 1px solid rgba(255, 255, 255, 0.18);

      border-radius: 1.1rem;

      padding: 0.9rem 0.85rem;

      text-align: left;

      margin-bottom: 1rem;

    }

    .about-header {

      display: flex;

      align-items: center;

      justify-content: space-between;

      margin-bottom: 0.5rem;

    }

    .about-header span {

      font-size: 0.68rem;

      font-weight: 700;

      text-transform: uppercase;

      letter-spacing: 0.08em;

      color: rgba(255, 255, 255, 0.85);

      display: flex;

      align-items: center;

      gap: 0.35rem;

    }

    .about-edit-btn {

      background: transparent;

      border: none;

      color: rgba(255, 255, 255, 0.7);

      cursor: pointer;

      font-size: 0.75rem;

    }

    .about-edit-btn:hover { color: #ffffff; }



    .about-text {

      font-size: 0.8rem;

      line-height: 1.45;

      color: rgba(255, 255, 255, 0.92);

      word-break: break-word;

      font-style: italic;

    }

    .about-text.empty { color: rgba(255, 255, 255, 0.5); }



    .about-edit-area { display: none; }

    .about-edit-area.active { display: block; }

    .about-edit-area textarea {

      width: 100%;

      padding: 0.6rem;

      border-radius: 0.8rem;

      border: 1px solid rgba(255, 255, 255, 0.35);

      background: rgba(255, 255, 255, 0.12);

      color: #ffffff;

      font-size: 0.8rem;

      resize: vertical;

      min-height: 60px;

      outline: none;

      line-height: 1.45;

      font-family: inherit;

    }

    .about-edit-area textarea:focus { border-color: rgba(255, 255, 255, 0.8); }

    .about-edit-area textarea::placeholder { color: rgba(255, 255, 255, 0.45); }



    .about-actions {

      display: flex;

      gap: 0.4rem;

      margin-top: 0.5rem;

    }

    .about-actions button {

      flex: 1;

      padding: 0.45rem;

      border: none;

      border-radius: 30px;

      font-size: 0.72rem;

      font-weight: 600;

      cursor: pointer;

    }

    .about-save-btn { background: #ffffff; color: #1e3c72; }

    .about-cancel-btn { background: rgba(255, 255, 255, 0.2); color: #ffffff; }



    /* ---------- SIDEBAR ROOM LIST ---------- */

    .sidebar-section-title {

      width: 100%;

      text-align: left;

      font-size: 0.68rem;

      font-weight: 700;

      text-transform: uppercase;

      letter-spacing: 0.08em;

      color: rgba(255, 255, 255, 0.7);

      margin-bottom: 0.5rem;

      display: flex;

      align-items: center;

      gap: 0.35rem;

    }



    .room-list {

      width: 100%;

      display: flex;

      flex-direction: column;

      gap: 0.35rem;

      margin-bottom: 1rem;

    }



    .room-item {

      display: flex;

      align-items: center;

      gap: 0.6rem;

      padding: 0.6rem 0.75rem;

      border-radius: 0.7rem;

      background: rgba(255, 255, 255, 0.08);

      border: 1px solid rgba(255, 255, 255, 0.1);

      cursor: pointer;

      transition: background 0.2s, transform 0.15s;

      text-align: left;

    }

    .room-item:hover {

      background: rgba(255, 255, 255, 0.18);

      transform: translateX(3px);

    }

    .room-item.active {

      background: rgba(255, 255, 255, 0.25);

      border-color: rgba(255, 255, 255, 0.5);

    }



    .online-friend { width: 100%; font-family: inherit; }

    .online-friend .room-name,

    .online-friend .room-meta { display: block; }

    .friend-avatar { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }

    .friend-status { color: #22c55e; font-size: 0.5rem; margin-right: 3px; }

    .online-friend:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; }



    .room-icon {

      width: 30px;

      height: 30px;

      border-radius: 9px;

      background: rgba(255, 255, 255, 0.2);

      display: flex;

      align-items: center;

      justify-content: center;

      font-size: 0.82rem;

      flex-shrink: 0;

      color: #ffffff;

    }



    .room-info { flex: 1; min-width: 0; }

    .room-name {

      font-size: 0.82rem;

      font-weight: 600;

      color: #ffffff;

      white-space: nowrap;

      overflow: hidden;

      text-overflow: ellipsis;

    }

    .room-meta {

      font-size: 0.66rem;

      color: rgba(255, 255, 255, 0.65);

      white-space: nowrap;

      overflow: hidden;

      text-overflow: ellipsis;

    }



    .room-badge {

      background: #ef4444;

      color: #ffffff;

      font-size: 0.6rem;

      font-weight: 700;

      padding: 0.1rem 0.4rem;

      border-radius: 20px;

      flex-shrink: 0;

    }



    .view-rooms-btn {

      width: 100%;

      padding: 0.75rem;

      border-radius: 60px;

      background: rgba(255, 255, 255, 0.15);

      border: 1px solid rgba(255, 255, 255, 0.25);

      color: #ffffff;

      font-size: 0.82rem;

      font-weight: 600;

      cursor: pointer;

      display: flex;

      align-items: center;

      justify-content: center;

      gap: 0.4rem;

      transition: background 0.2s;

      margin-bottom: 0.7rem;

    }

    .view-rooms-btn:hover { background: rgba(255, 255, 255, 0.25); }



    .logout-btn {

      margin-top: auto;

      width: 100%;

      padding: 0.75rem;

      border: 1.5px solid rgba(255, 255, 255, 0.4);

      background: transparent;

      color: #ffffff;

      border-radius: 60px;

      font-size: 0.82rem;

      font-weight: 600;

      cursor: pointer;

      display: flex;

      align-items: center;

      justify-content: center;

      gap: 0.4rem;

      transition: background 0.2s;

      flex-shrink: 0;

    }

    .logout-btn:hover { background: rgba(255, 255, 255, 0.15); }



    /* ================================================= */

    /* ============ MAIN CONTENT AREA ================== */

    /* ================================================= */

    .dash-main {

      flex: 1;

      display: flex;

      flex-direction: column;

      background: #f9fbff;

      height: 100vh;

      overflow: hidden;

      position: relative;

    }



    .view {

      display: none;

      flex-direction: column;

      height: 100%;

      width: 100%;

    }

    .view.active { display: flex; }



    .view-header {

      padding: 1.2rem 1.8rem;

      border-bottom: 1px solid #e2e8f0;

      display: flex;

      align-items: center;

      justify-content: space-between;

      background: #ffffff;

      flex-shrink: 0;

    }

    .view-header h3 {

      font-size: 1.1rem;

      font-weight: 700;

      color: #0a1c2f;

      display: flex;

      align-items: center;

      gap: 0.6rem;

    }

    .view-header h3 i { color: #2a5298; }



    .back-btn {

      background: #f1f5f9;

      border: none;

      color: #1e3c72;

      padding: 0.5rem 0.9rem;

      border-radius: 30px;

      font-size: 0.8rem;

      font-weight: 600;

      cursor: pointer;

      display: flex;

      align-items: center;

      gap: 0.4rem;

      transition: background 0.2s;

    }

    .back-btn:hover { background: #e2e8f0; }

    .private-chat-header { flex-wrap: wrap; gap: 1rem; }

    .friend-actions { display: flex; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 8px; }

    .add-friend-btn {

      border: none;

      border-radius: 30px;

      padding: 0.65rem 1rem;

      background: #2a5298;

      color: #fff;

      font: inherit;

      font-size: 0.8rem;

      font-weight: 600;

      cursor: pointer;

    }

    .add-friend-btn:hover:not(:disabled) { background: #1e3c72; }

    .add-friend-btn:disabled { background: #e0f2e9; color: #166534; cursor: default; }

    .add-friend-btn:focus-visible { outline: 2px solid #2a5298; outline-offset: 3px; }

    #friendFeedback { font-size: 0.75rem; color: #5d738b; }



    /* ---------- ROOMS GRID VIEW ---------- */

    .rooms-view-body {

      flex: 1;

      padding: 1.8rem;

      overflow-y: auto;

    }

    .rooms-view-body::-webkit-scrollbar { width: 8px; }

    .rooms-view-body::-webkit-scrollbar-thumb {

      background: #cbd5e1;

      border-radius: 10px;

    }



    .rooms-section-title {

      font-size: 0.78rem;

      font-weight: 700;

      text-transform: uppercase;

      letter-spacing: 0.08em;

      color: #5d738b;

      margin-bottom: 0.8rem;

    }



    .rooms-grid {

      display: grid;

      grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));

      gap: 1rem;

    }



    .room-card {

      background: #ffffff;

      border: 1.5px solid #e2e8f0;

      border-radius: 1.2rem;

      padding: 1.3rem;

      cursor: pointer;

      transition: all 0.2s;

      display: flex;

      flex-direction: column;

      gap: 0.6rem;

    }

    .room-card:hover {

      border-color: #2a5298;

      box-shadow: 0 10px 24px -10px rgba(30, 60, 114, 0.35);

      transform: translateY(-3px);

    }



    .room-card-top {

      display: flex;

      align-items: center;

      gap: 0.8rem;

    }

    .room-card-icon {

      width: 46px;

      height: 46px;

      border-radius: 14px;

      display: flex;

      align-items: center;

      justify-content: center;

      font-size: 1.2rem;

      color: #ffffff;

      flex-shrink: 0;

    }

    .room-card-info { flex: 1; min-width: 0; }

    .room-card-name {

      font-size: 0.98rem;

      font-weight: 700;

      color: #0a1c2f;

      white-space: nowrap;

      overflow: hidden;

      text-overflow: ellipsis;

    }

    .room-card-members {

      font-size: 0.76rem;

      color: #7b93ad;

    }



    .room-card-desc {

      font-size: 0.82rem;

      color: #5d738b;

      line-height: 1.45;

      display: -webkit-box;

      -webkit-line-clamp: 2;

      -webkit-box-orient: vertical;

      overflow: hidden;

    }



    .room-card-footer {

      display: flex;

      align-items: center;

      justify-content: space-between;

      margin-top: 0.2rem;

    }

    .room-card-tag {

      font-size: 0.7rem;

      font-weight: 600;

      padding: 0.25rem 0.6rem;

      border-radius: 20px;

      background: #eef4ff;

      color: #1e3c72;

    }

    .room-card-avatars {

      display: flex;

      align-items: center;

    }

    .room-card-avatars img {

      width: 24px;

      height: 24px;

      border-radius: 50%;

      border: 2px solid #ffffff;

      margin-left: -8px;

      object-fit: cover;

    }

    .room-card-avatars img:first-child { margin-left: 0; }



    /* ================================================= */

    /* ============ ROOM VIEW WITH USER PANEL ========== */

    /* ================================================= */

    .room-view-layout {

      display: flex;

      flex: 1;

      overflow: hidden;

      min-height: 0;

    }



    /* LEFT: Group chat */

    .room-chat-section {

      flex: 1;

      display: flex;

      flex-direction: column;

      min-width: 0;

      border-right: 1px solid #e2e8f0;

      background: #f4f7fc;

    }



    .room-chat-body {

      flex: 1;

      padding: 1.5rem 1.8rem;

      overflow-y: auto;

      display: flex;

      flex-direction: column;

      gap: 1rem;

    }

    .room-chat-body::-webkit-scrollbar { width: 8px; }

    .room-chat-body::-webkit-scrollbar-thumb {

      background: #cbd5e1;

      border-radius: 10px;

    }



    /* RIGHT: User panel */

    .room-users-panel {

      width: 300px;

      flex-shrink: 0;

      background: #ffffff;

      display: flex;

      flex-direction: column;

      overflow: hidden;

    }



    .room-users-header {

      padding: 1rem 1.2rem;

      border-bottom: 1px solid #e2e8f0;

      display: flex;

      align-items: center;

      justify-content: space-between;

      flex-shrink: 0;

    }

    .room-users-header h4 {

      font-size: 0.85rem;

      font-weight: 700;

      color: #0a1c2f;

      text-transform: uppercase;

      letter-spacing: 0.06em;

      display: flex;

      align-items: center;

      gap: 0.4rem;

    }

    .room-users-header h4 i { color: #2a5298; }

    .room-users-header .count-badge {

      background: #eef4ff;

      color: #1e3c72;

      font-size: 0.7rem;

      font-weight: 700;

      padding: 0.2rem 0.55rem;

      border-radius: 20px;

    }



    .room-users-list {

      min-height: 0;

      flex: 1;

      overflow-y: auto;

      padding: 0.6rem;

    }

    .room-users-list::-webkit-scrollbar { width: 6px; }

    .room-users-list::-webkit-scrollbar-thumb {

      background: #cbd5e1;

      border-radius: 10px;

    }



    .panel-user-item {

      display: flex;

      align-items: center;

      gap: 0.7rem;

      padding: 0.7rem 0.8rem;

      border-radius: 0.8rem;

      cursor: pointer;

      transition: background 0.15s;

      margin-bottom: 0.2rem;

    }

    .panel-user-item:hover { background: #f1f5f9; }

    .panel-user-item.active { background: #eef4ff; }



    .panel-user-avatar {

      position: relative;

      flex-shrink: 0;

    }

    .panel-user-avatar img {

      width: 40px;

      height: 40px;

      border-radius: 50%;

      object-fit: cover;

      border: 2px solid #ffffff;

      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);

    }

    .panel-user-status {

      position: absolute;

      bottom: 0;

      right: 0;

      width: 11px;

      height: 11px;

      border-radius: 50%;

      border: 2px solid #ffffff;

    }

    .status-online { background: #22c55e; }

    .status-away { background: #f59e0b; }

    .status-offline { background: #94a3b8; }



    .panel-user-info { flex: 1; min-width: 0; }

    .panel-user-name {

      font-size: 0.85rem;

      font-weight: 600;

      color: #0a1c2f;

      white-space: nowrap;

      overflow: hidden;

      text-overflow: ellipsis;

    }

    .panel-user-about {

      font-size: 0.72rem;

      color: #7b93ad;

      white-space: nowrap;

      overflow: hidden;

      text-overflow: ellipsis;

      margin-top: 1px;

    }



    .panel-chat-btn {

      width: 32px;

      height: 32px;

      border-radius: 50%;

      border: none;

      background: linear-gradient(135deg, #1e3c72, #2a5298);

      color: #ffffff;

      font-size: 0.75rem;

      cursor: pointer;

      display: flex;

      align-items: center;

      justify-content: center;

      flex-shrink: 0;

      transition: transform 0.15s;

      box-shadow: 0 4px 10px -4px rgba(30, 60, 114, 0.6);

    }

    .panel-chat-btn:hover { transform: scale(1.12); }



    /* ---------- CHAT MESSAGES (shared) ---------- */

    .chat-body {

      flex: 1;

      padding: 1.5rem 2rem;

      overflow-y: auto;

      display: flex;

      flex-direction: column;

      gap: 1rem;

      background: #f4f7fc;

    }

    .chat-body::-webkit-scrollbar { width: 8px; }

    .chat-body::-webkit-scrollbar-thumb {

      background: #cbd5e1;

      border-radius: 10px;

    }



    .msg {

      display: flex;

      gap: 0.7rem;

      max-width: 70%;

    }

    .msg.other { align-self: flex-start; }

    .msg.me { align-self: flex-end; flex-direction: row-reverse; }



    .msg-avatar {

      width: 38px;

      height: 38px;

      border-radius: 50%;

      object-fit: cover;

      flex-shrink: 0;

      border: 2px solid #ffffff;

      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);

      background: #d9e2ef;

    }

    .msg-bubble {

      padding: 0.75rem 1.1rem;

      border-radius: 1.3rem;

      font-size: 0.9rem;

      line-height: 1.5;

      color: #102a41;

      background: #ffffff;

      box-shadow: 0 3px 10px rgba(0, 0, 0, 0.06);

      word-break: break-word;

    }

    .msg.me .msg-bubble {

      background: linear-gradient(135deg, #1e3c72, #2a5298);

      color: #ffffff;

      border-bottom-right-radius: 0.3rem;

    }

    .msg.other .msg-bubble { border-bottom-left-radius: 0.3rem; }

    .msg-time {

      font-size: 0.66rem;

      color: #8fa5bd;

      margin-top: 0.3rem;

      display: block;

    }

    .msg.me .msg-time { text-align: right; color: rgba(255, 255, 255, 0.7); }



    .msg-sender {

      font-size: 0.7rem;

      font-weight: 700;

      color: #2a5298;

      margin-bottom: 0.2rem;

    }



    /* ---------- CHAT INPUT ---------- */

    .chat-input-area {

      padding: 1rem 1.8rem 1.2rem;

      border-top: 1px solid #e2e8f0;

      display: flex;

      gap: 0.6rem;

      align-items: center;

      background: #ffffff;

      flex-shrink: 0;

    }

    .chat-input-area input {

      flex: 1;

      padding: 0.9rem 1.2rem;

      border-radius: 60px;

      border: 1.5px solid #dde5ed;

      background: #f9fbff;

      font-size: 0.9rem;

      outline: none;

      color: #102a41;

      transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;

    }

    .chat-input-area input:focus {

      border-color: #2a5298;

      background: #ffffff;

      box-shadow: 0 0 0 4px rgba(42, 82, 152, 0.1);

    }

    .chat-input-area input::placeholder { color: #93a9c2; }



    .send-btn {

      width: 46px;

      height: 46px;

      border-radius: 50%;

      border: none;

      background: linear-gradient(135deg, #1e3c72, #2a5298);

      color: #ffffff;

      font-size: 0.95rem;

      cursor: pointer;

      display: flex;

      align-items: center;

      justify-content: center;

      flex-shrink: 0;

      box-shadow: 0 8px 16px -6px rgba(30, 60, 114, 0.6);

      transition: transform 0.2s;

    }

    .send-btn:hover { transform: scale(1.06); }



    /* ---------- EMPTY STATE ---------- */

    .empty-state {

      display: flex;

      flex-direction: column;

      align-items: center;

      justify-content: center;

      height: 100%;

      color: #7b93ad;

      text-align: center;

      padding: 2rem;

    }

    .empty-state i {

      font-size: 2.5rem;

      margin-bottom: 0.8rem;

      color: #cbd5e1;

    }

    .empty-state h4 {

      font-size: 1rem;

      color: #3d5670;

      margin-bottom: 0.3rem;

    }

    .empty-state p { font-size: 0.82rem; }



    /* ---------- RESPONSIVE ---------- */

    .mobile-toolbar, .sidebar-close, .sidebar-backdrop, .mobile-members-toggle { display: none; }

    .dash-main, .view, .room-chat-section { min-width: 0; min-height: 0; }

    .chat-input-area input, .room-chat-input input { min-width: 0; }

    @media (max-width: 1000px) {

      .room-users-panel { width: 260px; }

    }

    @media (max-width: 900px) {

      .dashboard.show { flex-direction: column; }

      .dash-sidebar {

        position: absolute;

        inset: 0 auto 0 0;

        width: min(320px, 88vw);

        height: 100%;

        max-height: none;

        padding: 1.3rem 1.2rem;

        z-index: 40;

        visibility: hidden;

        transform: translateX(-100%);

      }

      .dashboard.sidebar-open .dash-sidebar { visibility: visible; transform: translateX(0); }

      .mobile-toolbar { display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 1rem; background: #1e3c72; color: #fff; flex-shrink: 0; }

      .mobile-menu-btn { border: 1px solid rgba(255,255,255,0.4); border-radius: 0.6rem; background: transparent; color: #fff; padding: 0.65rem 0.8rem; min-height: 44px; cursor: pointer; }

      .mobile-menu-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

      .sidebar-close { display: block; align-self: flex-end; margin-bottom: 0.75rem; }

      .dashboard.sidebar-open .sidebar-backdrop { display: block; position: absolute; inset: 0; background: rgba(10,20,40,0.55); z-index: 30; }

      .view-header { flex-wrap: wrap; gap: 0.75rem; }

      .view-header > div:first-child { min-width: 0; flex-wrap: wrap; }

      .view-header h3 { overflow-wrap: anywhere; }

      .dash-main { height: auto; flex: 1; }

      .msg { max-width: 85%; }

      .rooms-grid { grid-template-columns: 1fr; }

      .room-users-panel { width: 240px; }

    }

    @media (max-width: 900px) {

      .mobile-members-toggle { display: inline-flex; min-height: 44px; align-items: center; gap: 0.5rem; }

      .room-view-layout { flex-direction: column; }

      .room-users-panel {

        display: none;

        width: 100%;

        height: auto;

        max-height: none;

        min-height: 0;

        flex: 1;

        border-top: 1px solid #e2e8f0;

        border-right: none;

      }

      #roomView.members-open .room-users-panel { display: flex; }

      #roomView.members-open .room-chat-section { display: none; }

      .room-users-list { overscroll-behavior: contain; }

      .panel-user-item { padding: 0.85rem 0.65rem; }

      .panel-chat-btn { width: 44px; height: 44px; }

      .room-chat-section { border-right: none; }

    }

    @media (max-width: 800px) {

      .auth-screen { flex-direction: column; border-radius: 2rem; }

      .panel-divider {

        width: 100%; height: 2px;

        background: linear-gradient(to right, #e2e8f0, #cbd5e1, #e2e8f0);

        margin: 0;

      }

      .auth-panel { padding: 2.2rem 1.8rem; }

    }

    @media (max-width: 480px) {

      .auth-wrapper { padding: 0.8rem; }

      .auth-panel { padding: 1.8rem 1.2rem; }

      .auth-panel h2 { font-size: 1.6rem; }

      .chat-body, .chat-input-area, .view-header { padding-left: 1.2rem; padding-right: 1.2rem; }

      .rooms-view-body { padding: 1.2rem; }

    }

  

.auth-screen.auth-single { max-width: 550px; }



/* Sidebar layout and account controls */

.dash-sidebar {

  width: 304px;

  padding: 26px 20px 20px;

  align-items: stretch;

  text-align: left;

  background: linear-gradient(175deg, #162b4c 0%, #1c3962 100%);

  border-right: 1px solid #ffffff0d;

  gap: 0;

}

.dash-sidebar > * { flex-shrink: 0; }

.sidebar-brand { display: flex; align-items: center; gap: 11px; margin: 0 4px 26px; font-size: 20px; font-weight: 750; letter-spacing: -0.5px; }

.sidebar-brand-mark { width: 39px; height: 39px; display: grid; place-items: center; border-radius: 12px; background: #ffffff12; color: #93bdff; font-size: 20px; }

.sidebar-brand small { display: block; margin-top: 2px; color: #a2b4cf; font-size: 11px; letter-spacing: 0; font-weight: 400; }

.sidebar-profile { width: 100%; padding: 22px 14px 16px; border: 1px solid #ffffff12; border-radius: 18px; background: #ffffff06; text-align: center; margin-bottom: 20px; }

.sidebar-profile .dp-wrapper { display: block; width: 82px; height: 82px; margin: 0 auto 14px; }

.sidebar-profile .dp-wrapper img { border-width: 3px; box-shadow: 0 6px 18px #00000020; }

.sidebar-profile .dp-overlay { width: 25px; height: 25px; right: -1px; bottom: 1px; font-size: 10px; }

.sidebar-profile .dash-nickname { margin: 0 0 5px; }

.sidebar-profile .dash-nickname h2 { font-size: 20px; line-height: 1.3; letter-spacing: -0.3px; }

.sidebar-profile .dash-email { margin: 0; font-size: 12px; line-height: 1.5; color: #adc0da; overflow-wrap: anywhere; }

.profile-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 17px; }

.profile-actions .edit-nick-btn { min-height: 36px; padding: 7px 5px; border: 1px solid #ffffff1c; border-radius: 8px; background: #ffffff08; font-size: 10px; gap: 6px; }

.profile-actions .edit-nick-btn:hover { background: #ffffff18; border-color: #ffffff40; }

.profile-actions #changePictureBtn { align-self: stretch; margin: 0; }

.sidebar-profile .nick-feedback { font-size: 11px; line-height: 1.5; margin: 10px 0 0; }

.sidebar-profile .nick-edit-row { margin-top: 12px; flex-wrap: wrap; gap: 6px; }

.sidebar-profile .nick-edit-row input { flex: 1 0 100%; width: 100%; padding: 10px; border-radius: 8px; font-size: 13px; text-align: left; }

.sidebar-profile .nick-edit-row button { flex: 1; min-height: 34px; border-radius: 7px; }

.dash-sidebar .view-rooms-btn { min-height: 49px; justify-content: flex-start; padding: 8px 12px; margin: 0 0 22px; gap: 11px; border-radius: 10px; border: 1px solid #78a9fa30; background: #74a4fa1c; font-size: 13px; font-weight: 600; }

.sidebar-action-icon { width: 28px; height: 28px; display: inline-grid; place-items: center; flex-shrink: 0; border-radius: 8px; font-size: 13px; }

.view-rooms-btn .sidebar-action-icon { color: #a3c7ff; background: #ffffff0a; }

.sidebar-chevron { margin-left: auto; font-size: 10px; opacity: 0.55; transition: transform 150ms; }

.dash-sidebar .about-box { padding: 0 2px 20px; border: 0; border-bottom: 1px solid #ffffff12; border-radius: 0; background: transparent; margin-bottom: 22px; }

.dash-sidebar .about-header { margin-bottom: 10px; }

.dash-sidebar .about-header span, .dash-sidebar .sidebar-section-title { color: #96accb; font-size: 10px; letter-spacing: 1.3px; font-weight: 650; }

.dash-sidebar .about-header span i { display: none; }

.dash-sidebar .about-edit-btn { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 7px; background: #ffffff08; font-size: 11px; }

.dash-sidebar .about-text { color: #d6e1f0; font-size: 12px; font-style: normal; line-height: 1.7; }

.dash-sidebar .sidebar-section-title { margin-bottom: 12px; gap: 8px; }

.online-dot { width: 6px; height: 6px; border-radius: 50%; background: #6fd8af; box-shadow: 0 0 0 3px #6fd8af13; }

.dash-sidebar #onlineFriendsList { margin-bottom: 24px; }

.dash-sidebar #onlineFriendsList > .room-meta { color: #9eb3d0; font-size: 11px; padding: 14px 12px; border: 1px dashed #ffffff1c; border-radius: 9px; text-align: center; }

.sidebar-account { width: 100%; margin-top: auto; padding-top: 20px; border-top: 1px solid #ffffff12; }

.sidebar-account .sidebar-section-title { padding-left: 3px; margin-bottom: 8px; }

.sidebar-account .password-settings { width: 100%; margin: 0 0 5px; padding: 0; border: 0; border-radius: 9px; }

.password-settings summary { min-height: 46px; padding: 8px 10px; display: flex; align-items: center; gap: 10px; list-style: none; border-radius: 9px; font-size: 12px; font-weight: 500; color: #d6e1f0; }

.password-settings summary::-webkit-details-marker { display: none; }

.password-settings summary:hover { background: #ffffff09; }

.password-settings[open] { background: #ffffff06; }

.password-settings[open] .sidebar-chevron { transform: rotate(90deg); }

.sidebar-account .password-form { margin: 0; padding: 6px 12px 14px; gap: 12px; }

.password-form label { font-size: 11px; color: #b6c8df; gap: 6px; }

.password-form input { min-height: 38px; font-size: 12px; border-radius: 7px; }

.password-actions button { min-height: 34px; border-radius: 7px; font-size: 11px; }

.sidebar-account #logoutForm { width: 100%; margin: 0; }

.sidebar-account .logout-btn { min-height: 46px; margin: 0; padding: 8px 10px; justify-content: flex-start; gap: 10px; border: 0; border-radius: 9px; color: #efb0b5; font-size: 12px; font-weight: 500; }

.sidebar-account .logout-btn:hover { background: #f28c9910; }

.dash-sidebar button:focus-visible, .password-settings summary:focus-visible { outline: 2px solid #a6c9ff; outline-offset: 3px; }

@media (max-width: 900px) {

  .dash-sidebar { width: min(320px, 90vw); padding: 18px; }

  .sidebar-brand { margin-bottom: 20px; }

  .profile-actions .edit-nick-btn { min-height: 40px; }

  .sidebar-account { margin-top: auto; }

}



/* Compact sidebar: the main panel belongs to friends. */

.dash-sidebar { padding: 18px 16px 12px; overflow: hidden; }

.sidebar-topline { display: flex; align-items: center; justify-content: space-between; margin: 0 4px 14px; color: #dbe7f7; font-size: 14px; font-weight: 700; letter-spacing: 0.2px; }

.compact-profile { display: flex; align-items: center; gap: 11px; width: 100%; padding: 10px; border: 1px solid #ffffff13; border-radius: 11px; background: #ffffff06; color: white; text-align: left; cursor: pointer; }

.compact-profile:hover { background: #ffffff10; }

.compact-profile > img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }

.compact-profile-info { flex: 1; min-width: 0; }

.compact-profile-info strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 650; }

.compact-profile-info small { display: block; margin-top: 4px; font-size: 10px; color: #a3b9d6; }

.compact-profile > i { color: #8fa7c8; font-size: 13px; }

.sidebar-navigation-row { display: flex; align-items: center; gap: 8px; margin: 10px 0 20px; }

.dash-sidebar .sidebar-navigation-row .view-rooms-btn { min-height: 40px; padding: 9px 12px; margin: 0; flex: 1; font-size: 12px; }

.sidebar-navigation-row .notification-bell { width: 38px; height: 38px; border-radius: 9px; }

.dash-sidebar > .sidebar-friends-space { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 3px; scrollbar-width: thin; scrollbar-color: #ffffff25 transparent; }

.sidebar-friends-space > .sidebar-section-title { position: sticky; top: 0; background: #1a3457; z-index: 1; padding: 4px 0 10px; margin: 0; }

.dash-sidebar .sidebar-friends-space #onlineFriendsList { margin-bottom: 16px; }

.sidebar-friends-space .online-friend { min-height: 54px; padding: 9px; }

.sidebar-footer-actions { display: flex; align-items: center; gap: 6px; padding-top: 10px; margin-top: 8px; border-top: 1px solid #ffffff12; }

.sidebar-settings-action, .sidebar-footer-actions .logout-btn { flex: 1; min-height: 38px; padding: 8px; border: 0; border-radius: 8px; background: transparent; color: #b4c5dd; font-size: 11px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 7px; margin: 0; }

.sidebar-footer-actions #logoutForm { flex: 1; min-width: 0; }

.sidebar-footer-actions .logout-btn { width: 100%; color: #e5adb4; }

.sidebar-footer-actions .sidebar-action-icon { width: auto; height: auto; font-size: 11px; }

.sidebar-settings-action:hover, .sidebar-footer-actions .logout-btn:hover { background: #ffffff08; }

.profile-dialog { inset: 0; margin: auto; padding: 0; width: min(440px, calc(100vw - 28px)); max-height: 88dvh; border: 1px solid #dce4f0; border-radius: 18px; background: #fff; color: #18314d; box-shadow: 0 24px 80px #07182e50; }

.profile-dialog::backdrop { background: #07182e99; backdrop-filter: blur(4px); }

.profile-dialog-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px; border-bottom: 1px solid #edf1f7; }

.profile-dialog-heading small { display: block; margin-bottom: 4px; color: #8194ad; font-size: 9px; letter-spacing: 1.5px; font-weight: 650; }

.profile-dialog-heading h2 { font-size: 19px; letter-spacing: -0.4px; }

.profile-dialog-close { display: grid; place-items: center; width: 34px; height: 34px; flex-shrink: 0; border: 0; border-radius: 8px; background: #f0f4fa; color: #617892; cursor: pointer; }

.profile-dialog-body { padding: 20px 24px; overflow-y: auto; max-height: calc(88dvh - 86px); }

.profile-dialog .sidebar-profile { padding: 0 0 22px; margin: 0 0 20px; border: 0; border-bottom: 1px solid #e7edf5; border-radius: 0; background: transparent; }

.profile-dialog .sidebar-profile .dash-email { color: #7589a1; }

.profile-dialog .profile-actions .edit-nick-btn { background: #edf3fc; border-color: #dce7f5; color: #2a5298; min-height: 38px; font-size: 12px; }

.profile-dialog .profile-actions .edit-nick-btn:hover { background: #e0eafb; }

.profile-dialog .nick-feedback { color: #2855a2; font-size: 12px; line-height: 1.5; }

.profile-dialog .nick-feedback.error { color: #b42332; }

.profile-dialog .nick-edit-row input { border: 1px solid #ccd9ea; background: #f7f9fc; }

.profile-dialog .nick-edit-row button { background: #2855a2; color: white; }

.profile-dialog .nick-edit-row .cancel-btn { color: #64748b; background: #edf1f7; }

.profile-dialog .about-box { padding: 0 0 20px; margin-bottom: 18px; border: 0; border-bottom: 1px solid #e7edf5; border-radius: 0; background: transparent; }

.profile-dialog .about-header span { color: #7589a1; font-size: 11px; }

.profile-dialog .about-text { color: #415874; font-style: normal; font-size: 13px; }

.profile-dialog .about-edit-btn { color: #54759d; width: 30px; height: 30px; border-radius: 7px; background: #edf3fc; }

.profile-dialog .about-edit-area textarea { color: #18314d; background: #f7f9fc; border-color: #ccd9ea; }

.profile-dialog .about-save-btn { color: white; background: #2855a2; }

.profile-dialog .about-cancel-btn { color: #64748b; background: #edf1f7; }

.profile-dialog .password-settings { margin: 0; padding: 0; border: 1px solid #e4ebf5; border-radius: 9px; }

.profile-dialog .password-settings summary { color: #385577; font-size: 12px; }

.profile-dialog .password-settings[open] { background: #f8fafd; }

.profile-dialog .password-settings summary:hover { background: #f0f4fa; }

.profile-dialog .password-form { padding: 0 14px 14px; margin: 8px 0 0; }

.profile-dialog .password-form label { color: #4e6683; font-size: 12px; }

.profile-dialog .password-form input { border: 1px solid #ccd9ea; }

.profile-dialog .password-actions button { background: #2855a2; color: #fff; }

.profile-dialog .password-actions button[type="button"] { color: #64748b; background: #e9eff7; }

.profile-dialog button:focus-visible { outline: 2px solid #729dde; outline-offset: 3px; }

@media (max-width: 900px) {

  .dash-sidebar { padding: 12px 14px 10px; }

  .sidebar-topline { min-height: 36px; margin-bottom: 8px; }

  .sidebar-topline .sidebar-close { margin: 0; min-height: 36px; padding: 8px 10px; border: 0; }

  .profile-dialog-heading { padding: 16px 20px; }

  .profile-dialog-body { padding: 18px 20px; }

}



/* Personal room pins */

.room-card { position:relative; }

.room-card-link { display:block; color:inherit; text-decoration:none; height:100%; }

.room-card-link:hover { text-decoration:none; }

.room-card-link .room-card-info { padding-right:30px; }

.room-pin-button { position:absolute; top:15px; right:14px; display:grid; place-items:center; width:34px; height:34px; padding:0; border:1px solid #dce5f1; border-radius:10px; background:#f5f8fc; color:#7b8da6; cursor:pointer; }

.room-pin-button:hover { color:#2855a2; background:#e7effb; }

.room-pin-button[aria-pressed="true"] { background:#e5edfc; color:#2855a2; border-color:#b8ccee; }

.room-pin-button[aria-pressed="false"] i { transform:rotate(35deg); }

.room-pin-button:focus-visible { outline:3px solid #729dde; outline-offset:2px; }

.room-pin-button:disabled { opacity:.55; cursor:wait; }

.room-card.is-pinned { border-color:#b8ccee; }



/* Member safety */

.panel-user-entry { display:flex; align-items:center; gap:4px; }

.panel-user-entry .panel-user-item { flex:1; min-width:0; }

.member-safety-button { flex-shrink:0; width:32px; height:32px; border:1px solid #d8e2f0; border-radius:8px; background:#f4f7fb; color:#49627f; font-size:20px; cursor:pointer; }

.user-safety-dialog { margin:auto; width:min(460px,calc(100vw - 28px)); max-height:90dvh; overflow:auto; border:1px solid #dce5f1; border-radius:16px; padding:24px; background:#fff; color:#18314d; }

.user-safety-dialog::backdrop { background:#0b203c88; }

.safety-heading { display:flex; justify-content:space-between; align-items:center; gap:12px; }

.safety-heading h2 { font-size:20px; }

.user-safety-dialog button { border:0; border-radius:8px; padding:10px 15px; background:#2855a2; color:#fff; cursor:pointer; }

.user-safety-dialog button:disabled { opacity:.5; cursor:wait; }

.safety-heading button { font-size:24px; padding:2px 10px; background:#edf2fa; color:#2855a2; }

#safetyUserName { font-weight:700; margin:12px 0; overflow-wrap:anywhere; }

.safety-explanation { font-size:13px; line-height:1.6; color:#63758b; margin-bottom:16px; }

#safetyBlockButton { background:#a93344; }

#userReportForm { margin-top:24px; display:grid; gap:12px; }

#userReportForm label { display:grid; gap:6px; font-size:13px; }

#userReportForm select,#userReportForm textarea { padding:10px; font:inherit; border:1px solid #cbd6e4; border-radius:8px; width:100%; background:#fff; color:#18314d; }

#safetyFeedback { font-size:13px; margin-top:14px; line-height:1.5; }



/* Compact private chat header actions */

.private-chat-header .add-friend-btn,.chat-safety-btn {

 display:inline-flex; align-items:center; justify-content:center; gap:7px;

 min-height:36px; padding:8px 12px; border:1px solid transparent; border-radius:8px;

 font:inherit; font-size:12px; font-weight:600; line-height:18px; white-space:nowrap;

 cursor:pointer; transition:background .15s,border-color .15s;

}

.private-chat-header .add-friend-btn { background:#edf3fc; border-color:#d9e4f5; color:#2855a2; }

.private-chat-header .add-friend-btn:hover:not(:disabled) { background:#e1ebfa; }

.private-chat-header .add-friend-btn:disabled { background:#edf7f1; border-color:#d6eadd; color:#35734d; }

.chat-safety-btn { background:#fff; border-color:#e5dfe3; color:#94616b; }

.chat-safety-btn:hover { background:#fff3f4; border-color:#ebcbd1; color:#a93346; }

.chat-safety-btn i { font-size:12px; }

.private-chat-header .add-friend-btn:focus-visible,.chat-safety-btn:focus-visible { outline:2px solid #729dde; outline-offset:2px; }

.friend-actions #friendFeedback { flex-basis:100%; }

.friend-actions #friendFeedback:empty { display:none; }

@media(max-width:600px) {

 .private-chat-header { gap:12px; }

 .private-chat-header .friend-actions { width:100%; justify-content:flex-end; gap:8px; }

}



/* Room discovery cards */

.rooms-view-body > * { max-width:1280px; margin-left:auto; margin-right:auto; }

.rooms-grid { grid-template-columns:repeat(auto-fill,minmax(min(100%,290px),1fr)); gap:20px; align-items:stretch; padding-bottom:24px; }

.room-card { min-width:0; min-height:232px; padding:22px; border:1px solid #e0e7f1; border-radius:16px; background:#fff; box-shadow:0 3px 12px #173b6a04; cursor:default; transition:border-color .18s,box-shadow .18s,transform .18s; }

.room-card:hover { border-color:#a9bfdf; box-shadow:0 8px 24px #173b6a0c; transform:translateY(-2px); }

.room-card-link { display:flex; flex-direction:column; gap:16px; flex:1; height:auto; outline-offset:6px; border-radius:6px; }

.room-card-top { gap:12px; min-height:52px; padding-right:29px; }

.room-card-link .room-card-info { padding-right:0; }

.room-card-icon { width:48px; height:48px; border-radius:14px; font-size:19px; box-shadow:inset 0 0 0 1px #ffffff22; }

.room-card-name { white-space:normal; font-size:15px; line-height:1.4; letter-spacing:-.2px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }

.room-card-members { margin-top:4px; font-size:11px; line-height:1.4; color:#8190a4; }

.room-card-desc { font-size:13px; line-height:1.65; color:#6c7d92; -webkit-line-clamp:3; margin:0; }

.room-card-footer { margin-top:auto; padding-top:14px; border-top:1px solid #edf1f7; gap:12px; }

.room-card-tag { padding:4px 9px; border-radius:6px; font-size:10px; line-height:1.5; font-weight:600; background:#f0f4f9; color:#72839a; }

.room-join { display:inline-flex; align-items:center; font-size:12px; font-weight:650; color:#345d98; white-space:nowrap; }

.room-pin-button { top:20px; right:18px; width:30px; height:30px; border-radius:8px; border-color:transparent; background:#f3f6fa; color:#94a2b6; }

.room-pin-button[aria-pressed="true"] { background:#e7effc; color:#345d98; border-color:#d4e1f6; }

.room-card.is-default { background:linear-gradient(125deg,#eef4ff 0%,#f8fbff 100%); border-color:#c9d9f2; }

.room-card.is-default .room-card-name { font-size:21px; letter-spacing:-.6px; color:#224779; }

.room-card.is-default .room-card-icon { width:54px; height:54px; font-size:22px; }

.room-card.is-default .room-card-desc { max-width:430px; color:#6882a4; }

.room-card.is-default .room-card-footer { border-top-color:#dae5f4; }

.room-card.is-default .room-card-tag { background:#dfeafb; color:#456b9f; }

.room-card.is-default .room-join { padding:7px 12px; background:#2a5298; color:#fff; border-radius:7px; }

.room-card.is-default .room-pin-button { background:#ffffffa8; }

@media(min-width:1100px) { .room-card.is-default { grid-column:span 2; } }

@media(max-width:700px) {

 .rooms-grid { grid-template-columns:1fr; gap:14px; }

 .room-card { padding:20px; min-height:216px; }

 .room-card.is-default { grid-column:auto; }

 .room-card-name { font-size:15px; }

}



/* Search your saved friends */

.friend-search { display:flex; align-items:center; gap:9px; border:1px solid #ffffff26; background:#ffffff09; border-radius:9px; padding:0 10px; margin:2px 0 12px; color:#93adce; }

.friend-search:focus-within { border-color:#96b8e9; box-shadow:0 0 0 2px #96b8e91a; }

.friend-search > i { font-size:12px; flex-shrink:0; }

.friend-search input { min-width:0; width:100%; height:36px; border:0; outline:0; background:transparent; color:#f0f5ff; font:inherit; font-size:12px; padding:0; }

.friend-search input::placeholder { color:#9cb0cd; }

.friend-search input::-webkit-search-cancel-button { -webkit-appearance:none; }

.friend-search button { flex-shrink:0; display:grid; place-items:center; width:24px; height:24px; padding:0; border:0; border-radius:5px; background:transparent; color:#adbfda; cursor:pointer; }

.friend-search button[hidden] { display:none; }

.friend-search button:hover { background:#ffffff15; color:white; }

.friend-search button:focus-visible { outline:2px solid #96b8e9; outline-offset:1px; }

.friend-search-status { color:#a9bdd9; font-size:11px; margin:0 2px 10px; }

.friend-search-empty { padding:10px 2px; line-height:1.6; }


/* Daily chat and JPG attachments */
.chat-reset-notice { flex-shrink:0; display:flex; align-items:center; gap:8px; padding:10px 20px; margin:0; color:#7c744f; background:#fffcf0; border-bottom:1px solid #eee8cc; font-size:11px; line-height:1.6; }
.chat-reset-notice i { flex-shrink:0; color:#a39762; }
.chat-image-picker { position:relative; display:grid; place-items:center; width:38px; height:38px; flex-shrink:0; border:1px solid #d6e1f0; border-radius:10px; background:#edf3fc; color:#476b9d; cursor:pointer; overflow:hidden; }
.chat-image-picker:focus-within { outline:2px solid #729dde; outline-offset:2px; }
.chat-image-picker input { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; }
.chat-image-link { display:block; margin-top:6px; }
.chat-message-image { display:block; width:auto; max-width:min(100%,320px); max-height:320px; object-fit:contain; border-radius:10px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.chat-policy-notice { flex-shrink:0; display:flex; align-items:center; gap:8px; padding:8px 20px; margin:0; background:#f2f5fb; border-bottom:1px solid #e2e8f0; color:#687c99; font-size:11px; line-height:1.6; }
.chat-policy-notice i { color:#718db6; flex-shrink:0; }
@media(max-width:600px) { .chat-reset-notice,.chat-policy-notice { padding:9px 15px; font-size:10px; } .chat-image-picker { width:34px; height:34px; } .chat-input-area { gap:8px; } }

.demo-chat-controls { padding: 12px; margin-bottom: 10px; border: 1px solid #93c5fd; border-radius: 10px; background: #eff6ff; color: #1e3a8a; }
.demo-chat-controls strong, .demo-chat-controls small { display: block; margin-bottom: 6px; }
.demo-chat-controls button { margin: 4px 0; padding: 7px 10px; border: 0; border-radius: 6px; background: #1e40af; color: white; cursor: pointer; }
.demo-chat-controls a { font-size: 12px; color: #1e40af; }

.penfriend-logo { display:block; object-fit:cover; }
.chat-brand .auth-logo { width:min(100%, 290px); height:100px; margin:0 auto; }
/* Keep the supplied pen symbol; use a readable wordmark on the dark sidebar. */
.sidebar-brand { display:inline-flex; align-items:center; gap:10px; min-width:0; padding:2px 0; text-decoration:none; color:#f4f8ff; }
.sidebar-brand-symbol { position:relative; display:block; width:47px; height:52px; flex-shrink:0; overflow:hidden; }
.sidebar-brand-symbol img { position:absolute; width:180px; height:auto; max-width:none; left:-8px; top:-26px; }
.sidebar-brand-copy { display:flex; flex-direction:column; gap:5px; min-width:0; }
.sidebar-brand-name { color:#f4f8ff; font-size:27px; font-weight:800; line-height:1; letter-spacing:-1px; }
.sidebar-brand-name > span { color:#31d0c6; background:linear-gradient(100deg,#26c8c1 20%,#65d3bb 55%,#ffb64e 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.sidebar-brand-tagline { color:#b2c7df; font-size:9px; font-weight:500; letter-spacing:.35px; line-height:1.4; white-space:nowrap; }
.sidebar-brand:focus-visible { outline:2px solid #31d0c6; outline-offset:5px; border-radius:4px; }
.mobile-toolbar .sidebar-brand { gap:6px; padding:0; }
.mobile-toolbar .sidebar-brand-symbol { width:31px; height:35px; }
.mobile-toolbar .sidebar-brand-symbol img { width:120px; left:-6px; top:-17px; }
.mobile-toolbar .sidebar-brand-name { font-size:21px; }
.mobile-toolbar .sidebar-brand-tagline { display:none; }