.sub-page { max-width: 640px; margin: 0 auto 30px; font-size: 15px; line-height: 1.5; }
.sub-page h1 { margin: 0 0 12px; font-size: 24px; }
.sub-page h2 { margin: 0 0 8px; font-size: 16px; }
.sub-page h2 label { font: inherit; font-weight: 600; }
.sub-channel { margin-top: 20px; padding: 16px; border: 1px solid #c8ccd4; border-radius: 8px; }
.sub-line { display: flex; flex-wrap: wrap; gap: 8px; }
.sub-page .sub-line input { flex: 1 1 220px; box-sizing: border-box; width: auto; max-width: none; margin: 0; padding: 8px 10px; font: inherit; }
.sub-button { padding: 8px 16px; border: 1px solid #2f6fde; border-radius: 4px; background: #fff; color: #235bc0; cursor: pointer; font: inherit; }
.sub-button:hover { background: #e8eefc; }
.sub-button.sub-primary { background: #2f6fde; color: #fff; }
.sub-button.sub-primary:hover { background: #235bc0; }
.sub-button:disabled { opacity: .6; cursor: default; }
.sub-result { margin-top: 10px; padding: 8px 12px; border-radius: 4px; }
.sub-result[hidden] { display: none; }
.sub-result-ok { background: #e4f4e4; color: #1d5a1d; }
.sub-result-error { background: #fbe5e5; color: #8c1c1c; }

/* The window stays over the page; only the site menu opens over the window. */
ul#menu li ul { z-index: 2500; }

.msg-dialog {
    position: fixed;
    z-index: 2000;
    box-sizing: border-box;
    width: 860px;
    max-width: calc(100vw - 24px);
    max-height: 84vh;
    overflow-y: auto;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, .35);
}

.msg-dialog-header {
    position: sticky;
    z-index: 1;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 8px 8px 16px;
    background: #2f4d7a;
    color: #fff;
    cursor: move;
    font-size: 15px;
    font-weight: 600;
    -webkit-user-select: none;
    user-select: none;
}

.msg-dialog-close {
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: none;
    color: #fff;
    cursor: pointer;
    font-size: 22px;
    line-height: 28px;
}
.msg-dialog-close:hover { background: rgba(255, 255, 255, .2); }

.msg-compose {
    padding: 0 16px 12px;
    font-size: 14px;
    line-height: 1.4;
}

.msg-compose [hidden] { display: none !important; }

.msg-notice {
    margin: 0 -16px 4px;
    padding: 7px 16px;
    background: #fff4d6;
    border-bottom: 1px solid #ecd9a0;
    color: #5f4b00;
}

.msg-status {
    margin: 8px 0 4px;
    padding: 8px 12px;
    border-radius: 4px;
}
.msg-status-ok { background: #e4f4e4; color: #1d5a1d; }
.msg-status-error { background: #fbe5e5; color: #8c1c1c; }
.msg-status ul { margin: 0; padding-left: 18px; }

.msg-row {
    display: flex;
    align-items: flex-start;
    min-height: 38px;
    border-bottom: 1px solid #e3e5e9;
}

.msg-label {
    flex: 0 0 68px;
    padding: 9px 0;
    color: #5c6370;
    font-size: 14px;
    font-weight: normal;
}

.msg-input,
.msg-compose .msg-input {
    flex: 1;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 9px 0;
    border: 0;
    outline: 0;
    background: transparent;
    box-shadow: none;
    font: inherit;
}

.msg-row:focus-within { border-bottom-color: #2f6fde; }

.msg-row-actions { flex: none; padding: 7px 0 0 8px; white-space: nowrap; }

.msg-link {
    padding: 2px 5px;
    border: 0;
    background: none;
    color: #2f6fde;
    cursor: pointer;
    font: inherit;
}
.msg-link:hover { text-decoration: underline; }

.msg-chips {
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    align-items: center;
    min-width: 0;
    padding: 4px 0;
    cursor: text;
}

.msg-chip {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    margin: 2px 4px 2px 0;
    padding: 2px 4px 2px 10px;
    background: #e8eefc;
    border: 1px solid transparent;
    border-radius: 13px;
    overflow-wrap: anywhere;
}
.msg-chip-invalid { background: #fbe5e5; border-color: #d65c5c; color: #8c1c1c; }

.msg-chip-remove {
    margin-left: 3px;
    padding: 0 5px;
    border: 0;
    background: none;
    color: inherit;
    cursor: pointer;
    font-size: 15px;
    line-height: 18px;
}

.msg-compose input.msg-chip-input {
    flex: 1;
    width: auto;
    min-width: 140px;
    margin: 2px 0;
    padding: 3px 0;
    border: 0;
    outline: 0;
    background: transparent;
    box-shadow: none;
    font: inherit;
}

.msg-suggest {
    position: absolute;
    z-index: 2100;
    max-height: 260px;
    margin: 0;
    padding: 4px 0;
    overflow-y: auto;
    list-style: none;
    background: #fff;
    border: 1px solid #c8ccd4;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .18);
    font-size: 14px;
}
.msg-suggest li { padding: 6px 12px; cursor: pointer; overflow-wrap: anywhere; }
.msg-suggest li.msg-suggest-active,
.msg-suggest li:hover { background: #e8eefc; }

.msg-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px solid #e3e5e9;
}
.msg-toolbar button {
    min-width: 30px;
    height: 28px;
    margin-right: 2px;
    padding: 0 7px;
    border: 1px solid transparent;
    border-radius: 4px;
    background: none;
    cursor: pointer;
    color: #333;
    font: inherit;
    font-size: 13px;
}
.msg-toolbar button:hover { background: #eef0f4; }
.msg-toolbar button.msg-active { background: #dfe6f7; border-color: #bccbee; }
.msg-toolbar-gap { width: 10px; }

.msg-editor,
.msg-compose textarea.msg-editor {
    display: block;
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    min-height: 170px;
    margin: 0;
    padding: 12px 0;
    border: 0;
    outline: 0;
    background: transparent;
    box-shadow: none;
    overflow-wrap: anywhere;
    font: inherit;
}
.msg-editor:empty::before { content: attr(data-placeholder); color: #8a909b; }
.msg-compose textarea.msg-sms-text { min-height: 160px; resize: vertical; }

.msg-counter {
    padding-bottom: 6px;
    color: #5c6370;
    font-size: 12px;
    text-align: right;
}
.msg-counter-warning { color: #9a5b00; }

.msg-files { margin: 0; padding: 0; list-style: none; }
.msg-files li {
    display: flex;
    align-items: center;
    margin: 4px 0;
    padding: 5px 8px;
    background: #f3f4f7;
    border-radius: 4px;
}
.msg-file-name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.msg-file-size { margin: 0 10px; color: #5c6370; font-size: 12px; white-space: nowrap; }

.msg-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding-top: 10px;
    border-top: 1px solid #e3e5e9;
}
.msg-footer-gap { flex: 1; }

.msg-compose button.msg-send {
    padding: 8px 24px;
    border: 0;
    border-radius: 18px;
    background: #2f6fde;
    color: #fff;
    cursor: pointer;
    font: inherit;
    font-weight: 600;
}
.msg-compose button.msg-send:hover { background: #235bc0; }
.msg-compose button.msg-send:disabled { background: #9db8e8; cursor: default; }

.msg-attach,
.msg-discard {
    padding: 7px 12px;
    border: 1px solid #c8ccd4;
    border-radius: 18px;
    background: #fff;
    color: #333;
    cursor: pointer;
    font: inherit;
}
.msg-attach:hover, .msg-discard:hover { background: #f3f4f7; }

.msg-secure { display: inline-flex; align-items: center; margin: 0; color: #333; font-size: 14px; font-weight: normal; cursor: pointer; }
.msg-secure input { margin: 0 6px 0 0; }

.msg-history-subject { font-weight: 600; overflow-wrap: anywhere; }
.msg-history-preview { color: #5c6370; overflow-wrap: anywhere; }
.msg-history-role { color: #5c6370; font-size: 12px; }
.msg-history-status { color: #5c6370; font-size: 12px; }
.msg-history-error { color: #8c1c1c; font-size: 12px; }

.msg-secure-warning {
    margin-top: 10px;
    padding: 8px 12px;
    background: #fbe5e5;
    border-radius: 4px;
    color: #8c1c1c;
}

.msg-file-state { margin: 0 10px; color: #5c6370; font-size: 12px; white-space: nowrap; }

.msg-compose :focus-visible { outline: 2px solid #2f6fde; outline-offset: 1px; }
.msg-compose .msg-input:focus-visible,
.msg-compose .msg-chip-input:focus-visible,
.msg-compose .msg-editor:focus-visible { outline: 0; }

.msg-drop {
    position: fixed;
    z-index: 2200;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(232, 238, 252, .94);
    border: 2px dashed #2f6fde;
    border-radius: 8px;
    color: #1f4fa8;
    font-size: 18px;
}

@media (max-width: 600px) {
    .msg-compose { padding: 0 10px 10px; }
    .msg-notice { margin: 0 -10px 4px; padding: 7px 10px; }
    .msg-label { flex-basis: 56px; }
}