/* Rules every theme shares and that must win over the theme files: the rounded
   geometry of the cloud layout and the "mine" state of a reaction. Loaded after
   the theme files, inside @layer themes. */
@layer themes {
/* Shared geometry only: each theme keeps its palette, materials and atmosphere. */
:root .cloud-chat .chat-screen{
  gap:12px;
  padding:calc(12px + env(safe-area-inset-top)) calc(12px + env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) calc(12px + env(safe-area-inset-left));
}
:root .cloud-chat .chat-body{gap:12px}
:root .cloud-chat :is(.chat-header, .sidebar, .conversation, .conversation-heading) {border-radius:24px}
:root .cloud-chat .conversation-heading{margin-bottom:8px}
:root .cloud-chat .input-bar{margin-top:8px;border-radius:26px}
:root :is(.cloud-chat, .cloud-account) .cloud-input {border-radius:16px}
:root :is(.cloud-chat, .cloud-account) .form-group input:not([type=checkbox]):not([type=radio]) {border-radius:16px}
:root .cloud-chat textarea.message-input{border-radius:20px}
:root :is(.cloud-chat, .cloud-account) :is(.btn-send, .btn-enter, .cloud-button, .btn-modal-secondary) {border-radius:16px}
:root :is(.cloud-chat, .cloud-account) :is(.btn-header, .btn-action, .btn-create-group, .btn-scroll-bottom) {border-radius:50%}
/* Header buttons wider than tall (the account link, every item of the compact
   menu) would turn 50% into an oval: they keep rounded rectangle corners. */
:root .cloud-chat .account-link{border-radius:var(--sys-radius-md)}
@media(max-width:1000px){:root .cloud-chat .header-menu :is(.btn-header, .account-link){border-radius:var(--sys-radius-md)}}
:root .cloud-chat :is(.connection-status, .group-item, .conversation-tools summary) {border-radius:18px}
:root .cloud-chat .message-bubble{border-radius:20px}
:root .cloud-chat .bubble-own{border-bottom-right-radius:7px}
:root .cloud-chat .bubble-other{border-bottom-left-radius:7px}
:root :is(.cloud-chat, .cloud-account) :is(.group-modal-card, .cloud-dialog, .message-actions, .message-more-menu, .expressions, .account-menu-panel, .header-menu.open, .conversation-tools form) {border-radius:20px}
:root .cloud-chat .message-actions{border-radius:16px}
:root .cloud-account .login-card{border-radius:28px}
@media(max-width:768px){
  :root .cloud-chat .chat-screen{
    gap:8px;
    padding:calc(8px + env(safe-area-inset-top)) calc(8px + env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) calc(8px + env(safe-area-inset-left));
  }
  :root .cloud-chat .chat-body{gap:0}
  :root .cloud-chat :is(.chat-header, .conversation-heading) {border-radius:22px}
  :root .cloud-chat .input-bar{border-radius:24px}
}

/* A reaction of mine keeps its accent outline over any theme pill colors. */
.cloud-chat .reaction-pill.is-mine{border-color:var(--sys-accent);background:var(--comp-pill-mine-bg)}
}