/*
 MYSTCHAT — SHARED STYLESHEET

 Read in order: fonts/accessibility; frame/header/workspace; conversation;
 input/emoji; sidebar/room labels; commands/name menus; supporting forms;
 owner fonts and palette variables; neutral loading/admin; current table
 header and boxed-teal refinements; optional JSON decoration.

 One declaration per line. Comments explain the areas and controls being styled.
 Repeated declarations that were unconditionally superseded have been removed.
 Layout geometry is consolidated in CHAT LAYOUT at the end of this file.
 Remaining rules preserve palette, typography and decoration overrides.
 Room boxes, open labels and keyboard/accessibility rules are retained.

 Supported style JSON is mapped to CSS variables by applyColours() in index.html.
 See style/README.md; _css_reference in the empty template is documentation only.
 HTML 4.01 markup accepts class names; radius/shadows are CSS browser features.
*/

/* MystChat shared stylesheet: chat, registration and supporting pages. */

@font-face {
    font-family: "MystChatLogo";
    src: url("/myst_src/fonts/Magik.woff2") format("woff2"), url("/myst_src/fonts/Magik.woff") format("woff"), url("/myst_src/fonts/Magik.TTF") format("truetype");
    font-style: normal;
    font-weight: normal;
}

@font-face {
    font-family: "MystChatRoom";
    src: url("/myst_src/fonts/CALLIGRA.woff2") format("woff2"), url("/myst_src/fonts/CALLIGRA.woff") format("woff"), url("/myst_src/fonts/CALLIGRA.TTF") format("truetype");
    font-style: normal;
    font-weight: normal;
}

@font-face {
    font-family: "OpenDyslexicThree";
    src: url("/myst_src/fonts/OpenDyslexicThree-Regular.eot");
    src: url("/myst_src/fonts/OpenDyslexicThree-Regular.eot?#iefix") format("embedded-opentype"), url("/myst_src/fonts/OpenDyslexicThree-Regular.woff2") format("woff2"), url("/myst_src/fonts/OpenDyslexicThree-Regular.woff") format("woff"), url("/myst_src/fonts/OpenDyslexicThree-Regular.ttf") format("truetype");
    font-style: normal;
    font-weight: normal;
}

@font-face {
    font-family: "OpenDyslexicThree";
    src: url("/myst_src/fonts/OpenDyslexicThree-Bold.eot");
    src: url("/myst_src/fonts/OpenDyslexicThree-Bold.eot?#iefix") format("embedded-opentype"), url("/myst_src/fonts/OpenDyslexicThree-Bold.woff2") format("woff2"), url("/myst_src/fonts/OpenDyslexicThree-Bold.woff") format("woff"), url("/myst_src/fonts/OpenDyslexicThree-Bold.ttf") format("truetype");
    font-style: normal;
    font-weight: bold;
}
/* Keep arbitrary Unicode emoji readable even when Times lacks the glyph. */
body {
    font-family: "Times New Roman", Times, serif;
    margin: 0;
    padding: 0;
    background: #05949b;
    color: #000000;
}
body, #msgtext {
    font-family: "Times New Roman", Times, "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", serif;
}
body.dyslexic-font, body.dyslexic-font input, body.dyslexic-font textarea, body.dyslexic-font button, body.dyslexic-font select {
    font-family: "OpenDyslexicThree", "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif !important;
}
#typingstatus {
    min-height: 16px;
    padding: 2px 10px;
    color: #555555;
    font-size: 12px;
    font-style: italic;
}
.msg-emote {
    color: #663366;
    font-style: italic;
}
a:active {
    color: #6699ff;
}
.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;
}
#helplink {
    margin-right: 12px;
    font-size: 14px;
    color: #ffffff;
}
#helplink:visited {
    color: #ffffff;
}
/* =========================================================
   OUTER FRAME
   ========================================================= */
#container {

/* Deliberate wider branding space at left */

    background: #05949b;
}
/* =========================================================
   HEADER
   Shallower than previous version.
   ========================================================= */
#header {

    background: #05949b;
    color: #ffffff;
}
#brandname {

    font-weight: bold;
}

#identity {
    font-size: 13px;
    font-weight: normal;

}
#awaybtn {
    margin-right: 10px;
    padding: 2px 6px;
    font-family: "Times New Roman", Times, serif;
    font-size: 12px;
    background: transparent;
    color: #ffffff;
    border: 1px solid #ffffff;
    cursor: pointer;
}
#awaybtn.active {
    background: #ffffff;
    color: #05949b;
}
#soundbtn {
    margin-right: 10px;
    font-family: "Times New Roman", Times, serif;
    line-height: 1;
    cursor: pointer;
}
/* =========================================================
   WORKSPACE
   ========================================================= */

/* =========================================================
   CHAT
   ========================================================= */
#mainchat {

    background: #d0f0f0;
}
#chatbox {

/* Keep the current comfortable inner padding */

    background: #d0f0f0;
}
/* Plain flowing transcript */
.msg {
    margin: 1px 0;
    padding: 0;
    background: transparent;
    border: 0;
    line-height: 1.12;
}
.msg-join {
    color: #3366cc;
    font-style: normal;
}
.msg-leave {
    color: #663399;
    font-style: normal;
}
.msg-whisper {
    color: #cc6600;
    font-style: normal;
}
.msg-system {
    color: #3366cc;
    font-style: normal;
}
.msg-kick {
    color: #663399;
    font-weight: bold;
}
.away-status {
    color: #663399;
}
.own-away {
    cursor: pointer;
    text-decoration: underline;
}
.status-away {
    color: #663399;
    font-weight: bold;
}
.status-back {
    color: #cc6600;
    font-weight: bold;
}
/* =========================================================
   USER NAME STYLING BY ROLE

   Admin: blue-purple #6363ff, bold italic
   Lineage: dark teal
   Trainee: blue
   Member: charcoal
   ========================================================= */
.handle {
    cursor: pointer;
    text-decoration: underline;
}
.handle-member {
    color: #3f3f3f;
    font-weight: normal;
    font-style: normal;
}
.handle-crew {
    color: #3366cc;
    font-weight: normal;
    font-style: normal;
}
.handle-mod {
    color: #00666b;
    font-weight: bold;
    font-style: normal;
}
.handle-admin {
    color: #6363ff;
    font-weight: bold;
    font-style: italic;
}
.clickable-handle {
    cursor: pointer;
    text-decoration: none;
}
.clickable-handle:hover {
    color: #05949b;
}
/* =========================================================
   INPUT
   ========================================================= */
#inputarea {

    background: #d0f0f0;
    border-top: 1px solid #92dddd;
}

#msgtext {

    resize: none;

    font-family: "Times New Roman", Times, serif;
    font-size: 15px;
    line-height: 1.2;
    background: #ffffff;
    border: 1px solid #999999;
}
#sendbtn {

    font-family: "Times New Roman", Times, serif;
    font-size: 15px;
    background: #05949b;
    color: #ffffff;
    border: 0;
    cursor: pointer;
}
#sendbtn:hover {
    background: #077880;
}
/* Small emoji / command controls */
.iconbtn {
    width: 36px;
    height: 34px;
    padding: 0;
    font-family: "Times New Roman", Times, serif;
    font-size: 21px;
    line-height: 32px;
    text-align: center;
    background: transparent;
    color: #000000;
    border: 1px solid #999999;
    cursor: pointer;
}
.iconbtn:hover {
    background: #ffffff;
}
#emojipicker {
    margin-top: 4px;
    line-height: 24px;
}
#emojipicker .emoji-group {
    display: inline-block;
    white-space: nowrap;
}
#emojipicker .emoji {
    display: inline-block;
    margin: 0 2px;
    font-size: 20px;
    cursor: pointer;
}
#status {
    margin-top: 4px;
    font-size: 10px;
    color: #555555;
}
/* =========================================================
   SIDEBAR
   ========================================================= */
#sidebar {

    background: var(--mystchat-panel, #9be8e8);
}
#roomsheading {

    font-size: 18px;
    font-weight: bold;
}
#createpriv {
    margin: 0 0 11px 0;
    padding: 4px 8px;
    font-family: "Times New Roman", Times, serif;
    font-size: 13px;
    background: #e0e0ff;
    color: #000000;
    border: 0;
    cursor: pointer;
}
#createpriv:hover {
    background: #ccccff;
}
/* Room names remain full-width click targets without filled boxes. */

.room-item {
    font-family: "MystChatRoom", "Times New Roman", Times, serif;
    background: transparent;
    color: #000000;
}
.room-item:hover {
    background: transparent;
    text-decoration: underline;
}
.room-item.active {
    background: #05949b;
    color: #ffffff;
    font-weight: bold;
}
.room-item {

    border: 0;
    cursor: pointer;
    line-height: 1.15;

}
.room-mail {
    position: absolute;
    right: 6px;
    top: 3px;
    color: inherit;
    font-weight: bold;
    text-decoration: none;
    cursor: pointer;
}
/* Private rooms keep a purple marker and a filled selected state. */
.room-item.private {
    background: transparent;
    border-left: 3px solid #6667ff;
    color: #000000;
}
.room-item.private:hover {
    background: transparent;
    text-decoration: underline;
}
.room-item.private.active {
    background: #6667ff;
    color: #ffffff;
}
/* Occupants stay outside room bars. */
.room-users {

    font-size: 12px;
    color: #333333;
    font-style: normal;
    line-height: 1.3;
}
.room-user {

    font-size: 14px;
    text-decoration: none;
}
.room-user.clickable-handle {
    text-decoration: none;
}
/* =========================================================
   EMOJI TRAY
   One horizontal line, floating.
   ========================================================= */
#emojimenu {
    display: none;
    position: fixed;
    z-index: 2000;
    padding: 5px 8px;
    white-space: nowrap;
    background: #d0f0f0;
    border: 1px solid #92dddd;
}
.emoji {
    display: inline-block;
    margin: 1px 3px;
    font-size: 20px;
    cursor: pointer;
}
/* =========================================================
   COMMANDS OVERLAY
   ========================================================= */
#commandsmenu {
    display: none;
    position: fixed;
    z-index: 2000;
    padding: 8px 10px;
    box-sizing: border-box;
    background: #bfeaea;
    border: 1px solid #05949b;
    font-family: "Times New Roman", Times, serif;
    font-size: 20px;
}
#commandscontents {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 10px;
    row-gap: 0;
}
.command-item {
    display: block;
    width: 100%;
    padding: 2px 4px;
    margin: 0;
    background: transparent;
    color: #000000;
    border: 0;
    font-family: "Times New Roman", Times, serif;
    font-size: inherit;
    line-height: 1.2;
    text-align: left;
    cursor: pointer;
}
.command-item:hover {
    background: #ffffff;
}
.command-section {
    grid-column: 1 / span 2;
    margin: 3px 0 0;
    padding-top: 2px;
    border-top: 1px solid #77cccc;
    color: #663399;
    font-weight: bold;
    font-style: normal;
}
/* The first heading needs no empty separator above it. */
.command-section:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}
/* =========================================================
   USER POPUP
   ========================================================= */
#usermenu {
    display: none;
    padding: 4px;
    background: #ffffff;
    border: 1px solid #05949b;
}
#usermenu button {
    display: block;
    width: 100%;
    margin: 1px 0;
    padding: 4px 8px;
    background: #ffffff;
    color: #000000;
    border: 0;
    font-family: "Times New Roman", Times, serif;
    font-size: 12px;
    text-align: left;
    cursor: pointer;
}
#usermenu button:hover {
    background: #d0f0f0;
}
#usermenu a {
    display: block;
    padding: 4px 8px;
    color: #000000;
    text-decoration: none;
    font-size: 12px;
    white-space: nowrap;
}
#usermenu a:hover {
    background: #d0f0f0;
}
/* =========================================================
   FOOTER
   ========================================================= */
#footer {

    background: #05949b;
    color: #ffffff;
    font-size: 11px;
}
/* These declarations stay last so component-specific Times rules do not
   prevent the browser from falling back to an installed emoji font. */
#msgtext, #chatbox, #soundbtn, #awaybtn, .emoji {
    font-family: "Times New Roman", Times, "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", serif;
}

#sidebartoggle {

    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    color: black;
    background: white;
    border: 1px solid #d0f0f0;
    cursor: pointer;
}

#soundbtn {
    width: 34px;
    height: 30px;
    padding: 2px;
    font-size: 20px;
    color: black;
    background: white;
    border: 1px solid #d0f0f0;
}
#sidebartoggle:hover, #sidebartoggle:focus, #soundbtn:hover, #soundbtn:focus {
    background: #fff4b8;
    border-color: black;
}


/* Menus remain usable on narrow screens. */
#commandsmenu {
    max-height: 330px;
    overflow-y: auto;
    width: 390px;
    max-width: calc(100vw - 16px);
}
#usermenu {
    position: absolute;
    z-index: 2100;
    max-width: calc(100vw - 16px);
    max-height: calc(100vh - 16px);
    overflow-y: auto;
}

@media screen and (max-width: 520px) {
#commandscontents {
        display: block;
    }
#commandsmenu {
        max-height: 60vh;
    }

}
body.mystchat-chat {
    background: var(--mystchat-frame, #05949b);
    color: var(--mystchat-text, #000000);
}
.mystchat-chat #container, .mystchat-chat #header, .mystchat-chat #footer {
    background: var(--mystchat-frame, #05949b);
}
.mystchat-chat #mainchat, .mystchat-chat #chatbox, .mystchat-chat #inputarea, .mystchat-chat #commandsmenu, .mystchat-chat #emojimenu, .mystchat-chat #usermenu {
    background: var(--mystchat-panel, #d0f0f0);
    color: var(--mystchat-text, #000000);
}
/** MystChat Registration form css */
body.mystchat-form {
    padding: 20px;
}
a {
    color: #3333cc;
}
a:visited {
    color: #9900cc;
}
#page {
    max-width: 650px;
    margin: 0 auto;
    padding: 24px 30px;
    background: #d0f0f0;
}
.mystchat-form h1 {
    margin-top: 0;
    color: #00666b;
}
.mystchat-form h2 {
    margin-bottom: 5px;
    color: #663399;
    font-size: 18px;
}
.mystchat-form .field {
    margin: 12px 0;
}
.mystchat-form .field label {
    display: block;
    margin-bottom: 3px;
    font-weight: bold;
}
.mystchat-form .field input[type="text"], .field input[type="password"] {
    width: 95%;
    max-width: 420px;
    padding: 5px;
    font-family: "Times New Roman", Times, serif;
    font-size: 15px;
}
.mystchat-form .note {
    font-size: 13px;
}
.mystchat-form .groups label {
    display: block;
    margin: 4px 0;
    font-weight: normal;
}
.mystchat-form #submitrow {
    margin-top: 22px;
}
.mystchat-form #submitrow input, .mystchat-form #submitrow button {
    padding: 7px 18px;
    font-family: "Times New Roman", Times, serif;
    font-size: 15px;
}
#website_field {
    position: absolute;
    left: -10000px;
    top: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
.mystchat-form #page {
    box-sizing: border-box;
}
.mystchat-form textarea, .mystchat-form select {
    max-width: 100%;
    box-sizing: border-box;
}

@media screen and (max-width: 520px) {
body.mystchat-form {
        padding: 8px;
    }
.mystchat-form #page {
        padding: 16px;
    }

}
#settingsbtn {
    margin-right: 10px;
    padding: 4px 8px;
}
/* Compact branding, names and mobile reading. */

#sitelogo {

    object-fit: contain;

}

#chatbox {
    overflow-wrap: anywhere;
}
#readingdialog {
    position: fixed;
    top: 60px;
    right: 12px;
    z-index: 2500;
    padding: 12px;
    max-width: calc(100vw - 48px);
    background: var(--mystchat-panel,#d0f0f0);
    color: var(--mystchat-text,#000);
    border: 1px solid currentColor;
}
#readingdialog label {
    display: block;
    margin: 8px 0;
}
#chatbox, #msgtext {
    font-family: var(--reading-font,"Times New Roman"),"Segoe UI Emoji","Apple Color Emoji",serif;
}
.name-purple {
    color: var(--name-purple,#663399);
}
.name-blue {
    color: var(--name-blue,#174c9d);
}
.name-green {
    color: var(--name-green,#1d6039);
}
.name-red {
    color: var(--name-red,#a02525);
}

@media screen and (max-width:600px) {

#sidebarcell {

        z-index: 1500;
        background: var(--mystchat-panel,#d0f0f0);
        box-shadow: -3px 0 8px #0005;
    }

#emojipicker {
        display: none;
    }
#emojimenu {
        white-space: normal;
        max-width: calc(100vw - 24px);
    }

#readingdialog button, #readingdialog select, #usermenu button {
        min-height: 44px;
    }
#msgtext {
        font-size: 16px;

    }
#footer {
        font-size: 10px;
    }

}
#uploadpanel {
    position: fixed;
    top: 60px;
    right: 12px;
    z-index: 2500;
    padding: 12px;
    width: 300px;
    max-width: calc(100vw - 48px);
    background: var(--mystchat-panel,#d0f0f0);
    color: var(--mystchat-text,#000);
    border: 1px solid currentColor;
}
#uploadpanel button, #myuploadslist button {
    min-height: 44px;
}
#myuploadslist {
    max-height: 35vh;
    overflow: auto;
}
.upload-list-row {
    display: flex;
    gap: 8px;
    align-items: center;
    margin: 4px 0;
}
.upload-list-row span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}
.delete-image {
    margin-left: 6px;
    font-size: 12px;
}
#readingdialog, #uploadpanel {
    max-height: calc(var(--viewport-height,100vh) - 84px);
    overflow-y: auto;
}
#footer a {
    color: inherit;
    text-decoration: underline;
}
/* Owner font roles; the accessibility override always takes precedence. */
#brandname {
    font-family: var(--title-font,"MystChatLogo"),"Times New Roman",serif;
}
.room-item {
    font-family: var(--room-font,"MystChatRoom"),"Times New Roman",serif;
}
body.dyslexic-font * {
    font-family: "OpenDyslexicThree","Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",sans-serif !important;
}
.font-preview {
    padding: 10px;
    border: 1px solid #77cccc;
    font-size: 20px;
    overflow-wrap: anywhere;
}
.font-recommendations {
    width: 100%;
    border-collapse: collapse;
}
.font-recommendations th, .font-recommendations td {
    text-align: left;
    padding: 6px;
    border-bottom: 1px solid #77cccc;
}
/* Five palette surfaces; text is selected for each background. */
:root {
    --mystchat-frame: #05949b;
    --mystchat-panel: #9be8e8;
    --mystchat-menu: #bfeaea;
    --mystchat-chat: #d0f0f0;
    --mystchat-contrast: #e0e0ff;
    --mystchat-frame-text: #ffffff;
    --mystchat-panel-text: #000000;
    --mystchat-menu-text: #000000;
    --mystchat-contrast-text: #000000;
    --mystchat-text: #000000;
}
.mystchat-chat #header, .mystchat-chat #footer, .mystchat-chat .room-item.active {
    background: var(--mystchat-frame);
    color: var(--mystchat-frame-text);
}
.mystchat-chat #mainchat, .mystchat-chat #chatbox, .mystchat-chat #inputarea, .mystchat-chat .room-item {
    background: var(--mystchat-chat);
    color: var(--mystchat-text);
}
.mystchat-chat #sidebar, .mystchat-chat #sidebarcell {
    background: var(--mystchat-panel);
    color: var(--mystchat-panel-text);
}
.mystchat-chat #commandsmenu, .mystchat-chat #usermenu, .mystchat-chat #emojimenu, .mystchat-chat #readingdialog, .mystchat-chat #uploadpanel {
    background: var(--mystchat-menu);
    color: var(--mystchat-menu-text);
}
.mystchat-chat .room-item.private, .mystchat-chat #createpriv, .mystchat-chat button, .mystchat-chat #msgtext {
    background: var(--mystchat-contrast);
    color: var(--mystchat-contrast-text);
}
.mystchat-chat #commandsmenu h3, .mystchat-chat #sidebar h2, .mystchat-chat .room-user {
    color: inherit;
}
.mystchat-chat .room-item:hover, .mystchat-chat .room-user:hover {
    background: var(--mystchat-menu);
    color: var(--mystchat-menu-text);
}
.mystchat-form #ROOM, .mystchat-form #ROOM_GROUP, .mystchat-form #palettes {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
}
.mystchat-form #ROOM td input, .mystchat-form #ROOM_GROUP td input {
    max-width: 150px;
}
.mystchat-form #palettes td input {
    max-width: 100px;
}
.field-help {
    font-size: 13px;
}
/* Ordinary room names stay unboxed, including hover and selection. */
.mystchat-chat .room-item:not(.private), .mystchat-chat .room-item:not(.private):hover, .mystchat-chat .room-item:not(.private).active {
    background: transparent;
    color: var(--mystchat-panel-text);
    border: 0;
}
.mystchat-chat .room-item:not(.private).active {
    text-decoration: underline;
}
.mystchat-chat .room-item:not(.private):hover {
    text-decoration: underline;
}
.mystchat-chat button {
    background: var(--mystchat-menu);
    color: var(--mystchat-menu-text);
}
.mystchat-chat #createpriv {
    background: var(--mystchat-contrast);
    color: var(--mystchat-contrast-text);
}
.mystchat-chat #sendbtn {
    background: var(--mystchat-frame);
    color: var(--mystchat-frame-text);
}
/* Notices use typography; role settings style authored messages independently. */
.mystchat-chat .msg-whisper {
    color: var(--mystchat-text);
}
.message-style-normal {
    font-weight: normal;
    font-style: normal;
}
.message-style-bold {
    font-weight: bold;
    font-style: normal;
}
.message-style-italic {
    font-weight: normal;
    font-style: italic;
}
.message-style-bold-italic {
    font-weight: bold;
    font-style: italic;
}
/* Named palette overrides: empty JSON entries inherit the shared colours. */
.mystchat-chat {
    --mystchat-text: var(--colour-text,#000);
    --mystchat-frame-text: var(--colour-frame-text,#fff);
    --mystchat-panel-text: var(--colour-panel-text,#000);
    --mystchat-menu-text: var(--colour-menu-text,#000);
    --mystchat-contrast-text: var(--colour-accent-text,#000);
}
.mystchat-chat #container, .mystchat-chat {
    background-image: var(--texture-frame,none);
}
.mystchat-chat #sidebar {
    background-image: var(--texture-panel,none);
}
.mystchat-chat #chatbox {
    background-image: var(--texture-chat,none);
}
.mystchat-chat #msgtext {
    background: var(--colour-input-background,#fff);
    color: var(--colour-input-text,var(--mystchat-text));
}
.mystchat-chat .room-user {
    font-family: var(--reading-font,"Times New Roman"),Times,serif;
}
.mystchat-chat .room-item:not(.private) {
    color: var(--colour-room-name,var(--mystchat-panel-text));
}
.mystchat-chat .room-item.active {
    font-weight: normal;
}
.mystchat-chat .room-item.private {
    color: var(--colour-private-room-name,var(--mystchat-contrast-text));
    border-left-color: var(--colour-private-marker,#6363ff);
}
.mystchat-chat .msg-join, .mystchat-chat .msg-leave, .mystchat-chat .msg-kick, .mystchat-chat .msg-system {
    color: var(--colour-system-text,var(--mystchat-text));
    font-style: italic;
    font-weight: normal;
}
.mystchat-chat .msg-system .status-away, .mystchat-chat .msg-system .status-back {
    color: inherit;
    font-weight: normal;
    font-style: inherit;
}
.mystchat-chat .message-time {
    color: var(--mystchat-text);
    font-weight: normal;
    font-style: normal;
}
.mystchat-chat .msg-emote {
    color: var(--colour-emote-text,var(--mystchat-text));
    font-style: italic;
}
.mystchat-chat .handle-admin {
    color: var(--colour-owner-name,#6363ff);
}
.mystchat-chat .handle-mod {
    color: var(--colour-moderator-name,#00666b);
}
.mystchat-chat .handle-member {
    color: var(--colour-member-name,var(--mystchat-text));
}
.mystchat-chat .handle-crew {
    color: var(--colour-trainee-name,#3366cc);
}
.mystchat-chat .command-section {
    color: var(--colour-menu-heading,var(--mystchat-text));
    border-top-color: var(--colour-separator,var(--mystchat-panel));
}
.mystchat-chat #typingstatus, .mystchat-chat #status {
    color: var(--colour-status-text,#555);
}
.mystchat-chat a, .mystchat-chat a:visited {
    color: var(--colour-link,var(--mystchat-text));
}
.mystchat-chat a:hover, .mystchat-chat a:focus, .mystchat-chat a:active {
    color: var(--colour-link-hover,var(--mystchat-frame));
}
.mystchat-chat #footer a, .mystchat-chat #helplink {
    color: inherit;
}
.mystchat-chat .clickable-handle:hover {
    color: var(--colour-handle-hover,var(--mystchat-frame));
}
.mystchat-chat #createpriv {
    border: 0;
}
.mystchat-chat #sidebartoggle:hover, .mystchat-chat #sidebartoggle:focus, .mystchat-chat #soundbtn:hover, .mystchat-chat #soundbtn:focus {
    background: var(--colour-button-hover,var(--mystchat-menu));
}
.mystchat-chat #msgtext, .mystchat-chat .iconbtn {
    border-color: var(--colour-outline,#999);
}
.mystchat-chat #inputarea, .mystchat-chat #emojimenu {
    border-color: var(--colour-separator,#92dddd);
}
.mystchat-chat .name-purple {
    color: var(--name-purple,#663399);
}
.mystchat-chat .name-blue {
    color: var(--name-blue,#174c9d);
}
.mystchat-chat .name-green {
    color: var(--name-green,#1d6039);
}
.mystchat-chat .name-red {
    color: var(--name-red,#a02525);
}
/* Role choices style names only, consistently in messages and notices. */
.mystchat-chat .clickable-handle.message-style-normal {
    font-weight: normal;
    font-style: normal;
}
.mystchat-chat .clickable-handle.message-style-bold {
    font-weight: bold;
    font-style: normal;
}
.mystchat-chat .clickable-handle.message-style-italic {
    font-weight: normal;
    font-style: italic;
}
.mystchat-chat .clickable-handle.message-style-bold-italic {
    font-weight: bold;
    font-style: italic;
}
/* Compact header: branding and room together; welcome above the link row. */

.mystchat-chat #brandname {

    line-height: 1.1;
    font-weight: normal;

}

.mystchat-chat #identity {
    font-size: 16px;
    line-height: 1.25;

}

.mystchat-chat #headerlinks button, .mystchat-chat #headerlinks a {
    font: inherit;
    line-height: 1.25;

    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
}
.mystchat-chat #headerlinks button[aria-pressed="true"] {
    font-weight: bold;
}
.mystchat-chat #headerlinks button:focus-visible, .mystchat-chat #headerlinks a:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}
.mystchat-chat #headerlinks #fontbtn {
    font-family: "OpenDyslexicThree",sans-serif;
}


/* Open navigation and owner-selectable room labels. */

.mystchat-chat #headerlinks button, .mystchat-chat #headerlinks a {
    font-family: var(--title-font,"MystChatLogo"),serif;
    text-decoration: none;
}
.mystchat-chat #headerlinks #soundbtn:hover, .mystchat-chat #headerlinks #soundbtn:focus, .mystchat-chat #headerlinks button:hover, .mystchat-chat #headerlinks button:focus-visible, .mystchat-chat #headerlinks a:hover, .mystchat-chat #headerlinks a:focus-visible {
    background: transparent;
    color: var(--mystchat-menu);
}

.mystchat-chat #sidebar .room-item {
    font-size: 20px;
    line-height: 1.1;

}
.mystchat-chat #sidebar .room-item:not(.private), .mystchat-chat #sidebar .room-item:not(.private).active {
    color: var(--colour-room-name,var(--mystchat-panel-text));
}
.mystchat-chat #sidebar .room-item.private {
    background: transparent;
}
.mystchat-chat #sidebar .room-item .room-mail {
    color: var(--colour-frame-text,#F8F8F2);
    text-decoration: none;
}
.mystchat-chat #sidebar #createpriv {
    font-family: var(--room-font,"MystChatRoom"),serif;
    font-size: 20px;
    font-weight: normal;
    background: transparent;

}
.mystchat-chat #sidebar #createpriv:hover {
    background: transparent;
}
.mystchat-chat.room-boxes #sidebar .room-item {
    background: var(--mystchat-chat);
}
.mystchat-chat.room-boxes #sidebar .room-item.private {
    background: var(--mystchat-contrast);
}
.mystchat-chat.room-boxes #sidebar .room-item.active {
    background: var(--mystchat-frame);
    color: var(--colour-frame-text,#F8F8F2);
}


/* Sidebar heading follows the owner room-name font. */
.mystchat-chat #sidebar #roomsheading {
    font-weight: normal;
    color: var(--colour-room-name,var(--mystchat-panel-text));

}
/* Rooms heading uses the title face; private labels supply violet contrast. */
.mystchat-chat #sidebar #roomsheading {
    font-family: var(--title-font,"MystChatLogo"),serif;
}
.mystchat-chat #sidebar #createpriv {
    border: 0;

    color: var(--colour-private-room-name,#663399);
}
.mystchat-chat #sidebar #createpriv:hover {
    color: var(--colour-frame-text,#F8F8F2);
}
/* One-line composer controls share an outer height, including borders.
   Grow with chat text size; mobile retains at least a 44px touch target. */

.mystchat-chat #inputrow #sendbtn { font-family: Arial,sans-serif; }
.mystchat-chat #inputrow #sendbtn:focus-visible {
    outline: 2px solid var(--mystchat-frame);
    outline-offset: 3px;
}

/* Theme surfaces use translucent colours, never opacity on the text itself. */
body.mystchat-chat {
    background-image: var(--texture-frame,none);
    background-size: var(--frame-image-size,auto);
    background-repeat: var(--frame-image-repeat,repeat);
    background-position: center;
    background-attachment: fixed;
}
.mystchat-chat #container {
    background-color: var(--surface-frame,var(--mystchat-frame));
    background-image: var(--container-image,var(--texture-frame,none));
}
.mystchat-chat #header, .mystchat-chat #footer {
    background: var(--surface-frame,var(--mystchat-frame));
    text-shadow: var(--frame-text-shadow,none);
}
.mystchat-chat #mainchatcell, .mystchat-chat #chatbox, .mystchat-chat #inputarea, .mystchat-chat #sidebarcell {
    background-color: transparent;
}
.mystchat-chat #mainchat {
    background-color: var(--surface-chat,var(--mystchat-chat));
}
.mystchat-chat #sidebar {
    background-color: var(--surface-panel,var(--mystchat-panel));
}
/* Owner typography choices and theme-coloured arrow controls. */
.mystchat-chat #brandname, .mystchat-chat #sidebar #roomsheading {
    font-weight: var(--title-weight,normal);
    font-style: var(--title-style,normal);
}
.mystchat-chat #sidebar .room-item, .mystchat-chat #sidebar #createpriv {
    font-weight: var(--room-weight,normal);
    font-style: var(--room-style,normal);
}
.mystchat-chat #sidebartoggle {
    border: 0;
}
.mystchat-chat #sidebartoggle:hover, .mystchat-chat #sidebartoggle:focus-visible {
    background: var(--colour-button-hover,#F8F8F2);
}
.mystchat-chat #inputrow #sendbtn {

    line-height: 1;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    font-size: 34px;
    background: transparent;
    color: var(--mystchat-frame);
}
.mystchat-chat #inputrow #sendbtn:hover {
    background: transparent;
    color: var(--colour-room-name,var(--mystchat-frame));
}
/* Desktop has the emoji line; mobile has its picker control. */

@media screen and (max-width:600px) {
.mystchat-chat #inputrow #emojibtn {

        border: 0;
        background: transparent;
        font-size: 28px;
        line-height: 1;
        color: var(--mystchat-text);
    }

}
/* Underlines retain a clear hover/focus cue against photographic themes. */
.mystchat-chat #headerlinks button:hover, .mystchat-chat #headerlinks button:focus-visible, .mystchat-chat #headerlinks a:hover, .mystchat-chat #headerlinks a:focus-visible {
    color: inherit;
    text-decoration: underline;
}
.mystchat-chat #sidebar .room-item:hover, .mystchat-chat #sidebar .room-item.active:hover {
    color: var(--colour-link-hover,var(--colour-frame-text,#F8F8F2));
    text-decoration: underline;
}
.mystchat-chat #sidebar .room-item:focus-visible, .mystchat-chat #sidebar .room-item.active:focus-visible {
    color: var(--colour-link-hover,var(--colour-frame-text,#F8F8F2));
    text-decoration: underline;
    outline: 2px solid currentColor;
    outline-offset: 2px;
}
.mystchat-chat #sidebar #createpriv:hover, .mystchat-chat #sidebar #createpriv:focus-visible, .mystchat-chat #sidebar .room-mail:hover, .mystchat-chat #sidebar .room-mail:focus-visible {
    color: var(--colour-link-hover,var(--colour-frame-text,#F8F8F2));
    text-decoration: underline;
}
/* Neutral loading appearance; owner style variables replace these after loading. */
body.mystchat-chat {
    --mystchat-frame: #70767A;
    --mystchat-panel: #E3E6E8;
    --mystchat-menu: #F7F8F8;
    --mystchat-chat: #EFF1F2;
    --mystchat-contrast: #E1E4E6;
    --mystchat-frame-text: #F8F8F2;
    --mystchat-panel-text: #34383B;
    --mystchat-menu-text: #34383B;
    --mystchat-contrast-text: #34383B;
    --mystchat-text: #24282B;
    --title-font: "Copperplate Gothic",Copperplate,Georgia,serif;
    --room-font: "Times New Roman",Times,serif;
    --reading-font: "Courier New",Courier,monospace;
    background-color: var(--mystchat-frame);
}
/* Give group-email composing a generous, resizable message field. */
.mystchat-form textarea#message {
    display: block;
    width: 100%;
    box-sizing: border-box;
    min-height: 24em;
    padding: 8px;
    resize: vertical;
    font: inherit;
}
/* Selected room contrast for boxed styles. */
.mystchat-chat.room-boxes #sidebar .room-item:not(.private).active, .mystchat-chat.room-boxes #sidebar .room-item.private.active {
    color: var(--colour-frame-text,#F8F8F2);
}
/* The panel toggle has a visible resting surface and a lighter hover state. */
.mystchat-chat #sidebartoggle {
    background: var(--mystchat-panel);
    color: var(--colour-panel-text,var(--mystchat-text));
}
.mystchat-chat #sidebartoggle:hover, .mystchat-chat #sidebartoggle:focus {
    background: var(--colour-button-hover,#F8F8F2);
}
.mystchat-form .settings-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    line-height: 1.6;
    margin: 16px 0;
}
.mystchat-form .settings-section h2 {
    margin-top: 0;
}
.mystchat-form .settings-save {
    margin-top: 20px;
}
/* Owner setup: keep explanations close, with space between decisions. */
.mystchat-form .settings-section {
    border-top: 0;
    scroll-margin-top: 16px;
    margin-top: 0;
    padding-top: 8px;
    padding-bottom: 12px;
}
.mystchat-form .settings-section .field {
    margin: 0 0 26px;
}
.mystchat-form .settings-section .field label {
    margin-bottom: 7px;
}
.mystchat-form .settings-section .field-help {
    max-width: 68ch;
    margin: 8px 0 0;
    font-size: 0.9em;
    line-height: 1.5;
    font-weight: normal;
}
.mystchat-form .settings-section h3 {
    margin-top: 32px;
    margin-bottom: 16px;
}
.mystchat-form .settings-section > p {
    max-width: 72ch;
    line-height: 1.5;
}
.mystchat-form .settings-save {
    margin: 28px 0 14px;
}
/* Neutral silver administration: independent of the chat's selected style. */
body.mystchat-admin {
    background: #D8DCDF;
    color: #262B30;
    font-family: "Times New Roman",Times,serif;
    background-image: none;
}
.mystchat-admin #page {
    background: #F5F6F6;
    color: #262B30;
}
.mystchat-admin h1 {
    color: #303940;
    font-family: Georgia,"Times New Roman",serif;
}
.mystchat-admin h2 {
    color: #36434C;
    font-size: 22px;
}
.mystchat-admin h3 {
    color: #46535C;
}
.mystchat-admin .settings-section {
    border-color: #B8C0C6;
}
.mystchat-admin .field-help, .mystchat-admin .note {
    color: #4B555D;
}
.mystchat-admin a, .mystchat-admin a:visited {
    color: #394E60;
}
.mystchat-admin a:hover, .mystchat-admin a:focus-visible {
    color: #202D37;
    text-decoration: underline;
}
.mystchat-admin input, .mystchat-admin textarea, .mystchat-admin select {
    background: #FDFDFC;
    color: #262B30;
    border: 1px solid #9DA7AE;
    padding: 6px;
}
.mystchat-admin button, .mystchat-admin input[type="submit"], .mystchat-admin input[type="button"] {
    background: #E3E7EA;
    color: #262B30;
    border: 1px solid #8D99A2;
    padding: 7px 14px;
    cursor: pointer;
}
.mystchat-admin button:hover, .mystchat-admin input[type="submit"]:hover, .mystchat-admin input[type="button"]:hover {
    background: #CCD3D8;
}
.mystchat-admin :is(button, input, textarea, select):focus-visible {
    outline: 2px solid #465C6C;
    outline-offset: 2px;
}
.mystchat-admin table {
    border-collapse: collapse;
}
.mystchat-admin td, .mystchat-admin th {
    border-color: #B8C0C6;
}
.mystchat-admin th {
    background: #E5E9EB;
    color: #303940;
}
.mystchat-admin input[type="checkbox"], .mystchat-admin input[type="radio"] {
    accent-color: #526574;
}
/* Original teal sidebar proportions, with the current title/room fonts. */

.mystchat-chat.teal-boxes-sidebar #sidebar .room-item {

    line-height: 1.15;
}
.mystchat-chat.teal-boxes-sidebar #sidebar .room-item:not(.active), .mystchat-chat.teal-boxes-sidebar #sidebar .room-user {
    color: #000000;
}
.mystchat-chat.teal-boxes-sidebar #sidebar .room-item.active {
    font-weight: bold;
    text-decoration: none;
}
.mystchat-chat #sidebar .room-item.active:not(:hover):not(:focus-visible) {
    text-decoration: none;
}
.mystchat-chat.teal-boxes-sidebar #sidebar #createpriv {
    background: var(--mystchat-contrast);
    color: #000000;

}
.mystchat-chat.teal-boxes-sidebar #sidebar #createpriv:hover, .mystchat-chat.teal-boxes-sidebar #sidebar #createpriv:focus-visible {
    background: var(--colour-button-hover,#F8F8F2);
    color: #000000;
    text-decoration: underline;
}
/* Pair font and text-style choices, with guidance above and a live sample below. */
.mystchat-admin .font-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px 20px;
    margin-top: 12px;
}
.mystchat-admin .font-controls > div:first-child {
    flex: 1 1 240px;
    min-width: 0;
}
.mystchat-admin .font-controls select {
    max-width: 100%;
}
.mystchat-admin .font-controls > div:first-child select {
    width: 100%;
}
.mystchat-admin .font-controls label {
    font-size: 0.9em;
}
.mystchat-admin .font-preview {
    font-size: 24px;
    line-height: 1.4;
    margin: 14px 0 0;
}
/* Fixed table header: long owner/room names clip instead of forcing new rows. */

/* Welcome stays at the top when a taller title image is used.
   Staff controls have their own row; ordinary members see only their row. */

/* Alert is a text link here, rather than the old fixed-size sound icon. */

.mystchat-chat #header #identity {

    text-align: right;

}
.mystchat-chat #header #headerlinks {

    text-align: right;

}
.mystchat-chat #headerlinks button, .mystchat-chat #headerlinks a {

    font-size: clamp(12px,1.25vw,14px);
}

@media screen and (max-width:600px) {
.mystchat-chat #header #identity {
        font-size: 13px;
    }
.mystchat-chat #headerlinks button, .mystchat-chat #headerlinks a {

        line-height: 32px;

    }

}
/* Decorative gems separate only visible header links. */

/* Reusable decorative list/link separator; the style JSON chooses its image. */
.link_space {
    display: inline-block;
    width: var(--link-separator-width,13px);
    height: var(--link-separator-height,13px);
    line-height: var(--link-separator-height,13px);
    margin: 0;
    padding: 0;
    vertical-align: middle;
    text-align: center;
    color: var(--link-separator-colour,currentColor);
    background-image: var(--link-separator-image,none);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
/* Boxed teal refinement: smaller labels and dark violet interactive accents. */
.mystchat-chat.teal-boxes-sidebar #sidebar .room-item {
    font-size: 18px;
}
.mystchat-chat.teal-boxes-sidebar #sidebar .room-item:not(.private):not(.active) {
    color: var(--mystchat-frame);
}
.mystchat-chat.teal-boxes-sidebar #sidebar .room-item:not(.active):hover, .mystchat-chat.teal-boxes-sidebar #sidebar .room-item:not(.active):focus-visible {
    color: #663399;
    text-decoration: none;
    background: var(--mystchat-contrast);
}
.mystchat-chat.teal-boxes-sidebar #sidebar .room-item.active:hover, .mystchat-chat.teal-boxes-sidebar #sidebar .room-item.active:focus-visible {
    color: var(--colour-frame-text,#F8F8F2);
    text-decoration: none;
}
.mystchat-chat.teal-boxes-sidebar #sidebar .room-item .room-mail {
    font-family: Arial,Helvetica,sans-serif;
    font-size: 16px;
    line-height: 1.2;
    font-weight: normal;
    color: #663399;

}
.mystchat-chat.teal-boxes-sidebar #sidebar .room-item .room-mail:hover, .mystchat-chat.teal-boxes-sidebar #sidebar .room-item .room-mail:focus-visible {
    color: #663399;
    text-decoration: none;
    font-weight: bold;
}
/* OPTIONAL JSON DECORATION: only active when the chosen style supplies it. */
.mystchat-chat.decorated-frame #container.frame-surface {
    border-width: var(--decor-frame-border-width,0px);
    border-style: var(--decor-frame-border-style,solid);
    border-color: var(--decor-frame-border-colour,var(--mystchat-frame));
    border-radius: var(--decor-frame-radius,0px);
    box-shadow: var(--decor-frame-shadow,none);

}
.mystchat-chat.decorated-chat .chat-surface {
    border-width: var(--decor-chat-border-width,0px);
    border-style: var(--decor-chat-border-style,solid);
    border-color: var(--decor-chat-border-colour,var(--mystchat-frame));
    border-radius: var(--decor-chat-radius,0px);
    box-shadow: var(--decor-chat-shadow,none);
    box-sizing: border-box;
}
.mystchat-chat.decorated-sidebar .sidebar-surface {
    border-width: var(--decor-sidebar-border-width,0px);
    border-style: var(--decor-sidebar-border-style,solid);
    border-color: var(--decor-sidebar-border-colour,var(--mystchat-frame));
    border-radius: var(--decor-sidebar-radius,0px);
    box-shadow: var(--decor-sidebar-shadow,none);
    box-sizing: border-box;
}
.mystchat-chat.decorated-room #sidebar .room-surface {
    border-width: var(--decor-room-border-width,0px);
    border-style: var(--decor-room-border-style,solid);
    border-color: var(--decor-room-border-colour,var(--mystchat-frame));
    border-radius: var(--decor-room-radius,0px);
    box-shadow: var(--decor-room-shadow,none);

}
.mystchat-chat.decorated-menu .menu-surface {
    border-width: var(--decor-menu-border-width,1px);
    border-style: var(--decor-menu-border-style,solid);
    border-color: var(--decor-menu-border-colour,var(--mystchat-frame));
    border-radius: var(--decor-menu-radius,0px);
    box-shadow: var(--decor-menu-shadow,none);
    box-sizing: border-box;
}
.mystchat-chat.decorated-input .input-surface {
    border-width: var(--decor-input-border-width,1px);
    border-style: var(--decor-input-border-style,solid);
    border-color: var(--decor-input-border-colour,var(--mystchat-frame));
    border-radius: var(--decor-input-radius,0px);
    box-shadow: var(--decor-input-shadow,none);
    box-sizing: border-box;
}
.mystchat-chat.decorated-control #inputrow .control-surface, .mystchat-chat.decorated-control #sidebartoggle.control-surface {
    border-width: var(--decor-control-border-width,1px);
    border-style: var(--decor-control-border-style,solid);
    border-color: var(--decor-control-border-colour,var(--mystchat-frame));
    border-radius: var(--decor-control-radius,0px);
    box-shadow: var(--decor-control-shadow,none);

}
.mystchat-chat.decorated-chat .chat-surface, .mystchat-chat.decorated-sidebar .sidebar-surface {
    overflow: hidden;
}
/* Compact branding and a room title limited to two lines within its table cell. */

.mystchat-chat #sidebar .room-item, .mystchat-chat.teal-boxes-sidebar #sidebar .room-item, .mystchat-chat #sidebar #createpriv {
    font-size: 16px;
}
@media screen and (max-width:600px) {

/* The extra staff row needs touch space only for owners and moderators. */

}
/* Your Chat: compact settings panel with consistent, theme-aware controls. */
.mystchat-chat #readingdialog {
    width: 320px;
    min-width: min(280px,calc(100vw - 32px));
    max-width: calc(100vw - 32px);
    resize: horizontal;
    overflow: auto;
    box-sizing: border-box;
    top: 100px;
    right: 16px;
    padding: 16px;
    font-family: var(--reading-font,"Times New Roman"),serif;
    font-size: 15px;
    line-height: 1.4;
    border-color: var(--colour-outline,var(--mystchat-frame));
    border-radius: var(--decor-menu-radius,8px);
    box-shadow: var(--decor-menu-shadow,0 3px 12px rgba(0,0,0,0.14));
}
.mystchat-chat #readingdialog h2 {
    margin: 0 0 12px;
    color: var(--colour-menu-heading,var(--mystchat-text));
    font-family: var(--title-font,"Times New Roman"),serif;
    font-size: 22px;
    font-weight: normal;
}
.mystchat-chat #readingdialog label {
    margin: 10px 0;
}
.mystchat-chat #readingdialog select {
    display: block;
    width: 100%;
    margin-top: 4px;
    padding: 5px 7px;
    box-sizing: border-box;
    font: inherit;
    color: var(--colour-input-text,var(--mystchat-text));
    background: var(--colour-input-background,var(--mystchat-chat));
    border: 1px solid var(--colour-outline,var(--mystchat-frame));
    border-radius: 5px;
}
.mystchat-chat #readingdialog button {
    padding: 5px 9px;
    font: inherit;
    color: var(--mystchat-menu-text);
    background: var(--mystchat-chat);
    border: 1px solid var(--colour-outline,var(--mystchat-frame));
    border-radius: 5px;
}
.mystchat-chat #readingdialog button:hover, .mystchat-chat #readingdialog button:focus-visible {
    background: var(--mystchat-contrast);
    color: var(--mystchat-contrast-text);
}
.mystchat-chat #readingdialog #fontbtn {
    font-family: "OpenDyslexicThree",sans-serif;
}
.mystchat-chat #readingdialog #fontbtn[aria-pressed="true"] {
    background: var(--mystchat-contrast);
}
.mystchat-chat #readingdialog .reading-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--colour-separator,var(--mystchat-panel));
}
/* Preferences tools share a row and wrap for longer translated labels. */
.mystchat-chat #readingdialog .reading-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}
.mystchat-chat #readingdialog #closereading {
    margin-left: auto;
}
.mystchat-chat #readingdialog button {
    min-height: 30px;
    cursor: pointer;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
}
/* Sidebar links: inherit room colours, with contrasting hover/focus accents. */
.mystchat-chat #sidebar .room-item.room-surface:not(.private):hover, .mystchat-chat #sidebar .room-item.room-surface:not(.private):focus-visible {
    color: var(--colour-private-room-name,#663399);
    text-decoration: none;
}
.mystchat-chat #sidebar .room-item.room-surface.private:hover, .mystchat-chat #sidebar .room-item.room-surface.private:focus-visible, .mystchat-chat #sidebar #createpriv:hover, .mystchat-chat #sidebar #createpriv:focus-visible {
    color: var(--mystchat-frame);
    text-decoration: none;
}
.mystchat-chat #sidebar .room-item.room-surface .room-mail, .mystchat-chat #sidebar .room-item.room-surface .room-mail:hover, .mystchat-chat #sidebar .room-item.room-surface .room-mail:focus-visible {
    color: inherit;
    text-decoration: none;
}
/* The triangle itself spans the shared control height; its button has no decorative surface. */
.mystchat-chat #inputrow #sendbtn > span {

    font-size: 0;
    line-height: 0;
    border-left: calc(var(--composer-control-height) * 0.47) solid transparent;
    border-right: calc(var(--composer-control-height) * 0.47) solid transparent;
    border-bottom: var(--composer-control-height) solid currentColor;
}
/* Members administration: compact rows with horizontal scrolling for wide data. */
.mystchat-admin.mystchat-members #page { max-width: none; }
.mystchat-admin .members-scroll { overflow-x: auto; max-width: 100%; margin: 16px 0; }
.mystchat-admin .members-table {
    width: 100%;
    min-width: 1100px;
    border-collapse: collapse;
    font-size: 18px;
    line-height: 1.2;
}
.mystchat-admin .members-table th, .mystchat-admin .members-table td {
    padding: 4px 6px;
    border: 1px solid #C6CDD1;
    vertical-align: middle;
    white-space: nowrap;
}
/* Short column labels keep the member table compact; full meanings remain on hover. */
.mystchat-admin .members-table thead th, .mystchat-admin .members-table thead .member-sort {
    font-family: Arial, sans-serif;
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
}
.mystchat-admin .members-table tbody th { background: #F1F3F4; text-align: left; }
.mystchat-admin .members-table .member-groups {
    min-width: 0;
    max-width: none;
    white-space: nowrap;
}
.mystchat-admin .members-table .member-groups label {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    white-space: nowrap;
    margin: 0 6px 0 0;
}
.mystchat-admin .members-table input[type="text"] { width: 150px; min-width: 0; }
.mystchat-admin .members-table select, .mystchat-admin .members-table button, .mystchat-admin .members-table input[type="text"] {
    font-size: inherit;
    line-height: 1.2;
    min-height: 0;
    padding: 3px 5px;
    margin: 0;
}
.mystchat-admin .members-table .member-flag { text-align: center; }
.mystchat-admin .member-mail { font-family: Arial,sans-serif; font-weight: bold; }
.mystchat-admin .member-message { display: block; width: 100%; box-sizing: border-box; min-height: 280px; resize: vertical; }
.mystchat-admin .admin-button { display: inline-block; padding: 6px 12px; border: 1px solid #9AA6AF; background: #E5E9EB; color: #303940; text-decoration: none; }
/* Owner type sizes; a member's reading size is scoped to conversation and input. */

.mystchat-chat #sidebar .room-item.room-surface, .mystchat-chat #sidebar #createpriv { font-size: var(--room-font-size,16px); }
.mystchat-chat #sidebar #roomsheading { font-size: calc(var(--title-font-size,42px) * 0.524); }
.mystchat-chat #chatbox, .mystchat-chat #inputrow #msgtext { font-size: var(--chat-font-size,16px); }
/* Public access-error screen: remains reachable outside the protected chat. */
body.mystchat-access { margin: 0; min-height: 100vh; background: #05949B; color: #252B2D; font: 17px/1.5 Georgia,"Times New Roman",serif; }
.mystchat-access .access-wrap { width: calc(100% - 40px); max-width: 560px; margin: 9vh auto 32px; }
.mystchat-access .access-brand { color: #F8F8F2; font: 42px/1.2 "MystChatLogo",Georgia,serif; margin-bottom: 20px; }
.mystchat-access .access-card { background: #F8F8F2; padding: 24px 28px; border: 1px solid #D0F0F0; border-radius: 10px; box-shadow: 0 4px 16px rgba(0,0,0,0.14); }
.mystchat-access h1 { color: #00666B; font-size: 26px; margin: 0 0 16px; }
.mystchat-access p { margin: 0 0 16px; }
.mystchat-access .access-actions { margin: 24px 0 0; }
.mystchat-access .access-login { display: inline-block; padding: 8px 24px; background: #05949B; color: #F8F8F2; border: 1px solid #00666B; border-radius: 5px; text-decoration: none; }
.mystchat-access .access-login:hover, .mystchat-access .access-login:focus-visible { background: #663399; color: #F8F8F2; text-decoration: underline; }
/* Member table tools and pending verification requests. */
.mystchat-admin .member-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 8px 12px;
    margin: 10px 0;
}
.mystchat-admin .member-filters label { display: inline-flex; flex-direction: column; gap: 4px; }
.mystchat-admin .member-filters input { max-width: 260px; }
.mystchat-admin .members-table .member-sort { border: 0; background: transparent; color: inherit; font-weight: bold; padding: 0; text-align: left; }
.mystchat-admin .members-table .member-sort:hover, .mystchat-admin .members-table .member-sort:focus-visible { text-decoration: underline; }
.mystchat-admin .pending-table {
    border-collapse: collapse;
    font-size: 18px;
    line-height: 1.2;
    width: 100%;
}
.mystchat-admin .pending-table th, .mystchat-admin .pending-table td {
    border: 1px solid #C6CDD1;
    padding: 4px 6px;
    text-align: left;
    white-space: nowrap;
}
.mystchat-admin .pending-table form { margin: 0; }
.mystchat-admin .pending-table button { font-size: inherit; padding: 4px 7px; }
.mystchat-admin .members-table input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
}
.mystchat-admin .member-filters input, .mystchat-admin .member-filters select {
    font-size: 18px;
    padding: 4px 6px;
}
/* SUPPORTING PAGES: one centred table for site branding, page content and credits.
   The banner is optional. Individual forms and their field IDs stay inside #page. */
.page-layout {
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
    border-collapse: collapse;
    table-layout: fixed;
}
.page-layout > tbody > tr > .page-heading {
    padding: 8px 0 20px;
    border: 0;
    text-align: center;
    vertical-align: top;
}
.page-banner {
    display: block;
    max-width: 100%;
    max-height: 140px;
    width: auto;
    height: auto;
    margin: 0 auto 12px;
}
.page-site-name {
    font: 32px/1.2 Georgia, "Times New Roman", serif;
    overflow-wrap: break-word;
}
.page-layout > tbody > tr > .page-content {
    padding: 0;
    border: 0;
    vertical-align: top;
}
.page-layout #page {
    max-width: none;
    margin: 0;
    padding: 24px 30px;
}
.page-layout > tbody > tr > .page-footer {
    padding: 16px 6px;
    border: 0;
    text-align: center;
    font-size: 14px;
    line-height: 1.4;
    overflow-wrap: break-word;
}
.page-footer a {
    color: inherit;
}
.mystchat-access .page-layout {
    max-width: 560px;
    width: calc(100% - 40px);
    margin: 6vh auto 24px;
}
.mystchat-access .page-heading, .mystchat-access .page-footer {
    color: #F8F8F2;
}
@media screen and (max-width: 520px) {
.page-layout #page {
        padding: 16px;
    }
.page-site-name {
        font-size: 26px;
    }
}
/* Wide settings tables scroll within the centred page on small screens. */
.settings-table-scroll {
    max-width: 100%;
    overflow-x: auto;
}
/* Registration submit text wraps instead of being clipped in longer translations. */
.mystchat-form #submitrow button {
    max-width: 100%;
    white-space: normal;
}
/* Owner-defined registration questions: each choice is a full clickable label. */
.mystchat-form .registration-extra fieldset label {
    font-weight: normal;
    margin: 8px 0;
}
/* Automatically discovered styles: a radio choice with an optional matching preview and description. */
.mystchat-admin .style-selector { margin: 0; padding: 12px; }
.mystchat-admin .style-picker { display: grid; grid-template-columns: repeat(auto-fit,minmax(170px,1fr)); gap: 12px; }
.mystchat-admin .style-picker .style-choice { display: block; margin: 0; padding: 10px; border: 1px solid #C6CDD1; background: #FAFBFC; cursor: pointer; }
.mystchat-admin .style-choice-heading { display: flex; align-items: center; gap: 5px; }
.mystchat-admin .style-picker input[type="radio"] { flex: 0 0 auto; width: 16px; height: 16px; margin: 0; }
.mystchat-admin .style-picker .style-choice:focus-within { outline: 2px solid #536775; outline-offset: 2px; }
.mystchat-admin .style-thumbnail { display: block; width: 100%; height: auto; max-height: 140px; object-fit: contain; margin-top: 8px; }
.mystchat-admin .style-description { display: block; margin-top: 8px; font-size: 16px; font-weight: normal; overflow-wrap: anywhere; }
@media screen and (max-width:480px) {
.mystchat-admin .style-picker { grid-template-columns: 1fr; } }
/* Short section hotlinks repeat below each ordinary rule, above the next heading. */
.mystchat-admin .settings-divider { border: 0; border-top: 2px solid #BCC5CB; margin: 30px 0 10px; }
.mystchat-admin .settings-nav { font: bold 12px/1.6 Arial, sans-serif; gap: 5px; margin: 12px 0 20px; }
.mystchat-admin .settings-nav a { white-space: nowrap; }
.mystchat-admin .sound-preview { margin: 12px 0 24px; }

/* =========================================================
   CHAT LAYOUT — one source for header, table columns and controls.
   Room identity lives in the sidebar, browser title and entry notice.
   On narrow windows Rooms replaces the chat workspace; it never overlays it.
   ========================================================= */
.mystchat-chat #container {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 1600px;
    height: calc(var(--viewport-height,100dvh) - 16px);
    min-height: 360px;
    margin: 8px auto;
    padding: 0 clamp(8px,3vw,32px);
    box-sizing: border-box;
}
.mystchat-chat table#header {
    display: table;
    flex: none;
    width: 100%;
    height: auto;
    table-layout: fixed;
    border-collapse: collapse;
    margin: 0 0 8px;
}
.mystchat-chat #header .header-brand-column,
.mystchat-chat #header .header-controls-column {
    width: 50%;
}
.mystchat-chat #header td {
    padding: 8px 0 0;
    min-width: 0;
}
.mystchat-chat #header td#branding {
    display: table-cell;
    vertical-align: middle;
    padding-right: 14px;
    overflow: hidden;
}
.mystchat-chat #header td#headercontrols {
    display: table-cell;
    vertical-align: top;
}
.mystchat-chat #header #brandname {
    display: block;
    max-width: 100%;
    font-size: var(--title-font-size,42px);
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mystchat-chat #header #sitelogo {
    width: auto;
    height: auto;
    max-width: min(100%,480px);
    max-height: 96px;
    object-fit: contain;
}
.mystchat-chat #header #identity {
    display: block;
    text-align: right;
    white-space: normal;
    overflow-wrap: anywhere;
    margin-bottom: 14px;
    line-height: 1.3;
}
.mystchat-chat #header #headerlinks {
    display: block;
    max-width: 100%;
    text-align: right;
    overflow: visible;
    white-space: normal;
}
.mystchat-chat #header #stafflinks,.mystchat-chat #header #memberlinks {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0;
}
.mystchat-chat #header #stafflinks {
    margin-bottom: 2px;
}
.mystchat-chat #header .nav-item {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}
.mystchat-chat #headerlinks button,.mystchat-chat #headerlinks a {
    display: inline-block;
    min-width: 0;
    min-height: 24px;
    margin: 0;
    padding: 0;
    font-size: 18px;
    line-height: 24px;
    white-space: nowrap;
}
.mystchat-chat #headerlinks #soundbtn {
    width: auto;
    height: auto;
}
.mystchat-chat #headerlinks #roomsbtn {
    display: inline-flex;
    align-items: center;
}
.mystchat-chat #workspace {
    flex: none;
    display: table;
    width: 100%;
    height: var(--workspace-height,65vh);
    table-layout: fixed;
    border-collapse: collapse;
}
.mystchat-chat #workspace td {
    vertical-align: top;
}
.mystchat-chat #mainchatcell {
    height: var(--workspace-height,65vh);
    padding: 0;
}
.mystchat-chat #sidebarcell {
    position: static;
    width: clamp(220px,28vw,300px);
    height: var(--workspace-height,65vh);
    padding: 0 0 0 24px;
    box-sizing: border-box;
    box-shadow: none;
}
.mystchat-chat #workspace.sidebar-closed #sidebarcell {
    display: none;
}
.mystchat-chat #mainchat {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: var(--workspace-height,65vh);
    min-width: 0;
    min-height: 0;
    box-sizing: border-box;
}
.mystchat-chat #chatbox {
    flex: 1 1 0;
    min-height: 0;
    padding: 14px 16px;
    overflow-y: auto;
    box-sizing: border-box;
}
.mystchat-chat #sidebar {
    display: block;
    width: 100%;
    height: var(--workspace-height,65vh);
    padding: 12px;
    overflow-y: auto;
    box-sizing: border-box;
}
.mystchat-chat #sidebar #roomsheading {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0 0 8px;
}
.mystchat-chat #sidebar #sidebartoggle {
    flex: none;
    width: 24px;
    min-height: 32px;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    color: inherit;
    font: 22px/1 Arial,sans-serif;
    cursor: pointer;
}
.mystchat-chat #sidebar #createpriv {
    margin: 0 0 10px;
    padding: 4px 6px;
}
.mystchat-chat #sidebar .room-group {
    margin: 0 0 10px;
    padding: 0;
}
.mystchat-chat #sidebar .room-item {
    position: relative;
    display: block;
    min-height: 0;
    padding: 4px 24px 4px 6px;
    margin: 0;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mystchat-chat #sidebar .room-users {
    margin: 3px 0 0 28px;
    padding: 0;
}
.mystchat-chat #sidebar .room-user {
    display: block;
    min-height: 0;
    padding: 2px 0;
    margin: 0;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mystchat-chat #sidebar .room-marker {
    margin-right: 4px;
    font-size: 12px;
}
.mystchat-chat.room-boxes #sidebar .room-marker {
    display: none;
}
.mystchat-chat.room-boxes #sidebar .room-users {
    margin-left: 18px;
}
.mystchat-chat #inputarea {
    flex: none;
    padding: 9px 12px 8px;
    box-sizing: border-box;
}
.mystchat-chat #inputrow {
    --composer-control-height: max(36px,calc(var(--chat-font-size,16px) * 1.2 + 16px));
    --composer-button-width: 36px;
    display: flex;
    align-items: center;
    gap: 7px;
    width: 100%;
}
.mystchat-chat #inputrow #msgtext {
    flex: 1 1 0;
    width: 0;
    min-width: 0;
    height: var(--composer-control-height);
    min-height: var(--composer-control-height);
    max-height: min(140px,30vh);
    padding: 7px;
    box-sizing: border-box;
    overflow-y: auto;
}
.mystchat-chat #inputrow #msgtext:placeholder-shown {
    white-space: pre;
    overflow-x: hidden;
}
.mystchat-chat #inputrow #sendbtn,.mystchat-chat #inputrow #commandsbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 var(--composer-button-width);
    width: var(--composer-button-width);
    height: var(--composer-control-height);
    min-height: 0;
    padding: 0;
    box-sizing: border-box;
}
.mystchat-chat #inputrow #sendbtn > span {
    display: block;
    width: 0;
    height: 0;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-bottom: min(44px,calc(var(--composer-control-height) * 0.86)) solid currentColor;
}
.mystchat-chat #inputrow #emojibtn {
    display: none;
}
.mystchat-chat #footer {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 4px 12px;
    height: auto;
    min-height: 28px;
    padding: 8px 2px;
    box-sizing: border-box;
}
.mystchat-chat #footer > div {
    max-width: 100%;
    overflow-wrap: anywhere;
}
/* A private conversation changes its edge and Send colour, not its background. */
.mystchat-chat.private-conversation #mainchat {
    outline: 1px solid var(--colour-private-room-name,#663399);
    outline-offset: -1px;
}
.mystchat-chat.private-conversation #inputrow #sendbtn,.mystchat-chat.private-conversation #inputrow #sendbtn:hover {
    color: var(--colour-private-room-name,#663399);
}
/* Switch panels only when the chat would be about as narrow as Rooms. */
@media screen and (max-width:500px) {
    /* Keep navigation text comfortably inside the sidebar's outer edges. */
    .mystchat-chat #header td#headercontrols {
    padding-left: 8px;
    padding-right: 8px;
}
    .mystchat-chat #container {
    height: calc(var(--viewport-height,100dvh) - 8px);
    margin: 4px auto;
    padding: 0 8px;
}
    .mystchat-chat #headerlinks button,.mystchat-chat #headerlinks a {
    min-height: 26px;
    line-height: 26px;
}
    .mystchat-chat #workspace:not(.sidebar-closed) #mainchatcell {
    display: none;
}
    .mystchat-chat #workspace:not(.sidebar-closed) #sidebarcell {
    display: table-cell;
    width: auto;
    padding: 0;
}
    .mystchat-chat #workspace.sidebar-closed #mainchatcell {
    display: table-cell;
    width: auto;
}
    .mystchat-chat #sidebar #sidebartoggle {
    width: 32px;
    min-height: 44px;
}
    .mystchat-chat #sidebar .room-item {
    min-height: 32px;
    box-sizing: border-box;
}
    .mystchat-chat #sidebar .room-user {
    min-height: 28px;
    box-sizing: border-box;
}
    .mystchat-chat #inputarea {
    padding: 8px;
}
    .mystchat-chat #inputrow {
    --composer-control-height: max(44px,calc(var(--chat-font-size,16px) * 1.2 + 16px));
    --composer-button-width: 44px;
    gap: 4px;
}
    .mystchat-chat #inputrow #sendbtn > span {
    border-left-width: 14px;
    border-right-width: 14px;
}
}
@media screen and (max-width:600px) {
    .mystchat-chat #inputrow {
    gap: 4px;
}
    .mystchat-chat #inputrow #emojibtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 44px;
    width: 44px;
    height: var(--composer-control-height);
    min-height: 44px;
    padding: 0;
}
}

/* The member's name opens preferences; the complete profile fields follow later. */
.mystchat-chat #identity .identity-name {
    font: inherit;
    color: inherit;
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    cursor: pointer;
    text-decoration: none;
    text-underline-offset: 2px;
}
/* The name remains a quiet link until hovered; keyboard focus has its own outline. */
.mystchat-chat #identity .identity-name:hover {
    text-decoration: underline;
}
.mystchat-chat #identity .identity-name:focus-visible {
    outline: 1px solid currentColor;
    outline-offset: 2px;
}

/* Popups fit the visible window; translated labels wrap and actions stay reachable. */
.mystchat-chat #commandsmenu {
    max-height: calc(var(--viewport-height,100dvh) - 16px);
    overflow-y: auto;
    overflow-x: hidden;
}
.mystchat-chat #commandscontents {
    grid-template-columns: minmax(0,1fr) minmax(0,1fr);
}
.mystchat-chat #commandsmenu .command-item {
    min-width: 0;
    min-height: 28px;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
}
.mystchat-chat #readingdialog {
    top: 16px;
    right: 16px;
    max-height: calc(var(--viewport-height,100dvh) - 32px);
    overflow-y: auto;
    overflow-x: hidden;
}
.mystchat-chat #readingdialog .reading-actions {
    position: sticky;
    bottom: -16px;
    padding-bottom: 12px;
    background: var(--surface-menu,var(--mystchat-menu));
}
.mystchat-chat #readingdialog label {
    overflow-wrap: anywhere;
}
.mystchat-chat #readingdialog select {
    min-width: 0;
    max-width: 100%;
}

/* Plain menus inherit the palette edge; decorative menu borders keep their JSON choice. */
.mystchat-chat:not(.decorated-menu) #commandsmenu,
.mystchat-chat:not(.decorated-menu) #usermenu,
.mystchat-chat:not(.decorated-menu) #emojimenu {
    border-color: var(--colour-outline,var(--mystchat-frame));
}