/* Preserve the existing HelloChat layout, with encryption controls added. */
.crypto-panel { margin: 12px 8px; padding: 12px; border: 1px solid #aab6c4; border-radius: 5px; background: #f5f8fc; color: #172637; font: 14px/1.45 system-ui, sans-serif; }
.crypto-panel h2 { margin: 0 0 6px; font-size: 17px; }
.crypto-panel p { margin: 7px 0; }
.crypto-panel input:not([type=checkbox]) { box-sizing: border-box; max-width: 100%; width: 340px; padding: 7px; margin: 5px; }
.crypto-panel button, #retry-send { padding: 7px 10px; margin: 4px; cursor: pointer; }
.crypto-panel code { overflow-wrap: anywhere; user-select: all; }
.crypto-actions { display: flex; flex-wrap: wrap; }
button:disabled { opacity: .55; cursor: default; }
[hidden] { display: none !important; }
.logout { float: right; padding: 3px 8px; color: inherit; }
.userbtn { display: inline-block; background: #0084ff; color: white; text-decoration: none; padding: 8px 14px; border-radius: 5px; }
.e2ee-chat { padding-bottom: 5rem; }
.e2ee-chat .content-container { display: block; max-width: 520px; margin: auto; }
/* Reuse the v1 whiteblue bubble styles inside full chronological rows. */
.e2ee-chat #messages { padding: 0; margin: 0; list-style: none; }
.e2ee-chat #messages > li.chatbox__messageBox { display: block; position: relative; box-sizing: border-box; width: 100%; max-width: none; padding: 0; margin: 5px 0; text-align: left; background: transparent; color: inherit; scroll-margin-bottom: calc(var(--composer-height, 4rem) + 28px); }
.e2ee-chat #messages > li.chatbox__messageBox--primary { text-align: right; }
.e2ee-chat #messages .chatbox__message { max-width: 90%; box-sizing: border-box; overflow-wrap: anywhere; }
.e2ee-chat #messages .message-text { display: inline; white-space: pre-wrap; overflow-wrap: anywhere; }
.e2ee-chat #messages .message-meta { margin-right: 6px; }
.e2ee-chat #messages .msg-info { margin: 2px 4px 0; color: #adadad; }
.e2ee-chat #messages .mine .msg-info { color: #adadad; }
.e2ee-chat #messages .message-status { margin-left: 6px; white-space: nowrap; }
.e2ee-chat #messages .message-status[aria-label="Read"] { margin-left: 0; }
.e2ee-chat #messages .message-day { display: block; width: 100%; text-align: center; margin: 12px 0; font-size: 12px; color: #666; }
.e2ee-chat #messages .chatbox__message--primary { position: relative; padding-right: 36px; }
.e2ee-chat #messages .context-bnts { display: inline-flex; align-items: center; gap: 10px; margin-left: 10px; vertical-align: middle; }
.e2ee-chat #messages .edit-button { margin: 0; padding: 3px 8px; font-size: 10px; }
.e2ee-chat #messages .delete-button { position: absolute; top: 3px; right: 3px; display: block; min-width: 20px; height: 20px; padding: 0 7px; margin: 0; font: 16px/20px system-ui, sans-serif; }
.e2ee-chat #messages .msg-image { display: block; width: auto; max-width: min(300px, 100%); height: auto; max-height: 60vh; object-fit: contain; margin-top: 6px; }
.e2ee-chat #messages .delete-button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .e2ee-chat #messages .delete-button { opacity: 0; pointer-events: none; transition: opacity .12s ease; }
  .e2ee-chat #messages .chatbox__message--primary:hover .delete-button,
  .e2ee-chat #messages .chatbox__message--primary:focus-within .delete-button,
  .e2ee-chat #messages .delete-button:focus-visible { opacity: 1; pointer-events: auto; }
}
/* Typing must remain visible when history scrolls behind the fixed composer. */
.e2ee-chat #typingMessage { position: fixed; z-index: 2; bottom: var(--composer-height, 4rem); left: 50%; transform: translateX(-50%); box-sizing: border-box; width: calc(100% - 20px); max-width: 500px; height: 28px; padding: 4px 8px; margin: 0; background: #fff; color: #666; border: 0; animation: none; line-height: 20px; white-space: nowrap; text-overflow: ellipsis; }
.e2ee-chat #form { z-index: 2; }
.e2ee-chat #input { flex: 1; min-width: 0; box-sizing: border-box; background: #fff; color: #142335; z-index: 1; }
/* Center one line in the existing 2.5rem input; retain padding as it grows. */
.e2ee-chat #input { line-height: 1.25rem; padding-block: calc(.625rem - 1px); }
.e2ee-chat #sendButton { margin: 4px; }
.e2ee-chat #resetButton { align-self: center; padding: 5px; cursor: pointer; }
.e2ee-chat #form.editing #input { background: #3055bd; color: #fff; }
.e2ee-chat #form .file-input-container { flex-shrink: 0; margin: 4px; align-self: center; }
.e2ee-chat #form .file-input { display: block; position: absolute; width: 1px; height: 1px; opacity: 0; }
.e2ee-chat #form .file-input-label { display: block; max-width: 65px; padding: 4px; font-size: 10px; overflow-wrap: anywhere; cursor: pointer; }
body[data-theme=dark].e2ee-chat #form .file-input-label { color: #142335; }
.e2ee-chat #form .file-input:disabled + .file-input-label { opacity: .55; cursor: default; }
.e2ee-chat #form .file-input-container:focus-within { outline: 2px solid #006ed4; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
@font-face { font-family: Poppins; src: url('/fonts/Poppins-Regular.ttf') format('truetype'); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: 'Font Awesome 5 Free'; src: url('/fonts/fa-solid-900.woff2') format('woff2'); font-style: normal; font-weight: 900; font-display: block; }
.auth-page, .auth-page * { font-family: Poppins, sans-serif; }
.auth-page .field .fas { flex-shrink: 0; font-family: 'Font Awesome 5 Free'; font-weight: 900; }
.auth-page .field .fa-user::before { content: '\f007'; }
.auth-page .field .fa-envelope::before { content: '\f0e0'; }
.auth-page .field .fa-lock::before { content: '\f023'; }
.auth-page .password-field { position: relative; }
.auth-page .password-field input { min-width: 0; padding-right: 44px; }
.auth-page .password-toggle { position: absolute; top: 1px; right: 1px; bottom: 1px; width: 44px; height: auto; margin: 0; padding: 0; border: 0; background: transparent; box-shadow: none; }
.auth-page .password-toggle span { font-family: 'Font Awesome 5 Free'; font-weight: 900; }
.auth-page .password-toggle span::before { content: '\f06e'; }
.auth-page .password-toggle.is-visible span::before { content: '\f070'; }
.auth-page .password-toggle:focus-visible { outline: 2px solid #006ed4; outline-offset: -3px; }

.logout-form { display: inline; margin: 0; float: right; }

/* Conversation content precedes optional security controls on every viewport. */
.crypto-panel summary { cursor: pointer; font-weight: 600; }
.chat-status { margin: 8px; font: 14px/1.4 system-ui, sans-serif; }
.chat-status p { margin: 4px 0; }
.e2ee-chat #crypto-status { display: none; }
/* Call controls share the header row; audio/signaling retain their existing IDs. */
#call-panel { display: inline-flex; align-items: center; flex: 0 0 auto; gap: 6px; box-sizing: border-box; height: 36px; max-width: 100%; padding: 1px 4px; border: 1px solid #aab6c4; border-radius: 12px; background: #fff; color: inherit; font: 12px/1.2 system-ui, sans-serif; }
#call-panel p { margin: 0; }
#call-status { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#call-status:empty { display: none; }
#incoming-call, #call-controls { display: flex; align-items: center; gap: 4px; }
#incoming-call-name { max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
#call-panel button { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 5px; border: 0; border-radius: 8px; background: transparent; color: inherit; cursor: pointer; }
.app-header #call-panel svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#call-indicator { display: flex; color: #52789e; }
#call-panel[data-connected=true] #call-indicator { color: #16823c; }
#call-panel #accept-call { background: #16823c; color: #fff; }
#call-duration { min-width: 5ch; font-variant-numeric: tabular-nums; font-weight: 600; }
#call-panel :is(#hangup-call, #decline-call) { background: #d32f2f; color: #fff; }
#call-panel :is(#hangup-call, #decline-call) svg { transform: rotate(135deg); }
#mute-call .mute-slash { display: none; }
#call-panel #mute-call[data-muted=true] { background: #fff2dc; color: #874b00; }
#mute-call[data-muted=true] .mute-slash { display: block; }
.app-header[data-call-active=true] .logo { display: none; }
@media (max-width: 400px) {
  .app-header[data-call-active=true] { gap: 6px; }
  #call-duration { display: none; }
  #incoming-call-name { max-width: 65px; }
  #call-status { max-width: 50px; }
  #call-panel { gap: 4px; }
}
.security-settings { margin-top: 16px; }
.app-header { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; flex-wrap: nowrap; gap: 8px; padding: 8px 10px; background: #f5f8fc; color: #172637; border-bottom: 1px solid #aab6c4; border-radius: 0; transition: transform .16s ease; }
.app-header :is(#navigation-toggle, #dashboard-button, #call-button) { display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: 0 0 auto; box-sizing: border-box; width: 36px; min-width: 36px; height: 36px; min-height: 36px; padding: 0; margin: 0; border: 1px solid #aab6c4; border-radius: 8px; background: #fff; color: inherit; font-size: 18px; line-height: 1; text-decoration: none; cursor: pointer; }
.app-header #call-button { width: auto; padding: 0 10px; font-size: 14px; }
.app-header #call-button:disabled { opacity: .55; cursor: default; }
.app-header svg { width: 20px; height: 20px; fill: currentColor; }
.app-header #dashboard-button svg { width: 22px; height: 22px; }
.app-header #call-button svg { fill: none; }
.app-header #contact-presence { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; margin: 0; padding: 0; background: transparent; color: inherit; font-size: 16px; font-weight: 600; }
.app-header #contact-presence .username { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-header #contact-presence .status-online { flex-shrink: 0; }
body[data-theme=dark] .app-header { background: #24292e; color: #eee; border-color: #64707c; }
body[data-theme=dark] .app-header :is(#navigation-toggle, #dashboard-button, #call-button) { background: #171b20; border-color: #64707c; }
.app-header.menu-hidden { transform: translateY(calc(-100% - 1px)); }
@media (max-width: 600px) {
  .crypto-panel { margin: 8px 4px; padding: 8px; }
  .crypto-panel input:not([type=checkbox]) { width: 100%; margin: 5px 0; }
  .e2ee-chat .chatbox { margin: 0; width: 100%; box-sizing: border-box; }
}

.app-header .logo { flex: 0 0 auto; font-size: 16px; font-weight: 600; }
.app-header .hello-user { min-width: 0; margin-left: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Native modal navigation keeps the active conversation underneath. */
#navigation-dialog { box-sizing: border-box; width: min(560px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); padding: 16px; border: 1px solid #aab6c4; border-radius: 7px; background: #f5f8fc; color: #172637; font: 14px/1.45 system-ui, sans-serif; overflow: auto; }
#navigation-dialog::backdrop { background: rgba(10, 25, 45, .5); }
.navigation-header { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.navigation-header h2 { flex: 1; margin: 0; font-size: 18px; }
#navigation-dialog button { cursor: pointer; padding: 9px 12px; min-height: 40px; }
#navigation-dialog button:disabled { cursor: default; }
#navigation-actions { display: grid; gap: 8px; }
#navigation-actions > button, #navigation-actions > .navigation-home, #navigation-actions .logout { width: 100%; box-sizing: border-box; display: block; text-align: left; border: 1px solid #aab6c4; border-radius: 5px; background: #fff; color: #172637; }
#navigation-actions > .navigation-home { min-height: 40px; padding: 9px 12px; cursor: pointer; text-decoration: none; }
#navigation-actions .logout-form { display: block; float: none; }
#navigation-dialog .crypto-panel { margin: 0; padding: 0; border: 0; background: transparent; }
#navigation-dialog h2 { margin-top: 0; }
#navigation-dialog ul { padding-left: 0; list-style: none; }
#navigation-dialog li { margin-bottom: 8px; }
#navigation-dialog input:not([type=checkbox]) { box-sizing: border-box; max-width: 100%; padding: 7px; }
#navigation-invitations .invitation-composer { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin: 0; }
#navigation-invitations .invitation-composer input[type=text] { width: 100%; min-width: 0; margin: 0; }
#navigation-dialog :focus-visible, #navigation-toggle:focus-visible, #dashboard-button:focus-visible, #call-panel button:focus-visible { outline: 3px solid #006ed4; outline-offset: 3px; }
#verification-state { display: flex; align-items: flex-start; gap: 8px; padding: 9px 10px; border: 1px solid #aab6c4; border-radius: 5px; font-weight: 600; }
#verification-state::before { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%; text-align: center; font-weight: 800; line-height: 20px; }
#verification-state[data-state=verified] { border-color: #287a3d; background: #e4f6e8; color: #18562a; }
#verification-state[data-state=verified]::before { content: '✓'; background: #287a3d; color: #fff; }
#verification-state[data-state=remembered] { border-color: #52789e; background: #e8f1fa; color: #244b6c; }
#verification-state[data-state=remembered]::before { content: 'i'; background: #52789e; color: #fff; }
#verification-state[data-state=changed] { border-color: #a33b20; background: #fff2dc; color: #70260f; }
#verification-state[data-state=changed]::before { content: '!'; background: #a33b20; color: #fff; }
#verification-state[data-state=pending] { color: #4c5c6b; }
#verification-state[data-state=pending]::before { content: '?'; background: #71808e; color: #fff; }
#navigation-dialog:has(#navigation-contact:not([hidden])) #navigation-status { display: none; }
#contact-warning { margin: 8px; padding: 10px; border: 2px solid #a33b20; background: #fff2dc; color: #70260f; }
#navigation-status:empty { display: none; }
.password-change { margin-top: 14px; }
.password-change-field { display: flex; flex-direction: column; gap: 4px; margin: 10px 0; }
.password-change-field label { font-weight: 600; }
.password-change-field input:not([type=checkbox]) { width: 100%; margin: 0; }
.password-input-wrap { display: flex; align-items: stretch; gap: 0; width: 100%; }
.password-input-wrap input:not([type=checkbox]), .password-visibility-toggle { box-sizing: border-box; height: 40px; }
.password-input-wrap input:not([type=checkbox]) { flex: 1 1 auto; min-width: 0; width: auto; padding-right: 10px; border-radius: 4px 0 0 4px; }
.password-visibility-toggle { flex: 0 0 auto; min-width: 52px; min-height: 0; margin: 0 0 0 -1px !important; padding: 0 8px; border-radius: 0 4px 4px 0; box-shadow: none; font-size: 13px; font-weight: 600; line-height: 1; white-space: nowrap; }
.password-visibility-toggle:hover, .password-visibility-toggle:focus-visible { background: #e8f1fa; }
.password-visibility-toggle:focus-visible { outline: 2px solid #006ed4; outline-offset: 1px; }
.crypto-actions #create-vault, .crypto-actions #unlock-vault, #change-e2ee-password { background: #006ed4; color: #fff; border-color: #005ba9; font-weight: 700; padding: 9px 14px; }
.crypto-actions #create-vault:disabled, .crypto-actions #unlock-vault:disabled, #change-e2ee-password:disabled { opacity: .6; }
#change-password-status { min-height: 1.45em; margin: 8px 0 0; }
/* Reuse the original Design stylesheets, including their dark message bubbles. */
body[data-theme=dark] { background: #07050a; color: #eee; }
body[data-theme=dark] #navigation-dialog { background: #24292e; color: #eee; border-color: #64707c; }
body[data-theme=dark] #navigation-actions > button,
body[data-theme=dark] #navigation-actions .logout,
body[data-theme=dark] #navigation-dialog input:not([type=checkbox]) { background: #171b20; color: #eee; border-color: #64707c; }
body[data-theme=dark] #navigation-dialog a { color: #8cc7ff; }
body[data-theme=dark] #call-panel { border-color: #64707c; background: #171b20; color: #eee; }
body[data-theme=dark] #call-panel[data-connected=true] #call-indicator { color: #72d68b; }
body[data-theme=dark] #call-panel #mute-call[data-muted=true] { background: #634800; color: #fff2dc; }
body[data-theme=dark] #navigation-dialog .crypto-panel { color: #eee; }
body[data-theme=dark] #navigation-dialog .crypto-panel label,
body[data-theme=dark] #navigation-dialog .crypto-panel p,
body[data-theme=dark] #navigation-dialog .crypto-panel summary,
body[data-theme=dark] #navigation-dialog .crypto-panel code { color: #eee; }
body[data-theme=dark] #navigation-dialog .crypto-panel input:not([type=checkbox]),
body[data-theme=dark] #navigation-dialog .crypto-panel button { border-color: #64707c; background: #171b20; color: #eee; }
body[data-theme=dark] #navigation-dialog .crypto-panel button:disabled { background: #343a40; color: #c9d1d9; }
body[data-theme=dark] #verification-state[data-state=verified] { border-color: #72d68b; background: #1d6634; color: #fff; }
body[data-theme=dark] #verification-state[data-state=verified]::before { background: #72d68b; color: #123d20; }
body[data-theme=dark] .chat-status,
body[data-theme=dark].e2ee-chat #messages .message-day { color: #ddd; }
body[data-theme=dark].e2ee-chat #messages .chatbox__message:not(.chatbox__message--primary) { color: #111; }
body[data-theme=dark].e2ee-chat #typingMessage { background: #000; color: #ddd; }
.status-online { color: #5df165; }
.online-status-button { display: inline-flex; align-items: center; gap: 6px; }
.conversation-entry { display: inline-flex; align-items: center; gap: 6px; vertical-align: middle; }
.identity-verified { display: inline-flex; align-items: center; width: 17px; height: 20px; color: #287a3d; }
.identity-verified svg { display: block; width: 17px; height: 20px; fill: currentColor; }
.identity-verified-check { fill: none; stroke: #fff; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
a.notebtn, #navigation-dialog button.notebtn { background: #0757a1; color: #fff; }
#note-to-self { margin-bottom: 10px; }
#note-to-self button.notebtn { padding: 8px 14px; }
#navigation-dialog #note-to-self button.notebtn { min-height: 0; }
.dashboard-invitations { margin-top: 16px; }
.dashboard-invitations h2 { margin-bottom: 8px; }
.dashboard-invitations ul { margin: 0; padding-left: 0; list-style: none; }
.dashboard-invitations li { margin-bottom: 8px; }
.styleSwitch { cursor: pointer; }
@media (max-width: 600px) {
  #navigation-dialog { padding: 12px; }
  .navigation-header { flex-wrap: wrap; }
  #navigation-dialog .crypto-actions button { flex: 1 1 140px; }
}